@byyuurin/ui 0.0.0

package/dist/theme/select.d.ts

@@ -0,0 +1,177 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        base: string[];
+        value: string;
+        placeholder: string;
+        arrow: string;
+        content: string[];
+        viewport: string;
+        group: string;
+        empty: string;
+        label: string;
+        separator: string;
+        item: string[];
+        itemPrefixIcon: string;
+        itemSuffix: string;
+        itemSuffixIcon: string;
+        itemLabel: string;
+        prefix: string;
+        prefixIcon: string;
+        suffix: string;
+        suffixIcon: string;
+    };
+    variants: {
+        variant: {
+            outline: {
+                base: string[];
+            };
+            soft: {
+                base: string[];
+            };
+            ghost: {
+                base: string[];
+            };
+            none: {
+                base: string;
+            };
+        };
+        size: {
+            xs: {
+                base: string;
+                item: string;
+            };
+            sm: {
+                base: string;
+                item: string;
+            };
+            md: {
+                base: string;
+                item: string;
+            };
+            lg: {
+                base: string;
+                item: string;
+            };
+            xl: {
+                base: string;
+                item: string;
+            };
+        };
+        prefix: {
+            true: "";
+        };
+        suffix: {
+            true: "";
+        };
+        loading: {
+            true: "";
+        };
+        underline: {
+            true: "";
+        };
+        highlight: {
+            true: "";
+        };
+    };
+    compoundVariants: ({
+        variant: ("soft" | "ghost" | "none")[];
+        highlight: false;
+        underline: true;
+        class: {
+            base: string;
+            item?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            item: string;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            item: string;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        variant: ("soft" | "ghost" | "none")[];
+        highlight: true;
+        class: {
+            base: string;
+            item?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        underline?: undefined;
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        variant: "outline"[];
+        highlight: true;
+        class: {
+            base: string;
+            item?: undefined;
+            prefixIcon?: undefined;
+            suffixIcon?: undefined;
+        };
+        underline?: undefined;
+        size?: undefined;
+        loading?: undefined;
+        prefix?: undefined;
+        suffix?: undefined;
+    } | {
+        loading: true;
+        prefix: true;
+        class: {
+            prefixIcon: string;
+            base?: undefined;
+            item?: undefined;
+            suffixIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        size?: undefined;
+        suffix?: undefined;
+    } | {
+        loading: true;
+        prefix: false;
+        suffix: true;
+        class: {
+            suffixIcon: string;
+            base?: undefined;
+            item?: undefined;
+            prefixIcon?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+        size?: undefined;
+    })[];
+};
+export default _default;

package/dist/theme/select.mjs

@@ -0,0 +1,154 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    base: [
+      "bg-ui-c1 relative group rounded-ui-base inline-flex items-center gap-x-2 focus:outline-none transition-colors",
+      "disabled:cursor-not-allowed disabled:opacity-50"
+    ],
+    value: "me-auto truncate pointer-events-none",
+    placeholder: "me-auto truncate color-ui-cb/50",
+    arrow: "fill-ui-c1 stroke-ui-cb/10",
+    content: [
+      "max-h-60 w-[var(--reka-popper-anchor-width)] bg-ui-c1 shadow-lg rounded-[calc(var(--ui-radius-tabs)*0.66)] ring ring-ui-cb/10 overflow-hidden pointer-events-auto",
+      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]"
+    ],
+    viewport: "divide-y divide-ui-cb/10 scroll-py-1",
+    group: "p-1 isolate",
+    empty: "py-2 text-center text-sm color-ui-cb/50",
+    label: "font-semibold color-ui-cb cursor-pointer",
+    separator: "-mx-1 my-1 h-px bg-ui-cb/10",
+    item: [
+      "group relative w-full flex gap-2 items-center select-none outline-none color-ui-cb/50 transition-colors cursor-pointer",
+      "aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+      "before:content-empty before:absolute before:z-[-1] before:inset-px before:rounded-ui-base before:transition-colors",
+      "data-[highlighted]:color-ui-cb data-[highlighted]:before:bg-ui-cb/3",
+      "data-[state=checked]:color-ui-base"
+    ],
+    itemPrefixIcon: "shrink-0 color-ui-cb/80 group-data-[highlighted]:color-ui-cb/80 transition-colors",
+    itemSuffix: "ms-auto inline-flex gap-1.5 items-center",
+    itemSuffixIcon: "shrink-0",
+    itemLabel: "truncate",
+    prefix: "flex items-center",
+    prefixIcon: "shrink-0 size-1.25em",
+    suffix: "flex items-center",
+    suffixIcon: "shrink-0 size-1.25em"
+  },
+  variants: {
+    variant: {
+      outline: {
+        base: [
+          "color-ui-cb/80 bg-ui-c1 ring ring-inset ring-ui-cb/50",
+          "focus-within:ring-2 focus-within:ring-ui-cb/50",
+          "disabled:ring-ui-cb/80 hover:disabled:ring-ui-cb/80"
+        ]
+      },
+      soft: {
+        base: [
+          "color-ui-cb/80 bg-ui-cb/4",
+          "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85",
+          "disabled:color-ui-content/80 disabled:bg-ui-fill/5 hover:disabled:color-ui-content/80 hover:disabled:bg-ui-fill/5"
+        ]
+      },
+      ghost: {
+        base: [
+          "color-ui-cb/80 bg-transparent",
+          "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85",
+          "disabled:color-ui-fill/80 disabled:bg-transparent hover:disabled:color-ui-fill/80 hover:disabled:bg-transparent"
+        ]
+      },
+      none: {
+        base: "color-ui-cb bg-transparent"
+      }
+    },
+    size: {
+      xs: {
+        base: "text-xs",
+        item: "text-xs"
+      },
+      sm: {
+        base: "text-sm",
+        item: "text-sm"
+      },
+      md: {
+        base: "text-base",
+        item: "text-base"
+      },
+      lg: {
+        base: "text-lg",
+        item: "text-lg"
+      },
+      xl: {
+        base: "text-xl",
+        item: "text-xl"
+      }
+    },
+    prefix: {
+      true: ""
+    },
+    suffix: {
+      true: ""
+    },
+    loading: {
+      true: ""
+    },
+    underline: {
+      true: ""
+    },
+    highlight: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: ["soft", "ghost", "none"],
+      highlight: false,
+      underline: true,
+      class: {
+        base: "relative after:content-empty after:absolute after:inset-x-0 after:bottom-0 after:h-1px after:bg-ui-cb/40"
+      }
+    },
+    {
+      size: ["xs", "sm", "md"],
+      class: {
+        base: "p-1.5 px-2.5",
+        item: "p-1.5 px-2.5"
+      }
+    },
+    {
+      size: ["lg", "xl"],
+      class: {
+        base: "p-2.5 px-3.5",
+        item: "p-2.5 px-3.5"
+      }
+    },
+    {
+      variant: ["soft", "ghost", "none"],
+      highlight: true,
+      class: {
+        base: "ring ring-inset ring-ui-fill/80"
+      }
+    },
+    {
+      variant: ["outline"],
+      highlight: true,
+      class: {
+        base: "ring-2 ring-ui-fill/80 focus-within:ring-ui-fill/80"
+      }
+    },
+    {
+      loading: true,
+      prefix: true,
+      class: {
+        prefixIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      prefix: false,
+      suffix: true,
+      class: {
+        suffixIcon: "animate-spin"
+      }
+    }
+  ]
+});

