@byyuurin/ui 0.0.0

package/dist/theme/button.d.ts

@@ -0,0 +1,184 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        base: string[];
+        label: string;
+        prefixIcon: string;
+        suffixIcon: string;
+    };
+    variants: {
+        variant: {
+            solid: {
+                base: string[];
+            };
+            outline: {
+                base: string[];
+            };
+            soft: {
+                base: string[];
+            };
+            ghost: {
+                base: string[];
+            };
+            link: {
+                base: string[];
+            };
+        };
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+        round: {
+            true: {
+                base: string;
+            };
+            false: {
+                base: string;
+            };
+        };
+        active: {
+            true: "";
+        };
+        prefix: {
+            true: "";
+        };
+        suffix: {
+            true: "";
+        };
+        loading: {
+            true: "";
+        };
+    };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            label: string;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        active?: undefined;
+        variant?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            label: string;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        active?: undefined;
+        variant?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        active: true;
+        variant: "solid";
+        class: {
+            base: string;
+            label?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        active: true;
+        variant: "outline";
+        class: {
+            base: string;
+            label?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        active: true;
+        variant: "soft";
+        class: {
+            base: string;
+            label?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        active: true;
+        variant: "ghost";
+        class: {
+            base: string;
+            label?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        active: true;
+        variant: "link";
+        class: {
+            base: string;
+            label?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        loading: true;
+        prefix: true;
+        class: {
+            prefixIcon: string;
+            base?: undefined;
+            label?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        active?: undefined;
+        variant?: undefined;
+        suffix?: undefined;
+    } | {
+        loading: true;
+        prefix: false;
+        suffix: true;
+        class: {
+            suffixIcon: string;
+            base?: undefined;
+            label?: undefined;
+            prefixIcon?: undefined;
+        };
+        size?: undefined;
+        active?: undefined;
+        variant?: undefined;
+    })[];
+};
+export default _default;

package/dist/theme/button.mjs

@@ -0,0 +1,140 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    base: [
+      "inline-flex items-center leading-normal transition-colors",
+      "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",
+    suffixIcon: "shrink-0 size-1.5em"
+  },
+  variants: {
+    variant: {
+      solid: {
+        base: [
+          "color-ui-c1 bg-ui-fill/90",
+          "hover:bg-ui-fill/80 active:bg-ui-fill",
+          "disabled:bg-ui-fill/90 aria-disabled:bg-ui-fill/90"
+        ]
+      },
+      outline: {
+        base: [
+          "color-ui-fill bg-ui-c1 ring ring-inset ring-ui-fill",
+          "hover:bg-ui-fill/10 active:bg-ui-fill/25",
+          "disabled:bg-ui-c1 aria-disabled:bg-ui-c1"
+        ]
+      },
+      soft: {
+        base: [
+          "color-ui-content/80 bg-ui-fill/10",
+          "hover:bg-ui-fill/15 hover:color-ui-content/80 active:bg-ui-fill/20 active:color-ui-content/90",
+          "disabled:bg-ui-fill/10 aria-disabled:bg-ui-fill/10 disabled:color-ui-content/80 aria-disabled:color-ui-content/80"
+        ]
+      },
+      ghost: {
+        base: [
+          "color-ui-fill/80 bg-transparent",
+          "hover:bg-ui-fill/10 hover:color-ui-fill/80 active:bg-ui-fill/20 active:color-ui-fill/90",
+          "disabled:bg-transparent aria-disabled:bg-transparent disabled:color-ui-fill/80 aria-disabled:color-ui-fill/80"
+        ]
+      },
+      link: {
+        base: [
+          "color-ui-fill bg-transparent",
+          "hover:color-ui-fill/80 active:color-ui-fill/90",
+          "disabled:color-ui-fill aria-disabled:color-ui-fill"
+        ]
+      }
+    },
+    size: {
+      xs: {
+        base: "text-xs"
+      },
+      sm: {
+        base: "text-sm"
+      },
+      md: {
+        base: "text-base"
+      },
+      lg: {
+        base: "text-lg"
+      },
+      xl: {
+        base: "text-xl"
+      }
+    },
+    round: {
+      true: {
+        base: "rounded-full"
+      },
+      false: {
+        base: "rounded-ui-button"
+      }
+    },
+    active: {
+      true: ""
+    },
+    prefix: {
+      true: ""
+    },
+    suffix: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      size: ["xs", "sm", "md"],
+      class: {
+        base: "p-1.5",
+        label: "px-1"
+      }
+    },
+    {
+      size: ["lg", "xl"],
+      class: {
+        base: "p-2.5",
+        label: "px-2"
+      }
+    },
+    {
+      active: true,
+      variant: "solid",
+      class: { base: "bg-ui-fill hover:bg-ui-fill" }
+    },
+    {
+      active: true,
+      variant: "outline",
+      class: { base: "bg-ui-fill/25 hover:bg-ui-fill/25" }
+    },
+    {
+      active: true,
+      variant: "soft",
+      class: { base: "color-ui-content/90 bg-ui-fill/20 hover:color-ui-content/90 hover:bg-ui-fill/20" }
+    },
+    {
+      active: true,
+      variant: "ghost",
+      class: { base: "color-ui-fill/90 bg-ui-fill/20 hover:color-ui-fill/90 hover:bg-ui-fill/20" }
+    },
+    {
+      active: true,
+      variant: "link",
+      class: { base: "color-ui-fill/90 hover:color-ui-fill/90" }
+    },
+    {
+      loading: true,
+      prefix: true,
+      class: { prefixIcon: "animate-spin" }
+    },
+    {
+      loading: true,
+      prefix: false,
+      suffix: true,
+      class: { suffixIcon: "animate-spin" }
+    }
+  ]
+});

