@xingxingmofashu/ui 0.1.8 → 0.1.10

package/dist/theme/checkbox-group.d.ts

@@ -0,0 +1,41 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string[];
+            wrapper: string;
+        };
+        sm: {
+            root: string[];
+            wrapper: string;
+        };
+        md: {
+            root: string[];
+            wrapper: string;
+        };
+        lg: {
+            root: string[];
+            wrapper: string;
+        };
+        xl: {
+            root: string[];
+            wrapper: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    label: string[];
+    description: string[];
+    items: string;
+    item: string[];
+    box: string[];
+    fill: string[];
+    glass: string[];
+    overlay: string;
+    indicator: string[];
+    indicatorIcon: string;
+    wrapper: string;
+    itemLabel: string;
+    itemDescription: string;
+}, undefined, undefined, undefined, undefined>;
+export default _default;

package/dist/theme/checkbox-group.mjs

@@ -0,0 +1,111 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "flex w-full min-w-0 flex-col text-ui-ink",
+      "gap-[var(--ui-checkbox-group-gap)]"
+    ],
+    header: "flex min-w-0 flex-col gap-1",
+    label: [
+      "font-medium text-ui-ink",
+      "text-[length:var(--ui-checkbox-group-label-size)]",
+      "[filter:var(--ui-drop-shadow-label)]"
+    ],
+    description: [
+      "text-ui-ink opacity-60 leading-relaxed",
+      "text-[length:var(--ui-checkbox-group-description-size)]"
+    ],
+    items: "flex min-w-0 flex-col gap-[var(--ui-checkbox-group-item-gap)]",
+    item: [
+      "group relative inline-flex min-w-0 cursor-pointer select-none items-start align-top text-ui-ink",
+      "touch-none [-webkit-tap-highlight-color:transparent]",
+      "focus:outline-none",
+      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60",
+      "data-[readonly]:cursor-default"
+    ],
+    box: [
+      "relative inline-flex shrink-0 items-center justify-center overflow-hidden",
+      "h-[var(--ui-checkbox-size)] w-[var(--ui-checkbox-size)]",
+      "rounded-[var(--ui-checkbox-radius)]",
+      "group-focus-visible:outline-2 group-focus-visible:outline-offset-4 group-focus-visible:outline-ui-glass-focus",
+      "transition-[scale] duration-200 ease-out group-active:scale-95",
+      "motion-reduce:transition-none",
+      "[--ui-glass-tone:brightness(1)] [--ui-glass-contrast:1.1]",
+      "[--ui-glass-border:color-mix(in_srgb,var(--ui-ink)_26%,transparent)]",
+      "[--ui-glass-rim:rgb(255_255_255/0.16)]",
+      "[--ui-glass-surface:color-mix(in_srgb,var(--ui-ink)_5%,transparent)]",
+      "[--ui-shadow-glass:inset_0_0_0_1px_color-mix(in_srgb,var(--ui-ink)_6%,transparent),0_1px_2px_rgb(0_0_0/0.3)]",
+      "[--ui-glass-rim-inset:2px]"
+    ],
+    fill: [
+      "absolute inset-0 z-0 rounded-[inherit] bg-ui-ink",
+      "[background-image:linear-gradient(145deg,color-mix(in_srgb,var(--ui-ink)_88%,var(--ui-surface)),var(--ui-ink))]",
+      "scale-0 transition-transform duration-200 ease-out",
+      "group-data-[checked]:scale-100 group-data-[indeterminate]:scale-100",
+      "motion-reduce:transition-none"
+    ],
+    glass: [
+      "ui-glass",
+      "pointer-events-none absolute inset-0 z-[1] overflow-hidden rounded-[inherit]"
+    ],
+    overlay: "ui-glass-rim",
+    indicator: [
+      "relative z-10 flex items-center justify-center text-ui-surface",
+      "scale-50 opacity-0 transition-[opacity,scale] duration-200 ease-out",
+      "group-data-[checked]:scale-100 group-data-[checked]:opacity-100",
+      "group-data-[indeterminate]:scale-100 group-data-[indeterminate]:opacity-100",
+      "motion-reduce:transition-none"
+    ],
+    indicatorIcon: "block size-[var(--ui-checkbox-icon-size)]",
+    wrapper: "ms-[var(--ui-checkbox-gap)] min-w-0",
+    itemLabel: "block font-medium text-ui-ink leading-[var(--ui-checkbox-size)]",
+    itemDescription: "block text-ui-ink opacity-60"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: [
+          "[--ui-checkbox-size:16px] [--ui-checkbox-radius:5px] [--ui-checkbox-icon-size:10px] [--ui-checkbox-gap:6px]",
+          "[--ui-checkbox-group-gap:10px] [--ui-checkbox-group-item-gap:10px]",
+          "[--ui-checkbox-group-label-size:0.75rem] [--ui-checkbox-group-description-size:0.75rem]"
+        ],
+        wrapper: "text-xs"
+      },
+      sm: {
+        root: [
+          "[--ui-checkbox-size:18px] [--ui-checkbox-radius:5px] [--ui-checkbox-icon-size:11px] [--ui-checkbox-gap:7px]",
+          "[--ui-checkbox-group-gap:10px] [--ui-checkbox-group-item-gap:10px]",
+          "[--ui-checkbox-group-label-size:0.75rem] [--ui-checkbox-group-description-size:0.75rem]"
+        ],
+        wrapper: "text-xs"
+      },
+      md: {
+        root: [
+          "[--ui-checkbox-size:20px] [--ui-checkbox-radius:6px] [--ui-checkbox-icon-size:12px] [--ui-checkbox-gap:8px]",
+          "[--ui-checkbox-group-gap:12px] [--ui-checkbox-group-item-gap:12px]",
+          "[--ui-checkbox-group-label-size:0.875rem] [--ui-checkbox-group-description-size:0.875rem]"
+        ],
+        wrapper: "text-sm"
+      },
+      lg: {
+        root: [
+          "[--ui-checkbox-size:24px] [--ui-checkbox-radius:7px] [--ui-checkbox-icon-size:14px] [--ui-checkbox-gap:9px]",
+          "[--ui-checkbox-group-gap:12px] [--ui-checkbox-group-item-gap:14px]",
+          "[--ui-checkbox-group-label-size:0.875rem] [--ui-checkbox-group-description-size:0.875rem]"
+        ],
+        wrapper: "text-sm"
+      },
+      xl: {
+        root: [
+          "[--ui-checkbox-size:28px] [--ui-checkbox-radius:8px] [--ui-checkbox-icon-size:16px] [--ui-checkbox-gap:10px]",
+          "[--ui-checkbox-group-gap:14px] [--ui-checkbox-group-item-gap:16px]",
+          "[--ui-checkbox-group-label-size:1rem] [--ui-checkbox-group-description-size:1rem]"
+        ],
+        wrapper: "text-base"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/dist/theme/dialog.mjs

@@ -7,9 +7,9 @@ export default tv({
       "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
       "motion-reduce:transition-none"
     ],
-    viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
+    viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-surface",
+      "relative isolate m-auto w-full max-w-md bg-ui-surface",
       "rounded-[1.75rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",

package/dist/theme/field.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            root: string[];
+        };
+        sm: {
+            root: string[];
+        };
+        md: {
+            root: string[];
+        };
+        lg: {
+            root: string[];
+        };
+        xl: {
+            root: string[];
+        };
+    };
+}, {
+    root: string[];
+    label: string[];
+    error: string[];
+    description: string[];
+}, undefined, undefined, undefined, undefined>;
+export default _default;

