@entropix/react-native 0.1.1 → 0.2.0
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 +824 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +269 -2
- package/dist/index.d.ts +269 -2
- package/dist/index.js +818 -3
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { tokens as tokens$1 } from '@entropix/tokens/native';
|
|
4
4
|
import { tokens } from '@entropix/tokens/native/light';
|
|
5
|
-
import { AccessibilityProps, UseDialogOptions, UseTabsOptions, UseAccordionOptions, UseMenuOptions } from '@entropix/core';
|
|
5
|
+
import { AccessibilityProps, UseDialogOptions, UseTabsOptions, UseAccordionOptions, UseMenuOptions, UseInputOptions, UseRadioGroupOptions, UseSelectOptions } from '@entropix/core';
|
|
6
6
|
import { AccessibilityRole, AccessibilityState, AccessibilityValue, PressableProps, StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
|
|
7
7
|
|
|
8
8
|
type EntropixTheme = typeof tokens;
|
|
@@ -309,6 +309,273 @@ interface MenuItemProps extends Omit<PressableProps, "onPress" | "disabled" | "s
|
|
|
309
309
|
}
|
|
310
310
|
declare function MenuItem({ index, onSelect, disabled, children, style, textStyle, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
|
|
311
311
|
|
|
312
|
+
type InputSize = "sm" | "md" | "lg";
|
|
313
|
+
interface InputProps {
|
|
314
|
+
/** Controlled value */
|
|
315
|
+
value?: string;
|
|
316
|
+
/** Default value for uncontrolled mode */
|
|
317
|
+
defaultValue?: string;
|
|
318
|
+
/** Called when the value changes */
|
|
319
|
+
onChange?: (value: string) => void;
|
|
320
|
+
/** Whether the input is disabled */
|
|
321
|
+
disabled?: boolean;
|
|
322
|
+
/** Whether the input is read-only */
|
|
323
|
+
readOnly?: boolean;
|
|
324
|
+
/** Whether the input is required */
|
|
325
|
+
required?: boolean;
|
|
326
|
+
/** Whether the input is in an invalid state */
|
|
327
|
+
invalid?: boolean;
|
|
328
|
+
/** Label text displayed above the input */
|
|
329
|
+
label?: string;
|
|
330
|
+
/** Helper text displayed below the input */
|
|
331
|
+
helperText?: string;
|
|
332
|
+
/** Error message displayed below the input when invalid */
|
|
333
|
+
errorMessage?: string;
|
|
334
|
+
/** Placeholder text */
|
|
335
|
+
placeholder?: string;
|
|
336
|
+
/** Input type — maps to React Native keyboardType */
|
|
337
|
+
type?: UseInputOptions["type"];
|
|
338
|
+
/** Size variant. Default: "md" */
|
|
339
|
+
size?: InputSize;
|
|
340
|
+
/** Override wrapper View style */
|
|
341
|
+
style?: StyleProp<ViewStyle>;
|
|
342
|
+
/** Override TextInput style */
|
|
343
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
344
|
+
/** Override label and helper Text style */
|
|
345
|
+
textStyle?: TextStyle;
|
|
346
|
+
/** testID for testing */
|
|
347
|
+
testID?: string;
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* Input -- styled text input with label, helper text, and error message.
|
|
351
|
+
*
|
|
352
|
+
* ```tsx
|
|
353
|
+
* <Input
|
|
354
|
+
* label="Email"
|
|
355
|
+
* placeholder="you@example.com"
|
|
356
|
+
* type="email"
|
|
357
|
+
* onChange={setEmail}
|
|
358
|
+
* />
|
|
359
|
+
* ```
|
|
360
|
+
*/
|
|
361
|
+
declare function Input({ value, defaultValue, onChange, disabled, readOnly, required, invalid, label, helperText, errorMessage, placeholder, type, size, style, inputStyle, textStyle, testID, }: InputProps): react_jsx_runtime.JSX.Element;
|
|
362
|
+
|
|
363
|
+
type TextareaSize = "sm" | "md" | "lg";
|
|
364
|
+
interface TextareaProps {
|
|
365
|
+
/** Controlled value */
|
|
366
|
+
value?: string;
|
|
367
|
+
/** Default value for uncontrolled mode */
|
|
368
|
+
defaultValue?: string;
|
|
369
|
+
/** Called when the value changes */
|
|
370
|
+
onChange?: (value: string) => void;
|
|
371
|
+
/** Whether the textarea is disabled */
|
|
372
|
+
disabled?: boolean;
|
|
373
|
+
/** Whether the textarea is read-only */
|
|
374
|
+
readOnly?: boolean;
|
|
375
|
+
/** Whether the textarea is required */
|
|
376
|
+
required?: boolean;
|
|
377
|
+
/** Whether the textarea is in an invalid state */
|
|
378
|
+
invalid?: boolean;
|
|
379
|
+
/** Label text displayed above the textarea */
|
|
380
|
+
label?: string;
|
|
381
|
+
/** Helper text displayed below the textarea */
|
|
382
|
+
helperText?: string;
|
|
383
|
+
/** Error message displayed below the textarea when invalid */
|
|
384
|
+
errorMessage?: string;
|
|
385
|
+
/** Placeholder text */
|
|
386
|
+
placeholder?: string;
|
|
387
|
+
/** Number of visible lines. Default: 4 */
|
|
388
|
+
numberOfLines?: number;
|
|
389
|
+
/** Size variant. Default: "md" */
|
|
390
|
+
size?: TextareaSize;
|
|
391
|
+
/** Override wrapper View style */
|
|
392
|
+
style?: StyleProp<ViewStyle>;
|
|
393
|
+
/** Override TextInput style */
|
|
394
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
395
|
+
/** Override label and helper Text style */
|
|
396
|
+
textStyle?: TextStyle;
|
|
397
|
+
/** testID for testing */
|
|
398
|
+
testID?: string;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Textarea -- multiline text input with label, helper text, and error message.
|
|
402
|
+
*
|
|
403
|
+
* ```tsx
|
|
404
|
+
* <Textarea
|
|
405
|
+
* label="Description"
|
|
406
|
+
* placeholder="Enter description..."
|
|
407
|
+
* numberOfLines={6}
|
|
408
|
+
* onChange={setDescription}
|
|
409
|
+
* />
|
|
410
|
+
* ```
|
|
411
|
+
*/
|
|
412
|
+
declare function Textarea({ value, defaultValue, onChange, disabled, readOnly, required, invalid, label, helperText, errorMessage, placeholder, numberOfLines, size, style, inputStyle, textStyle, testID, }: TextareaProps): react_jsx_runtime.JSX.Element;
|
|
413
|
+
|
|
414
|
+
type CheckboxSize = "sm" | "md" | "lg";
|
|
415
|
+
interface CheckboxProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
416
|
+
/** Controlled checked state */
|
|
417
|
+
checked?: boolean;
|
|
418
|
+
/** Default checked state for uncontrolled mode */
|
|
419
|
+
defaultChecked?: boolean;
|
|
420
|
+
/** Called when checked state changes */
|
|
421
|
+
onChange?: (checked: boolean) => void;
|
|
422
|
+
/** Whether the checkbox is disabled */
|
|
423
|
+
disabled?: boolean;
|
|
424
|
+
/** Whether the checkbox is in an indeterminate state */
|
|
425
|
+
indeterminate?: boolean;
|
|
426
|
+
/** Accessible label */
|
|
427
|
+
label?: string;
|
|
428
|
+
/** Size variant. Default: "md" */
|
|
429
|
+
size?: CheckboxSize;
|
|
430
|
+
/** Override container style */
|
|
431
|
+
style?: StyleProp<ViewStyle>;
|
|
432
|
+
/** Override label text style */
|
|
433
|
+
textStyle?: TextStyle;
|
|
434
|
+
children?: React.ReactNode;
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Checkbox -- styled checkbox with indicator box and label.
|
|
438
|
+
*
|
|
439
|
+
* Renders a row with a square indicator (filled when checked with
|
|
440
|
+
* a checkmark, dash when indeterminate) and a text label.
|
|
441
|
+
*
|
|
442
|
+
* ```tsx
|
|
443
|
+
* <Checkbox onChange={setAccepted} label="Accept Terms">
|
|
444
|
+
* I agree to the terms and conditions
|
|
445
|
+
* </Checkbox>
|
|
446
|
+
* ```
|
|
447
|
+
*/
|
|
448
|
+
declare function Checkbox({ checked, defaultChecked, onChange, disabled, indeterminate, label, size, style, textStyle, children, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
449
|
+
|
|
450
|
+
interface RadioGroupProps extends UseRadioGroupOptions {
|
|
451
|
+
/** Label text for the radio group */
|
|
452
|
+
label?: string;
|
|
453
|
+
/** Override wrapper View style */
|
|
454
|
+
style?: StyleProp<ViewStyle>;
|
|
455
|
+
/** Override label text style */
|
|
456
|
+
textStyle?: TextStyle;
|
|
457
|
+
children: React.ReactNode;
|
|
458
|
+
/** testID for testing */
|
|
459
|
+
testID?: string;
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* RadioGroup -- container for RadioItem components.
|
|
463
|
+
*
|
|
464
|
+
* Provides radio group state via context. All RadioItem children
|
|
465
|
+
* share the same selection state.
|
|
466
|
+
*
|
|
467
|
+
* ```tsx
|
|
468
|
+
* <RadioGroup label="Color" onChange={setColor} defaultValue="red">
|
|
469
|
+
* <RadioItem value="red">Red</RadioItem>
|
|
470
|
+
* <RadioItem value="blue">Blue</RadioItem>
|
|
471
|
+
* </RadioGroup>
|
|
472
|
+
* ```
|
|
473
|
+
*/
|
|
474
|
+
declare function RadioGroup({ label, style, textStyle, children, testID, ...options }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
475
|
+
|
|
476
|
+
interface RadioItemProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
477
|
+
/** The value this radio option represents */
|
|
478
|
+
value: string;
|
|
479
|
+
/** Whether this option is disabled */
|
|
480
|
+
disabled?: boolean;
|
|
481
|
+
/** Override container style */
|
|
482
|
+
style?: StyleProp<ViewStyle>;
|
|
483
|
+
/** Override label text style */
|
|
484
|
+
textStyle?: TextStyle;
|
|
485
|
+
children?: React.ReactNode;
|
|
486
|
+
}
|
|
487
|
+
/**
|
|
488
|
+
* RadioItem -- individual radio option within a RadioGroup.
|
|
489
|
+
*
|
|
490
|
+
* Renders a Pressable row with a circle indicator and label text.
|
|
491
|
+
* When selected, the circle shows a filled inner dot.
|
|
492
|
+
*
|
|
493
|
+
* ```tsx
|
|
494
|
+
* <RadioItem value="option-1">Option 1</RadioItem>
|
|
495
|
+
* ```
|
|
496
|
+
*/
|
|
497
|
+
declare function RadioItem({ value, disabled, style, textStyle, children, ...rest }: RadioItemProps): react_jsx_runtime.JSX.Element;
|
|
498
|
+
|
|
499
|
+
interface SelectProps extends UseSelectOptions {
|
|
500
|
+
/** Label text displayed above the select */
|
|
501
|
+
label?: string;
|
|
502
|
+
/** Override wrapper View style */
|
|
503
|
+
style?: StyleProp<ViewStyle>;
|
|
504
|
+
/** Override label text style */
|
|
505
|
+
textStyle?: TextStyle;
|
|
506
|
+
children: React.ReactNode;
|
|
507
|
+
/** testID for testing */
|
|
508
|
+
testID?: string;
|
|
509
|
+
}
|
|
510
|
+
/**
|
|
511
|
+
* Select -- compound component root that provides select state via context.
|
|
512
|
+
*
|
|
513
|
+
* ```tsx
|
|
514
|
+
* <Select label="Country" onChange={setCountry} placeholder="Choose...">
|
|
515
|
+
* <SelectTrigger />
|
|
516
|
+
* <SelectContent>
|
|
517
|
+
* <SelectOption value="us">United States</SelectOption>
|
|
518
|
+
* <SelectOption value="ca">Canada</SelectOption>
|
|
519
|
+
* </SelectContent>
|
|
520
|
+
* </Select>
|
|
521
|
+
* ```
|
|
522
|
+
*/
|
|
523
|
+
declare function Select({ label, style, textStyle, children, testID, ...options }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
524
|
+
|
|
525
|
+
interface SelectTriggerProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
526
|
+
/** Placeholder text when no value is selected */
|
|
527
|
+
placeholder?: string;
|
|
528
|
+
/** Display label for the currently selected value */
|
|
529
|
+
displayValue?: string;
|
|
530
|
+
/** Override container style */
|
|
531
|
+
style?: StyleProp<ViewStyle>;
|
|
532
|
+
/** Override text style */
|
|
533
|
+
textStyle?: TextStyle;
|
|
534
|
+
}
|
|
535
|
+
/**
|
|
536
|
+
* SelectTrigger -- the button that opens the select dropdown.
|
|
537
|
+
*
|
|
538
|
+
* Renders as a bordered input-like row with the selected value
|
|
539
|
+
* (or placeholder) and a chevron indicator.
|
|
540
|
+
*/
|
|
541
|
+
declare function SelectTrigger({ placeholder, displayValue, style, textStyle, ...rest }: SelectTriggerProps): react_jsx_runtime.JSX.Element;
|
|
542
|
+
|
|
543
|
+
interface SelectContentProps {
|
|
544
|
+
children: React.ReactNode;
|
|
545
|
+
/** Override listbox container style */
|
|
546
|
+
style?: StyleProp<ViewStyle>;
|
|
547
|
+
/** testID for testing */
|
|
548
|
+
testID?: string;
|
|
549
|
+
}
|
|
550
|
+
/**
|
|
551
|
+
* SelectContent -- the dropdown listbox rendered inside a Modal.
|
|
552
|
+
*
|
|
553
|
+
* Displays the option list when the select is open.
|
|
554
|
+
* Tapping the overlay closes the select.
|
|
555
|
+
*/
|
|
556
|
+
declare function SelectContent({ children, style, testID }: SelectContentProps): react_jsx_runtime.JSX.Element | null;
|
|
557
|
+
|
|
558
|
+
interface SelectOptionProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
559
|
+
/** The value this option represents */
|
|
560
|
+
value: string;
|
|
561
|
+
/** Index of this option in the list (auto-assigned by SelectContent if omitted) */
|
|
562
|
+
index?: number;
|
|
563
|
+
/** Whether this option is disabled */
|
|
564
|
+
disabled?: boolean;
|
|
565
|
+
/** Override container style */
|
|
566
|
+
style?: StyleProp<ViewStyle>;
|
|
567
|
+
/** Override text style */
|
|
568
|
+
textStyle?: TextStyle;
|
|
569
|
+
children: React.ReactNode;
|
|
570
|
+
}
|
|
571
|
+
/**
|
|
572
|
+
* SelectOption -- an individual option within SelectContent.
|
|
573
|
+
*
|
|
574
|
+
* Renders as a Pressable row. Selected option gets a highlight
|
|
575
|
+
* background to indicate the current selection.
|
|
576
|
+
*/
|
|
577
|
+
declare function SelectOption({ value, index, disabled, style, textStyle, children, ...rest }: SelectOptionProps): react_jsx_runtime.JSX.Element;
|
|
578
|
+
|
|
312
579
|
/**
|
|
313
580
|
* Breakpoint values in pixels, matching @entropix/tokens breakpoint primitives.
|
|
314
581
|
*/
|
|
@@ -462,4 +729,4 @@ interface DividerProps extends ViewProps {
|
|
|
462
729
|
*/
|
|
463
730
|
declare function Divider({ orientation, spacing, style, ...rest }: DividerProps): react_jsx_runtime.JSX.Element;
|
|
464
731
|
|
|
465
|
-
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BREAKPOINTS, type Breakpoint, Button, type ButtonProps, Container, type ContainerProps, type ContainerSize, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerProps, EntropixProvider, type EntropixProviderProps, type EntropixTheme, Inline, type InlineProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type RNAccessibilityProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, type ThemeMode, Toggle, type ToggleProps, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
|
|
732
|
+
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BREAKPOINTS, type Breakpoint, Button, type ButtonProps, Checkbox, type CheckboxProps, type CheckboxSize, Container, type ContainerProps, type ContainerSize, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerProps, EntropixProvider, type EntropixProviderProps, type EntropixTheme, Inline, type InlineProps, Input, type InputProps, type InputSize, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type RNAccessibilityProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, Select, SelectContent, type SelectContentProps, SelectOption, type SelectOptionProps, type SelectProps, SelectTrigger, type SelectTriggerProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, type ThemeMode, Toggle, type ToggleProps, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import { tokens as tokens$1 } from '@entropix/tokens/native';
|
|
4
4
|
import { tokens } from '@entropix/tokens/native/light';
|
|
5
|
-
import { AccessibilityProps, UseDialogOptions, UseTabsOptions, UseAccordionOptions, UseMenuOptions } from '@entropix/core';
|
|
5
|
+
import { AccessibilityProps, UseDialogOptions, UseTabsOptions, UseAccordionOptions, UseMenuOptions, UseInputOptions, UseRadioGroupOptions, UseSelectOptions } from '@entropix/core';
|
|
6
6
|
import { AccessibilityRole, AccessibilityState, AccessibilityValue, PressableProps, StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
|
|
7
7
|
|
|
8
8
|
type EntropixTheme = typeof tokens;
|
|
@@ -309,6 +309,273 @@ interface MenuItemProps extends Omit<PressableProps, "onPress" | "disabled" | "s
|
|
|
309
309
|
}
|
|
310
310
|
declare function MenuItem({ index, onSelect, disabled, children, style, textStyle, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
|
|
311
311
|
|
|
312
|
+
type InputSize = "sm" | "md" | "lg";
|
|
313
|
+
interface InputProps {
|
|
314
|
+
/** Controlled value */
|
|
315
|
+
value?: string;
|
|
316
|
+
/** Default value for uncontrolled mode */
|
|
317
|
+
defaultValue?: string;
|
|
318
|
+
/** Called when the value changes */
|
|
319
|
+
onChange?: (value: string) => void;
|
|
320
|
+
/** Whether the input is disabled */
|
|
321
|
+
disabled?: boolean;
|
|
322
|
+
/** Whether the input is read-only */
|
|
323
|
+
readOnly?: boolean;
|
|
324
|
+
/** Whether the input is required */
|
|
325
|
+
required?: boolean;
|
|
326
|
+
/** Whether the input is in an invalid state */
|
|
327
|
+
invalid?: boolean;
|
|
328
|
+
/** Label text displayed above the input */
|
|
329
|
+
label?: string;
|
|
330
|
+
/** Helper text displayed below the input */
|
|
331
|
+
helperText?: string;
|
|
332
|
+
/** Error message displayed below the input when invalid */
|
|
333
|
+
errorMessage?: string;
|
|
334
|
+
/** Placeholder text */
|
|
335
|
+
placeholder?: string;
|
|
336
|
+
/** Input type — maps to React Native keyboardType */
|
|
337
|
+
type?: UseInputOptions["type"];
|
|
338
|
+
/** Size variant. Default: "md" */
|
|
339
|
+
size?: InputSize;
|
|
340
|
+
/** Override wrapper View style */
|
|
341
|
+
style?: StyleProp<ViewStyle>;
|
|
342
|
+
/** Override TextInput style */
|
|
343
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
344
|
+
/** Override label and helper Text style */
|
|
345
|
+
textStyle?: TextStyle;
|
|
346
|
+
/** testID for testing */
|
|
347
|
+
testID?: string;
|
|
348
|
+
}
|
|
349
|
+
/**
|
|
350
|
+
* Input -- styled text input with label, helper text, and error message.
|
|
351
|
+
*
|
|
352
|
+
* ```tsx
|
|
353
|
+
* <Input
|
|
354
|
+
* label="Email"
|
|
355
|
+
* placeholder="you@example.com"
|
|
356
|
+
* type="email"
|
|
357
|
+
* onChange={setEmail}
|
|
358
|
+
* />
|
|
359
|
+
* ```
|
|
360
|
+
*/
|
|
361
|
+
declare function Input({ value, defaultValue, onChange, disabled, readOnly, required, invalid, label, helperText, errorMessage, placeholder, type, size, style, inputStyle, textStyle, testID, }: InputProps): react_jsx_runtime.JSX.Element;
|
|
362
|
+
|
|
363
|
+
type TextareaSize = "sm" | "md" | "lg";
|
|
364
|
+
interface TextareaProps {
|
|
365
|
+
/** Controlled value */
|
|
366
|
+
value?: string;
|
|
367
|
+
/** Default value for uncontrolled mode */
|
|
368
|
+
defaultValue?: string;
|
|
369
|
+
/** Called when the value changes */
|
|
370
|
+
onChange?: (value: string) => void;
|
|
371
|
+
/** Whether the textarea is disabled */
|
|
372
|
+
disabled?: boolean;
|
|
373
|
+
/** Whether the textarea is read-only */
|
|
374
|
+
readOnly?: boolean;
|
|
375
|
+
/** Whether the textarea is required */
|
|
376
|
+
required?: boolean;
|
|
377
|
+
/** Whether the textarea is in an invalid state */
|
|
378
|
+
invalid?: boolean;
|
|
379
|
+
/** Label text displayed above the textarea */
|
|
380
|
+
label?: string;
|
|
381
|
+
/** Helper text displayed below the textarea */
|
|
382
|
+
helperText?: string;
|
|
383
|
+
/** Error message displayed below the textarea when invalid */
|
|
384
|
+
errorMessage?: string;
|
|
385
|
+
/** Placeholder text */
|
|
386
|
+
placeholder?: string;
|
|
387
|
+
/** Number of visible lines. Default: 4 */
|
|
388
|
+
numberOfLines?: number;
|
|
389
|
+
/** Size variant. Default: "md" */
|
|
390
|
+
size?: TextareaSize;
|
|
391
|
+
/** Override wrapper View style */
|
|
392
|
+
style?: StyleProp<ViewStyle>;
|
|
393
|
+
/** Override TextInput style */
|
|
394
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
395
|
+
/** Override label and helper Text style */
|
|
396
|
+
textStyle?: TextStyle;
|
|
397
|
+
/** testID for testing */
|
|
398
|
+
testID?: string;
|
|
399
|
+
}
|
|
400
|
+
/**
|
|
401
|
+
* Textarea -- multiline text input with label, helper text, and error message.
|
|
402
|
+
*
|
|
403
|
+
* ```tsx
|
|
404
|
+
* <Textarea
|
|
405
|
+
* label="Description"
|
|
406
|
+
* placeholder="Enter description..."
|
|
407
|
+
* numberOfLines={6}
|
|
408
|
+
* onChange={setDescription}
|
|
409
|
+
* />
|
|
410
|
+
* ```
|
|
411
|
+
*/
|
|
412
|
+
declare function Textarea({ value, defaultValue, onChange, disabled, readOnly, required, invalid, label, helperText, errorMessage, placeholder, numberOfLines, size, style, inputStyle, textStyle, testID, }: TextareaProps): react_jsx_runtime.JSX.Element;
|
|
413
|
+
|
|
414
|
+
type CheckboxSize = "sm" | "md" | "lg";
|
|
415
|
+
interface CheckboxProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
416
|
+
/** Controlled checked state */
|
|
417
|
+
checked?: boolean;
|
|
418
|
+
/** Default checked state for uncontrolled mode */
|
|
419
|
+
defaultChecked?: boolean;
|
|
420
|
+
/** Called when checked state changes */
|
|
421
|
+
onChange?: (checked: boolean) => void;
|
|
422
|
+
/** Whether the checkbox is disabled */
|
|
423
|
+
disabled?: boolean;
|
|
424
|
+
/** Whether the checkbox is in an indeterminate state */
|
|
425
|
+
indeterminate?: boolean;
|
|
426
|
+
/** Accessible label */
|
|
427
|
+
label?: string;
|
|
428
|
+
/** Size variant. Default: "md" */
|
|
429
|
+
size?: CheckboxSize;
|
|
430
|
+
/** Override container style */
|
|
431
|
+
style?: StyleProp<ViewStyle>;
|
|
432
|
+
/** Override label text style */
|
|
433
|
+
textStyle?: TextStyle;
|
|
434
|
+
children?: React.ReactNode;
|
|
435
|
+
}
|
|
436
|
+
/**
|
|
437
|
+
* Checkbox -- styled checkbox with indicator box and label.
|
|
438
|
+
*
|
|
439
|
+
* Renders a row with a square indicator (filled when checked with
|
|
440
|
+
* a checkmark, dash when indeterminate) and a text label.
|
|
441
|
+
*
|
|
442
|
+
* ```tsx
|
|
443
|
+
* <Checkbox onChange={setAccepted} label="Accept Terms">
|
|
444
|
+
* I agree to the terms and conditions
|
|
445
|
+
* </Checkbox>
|
|
446
|
+
* ```
|
|
447
|
+
*/
|
|
448
|
+
declare function Checkbox({ checked, defaultChecked, onChange, disabled, indeterminate, label, size, style, textStyle, children, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
449
|
+
|
|
450
|
+
interface RadioGroupProps extends UseRadioGroupOptions {
|
|
451
|
+
/** Label text for the radio group */
|
|
452
|
+
label?: string;
|
|
453
|
+
/** Override wrapper View style */
|
|
454
|
+
style?: StyleProp<ViewStyle>;
|
|
455
|
+
/** Override label text style */
|
|
456
|
+
textStyle?: TextStyle;
|
|
457
|
+
children: React.ReactNode;
|
|
458
|
+
/** testID for testing */
|
|
459
|
+
testID?: string;
|
|
460
|
+
}
|
|
461
|
+
/**
|
|
462
|
+
* RadioGroup -- container for RadioItem components.
|
|
463
|
+
*
|
|
464
|
+
* Provides radio group state via context. All RadioItem children
|
|
465
|
+
* share the same selection state.
|
|
466
|
+
*
|
|
467
|
+
* ```tsx
|
|
468
|
+
* <RadioGroup label="Color" onChange={setColor} defaultValue="red">
|
|
469
|
+
* <RadioItem value="red">Red</RadioItem>
|
|
470
|
+
* <RadioItem value="blue">Blue</RadioItem>
|
|
471
|
+
* </RadioGroup>
|
|
472
|
+
* ```
|
|
473
|
+
*/
|
|
474
|
+
declare function RadioGroup({ label, style, textStyle, children, testID, ...options }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
475
|
+
|
|
476
|
+
interface RadioItemProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
477
|
+
/** The value this radio option represents */
|
|
478
|
+
value: string;
|
|
479
|
+
/** Whether this option is disabled */
|
|
480
|
+
disabled?: boolean;
|
|
481
|
+
/** Override container style */
|
|
482
|
+
style?: StyleProp<ViewStyle>;
|
|
483
|
+
/** Override label text style */
|
|
484
|
+
textStyle?: TextStyle;
|
|
485
|
+
children?: React.ReactNode;
|
|
486
|
+
}
|
|
487
|
+
/**
|
|
488
|
+
* RadioItem -- individual radio option within a RadioGroup.
|
|
489
|
+
*
|
|
490
|
+
* Renders a Pressable row with a circle indicator and label text.
|
|
491
|
+
* When selected, the circle shows a filled inner dot.
|
|
492
|
+
*
|
|
493
|
+
* ```tsx
|
|
494
|
+
* <RadioItem value="option-1">Option 1</RadioItem>
|
|
495
|
+
* ```
|
|
496
|
+
*/
|
|
497
|
+
declare function RadioItem({ value, disabled, style, textStyle, children, ...rest }: RadioItemProps): react_jsx_runtime.JSX.Element;
|
|
498
|
+
|
|
499
|
+
interface SelectProps extends UseSelectOptions {
|
|
500
|
+
/** Label text displayed above the select */
|
|
501
|
+
label?: string;
|
|
502
|
+
/** Override wrapper View style */
|
|
503
|
+
style?: StyleProp<ViewStyle>;
|
|
504
|
+
/** Override label text style */
|
|
505
|
+
textStyle?: TextStyle;
|
|
506
|
+
children: React.ReactNode;
|
|
507
|
+
/** testID for testing */
|
|
508
|
+
testID?: string;
|
|
509
|
+
}
|
|
510
|
+
/**
|
|
511
|
+
* Select -- compound component root that provides select state via context.
|
|
512
|
+
*
|
|
513
|
+
* ```tsx
|
|
514
|
+
* <Select label="Country" onChange={setCountry} placeholder="Choose...">
|
|
515
|
+
* <SelectTrigger />
|
|
516
|
+
* <SelectContent>
|
|
517
|
+
* <SelectOption value="us">United States</SelectOption>
|
|
518
|
+
* <SelectOption value="ca">Canada</SelectOption>
|
|
519
|
+
* </SelectContent>
|
|
520
|
+
* </Select>
|
|
521
|
+
* ```
|
|
522
|
+
*/
|
|
523
|
+
declare function Select({ label, style, textStyle, children, testID, ...options }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
524
|
+
|
|
525
|
+
interface SelectTriggerProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
526
|
+
/** Placeholder text when no value is selected */
|
|
527
|
+
placeholder?: string;
|
|
528
|
+
/** Display label for the currently selected value */
|
|
529
|
+
displayValue?: string;
|
|
530
|
+
/** Override container style */
|
|
531
|
+
style?: StyleProp<ViewStyle>;
|
|
532
|
+
/** Override text style */
|
|
533
|
+
textStyle?: TextStyle;
|
|
534
|
+
}
|
|
535
|
+
/**
|
|
536
|
+
* SelectTrigger -- the button that opens the select dropdown.
|
|
537
|
+
*
|
|
538
|
+
* Renders as a bordered input-like row with the selected value
|
|
539
|
+
* (or placeholder) and a chevron indicator.
|
|
540
|
+
*/
|
|
541
|
+
declare function SelectTrigger({ placeholder, displayValue, style, textStyle, ...rest }: SelectTriggerProps): react_jsx_runtime.JSX.Element;
|
|
542
|
+
|
|
543
|
+
interface SelectContentProps {
|
|
544
|
+
children: React.ReactNode;
|
|
545
|
+
/** Override listbox container style */
|
|
546
|
+
style?: StyleProp<ViewStyle>;
|
|
547
|
+
/** testID for testing */
|
|
548
|
+
testID?: string;
|
|
549
|
+
}
|
|
550
|
+
/**
|
|
551
|
+
* SelectContent -- the dropdown listbox rendered inside a Modal.
|
|
552
|
+
*
|
|
553
|
+
* Displays the option list when the select is open.
|
|
554
|
+
* Tapping the overlay closes the select.
|
|
555
|
+
*/
|
|
556
|
+
declare function SelectContent({ children, style, testID }: SelectContentProps): react_jsx_runtime.JSX.Element | null;
|
|
557
|
+
|
|
558
|
+
interface SelectOptionProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
|
|
559
|
+
/** The value this option represents */
|
|
560
|
+
value: string;
|
|
561
|
+
/** Index of this option in the list (auto-assigned by SelectContent if omitted) */
|
|
562
|
+
index?: number;
|
|
563
|
+
/** Whether this option is disabled */
|
|
564
|
+
disabled?: boolean;
|
|
565
|
+
/** Override container style */
|
|
566
|
+
style?: StyleProp<ViewStyle>;
|
|
567
|
+
/** Override text style */
|
|
568
|
+
textStyle?: TextStyle;
|
|
569
|
+
children: React.ReactNode;
|
|
570
|
+
}
|
|
571
|
+
/**
|
|
572
|
+
* SelectOption -- an individual option within SelectContent.
|
|
573
|
+
*
|
|
574
|
+
* Renders as a Pressable row. Selected option gets a highlight
|
|
575
|
+
* background to indicate the current selection.
|
|
576
|
+
*/
|
|
577
|
+
declare function SelectOption({ value, index, disabled, style, textStyle, children, ...rest }: SelectOptionProps): react_jsx_runtime.JSX.Element;
|
|
578
|
+
|
|
312
579
|
/**
|
|
313
580
|
* Breakpoint values in pixels, matching @entropix/tokens breakpoint primitives.
|
|
314
581
|
*/
|
|
@@ -462,4 +729,4 @@ interface DividerProps extends ViewProps {
|
|
|
462
729
|
*/
|
|
463
730
|
declare function Divider({ orientation, spacing, style, ...rest }: DividerProps): react_jsx_runtime.JSX.Element;
|
|
464
731
|
|
|
465
|
-
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BREAKPOINTS, type Breakpoint, Button, type ButtonProps, Container, type ContainerProps, type ContainerSize, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerProps, EntropixProvider, type EntropixProviderProps, type EntropixTheme, Inline, type InlineProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type RNAccessibilityProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, type ThemeMode, Toggle, type ToggleProps, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
|
|
732
|
+
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BREAKPOINTS, type Breakpoint, Button, type ButtonProps, Checkbox, type CheckboxProps, type CheckboxSize, Container, type ContainerProps, type ContainerSize, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerProps, EntropixProvider, type EntropixProviderProps, type EntropixTheme, Inline, type InlineProps, Input, type InputProps, type InputSize, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type RNAccessibilityProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, Select, SelectContent, type SelectContentProps, SelectOption, type SelectOptionProps, type SelectProps, SelectTrigger, type SelectTriggerProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaSize, type ThemeMode, Toggle, type ToggleProps, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
|