package/dist/theme/card.d.ts

@@ -0,0 +1,43 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        header: string;
+        body: string;
+        footer: string;
+        title: string;
+        description: string;
+    };
+    variants: {
+        [key: string]: {
+            [key: string]: "" | {
+                root?: import("@byyuurin/ui-kit/index").ClassValue;
+                header?: import("@byyuurin/ui-kit/index").ClassValue;
+                body?: import("@byyuurin/ui-kit/index").ClassValue;
+                footer?: import("@byyuurin/ui-kit/index").ClassValue;
+                title?: import("@byyuurin/ui-kit/index").ClassValue;
+                description?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        [key: string]: {
+            [key: string]: "" | {
+                root?: import("@byyuurin/ui-kit/index").ClassValue;
+                header?: import("@byyuurin/ui-kit/index").ClassValue;
+                body?: import("@byyuurin/ui-kit/index").ClassValue;
+                footer?: import("@byyuurin/ui-kit/index").ClassValue;
+                title?: import("@byyuurin/ui-kit/index").ClassValue;
+                description?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    }, {
+        root: string;
+        header: string;
+        body: string;
+        footer: string;
+        title: string;
+        description: string;
+    }, undefined>;
+};
+export default _default;

package/dist/theme/card.mjs

@@ -0,0 +1,11 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    root: "color-ui-cb bg-ui-c1 ring ring-ui-cb/10 divide-y divide-ui-cb/10 rounded-ui-box shadow-sm shadow-ui-cb/10",
+    header: "flex flex-wrap items-center gap-1 px-4 py-5 sm:px-6",
+    body: "flex-1 overflow-y-auto p-4 sm:p-6 empty:hidden",
+    footer: "flex items-center gap-1.5 p-4 sm:px-6",
+    title: "flex-grow color-ui-cb text-xl font-semibold",
+    description: "w-full color-ui-cb/80"
+  }
+});

package/dist/theme/checkbox.d.ts

@@ -0,0 +1,97 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        base: string[];
+        container: string;
+        wrapper: string;
+        icon: string;
+        label: string;
+        description: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        disabled: {
+            true: {
+                root: string;
+            };
+            false: {
+                label: string;
+            };
+        };
+        checked: {
+            true: {
+                base: string;
+                icon: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        disabled: {
+            true: {
+                root: string;
+            };
+            false: {
+                label: string;
+            };
+        };
+        checked: {
+            true: {
+                base: string;
+                icon: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+        container: string;
+        wrapper: string;
+        icon: string;
+        label: string;
+        description: string;
+    }, undefined>;
+};
+export default _default;

package/dist/theme/checkbox.mjs

@@ -0,0 +1,53 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    root: "relative flex items-start",
+    base: [
+      "size-1.25em shrink-0 flex items-center justify-center rounded-ui-base color-ui-c1 ring ring-inset ring-ui-cb",
+      "focus-visible:outline-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2"
+    ],
+    container: "flex items-center h-1.25em",
+    wrapper: "text-inherit ms-2",
+    icon: "shrink-0 size-1em data-[state=checked]:animate-[scale-in_200ms_ease-out]",
+    label: "flex color-ui-cb after:content-empty",
+    description: "color-ui-cb/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`
+      }
+    },
+    disabled: {
+      true: {
+        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+      },
+      false: {
+        label: "cursor-pointer"
+      }
+    },
+    checked: {
+      true: {
+        base: "ring-2 ring-ui-content bg-ui-content",
+        icon: "color-ui-c1"
+      }
+    }
+  }
+});

package/dist/theme/drawer.d.ts

