@byyuurin/ui 0.0.3 → 0.0.5

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

@@ -6,7 +6,7 @@ declare const _default: {
         indicator: string;
         trigger: string[];
         content: string;
-        leadingIcon: string;
+        prefixIcon: string;
         label: string;
     };
     variants: {
@@ -16,11 +16,21 @@ declare const _default: {
                 trigger: string[];
                 indicator: string;
             };
+            outline: {
+                list: string;
+                trigger: string[];
+                indicator: string;
+            };
             soft: {
                 list: string;
                 trigger: string[];
                 indicator: string;
             };
+            'soft-outline': {
+                list: string;
+                trigger: string[];
+                indicator: string;
+            };
             link: {
                 list: string;
                 indicator: string;
@@ -42,24 +52,19 @@ declare const _default: {
         };
         size: {
             xs: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             sm: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             md: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             lg: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             xl: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
         };
         full: {
@@ -69,33 +74,59 @@ declare const _default: {
         };
     };
     compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            trigger: string;
+            indicator?: undefined;
+            list?: undefined;
+        };
+        orientation?: undefined;
+        variant?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            trigger: string;
+            indicator?: undefined;
+            list?: undefined;
+        };
+        orientation?: undefined;
+        variant?: undefined;
+    } | {
         orientation: "horizontal";
-        variant: ("solid" | "soft")[];
+        variant: ("solid" | "outline" | "soft" | "soft-outline")[];
         class: {
             indicator: string;
+            trigger?: undefined;
             list?: undefined;
         };
+        size?: undefined;
     } | {
         orientation: "horizontal";
         variant: "link";
         class: {
             list: string;
             indicator: string;
+            trigger?: undefined;
         };
+        size?: undefined;
     } | {
         orientation: "vertical";
-        variant: ("solid" | "soft")[];
+        variant: ("solid" | "outline" | "soft" | "soft-outline")[];
         class: {
             indicator: string;
             list: string;
+            trigger?: undefined;
         };
+        size?: undefined;
     } | {
         orientation: "vertical";
         variant: "link";
         class: {
             list: string;
             indicator: string;
+            trigger?: undefined;
         };
+        size?: undefined;
     })[];
 };
 export default _default;

package/dist/runtime/theme/tabs.mjs

