@madebywild/wvk 0.0.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/README.md +84 -0
- package/dist/icons.cjs +4899 -0
- package/dist/icons.cjs.map +1 -0
- package/dist/icons.d.cts +3 -0
- package/dist/icons.d.ts +3 -0
- package/dist/icons.js +4690 -0
- package/dist/icons.js.map +1 -0
- package/dist/index-CQDaCDUc.d.cts +562 -0
- package/dist/index-CQDaCDUc.d.ts +562 -0
- package/dist/index.cjs +7454 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +546 -0
- package/dist/index.d.ts +546 -0
- package/dist/index.js +7356 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +392 -0
- package/package.json +66 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,546 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { SVGProps } from 'react';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { W as WireframeIcons } from './index-CQDaCDUc.cjs';
|
|
7
|
+
import { ClassValue } from 'clsx';
|
|
8
|
+
|
|
9
|
+
declare const Alert: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
10
|
+
variant?: "info" | "warning" | "error" | "success" | null | undefined;
|
|
11
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
12
|
+
title?: string;
|
|
13
|
+
icon?: React.ReactNode;
|
|
14
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
|
|
16
|
+
type BottomTabBarProps = {
|
|
17
|
+
value: string;
|
|
18
|
+
onValueChange?: (value: string) => void;
|
|
19
|
+
/** @deprecated Use `onValueChange` */
|
|
20
|
+
onTabChange?: (id: string) => void;
|
|
21
|
+
className?: string;
|
|
22
|
+
children: React.ReactNode;
|
|
23
|
+
};
|
|
24
|
+
declare const BottomTabBar: React.ForwardRefExoticComponent<BottomTabBarProps & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
type BottomTabBarItemProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
|
|
26
|
+
value: string;
|
|
27
|
+
/** Primary text; omit for icon-only items (or use `children`). */
|
|
28
|
+
label?: string;
|
|
29
|
+
/** Optional glyph; omit for label-only items. */
|
|
30
|
+
icon?: React.ReactNode;
|
|
31
|
+
children?: React.ReactNode;
|
|
32
|
+
};
|
|
33
|
+
declare const BottomTabBarItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
|
|
34
|
+
value: string;
|
|
35
|
+
/** Primary text; omit for icon-only items (or use `children`). */
|
|
36
|
+
label?: string;
|
|
37
|
+
/** Optional glyph; omit for label-only items. */
|
|
38
|
+
icon?: React.ReactNode;
|
|
39
|
+
children?: React.ReactNode;
|
|
40
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
41
|
+
|
|
42
|
+
declare const buttonVariants: (props?: ({
|
|
43
|
+
variant?: "primary" | "secondary" | "primaryLight" | "primaryOutline" | "secondaryOutline" | "ghost" | null | undefined;
|
|
44
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
45
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
46
|
+
declare const Button: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
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> & {
|
|
50
|
+
/**
|
|
51
|
+
* When true, renders the child element as the button (via Radix Slot).
|
|
52
|
+
* `leadingIcon` and `trailingIcon` are ignored when `asChild` is set —
|
|
53
|
+
* the child is rendered as-is without icon wrappers.
|
|
54
|
+
*/
|
|
55
|
+
asChild?: boolean;
|
|
56
|
+
/** Optional icon before the label (e.g. from `../../icons`). Ignored when `asChild` is true. */
|
|
57
|
+
leadingIcon?: React.ReactNode;
|
|
58
|
+
/** Optional icon after the label. Ignored when `asChild` is true. */
|
|
59
|
+
trailingIcon?: React.ReactNode;
|
|
60
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
61
|
+
|
|
62
|
+
declare const checkboxFrameVariants: (props?: ({
|
|
63
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
64
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
65
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onChange" | "value" | "type"> & VariantProps<(props?: ({
|
|
66
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
67
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
68
|
+
checked?: boolean;
|
|
69
|
+
indeterminate?: boolean;
|
|
70
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
71
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
72
|
+
|
|
73
|
+
/** Props mirrored on fields that can show an optional {@link FieldLabel} row above the control. */
|
|
74
|
+
type FieldLabelSlotProps = {
|
|
75
|
+
/**
|
|
76
|
+
* When `true` and `label` is non-empty, renders {@link FieldLabel} above the control.
|
|
77
|
+
* @default false
|
|
78
|
+
*/
|
|
79
|
+
fieldLabel?: boolean;
|
|
80
|
+
/** Visible label text (or node) when `fieldLabel` is on. */
|
|
81
|
+
label?: React.ReactNode;
|
|
82
|
+
/** Shows a required asterisk after the label. Mutually exclusive with `labelOptional`. */
|
|
83
|
+
labelRequired?: boolean;
|
|
84
|
+
/** Appends ` (optional)` after the label. Mutually exclusive with `labelRequired`. */
|
|
85
|
+
labelOptional?: boolean;
|
|
86
|
+
/** Optional trailing icon (e.g. custom help). Ignored when `labelInfo` is used unless you pass `labelIcon` explicitly. */
|
|
87
|
+
labelIcon?: React.ReactNode;
|
|
88
|
+
/**
|
|
89
|
+
* When `labelIcon` is not set, shows the kit info glyph with this string as tooltip and accessible name.
|
|
90
|
+
*/
|
|
91
|
+
labelInfo?: string;
|
|
92
|
+
};
|
|
93
|
+
type FieldLabelProps = {
|
|
94
|
+
id?: string;
|
|
95
|
+
htmlFor?: string;
|
|
96
|
+
children: React.ReactNode;
|
|
97
|
+
/** Mutually exclusive with `optional` (if both are set, only the asterisk is shown). */
|
|
98
|
+
required?: boolean;
|
|
99
|
+
/** Mutually exclusive with `required` (ignored when `required` is true). */
|
|
100
|
+
optional?: boolean;
|
|
101
|
+
icon?: React.ReactNode;
|
|
102
|
+
/**
|
|
103
|
+
* When `icon` is omitted, renders the default info button with this tooltip / `aria-label`.
|
|
104
|
+
*/
|
|
105
|
+
info?: string;
|
|
106
|
+
className?: string;
|
|
107
|
+
};
|
|
108
|
+
declare function hasRenderableFieldLabelText(label: unknown): boolean;
|
|
109
|
+
/**
|
|
110
|
+
* Standalone field label: Body Normal, foreground secondary, optional required asterisk,
|
|
111
|
+
* optional “(optional)” suffix, optional trailing icon (or `info` string for default info glyph).
|
|
112
|
+
*/
|
|
113
|
+
declare function FieldLabel({ id, htmlFor, children, required, optional, icon, info, className, }: FieldLabelProps): react_jsx_runtime.JSX.Element;
|
|
114
|
+
type FieldGroupProps = FieldLabelSlotProps & {
|
|
115
|
+
className?: string;
|
|
116
|
+
children: React.ReactNode;
|
|
117
|
+
};
|
|
118
|
+
/**
|
|
119
|
+
* Groups checkbox/radio/toggle (or mixed) children with an optional {@link FieldLabel}.
|
|
120
|
+
* Sets `role="group"` and `aria-labelledby` when the label is shown.
|
|
121
|
+
*/
|
|
122
|
+
declare function FieldGroup({ fieldLabel, label, labelRequired, labelOptional, labelIcon, labelInfo, className, children, }: FieldGroupProps): react_jsx_runtime.JSX.Element;
|
|
123
|
+
|
|
124
|
+
type TagLeadingIconName = keyof typeof WireframeIcons;
|
|
125
|
+
/** Sorted export names from `../icons` for pickers and docs. */
|
|
126
|
+
declare const TAG_LEADING_ICON_NAMES: ("Accessibility" | "Accessibility2" | "Ai" | "Android" | "Apple" | "ArrowBack" | "ArrowDown" | "ArrowForward" | "ArrowLeft" | "ArrowLeftRight" | "ArrowRedo" | "ArrowRight" | "ArrowUndo" | "ArrowUp" | "ArrowUpDown" | "ArrowUpLeft" | "ArrowUpRight" | "Atom" | "Attachment" | "BarChart" | "Battery" | "Bell" | "Book" | "Bookmark" | "BookmarkActive" | "Calendar" | "Camera" | "CaretDown" | "CaretLeft" | "CaretRight" | "CaretUp" | "CaretUpDown" | "Cart" | "Cell" | "ChatBubble" | "Checkmark" | "ChevronDown" | "ChevronLeft" | "ChevronRight" | "ChevronUp" | "ChevronUpDown" | "Clipboard" | "Clock" | "Close" | "Cloud" | "CloudySun" | "Code" | "Comparison01" | "Comparison02" | "Compass" | "Create" | "CreditCard" | "CurrencyDollarSign" | "CurrencyEuroSign" | "Database" | "Desktop" | "Download" | "DragIndicator" | "Dribbble" | "Edit" | "Error" | "Execute" | "Exit" | "Expand" | "Eye" | "EyeActive" | "Facebook" | "File" | "Filter01" | "Filter02" | "Flag" | "Flash" | "FloatingWheel" | "Folder" | "Food" | "Globe" | "Google" | "Gps" | "Grid" | "Hashtag" | "Headphones" | "Heart" | "HeartActive" | "Home" | "Hourglass" | "Image" | "Inbox" | "Info" | "Instagram" | "Interface" | "InterfaceFilled" | "Language" | "Layers" | "LayoutAlign1Left" | "LayoutAlign2CenterHorizontal" | "LayoutAlign3Right" | "LayoutAlign4Top" | "LayoutAlign5CenterVertical" | "LayoutAlign6Bottom" | "LetterStamp" | "LightBulb" | "Link" | "Linkedin" | "List" | "Loading" | "Lock" | "LockOpen" | "MagicWand" | "MagnifyingGlass" | "Mail" | "Map" | "Maximize1" | "Maximize2" | "Menu" | "Minimize" | "Minus" | "Mobile" | "Mobile2" | "Mobile3" | "Monitoring" | "Moon" | "MoreHorizontal" | "MoreVertical" | "Music" | "Package" | "Pause" | "Phone" | "PieChart" | "Pin" | "Pinterest" | "Play" | "Plus" | "Puzzle" | "Question" | "Rain" | "Receipt" | "Refresh" | "Reply" | "Robot" | "Rocket" | "ScanCode" | "Settings" | "Share" | "Shuffle" | "SmileyHappy" | "SmileyNeutral" | "SmileySad" | "Soundcloud" | "Spotify" | "Star" | "StarActive" | "Stop" | "Stopwatch" | "Sun" | "Tag" | "Target" | "TextAlignCenter" | "TextAlignLeft" | "TextAlignRight" | "ThumbsDown" | "ThumbsUp" | "Tiktok" | "TrashBin" | "Twitter" | "User" | "Video" | "VideoCamera" | "Voice" | "VolumeDown" | "VolumeOff" | "VolumeUp" | "Warning" | "Watch" | "Wayfinding" | "Wc" | "Whatsapp" | "Wifi" | "Window" | "WorkBag" | "XTwitter" | "Youtube" | "ZoomMinus" | "ZoomPlus")[];
|
|
127
|
+
type TagLeadingIconProps = {
|
|
128
|
+
name: TagLeadingIconName;
|
|
129
|
+
} & SVGProps<SVGSVGElement>;
|
|
130
|
+
/** Renders a kit icon by barrel export name (for Tag and demos). */
|
|
131
|
+
declare function TagLeadingIcon({ name, ...props }: TagLeadingIconProps): react_jsx_runtime.JSX.Element | null;
|
|
132
|
+
|
|
133
|
+
/** Any export name from `../../icons` (same set as Tag `leadingIcon`). */
|
|
134
|
+
type InfoBarLeadingIconName = TagLeadingIconName;
|
|
135
|
+
declare const InfoBar: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "title"> & {
|
|
136
|
+
title?: string;
|
|
137
|
+
/**
|
|
138
|
+
* Custom leading glyph. When set, overrides `leadingIcon`.
|
|
139
|
+
*/
|
|
140
|
+
icon?: React.ReactNode;
|
|
141
|
+
/**
|
|
142
|
+
* Kit icon by `../../icons` export name. Ignored when `icon` is set.
|
|
143
|
+
* Defaults to `Info`.
|
|
144
|
+
*/
|
|
145
|
+
leadingIcon?: InfoBarLeadingIconName;
|
|
146
|
+
/** When false, hides the leading info icon (Figma: icon left). Default true. */
|
|
147
|
+
showIcon?: boolean;
|
|
148
|
+
/** Shows a trailing close control (Figma: closable). */
|
|
149
|
+
closable?: boolean;
|
|
150
|
+
/**
|
|
151
|
+
* Same as `closable`.
|
|
152
|
+
* @deprecated Use `closable` instead.
|
|
153
|
+
*/
|
|
154
|
+
dismissible?: boolean;
|
|
155
|
+
onClose?: () => void;
|
|
156
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
157
|
+
|
|
158
|
+
declare const linkVariants: (props?: ({
|
|
159
|
+
theme?: "dark" | "light" | "medium" | null | undefined;
|
|
160
|
+
size?: "body" | "caption" | null | undefined;
|
|
161
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
162
|
+
declare const Link: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & VariantProps<(props?: ({
|
|
163
|
+
theme?: "dark" | "light" | "medium" | null | undefined;
|
|
164
|
+
size?: "body" | "caption" | null | undefined;
|
|
165
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLAnchorElement>>;
|
|
166
|
+
|
|
167
|
+
declare const listItemVariants: (props?: ({
|
|
168
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
169
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
170
|
+
declare const ListItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & VariantProps<(props?: ({
|
|
171
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
172
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
173
|
+
type?: "plain" | "checkbox" | "radio" | "toggle";
|
|
174
|
+
label: string;
|
|
175
|
+
checked?: boolean;
|
|
176
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
177
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
178
|
+
|
|
179
|
+
declare const loadingSpinnerVariants: (props?: ({
|
|
180
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
181
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
182
|
+
type LoadingSpinnerProps = Omit<React.ComponentPropsWithoutRef<"div">, "role" | "aria-live"> & VariantProps<typeof loadingSpinnerVariants> & {
|
|
183
|
+
/** Accessible name for the activity indicator. */
|
|
184
|
+
"aria-label"?: string;
|
|
185
|
+
};
|
|
186
|
+
/**
|
|
187
|
+
* Circular CSS loader (rotating clip-path ring). Ring uses **`--wvk-foreground-primary`** via `currentColor`.
|
|
188
|
+
* Sizes map to **`sm` / `md` / `lg`** presets in `styles.css` (`@layer utilities` `.wvk-loading-spinner--*`).
|
|
189
|
+
*/
|
|
190
|
+
declare const LoadingSpinner: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role" | "aria-live"> & VariantProps<(props?: ({
|
|
191
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
192
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
193
|
+
/** Accessible name for the activity indicator. */
|
|
194
|
+
"aria-label"?: string;
|
|
195
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
196
|
+
|
|
197
|
+
declare const placeholderVariants: (props?: ({
|
|
198
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
199
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
200
|
+
declare const ImagePlaceholder: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
201
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
202
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
203
|
+
declare const VideoPlaceholder: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
204
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
205
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
206
|
+
interface VideoControlsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
207
|
+
progress?: number;
|
|
208
|
+
}
|
|
209
|
+
declare const VideoControls: React.ForwardRefExoticComponent<VideoControlsProps & React.RefAttributes<HTMLDivElement>>;
|
|
210
|
+
|
|
211
|
+
declare const Pagination: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & VariantProps<(props?: ({
|
|
212
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
213
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
214
|
+
pages: number;
|
|
215
|
+
current: number;
|
|
216
|
+
onPageChange?: (page: number) => void;
|
|
217
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
218
|
+
|
|
219
|
+
declare const ProgressBar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
220
|
+
value?: number;
|
|
221
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
222
|
+
|
|
223
|
+
declare const radioFrameVariants: (props?: ({
|
|
224
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
225
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
226
|
+
declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onChange" | "value" | "type"> & VariantProps<(props?: ({
|
|
227
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
228
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
229
|
+
checked?: boolean;
|
|
230
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
231
|
+
/** Mirrored to `data-value` for grouping/lookup outside the component. */
|
|
232
|
+
value?: string;
|
|
233
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
234
|
+
|
|
235
|
+
declare const controlVariants: (props?: ({
|
|
236
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
237
|
+
widthMode?: "fill" | "auto" | null | undefined;
|
|
238
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
239
|
+
type SegmentedControlProps = Omit<VariantProps<typeof controlVariants>, "widthMode"> & FieldLabelSlotProps & {
|
|
240
|
+
/** When true, control and segments shrink to content instead of stretching to the container width. */
|
|
241
|
+
autoWidth?: boolean;
|
|
242
|
+
value: string;
|
|
243
|
+
/** @deprecated Use `onValueChange` instead. Provided for `<select>`-like API compatibility. */
|
|
244
|
+
onChange?: (value: string) => void;
|
|
245
|
+
/** Preferred change handler. Called whenever the selected segment changes. */
|
|
246
|
+
onValueChange?: (value: string) => void;
|
|
247
|
+
className?: string;
|
|
248
|
+
/** Passed to the root element (e.g. for `role="tablist"` labeling). */
|
|
249
|
+
"aria-label"?: string;
|
|
250
|
+
children: React.ReactNode;
|
|
251
|
+
};
|
|
252
|
+
declare const SegmentedControl: React.ForwardRefExoticComponent<Omit<VariantProps<(props?: ({
|
|
253
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
254
|
+
widthMode?: "fill" | "auto" | null | undefined;
|
|
255
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string>, "widthMode"> & FieldLabelSlotProps & {
|
|
256
|
+
/** When true, control and segments shrink to content instead of stretching to the container width. */
|
|
257
|
+
autoWidth?: boolean;
|
|
258
|
+
value: string;
|
|
259
|
+
/** @deprecated Use `onValueChange` instead. Provided for `<select>`-like API compatibility. */
|
|
260
|
+
onChange?: (value: string) => void;
|
|
261
|
+
/** Preferred change handler. Called whenever the selected segment changes. */
|
|
262
|
+
onValueChange?: (value: string) => void;
|
|
263
|
+
className?: string;
|
|
264
|
+
/** Passed to the root element (e.g. for `role="tablist"` labeling). */
|
|
265
|
+
"aria-label"?: string;
|
|
266
|
+
children: React.ReactNode;
|
|
267
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
268
|
+
type SegmentedControlItemProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
|
|
269
|
+
value: string;
|
|
270
|
+
/** Visible text; omit for icon-only segments (do not pass an empty string). */
|
|
271
|
+
label?: string;
|
|
272
|
+
/** Optional glyph; omit for label-only segments. With `label`, defaults to trailing (Figma). */
|
|
273
|
+
icon?: React.ReactNode;
|
|
274
|
+
iconPlacement?: "leading" | "trailing";
|
|
275
|
+
};
|
|
276
|
+
declare const SegmentedControlItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
|
|
277
|
+
value: string;
|
|
278
|
+
/** Visible text; omit for icon-only segments (do not pass an empty string). */
|
|
279
|
+
label?: string;
|
|
280
|
+
/** Optional glyph; omit for label-only segments. With `label`, defaults to trailing (Figma). */
|
|
281
|
+
icon?: React.ReactNode;
|
|
282
|
+
iconPlacement?: "leading" | "trailing";
|
|
283
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
284
|
+
/** Alias for {@link SegmentedControlItem} (same pattern as `TabsTrigger`). */
|
|
285
|
+
declare const SegmentedControlTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
|
|
286
|
+
value: string;
|
|
287
|
+
/** Visible text; omit for icon-only segments (do not pass an empty string). */
|
|
288
|
+
label?: string;
|
|
289
|
+
/** Optional glyph; omit for label-only segments. With `label`, defaults to trailing (Figma). */
|
|
290
|
+
icon?: React.ReactNode;
|
|
291
|
+
iconPlacement?: "leading" | "trailing";
|
|
292
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
293
|
+
|
|
294
|
+
/**
|
|
295
|
+
* Idle stroke via box-shadow (no layout shift). Active/focused = 2px input focus ring.
|
|
296
|
+
* Native <select> focus is mirrored with onFocus/onBlur for reliable shell styling.
|
|
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.
|
|
300
|
+
*/
|
|
301
|
+
declare const selectShellVariants: (props?: ({
|
|
302
|
+
inputStyle?: "border" | "solid" | null | undefined;
|
|
303
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
304
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
305
|
+
declare const selectFieldVariants: (props?: ({
|
|
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 & {
|
|
312
|
+
placeholder?: string;
|
|
313
|
+
} & React.RefAttributes<HTMLSelectElement>>;
|
|
314
|
+
|
|
315
|
+
type SliderValue = number | [number, number];
|
|
316
|
+
declare const Slider: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "defaultValue" | "onChange"> & {
|
|
317
|
+
value?: SliderValue;
|
|
318
|
+
onChange?: (value: SliderValue) => void;
|
|
319
|
+
min?: number;
|
|
320
|
+
max?: number;
|
|
321
|
+
disabled?: boolean;
|
|
322
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
323
|
+
|
|
324
|
+
declare const splitButtonVariants: (props?: ({
|
|
325
|
+
variant?: "primary" | "secondary" | "primaryOutline" | "secondaryOutline" | null | undefined;
|
|
326
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
327
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
328
|
+
declare const SplitButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
329
|
+
variant?: "primary" | "secondary" | "primaryOutline" | "secondaryOutline" | null | undefined;
|
|
330
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
331
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
332
|
+
onMenuClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
333
|
+
/** Forwarded to the outer wrapper element. */
|
|
334
|
+
wrapperProps?: React.ComponentPropsWithoutRef<"div">;
|
|
335
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
336
|
+
|
|
337
|
+
type StarRatingProps = {
|
|
338
|
+
value?: number;
|
|
339
|
+
onChange?: (value: number) => void;
|
|
340
|
+
readonly?: boolean;
|
|
341
|
+
className?: string;
|
|
342
|
+
};
|
|
343
|
+
declare const StarRating: React.ForwardRefExoticComponent<StarRatingProps & React.RefAttributes<HTMLDivElement>>;
|
|
344
|
+
|
|
345
|
+
declare const tabListVariants: (props?: ({
|
|
346
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
347
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
348
|
+
type TabsProps = {
|
|
349
|
+
value?: string;
|
|
350
|
+
defaultValue?: string;
|
|
351
|
+
onValueChange?: (value: string) => void;
|
|
352
|
+
children: React.ReactNode;
|
|
353
|
+
className?: string;
|
|
354
|
+
};
|
|
355
|
+
declare function Tabs({ value: valueProp, defaultValue, onValueChange, children, className, }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
356
|
+
declare const TabList: React.ForwardRefExoticComponent<VariantProps<(props?: ({
|
|
357
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
358
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
359
|
+
/** When true, each tab sizes to its label/icon; the list row remains full width. */
|
|
360
|
+
autoWidth?: boolean;
|
|
361
|
+
children: React.ReactNode;
|
|
362
|
+
className?: string;
|
|
363
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
364
|
+
type TabProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
|
|
365
|
+
/** Segment id; required when using controlled `Tabs`. */
|
|
366
|
+
value?: string;
|
|
367
|
+
/** Optional; use `children` for text if you prefer. */
|
|
368
|
+
label?: string;
|
|
369
|
+
/** Optional; omit for label-only triggers. */
|
|
370
|
+
icon?: React.ReactNode;
|
|
371
|
+
iconPlacement?: "leading" | "trailing";
|
|
372
|
+
/** When not using `Tabs` context, marks the selected tab. */
|
|
373
|
+
active?: boolean;
|
|
374
|
+
children?: React.ReactNode;
|
|
375
|
+
};
|
|
376
|
+
declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
|
|
377
|
+
/** Segment id; required when using controlled `Tabs`. */
|
|
378
|
+
value?: string;
|
|
379
|
+
/** Optional; use `children` for text if you prefer. */
|
|
380
|
+
label?: string;
|
|
381
|
+
/** Optional; omit for label-only triggers. */
|
|
382
|
+
icon?: React.ReactNode;
|
|
383
|
+
iconPlacement?: "leading" | "trailing";
|
|
384
|
+
/** When not using `Tabs` context, marks the selected tab. */
|
|
385
|
+
active?: boolean;
|
|
386
|
+
children?: React.ReactNode;
|
|
387
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
388
|
+
/** Same component as {@link TabList}; matches common Radix-style naming. */
|
|
389
|
+
declare const TabsList: React.ForwardRefExoticComponent<VariantProps<(props?: ({
|
|
390
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
391
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
392
|
+
/** When true, each tab sizes to its label/icon; the list row remains full width. */
|
|
393
|
+
autoWidth?: boolean;
|
|
394
|
+
children: React.ReactNode;
|
|
395
|
+
className?: string;
|
|
396
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
397
|
+
/** Same component as {@link Tab}; matches common Radix-style naming. */
|
|
398
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
|
|
399
|
+
/** Segment id; required when using controlled `Tabs`. */
|
|
400
|
+
value?: string;
|
|
401
|
+
/** Optional; use `children` for text if you prefer. */
|
|
402
|
+
label?: string;
|
|
403
|
+
/** Optional; omit for label-only triggers. */
|
|
404
|
+
icon?: React.ReactNode;
|
|
405
|
+
iconPlacement?: "leading" | "trailing";
|
|
406
|
+
/** When not using `Tabs` context, marks the selected tab. */
|
|
407
|
+
active?: boolean;
|
|
408
|
+
children?: React.ReactNode;
|
|
409
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
410
|
+
|
|
411
|
+
/** Default tag / label glyph for the optional custom `icon` slot (uses `currentColor`). */
|
|
412
|
+
declare function TagIconGlyph(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
|
|
413
|
+
declare const tagVariants: (props?: ({
|
|
414
|
+
tagStyle?: "border" | "solid" | null | undefined;
|
|
415
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
416
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
417
|
+
declare const Tag: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
|
|
418
|
+
tagStyle?: "border" | "solid" | null | undefined;
|
|
419
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
420
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
421
|
+
/** Chip text; clamped to 3 lines. Full string on hover via `title` (see `labelTooltip`). */
|
|
422
|
+
label?: string;
|
|
423
|
+
/** Overrides native `title` on the label region (tooltip). Defaults to `label` when `label` is set. */
|
|
424
|
+
labelTooltip?: string;
|
|
425
|
+
/** When true, shows a leading icon from `leadingIcon` or custom `icon`, else the default tag glyph. */
|
|
426
|
+
showLeadingIcon?: boolean;
|
|
427
|
+
/** Kit icon export name (from `TAG_LEADING_ICON_NAMES`). Used when `showLeadingIcon` is true. */
|
|
428
|
+
leadingIcon?: TagLeadingIconName;
|
|
429
|
+
/** Custom leading node when `showLeadingIcon` is true and `leadingIcon` is omitted. */
|
|
430
|
+
icon?: React.ReactNode;
|
|
431
|
+
onClose?: () => void;
|
|
432
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
433
|
+
|
|
434
|
+
/**
|
|
435
|
+
* Stroke via box-shadow: 1px rest → 2px focus, no layout shift (same as TextInput / Select).
|
|
436
|
+
* Native resize grip is hidden (`resize-none`); the corner glyph is the drag handle (Figma).
|
|
437
|
+
*/
|
|
438
|
+
declare const textAreaShellVariants: (props?: ({
|
|
439
|
+
inputStyle?: "border" | "solid" | null | undefined;
|
|
440
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
441
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
442
|
+
declare const textAreaFieldVariants: (props?: ({
|
|
443
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
444
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
445
|
+
declare const TextArea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> & VariantProps<(props?: ({
|
|
446
|
+
inputStyle?: "border" | "solid" | null | undefined;
|
|
447
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
448
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & FieldLabelSlotProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
449
|
+
|
|
450
|
+
/**
|
|
451
|
+
* Stroke via box-shadow (not border width) so 1px → 2px focus has zero layout shift.
|
|
452
|
+
* Border variant: 1px rest, 2px focus ring when focused. Solid: no stroke until 2px focus.
|
|
453
|
+
*/
|
|
454
|
+
declare const textInputShellVariants: (props?: ({
|
|
455
|
+
inputStyle?: "border" | "solid" | null | undefined;
|
|
456
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
457
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
458
|
+
/** Optional search glyph; pass via `leadingIcon={<TextInputSearchIcon />}`. */
|
|
459
|
+
declare function TextInputSearchIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
|
|
460
|
+
/** Optional calendar-style glyph for trailing slot demos. */
|
|
461
|
+
declare function TextInputCalendarIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
|
|
462
|
+
declare const TextInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
|
|
463
|
+
inputStyle?: "border" | "solid" | null | undefined;
|
|
464
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
465
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & FieldLabelSlotProps & {
|
|
466
|
+
/** Pass any icon node, e.g. `<TextInputSearchIcon />` or your own SVG. */
|
|
467
|
+
leadingIcon?: React.ReactNode;
|
|
468
|
+
/** Pass any icon node for the trailing slot (after clear; sits next to optional action). */
|
|
469
|
+
trailingIcon?: React.ReactNode;
|
|
470
|
+
clearable?: boolean;
|
|
471
|
+
onClear?: () => void;
|
|
472
|
+
/**
|
|
473
|
+
* Trailing action (e.g. link). Rendered after clear + trailing icon, separated by a divider.
|
|
474
|
+
*/
|
|
475
|
+
action?: React.ReactNode;
|
|
476
|
+
} & React.RefAttributes<HTMLInputElement>>;
|
|
477
|
+
|
|
478
|
+
/**
|
|
479
|
+
* Thumb position uses `left` + symmetric `--toggle-pad` so inset matches at both ends
|
|
480
|
+
* and `left` can animate (unlike `margin-left: auto`).
|
|
481
|
+
*/
|
|
482
|
+
declare const toggleSwitchVariants: (props?: ({
|
|
483
|
+
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
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
489
|
+
declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "onChange" | "value" | "type"> & Omit<VariantProps<(props?: ({
|
|
490
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
491
|
+
checked?: boolean | null | undefined;
|
|
492
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string>, "checked"> & {
|
|
493
|
+
checked?: boolean;
|
|
494
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
495
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
496
|
+
|
|
497
|
+
declare const Tooltip: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
498
|
+
theme?: "dark" | "light" | null | undefined;
|
|
499
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
500
|
+
direction?: "center" | "left" | "right" | null | undefined;
|
|
501
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
|
|
502
|
+
|
|
503
|
+
type AppTheme = "light" | "dark";
|
|
504
|
+
type ThemeContextValue = {
|
|
505
|
+
theme: AppTheme;
|
|
506
|
+
setTheme: (t: AppTheme) => void;
|
|
507
|
+
};
|
|
508
|
+
declare const ThemeContext: React.Context<ThemeContextValue | null>;
|
|
509
|
+
declare function ThemeProvider({ children }: {
|
|
510
|
+
children: React.ReactNode;
|
|
511
|
+
}): react_jsx_runtime.JSX.Element;
|
|
512
|
+
declare function useTheme(): ThemeContextValue;
|
|
513
|
+
|
|
514
|
+
declare function ThemeSwitcher(): react_jsx_runtime.JSX.Element | null;
|
|
515
|
+
|
|
516
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
517
|
+
|
|
518
|
+
/**
|
|
519
|
+
* Shared wireframe icon sizing — keeps glyphs square and aligned to kit tokens
|
|
520
|
+
* (`--wvk-icon-*` in `@madebywild/wvk/styles.css`).
|
|
521
|
+
*
|
|
522
|
+
* Icons are pre-compiled with SVGR (see `src/scripts/build-icons.mjs`):
|
|
523
|
+
* intrinsic width/height are stripped and the root `<svg>` gets
|
|
524
|
+
* `width`/`height: 100%` + `preserveAspectRatio` so they fill these boxes
|
|
525
|
+
* correctly at any component size.
|
|
526
|
+
*/
|
|
527
|
+
/** Default 20×20 — matches `--wvk-icon-lg` */
|
|
528
|
+
declare const wvkIconLgClass = "size-[length:var(--wvk-icon-lg)] min-h-0 min-w-0 shrink-0 aspect-square";
|
|
529
|
+
/** 16×16 — `--wvk-icon-md` */
|
|
530
|
+
declare const wvkIconMdClass = "size-[length:var(--wvk-icon-md)] min-h-0 min-w-0 shrink-0 aspect-square";
|
|
531
|
+
/** 14×14 — `--wvk-icon-sm` */
|
|
532
|
+
declare const wvkIconSmClass = "size-[length:var(--wvk-icon-sm)] min-h-0 min-w-0 shrink-0 aspect-square";
|
|
533
|
+
/**
|
|
534
|
+
* Box for arbitrary icon nodes so the inner SVG fills a square slot (20×20).
|
|
535
|
+
*/
|
|
536
|
+
declare const wvkIconBoxLgClass = "inline-flex size-[length:var(--wvk-icon-lg)] shrink-0 items-center justify-center [&_svg]:size-full [&_svg]:aspect-square";
|
|
537
|
+
|
|
538
|
+
declare const BUTTON_DECORATIVE_ICON_NAMES: readonly ["none", "plus", "chevronRight", "home", "search", "user", "settings"];
|
|
539
|
+
type ButtonDecorativeIconName = (typeof BUTTON_DECORATIVE_ICON_NAMES)[number];
|
|
540
|
+
declare function ButtonDecorativeIconGlyph({ name, size, className, }: {
|
|
541
|
+
name: Exclude<ButtonDecorativeIconName, "none">;
|
|
542
|
+
size: "sm" | "md" | "lg";
|
|
543
|
+
className?: string;
|
|
544
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
545
|
+
|
|
546
|
+
export { Alert, type AppTheme, BUTTON_DECORATIVE_ICON_NAMES, BottomTabBar, BottomTabBarItem, type BottomTabBarItemProps, type BottomTabBarProps, Button, ButtonDecorativeIconGlyph, type ButtonDecorativeIconName, Checkbox, FieldGroup, type FieldGroupProps, FieldLabel, type FieldLabelProps, type FieldLabelSlotProps, ImagePlaceholder, InfoBar, type InfoBarLeadingIconName, Link, ListItem, LoadingSpinner, type LoadingSpinnerProps, Pagination, ProgressBar, Radio, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlTrigger, Select, Slider, SplitButton, StarRating, TAG_LEADING_ICON_NAMES, Tab, TabList, type TabProps, Tabs, TabsList, TabsTrigger, Tag, TagIconGlyph, TagLeadingIcon, type TagLeadingIconName, TextArea, TextInput, TextInputCalendarIcon, TextInputSearchIcon, ThemeContext, ThemeProvider, ThemeSwitcher, ToggleSwitch, Tooltip, VideoControls, VideoPlaceholder, buttonVariants, checkboxFrameVariants, cn, hasRenderableFieldLabelText, linkVariants, listItemVariants, placeholderVariants, radioFrameVariants, selectFieldVariants, selectShellVariants, selectShellVariants as selectVariants, splitButtonVariants, tabListVariants, tagVariants, textAreaFieldVariants, textAreaShellVariants, textInputShellVariants, toggleSwitchVariants, toggleThumbVariants, useTheme, wvkIconBoxLgClass, wvkIconLgClass, wvkIconMdClass, wvkIconSmClass };
|