@causw/core 0.0.8 → 0.0.10

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.d.mts CHANGED
@@ -1,295 +1,154 @@
1
- import React from 'react';
1
+ import React, { ComponentProps, ReactNode, ElementType } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { borderRadius } from '@causw/tokens';
2
4
  import { ClassValue } from 'clsx';
3
5
 
4
- type TextVariant = 'caption' | 'body2' | 'body' | 'subtitle' | 'title' | 'head' | 'fixed';
5
- type TextSize = 'sm' | 'md';
6
- type FixedSize = 12 | 14 | 15 | 16 | 18 | 20 | 24;
7
- type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-50' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
6
+ type Typography = 'caption-sm' | 'caption-sm-point' | 'caption-md' | 'caption-md-point' | 'body2-sm' | 'body2-sm-point' | 'body2-md' | 'body2-md-point' | 'body-sm' | 'body-sm-point' | 'body-md' | 'body-md-point' | 'subtitle-sm' | 'subtitle-sm-point' | 'subtitle-md' | 'subtitle-md-point' | 'title-sm' | 'title-md' | 'head-sm' | 'head-md' | 'fixed-12' | 'fixed-14' | 'fixed-15' | 'fixed-16' | 'fixed-18' | 'fixed-20' | 'fixed-24';
7
+ type TextColor = 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900' | 'blue-100' | 'blue-500' | 'blue-700' | 'red-100' | 'red-400' | 'white' | 'black';
8
+ type TextAlign = 'left' | 'center' | 'right' | 'justify';
8
9
 
