@xingxingmofashu/ui 0.1.9 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +8 -6
  2. package/dist/components/card.d.ts +1 -1
  3. package/dist/components/menu.d.ts +7 -11
  4. package/dist/components/menu.mjs +11 -2
  5. package/dist/index.css +1 -1
  6. package/dist/index.d.ts +1 -1
  7. package/dist/plugins/glass-preset/index.css +1 -1
  8. package/dist/theme/alert-dialog.mjs +5 -5
  9. package/dist/theme/card.mjs +1 -1
  10. package/dist/theme/dialog.mjs +5 -5
  11. package/dist/theme/drawer.mjs +4 -4
  12. package/dist/theme/menu.mjs +4 -4
  13. package/dist/theme/popover.mjs +10 -6
  14. package/dist/theme/select.mjs +2 -2
  15. package/dist/theme/tabs.mjs +1 -1
  16. package/dist/theme/toast.mjs +3 -3
  17. package/dist/theme/tooltip.mjs +12 -4
  18. package/package.json +5 -2
package/README.md CHANGED
@@ -1,7 +1,7 @@
1
1
  <picture>
2
- <source media="(prefers-color-scheme: dark)" srcset=".github/assets/surface-lab-dark.png">
3
- <source media="(prefers-color-scheme: light)" srcset=".github/assets/surface-lab-light.png">
4
- <img alt="The Liquid Glass Surface Lab panel showing glass components over the default image background in light mode." width="1024" src=".github/assets/surface-lab-light.png">
2
+ <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-dark.png">
3
+ <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-light.png">
4
+ <img alt="The Liquid Glass Surface Lab panel showing glass components over the default image background in light mode." width="1024" src="https://raw.githubusercontent.com/xingxingmofashu/ui/main/.github/assets/surface-lab-light.png">
5
5
  </picture>
6
6
 
7
7
  <div align="center">
@@ -86,9 +86,11 @@ container:
86
86
 
87
87
  `thin` is the default and the clearest, `soft` adds diffusion for secondary
88
88
  text, `regular` balances transparency with text separation, and `thick` is the
89
- most readable over busy imagery. Presets only override shared CSS variables.
90
- Without the plugin stylesheet, the main stylesheet still uses the `thin`
91
- material.
89
+ most readable over busy imagery. Presets only override shared CSS variables and
90
+ adjust both the in-page and overlay veils. Text-bearing overlays use
91
+ `.ui-glass-overlay` and `--ui-glass-overlay-surface`; override that token too
92
+ when you change `--ui-surface`. Without the plugin stylesheet, the main
93
+ stylesheet still uses the `thin` material.
92
94
 
93
95
  The optional React plugin manages the attribute and persistence:
94
96
 
package/dist/components/card.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import { type ComponentConfig } from "../internal/tv";
3
3
  import theme from "../theme/card";
4
4
  type Card = ComponentConfig<typeof theme>;
