feat(react): add new variant ligth to components

openlitedotdev · Mar 31, 2024 · 7513684 · 7513684
1 parent 869fb55
commit 7513684
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 39 deletions.
diff --git a/examples/with-vitejs/index.html b/examples/with-vitejs/index.html
@@ -6,7 +6,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React + TS</title>
  </head>
- <body>
+ <body class="bg-black text-white">
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  </body>

diff --git a/examples/with-vitejs/src/App.tsx b/examples/with-vitejs/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from '@openui-org/react'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@openui-org/react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import imgPrueba from '/bghome.png'
@@ -10,9 +10,19 @@ function App() {
 
  return (
  <>
- <Button>
+ <Button variant="ligth">
  Examples UI
  </Button>
+ <Select>
+ <SelectTrigger>
+ <SelectValue placeholder="Theme" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectItem value="light">Light</SelectItem>
+ <SelectItem value="dark">Dark</SelectItem>
+ <SelectItem value="system">System</SelectItem>
+ </SelectContent>
+ </Select>
  <DialogCloseButton />
  <AlertDialog>
  <AlertDialogTrigger>Open</AlertDialogTrigger>
@@ -30,11 +40,11 @@ function App() {
  </AlertDialogFooter>
  </AlertDialogContent>
  </AlertDialog>
- <Badge>
+ <Badge variant="ligth">
  Examples
  </Badge>
 
- <Card className="w-96">
+ <Card className="w-96 p-2">
  <CardHeader>
  <img src={imgPrueba} alt="" className="shadow-md rounded" />
  </CardHeader>
@@ -44,9 +54,8 @@ function App() {
  </CardContent>
  <CardDescription className="text-pretty text-dark-400 m">
  iPhone 12 combines elegant design with cutting-edge technology, giving you the best mobile experience. With its A14 Bionic chip, the fastest in a smartphone, intense games and professional applications run effortlessly.
-
  </CardDescription>
- <Button className="w-full">Add To Cart</Button>
+ <Button variant="ligth" className="w-full">Add To Cart</Button>
  </Card>
  <div className="w-60">
  <div className="space-y-1">
@@ -55,6 +64,14 @@ function App() {
  An open-source UI component library.
  </p>
  </div>
+ <ScrollArea className="h-[200px] w-[350px] rounded-md">
+ Jokester began sneaking into the castle in the middle of the night and leaving
+ jokes all over the place: under the king's pillow, in his soup, even in the
+ royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
+ then, one day, the people of the kingdom discovered that the jokes left by
+ Jokester were so funny that they couldn't help but laugh. And once they
+ started laughing, they couldn't stop.
+ </ScrollArea>
  <Separator className="my-4" />
  <div className="flex h-5 items-center space-x-4 text-sm">
  <div>Blog</div>
@@ -122,19 +139,14 @@ function App() {
  <TableCell className="text-right">$250.00</TableCell>
  </TableRow>
  </TableBody>
+ <TableFooter>
+ <TableRow>
+ <TableCell colSpan={3}>Total</TableCell>
+ <TableCell className="text-right">$2,500.00</TableCell>
+ </TableRow>
+ </TableFooter>
  </Table>
 
- <Select>
- <SelectTrigger>
- <SelectValue placeholder="Theme" />
- </SelectTrigger>
- <SelectContent>
- <SelectItem value="light">Light</SelectItem>
- <SelectItem value="dark">Dark</SelectItem>
- <SelectItem value="system">System</SelectItem>
- </SelectContent>
- </Select>
-
  </>
  )
 }

diff --git a/packages/react/src/components/alert-dialog.tsx b/packages/react/src/components/alert-dialog.tsx
@@ -25,7 +25,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
  className={cn(
- 'fixed inset-0 z-50 bg-transparent data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+ 'fixed inset-0 z-50 bg-white/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
  className,
  )}
  {...props}
@@ -43,7 +43,7 @@ const AlertDialogContent = React.forwardRef<
  <AlertDialogPrimitive.Content
  ref={ref}
  className={cn(
- 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+ 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-dark-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
  className,
  )}
  {...props}
@@ -66,6 +66,7 @@ function AlertDialogHeader({
  />
  )
 }
+
 AlertDialogHeader.displayName = 'AlertDialogHeader'
 
 function AlertDialogFooter({
@@ -94,6 +95,7 @@ const AlertDialogTitle = React.forwardRef<
  {...props}
  />
 ))
+
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 
 const AlertDialogDescription = React.forwardRef<
@@ -102,7 +104,7 @@ const AlertDialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Description
  ref={ref}
- className={cn('text-sm text-muted-foreground', className)}
+ className={cn('text-sm text-dark-400', className)}
  {...props}
  />
 ))
@@ -115,7 +117,7 @@ const AlertDialogAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
  ref={ref}
- className={cn(buttonVariants({ variant: 'dark' }), className)}
+ className={cn(buttonVariants({ variant: 'ligth' }), className)}
  {...props}
  />
 ))

