@texturehq/edges 0.0.6 → 0.0.7
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/index.cjs +3 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +740 -0
- package/dist/index.d.ts +740 -0
- package/dist/index.js +3 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +2901 -0
- package/dist/texture_logo_brand-CQ4VWZWF.svg +20 -0
- package/dist/texture_logo_brand_wordmark-TQMXZX6P.svg +20 -0
- package/dist/texture_logo_dark-V75XEH2I.svg +20 -0
- package/dist/texture_logo_dark_wordmark-CTFWT525.svg +20 -0
- package/dist/texture_logo_white-MPY7T26X.svg +13 -0
- package/dist/texture_logo_white_wordmark-BAPLTTO6.svg +20 -0
- package/dist/theme.css +1017 -0
- package/package.json +1 -1
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,740 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonProps as ButtonProps$1, TextProps, TextFieldProps as TextFieldProps$1, ValidationResult, ListBoxProps as ListBoxProps$1, SelectProps as SelectProps$1, Key, NumberFieldProps as NumberFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, DateValue, DateFieldProps as DateFieldProps$1, TooltipProps as TooltipProps$1, PopoverProps as PopoverProps$1, SwitchProps as SwitchProps$1, ProgressBarProps as ProgressBarProps$1, RangeCalendarProps as RangeCalendarProps$1, ListBoxItemProps, FormProps, DateRangePickerProps as DateRangePickerProps$1, DialogProps, CalendarProps as CalendarProps$1, CheckboxProps as CheckboxProps$1, CheckboxRenderProps } from 'react-aria-components';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
import React__default, { ComponentProps, ReactNode } from 'react';
|
|
5
|
+
import * as _phosphor_icons_react from '@phosphor-icons/react';
|
|
6
|
+
|
|
7
|
+
declare const iconMapping: {
|
|
8
|
+
readonly AppWindow: _phosphor_icons_react.Icon;
|
|
9
|
+
readonly ArrowCircleUp: _phosphor_icons_react.Icon;
|
|
10
|
+
readonly ArrowDown: _phosphor_icons_react.Icon;
|
|
11
|
+
readonly ArrowLeft: _phosphor_icons_react.Icon;
|
|
12
|
+
readonly ArrowLineLeft: _phosphor_icons_react.Icon;
|
|
13
|
+
readonly ArrowRight: _phosphor_icons_react.Icon;
|
|
14
|
+
readonly ArrowSquareOut: _phosphor_icons_react.Icon;
|
|
15
|
+
readonly ArrowUp: _phosphor_icons_react.Icon;
|
|
16
|
+
readonly ArrowsClockwise: _phosphor_icons_react.Icon;
|
|
17
|
+
readonly BatteryCharging: _phosphor_icons_react.Icon;
|
|
18
|
+
readonly BatteryEmpty: _phosphor_icons_react.Icon;
|
|
19
|
+
readonly BatteryFull: _phosphor_icons_react.Icon;
|
|
20
|
+
readonly BatteryHigh: _phosphor_icons_react.Icon;
|
|
21
|
+
readonly BatteryLow: _phosphor_icons_react.Icon;
|
|
22
|
+
readonly BatteryMedium: _phosphor_icons_react.Icon;
|
|
23
|
+
readonly BatteryWarning: _phosphor_icons_react.Icon;
|
|
24
|
+
readonly BookOpen: _phosphor_icons_react.Icon;
|
|
25
|
+
readonly BookmarkSimple: _phosphor_icons_react.Icon;
|
|
26
|
+
readonly BracketsCurly: _phosphor_icons_react.Icon;
|
|
27
|
+
readonly Buildings: _phosphor_icons_react.Icon;
|
|
28
|
+
readonly CalendarBlank: _phosphor_icons_react.Icon;
|
|
29
|
+
readonly CaretDown: _phosphor_icons_react.Icon;
|
|
30
|
+
readonly CaretLeft: _phosphor_icons_react.Icon;
|
|
31
|
+
readonly CaretRight: _phosphor_icons_react.Icon;
|
|
32
|
+
readonly CaretUp: _phosphor_icons_react.Icon;
|
|
33
|
+
readonly CarSimple: _phosphor_icons_react.Icon;
|
|
34
|
+
readonly ChargingStation: _phosphor_icons_react.Icon;
|
|
35
|
+
readonly ChartBar: _phosphor_icons_react.Icon;
|
|
36
|
+
readonly ChartLine: _phosphor_icons_react.Icon;
|
|
37
|
+
readonly ChartLineUp: _phosphor_icons_react.Icon;
|
|
38
|
+
readonly Check: _phosphor_icons_react.Icon;
|
|
39
|
+
readonly CheckCircle: _phosphor_icons_react.Icon;
|
|
40
|
+
readonly CheckSquare: _phosphor_icons_react.Icon;
|
|
41
|
+
readonly Circle: _phosphor_icons_react.Icon;
|
|
42
|
+
readonly CircleDashed: _phosphor_icons_react.Icon;
|
|
43
|
+
readonly CircleNotch: _phosphor_icons_react.Icon;
|
|
44
|
+
readonly ClipboardText: _phosphor_icons_react.Icon;
|
|
45
|
+
readonly ClockCountdown: _phosphor_icons_react.Icon;
|
|
46
|
+
readonly Cloud: _phosphor_icons_react.Icon;
|
|
47
|
+
readonly CloudFog: _phosphor_icons_react.Icon;
|
|
48
|
+
readonly CloudLightning: _phosphor_icons_react.Icon;
|
|
49
|
+
readonly CloudRain: _phosphor_icons_react.Icon;
|
|
50
|
+
readonly CloudSnow: _phosphor_icons_react.Icon;
|
|
51
|
+
readonly CloudSun: _phosphor_icons_react.Icon;
|
|
52
|
+
readonly Code: _phosphor_icons_react.Icon;
|
|
53
|
+
readonly Columns: _phosphor_icons_react.Icon;
|
|
54
|
+
readonly Copy: _phosphor_icons_react.Icon;
|
|
55
|
+
readonly Cursor: _phosphor_icons_react.Icon;
|
|
56
|
+
readonly DotsSix: _phosphor_icons_react.Icon;
|
|
57
|
+
readonly DotsThree: _phosphor_icons_react.Icon;
|
|
58
|
+
readonly DownloadSimple: _phosphor_icons_react.Icon;
|
|
59
|
+
readonly EnvelopeSimple: _phosphor_icons_react.Icon;
|
|
60
|
+
readonly Eye: _phosphor_icons_react.Icon;
|
|
61
|
+
readonly EyeClosed: _phosphor_icons_react.Icon;
|
|
62
|
+
readonly EyeSlash: _phosphor_icons_react.Icon;
|
|
63
|
+
readonly Export: _phosphor_icons_react.Icon;
|
|
64
|
+
readonly FireSimple: _phosphor_icons_react.Icon;
|
|
65
|
+
readonly Flag: _phosphor_icons_react.Icon;
|
|
66
|
+
readonly GearSix: _phosphor_icons_react.Icon;
|
|
67
|
+
readonly HandPointing: _phosphor_icons_react.Icon;
|
|
68
|
+
readonly Info: _phosphor_icons_react.Icon;
|
|
69
|
+
readonly Lightning: _phosphor_icons_react.Icon;
|
|
70
|
+
readonly LightningSlash: _phosphor_icons_react.Icon;
|
|
71
|
+
readonly List: _phosphor_icons_react.Icon;
|
|
72
|
+
readonly ListBullets: _phosphor_icons_react.Icon;
|
|
73
|
+
readonly ListNumbers: _phosphor_icons_react.Icon;
|
|
74
|
+
readonly Lock: _phosphor_icons_react.Icon;
|
|
75
|
+
readonly MagnifyingGlass: _phosphor_icons_react.Icon;
|
|
76
|
+
readonly MapPin: _phosphor_icons_react.Icon;
|
|
77
|
+
readonly MapPinArea: _phosphor_icons_react.Icon;
|
|
78
|
+
readonly MaskHappy: _phosphor_icons_react.Icon;
|
|
79
|
+
readonly Moon: _phosphor_icons_react.Icon;
|
|
80
|
+
readonly PaperPlaneRight: _phosphor_icons_react.Icon;
|
|
81
|
+
readonly PaperclipHorizontal: _phosphor_icons_react.Icon;
|
|
82
|
+
readonly PencilSimple: _phosphor_icons_react.Icon;
|
|
83
|
+
readonly Plugs: _phosphor_icons_react.Icon;
|
|
84
|
+
readonly PlugsConnected: _phosphor_icons_react.Icon;
|
|
85
|
+
readonly Plus: _phosphor_icons_react.Icon;
|
|
86
|
+
readonly Power: _phosphor_icons_react.Icon;
|
|
87
|
+
readonly Question: _phosphor_icons_react.Icon;
|
|
88
|
+
readonly Repeat: _phosphor_icons_react.Icon;
|
|
89
|
+
readonly Rocket: _phosphor_icons_react.Icon;
|
|
90
|
+
readonly ShareNetwork: _phosphor_icons_react.Icon;
|
|
91
|
+
readonly ShieldCheck: _phosphor_icons_react.Icon;
|
|
92
|
+
readonly SignOut: _phosphor_icons_react.Icon;
|
|
93
|
+
readonly SlackLogo: _phosphor_icons_react.Icon;
|
|
94
|
+
readonly Sliders: _phosphor_icons_react.Icon;
|
|
95
|
+
readonly Snowflake: _phosphor_icons_react.Icon;
|
|
96
|
+
readonly SolarPanel: _phosphor_icons_react.Icon;
|
|
97
|
+
readonly Square: _phosphor_icons_react.Icon;
|
|
98
|
+
readonly SquaresFour: _phosphor_icons_react.Icon;
|
|
99
|
+
readonly Stack: _phosphor_icons_react.Icon;
|
|
100
|
+
readonly Sun: _phosphor_icons_react.Icon;
|
|
101
|
+
readonly Terminal: _phosphor_icons_react.Icon;
|
|
102
|
+
readonly ThermometerCold: _phosphor_icons_react.Icon;
|
|
103
|
+
readonly ThermometerHot: _phosphor_icons_react.Icon;
|
|
104
|
+
readonly ThermometerSimple: _phosphor_icons_react.Icon;
|
|
105
|
+
readonly Trash: _phosphor_icons_react.Icon;
|
|
106
|
+
readonly TreeEvergreen: _phosphor_icons_react.Icon;
|
|
107
|
+
readonly User: _phosphor_icons_react.Icon;
|
|
108
|
+
readonly UserCircle: _phosphor_icons_react.Icon;
|
|
109
|
+
readonly UserPlus: _phosphor_icons_react.Icon;
|
|
110
|
+
readonly Users: _phosphor_icons_react.Icon;
|
|
111
|
+
readonly UsersFour: _phosphor_icons_react.Icon;
|
|
112
|
+
readonly Warning: _phosphor_icons_react.Icon;
|
|
113
|
+
readonly WarningCircle: _phosphor_icons_react.Icon;
|
|
114
|
+
readonly WebhooksLogo: _phosphor_icons_react.Icon;
|
|
115
|
+
readonly Wind: _phosphor_icons_react.Icon;
|
|
116
|
+
readonly X: _phosphor_icons_react.Icon;
|
|
117
|
+
readonly TextureMenuLight: () => react_jsx_runtime.JSX.Element;
|
|
118
|
+
readonly TextureMenuDark: () => react_jsx_runtime.JSX.Element;
|
|
119
|
+
};
|
|
120
|
+
type IconName$2 = keyof typeof iconMapping;
|
|
121
|
+
interface ExtendedIconProps {
|
|
122
|
+
name: IconName$2;
|
|
123
|
+
size?: number;
|
|
124
|
+
color?: string;
|
|
125
|
+
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
|
126
|
+
className?: string;
|
|
127
|
+
title?: string;
|
|
128
|
+
ariaLabel?: string;
|
|
129
|
+
[key: string]: unknown;
|
|
130
|
+
}
|
|
131
|
+
declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, title, ariaLabel, ...props }: ExtendedIconProps) => react_jsx_runtime.JSX.Element | null>;
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* Control-specific style utilities for form elements and interactive components.
|
|
135
|
+
* These styles use CSS variables defined in the theme for consistent sizing
|
|
136
|
+
* and spacing across all control elements.
|
|
137
|
+
*
|
|
138
|
+
* Text sizes follow the relationships defined in theme.css:
|
|
139
|
+
* sm: --control-text-sm (maps to --text-xs)
|
|
140
|
+
* md: --control-text-md (maps to --text-sm)
|
|
141
|
+
* lg: --control-text-lg (maps to --text-base)
|
|
142
|
+
* xl: --control-text-xl (maps to --text-lg)
|
|
143
|
+
*/
|
|
144
|
+
type Size = "sm" | "md" | "lg" | "xl";
|
|
145
|
+
|
|
146
|
+
type IconName$1 = ComponentProps<typeof Icon>["name"];
|
|
147
|
+
interface ButtonProps extends ButtonProps$1 {
|
|
148
|
+
variant?: "default" | "primary" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost";
|
|
149
|
+
size?: Size;
|
|
150
|
+
badgeNumber?: number;
|
|
151
|
+
badgeVariant?: "primary" | "destructive";
|
|
152
|
+
badgePosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
153
|
+
fullWidth?: boolean;
|
|
154
|
+
icon?: IconName$1;
|
|
155
|
+
iconWeight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
|
156
|
+
iconPosition?: "left" | "right";
|
|
157
|
+
isLoading?: boolean;
|
|
158
|
+
loadingText?: string;
|
|
159
|
+
loadingIndicator?: React.ReactNode;
|
|
160
|
+
}
|
|
161
|
+
declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
162
|
+
|
|
163
|
+
interface InputStyleProps {
|
|
164
|
+
/** Whether the input is in an invalid state */
|
|
165
|
+
isInvalid?: boolean;
|
|
166
|
+
/** Whether the input is disabled */
|
|
167
|
+
isDisabled?: boolean;
|
|
168
|
+
/** Whether the input should have a transparent background */
|
|
169
|
+
transparent?: boolean;
|
|
170
|
+
/** The size variant of the input */
|
|
171
|
+
size?: Size;
|
|
172
|
+
/** Whether the input is currently focused */
|
|
173
|
+
isFocused?: boolean;
|
|
174
|
+
/** Additional CSS classes to apply */
|
|
175
|
+
className?: string;
|
|
176
|
+
}
|
|
177
|
+
interface BaseProps {
|
|
178
|
+
/** The size variant of the component */
|
|
179
|
+
size?: Size;
|
|
180
|
+
/** Additional CSS classes to apply */
|
|
181
|
+
className?: string;
|
|
182
|
+
}
|
|
183
|
+
interface BaseInputProps extends BaseProps {
|
|
184
|
+
/** Whether the input should have a transparent background */
|
|
185
|
+
transparent?: boolean;
|
|
186
|
+
/** Whether to show a clear button when the input has a value */
|
|
187
|
+
isClearable?: boolean;
|
|
188
|
+
/** Callback when the clear button is clicked */
|
|
189
|
+
onClear?: () => void;
|
|
190
|
+
/** Whether to show a search icon */
|
|
191
|
+
showSearchIcon?: boolean;
|
|
192
|
+
}
|
|
193
|
+
interface LabelProps extends BaseProps {
|
|
194
|
+
/** The label content */
|
|
195
|
+
children: React__default.ReactNode;
|
|
196
|
+
/** Optional tooltip text to show next to the label */
|
|
197
|
+
tooltip?: string;
|
|
198
|
+
/** Whether to show a required field indicator (*) */
|
|
199
|
+
isRequired?: boolean;
|
|
200
|
+
/** The ID of the input this label is associated with */
|
|
201
|
+
htmlFor?: string;
|
|
202
|
+
}
|
|
203
|
+
interface FieldErrorProps extends BaseProps {
|
|
204
|
+
/** The error message to display */
|
|
205
|
+
children: React__default.ReactNode;
|
|
206
|
+
}
|
|
207
|
+
interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, InputStyleProps {
|
|
208
|
+
/** The size variant of the input */
|
|
209
|
+
size?: Size;
|
|
210
|
+
}
|
|
211
|
+
interface DescriptionProps extends Omit<TextProps, "className">, BaseProps {
|
|
212
|
+
/** The description content */
|
|
213
|
+
children: React__default.ReactNode;
|
|
214
|
+
}
|
|
215
|
+
interface FieldGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, InputStyleProps {
|
|
216
|
+
/** Whether any child of the group is focused */
|
|
217
|
+
isFocusWithin?: boolean;
|
|
218
|
+
/** Children can be either a ReactNode or a render function */
|
|
219
|
+
children?: React__default.ReactNode | ((props: InputStyleProps) => React__default.ReactNode);
|
|
220
|
+
}
|
|
221
|
+
/**
|
|
222
|
+
* Hook for managing input focus state
|
|
223
|
+
*/
|
|
224
|
+
declare function useInputFocus(): {
|
|
225
|
+
isFocused: boolean;
|
|
226
|
+
handleFocus: (e: React__default.FocusEvent<HTMLInputElement>, onFocus?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
|
|
227
|
+
handleBlur: (e: React__default.FocusEvent<HTMLInputElement>, onBlur?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
|
|
228
|
+
};
|
|
229
|
+
/**
|
|
230
|
+
* Wrapper component for input containers
|
|
231
|
+
*/
|
|
232
|
+
declare function InputWrapper({ children, className }: {
|
|
233
|
+
children: React__default.ReactNode;
|
|
234
|
+
className?: string;
|
|
235
|
+
}): react_jsx_runtime.JSX.Element;
|
|
236
|
+
/**
|
|
237
|
+
* Clear button component for inputs
|
|
238
|
+
*/
|
|
239
|
+
declare function ClearButton({ onClick, size, className, }: {
|
|
240
|
+
onClick: () => void;
|
|
241
|
+
size?: Size;
|
|
242
|
+
className?: string;
|
|
243
|
+
}): react_jsx_runtime.JSX.Element;
|
|
244
|
+
/**
|
|
245
|
+
* Generates state-specific styles for inputs based on their current state
|
|
246
|
+
* (invalid, disabled, focused).
|
|
247
|
+
*
|
|
248
|
+
* State Priority:
|
|
249
|
+
* 1. Disabled (overrides all other states)
|
|
250
|
+
* 2. Invalid + Focused
|
|
251
|
+
* 3. Invalid
|
|
252
|
+
* 4. Focused
|
|
253
|
+
* 5. Default
|
|
254
|
+
*
|
|
255
|
+
* @example
|
|
256
|
+
* ```tsx
|
|
257
|
+
* const styles = getInputStateStyles({ isInvalid: true, isFocused: true });
|
|
258
|
+
* ```
|
|
259
|
+
*/
|
|
260
|
+
declare function getInputStateStyles(props: {
|
|
261
|
+
isInvalid?: boolean;
|
|
262
|
+
isDisabled?: boolean;
|
|
263
|
+
isFocused?: boolean;
|
|
264
|
+
}): "border rounded-[var(--control-border-radius)] " | "border rounded-[var(--control-border-radius)] border-border-muted focus:outline-none" | "border rounded-[var(--control-border-radius)] border-feedback-error-border outline-[1.5px] outline-[var(--control-focus-ring-color-error)]" | "border rounded-[var(--control-border-radius)] border-feedback-error-border" | "border rounded-[var(--control-border-radius)] !outline-[1.5px] !outline-[var(--control-focus-ring-color)] ![--tw-outline-style:solid]";
|
|
265
|
+
/**
|
|
266
|
+
* Generates background styles based on the transparent and disabled props.
|
|
267
|
+
* Uses Tailwind classes for consistent styling across light/dark modes.
|
|
268
|
+
*/
|
|
269
|
+
declare function getInputBackgroundStyles(props: {
|
|
270
|
+
transparent?: boolean;
|
|
271
|
+
isDisabled?: boolean;
|
|
272
|
+
}): "bg-transparent" | "bg-background-muted" | "bg-background-input";
|
|
273
|
+
/**
|
|
274
|
+
* Generates the complete set of base styles for input components.
|
|
275
|
+
* This includes state styles, background, sizing, and custom classes.
|
|
276
|
+
*
|
|
277
|
+
* @example
|
|
278
|
+
* ```tsx
|
|
279
|
+
* const styles = getInputBaseStyles({
|
|
280
|
+
* isInvalid: formState.hasError,
|
|
281
|
+
* isDisabled: isLoading,
|
|
282
|
+
* size: "md"
|
|
283
|
+
* });
|
|
284
|
+
* ```
|
|
285
|
+
*/
|
|
286
|
+
declare function getInputBaseStyles(props: InputStyleProps): string;
|
|
287
|
+
/**
|
|
288
|
+
* Generates styles for grouped form elements (like input with buttons)
|
|
289
|
+
*
|
|
290
|
+
* @example
|
|
291
|
+
* ```tsx
|
|
292
|
+
* <div className={getFieldGroupStyles({ size: "md" })}>
|
|
293
|
+
* <Input />
|
|
294
|
+
* <Button>Submit</Button>
|
|
295
|
+
* </div>
|
|
296
|
+
* ```
|
|
297
|
+
*/
|
|
298
|
+
declare function getFieldGroupStyles(props: FieldGroupProps): string;
|
|
299
|
+
/**
|
|
300
|
+
* Label component for form fields. Supports tooltips and required field indicators.
|
|
301
|
+
*
|
|
302
|
+
* @example
|
|
303
|
+
* ```tsx
|
|
304
|
+
* <Label
|
|
305
|
+
* htmlFor="email"
|
|
306
|
+
* tooltip="Enter your work email"
|
|
307
|
+
* isRequired
|
|
308
|
+
* >
|
|
309
|
+
* Email Address
|
|
310
|
+
* </Label>
|
|
311
|
+
* ```
|
|
312
|
+
*/
|
|
313
|
+
declare function Label({ children, size, tooltip, isRequired, className, htmlFor }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
314
|
+
/**
|
|
315
|
+
* Description component for providing additional context about a form field.
|
|
316
|
+
*
|
|
317
|
+
* @example
|
|
318
|
+
* ```tsx
|
|
319
|
+
* <Description>Must be at least 8 characters</Description>
|
|
320
|
+
* ```
|
|
321
|
+
*/
|
|
322
|
+
declare function Description({ size, className, children, ...props }: DescriptionProps): react_jsx_runtime.JSX.Element;
|
|
323
|
+
/**
|
|
324
|
+
* Error message component for form fields. Automatically handles
|
|
325
|
+
* accessibility attributes for screen readers.
|
|
326
|
+
*
|
|
327
|
+
* @example
|
|
328
|
+
* ```tsx
|
|
329
|
+
* {hasError && <FieldError>This field is required</FieldError>}
|
|
330
|
+
* ```
|
|
331
|
+
*/
|
|
332
|
+
declare function FieldError({ children, size, className }: FieldErrorProps): react_jsx_runtime.JSX.Element;
|
|
333
|
+
/**
|
|
334
|
+
* Base input component with consistent styling and state handling.
|
|
335
|
+
* Extends the native input element with our custom styling system.
|
|
336
|
+
*
|
|
337
|
+
* @example
|
|
338
|
+
* ```tsx
|
|
339
|
+
* <Input
|
|
340
|
+
* size="md"
|
|
341
|
+
* isInvalid={hasError}
|
|
342
|
+
* isDisabled={isLoading}
|
|
343
|
+
* transparent={false}
|
|
344
|
+
* />
|
|
345
|
+
* ```
|
|
346
|
+
*/
|
|
347
|
+
declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
348
|
+
/**
|
|
349
|
+
* Container for grouping form elements with consistent styling.
|
|
350
|
+
* Useful for creating compound components like input with buttons.
|
|
351
|
+
*
|
|
352
|
+
* @example
|
|
353
|
+
* ```tsx
|
|
354
|
+
* <FieldGroup>
|
|
355
|
+
* <Input placeholder="Search..." />
|
|
356
|
+
* <Button>Search</Button>
|
|
357
|
+
* </FieldGroup>
|
|
358
|
+
* ```
|
|
359
|
+
*/
|
|
360
|
+
declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
|
|
361
|
+
|
|
362
|
+
interface TextFieldProps extends Omit<TextFieldProps$1, "isRequired" | "size" | "className">, BaseInputProps {
|
|
363
|
+
label?: string;
|
|
364
|
+
description?: string;
|
|
365
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
366
|
+
placeholder?: string;
|
|
367
|
+
tooltip?: string;
|
|
368
|
+
isRequired?: boolean;
|
|
369
|
+
className?: string;
|
|
370
|
+
validationResult?: ValidationResult;
|
|
371
|
+
}
|
|
372
|
+
declare function TextField({ label, description, errorMessage, size, tooltip, isRequired, transparent, showSearchIcon, isClearable, onClear, type, validationResult, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
|
|
373
|
+
|
|
374
|
+
interface TextAreaProps extends Omit<React__default.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, BaseInputProps {
|
|
375
|
+
label?: string;
|
|
376
|
+
description?: string;
|
|
377
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
378
|
+
tooltip?: string;
|
|
379
|
+
size?: Size;
|
|
380
|
+
isInvalid?: boolean;
|
|
381
|
+
validationResult?: ValidationResult;
|
|
382
|
+
}
|
|
383
|
+
declare function TextArea({ label, description, errorMessage, size, tooltip, required, transparent, isInvalid, className, validationResult, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
384
|
+
|
|
385
|
+
interface ListBoxProps<T> extends Omit<ListBoxProps$1<T>, "layout" | "orientation"> {
|
|
386
|
+
}
|
|
387
|
+
declare function ListBox<T extends object>({ children, ...props }: ListBoxProps<T>): react_jsx_runtime.JSX.Element;
|
|
388
|
+
|
|
389
|
+
/**
|
|
390
|
+
* Interface defining the shape of items in the Select component
|
|
391
|
+
*/
|
|
392
|
+
interface SelectItem<T = unknown> {
|
|
393
|
+
/** Unique identifier for the item */
|
|
394
|
+
id: string;
|
|
395
|
+
/** Display label for the item */
|
|
396
|
+
label: string;
|
|
397
|
+
/** Value associated with the item */
|
|
398
|
+
value: T;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Props for the Select component
|
|
402
|
+
* @template T - The type of the items, must extend SelectItem
|
|
403
|
+
*/
|
|
404
|
+
interface SelectProps<T extends SelectItem> extends Omit<SelectProps$1<T>, "children" | "onSelectionChange"> {
|
|
405
|
+
/** Label text displayed above the select */
|
|
406
|
+
label?: string;
|
|
407
|
+
/** Helper text displayed below the select */
|
|
408
|
+
description?: string;
|
|
409
|
+
/** Error message or function to generate error message */
|
|
410
|
+
errorMessage?: string | ((validation: ValidationResult) => React__default.ReactNode);
|
|
411
|
+
/** Collection of items to display in the select */
|
|
412
|
+
items?: Iterable<T>;
|
|
413
|
+
/** Size variant of the select */
|
|
414
|
+
size?: Size;
|
|
415
|
+
/** Render function for items or static children */
|
|
416
|
+
children: React__default.ReactNode | ((item: T) => React__default.ReactNode);
|
|
417
|
+
/** Currently selected item's id. Uses the SelectItem's `id` field for stable selection tracking */
|
|
418
|
+
selectedKey?: Key;
|
|
419
|
+
/** Default selected item's id for uncontrolled usage */
|
|
420
|
+
defaultSelectedKey?: Key;
|
|
421
|
+
/** Callback when selection changes, provides the selected item's id */
|
|
422
|
+
onSelectionChange?: (key: Key) => void;
|
|
423
|
+
/** Whether to show error states */
|
|
424
|
+
showErrors?: boolean;
|
|
425
|
+
/** Tooltip text */
|
|
426
|
+
tooltip?: string;
|
|
427
|
+
/** Whether the field is required */
|
|
428
|
+
isRequired?: boolean;
|
|
429
|
+
/** Validation result object */
|
|
430
|
+
validationResult?: ValidationResult;
|
|
431
|
+
/** Whether to use transparent background */
|
|
432
|
+
transparent?: boolean;
|
|
433
|
+
}
|
|
434
|
+
declare function Select<T extends SelectItem>({ label, description, errorMessage, children, items, size, selectedKey: controlledSelectedKey, defaultSelectedKey, onSelectionChange, placeholder, showErrors, tooltip, isRequired, transparent, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
|
|
435
|
+
|
|
436
|
+
interface NumberFieldProps extends Omit<NumberFieldProps$1, "size" | "className">, BaseInputProps {
|
|
437
|
+
value?: number;
|
|
438
|
+
defaultValue?: number;
|
|
439
|
+
onChange?: (value: number) => void;
|
|
440
|
+
minValue?: number;
|
|
441
|
+
maxValue?: number;
|
|
442
|
+
step?: number;
|
|
443
|
+
formatOptions?: Intl.NumberFormatOptions;
|
|
444
|
+
id?: string;
|
|
445
|
+
label?: string;
|
|
446
|
+
description?: string;
|
|
447
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
448
|
+
tooltip?: string;
|
|
449
|
+
isRequired?: boolean;
|
|
450
|
+
className?: string;
|
|
451
|
+
validationResult?: ValidationResult;
|
|
452
|
+
}
|
|
453
|
+
declare function NumberField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
|
|
454
|
+
|
|
455
|
+
interface TimeFieldProps extends Omit<TimeFieldProps$1<TimeValue>, "size" | "className">, BaseInputProps {
|
|
456
|
+
label?: string;
|
|
457
|
+
description?: string;
|
|
458
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
459
|
+
placeholder?: string;
|
|
460
|
+
tooltip?: string;
|
|
461
|
+
isRequired?: boolean;
|
|
462
|
+
className?: string;
|
|
463
|
+
validationResult?: ValidationResult;
|
|
464
|
+
}
|
|
465
|
+
declare function TimeField({ label, description, errorMessage, size, tooltip, isRequired, transparent, validationResult, ...props }: TimeFieldProps): react_jsx_runtime.JSX.Element;
|
|
466
|
+
|
|
467
|
+
interface DateFieldProps<T extends DateValue> extends DateFieldProps$1<T> {
|
|
468
|
+
label?: string;
|
|
469
|
+
description?: string;
|
|
470
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
471
|
+
}
|
|
472
|
+
declare function DateField<T extends DateValue>({ label, description, errorMessage, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
473
|
+
|
|
474
|
+
type IconName = ComponentProps<typeof Icon>["name"];
|
|
475
|
+
interface ToggleButtonProps {
|
|
476
|
+
variant?: "default" | "primary";
|
|
477
|
+
size?: Size;
|
|
478
|
+
className?: string;
|
|
479
|
+
children: React__default.ReactNode;
|
|
480
|
+
onChange?: (isSelected: boolean) => void;
|
|
481
|
+
onPress?: () => void;
|
|
482
|
+
isSelected?: boolean;
|
|
483
|
+
isDisabled?: boolean;
|
|
484
|
+
borderRadius?: "left" | "right";
|
|
485
|
+
borderRight?: boolean;
|
|
486
|
+
borderLeft?: boolean;
|
|
487
|
+
icon?: IconName;
|
|
488
|
+
iconWeight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
|
|
489
|
+
iconPosition?: "left" | "right";
|
|
490
|
+
/** Value used for group selection state */
|
|
491
|
+
value?: string;
|
|
492
|
+
isLoading?: boolean;
|
|
493
|
+
loadingText?: string;
|
|
494
|
+
loadingIndicator?: React__default.ReactNode;
|
|
495
|
+
badgeNumber?: number;
|
|
496
|
+
badgeVariant?: "primary" | "destructive";
|
|
497
|
+
badgePosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
498
|
+
}
|
|
499
|
+
declare function ToggleButton(props: ToggleButtonProps): react_jsx_runtime.JSX.Element;
|
|
500
|
+
|
|
501
|
+
interface TooltipProps extends Omit<TooltipProps$1, "children"> {
|
|
502
|
+
children: React__default.ReactNode;
|
|
503
|
+
content: React__default.ReactNode;
|
|
504
|
+
}
|
|
505
|
+
declare function Tooltip({ children, content, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
506
|
+
|
|
507
|
+
interface TextLinkProps {
|
|
508
|
+
href?: string;
|
|
509
|
+
children: ReactNode;
|
|
510
|
+
className?: string;
|
|
511
|
+
external?: boolean;
|
|
512
|
+
title?: string;
|
|
513
|
+
variant?: "default" | "primary" | "muted";
|
|
514
|
+
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
515
|
+
asButton?: boolean;
|
|
516
|
+
onPress?: () => void;
|
|
517
|
+
}
|
|
518
|
+
declare const TextLink: ({ href, children, className, external, title, variant, onClick, asButton, onPress, }: TextLinkProps) => react_jsx_runtime.JSX.Element;
|
|
519
|
+
|
|
520
|
+
interface SkeletonProps {
|
|
521
|
+
width?: number | string;
|
|
522
|
+
height?: number | string;
|
|
523
|
+
variant?: "text" | "rect" | "circle";
|
|
524
|
+
animation?: "pulse" | "wave" | "none";
|
|
525
|
+
gradient?: boolean;
|
|
526
|
+
flex?: boolean;
|
|
527
|
+
stack?: (number | string)[];
|
|
528
|
+
responsive?: Record<string, string | number>;
|
|
529
|
+
delay?: number;
|
|
530
|
+
adjustAnimationSpeedBasedOnWidth?: boolean;
|
|
531
|
+
ariaLabel?: string;
|
|
532
|
+
className?: string;
|
|
533
|
+
"data-testid"?: string;
|
|
534
|
+
}
|
|
535
|
+
declare const Skeleton: React__default.FC<SkeletonProps>;
|
|
536
|
+
|
|
537
|
+
interface LogoProps {
|
|
538
|
+
color: "dark" | "white" | "brand";
|
|
539
|
+
withWordmark: boolean;
|
|
540
|
+
width: number;
|
|
541
|
+
height?: number;
|
|
542
|
+
className?: string;
|
|
543
|
+
}
|
|
544
|
+
declare const Logo: React__default.FC<LogoProps>;
|
|
545
|
+
|
|
546
|
+
interface PopoverProps extends Omit<PopoverProps$1, "children"> {
|
|
547
|
+
showArrow?: boolean;
|
|
548
|
+
children: React__default.ReactNode;
|
|
549
|
+
}
|
|
550
|
+
declare function Popover({ children, showArrow, className, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
|
|
551
|
+
|
|
552
|
+
interface LoaderProps {
|
|
553
|
+
/**
|
|
554
|
+
* Optional className for custom styling
|
|
555
|
+
*/
|
|
556
|
+
className?: string;
|
|
557
|
+
/**
|
|
558
|
+
* Size of the loader in pixels
|
|
559
|
+
* @default 24
|
|
560
|
+
*/
|
|
561
|
+
size?: number;
|
|
562
|
+
/**
|
|
563
|
+
* Color of the loader
|
|
564
|
+
* @default "text-action-primary"
|
|
565
|
+
*/
|
|
566
|
+
color?: string;
|
|
567
|
+
}
|
|
568
|
+
declare const Loader: ({ className, size, color }: LoaderProps) => react_jsx_runtime.JSX.Element;
|
|
569
|
+
|
|
570
|
+
declare const sizeVariants: {
|
|
571
|
+
readonly xs: "text-lg font-semibold";
|
|
572
|
+
readonly sm: "text-xl font-semibold";
|
|
573
|
+
readonly md: "text-2xl font-semibold";
|
|
574
|
+
readonly lg: "text-3xl font-semibold";
|
|
575
|
+
readonly xl: "text-4xl font-semibold";
|
|
576
|
+
};
|
|
577
|
+
declare const heightVariants: {
|
|
578
|
+
readonly page: "h-16 leading-[62px]";
|
|
579
|
+
};
|
|
580
|
+
type HeadingSize = keyof typeof sizeVariants;
|
|
581
|
+
type HeadingHeight = keyof typeof heightVariants;
|
|
582
|
+
interface HeadingProps {
|
|
583
|
+
tag?: keyof JSX.IntrinsicElements;
|
|
584
|
+
size?: HeadingSize;
|
|
585
|
+
height?: HeadingHeight;
|
|
586
|
+
className?: string;
|
|
587
|
+
children?: React__default.ReactNode;
|
|
588
|
+
}
|
|
589
|
+
declare function Heading({ tag: Tag, size, height, className, children }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
590
|
+
|
|
591
|
+
interface CopyToClipboardProps {
|
|
592
|
+
/**
|
|
593
|
+
* The value to copy to clipboard. If not provided, will use the text content of children
|
|
594
|
+
*/
|
|
595
|
+
value?: string;
|
|
596
|
+
/**
|
|
597
|
+
* The content to display
|
|
598
|
+
*/
|
|
599
|
+
children: React__default.ReactNode;
|
|
600
|
+
/**
|
|
601
|
+
* Optional className for the container
|
|
602
|
+
*/
|
|
603
|
+
className?: string;
|
|
604
|
+
/**
|
|
605
|
+
* Size of the copy button, defaults to "sm"
|
|
606
|
+
*/
|
|
607
|
+
size?: "sm" | "md";
|
|
608
|
+
}
|
|
609
|
+
declare function CopyToClipboard({ value, children, className, size }: CopyToClipboardProps): react_jsx_runtime.JSX.Element;
|
|
610
|
+
|
|
611
|
+
interface SwitchProps extends Omit<SwitchProps$1, "children"> {
|
|
612
|
+
children: React__default.ReactNode;
|
|
613
|
+
}
|
|
614
|
+
declare function Switch({ children, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
|
|
615
|
+
|
|
616
|
+
interface ProgressBarProps extends ProgressBarProps$1 {
|
|
617
|
+
label?: string;
|
|
618
|
+
rightLabel?: string;
|
|
619
|
+
progressWidth?: number;
|
|
620
|
+
hideLabels?: boolean;
|
|
621
|
+
}
|
|
622
|
+
declare function ProgressBar({ label, rightLabel, progressWidth, hideLabels, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
|
|
623
|
+
|
|
624
|
+
interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProps$1<T>, "visibleDuration"> {
|
|
625
|
+
errorMessage?: string;
|
|
626
|
+
}
|
|
627
|
+
declare function RangeCalendar<T extends DateValue>({ errorMessage, ...props }: RangeCalendarProps<T>): react_jsx_runtime.JSX.Element;
|
|
628
|
+
|
|
629
|
+
interface Place {
|
|
630
|
+
id: string;
|
|
631
|
+
place_name: string;
|
|
632
|
+
place_type: string[];
|
|
633
|
+
center: [number, number];
|
|
634
|
+
}
|
|
635
|
+
type SearchType = "country" | "region" | "district" | "place" | "locality" | "neighborhood" | "address" | "street";
|
|
636
|
+
interface PlaceSearchProps {
|
|
637
|
+
label?: string;
|
|
638
|
+
selectedKey?: Key | null;
|
|
639
|
+
defaultSelectedKey?: Key | null;
|
|
640
|
+
onSelectionChange?: (key: Key | null) => void;
|
|
641
|
+
placeholder?: string;
|
|
642
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
643
|
+
description?: string;
|
|
644
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
645
|
+
tooltip?: string;
|
|
646
|
+
isRequired?: boolean;
|
|
647
|
+
isDisabled?: boolean;
|
|
648
|
+
showErrors?: boolean;
|
|
649
|
+
autoFocus?: boolean;
|
|
650
|
+
onSelect: (place: Place) => void;
|
|
651
|
+
searchTypes?: SearchType[];
|
|
652
|
+
defaultFilter?: (textValue: string, inputValue: string) => boolean;
|
|
653
|
+
validationResult?: ValidationResult;
|
|
654
|
+
countryRestrictions?: string[];
|
|
655
|
+
proximity?: "ip" | [number, number];
|
|
656
|
+
}
|
|
657
|
+
declare function PlaceSearch({ label, selectedKey, defaultSelectedKey, onSelectionChange, placeholder, errorMessage, description, size, tooltip, isRequired, isDisabled, showErrors, autoFocus, onSelect, searchTypes, defaultFilter, validationResult, countryRestrictions, proximity, }: PlaceSearchProps): react_jsx_runtime.JSX.Element;
|
|
658
|
+
|
|
659
|
+
interface ExtendedListBoxItemProps extends Omit<ListBoxItemProps, "className"> {
|
|
660
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
661
|
+
className?: string;
|
|
662
|
+
}
|
|
663
|
+
declare function ListBoxItem({ size, className, ...props }: ExtendedListBoxItemProps): react_jsx_runtime.JSX.Element;
|
|
664
|
+
|
|
665
|
+
declare function Form(props: FormProps): react_jsx_runtime.JSX.Element;
|
|
666
|
+
|
|
667
|
+
interface DateRangePickerProps<T extends DateValue> extends DateRangePickerProps$1<T> {
|
|
668
|
+
label?: string;
|
|
669
|
+
description?: string;
|
|
670
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
671
|
+
}
|
|
672
|
+
declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, ...props }: DateRangePickerProps<T>): react_jsx_runtime.JSX.Element;
|
|
673
|
+
|
|
674
|
+
declare function Dialog(props: DialogProps): react_jsx_runtime.JSX.Element;
|
|
675
|
+
|
|
676
|
+
interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, "visibleDuration"> {
|
|
677
|
+
errorMessage?: string;
|
|
678
|
+
}
|
|
679
|
+
declare function Calendar<T extends DateValue>({ errorMessage, ...props }: CalendarProps<T>): react_jsx_runtime.JSX.Element;
|
|
680
|
+
|
|
681
|
+
interface CheckboxProps extends Omit<CheckboxProps$1, "children"> {
|
|
682
|
+
children?: ReactNode | ((props: CheckboxRenderProps) => ReactNode);
|
|
683
|
+
}
|
|
684
|
+
declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
685
|
+
|
|
686
|
+
interface Item {
|
|
687
|
+
id: string;
|
|
688
|
+
name: string;
|
|
689
|
+
}
|
|
690
|
+
interface Section {
|
|
691
|
+
name: string;
|
|
692
|
+
items: Item[];
|
|
693
|
+
}
|
|
694
|
+
type RequestMethod = "GET" | "POST";
|
|
695
|
+
interface BaseRequestConfig {
|
|
696
|
+
url: string;
|
|
697
|
+
headers?: Record<string, string>;
|
|
698
|
+
transformResponse: (data: unknown) => Item[];
|
|
699
|
+
}
|
|
700
|
+
interface RestRequestConfig extends BaseRequestConfig {
|
|
701
|
+
requestType: "REST";
|
|
702
|
+
method?: RequestMethod;
|
|
703
|
+
queryKey?: string;
|
|
704
|
+
extraParams?: Record<string, string>;
|
|
705
|
+
shouldLoad?: (filterText: string) => boolean;
|
|
706
|
+
}
|
|
707
|
+
interface GraphQLRequestConfig extends BaseRequestConfig {
|
|
708
|
+
requestType: "GraphQL";
|
|
709
|
+
graphqlQuery: string;
|
|
710
|
+
variableKey?: string;
|
|
711
|
+
responsePath?: string;
|
|
712
|
+
shouldLoad?: (filterText: string) => boolean;
|
|
713
|
+
}
|
|
714
|
+
type AutocompleteRequestConfig = RestRequestConfig | GraphQLRequestConfig;
|
|
715
|
+
interface AutocompleteProps {
|
|
716
|
+
label?: string;
|
|
717
|
+
staticItems?: Item[];
|
|
718
|
+
sections?: Section[];
|
|
719
|
+
selectedKey?: Key | null;
|
|
720
|
+
defaultSelectedKey?: Key | null;
|
|
721
|
+
onSelectionChange?: (key: Key | null) => void;
|
|
722
|
+
requestConfig?: AutocompleteRequestConfig;
|
|
723
|
+
defaultFilter?: (textValue: string, inputValue: string) => boolean;
|
|
724
|
+
placeholder?: string;
|
|
725
|
+
renderItem?: (item: Item) => React__default.ReactNode;
|
|
726
|
+
renderLeftIcon?: (isLoading: boolean) => React__default.ReactNode;
|
|
727
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
728
|
+
description?: string;
|
|
729
|
+
size?: "sm" | "md" | "lg" | "xl";
|
|
730
|
+
tooltip?: string;
|
|
731
|
+
isRequired?: boolean;
|
|
732
|
+
isDisabled?: boolean;
|
|
733
|
+
validationResult?: ValidationResult;
|
|
734
|
+
showErrors?: boolean;
|
|
735
|
+
autoFocus?: boolean;
|
|
736
|
+
onLoadError?: (error: Error) => void;
|
|
737
|
+
}
|
|
738
|
+
declare function Autocomplete({ label, staticItems, sections, selectedKey, defaultSelectedKey, onSelectionChange, requestConfig, defaultFilter, errorMessage, size, tooltip, isRequired, isDisabled, renderLeftIcon, autoFocus, onLoadError, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
|
|
739
|
+
|
|
740
|
+
export { Autocomplete, type BaseInputProps, type BaseProps, Button, Calendar, Checkbox, ClearButton, CopyToClipboard, DateField, DateRangePicker, Description, type DescriptionProps, Dialog, FieldError, type FieldErrorProps, FieldGroup, type FieldGroupProps, Form, Heading, Icon, Input, type InputProps, type InputStyleProps, InputWrapper, Label, type LabelProps, ListBox, ListBoxItem, Loader, Logo, NumberField, PlaceSearch, Popover, ProgressBar, RangeCalendar, Select, Skeleton, Switch, TextArea, TextField, TextLink, TimeField, ToggleButton, Tooltip, getFieldGroupStyles, getInputBackgroundStyles, getInputBaseStyles, getInputStateStyles, useInputFocus };
|