@byyuurin/ui 0.0.4 → 0.0.5

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

@@ -1,16 +1,21 @@
 export { default as accordion } from './accordion';
+export { default as alert } from './alert';
 export { default as app } from './app';
+export { default as badge } from './badge';
 export { default as button } from './button';
 export { default as card } from './card';
 export { default as checkbox } from './checkbox';
+export { default as chip } from './chip';
 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 pinInput } from './pinInput';
 export { default as popover } from './popover';
 export { default as radioGroup } from './radioGroup';
 export { default as scrollArea } from './scrollArea';
 export { default as select } from './select';
+export { default as slider } from './slider';
 export { default as switch } from './switch';
 export { default as tabs } from './tabs';
 export { default as textarea } from './textarea';

package/dist/runtime/theme/index.mjs

@@ -1,16 +1,21 @@
 export { default as accordion } from "./accordion.mjs";
+export { default as alert } from "./alert.mjs";
 export { default as app } from "./app.mjs";
+export { default as badge } from "./badge.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 chip } from "./chip.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 pinInput } from "./pinInput.mjs";
 export { default as popover } from "./popover.mjs";
 export { default as radioGroup } from "./radioGroup.mjs";
 export { default as scrollArea } from "./scrollArea.mjs";
 export { default as select } from "./select.mjs";
+export { default as slider } from "./slider.mjs";
 export { default as switch } from "./switch.mjs";
 export { default as tabs } from "./tabs.mjs";
 export { default as textarea } from "./textarea.mjs";

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

