@byyuurin/ui 0.0.8 → 0.0.9

package/dist/runtime/theme/breadcrumb.js

@@ -6,19 +6,19 @@ export default ct(
       root: "relative min-w-0",
       list: "flex items-center gap-1.5",
       item: "flex min-w-0",
-      link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-ui-cp",
+      link: "group relative flex items-center gap-1.5 text-sm min-w-0 focus-visible:outline-ui-primary",
       linkLeadingIcon: "shrink-0 size-5",
       linkLabel: "truncate",
       separator: "flex",
-      separatorIcon: "shrink-0 size-5 color-ui-cb/60"
+      separatorIcon: "shrink-0 size-5 color-ui-base/60"
     },
     variants: {
       active: {
         true: {
-          link: "text-ui-cp font-semibold"
+          link: "color-ui-primary font-semibold"
         },
         false: {
-          link: "color-ui-cb/60 font-medium"
+          link: "color-ui-base/60 font-medium"
         }
       },
       disabled: {
@@ -36,7 +36,7 @@ export default ct(
         active: false,
         to: true,
         class: {
-          link: "hover:color-ui-cb/80 transition-colors"
+          link: "hover:color-ui-base/80 transition-colors"
         }
       }
     ]

package/dist/runtime/theme/button.js

@@ -6,7 +6,7 @@ export default ct(
     slots: {
       base: [
         "relative inline-flex items-center rounded-ui-button leading-normal transition-colors",
-        "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb/80",
+        "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-base/80",
         "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50"
       ],
       label: "color-inherit",
@@ -26,26 +26,26 @@ export default ct(
         },
         "outline": {
           base: [
-            "color-ui-fill/80 bg-ui-cx ring ring-inset ring-ui-fill/30",
+            "color-ui-fill/80 bg-ui-base ring ring-inset ring-ui-fill/30",
             "hover:bg-soft-ui-fill/5 active:bg-soft-ui-fill/10",
-            "disabled:bg-ui-cx aria-disabled:bg-ui-cx",
-            "hover:disabled:bg-ui-cx hover:aria-disabled:bg-ui-cx"
+            "disabled:bg-ui-base aria-disabled:bg-ui-base",
+            "hover:disabled:bg-ui-base hover:aria-disabled:bg-ui-base"
           ]
         },
         "soft": {
           base: [
-            "color-ui-content/80 bg-soft-ui-fill/15",
-            "hover:bg-soft-ui-fill/10 hover:color-ui-content/80 active:bg-soft-ui-fill/25 active:color-ui-content/90",
-            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-content/80 aria-disabled:color-ui-content/80",
-            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-content/80 hover:aria-disabled:color-ui-content/80"
+            "color-ui-fill/80 bg-soft-ui-fill/15",
+            "hover:bg-soft-ui-fill/10 hover:color-ui-fill/80 active:bg-soft-ui-fill/25 active:color-ui-fill/90",
+            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-fill/80 aria-disabled:color-ui-fill/80",
+            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-fill/80 hover:aria-disabled:color-ui-fill/80"
           ]
         },
         "soft-outline": {
           base: [
-            "color-ui-content/80 bg-soft-ui-fill/15 ring ring-inset ring-ui-fill/30",
-            "hover:bg-soft-ui-fill/10 hover:color-ui-content/80 active:bg-soft-ui-fill/25 active:color-ui-content/90",
-            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-content/80 aria-disabled:color-ui-content/80",
-            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-content/80 hover:aria-disabled:color-ui-content/80"
+            "color-ui-fill/80 bg-soft-ui-fill/15 ring ring-inset ring-ui-fill/30",
+            "hover:bg-soft-ui-fill/10 hover:color-ui-fill/80 active:bg-soft-ui-fill/25 active:color-ui-fill/90",
+            "disabled:bg-soft-ui-fill/15 aria-disabled:bg-soft-ui-fill/15 disabled:color-ui-fill/80 aria-disabled:color-ui-fill/80",
+            "hover:disabled:bg-soft-ui-fill/15 hover:aria-disabled:bg-soft-ui-fill/15 hover:disabled:color-ui-fill/80 hover:aria-disabled:color-ui-fill/80"
           ]
         },
         "ghost": {
@@ -128,7 +128,7 @@ export default ct(
         active: true,
         variant: ["soft", "soft-outline"],
         class: {
-          base: "color-ui-content/90 bg-soft-ui-fill/25 hover:color-ui-content/90 hover:bg-soft-ui-fill/25"
+          base: "color-ui-fill/90 bg-soft-ui-fill/25 hover:color-ui-fill/90 hover:bg-soft-ui-fill/25"
         }
       },
       {

package/dist/runtime/theme/calendar.d.ts

@@ -0,0 +1,56 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        header: string;
+        body: string;
+        heading: string;
+        grid: string;
+        gridRow: string;
+        gridWeekDaysRow: string;
+        gridBody: string;
+        headCell: string;
+        cell: string;
+        cellTrigger: string[];
+    };
+    variants: {
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        readonly: {
+            true: {
+                cellTrigger: string;
+            };
+        };
+        disabled: {
+            true: {
+                cellTrigger: string;
+            };
+        };
+    };
+    compoundVariants: {
+        readonly: boolean;
+        disabled: boolean;
+        class: {
+            cellTrigger: string;
+        };
+    }[];
+    defaultVariants: {
+        size: "md";
+    };
+};
+export default _default;

package/dist/runtime/theme/calendar.js

@@ -0,0 +1,69 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "",
+      header: "flex items-center justify-between",
+      body: "flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0",
+      heading: "text-center font-medium truncate mx-auto",
+      grid: "w-full border-collapse select-none space-y-1 focus:outline-none",
+      gridRow: "grid gap-1 grid-cols-7",
+      gridWeekDaysRow: "mb-1 grid gap-1 w-full grid-cols-7",
+      gridBody: "grid",
+      headCell: "rounded-ui-base color-ui-fill",
+      cell: "relative text-center color-ui-base/80",
+      cellTrigger: [
+        "relative size-2.25em flex items-center justify-center rounded-ui-button whitespace-nowrap transition",
+        "focus-visible:ring-2 focus-visible:ring-ui-base/90 focus:outline-none",
+        "data-[disabled]:color-ui-base/50 data-[disabled]:cursor-not-allowed",
+        "data-[unavailable]:line-through data-[unavailable]:color-ui-base/50 data-[unavailable]:cursor-not-allowed",
+        "data-[selected]:color-ui-cx data-[selected]:bg-soft-ui-fill/95",
+        "data-[today]:font-semibold data-[today]:not-[[data-selected]]:color-ui-fill/95",
+        "data-[highlighted]:bg-soft-ui-fill/20",
+        "data-[outside-view]:color-ui-base/20"
+      ]
+    },
+    variants: {
+      size: {
+        xs: {
+          root: "text-xs"
+        },
+        sm: {
+          root: "text-sm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
+      },
+      readonly: {
+        true: {
+          cellTrigger: "cursor-default data-[today]:not-[[data-selected]]:color-ui-fill/60"
+        }
+      },
+      disabled: {
+        true: {
+          cellTrigger: "data-[today]:not-[[data-selected]]:color-ui-fill/60 data-[selected]:bg-soft-ui-fill/50"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        disabled: false,
+        class: {
+          cellTrigger: "hover:not-[[data-selected],[data-disabled],[data-unavailable]]:bg-soft-ui-fill/10"
+        }
+      }
+    ],
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);

package/dist/runtime/theme/card.js

@@ -17,16 +17,16 @@ export default ct(
           description: "color-ui-cx/80"
         },
         "outline": {
-          root: "color-ui-content bg-ui-cx divide-ui-content/20 ring ring-inset ring-ui-fill/20",
-          description: "color-ui-content/80"
+          root: "color-ui-fill bg-ui-base divide-ui-fill/20 ring ring-inset ring-ui-fill/20",
+          description: "color-ui-fill/80"
         },
         "soft": {
-          root: "color-ui-content bg-soft-ui-fill/10 divide-ui-content/20",
-          description: "color-ui-content/80"
+          root: "color-ui-fill bg-soft-ui-fill/10 divide-ui-fill/20",
+          description: "color-ui-fill/80"
         },
         "soft-outline": {
-          root: "color-ui-content bg-soft-ui-fill/10 divide-ui-content/20 ring ring-inset ring-ui-fill/20",
-          description: "color-ui-content/80"
+          root: "color-ui-fill bg-soft-ui-fill/10 divide-ui-fill/20 ring ring-inset ring-ui-fill/20",
+          description: "color-ui-fill/80"
         }
       }
     },

package/dist/runtime/theme/carousel.js

@@ -35,7 +35,7 @@ export default ct(
       },
       active: {
         true: {
-          dot: "bg-soft-ui-content"
+          dot: "bg-ui-fill"
         }
       }
     }