diff --git a/packages/react/src/components/alert.tsx b/packages/react/src/components/alert.tsx
@@ -8,10 +8,11 @@ const alertVariants = cva(
  {
  variants: {
  variant: {
- dark: 'bg-dark-900 text-white',
- error: 'bg-error-500 dark:bg-error-500',
- success: 'bg-success-500 dark:bg-success-500',
- warn: 'bg-warn-500 dark:bg-warn-500',
+ dark: 'bg-dark-900 text-white hover:bg-dark-900/90',
+ error: 'bg-error-500 dark:bg-error-500 hover:bg-error-500/90',
+ success: 'bg-success-500 dark:bg-success-500 hover:bg-success-500/90',
+ warn: 'bg-warn-500 dark:bg-warn-500 hover:bg-warn-500/90',
+ ligth: 'bg-white dark:bg-white hover:bg-white/90',
  },
  },
  defaultVariants: {

diff --git a/packages/react/src/components/badge.tsx b/packages/react/src/components/badge.tsx
@@ -4,7 +4,7 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../lib/cn'
 
 const badgeVariants = cva(
- 'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-white shadow',
+ 'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-white shadow cursor-pointer',
  {
  variants: {
  variant: {
@@ -14,6 +14,7 @@ const badgeVariants = cva(
  dark: 'bg-dark-900 hover:bg-dark-900/90',
  warn: 'bg-warn-500 hover:bg-warn-500/90',
  error: 'bg-error-500 hover:bg-error-500/90',
+ ligth: 'bg-white hover:bg-white/90 text-black',
  },
  },
  defaultVariants: {

diff --git a/packages/react/src/components/card.tsx b/packages/react/src/components/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
  <div
  ref={ref}
  className={cn(
- 'rounded-xl shadow border border-dark-900/80',
+ 'rounded-xl shadow border border-dark-700/50',
  className,
  )}
  {...props}

diff --git a/packages/react/src/components/dialog.tsx b/packages/react/src/components/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
  ref={ref}
  className={cn(
- 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+ 'fixed inset-0 z-50 bg-white/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
  className,
  )}
  {...props}

diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
  <SelectPrimitive.Trigger
  ref={ref}
  className={cn(
- 'flex h-9 w-40 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm',
+ 'flex h-9 w-40 items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm border-dark-700/50',
  className,
  )}
  {...props}
@@ -74,7 +74,7 @@ const SelectContent = React.forwardRef<
  <SelectPrimitive.Content
  ref={ref}
  className={cn(
- 'relative z-50 rounded-md bg-white shadow-md ',
+ 'relative z-50 rounded-md bg-dark-900 shadow-md ',
  position === 'popper'
  && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
  className,
@@ -96,6 +96,7 @@ const SelectContent = React.forwardRef<
  </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
 ))
+
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
 const SelectLabel = React.forwardRef<
@@ -117,7 +118,7 @@ const SelectItem = React.forwardRef<
  <SelectPrimitive.Item
  ref={ref}
  className={cn(
- 'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-2 pr-8 text-sm hover:bg-dark-100/80',
+ 'relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pl-2 pr-8 text-sm hover:bg-dark-700/50',
  className,
  )}
  {...props}
@@ -140,6 +141,7 @@ const SelectSeparator = React.forwardRef<
  {...props}
  />
 ))
+
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {

diff --git a/packages/react/src/components/table.tsx b/packages/react/src/components/table.tsx
@@ -9,11 +9,12 @@ const Table = React.forwardRef<
  <div className="relative w-full overflow-auto">
  <table
  ref={ref}
- className={cn('w-full caption-bottom text-sm bg-dark-900/80 text-white', className)}
+ className={cn('w-full caption-bottom text-sm', className)}
  {...props}
  />
  </div>
 ))
+
 Table.displayName = 'Table'
 
 const TableHeader = React.forwardRef<
@@ -22,6 +23,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <thead ref={ref} className={cn(className)} {...props} />
 ))
+
 TableHeader.displayName = 'TableHeader'
 
 const TableBody = React.forwardRef<
@@ -30,10 +32,11 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <tbody
  ref={ref}
- className={cn('[&_tr:last-child]:border-0 hover:bg-dark-700/80 font-bold', className)}
+ className={cn(className)}
  {...props}
  />
 ))
+
 TableBody.displayName = 'TableBody'
 
 const TableFooter = React.forwardRef<
@@ -43,12 +46,13 @@ const TableFooter = React.forwardRef<
  <tfoot
  ref={ref}
  className={cn(
- 'border-t font-medium [&>tr]:last:border-b-0',
+ 'border-t border-dark-700/50 bg-dark-800/50 font-medium [&>tr]:last:border-b-0',
  className,
  )}
  {...props}
  />
 ))
+
 TableFooter.displayName = 'TableFooter'
 
 const TableRow = React.forwardRef<
@@ -58,12 +62,13 @@ const TableRow = React.forwardRef<
  <tr
  ref={ref}
  className={cn(
- 'border-b transition-colors border-white',
+ 'border-b border-dark-700/50 transition-colors hover:bg-dark-800/60',
  className,
  )}
  {...props}
  />
 ))
+
 TableRow.displayName = 'TableRow'
 
 const TableHead = React.forwardRef<
@@ -73,12 +78,13 @@ const TableHead = React.forwardRef<
  <th
  ref={ref}
  className={cn(
- 'h-10 px-2 text-left align-middle font-medium text-white [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+ 'h-12 px-4 text-left align-middle font-medium text-dark-200 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
  className,
  )}
  {...props}
  />
 ))
+
 TableHead.displayName = 'TableHead'
 
 const TableCell = React.forwardRef<
@@ -88,12 +94,13 @@ const TableCell = React.forwardRef<
  <td
  ref={ref}
  className={cn(
- 'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+ 'p-4 align-middle [&:has([role=checkbox])]:pr-0',
  className,
  )}
  {...props}
  />
 ))
+
 TableCell.displayName = 'TableCell'
 
 const TableCaption = React.forwardRef<
@@ -102,7 +109,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <caption
  ref={ref}
- className={cn('mt-4 text-sm text-muted-foreground text-black', className)}
+ className={cn('mt-4 text-sm text-dark-500/90', className)}
  {...props}
  />
 ))

diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -18,3 +18,4 @@ export * from './components/select'
 export * from './components/card'
 export * from './components/separator'
 export * from './components/checkbox'
+export * from './components/scroll-area'