Merge pull request #57 from castrogarciajs/main

close #56
openlitedotdev · Mar 31, 2024 · c45ec9f · c45ec9f
2 parents 442a734 + 7513684
commit c45ec9f
Show file tree

Hide file tree

Showing 14 changed files with 153 additions and 40 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/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @openui-org/react
 
+## 0.10.3
+
+### Patch Changes
+
+- Remove p-6 in component card
+
 ## 0.10.2
 
 ### Patch Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@openui-org/react",
  "type": "module",
- "version": "0.10.2",
+ "version": "0.10.3",
  "description": "",
  "author": "",
  "license": "MIT",
@@ -27,6 +27,7 @@
  "@radix-ui/react-checkbox": "1.0.4",
  "@radix-ui/react-dialog": "1.0.5",
  "@radix-ui/react-label": "2.0.2",
+ "@radix-ui/react-scroll-area": "1.0.5",
  "@radix-ui/react-select": "2.0.0",
  "@radix-ui/react-separator": "1.0.3",
  "@radix-ui/react-slot": "1.0.2",

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/scroll-area.tsx b/packages/react/src/components/scroll-area.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '../lib/cn'
+
+const ScrollBar = React.forwardRef<
+ React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+ <ScrollAreaPrimitive.ScrollAreaScrollbar
+ ref={ref}
+ orientation={orientation}
+ className={cn(
+ 'flex touch-none select-none transition-colors',
+ orientation === 'vertical'
+ && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+ orientation === 'horizontal'
+ && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+ className,
+ )}
+ {...props}
+ >
+ <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+ </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+const ScrollArea = React.forwardRef<
+ React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+ <ScrollAreaPrimitive.Root
+ ref={ref}
+ className={cn('relative overflow-hidden', className)}
+ {...props}
+ >
+ <ScrollAreaPrimitive.Viewport className="h-full w-full">
+ {children}
+ </ScrollAreaPrimitive.Viewport>
+ <ScrollBar />
+ <ScrollAreaPrimitive.Corner />
+ </ScrollAreaPrimitive.Root>
+))
+
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+export { ScrollArea, ScrollBar }
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 {