@northstar-js/react 0.1.0 → 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.
- package/dist/actions.d.ts +71 -4
- package/dist/actions.d.ts.map +1 -1
- package/dist/actions.js +50 -4
- package/dist/actions.js.map +1 -1
- package/dist/backdrops/StarBackdrop.d.ts +31 -0
- package/dist/backdrops/StarBackdrop.d.ts.map +1 -0
- package/dist/backdrops/StarBackdrop.js +84 -0
- package/dist/backdrops/StarBackdrop.js.map +1 -0
- package/dist/backdrops/index.d.ts +7 -0
- package/dist/backdrops/index.d.ts.map +1 -0
- package/dist/backdrops/index.js +8 -0
- package/dist/backdrops/index.js.map +1 -0
- package/dist/backdrops/math.d.ts +39 -0
- package/dist/backdrops/math.d.ts.map +1 -0
- package/dist/backdrops/math.js +44 -0
- package/dist/backdrops/math.js.map +1 -0
- package/dist/backdrops/scenes.d.ts +20 -0
- package/dist/backdrops/scenes.d.ts.map +1 -0
- package/dist/backdrops/scenes.js +417 -0
- package/dist/backdrops/scenes.js.map +1 -0
- package/dist/backdrops.css +141 -0
- package/dist/data.d.ts +14 -3
- package/dist/data.d.ts.map +1 -1
- package/dist/data.js +16 -7
- package/dist/data.js.map +1 -1
- package/dist/effects/actions.d.ts +48 -0
- package/dist/effects/actions.d.ts.map +1 -0
- package/dist/effects/actions.js +80 -0
- package/dist/effects/actions.js.map +1 -0
- package/dist/effects/controls.d.ts +84 -0
- package/dist/effects/controls.d.ts.map +1 -0
- package/dist/effects/controls.js +121 -0
- package/dist/effects/controls.js.map +1 -0
- package/dist/effects/display.d.ts +92 -0
- package/dist/effects/display.d.ts.map +1 -0
- package/dist/effects/display.js +138 -0
- package/dist/effects/display.js.map +1 -0
- package/dist/effects/hooks.d.ts +13 -0
- package/dist/effects/hooks.d.ts.map +1 -0
- package/dist/effects/hooks.js +68 -0
- package/dist/effects/hooks.js.map +1 -0
- package/dist/effects/index.d.ts +14 -0
- package/dist/effects/index.d.ts.map +1 -0
- package/dist/effects/index.js +12 -0
- package/dist/effects/index.js.map +1 -0
- package/dist/effects/loaders.d.ts +67 -0
- package/dist/effects/loaders.d.ts.map +1 -0
- package/dist/effects/loaders.js +73 -0
- package/dist/effects/loaders.js.map +1 -0
- package/dist/effects/math.d.ts +23 -0
- package/dist/effects/math.d.ts.map +1 -0
- package/dist/effects/math.js +56 -0
- package/dist/effects/math.js.map +1 -0
- package/dist/effects/navigation.d.ts +55 -0
- package/dist/effects/navigation.d.ts.map +1 -0
- package/dist/effects/navigation.js +103 -0
- package/dist/effects/navigation.js.map +1 -0
- package/dist/effects/overlays.d.ts +34 -0
- package/dist/effects/overlays.d.ts.map +1 -0
- package/dist/effects/overlays.js +56 -0
- package/dist/effects/overlays.js.map +1 -0
- package/dist/effects.css +1659 -0
- package/dist/feedback.d.ts +6 -1
- package/dist/feedback.d.ts.map +1 -1
- package/dist/feedback.js +3 -3
- package/dist/feedback.js.map +1 -1
- package/dist/flow.d.ts +70 -0
- package/dist/flow.d.ts.map +1 -0
- package/dist/flow.js +118 -0
- package/dist/flow.js.map +1 -0
- package/dist/glass.d.ts +74 -0
- package/dist/glass.d.ts.map +1 -0
- package/dist/glass.js +139 -0
- package/dist/glass.js.map +1 -0
- package/dist/index.d.ts +14 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -1
- package/dist/index.js.map +1 -1
- package/dist/internal/expand.d.ts +17 -0
- package/dist/internal/expand.d.ts.map +1 -0
- package/dist/internal/expand.js +23 -0
- package/dist/internal/expand.js.map +1 -0
- package/dist/internal/interaction.d.ts +21 -0
- package/dist/internal/interaction.d.ts.map +1 -0
- package/dist/internal/interaction.js +129 -0
- package/dist/internal/interaction.js.map +1 -0
- package/dist/motion.d.ts +36 -0
- package/dist/motion.d.ts.map +1 -0
- package/dist/motion.js +80 -0
- package/dist/motion.js.map +1 -0
- package/dist/navigation.d.ts +43 -6
- package/dist/navigation.d.ts.map +1 -1
- package/dist/navigation.js +86 -19
- package/dist/navigation.js.map +1 -1
- package/dist/northstar/ExportMenu.d.ts +3 -1
- package/dist/northstar/ExportMenu.d.ts.map +1 -1
- package/dist/northstar/ExportMenu.js +2 -2
- package/dist/northstar/ExportMenu.js.map +1 -1
- package/dist/northstar/ResearchBuilder.d.ts.map +1 -1
- package/dist/northstar/ResearchBuilder.js +3 -3
- package/dist/northstar/ResearchBuilder.js.map +1 -1
- package/dist/northstar/Run.d.ts +3 -1
- package/dist/northstar/Run.d.ts.map +1 -1
- package/dist/northstar/Run.js +4 -3
- package/dist/northstar/Run.js.map +1 -1
- package/dist/northstar/StudyShell.d.ts +23 -1
- package/dist/northstar/StudyShell.d.ts.map +1 -1
- package/dist/northstar/StudyShell.js +6 -2
- package/dist/northstar/StudyShell.js.map +1 -1
- package/dist/northstar/StudyStatus.d.ts +3 -1
- package/dist/northstar/StudyStatus.d.ts.map +1 -1
- package/dist/northstar/StudyStatus.js +4 -2
- package/dist/northstar/StudyStatus.js.map +1 -1
- package/dist/overlays.d.ts +29 -4
- package/dist/overlays.d.ts.map +1 -1
- package/dist/overlays.js +38 -12
- package/dist/overlays.js.map +1 -1
- package/dist/provider.d.ts +31 -2
- package/dist/provider.d.ts.map +1 -1
- package/dist/provider.js +20 -6
- package/dist/provider.js.map +1 -1
- package/dist/styles.css +1069 -7
- package/dist/surface.d.ts +58 -0
- package/dist/surface.d.ts.map +1 -0
- package/dist/surface.js +39 -0
- package/dist/surface.js.map +1 -0
- package/package.json +18 -8
package/dist/feedback.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { type Material } from './provider.js';
|
|
1
2
|
import { type Tone } from './internal/util.js';
|
|
2
3
|
export interface ToastOptions {
|
|
3
4
|
title: React.ReactNode;
|
|
@@ -10,6 +11,8 @@ export interface ToastOptions {
|
|
|
10
11
|
onClick: () => void;
|
|
11
12
|
};
|
|
12
13
|
id?: string;
|
|
14
|
+
/** `glass` or `solid`. Defaults to the provider's material. */
|
|
15
|
+
material?: Material;
|
|
13
16
|
}
|
|
14
17
|
export interface ToastRecord extends ToastOptions {
|
|
15
18
|
id: string;
|
|
@@ -28,9 +31,11 @@ export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
|
|
|
28
31
|
onClick: () => void;
|
|
29
32
|
};
|
|
30
33
|
onDismiss?: () => void;
|
|
34
|
+
/** `glass` or `solid`. Defaults to the provider's material. */
|
|
35
|
+
material?: Material;
|
|
31
36
|
}
|
|
32
37
|
/** One toast surface. Usually rendered by <Toaster />. */
|
|
33
|
-
export declare function Toast({ title, description, tone, action, onDismiss, className, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare function Toast({ title, description, tone, action, onDismiss, material, className, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
|
|
34
39
|
export interface ToasterProps {
|
|
35
40
|
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center';
|
|
36
41
|
}
|
package/dist/feedback.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../src/feedback.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAM,KAAK,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAKnD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,EAAE,EAAE,MAAM,CAAC;CACZ;AASD,gEAAgE;AAChE,eAAO,MAAM,KAAK,aACN,YAAY,KAAG,MAAM;iBAOhB,MAAM;CAKtB,CAAC;AAOF,wBAAgB,SAAS,IAAI,WAAW,EAAE,CAEzC;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACrF,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,0DAA0D;AAC1D,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,IAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,2CAoB1H;AAmBD,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,GAAG,eAAe,CAAC;CACxF;AAED,kEAAkE;AAClE,wBAAgB,OAAO,CAAC,EAAE,QAAyB,EAAE,EAAE,YAAY,2CAgBlE;AAID,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACtF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,gGAAgG;AAChG,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,IAAgB,EAAE,MAAc,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,2CAiBtI"}
|
package/dist/feedback.js
CHANGED
|
@@ -29,9 +29,9 @@ export function useToasts() {
|
|
|
29
29
|
return useSyncExternalStore(subscribe, () => toasts, () => EMPTY);
|
|
30
30
|
}
|
|
31
31
|
/** One toast surface. Usually rendered by <Toaster />. */
|
|
32
|
-
export function Toast({ title, description, tone = 'neutral', action, onDismiss, className, ...rest }) {
|
|
33
|
-
const { messages } = useNorthstar();
|
|
34
|
-
return (_jsxs("div", { ...rest, className: cx('ns-toast', tone === 'signal' && 'ns-tone-signal', className), children: [_jsxs("div", { className: "ns-toast__text", children: [_jsx("div", { className: "ns-toast__title", children: title }), description && _jsx("div", { className: "ns-toast__description", children: description })] }), action && (_jsx("button", { type: "button", className: "ns-button ns-button--secondary ns-size-sm", onClick: action.onClick, children: action.label })), onDismiss && (_jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-icon-button", "aria-label": messages.dismiss, onClick: onDismiss, children: _jsx(Close, {}) }))] }));
|
|
32
|
+
export function Toast({ title, description, tone = 'neutral', action, onDismiss, material, className, ...rest }) {
|
|
33
|
+
const { messages, material: fallback } = useNorthstar();
|
|
34
|
+
return (_jsxs("div", { ...rest, className: cx('ns-toast', `ns-material--${material ?? fallback}`, tone === 'signal' && 'ns-tone-signal', className), children: [_jsxs("div", { className: "ns-toast__text", children: [_jsx("div", { className: "ns-toast__title", children: title }), description && _jsx("div", { className: "ns-toast__description", children: description })] }), action && (_jsx("button", { type: "button", className: "ns-button ns-button--secondary ns-size-sm", onClick: action.onClick, children: action.label })), onDismiss && (_jsx("button", { type: "button", className: "ns-button ns-button--ghost ns-size-sm ns-icon-button", "aria-label": messages.dismiss, onClick: onDismiss, children: _jsx(Close, {}) }))] }));
|
|
35
35
|
}
|
|
36
36
|
function TimedToast({ record }) {
|
|
37
37
|
const { id, duration = 5000, ...rest } = record;
|
package/dist/feedback.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../src/feedback.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,YAAY,
|
|
1
|
+
{"version":3,"file":"feedback.js","sourceRoot":"","sources":["../src/feedback.tsx"],"names":[],"mappings":"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"}
|
package/dist/flow.d.ts
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { type ButtonProps } from './actions.js';
|
|
2
|
+
export interface FlowStepProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
3
|
+
value: string;
|
|
4
|
+
title: React.ReactNode;
|
|
5
|
+
/** Plain-text title for announcements; defaults to `title` when it is a string. */
|
|
6
|
+
textTitle?: string;
|
|
7
|
+
description?: React.ReactNode;
|
|
8
|
+
icon?: React.ReactNode;
|
|
9
|
+
/** Marks the step done even when it is not behind the current one. */
|
|
10
|
+
complete?: boolean;
|
|
11
|
+
/** Blocks NextAction from leaving this step. */
|
|
12
|
+
blocked?: boolean | undefined;
|
|
13
|
+
}
|
|
14
|
+
interface FlowContextValue {
|
|
15
|
+
value: string;
|
|
16
|
+
index: number;
|
|
17
|
+
count: number;
|
|
18
|
+
steps: FlowStepProps[];
|
|
19
|
+
baseId: string;
|
|
20
|
+
go: (value: string) => void;
|
|
21
|
+
next: () => void;
|
|
22
|
+
back: () => void;
|
|
23
|
+
onComplete?: (() => void) | undefined;
|
|
24
|
+
}
|
|
25
|
+
/** The current flow, or null outside one. */
|
|
26
|
+
export declare function useFlow(): FlowContextValue | null;
|
|
27
|
+
export interface FlowStepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
|
|
28
|
+
value?: string;
|
|
29
|
+
defaultValue?: string;
|
|
30
|
+
onValueChange?: (value: string) => void;
|
|
31
|
+
/** Called when NextAction is pressed on the last step. */
|
|
32
|
+
onComplete?: (() => void) | undefined;
|
|
33
|
+
/** Only completed steps and the next one can be jumped to. Default true. */
|
|
34
|
+
linear?: boolean;
|
|
35
|
+
/** Accessible name of the step list. */
|
|
36
|
+
label?: string;
|
|
37
|
+
/** Hide the step list and show only the progress rail. */
|
|
38
|
+
compact?: boolean;
|
|
39
|
+
children: React.ReactNode;
|
|
40
|
+
}
|
|
41
|
+
export declare function FlowSteps({ value, defaultValue, onValueChange, onComplete, linear, label, compact, className, children, ...rest }: FlowStepsProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
/** One step. Renders only while it is the current step. */
|
|
43
|
+
export declare function FlowStep({ value, title, textTitle, description, icon, complete, blocked, className, children, ...rest }: FlowStepProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
export interface NextActionProps extends Omit<ButtonProps, 'variant'> {
|
|
45
|
+
/** Shows a quiet Back button before the next action. Default true inside a flow. */
|
|
46
|
+
showBack?: boolean;
|
|
47
|
+
/** Label on the last step. */
|
|
48
|
+
finishLabel?: React.ReactNode | undefined;
|
|
49
|
+
/** Secondary content between Back and the next action (a hint, a cost). */
|
|
50
|
+
hint?: React.ReactNode | undefined;
|
|
51
|
+
/**
|
|
52
|
+
* Back is icon-first: the arrow shows and "Back" eases open on hover and
|
|
53
|
+
* focus (always on touch). `always` keeps the word; false shows it plainly.
|
|
54
|
+
* The next action itself always shows its full label. Default true.
|
|
55
|
+
*/
|
|
56
|
+
backExpand?: boolean | 'always';
|
|
57
|
+
}
|
|
58
|
+
/**
|
|
59
|
+
* The one clear next action. Inside FlowSteps it advances (and names the step
|
|
60
|
+
* it leads to); on the last step it calls `onComplete`. Outside a flow it is a
|
|
61
|
+
* primary button with a trailing arrow that slides on hover.
|
|
62
|
+
*/
|
|
63
|
+
export declare function NextAction({ showBack, backExpand, finishLabel, hint, children, onClick, className, disabled, ...rest }: NextActionProps): import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
export declare const Flow: {
|
|
65
|
+
Steps: typeof FlowSteps;
|
|
66
|
+
Step: typeof FlowStep;
|
|
67
|
+
Next: typeof NextAction;
|
|
68
|
+
};
|
|
69
|
+
export {};
|
|
70
|
+
//# sourceMappingURL=flow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flow.d.ts","sourceRoot":"","sources":["../src/flow.tsx"],"names":[],"mappings":"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"}
|
package/dist/flow.js
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { createElement as _createElement } from "react";
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
// Flow: a guided sequence of steps with one clear next action. The header
|
|
5
|
+
// shows where you are (a sliding marker over the step list and a progress
|
|
6
|
+
// rail); the content changes with a view transition where supported and a
|
|
7
|
+
// directional CSS slide elsewhere; NextAction is the single primary button.
|
|
8
|
+
import { Children, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from 'react';
|
|
9
|
+
import { useNorthstar } from './provider.js';
|
|
10
|
+
import { Button } from './actions.js';
|
|
11
|
+
import { canViewTransition, withViewTransition } from './motion.js';
|
|
12
|
+
import { cx, useControllable } from './internal/util.js';
|
|
13
|
+
import { Check, ChevronLeft, ChevronRight } from './internal/icons.js';
|
|
14
|
+
const FlowContext = createContext(null);
|
|
15
|
+
/** The current flow, or null outside one. */
|
|
16
|
+
export function useFlow() {
|
|
17
|
+
return useContext(FlowContext);
|
|
18
|
+
}
|
|
19
|
+
function stepTitle(s) {
|
|
20
|
+
return s.textTitle ?? (typeof s.title === 'string' ? s.title : s.value);
|
|
21
|
+
}
|
|
22
|
+
export function FlowSteps({ value, defaultValue, onValueChange, onComplete, linear = true, label, compact = false, className, children, ...rest }) {
|
|
23
|
+
const { messages } = useNorthstar();
|
|
24
|
+
const steps = Children.toArray(children)
|
|
25
|
+
.filter((c) => isValidElement(c) && typeof c.props.value === 'string')
|
|
26
|
+
.map((c) => c.props);
|
|
27
|
+
const [v, setV] = useControllable(value, defaultValue ?? steps[0]?.value ?? '', onValueChange);
|
|
28
|
+
const index = Math.max(0, steps.findIndex((s) => s.value === v));
|
|
29
|
+
const prev = useRef(index);
|
|
30
|
+
const stage = useRef(null);
|
|
31
|
+
const [dir, setDir] = useState('forward');
|
|
32
|
+
const [vt, setVt] = useState(false);
|
|
33
|
+
useEffect(() => setVt(canViewTransition()), []);
|
|
34
|
+
const baseId = `ns-flow-${useId().replace(/:/g, '')}`;
|
|
35
|
+
const go = (target) => {
|
|
36
|
+
const to = steps.findIndex((s) => s.value === target);
|
|
37
|
+
if (to < 0 || target === v)
|
|
38
|
+
return;
|
|
39
|
+
const d = to > prev.current ? 'forward' : 'back';
|
|
40
|
+
prev.current = to;
|
|
41
|
+
if (typeof document !== 'undefined')
|
|
42
|
+
document.documentElement.setAttribute('data-ns-flow-dir', d);
|
|
43
|
+
withViewTransition(() => {
|
|
44
|
+
setDir(d);
|
|
45
|
+
setV(target);
|
|
46
|
+
}, stage.current);
|
|
47
|
+
};
|
|
48
|
+
const first = useRef(true);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
prev.current = index;
|
|
51
|
+
if (first.current) {
|
|
52
|
+
first.current = false;
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
// The step that held focus has gone; hand focus to the new step's title.
|
|
56
|
+
const active = typeof document !== 'undefined' ? document.activeElement : null;
|
|
57
|
+
if (!active || active === document.body || !active.isConnected || stage.current?.contains(active)) {
|
|
58
|
+
stage.current?.querySelector('.ns-flow__title')?.focus({ preventScroll: true });
|
|
59
|
+
}
|
|
60
|
+
}, [index]);
|
|
61
|
+
const ctx = {
|
|
62
|
+
value: steps[index]?.value ?? v,
|
|
63
|
+
index,
|
|
64
|
+
count: steps.length,
|
|
65
|
+
steps,
|
|
66
|
+
baseId,
|
|
67
|
+
go,
|
|
68
|
+
next: () => {
|
|
69
|
+
if (steps[index]?.blocked)
|
|
70
|
+
return;
|
|
71
|
+
if (index < steps.length - 1)
|
|
72
|
+
go(steps[index + 1].value);
|
|
73
|
+
else
|
|
74
|
+
onComplete?.();
|
|
75
|
+
},
|
|
76
|
+
back: () => index > 0 && go(steps[index - 1].value),
|
|
77
|
+
onComplete,
|
|
78
|
+
};
|
|
79
|
+
const current = steps[index];
|
|
80
|
+
const progress = steps.length > 1 ? index / (steps.length - 1) : 1;
|
|
81
|
+
return (_jsx(FlowContext.Provider, { value: ctx, children: _jsxs("div", { ...rest, className: cx('ns-flow', vt && 'ns-flow--vt', compact && 'ns-flow--compact', className), "data-direction": dir, children: [_jsxs("div", { className: "ns-flow__head", children: [!compact && (_jsx("ol", { className: "ns-flow__steps", "aria-label": label ?? messages.flowSteps, children: steps.map((s, i) => {
|
|
82
|
+
const done = s.complete || i < index;
|
|
83
|
+
const reachable = !linear || done || i <= index + 1;
|
|
84
|
+
const state = i === index ? 'current' : done ? 'complete' : 'upcoming';
|
|
85
|
+
return (_jsx("li", { className: "ns-flow__item", "data-state": state, children: _jsxs("button", { type: "button", className: "ns-flow__step", "aria-current": i === index ? 'step' : undefined, disabled: !reachable || (i === index + 1 && !!steps[index]?.blocked), onClick: () => go(s.value), children: [_jsx("span", { className: "ns-flow__mark", "aria-hidden": "true", children: done && i !== index ? _jsx(Check, {}) : s.icon ?? _jsx("span", { className: "ns-flow__num", children: i + 1 }) }), _jsx("span", { className: "ns-flow__label", children: s.title }), _jsx("span", { className: "ns-visually-hidden", children: state === 'complete' ? `, ${messages.flowComplete}` : '' })] }) }, s.value));
|
|
86
|
+
}) })), _jsx("div", { className: "ns-flow__rail", role: "progressbar", "aria-label": messages.flowProgress, "aria-valuemin": 1, "aria-valuemax": steps.length, "aria-valuenow": index + 1, "aria-valuetext": current ? `${messages.step(index + 1, steps.length)}: ${stepTitle(current)}` : undefined, children: _jsx("span", { className: "ns-flow__fill", style: { transform: `scaleX(${progress})` } }) })] }), _jsx("div", { ref: stage, className: "ns-flow__stage", children: Children.toArray(children).map((c) => isValidElement(c) && c.props.value === ctx.value ? c : null) })] }) }));
|
|
87
|
+
}
|
|
88
|
+
/** One step. Renders only while it is the current step. */
|
|
89
|
+
export function FlowStep({ value, title, textTitle, description, icon, complete, blocked, className, children, ...rest }) {
|
|
90
|
+
const ctx = useFlow();
|
|
91
|
+
void icon;
|
|
92
|
+
void complete;
|
|
93
|
+
void blocked;
|
|
94
|
+
void textTitle;
|
|
95
|
+
const id = `${ctx?.baseId ?? 'ns-flow'}-${value}-title`;
|
|
96
|
+
return (_createElement("section", { ...rest, key: value, "aria-labelledby": id, className: cx('ns-flow__panel', className), "data-step": value },
|
|
97
|
+
_jsxs("header", { className: "ns-flow__panel-head", children: [ctx && _jsx("span", { className: "ns-flow__eyebrow", children: `${ctx.index + 1} / ${ctx.count}` }), _jsx("h3", { id: id, className: "ns-flow__title", tabIndex: -1, children: title }), description && _jsx("p", { className: "ns-flow__description", children: description })] }),
|
|
98
|
+
_jsx("div", { className: "ns-flow__body", children: children })));
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* The one clear next action. Inside FlowSteps it advances (and names the step
|
|
102
|
+
* it leads to); on the last step it calls `onComplete`. Outside a flow it is a
|
|
103
|
+
* primary button with a trailing arrow that slides on hover.
|
|
104
|
+
*/
|
|
105
|
+
export function NextAction({ showBack = true, backExpand = true, finishLabel, hint, children, onClick, className, disabled, ...rest }) {
|
|
106
|
+
const ctx = useFlow();
|
|
107
|
+
const { messages } = useNorthstar();
|
|
108
|
+
const last = ctx ? ctx.index >= ctx.count - 1 : false;
|
|
109
|
+
const nextStep = ctx && !last ? ctx.steps[ctx.index + 1] : undefined;
|
|
110
|
+
const label = children ?? (last ? finishLabel ?? messages.flowFinish : nextStep ? messages.flowNext(stepTitle(nextStep)) : messages.flowFinish);
|
|
111
|
+
return (_jsxs("div", { className: "ns-next-action", children: [ctx && showBack && ctx.index > 0 && (_jsx(Button, { variant: "ghost", onClick: ctx.back, icon: _jsx(ChevronLeft, {}), expand: backExpand || 'always', className: "ns-next-action__back", children: messages.flowBack })), hint && _jsx("span", { className: "ns-next-action__hint", children: hint }), _jsxs(Button, { ...rest, variant: "primary", disabled: disabled || (ctx ? !!ctx.steps[ctx.index]?.blocked : false), className: cx('ns-next-action__go', className), onClick: (e) => {
|
|
112
|
+
onClick?.(e);
|
|
113
|
+
if (!e.defaultPrevented)
|
|
114
|
+
ctx?.next();
|
|
115
|
+
}, children: [label, _jsx("span", { className: "ns-next-action__arrow", "aria-hidden": "true", children: last ? _jsx(Check, {}) : _jsx(ChevronRight, {}) })] })] }));
|
|
116
|
+
}
|
|
117
|
+
export const Flow = { Steps: FlowSteps, Step: FlowStep, Next: NextAction };
|
|
118
|
+
//# sourceMappingURL=flow.js.map
|
package/dist/flow.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flow.js","sourceRoot":"","sources":["../src/flow.tsx"],"names":[],"mappings":"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"}
|
package/dist/glass.d.ts
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/** Mirrors `material.liquid.*` in @northstar-js/tokens (checked by a test). */
|
|
2
|
+
export declare const LIQUID: {
|
|
3
|
+
readonly scale: {
|
|
4
|
+
readonly sm: 14;
|
|
5
|
+
readonly md: 28;
|
|
6
|
+
readonly lg: 44;
|
|
7
|
+
};
|
|
8
|
+
readonly bevel: 0.16;
|
|
9
|
+
readonly aberration: 2;
|
|
10
|
+
readonly frost: 0.6;
|
|
11
|
+
/** Mirrors `radius.glass.*`: tight corners for precision, never fully round. */
|
|
12
|
+
readonly radius: {
|
|
13
|
+
readonly panel: 10;
|
|
14
|
+
readonly bar: 10;
|
|
15
|
+
readonly control: 7;
|
|
16
|
+
readonly inner: 6;
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
export type LiquidSize = keyof typeof LIQUID.scale;
|
|
20
|
+
/** A `radius.glass.*` step, `pill` (now the bar radius, not fully round) or `full` (a true circle or capsule). */
|
|
21
|
+
export type LiquidRadius = number | keyof typeof LIQUID.radius | 'pill' | 'full';
|
|
22
|
+
/**
|
|
23
|
+
* The displacement map as an SVG data URI. Red carries x, green carries y;
|
|
24
|
+
* each ramps from 1 to 0.5 across the rim and stays at 0.5 (no movement) in
|
|
25
|
+
* the body. With `w`/`h` the rim is in true pixels; without, it is a fraction
|
|
26
|
+
* of a stretched 100 × 100 box, which is close enough for small controls.
|
|
27
|
+
*/
|
|
28
|
+
export declare function displacementMap(w?: number, h?: number, bevel?: number, radius?: number): string;
|
|
29
|
+
interface FilterProps {
|
|
30
|
+
id: string;
|
|
31
|
+
scale: number;
|
|
32
|
+
map: string;
|
|
33
|
+
aberration?: number;
|
|
34
|
+
frost?: number;
|
|
35
|
+
width?: number;
|
|
36
|
+
height?: number;
|
|
37
|
+
}
|
|
38
|
+
/** One refraction filter. Shared presets use a stretched map; LiquidGlass with a numeric scale renders its own, measured. */
|
|
39
|
+
export declare function LiquidFilter({ id, scale, map, aberration, frost, width, height }: FilterProps): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
/**
|
|
41
|
+
* The shared filter defs (`#ns-liquid-sm|md|lg`), inserted once into
|
|
42
|
+
* document.body however many providers mount, and removed with the last one.
|
|
43
|
+
* Also marks <html data-ns-liquid="refract"> where refraction is supported.
|
|
44
|
+
*/
|
|
45
|
+
export declare function useLiquidDefs(enabled?: boolean): void;
|
|
46
|
+
type GlassTag = 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'nav' | 'span' | 'li';
|
|
47
|
+
export interface LiquidGlassProps extends React.HTMLAttributes<HTMLElement> {
|
|
48
|
+
/**
|
|
49
|
+
* Refraction strength. A preset (`sm` for controls, `md` for cards and bars,
|
|
50
|
+
* `lg` for sheets and dialogs) uses the shared filter; a number (px of
|
|
51
|
+
* displacement) renders a filter measured to this element.
|
|
52
|
+
*/
|
|
53
|
+
scale?: LiquidSize | number;
|
|
54
|
+
/**
|
|
55
|
+
* Corner radius: px, or a `radius.glass.*` step (`panel`, `bar`, `control`,
|
|
56
|
+
* `inner`). `pill` is the bar radius (glass is no longer fully round);
|
|
57
|
+
* `full` is a true capsule. Default `panel` (10px).
|
|
58
|
+
*/
|
|
59
|
+
radius?: LiquidRadius;
|
|
60
|
+
/** Lift with a soft drop shadow. Default true. */
|
|
61
|
+
floating?: boolean;
|
|
62
|
+
/** Glacier tint strength. `none` keeps only the neutral body. */
|
|
63
|
+
tint?: 'none' | 'subtle' | 'signal';
|
|
64
|
+
as?: GlassTag;
|
|
65
|
+
ref?: React.Ref<HTMLElement>;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Thin, refractive glass in the iOS 26 manner: the backdrop bends at the rim,
|
|
69
|
+
* a specular highlight sits on the top-left, a rim of light runs round the
|
|
70
|
+
* edge with an inner glow under it, and the body carries a faint glacier tint.
|
|
71
|
+
*/
|
|
72
|
+
export declare function LiquidGlass({ scale, radius, floating, tint, as: Tag, className, style, ref, children, ...rest }: LiquidGlassProps): import("react/jsx-runtime").JSX.Element;
|
|
73
|
+
export {};
|
|
74
|
+
//# sourceMappingURL=glass.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"glass.d.ts","sourceRoot":"","sources":["../src/glass.tsx"],"names":[],"mappings":"AAaA,+EAA+E;AAC/E,eAAO,MAAM,MAAM;;;;;;;;;IAKjB,gFAAgF;;;;;;;CAExE,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AACnD,kHAAkH;AAClH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,OAAO,MAAM,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEjF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAM,EAAE,CAAC,SAAM,EAAE,KAAK,GAAE,MAAqB,EAAE,MAAM,SAAI,GAAG,MAAM,CAalG;AAOD,UAAU,WAAW;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,6HAA6H;AAC7H,wBAAgB,YAAY,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,UAA8B,EAAE,KAAoB,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,WAAW,2CAkBhI;AAYD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,OAAO,UAAO,QAoC3C;AAED,KAAK,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAEtG,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACpC,EAAE,CAAC,EAAE,QAAQ,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAY,EAAE,MAAgB,EAAE,QAAe,EAAE,IAAe,EAAE,EAAE,EAAE,GAAW,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAuC5K"}
|
package/dist/glass.js
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
// Liquid glass. The refraction is an SVG filter used as a backdrop-filter:
|
|
4
|
+
// a displacement map that is neutral (50 % grey) in the body and ramps at the
|
|
5
|
+
// rim, so the backdrop bends inward at the edges like light through a thick
|
|
6
|
+
// lens; three displacements at slightly different scales split the colour at
|
|
7
|
+
// the rim (chromatic aberration), then a little frost and saturation.
|
|
8
|
+
// Only Chromium applies url() filters in backdrop-filter, so the root gets
|
|
9
|
+
// data-ns-liquid="refract" there; everywhere else the CSS falls back to blur
|
|
10
|
+
// plus the specular layers, and to the opaque solid under reduced
|
|
11
|
+
// transparency, in forced colours, and without backdrop-filter.
|
|
12
|
+
import { useEffect, useId, useRef, useState } from 'react';
|
|
13
|
+
import { cx, mergeRefs } from './internal/util.js';
|
|
14
|
+
/** Mirrors `material.liquid.*` in @northstar-js/tokens (checked by a test). */
|
|
15
|
+
export const LIQUID = {
|
|
16
|
+
scale: { sm: 14, md: 28, lg: 44 },
|
|
17
|
+
bevel: 0.16,
|
|
18
|
+
aberration: 2,
|
|
19
|
+
frost: 0.6,
|
|
20
|
+
/** Mirrors `radius.glass.*`: tight corners for precision, never fully round. */
|
|
21
|
+
radius: { panel: 10, bar: 10, control: 7, inner: 6 },
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* The displacement map as an SVG data URI. Red carries x, green carries y;
|
|
25
|
+
* each ramps from 1 to 0.5 across the rim and stays at 0.5 (no movement) in
|
|
26
|
+
* the body. With `w`/`h` the rim is in true pixels; without, it is a fraction
|
|
27
|
+
* of a stretched 100 × 100 box, which is close enough for small controls.
|
|
28
|
+
*/
|
|
29
|
+
export function displacementMap(w = 100, h = 100, bevel = LIQUID.bevel, radius = 0) {
|
|
30
|
+
const b = Math.max(1, Math.min(w, h) * bevel);
|
|
31
|
+
const fx = Math.min(0.5, b / w);
|
|
32
|
+
const fy = Math.min(0.5, b / h);
|
|
33
|
+
const r = Math.min(radius, Math.min(w, h) / 2);
|
|
34
|
+
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" preserveAspectRatio="none">` +
|
|
35
|
+
`<defs><linearGradient id="x" x2="1"><stop offset="0" stop-color="#f00"/><stop offset="${fx}" stop-color="#800000"/><stop offset="${1 - fx}" stop-color="#800000"/><stop offset="1" stop-color="#000"/></linearGradient>` +
|
|
36
|
+
`<linearGradient id="y" x2="0" y2="1"><stop offset="0" stop-color="#0f0"/><stop offset="${fy}" stop-color="#008000"/><stop offset="${1 - fy}" stop-color="#008000"/><stop offset="1" stop-color="#000"/></linearGradient>` +
|
|
37
|
+
`<filter id="s"><feGaussianBlur stdDeviation="${(b / 3).toFixed(1)}"/></filter></defs>` +
|
|
38
|
+
`<rect width="${w}" height="${h}" fill="url(#x)"/><rect width="${w}" height="${h}" fill="url(#y)" style="mix-blend-mode:screen"/>` +
|
|
39
|
+
`<rect x="${b}" y="${b}" width="${Math.max(0, w - 2 * b)}" height="${Math.max(0, h - 2 * b)}" rx="${Math.max(0, r - b)}" fill="#808000" filter="url(#s)"/></svg>`;
|
|
40
|
+
return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
|
|
41
|
+
}
|
|
42
|
+
function channel(name) {
|
|
43
|
+
const m = { R: '1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0', G: '0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0', B: '0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0' };
|
|
44
|
+
return m[name];
|
|
45
|
+
}
|
|
46
|
+
/** One refraction filter. Shared presets use a stretched map; LiquidGlass with a numeric scale renders its own, measured. */
|
|
47
|
+
export function LiquidFilter({ id, scale, map, aberration = LIQUID.aberration, frost = LIQUID.frost, width, height }) {
|
|
48
|
+
const box = width && height ? { x: 0, y: 0, width, height, filterUnits: 'userSpaceOnUse' } : { x: '0%', y: '0%', width: '100%', height: '100%' };
|
|
49
|
+
const img = width && height ? { width, height } : { width: '100%', height: '100%' };
|
|
50
|
+
return (_jsxs("filter", { id: id, ...box, colorInterpolationFilters: "sRGB", children: [_jsx("feImage", { href: map, x: "0", y: "0", ...img, preserveAspectRatio: "none", result: "map" }), ['R', 'G', 'B'].map((c, i) => (_jsx("feDisplacementMap", { in: "SourceGraphic", in2: "map", scale: scale + (i - 1) * aberration * -1, xChannelSelector: "R", yChannelSelector: "G", result: `d${c}` }, c))), ['R', 'G', 'B'].map((c) => (_jsx("feColorMatrix", { in: `d${c}`, type: "matrix", values: channel(c), result: `c${c}` }, c))), _jsx("feBlend", { in: "cR", in2: "cG", mode: "screen", result: "rg" }), _jsx("feBlend", { in: "rg", in2: "cB", mode: "screen", result: "rgb" }), _jsx("feGaussianBlur", { in: "rgb", stdDeviation: frost, result: "frost" }), _jsx("feColorMatrix", { in: "frost", type: "saturate", values: "1.5" })] }));
|
|
51
|
+
}
|
|
52
|
+
let defsUsers = 0;
|
|
53
|
+
let defsHost = null;
|
|
54
|
+
function supportsRefraction() {
|
|
55
|
+
if (typeof navigator === 'undefined' || typeof CSS === 'undefined' || !CSS.supports?.('backdrop-filter', 'url(#a)'))
|
|
56
|
+
return false;
|
|
57
|
+
const brands = navigator.userAgentData?.brands;
|
|
58
|
+
if (brands)
|
|
59
|
+
return brands.some((b) => /Chromium|Chrome|Edge/.test(b.brand));
|
|
60
|
+
return /Chrome\/|Chromium\/|Edg\//.test(navigator.userAgent) && !/Firefox\//.test(navigator.userAgent);
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* The shared filter defs (`#ns-liquid-sm|md|lg`), inserted once into
|
|
64
|
+
* document.body however many providers mount, and removed with the last one.
|
|
65
|
+
* Also marks <html data-ns-liquid="refract"> where refraction is supported.
|
|
66
|
+
*/
|
|
67
|
+
export function useLiquidDefs(enabled = true) {
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (!enabled || typeof document === 'undefined')
|
|
70
|
+
return;
|
|
71
|
+
defsUsers++;
|
|
72
|
+
if (!defsHost) {
|
|
73
|
+
const ns = 'http://www.w3.org/2000/svg';
|
|
74
|
+
const svg = document.createElementNS(ns, 'svg');
|
|
75
|
+
svg.setAttribute('aria-hidden', 'true');
|
|
76
|
+
svg.setAttribute('focusable', 'false');
|
|
77
|
+
svg.setAttribute('width', '0');
|
|
78
|
+
svg.setAttribute('height', '0');
|
|
79
|
+
svg.setAttribute('style', 'position:absolute;width:0;height:0;overflow:hidden;pointer-events:none');
|
|
80
|
+
svg.setAttribute('data-ns-liquid-defs', '');
|
|
81
|
+
const map = displacementMap();
|
|
82
|
+
const parts = Object.keys(LIQUID.scale).map((size) => {
|
|
83
|
+
const s = LIQUID.scale[size];
|
|
84
|
+
const ch = ['R', 'G', 'B']
|
|
85
|
+
.map((c, i) => `<feDisplacementMap in="SourceGraphic" in2="map" scale="${s - (i - 1) * LIQUID.aberration}" xChannelSelector="R" yChannelSelector="G" result="d${c}"/><feColorMatrix in="d${c}" type="matrix" values="${channel(c)}" result="c${c}"/>`)
|
|
86
|
+
.join('');
|
|
87
|
+
return `<filter id="ns-liquid-${size}" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"><feImage href="${map}" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map"/>${ch}<feBlend in="cR" in2="cG" mode="screen" result="rg"/><feBlend in="rg" in2="cB" mode="screen" result="rgb"/><feGaussianBlur in="rgb" stdDeviation="${LIQUID.frost}" result="f"/><feColorMatrix in="f" type="saturate" values="1.5"/></filter>`;
|
|
88
|
+
});
|
|
89
|
+
svg.innerHTML = `<defs>${parts.join('')}</defs>`;
|
|
90
|
+
document.body.appendChild(svg);
|
|
91
|
+
defsHost = svg;
|
|
92
|
+
if (supportsRefraction())
|
|
93
|
+
document.documentElement.setAttribute('data-ns-liquid', 'refract');
|
|
94
|
+
}
|
|
95
|
+
return () => {
|
|
96
|
+
defsUsers--;
|
|
97
|
+
if (defsUsers <= 0 && defsHost) {
|
|
98
|
+
defsHost.remove();
|
|
99
|
+
defsHost = null;
|
|
100
|
+
defsUsers = 0;
|
|
101
|
+
document.documentElement.removeAttribute('data-ns-liquid');
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
}, [enabled]);
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Thin, refractive glass in the iOS 26 manner: the backdrop bends at the rim,
|
|
108
|
+
* a specular highlight sits on the top-left, a rim of light runs round the
|
|
109
|
+
* edge with an inner glow under it, and the body carries a faint glacier tint.
|
|
110
|
+
*/
|
|
111
|
+
export function LiquidGlass({ scale = 'md', radius = 'panel', floating = true, tint = 'subtle', as: Tag = 'div', className, style, ref, children, ...rest }) {
|
|
112
|
+
const custom = typeof scale === 'number';
|
|
113
|
+
const fid = `ns-lg-${useId().replace(/:/g, '')}`;
|
|
114
|
+
const node = useRef(null);
|
|
115
|
+
const [box, setBox] = useState(null);
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
const el = node.current;
|
|
118
|
+
if (!custom || !el || typeof ResizeObserver === 'undefined')
|
|
119
|
+
return;
|
|
120
|
+
const ro = new ResizeObserver(() => {
|
|
121
|
+
const w = Math.round(el.offsetWidth);
|
|
122
|
+
const h = Math.round(el.offsetHeight);
|
|
123
|
+
setBox((b) => (b && b.w === w && b.h === h ? b : w > 0 && h > 0 ? { w, h } : b));
|
|
124
|
+
});
|
|
125
|
+
ro.observe(el);
|
|
126
|
+
return () => ro.disconnect();
|
|
127
|
+
}, [custom]);
|
|
128
|
+
const step = radius === 'pill' ? 'bar' : radius;
|
|
129
|
+
const r = typeof step === 'number' ? step : step === 'full' ? 9999 : LIQUID.radius[step];
|
|
130
|
+
const vars = {
|
|
131
|
+
'--ns-liquid-radius': typeof step === 'number' ? `${step}px` : step === 'full' ? '9999px' : `var(--ns-radius-glass-${step})`,
|
|
132
|
+
};
|
|
133
|
+
if (custom && box)
|
|
134
|
+
vars['--ns-liquid-filter'] = `url(#${fid})`;
|
|
135
|
+
return (_jsxs(Tag, { ...rest, ref: mergeRefs(ref, (el) => {
|
|
136
|
+
node.current = el;
|
|
137
|
+
}), className: cx('ns-liquid', !custom && `ns-liquid--${scale}`, floating && 'ns-liquid--floating', `ns-liquid--tint-${tint}`, className), style: { ...vars, ...style }, children: [custom && box && (_jsx("svg", { className: "ns-liquid__defs", "aria-hidden": "true", focusable: "false", width: "0", height: "0", children: _jsx(LiquidFilter, { id: fid, scale: scale, map: displacementMap(box.w, box.h, LIQUID.bevel, r), width: box.w, height: box.h }) })), children] }));
|
|
138
|
+
}
|
|
139
|
+
//# sourceMappingURL=glass.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"glass.js","sourceRoot":"","sources":["../src/glass.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
export { NorthstarProvider, useNorthstar, Portal, en } from './provider.js';
|
|
2
|
-
export type { NorthstarProviderProps, NorthstarContextValue, Messages, ThemeSetting, ResolvedTheme, Density } from './provider.js';
|
|
2
|
+
export type { NorthstarProviderProps, NorthstarContextValue, Messages, ThemeSetting, ResolvedTheme, Density, Material, ButtonFinish } from './provider.js';
|
|
3
|
+
export { Surface, Card, Panel, HoverActions } from './surface.js';
|
|
4
|
+
export { LiquidGlass, LiquidFilter, displacementMap, useLiquidDefs, LIQUID } from './glass.js';
|
|
5
|
+
export type { LiquidGlassProps, LiquidSize, LiquidRadius } from './glass.js';
|
|
6
|
+
export { FlowSteps, FlowStep, NextAction, Flow, useFlow } from './flow.js';
|
|
7
|
+
export type { FlowStepsProps, FlowStepProps, NextActionProps } from './flow.js';
|
|
8
|
+
export { Reveal, withViewTransition, useViewTransition, canViewTransition, prefersReducedMotion } from './motion.js';
|
|
9
|
+
export type { RevealProps } from './motion.js';
|
|
10
|
+
export type { SurfaceProps, CardProps, CardVariant, PanelProps } from './surface.js';
|
|
3
11
|
export type { Size, Tone } from './internal/util.js';
|
|
4
|
-
export {
|
|
5
|
-
export
|
|
12
|
+
export type { Expand } from './internal/expand.js';
|
|
13
|
+
export { Button, IconButton, RevealLabel, Toolbar, ToolbarItem, Link, ButtonGroup } from './actions.js';
|
|
14
|
+
export type { ButtonProps, ButtonVariant, ButtonTone, ButtonShape, IconButtonProps, ToolbarProps, ToolbarItemProps, LinkProps, ButtonGroupProps } from './actions.js';
|
|
6
15
|
export { Field, useFieldProps, Input, Textarea, Select, Combobox, Checkbox, RadioGroup, Radio, Switch, Slider, NumberInput, SearchInput } from './forms.js';
|
|
7
16
|
export type { FieldProps, InputProps, TextareaProps, Option, SelectProps, ComboboxProps, CheckboxProps, RadioGroupProps, RadioProps, SwitchProps, SliderProps, NumberInputProps, SearchInputProps, } from './forms.js';
|
|
8
17
|
export { Dialog, Sheet, Popover, Menu, Tooltip } from './overlays.js';
|
|
9
|
-
export type { DialogContentProps, SheetContentProps, PopoverContentProps, MenuContentProps, MenuItemProps, TooltipProps, Side, Align } from './overlays.js';
|
|
18
|
+
export type { DialogContentProps, SheetContentProps, PopoverContentProps, MenuContentProps, MenuItemProps, MenuTriggerProps, TooltipProps, Side, Align } from './overlays.js';
|
|
10
19
|
export { Toast, Toaster, toast, useToasts, Banner } from './feedback.js';
|
|
11
20
|
export type { ToastOptions, ToastRecord, ToastProps, ToasterProps, BannerProps } from './feedback.js';
|
|
12
21
|
export { Tabs, Breadcrumbs, Pagination, Sidebar, SidebarSection, SidebarItem } from './navigation.js';
|
|
13
|
-
export type { TabsRootProps, TabsTriggerProps, TabsContentProps, BreadcrumbItem, BreadcrumbsProps, PaginationProps, SidebarProps, SidebarSectionProps, SidebarItemProps } from './navigation.js';
|
|
22
|
+
export type { TabsIndicator, TabsRootProps, TabsTriggerProps, TabsContentProps, BreadcrumbItem, BreadcrumbsProps, PaginationProps, SidebarProps, SidebarSectionProps, SidebarItemProps } from './navigation.js';
|
|
14
23
|
export { AppShell, TopBar, Stack, Grid } from './layout.js';
|
|
15
24
|
export type { AppShellProps, TopBarProps, StackProps, GridProps } from './layout.js';
|
|
16
25
|
export { Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell, List, ListItem, Tag, Badge, Avatar, initials, Kbd, EmptyState, Skeleton, Stale } from './data.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAC5E,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
export { NorthstarProvider, useNorthstar, Portal, en } from './provider.js';
|
|
2
|
-
export {
|
|
2
|
+
export { Surface, Card, Panel, HoverActions } from './surface.js';
|
|
3
|
+
export { LiquidGlass, LiquidFilter, displacementMap, useLiquidDefs, LIQUID } from './glass.js';
|
|
4
|
+
export { FlowSteps, FlowStep, NextAction, Flow, useFlow } from './flow.js';
|
|
5
|
+
export { Reveal, withViewTransition, useViewTransition, canViewTransition, prefersReducedMotion } from './motion.js';
|
|
6
|
+
export { Button, IconButton, RevealLabel, Toolbar, ToolbarItem, Link, ButtonGroup } from './actions.js';
|
|
3
7
|
export { Field, useFieldProps, Input, Textarea, Select, Combobox, Checkbox, RadioGroup, Radio, Switch, Slider, NumberInput, SearchInput } from './forms.js';
|
|
4
8
|
export { Dialog, Sheet, Popover, Menu, Tooltip } from './overlays.js';
|
|
5
9
|
export { Toast, Toaster, toast, useToasts, Banner } from './feedback.js';
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAG5E,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAE/F,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAE3E,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAMrH,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGxG,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAM5J,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAGzE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGtG,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAG5D,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC"}
|