package/dist/theme/switch.d.ts

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

package/dist/theme/switch.mjs

@@ -0,0 +1,78 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct({
+  slots: {
+    root: "relative flex items-start",
+    base: [
+      "inline-flex items-center shrink-0 rounded-ui-base border-2 border-transparent transition-colors duration-200",
+      "focus-visible:outline-2 focus-visible:outline-offset-2",
+      "data-[state=unchecked]:bg-ui-cb/10 data-[state=checked]:bg-ui-fill/80 focus-visible:outline-ui-base",
+      "w-2.7em"
+    ],
+    container: "flex items-center h-1.5em",
+    thumb: [
+      "group pointer-events-none rounded-ui-base size-1.25em bg-ui-c1 shadow-lg ring-0 transition-transform duration-200 flex items-center justify-center",
+      "data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:translate-x-0 data-[state=checked]:translate-x-1.25em data-[state=checked]:rtl:-translate-x-1.25em"
+    ],
+    icon: [
+      "absolute shrink-0 opacity-0 size-10/12 transition-[color,opacity] duration-200",
+      "group-data-[state=unchecked]:color-ui-cb/50 group-data-[state=checked]:color-ui-base"
+    ],
+    wrapper: "ms-2",
+    label: "flex color-ui-cb/80",
+    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"
+      }
+    },
+    round: {
+      true: {
+        base: "rounded-full",
+        thumb: "rounded-full"
+      }
+    },
+    checked: {
+      true: {
+        icon: "group-data-[state=checked]:opacity-100"
+      }
+    },
+    unchecked: {
+      true: {
+        icon: "group-data-[state=unchecked]:opacity-100"
+      }
+    },
+    loading: {
+      true: {
+        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed",
+        icon: "animate-spin"
+      }
+    },
+    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"
+      }
+    }
+  }
+});

package/dist/theme/tabs.d.ts

@@ -0,0 +1,101 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        list: string;
+        indicator: string;
+        trigger: string[];
+        content: string;
+        leadingIcon: string;
+        label: string;
+    };
+    variants: {
+        variant: {
+            solid: {
+                list: string;
+                trigger: string[];
+                indicator: string;
+            };
+            soft: {
+                list: string;
+                trigger: string[];
+                indicator: string;
+            };
+            link: {
+                list: string;
+                indicator: string;
+                trigger: string[];
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                list: string;
+                indicator: string;
+                trigger: string;
+            };
+            vertical: {
+                list: string;
+                indicator: string;
+                trigger: string;
+            };
+        };
+        size: {
+            xs: {
+                trigger: string;
+                leadingIcon: string;
+            };
+            sm: {
+                trigger: string;
+                leadingIcon: string;
+            };
+            md: {
+                trigger: string;
+                leadingIcon: string;
+            };
+            lg: {
+                trigger: string;
+                leadingIcon: string;
+            };
+            xl: {
+                trigger: string;
+                leadingIcon: string;
+            };
+        };
+        full: {
+            true: {
+                trigger: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        orientation: "horizontal";
+        variant: ("solid" | "soft")[];
+        class: {
+            indicator: string;
+            list?: undefined;
+        };
+    } | {
+        orientation: "horizontal";
+        variant: "link";
+        class: {
+            list: string;
+            indicator: string;
+        };
+    } | {
+        orientation: "vertical";
+        variant: ("solid" | "soft")[];
+        class: {
+            indicator: string;
+            list: string;
+        };
+    } | {
+        orientation: "vertical";
+        variant: "link";
+        class: {
+            list: string;
+            indicator: string;
+        };
+    })[];
+};
+export default _default;