@@ -0,0 +1,72 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        overlay: string;
+        content: string;
+        handle: string;
+        container: string;
+        header: string;
+        title: string;
+        description: string;
+        body: string;
+        footer: string;
+    };
+    variants: {
+        direction: {
+            top: {
+                content: string;
+                handle: string;
+            };
+            right: {
+                content: string;
+                handle: string;
+            };
+            bottom: {
+                content: string;
+                handle: string;
+            };
+            left: {
+                content: string;
+                handle: string;
+            };
+        };
+        blur: {
+            true: {
+                overlay: string;
+            };
+        };
+        full: {
+            true: "";
+        };
+    };
+    compoundVariants: ({
+        direction: ("top" | "bottom")[];
+        class: {
+            content: string;
+            handle: string;
+        };
+        full?: undefined;
+    } | {
+        direction: ("top" | "bottom")[];
+        full: false;
+        class: {
+            content: string;
+            handle?: undefined;
+        };
+    } | {
+        direction: ("right" | "left")[];
+        class: {
+            content: string;
+            handle: string;
+        };
+        full?: undefined;
+    } | {
+        direction: ("right" | "left")[];
+        full: false;
+        class: {
+            content: string;
+            handle?: undefined;
+        };
+    })[];
+};
+export default _default;

package/dist/theme/drawer.mjs

@@ -0,0 +1,72 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    overlay: "fixed inset-0 bg-ui-c3/75",
+    content: "fixed bg-ui-c1 ring ring-ui-cb/5 flex focus:outline-none",
+    handle: "shrink-0 rounded-full bg-ui-cb/17.5",
+    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"
+  },
+  variants: {
+    direction: {
+      top: {
+        content: "top-0 mb-24 flex-col-reverse rounded-b-ui-box",
+        handle: "mb-4"
+      },
+      right: {
+        content: "right-4 flex-row rounded-l-ui-box",
+        handle: "ml-4"
+      },
+      bottom: {
+        content: "bottom-0 mt-24 flex-col rounded-t-ui-box",
+        handle: "mt-4"
+      },
+      left: {
+        content: "left-4 flex-row-reverse rounded-r-ui-box",
+        handle: "mr-4"
+      }
+    },
+    blur: {
+      true: {
+        overlay: "backdrop-blur-sm"
+      }
+    },
+    full: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      direction: ["top", "bottom"],
+      class: {
+        content: "inset-x-0 h-auto max-h-[96%]",
+        handle: "w-12 h-1.5 mx-auto"
+      }
+    },
+    {
+      direction: ["top", "bottom"],
+      full: false,
+      class: {
+        content: "inset-x-4 my-4 rounded-ui-box after:hidden"
+      }
+    },
+    {
+      direction: ["right", "left"],
+      class: {
+        content: "inset-y-0 w-auto max-w-[calc(100%-2rem)]",
+        handle: "h-12 w-1.5 my-auto"
+      }
+    },
+    {
+      direction: ["right", "left"],
+      full: false,
+      class: {
+        content: "inset-y-4 rounded-ui-box after:hidden"
+      }
+    }
+  ]
+});

package/dist/theme/index.d.ts

@@ -0,0 +1,17 @@
+export { default as accordion } from './accordion';
+export { default as app } from './app';
+export { default as button } from './button';
+export { default as card } from './card';
+export { default as checkbox } from './checkbox';
+export { default as drawer } from './drawer';
+export { default as input } from './input';
+export { default as link } from './link';
+export { default as modal } from './modal';
+export { default as popover } from './popover';
+export { default as radioGroup } from './radioGroup';
+export { default as select } from './select';
+export { default as switch } from './switch';
+export { default as tabs } from './tabs';
+export { default as toast } from './toast';
+export { default as toaster } from './toaster';
+export { default as tooltip } from './tooltip';

package/dist/theme/index.mjs

@@ -0,0 +1,17 @@
+export { default as accordion } from "./accordion.mjs";
+export { default as app } from "./app.mjs";
+export { default as button } from "./button.mjs";
+export { default as card } from "./card.mjs";
+export { default as checkbox } from "./checkbox.mjs";
+export { default as drawer } from "./drawer.mjs";
+export { default as input } from "./input.mjs";
+export { default as link } from "./link.mjs";
+export { default as modal } from "./modal.mjs";
+export { default as popover } from "./popover.mjs";
+export { default as radioGroup } from "./radioGroup.mjs";
+export { default as select } from "./select.mjs";
+export { default as switch } from "./switch.mjs";
+export { default as tabs } from "./tabs.mjs";
+export { default as toast } from "./toast.mjs";
+export { default as toaster } from "./toaster.mjs";
+export { default as tooltip } from "./tooltip.mjs";