@texturehq/edges 1.18.1 → 1.19.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/dist/FileUpload-DXTcfLIh.d.cts +348 -0
- package/dist/FileUpload-DXTcfLIh.d.ts +348 -0
- package/dist/TimeField-B4J8gA8E.d.ts +393 -0
- package/dist/TimeField-D2AOjQ1K.d.cts +393 -0
- package/dist/{colors-Kck1-4Zq.d.cts → colors-BUEmaPXY.d.ts} +4 -122
- package/dist/{colors-Kck1-4Zq.d.ts → colors-BniWNyzj.d.cts} +4 -122
- package/dist/components.manifest.json +13 -9
- package/dist/form/index.cjs +2 -0
- package/dist/form/index.cjs.map +1 -0
- package/dist/form/index.d.cts +3 -0
- package/dist/form/index.d.ts +3 -0
- package/dist/form/index.js +2 -0
- package/dist/form/index.js.map +1 -0
- package/dist/generated/tailwind-tokens-dark.css +1 -0
- package/dist/generated/tailwind-tokens-light.css +1 -0
- package/dist/index-DKA9NMRw.d.cts +311 -0
- package/dist/index-DKA9NMRw.d.ts +311 -0
- package/dist/index.cjs +8 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +24 -794
- package/dist/index.d.ts +24 -794
- package/dist/index.js +8 -8
- package/dist/index.js.map +1 -1
- package/dist/rhf/index.cjs +2 -0
- package/dist/rhf/index.cjs.map +1 -0
- package/dist/rhf/index.d.cts +147 -0
- package/dist/rhf/index.d.ts +147 -0
- package/dist/rhf/index.js +2 -0
- package/dist/rhf/index.js.map +1 -0
- package/dist/server.cjs +1 -1
- package/dist/server.cjs.map +1 -1
- package/dist/server.d.cts +2 -1
- package/dist/server.d.ts +2 -1
- package/dist/server.js +1 -1
- package/dist/server.js.map +1 -1
- package/dist/styles.css +92 -27
- package/dist/utilities.manifest.json +2 -2
- package/package.json +30 -3
- package/scripts/generate-edges-docs.js +43 -0
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import * as PhosphorIcons from '@phosphor-icons/react';
|
|
5
|
+
import { IconProps as IconProps$1 } from '@phosphor-icons/react';
|
|
6
|
+
import { TextProps, DateValue, DateFieldProps as DateFieldProps$1, ValidationResult } from 'react-aria-components';
|
|
7
|
+
|
|
8
|
+
type PhosphorIconName = keyof typeof PhosphorIcons;
|
|
9
|
+
type IconName = PhosphorIconName;
|
|
10
|
+
declare const sizePresets: {
|
|
11
|
+
readonly xs: 16;
|
|
12
|
+
readonly sm: 20;
|
|
13
|
+
readonly md: 24;
|
|
14
|
+
readonly lg: 32;
|
|
15
|
+
readonly xl: 40;
|
|
16
|
+
readonly "2xl": 48;
|
|
17
|
+
};
|
|
18
|
+
type SizePreset = keyof typeof sizePresets;
|
|
19
|
+
interface IconProps extends Omit<IconProps$1, "size"> {
|
|
20
|
+
/**
|
|
21
|
+
* The name of the Phosphor icon to render
|
|
22
|
+
* Any valid icon from @phosphor-icons/react
|
|
23
|
+
*/
|
|
24
|
+
name: PhosphorIconName;
|
|
25
|
+
/**
|
|
26
|
+
* Size of the icon - can be a preset or custom number
|
|
27
|
+
*/
|
|
28
|
+
size?: SizePreset | number;
|
|
29
|
+
/**
|
|
30
|
+
* Accessibility label (maps to aria-label)
|
|
31
|
+
*/
|
|
32
|
+
ariaLabel?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Icon
|
|
36
|
+
*
|
|
37
|
+
* Phosphor icon wrapper component with standardized sizing and styling.
|
|
38
|
+
* Provides access to the full Phosphor icon library with tree-shaking support and design system presets.
|
|
39
|
+
* - TypeScript autocomplete for all icon names
|
|
40
|
+
*
|
|
41
|
+
* Usage:
|
|
42
|
+
* ```tsx
|
|
43
|
+
* <Icon name="House" size="md" />
|
|
44
|
+
* <Icon name="User" size={32} className="text-brand" />
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null>;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Control-specific style utilities for form elements and interactive components.
|
|
51
|
+
* These styles use CSS variables defined in the theme for consistent sizing
|
|
52
|
+
* and spacing across all control elements.
|
|
53
|
+
*
|
|
54
|
+
* Text sizes follow the relationships defined in theme.css:
|
|
55
|
+
* sm: --control-text-sm (maps to --text-xs)
|
|
56
|
+
* md: --control-text-md (maps to --text-sm)
|
|
57
|
+
* lg: --control-text-lg (maps to --text-base)
|
|
58
|
+
* xl: --control-text-xl (maps to --text-lg)
|
|
59
|
+
*/
|
|
60
|
+
type Size = "sm" | "md" | "lg" | "xl";
|
|
61
|
+
|
|
62
|
+
interface InputStyleProps {
|
|
63
|
+
/** Whether the input is in an invalid state */
|
|
64
|
+
isInvalid?: boolean;
|
|
65
|
+
/** Whether the input is disabled */
|
|
66
|
+
isDisabled?: boolean;
|
|
67
|
+
/** Whether the input should have a transparent background */
|
|
68
|
+
transparent?: boolean;
|
|
69
|
+
/** The size variant of the input */
|
|
70
|
+
size?: Size;
|
|
71
|
+
/** Whether the input is currently focused */
|
|
72
|
+
isFocused?: boolean;
|
|
73
|
+
/** Additional CSS classes to apply */
|
|
74
|
+
className?: string;
|
|
75
|
+
}
|
|
76
|
+
interface BaseProps {
|
|
77
|
+
/** The size variant of the component */
|
|
78
|
+
size?: Size;
|
|
79
|
+
/** Additional CSS classes to apply */
|
|
80
|
+
className?: string;
|
|
81
|
+
}
|
|
82
|
+
interface BaseInputProps extends BaseProps {
|
|
83
|
+
/** Whether the input should have a transparent background */
|
|
84
|
+
transparent?: boolean;
|
|
85
|
+
/** Whether to show a clear button when the input has a value */
|
|
86
|
+
isClearable?: boolean;
|
|
87
|
+
/** Callback when the clear button is clicked */
|
|
88
|
+
onClear?: () => void;
|
|
89
|
+
/** Whether to show a search icon */
|
|
90
|
+
showSearchIcon?: boolean;
|
|
91
|
+
/**
|
|
92
|
+
* Whether to reserve space for error messages to prevent layout shift
|
|
93
|
+
* @default true
|
|
94
|
+
*/
|
|
95
|
+
reserveErrorSpace?: boolean;
|
|
96
|
+
}
|
|
97
|
+
interface LabelProps extends BaseProps {
|
|
98
|
+
/** The label content */
|
|
99
|
+
children: React__default.ReactNode;
|
|
100
|
+
/** Optional tooltip text to show next to the label */
|
|
101
|
+
tooltip?: string;
|
|
102
|
+
/** Whether to show a required field indicator (*) */
|
|
103
|
+
isRequired?: boolean;
|
|
104
|
+
/** The ID of the input this label is associated with */
|
|
105
|
+
htmlFor?: string;
|
|
106
|
+
}
|
|
107
|
+
interface FieldErrorProps extends BaseProps {
|
|
108
|
+
/** The error message to display */
|
|
109
|
+
children: React__default.ReactNode;
|
|
110
|
+
}
|
|
111
|
+
interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, InputStyleProps {
|
|
112
|
+
/** The size variant of the input */
|
|
113
|
+
size?: Size;
|
|
114
|
+
}
|
|
115
|
+
interface DescriptionProps extends Omit<TextProps, "className">, BaseProps {
|
|
116
|
+
/** The description content */
|
|
117
|
+
children: React__default.ReactNode;
|
|
118
|
+
}
|
|
119
|
+
interface FieldGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, InputStyleProps {
|
|
120
|
+
/** Whether any child of the group is focused */
|
|
121
|
+
isFocusWithin?: boolean;
|
|
122
|
+
/** Children can be either a ReactNode or a render function */
|
|
123
|
+
children?: React__default.ReactNode | ((props: InputStyleProps) => React__default.ReactNode);
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Hook for managing input focus state
|
|
127
|
+
*/
|
|
128
|
+
declare function useInputFocus(): {
|
|
129
|
+
isFocused: boolean;
|
|
130
|
+
handleFocus: (e: React__default.FocusEvent<HTMLInputElement>, onFocus?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
|
|
131
|
+
handleBlur: (e: React__default.FocusEvent<HTMLInputElement>, onBlur?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
|
|
132
|
+
};
|
|
133
|
+
/**
|
|
134
|
+
* Wrapper component for input containers
|
|
135
|
+
*/
|
|
136
|
+
declare function InputWrapper({ children, className, }: {
|
|
137
|
+
children: React__default.ReactNode;
|
|
138
|
+
className?: string;
|
|
139
|
+
}): react_jsx_runtime.JSX.Element;
|
|
140
|
+
/**
|
|
141
|
+
* Clear button component for inputs
|
|
142
|
+
*/
|
|
143
|
+
declare function ClearButton({ onClick, size, className, }: {
|
|
144
|
+
onClick: () => void;
|
|
145
|
+
size?: Size;
|
|
146
|
+
className?: string;
|
|
147
|
+
}): react_jsx_runtime.JSX.Element;
|
|
148
|
+
/**
|
|
149
|
+
* Generates state-specific styles for inputs based on their current state
|
|
150
|
+
* (invalid, disabled, focused).
|
|
151
|
+
*
|
|
152
|
+
* State Priority:
|
|
153
|
+
* 1. Disabled (overrides all other states)
|
|
154
|
+
* 2. Invalid + Focused
|
|
155
|
+
* 3. Invalid
|
|
156
|
+
* 4. Focused
|
|
157
|
+
* 5. Default
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```tsx
|
|
161
|
+
* const styles = getInputStateStyles({ isInvalid: true, isFocused: true });
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
declare function getInputStateStyles(props: {
|
|
165
|
+
isInvalid?: boolean;
|
|
166
|
+
isDisabled?: boolean;
|
|
167
|
+
isFocused?: boolean;
|
|
168
|
+
}): "border rounded-[var(--control-border-radius)] !outline-none border-border-muted" | "border rounded-[var(--control-border-radius)] !outline-none border-feedback-error-border shadow-[inset_0_0_0_1px_var(--color-feedback-error-border)]" | "border rounded-[var(--control-border-radius)] !outline-none border-feedback-error-border" | "border rounded-[var(--control-border-radius)] !outline-none border-border-focus shadow-[inset_0_0_0_1px_var(--color-border-focus)]" | "border rounded-[var(--control-border-radius)] !outline-none border-border-input";
|
|
169
|
+
/**
|
|
170
|
+
* Generates background styles based on the transparent and disabled props.
|
|
171
|
+
* Uses Tailwind classes for consistent styling across light/dark modes.
|
|
172
|
+
*/
|
|
173
|
+
declare function getInputBackgroundStyles(props: {
|
|
174
|
+
transparent?: boolean;
|
|
175
|
+
isDisabled?: boolean;
|
|
176
|
+
}): "bg-transparent" | "bg-background-muted" | "bg-background-input";
|
|
177
|
+
/**
|
|
178
|
+
* Generates the complete set of base styles for input components.
|
|
179
|
+
* This includes state styles, background, sizing, and custom classes.
|
|
180
|
+
*
|
|
181
|
+
* @example
|
|
182
|
+
* ```tsx
|
|
183
|
+
* const styles = getInputBaseStyles({
|
|
184
|
+
* isInvalid: formState.hasError,
|
|
185
|
+
* isDisabled: isLoading,
|
|
186
|
+
* size: "md"
|
|
187
|
+
* });
|
|
188
|
+
* ```
|
|
189
|
+
*/
|
|
190
|
+
declare function getInputBaseStyles(props: InputStyleProps): string;
|
|
191
|
+
/**
|
|
192
|
+
* Generates styles for grouped form elements (like input with buttons)
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* ```tsx
|
|
196
|
+
* <div className={getFieldGroupStyles({ size: "md" })}>
|
|
197
|
+
* <Input />
|
|
198
|
+
* <Button>Submit</Button>
|
|
199
|
+
* </div>
|
|
200
|
+
* ```
|
|
201
|
+
*/
|
|
202
|
+
declare function getFieldGroupStyles(props: FieldGroupProps): string;
|
|
203
|
+
/**
|
|
204
|
+
* Label component for form fields. Supports tooltips and required field indicators.
|
|
205
|
+
*
|
|
206
|
+
* @example
|
|
207
|
+
* ```tsx
|
|
208
|
+
* <Label
|
|
209
|
+
* htmlFor="email"
|
|
210
|
+
* tooltip="Enter your work email"
|
|
211
|
+
* isRequired
|
|
212
|
+
* >
|
|
213
|
+
* Email Address
|
|
214
|
+
* </Label>
|
|
215
|
+
* ```
|
|
216
|
+
*/
|
|
217
|
+
declare function Label({ children, size, tooltip, isRequired, className, htmlFor, }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
218
|
+
/**
|
|
219
|
+
* Description component for providing additional context about a form field.
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* ```tsx
|
|
223
|
+
* <Description>Must be at least 8 characters</Description>
|
|
224
|
+
* ```
|
|
225
|
+
*/
|
|
226
|
+
declare function Description({ size, className, children, ...props }: DescriptionProps): react_jsx_runtime.JSX.Element;
|
|
227
|
+
/**
|
|
228
|
+
* Error message component for form fields. Automatically handles
|
|
229
|
+
* accessibility attributes for screen readers.
|
|
230
|
+
*
|
|
231
|
+
* @example
|
|
232
|
+
* ```tsx
|
|
233
|
+
* {hasError && <FieldError>This field is required</FieldError>}
|
|
234
|
+
* ```
|
|
235
|
+
*/
|
|
236
|
+
declare function FieldError({ children, size, className }: FieldErrorProps): react_jsx_runtime.JSX.Element;
|
|
237
|
+
/**
|
|
238
|
+
* Base input component with consistent styling and state handling.
|
|
239
|
+
* Extends the native input element with our custom styling system.
|
|
240
|
+
*
|
|
241
|
+
* @example
|
|
242
|
+
* ```tsx
|
|
243
|
+
* <Input
|
|
244
|
+
* size="md"
|
|
245
|
+
* isInvalid={hasError}
|
|
246
|
+
* isDisabled={isLoading}
|
|
247
|
+
* transparent={false}
|
|
248
|
+
* />
|
|
249
|
+
* ```
|
|
250
|
+
*/
|
|
251
|
+
declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
252
|
+
/**
|
|
253
|
+
* Container for grouping form elements with consistent styling.
|
|
254
|
+
* Useful for creating compound components like input with buttons.
|
|
255
|
+
*
|
|
256
|
+
* @example
|
|
257
|
+
* ```tsx
|
|
258
|
+
* <FieldGroup>
|
|
259
|
+
* <Input placeholder="Search..." />
|
|
260
|
+
* <Button>Search</Button>
|
|
261
|
+
* </FieldGroup>
|
|
262
|
+
* ```
|
|
263
|
+
*/
|
|
264
|
+
declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* DateField
|
|
268
|
+
*
|
|
269
|
+
* A segmented date input with optional calendar popup. Matches the API and styling
|
|
270
|
+
* of TextField for consistency across form controls.
|
|
271
|
+
*/
|
|
272
|
+
interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps$1<T>, "isRequired" | "size" | "className">, Omit<BaseInputProps, "transparent" | "isClearable" | "onClear"> {
|
|
273
|
+
label?: string;
|
|
274
|
+
description?: string;
|
|
275
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
276
|
+
placeholder?: string;
|
|
277
|
+
tooltip?: string;
|
|
278
|
+
isRequired?: boolean;
|
|
279
|
+
className?: string;
|
|
280
|
+
validationResult?: ValidationResult;
|
|
281
|
+
/**
|
|
282
|
+
* Whether to show a calendar button for date selection
|
|
283
|
+
* @default true
|
|
284
|
+
*/
|
|
285
|
+
showCalendar?: boolean;
|
|
286
|
+
/**
|
|
287
|
+
* Whether to reserve space for error messages to prevent layout shift
|
|
288
|
+
* @default true
|
|
289
|
+
*/
|
|
290
|
+
reserveErrorSpace?: boolean;
|
|
291
|
+
}
|
|
292
|
+
/**
|
|
293
|
+
* Renders an Edges DateField with label, description, validation states,
|
|
294
|
+
* and optional calendar picker.
|
|
295
|
+
*/
|
|
296
|
+
declare function DateField<T extends DateValue>({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, showCalendar, reserveErrorSpace, validationResult, className, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
297
|
+
|
|
298
|
+
interface FileUploadProps {
|
|
299
|
+
/**
|
|
300
|
+
* Current file URL or preview
|
|
301
|
+
*/
|
|
302
|
+
value?: string;
|
|
303
|
+
/**
|
|
304
|
+
* Callback when file is selected
|
|
305
|
+
*/
|
|
306
|
+
onChange?: (file: File | null, url?: string) => void;
|
|
307
|
+
/**
|
|
308
|
+
* Callback when file URL changes (for external upload handlers)
|
|
309
|
+
*/
|
|
310
|
+
onUrlChange?: (url: string) => void;
|
|
311
|
+
/**
|
|
312
|
+
* Accepted file types
|
|
313
|
+
*/
|
|
314
|
+
accept?: string;
|
|
315
|
+
/**
|
|
316
|
+
* Maximum file size in bytes
|
|
317
|
+
*/
|
|
318
|
+
maxSize?: number;
|
|
319
|
+
/**
|
|
320
|
+
* Whether the component is disabled
|
|
321
|
+
*/
|
|
322
|
+
isDisabled?: boolean;
|
|
323
|
+
/**
|
|
324
|
+
* Custom upload handler (e.g., for cloud storage)
|
|
325
|
+
*/
|
|
326
|
+
onUpload?: (file: File) => Promise<string>;
|
|
327
|
+
/**
|
|
328
|
+
* Additional CSS classes
|
|
329
|
+
*/
|
|
330
|
+
className?: string;
|
|
331
|
+
/**
|
|
332
|
+
* Show image preview for image files
|
|
333
|
+
*/
|
|
334
|
+
showPreview?: boolean;
|
|
335
|
+
/**
|
|
336
|
+
* Placeholder text
|
|
337
|
+
*/
|
|
338
|
+
placeholder?: string;
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* FileUpload
|
|
342
|
+
*
|
|
343
|
+
* A file upload component with drag-and-drop support.
|
|
344
|
+
* Supports image preview, custom upload handlers, and file validation.
|
|
345
|
+
*/
|
|
346
|
+
declare function FileUpload({ value, onChange, onUrlChange, accept, maxSize, isDisabled, onUpload, className, showPreview, placeholder, }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
347
|
+
|
|
348
|
+
export { type BaseInputProps as B, ClearButton as C, type DateFieldProps as D, type FileUploadProps as F, Icon as I, type LabelProps as L, type Size as S, DateField as a, FileUpload as b, type IconName as c, type InputStyleProps as d, type BaseProps as e, type FieldErrorProps as f, type InputProps as g, type DescriptionProps as h, type FieldGroupProps as i, InputWrapper as j, getInputStateStyles as k, getInputBackgroundStyles as l, getInputBaseStyles as m, getFieldGroupStyles as n, Label as o, Description as p, FieldError as q, Input as r, FieldGroup as s, useInputFocus as u };
|
|
@@ -0,0 +1,348 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
|
+
import * as PhosphorIcons from '@phosphor-icons/react';
|
|
5
|
+
import { IconProps as IconProps$1 } from '@phosphor-icons/react';
|
|
6
|
+
import { TextProps, DateValue, DateFieldProps as DateFieldProps$1, ValidationResult } from 'react-aria-components';
|
|
7
|
+
|
|
8
|
+
type PhosphorIconName = keyof typeof PhosphorIcons;
|
|
9
|
+
type IconName = PhosphorIconName;
|
|
10
|
+
declare const sizePresets: {
|
|
11
|
+
readonly xs: 16;
|
|
12
|
+
readonly sm: 20;
|
|
13
|
+
readonly md: 24;
|
|
14
|
+
readonly lg: 32;
|
|
15
|
+
readonly xl: 40;
|
|
16
|
+
readonly "2xl": 48;
|
|
17
|
+
};
|
|
18
|
+
type SizePreset = keyof typeof sizePresets;
|
|
19
|
+
interface IconProps extends Omit<IconProps$1, "size"> {
|
|
20
|
+
/**
|
|
21
|
+
* The name of the Phosphor icon to render
|
|
22
|
+
* Any valid icon from @phosphor-icons/react
|
|
23
|
+
*/
|
|
24
|
+
name: PhosphorIconName;
|
|
25
|
+
/**
|
|
26
|
+
* Size of the icon - can be a preset or custom number
|
|
27
|
+
*/
|
|
28
|
+
size?: SizePreset | number;
|
|
29
|
+
/**
|
|
30
|
+
* Accessibility label (maps to aria-label)
|
|
31
|
+
*/
|
|
32
|
+
ariaLabel?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Icon
|
|
36
|
+
*
|
|
37
|
+
* Phosphor icon wrapper component with standardized sizing and styling.
|
|
38
|
+
* Provides access to the full Phosphor icon library with tree-shaking support and design system presets.
|
|
39
|
+
* - TypeScript autocomplete for all icon names
|
|
40
|
+
*
|
|
41
|
+
* Usage:
|
|
42
|
+
* ```tsx
|
|
43
|
+
* <Icon name="House" size="md" />
|
|
44
|
+
* <Icon name="User" size={32} className="text-brand" />
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
declare const Icon: React$1.MemoExoticComponent<({ name, size, color, weight, className, ariaLabel, ...props }: IconProps) => react_jsx_runtime.JSX.Element | null>;
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Control-specific style utilities for form elements and interactive components.
|
|
51
|
+
* These styles use CSS variables defined in the theme for consistent sizing
|
|
52
|
+
* and spacing across all control elements.
|
|
53
|
+
*
|
|
54
|
+
* Text sizes follow the relationships defined in theme.css:
|
|
55
|
+
* sm: --control-text-sm (maps to --text-xs)
|
|
56
|
+
* md: --control-text-md (maps to --text-sm)
|
|
57
|
+
* lg: --control-text-lg (maps to --text-base)
|
|
58
|
+
* xl: --control-text-xl (maps to --text-lg)
|
|
59
|
+
*/
|
|
60
|
+
type Size = "sm" | "md" | "lg" | "xl";
|
|
61
|
+
|
|
62
|
+
interface InputStyleProps {
|
|
63
|
+
/** Whether the input is in an invalid state */
|
|
64
|
+
isInvalid?: boolean;
|
|
65
|
+
/** Whether the input is disabled */
|
|
66
|
+
isDisabled?: boolean;
|
|
67
|
+
/** Whether the input should have a transparent background */
|
|
68
|
+
transparent?: boolean;
|
|
69
|
+
/** The size variant of the input */
|
|
70
|
+
size?: Size;
|
|
71
|
+
/** Whether the input is currently focused */
|
|
72
|
+
isFocused?: boolean;
|
|
73
|
+
/** Additional CSS classes to apply */
|
|
74
|
+
className?: string;
|
|
75
|
+
}
|
|
76
|
+
interface BaseProps {
|
|
77
|
+
/** The size variant of the component */
|
|
78
|
+
size?: Size;
|
|
79
|
+
/** Additional CSS classes to apply */
|
|
80
|
+
className?: string;
|
|
81
|
+
}
|
|
82
|
+
interface BaseInputProps extends BaseProps {
|
|
83
|
+
/** Whether the input should have a transparent background */
|
|
84
|
+
transparent?: boolean;
|
|
85
|
+
/** Whether to show a clear button when the input has a value */
|
|
86
|
+
isClearable?: boolean;
|
|
87
|
+
/** Callback when the clear button is clicked */
|
|
88
|
+
onClear?: () => void;
|
|
89
|
+
/** Whether to show a search icon */
|
|
90
|
+
showSearchIcon?: boolean;
|
|
91
|
+
/**
|
|
92
|
+
* Whether to reserve space for error messages to prevent layout shift
|
|
93
|
+
* @default true
|
|
94
|
+
*/
|
|
95
|
+
reserveErrorSpace?: boolean;
|
|
96
|
+
}
|
|
97
|
+
interface LabelProps extends BaseProps {
|
|
98
|
+
/** The label content */
|
|
99
|
+
children: React__default.ReactNode;
|
|
100
|
+
/** Optional tooltip text to show next to the label */
|
|
101
|
+
tooltip?: string;
|
|
102
|
+
/** Whether to show a required field indicator (*) */
|
|
103
|
+
isRequired?: boolean;
|
|
104
|
+
/** The ID of the input this label is associated with */
|
|
105
|
+
htmlFor?: string;
|
|
106
|
+
}
|
|
107
|
+
interface FieldErrorProps extends BaseProps {
|
|
108
|
+
/** The error message to display */
|
|
109
|
+
children: React__default.ReactNode;
|
|
110
|
+
}
|
|
111
|
+
interface InputProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">, InputStyleProps {
|
|
112
|
+
/** The size variant of the input */
|
|
113
|
+
size?: Size;
|
|
114
|
+
}
|
|
115
|
+
interface DescriptionProps extends Omit<TextProps, "className">, BaseProps {
|
|
116
|
+
/** The description content */
|
|
117
|
+
children: React__default.ReactNode;
|
|
118
|
+
}
|
|
119
|
+
interface FieldGroupProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, InputStyleProps {
|
|
120
|
+
/** Whether any child of the group is focused */
|
|
121
|
+
isFocusWithin?: boolean;
|
|
122
|
+
/** Children can be either a ReactNode or a render function */
|
|
123
|
+
children?: React__default.ReactNode | ((props: InputStyleProps) => React__default.ReactNode);
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Hook for managing input focus state
|
|
127
|
+
*/
|
|
128
|
+
declare function useInputFocus(): {
|
|
129
|
+
isFocused: boolean;
|
|
130
|
+
handleFocus: (e: React__default.FocusEvent<HTMLInputElement>, onFocus?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
|
|
131
|
+
handleBlur: (e: React__default.FocusEvent<HTMLInputElement>, onBlur?: (e: React__default.FocusEvent<HTMLInputElement>) => void) => void;
|
|
132
|
+
};
|
|
133
|
+
/**
|
|
134
|
+
* Wrapper component for input containers
|
|
135
|
+
*/
|
|
136
|
+
declare function InputWrapper({ children, className, }: {
|
|
137
|
+
children: React__default.ReactNode;
|
|
138
|
+
className?: string;
|
|
139
|
+
}): react_jsx_runtime.JSX.Element;
|
|
140
|
+
/**
|
|
141
|
+
* Clear button component for inputs
|
|
142
|
+
*/
|
|
143
|
+
declare function ClearButton({ onClick, size, className, }: {
|
|
144
|
+
onClick: () => void;
|
|
145
|
+
size?: Size;
|
|
146
|
+
className?: string;
|
|
147
|
+
}): react_jsx_runtime.JSX.Element;
|
|
148
|
+
/**
|
|
149
|
+
* Generates state-specific styles for inputs based on their current state
|
|
150
|
+
* (invalid, disabled, focused).
|
|
151
|
+
*
|
|
152
|
+
* State Priority:
|
|
153
|
+
* 1. Disabled (overrides all other states)
|
|
154
|
+
* 2. Invalid + Focused
|
|
155
|
+
* 3. Invalid
|
|
156
|
+
* 4. Focused
|
|
157
|
+
* 5. Default
|
|
158
|
+
*
|
|
159
|
+
* @example
|
|
160
|
+
* ```tsx
|
|
161
|
+
* const styles = getInputStateStyles({ isInvalid: true, isFocused: true });
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
declare function getInputStateStyles(props: {
|
|
165
|
+
isInvalid?: boolean;
|
|
166
|
+
isDisabled?: boolean;
|
|
167
|
+
isFocused?: boolean;
|
|
168
|
+
}): "border rounded-[var(--control-border-radius)] !outline-none border-border-muted" | "border rounded-[var(--control-border-radius)] !outline-none border-feedback-error-border shadow-[inset_0_0_0_1px_var(--color-feedback-error-border)]" | "border rounded-[var(--control-border-radius)] !outline-none border-feedback-error-border" | "border rounded-[var(--control-border-radius)] !outline-none border-border-focus shadow-[inset_0_0_0_1px_var(--color-border-focus)]" | "border rounded-[var(--control-border-radius)] !outline-none border-border-input";
|
|
169
|
+
/**
|
|
170
|
+
* Generates background styles based on the transparent and disabled props.
|
|
171
|
+
* Uses Tailwind classes for consistent styling across light/dark modes.
|
|
172
|
+
*/
|
|
173
|
+
declare function getInputBackgroundStyles(props: {
|
|
174
|
+
transparent?: boolean;
|
|
175
|
+
isDisabled?: boolean;
|
|
176
|
+
}): "bg-transparent" | "bg-background-muted" | "bg-background-input";
|
|
177
|
+
/**
|
|
178
|
+
* Generates the complete set of base styles for input components.
|
|
179
|
+
* This includes state styles, background, sizing, and custom classes.
|
|
180
|
+
*
|
|
181
|
+
* @example
|
|
182
|
+
* ```tsx
|
|
183
|
+
* const styles = getInputBaseStyles({
|
|
184
|
+
* isInvalid: formState.hasError,
|
|
185
|
+
* isDisabled: isLoading,
|
|
186
|
+
* size: "md"
|
|
187
|
+
* });
|
|
188
|
+
* ```
|
|
189
|
+
*/
|
|
190
|
+
declare function getInputBaseStyles(props: InputStyleProps): string;
|
|
191
|
+
/**
|
|
192
|
+
* Generates styles for grouped form elements (like input with buttons)
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* ```tsx
|
|
196
|
+
* <div className={getFieldGroupStyles({ size: "md" })}>
|
|
197
|
+
* <Input />
|
|
198
|
+
* <Button>Submit</Button>
|
|
199
|
+
* </div>
|
|
200
|
+
* ```
|
|
201
|
+
*/
|
|
202
|
+
declare function getFieldGroupStyles(props: FieldGroupProps): string;
|
|
203
|
+
/**
|
|
204
|
+
* Label component for form fields. Supports tooltips and required field indicators.
|
|
205
|
+
*
|
|
206
|
+
* @example
|
|
207
|
+
* ```tsx
|
|
208
|
+
* <Label
|
|
209
|
+
* htmlFor="email"
|
|
210
|
+
* tooltip="Enter your work email"
|
|
211
|
+
* isRequired
|
|
212
|
+
* >
|
|
213
|
+
* Email Address
|
|
214
|
+
* </Label>
|
|
215
|
+
* ```
|
|
216
|
+
*/
|
|
217
|
+
declare function Label({ children, size, tooltip, isRequired, className, htmlFor, }: LabelProps): react_jsx_runtime.JSX.Element;
|
|
218
|
+
/**
|
|
219
|
+
* Description component for providing additional context about a form field.
|
|
220
|
+
*
|
|
221
|
+
* @example
|
|
222
|
+
* ```tsx
|
|
223
|
+
* <Description>Must be at least 8 characters</Description>
|
|
224
|
+
* ```
|
|
225
|
+
*/
|
|
226
|
+
declare function Description({ size, className, children, ...props }: DescriptionProps): react_jsx_runtime.JSX.Element;
|
|
227
|
+
/**
|
|
228
|
+
* Error message component for form fields. Automatically handles
|
|
229
|
+
* accessibility attributes for screen readers.
|
|
230
|
+
*
|
|
231
|
+
* @example
|
|
232
|
+
* ```tsx
|
|
233
|
+
* {hasError && <FieldError>This field is required</FieldError>}
|
|
234
|
+
* ```
|
|
235
|
+
*/
|
|
236
|
+
declare function FieldError({ children, size, className }: FieldErrorProps): react_jsx_runtime.JSX.Element;
|
|
237
|
+
/**
|
|
238
|
+
* Base input component with consistent styling and state handling.
|
|
239
|
+
* Extends the native input element with our custom styling system.
|
|
240
|
+
*
|
|
241
|
+
* @example
|
|
242
|
+
* ```tsx
|
|
243
|
+
* <Input
|
|
244
|
+
* size="md"
|
|
245
|
+
* isInvalid={hasError}
|
|
246
|
+
* isDisabled={isLoading}
|
|
247
|
+
* transparent={false}
|
|
248
|
+
* />
|
|
249
|
+
* ```
|
|
250
|
+
*/
|
|
251
|
+
declare function Input({ size, isInvalid, isDisabled, isFocused, transparent, className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
252
|
+
/**
|
|
253
|
+
* Container for grouping form elements with consistent styling.
|
|
254
|
+
* Useful for creating compound components like input with buttons.
|
|
255
|
+
*
|
|
256
|
+
* @example
|
|
257
|
+
* ```tsx
|
|
258
|
+
* <FieldGroup>
|
|
259
|
+
* <Input placeholder="Search..." />
|
|
260
|
+
* <Button>Search</Button>
|
|
261
|
+
* </FieldGroup>
|
|
262
|
+
* ```
|
|
263
|
+
*/
|
|
264
|
+
declare function FieldGroup(props: FieldGroupProps): react_jsx_runtime.JSX.Element;
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* DateField
|
|
268
|
+
*
|
|
269
|
+
* A segmented date input with optional calendar popup. Matches the API and styling
|
|
270
|
+
* of TextField for consistency across form controls.
|
|
271
|
+
*/
|
|
272
|
+
interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps$1<T>, "isRequired" | "size" | "className">, Omit<BaseInputProps, "transparent" | "isClearable" | "onClear"> {
|
|
273
|
+
label?: string;
|
|
274
|
+
description?: string;
|
|
275
|
+
errorMessage?: string | ((validation: ValidationResult) => string);
|
|
276
|
+
placeholder?: string;
|
|
277
|
+
tooltip?: string;
|
|
278
|
+
isRequired?: boolean;
|
|
279
|
+
className?: string;
|
|
280
|
+
validationResult?: ValidationResult;
|
|
281
|
+
/**
|
|
282
|
+
* Whether to show a calendar button for date selection
|
|
283
|
+
* @default true
|
|
284
|
+
*/
|
|
285
|
+
showCalendar?: boolean;
|
|
286
|
+
/**
|
|
287
|
+
* Whether to reserve space for error messages to prevent layout shift
|
|
288
|
+
* @default true
|
|
289
|
+
*/
|
|
290
|
+
reserveErrorSpace?: boolean;
|
|
291
|
+
}
|
|
292
|
+
/**
|
|
293
|
+
* Renders an Edges DateField with label, description, validation states,
|
|
294
|
+
* and optional calendar picker.
|
|
295
|
+
*/
|
|
296
|
+
declare function DateField<T extends DateValue>({ label, description, errorMessage, size, tooltip, isRequired, isDisabled, isInvalid, showCalendar, reserveErrorSpace, validationResult, className, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
|
|
297
|
+
|
|
298
|
+
interface FileUploadProps {
|
|
299
|
+
/**
|
|
300
|
+
* Current file URL or preview
|
|
301
|
+
*/
|
|
302
|
+
value?: string;
|
|
303
|
+
/**
|
|
304
|
+
* Callback when file is selected
|
|
305
|
+
*/
|
|
306
|
+
onChange?: (file: File | null, url?: string) => void;
|
|
307
|
+
/**
|
|
308
|
+
* Callback when file URL changes (for external upload handlers)
|
|
309
|
+
*/
|
|
310
|
+
onUrlChange?: (url: string) => void;
|
|
311
|
+
/**
|
|
312
|
+
* Accepted file types
|
|
313
|
+
*/
|
|
314
|
+
accept?: string;
|
|
315
|
+
/**
|
|
316
|
+
* Maximum file size in bytes
|
|
317
|
+
*/
|
|
318
|
+
maxSize?: number;
|
|
319
|
+
/**
|
|
320
|
+
* Whether the component is disabled
|
|
321
|
+
*/
|
|
322
|
+
isDisabled?: boolean;
|
|
323
|
+
/**
|
|
324
|
+
* Custom upload handler (e.g., for cloud storage)
|
|
325
|
+
*/
|
|
326
|
+
onUpload?: (file: File) => Promise<string>;
|
|
327
|
+
/**
|
|
328
|
+
* Additional CSS classes
|
|
329
|
+
*/
|
|
330
|
+
className?: string;
|
|
331
|
+
/**
|
|
332
|
+
* Show image preview for image files
|
|
333
|
+
*/
|
|
334
|
+
showPreview?: boolean;
|
|
335
|
+
/**
|
|
336
|
+
* Placeholder text
|
|
337
|
+
*/
|
|
338
|
+
placeholder?: string;
|
|
339
|
+
}
|
|
340
|
+
/**
|
|
341
|
+
* FileUpload
|
|
342
|
+
*
|
|
343
|
+
* A file upload component with drag-and-drop support.
|
|
344
|
+
* Supports image preview, custom upload handlers, and file validation.
|
|
345
|
+
*/
|
|
346
|
+
declare function FileUpload({ value, onChange, onUrlChange, accept, maxSize, isDisabled, onUpload, className, showPreview, placeholder, }: FileUploadProps): react_jsx_runtime.JSX.Element;
|
|
347
|
+
|
|
348
|
+
export { type BaseInputProps as B, ClearButton as C, type DateFieldProps as D, type FileUploadProps as F, Icon as I, type LabelProps as L, type Size as S, DateField as a, FileUpload as b, type IconName as c, type InputStyleProps as d, type BaseProps as e, type FieldErrorProps as f, type InputProps as g, type DescriptionProps as h, type FieldGroupProps as i, InputWrapper as j, getInputStateStyles as k, getInputBackgroundStyles as l, getInputBaseStyles as m, getFieldGroupStyles as n, Label as o, Description as p, FieldError as q, Input as r, FieldGroup as s, useInputFocus as u };
|