@geomak/ui 5.3.0 → 5.4.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 +377 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +194 -1
- package/dist/index.d.ts +194 -1
- package/dist/index.js +373 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +47 -0
- package/package.json +2 -1
package/dist/index.d.cts
CHANGED
|
@@ -2545,4 +2545,197 @@ type TemporalPickerProps = DatePickerProps;
|
|
|
2545
2545
|
*/
|
|
2546
2546
|
declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
2547
2547
|
|
|
2548
|
-
|
|
2548
|
+
interface TextAreaProps {
|
|
2549
|
+
value?: string;
|
|
2550
|
+
onChange?: React$1.ChangeEventHandler<HTMLTextAreaElement>;
|
|
2551
|
+
onBlur?: React$1.FocusEventHandler<HTMLTextAreaElement>;
|
|
2552
|
+
disabled?: boolean;
|
|
2553
|
+
label?: React$1.ReactNode;
|
|
2554
|
+
htmlFor?: string;
|
|
2555
|
+
placeholder?: string;
|
|
2556
|
+
name?: string;
|
|
2557
|
+
/** Label/control orientation. Default `'vertical'`. */
|
|
2558
|
+
layout?: 'horizontal' | 'vertical';
|
|
2559
|
+
/** Size preset — controls text size + padding. Default `'md'`. */
|
|
2560
|
+
size?: FieldSize;
|
|
2561
|
+
/** Visible rows when not auto-growing. Default `4`. */
|
|
2562
|
+
rows?: number;
|
|
2563
|
+
/**
|
|
2564
|
+
* Grow the textarea to fit its content instead of scrolling. When set, the
|
|
2565
|
+
* field expands between `rows` (min) and `maxRows` (cap, then scrolls).
|
|
2566
|
+
*/
|
|
2567
|
+
autoGrow?: boolean;
|
|
2568
|
+
/** Max rows when `autoGrow` is on. Default `12`. */
|
|
2569
|
+
maxRows?: number;
|
|
2570
|
+
/** Native maxlength. When set with `showCount`, a live counter renders. */
|
|
2571
|
+
maxLength?: number;
|
|
2572
|
+
/** Show a character counter (uses `maxLength` as the denominator if present). */
|
|
2573
|
+
showCount?: boolean;
|
|
2574
|
+
/** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
|
|
2575
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
2576
|
+
errorMessage?: React$1.ReactNode;
|
|
2577
|
+
required?: boolean;
|
|
2578
|
+
style?: React$1.CSSProperties;
|
|
2579
|
+
inputStyle?: React$1.CSSProperties;
|
|
2580
|
+
}
|
|
2581
|
+
/**
|
|
2582
|
+
* Multi-line text input on the shared field foundation. Optional auto-grow
|
|
2583
|
+
* (expands with content between `rows` and `maxRows`), character counter, and
|
|
2584
|
+
* resize control. Same refined Halo Focus and error handling as the other
|
|
2585
|
+
* inputs.
|
|
2586
|
+
*
|
|
2587
|
+
* @example
|
|
2588
|
+
* ```tsx
|
|
2589
|
+
* <TextArea label="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} autoGrow />
|
|
2590
|
+
* ```
|
|
2591
|
+
*
|
|
2592
|
+
* @example With counter
|
|
2593
|
+
* ```tsx
|
|
2594
|
+
* <TextArea label="Bio" maxLength={280} showCount value={bio} onChange={onChange} />
|
|
2595
|
+
* ```
|
|
2596
|
+
*/
|
|
2597
|
+
declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, placeholder, name, layout, size, rows, autoGrow, maxRows, maxLength, showCount, resize, errorMessage, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
2598
|
+
|
|
2599
|
+
interface SegmentedOption {
|
|
2600
|
+
value: string;
|
|
2601
|
+
label: React$1.ReactNode;
|
|
2602
|
+
icon?: React$1.ReactNode;
|
|
2603
|
+
disabled?: boolean;
|
|
2604
|
+
}
|
|
2605
|
+
interface SegmentedControlProps {
|
|
2606
|
+
options: SegmentedOption[];
|
|
2607
|
+
/** Controlled selected value. */
|
|
2608
|
+
value?: string;
|
|
2609
|
+
/** Uncontrolled initial value. */
|
|
2610
|
+
defaultValue?: string;
|
|
2611
|
+
onChange?: (value: string) => void;
|
|
2612
|
+
/** Size preset. Default `'md'`. */
|
|
2613
|
+
size?: FieldSize;
|
|
2614
|
+
/** Stretch to fill the container, segments share the width equally. */
|
|
2615
|
+
fullWidth?: boolean;
|
|
2616
|
+
disabled?: boolean;
|
|
2617
|
+
'aria-label'?: string;
|
|
2618
|
+
}
|
|
2619
|
+
/**
|
|
2620
|
+
* Text-first segmented control for 2 to 4 mutually exclusive options
|
|
2621
|
+
* (view switchers, billing period, density). Built on
|
|
2622
|
+
* `@radix-ui/react-toggle-group` (single, non-deselectable) so arrow-key
|
|
2623
|
+
* roving focus comes for free.
|
|
2624
|
+
*
|
|
2625
|
+
* The selected segment lifts onto a surface-white "pill" inside a tinted
|
|
2626
|
+
* track, the macOS / iOS segmented-control pattern, rendered with the
|
|
2627
|
+
* system's tight radii and accent-colored active text.
|
|
2628
|
+
*
|
|
2629
|
+
* @example
|
|
2630
|
+
* ```tsx
|
|
2631
|
+
* <SegmentedControl
|
|
2632
|
+
* value={view}
|
|
2633
|
+
* onChange={setView}
|
|
2634
|
+
* options={[
|
|
2635
|
+
* { value: 'list', label: 'List' },
|
|
2636
|
+
* { value: 'board', label: 'Board' },
|
|
2637
|
+
* { value: 'calendar', label: 'Calendar' },
|
|
2638
|
+
* ]}
|
|
2639
|
+
* />
|
|
2640
|
+
* ```
|
|
2641
|
+
*/
|
|
2642
|
+
declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2643
|
+
|
|
2644
|
+
/**
|
|
2645
|
+
* Slider value. A single number for a one-thumb slider, or a `[min, max]`
|
|
2646
|
+
* tuple for a two-thumb range slider. The shape you pass determines the mode.
|
|
2647
|
+
*/
|
|
2648
|
+
type SliderValue = number | [number, number];
|
|
2649
|
+
interface SliderMark {
|
|
2650
|
+
value: number;
|
|
2651
|
+
label?: React$1.ReactNode;
|
|
2652
|
+
}
|
|
2653
|
+
interface SliderProps {
|
|
2654
|
+
value?: SliderValue;
|
|
2655
|
+
defaultValue?: SliderValue;
|
|
2656
|
+
onChange?: (value: SliderValue) => void;
|
|
2657
|
+
/** Fired once at the end of a drag/keyboard interaction. */
|
|
2658
|
+
onChangeEnd?: (value: SliderValue) => void;
|
|
2659
|
+
min?: number;
|
|
2660
|
+
max?: number;
|
|
2661
|
+
step?: number;
|
|
2662
|
+
label?: React$1.ReactNode;
|
|
2663
|
+
/** Show the current value(s) next to the label. */
|
|
2664
|
+
showValue?: boolean;
|
|
2665
|
+
/** Format the displayed value (tooltip + value readout). */
|
|
2666
|
+
formatValue?: (n: number) => string;
|
|
2667
|
+
/** Tick marks under the track. */
|
|
2668
|
+
marks?: SliderMark[];
|
|
2669
|
+
/** Show a value tooltip above the thumb while dragging. */
|
|
2670
|
+
tooltip?: boolean;
|
|
2671
|
+
size?: FieldSize;
|
|
2672
|
+
disabled?: boolean;
|
|
2673
|
+
errorMessage?: React$1.ReactNode;
|
|
2674
|
+
name?: string;
|
|
2675
|
+
htmlFor?: string;
|
|
2676
|
+
}
|
|
2677
|
+
/**
|
|
2678
|
+
* Range slider on `@radix-ui/react-slider`. Pass a single number for a
|
|
2679
|
+
* one-thumb slider or a `[min, max]` tuple for a two-thumb range. Optional
|
|
2680
|
+
* tick marks, a drag tooltip, and a value readout beside the label.
|
|
2681
|
+
*
|
|
2682
|
+
* @example Single
|
|
2683
|
+
* ```tsx
|
|
2684
|
+
* <Slider label="Volume" value={vol} onChange={(v) => setVol(v as number)} showValue />
|
|
2685
|
+
* ```
|
|
2686
|
+
*
|
|
2687
|
+
* @example Range with marks
|
|
2688
|
+
* ```tsx
|
|
2689
|
+
* <Slider
|
|
2690
|
+
* label="Price"
|
|
2691
|
+
* value={[20, 80]}
|
|
2692
|
+
* onChange={(v) => setRange(v as [number, number])}
|
|
2693
|
+
* marks={[{ value: 0, label: '$0' }, { value: 50, label: '$50' }, { value: 100, label: '$100' }]}
|
|
2694
|
+
* tooltip
|
|
2695
|
+
* />
|
|
2696
|
+
* ```
|
|
2697
|
+
*/
|
|
2698
|
+
declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
|
|
2699
|
+
|
|
2700
|
+
interface TagsInputProps {
|
|
2701
|
+
/** Controlled list of tags. */
|
|
2702
|
+
value?: string[];
|
|
2703
|
+
/** Uncontrolled initial tags. */
|
|
2704
|
+
defaultValue?: string[];
|
|
2705
|
+
onChange?: (tags: string[]) => void;
|
|
2706
|
+
label?: React$1.ReactNode;
|
|
2707
|
+
htmlFor?: string;
|
|
2708
|
+
name?: string;
|
|
2709
|
+
placeholder?: string;
|
|
2710
|
+
layout?: 'horizontal' | 'vertical';
|
|
2711
|
+
size?: FieldSize;
|
|
2712
|
+
disabled?: boolean;
|
|
2713
|
+
errorMessage?: React$1.ReactNode;
|
|
2714
|
+
required?: boolean;
|
|
2715
|
+
/** Maximum number of tags. Further input is ignored once reached. */
|
|
2716
|
+
maxTags?: number;
|
|
2717
|
+
/** Reject duplicate tags (case-insensitive). Default `true`. */
|
|
2718
|
+
dedupe?: boolean;
|
|
2719
|
+
/**
|
|
2720
|
+
* Validate a candidate tag before adding. Return `false` (or a string error
|
|
2721
|
+
* to surface) to reject. Receives the trimmed candidate + current tags.
|
|
2722
|
+
*/
|
|
2723
|
+
validate?: (tag: string, tags: string[]) => boolean | string;
|
|
2724
|
+
/** Characters that commit the current input as a tag. Default Enter + comma. */
|
|
2725
|
+
separators?: string[];
|
|
2726
|
+
}
|
|
2727
|
+
/**
|
|
2728
|
+
* Free-text entry that produces removable tag chips, distinct from Dropdown
|
|
2729
|
+
* (which picks from a fixed list). Type and press Enter or comma to add;
|
|
2730
|
+
* Backspace on an empty field removes the last tag; pasting a delimited string
|
|
2731
|
+
* splits into multiple tags. Optional dedupe, max-count, and per-tag validation.
|
|
2732
|
+
*
|
|
2733
|
+
* @example
|
|
2734
|
+
* ```tsx
|
|
2735
|
+
* <TagsInput label="Recipients" value={emails} onChange={setEmails}
|
|
2736
|
+
* validate={(t) => /.+@.+\..+/.test(t) || 'Not a valid email'} />
|
|
2737
|
+
* ```
|
|
2738
|
+
*/
|
|
2739
|
+
declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name, placeholder, layout, size, disabled, errorMessage, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
|
|
2740
|
+
|
|
2741
|
+
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };
|
package/dist/index.d.ts
CHANGED
|
@@ -2545,4 +2545,197 @@ type TemporalPickerProps = DatePickerProps;
|
|
|
2545
2545
|
*/
|
|
2546
2546
|
declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
2547
2547
|
|
|
2548
|
-
|
|
2548
|
+
interface TextAreaProps {
|
|
2549
|
+
value?: string;
|
|
2550
|
+
onChange?: React$1.ChangeEventHandler<HTMLTextAreaElement>;
|
|
2551
|
+
onBlur?: React$1.FocusEventHandler<HTMLTextAreaElement>;
|
|
2552
|
+
disabled?: boolean;
|
|
2553
|
+
label?: React$1.ReactNode;
|
|
2554
|
+
htmlFor?: string;
|
|
2555
|
+
placeholder?: string;
|
|
2556
|
+
name?: string;
|
|
2557
|
+
/** Label/control orientation. Default `'vertical'`. */
|
|
2558
|
+
layout?: 'horizontal' | 'vertical';
|
|
2559
|
+
/** Size preset — controls text size + padding. Default `'md'`. */
|
|
2560
|
+
size?: FieldSize;
|
|
2561
|
+
/** Visible rows when not auto-growing. Default `4`. */
|
|
2562
|
+
rows?: number;
|
|
2563
|
+
/**
|
|
2564
|
+
* Grow the textarea to fit its content instead of scrolling. When set, the
|
|
2565
|
+
* field expands between `rows` (min) and `maxRows` (cap, then scrolls).
|
|
2566
|
+
*/
|
|
2567
|
+
autoGrow?: boolean;
|
|
2568
|
+
/** Max rows when `autoGrow` is on. Default `12`. */
|
|
2569
|
+
maxRows?: number;
|
|
2570
|
+
/** Native maxlength. When set with `showCount`, a live counter renders. */
|
|
2571
|
+
maxLength?: number;
|
|
2572
|
+
/** Show a character counter (uses `maxLength` as the denominator if present). */
|
|
2573
|
+
showCount?: boolean;
|
|
2574
|
+
/** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
|
|
2575
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
2576
|
+
errorMessage?: React$1.ReactNode;
|
|
2577
|
+
required?: boolean;
|
|
2578
|
+
style?: React$1.CSSProperties;
|
|
2579
|
+
inputStyle?: React$1.CSSProperties;
|
|
2580
|
+
}
|
|
2581
|
+
/**
|
|
2582
|
+
* Multi-line text input on the shared field foundation. Optional auto-grow
|
|
2583
|
+
* (expands with content between `rows` and `maxRows`), character counter, and
|
|
2584
|
+
* resize control. Same refined Halo Focus and error handling as the other
|
|
2585
|
+
* inputs.
|
|
2586
|
+
*
|
|
2587
|
+
* @example
|
|
2588
|
+
* ```tsx
|
|
2589
|
+
* <TextArea label="Notes" value={notes} onChange={(e) => setNotes(e.target.value)} autoGrow />
|
|
2590
|
+
* ```
|
|
2591
|
+
*
|
|
2592
|
+
* @example With counter
|
|
2593
|
+
* ```tsx
|
|
2594
|
+
* <TextArea label="Bio" maxLength={280} showCount value={bio} onChange={onChange} />
|
|
2595
|
+
* ```
|
|
2596
|
+
*/
|
|
2597
|
+
declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, placeholder, name, layout, size, rows, autoGrow, maxRows, maxLength, showCount, resize, errorMessage, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
2598
|
+
|
|
2599
|
+
interface SegmentedOption {
|
|
2600
|
+
value: string;
|
|
2601
|
+
label: React$1.ReactNode;
|
|
2602
|
+
icon?: React$1.ReactNode;
|
|
2603
|
+
disabled?: boolean;
|
|
2604
|
+
}
|
|
2605
|
+
interface SegmentedControlProps {
|
|
2606
|
+
options: SegmentedOption[];
|
|
2607
|
+
/** Controlled selected value. */
|
|
2608
|
+
value?: string;
|
|
2609
|
+
/** Uncontrolled initial value. */
|
|
2610
|
+
defaultValue?: string;
|
|
2611
|
+
onChange?: (value: string) => void;
|
|
2612
|
+
/** Size preset. Default `'md'`. */
|
|
2613
|
+
size?: FieldSize;
|
|
2614
|
+
/** Stretch to fill the container, segments share the width equally. */
|
|
2615
|
+
fullWidth?: boolean;
|
|
2616
|
+
disabled?: boolean;
|
|
2617
|
+
'aria-label'?: string;
|
|
2618
|
+
}
|
|
2619
|
+
/**
|
|
2620
|
+
* Text-first segmented control for 2 to 4 mutually exclusive options
|
|
2621
|
+
* (view switchers, billing period, density). Built on
|
|
2622
|
+
* `@radix-ui/react-toggle-group` (single, non-deselectable) so arrow-key
|
|
2623
|
+
* roving focus comes for free.
|
|
2624
|
+
*
|
|
2625
|
+
* The selected segment lifts onto a surface-white "pill" inside a tinted
|
|
2626
|
+
* track, the macOS / iOS segmented-control pattern, rendered with the
|
|
2627
|
+
* system's tight radii and accent-colored active text.
|
|
2628
|
+
*
|
|
2629
|
+
* @example
|
|
2630
|
+
* ```tsx
|
|
2631
|
+
* <SegmentedControl
|
|
2632
|
+
* value={view}
|
|
2633
|
+
* onChange={setView}
|
|
2634
|
+
* options={[
|
|
2635
|
+
* { value: 'list', label: 'List' },
|
|
2636
|
+
* { value: 'board', label: 'Board' },
|
|
2637
|
+
* { value: 'calendar', label: 'Calendar' },
|
|
2638
|
+
* ]}
|
|
2639
|
+
* />
|
|
2640
|
+
* ```
|
|
2641
|
+
*/
|
|
2642
|
+
declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2643
|
+
|
|
2644
|
+
/**
|
|
2645
|
+
* Slider value. A single number for a one-thumb slider, or a `[min, max]`
|
|
2646
|
+
* tuple for a two-thumb range slider. The shape you pass determines the mode.
|
|
2647
|
+
*/
|
|
2648
|
+
type SliderValue = number | [number, number];
|
|
2649
|
+
interface SliderMark {
|
|
2650
|
+
value: number;
|
|
2651
|
+
label?: React$1.ReactNode;
|
|
2652
|
+
}
|
|
2653
|
+
interface SliderProps {
|
|
2654
|
+
value?: SliderValue;
|
|
2655
|
+
defaultValue?: SliderValue;
|
|
2656
|
+
onChange?: (value: SliderValue) => void;
|
|
2657
|
+
/** Fired once at the end of a drag/keyboard interaction. */
|
|
2658
|
+
onChangeEnd?: (value: SliderValue) => void;
|
|
2659
|
+
min?: number;
|
|
2660
|
+
max?: number;
|
|
2661
|
+
step?: number;
|
|
2662
|
+
label?: React$1.ReactNode;
|
|
2663
|
+
/** Show the current value(s) next to the label. */
|
|
2664
|
+
showValue?: boolean;
|
|
2665
|
+
/** Format the displayed value (tooltip + value readout). */
|
|
2666
|
+
formatValue?: (n: number) => string;
|
|
2667
|
+
/** Tick marks under the track. */
|
|
2668
|
+
marks?: SliderMark[];
|
|
2669
|
+
/** Show a value tooltip above the thumb while dragging. */
|
|
2670
|
+
tooltip?: boolean;
|
|
2671
|
+
size?: FieldSize;
|
|
2672
|
+
disabled?: boolean;
|
|
2673
|
+
errorMessage?: React$1.ReactNode;
|
|
2674
|
+
name?: string;
|
|
2675
|
+
htmlFor?: string;
|
|
2676
|
+
}
|
|
2677
|
+
/**
|
|
2678
|
+
* Range slider on `@radix-ui/react-slider`. Pass a single number for a
|
|
2679
|
+
* one-thumb slider or a `[min, max]` tuple for a two-thumb range. Optional
|
|
2680
|
+
* tick marks, a drag tooltip, and a value readout beside the label.
|
|
2681
|
+
*
|
|
2682
|
+
* @example Single
|
|
2683
|
+
* ```tsx
|
|
2684
|
+
* <Slider label="Volume" value={vol} onChange={(v) => setVol(v as number)} showValue />
|
|
2685
|
+
* ```
|
|
2686
|
+
*
|
|
2687
|
+
* @example Range with marks
|
|
2688
|
+
* ```tsx
|
|
2689
|
+
* <Slider
|
|
2690
|
+
* label="Price"
|
|
2691
|
+
* value={[20, 80]}
|
|
2692
|
+
* onChange={(v) => setRange(v as [number, number])}
|
|
2693
|
+
* marks={[{ value: 0, label: '$0' }, { value: 50, label: '$50' }, { value: 100, label: '$100' }]}
|
|
2694
|
+
* tooltip
|
|
2695
|
+
* />
|
|
2696
|
+
* ```
|
|
2697
|
+
*/
|
|
2698
|
+
declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
|
|
2699
|
+
|
|
2700
|
+
interface TagsInputProps {
|
|
2701
|
+
/** Controlled list of tags. */
|
|
2702
|
+
value?: string[];
|
|
2703
|
+
/** Uncontrolled initial tags. */
|
|
2704
|
+
defaultValue?: string[];
|
|
2705
|
+
onChange?: (tags: string[]) => void;
|
|
2706
|
+
label?: React$1.ReactNode;
|
|
2707
|
+
htmlFor?: string;
|
|
2708
|
+
name?: string;
|
|
2709
|
+
placeholder?: string;
|
|
2710
|
+
layout?: 'horizontal' | 'vertical';
|
|
2711
|
+
size?: FieldSize;
|
|
2712
|
+
disabled?: boolean;
|
|
2713
|
+
errorMessage?: React$1.ReactNode;
|
|
2714
|
+
required?: boolean;
|
|
2715
|
+
/** Maximum number of tags. Further input is ignored once reached. */
|
|
2716
|
+
maxTags?: number;
|
|
2717
|
+
/** Reject duplicate tags (case-insensitive). Default `true`. */
|
|
2718
|
+
dedupe?: boolean;
|
|
2719
|
+
/**
|
|
2720
|
+
* Validate a candidate tag before adding. Return `false` (or a string error
|
|
2721
|
+
* to surface) to reject. Receives the trimmed candidate + current tags.
|
|
2722
|
+
*/
|
|
2723
|
+
validate?: (tag: string, tags: string[]) => boolean | string;
|
|
2724
|
+
/** Characters that commit the current input as a tag. Default Enter + comma. */
|
|
2725
|
+
separators?: string[];
|
|
2726
|
+
}
|
|
2727
|
+
/**
|
|
2728
|
+
* Free-text entry that produces removable tag chips, distinct from Dropdown
|
|
2729
|
+
* (which picks from a fixed list). Type and press Enter or comma to add;
|
|
2730
|
+
* Backspace on an empty field removes the last tag; pasting a delimited string
|
|
2731
|
+
* splits into multiple tags. Optional dedupe, max-count, and per-tag validation.
|
|
2732
|
+
*
|
|
2733
|
+
* @example
|
|
2734
|
+
* ```tsx
|
|
2735
|
+
* <TagsInput label="Recipients" value={emails} onChange={setEmails}
|
|
2736
|
+
* validate={(t) => /.+@.+\..+/.test(t) || 'Not a valid email'} />
|
|
2737
|
+
* ```
|
|
2738
|
+
*/
|
|
2739
|
+
declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name, placeholder, layout, size, disabled, errorMessage, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
|
|
2740
|
+
|
|
2741
|
+
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };
|