@byyuurin/ui 0.0.4 → 0.0.5

package/dist/runtime/theme/button.mjs

@@ -1,132 +1,143 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    base: [
-      "inline-flex items-center rounded-ui-button 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"
-        ]
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      base: [
+        "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",
+        "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"
+    },
+    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/5 active:bg-ui-fill/10",
+            "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"
+          ]
+        },
+        "soft-outline": {
+          base: [
+            "color-ui-content/80 bg-ui-fill/10 ring ring-inset ring-ui-fill/40",
+            "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/80 bg-transparent",
+            "hover:color-ui-fill/60 active:color-ui-fill",
+            "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"
+        }
       },
-      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"
-        ]
+      active: {
+        true: ""
       },
-      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"
-        ]
+      prefix: {
+        true: ""
       },
-      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"
-        ]
+      suffix: {
+        true: ""
       },
-      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"
-        ]
+      loading: {
+        true: ""
       }
     },
-    size: {
-      xs: {
-        base: "text-xs"
+    compoundVariants: [
+      {
+        size: ["xs", "sm", "md"],
+        class: {
+          base: "p-1.5",
+          label: "px-1"
+        }
       },
-      sm: {
-        base: "text-sm"
+      {
+        size: ["lg", "xl"],
+        class: {
+          base: "p-2.5",
+          label: "px-2"
+        }
       },
-      md: {
-        base: "text-base"
+      {
+        active: true,
+        variant: "solid",
+        class: { base: "bg-ui-fill hover:bg-ui-fill" }
       },
-      lg: {
-        base: "text-lg"
+      {
+        active: true,
+        variant: "outline",
+        class: { base: "bg-ui-fill/10 hover:bg-ui-fill/10" }
       },
-      xl: {
-        base: "text-xl"
-      }
-    },
-    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: ["soft", "soft-outline"],
+        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" }
       }
-    },
-    {
-      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/runtime/theme/card.d.ts

@@ -14,9 +14,9 @@ declare const _default: {
                 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;
+                footer?: import("@byyuurin/ui-kit/index").ClassValue;
             } | null;
         };
     };
@@ -26,9 +26,9 @@ declare const _default: {
                 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;
+                footer?: import("@byyuurin/ui-kit/index").ClassValue;
             } | null;
         };
     }, {

package/dist/runtime/theme/card.mjs

@@ -1,11 +1,14 @@
 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"
+export default ct(
+  /* @unocss-include */
+  {
+    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/runtime/theme/checkbox.mjs

@@ -1,48 +1,51 @@
 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-checkbox color-ui-c1 ring-2 ring-ui-content ring-inset bg-ui-content",
-      "focus-visible:outline-ui-cb 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-c1"
-    ],
-    container: "flex items-center h-1.25em",
-    wrapper: "text-inherit ms-2",
-    icon: "color-ui-c1 shrink-0 size-1em transition data-[state=unchecked]:translate-y-full",
-    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`
-      }
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative flex items-start",
+      base: [
+        "size-1.25em shrink-0 flex items-center justify-center rounded-ui-checkbox color-ui-c1 ring-2 ring-ui-content ring-inset bg-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-c1"
+      ],
+      container: "flex items-center h-1.25em",
+      wrapper: "text-inherit ms-2",
+      icon: "color-ui-c1 shrink-0 size-1em transition data-[state=unchecked]:translate-y-full",
+      label: "flex color-ui-cb after:content-empty",
+      description: "color-ui-cb/60"
     },
-    disabled: {
-      true: {
-        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+    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`
+        }
       },
-      false: {
-        label: "cursor-pointer"
+      disabled: {
+        true: {
+          root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+        },
+        false: {
+          label: "cursor-pointer"
+        }
       }
     }
   }
-});
+);

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

@@ -0,0 +1,56 @@
+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;
+            };
+            'soft-outline': {
+                base: string;
+            };
+        };
+        size: {
+            xs: {
+                base: string;
+            };
+            sm: {
+                base: string;
+            };
+            md: {
+                base: string;
+            };
+            lg: {
+                base: string;
+            };
+            xl: {
+                base: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            label: string;
+        };
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            label: string;
+        };
+    })[];
+};
+export default _default;

package/dist/runtime/theme/chip.mjs

@@ -0,0 +1,63 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    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"
+    },
+    variants: {
+      variant: {
+        "solid": {
+          base: [
+            "color-ui-c1 bg-ui-fill/90"
+          ]
+        },
+        "outline": {
+          base: "color-ui-fill bg-ui-c1 ring ring-inset ring-ui-fill"
+        },
+        "soft": {
+          base: "color-ui-content/80 bg-ui-fill/10"
+        },
+        "soft-outline": {
+          base: "color-ui-content/80 bg-ui-fill/10 ring ring-inset ring-ui-fill/40"
+        }
+      },
+      size: {
+        xs: {
+          base: "text-xs"
+        },
+        sm: {
+          base: "text-sm"
+        },
+        md: {
+          base: "text-base"
+        },
+        lg: {
+          base: "text-lg"
+        },
+        xl: {
+          base: "text-xl"
+        }
+      }
+    },
+    compoundVariants: [
+      {
+        size: ["xs", "sm", "md"],
+        class: {
+          base: "p-0.5",
+          label: "px-1"
+        }
+      },
+      {
+        size: ["lg", "xl"],
+        class: {
+          base: "p-1",
+          label: "px-2"
+        }
+      }
+    ]
+  }
+);

package/dist/runtime/theme/drawer.mjs

@@ -1,72 +1,75 @@
 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"
+export default ct(
+  /* @unocss-include */
+  {
+    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"
+        }
       },
-      bottom: {
-        content: "bottom-0 mt-24 flex-col rounded-t-ui-box",
-        handle: "mt-4"
+      blur: {
+        true: {
+          overlay: "backdrop-blur-sm"
+        }
       },
-      left: {
-        content: "left-4 flex-row-reverse rounded-r-ui-box",
-        handle: "mr-4"
-      }
-    },
-    blur: {
-      true: {
-        overlay: "backdrop-blur-sm"
+      full: {
+        true: ""
       }
     },
-    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"
+    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"
+        }
       }
-    }
-  ]
-});
+    ]
+  }
+);