@xingxingmofashu/ui 0.2.0 → 0.3.0

package/dist/theme/accordion.mjs

@@ -11,7 +11,10 @@ export default tv({
     ],
     glass: [
       "ui-glass ui-glass-inner ui-glass-highlight",
-      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
+      "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]",
+      // Keep the filtered glass on a stable compositor layer so the panel
+      // height transition does not re-rasterize the whole surface each frame.
+      "will-change-transform"
     ],
     overlay: "ui-glass-rim",
     content: "relative z-10 overflow-hidden rounded-[inherit]",

package/dist/theme/select.d.ts

@@ -35,6 +35,8 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     popupGlass: string[];
     popupOverlay: string;
     list: string[];
+    group: string;
+    groupLabel: string;
     item: string[];
     itemIndicator: string[];
     itemText: string;

package/dist/theme/select.mjs

@@ -58,6 +58,8 @@ export default tv({
       "relative z-10 flex min-w-0 flex-col gap-0.5",
       "max-h-[min(24rem,var(--available-height))] overflow-y-auto scroll-py-2"
     ],
+    group: "flex min-w-0 flex-col gap-0.5",
+    groupLabel: "px-2.5 pb-0.5 pt-1 text-xs font-medium text-ui-ink/55",
     item: [
       "relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-xl px-2.5",
       "text-sm text-ui-ink outline-none",

package/dist/theme/switch.d.ts

@@ -1,23 +1,23 @@
 declare const theme: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         sm: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         md: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         lg: {
-            base: string;
+            root: string;
             wrapper: string;
         };
         xl: {
-            base: string;
+            root: string;
             wrapper: string;
         };
     };

package/dist/theme/switch.mjs

@@ -6,80 +6,54 @@ const theme = tv({
       "touch-none [-webkit-tap-highlight-color:transparent]",
       "focus:outline-none",
       "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-75",
-      "data-[readonly]:cursor-default"
+      "data-[readonly]:cursor-default",
+      "[--ui-switch-thumb-size:calc(var(--ui-switch-height)_-_2*var(--ui-switch-inset))]",
+      "[--ui-switch-travel:calc(var(--ui-switch-width)_-_var(--ui-switch-thumb-size)_-_2*var(--ui-switch-inset))]"
     ],
     container: "flex items-center",
     base: [
-      "relative inline-flex h-[var(--ui-switch-height)] w-[var(--ui-switch-width)] shrink-0 select-none overflow-visible rounded-[100px] border-0 bg-transparent p-0 text-inherit",
-      "[container-type:inline-size]",
-      "[--ui-glass-edge-shadow:inset_1px_-1px_2px_rgb(255_255_255/0.55),inset_-1px_1px_2px_rgb(0_0_0/0.18),0_1px_3px_rgb(0_0_0/0.2)]",
-      "[--ui-switch-off:color-mix(in_srgb,var(--ui-ink)_20%,transparent)] [--ui-switch-on:var(--ui-ink)]",
+      "relative inline-flex h-[var(--ui-switch-height)] w-[var(--ui-switch-width)] shrink-0 select-none overflow-hidden rounded-full",
+      "border-0 bg-[var(--ui-switch-off)] p-0 text-inherit",
+      "[background-image:linear-gradient(180deg,rgb(255_255_255/0.14),transparent_55%)]",
+      "[box-shadow:inset_0_1px_1px_rgb(255_255_255/0.3),inset_0_-1px_2px_rgb(0_0_0/0.14)]",
+      "transition-[background-color,box-shadow] duration-200 ease-out",
+      "group-data-[checked]:bg-[var(--ui-switch-on)]",
       "group-focus-visible:outline-2 group-focus-visible:outline-offset-4 group-focus-visible:outline-ui-glass-focus",
-      "[&_*]:pointer-events-none",
-      "motion-reduce:[transition-duration:0.01ms!important] motion-reduce:[transition-delay:0ms!important] motion-reduce:[&_*]:[transition-duration:0.01ms!important] motion-reduce:[&_*]:[transition-delay:0ms!important]",
-      "[&_[data-layer=filter]]:pointer-events-none [&_[data-layer=filter]]:absolute [&_[data-layer=filter]]:h-0 [&_[data-layer=filter]]:w-0 [&_[data-layer=filter]]:overflow-hidden",
-      "[&_[data-layer=mask]]:absolute [&_[data-layer=mask]]:inset-0 [&_[data-layer=mask]]:rounded-[100px]",
-      "[&_[data-layer=mask]]:[filter:var(--ui-switch-remove-black-filter)] [&_[data-layer=mask]]:[transform:translate3d(0,0,0)]",
-      "[&_[data-layer=track]]:absolute [&_[data-layer=track]]:left-1/2 [&_[data-layer=track]]:top-1/2 [&_[data-layer=track]]:z-[12] [&_[data-layer=track]]:h-full [&_[data-layer=track]]:w-full [&_[data-layer=track]]:rounded-[100px] [&_[data-layer=track]]:bg-[var(--ui-switch-off)]",
-      "[&_[data-layer=track]]:[container-type:inline-size] [&_[data-layer=track]]:[translate:-50%_-50%] [&_[data-layer=track]]:[box-shadow:inset_0_1px_1px_rgb(255_255_255/0.35),inset_0_-1px_2px_rgb(0_0_0/0.12)]",
-      "[&_[data-layer=track]]:[transition:background-color_120ms_ease-out_180ms] group-data-[checked]:[&_[data-layer=track]]:bg-[var(--ui-switch-on)]",
-      "[&_[data-layer=track-mask]]:absolute [&_[data-layer=track-mask]]:left-[var(--ui-switch-border)] [&_[data-layer=track-mask]]:top-1/2 [&_[data-layer=track-mask]]:h-[calc(100%_-_2*var(--ui-switch-border))] [&_[data-layer=track-mask]]:w-[calc(60%_-_2*var(--ui-switch-border))] [&_[data-layer=track-mask]]:rounded-[100px] [&_[data-layer=track-mask]]:bg-black",
-      "[&_[data-layer=track-mask]]:[translate:0_-50%] group-data-[checked]:[&_[data-layer=track-mask]]:[translate:calc(100cqi_-_100%_-_2*var(--ui-switch-border))_-50%]",
-      "[&_[data-layer=track-mask]]:[transition:translate_120ms_ease-out_180ms,scale_300ms_ease-out]",
-      "group-active:[&_[data-layer=track-mask]]:[scale:1.65] group-data-[animating=true]:[&_[data-layer=track-mask]]:[scale:1.65]",
-      "[&_[data-layer=glass-rim]]:absolute [&_[data-layer=glass-rim]]:inset-0 [&_[data-layer=glass-rim]]:z-[20] [&_[data-layer=glass-rim]]:rounded-[100px] [&_[data-layer=glass-rim]]:[box-shadow:var(--ui-glass-edge-shadow)] [&_[data-layer=glass-rim]]:opacity-0",
-      "[&_[data-layer=glass-rim]]:transition-opacity [&_[data-layer=glass-rim]]:duration-200 [&_[data-layer=glass-rim]]:ease-out",
-      "group-active:[&_[data-layer=glass-rim]]:opacity-100 group-data-[animating=true]:[&_[data-layer=glass-rim]]:opacity-100",
-      "[&_[data-layer=glass-lens]]:absolute [&_[data-layer=glass-lens]]:inset-0 [&_[data-layer=glass-lens]]:rounded-[100px] [&_[data-layer=glass-lens]]:[clip-path:inset(0_0_0_0_round_100px)]",
-      "[&_[data-layer=glass-lens]]:[filter:blur(calc(var(--ui-switch-height)*0.1))] [&_[data-layer=glass-lens]]:transition-[filter] [&_[data-layer=glass-lens]]:duration-200 [&_[data-layer=glass-lens]]:ease-out",
-      "group-active:[&_[data-layer=glass-lens]]:[filter:blur(0)] group-data-[animating=true]:[&_[data-layer=glass-lens]]:[filter:blur(0)]",
-      "[&_[data-layer=goo]]:absolute [&_[data-layer=goo]]:inset-0 [&_[data-layer=goo]]:overflow-hidden [&_[data-layer=goo]]:rounded-[100px]",
-      "[&_[data-layer=goo]]:[filter:var(--ui-switch-goo-filter)] [&_[data-layer=goo]]:[transform:translate3d(0,0,0)]",
-      "[&_[data-layer=inner-glow]]:absolute [&_[data-layer=inner-glow]]:inset-0 [&_[data-layer=inner-glow]]:rounded-[100px]",
-      "[&_[data-layer=inner-glow]]:[--ui-switch-glow-color:var(--ui-switch-off)] group-data-[checked]:[&_[data-layer=inner-glow]]:[--ui-switch-glow-color:var(--ui-switch-on)]",
-      "[&_[data-layer=inner-glow]]:[transition:box-shadow_120ms_ease-out_180ms]",
-      "[&_[data-layer=inner-glow]]:[box-shadow:inset_0_0_calc(var(--ui-switch-height)*0.05)_calc(var(--ui-switch-height)*0.0667)_var(--ui-switch-glow-color),inset_calc(var(--ui-switch-height)*0.133)_0_calc(var(--ui-switch-height)*0.05)_calc(var(--ui-switch-height)*0.0667)_var(--ui-switch-glow-color)]",
-      "[&_[data-layer=fill]]:absolute [&_[data-layer=fill]]:left-0 [&_[data-layer=fill]]:top-1/2 [&_[data-layer=fill]]:h-[var(--ui-switch-height)] [&_[data-layer=fill]]:w-[var(--ui-switch-width)] [&_[data-layer=fill]]:rounded-r-[100px] [&_[data-layer=fill]]:bg-[var(--ui-switch-off)]",
-      "[&_[data-layer=fill]]:[translate:0_-50%] group-data-[checked]:[&_[data-layer=fill]]:[translate:calc(100cqi_-_100%)_-50%]",
-      "[&_[data-layer=fill]]:[transition:height_200ms_ease-out,translate_120ms_ease-out_180ms,background-color_120ms_ease-out_180ms]",
-      "group-active:[&_[data-layer=fill]]:h-[calc(var(--ui-switch-height)_-_6*var(--ui-switch-border))] group-data-[animating=true]:[&_[data-layer=fill]]:h-[calc(var(--ui-switch-height)_-_6*var(--ui-switch-border))]",
-      "group-data-[checked]:[&_[data-layer=fill]]:bg-[var(--ui-switch-on)]",
-      "[&_[data-layer=cover]]:absolute [&_[data-layer=cover]]:inset-0 [&_[data-layer=cover]]:rounded-[100px] [&_[data-layer=cover]]:bg-white",
-      "[&_[data-layer=cover]]:transition-opacity [&_[data-layer=cover]]:duration-200 [&_[data-layer=cover]]:ease-out",
-      "group-active:[&_[data-layer=cover]]:opacity-0 group-data-[animating=true]:[&_[data-layer=cover]]:opacity-0"
+      "motion-reduce:transition-none",
+      "[--ui-switch-off:color-mix(in_srgb,var(--ui-ink)_20%,transparent)] [--ui-switch-on:var(--ui-ink)]"
     ],
     thumb: [
-      "absolute left-[var(--ui-switch-border)] top-1/2 h-[calc(100%_-_2*var(--ui-switch-border))] w-[calc(60%_-_2*var(--ui-switch-border))] rounded-[100px] bg-transparent [box-shadow:var(--ui-glass-thumb-shadow)]",
-      "[--ui-glass-thumb-shadow:0_1px_3px_rgb(0_0_0/0.2),inset_0_0_0_1px_rgb(255_255_255/0.55)]",
-      "[container-type:inline-size]",
-      "[translate:0_-50%] group-data-[checked]:[translate:calc(100cqi_-_100%_-_2*var(--ui-switch-border))_-50%]",
-      "[transition:translate_120ms_ease-out_180ms,scale_300ms_ease-out]",
-      "group-active:[scale:1.65] group-data-[animating=true]:[scale:1.65]"
+      "absolute left-[var(--ui-switch-inset)] top-1/2 z-10 block h-[var(--ui-switch-thumb-size)] w-[var(--ui-switch-thumb-size)] rounded-full bg-ui-surface",
+      "[box-shadow:0_1px_3px_rgb(0_0_0/0.22),inset_0_0_0_1px_rgb(255_255_255/0.5),inset_0_1px_1px_rgb(255_255_255/0.65),inset_0_-1px_2px_rgb(0_0_0/0.08)]",
+      "[translate:0_-50%] group-data-[checked]:[translate:var(--ui-switch-travel)_-50%]",
+      "transition-[translate,scale] duration-200 ease-out",
+      "group-active:scale-95",
+      "motion-reduce:transition-none"
     ],
     wrapper: "ms-2 min-w-0",
-    label: "block font-medium text-ui-ink",
+    label: "block font-medium text-ui-ink leading-[var(--ui-switch-height)]",
     description: "block text-ui-ink opacity-60"
   },
   variants: {
     size: {
       xs: {
-        base: "[--ui-switch-width:48px] [--ui-switch-height:24px] [--ui-switch-border:2px]",
+        root: "[--ui-switch-width:48px] [--ui-switch-height:24px] [--ui-switch-inset:2px]",
         wrapper: "text-xs"
       },
       sm: {
-        base: "[--ui-switch-width:56px] [--ui-switch-height:28px] [--ui-switch-border:2px]",
+        root: "[--ui-switch-width:56px] [--ui-switch-height:28px] [--ui-switch-inset:2px]",
         wrapper: "text-xs"
       },
       md: {
-        base: "[--ui-switch-width:64px] [--ui-switch-height:32px] [--ui-switch-border:3px]",
+        root: "[--ui-switch-width:64px] [--ui-switch-height:32px] [--ui-switch-inset:3px]",
         wrapper: "text-sm"
       },
       lg: {
-        base: "[--ui-switch-width:72px] [--ui-switch-height:36px] [--ui-switch-border:3px]",
+        root: "[--ui-switch-width:72px] [--ui-switch-height:36px] [--ui-switch-inset:3px]",
         wrapper: "text-sm"
       },
       xl: {
-        base: "[--ui-switch-width:80px] [--ui-switch-height:40px] [--ui-switch-border:3px]",
+        root: "[--ui-switch-width:80px] [--ui-switch-height:40px] [--ui-switch-inset:3px]",
         wrapper: "text-base"
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
@@ -109,8 +109,7 @@
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
     "test": "vitest run",
-    "test:visual": "playwright test",
-    "test:visual:update": "playwright test --update-snapshots",
+    "test:e2e": "playwright test",
     "typecheck": "tsc --noEmit",
     "docs:dev": "pnpm --filter @xingxingmofashu/docs dev",
     "docs:build": "pnpm --filter @xingxingmofashu/docs build",