package/dist/theme/field.mjs

@@ -0,0 +1,66 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "group/field flex w-full min-w-0 flex-col text-ui-ink",
+      "gap-[var(--ui-field-gap)]"
+    ],
+    label: [
+      "w-fit font-medium text-ui-ink",
+      "text-[length:var(--ui-field-label-size)]",
+      "[filter:var(--ui-drop-shadow-label)]",
+      "group-data-[disabled]/field:opacity-60"
+    ],
+    error: [
+      "min-w-0 font-medium leading-relaxed",
+      "text-red-700 ui-dark:text-red-400",
+      "text-[length:var(--ui-field-message-size)]",
+      "transition-opacity duration-150 ease-out",
+      "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
+      "motion-reduce:transition-none",
+      "group-data-[disabled]/field:opacity-60"
+    ],
+    description: [
+      "text-ui-ink opacity-60 leading-relaxed",
+      "text-[length:var(--ui-field-message-size)]",
+      "group-data-[disabled]/field:opacity-50"
+    ]
+  },
+  variants: {
+    size: {
+      xs: {
+        root: [
+          "[--ui-field-gap:4px] [--ui-field-label-size:0.75rem]",
+          "[--ui-field-message-size:0.75rem]"
+        ]
+      },
+      sm: {
+        root: [
+          "[--ui-field-gap:4px] [--ui-field-label-size:0.75rem]",
+          "[--ui-field-message-size:0.75rem]"
+        ]
+      },
+      md: {
+        root: [
+          "[--ui-field-gap:6px] [--ui-field-label-size:0.875rem]",
+          "[--ui-field-message-size:0.875rem]"
+        ]
+      },
+      lg: {
+        root: [
+          "[--ui-field-gap:6px] [--ui-field-label-size:0.875rem]",
+          "[--ui-field-message-size:0.875rem]"
+        ]
+      },
+      xl: {
+        root: [
+          "[--ui-field-gap:8px] [--ui-field-label-size:1rem]",
+          "[--ui-field-message-size:1rem]"
+        ]
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/dist/theme/fieldset.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("tailwind-variants").TVReturnType<{}, {
+    root: string[];
+    legend: string[];
+}, undefined, undefined, undefined, undefined>;
+export default _default;

package/dist/theme/fieldset.mjs

@@ -0,0 +1,14 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "m-0 flex w-full min-w-0 flex-col gap-4",
+      "border-0 p-0 text-ui-ink"
+    ],
+    legend: [
+      "w-fit font-medium text-base text-ui-ink",
+      "[filter:var(--ui-drop-shadow-label)]",
+      "data-[disabled]:opacity-60"
+    ]
+  }
+});

