@byyuurin/ui 0.0.8 → 0.0.10

package/dist/runtime/theme/dropdown-menu.js

@@ -0,0 +1,83 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      content: [
+        "bg-ui-base shadow-lg rounded-ui-base ring ring-ui-base/10 divide-y divide-ui-base/10 overflow-y-auto scroll-py-1",
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+      ],
+      arrow: "-mt-px fill-ui-cx stroke-ui-base/10",
+      group: "p-1 isolate",
+      label: "w-full flex items-center font-semibold color-ui-base",
+      separator: "-mx-1 my-1 h-px bg-ui-cb/10",
+      item: [
+        "group relative w-full flex items-center select-none outline-none",
+        "before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-ui-base",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+      ],
+      itemLeadingIcon: "shrink-0",
+      itemLeadingAvatar: "shrink-0",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
+      itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+      itemLabel: "truncate",
+      itemLabelExternalIcon: "inline-block size-3 align-top color-ui-base/50"
+    },
+    variants: {
+      size: {
+        xs: {
+          content: "text-xs"
+        },
+        sm: {
+          content: "text-sm"
+        },
+        md: {
+          content: "text-base"
+        },
+        lg: {
+          content: "text-lg"
+        },
+        xl: {
+          content: "text-xl"
+        }
+      },
+      active: {
+        true: {
+          item: "color-ui-base before:bg-ui-cb/10",
+          itemLeadingIcon: "color-ui-base/80"
+        },
+        false: {
+          item: "color-ui-base/80 data-[highlighted]:color-ui-base data-[state=open]:color-ui-base data-[highlighted]:before:bg-ui-cb/5 data-[state=open]:before:bg-ui-cb/5 transition-colors before:transition-colors",
+          itemLeadingIcon: "color-ui-base/50 group-data-[highlighted]:color-ui-base/80 group-data-[state=open]:color-ui-base/80 transition-colors"
+        }
+      },
+      loading: {
+        true: {
+          itemLeadingIcon: "animate-spin"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        size: ["xs", "sm", "md"],
+        class: {
+          label: "p-0.25em gap-0.25em",
+          item: "p-0.25em gap-0.25em",
+          itemTrailingKbds: "gap-0.125em"
+        }
+      },
+      {
+        size: ["lg", "xl"],
+        class: {
+          label: "p-0.5em gap-0.5em",
+          item: "p-0.5em gap-0.5em",
+          itemTrailingKbds: "gap-0.25em"
+        }
+      }
+    ],
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);

package/dist/runtime/theme/form-item.d.ts

@@ -0,0 +1,76 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        wrapper: string;
+        labelWrapper: string;
+        label: string;
+        container: string;
+        description: string;
+        error: string;
+        hint: string;
+        help: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+    }, {
+        root: string;
+        wrapper: string;
+        labelWrapper: string;
+        label: string;
+        container: string;
+        description: string;
+        error: string;
+        hint: string;
+        help: string;
+    }, undefined>;
+    defaultVariants: {
+        size: "md";
+    };
+};
+export default _default;

package/dist/runtime/theme/form-item.js

@@ -0,0 +1,34 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "",
+      wrapper: "",
+      labelWrapper: "flex content-center items-center justify-between",
+      label: "block font-medium color-ui-base/80",
+      container: "mt-0.25em relative",
+      description: "color-ui-base/60",
+      error: "mt-0.25em color-ui-fill",
+      hint: "color-ui-base/60",
+      help: "mt-0.25em color-ui-base/60"
+    },
+    variants: {
+      size: {
+        xs: { root: "text-xs" },
+        sm: { root: "text-sm" },
+        md: { root: "text-base" },
+        lg: { root: "text-lg" },
+        xl: { root: "text-xl" }
+      },
+      required: {
+        true: {
+          label: `after:content-['*'] after:ms-0.5 after:color-ui-fill`
+        }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);

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

@@ -0,0 +1,8 @@
+declare const _default: {
+    base: string;
+    slots: undefined;
+    variants: {};
+    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{}, undefined, "">;
+    defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{}, undefined>;
+};
+export default _default;

package/dist/runtime/theme/form.js

@@ -0,0 +1,7 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    base: ""
+  }
+);

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

@@ -7,12 +7,16 @@ 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';
 export { default as chip } from './chip.js';
 export { default as collapsible } from './collapsible.js';
 export { default as drawer } from './drawer.js';
+export { default as dropdownMenu } from './dropdown-menu.js';
+export { default as form } from './form.js';
+export { default as formItem } from './form-item.js';
 export { default as input } from './input.js';
 export { default as inputNumber } from './input-number.js';
 export { default as kbd } from './kbd.js';
@@ -33,5 +37,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,12 +7,16 @@ 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";
 export { default as chip } from "./chip.js";
 export { default as collapsible } from "./collapsible.js";
 export { default as drawer } from "./drawer.js";