5
- type CardProps = Omit<React.ComponentProps<"div">, "title"> & {
5
+ type CardProps = Omit<React.ComponentProps<"div">, "style" | "title"> & {
6
6
  /** Classes merged into the root element. */
7
7
  className?: string;
8
8
  /** Tailwind classes for internal slots, keyed by `data-slot`. */
package/dist/components/menu.d.ts CHANGED
@@ -3,9 +3,6 @@ import * as React from "react";
3
3
  import { type ComponentConfig } from "../internal/tv";
4
4
  import theme from "../theme/menu";
5
5
  type Menu = ComponentConfig<typeof theme>;
6
- type MenuItemUi = Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
7
- type MenuGroupUi = Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
8
- type MenuSeparatorUi = Partial<Pick<Menu["slots"], "separator">>;
9
6
  /** One action item in the menu. */
10
7
  type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "children" | "className" | "style" | "label" | "onClick"> & {
11
8
  type?: "item";
@@ -24,10 +21,10 @@ type MenuItemProps<Value extends string = string> = Omit<UIMenu.Item.Props, "chi
24
21
  /** Tailwind classes merged into the item. */
25
22
  className?: string;
26
23
  /** Tailwind classes for this item's internal slots. */
27
- ui?: MenuItemUi;
24
+ ui?: Partial<Pick<Menu["slots"], "item" | "itemIcon" | "itemLabel" | "shortcut">>;
28
25
  };
29
26
  /** A labelled group of menu items. */
30
- type MenuGroupProps<Value extends string = string> = {
27
+ type MenuGroupProps<Value extends string = string> = Omit<UIMenu.Group.Props, "children" | "className" | "style"> & {
31
28
  type: "group";
32
29
  /** Group heading. */
33
30
  label: React.ReactNode;
@@ -36,22 +33,21 @@ type MenuGroupProps<Value extends string = string> = {
36
33
  /** Tailwind classes merged into the group. */
37
34
  className?: string;
38
35
  /** Tailwind classes for the group slots. */
39
- ui?: MenuGroupUi;
36
+ ui?: Partial<Pick<Menu["slots"], "group" | "groupLabel" | "item" | "itemIcon" | "itemLabel" | "shortcut">>;
40
37
  };
41
38
  /** A separator between menu items. */
42
- type MenuSeparatorProps = {
39
+ type MenuSeparatorProps = Omit<UIMenu.Separator.Props, "children" | "className" | "orientation" | "style"> & {
43
40
  type: "separator";
44
41
  /** Tailwind classes merged into the separator. */
45
42
  className?: string;
46
43
  /** Tailwind classes for the separator slot. */
47
- ui?: MenuSeparatorUi;
44
+ ui?: Partial<Pick<Menu["slots"], "separator">>;
48
45
  };
49
- type MenuEntry<Value extends string = string> = MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps;
50
46
  type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "children" | "className" | "style"> & Pick<UIMenu.Positioner.Props, "side" | "align" | "sideOffset" | "alignOffset" | "collisionPadding"> & {
51
47
  /** Element that opens the menu. It must forward props and refs. */
52
48
  trigger: React.ReactElement;
53
49
  /** Items, groups, and separators rendered by the menu. */
54
- items: readonly MenuEntry<Value>[];
50
+ items: readonly (MenuItemProps<Value> | MenuGroupProps<Value> | MenuSeparatorProps)[];
55
51
  /** Tailwind classes merged into the popup. */
56
52
  className?: string;
57
53
  /** Tailwind classes for internal slots, keyed by `data-slot`. */
@@ -59,4 +55,4 @@ type MenuProps<Value extends string = string> = Omit<UIMenu.Root.Props, "childre
59
55
  };
60
56
  declare function Menu<Value extends string = string>({ trigger, items, side, align, sideOffset, alignOffset, collisionPadding, className, ui, ...props }: MenuProps<Value>): React.JSX.Element;
61
57
  export { Menu };
62
- export type { MenuEntry, MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };
58
+ export type { MenuGroupProps, MenuItemProps, MenuProps, MenuSeparatorProps, };
package/dist/components/menu.mjs CHANGED
@@ -152,12 +152,15 @@ function MenuGroup({
152
152
  className,
153
153
  ui,
154
154
  label,
155
- items
155
+ items,
156
+ type: _type,
157
+ ...props
156
158
  }) {
157
159
  const styles = theme();
158
160
  return /* @__PURE__ */ React.createElement(
159
161
  UIMenu.Group,
160
162
  {
163
+ ...props,
161
164
  "data-slot": "group",
162
165
  className: cn(styles.group(), ui?.group, className)
163
166
  },
@@ -184,11 +187,17 @@ function MenuGroup({
184
187
  ))
185
188
  );
186
189
  }
187
- function MenuSeparator({ className, ui }) {
190
+ function MenuSeparator({
191
+ className,
192
+ ui,
193
+ type: _type,
194
+ ...props
195
+ }) {
188
196
  const styles = theme();
189
197
  return /* @__PURE__ */ React.createElement(
190
198
  UIMenu.Separator,
191
199
  {
200
+ ...props,
192
201
  "data-slot": "separator",
193
202
  className: cn(styles.separator(), ui?.separator, className)
194
203
  }
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
1
+ @import "./keyframes.css";@source "./**/*.mjs";@source "./**/*.{ts,tsx}";@custom-variant ui-light (&:where(.light, .light *, [data-theme="light"], [data-theme="light"] *));@custom-variant ui-dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));@layer theme{:host,:root{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=dark]{color-scheme:dark;--ui-ink:#f5f5f5;--ui-ink-active:#fff;--ui-surface:#141414;--ui-glass-surface:hsla(0,0%,8%,.62);--ui-glass-overlay-surface:hsla(0,0%,8%,.76);--ui-glass-border:hsla(0,0%,100%,.2);--ui-glass-focus:hsla(0,0%,100%,.7);--ui-glass-inner-border:hsla(0,0%,100%,.4);--ui-glass-rim:hsla(0,0%,100%,.25);--ui-glass-highlight:hsla(0,0%,100%,.45);--ui-glass-tone:brightness(0.95);--ui-glass-contrast:1;--ui-drop-shadow-label:drop-shadow(0 25px 3px rgba(0,0,0,.45));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.35),inset 0 -2px 1px -1px hsla(0,0%,100%,.35),inset 0 6px 1px -6px hsla(0,0%,100%,.2),inset 0 -6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 0 1px hsla(0,0%,100%,.14),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=light]{color-scheme:light;--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:hsla(0,0%,100%,.2);--ui-glass-overlay-surface:hsla(0,0%,100%,.64);--ui-glass-border:rgba(31,31,31,.16);--ui-glass-focus:rgba(0,0,0,.6);--ui-glass-inner-border:rgba(0,0,0,.9);--ui-glass-rim:hsla(0,0%,100%,.2);--ui-glass-highlight:hsla(0,0%,100%,.8);--ui-glass-glare-stop:15%;--ui-glass-tone:brightness(0.98);--ui-glass-contrast:1.05;--ui-drop-shadow-label:drop-shadow(0 25px 3px hsla(0,0%,40%,.15));--ui-shadow-glass:inset 0 2px 1px -1px hsla(0,0%,100%,.9),inset 0 -2px 1px -1px hsla(0,0%,100%,.9),inset 0 6px 1px -6px hsla(0,0%,100%,.55),inset 0 -6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 0 1px hsla(0,0%,100%,.45),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}:host,:root{--ui-glass-blur:4px;--ui-glass-saturate:150%;--ui-glass-chip-blur:8px;--ui-glass-inner-inset:8px;--ui-glass-inner-offset:1px;--ui-glass-inner-blur:8px;--ui-glass-highlight-blur:7px;--ui-glass-rim-inset:9px;--ui-glass-rim-blur:1px}}@theme inline{--color-ui-ink:var(--ui-ink);--color-ui-ink-active:var(--ui-ink-active);--color-ui-surface:var(--ui-surface);--color-ui-glass-surface:var(--ui-glass-surface);--color-ui-glass-overlay-surface:var(--ui-glass-overlay-surface);--color-ui-glass-border:var(--ui-glass-border);--color-ui-glass-focus:var(--ui-glass-focus);--color-ui-glass-inner-border:var(--ui-glass-inner-border);--color-ui-glass-rim:var(--ui-glass-rim);--color-ui-glass-highlight:var(--ui-glass-highlight)}@layer components{.ui-glass{backdrop-filter:blur(var(--ui-glass-blur,4px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px double var(--ui-glass-border);box-shadow:var(--ui-shadow-glass);filter:var(--ui-glass-tone,brightness(.98)) contrast(var(--ui-glass-contrast,1.05));position:relative}.ui-glass-overlay{background-color:var(--ui-glass-overlay-surface)}.ui-glass-inner:before{border:1px solid var(--ui-glass-inner-border);bottom:calc(var(--ui-glass-inner-inset, 8px) - var(--ui-glass-inner-offset, 1px));filter:blur(var(--ui-glass-inner-blur,8px));left:var(--ui-glass-inner-inset,8px);right:var(--ui-glass-inner-inset,8px);top:calc(var(--ui-glass-inner-inset, 8px) + var(--ui-glass-inner-offset, 1px));z-index:1}.ui-glass-highlight:after,.ui-glass-inner:before{border-radius:inherit;content:"";pointer-events:none;position:absolute}.ui-glass-highlight:after{background:linear-gradient(45deg,var(--ui-glass-highlight) 0,transparent var(--ui-glass-glare-stop),transparent calc(100% - var(--ui-glass-glare-stop)),var(--ui-glass-highlight) 100%);filter:blur(var(--ui-glass-highlight-blur,7px));inset:0;z-index:3}.ui-glass-rim{border:1px solid var(--ui-glass-rim);border-radius:inherit;filter:blur(var(--ui-glass-rim-blur,1px));height:calc(100% - var(--ui-glass-rim-inset, 9px));left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% - var(--ui-glass-rim-inset, 9px));z-index:2}.ui-glass-chip{backdrop-filter:blur(var(--ui-glass-chip-blur,8px)) saturate(var(--ui-glass-saturate,150%));background-color:var(--ui-glass-surface);border:1px solid var(--ui-glass-border);box-shadow:inset 0 1px 0 var(--ui-glass-highlight)}}
package/dist/index.d.ts CHANGED
@@ -10,7 +10,7 @@ export { Field, type FieldProps } from "./components/field";
10
10
  export { Fieldset, type FieldsetProps } from "./components/fieldset";
11
11
  export { Form, type FormProps } from "./components/form";
12
12
  export { Input, type InputProps } from "./components/input";
13
- export { Menu, type MenuEntry, type MenuGroupProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, } from "./components/menu";
13
+ export { Menu, type MenuGroupProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, } from "./components/menu";
14
14
  export { Popover, type PopoverProps } from "./components/popover";
15
15
  export { Progress, type ProgressProps } from "./components/progress";
16
16
  export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps, } from "./components/radio-group";
package/dist/plugins/glass-preset/index.css CHANGED
@@ -1 +1 @@
1
- @layer theme{[data-glass=thin],[data-glass=thin]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.2),hsla(0,0%,8%,.62));--ui-glass-border:light-dark(rgba(31,31,31,.16),hsla(0,0%,100%,.2));--ui-glass-blur:4px;--ui-glass-saturate:150%}[data-glass=soft],[data-glass=soft]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.283),hsla(0,0%,8%,.653));--ui-glass-border:light-dark(rgba(31,31,31,.187),hsla(0,0%,100%,.227));--ui-glass-blur:8px;--ui-glass-saturate:146.7%}[data-glass=regular],[data-glass=regular]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.367),hsla(0,0%,8%,.687));--ui-glass-border:light-dark(rgba(31,31,31,.213),hsla(0,0%,100%,.253));--ui-glass-blur:12px;--ui-glass-saturate:143.3%}[data-glass=thick],[data-glass=thick]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.45),hsla(0,0%,8%,.72));--ui-glass-border:light-dark(rgba(31,31,31,.24),hsla(0,0%,100%,.28));--ui-glass-blur:16px;--ui-glass-saturate:140%}}
1
+ @layer theme{[data-glass=thin],[data-glass=thin]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.2),hsla(0,0%,8%,.62));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.64),hsla(0,0%,8%,.76));--ui-glass-border:light-dark(rgba(31,31,31,.16),hsla(0,0%,100%,.2));--ui-glass-blur:4px;--ui-glass-saturate:150%}[data-glass=soft],[data-glass=soft]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.283),hsla(0,0%,8%,.653));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.69),hsla(0,0%,8%,.79));--ui-glass-border:light-dark(rgba(31,31,31,.187),hsla(0,0%,100%,.227));--ui-glass-blur:8px;--ui-glass-saturate:146.7%}[data-glass=regular],[data-glass=regular]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.367),hsla(0,0%,8%,.687));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.74),hsla(0,0%,8%,.82));--ui-glass-border:light-dark(rgba(31,31,31,.213),hsla(0,0%,100%,.253));--ui-glass-blur:12px;--ui-glass-saturate:143.3%}[data-glass=thick],[data-glass=thick]:is(.light,.dark,[data-theme=light],[data-theme=dark]){--ui-glass-surface:light-dark(hsla(0,0%,100%,.45),hsla(0,0%,8%,.72));--ui-glass-overlay-surface:light-dark(hsla(0,0%,100%,.8),hsla(0,0%,8%,.86));--ui-glass-border:light-dark(rgba(31,31,31,.24),hsla(0,0%,100%,.28));--ui-glass-blur:16px;--ui-glass-saturate:140%}}
package/dist/theme/alert-dialog.mjs CHANGED
@@ -7,9 +7,9 @@ export default tv({
7
7
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
8
8
  "motion-reduce:transition-none"
9
9
  ],
10
- viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
10
+ viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
11
11
  popup: [
12
- "relative isolate w-full max-w-md bg-ui-surface",
12
+ "relative isolate m-auto w-full max-w-md",
13
13
  "rounded-[1.75rem] text-ui-ink outline-none",
14
14
  "transition-[opacity,scale,translate] duration-200 ease-out",
15
15
  "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,7 +17,7 @@ export default tv({
17
17
  "motion-reduce:transition-none"
18
18
  ],
19
19
  glass: [
20
- "ui-glass ui-glass-inner ui-glass-highlight",
20
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
21
21
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
22
22
  ],
23
23
  overlay: "ui-glass-rim",
@@ -26,8 +26,8 @@ export default tv({
26
26
  "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
27
27
  "[filter:var(--ui-drop-shadow-label)]"
28
28
  ],
29
- description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
30
- body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
29
+ description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
30
+ body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
31
31
  footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
32
32
  }
33
33
  });
