@byyuurin/ui 0.0.7 → 0.0.9

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

@@ -3,8 +3,8 @@ declare const _default: {
     slots: {
         base: string[];
         label: string;
-        prefixIcon: string;
-        suffixIcon: string;
+        leadingIcon: string;
+        trailingIcon: string;
     };
     variants: {
         variant: {
@@ -47,10 +47,10 @@ declare const _default: {
         active: {
             true: "";
         };
-        prefix: {
+        leading: {
             true: "";
         };
-        suffix: {
+        trailing: {
             true: "";
         };
         loading: {
@@ -106,10 +106,10 @@ declare const _default: {
         active: {
             true: "";
         };
-        prefix: {
+        leading: {
             true: "";
         };
-        suffix: {
+        trailing: {
             true: "";
         };
         loading: {
@@ -126,8 +126,8 @@ declare const _default: {
     }, {
         base: string[];
         label: string;
-        prefixIcon: string;
-        suffixIcon: string;
+        leadingIcon: string;
+        trailingIcon: string;
     }, undefined>;
     defaultVariants: {
         size: "md";

package/dist/runtime/theme/button.js

@@ -6,12 +6,12 @@ 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",
-      prefixIcon: "shrink-0 size-1.5em not-only-child:ml-0.5",
-      suffixIcon: "shrink-0 size-1.5em not-only-child:mr-0.5"
+      leadingIcon: "shrink-0 size-1.5em not-only-child:ml-0.5",
+      trailingIcon: "shrink-0 size-1.5em not-only-child:mr-0.5"
     },
     variants: {
       ...buttonGroupVariant,
@@ -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": {
@@ -85,10 +85,10 @@ export default ct(
       active: {
         true: ""
       },
-      prefix: {
+      leading: {
         true: ""
       },
-      suffix: {
+      trailing: {
         true: ""
       },
       loading: {
@@ -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"
         }
       },
       {
@@ -147,14 +147,14 @@ export default ct(
       },
       {
         loading: true,
-        prefix: true,
-        class: { prefixIcon: "animate-spin" }
+        leading: true,
+        class: { leadingIcon: "animate-spin" }
       },
       {
         loading: true,
-        prefix: false,
-        suffix: true,
-        class: { suffixIcon: "animate-spin" }
+        leading: false,
+        trailing: true,
+        class: { trailingIcon: "animate-spin" }
       }
     ],
     defaultVariants: {

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.d.ts

@@ -3,8 +3,8 @@ declare const _default: {
     slots: {
         base: string;
         label: string;
-        prefixIcon: string;
-        suffixIcon: string;
+        leadingIcon: string;
+        trailingIcon: string;
     };
     variants: {
         variant: {
@@ -90,8 +90,8 @@ declare const _default: {
     }, {
         base: string;
         label: string;
-        prefixIcon: string;
-        suffixIcon: string;
+        leadingIcon: string;
+        trailingIcon: string;
     }, undefined>;
     defaultVariants: {
         size: "md";

package/dist/runtime/theme/chip.js

@@ -6,8 +6,8 @@ export default ct(
     slots: {
       base: "inline-flex items-center rounded-ui-base leading-normal transition-colors",
       label: "",
-      prefixIcon: "shrink-0 size-1.5em not-only-child:ml-1.5",
-      suffixIcon: "shrink-0 size-1.5em not-only-child:mr-1.5"
+      leadingIcon: "shrink-0 size-1.5em not-only-child:ml-1.5",
+      trailingIcon: "shrink-0 size-1.5em not-only-child:mr-1.5"
     },
     variants: {
       ...buttonGroupVariant,
@@ -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

@@ -3,33 +3,34 @@ export default ct(
   /* @unocss-include */
   {
     slots: {
-      overlay: "fixed inset-0 bg-black/40",
-      content: "fixed bg-ui-cx ring ring-ui-cb/5 flex focus:outline-none",
-      handle: "shrink-0 rounded-full bg-soft-ui-cb/17.5",
+      overlay: "fixed z-1 inset-0 bg-black/40",
+      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

@@ -1,9 +1,13 @@
 export { default as accordion } from './accordion.js';
 export { default as alert } from './alert.js';
 export { default as app } from './app.js';
+export { default as avatar } from './avatar.js';
+export { default as avatarGroup } from './avatar-group.js';
 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';
@@ -12,20 +16,23 @@ export { default as collapsible } from './collapsible.js';
 export { default as drawer } from './drawer.js';
 export { default as input } from './input.js';
 export { default as inputNumber } from './input-number.js';
+export { default as kbd } from './kbd.js';
 export { default as link } from './link.js';
 export { default as modal } from './modal.js';
 export { default as pagination } from './pagination.js';
 export { default as pinInput } from './pinInput.js';
 export { default as popover } from './popover.js';
+export { default as progress } from './progress.js';
 export { default as radioGroup } from './radio-group.js';
 export { default as scrollArea } from './scroll-area.js';
 export { default as select } from './select.js';
 export { default as separator } from './separator.js';
+export { default as skeleton } from './skeleton.js';
 export { default as slider } from './slider.js';
 export { default as switch } from './switch.js';
 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';