feat: improve color default

docs/components/demo.tsx

@@ -14,10 +14,11 @@ import {
 import { AlertDemo } from './examples/alert'
 import { MultipleComponentDemo } from './examples/multiple-components'
 import { TableDemo } from './examples/table'
+import useThemeStore from '@/stores/color-picker'
 
 export default function Component() {
   const [activeTab, setActiveTab] = useState('account')
-
+  const { currentTheme } = useThemeStore()
   return (
     <div className="w-full max-w-6xl mx-auto p-4 space-y-4">
 
@@ -42,7 +43,7 @@ export default function Component() {
                     <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
                     <Input type="password" id="username" defaultValue="*******" />
                   </div>
-                  <Button>Login</Button>
+                  <Button variant={currentTheme}>Login</Button>
                 </div>
               </TabsContent>
               <TabsContent value="password" className="p-4">
@@ -57,7 +58,7 @@ export default function Component() {
                     <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
                     <Input type="password" id="username" defaultValue="*******" />
                   </div>
-                  <Button>Save account</Button>
+                  <Button variant={currentTheme}>Save account</Button>
                 </div>
               </TabsContent>
             </Tabs>

docs/components/examples/alert.tsx

@@ -1,10 +1,15 @@
+'use client'
+
 import { Alert, AlertDescription, AlertTitle } from '@openlite/ui'
 import { Chat } from '../icons/chat'
+import useThemeStore from '@/stores/color-picker'
 
 export function AlertDemo() {
+  const { currentTheme } = useThemeStore()
+
   return (
 
-    <Alert>
+    <Alert variant={currentTheme}>
       <Chat />
       <AlertTitle>You have a notification</AlertTitle>
       <AlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, asperiores. </AlertDescription>

docs/components/examples/multiple-components.tsx

@@ -33,6 +33,7 @@ import { ArrowRight } from '../icons/arrow-right'
 import { Search } from '../icons/search'
 import { DialogDemo } from './dialog'
 import { ProgressDemo } from './progress'
+import useThemeStore from '@/stores/color-picker'
 
 const items = [
   'https://picsum.photos/100/100?random=1',
@@ -44,6 +45,7 @@ const items = [
 ]
 
 export function MultipleComponentDemo() {
+  const { currentTheme } = useThemeStore()
   return (
     <Card>
       <CardContent>
@@ -68,7 +70,7 @@ export function MultipleComponentDemo() {
             </Avatar>
           </div>
 
-          <Badge>Badge</Badge>
+          <Badge variant={currentTheme}>Badge</Badge>
           <div className="w-full relative border border-default-300 rounded-medium">
             <Input type="search" placeholder="Search..." border="none" />
             <Search className="absolute top-2.5 right-4" />
@@ -90,10 +92,10 @@ export function MultipleComponentDemo() {
             </Tooltip>
           </TooltipProvider>
           <DialogDemo />
-          <Button className="">Read more</Button>
+          <Button variant={currentTheme}>Read more</Button>
         </div>
         <header className="py-5 flex flex-col gap-4">
-          <Slider defaultValue={[50]} max={100} step={1} />
+          <Slider variant={currentTheme} defaultValue={[50]} max={100} step={1} />
           <ProgressDemo />
         </header>
         <div className="pt-5 md:flex items-center justify-center hidden">

docs/components/examples/progress.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react'
 import { Progress } from '@openlite/ui'
+import useThemeStore from '@/stores/color-picker'
 
 export function ProgressDemo() {
   const [progress, setProgress] = useState(13)
+  const { currentTheme } = useThemeStore()
 
   useEffect(() => {
     const timer = setTimeout(() => setProgress(66), 500)
     return () => clearTimeout(timer)
   }, [])
 
-  return <Progress value={progress} className="w-[60%]" />
+  return <Progress variant={currentTheme} value={progress} className="w-[60%]" />
 }

docs/components/examples/table.tsx

@@ -9,8 +9,10 @@ import {
   TableHeader,
   TableRow,
 } from '@openlite/ui'
+import useThemeStore from '@/stores/color-picker'
 
 export function TableDemo() {
+  const { currentTheme } = useThemeStore()
   return (
     <Card>
       <CardContent className="w-full">
@@ -34,7 +36,7 @@ export function TableDemo() {
               { id: 5, name: 'Leonard Krasner', title: 'Senior Designer', email: 'leonard.krasner@example.com', role: 'Owner' },
             ].map(person => (
               <TableRow key={person.id}>
-                <TableCell><Checkbox checked={person.id === 2} /></TableCell>
+                <TableCell><Checkbox variant={currentTheme} checked={person.id === 2} /></TableCell>
                 <TableCell>{person.id}</TableCell>
                 <TableCell>{person.name}</TableCell>
                 <TableCell>{person.title}</TableCell>

docs/components/header.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link'
-import { Button, Sheet, SheetContent, SheetTrigger } from '@openlite/ui'
+import { Sheet, SheetContent, SheetTrigger } from '@openlite/ui'
 
 import { MenuIcon } from 'lucide-react'
+import { LinkRepo } from './link-repo'
 
 const links = [
   { label: 'Documentation', href: 'https://ui.openlabs.online/docs/' },
@@ -21,19 +22,6 @@ function SubMenu({ classes }: { classes: string }) {
   )
 }
 
-function LinkRepo({ classes }: { classes: string }) {
-  return (
-    <div className={classes}>
-
-      <Button asChild size="icon" outline="default" className="hover:bg-default hover:text-default-foreground">
-        <Link href="https://github.com/openlitedotdev/ui">
-          <svg viewBox="0 0 438.549 438.549" className="size-4"><path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path></svg>
-        </Link>
-      </Button>
-    </div>
-  )
-}
-
 function SidebarMenuMobile() {
   return (
     <nav className="block md:hidden ml-auto">
@@ -54,7 +42,7 @@ function SidebarMenuMobile() {
 
 export function Header() {
   return (
-    <header className="px-4 lg:px-6 flex items-center gap-x-14 text-neutral-500 dark:text-white py-3">
+    <header className="px-4 lg:px-6 flex items-center gap-x-14 text-neutral-500 py-3 sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <SubMenu classes="hidden md:ml-auto md:flex gap-4 sm:gap-6" />
       <LinkRepo classes="hidden md:flex items-center justify-center gap-4" />
       <SidebarMenuMobile />

docs/components/icons/color-picker.tsx

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+
+export function ColorPicker(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M17.58 9.71a6 6 0 0 0-7.16 3.58m7.16-3.58A6 6 0 1 1 12 19.972M17.58 9.71a6 6 0 1 0-11.16 0m4 3.58A6 6 0 0 0 10 15.5c0 1.777.773 3.374 2 4.472m-1.58-6.682a6.01 6.01 0 0 1-4-3.58m0 0A6 6 0 1 0 12 19.972" color="currentColor"></path></svg>
+  )
+}

docs/components/icons/github.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function Github(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1.2rem" height="1.2rem" viewBox="0 0 24 24" {...props}>
+      <g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor">
+        <path d="M10 20.568c-3.429 1.157-6.286 0-8-3.568"></path>
+        <path d="M10 22v-3.242c0-.598.184-1.118.48-1.588c.204-.322.064-.78-.303-.88C7.134 15.452 5 14.107 5 9.645c0-1.16.38-2.25 1.048-3.2c.166-.236.25-.354.27-.46c.02-.108-.015-.247-.085-.527c-.283-1.136-.264-2.343.16-3.43c0 0 .877-.287 2.874.96c.456.285.684.428.885.46s.469-.035 1.005-.169A9.5 9.5 0 0 1 13.5 3a9.6 9.6 0 0 1 2.343.28c.536.134.805.2 1.006.169c.2-.032.428-.175.884-.46c1.997-1.247 2.874-.96 2.874-.96c.424 1.087.443 2.294.16 3.43c-.07.28-.104.42-.084.526s.103.225.269.461c.668.95 1.048 2.04 1.048 3.2c0 4.462-2.134 5.807-5.177 6.643c-.367.101-.507.559-.303.88c.296.47.48.99.48 1.589V22"></path>
+      </g>
+    </svg>
+  )
+}

docs/components/link-repo.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Button, Select, SelectContent, SelectItem, SelectTrigger } from '@openlite/ui'
+import Link from 'next/link'
+import { ColorPicker } from './icons/color-picker'
+import { Github } from './icons/github'
+import type { Variant } from '@/stores/color-picker'
+import useThemeStore from '@/stores/color-picker'
+
+export function LinkRepo({ classes }: { classes: string }) {
+  const { themes, setTheme, currentTheme } = useThemeStore()
+  return (
+    <div className={classes}>
+      <Select value={currentTheme} onValueChange={(e: Variant) => setTheme(e)}>
+        <SelectTrigger hiddenIcon size="icon">
+          <ColorPicker />
+        </SelectTrigger>
+        <SelectContent>
+          {themes.map((theme, index) => (
+            <SelectItem value={theme.value} key={index}>{theme.label}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Button asChild size="icon" outline="default" className="hover:bg-default hover:text-default-foreground">
+        <Link href="https://github.com/openlitedotdev/ui">
+          <Github />
+        </Link>
+      </Button>
+    </div>
+  )
+}

docs/stores/color-picker.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+
+export type Variant = 'default' | 'primary' | 'success' | 'warn' | 'error'
+
+interface Theme {
+  value: Variant
+  label: string
+}
+
+interface ThemeStore {
+  themes: Theme[]
+  currentTheme: Variant
+  setTheme: (theme: Variant) => void
+}
+
+const useThemeStore = create<ThemeStore>()(
+  persist(
+    set => ({
+      themes: [
+        { value: 'default', label: 'Default' },
+        { value: 'primary', label: 'Primary' },
+        { value: 'success', label: 'Success' },
+        { value: 'warn', label: 'Warn' },
+        { value: 'error', label: 'Error' },
+      ],
+      currentTheme: 'default',
+      setTheme: (theme) => {
+        set({ currentTheme: theme })
+      },
+    }),
+    {
+      name: 'open-theme',
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+)
+
+export default useThemeStore

package.json

@@ -73,7 +73,8 @@
     "lodash.kebabcase": "4.1.1",
     "lodash.mapkeys": "4.6.0",
     "lodash.omit": "4.5.0",
-    "tailwind-merge": "2.2.2"
+    "tailwind-merge": "2.2.2",
+    "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "2.19.1",

src/components/elements/progress/progress-indicator.tsx

@@ -7,7 +7,7 @@ export interface Comp extends React.ElementRef<typeof ProgressPrimitive.Indicato
 export interface Props extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Indicator>,
   VariantProps<typeof progressIndicator> {
   value: number
-  variant?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
+  variant: 'default' | 'error' | 'primary' | 'success' | 'warn'
 }
 
 const ProgressIndicator = React.forwardRef<Comp, Props>(({ className, value, variant }, ref) => (

src/components/elements/progress/progress.tsx

@@ -9,10 +9,10 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof ProgressPri
   VariantProps<typeof progress> {
   labelText?: boolean
   value: number
-  variant?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
+  variant: 'default' | 'error' | 'primary' | 'success' | 'warn'
 }
 
-const Progress = React.forwardRef<Comp, Props>(({ className, labelText = false, size, variant, value, ...props }, ref) => (
+const Progress = React.forwardRef<Comp, Props>(({ className, labelText = false, size, variant = 'default', value, ...props }, ref) => (
   <div className="flex flex-col gap-1">
     {labelText && (
       <label className="flex justify-between w-full">

src/components/forms/select/select-trigger.tsx

@@ -3,19 +3,21 @@ import * as SelectPrimitive from '@radix-ui/react-select'
 import { cn, selectTrigger } from '@/tailwind'
 import type { VariantProps } from '@/tailwind'
 
-export interface Props extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
-  VariantProps<typeof selectTrigger> {}
 export interface Comp extends React.ElementRef<typeof SelectPrimitive.Trigger> {}
+export interface Props extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
+  VariantProps<typeof selectTrigger> {
+  hiddenIcon?: boolean
+}
 
-const SelectTrigger = React.forwardRef<Comp, Props>(({ className, variant, children, ...props }, ref) => {
+const SelectTrigger = React.forwardRef<Comp, Props>(({ className, variant, children, size, hiddenIcon = false, ...props }, ref) => {
   return (
     <SelectPrimitive.Trigger
       ref={ref}
-      className={cn(selectTrigger({ variant }), className)}
+      className={cn(selectTrigger({ variant, size }), className)}
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon asChild>
+      <SelectPrimitive.Icon asChild className={`${hiddenIcon ? 'hidden' : ''}`}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.2rem" height="1.2rem" color="foreground" fill="none">
           <path d="M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>

src/components/navigations/tabs/tabs-trigger.tsx

@@ -7,11 +7,11 @@ export interface Comp extends React.ElementRef<typeof TabsPrimitive.Trigger> {}
 export interface Props extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
   VariantProps<typeof tabsTrigger> {}
 
-const TabsTrigger = React.forwardRef<Comp, Props>(({ className, variant, ...props }, ref) => {
+const TabsTrigger = React.forwardRef<Comp, Props>(({ className, ...props }, ref) => {
   return (
     <TabsPrimitive.Trigger
       ref={ref}
-      className={cn(tabsTrigger({ variant }), className)}
+      className={cn(tabsTrigger(), className)}
 
       {...props}
     />