+export { default as dropdownMenu } from "./dropdown-menu.js";
+export { default as form } from "./form.js";
+export { default as formItem } from "./form-item.js";
 export { default as input } from "./input.js";
 export { default as inputNumber } from "./input-number.js";
 export { default as kbd } from "./kbd.js";
@@ -33,5 +37,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.d.ts

@@ -67,72 +67,52 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        size: {
-            xs: {
-                base: string;
-            };
-            sm: {
-                base: string;
-            };
-            md: {
-                base: string;
-            };
-            lg: {
-                base: string;
-            };
-            xl: {
-                base: string;
-            };
-        };
-        variant: {
-            outline: {
-                base: string[];
-            };
-            soft: {
-                base: string[];
-            };
-            'soft-outline': {
-                base: string[];
-            };
-            ghost: {
-                base: string[];
-            };
-            none: {
-                base: string;
-            };
+    compoundVariants: ({
+        variant: ("soft" | "ghost" | "none")[];
+        highlight: false;
+        underline: true;
+        class: {
+            base: string[];
+            input?: undefined;
         };
-        disabled: {
-            true: {
-                increment: string;
-                decrement: string;
-            };
+        size?: undefined;
+    } | {
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            input: string;
         };
-        orientation: {
-            horizontal: {
-                input: string;
-                increment: string;
-                decrement: string;
-            };
-            vertical: {
-                increment: string;
-                decrement: string;
-            };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            input: string;
         };
-        underline: {
-            true: "";
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+    } | {
+        variant: ("soft" | "soft-outline" | "ghost" | "none")[];
+        highlight: true;
+        class: {
+            base: string;
+            input?: undefined;
         };
-        highlight: {
-            true: {
-                base: string;
-            };
+        underline?: undefined;
+        size?: undefined;
+    } | {
+        variant: "outline"[];
+        highlight: true;
+        class: {
+            base: string;
+            input?: undefined;
         };
-    }, {
-        base: string;
-        input: string[];
-        increment: string;
-        decrement: string;
-    }, undefined>;
+        underline?: undefined;
+        size?: undefined;
+    })[];
     defaultVariants: {
         size: "md";
         variant: "outline";

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

@@ -72,77 +72,105 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        size: {
-            xs: {
-                base: string;
-            };
-            sm: {
-                base: string;
-            };
-            md: {
-                base: string;
-            };
-            lg: {
-                base: string;
-            };
-            xl: {
-                base: string;
-            };
-        };
-        variant: {
-            outline: {
-                base: string[];
-            };
-            soft: {
-                base: string[];
-            };
-            'soft-outline': {
-                base: string[];
-            };
-            ghost: {
-                base: string[];
-            };
-            none: {
-                base: string;
-            };
-        };
-        leading: {
-            true: "";
-        };
-        trailing: {
-            true: "";
-        };
-        loading: {
-            true: "";
-        };
-        underline: {
-            true: "";
-        };
-        highlight: {
-            true: "";
-        };
-        type: {
-            file: {
-                input: string;
-            };
-        };
-        groupOrientation: {
-            horizontal: {
-                base: string;
-            };
-            vertical: {
-                base: string;
-            };
-        };
-    }, {
-        base: string;
-        input: string[];
-        leading: string;
-        leadingIcon: string;
-        trailing: string;
-        trailingIcon: string;
-    }, undefined>;
+    compoundVariants: ({
+        variant: ("soft" | "ghost" | "none")[];
+        highlight: false;
+        underline: true;
+        class: {
+            base: string[];
+            input?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            input: string;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            input: string;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        variant: ("soft" | "soft-outline" | "ghost" | "none")[];
+        highlight: true;
+        class: {
+            base: string;
+            input?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
+        };
+        underline?: undefined;
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        variant: "outline"[];
+        highlight: true;
+        class: {
+            base: string;
+            input?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
+        };
+        underline?: undefined;
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        loading: true;
+        leading: true;
+        class: {
+            leadingIcon: string;
+            base?: undefined;
+            input?: undefined;
+            trailingIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        size?: undefined;
+        trailing?: undefined;
+    } | {
+        loading: true;
+        leading: false;
+        trailing: true;
+        class: {
+            trailingIcon: string;
+            base?: undefined;
+            input?: undefined;
+            leadingIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        size?: undefined;
+    })[];
     defaultVariants: {
         size: "md";
     };

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,14 +118,14 @@ 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 hover:focus-within:ring-ui-fill/80"
         }
       },
       {
         variant: ["outline"],
         highlight: true,
         class: {
-          base: "ring-2 ring-ui-fill/80 focus-within:ring-ui-fill/80"
+          base: "ring-2 ring-ui-fill/80 focus-within:ring-ui-fill/80 hover: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";
         };

package/dist/runtime/theme/kbd.js

@@ -6,7 +6,7 @@ export default ct(
     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"
       },