@xingxingmofashu/ui 0.1.3 → 0.1.4
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.
- package/README.md +3 -66
- package/dist/composables/use-toast.d.ts +5 -1
- package/dist/composables/use-toast.mjs +2 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.mjs +1 -1
- package/dist/internal/tv.d.ts +0 -4
- package/package.json +1 -1
- package/dist/composables/create-toast-manager.d.ts +0 -6
- package/dist/composables/create-toast-manager.mjs +0 -3
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<picture>
|
|
2
|
-
<source media="(prefers-color-scheme: dark)" srcset=".github/assets/
|
|
3
|
-
<source media="(prefers-color-scheme: light)" srcset=".github/assets/
|
|
4
|
-
<img alt="
|
|
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">
|
|
5
5
|
</picture>
|
|
6
6
|
|
|
7
7
|
<div align="center">
|
|
@@ -29,18 +29,6 @@ Toast, Toggle, and Toggle Group.
|
|
|
29
29
|
> ESM-capable bundler. `Card` is server-safe; the interactive components are
|
|
30
30
|
> client components.
|
|
31
31
|
|
|
32
|
-
## Preview
|
|
33
|
-
|
|
34
|
-
<picture>
|
|
35
|
-
<source media="(prefers-color-scheme: dark)" srcset=".github/assets/playground-dark.png">
|
|
36
|
-
<source media="(prefers-color-scheme: light)" srcset=".github/assets/playground-light.png">
|
|
37
|
-
<img alt="The Liquid Glass playground showing live component previews in light mode." width="1440" src=".github/assets/playground-light.png">
|
|
38
|
-
</picture>
|
|
39
|
-
|
|
40
|
-
Every component is rendered live in the local playground. Run
|
|
41
|
-
`pnpm playground:dev`, open <http://localhost:3002>, and switch between light and
|
|
42
|
-
dark to compare the same previews in both themes.
|
|
43
|
-
|
|
44
32
|
## Documentation
|
|
45
33
|
|
|
46
34
|
- [English](https://xingxingmofashu.github.io/ui/docs/en/get-started/introduction)
|
|
@@ -106,57 +94,6 @@ import buttonTheme from "@xingxingmofashu/ui/theme/button";
|
|
|
106
94
|
|
|
107
95
|
Toast hooks live under `@xingxingmofashu/ui/composables`.
|
|
108
96
|
|
|
109
|
-
## Components
|
|
110
|
-
|
|
111
|
-
### Element
|
|
112
|
-
|
|
113
|
-
- Accordion
|
|
114
|
-
- Button
|
|
115
|
-
- Card
|
|
116
|
-
- Scroll Area
|
|
117
|
-
- Toggle
|
|
118
|
-
- Toggle Group
|
|
119
|
-
|
|
120
|
-
### Form
|
|
121
|
-
|
|
122
|
-
- Checkbox
|
|
123
|
-
- Input
|
|
124
|
-
- Slider
|
|
125
|
-
- Switch
|
|
126
|
-
|
|
127
|
-
### Overlay
|
|
128
|
-
|
|
129
|
-
- Alert Dialog
|
|
130
|
-
- Dialog
|
|
131
|
-
- Drawer
|
|
132
|
-
- Popover
|
|
133
|
-
- Toast
|
|
134
|
-
|
|
135
|
-
## Theming
|
|
136
|
-
|
|
137
|
-
Light and dark tokens are selected by `.light` / `.dark`, or by
|
|
138
|
-
`data-theme="light"` / `data-theme="dark"`:
|
|
139
|
-
|
|
140
|
-
```html
|
|
141
|
-
<html class="dark">
|
|
142
|
-
```
|
|
143
|
-
|
|
144
|
-
or:
|
|
145
|
-
|
|
146
|
-
```html
|
|
147
|
-
<html data-theme="dark">
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
A nested `.light` / `[data-theme="light"]` subtree can switch back to light
|
|
151
|
-
tokens. Shared colors and glass parameters live in the `--ui-*` tokens; override
|
|
152
|
-
them in your own theme layer. Tailwind aliases use the `ui-` prefix
|
|
153
|
-
(`text-ui-ink`, `outline-ui-glass-focus`, and so on) to avoid colliding with
|
|
154
|
-
host tokens.
|
|
155
|
-
|
|
156
|
-
The components inherit the host font. The visual material relies on modern CSS:
|
|
157
|
-
`backdrop-filter`, `color-mix`, container units, individual `translate` /
|
|
158
|
-
`scale` properties, and `:has`. Use a current evergreen browser.
|
|
159
|
-
|
|
160
97
|
## Development
|
|
161
98
|
|
|
162
99
|
```bash
|
|
@@ -3,5 +3,9 @@ import { Toast as UIToast } from "@base-ui/react/toast";
|
|
|
3
3
|
* Returns the toast manager connected to the nearest `ToastProvider`.
|
|
4
4
|
*/
|
|
5
5
|
declare const useToast: typeof UIToast.useToastManager;
|
|
6
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Creates a toast manager for adding notifications outside the React tree.
|
|
8
|
+
*/
|
|
9
|
+
declare const createToastManager: typeof UIToast.createToastManager;
|
|
10
|
+
export { createToastManager, useToast };
|
|
7
11
|
export type { ToastManager, ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject, } from "@base-ui/react/toast";
|
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{--ui-ink:#1f1f1f;--ui-ink-active:#000;--ui-surface:#fff;--ui-glass-surface:
|
|
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{--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 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),inset 0 0 2px rgba(0,0,0,.8),0 4px 8px rgba(0,0,0,.2)}.dark,[data-theme=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 2px -2px 1px -1px hsla(0,0%,100%,.35),inset -2px 2px 1px -1px hsla(0,0%,100%,.35),inset 6px -6px 1px -6px hsla(0,0%,100%,.2),inset -6px 6px 1px -6px hsla(0,0%,100%,.2),inset 0 0 2px rgba(0,0,0,.9),0 4px 8px rgba(0,0,0,.35)}.light,[data-theme=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 2px -2px 1px -1px hsla(0,0%,100%,.9),inset -2px 2px 1px -1px hsla(0,0%,100%,.9),inset 6px -6px 1px -6px hsla(0,0%,100%,.55),inset -6px 6px 1px -6px hsla(0,0%,100%,.55),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)}}
|
package/dist/index.d.ts
CHANGED
|
@@ -12,7 +12,6 @@ export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, } from ".
|
|
|
12
12
|
export { Slider, type SliderProps } from "./components/slider";
|
|
13
13
|
export { Switch, type SwitchProps } from "./components/switch";
|
|
14
14
|
export { Toast, ToastProvider, type ToastPosition, type ToastProps, type ToastProviderProps, } from "./components/toast";
|
|
15
|
-
export { createToastManager } from "./composables/
|
|
16
|
-
export { useToast, type ToastManager, type ToastManagerAddOptions, type ToastManagerPromiseOptions, type ToastManagerUpdateOptions, type ToastObject, } from "./composables/use-toast";
|
|
15
|
+
export { createToastManager, useToast, type ToastManager, type ToastManagerAddOptions, type ToastManagerPromiseOptions, type ToastManagerUpdateOptions, type ToastObject, } from "./composables/use-toast";
|
|
17
16
|
export { Toggle, type ToggleProps } from "./components/toggle";
|
|
18
17
|
export { ToggleGroup, type ToggleGroupItemProps, type ToggleGroupProps, } from "./components/toggle-group";
|
package/dist/index.mjs
CHANGED
|
@@ -19,8 +19,8 @@ export {
|
|
|
19
19
|
Toast,
|
|
20
20
|
ToastProvider
|
|
21
21
|
} from "./components/toast.mjs";
|
|
22
|
-
export { createToastManager } from "./composables/create-toast-manager.mjs";
|
|
23
22
|
export {
|
|
23
|
+
createToastManager,
|
|
24
24
|
useToast
|
|
25
25
|
} from "./composables/use-toast.mjs";
|
|
26
26
|
export { Toggle } from "./components/toggle.mjs";
|
package/dist/internal/tv.d.ts
CHANGED
|
@@ -7,10 +7,6 @@ type ComponentSlots<T extends {
|
|
|
7
7
|
}> = Id<{
|
|
8
8
|
[K in keyof T["slots"]]?: ClassValue;
|
|
9
9
|
}>;
|
|
10
|
-
/**
|
|
11
|
-
* Minimal tailwind-variants component config used to derive prop types from a
|
|
12
|
-
* theme recipe. Mirrors Nuxt UI's `ComponentConfig` slot mapping.
|
|
13
|
-
*/
|
|
14
10
|
export type ComponentConfig<T extends Record<string, any>> = {
|
|
15
11
|
slots: ComponentSlots<T>;
|
|
16
12
|
};
|
package/package.json
CHANGED