@@ -33,6 +33,9 @@ declare const _default: {
             soft: {
                 root: string[];
             };
+            'soft-outline': {
+                root: string[];
+            };
             ghost: {
                 root: string[];
             };
@@ -53,9 +56,7 @@ declare const _default: {
             true: "";
         };
         highlight: {
-            true: {
-                base: string;
-            };
+            true: "";
         };
         type: {
             file: {
@@ -68,7 +69,8 @@ declare const _default: {
         highlight: false;
         underline: true;
         class: {
-            root: string;
+            root: string[];
+            base?: undefined;
             prefixIcon?: undefined;
             suffixIcon?: undefined;
         };
@@ -80,6 +82,7 @@ declare const _default: {
         size: ("xs" | "sm" | "md")[];
         class: {
             root: string;
+            base: string;
             prefixIcon?: undefined;
             suffixIcon?: undefined;
         };
@@ -93,6 +96,7 @@ declare const _default: {
         size: ("lg" | "xl")[];
         class: {
             root: string;
+            base: string;
             prefixIcon?: undefined;
             suffixIcon?: undefined;
         };
@@ -103,10 +107,11 @@ declare const _default: {
         prefix?: undefined;
         suffix?: undefined;
     } | {
-        variant: ("soft" | "ghost" | "none")[];
+        variant: ("soft" | "soft-outline" | "ghost" | "none")[];
         highlight: true;
         class: {
             root: string;
+            base?: undefined;
             prefixIcon?: undefined;
             suffixIcon?: undefined;
         };
@@ -120,6 +125,7 @@ declare const _default: {
         highlight: true;
         class: {
             root: string;
+            base?: undefined;
             prefixIcon?: undefined;
             suffixIcon?: undefined;
         };
@@ -134,6 +140,7 @@ declare const _default: {
         class: {
             prefixIcon: string;
             root?: undefined;
+            base?: undefined;
             suffixIcon?: undefined;
         };
         variant?: undefined;
@@ -148,6 +155,7 @@ declare const _default: {
         class: {
             suffixIcon: string;
             root?: undefined;
+            base?: undefined;
             prefixIcon?: undefined;
         };
         variant?: undefined;

package/dist/runtime/theme/input.mjs

@@ -1,133 +1,146 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    root: "inline-flex items-center gap-x-2 rounded-ui-base transition-colors aria-disabled:opacity-50",
-    base: [
-      "w-full color-inherit bg-transparent border-0 placeholder:color-ui-cb/50",
-      "focus:outline-none",
-      "disabled:cursor-not-allowed"
-    ],
-    prefix: "flex items-center",
-    prefixIcon: "shrink-0 size-1.25em",
-    suffix: "flex items-center",
-    suffixIcon: "shrink-0 size-1.25em"
-  },
-  variants: {
-    size: {
-      xs: {
-        root: "text-xs"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "inline-flex items-center rounded-ui-base transition-colors aria-disabled:opacity-50",
+      base: [
+        "w-full color-inherit bg-transparent border-0 placeholder:color-ui-cb/50",
+        "focus:outline-none",
+        "disabled:cursor-not-allowed"
+      ],
+      prefix: "flex items-center",
+      prefixIcon: "shrink-0 size-1.25em",
+      suffix: "flex items-center",
+      suffixIcon: "shrink-0 size-1.25em"
+    },
+    variants: {
+      size: {
+        xs: {
+          root: "text-xs"
+        },
+        sm: {
+          root: "text-sm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
       },
-      sm: {
-        root: "text-sm"
+      variant: {
+        "outline": {
+          root: [
+            "color-ui-cb/80 bg-ui-c1 ring ring-inset ring-ui-cb/50",
+            "focus-within:ring-2 focus-within:ring-ui-cb/50",
+            "aria-disabled:ring-ui-cb/80 hover:aria-disabled:ring-ui-cb/80"
+          ]
+        },
+        "soft": {
+          root: [
+            "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",
+            "aria-disabled:color-ui-cb/80 aria-disabled:bg-ui-cb/5 hover:aria-disabled:color-ui-cb/80 hover:aria-disabled:bg-ui-cb/5"
+          ]
+        },
+        "soft-outline": {
+          root: [
+            "color-ui-cb/80 bg-ui-cb/4 ring ring-inset ring-ui-cb/10",
+            "hover:bg-ui-cb/6 hover:color-ui-cb/80 focus-within:bg-ui-cb/8 focus-within:color-ui-cb/85",
+            "aria-disabled:color-ui-cb/80 aria-disabled:bg-ui-cb/5 hover:aria-disabled:color-ui-cb/80 hover:aria-disabled:bg-ui-cb/5"
+          ]
+        },
+        "ghost": {
+          root: [
+            "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",
+            "aria-disabled:color-ui-fill/80 aria-disabled:bg-transparent hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-transparent"
+          ]
+        },
+        "none": {
+          root: "color-ui-cb bg-transparent"
+        }
       },
-      md: {
-        root: "text-base"
+      prefix: {
+        true: ""
       },
-      lg: {
-        root: "text-lg"
+      suffix: {
+        true: ""
       },
-      xl: {
-        root: "text-xl"
-      }
-    },
-    variant: {
-      outline: {
-        root: [
-          "color-ui-cb/80 bg-ui-c1 ring ring-inset ring-ui-cb/50",
-          "focus-within:ring-2 focus-within:ring-ui-cb/50",
-          "aria-disabled:ring-ui-cb/80 hover:aria-disabled:ring-ui-cb/80"
-        ]
+      loading: {
+        true: ""
       },
-      soft: {
-        root: [
-          "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",
-          "aria-disabled:color-ui-content/80 aria-disabled:bg-ui-fill/5 hover:aria-disabled:color-ui-content/80 hover:aria-disabled:bg-ui-fill/5"
-        ]
+      underline: {
+        true: ""
       },
-      ghost: {
-        root: [
-          "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",
-          "aria-disabled:color-ui-fill/80 aria-disabled:bg-transparent hover:aria-disabled:color-ui-fill/80 hover:aria-disabled:bg-transparent"
-        ]
+      highlight: {
+        true: ""
       },
-      none: {
-        root: "color-ui-cb bg-transparent"
-      }
-    },
-    prefix: {
-      true: ""
-    },
-    suffix: {
-      true: ""
-    },
-    loading: {
-      true: ""
-    },
-    underline: {
-      true: ""
-    },
-    highlight: {
-      true: {
-        base: ""
-      }
-    },
-    type: {
-      file: {
-        base: "prefix-normal not-disabled:cursor-pointer file:pointer-events-none file:py-0 file:font-size-0.875em file:rounded-ui-button file:border-none file:color-ui-c1 file:bg-ui-cb/80"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      variant: ["soft", "ghost", "none"],
-      highlight: false,
-      underline: true,
-      class: {
-        root: "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: {
-        root: "p-1.5 px-2.5"
+      type: {
+        file: {
+          base: "prefix-normal not-disabled:cursor-pointer file:pointer-events-none file:py-0 file:font-size-0.875em file:rounded-ui-button file:border-none file:color-ui-c1 file:bg-ui-cb/80"
+        }
       }
     },
-    {
-      size: ["lg", "xl"],
-      class: {
-        root: "p-2.5 px-3.5"
-      }
-    },
-    {
-      variant: ["soft", "ghost", "none"],
-      highlight: true,
-      class: {
-        root: "ring ring-inset ring-ui-fill/80"
-      }
-    },
-    {
-      variant: ["outline"],
-      highlight: true,
-      class: {
-        root: "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"
+    compoundVariants: [
+      {
+        variant: ["soft", "ghost", "none"],
+        highlight: false,
+        underline: true,
+        class: {
+          root: [
+            "relative after:content-empty after:absolute after:inset-x-0 after:bottom-0 after:h-1px after:bg-ui-cb/40",
+            "focus-within:after:h-2px focus-within:after:bg-ui-fill/60"
+          ]
+        }
+      },
+      {
+        size: ["xs", "sm", "md"],
+        class: {
+          root: "p-1.5",
+          base: "px-1"
+        }
+      },
+      {
+        size: ["lg", "xl"],
+        class: {
+          root: "p-2.5",
+          base: "px-1.5"
+        }
+      },
+      {
+        variant: ["soft", "soft-outline", "ghost", "none"],
+        highlight: true,
+        class: {
+          root: "ring ring-inset ring-ui-fill/80"
+        }
+      },
+      {
+        variant: ["outline"],
+        highlight: true,
+        class: {
+          root: "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/runtime/theme/link.d.ts

@@ -26,6 +26,6 @@ declare const _default: {
         disabled: {
             true: "cursor-not-allowed opacity-50";
         };
-    }, undefined, "border-y border-t-transparent focus-visible:outline-ui-cb">;
+    }, undefined, "border-y border-t-transparent outline-none focus-visible:outline-ui-cb/80">;
 };
 export default _default;

package/dist/runtime/theme/link.mjs

@@ -1,23 +1,26 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  base: "border-y border-t-transparent focus-visible:outline-ui-cb",
-  variants: {
-    underline: {
-      true: "border-current",
-      false: "border-transparent"
-    },
-    active: {
-      true: [
-        "color-ui-fill",
-        "disabled:color-ui-fill aria-disabled:color-ui-fill"
-      ],
-      false: [
-        "color-ui-cb hover:color-ui-cb/80 transition-colors",
-        "disabled:hover:color-ui-cb aria-disabled:hover:color-ui-cb"
-      ]
-    },
-    disabled: {
-      true: "cursor-not-allowed opacity-50"
+export default ct(
+  /* @unocss-include */
+  {
+    base: "border-y border-t-transparent outline-none focus-visible:outline-ui-cb/80",
+    variants: {
+      underline: {
+        true: "border-current",
+        false: "border-transparent"
+      },
+      active: {
+        true: [
+          "color-ui-fill",
+          "disabled:color-ui-fill aria-disabled:color-ui-fill"
+        ],
+        false: [
+          "color-ui-cb hover:color-ui-cb/80 transition-colors",
+          "disabled:hover:color-ui-cb aria-disabled:hover:color-ui-cb"
+        ]
+      },
+      disabled: {
+        true: "cursor-not-allowed opacity-50"
+      }
     }
   }
-});
+);

package/dist/runtime/theme/modal.mjs

@@ -1,54 +1,57 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    overlay: "fixed inset-0 bg-ui-c3/75",
-    content: "fixed bg-ui-c1 divide-y divide-ui-cb/10 flex flex-col focus:outline-none",
-    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",
-    close: "ms-auto"
-  },
-  variants: {
-    transition: {
-      true: {
-        overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
-        content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
-      }
-    },
-    blur: {
-      true: {
-        overlay: "backdrop-blur-sm"
-      }
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      overlay: "fixed inset-0 bg-ui-c3/75",
+      content: "fixed bg-ui-c1 divide-y divide-ui-cb/10 flex flex-col focus:outline-none",
+      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",
+      close: "ms-auto"
     },
-    size: {
-      fullscreen: {
-        content: "inset-0"
+    variants: {
+      transition: {
+        true: {
+          overlay: "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]",
+          content: "data-[state=open]:animate-[scale-in_200ms_ease-out] data-[state=closed]:animate-[scale-out_200ms_ease-in]"
+        }
       },
-      sm: {
-        content: "w-screen-sm"
+      blur: {
+        true: {
+          overlay: "backdrop-blur-sm"
+        }
       },
-      md: {
-        content: "w-screen-md"
-      },
-      lg: {
-        content: "w-screen-lg"
-      },
-      xl: {
-        content: "w-screen-xl"
+      size: {
+        fullscreen: {
+          content: "inset-0"
+        },
+        sm: {
+          content: "w-screen-sm"
+        },
+        md: {
+          content: "w-screen-md"
+        },
+        lg: {
+          content: "w-screen-lg"
+        },
+        xl: {
+          content: "w-screen-xl"
+        }
       }
-    }
-  },
-  compoundVariants: [
-    {
-      size: ["sm", "md", "lg", "xl"],
-      class: {
-        content: [
-          "bottom-4 left-[50%] translate-x-[-50%] h-auto max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] ring ring-ui-c2",
-          "sm:bottom-auto sm:top-[50%] sm:translate-y-[-50%] sm:rounded-ui-box sm:shadow-lg"
-        ]
+    },
+    compoundVariants: [
+      {
+        size: ["sm", "md", "lg", "xl"],
+        class: {
+          content: [
+            "bottom-4 left-[50%] translate-x-[-50%] h-auto max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] ring ring-ui-c2",
+            "sm:bottom-auto sm:top-[50%] sm:translate-y-[-50%] sm:rounded-ui-box sm:shadow-lg"
+          ]
+        }
       }
-    }
-  ]
-});
+    ]
+  }
+);

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

@@ -0,0 +1,97 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        container: string;
+        base: string;
+    };
+    variants: {
+        size: {
+            xs: {
+                container: string;
+            };
+            sm: {
+                container: string;
+            };
+            md: {
+                container: string;
+            };
+            lg: {
+                container: string;
+            };
+            xl: {
+                container: string;
+            };
+        };
+        variant: {
+            outline: {
+                container: string[];
+            };
+            soft: {
+                container: string[];
+            };
+            'soft-outline': {
+                container: string[];
+            };
+            ghost: {
+                container: string[];
+            };
+            none: {
+                container: string;
+            };
+        };
+        underline: {
+            true: "";
+        };
+        highlight: {
+            true: "";
+        };
+    };
+    compoundVariants: ({
+        variant: ("soft" | "ghost" | "none")[];
+        highlight: false;
+        underline: true;
+        class: {
+            container: string[];
+            base?: undefined;
+        };
+        size?: undefined;
+    } | {
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            container?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            container?: undefined;
+        };
+        variant?: undefined;
+        highlight?: undefined;
+        underline?: undefined;
+    } | {
+        variant: ("soft" | "soft-outline" | "ghost" | "none")[];
+        highlight: true;
+        class: {
+            container: string;
+            base?: undefined;
+        };
+        underline?: undefined;
+        size?: undefined;
+    } | {
+        variant: "outline"[];
+        highlight: true;
+        class: {
+            container: string;
+            base?: undefined;
+        };
+        underline?: undefined;
+        size?: undefined;
+    })[];
+};
+export default _default;