@madebywild/wvk 0.0.2 → 0.1.1
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/AGENTS.md +81 -0
- package/README.md +67 -0
- package/bin/wvk.mjs +198 -0
- package/dist/index.cjs +1246 -718
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +279 -70
- package/dist/index.d.ts +279 -70
- package/dist/index.js +1228 -722
- package/dist/index.js.map +1 -1
- package/dist/styles.css +99 -3
- package/package.json +10 -3
package/dist/index.d.cts
CHANGED
|
@@ -1,17 +1,30 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import { SVGProps } from 'react';
|
|
4
|
+
import { HTMLMotionProps } from 'framer-motion';
|
|
5
|
+
export { AnimatePresence, Variants, motion } from 'framer-motion';
|
|
4
6
|
import { VariantProps } from 'class-variance-authority';
|
|
7
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
8
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
5
9
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
10
|
import { W as WireframeIcons } from './index-CQDaCDUc.cjs';
|
|
11
|
+
import { Menu as Menu$1 } from '@base-ui/react/menu';
|
|
12
|
+
import { Radio as Radio$1 } from '@base-ui/react/radio';
|
|
13
|
+
import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
|
|
14
|
+
import { Toggle } from '@base-ui/react/toggle';
|
|
15
|
+
import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
16
|
+
import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
|
|
7
17
|
import { ClassValue } from 'clsx';
|
|
8
18
|
|
|
9
|
-
declare const
|
|
19
|
+
declare const alertVariants: (props?: ({
|
|
10
20
|
variant?: "info" | "warning" | "error" | "success" | null | undefined;
|
|
11
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string
|
|
21
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
22
|
+
type AlertProps = Omit<HTMLMotionProps<"div">, "children"> & VariantProps<typeof alertVariants> & {
|
|
12
23
|
title?: string;
|
|
13
24
|
icon?: React.ReactNode;
|
|
14
|
-
|
|
25
|
+
children?: React.ReactNode;
|
|
26
|
+
};
|
|
27
|
+
declare const Alert: React.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
15
28
|
|
|
16
29
|
type BottomTabBarProps = {
|
|
17
30
|
value: string;
|
|
@@ -42,31 +55,36 @@ declare const BottomTabBarItem: React.ForwardRefExoticComponent<Omit<Omit<React.
|
|
|
42
55
|
declare const buttonVariants: (props?: ({
|
|
43
56
|
variant?: "primary" | "secondary" | "primaryLight" | "primaryOutline" | "secondaryOutline" | "ghost" | null | undefined;
|
|
44
57
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
58
|
+
iconOnly?: boolean | null | undefined;
|
|
45
59
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
46
|
-
|
|
47
|
-
variant?: "primary" | "secondary" | "primaryLight" | "primaryOutline" | "secondaryOutline" | "ghost" | null | undefined;
|
|
48
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
49
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
60
|
+
type ButtonBaseProps = React.ComponentPropsWithoutRef<"button"> & Omit<VariantProps<typeof buttonVariants>, "iconOnly"> & {
|
|
50
61
|
/**
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
62
|
+
* Replace the rendered element with a custom one (e.g. an `<a>` from a router).
|
|
63
|
+
* Mirrors Base UI's `render` prop — pass either a React element to clone, or a
|
|
64
|
+
* callback `(props, state) => ReactElement`. `leadingIcon` and `trailingIcon`
|
|
65
|
+
* are ignored when `render` is provided so the consumer keeps full control.
|
|
54
66
|
*/
|
|
55
|
-
|
|
56
|
-
/** Optional icon before the label (e.g. from `../../icons`). Ignored when `
|
|
67
|
+
render?: useRender.RenderProp;
|
|
68
|
+
/** Optional icon before the label (e.g. from `../../icons`). Ignored when `render` is provided or `iconOnly` is true. */
|
|
57
69
|
leadingIcon?: React.ReactNode;
|
|
58
|
-
/** Optional icon after the label. Ignored when `
|
|
70
|
+
/** Optional icon after the label. Ignored when `render` is provided or `iconOnly` is true. */
|
|
59
71
|
trailingIcon?: React.ReactNode;
|
|
60
|
-
}
|
|
72
|
+
};
|
|
73
|
+
type ButtonProps = (ButtonBaseProps & {
|
|
74
|
+
/** Render as a square icon-only button. `children` should be a single icon and `aria-label` is required for accessibility. */
|
|
75
|
+
iconOnly: true;
|
|
76
|
+
"aria-label": string;
|
|
77
|
+
}) | (ButtonBaseProps & {
|
|
78
|
+
iconOnly?: false;
|
|
79
|
+
});
|
|
80
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
61
81
|
|
|
62
82
|
declare const checkboxFrameVariants: (props?: ({
|
|
63
83
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
64
84
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
65
|
-
declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<
|
|
85
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "render" | "onCheckedChange"> & VariantProps<(props?: ({
|
|
66
86
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
67
87
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
68
|
-
checked?: boolean;
|
|
69
|
-
indeterminate?: boolean;
|
|
70
88
|
onCheckedChange?: (checked: boolean) => void;
|
|
71
89
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
72
90
|
|
|
@@ -162,7 +180,14 @@ declare const linkVariants: (props?: ({
|
|
|
162
180
|
declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & VariantProps<(props?: ({
|
|
163
181
|
theme?: "dark" | "light" | "medium" | null | undefined;
|
|
164
182
|
size?: "body" | "caption" | null | undefined;
|
|
165
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string> &
|
|
183
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
184
|
+
/**
|
|
185
|
+
* Whether the underline is rendered by default.
|
|
186
|
+
* - `false` (default): underline animates in on hover.
|
|
187
|
+
* - `true`: underline is shown initially and animates out on hover.
|
|
188
|
+
*/
|
|
189
|
+
underlined?: boolean;
|
|
190
|
+
} & React.RefAttributes<HTMLAnchorElement>>;
|
|
166
191
|
|
|
167
192
|
declare const listItemVariants: (props?: ({
|
|
168
193
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -208,6 +233,36 @@ interface VideoControlsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
208
233
|
}
|
|
209
234
|
declare const VideoControls: React.ForwardRefExoticComponent<VideoControlsProps & React.RefAttributes<HTMLDivElement>>;
|
|
210
235
|
|
|
236
|
+
/**
|
|
237
|
+
* Compound menu built on Base UI's `Menu` primitives. Use this when you need a popover-style
|
|
238
|
+
* dropdown with rich item content (icons, dividers, submenus) — for a real form `<select>`,
|
|
239
|
+
* use {@link Select} instead.
|
|
240
|
+
*
|
|
241
|
+
* Example:
|
|
242
|
+
* ```tsx
|
|
243
|
+
* <Menu>
|
|
244
|
+
* <MenuTrigger render={<Button variant="ghost" />}>Actions</MenuTrigger>
|
|
245
|
+
* <MenuPopup>
|
|
246
|
+
* <MenuItem onClick={onCopy}>Copy</MenuItem>
|
|
247
|
+
* <MenuItem onClick={onDelete}>Delete</MenuItem>
|
|
248
|
+
* </MenuPopup>
|
|
249
|
+
* </Menu>
|
|
250
|
+
* ```
|
|
251
|
+
*/
|
|
252
|
+
declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => react_jsx_runtime.JSX.Element;
|
|
253
|
+
declare const MenuTrigger: Menu$1.Trigger;
|
|
254
|
+
/** Combines Portal + Positioner + Popup with kit styling defaults. */
|
|
255
|
+
declare const MenuPopup: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
256
|
+
/** Side (relative to the trigger) where the popup is placed. */
|
|
257
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
258
|
+
/** Pixel gap between trigger and popup. */
|
|
259
|
+
sideOffset?: number;
|
|
260
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
261
|
+
declare const MenuItem: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
262
|
+
declare const MenuSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
263
|
+
declare const MenuGroup: React.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
264
|
+
declare const MenuGroupLabel: React.ForwardRefExoticComponent<Omit<_base_ui_react.ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
265
|
+
|
|
211
266
|
declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & VariantProps<(props?: ({
|
|
212
267
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
213
268
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
@@ -216,7 +271,27 @@ declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<React.Detail
|
|
|
216
271
|
onPageChange?: (page: number) => void;
|
|
217
272
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
218
273
|
|
|
219
|
-
|
|
274
|
+
/**
|
|
275
|
+
* Determinate (or indeterminate) task progress bar — built on Base UI Progress.
|
|
276
|
+
* Use this for "loading", "uploading", or any *task* whose completion you can describe.
|
|
277
|
+
* For showing a measurement within a known range (battery, disk usage, score), use {@link Meter}.
|
|
278
|
+
*/
|
|
279
|
+
declare const ProgressBar: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
|
|
280
|
+
/**
|
|
281
|
+
* Progress value 0–100. Pass `null` for indeterminate (animated, unknown duration).
|
|
282
|
+
* @default 0
|
|
283
|
+
*/
|
|
284
|
+
value?: number | null;
|
|
285
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
286
|
+
/**
|
|
287
|
+
* Static measurement within a known range — built on Base UI Meter.
|
|
288
|
+
* Use for battery level, disk usage, score, etc. For task progress, use {@link ProgressBar}.
|
|
289
|
+
*/
|
|
290
|
+
declare const Meter: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.MeterRootProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
|
|
291
|
+
/**
|
|
292
|
+
* Current value within `[min, max]`.
|
|
293
|
+
* @default 0
|
|
294
|
+
*/
|
|
220
295
|
value?: number;
|
|
221
296
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
222
297
|
|
|
@@ -231,6 +306,12 @@ declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTM
|
|
|
231
306
|
/** Mirrored to `data-value` for grouping/lookup outside the component. */
|
|
232
307
|
value?: string;
|
|
233
308
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
309
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<Omit<Omit<RadioGroup$1.Props<unknown>, "ref">, "onValueChange"> & {
|
|
310
|
+
onValueChange?: (value: string) => void;
|
|
311
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
312
|
+
declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<Omit<Radio$1.Root.Props<unknown>, "ref">, "render"> & VariantProps<(props?: ({
|
|
313
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
314
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
|
|
234
315
|
|
|
235
316
|
declare const controlVariants: (props?: ({
|
|
236
317
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -245,7 +326,7 @@ type SegmentedControlProps = Omit<VariantProps<typeof controlVariants>, "widthMo
|
|
|
245
326
|
/** Preferred change handler. Called whenever the selected segment changes. */
|
|
246
327
|
onValueChange?: (value: string) => void;
|
|
247
328
|
className?: string;
|
|
248
|
-
/** Passed to the root element (e.g. for
|
|
329
|
+
/** Passed to the root element (e.g. for labelling the toggle group). */
|
|
249
330
|
"aria-label"?: string;
|
|
250
331
|
children: React.ReactNode;
|
|
251
332
|
};
|
|
@@ -261,11 +342,11 @@ declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<VariantProp
|
|
|
261
342
|
/** Preferred change handler. Called whenever the selected segment changes. */
|
|
262
343
|
onValueChange?: (value: string) => void;
|
|
263
344
|
className?: string;
|
|
264
|
-
/** Passed to the root element (e.g. for
|
|
345
|
+
/** Passed to the root element (e.g. for labelling the toggle group). */
|
|
265
346
|
"aria-label"?: string;
|
|
266
347
|
children: React.ReactNode;
|
|
267
348
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
268
|
-
type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<
|
|
349
|
+
type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<typeof Toggle>, "children" | "value"> & {
|
|
269
350
|
value: string;
|
|
270
351
|
/** Visible text; omit for icon-only segments (do not pass an empty string). */
|
|
271
352
|
label?: string;
|
|
@@ -273,7 +354,7 @@ type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<"button">,
|
|
|
273
354
|
icon?: React.ReactNode;
|
|
274
355
|
iconPlacement?: "leading" | "trailing";
|
|
275
356
|
};
|
|
276
|
-
declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<
|
|
357
|
+
declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<Toggle.Props<string> & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "value"> & {
|
|
277
358
|
value: string;
|
|
278
359
|
/** Visible text; omit for icon-only segments (do not pass an empty string). */
|
|
279
360
|
label?: string;
|
|
@@ -282,7 +363,7 @@ declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<Re
|
|
|
282
363
|
iconPlacement?: "leading" | "trailing";
|
|
283
364
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
284
365
|
/** Alias for {@link SegmentedControlItem} (same pattern as `TabsTrigger`). */
|
|
285
|
-
declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit<
|
|
366
|
+
declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit<Toggle.Props<string> & React.RefAttributes<HTMLButtonElement>, "ref">, "children" | "value"> & {
|
|
286
367
|
value: string;
|
|
287
368
|
/** Visible text; omit for icon-only segments (do not pass an empty string). */
|
|
288
369
|
label?: string;
|
|
@@ -293,24 +374,56 @@ declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit
|
|
|
293
374
|
|
|
294
375
|
/**
|
|
295
376
|
* Idle stroke via box-shadow (no layout shift). Active/focused = 2px input focus ring.
|
|
296
|
-
*
|
|
297
|
-
*
|
|
298
|
-
* The <select> is position:absolute inset-0 so the entire shell is clickable — padding
|
|
299
|
-
* lives on the select, not the shell, otherwise clicks on padded areas hit the div.
|
|
377
|
+
* Mirrors {@link TextInput} so Select sits on the same shell baseline.
|
|
300
378
|
*/
|
|
301
379
|
declare const selectShellVariants: (props?: ({
|
|
302
380
|
inputStyle?: "border" | "solid" | null | undefined;
|
|
303
381
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
304
382
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
305
|
-
|
|
306
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
307
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
308
|
-
declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & VariantProps<(props?: ({
|
|
309
|
-
inputStyle?: "border" | "solid" | null | undefined;
|
|
310
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
311
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string> & FieldLabelSlotProps & {
|
|
383
|
+
type SelectBaseProps = VariantProps<typeof selectShellVariants> & FieldLabelSlotProps & {
|
|
312
384
|
placeholder?: string;
|
|
313
|
-
|
|
385
|
+
/** Custom class for the trigger (the visible select shell). */
|
|
386
|
+
className?: string;
|
|
387
|
+
/** Aria-label for the trigger when there is no visible label. */
|
|
388
|
+
"aria-label"?: string;
|
|
389
|
+
/** Children should be `<SelectItem>` (and optional `<SelectGroup>` / `<SelectSeparator>`). */
|
|
390
|
+
children?: React.ReactNode;
|
|
391
|
+
disabled?: boolean;
|
|
392
|
+
id?: string;
|
|
393
|
+
/** Identifies the field when a form is submitted. */
|
|
394
|
+
name?: string;
|
|
395
|
+
/** Whether the user must choose a value. */
|
|
396
|
+
required?: boolean;
|
|
397
|
+
/** Whether the popup is open (controlled). */
|
|
398
|
+
open?: boolean;
|
|
399
|
+
defaultOpen?: boolean;
|
|
400
|
+
onOpenChange?: (open: boolean) => void;
|
|
401
|
+
};
|
|
402
|
+
type SelectSingleProps = SelectBaseProps & {
|
|
403
|
+
multiple?: false;
|
|
404
|
+
value?: string;
|
|
405
|
+
defaultValue?: string;
|
|
406
|
+
onValueChange?: (value: string) => void;
|
|
407
|
+
};
|
|
408
|
+
type SelectMultipleProps = SelectBaseProps & {
|
|
409
|
+
multiple: true;
|
|
410
|
+
value?: string[];
|
|
411
|
+
defaultValue?: string[];
|
|
412
|
+
onValueChange?: (value: string[]) => void;
|
|
413
|
+
};
|
|
414
|
+
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
415
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
|
|
416
|
+
declare const SelectItem: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.SelectItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "children"> & {
|
|
417
|
+
/** Item label / content (visible text). */
|
|
418
|
+
children?: React.ReactNode;
|
|
419
|
+
/** Optional glyph rendered before the label. */
|
|
420
|
+
leadingIcon?: React.ReactNode;
|
|
421
|
+
/** Optional glyph rendered after the label (sits before the selection indicator in single-select mode). */
|
|
422
|
+
trailingIcon?: React.ReactNode;
|
|
423
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
424
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<Omit<_base_ui_react.SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
425
|
+
declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
426
|
+
declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
314
427
|
|
|
315
428
|
type SliderValue = number | [number, number];
|
|
316
429
|
declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "onChange"> & {
|
|
@@ -318,6 +431,7 @@ declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHT
|
|
|
318
431
|
onChange?: (value: SliderValue) => void;
|
|
319
432
|
min?: number;
|
|
320
433
|
max?: number;
|
|
434
|
+
step?: number;
|
|
321
435
|
disabled?: boolean;
|
|
322
436
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
323
437
|
|
|
@@ -345,23 +459,21 @@ declare const StarRating: React.ForwardRefExoticComponent<StarRatingProps & Reac
|
|
|
345
459
|
declare const tabListVariants: (props?: ({
|
|
346
460
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
347
461
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
348
|
-
type TabsProps = {
|
|
462
|
+
type TabsProps = Omit<React.ComponentPropsWithoutRef<typeof Tabs$1.Root>, "value" | "defaultValue" | "onValueChange"> & {
|
|
349
463
|
value?: string;
|
|
350
464
|
defaultValue?: string;
|
|
351
465
|
onValueChange?: (value: string) => void;
|
|
352
466
|
children: React.ReactNode;
|
|
353
|
-
className?: string;
|
|
354
467
|
};
|
|
355
|
-
declare function Tabs({ value
|
|
356
|
-
declare const TabList: React.ForwardRefExoticComponent<VariantProps<(props?: ({
|
|
468
|
+
declare function Tabs({ value, defaultValue, onValueChange, className, children, ...rest }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
469
|
+
declare const TabList: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & VariantProps<(props?: ({
|
|
357
470
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
358
471
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
359
472
|
/** When true, each tab sizes to its label/icon; the list row remains full width. */
|
|
360
473
|
autoWidth?: boolean;
|
|
361
474
|
children: React.ReactNode;
|
|
362
|
-
className?: string;
|
|
363
475
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
364
|
-
type TabProps = Omit<React.ComponentPropsWithoutRef<
|
|
476
|
+
type TabProps = Omit<React.ComponentPropsWithoutRef<typeof Tabs$1.Tab>, "children" | "value"> & {
|
|
365
477
|
/** Segment id; required when using controlled `Tabs`. */
|
|
366
478
|
value?: string;
|
|
367
479
|
/** Optional; use `children` for text if you prefer. */
|
|
@@ -369,11 +481,9 @@ type TabProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
|
|
|
369
481
|
/** Optional; omit for label-only triggers. */
|
|
370
482
|
icon?: React.ReactNode;
|
|
371
483
|
iconPlacement?: "leading" | "trailing";
|
|
372
|
-
/** When not using `Tabs` context, marks the selected tab. */
|
|
373
|
-
active?: boolean;
|
|
374
484
|
children?: React.ReactNode;
|
|
375
485
|
};
|
|
376
|
-
declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<
|
|
486
|
+
declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "children" | "value"> & {
|
|
377
487
|
/** Segment id; required when using controlled `Tabs`. */
|
|
378
488
|
value?: string;
|
|
379
489
|
/** Optional; use `children` for text if you prefer. */
|
|
@@ -381,21 +491,20 @@ declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLP
|
|
|
381
491
|
/** Optional; omit for label-only triggers. */
|
|
382
492
|
icon?: React.ReactNode;
|
|
383
493
|
iconPlacement?: "leading" | "trailing";
|
|
384
|
-
/** When not using `Tabs` context, marks the selected tab. */
|
|
385
|
-
active?: boolean;
|
|
386
494
|
children?: React.ReactNode;
|
|
387
495
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
496
|
+
declare const TabPanel: React.ForwardRefExoticComponent<Omit<_base_ui_react.TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
497
|
+
declare const TabIndicator: React.ForwardRefExoticComponent<Omit<_base_ui_react.TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
388
498
|
/** Same component as {@link TabList}; matches common Radix-style naming. */
|
|
389
|
-
declare const TabsList: React.ForwardRefExoticComponent<VariantProps<(props?: ({
|
|
499
|
+
declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref">, "children"> & VariantProps<(props?: ({
|
|
390
500
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
391
501
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
392
502
|
/** When true, each tab sizes to its label/icon; the list row remains full width. */
|
|
393
503
|
autoWidth?: boolean;
|
|
394
504
|
children: React.ReactNode;
|
|
395
|
-
className?: string;
|
|
396
505
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
397
506
|
/** Same component as {@link Tab}; matches common Radix-style naming. */
|
|
398
|
-
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<
|
|
507
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "children" | "value"> & {
|
|
399
508
|
/** Segment id; required when using controlled `Tabs`. */
|
|
400
509
|
value?: string;
|
|
401
510
|
/** Optional; use `children` for text if you prefer. */
|
|
@@ -403,10 +512,10 @@ declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.Detai
|
|
|
403
512
|
/** Optional; omit for label-only triggers. */
|
|
404
513
|
icon?: React.ReactNode;
|
|
405
514
|
iconPlacement?: "leading" | "trailing";
|
|
406
|
-
/** When not using `Tabs` context, marks the selected tab. */
|
|
407
|
-
active?: boolean;
|
|
408
515
|
children?: React.ReactNode;
|
|
409
516
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
517
|
+
/** Same component as {@link TabPanel}; matches common Radix-style naming. */
|
|
518
|
+
declare const TabsContent: React.ForwardRefExoticComponent<Omit<_base_ui_react.TabsPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
410
519
|
|
|
411
520
|
/** Default tag / label glyph for the optional custom `icon` slot (uses `currentColor`). */
|
|
412
521
|
declare function TagIconGlyph(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
|
|
@@ -481,35 +590,115 @@ declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAtt
|
|
|
481
590
|
*/
|
|
482
591
|
declare const toggleSwitchVariants: (props?: ({
|
|
483
592
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
484
|
-
checked?: boolean | null | undefined;
|
|
485
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
486
|
-
declare const toggleThumbVariants: (props?: ({
|
|
487
|
-
checked?: boolean | null | undefined;
|
|
488
593
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
489
|
-
declare const
|
|
594
|
+
declare const toggleThumbVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
|
|
595
|
+
declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<Omit<Omit<_base_ui_react.SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref">, "render" | "onCheckedChange"> & VariantProps<(props?: ({
|
|
490
596
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
491
|
-
|
|
492
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string>, "checked"> & {
|
|
493
|
-
checked?: boolean;
|
|
597
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
494
598
|
onCheckedChange?: (checked: boolean) => void;
|
|
495
599
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
496
600
|
|
|
601
|
+
declare const tooltipVariants: (props?: ({
|
|
602
|
+
theme?: "dark" | "light" | null | undefined;
|
|
603
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
604
|
+
direction?: "center" | "left" | "right" | null | undefined;
|
|
605
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
606
|
+
/**
|
|
607
|
+
* Presentational tooltip box (no interaction). Use this when the tooltip's positioning is
|
|
608
|
+
* already handled by its container — for example, alongside a custom hover/focus group.
|
|
609
|
+
*
|
|
610
|
+
* For an interactive, floating tooltip with delay, focus, and collision handling, use the
|
|
611
|
+
* {@link TooltipPopup} compound (Base UI primitives).
|
|
612
|
+
*/
|
|
497
613
|
declare const Tooltip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
498
614
|
theme?: "dark" | "light" | null | undefined;
|
|
499
615
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
500
616
|
direction?: "center" | "left" | "right" | null | undefined;
|
|
501
617
|
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
618
|
+
/**
|
|
619
|
+
* Optional `<TooltipProvider>` wraps a subtree to share hover-delay state across multiple
|
|
620
|
+
* tooltips so opening one lets siblings open without re-waiting.
|
|
621
|
+
*/
|
|
622
|
+
declare const TooltipProvider: React.FC<_base_ui_react.TooltipProviderProps>;
|
|
623
|
+
/**
|
|
624
|
+
* Interactive, floating tooltip compound built on Base UI primitives. Pass any element as
|
|
625
|
+
* `trigger` (it must be focusable to support keyboard users) and the tooltip body as
|
|
626
|
+
* `children`. The popup uses the kit's dark/light themes and arrow caret.
|
|
627
|
+
*/
|
|
628
|
+
type TooltipPopupProps = Omit<React.ComponentPropsWithoutRef<typeof Tooltip$1.Popup>, "children"> & VariantProps<typeof tooltipVariants> & {
|
|
629
|
+
/** Element that triggers the tooltip on hover/focus. Must be a single, focusable element. */
|
|
630
|
+
trigger: React.ReactElement<Record<string, unknown>>;
|
|
631
|
+
/** Tooltip content. */
|
|
632
|
+
children: React.ReactNode;
|
|
633
|
+
/** Side (relative to the trigger) where the popup is placed. */
|
|
634
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
635
|
+
/** Pixel gap between trigger and popup. */
|
|
636
|
+
sideOffset?: number;
|
|
637
|
+
};
|
|
638
|
+
declare function TooltipPopup({ trigger, children, theme, size, side, sideOffset, className, ...rest }: TooltipPopupProps): react_jsx_runtime.JSX.Element;
|
|
639
|
+
|
|
640
|
+
type WhimsyCursorProps = {
|
|
641
|
+
/** Rotation angle in degrees applied on hover (negative = left tilt). Defaults to -22. */
|
|
642
|
+
hoverRotateDeg?: number;
|
|
643
|
+
};
|
|
644
|
+
/**
|
|
645
|
+
* Replaces the native cursor with a DOM-rendered SVG that follows the pointer
|
|
646
|
+
* and tilts left with a small spring bounce when hovering interactive elements.
|
|
647
|
+
*
|
|
648
|
+
* Mount once near the root (e.g. inside ThemeProvider). It is a no-op on
|
|
649
|
+
* coarse-pointer devices and respects `prefers-reduced-motion`.
|
|
650
|
+
*/
|
|
651
|
+
declare function WhimsyCursor({ hoverRotateDeg, }?: WhimsyCursorProps): react_jsx_runtime.JSX.Element;
|
|
502
652
|
|
|
503
653
|
type AppTheme = "light" | "dark";
|
|
654
|
+
/**
|
|
655
|
+
* Cursor style variant.
|
|
656
|
+
* - `"default"` — the chunky kit signature pointer (with WhimsyCursor by default)
|
|
657
|
+
* - `"arrow"` — slim classic arrow; WhimsyCursor auto-suppresses to keep the
|
|
658
|
+
* native arrow visible
|
|
659
|
+
*/
|
|
660
|
+
type CursorStyle = "default" | "arrow";
|
|
661
|
+
/**
|
|
662
|
+
* Toggle for the auto-mounted {@link WhimsyCursor}:
|
|
663
|
+
* - `true` (default) mounts it with default options
|
|
664
|
+
* - `false` disables it
|
|
665
|
+
* - an object passes through as `WhimsyCursor` props (e.g. `{ hoverRotateDeg: -10 }`)
|
|
666
|
+
*/
|
|
667
|
+
type WhimsyCursorOption = boolean | WhimsyCursorProps;
|
|
504
668
|
type ThemeContextValue = {
|
|
505
669
|
theme: AppTheme;
|
|
506
670
|
setTheme: (t: AppTheme) => void;
|
|
671
|
+
cursorStyle: CursorStyle;
|
|
672
|
+
setCursorStyle: (c: CursorStyle) => void;
|
|
507
673
|
};
|
|
508
674
|
declare const ThemeContext: React.Context<ThemeContextValue | null>;
|
|
509
|
-
|
|
675
|
+
type ThemeProviderProps = {
|
|
510
676
|
children: React.ReactNode;
|
|
511
|
-
|
|
677
|
+
/**
|
|
678
|
+
* Initial cursor style. `"default"` (chunky kit pointer + WhimsyCursor) or
|
|
679
|
+
* `"arrow"` (slim arrow, no WhimsyCursor). Defaults to `"default"`.
|
|
680
|
+
*
|
|
681
|
+
* Persisted to localStorage under `wvk-cursor-style`; the persisted value
|
|
682
|
+
* wins on next mount. To make this stick across SSR without a flash, mirror
|
|
683
|
+
* the value in your anti-flash inline script.
|
|
684
|
+
*/
|
|
685
|
+
cursorStyle?: CursorStyle;
|
|
686
|
+
/**
|
|
687
|
+
* Auto-mount the {@link WhimsyCursor} alongside the provider so consumers get
|
|
688
|
+
* the kit's signature pointer behaviour with no extra wiring.
|
|
689
|
+
*
|
|
690
|
+
* Defaults to `true`. Pass `false` to disable, or an object to forward props
|
|
691
|
+
* (e.g. `{ hoverRotateDeg: -10 }`). Auto-suppressed when `cursorStyle` is
|
|
692
|
+
* `"arrow"` so the slim native cursor stays visible.
|
|
693
|
+
*/
|
|
694
|
+
whimsyCursor?: WhimsyCursorOption;
|
|
695
|
+
};
|
|
696
|
+
declare function ThemeProvider({ children, cursorStyle: cursorStyleProp, whimsyCursor, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
|
|
512
697
|
declare function useTheme(): ThemeContextValue;
|
|
698
|
+
declare function useCursorStyle(): {
|
|
699
|
+
cursorStyle: CursorStyle;
|
|
700
|
+
setCursorStyle: (c: CursorStyle) => void;
|
|
701
|
+
};
|
|
513
702
|
|
|
514
703
|
declare function ThemeSwitcher(): react_jsx_runtime.JSX.Element | null;
|
|
515
704
|
|
|
@@ -535,12 +724,32 @@ declare const wvkIconSmClass = "size-[length:var(--wvk-icon-sm)] min-h-0 min-w-0
|
|
|
535
724
|
*/
|
|
536
725
|
declare const wvkIconBoxLgClass = "inline-flex size-[length:var(--wvk-icon-lg)] shrink-0 items-center justify-center [&_svg]:size-full [&_svg]:aspect-square";
|
|
537
726
|
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
727
|
+
/** Wrap a list container with this to stagger children in. */
|
|
728
|
+
declare const staggerContainer: {
|
|
729
|
+
hidden: {
|
|
730
|
+
opacity: number;
|
|
731
|
+
};
|
|
732
|
+
show: {
|
|
733
|
+
opacity: number;
|
|
734
|
+
transition: {
|
|
735
|
+
staggerChildren: number;
|
|
736
|
+
};
|
|
737
|
+
};
|
|
738
|
+
};
|
|
739
|
+
/** Pair with `staggerContainer` on each list child. */
|
|
740
|
+
declare const fadeInUp: {
|
|
741
|
+
hidden: {
|
|
742
|
+
opacity: number;
|
|
743
|
+
y: number;
|
|
744
|
+
};
|
|
745
|
+
show: {
|
|
746
|
+
opacity: number;
|
|
747
|
+
y: number;
|
|
748
|
+
transition: {
|
|
749
|
+
duration: number;
|
|
750
|
+
ease: "easeOut";
|
|
751
|
+
};
|
|
752
|
+
};
|
|
753
|
+
};
|
|
545
754
|
|
|
546
|
-
export { Alert, type AppTheme,
|
|
755
|
+
export { Alert, type AppTheme, BottomTabBar, BottomTabBarItem, type BottomTabBarItemProps, type BottomTabBarProps, Button, Checkbox, type CursorStyle, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, type FieldLabelSlotProps, ImagePlaceholder, InfoBar, type InfoBarLeadingIconName, Link, ListItem, LoadingSpinner, type LoadingSpinnerProps, Menu, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuSeparator, MenuTrigger, Meter, Pagination, ProgressBar, Radio, RadioGroup, RadioGroupItem, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlTrigger, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, Slider, SplitButton, StarRating, TAG_LEADING_ICON_NAMES, Tab, TabIndicator, TabList, TabPanel, type TabProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagIconGlyph, TagLeadingIcon, type TagLeadingIconName, TextArea, TextInput, TextInputCalendarIcon, TextInputSearchIcon, ThemeContext, ThemeProvider, type ThemeProviderProps, ThemeSwitcher, ToggleSwitch, Tooltip, TooltipPopup, TooltipProvider, VideoControls, VideoPlaceholder, WhimsyCursor, type WhimsyCursorOption, type WhimsyCursorProps, buttonVariants, checkboxFrameVariants, cn, fadeInUp, hasRenderableFieldLabelText, linkVariants, listItemVariants, placeholderVariants, radioFrameVariants, selectShellVariants, selectShellVariants as selectVariants, splitButtonVariants, staggerContainer, tabListVariants, tagVariants, textAreaFieldVariants, textAreaShellVariants, textInputShellVariants, toggleSwitchVariants, toggleThumbVariants, useCursorStyle, useTheme, wvkIconBoxLgClass, wvkIconLgClass, wvkIconMdClass, wvkIconSmClass };
|