@@ -1,117 +1,143 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    root: "flex items-center gap-2",
-    list: "relative flex p-1 group",
-    indicator: "absolute transition-all duration-200",
-    trigger: [
-      "group relative inline-flex items-center shrink-0 min-w-0 font-medium rounded-ui-tabs transition-colors",
-      "focus:outline-hidden",
-      "disabled:cursor-not-allowed disabled:opacity-50"
-    ],
-    content: "w-full focus:outline-none",
-    leadingIcon: "shrink-0",
-    label: "truncate"
-  },
-  variants: {
-    variant: {
-      solid: {
-        list: "bg-ui-cb/5 rounded-ui-tabs",
-        trigger: [
-          "data-[state=active]:color-ui-c1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill/80",
-          "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
-        ],
-        indicator: "bg-ui-fill/90 rounded-ui-tabs shadow-xs"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "flex items-center gap-2",
+      list: "relative flex p-1 group",
+      indicator: "absolute transition-all duration-200",
+      trigger: [
+        "group relative inline-flex items-center gap-0.25em shrink-0 min-w-0 font-medium rounded-ui-tabs transition-colors",
+        "outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      ],
+      content: "w-full focus:outline-none",
+      prefixIcon: "shrink-0 size-1.5em",
+      label: "truncate"
+    },
+    variants: {
+      variant: {
+        "solid": {
+          list: "bg-ui-cb/5 rounded-ui-tabs",
+          trigger: [
+            "data-[state=active]:color-ui-c1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb/80",
+            "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+          ],
+          indicator: "bg-ui-fill/90 rounded-ui-tabs shadow-xs"
+        },
+        "outline": {
+          list: "bg-ui-cb/5 rounded-ui-tabs",
+          trigger: [
+            "data-[state=active]:color-ui-content focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-content/80",
+            "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+          ],
+          indicator: "rounded-ui-tabs ring ring-inset ring-ui-content"
+        },
+        "soft": {
+          list: "bg-ui-cb/5 rounded-ui-tabs",
+          trigger: [
+            "data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill",
+            "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+          ],
+          indicator: "bg-ui-fill/10 rounded-ui-tabs shadow-xs"
+        },
+        "soft-outline": {
+          list: "bg-ui-cb/5 rounded-ui-tabs",
+          trigger: [
+            "data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill",
+            "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+          ],
+          indicator: "bg-ui-fill/10 rounded-ui-tabs shadow-xs ring ring-inset ring-ui-content/40"
+        },
+        "link": {
+          list: "bg-ui-cb/5 border-ui-cb/10",
+          indicator: "bg-ui-fill rounded-full",
+          trigger: [
+            "data-[state=active]:color-ui-base focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-base",
+            "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
+          ]
+        }
       },
-      soft: {
-        list: "bg-ui-c1 rounded-ui-tabs",
-        trigger: [
-          "data-[state=active]:color-ui-fill focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-fill",
-          "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
-        ],
-        indicator: "bg-ui-fill/10 rounded-ui-tabs shadow-xs"
+      orientation: {
+        horizontal: {
+          root: "flex-col",
+          list: "w-full",
+          indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
+          trigger: "justify-center"
+        },
+        vertical: {
+          list: "flex-col",
+          indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]",
+          trigger: "flex-1 w-full"
+        }
       },
-      link: {
-        list: "border-ui-cb/10",
-        indicator: "bg-ui-fill rounded-full",
-        trigger: [
-          "data-[state=active]:color-ui-base focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-base",
-          "data-[state=inactive]:color-ui-cb/80 hover:data-[state=inactive]:not-disabled:color-ui-cb"
-        ]
-      }
-    },
-    orientation: {
-      horizontal: {
-        root: "flex-col",
-        list: "w-full",
-        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]",
-        trigger: "justify-center"
+      size: {
+        xs: {
+          root: "text-sm"
+        },
+        sm: {
+          root: "tex-tsm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
       },
-      vertical: {
-        list: "flex-col",
-        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]",
-        trigger: "flex-1 w-full"
+      full: {
+        true: {
+          trigger: "w-full flex-1"
+        }
       }
     },
-    size: {
-      xs: {
-        trigger: "px-2 py-1 text-xs gap-1",
-        leadingIcon: "size-4"
+    compoundVariants: [
+      {
+        size: ["xs", "sm", "md"],
+        class: {
+          trigger: "p-1.5 px-2.5"
+        }
       },
-      sm: {
-        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
-        leadingIcon: "size-4"
+      {
+        size: ["lg", "xl"],
+        class: {
+          trigger: "p-2.5 px-4.5"
+        }
       },
-      md: {
-        trigger: "px-3 py-1.5 text-sm gap-1.5",
-        leadingIcon: "size-5"
+      {
+        orientation: "horizontal",
+        variant: ["solid", "soft", "outline", "soft-outline"],
+        class: {
+          indicator: "inset-y-1"
+        }
       },
-      lg: {
-        trigger: "px-3 py-2 text-sm gap-2",
-        leadingIcon: "size-5"
+      {
+        orientation: "horizontal",
+        variant: "link",
+        class: {
+          list: "border-b -mb-px",
+          indicator: "-bottom-px h-px"
+        }
       },
-      xl: {
-        trigger: "px-3 py-2 text-base gap-2",
-        leadingIcon: "size-6"
-      }
-    },
-    full: {
-      true: {
-        trigger: "w-full flex-1"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      orientation: "horizontal",
-      variant: ["solid", "soft"],
-      class: {
-        indicator: "inset-y-1"
-      }
-    },
-    {
-      orientation: "horizontal",
-      variant: "link",
-      class: {
-        list: "border-b -mb-px",
-        indicator: "-bottom-px h-px"
-      }
-    },
-    {
-      orientation: "vertical",
-      variant: ["solid", "soft"],
-      class: {
-        indicator: "inset-x-1",
-        list: "items-center rounded-[calc(var(--ui-radius-tabs)*0.66)]"
-      }
-    },
-    {
-      orientation: "vertical",
-      variant: "link",
-      class: {
-        list: "border-s -ms-px",
-        indicator: "-start-px w-px"
+      {
+        orientation: "vertical",
+        variant: ["solid", "soft", "outline", "soft-outline"],
+        class: {
+          indicator: "inset-x-1",
+          list: "items-center rounded-[calc(var(--ui-radius-tabs)*0.66)]"
+        }
+      },
+      {
+        orientation: "vertical",
+        variant: "link",
+        class: {
+          list: "border-s -ms-px",
+          indicator: "-start-px w-px"
+        }
       }
-    }
-  ]
-});
+    ]
+  }
+);

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

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

package/dist/runtime/theme/textarea.mjs

@@ -0,0 +1,113 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "rounded-ui-base transition-colors aria-disabled:opacity-50",
+      base: [
+        "w-full color-inherit bg-transparent border-0 resize-none placeholder:color-ui-cb/50",
+        "focus:outline-none",
+        "disabled: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"
+        }
+      },
+      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-content/80 aria-disabled:bg-ui-fill/5 hover:aria-disabled:color-ui-content/80 hover:aria-disabled:bg-ui-fill/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-content/80 aria-disabled:bg-ui-fill/5 hover:aria-disabled:color-ui-content/80 hover:aria-disabled:bg-ui-fill/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"
+        }
+      },
+      underline: {
+        true: ""
+      },
+      highlight: {
+        true: {
+          base: ""
+        }
+      }
+    },
+    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 px-2.5"
+        }
+      },
+      {
+        size: ["lg", "xl"],
+        class: {
+          root: "p-2.5 px-3.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"
+        }
+      }
+    ]
+  }
+);

