@geomak/ui 5.4.0 → 5.5.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 +647 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +182 -1
- package/dist/index.d.ts +182 -1
- package/dist/index.js +643 -3
- package/dist/index.js.map +1 -1
- package/dist/styles.css +36 -0
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -2738,4 +2738,185 @@ interface TagsInputProps {
|
|
|
2738
2738
|
*/
|
|
2739
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
2740
|
|
|
2741
|
-
|
|
2741
|
+
interface OtpInputProps {
|
|
2742
|
+
/** Number of code boxes. Default `6`. */
|
|
2743
|
+
length?: number;
|
|
2744
|
+
value?: string;
|
|
2745
|
+
onChange?: (code: string) => void;
|
|
2746
|
+
/** Fired when every box is filled. */
|
|
2747
|
+
onComplete?: (code: string) => void;
|
|
2748
|
+
label?: React$1.ReactNode;
|
|
2749
|
+
htmlFor?: string;
|
|
2750
|
+
name?: string;
|
|
2751
|
+
/** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
|
|
2752
|
+
mode?: 'numeric' | 'alphanumeric';
|
|
2753
|
+
/** Render boxes as masked dots (for PIN entry). */
|
|
2754
|
+
masked?: boolean;
|
|
2755
|
+
size?: FieldSize;
|
|
2756
|
+
disabled?: boolean;
|
|
2757
|
+
errorMessage?: React$1.ReactNode;
|
|
2758
|
+
required?: boolean;
|
|
2759
|
+
/** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
|
|
2760
|
+
groupAfter?: number;
|
|
2761
|
+
}
|
|
2762
|
+
/**
|
|
2763
|
+
* Segmented one-time-code / PIN input. Auto-advances as the user types,
|
|
2764
|
+
* Backspace retreats, and pasting a code spreads it across the boxes. Set
|
|
2765
|
+
* `masked` for PIN entry, `mode="alphanumeric"` for letter codes.
|
|
2766
|
+
*
|
|
2767
|
+
* @example
|
|
2768
|
+
* ```tsx
|
|
2769
|
+
* <OtpInput length={6} value={code} onChange={setCode} onComplete={verify} />
|
|
2770
|
+
* ```
|
|
2771
|
+
*/
|
|
2772
|
+
declare function OtpInput({ length, value, onChange, onComplete, label, htmlFor, name, mode, masked, size, disabled, errorMessage, required, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
|
|
2773
|
+
|
|
2774
|
+
interface RatingProps {
|
|
2775
|
+
value?: number;
|
|
2776
|
+
defaultValue?: number;
|
|
2777
|
+
onChange?: (value: number) => void;
|
|
2778
|
+
/** Number of icons. Default `5`. */
|
|
2779
|
+
count?: number;
|
|
2780
|
+
/** Allow half-icon precision. Default `false`. */
|
|
2781
|
+
allowHalf?: boolean;
|
|
2782
|
+
/** Read-only display (no hover / click). */
|
|
2783
|
+
readOnly?: boolean;
|
|
2784
|
+
/** Clicking the current value again clears to 0. Default `true`. */
|
|
2785
|
+
clearable?: boolean;
|
|
2786
|
+
label?: React$1.ReactNode;
|
|
2787
|
+
size?: FieldSize;
|
|
2788
|
+
disabled?: boolean;
|
|
2789
|
+
/** Override the icon. Receives a `filled` flag. Default is a star. */
|
|
2790
|
+
icon?: (filled: boolean) => React$1.ReactNode;
|
|
2791
|
+
errorMessage?: React$1.ReactNode;
|
|
2792
|
+
name?: string;
|
|
2793
|
+
}
|
|
2794
|
+
/**
|
|
2795
|
+
* Star (or custom glyph) rating with optional half-steps, hover preview, and
|
|
2796
|
+
* read-only mode. Keyboard accessible: arrow keys adjust, Home/End jump to
|
|
2797
|
+
* min/max.
|
|
2798
|
+
*
|
|
2799
|
+
* @example
|
|
2800
|
+
* ```tsx
|
|
2801
|
+
* <Rating label="Quality" value={rating} onChange={setRating} allowHalf />
|
|
2802
|
+
* ```
|
|
2803
|
+
*
|
|
2804
|
+
* @example Read-only display
|
|
2805
|
+
* ```tsx
|
|
2806
|
+
* <Rating value={4.5} allowHalf readOnly />
|
|
2807
|
+
* ```
|
|
2808
|
+
*/
|
|
2809
|
+
declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, clearable, label, size, disabled, icon, errorMessage, name, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
2810
|
+
|
|
2811
|
+
interface TimePickerProps {
|
|
2812
|
+
/** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
|
|
2813
|
+
value?: string | null;
|
|
2814
|
+
onChange?: (value: string | null) => void;
|
|
2815
|
+
label?: React$1.ReactNode;
|
|
2816
|
+
htmlFor?: string;
|
|
2817
|
+
name?: string;
|
|
2818
|
+
placeholder?: string;
|
|
2819
|
+
layout?: 'horizontal' | 'vertical';
|
|
2820
|
+
size?: FieldSize;
|
|
2821
|
+
/** Display in 12-hour format with AM/PM (value stays 24h `"HH:mm"`). */
|
|
2822
|
+
use12Hours?: boolean;
|
|
2823
|
+
/** Include a seconds column. Default `false`. */
|
|
2824
|
+
withSeconds?: boolean;
|
|
2825
|
+
/** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
|
|
2826
|
+
minuteStep?: number;
|
|
2827
|
+
disabled?: boolean;
|
|
2828
|
+
errorMessage?: React$1.ReactNode;
|
|
2829
|
+
required?: boolean;
|
|
2830
|
+
style?: React$1.CSSProperties;
|
|
2831
|
+
}
|
|
2832
|
+
/**
|
|
2833
|
+
* Time picker with scrollable hour / minute (/ second) columns in a popover.
|
|
2834
|
+
* Value is a 24-hour `"HH:mm"` (or `"HH:mm:ss"`) string regardless of whether
|
|
2835
|
+
* the display is 12- or 24-hour, so it's stable to store and submit.
|
|
2836
|
+
*
|
|
2837
|
+
* @example
|
|
2838
|
+
* ```tsx
|
|
2839
|
+
* <TimePicker label="Departure" value={time} onChange={setTime} minuteStep={15} use12Hours />
|
|
2840
|
+
* ```
|
|
2841
|
+
*/
|
|
2842
|
+
declare function TimePicker({ value, onChange, label, htmlFor, name, placeholder, layout, size, use12Hours, withSeconds, minuteStep, disabled, errorMessage, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
2843
|
+
|
|
2844
|
+
interface DateRange {
|
|
2845
|
+
start: Date | null;
|
|
2846
|
+
end: Date | null;
|
|
2847
|
+
}
|
|
2848
|
+
interface DateRangePreset {
|
|
2849
|
+
label: string;
|
|
2850
|
+
/** Returns the range when clicked. */
|
|
2851
|
+
range: () => DateRange;
|
|
2852
|
+
}
|
|
2853
|
+
interface DateRangePickerProps {
|
|
2854
|
+
value?: DateRange;
|
|
2855
|
+
onChange?: (range: DateRange) => void;
|
|
2856
|
+
label?: React$1.ReactNode;
|
|
2857
|
+
htmlFor?: string;
|
|
2858
|
+
placeholder?: string;
|
|
2859
|
+
layout?: 'horizontal' | 'vertical';
|
|
2860
|
+
size?: FieldSize;
|
|
2861
|
+
min?: Date;
|
|
2862
|
+
max?: Date;
|
|
2863
|
+
/** 0 = Sunday, 1 = Monday. Default `0`. */
|
|
2864
|
+
weekStartsOn?: 0 | 1;
|
|
2865
|
+
/** Quick-select presets shown in a rail beside the calendars. */
|
|
2866
|
+
presets?: DateRangePreset[];
|
|
2867
|
+
format?: (d: Date) => string;
|
|
2868
|
+
disabled?: boolean;
|
|
2869
|
+
errorMessage?: React$1.ReactNode;
|
|
2870
|
+
required?: boolean;
|
|
2871
|
+
style?: React$1.CSSProperties;
|
|
2872
|
+
}
|
|
2873
|
+
/**
|
|
2874
|
+
* Two-month range date picker. Click a start date, then an end date; the span
|
|
2875
|
+
* between highlights as you hover. Optional quick-select presets (Today,
|
|
2876
|
+
* Last 7 days, This month, etc.) in a side rail.
|
|
2877
|
+
*
|
|
2878
|
+
* @example
|
|
2879
|
+
* ```tsx
|
|
2880
|
+
* <DateRangePicker
|
|
2881
|
+
* label="Reporting period"
|
|
2882
|
+
* value={range}
|
|
2883
|
+
* onChange={setRange}
|
|
2884
|
+
* presets={[
|
|
2885
|
+
* { label: 'Last 7 days', range: () => ({ start: addDays(new Date(), -6), end: new Date() }) },
|
|
2886
|
+
* ]}
|
|
2887
|
+
* />
|
|
2888
|
+
* ```
|
|
2889
|
+
*/
|
|
2890
|
+
declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
2891
|
+
|
|
2892
|
+
interface ColorPickerProps {
|
|
2893
|
+
/** Hex string, e.g. `"#0466c8"`. */
|
|
2894
|
+
value?: string;
|
|
2895
|
+
onChange?: (hex: string) => void;
|
|
2896
|
+
label?: React$1.ReactNode;
|
|
2897
|
+
htmlFor?: string;
|
|
2898
|
+
name?: string;
|
|
2899
|
+
layout?: 'horizontal' | 'vertical';
|
|
2900
|
+
size?: FieldSize;
|
|
2901
|
+
/** Preset swatches shown in the popover. Defaults to a balanced 12-color set. */
|
|
2902
|
+
swatches?: string[];
|
|
2903
|
+
/** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
|
|
2904
|
+
allowCustom?: boolean;
|
|
2905
|
+
disabled?: boolean;
|
|
2906
|
+
errorMessage?: React$1.ReactNode;
|
|
2907
|
+
required?: boolean;
|
|
2908
|
+
placeholder?: string;
|
|
2909
|
+
}
|
|
2910
|
+
/**
|
|
2911
|
+
* Color picker: a swatch trigger that opens a popover with preset swatches, a
|
|
2912
|
+
* hex input, and (optionally) the native full picker for custom colors. Value
|
|
2913
|
+
* is a hex string, easy to store and submit.
|
|
2914
|
+
*
|
|
2915
|
+
* @example
|
|
2916
|
+
* ```tsx
|
|
2917
|
+
* <ColorPicker label="Brand colour" value={color} onChange={setColor} />
|
|
2918
|
+
* ```
|
|
2919
|
+
*/
|
|
2920
|
+
declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
2921
|
+
|
|
2922
|
+
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, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, 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, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, 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, TimePicker, type TimePickerProps, 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
|
@@ -2738,4 +2738,185 @@ interface TagsInputProps {
|
|
|
2738
2738
|
*/
|
|
2739
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
2740
|
|
|
2741
|
-
|
|
2741
|
+
interface OtpInputProps {
|
|
2742
|
+
/** Number of code boxes. Default `6`. */
|
|
2743
|
+
length?: number;
|
|
2744
|
+
value?: string;
|
|
2745
|
+
onChange?: (code: string) => void;
|
|
2746
|
+
/** Fired when every box is filled. */
|
|
2747
|
+
onComplete?: (code: string) => void;
|
|
2748
|
+
label?: React$1.ReactNode;
|
|
2749
|
+
htmlFor?: string;
|
|
2750
|
+
name?: string;
|
|
2751
|
+
/** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
|
|
2752
|
+
mode?: 'numeric' | 'alphanumeric';
|
|
2753
|
+
/** Render boxes as masked dots (for PIN entry). */
|
|
2754
|
+
masked?: boolean;
|
|
2755
|
+
size?: FieldSize;
|
|
2756
|
+
disabled?: boolean;
|
|
2757
|
+
errorMessage?: React$1.ReactNode;
|
|
2758
|
+
required?: boolean;
|
|
2759
|
+
/** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
|
|
2760
|
+
groupAfter?: number;
|
|
2761
|
+
}
|
|
2762
|
+
/**
|
|
2763
|
+
* Segmented one-time-code / PIN input. Auto-advances as the user types,
|
|
2764
|
+
* Backspace retreats, and pasting a code spreads it across the boxes. Set
|
|
2765
|
+
* `masked` for PIN entry, `mode="alphanumeric"` for letter codes.
|
|
2766
|
+
*
|
|
2767
|
+
* @example
|
|
2768
|
+
* ```tsx
|
|
2769
|
+
* <OtpInput length={6} value={code} onChange={setCode} onComplete={verify} />
|
|
2770
|
+
* ```
|
|
2771
|
+
*/
|
|
2772
|
+
declare function OtpInput({ length, value, onChange, onComplete, label, htmlFor, name, mode, masked, size, disabled, errorMessage, required, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
|
|
2773
|
+
|
|
2774
|
+
interface RatingProps {
|
|
2775
|
+
value?: number;
|
|
2776
|
+
defaultValue?: number;
|
|
2777
|
+
onChange?: (value: number) => void;
|
|
2778
|
+
/** Number of icons. Default `5`. */
|
|
2779
|
+
count?: number;
|
|
2780
|
+
/** Allow half-icon precision. Default `false`. */
|
|
2781
|
+
allowHalf?: boolean;
|
|
2782
|
+
/** Read-only display (no hover / click). */
|
|
2783
|
+
readOnly?: boolean;
|
|
2784
|
+
/** Clicking the current value again clears to 0. Default `true`. */
|
|
2785
|
+
clearable?: boolean;
|
|
2786
|
+
label?: React$1.ReactNode;
|
|
2787
|
+
size?: FieldSize;
|
|
2788
|
+
disabled?: boolean;
|
|
2789
|
+
/** Override the icon. Receives a `filled` flag. Default is a star. */
|
|
2790
|
+
icon?: (filled: boolean) => React$1.ReactNode;
|
|
2791
|
+
errorMessage?: React$1.ReactNode;
|
|
2792
|
+
name?: string;
|
|
2793
|
+
}
|
|
2794
|
+
/**
|
|
2795
|
+
* Star (or custom glyph) rating with optional half-steps, hover preview, and
|
|
2796
|
+
* read-only mode. Keyboard accessible: arrow keys adjust, Home/End jump to
|
|
2797
|
+
* min/max.
|
|
2798
|
+
*
|
|
2799
|
+
* @example
|
|
2800
|
+
* ```tsx
|
|
2801
|
+
* <Rating label="Quality" value={rating} onChange={setRating} allowHalf />
|
|
2802
|
+
* ```
|
|
2803
|
+
*
|
|
2804
|
+
* @example Read-only display
|
|
2805
|
+
* ```tsx
|
|
2806
|
+
* <Rating value={4.5} allowHalf readOnly />
|
|
2807
|
+
* ```
|
|
2808
|
+
*/
|
|
2809
|
+
declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, clearable, label, size, disabled, icon, errorMessage, name, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
2810
|
+
|
|
2811
|
+
interface TimePickerProps {
|
|
2812
|
+
/** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
|
|
2813
|
+
value?: string | null;
|
|
2814
|
+
onChange?: (value: string | null) => void;
|
|
2815
|
+
label?: React$1.ReactNode;
|
|
2816
|
+
htmlFor?: string;
|
|
2817
|
+
name?: string;
|
|
2818
|
+
placeholder?: string;
|
|
2819
|
+
layout?: 'horizontal' | 'vertical';
|
|
2820
|
+
size?: FieldSize;
|
|
2821
|
+
/** Display in 12-hour format with AM/PM (value stays 24h `"HH:mm"`). */
|
|
2822
|
+
use12Hours?: boolean;
|
|
2823
|
+
/** Include a seconds column. Default `false`. */
|
|
2824
|
+
withSeconds?: boolean;
|
|
2825
|
+
/** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
|
|
2826
|
+
minuteStep?: number;
|
|
2827
|
+
disabled?: boolean;
|
|
2828
|
+
errorMessage?: React$1.ReactNode;
|
|
2829
|
+
required?: boolean;
|
|
2830
|
+
style?: React$1.CSSProperties;
|
|
2831
|
+
}
|
|
2832
|
+
/**
|
|
2833
|
+
* Time picker with scrollable hour / minute (/ second) columns in a popover.
|
|
2834
|
+
* Value is a 24-hour `"HH:mm"` (or `"HH:mm:ss"`) string regardless of whether
|
|
2835
|
+
* the display is 12- or 24-hour, so it's stable to store and submit.
|
|
2836
|
+
*
|
|
2837
|
+
* @example
|
|
2838
|
+
* ```tsx
|
|
2839
|
+
* <TimePicker label="Departure" value={time} onChange={setTime} minuteStep={15} use12Hours />
|
|
2840
|
+
* ```
|
|
2841
|
+
*/
|
|
2842
|
+
declare function TimePicker({ value, onChange, label, htmlFor, name, placeholder, layout, size, use12Hours, withSeconds, minuteStep, disabled, errorMessage, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
2843
|
+
|
|
2844
|
+
interface DateRange {
|
|
2845
|
+
start: Date | null;
|
|
2846
|
+
end: Date | null;
|
|
2847
|
+
}
|
|
2848
|
+
interface DateRangePreset {
|
|
2849
|
+
label: string;
|
|
2850
|
+
/** Returns the range when clicked. */
|
|
2851
|
+
range: () => DateRange;
|
|
2852
|
+
}
|
|
2853
|
+
interface DateRangePickerProps {
|
|
2854
|
+
value?: DateRange;
|
|
2855
|
+
onChange?: (range: DateRange) => void;
|
|
2856
|
+
label?: React$1.ReactNode;
|
|
2857
|
+
htmlFor?: string;
|
|
2858
|
+
placeholder?: string;
|
|
2859
|
+
layout?: 'horizontal' | 'vertical';
|
|
2860
|
+
size?: FieldSize;
|
|
2861
|
+
min?: Date;
|
|
2862
|
+
max?: Date;
|
|
2863
|
+
/** 0 = Sunday, 1 = Monday. Default `0`. */
|
|
2864
|
+
weekStartsOn?: 0 | 1;
|
|
2865
|
+
/** Quick-select presets shown in a rail beside the calendars. */
|
|
2866
|
+
presets?: DateRangePreset[];
|
|
2867
|
+
format?: (d: Date) => string;
|
|
2868
|
+
disabled?: boolean;
|
|
2869
|
+
errorMessage?: React$1.ReactNode;
|
|
2870
|
+
required?: boolean;
|
|
2871
|
+
style?: React$1.CSSProperties;
|
|
2872
|
+
}
|
|
2873
|
+
/**
|
|
2874
|
+
* Two-month range date picker. Click a start date, then an end date; the span
|
|
2875
|
+
* between highlights as you hover. Optional quick-select presets (Today,
|
|
2876
|
+
* Last 7 days, This month, etc.) in a side rail.
|
|
2877
|
+
*
|
|
2878
|
+
* @example
|
|
2879
|
+
* ```tsx
|
|
2880
|
+
* <DateRangePicker
|
|
2881
|
+
* label="Reporting period"
|
|
2882
|
+
* value={range}
|
|
2883
|
+
* onChange={setRange}
|
|
2884
|
+
* presets={[
|
|
2885
|
+
* { label: 'Last 7 days', range: () => ({ start: addDays(new Date(), -6), end: new Date() }) },
|
|
2886
|
+
* ]}
|
|
2887
|
+
* />
|
|
2888
|
+
* ```
|
|
2889
|
+
*/
|
|
2890
|
+
declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
2891
|
+
|
|
2892
|
+
interface ColorPickerProps {
|
|
2893
|
+
/** Hex string, e.g. `"#0466c8"`. */
|
|
2894
|
+
value?: string;
|
|
2895
|
+
onChange?: (hex: string) => void;
|
|
2896
|
+
label?: React$1.ReactNode;
|
|
2897
|
+
htmlFor?: string;
|
|
2898
|
+
name?: string;
|
|
2899
|
+
layout?: 'horizontal' | 'vertical';
|
|
2900
|
+
size?: FieldSize;
|
|
2901
|
+
/** Preset swatches shown in the popover. Defaults to a balanced 12-color set. */
|
|
2902
|
+
swatches?: string[];
|
|
2903
|
+
/** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
|
|
2904
|
+
allowCustom?: boolean;
|
|
2905
|
+
disabled?: boolean;
|
|
2906
|
+
errorMessage?: React$1.ReactNode;
|
|
2907
|
+
required?: boolean;
|
|
2908
|
+
placeholder?: string;
|
|
2909
|
+
}
|
|
2910
|
+
/**
|
|
2911
|
+
* Color picker: a swatch trigger that opens a popover with preset swatches, a
|
|
2912
|
+
* hex input, and (optionally) the native full picker for custom colors. Value
|
|
2913
|
+
* is a hex string, easy to store and submit.
|
|
2914
|
+
*
|
|
2915
|
+
* @example
|
|
2916
|
+
* ```tsx
|
|
2917
|
+
* <ColorPicker label="Brand colour" value={color} onChange={setColor} />
|
|
2918
|
+
* ```
|
|
2919
|
+
*/
|
|
2920
|
+
declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
2921
|
+
|
|
2922
|
+
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, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, 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, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, 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, TimePicker, type TimePickerProps, 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 };
|