diff --git a/examples/with-vitejs/index.html b/examples/with-vitejs/index.html index e4b78ea..bcd079d 100644 --- a/examples/with-vitejs/index.html +++ b/examples/with-vitejs/index.html @@ -6,7 +6,7 @@ Vite + React + TS - +
diff --git a/examples/with-vitejs/src/App.tsx b/examples/with-vitejs/src/App.tsx index 107d659..9f33085 100644 --- 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 ( <> - + Open @@ -30,11 +40,11 @@ function App() { - + Examples - + @@ -44,9 +54,8 @@ function App() { 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. - - +
@@ -55,6 +64,14 @@ function App() { An open-source UI component library.

+ + 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. +
Blog
@@ -122,19 +139,14 @@ function App() { $250.00 + + + Total + $2,500.00 + + - - ) } diff --git a/packages/react/src/components/alert-dialog.tsx b/packages/react/src/components/alert-dialog.tsx index 66853db..7608bde 100644 --- 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) => ( ) } + 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) => ( )) @@ -115,7 +117,7 @@ const AlertDialogAction = React.forwardRef< >(({ className, ...props }, ref) => ( )) diff --git a/packages/react/src/components/alert.tsx b/packages/react/src/components/alert.tsx index ebf7fab..ba72c77 100644 --- 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 index 1b01a8e..e1dce66 100644 --- 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 index f270e88..2cc6e2f 100644 --- a/packages/react/src/components/card.tsx +++ b/packages/react/src/components/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
)) + SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< @@ -117,7 +118,7 @@ const SelectItem = React.forwardRef< )) + SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { diff --git a/packages/react/src/components/table.tsx b/packages/react/src/components/table.tsx index 31565a6..11a91ae 100644 --- a/packages/react/src/components/table.tsx +++ b/packages/react/src/components/table.tsx @@ -9,11 +9,12 @@ const Table = React.forwardRef<
)) + Table.displayName = 'Table' const TableHeader = React.forwardRef< @@ -22,6 +23,7 @@ const TableHeader = React.forwardRef< >(({ className, ...props }, ref) => ( )) + TableHeader.displayName = 'TableHeader' const TableBody = React.forwardRef< @@ -30,10 +32,11 @@ const TableBody = React.forwardRef< >(({ className, ...props }, ref) => ( )) + TableBody.displayName = 'TableBody' const TableFooter = React.forwardRef< @@ -43,12 +46,13 @@ const TableFooter = React.forwardRef< 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< )) + TableRow.displayName = 'TableRow' const TableHead = React.forwardRef< @@ -73,12 +78,13 @@ const TableHead = React.forwardRef<
[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< [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) => (
)) diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index bb40ce4..6cc3969 100644 --- 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'