package/dist/runtime/theme/checkbox.js

@@ -5,15 +5,15 @@ export default ct(
     slots: {
       root: "relative flex items-start",
       base: [
-        "size-1.25em shrink-0 flex items-center justify-center rounded-ui-checkbox color-ui-cx ring-2 ring-ui-content ring-inset bg-soft-ui-content",
-        "outline-none focus-visible:outline-ui-cb/80 focus-visible:outline-2 focus-visible:outline-offset-2",
-        "aria-[checked=false]:ring-1 aria-[checked=false]:ring-ui-cb aria-[checked=false]:bg-ui-cx"
+        "size-1.25em shrink-0 flex items-center justify-center rounded-ui-checkbox color-ui-cx ring-2 ring-ui-fill ring-inset bg-ui-fill",
+        "outline-none focus-visible:outline-ui-base/80 focus-visible:outline-2 focus-visible:outline-offset-2",
+        "aria-[checked=false]:ring-1 aria-[checked=false]:ring-ui-base aria-[checked=false]:bg-ui-base"
       ],
       container: "flex items-center h-1.25em overflow-hidden",
       wrapper: "text-inherit ms-2",
       icon: "color-ui-cx shrink-0 size-1em transition data-[state=unchecked]:translate-y-full",
-      label: "flex color-ui-cb after:content-empty",
-      description: "color-ui-cb/60"
+      label: "flex color-ui-base after:content-empty",
+      description: "color-ui-base/60"
     },
     variants: {
       size: {

package/dist/runtime/theme/chip.js

@@ -16,13 +16,13 @@ export default ct(
           base: "color-ui-cx bg-soft-ui-fill/90"
         },
         "outline": {
-          base: "color-ui-fill bg-ui-cx ring ring-inset ring-ui-fill/30"
+          base: "color-ui-fill bg-ui-base ring ring-inset ring-ui-fill/30"
         },
         "soft": {
-          base: "color-ui-content/80 bg-soft-ui-fill/10"
+          base: "color-ui-fill/80 bg-soft-ui-fill/10"
         },
         "soft-outline": {
-          base: "color-ui-content/80 bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
+          base: "color-ui-fill/80 bg-soft-ui-fill/10 ring ring-inset ring-ui-fill/30"
         }
       },
       size: {

package/dist/runtime/theme/drawer.d.ts

@@ -3,31 +3,32 @@ declare const _default: {
     slots: {
         overlay: string;
         content: string;
-        handle: string;
         container: string;
         header: string;
-        title: string;
-        description: string;
         body: string;
         footer: string;
+        title: string;
+        description: string;
+        close: string;
     };
     variants: {
         direction: {
             top: {
                 content: string;
-                handle: string;
             };
             bottom: {
                 content: string;
-                handle: string;
             };
             left: {
                 content: string;
-                handle: string;
             };
             right: {
                 content: string;
-                handle: string;
+            };
+        };
+        transition: {
+            true: {
+                overlay: string;
             };
         };
         inset: {
@@ -40,19 +41,20 @@ declare const _default: {
         direction: {
             top: {
                 content: string;
-                handle: string;
             };
             bottom: {
                 content: string;
-                handle: string;
             };
             left: {
                 content: string;
-                handle: string;
             };
             right: {
                 content: string;
-                handle: string;
+            };
+        };
+        transition: {
+            true: {
+                overlay: string;
             };
         };
         inset: {
@@ -63,31 +65,32 @@ declare const _default: {
     }, {
         overlay: string;
         content: string;
-        handle: string;
         container: string;
         header: string;
-        title: string;
-        description: string;
         body: string;
         footer: string;
+        title: string;
+        description: string;
+        close: string;
     }, undefined>;
     defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
         direction: {
             top: {
                 content: string;
-                handle: string;
             };
             bottom: {
                 content: string;
-                handle: string;
             };
             left: {
                 content: string;
-                handle: string;
             };
             right: {
                 content: string;
-                handle: string;
+            };
+        };
+        transition: {
+            true: {
+                overlay: string;
             };
         };
         inset: {
@@ -98,13 +101,13 @@ declare const _default: {
     }, {
         overlay: string;
         content: string;
-        handle: string;
         container: string;
         header: string;
-        title: string;
-        description: string;
         body: string;
         footer: string;
+        title: string;
+        description: string;
+        close: string;
     }>;
 };
 export default _default;

package/dist/runtime/theme/drawer.js

@@ -4,32 +4,33 @@ export default ct(
   {
     slots: {
       overlay: "fixed z-1 inset-0 bg-black/40",
-      content: "fixed z-1 bg-ui-cx ring ring-ui-cb/5 flex focus:outline-none",
-      handle: "shrink-0 rounded-full bg-soft-ui-cb/17.5",
+      content: "fixed z-1 bg-ui-base ring ring-ui-base/5 flex focus:outline-none",
       container: "w-full flex flex-col overflow-hidden overflow-y-auto",
-      header: "p-4 sm:px-6 sibling:pt-0",
-      title: "color-ui-cb text-xl font-semibold",
-      description: "mt-1 color-ui-cb/80",
-      body: "p-4 sm:px-6 flex-1 sibling:pt-0",
-      footer: "p-4 sm:px-6 flex flex-col gap-1.5"
+      header: "flex flex-wrap items-center gap-1 px-4 py-5 pb-0 sm:px-6",
+      body: "flex-1 overflow-y-auto p-4 sm:p-6",
+      footer: "flex items-center gap-1.5 p-4 pt-0 sm:px-6",
+      title: "flex-grow color-ui-base text-xl font-semibold",
+      description: "w-full color-ui-base/80",
+      close: "ms-auto"
     },
     variants: {
       direction: {
         top: {
-          content: "top-0 mb-24 flex-col-reverse rounded-b-ui-box",
-          handle: "mb-4"
+          content: "top-0 mb-24 flex-col-reverse rounded-b-ui-box"
         },
         bottom: {
-          content: "bottom-0 mt-24 flex-col rounded-t-ui-box",
-          handle: "mt-4"
+          content: "bottom-0 mt-24 flex-col rounded-t-ui-box"
         },
         left: {
-          content: "left-0 flex-row-reverse rounded-r-ui-box",
-          handle: "mr-4"
+          content: "left-0 flex-row-reverse rounded-r-ui-box"
         },
         right: {
-          content: "right-0 flex-row rounded-l-ui-box",
-          handle: "ml-4"
+          content: "right-0 flex-row rounded-l-ui-box"
+        }
+      },
+      transition: {
+        true: {
+          overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
         }
       },
       inset: {
@@ -42,15 +43,13 @@ export default ct(
       {
         direction: ["top", "bottom"],
         class: {
-          content: "inset-x-0 h-auto max-h-[96%]",
-          handle: "w-12 h-1.5 mx-auto"
+          content: "inset-x-0 h-auto max-h-[96%]"
         }
       },
       {
         direction: ["left", "right"],
         class: {
-          content: "inset-y-0 w-auto max-w-[calc(100%-2rem)]",
-          handle: "h-12 w-1.5 my-auto"
+          content: "inset-y-0 w-auto max-w-[calc(100%-2rem)]"
         }
       },
       {
@@ -60,6 +59,13 @@ export default ct(
           content: "inset-x-4 top-4"
         }
       },
+      {
+        direction: ["top"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-top_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-top_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
+      },
       {
         direction: ["bottom"],
         inset: true,
@@ -67,6 +73,13 @@ export default ct(
           content: "inset-x-4 bottom-4"
         }
       },
+      {
+        direction: ["bottom"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-bottom_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-bottom_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
+      },
       {
         direction: ["left"],
         inset: true,
@@ -74,12 +87,26 @@ export default ct(
           content: "inset-y-4 left-4"
         }
       },
+      {
+        direction: ["left"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-left_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-left_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
+      },
       {
         direction: ["right"],
         inset: true,
         class: {
           content: "inset-y-4 right-4"
         }
+      },
+      {
+        direction: ["right"],
+        transition: true,
+        class: {
+          content: "data-[state=open]:animate-[slide-in-from-right_500ms_cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:animate-[slide-out-to-right_500ms_cubic-bezier(0.32,0.72,0,1)]"
+        }
       }
     ]
   }

package/dist/runtime/theme/index.d.ts

@@ -7,6 +7,7 @@ export { default as badge } from './badge.js';
 export { default as breadcrumb } from './breadcrumb.js';
 export { default as button } from './button.js';
 export { default as buttonGroup } from './button-group.js';
+export { default as calendar } from './calendar.js';
 export { default as card } from './card.js';
 export { default as carousel } from './carousel.js';
 export { default as checkbox } from './checkbox.js';
@@ -33,5 +34,5 @@ export { default as table } from './table.js';
 export { default as tabs } from './tabs.js';
 export { default as textarea } from './textarea.js';
 export { default as toast } from './toast.js';
-export { default as toaster } from './toaster.js';
+export { default as toastProvider } from './toast-provider.js';
 export { default as tooltip } from './tooltip.js';

package/dist/runtime/theme/index.js

@@ -7,6 +7,7 @@ export { default as badge } from "./badge.js";
 export { default as breadcrumb } from "./breadcrumb.js";
 export { default as button } from "./button.js";
 export { default as buttonGroup } from "./button-group.js";
+export { default as calendar } from "./calendar.js";
 export { default as card } from "./card.js";
 export { default as carousel } from "./carousel.js";
 export { default as checkbox } from "./checkbox.js";
@@ -33,5 +34,5 @@ export { default as table } from "./table.js";
 export { default as tabs } from "./tabs.js";
 export { default as textarea } from "./textarea.js";
 export { default as toast } from "./toast.js";
-export { default as toaster } from "./toaster.js";
+export { default as toastProvider } from "./toast-provider.js";
 export { default as tooltip } from "./tooltip.js";

package/dist/runtime/theme/input-number.js

@@ -6,7 +6,7 @@ export default ct(
     slots: {
       base: "relative inline-flex items-center rounded-ui-base transition-colors aria-disabled:opacity-50",
       input: [
-        "w-full color-inherit bg-transparent border-0 placeholder:color-ui-cb/50",
+        "w-full color-inherit bg-transparent border-0 placeholder:color-ui-base/50",
         "focus:outline-none",
         "disabled:cursor-not-allowed"
       ],

package/dist/runtime/theme/input.js

@@ -6,7 +6,7 @@ export default ct(
     slots: {
       base: "inline-flex items-center rounded-ui-base transition-colors aria-disabled:opacity-50",
       input: [
-        "w-full color-inherit bg-transparent border-0 placeholder:color-ui-cb/50",
+        "w-full color-inherit bg-transparent border-0 placeholder:color-ui-base/50",
         "focus:outline-none",
         "disabled:cursor-not-allowed"
       ],
@@ -37,34 +37,34 @@ export default ct(
       variant: {
         "outline": {
           base: [
-            "color-ui-cb/80 bg-ui-cx ring ring-inset ring-ui-cb/30",
-            "focus-within:ring-2 focus-within:ring-ui-cb/50 hover:focus-within:ring-ui-cb/50",
-            "aria-disabled:ring-ui-cb/20 hover:aria-disabled:ring-ui-cb/20"
+            "color-ui-base/80 bg-ui-base ring ring-inset ring-ui-base/30",
+            "focus-within:ring-2 focus-within:ring-ui-base/50 hover:focus-within:ring-ui-base/50",
+            "aria-disabled:ring-ui-base/20 hover:aria-disabled:ring-ui-base/20"
           ]
         },
         "soft": {
           base: [
-            "color-ui-cb/80 bg-soft-ui-cb/4",
-            "hover:bg-soft-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-soft-ui-cb/8 hover:focus-within:bg-soft-ui-cb/8 focus-within:color-ui-cb/85 hover:focus-within:color-ui-cb/85",
-            "aria-disabled:color-ui-cb/80 aria-disabled:bg-soft-ui-cb/5 hover:aria-disabled:color-ui-cb/80 hover:aria-disabled:bg-soft-ui-cb/5"
+            "color-ui-base/80 bg-soft-ui-cb/4",
+            "hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 hover:focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85 hover:focus-within:color-ui-base/85",
+            "aria-disabled:color-ui-base/80 aria-disabled:bg-soft-ui-cb/5 hover:aria-disabled:color-ui-base/80 hover:aria-disabled:bg-soft-ui-cb/5"
           ]
         },
         "soft-outline": {
           base: [
-            "color-ui-cb/80 bg-soft-ui-cb/4 ring ring-inset ring-ui-cb/30",
-            "hover:bg-soft-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-soft-ui-cb/8 hover:focus-within:bg-soft-ui-cb/8 focus-within:color-ui-cb/85 hover:focus-within:color-ui-cb/85",
-            "aria-disabled:color-ui-cb/80 aria-disabled:bg-soft-ui-cb/5 hover:aria-disabled:color-ui-cb/80 hover:aria-disabled:bg-soft-ui-cb/5"
+            "color-ui-base/80 bg-soft-ui-cb/4 ring ring-inset ring-ui-base/30",
+            "hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 hover:focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85 hover:focus-within:color-ui-base/85",
+            "aria-disabled:color-ui-base/80 aria-disabled:bg-soft-ui-cb/5 hover:aria-disabled:color-ui-base/80 hover:aria-disabled:bg-soft-ui-cb/5"
           ]
         },
         "ghost": {
           base: [
-            "color-ui-cb/80 bg-transparent",
-            "hover:bg-soft-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-soft-ui-cb/8 hover:focus-within:bg-soft-ui-cb/8 focus-within:color-ui-cb/85 hover:focus-within:color-ui-cb/85",
+            "color-ui-base/80 bg-transparent",
+            "hover:bg-soft-ui-cb/6 hover:color-ui-base/80 focus-within:bg-soft-ui-cb/8 hover:focus-within:bg-soft-ui-cb/8 focus-within:color-ui-base/85 hover:focus-within:color-ui-base/85",
             "aria-disabled:color-ui-fill/80 aria-disabled:bg-transparent hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-transparent"
           ]
         },
         "none": {
-          base: "color-ui-cb bg-transparent"
+          base: "color-ui-base bg-transparent"
         }
       },
       leading: {
@@ -118,7 +118,7 @@ export default ct(
         variant: ["soft", "soft-outline", "ghost", "none"],
         highlight: true,
         class: {
-          base: "ring ring-inset ring-ui-fill/80"
+          base: "ring ring-inset ring-ui-fill/80 focus-within:ring-ui-fill/80"
         }
       },
       {

package/dist/runtime/theme/kbd.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
     variants: {
         variant: {
             solid: "color-ui-cx bg-soft-ui-fill/90";
-            outline: "color-ui-fill ring bg-ui-cx/90 ring-inset ring-ui-fill/30";
+            outline: "color-ui-fill ring bg-ui-base/90 ring-inset ring-ui-fill/30";
             soft: "color-ui-fill/80 bg-soft-ui-fill/20";
             'soft-outline': "color-ui-fill/80 bg-soft-ui-fill/20 ring ring-inset ring-ui-fill/30";
         };
@@ -19,7 +19,7 @@ declare const _default: {
     compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
         variant: {
             solid: "color-ui-cx bg-soft-ui-fill/90";
-            outline: "color-ui-fill ring bg-ui-cx/90 ring-inset ring-ui-fill/30";
+            outline: "color-ui-fill ring bg-ui-base/90 ring-inset ring-ui-fill/30";
             soft: "color-ui-fill/80 bg-soft-ui-fill/20";
             'soft-outline': "color-ui-fill/80 bg-soft-ui-fill/20 ring ring-inset ring-ui-fill/30";
         };