@xingxingmofashu/ui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -9,12 +9,14 @@ export { Dialog } from "./components/dialog.mjs";
 export { Drawer } from "./components/drawer.mjs";
 export { Input } from "./components/input.mjs";
 export { Popover } from "./components/popover.mjs";
+export { Progress } from "./components/progress.mjs";
 export {
   ScrollArea
 } from "./components/scroll-area.mjs";
 export { Slider } from "./components/slider.mjs";
 export { Switch } from "./components/switch.mjs";
 export {
+  Toast,
   ToastProvider
 } from "./components/toast.mjs";
 export { createToastManager } from "./composables/create-toast-manager.mjs";

package/dist/internal/aria.d.ts

@@ -0,0 +1,3 @@
+/** Join space-separated ID references, dropping empty values. */
+declare function mergeIds(...ids: Array<string | null | undefined>): string | undefined;
+export { mergeIds };

package/dist/internal/aria.mjs

@@ -0,0 +1,5 @@
+function mergeIds(...ids) {
+  const merged = ids.filter((id) => Boolean(id)).join(" ").trim();
+  return merged || void 0;
+}
+export { mergeIds };

package/dist/internal/tv.d.ts

@@ -0,0 +1,17 @@
+import type { ClassValue } from "tailwind-variants";
+type Id<T> = {} & {
+    [P in keyof T]: T[P];
+};
+type ComponentSlots<T extends {
+    slots?: Record<string, any>;
+}> = Id<{
+    [K in keyof T["slots"]]?: ClassValue;
+}>;
+/**
+ * Minimal tailwind-variants component config used to derive prop types from a
+ * theme recipe. Mirrors Nuxt UI's `ComponentConfig` slot mapping.
+ */
+export type ComponentConfig<T extends Record<string, any>> = {
+    slots: ComponentSlots<T>;
+};
+export {};

package/dist/keyframes.css

@@ -1 +1 @@
-@keyframes ui-toggle-group-select{0%{opacity:0;scale:.94;translate:0 2px}to{opacity:1;scale:1;translate:0 0}}
+@keyframes ui-toggle-group-select{0%{opacity:0;scale:.94;translate:0 2px}to{opacity:1;scale:1;translate:0 0}}@keyframes ui-progress-indeterminate{0%{translate:-120% 0}to{translate:320% 0}}

package/dist/theme/alert-dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-dialog-surface",
+      "relative isolate 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/checkbox.mjs