9
- type BaseTextProps = React.HTMLAttributes<HTMLElement> & {
10
- point?: boolean;
11
- color?: TextColor;
12
- as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label';
10
+ /**
11
+ * Polymorphic component props (includes ref)
12
+ *
13
+ * @example
14
+ * ```tsx
15
+ * type ButtonProps<E extends React.ElementType = 'button'> =
16
+ * PolymorphicProps<E, { variant?: 'primary' | 'secondary' }>;
17
+ * ```
18
+ */
19
+ type PolymorphicProps<E extends React.ElementType = 'div', Props = object> = Props & {
20
+ as?: E;
21
+ } & Omit<React.ComponentProps<E>, keyof Props | 'as'>;
22
+ /**
23
+ * Polymorphic component props without ref
24
+ */
25
+ type PolymorphicPropsWithoutRef<E extends React.ElementType = 'div', Props = object> = Props & {
26
+ as?: E;
27
+ } & Omit<React.ComponentPropsWithoutRef<E>, keyof Props | 'as'>;
28
+
29
+ /** Text element types that can be used with as prop */
30
+ type TextElement = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label' | 'a';
31
+ /** Base text styling props - reusable for other components */
32
+ interface TextStyleProps {
33
+ /** Typography preset - format: {variant}-{size}[-point] */
34
+ typography?: Typography;
35
+ /** Text color */
36
+ textColor?: TextColor;
37
+ /** Text alignment */
38
+ align?: TextAlign;
39
+ }
40
+ /** Full Text component props with polymorphic support */
41
+ type TextProps<E extends TextElement = 'span'> = PolymorphicProps<E, TextStyleProps>;
42
+ declare const Text: {
43
+ <E extends TextElement = "span">({ typography, textColor, align, as, children, className, ...props }: TextProps<E>): React.DetailedReactHTMLElement<{
44
+ className: string;
45
+ } & Omit<TextProps<E>, "as" | "typography" | "textColor" | "align" | "className" | "children">, HTMLSpanElement>;
46
+ displayName: string;
47
+ };
48
+
49
+ interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
50
+ children: React.ReactNode;
51
+ disabled?: boolean;
52
+ error?: boolean;
53
+ }
54
+ type FieldLabelProps<E extends TextElement = 'label'> = PolymorphicProps<E, TextStyleProps>;
55
+ interface FieldDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
56
+ children: React.ReactNode;
57
+ className?: string;
58
+ }
59
+ interface FieldErrorDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {
13
60
  children: React.ReactNode;
61
+ className?: string;
62
+ }
63
+ declare const Field: {
64
+ ({ children, disabled, error, className, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
65
+ displayName: string;
66
+ } & {
67
+ Label: {
68
+ <E extends TextElement = "label">({ children, className, typography, textColor, ...labelProps }: FieldLabelProps<E>): react_jsx_runtime.JSX.Element;
69
+ displayName: string;
70
+ };
71
+ Description: {
72
+ ({ children, className, ...props }: FieldDescriptionProps): react_jsx_runtime.JSX.Element | null;
73
+ displayName: string;
74
+ };
75
+ ErrorDescription: {
76
+ ({ children, className, ...props }: FieldErrorDescriptionProps): react_jsx_runtime.JSX.Element | null;
77
+ displayName: string;
78
+ };
79
+ };
80
+
81
+ type TextInputVariant = 'default' | 'underline';
82
+ interface TextInputProps extends React.ComponentProps<'input'>, TextStyleProps {
83
+ /** Input variant style */
84
+ variant?: TextInputVariant;
85
+ /** Icon to display on the left side of input */
86
+ leftIcon?: React.ReactNode;
87
+ /** Icon to display on the right side of input */
88
+ rightIcon?: React.ReactNode;
89
+ /** Error state (overrides Field context) */
90
+ error?: boolean;
91
+ }
92
+ declare const TextInput: {
93
+ ({ id: idProp, disabled: disabledProp, error: errorProp, className, leftIcon, rightIcon, variant, typography, textColor, ...props }: TextInputProps): react_jsx_runtime.JSX.Element;
94
+ displayName: string;
14
95
  };
15
- type ResponsiveTextProps = {
16
- variant?: Exclude<TextVariant, 'fixed'>;
17
- size?: TextSize;
18
- fixedSize?: never;
96
+
97
+ interface PrimitiveProps {
98
+ /**
99
+ * Whether the element should be rendered as a child of a slot.
100
+ * @default false
101
+ */
102
+ asChild?: boolean;
103
+ }
104
+
105
+ interface TextAreaProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
106
+ children: React.ReactNode;
107
+ }
108
+ interface TextAreaInputProps extends React.ComponentProps<'textarea'> {
109
+ /** Whether to allow vertical resizing @default true */
110
+ resize?: boolean;
111
+ }
112
+ interface TextAreaFooterProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
113
+ children: React.ReactNode;
114
+ }
115
+ declare const TextArea: {
116
+ ({ className, children, ...props }: TextAreaProps): react_jsx_runtime.JSX.Element;
117
+ displayName: string;
118
+ } & {
119
+ Input: {
120
+ ({ resize, disabled: disabledProp, className, ...props }: TextAreaInputProps): react_jsx_runtime.JSX.Element;
121
+ displayName: string;
122
+ };
123
+ Footer: {
124
+ ({ className, children, ...props }: TextAreaFooterProps): react_jsx_runtime.JSX.Element;
125
+ displayName: string;
126
+ };
19
127
  };
20
- type FixedTextProps = {
21
- variant: 'fixed';
22
- size?: never;
23
- fixedSize: FixedSize;
128
+
129
+ interface RadioGroupContextValue {
130
+ name: string;
131
+ value?: string;
132
+ onChange?: (value: string) => void;
133
+ }
134
+ declare const useRadioGroupContext: () => RadioGroupContextValue | null;
135
+ interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
136
+ name: string;
137
+ value?: string;
138
+ defaultValue?: string;
139
+ onValueChange?: (value: string) => void;
140
+ children: React.ReactNode;
141
+ }
142
+ declare const RadioGroup: {
143
+ ({ name, value, defaultValue, onValueChange, className, children, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
144
+ displayName: string;
24
145
  };
25
- type TextProps = BaseTextProps & (ResponsiveTextProps | FixedTextProps);
26
- declare const Text: {
27
- ({ variant, size, fixedSize, point, color, as: Component, children, className, ...props }: TextProps): React.DetailedReactHTMLElement<{
28
- defaultChecked?: boolean | undefined;
29
- defaultValue?: string | number | readonly string[] | undefined;
30
- suppressContentEditableWarning?: boolean | undefined;
31
- suppressHydrationWarning?: boolean | undefined;
32
- accessKey?: string | undefined;
33
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
34
- autoFocus?: boolean | undefined;
35
- contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
36
- contextMenu?: string | undefined;
37
- dir?: string | undefined;
38
- draggable?: (boolean | "true" | "false") | undefined;
39
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
40
- hidden?: boolean | undefined;
41
- id?: string | undefined;
42
- lang?: string | undefined;
43
- nonce?: string | undefined;
44
- slot?: string | undefined;
45
- spellCheck?: (boolean | "true" | "false") | undefined;
46
- style?: React.CSSProperties | undefined;
47
- tabIndex?: number | undefined;
48
- title?: string | undefined;
49
- translate?: "yes" | "no" | undefined;
50
- radioGroup?: string | undefined;
51
- role?: React.AriaRole | undefined;
52
- about?: string | undefined;
53
- content?: string | undefined;
54
- datatype?: string | undefined;
55
- inlist?: any;
56
- prefix?: string | undefined;
57
- property?: string | undefined;
58
- rel?: string | undefined;
59
- resource?: string | undefined;
60
- rev?: string | undefined;
61
- typeof?: string | undefined;
62
- vocab?: string | undefined;
63
- autoCorrect?: string | undefined;
64
- autoSave?: string | undefined;
65
- itemProp?: string | undefined;
66
- itemScope?: boolean | undefined;
67
- itemType?: string | undefined;
68
- itemID?: string | undefined;
69
- itemRef?: string | undefined;
70
- results?: number | undefined;
71
- security?: string | undefined;
72
- unselectable?: "on" | "off" | undefined;
73
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
74
- is?: string | undefined;
75
- exportparts?: string | undefined;
76
- part?: string | undefined;
77
- "aria-activedescendant"?: string | undefined;
78
- "aria-atomic"?: (boolean | "true" | "false") | undefined;
79
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
80
- "aria-braillelabel"?: string | undefined;
81
- "aria-brailleroledescription"?: string | undefined;
82
- "aria-busy"?: (boolean | "true" | "false") | undefined;
83
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
84
- "aria-colcount"?: number | undefined;
85
- "aria-colindex"?: number | undefined;
86
- "aria-colindextext"?: string | undefined;
87
- "aria-colspan"?: number | undefined;
88
- "aria-controls"?: string | undefined;
89
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
90
- "aria-describedby"?: string | undefined;
91
- "aria-description"?: string | undefined;
92
- "aria-details"?: string | undefined;
93
- "aria-disabled"?: (boolean | "true" | "false") | undefined;
94
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
95
- "aria-errormessage"?: string | undefined;
96
- "aria-expanded"?: (boolean | "true" | "false") | undefined;
97
- "aria-flowto"?: string | undefined;
98
- "aria-grabbed"?: (boolean | "true" | "false") | undefined;
99
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
100
- "aria-hidden"?: (boolean | "true" | "false") | undefined;
101
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
102
- "aria-keyshortcuts"?: string | undefined;
103
- "aria-label"?: string | undefined;
104
- "aria-labelledby"?: string | undefined;
105
- "aria-level"?: number | undefined;
106
- "aria-live"?: "off" | "assertive" | "polite" | undefined;
107
- "aria-modal"?: (boolean | "true" | "false") | undefined;
108
- "aria-multiline"?: (boolean | "true" | "false") | undefined;
109
- "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
110
- "aria-orientation"?: "horizontal" | "vertical" | undefined;
111
- "aria-owns"?: string | undefined;
112
- "aria-placeholder"?: string | undefined;
113
- "aria-posinset"?: number | undefined;
114
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
115
- "aria-readonly"?: (boolean | "true" | "false") | undefined;
116
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
117
- "aria-required"?: (boolean | "true" | "false") | undefined;
118
- "aria-roledescription"?: string | undefined;
119
- "aria-rowcount"?: number | undefined;
120
- "aria-rowindex"?: number | undefined;
121
- "aria-rowindextext"?: string | undefined;
122
- "aria-rowspan"?: number | undefined;
123
- "aria-selected"?: (boolean | "true" | "false") | undefined;
124
- "aria-setsize"?: number | undefined;
125
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
126
- "aria-valuemax"?: number | undefined;
127
- "aria-valuemin"?: number | undefined;
128
- "aria-valuenow"?: number | undefined;
129
- "aria-valuetext"?: string | undefined;
130
- dangerouslySetInnerHTML?: {
131
- __html: string | TrustedHTML;
132
- } | undefined;
133
- onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
134
- onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
135
- onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
136
- onCutCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
137
- onPaste?: React.ClipboardEventHandler<HTMLElement> | undefined;
138
- onPasteCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
139
- onCompositionEnd?: React.CompositionEventHandler<HTMLElement> | undefined;
140
- onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
141
- onCompositionStart?: React.CompositionEventHandler<HTMLElement> | undefined;
142
- onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
143
- onCompositionUpdate?: React.CompositionEventHandler<HTMLElement> | undefined;
144
- onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement> | undefined;
145
- onFocus?: React.FocusEventHandler<HTMLElement> | undefined;
146
- onFocusCapture?: React.FocusEventHandler<HTMLElement> | undefined;
147
- onBlur?: React.FocusEventHandler<HTMLElement> | undefined;
148
- onBlurCapture?: React.FocusEventHandler<HTMLElement> | undefined;
149
- onChange?: React.FormEventHandler<HTMLElement> | undefined;
150
- onChangeCapture?: React.FormEventHandler<HTMLElement> | undefined;
151
- onBeforeInput?: React.InputEventHandler<HTMLElement> | undefined;
152
- onBeforeInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
153
- onInput?: React.FormEventHandler<HTMLElement> | undefined;
154
- onInputCapture?: React.FormEventHandler<HTMLElement> | undefined;
155
- onReset?: React.FormEventHandler<HTMLElement> | undefined;
156
- onResetCapture?: React.FormEventHandler<HTMLElement> | undefined;
157
- onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
158
- onSubmitCapture?: React.FormEventHandler<HTMLElement> | undefined;
159
- onInvalid?: React.FormEventHandler<HTMLElement> | undefined;
160
- onInvalidCapture?: React.FormEventHandler<HTMLElement> | undefined;
161
- onLoad?: React.ReactEventHandler<HTMLElement> | undefined;
162
- onLoadCapture?: React.ReactEventHandler<HTMLElement> | undefined;
163
- onError?: React.ReactEventHandler<HTMLElement> | undefined;
164
- onErrorCapture?: React.ReactEventHandler<HTMLElement> | undefined;
165
- onKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
166
- onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
167
- onKeyPress?: React.KeyboardEventHandler<HTMLElement> | undefined;
168
- onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
169
- onKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
170
- onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement> | undefined;
171
- onAbort?: React.ReactEventHandler<HTMLElement> | undefined;
172
- onAbortCapture?: React.ReactEventHandler<HTMLElement> | undefined;
173
- onCanPlay?: React.ReactEventHandler<HTMLElement> | undefined;
174
- onCanPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
175
- onCanPlayThrough?: React.ReactEventHandler<HTMLElement> | undefined;
176
- onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement> | undefined;
177
- onDurationChange?: React.ReactEventHandler<HTMLElement> | undefined;
178
- onDurationChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
179
- onEmptied?: React.ReactEventHandler<HTMLElement> | undefined;
180
- onEmptiedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
181
- onEncrypted?: React.ReactEventHandler<HTMLElement> | undefined;
182
- onEncryptedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
183
- onEnded?: React.ReactEventHandler<HTMLElement> | undefined;
184
- onEndedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
185
- onLoadedData?: React.ReactEventHandler<HTMLElement> | undefined;
186
- onLoadedDataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
187
- onLoadedMetadata?: React.ReactEventHandler<HTMLElement> | undefined;
188
- onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement> | undefined;
189
- onLoadStart?: React.ReactEventHandler<HTMLElement> | undefined;
190
- onLoadStartCapture?: React.ReactEventHandler<HTMLElement> | undefined;
191
- onPause?: React.ReactEventHandler<HTMLElement> | undefined;
192
- onPauseCapture?: React.ReactEventHandler<HTMLElement> | undefined;
193
- onPlay?: React.ReactEventHandler<HTMLElement> | undefined;
194
- onPlayCapture?: React.ReactEventHandler<HTMLElement> | undefined;
195
- onPlaying?: React.ReactEventHandler<HTMLElement> | undefined;
196
- onPlayingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
197
- onProgress?: React.ReactEventHandler<HTMLElement> | undefined;
198
- onProgressCapture?: React.ReactEventHandler<HTMLElement> | undefined;
199
- onRateChange?: React.ReactEventHandler<HTMLElement> | undefined;
200
- onRateChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
201
- onSeeked?: React.ReactEventHandler<HTMLElement> | undefined;
202
- onSeekedCapture?: React.ReactEventHandler<HTMLElement> | undefined;
203
- onSeeking?: React.ReactEventHandler<HTMLElement> | undefined;
204
- onSeekingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
205
- onStalled?: React.ReactEventHandler<HTMLElement> | undefined;
206
- onStalledCapture?: React.ReactEventHandler<HTMLElement> | undefined;
207
- onSuspend?: React.ReactEventHandler<HTMLElement> | undefined;
208
- onSuspendCapture?: React.ReactEventHandler<HTMLElement> | undefined;
209
- onTimeUpdate?: React.ReactEventHandler<HTMLElement> | undefined;
210
- onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement> | undefined;
211
- onVolumeChange?: React.ReactEventHandler<HTMLElement> | undefined;
212
- onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement> | undefined;
213
- onWaiting?: React.ReactEventHandler<HTMLElement> | undefined;
214
- onWaitingCapture?: React.ReactEventHandler<HTMLElement> | undefined;
215
- onAuxClick?: React.MouseEventHandler<HTMLElement> | undefined;
216
- onAuxClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
217
- onClick?: React.MouseEventHandler<HTMLElement> | undefined;
218
- onClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
219
- onContextMenu?: React.MouseEventHandler<HTMLElement> | undefined;
220
- onContextMenuCapture?: React.MouseEventHandler<HTMLElement> | undefined;
221
- onDoubleClick?: React.MouseEventHandler<HTMLElement> | undefined;
222
- onDoubleClickCapture?: React.MouseEventHandler<HTMLElement> | undefined;
223
- onDrag?: React.DragEventHandler<HTMLElement> | undefined;
224
- onDragCapture?: React.DragEventHandler<HTMLElement> | undefined;
225
- onDragEnd?: React.DragEventHandler<HTMLElement> | undefined;
226
- onDragEndCapture?: React.DragEventHandler<HTMLElement> | undefined;
227
- onDragEnter?: React.DragEventHandler<HTMLElement> | undefined;
228
- onDragEnterCapture?: React.DragEventHandler<HTMLElement> | undefined;
229
- onDragExit?: React.DragEventHandler<HTMLElement> | undefined;
230
- onDragExitCapture?: React.DragEventHandler<HTMLElement> | undefined;
231
- onDragLeave?: React.DragEventHandler<HTMLElement> | undefined;
232
- onDragLeaveCapture?: React.DragEventHandler<HTMLElement> | undefined;
233
- onDragOver?: React.DragEventHandler<HTMLElement> | undefined;
234
- onDragOverCapture?: React.DragEventHandler<HTMLElement> | undefined;
235
- onDragStart?: React.DragEventHandler<HTMLElement> | undefined;
236
- onDragStartCapture?: React.DragEventHandler<HTMLElement> | undefined;
237
- onDrop?: React.DragEventHandler<HTMLElement> | undefined;
238
- onDropCapture?: React.DragEventHandler<HTMLElement> | undefined;
239
- onMouseDown?: React.MouseEventHandler<HTMLElement> | undefined;
240
- onMouseDownCapture?: React.MouseEventHandler<HTMLElement> | undefined;
241
- onMouseEnter?: React.MouseEventHandler<HTMLElement> | undefined;
242
- onMouseLeave?: React.MouseEventHandler<HTMLElement> | undefined;
243
- onMouseMove?: React.MouseEventHandler<HTMLElement> | undefined;
244
- onMouseMoveCapture?: React.MouseEventHandler<HTMLElement> | undefined;
245
- onMouseOut?: React.MouseEventHandler<HTMLElement> | undefined;
246
- onMouseOutCapture?: React.MouseEventHandler<HTMLElement> | undefined;
247
- onMouseOver?: React.MouseEventHandler<HTMLElement> | undefined;
248
- onMouseOverCapture?: React.MouseEventHandler<HTMLElement> | undefined;
249
- onMouseUp?: React.MouseEventHandler<HTMLElement> | undefined;
250
- onMouseUpCapture?: React.MouseEventHandler<HTMLElement> | undefined;
251
- onSelect?: React.ReactEventHandler<HTMLElement> | undefined;
252
- onSelectCapture?: React.ReactEventHandler<HTMLElement> | undefined;
253
- onTouchCancel?: React.TouchEventHandler<HTMLElement> | undefined;
254
- onTouchCancelCapture?: React.TouchEventHandler<HTMLElement> | undefined;
255
- onTouchEnd?: React.TouchEventHandler<HTMLElement> | undefined;
256
- onTouchEndCapture?: React.TouchEventHandler<HTMLElement> | undefined;
257
- onTouchMove?: React.TouchEventHandler<HTMLElement> | undefined;
258
- onTouchMoveCapture?: React.TouchEventHandler<HTMLElement> | undefined;
259
- onTouchStart?: React.TouchEventHandler<HTMLElement> | undefined;
260
- onTouchStartCapture?: React.TouchEventHandler<HTMLElement> | undefined;
261
- onPointerDown?: React.PointerEventHandler<HTMLElement> | undefined;
262
- onPointerDownCapture?: React.PointerEventHandler<HTMLElement> | undefined;
263
- onPointerMove?: React.PointerEventHandler<HTMLElement> | undefined;
264
- onPointerMoveCapture?: React.PointerEventHandler<HTMLElement> | undefined;
265
- onPointerUp?: React.PointerEventHandler<HTMLElement> | undefined;
266
- onPointerUpCapture?: React.PointerEventHandler<HTMLElement> | undefined;
267
- onPointerCancel?: React.PointerEventHandler<HTMLElement> | undefined;
268
- onPointerCancelCapture?: React.PointerEventHandler<HTMLElement> | undefined;
269
- onPointerEnter?: React.PointerEventHandler<HTMLElement> | undefined;
270
- onPointerLeave?: React.PointerEventHandler<HTMLElement> | undefined;
271
- onPointerOver?: React.PointerEventHandler<HTMLElement> | undefined;
272
- onPointerOverCapture?: React.PointerEventHandler<HTMLElement> | undefined;
273
- onPointerOut?: React.PointerEventHandler<HTMLElement> | undefined;
274
- onPointerOutCapture?: React.PointerEventHandler<HTMLElement> | undefined;
275
- onGotPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
276
- onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
277
- onLostPointerCapture?: React.PointerEventHandler<HTMLElement> | undefined;
278
- onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement> | undefined;
279
- onScroll?: React.UIEventHandler<HTMLElement> | undefined;
280
- onScrollCapture?: React.UIEventHandler<HTMLElement> | undefined;
281
- onWheel?: React.WheelEventHandler<HTMLElement> | undefined;
282
- onWheelCapture?: React.WheelEventHandler<HTMLElement> | undefined;
283
- onAnimationStart?: React.AnimationEventHandler<HTMLElement> | undefined;
284
- onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
285
- onAnimationEnd?: React.AnimationEventHandler<HTMLElement> | undefined;
286
- onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
287
- onAnimationIteration?: React.AnimationEventHandler<HTMLElement> | undefined;
288
- onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement> | undefined;
289
- onTransitionEnd?: React.TransitionEventHandler<HTMLElement> | undefined;
290
- onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
291
- className: string;
292
- }, HTMLElement>;
146
+ interface RadioProps extends Omit<React.ComponentProps<'input'>, 'type'> {
147
+ value: string;
148
+ children: React.ReactNode;
149
+ }
150
+ declare const Radio: {
151
+ ({ value, children, className, checked: checkedProp, onChange, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
293
152
  displayName: string;
294
153
  };
295
154
 
@@ -302,4 +161,189 @@ declare const Text: {
302
161
  */
303
162
  declare function mergeStyles(...inputs: ClassValue[]): string;
304
163
 
305
- export { type FixedSize, Text, type TextProps, type TextSize, type TextVariant, mergeStyles };
164
+ interface ToggleRootProps extends Omit<React.ComponentProps<'label'>, 'onChange'> {
165
+ checked?: boolean;
166
+ defaultChecked?: boolean;
167
+ onCheckedChange?: (checked: boolean) => void;
168
+ disabled?: boolean;
169
+ children?: React.ReactNode;
170
+ }
171
+ type ToggleLabelProps<E extends TextElement = 'span'> = PolymorphicProps<E, TextStyleProps>;
172
+ declare const Toggle: {
173
+ ({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, children, className, ...props }: ToggleRootProps): react_jsx_runtime.JSX.Element;
174
+ displayName: string;
175
+ } & {
176
+ Switch: {
177
+ (): react_jsx_runtime.JSX.Element;
178
+ displayName: string;
179
+ };
180
+ Label: {
181
+ <E extends TextElement = "span">({ children, typography, textColor, ...props }: ToggleLabelProps<E>): react_jsx_runtime.JSX.Element;
182
+ displayName: string;
183
+ };
184
+ };
185
+
186
+ interface CheckboxRootProps extends Omit<React.ComponentProps<'label'>, 'onChange'> {
187
+ checked?: boolean;
188
+ defaultChecked?: boolean;
189
+ onCheckedChange?: (checked: boolean) => void;
190
+ disabled?: boolean;
191
+ children?: React.ReactNode;
192
+ }
193
+ type CheckboxLabelProps<E extends TextElement = 'span'> = PolymorphicProps<E, TextStyleProps>;
194
+ declare const Checkbox: {
195
+ ({ checked: checkedProp, defaultChecked, onCheckedChange, disabled, children, className, ...props }: CheckboxRootProps): react_jsx_runtime.JSX.Element;
196
+ displayName: string;
197
+ } & {
198
+ Indicator: {
199
+ (): react_jsx_runtime.JSX.Element;
200
+ displayName: string;
201
+ };
202
+ Label: {
203
+ <E extends TextElement = "span">({ children, typography, textColor, ...props }: CheckboxLabelProps<E>): react_jsx_runtime.JSX.Element;
204
+ displayName: string;
205
+ };
206
+ };
207
+
208
+ type ButtonSize = 'sm' | 'md';
209
+ type ButtonColor = 'white' | 'gray' | 'red';
210
+
211
+ interface ButtonProps extends ComponentProps<'button'> {
212
+ size?: ButtonSize;
213
+ color?: ButtonColor;
214
+ active?: boolean;
215
+ fullWidth?: boolean;
216
+ }
217
+ declare function Button({ size, color, active, fullWidth, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
218
+
219
+ type CTAButtonColor = 'blue' | 'red' | 'dark' | 'light' | 'white';
220
+
221
+ interface CTAButtonProps extends ComponentProps<'button'> {
222
+ color?: CTAButtonColor;
223
+ fullWidth?: boolean;
224
+ asChild?: boolean;
225
+ }
226
+ declare function CTAButton({ color, fullWidth, disabled, asChild, className, children, ...props }: CTAButtonProps): react_jsx_runtime.JSX.Element;
227
+
228
+ interface FloatingActionButtonProps extends ComponentProps<'button'> {
229
+ leftIcon?: ReactNode;
230
+ rightIcon?: ReactNode;
231
+ asChild?: boolean;
232
+ }
233
+ declare function FloatingActionButton({ leftIcon, rightIcon, disabled, asChild, children, className, ...props }: FloatingActionButtonProps): react_jsx_runtime.JSX.Element;
234
+
235
+ type BoxRadius = 'none' | keyof typeof borderRadius;
236
+ type BoxPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg';
237
+ type BoxDisplay = 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'none';
238
+ type BoxBackground = 'default' | 'subtle' | 'inverse' | 'transparent';
239
+ interface BoxStylesOptions {
240
+ padding?: BoxPadding;
241
+ radius?: BoxRadius;
242
+ display?: BoxDisplay;
243
+ background?: BoxBackground;
244
+ }
245
+
246
+ type BoxBaseProps = BoxStylesOptions;
247
+ type BoxProps<E extends ElementType = 'div'> = PolymorphicProps<E, BoxBaseProps>;
248
+ declare const Box: {
249
+ <E extends ElementType = "div">({ as, padding, radius, display, background, className, children, ...props }: BoxProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
250
+ displayName: string;
251
+ };
252
+
253
+ type StackDirection = 'horizontal' | 'vertical';
254
+ type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
255
+ type StackAlign = 'start' | 'center' | 'end' | 'stretch';
256
+ type StackJustify = 'start' | 'center' | 'end' | 'between';
257
+ interface StackStylesOptions {
258
+ direction?: StackDirection;
259
+ gap?: StackGap;
260
+ align?: StackAlign;
261
+ justify?: StackJustify;
262
+ }
263
+
264
+ type StackBaseProps = StackStylesOptions;
265
+ type StackProps<E extends ElementType = 'div'> = PolymorphicProps<E, StackBaseProps>;
266
+ /**
267
+ * Stack is a layout component that arranges its children in a horizontal or vertical line.
268
+ * It abstracts Flexbox behaviors to easily manage spacing, alignment, and direction.
269
+ */
270
+ declare const Stack: {
271
+ <E extends ElementType = "div">({ as, direction, gap, align, justify, className, children, ...props }: StackProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
272
+ displayName: string;
273
+ };
274
+
275
+ type VStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
276
+ declare const VStack: {
277
+ <E extends ElementType = "div">({ ...props }: VStackProps<E>): react_jsx_runtime.JSX.Element;
278
+ displayName: string;
279
+ };
280
+
281
+ type HStackProps<E extends ElementType = 'div'> = Omit<StackProps<E>, 'direction'>;
282
+ declare const HStack: {
283
+ <E extends ElementType = "div">({ ...props }: HStackProps<E>): react_jsx_runtime.JSX.Element;
284
+ displayName: string;
285
+ };
286
+
287
+ type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
288
+ type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
289
+ type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
290
+ type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
291
+ type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
292
+ interface FlexStylesOptions {
293
+ direction?: FlexDirection;
294
+ gap?: FlexGap;
295
+ align?: FlexAlign;
296
+ justify?: FlexJustify;
297
+ wrap?: FlexWrap;
298
+ }
299
+
300
+ type FlexBaseProps = FlexStylesOptions;
301
+ type FlexProps<E extends ElementType = 'div'> = PolymorphicProps<E, FlexBaseProps>;
302
+ declare const Flex: {
303
+ <E extends ElementType = "div">({ as, direction, gap, align, justify, wrap, className, children, ...props }: FlexProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
304
+ displayName: string;
305
+ };
306
+
307
+ type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'none';
308
+ type GridRows = 1 | 2 | 3 | 4 | 5 | 6 | 'none';
309
+ type GridGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
310
+ type GridFlow = 'row' | 'col' | 'row-dense' | 'col-dense';
311
+ interface GridStylesOptions {
312
+ columns?: GridColumns;
313
+ rows?: GridRows;
314
+ gap?: GridGap;
315
+ flow?: GridFlow;
316
+ }
317
+
318
+ type GridBaseProps = GridStylesOptions;
319
+ type GridProps<E extends ElementType = 'div'> = PolymorphicProps<E, GridBaseProps>;
320
+ declare const Grid: {
321
+ <E extends ElementType = "div">({ as, columns, rows, gap, flow, className, children, ...props }: GridProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
322
+ displayName: string;
323
+ };
324
+
325
+ type SeparatorOrientation = 'horizontal' | 'vertical';
326
+ interface SeparatorStylesOptions {
327
+ orientation?: SeparatorOrientation;
328
+ }
329
+
330
+ type SeparatorBaseProps = SeparatorStylesOptions;
331
+ type SeparatorProps<E extends ElementType = 'div'> = PolymorphicProps<E, SeparatorBaseProps>;
332
+ declare const Separator: {
333
+ <E extends ElementType = "div">({ as, orientation, className, ...props }: SeparatorProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
334
+ displayName: string;
335
+ };
336
+
337
+ type SpacerSize = 1 | 2 | 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 'auto';
338
+ interface SpacerStylesOptions {
339
+ size?: SpacerSize;
340
+ }
341
+
342
+ type SpacerBaseProps = SpacerStylesOptions;
343
+ type SpacerProps<E extends ElementType = 'div'> = PolymorphicProps<E, SpacerBaseProps>;
344
+ declare const Spacer: {
345
+ <E extends ElementType = "div">({ as, size, className, ...props }: SpacerProps<E>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
346
+ displayName: string;
347
+ };
348
+
349
+ export { Box, type BoxBackground, type BoxDisplay, type BoxPadding, type BoxProps, type BoxRadius, Button, type ButtonProps, CTAButton, type CTAButtonProps, Checkbox, type CheckboxLabelProps, type CheckboxRootProps, Field, type FieldDescriptionProps, type FieldErrorDescriptionProps, type FieldLabelProps, type FieldProps, Flex, type FlexAlign, type FlexDirection, type FlexGap, type FlexJustify, type FlexProps, FloatingActionButton, type FloatingActionButtonProps, Grid, type GridColumns, type GridFlow, type GridGap, type GridProps, type GridRows, HStack, type HStackProps, type PolymorphicProps, type PolymorphicPropsWithoutRef, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Separator, type SeparatorOrientation, type SeparatorProps, Spacer, type SpacerProps, type SpacerSize, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, Text, TextArea, type TextAreaFooterProps, type TextAreaInputProps, type TextAreaProps, type TextColor, TextInput, type TextInputProps, type TextInputVariant, type TextProps, type TextStyleProps, Toggle, type ToggleLabelProps, type ToggleRootProps, type Typography, VStack, type VStackProps, mergeStyles, useRadioGroupContext };