package/dist/theme/card.mjs CHANGED
@@ -7,7 +7,7 @@ export default tv({
7
7
  ],
8
8
  glass: [
9
9
  "ui-glass ui-glass-inner ui-glass-highlight",
10
- "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[2rem]"
10
+ "pointer-events-none relative col-start-1 row-start-1 h-full w-full overflow-hidden rounded-[inherit]"
11
11
  ],
12
12
  overlay: "ui-glass-rim",
13
13
  layout: [
package/dist/theme/dialog.mjs CHANGED
@@ -7,9 +7,9 @@ export default tv({
7
7
  "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0",
8
8
  "motion-reduce:transition-none"
9
9
  ],
10
- viewport: "fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-4",
10
+ viewport: "fixed inset-0 z-50 flex overflow-y-auto overscroll-contain p-4",
11
11
  popup: [
12
- "relative isolate w-full max-w-md bg-ui-surface",
12
+ "relative isolate m-auto w-full max-w-md",
13
13
  "rounded-[1.75rem] text-ui-ink outline-none",
14
14
  "transition-[opacity,scale,translate] duration-200 ease-out",
15
15
  "data-[starting-style]:translate-y-2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,7 +17,7 @@ export default tv({
17
17
  "motion-reduce:transition-none"
18
18
  ],
19
19
  glass: [
20
- "ui-glass ui-glass-inner ui-glass-highlight",
20
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
21
21
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
22
22
  ],
23
23
  overlay: "ui-glass-rim",
@@ -26,8 +26,8 @@ export default tv({
26
26
  "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
27
27
  "[filter:var(--ui-drop-shadow-label)]"
28
28
  ],
29
- description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
30
- body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
29
+ description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
30
+ body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
31
31
  footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
32
32
  }
33
33
  });
package/dist/theme/drawer.mjs CHANGED
@@ -12,14 +12,14 @@ export default tv({
12
12
  ],
13
13
  viewport: "fixed inset-0 z-50 flex overflow-hidden",
14
14
  popup: [
15
- "relative isolate flex min-h-0 flex-col overflow-hidden bg-ui-surface",
15
+ "relative isolate flex min-h-0 flex-col overflow-hidden",
16
16
  "text-ui-ink outline-none touch-auto overscroll-contain will-change-transform",
17
17
  "transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)]",
18
18
  "data-[swiping]:select-none",
19
19
  "motion-reduce:transition-none"
20
20
  ],
21
21
  glass: [
22
- "ui-glass ui-glass-inner ui-glass-highlight",
22
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
23
23
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
24
24
  ],
25
25
  overlay: "ui-glass-rim",
@@ -31,8 +31,8 @@ export default tv({
31
31
  "min-w-0 text-lg font-semibold tracking-tight text-ui-ink",
32
32
  "[filter:var(--ui-drop-shadow-label)]"
33
33
  ],
34
- description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
35
- body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
34
+ description: "mt-2 min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
35
+ body: "mt-4 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
36
36
  footer: "mt-6 flex flex-wrap items-center justify-end gap-2"
37
37
  },
38
38
  variants: {
package/dist/theme/menu.mjs CHANGED
@@ -3,7 +3,7 @@ export default tv({
3
3
  slots: {
4
4
  positioner: "z-50 outline-none",
5
5
  popup: [
6
- "relative isolate min-w-48 max-w-80 rounded-2xl bg-ui-surface p-1.5",
6
+ "relative isolate min-w-48 max-w-80 rounded-2xl p-1.5",
7
7
  "text-ui-ink outline-none",
8
8
  "transition-[opacity,scale] duration-150 ease-out",
9
9
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -15,7 +15,7 @@ export default tv({
15
15
  "motion-reduce:transition-none"
16
16
  ],
17
17
  glass: [
18
- "ui-glass ui-glass-inner ui-glass-highlight",
18
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
19
19
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
20
20
  ],
21
21
  overlay: "ui-glass-rim",
@@ -36,12 +36,12 @@ export default tv({
36
36
  itemLabel: "min-w-0 flex-1 truncate",
37
37
  shortcut: [
38
38
  "ml-auto shrink-0 font-mono text-[0.65rem] uppercase tracking-[0.12em]",
39
- "text-ui-ink/45"
39
+ "text-ui-ink/85"
40
40
  ],
41
41
  group: "flex min-w-0 flex-col gap-0.5",
42
42
  groupLabel: [
43
43
  "px-2.5 pb-1 pt-2 text-[0.65rem] font-medium uppercase tracking-[0.14em]",
44
- "text-ui-ink/45"
44
+ "text-ui-ink/85"
45
45
  ],
46
46
  separator: "mx-1 my-1 h-px bg-ui-glass-border"
47
47
  }
package/dist/theme/popover.mjs CHANGED
@@ -3,7 +3,7 @@ export default tv({
3
3
  slots: {
4
4
  positioner: "z-50 outline-none",
5
5
  popup: [
6
- "relative isolate w-80 max-w-[calc(100vw-2rem)] bg-ui-surface",
6
+ "relative isolate w-80 max-w-[calc(100vw-2rem)]",
7
7
  "rounded-[1.5rem] text-ui-ink outline-none",
8
8
  "transition-[opacity,scale,translate] duration-150 ease-out",
9
9
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -17,26 +17,30 @@ export default tv({
17
17
  "motion-reduce:transition-none"
18
18
  ],
19
19
  glass: [
20
- "ui-glass ui-glass-inner ui-glass-highlight",
20
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
21
21
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
22
22
  ],
23
23
  overlay: "ui-glass-rim",
24
24
  arrow: [
25
25
  "pointer-events-none absolute z-[1] size-3 rotate-45",
26
- "border-ui-glass-border bg-ui-surface",
26
+ "border-ui-glass-border bg-ui-glass-overlay-surface",
27
27
  "drop-shadow-[0_1px_2px_rgb(0_0_0/0.12)]",
28
28
  "data-[side=bottom]:-top-[6px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
29
29
  "data-[side=top]:-bottom-[6px] data-[side=top]:border-r data-[side=top]:border-b",
30
30
  "data-[side=left]:-right-[6px] data-[side=left]:border-t data-[side=left]:border-r",
31
- "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l"
31
+ "data-[side=right]:-left-[6px] data-[side=right]:border-b data-[side=right]:border-l",
32
+ "data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
33
+ "data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
34
+ "data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
35
+ "data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]"
32
36
  ],
33
37
  content: "relative z-10 flex min-w-0 flex-col p-4",
34
38
  title: [
35
39
  "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
36
40
  "[filter:var(--ui-drop-shadow-label)]"
37
41
  ],
38
- description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-60",
39
- body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-75",
42
+ description: "mt-1 min-w-0 text-xs leading-relaxed text-ui-ink opacity-85",
43
+ body: "mt-3 min-w-0 text-sm leading-relaxed text-ui-ink opacity-90",
40
44
  footer: "mt-4 flex flex-wrap items-center justify-end gap-2"
41
45
  }
42
46
  });
package/dist/theme/select.mjs CHANGED
@@ -39,7 +39,7 @@ export default tv({
39
39
  positioner: "z-50 outline-none",
40
40
  popup: [
41
41
  "relative isolate min-w-[var(--anchor-width)] max-w-[min(24rem,var(--available-width))]",
42
- "rounded-2xl bg-ui-surface p-1.5 text-ui-ink outline-none",
42
+ "rounded-2xl p-1.5 text-ui-ink outline-none",
43
43
  "transition-[opacity,scale] duration-150 ease-out",
44
44
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
45
45
  "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
@@ -50,7 +50,7 @@ export default tv({
50
50
  "motion-reduce:transition-none"
51
51
  ],
52
52
  popupGlass: [
53
- "ui-glass ui-glass-inner ui-glass-highlight",
53
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
54
54
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
55
55
  ],
56
56
  popupOverlay: "ui-glass-rim",
package/dist/theme/tabs.mjs CHANGED
@@ -50,7 +50,7 @@ export default tv({
50
50
  "text-[length:var(--ui-tabs-panel-font-size)]",
51
51
  "transition-[opacity,translate] duration-200 ease-out",
52
52
  "data-[starting-style]:translate-y-1 data-[starting-style]:opacity-0",
53
- "data-[ending-style]:translate-y-1 data-[ending-style]:opacity-0",
53
+ "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",
54
54
  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-glass-focus"
55
55
  ],
56
56
  panelContent: "leading-relaxed text-ui-ink/70"
package/dist/theme/toast.mjs CHANGED
@@ -8,7 +8,7 @@ export default tv({
8
8
  "[--shrink:calc(1_-_var(--scale))]",
9
9
  "[--height:var(--toast-frontmost-height,var(--toast-height))]",
10
10
  "absolute inset-x-0 isolate h-[var(--height)] w-full rounded-[1.25rem]",
11
- "bg-ui-surface text-ui-ink select-none",
11
+ "text-ui-ink select-none",
12
12
  "z-[calc(1000-var(--toast-index))]",
13
13
  "[transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]",
14
14
  "data-[expanded]:h-[var(--toast-height)]",
@@ -20,7 +20,7 @@ export default tv({
20
20
  "motion-reduce:transition-none"
21
21
  ],
22
22
  glass: [
23
- "ui-glass ui-glass-inner ui-glass-highlight",
23
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
24
24
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
25
25
  ],
26
26
  overlay: "ui-glass-rim",
@@ -39,7 +39,7 @@ export default tv({
39
39
  "min-w-0 text-sm font-semibold tracking-tight text-ui-ink",
40
40
  "[filter:var(--ui-drop-shadow-label)]"
41
41
  ],
42
- description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-60",
42
+ description: "min-w-0 text-sm leading-relaxed text-ui-ink opacity-85",
43
43
  actions: "flex shrink-0 items-center gap-1",
44
44
  action: [
45
45
  "ui-glass-chip inline-flex h-7 shrink-0 items-center rounded-full px-2.5",
package/dist/theme/tooltip.mjs CHANGED
@@ -3,7 +3,7 @@ export default tv({
3
3
  slots: {
4
4
  positioner: "z-50 outline-none",
5
5
  popup: [
6
- "relative isolate max-w-64 rounded-xl bg-ui-surface px-2.5 py-1.5",
6
+ "relative isolate max-w-64 rounded-xl px-2.5 py-1.5",
7
7
  "text-xs font-medium leading-tight text-ui-ink outline-none",
8
8
  "transition-[opacity,scale] duration-100 ease-out",
9
9
  "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -15,24 +15,32 @@ export default tv({
15
15
  "motion-reduce:transition-none"
16
16
  ],
17
17
  glass: [
18
- "ui-glass ui-glass-inner ui-glass-highlight",
18
+ "ui-glass ui-glass-overlay ui-glass-inner ui-glass-highlight",
19
19
  "pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-[inherit]"
20
20
  ],
21
21
  overlay: "ui-glass-rim",
22
22
  arrow: [
23
23
  "pointer-events-none absolute z-[1] size-2 rotate-45",
24
- "border-ui-glass-border bg-ui-surface",
24
+ "border-ui-glass-border bg-ui-glass-overlay-surface",
25
25
  "drop-shadow-[0_1px_1px_rgb(0_0_0/0.12)]",
26
26
  "data-[side=bottom]:-top-[4px] data-[side=bottom]:border-t data-[side=bottom]:border-l",
27
27
  "data-[side=top]:-bottom-[4px] data-[side=top]:border-r data-[side=top]:border-b",
28
28
  "data-[side=left]:-right-[4px] data-[side=left]:border-t data-[side=left]:border-r",
29
29
  "data-[side=right]:-left-[4px] data-[side=right]:border-b data-[side=right]:border-l",
30
+ "data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
31
+ "data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
32
+ "data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
33
+ "data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
30
34
  "data-[side=inline-start]:-end-[4px]",
31
35
  "ltr:data-[side=inline-start]:border-t ltr:data-[side=inline-start]:border-e",
32
36
  "rtl:data-[side=inline-start]:border-b rtl:data-[side=inline-start]:border-e",
33
37
  "data-[side=inline-end]:-start-[4px]",
34
38
  "ltr:data-[side=inline-end]:border-b ltr:data-[side=inline-end]:border-s",
35
- "rtl:data-[side=inline-end]:border-t rtl:data-[side=inline-end]:border-s"
39
+ "rtl:data-[side=inline-end]:border-t rtl:data-[side=inline-end]:border-s",
40
+ "ltr:data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
41
+ "rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
42
+ "ltr:data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
43
+ "rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]"
36
44
  ],
37
45
  content: "relative z-10"
38
46
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xingxingmofashu/ui",
3
- "version": "0.1.9",
3
+ "version": "0.2.0",
4
4
  "description": "React components with a CSS-only Liquid Glass visual style for React 19 and Tailwind CSS 4.",
5
5
  "license": "MIT",
6
6
  "author": "xingxingmofashu",
@@ -80,6 +80,7 @@
80
80
  },
81
81
  "devDependencies": {
82
82
  "@playwright/test": "1.64.1",
83
+ "@release-it/conventional-changelog": "12.0.2",
83
84
  "@tailwindcss/node": "4.3.3",
84
85
  "@testing-library/dom": "10.4.2",
85
86
  "@testing-library/jest-dom": "7.0.1",
@@ -91,6 +92,7 @@
91
92
  "husky": "9.1.7",
92
93
  "jsdom": "30.1.3",
93
94
  "oxlint": "1.90.0",
95
+ "release-it": "21.1.2",
94
96
  "tailwindcss": "4.3.3",
95
97
  "typescript": "5.9.3",
96
98
  "unbuild": "3.6.1",
@@ -115,6 +117,7 @@
115
117
  "docs:typecheck": "pnpm --filter @xingxingmofashu/docs typecheck",
116
118
  "playground:dev": "pnpm --filter @xingxingmofashu/playground dev",
117
119
  "playground:build": "pnpm --filter @xingxingmofashu/playground build",
118
- "playground:typecheck": "pnpm --filter @xingxingmofashu/playground typecheck"
120
+ "playground:typecheck": "pnpm --filter @xingxingmofashu/playground typecheck",
121
+ "release": "release-it"
119
122
  }
120
123
  }