@byyuurin/ui 0.0.3 → 0.0.5

package/dist/runtime/theme/select.mjs

@@ -1,154 +1,167 @@
 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"
-        ]
+export default ct(
+  /* @unocss-include */
+  {
+    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"
+          ]
+        },
+        "soft-outline": {
+          base: [
+            "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",
+            "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: ""
       },
-      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"
-        ]
+      suffix: {
+        true: ""
       },
-      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"
-        ]
+      loading: {
+        true: ""
       },
-      none: {
-        base: "color-ui-cb bg-transparent"
+      underline: {
+        true: ""
+      },
+      highlight: {
+        true: ""
       }
     },
-    size: {
-      xs: {
-        base: "text-xs",
-        item: "text-xs"
+    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",
+            "data-[state=open]:after:h-2px data-[state=open]:after:bg-ui-fill/60"
+          ]
+        }
       },
-      sm: {
-        base: "text-sm",
-        item: "text-sm"
+      {
+        size: ["xs", "sm", "md"],
+        class: {
+          base: "p-1.5 px-2.5",
+          item: "p-1.5 px-2.5"
+        }
       },
-      md: {
-        base: "text-base",
-        item: "text-base"
+      {
+        size: ["lg", "xl"],
+        class: {
+          base: "p-2.5 px-3.5",
+          item: "p-2.5 px-3.5"
+        }
       },
-      lg: {
-        base: "text-lg",
-        item: "text-lg"
+      {
+        variant: ["soft", "soft-outline", "ghost", "none"],
+        highlight: true,
+        class: {
+          base: "ring ring-inset ring-ui-fill/80"
+        }
       },
-      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"
+      {
+        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/runtime/theme/slider.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    base: undefined;
+    slots: {
+        root: string;
+        track: string[];
+        range: string;
+        thumb: string[];
+    };
+    variants: {
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                range: string;
+            };
+            vertical: {
+                root: string;
+                range: string;
+            };
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        size: {
+            xs: {
+                root: string;
+            };
+            sm: {
+                root: string;
+            };
+            md: {
+                root: string;
+            };
+            lg: {
+                root: string;
+            };
+            xl: {
+                root: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                root: string;
+                range: string;
+            };
+            vertical: {
+                root: string;
+                range: string;
+            };
+        };
+    }, {
+        root: string;
+        track: string[];
+        range: string;
+        thumb: string[];
+    }, undefined>;
+};
+export default _default;

package/dist/runtime/theme/slider.mjs

@@ -0,0 +1,49 @@
+import { ct } from "@byyuurin/ui-kit";
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative flex items-center select-none touch-none aria-disabled:opacity-50",
+      track: [
+        "relative bg-ui-cb/10 overflow-hidden rounded-full flex-grow cursor-pointer",
+        "data-[disabled]:cursor-not-allowed",
+        "data-[orientation=horizontal]:h-0.6em data-[orientation=vertical]:w-0.6em"
+      ],
+      range: "absolute rounded-full bg-ui-fill",
+      thumb: [
+        "size-1em rounded-full bg-ui-c1 ring-0.2em cursor-pointer focus-visible:outline-0.2em focus-visible:outline-offset-0.2em",
+        "data-[disabled]:cursor-not-allowed",
+        "ring-ui-fill outline-none focus-visible:outline-ui-fill/50"
+      ]
+    },
+    variants: {
+      size: {
+        xs: {
+          root: "text-xs"
+        },
+        sm: {
+          root: "text-sm"
+        },
+        md: {
+          root: "text-base"
+        },
+        lg: {
+          root: "text-lg"
+        },
+        xl: {
+          root: "text-xl"
+        }
+      },
+      orientation: {
+        horizontal: {
+          root: "w-full",
+          range: "h-full"
+        },
+        vertical: {
+          root: "flex-col h-full",
+          range: "w-full"
+        }
+      }
+    }
+  }
+);

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

@@ -28,12 +28,6 @@ declare const _default: {
                 root: string;
             };
         };
-        round: {
-            true: {
-                base: string;
-                thumb: string;
-            };
-        };
         checked: {
             true: {
                 icon: string;
@@ -82,12 +76,6 @@ declare const _default: {
                 root: string;
             };
         };
-        round: {
-            true: {
-                base: string;
-                thumb: string;
-            };
-        };
         checked: {
             true: {
                 icon: string;

package/dist/runtime/theme/switch.mjs

@@ -1,78 +1,75 @@
 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"
+export default ct(
+  /* @unocss-include */
+  {
+    slots: {
+      root: "relative flex items-start",
+      base: [
+        "inline-flex items-center shrink-0 rounded-ui-switch border-2 border-transparent transition-colors duration-200",
+        "outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb/80",
+        "data-[state=unchecked]:bg-ui-cb/10 data-[state=checked]:bg-ui-fill/80",
+        "w-2.7em"
+      ],
+      container: "flex items-center h-1.5em",
+      thumb: [
+        "group pointer-events-none rounded-ui-switch 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"
+        }
       },
-      sm: {
-        root: "text-sm"
+      checked: {
+        true: {
+          icon: "group-data-[state=checked]:opacity-100"
+        }
       },
-      md: {
-        root: "text-base"
+      unchecked: {
+        true: {
+          icon: "group-data-[state=unchecked]:opacity-100"
+        }
       },
-      lg: {
-        root: "text-lg"
+      loading: {
+        true: {
+          root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed",
+          icon: "animate-spin"
+        }
       },
-      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"
+      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"
+        }
       }
     }
   }
-});
+);