@enigmax/primitives 0.16.0 → 0.18.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/button-CaXaqG_K.d.ts +63 -0
- package/dist/chunk-2QFTRNAZ.js +88 -0
- package/dist/chunk-6BGBYUSZ.js +114 -0
- package/dist/chunk-AU3H5WIY.js +107 -0
- package/dist/chunk-F25CGNQC.js +19 -0
- package/dist/chunk-HC2ME5PU.js +168 -0
- package/dist/chunk-HS3X3XCW.js +43 -0
- package/dist/chunk-IIT6U7LM.js +249 -0
- package/dist/chunk-IXVMRVD4.js +96 -0
- package/dist/chunk-KJINGUQN.js +188 -0
- package/dist/chunk-LKA2UG4P.js +542 -0
- package/dist/chunk-MMQPZGSU.js +161 -0
- package/dist/chunk-OCMI7R6H.js +79 -0
- package/dist/chunk-QYMUIW5I.js +28 -0
- package/dist/chunk-S653GLSF.js +17 -0
- package/dist/chunk-SNYUBXWQ.js +149 -0
- package/dist/chunk-U3V4EHOB.js +41 -0
- package/dist/chunk-UOSSNUSC.js +309 -0
- package/dist/chunk-WSB655JB.js +47 -0
- package/dist/chunk-XNNQRA35.js +31 -0
- package/dist/chunk-XQHCZAPJ.js +102 -0
- package/dist/chunk-ZCUFYBPB.js +154 -0
- package/dist/chunk-ZWR2EXHQ.js +55 -0
- package/dist/flags-BBJc9unY.d.ts +133 -0
- package/dist/index-D-ARvWpQ.d.ts +306 -0
- package/dist/index-DNXPtY9X.d.ts +144 -0
- package/dist/index.d.ts +16 -496
- package/dist/index.js +9 -1
- package/dist/input-BwXjFenq.d.ts +77 -0
- package/dist/marquee-CJ3Uwy3E.d.ts +81 -0
- package/dist/network-D2LsBG_k.d.ts +39 -0
- package/dist/next/index.d.ts +20 -3
- package/dist/next/index.js +23 -3
- package/dist/notifications-BpVV6sel.d.ts +70 -0
- package/dist/password-3DRQYAYQ.js +2 -0
- package/dist/password-C8lG4Zm9.d.ts +71 -0
- package/dist/password-FB2CUEKJ.js +1 -0
- package/dist/react/button.d.ts +75 -0
- package/dist/react/button.js +4 -0
- package/dist/react/flag.d.ts +37 -0
- package/dist/react/flag.js +3 -0
- package/dist/react/index.d.ts +28 -286
- package/dist/react/index.js +22 -2
- package/dist/react/input.d.ts +4 -0
- package/dist/react/input.js +3 -0
- package/dist/react/marquee.d.ts +44 -0
- package/dist/react/marquee.js +3 -0
- package/dist/react/network.d.ts +20 -0
- package/dist/react/network.js +3 -0
- package/dist/react/notifications.d.ts +17 -0
- package/dist/react/notifications.js +3 -0
- package/dist/react/palette.d.ts +3 -0
- package/dist/react/palette.js +4 -0
- package/dist/react/relative-time.d.ts +21 -0
- package/dist/react/relative-time.js +3 -0
- package/dist/react/search.d.ts +30 -0
- package/dist/react/search.js +3 -0
- package/dist/react/slot.d.ts +47 -0
- package/dist/react/slot.js +2 -0
- package/dist/react/toast.d.ts +40 -0
- package/dist/react/toast.js +4 -0
- package/dist/react-router/index.d.ts +20 -3
- package/dist/react-router/index.js +23 -3
- package/dist/relative-time-YpRTG7YH.d.ts +106 -0
- package/dist/search-P4OHCRXD.js +50 -0
- package/package.json +53 -1
- package/registry.json +235 -16
- package/src/core/flags.ts +266 -0
- package/src/core/input-icons.ts +34 -0
- package/src/core/input.ts +5 -21
- package/src/core/palette.ts +0 -0
- package/src/index.ts +18 -0
- package/src/react/button.tsx +70 -4
- package/src/react/flag.tsx +70 -0
- package/src/react/index.ts +52 -5
- package/src/react/input/icon.tsx +17 -0
- package/src/react/input/index.tsx +307 -0
- package/src/react/input/password.tsx +174 -0
- package/src/react/input/search.tsx +82 -0
- package/src/react/input/types.ts +146 -0
- package/src/react/input/write-value.ts +18 -0
- package/src/react/palette/context.ts +60 -0
- package/src/react/palette/index.tsx +66 -0
- package/src/react/palette/root.tsx +621 -0
- package/src/react/slot.tsx +91 -0
- package/src/react/use-button.ts +3 -1
- package/dist/chunk-53DQY6LP.js +0 -1164
- package/dist/chunk-U2KYYMBJ.js +0 -724
- package/src/react/input.tsx +0 -429
package/dist/react/index.d.ts
CHANGED
|
@@ -1,94 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
export {
|
|
5
|
-
import {
|
|
6
|
-
export {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
* It is an ALIAS, not a second handler: the component owns the element's real onClick,
|
|
26
|
-
* because that is where a press is refused while the button is loading, disabled or
|
|
27
|
-
* cooling down. Passing one through would replace that and silently take the behaviour
|
|
28
|
-
* with it. Returning a promise drives `loading` for its duration, same as `onPress`.
|
|
29
|
-
*/
|
|
30
|
-
onClick?: ButtonOptions["onPress"];
|
|
31
|
-
/**
|
|
32
|
-
* Override what to render. You rarely need it: an href already renders whatever
|
|
33
|
-
* `setLinkComponent` registered - your router's Link - and a button otherwise.
|
|
34
|
-
*/
|
|
35
|
-
as?: ElementType;
|
|
36
|
-
/**
|
|
37
|
-
* The label, or a function of the state for one that changes with it.
|
|
38
|
-
*
|
|
39
|
-
* ```tsx
|
|
40
|
-
* <Button onPress={send} cooldown={30_000}>
|
|
41
|
-
* {({ loading, cooldown }) => loading ? "Sending" : cooldown ? `Wait ${Math.ceil(cooldown / 1000)}s` : "Resend"}
|
|
42
|
-
* </Button>
|
|
43
|
-
* ```
|
|
44
|
-
*/
|
|
45
|
-
children?: ReactNode | ((state: ButtonState) => ReactNode);
|
|
46
|
-
/** Replaces the label while async work runs - a spinner, or just different words. */
|
|
47
|
-
pending?: ReactNode;
|
|
48
|
-
/** `type` on a real button. Ignored on a link, which has none. */
|
|
49
|
-
type?: "button" | "submit" | "reset";
|
|
50
|
-
}
|
|
51
|
-
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLElement>>;
|
|
52
|
-
|
|
53
|
-
interface UseMarqueeResult {
|
|
54
|
-
/** Attach to the clipping viewport. */
|
|
55
|
-
laneRef: RefObject<HTMLElement | null>;
|
|
56
|
-
/** Attach to the moved element. Render `copies` children into it. */
|
|
57
|
-
trackRef: RefObject<HTMLElement | null>;
|
|
58
|
-
/**
|
|
59
|
-
* How many times to render the content. Starts at 2 so the server-rendered
|
|
60
|
-
* HTML stays small, then grows to cover the lane plus one whole period.
|
|
61
|
-
*/
|
|
62
|
-
copies: number;
|
|
63
|
-
/** True while the row is being grabbed. Useful for a `cursor: grabbing`. */
|
|
64
|
-
dragging: boolean;
|
|
65
|
-
/** Measured distance between two copies, in px. 0 before the first measure. */
|
|
66
|
-
period: number;
|
|
67
|
-
/** Re-read the lap from the DOM. Call after changing the content yourself. */
|
|
68
|
-
measure: () => void;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Drive a draggable infinite marquee from React.
|
|
72
|
-
*
|
|
73
|
-
* `speed` is pixels per second and never a duration: a duration ties the speed
|
|
74
|
-
* to the item count, so the row accelerates every time content is added.
|
|
75
|
-
*
|
|
76
|
-
* ```tsx
|
|
77
|
-
* const { laneRef, trackRef, copies } = useMarquee({ speed: 80, hover: 0.15 });
|
|
78
|
-
* return (
|
|
79
|
-
* <div ref={laneRef}>
|
|
80
|
-
* <div ref={trackRef} style={{ display: "flex" }}>
|
|
81
|
-
* {Array.from({ length: copies }, (_, copy) => (
|
|
82
|
-
* <div key={copy} aria-hidden={copy > 0} style={{ display: "flex", gap: 32 }}>
|
|
83
|
-
* {items.map(item => <Logo key={item.id} {...item} />)}
|
|
84
|
-
* </div>
|
|
85
|
-
* ))}
|
|
86
|
-
* </div>
|
|
87
|
-
* </div>
|
|
88
|
-
* );
|
|
89
|
-
* ```
|
|
90
|
-
*/
|
|
91
|
-
declare function useMarquee(options?: MarqueeOptions): UseMarqueeResult;
|
|
1
|
+
export { UseMarqueeResult, useMarquee } from './marquee.js';
|
|
2
|
+
export { M as MarqueeHover, a as MarqueeInstance, b as MarqueeOptions } from '../marquee-CJ3Uwy3E.js';
|
|
3
|
+
import { d as InputOptions } from '../input-BwXjFenq.js';
|
|
4
|
+
export { I as InputAction, b as InputIcon } from '../input-BwXjFenq.js';
|
|
5
|
+
import { RefObject, ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
6
|
+
export { UseSearchResult, useSearch } from './search.js';
|
|
7
|
+
export { F as FuseConstructor, b as SearchMatch, c as SearchOptions } from '../search-CsO3L1Lw.js';
|
|
8
|
+
import { d as ButtonState, c as ButtonOptions } from '../button-CaXaqG_K.js';
|
|
9
|
+
export { Button, ButtonProps } from './button.js';
|
|
10
|
+
import { f as PasswordStrengthClassNames } from '../index-DNXPtY9X.js';
|
|
11
|
+
export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-DNXPtY9X.js';
|
|
12
|
+
import { b as PasswordStrengthReport } from '../password-C8lG4Zm9.js';
|
|
13
|
+
export { E as EstimateOptions, G as GeneratePasswordOptions, a as PasswordScore, e as estimatePasswordStrength, g as generatePassword } from '../password-C8lG4Zm9.js';
|
|
14
|
+
export { Slot, SlotProps, mergeSlotProps } from './slot.js';
|
|
15
|
+
export { UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications } from './notifications.js';
|
|
16
|
+
export { ToastControls, ToastPosition, Toaster, ToasterProps } from './toast.js';
|
|
17
|
+
export { useNetworkState } from './network.js';
|
|
18
|
+
export { a as NetworkState } from '../network-D2LsBG_k.js';
|
|
19
|
+
export { RelativeTime, RelativeTimeProps } from './relative-time.js';
|
|
20
|
+
export { Flag, FlagProps } from './flag.js';
|
|
21
|
+
export { c as FlagFormat, d as FlagOptions, e as FlagShape, f as FlagSource, h as configureFlags, i as flagAttributes, k as flagName, l as flagSrc, m as flagView, n as normalizeFlagCode } from '../flags-BBJc9unY.js';
|
|
22
|
+
export { P as PaletteContent, a as PaletteContextValue, b as PaletteField, c as PaletteFooter, d as PaletteItem, e as PaletteList, f as PaletteListProps, g as PaletteRoot, h as PaletteRootProps, i as PaletteRow, j as PaletteSection, k as PaletteTrigger, R as RecentEntry, l as RecentStore, S as SearchPalette, m as SearchPaletteProps, n as createRecentStore, o as groupRows, p as isPaletteShortcut, q as moveActive, r as recentKey, s as shortcutLabel, u as usePaletteContext } from '../index-D-ARvWpQ.js';
|
|
23
|
+
import '../notifications-BpVV6sel.js';
|
|
24
|
+
import '../relative-time-YpRTG7YH.js';
|
|
92
25
|
|
|
93
26
|
interface UseInputResult {
|
|
94
27
|
/** Attach to the `<input>`. */
|
|
@@ -114,32 +47,6 @@ interface UseInputResult {
|
|
|
114
47
|
*/
|
|
115
48
|
declare function useInput(options?: InputOptions): UseInputResult;
|
|
116
49
|
|
|
117
|
-
interface UseSearchResult<T> {
|
|
118
|
-
/** Attach to the search field, or drive it yourself with `search`. */
|
|
119
|
-
inputRef: RefObject<HTMLInputElement | null>;
|
|
120
|
-
query: string;
|
|
121
|
-
results: SearchMatch<T>[];
|
|
122
|
-
/** Debounced. */
|
|
123
|
-
search: (query: string) => void;
|
|
124
|
-
/** Skips the debounce. */
|
|
125
|
-
searchNow: (query: string) => void;
|
|
126
|
-
clear: () => void;
|
|
127
|
-
}
|
|
128
|
-
/**
|
|
129
|
-
* Search-as-you-type over a list.
|
|
130
|
-
*
|
|
131
|
-
* Pass `fuse` (Fuse.js's constructor) for fuzzy matching, `matcher` to replace the
|
|
132
|
-
* engine, or neither for the built-in accent-insensitive substring search.
|
|
133
|
-
*
|
|
134
|
-
* ```tsx
|
|
135
|
-
* import Fuse from "fuse.js";
|
|
136
|
-
*
|
|
137
|
-
* const { inputRef, results } = useSearch({ items: docs, keys: ["title", "body"], fuse: Fuse });
|
|
138
|
-
* return <input ref={inputRef} type="search" placeholder="Search" />;
|
|
139
|
-
* ```
|
|
140
|
-
*/
|
|
141
|
-
declare function useSearch<T>(options?: SearchOptions<T>): UseSearchResult<T>;
|
|
142
|
-
|
|
143
50
|
interface UseButtonResult extends ButtonState {
|
|
144
51
|
/** Spread onto the element named by `element`. */
|
|
145
52
|
props: {
|
|
@@ -154,6 +61,8 @@ interface UseButtonResult extends ButtonState {
|
|
|
154
61
|
disabled?: boolean;
|
|
155
62
|
href?: string;
|
|
156
63
|
title?: string;
|
|
64
|
+
/** The ARIA way to announce the key. `title` is the pointer half of the same fact. */
|
|
65
|
+
"aria-keyshortcuts"?: string;
|
|
157
66
|
};
|
|
158
67
|
press: () => void;
|
|
159
68
|
reset: () => void;
|
|
@@ -179,84 +88,6 @@ declare function setLinkComponent(component: ElementType | null): void;
|
|
|
179
88
|
/** What an href should render as right now. */
|
|
180
89
|
declare function getLinkComponent(): ElementType;
|
|
181
90
|
|
|
182
|
-
/** An extra button inside the field. The built-ins are the same shape. */
|
|
183
|
-
interface FieldAction {
|
|
184
|
-
/** Stable id. Lands on `data-enigma-input-action`, and replaces a built-in of the same name. */
|
|
185
|
-
name: string;
|
|
186
|
-
/** Accessible name. Becomes `aria-label` and `title`. */
|
|
187
|
-
label: string;
|
|
188
|
-
icon: ReactNode;
|
|
189
|
-
onSelect: () => void;
|
|
190
|
-
/** Renders `aria-pressed`. Omit for actions that are not toggles. */
|
|
191
|
-
pressed?: boolean;
|
|
192
|
-
/** Default true. A false action is not rendered at all. */
|
|
193
|
-
visible?: boolean;
|
|
194
|
-
}
|
|
195
|
-
type BreachStatus = "idle" | "checking" | "safe" | "breached" | "error";
|
|
196
|
-
interface BreachState {
|
|
197
|
-
status: BreachStatus;
|
|
198
|
-
/** How many breaches the password appears in. 0 unless `status` is "breached". */
|
|
199
|
-
count: number;
|
|
200
|
-
/** Whatever the checker threw. The form decides whether that is worth showing. */
|
|
201
|
-
error: unknown;
|
|
202
|
-
}
|
|
203
|
-
type BreachChecker = (password: string, options: {
|
|
204
|
-
signal: AbortSignal;
|
|
205
|
-
}) => Promise<{
|
|
206
|
-
breached: boolean;
|
|
207
|
-
count: number;
|
|
208
|
-
}>;
|
|
209
|
-
interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "children"> {
|
|
210
|
-
/** The reveal toggle. Defaults to on for `type="password"` and off for everything else. */
|
|
211
|
-
reveal?: boolean;
|
|
212
|
-
revealLabels?: {
|
|
213
|
-
show?: string;
|
|
214
|
-
hide?: string;
|
|
215
|
-
};
|
|
216
|
-
/** Offer to generate a password. `true` for the defaults, or the generator's options. */
|
|
217
|
-
generate?: boolean | GeneratePasswordOptions;
|
|
218
|
-
generateLabel?: string;
|
|
219
|
-
/** Show what was generated. On by default - a password nobody can read is not usable. */
|
|
220
|
-
revealOnGenerate?: boolean;
|
|
221
|
-
/**
|
|
222
|
-
* Also copy it to the clipboard. OFF by default and worth leaving off: the clipboard is
|
|
223
|
-
* shared with every other app on the machine and is not cleared.
|
|
224
|
-
*/
|
|
225
|
-
copyOnGenerate?: boolean;
|
|
226
|
-
onGenerate?: (password: string) => void;
|
|
227
|
-
/** Extra buttons, or a replacement for `reveal` / `generate` by name. */
|
|
228
|
-
actions?: FieldAction[];
|
|
229
|
-
/** Which end the buttons sit at. Position them yourself; this only orders the markup. */
|
|
230
|
-
position?: "start" | "end";
|
|
231
|
-
/** Score the password as it is typed, and render the meter under the field. */
|
|
232
|
-
strength?: boolean | EstimateOptions;
|
|
233
|
-
onStrengthChange?: (report: PasswordStrengthReport) => void;
|
|
234
|
-
/**
|
|
235
|
-
* Check the password against a breach corpus - pass `checkPasswordBreach` from
|
|
236
|
-
* @enigmax/utils, or your own. It is a prop rather than a built-in because it makes a
|
|
237
|
-
* network request, and that is not a decision a field should take on its own.
|
|
238
|
-
*/
|
|
239
|
-
breach?: BreachChecker;
|
|
240
|
-
/** Quiet time before a check fires, in ms. Default 500. */
|
|
241
|
-
breachDelay?: number;
|
|
242
|
-
onBreachChange?: (state: BreachState) => void;
|
|
243
|
-
/** Props for the element wrapping the field, its buttons and the meter. */
|
|
244
|
-
wrapperProps?: ComponentPropsWithoutRef<"div">;
|
|
245
|
-
/** Props for the row holding the field and its buttons - this is what you position. */
|
|
246
|
-
fieldProps?: ComponentPropsWithoutRef<"div">;
|
|
247
|
-
/**
|
|
248
|
-
* Classes for the parts you cannot reach with a ref, which is what Tailwind needs.
|
|
249
|
-
* `className` still goes to the `<input>` itself, where you would expect it.
|
|
250
|
-
*/
|
|
251
|
-
classNames?: {
|
|
252
|
-
actions?: string;
|
|
253
|
-
action?: string;
|
|
254
|
-
strength?: PasswordStrengthProps["classNames"];
|
|
255
|
-
};
|
|
256
|
-
/** Rendered inside the wrapper, after the meter. Your error message goes here. */
|
|
257
|
-
children?: ReactNode;
|
|
258
|
-
}
|
|
259
|
-
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
260
91
|
interface PasswordStrengthProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
|
|
261
92
|
/** The password to score. Ignored when `report` is given. */
|
|
262
93
|
value?: string;
|
|
@@ -273,12 +104,7 @@ interface PasswordStrengthProps extends Omit<ComponentPropsWithoutRef<"div">, "c
|
|
|
273
104
|
* Classes for the inner parts. The score is on the ROOT, so a segment colours itself
|
|
274
105
|
* with a group variant - `group-data-[score=0]/strength:bg-red-600` and so on.
|
|
275
106
|
*/
|
|
276
|
-
classNames?:
|
|
277
|
-
track?: string;
|
|
278
|
-
segment?: string;
|
|
279
|
-
label?: string;
|
|
280
|
-
warning?: string;
|
|
281
|
-
};
|
|
107
|
+
classNames?: PasswordStrengthClassNames;
|
|
282
108
|
}
|
|
283
109
|
/**
|
|
284
110
|
* The bars under a password field.
|
|
@@ -289,88 +115,4 @@ interface PasswordStrengthProps extends Omit<ComponentPropsWithoutRef<"div">, "c
|
|
|
289
115
|
*/
|
|
290
116
|
declare function PasswordStrength({ value, report, userInputs, segments, labels, showWarning, classNames, ...props }: PasswordStrengthProps): ReactNode;
|
|
291
117
|
|
|
292
|
-
|
|
293
|
-
declare const defaultQueue: Notifications;
|
|
294
|
-
interface UseNotificationsResult extends Pick<Notifications, "notify" | "dismiss" | "dismissAll" | "pause" | "resume"> {
|
|
295
|
-
items: readonly Notification[];
|
|
296
|
-
}
|
|
297
|
-
/**
|
|
298
|
-
* Subscribe to a notification queue.
|
|
299
|
-
*
|
|
300
|
-
* Rendering is yours: this returns the list, the ordering and the timers, and
|
|
301
|
-
* nothing about how a notification looks.
|
|
302
|
-
*/
|
|
303
|
-
declare function useNotifications(queue?: Notifications): UseNotificationsResult;
|
|
304
|
-
declare function createNotificationQueue(options?: NotificationsOptions): Notifications;
|
|
305
|
-
|
|
306
|
-
/**
|
|
307
|
-
* `<Toaster />` - the stack, the movement and the gestures. No colours.
|
|
308
|
-
*
|
|
309
|
-
* The queue underneath already owns ordering, dedupe by key, sticky errors and timers that
|
|
310
|
-
* HOLD while the tab is hidden. What this adds is everything you cannot express in a queue:
|
|
311
|
-
* a toast that is on its way out is still on screen, a pointer resting on the stack must
|
|
312
|
-
* stop the clock, and a swipe has to follow the finger before it decides anything.
|
|
313
|
-
*
|
|
314
|
-
* Every part carries a data attribute, so the theme is a stylesheet you own. `enigma add
|
|
315
|
-
* toast --copy` writes one.
|
|
316
|
-
*/
|
|
317
|
-
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
318
|
-
interface ToasterProps {
|
|
319
|
-
/** Which queue to render. The shared one by default. */
|
|
320
|
-
queue?: Notifications;
|
|
321
|
-
position?: ToastPosition;
|
|
322
|
-
/**
|
|
323
|
-
* How long the exit animation lasts, in ms. The node stays mounted for exactly this
|
|
324
|
-
* long after it leaves the queue - a toast that vanishes the instant it is dismissed
|
|
325
|
-
* cannot animate out, and that is the only reason this component keeps its own list.
|
|
326
|
-
*/
|
|
327
|
-
exitDuration?: number;
|
|
328
|
-
/** Px a toast must travel before the release dismisses it. */
|
|
329
|
-
swipeThreshold?: number;
|
|
330
|
-
/** Render a toast yourself. The default renders title, body and the action. */
|
|
331
|
-
children?: (notification: Notification, controls: ToastControls) => ReactNode;
|
|
332
|
-
/** Accessible name for the region. */
|
|
333
|
-
label?: string;
|
|
334
|
-
className?: string;
|
|
335
|
-
style?: CSSProperties;
|
|
336
|
-
}
|
|
337
|
-
interface ToastControls {
|
|
338
|
-
dismiss: () => void;
|
|
339
|
-
}
|
|
340
|
-
declare function Toaster({ queue, position, exitDuration, swipeThreshold, children, label, className, style }: ToasterProps): ReactNode;
|
|
341
|
-
|
|
342
|
-
/**
|
|
343
|
-
* Connection state, kept in sync through useSyncExternalStore.
|
|
344
|
-
*
|
|
345
|
-
* ```tsx
|
|
346
|
-
* const { online, recovered, slow } = useNetworkState();
|
|
347
|
-
*
|
|
348
|
-
* useEffect(() => {
|
|
349
|
-
* if (!online) notify({ key: "net", title: "No connection", tone: "error" });
|
|
350
|
-
* else if (recovered) notify({ key: "net", title: "Back online", tone: "success" });
|
|
351
|
-
* }, [online, recovered]);
|
|
352
|
-
* ```
|
|
353
|
-
*
|
|
354
|
-
* `recovered` is false on a first load, so a page that opens online never announces a
|
|
355
|
-
* recovery that did not happen - the bug every hand-rolled `wasOffline` flag starts with.
|
|
356
|
-
*/
|
|
357
|
-
declare function useNetworkState(): NetworkState;
|
|
358
|
-
|
|
359
|
-
interface RelativeTimeProps extends RelativeTimeOptions, Omit<HTMLAttributes<HTMLElement>, "prefix" | "children"> {
|
|
360
|
-
/** ISO string, epoch milliseconds, or a Date. A string with no zone is read as UTC. */
|
|
361
|
-
date: string | number | Date | null | undefined;
|
|
362
|
-
/** Rendered when the date cannot be parsed. Nothing, by default. */
|
|
363
|
-
fallback?: ReactNode;
|
|
364
|
-
/** Title Case The Whole Phrase. Rarely what you want; `capitalizeFirst` usually is. */
|
|
365
|
-
capitalize?: boolean;
|
|
366
|
-
/** Uppercase the first letter, so a standalone "yesterday" reads as "Yesterday". */
|
|
367
|
-
capitalizeFirst?: boolean;
|
|
368
|
-
/**
|
|
369
|
-
* Pin the instant the age is measured from. Pass the request's timestamp to make a
|
|
370
|
-
* server render and its hydration agree exactly.
|
|
371
|
-
*/
|
|
372
|
-
now?: Date;
|
|
373
|
-
}
|
|
374
|
-
declare function RelativeTime({ date, fallback, capitalize, capitalizeFirst, now, format, tense, precision, threshold, prefix, formatStyle, locale, timeZone, second, minute, hour, weekday, day, month, year, timeZoneName, noTitle, numericBeyondThreshold, ...rest }: RelativeTimeProps): ReactNode;
|
|
375
|
-
|
|
376
|
-
export { type BreachChecker, type BreachState, type BreachStatus, Button, ButtonOptions, type ButtonProps, ButtonState, EstimateOptions, type FieldAction, GeneratePasswordOptions, Input, InputOptions, type InputProps, MarqueeOptions, NetworkState, PasswordStrength, type PasswordStrengthProps, PasswordStrengthReport, RelativeTime, type RelativeTimeProps, SearchMatch, SearchOptions, type ToastControls, type ToastPosition, Toaster, type ToasterProps, type UseButtonResult, type UseInputResult, type UseMarqueeResult, type UseNotificationsResult, type UseSearchResult, createNotificationQueue, defaultQueue, getLinkComponent, setLinkComponent, useButton, useInput, useMarquee, useNetworkState, useNotifications, useSearch };
|
|
118
|
+
export { ButtonOptions, ButtonState, InputOptions, PasswordStrength, type PasswordStrengthProps, PasswordStrengthReport, type UseButtonResult, type UseInputResult, getLinkComponent, setLinkComponent, useButton, useInput };
|
package/dist/react/index.js
CHANGED
|
@@ -1,4 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
export {
|
|
3
|
-
export {
|
|
2
|
+
export { useInput } from '../chunk-U3V4EHOB.js';
|
|
3
|
+
export { PasswordStrength } from '../chunk-XQHCZAPJ.js';
|
|
4
|
+
export { Flag } from '../chunk-XNNQRA35.js';
|
|
5
|
+
export { Toaster } from '../chunk-ZCUFYBPB.js';
|
|
6
|
+
export { useMarquee } from '../chunk-ZWR2EXHQ.js';
|
|
7
|
+
export { useSearch } from '../chunk-WSB655JB.js';
|
|
8
|
+
export { useNetworkState } from '../chunk-S653GLSF.js';
|
|
9
|
+
export { createNotificationQueue, defaultQueue, useNotifications } from '../chunk-QYMUIW5I.js';
|
|
10
|
+
export { RelativeTime } from '../chunk-OCMI7R6H.js';
|
|
11
|
+
import '../chunk-KJINGUQN.js';
|
|
12
|
+
export { estimatePasswordStrength, generatePassword } from '../chunk-HC2ME5PU.js';
|
|
13
|
+
export { configureFlags, flagAttributes, flagName, flagSrc, flagView, normalizeFlagCode } from '../chunk-AU3H5WIY.js';
|
|
14
|
+
import '../chunk-UOSSNUSC.js';
|
|
15
|
+
import '../chunk-2QFTRNAZ.js';
|
|
16
|
+
import '../chunk-SNYUBXWQ.js';
|
|
17
|
+
import '../chunk-IXVMRVD4.js';
|
|
18
|
+
export { Input } from '../chunk-IIT6U7LM.js';
|
|
19
|
+
import '../chunk-F25CGNQC.js';
|
|
20
|
+
export { PaletteContent, PaletteField, PaletteFooter, PaletteItem, PaletteList, PaletteRoot, PaletteTrigger, SearchPalette, createRecentStore, groupRows, isPaletteShortcut, moveActive, recentKey, shortcutLabel, usePaletteContext } from '../chunk-LKA2UG4P.js';
|
|
4
21
|
import '../chunk-UZFEEFMF.js';
|
|
22
|
+
export { Button, getLinkComponent, setLinkComponent, useButton } from '../chunk-6BGBYUSZ.js';
|
|
23
|
+
import '../chunk-MMQPZGSU.js';
|
|
24
|
+
export { Slot, mergeSlotProps } from '../chunk-HS3X3XCW.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { B as BreachChecker, a as BreachState, b as BreachStatus, F as FieldAction, I as Input, c as InputBaseProps, d as InputProps, e as InputType, P as PasswordOnlyProps, g as PlainOnlyProps, S as SearchOnlyProps } from '../index-DNXPtY9X.js';
|
|
2
|
+
import 'react';
|
|
3
|
+
import '../search-CsO3L1Lw.js';
|
|
4
|
+
import '../password-C8lG4Zm9.js';
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { b as MarqueeOptions } from '../marquee-CJ3Uwy3E.js';
|
|
3
|
+
|
|
4
|
+
interface UseMarqueeResult {
|
|
5
|
+
/** Attach to the clipping viewport. */
|
|
6
|
+
laneRef: RefObject<HTMLElement | null>;
|
|
7
|
+
/** Attach to the moved element. Render `copies` children into it. */
|
|
8
|
+
trackRef: RefObject<HTMLElement | null>;
|
|
9
|
+
/**
|
|
10
|
+
* How many times to render the content. Starts at 2 so the server-rendered
|
|
11
|
+
* HTML stays small, then grows to cover the lane plus one whole period.
|
|
12
|
+
*/
|
|
13
|
+
copies: number;
|
|
14
|
+
/** True while the row is being grabbed. Useful for a `cursor: grabbing`. */
|
|
15
|
+
dragging: boolean;
|
|
16
|
+
/** Measured distance between two copies, in px. 0 before the first measure. */
|
|
17
|
+
period: number;
|
|
18
|
+
/** Re-read the lap from the DOM. Call after changing the content yourself. */
|
|
19
|
+
measure: () => void;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Drive a draggable infinite marquee from React.
|
|
23
|
+
*
|
|
24
|
+
* `speed` is pixels per second and never a duration: a duration ties the speed
|
|
25
|
+
* to the item count, so the row accelerates every time content is added.
|
|
26
|
+
*
|
|
27
|
+
* ```tsx
|
|
28
|
+
* const { laneRef, trackRef, copies } = useMarquee({ speed: 80, hover: 0.15 });
|
|
29
|
+
* return (
|
|
30
|
+
* <div ref={laneRef}>
|
|
31
|
+
* <div ref={trackRef} style={{ display: "flex" }}>
|
|
32
|
+
* {Array.from({ length: copies }, (_, copy) => (
|
|
33
|
+
* <div key={copy} aria-hidden={copy > 0} style={{ display: "flex", gap: 32 }}>
|
|
34
|
+
* {items.map(item => <Logo key={item.id} {...item} />)}
|
|
35
|
+
* </div>
|
|
36
|
+
* ))}
|
|
37
|
+
* </div>
|
|
38
|
+
* </div>
|
|
39
|
+
* );
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
declare function useMarquee(options?: MarqueeOptions): UseMarqueeResult;
|
|
43
|
+
|
|
44
|
+
export { type UseMarqueeResult, useMarquee };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { a as NetworkState } from '../network-D2LsBG_k.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Connection state, kept in sync through useSyncExternalStore.
|
|
5
|
+
*
|
|
6
|
+
* ```tsx
|
|
7
|
+
* const { online, recovered, slow } = useNetworkState();
|
|
8
|
+
*
|
|
9
|
+
* useEffect(() => {
|
|
10
|
+
* if (!online) notify({ key: "net", title: "No connection", tone: "error" });
|
|
11
|
+
* else if (recovered) notify({ key: "net", title: "Back online", tone: "success" });
|
|
12
|
+
* }, [online, recovered]);
|
|
13
|
+
* ```
|
|
14
|
+
*
|
|
15
|
+
* `recovered` is false on a first load, so a page that opens online never announces a
|
|
16
|
+
* recovery that did not happen - the bug every hand-rolled `wasOffline` flag starts with.
|
|
17
|
+
*/
|
|
18
|
+
declare function useNetworkState(): NetworkState;
|
|
19
|
+
|
|
20
|
+
export { useNetworkState };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { d as Notifications, N as Notification, e as NotificationsOptions } from '../notifications-BpVV6sel.js';
|
|
2
|
+
|
|
3
|
+
/** One queue per app by default; a second one would race the first for the corner. */
|
|
4
|
+
declare const defaultQueue: Notifications;
|
|
5
|
+
interface UseNotificationsResult extends Pick<Notifications, "notify" | "dismiss" | "dismissAll" | "pause" | "resume"> {
|
|
6
|
+
items: readonly Notification[];
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Subscribe to a notification queue.
|
|
10
|
+
*
|
|
11
|
+
* Rendering is yours: this returns the list, the ordering and the timers, and
|
|
12
|
+
* nothing about how a notification looks.
|
|
13
|
+
*/
|
|
14
|
+
declare function useNotifications(queue?: Notifications): UseNotificationsResult;
|
|
15
|
+
declare function createNotificationQueue(options?: NotificationsOptions): Notifications;
|
|
16
|
+
|
|
17
|
+
export { type UseNotificationsResult, createNotificationQueue, defaultQueue, useNotifications };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import 'react';
|
|
2
|
+
export { P as PaletteContent, a as PaletteContextValue, b as PaletteField, c as PaletteFooter, d as PaletteItem, e as PaletteList, f as PaletteListProps, g as PaletteRoot, h as PaletteRootProps, i as PaletteRow, j as PaletteSection, k as PaletteTrigger, S as SearchPalette, m as SearchPaletteProps, i as SearchPaletteRow, u as usePaletteContext } from '../index-D-ARvWpQ.js';
|
|
3
|
+
import '../search-CsO3L1Lw.js';
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
|
+
import { a as RelativeTimeOptions } from '../relative-time-YpRTG7YH.js';
|
|
3
|
+
|
|
4
|
+
interface RelativeTimeProps extends RelativeTimeOptions, Omit<HTMLAttributes<HTMLElement>, "prefix" | "children"> {
|
|
5
|
+
/** ISO string, epoch milliseconds, or a Date. A string with no zone is read as UTC. */
|
|
6
|
+
date: string | number | Date | null | undefined;
|
|
7
|
+
/** Rendered when the date cannot be parsed. Nothing, by default. */
|
|
8
|
+
fallback?: ReactNode;
|
|
9
|
+
/** Title Case The Whole Phrase. Rarely what you want; `capitalizeFirst` usually is. */
|
|
10
|
+
capitalize?: boolean;
|
|
11
|
+
/** Uppercase the first letter, so a standalone "yesterday" reads as "Yesterday". */
|
|
12
|
+
capitalizeFirst?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* Pin the instant the age is measured from. Pass the request's timestamp to make a
|
|
15
|
+
* server render and its hydration agree exactly.
|
|
16
|
+
*/
|
|
17
|
+
now?: Date;
|
|
18
|
+
}
|
|
19
|
+
declare function RelativeTime({ date, fallback, capitalize, capitalizeFirst, now, format, tense, precision, threshold, prefix, formatStyle, locale, timeZone, second, minute, hour, weekday, day, month, year, timeZoneName, noTitle, numericBeyondThreshold, ...rest }: RelativeTimeProps): ReactNode;
|
|
20
|
+
|
|
21
|
+
export { RelativeTime, type RelativeTimeProps };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { b as SearchMatch, c as SearchOptions } from '../search-CsO3L1Lw.js';
|
|
3
|
+
|
|
4
|
+
interface UseSearchResult<T> {
|
|
5
|
+
/** Attach to the search field, or drive it yourself with `search`. */
|
|
6
|
+
inputRef: RefObject<HTMLInputElement | null>;
|
|
7
|
+
query: string;
|
|
8
|
+
results: SearchMatch<T>[];
|
|
9
|
+
/** Debounced. */
|
|
10
|
+
search: (query: string) => void;
|
|
11
|
+
/** Skips the debounce. */
|
|
12
|
+
searchNow: (query: string) => void;
|
|
13
|
+
clear: () => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Search-as-you-type over a list.
|
|
17
|
+
*
|
|
18
|
+
* Pass `fuse` (Fuse.js's constructor) for fuzzy matching, `matcher` to replace the
|
|
19
|
+
* engine, or neither for the built-in accent-insensitive substring search.
|
|
20
|
+
*
|
|
21
|
+
* ```tsx
|
|
22
|
+
* import Fuse from "fuse.js";
|
|
23
|
+
*
|
|
24
|
+
* const { inputRef, results } = useSearch({ items: docs, keys: ["title", "body"], fuse: Fuse });
|
|
25
|
+
* return <input ref={inputRef} type="search" placeholder="Search" />;
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
declare function useSearch<T>(options?: SearchOptions<T>): UseSearchResult<T>;
|
|
29
|
+
|
|
30
|
+
export { type UseSearchResult, useSearch };
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* `asChild`: render the behaviour onto YOUR element instead of ours.
|
|
6
|
+
*
|
|
7
|
+
* This is the escape hatch that decides whether a headless package is usable at scale. A
|
|
8
|
+
* component that always renders its own `<button>` forces every consumer who needs a link,
|
|
9
|
+
* a `motion.button`, a router's `Link` or their own design-system button to reimplement the
|
|
10
|
+
* behaviour - and that is the moment a team stops using the package. With `asChild` the
|
|
11
|
+
* component contributes props, refs and handlers, and the consumer owns the element:
|
|
12
|
+
*
|
|
13
|
+
* ```tsx
|
|
14
|
+
* <Button asChild shortcut="s">
|
|
15
|
+
* <motion.a href="/save" whileTap={{ scale: 0.98 }}>Save</motion.a>
|
|
16
|
+
* </Button>
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* Radix's Slot, deliberately: the semantics are the ones a React developer already knows.
|
|
20
|
+
* Its rules, and why each is the way round it is:
|
|
21
|
+
*
|
|
22
|
+
* - The CHILD's props win, because the child is what the author wrote by hand at this call
|
|
23
|
+
* site, while ours are the defaults a component supplied.
|
|
24
|
+
* - EVENT HANDLERS are chained rather than replaced, ours first: dropping ours would take
|
|
25
|
+
* the behaviour with it silently, which is the failure `onClick` on the Button already
|
|
26
|
+
* cost once. The child's handler still runs even if ours called `preventDefault`, so a
|
|
27
|
+
* handler that wants to bail checks `event.defaultPrevented` itself.
|
|
28
|
+
* - `className` and `style` are MERGED, child last, because both are additive by nature and
|
|
29
|
+
* an overwritten className is the single most confusing thing a wrapper can do.
|
|
30
|
+
* - Refs are composed, so both sides keep the node.
|
|
31
|
+
*/
|
|
32
|
+
type Props = Record<string, unknown>;
|
|
33
|
+
/** Merge the slot's props into the child's, by the rules above. */
|
|
34
|
+
declare function mergeSlotProps(slotProps: Props, childProps: Props): Props;
|
|
35
|
+
interface SlotProps extends Props {
|
|
36
|
+
children?: ReactNode;
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Clones its single child with the props it was given.
|
|
40
|
+
*
|
|
41
|
+
* A child that is not a single element is a mistake worth failing on rather than
|
|
42
|
+
* papering over: `asChild` with two children has no answer to "which one gets the
|
|
43
|
+
* behaviour", and rendering nothing would be a blank space nobody can debug.
|
|
44
|
+
*/
|
|
45
|
+
declare const Slot: react.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & react.RefAttributes<HTMLElement>>;
|
|
46
|
+
|
|
47
|
+
export { Slot, type SlotProps, mergeSlotProps };
|