@@ -17,14 +17,14 @@ export default tv({
       "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:var(--ui-checkbox-rim)]",
+      "[--ui-glass-rim:rgb(255_255_255/0.16)]",
       "[--ui-glass-surface:color-mix(in_srgb,var(--ui-ink)_5%,transparent)]",
-      "[--ui-shadow-glass:var(--ui-checkbox-shadow)]",
+      "[--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-dialog-surface)),var(--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"
@@ -35,7 +35,7 @@ export default tv({
     ],
     overlay: "ui-glass-rim",
     indicator: [
-      "relative z-10 flex items-center justify-center text-[var(--ui-checkbox-mark)]",
+      "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",

package/dist/theme/dialog.mjs

@@ -9,7 +9,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
     popup: [
-      "relative isolate w-full max-w-md bg-ui-dialog-surface",
+      "relative isolate 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/drawer.mjs

@@ -12,7 +12,7 @@ export default tv({
     ],
     viewport: "fixed inset-0 z-50 flex overflow-hidden",
     popup: [
-      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-dialog-surface",
+      "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-surface",
       "text-ui-ink outline-none touch-auto overscroll-contain will-change-transform",
       "transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
       "data-[swiping]:select-none",

package/dist/theme/popover.mjs

@@ -3,7 +3,7 @@ export default tv({
   slots: {
     positioner: "z-50 outline-none",
     popup: [
-      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-dialog-surface",
+      "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-surface",
       "rounded-[1.5rem] text-ui-ink outline-none",
       "transition-[opacity,scale,translate] duration-150 ease-out",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -23,7 +23,7 @@ export default tv({
     overlay: "ui-glass-rim",
     arrow: [
       "pointer-events-none absolute z-[1] size-3 rotate-45",
-      "border-ui-glass-border bg-ui-dialog-surface",
+      "border-ui-glass-border bg-ui-surface",
       "drop-shadow-[0_1px_2px_rgb(0_0_0/0.12)]",
       "data-[side=bottom]:-top-[6px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
       "data-[side=top]:-bottom-[6px] data-[side=top]:border-r data-[side=top]:border-b",

package/dist/theme/progress.d.ts

@@ -0,0 +1,80 @@
+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[];
+    header: string;
+    label: string[];
+    value: string[];
+    track: string[];
+    indicator: string[];
+    description: string[];
+}, undefined, {
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    label: string[];
+    value: string[];
+    track: string[];
+    indicator: string[];
+    description: string[];
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+    };
+}, {
+    root: string[];
+    header: string;
+    label: string[];
+    value: string[];
+    track: string[];
+    indicator: string[];
+    description: string[];
+}>>;
+export default _default;

package/dist/theme/progress.mjs

@@ -0,0 +1,64 @@
+import { tv } from "tailwind-variants";
+export default tv({
+  slots: {
+    root: [
+      "group/progress relative flex w-full min-w-0 flex-col gap-[var(--ui-progress-gap)] text-ui-ink",
+      "[--ui-progress-track:color-mix(in_srgb,var(--ui-ink)_12%,transparent)]",
+      "[--ui-progress-fill-from:var(--ui-ink)] [--ui-progress-fill-to:var(--ui-ink-active)]",
+      "[--ui-progress-glow:color-mix(in_srgb,var(--ui-ink)_28%,transparent)]",
+      "[--ui-progress-height:6px] [--ui-progress-gap:8px] [--ui-progress-font-size:0.875rem]"
+    ],
+    header: "flex min-w-0 items-baseline justify-between gap-3",
+    label: [
+      "min-w-0 truncate font-medium text-ui-ink",
+      "text-[length:var(--ui-progress-font-size)]",
+      "[filter:var(--ui-drop-shadow-label)]"
+    ],
+    value: [
+      "ms-auto shrink-0 font-mono tabular-nums text-ui-ink opacity-60",
+      "text-[length:calc(var(--ui-progress-font-size)*0.875)]"
+    ],
+    track: [
+      "relative h-[var(--ui-progress-height)] w-full overflow-hidden rounded-full",
+      "border border-ui-glass-border bg-[var(--ui-progress-track)]",
+      "shadow-[inset_0_1px_2px_rgb(0_0_0/0.14),inset_0_-1px_0_rgb(255_255_255/0.35)]",
+      "[backdrop-filter:blur(2px)] [-webkit-backdrop-filter:blur(2px)]",
+      "before:pointer-events-none before:absolute before:inset-0 before:z-[1] before:rounded-full before:bg-[linear-gradient(180deg,rgb(255_255_255/0.24),transparent_60%)] before:content-['']"
+    ],
+    indicator: [
+      "relative h-full rounded-full",
+      "bg-[linear-gradient(117deg,var(--ui-progress-fill-from)_0%,var(--ui-progress-fill-to)_100%)]",
+      "shadow-[0_0_10px_var(--ui-progress-glow),inset_0_1px_0_rgb(255_255_255/0.35)]",
+      "transition-[width] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:bg-[linear-gradient(180deg,rgb(255_255_255/0.3),transparent_60%)] after:content-['']",
+      "data-[indeterminate]:w-[38%] data-[indeterminate]:[animation:ui-progress-indeterminate_1.4s_ease-in-out_infinite]",
+      "motion-reduce:transition-none motion-reduce:data-[indeterminate]:[animation:none]"
+    ],
+    description: [
+      "min-w-0 leading-relaxed text-ui-ink opacity-60",
+      "text-[length:var(--ui-progress-font-size)]"
+    ]
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "[--ui-progress-height:4px] [--ui-progress-gap:6px] [--ui-progress-font-size:0.75rem]"
+      },
+      sm: {
+        root: "[--ui-progress-height:5px] [--ui-progress-gap:6px] [--ui-progress-font-size:0.75rem]"
+      },
+      md: {
+        root: "[--ui-progress-height:6px] [--ui-progress-gap:8px] [--ui-progress-font-size:0.875rem]"
+      },
+      lg: {
+        root: "[--ui-progress-height:8px] [--ui-progress-gap:8px] [--ui-progress-font-size:0.875rem]"
+      },
+      xl: {
+        root: "[--ui-progress-height:10px] [--ui-progress-gap:10px] [--ui-progress-font-size:1rem]"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});

package/dist/theme/slider.mjs

@@ -35,6 +35,14 @@ export default tv({
     thumb: [
       "relative z-[2] block h-[var(--ui-slider-thumb-height)] w-[var(--ui-slider-thumb-width)] shrink-0 select-none",
       "cursor-grab touch-none rounded-full bg-transparent p-0",
+      "[--ui-glass-lens-blur:1.5px] [--ui-glass-lens-saturate:160%]",
+      "[--ui-glass-lens-border:rgb(255_255_255/0.55)]",
+      "[--ui-glass-lens-surface:linear-gradient(180deg,rgb(255_255_255/0.72),rgb(255_255_255/0.3))]",
+      "[--ui-glass-lens-surface-active:rgb(255_255_255/0.12)]",
+      "[--ui-glass-lens-shadow:0_4px_10px_rgb(0_30_63/0.14),0_0_2px_rgb(0_9_20/0.12),inset_1px_1px_0_rgb(255_255_255/0.8),inset_-1px_-1px_0_rgb(69_168_243/0.16)]",
+      "[--ui-glass-lens-shadow-active:0_6px_18px_rgb(0_30_63/0.18),0_0_3px_rgb(0_9_20/0.14),inset_1px_1px_0_rgb(255_255_255/0.72),inset_-1px_-1px_0_rgb(69_168_243/0.2)]",
+      "[--ui-glass-lens-specular:inset_1px_1px_0_rgb(255_255_255/0.7),inset_1px_3px_0_rgb(28_63_90/0.05),inset_0_0_18px_rgb(255_255_255/0.55),inset_-1px_-1px_0_rgb(69_168_243/0.16)]",
+      "[--ui-glass-lens-glare:linear-gradient(180deg,rgb(255_255_255/0.75),rgb(255_255_255/0))]",
       "outline-none transition-[scale] duration-150 ease-out",
       "hover:[scale:1.04] active:[scale:1.08_0.96] data-[dragging]:[scale:1.08_0.96]",
       "[&:has(input:focus-visible)]:outline-2 [&:has(input:focus-visible)]:outline-offset-4 [&:has(input:focus-visible)]:outline-ui-glass-focus",

package/dist/theme/switch.mjs

@@ -12,6 +12,7 @@ const theme = tv({
     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)]",
       "group-focus-visible:outline-2 group-focus-visible:outline-offset-4 group-focus-visible:outline-ui-glass-focus",
       "[&_*]:pointer-events-none",
@@ -49,6 +50,7 @@ const theme = tv({
     ],
     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]",

package/dist/theme/toast.d.ts

@@ -1,22 +1,15 @@
 declare const _default: import("tailwind-variants").TVReturnType<{
-    placement: {
-        top: {
+    position: {
+        "top-left": {
             viewport: string;
-            root: string[];
         };
-        bottom: {
+        "top-right": {
             viewport: string;
-            root: string[];
         };
-    };
-    align: {
-        left: {
-            viewport: string;
-        };
-        center: {
+        "bottom-left": {
             viewport: string;
         };
-        right: {
+        "bottom-right": {
             viewport: string;
         };
     };
@@ -34,24 +27,17 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     action: string[];
     close: string[];
 }, undefined, {
-    placement: {
-        top: {
+    position: {
+        "top-left": {
             viewport: string;
-            root: string[];
         };
-        bottom: {
+        "top-right": {
             viewport: string;
-            root: string[];
         };
-    };
-    align: {
-        left: {
+        "bottom-left": {
             viewport: string;
         };
-        center: {
-            viewport: string;
-        };
-        right: {
+        "bottom-right": {
             viewport: string;
         };
     };
@@ -69,24 +55,17 @@ declare const _default: import("tailwind-variants").TVReturnType<{
     action: string[];
     close: string[];
 }, import("tailwind-variants").TVReturnTypeLike<{
-    placement: {
-        top: {
-            viewport: string;
-            root: string[];
-        };
-        bottom: {
+    position: {
+        "top-left": {
             viewport: string;
-            root: string[];
         };
-    };
-    align: {
-        left: {
+        "top-right": {
             viewport: string;
         };
-        center: {
+        "bottom-left": {
             viewport: string;
         };
-        right: {
+        "bottom-right": {
             viewport: string;
         };
     };

package/dist/theme/toast.mjs

@@ -8,12 +8,14 @@ export default tv({
       "[--shrink:calc(1_-_var(--scale))]",
       "[--height:var(--toast-frontmost-height,var(--toast-height))]",
       "absolute inset-x-0 isolate h-[var(--height)] w-full rounded-[1.25rem]",
-      "bg-ui-dialog-surface text-ui-ink select-none",
+      "bg-ui-surface text-ui-ink select-none",
       "z-[calc(1000-var(--toast-index))]",
       "[transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
       "data-[expanded]:h-[var(--toast-height)]",
       "data-[limited]:pointer-events-none data-[limited]:opacity-0",
       "data-[swiping]:cursor-grabbing",
+      "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)_-_150%))]",
+      "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)_+_150%))]",
       "outline-none focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ui-glass-focus",
       "motion-reduce:transition-none"
     ],
@@ -57,9 +59,25 @@ export default tv({
     ]
   },
   variants: {
-    placement: {
-      top: {
-        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto",
+    position: {
+      "top-left": {
+        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto left-[max(1rem,env(safe-area-inset-left))] right-auto"
+      },
+      "top-right": {
+        viewport: "top-[max(1rem,env(safe-area-inset-top))] bottom-auto right-[max(1rem,env(safe-area-inset-right))] left-auto"
+      },
+      "bottom-left": {
+        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto left-[max(1rem,env(safe-area-inset-left))] right-auto"
+      },
+      "bottom-right": {
+        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto right-[max(1rem,env(safe-area-inset-right))] left-auto"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      position: ["top-left", "top-right"],
+      class: {
         root: [
           "top-0 origin-top",
           "[--offset-y:calc(var(--toast-offset-y)_+_(var(--toast-index)*var(--gap))_+_var(--toast-swipe-movement-y))]",
@@ -70,9 +88,11 @@ export default tv({
           "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)_-_150%))]",
           "after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)_+_1px)] after:w-full after:content-['']"
         ]
-      },
-      bottom: {
-        viewport: "bottom-[max(1rem,env(safe-area-inset-bottom))] top-auto",
+      }
+    },
+    {
+      position: ["bottom-left", "bottom-right"],
+      class: {
         root: [
           "bottom-0 origin-bottom",
           "[--offset-y:calc(var(--toast-offset-y)*-1_+_(var(--toast-index)*var(--gap)*-1)_+_var(--toast-swipe-movement-y))]",
@@ -84,21 +104,9 @@ export default tv({
           "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)_+_1px)] after:w-full after:content-['']"
         ]
       }
-    },
-    align: {
-      left: {
-        viewport: "left-[max(1rem,env(safe-area-inset-left))] right-auto"
-      },
-      center: {
-        viewport: "left-1/2 -translate-x-1/2"
-      },
-      right: {
-        viewport: "right-[max(1rem,env(safe-area-inset-right))] left-auto"
-      }
     }
-  },
+  ],
   defaultVariants: {
-    placement: "bottom",
-    align: "right"
+    position: "bottom-right"
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xingxingmofashu/ui",
-  "version": "0.1.1",
-  "description": "Liquid Glass UI components for React 19 and Tailwind CSS 4.",
+  "version": "0.1.3",
+  "description": "Accessible React components with a Liquid Glass visual style for React 19 and Tailwind CSS 4.",
   "license": "MIT",
   "author": "xingxingmofashu",
   "type": "module",
@@ -55,9 +55,14 @@
     "react",
     "ui",
     "components",
+    "component-library",
+    "react-components",
+    "design-system",
     "tailwindcss",
     "liquid-glass",
-    "base-ui"
+    "base-ui",
+    "tailwind-variants",
+    "accessible"
   ],
   "publishConfig": {
     "access": "public"