(({ className, ...props }, ref) => (
))
@@ -67,7 +67,7 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/carousel.tsx b/packages/react/src/components/carousel.tsx
index ee581e9..8c858ca 100644
--- a/packages/react/src/components/carousel.tsx
+++ b/packages/react/src/components/carousel.tsx
@@ -157,7 +157,7 @@ const CarouselItem = React.forwardRef
>(({ className, variant = 'dark', size = 'icon', ...props }, ref) => {
+const CarouselPrevious = React.forwardRef>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
return (
@@ -187,7 +187,7 @@ CarouselPrevious.displayName = 'CarouselPrevious'
const CarouselNext = React.forwardRef<
HTMLButtonElement,
React.ComponentProps
->(({ className, variant = 'dark', size = 'icon', ...props }, ref) => {
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel()
return (
diff --git a/packages/react/src/components/dialog.tsx b/packages/react/src/components/dialog.tsx
index 0cbe348..043d77f 100644
--- a/packages/react/src/components/dialog.tsx
+++ b/packages/react/src/components/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
) {
return (
)
@@ -81,7 +81,7 @@ const DialogTitle = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/input.tsx b/packages/react/src/components/input.tsx
index 54ed5d8..2015cc5 100644
--- a/packages/react/src/components/input.tsx
+++ b/packages/react/src/components/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef(({ className, type,
,
React.ComponentPropsWithoutRef &
VariantProps
->(({ variant, size, className, ...props }, ref) => (
+>(({ size, className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/menu.tsx b/packages/react/src/components/menu.tsx
index 4d80209..a49aa1b 100644
--- a/packages/react/src/components/menu.tsx
+++ b/packages/react/src/components/menu.tsx
@@ -20,7 +20,7 @@ const Menubar = React.forwardRef<
-
+
@@ -193,7 +193,7 @@ const MenubarSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index 9de8ed5..a7be464 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
span]:line-clamp-1',
className,
)}
{...props}
@@ -74,7 +74,7 @@ const SelectContent = React.forwardRef<
(({ className, ...props }, ref) => (
))
@@ -118,12 +118,12 @@ const SelectItem = React.forwardRef<
-
+
@@ -135,9 +135,10 @@ SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
->(({ ...props }, ref) => (
+>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/separator.tsx b/packages/react/src/components/separator.tsx
index 25b3feb..61ba3f6 100644
--- a/packages/react/src/components/separator.tsx
+++ b/packages/react/src/components/separator.tsx
@@ -16,7 +16,7 @@ const Separator = React.forwardRef<
decorative={decorative}
orientation={orientation}
className={cn(
- 'shrink-0 bg-black',
+ 'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className,
)}
diff --git a/packages/react/src/components/sheet.tsx b/packages/react/src/components/sheet.tsx
index 2184bbd..8d9e1ff 100644
--- a/packages/react/src/components/sheet.tsx
+++ b/packages/react/src/components/sheet.tsx
@@ -8,14 +8,16 @@ interface SheetContentProps extends React.ComponentPropsWithoutRef {}
const sheetVariants = cva(
- 'fixed z-50 gap-4 bg-dark-900 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+ 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {
- top: 'inset-x-0 top-0 border-b border-dark-700/50 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
- bottom: 'inset-x-0 bottom-0 border-t border-dark-700/50 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
- left: 'inset-y-0 left-0 h-full w-3/4 border-r border-dark-700/50 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
- right: 'inset-y-0 right-0 h-full w-3/4 border-l border-dark-700/50 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+ top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+ bottom:
+ 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+ left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+ right:
+ 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
},
},
defaultVariants: {
@@ -95,7 +97,7 @@ SheetFooter.displayName = 'SheetFooter'
const SheetTitle = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
))
@@ -105,7 +107,7 @@ SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/table.tsx b/packages/react/src/components/table.tsx
index 11a91ae..0b17ac0 100644
--- a/packages/react/src/components/table.tsx
+++ b/packages/react/src/components/table.tsx
@@ -21,7 +21,7 @@ const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
TableHeader.displayName = 'TableHeader'
@@ -32,7 +32,7 @@ const TableBody = React.forwardRef<
>(({ className, ...props }, ref) => (
))
@@ -46,7 +46,7 @@ const TableFooter = React.forwardRef<
tr]:last:border-b-0',
+ 'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
@@ -62,7 +62,7 @@ const TableRow = React.forwardRef<
[role=checkbox]]:translate-y-[2px]',
+ 'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
@@ -109,7 +109,7 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/tooltip.tsx b/packages/react/src/components/tooltip.tsx
index d8766c2..c09a3fc 100644
--- a/packages/react/src/components/tooltip.tsx
+++ b/packages/react/src/components/tooltip.tsx
@@ -1,24 +1,13 @@
import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
import { cn } from '../lib/cn'
-import { Button } from './button'
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
-function TooltipTrigger({
- className,
- ...props
-}: React.ButtonHTMLAttributes) {
- return (
-
-
-
- )
-}
-
-TooltipTrigger.displayName = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef,
@@ -28,12 +17,13 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
- 'z-50 overflow-hidden rounded-md border border-dark-500 bg-dark-900/100 px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+ 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
))
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/react/src/plugin.ts b/packages/react/src/plugin.ts
index ade5079..8ffcea7 100644
--- a/packages/react/src/plugin.ts
+++ b/packages/react/src/plugin.ts
@@ -1,6 +1,17 @@
import plugin from 'tailwindcss/plugin'
-import { config, cssBase } from '@openui-org/theme'
+import { base, config, dark, ligth } from '@openui-org/theme'
export const react = plugin(({ addBase }) => {
- addBase({ ...cssBase })
+ addBase({
+ '*': {
+ '@apply border-border': {},
+ },
+ 'body': {
+ '@apply bg-background text-foreground': {},
+ 'font-feature-settings': '"rlig" 1, "calt" 1',
+ },
+ })
+ addBase({ ...base })
+ addBase({ ...ligth })
+ addBase({ ...dark })
}, config)
diff --git a/packages/theme/src/radius.ts b/packages/theme/src/radius.ts
index 7959337..7aeac58 100644
--- a/packages/theme/src/radius.ts
+++ b/packages/theme/src/radius.ts
@@ -1,7 +1,5 @@
export const borderRadius = {
- DEFAULT: 'var(--radius)',
- sm: 'var(--radius-sm',
- md: 'var(--radius-md)',
- lg: 'var(--radius-lg)',
- full: 'var(--radius-full)',
+ lg: `var(--radius)`,
+ md: `calc(var(--radius) - 2px)`,
+ sm: 'calc(var(--radius) - 4px)',
}
diff --git a/packages/theme/src/shadcn-ui.ts b/packages/theme/src/shadcn-ui.ts
index 4e93d3a..8e57966 100644
--- a/packages/theme/src/shadcn-ui.ts
+++ b/packages/theme/src/shadcn-ui.ts
@@ -1,37 +1,64 @@
-export const cssBase = {
+export const base = {
+ ':root': {
+ /* Box Sahdow */
+ '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+ '--shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+ '--shadow-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+ '--shadow-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+ '--shadow-xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+ '--shadow-2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+ '--shadow-inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+ '--shadow-none': '0 0 rgb(0, 0 / 0, 0)',
+
+ /** Border raidus */
+ '--radius': '0.5rem',
+ },
+}
+
+export const ligth = {
':root': {
- /* Colors */
'--background': '0 0% 100%',
'--foreground': '222.2 47.4% 11.2%',
'--muted': '210 40% 96.1%',
'--muted-foreground': '215.4 16.3% 46.9%',
- '--card': '0 0% 100%',
- '--card-foreground': '222.2 47.4% 11.2%',
'--popover': '0 0% 100%',
'--popover-foreground': '222.2 47.4% 11.2%',
'--border': '214.3 31.8% 91.4%',
'--input': '214.3 31.8% 91.4%',
+ '--card': '0 0% 100%',
+ '--card-foreground': '222.2 47.4% 11.2%',
'--primary': '222.2 47.4% 11.2%',
'--primary-foreground': '210 40% 98%',
- '--ring': '215 20.2% 65.1%',
+ '--secondary': '210 40% 96.1%',
+ '--secondary-foreground': '222.2 47.4% 11.2%',
+ '--accent': '210 40% 96.1%',
+ '--accent-foreground': '222.2 47.4% 11.2%',
'--error': '0 100% 50%',
'--error-foreground': '210 40% 98%',
+ '--ring': '215 20.2% 65.1%',
+ },
+}
- /* Box Sahdow */
- '--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
- '--shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
- '--shadow-md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
- '--shadow-lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
- '--shadow-xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
- '--shadow-2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
- '--shadow-inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
- '--shadow-none': '0 0 rgb(0, 0 / 0, 0)',
-
- /** Border raidus */
- '--radius': '0.5rem',
- '--radius-sm': '0.8rem',
- '--radius-md': '0.75rem',
- '--radius-lg': '0.875rem',
- '--radius-full': '50%',
+export const dark = {
+ '.dark': {
+ '--background': '224 71% 4%',
+ '--foreground': '213 31% 91%',
+ '--muted': '223 47% 11%',
+ '--muted-foreground': '215.4 16.3% 56.9%',
+ '--accent': '216 34% 17%',
+ '--accent-foreground': '210 40% 98%',
+ '--popover': '224 71% 4%',
+ '--popover-foreground': '215 20.2% 65.1%',
+ '--border': '216 34% 17%',
+ '--input': '216 34% 17%',
+ '--card': '224 71% 4%',
+ '--card-foreground': '213 31% 91%',
+ '--primary': '210 40% 98%',
+ '--primary-foreground': '222.2 47.4% 1.2%',
+ '--secondary': '222.2 47.4% 11.2%',
+ '--secondary-foreground': '210 40% 98%',
+ '--error': '0 63% 31%',
+ '--error-foreground': '210 40% 98%',
+ '--ring': '216 34% 17%',
},
}