package/dist/theme/form.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("tailwind-variants").TVReturnType<{}, {
+    root: string[];
+}, undefined, undefined, undefined, undefined>;
+export default _default;

package/dist/theme/form.mjs

@@ -0,0 +1,6 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: ["flex w-full min-w-0 flex-col gap-4", "text-ui-ink"]
+  }
+});

package/dist/theme/input.d.ts

@@ -33,13 +33,11 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     };
 }, {
     root: string[];
-    label: string;
     control: string[];
     glass: string[];
     overlay: string;
     leadingIcon: string[];
     input: string[];
     trailingIcon: string[];
-    description: string;
 }, undefined, undefined, undefined, undefined>;
 export default _default;

package/dist/theme/input.mjs

@@ -2,10 +2,11 @@ import { tv } from "tailwind-variants";
 export default tv({
   slots: {
     root: [
-      "group flex w-full min-w-0 flex-col gap-1.5 text-ui-ink",
-      "data-[disabled]:cursor-not-allowed"
+      "group w-full min-w-0 text-ui-ink",
+      "data-[disabled]:cursor-not-allowed",
+      "has-[:disabled]:cursor-not-allowed",
+      "has-[:disabled]:[&:not([data-disabled])]:opacity-60"
     ],
-    label: "w-fit font-medium text-ui-ink group-data-[disabled]:opacity-60",
     control: [
       "relative isolate flex w-full min-w-0 items-center overflow-hidden",
       "h-[var(--ui-input-height)] rounded-[var(--ui-input-radius)]",
@@ -39,37 +40,36 @@ export default tv({
     trailingIcon: [
       "relative z-[1] inline-flex shrink-0 items-center justify-center text-ui-ink opacity-55",
       "[&_svg]:block [&_svg]:shrink-0"
-    ],
-    description: "text-ui-ink opacity-60 group-data-[disabled]:opacity-50"
+    ]
   },
   variants: {
     size: {
       xs: {
-        root: "gap-1 text-xs",
+        root: "text-xs",
         control: "[--ui-input-height:28px] [--ui-input-radius:8px] [--ui-input-padding:10px] [--ui-input-gap:6px]",
         leadingIcon: "[&_svg]:size-4",
         trailingIcon: "[&_svg]:size-4"
       },
       sm: {
-        root: "gap-1 text-xs",
+        root: "text-xs",
         control: "[--ui-input-height:32px] [--ui-input-radius:9px] [--ui-input-padding:12px] [--ui-input-gap:7px]",
         leadingIcon: "[&_svg]:size-4",
         trailingIcon: "[&_svg]:size-4"
       },
       md: {
-        root: "gap-1.5 text-sm",
+        root: "text-sm",
         control: "[--ui-input-height:36px] [--ui-input-radius:10px] [--ui-input-padding:12px] [--ui-input-gap:8px]",
         leadingIcon: "[&_svg]:size-5",
         trailingIcon: "[&_svg]:size-5"
       },
       lg: {
-        root: "gap-1.5 text-sm",
+        root: "text-sm",
         control: "[--ui-input-height:40px] [--ui-input-radius:11px] [--ui-input-padding:14px] [--ui-input-gap:8px]",
         leadingIcon: "[&_svg]:size-5",
         trailingIcon: "[&_svg]:size-5"
       },
       xl: {
-        root: "gap-2 text-base",
+        root: "text-base",
         control: "[--ui-input-height:44px] [--ui-input-radius:12px] [--ui-input-padding:14px] [--ui-input-gap:10px]",
         leadingIcon: "[&_svg]:size-6",
         trailingIcon: "[&_svg]:size-6"

package/dist/theme/tabs.mjs

@@ -50,7 +50,7 @@ export default tv({
       "text-[length:var(--ui-tabs-panel-font-size)]",
       "transition-[opacity,translate] duration-200 ease-out",
       "data-[starting-style]:translate-y-1 data-[starting-style]:opacity-0",
-      "data-[ending-style]:translate-y-1 data-[ending-style]:opacity-0",
+      "data-[ending-style]:pointer-events-none data-[ending-style]:absolute data-[ending-style]:inset-x-0 data-[ending-style]:top-0 data-[ending-style]:translate-y-1 data-[ending-style]:opacity-0",
       "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus"
     ],
     panelContent: "leading-relaxed text-ui-ink/70"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.8",
-  "description": "Accessible React components with a Liquid Glass visual style for React 19 and Tailwind CSS 4.",
+  "version": "0.1.10",
+  "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
   "type": "module",
@@ -80,6 +80,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.64.1",
+    "@release-it/conventional-changelog": "12.0.2",
     "@tailwindcss/node": "4.3.3",
     "@testing-library/dom": "10.4.2",
     "@testing-library/jest-dom": "7.0.1",
@@ -91,6 +92,7 @@
     "husky": "9.1.7",
     "jsdom": "30.1.3",
     "oxlint": "1.90.0",
+    "release-it": "21.1.2",
     "tailwindcss": "4.3.3",
     "typescript": "5.9.3",
     "unbuild": "3.6.1",
@@ -115,6 +117,7 @@
     "docs:typecheck": "pnpm --filter @xingxingmofashu/docs typecheck",
     "playground:dev": "pnpm --filter @xingxingmofashu/playground dev",
     "playground:build": "pnpm --filter @xingxingmofashu/playground build",
-    "playground:typecheck": "pnpm --filter @xingxingmofashu/playground typecheck"
+    "playground:typecheck": "pnpm --filter @xingxingmofashu/playground typecheck",
+    "release": "release-it"
   }
 }