package/dist/runtime/theme/toast.mjs

@@ -1,27 +1,30 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    root: "relative group overflow-hidden bg-ui-c1 shadow-lg rounded-ui-box ring ring-ui-c2 p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-c2",
-    wrapper: "w-0 flex-1 flex flex-col gap-1",
-    title: "text-base font-medium color-ui-cb",
-    description: "text-sm color-ui-cb/80",
-    icon: "shrink-0 size-6 color-ui-cb",
-    avatar: "shrink-0",
-    avatarSize: "2xl",
-    actions: "flex flex-wrap gap-1.5 shrink-0",
-    progress: "absolute inset-x-0 bottom-0 h-1 z-[-1] color-ui-base/80 bg-current",
-    close: "p-0.5"
-  },
-  variants: {
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-1"
-      },
-      false: {
-        root: "items-center",
-        actions: "items-center"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative group overflow-hidden bg-ui-c1 shadow-lg rounded-ui-box ring ring-ui-c2 p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ui-c2",
+      wrapper: "w-0 flex-1 flex flex-col gap-1",
+      title: "text-base font-medium color-ui-cb",
+      description: "text-sm color-ui-cb/80",
+      icon: "shrink-0 size-6 color-ui-cb",
+      avatar: "shrink-0",
+      avatarSize: "2xl",
+      actions: "flex flex-wrap gap-1.5 shrink-0",
+      progress: "absolute inset-x-[var(--ui-radius-box)] bottom-0 h-1 z-[-1] color-ui-base/80 bg-current rounded-ui-base",
+      close: "p-0.5"
+    },
+    variants: {
+      multiline: {
+        true: {
+          root: "items-start",
+          actions: "items-start mt-1"
+        },
+        false: {
+          root: "items-center",
+          actions: "items-center"
+        }
       }
     }
   }
-});
+);

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

@@ -41,14 +41,14 @@ declare const _default: {
         };
     };
     compoundVariants: ({
-        position: ("top-left" | "top-center" | "top-right")[];
+        position: ("top-right" | "top-left" | "top-center")[];
         class: {
             viewport: string;
             base: string;
         };
         swipeDirection?: undefined;
     } | {
-        position: ("bottom-left" | "bottom-center" | "bottom-right")[];
+        position: ("bottom-right" | "bottom-left" | "bottom-center")[];
         class: {
             viewport: string;
             base: string;