@byyuurin/ui 0.0.3 → 0.0.5

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;

package/dist/runtime/theme/pinInput.mjs

@@ -0,0 +1,108 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "inline-flex items-center gap-x-2",
+      container: "rounded-ui-base border-0 transition-colors aria-disabled:opacity-50",
+      base: "w-full color-inherit bg-transparent text-center placeholder:color-ui-cb/50 focus:outline-none disabled:cursor-not-allowed"
+    },
+    variants: {
+      size: {
+        xs: {
+          container: "text-xs size-7"
+        },
+        sm: {
+          container: "text-sm size-8"
+        },
+        md: {
+          container: "text-base size-9"
+        },
+        lg: {
+          container: "text-lg size-12.5"
+        },
+        xl: {
+          container: "text-xl size-12.5"
+        }
+      },
+      variant: {
+        "outline": {
+          container: [
+            "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": {
+          container: [
+            "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": {
+          container: [
+            "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": {
+          container: [
+            "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": {
+          container: "color-ui-cb bg-transparent"
+        }
+      },
+      underline: {
+        true: ""
+      },
+      highlight: {
+        true: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: ["soft", "ghost", "none"],
+        highlight: false,
+        underline: true,
+        class: {
+          container: [
+            "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: {
+          base: "p-1.5"
+        }
+      },
+      {
+        size: ["lg", "xl"],
+        class: {
+          base: "p-2.5"
+        }
+      },
+      {
+        variant: ["soft", "soft-outline", "ghost", "none"],
+        highlight: true,
+        class: {
+          container: "ring ring-inset ring-ui-fill/80"
+        }
+      },
+      {
+        variant: ["outline"],
+        highlight: true,
+        class: {
+          container: "ring-2 ring-ui-fill/80 focus-within:ring-ui-fill/80"
+        }
+      }
+    ]
+  }
+);

package/dist/runtime/theme/popover.mjs

@@ -1,10 +1,13 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    content: [
-      "color-ui-base bg-ui-base shadow-lg rounded-ui-box ring ring-ui-base/10",
-      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto"
-    ],
-    arrow: "fill-ui-base stroke-ui-cb/10"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      content: [
+        "color-ui-base bg-ui-base shadow-lg rounded-ui-box ring ring-ui-base/10",
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] focus:outline-none pointer-events-auto"
+      ],
+      arrow: "fill-ui-base stroke-ui-cb/10"
+    }
   }
-});
+);

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

@@ -16,7 +16,6 @@ declare const _default: {
         orientation: {
             horizontal: {
                 fieldset: string;
-                wrapper: string;
             };
             vertical: {
                 fieldset: string;
@@ -39,17 +38,6 @@ declare const _default: {
                 root: string;
             };
         };
-        dot: {
-            true: {
-                indicator: string;
-            };
-        };
-        round: {
-            true: {
-                base: string;
-                indicator: string;
-            };
-        };
         disabled: {
             true: {
                 root: string;
@@ -68,7 +56,6 @@ declare const _default: {
         orientation: {
             horizontal: {
                 fieldset: string;
-                wrapper: string;
             };
             vertical: {
                 fieldset: string;
@@ -91,17 +78,6 @@ declare const _default: {
                 root: string;
             };
         };
-        dot: {
-            true: {
-                indicator: string;
-            };
-        };
-        round: {
-            true: {
-                base: string;
-                indicator: string;
-            };
-        };
         disabled: {
             true: {
                 root: string;

package/dist/runtime/theme/radioGroup.mjs

@@ -1,67 +1,58 @@
 import { ct } from "@byyuurin/ui-kit";
-export default ct({
-  slots: {
-    root: "relative",
-    fieldset: "flex flex-wrap gap-0.5em",
-    legend: "mb-1 block font-medium color-ui-cb",
-    item: "flex items-start",
-    base: "size-1.25em rounded-ui-base ring ring-inset ring-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb",
-    indicator: "flex items-center justify-center size-full rounded-ui-base bg-ui-fill",
-    container: "h-1.5em flex items-center",
-    wrapper: "ms-2",
-    label: "block font-medium color-ui-cb",
-    description: "color-ui-cb/60"
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        fieldset: "flex-row",
-        wrapper: "me-2"
-      },
-      vertical: {
-        fieldset: "flex-col"
-      }
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative",
+      fieldset: "flex flex-wrap gap-2 gap-x-4",
+      legend: "mb-2 color-ui-cb",
+      item: "flex items-start",
+      base: "relative size-1.25em rounded-ui-radio ring ring-inset ring-ui-cb outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb/80 transition data-[state=checked]:ring-ui-base",
+      indicator: "absolute inset-0 scale-0 rounded-ui-radio bg-ui-fill transition data-[state=checked]:scale-66",
+      container: "h-1.5em flex items-center",
+      wrapper: "",
+      label: "block ps-2 color-ui-cb",
+      description: "ps-2 color-ui-cb/60"
     },
-    size: {
-      xs: {
-        root: "text-xs"
-      },
-      sm: {
-        root: "text-sm"
+    variants: {
+      orientation: {
+        horizontal: {
+          fieldset: "flex-row"
+        },
+        vertical: {
+          fieldset: "flex-col"
+        }
       },
-      md: {
-        root: "text-base"
+      size: {
+        xs: {
+          root: "text-xs"
+        },
+        sm: {
+          root: "text-sm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
       },
-      lg: {
-        root: "text-lg"
-      },
-      xl: {
-        root: "text-xl"
-      }
-    },
-    dot: {
-      true: {
-        indicator: "after:content-empty after:size-0.75em after:bg-ui-c1 after:rounded-ui-base"
-      }
-    },
-    round: {
-      true: {
-        base: "rounded-full",
-        indicator: "rounded-full after:rounded-full"
-      }
-    },
-    disabled: {
-      true: {
-        root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+      disabled: {
+        true: {
+          root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"
+        },
+        false: {
+          label: "cursor-pointer"
+        }
       },
-      false: {
-        label: "cursor-pointer"
-      }
-    },
-    required: {
-      true: {
-        legend: "after:content-['*'] after:ms-0.5"
+      required: {
+        true: {
+          legend: "after:content-['*'] after:ms-0.5"
+        }
       }
     }
   }
-});
+);

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

@@ -0,0 +1,51 @@
+import type { TransitionGroupProps } from 'vue';
+export declare const transitionProps: TransitionGroupProps;
+declare const _default: {
+    base: undefined;
+    slots: {
+        /** Contains all the parts of a scroll area. */
+        root: string;
+        /** The viewport area of the scroll area. */
+        viewport: string;
+        /** The vertical and horizontal scrollbar. */
+        scrollbar: string[];
+        /** The thumb to be used in `ScrollAreaScrollbar`. */
+        thumb: string[];
+        /** The corner where both vertical and horizontal scrollbars meet. */
+        corner: string;
+    };
+    variants: {
+        [key: string]: {
+            [key: string]: "" | {
+                root?: import("@byyuurin/ui-kit/index").ClassValue;
+                viewport?: import("@byyuurin/ui-kit/index").ClassValue;
+                corner?: import("@byyuurin/ui-kit/index").ClassValue;
+                scrollbar?: import("@byyuurin/ui-kit/index").ClassValue;
+                thumb?: 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;
+                viewport?: import("@byyuurin/ui-kit/index").ClassValue;
+                corner?: import("@byyuurin/ui-kit/index").ClassValue;
+                scrollbar?: import("@byyuurin/ui-kit/index").ClassValue;
+                thumb?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    }, {
+        /** Contains all the parts of a scroll area. */
+        root: string;
+        /** The viewport area of the scroll area. */
+        viewport: string;
+        /** The vertical and horizontal scrollbar. */
+        scrollbar: string[];
+        /** The thumb to be used in `ScrollAreaScrollbar`. */
+        thumb: string[];
+        /** The corner where both vertical and horizontal scrollbars meet. */
+        corner: string;
+    }, undefined>;
+};
+export default _default;

package/dist/runtime/theme/scrollArea.mjs

@@ -0,0 +1,33 @@
+import { ct } from "@byyuurin/ui-kit";
+export const transitionProps = {
+  enterFromClass: "opacity-0",
+  enterActiveClass: "transition",
+  leaveToClass: "opacity-0",
+  leaveActiveClass: "transition",
+  moveClass: "transition"
+};
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      /** Contains all the parts of a scroll area. */
+      root: "relative overflow-hidden",
+      /** The viewport area of the scroll area. */
+      viewport: "size-full rounded-ui-base outline-none",
+      /** The vertical and horizontal scrollbar. */
+      scrollbar: [
+        "flex select-none touch-none p-0.5 duration-160 ease-out",
+        "data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:my-[calc(var(--ui-radius-box)+0.25rem)]",
+        "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:mx-[calc(var(--ui-radius-box)+0.25rem)]"
+      ],
+      /** The thumb to be used in `ScrollAreaScrollbar`. */
+      thumb: [
+        "relative flex-1 bg-ui-cb/20 rounded-ui-base cursor-pointer transition-colors",
+        "hover:bg-ui-cb/30 active:bg-ui-cb/40",
+        "before:content-empty before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-10 before:min-h-10 "
+      ],
+      /** The corner where both vertical and horizontal scrollbars meet. */
+      corner: ""
+    }
+  }
+);

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

@@ -29,6 +29,9 @@ declare const _default: {
             soft: {
                 base: string[];
             };
+            'soft-outline': {
+                base: string[];
+            };
             ghost: {
                 base: string[];
             };
@@ -79,7 +82,7 @@ declare const _default: {
         highlight: false;
         underline: true;
         class: {
-            base: string;
+            base: string[];
             item?: undefined;
             prefixIcon?: undefined;
             suffixIcon?: undefined;
@@ -117,7 +120,7 @@ declare const _default: {
         prefix?: undefined;
         suffix?: undefined;
     } | {
-        variant: ("soft" | "ghost" | "none")[];
+        variant: ("soft" | "soft-outline" | "ghost" | "none")[];
         highlight: true;
         class: {
             base: string;