@hex-core/components 1.2.1 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +407 -8
- package/dist/index.js +3249 -1253
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.d.ts
CHANGED
|
@@ -780,12 +780,11 @@ declare function PaginationNext({ className, ...props }: React$1.ComponentProps<
|
|
|
780
780
|
declare function PaginationEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
|
|
781
781
|
|
|
782
782
|
/**
|
|
783
|
-
* Calendar date grid built on react-day-picker v9. Forwards all DayPicker
|
|
784
|
-
*
|
|
785
|
-
*
|
|
786
|
-
*
|
|
787
|
-
*
|
|
788
|
-
* @returns A themed react-day-picker DayPicker instance.
|
|
783
|
+
* Calendar date grid built on react-day-picker v9. Forwards all DayPicker
|
|
784
|
+
* props. Pair `mode` + `selected` + `onSelect` for selection control;
|
|
785
|
+
* pass `captionLayout="dropdown"` with `startMonth`/`endMonth` for
|
|
786
|
+
* native year-dropdown navigation.
|
|
787
|
+
* @returns A themed react-day-picker instance with our dropdown overlay CSS.
|
|
789
788
|
*/
|
|
790
789
|
declare function Calendar({ className, classNames, showOutsideDays, ...props }: React$1.ComponentProps<typeof DayPicker>): react_jsx_runtime.JSX.Element;
|
|
791
790
|
declare namespace Calendar {
|
|
@@ -807,6 +806,19 @@ interface DatePickerProps {
|
|
|
807
806
|
className?: string;
|
|
808
807
|
/** Accessible label for the trigger (required when no visible label is adjacent). */
|
|
809
808
|
"aria-label"?: string;
|
|
809
|
+
/**
|
|
810
|
+
* Caption layout forwarded to react-day-picker. Use `"dropdown"` (or
|
|
811
|
+
* `"dropdown-years"` / `"dropdown-months"`) to render native `<select>`
|
|
812
|
+
* navigation — useful for birth-date pickers and far-out years.
|
|
813
|
+
*
|
|
814
|
+
* Always pair `dropdown` layouts with explicit `startMonth` and `endMonth`;
|
|
815
|
+
* the RDP default span is ±100 years.
|
|
816
|
+
*/
|
|
817
|
+
captionLayout?: "label" | "dropdown" | "dropdown-months" | "dropdown-years";
|
|
818
|
+
/** Earliest month/year navigable in the calendar. Forwarded to react-day-picker. */
|
|
819
|
+
startMonth?: Date;
|
|
820
|
+
/** Latest month/year navigable in the calendar. Forwarded to react-day-picker. */
|
|
821
|
+
endMonth?: Date;
|
|
810
822
|
}
|
|
811
823
|
/**
|
|
812
824
|
* Date picker composed from Popover + Calendar + a styled trigger button.
|
|
@@ -814,7 +826,7 @@ interface DatePickerProps {
|
|
|
814
826
|
* This is a minimal single-date picker. For multi/range, compose Calendar + Popover yourself.
|
|
815
827
|
* @returns A button that opens a single-date calendar popover.
|
|
816
828
|
*/
|
|
817
|
-
declare function DatePicker({ value, onChange, placeholder, dateFormat, disabled, className, "aria-label": ariaLabel, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
829
|
+
declare function DatePicker({ value, onChange, placeholder, dateFormat, disabled, className, "aria-label": ariaLabel, captionLayout, startMonth, endMonth, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
818
830
|
declare namespace DatePicker {
|
|
819
831
|
var displayName: string;
|
|
820
832
|
}
|
|
@@ -981,6 +993,379 @@ declare namespace Combobox {
|
|
|
981
993
|
var displayName: string;
|
|
982
994
|
}
|
|
983
995
|
|
|
996
|
+
/** Props for the ColorPicker component. */
|
|
997
|
+
interface ColorPickerProps {
|
|
998
|
+
/**
|
|
999
|
+
* Current color as an HSL triplet string (`"<H> <S>% <L>%"`, e.g. `"240 5.9% 10%"`).
|
|
1000
|
+
* Match the format used by `@hex-core/tokens`; round-trip safe.
|
|
1001
|
+
*/
|
|
1002
|
+
value: string;
|
|
1003
|
+
/**
|
|
1004
|
+
* Called with the next HSL triplet whenever the user drags a slider or commits a valid hex value.
|
|
1005
|
+
* Not called for invalid hex input — the picker keeps the prior value until the input parses cleanly.
|
|
1006
|
+
*/
|
|
1007
|
+
onChange: (value: string) => void;
|
|
1008
|
+
/**
|
|
1009
|
+
* Disable interaction. Native `disabled` attribute is set on the trigger so the
|
|
1010
|
+
* popover doesn't open via mouse or keyboard activation. Tab focus still lands
|
|
1011
|
+
* on the trigger per browser defaults; if you want to fully remove it from the
|
|
1012
|
+
* tab order, wrap in a parent that handles `tabIndex` accordingly.
|
|
1013
|
+
*/
|
|
1014
|
+
disabled?: boolean;
|
|
1015
|
+
/** Accessible name for the trigger button (defaults to "Pick color"). */
|
|
1016
|
+
"aria-label"?: string;
|
|
1017
|
+
/** Additional class names merged onto the trigger. */
|
|
1018
|
+
className?: string;
|
|
1019
|
+
}
|
|
1020
|
+
/**
|
|
1021
|
+
* HSL-native color picker. Edits an HSL triplet directly via three sliders
|
|
1022
|
+
* (H/S/L), with a hex input as a display adapter.
|
|
1023
|
+
*
|
|
1024
|
+
* Round-trip safe: triplet → hex → triplet preserves the slider state because
|
|
1025
|
+
* sliders are the source of truth and hex updates them only when valid.
|
|
1026
|
+
*
|
|
1027
|
+
* @param props - Controlled component; `value` and `onChange` are required.
|
|
1028
|
+
* @returns A trigger button that opens a popover with H/S/L sliders + hex input.
|
|
1029
|
+
* @example
|
|
1030
|
+
* ```tsx
|
|
1031
|
+
* const [color, setColor] = React.useState("240 5.9% 10%");
|
|
1032
|
+
* <ColorPicker value={color} onChange={setColor} aria-label="Primary color" />
|
|
1033
|
+
* ```
|
|
1034
|
+
*/
|
|
1035
|
+
declare function ColorPicker({ value, onChange, disabled, "aria-label": ariaLabel, className, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
1036
|
+
|
|
1037
|
+
/**
|
|
1038
|
+
* Color conversion utilities for the HSL-triplet token format used across
|
|
1039
|
+
* `@hex-core/tokens` themes (`H S% L%`, e.g. `"240 5.9% 10%"` — no `hsl()`
|
|
1040
|
+
* wrapper, no commas).
|
|
1041
|
+
*
|
|
1042
|
+
* The triplet is the round-trip-safe serialization for Hex UI: tokens flow
|
|
1043
|
+
* triplet → CSS `hsl(var(--token))` → rendered color, and the ColorPicker
|
|
1044
|
+
* component edits triplets directly. Hex/RGB conversions are display
|
|
1045
|
+
* adapters, not the source of truth.
|
|
1046
|
+
*/
|
|
1047
|
+
/** Parsed HSL components. `h` is degrees (0–360); `s` and `l` are percentages (0–100). */
|
|
1048
|
+
interface HslTriplet {
|
|
1049
|
+
h: number;
|
|
1050
|
+
s: number;
|
|
1051
|
+
l: number;
|
|
1052
|
+
}
|
|
1053
|
+
/** Parsed RGB components. Each channel is 0–255. */
|
|
1054
|
+
interface RgbColor {
|
|
1055
|
+
r: number;
|
|
1056
|
+
g: number;
|
|
1057
|
+
b: number;
|
|
1058
|
+
}
|
|
1059
|
+
/**
|
|
1060
|
+
* Parse an HSL triplet string into numeric components.
|
|
1061
|
+
*
|
|
1062
|
+
* Note: malformed input silently coerces to `{0,0,0}` (pure black) rather than
|
|
1063
|
+
* returning an error signal. Callers that need to distinguish "user typed
|
|
1064
|
+
* black" from "user typed garbage" should validate the input format first.
|
|
1065
|
+
* `hexToHslTriplet` returns `null` for malformed hex; this asymmetry is
|
|
1066
|
+
* intentional — triplets feed CSS variables where any non-color value would
|
|
1067
|
+
* already break rendering.
|
|
1068
|
+
*
|
|
1069
|
+
* @param triplet - String in the form `"<H> <S>% <L>%"` (e.g. `"240 5.9% 10%"`).
|
|
1070
|
+
* @returns Numeric components, or `{0,0,0}` if the input is malformed.
|
|
1071
|
+
*/
|
|
1072
|
+
declare function parseHslTriplet(triplet: string): HslTriplet;
|
|
1073
|
+
/**
|
|
1074
|
+
* Format HSL components into an HSL triplet string (the canonical token format).
|
|
1075
|
+
* @param hsl - Numeric components.
|
|
1076
|
+
* @returns Triplet in the form `"<H> <S>% <L>%"`.
|
|
1077
|
+
*/
|
|
1078
|
+
declare function formatHslTriplet({ h, s, l }: HslTriplet): string;
|
|
1079
|
+
/**
|
|
1080
|
+
* Convert HSL components to RGB.
|
|
1081
|
+
* @param h - Hue (0–360).
|
|
1082
|
+
* @param s - Saturation (0–100).
|
|
1083
|
+
* @param l - Lightness (0–100).
|
|
1084
|
+
* @returns RGB channels (0–255, rounded).
|
|
1085
|
+
*/
|
|
1086
|
+
declare function hslToRgb(h: number, s: number, l: number): RgbColor;
|
|
1087
|
+
/**
|
|
1088
|
+
* Convert RGB components to HSL.
|
|
1089
|
+
* @param r - Red (0–255).
|
|
1090
|
+
* @param g - Green (0–255).
|
|
1091
|
+
* @param b - Blue (0–255).
|
|
1092
|
+
* @returns HSL components (h: 0–360, s: 0–100, l: 0–100).
|
|
1093
|
+
*/
|
|
1094
|
+
declare function rgbToHsl(r: number, g: number, b: number): HslTriplet;
|
|
1095
|
+
/**
|
|
1096
|
+
* Convert an HSL triplet to a 6-digit hex string.
|
|
1097
|
+
* @param triplet - HSL triplet (e.g. `"240 5.9% 10%"`).
|
|
1098
|
+
* @returns Lowercase hex string with leading `#` (e.g. `"#181a1f"`).
|
|
1099
|
+
*/
|
|
1100
|
+
declare function hslTripletToHex(triplet: string): string;
|
|
1101
|
+
/**
|
|
1102
|
+
* Convert a hex string to an HSL triplet.
|
|
1103
|
+
* Accepts 3-digit (`#abc`) or 6-digit (`#aabbcc`) hex with optional `#`.
|
|
1104
|
+
* @param hex - Hex color string.
|
|
1105
|
+
* @returns HSL triplet, or `null` if the input is malformed.
|
|
1106
|
+
*/
|
|
1107
|
+
declare function hexToHslTriplet(hex: string): string | null;
|
|
1108
|
+
|
|
1109
|
+
interface MultiComboboxOption {
|
|
1110
|
+
/** The value returned in the onChange array (stable, unique). */
|
|
1111
|
+
value: string;
|
|
1112
|
+
/** The display label shown in the list and the trigger. */
|
|
1113
|
+
label: string;
|
|
1114
|
+
/** Mark as non-selectable. */
|
|
1115
|
+
disabled?: boolean;
|
|
1116
|
+
}
|
|
1117
|
+
interface MultiComboboxProps {
|
|
1118
|
+
/** The list of selectable options. */
|
|
1119
|
+
options: MultiComboboxOption[];
|
|
1120
|
+
/** Controlled selected values. */
|
|
1121
|
+
value?: string[];
|
|
1122
|
+
/** Fired when the user toggles an option: (values: string[]) => void */
|
|
1123
|
+
onChange?: (values: string[]) => void;
|
|
1124
|
+
/** Text shown on the trigger when nothing is selected. */
|
|
1125
|
+
placeholder?: string;
|
|
1126
|
+
/** Input placeholder inside the popover list. */
|
|
1127
|
+
searchPlaceholder?: string;
|
|
1128
|
+
/** Text shown when no options match the search. */
|
|
1129
|
+
emptyText?: string;
|
|
1130
|
+
/** Soft cap on selections. Once reached, unselected options become non-selectable. */
|
|
1131
|
+
maxSelected?: number;
|
|
1132
|
+
/** Close the popover after every pick. Default false (multi-select UX expects staying open). */
|
|
1133
|
+
closeOnSelect?: boolean;
|
|
1134
|
+
/** Disable the trigger. */
|
|
1135
|
+
disabled?: boolean;
|
|
1136
|
+
/** Extra class names on the trigger button. */
|
|
1137
|
+
className?: string;
|
|
1138
|
+
/** Accessible label for the trigger (required when no adjacent visible label). */
|
|
1139
|
+
"aria-label"?: string;
|
|
1140
|
+
/** Id of an external visible label that names this combobox. */
|
|
1141
|
+
"aria-labelledby"?: string;
|
|
1142
|
+
}
|
|
1143
|
+
/**
|
|
1144
|
+
* Searchable multi-select input built on Command + Popover.
|
|
1145
|
+
*
|
|
1146
|
+
* Pass `options` with `{ value, label }` and bind `value` (string[]) +
|
|
1147
|
+
* `onChange`. The trigger shows "{n} selected" once any option is picked, with
|
|
1148
|
+
* the comma-separated label list mirrored into the `title` attribute for
|
|
1149
|
+
* pointer/screen-reader fallback. Each option is announced with `aria-selected`.
|
|
1150
|
+
* @returns A trigger button that opens a multi-select option list.
|
|
1151
|
+
*/
|
|
1152
|
+
declare function MultiCombobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, maxSelected, closeOnSelect, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: MultiComboboxProps): react_jsx_runtime.JSX.Element;
|
|
1153
|
+
declare namespace MultiCombobox {
|
|
1154
|
+
var displayName: string;
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
type StepStatus = "complete" | "current" | "upcoming" | "error";
|
|
1158
|
+
interface StepperStep {
|
|
1159
|
+
/** Stable unique id used as the React key. */
|
|
1160
|
+
id: string;
|
|
1161
|
+
/** Step name shown next to the indicator. */
|
|
1162
|
+
label: string;
|
|
1163
|
+
/** Optional secondary text under the label. */
|
|
1164
|
+
description?: string;
|
|
1165
|
+
/** Disable the step (only applies when onStepClick is provided). */
|
|
1166
|
+
disabled?: boolean;
|
|
1167
|
+
/**
|
|
1168
|
+
* Override the index-derived status. Use `"error"` to mark a failed step
|
|
1169
|
+
* (e.g. validation failure in a form wizard); `"complete"` / `"current"` /
|
|
1170
|
+
* `"upcoming"` are derived from `current` by default.
|
|
1171
|
+
*/
|
|
1172
|
+
status?: StepStatus;
|
|
1173
|
+
}
|
|
1174
|
+
interface StepperProps extends Omit<React$1.HTMLAttributes<HTMLOListElement>, "aria-label" | "onClick"> {
|
|
1175
|
+
/** Ordered list of steps. */
|
|
1176
|
+
steps: StepperStep[];
|
|
1177
|
+
/** Index of the current step (controlled). */
|
|
1178
|
+
current: number;
|
|
1179
|
+
/** Layout direction. */
|
|
1180
|
+
orientation?: "horizontal" | "vertical";
|
|
1181
|
+
/** Indicator size. */
|
|
1182
|
+
size?: "sm" | "md";
|
|
1183
|
+
/** When provided, each step is rendered as a clickable button. */
|
|
1184
|
+
onStepClick?: (index: number) => void;
|
|
1185
|
+
/** Required accessible name for the ordered list. */
|
|
1186
|
+
"aria-label": string;
|
|
1187
|
+
}
|
|
1188
|
+
/**
|
|
1189
|
+
* Linear progress indicator for multi-step flows (form wizards, onboarding,
|
|
1190
|
+
* checkout). Pure semantic HTML — `<ol>` of `<li>` with `aria-current="step"`
|
|
1191
|
+
* on the current item; per-step `status` overrides allow marking "error".
|
|
1192
|
+
*
|
|
1193
|
+
* Pass `onStepClick` to make completed/non-disabled steps interactive.
|
|
1194
|
+
* @returns An accessible ordered step list.
|
|
1195
|
+
*/
|
|
1196
|
+
declare function Stepper({ steps, current, orientation, size, onStepClick, "aria-label": ariaLabel, className, ...rest }: StepperProps): react_jsx_runtime.JSX.Element;
|
|
1197
|
+
declare namespace Stepper {
|
|
1198
|
+
var displayName: string;
|
|
1199
|
+
}
|
|
1200
|
+
|
|
1201
|
+
type TimelineStatus = "default" | "success" | "warning" | "error" | "info";
|
|
1202
|
+
interface TimelineEvent {
|
|
1203
|
+
/** Stable unique id used as the React key. */
|
|
1204
|
+
id: string;
|
|
1205
|
+
/** Headline for the event. */
|
|
1206
|
+
title: string;
|
|
1207
|
+
/** Optional timestamp/metadata (e.g. "2 hours ago", "2026-04-27 14:30"). */
|
|
1208
|
+
timestamp?: React$1.ReactNode;
|
|
1209
|
+
/** Optional secondary text/body. */
|
|
1210
|
+
description?: React$1.ReactNode;
|
|
1211
|
+
/** Optional icon override for the indicator. Replaces the default dot. */
|
|
1212
|
+
icon?: React$1.ReactNode;
|
|
1213
|
+
/** Color variant for the indicator. */
|
|
1214
|
+
status?: TimelineStatus;
|
|
1215
|
+
}
|
|
1216
|
+
interface TimelineProps extends Omit<React$1.HTMLAttributes<HTMLOListElement>, "aria-label"> {
|
|
1217
|
+
/** Ordered list of chronological events. */
|
|
1218
|
+
events: TimelineEvent[];
|
|
1219
|
+
/** Indicator size — `"md"` by default. */
|
|
1220
|
+
size?: "sm" | "md";
|
|
1221
|
+
/** Required accessible name for the ordered list. */
|
|
1222
|
+
"aria-label": string;
|
|
1223
|
+
}
|
|
1224
|
+
/**
|
|
1225
|
+
* Vertical chronological event feed (activity log, audit trail, release notes).
|
|
1226
|
+
* Pure semantic HTML — `<ol>` of `<li>`. Events expose an optional icon, a
|
|
1227
|
+
* status color, a timestamp, and a description; status is purely visual, no
|
|
1228
|
+
* aria-current is set since events are historical, not navigational.
|
|
1229
|
+
*
|
|
1230
|
+
* For Gantt-style project timelines, build a custom layout — Timeline is for
|
|
1231
|
+
* event feeds, not scheduling.
|
|
1232
|
+
* @returns An accessible vertical event list.
|
|
1233
|
+
*/
|
|
1234
|
+
declare function Timeline({ events, size, "aria-label": ariaLabel, className, ...rest }: TimelineProps): react_jsx_runtime.JSX.Element;
|
|
1235
|
+
declare namespace Timeline {
|
|
1236
|
+
var displayName: string;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
interface DropzoneProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange" | "onDrop" | "children"> {
|
|
1240
|
+
/** Fired with the accepted file list every time the user picks or drops files. */
|
|
1241
|
+
onFilesSelected?: (files: File[]) => void;
|
|
1242
|
+
/**
|
|
1243
|
+
* Fired when files are dropped/picked but ALL of them are filtered out by
|
|
1244
|
+
* `accept` / `maxSize` / `maxFiles`. Useful for surfacing "file too large"
|
|
1245
|
+
* or "wrong type" toasts to the user. Receives the rejected File[].
|
|
1246
|
+
*/
|
|
1247
|
+
onFilesRejected?: (files: File[]) => void;
|
|
1248
|
+
/** `accept` attribute forwarded to the hidden file input (e.g. "image/*", ".csv"). */
|
|
1249
|
+
accept?: string;
|
|
1250
|
+
/** Allow multiple files. Default true. */
|
|
1251
|
+
multiple?: boolean;
|
|
1252
|
+
/** Maximum total file count (after dedupe). Excess files are dropped silently — surface in your handler. */
|
|
1253
|
+
maxFiles?: number;
|
|
1254
|
+
/** Maximum size per file in bytes. Files over the cap are filtered before onFilesSelected fires. */
|
|
1255
|
+
maxSize?: number;
|
|
1256
|
+
/** Disable interaction. */
|
|
1257
|
+
disabled?: boolean;
|
|
1258
|
+
/** Optional render override for the dropzone body. Receives drag state. */
|
|
1259
|
+
children?: React$1.ReactNode | ((state: DropzoneRenderState) => React$1.ReactNode);
|
|
1260
|
+
/** Required accessible name for the drop area. */
|
|
1261
|
+
"aria-label": string;
|
|
1262
|
+
}
|
|
1263
|
+
interface DropzoneRenderState {
|
|
1264
|
+
isDragOver: boolean;
|
|
1265
|
+
isDisabled: boolean;
|
|
1266
|
+
openFileDialog: () => void;
|
|
1267
|
+
}
|
|
1268
|
+
/**
|
|
1269
|
+
* Drag-and-drop file input built on the native HTML5 drag-drop API plus a
|
|
1270
|
+
* visually-hidden (sr-only) `<input type="file">` for screen-reader and
|
|
1271
|
+
* keyboard access.
|
|
1272
|
+
*
|
|
1273
|
+
* Two interaction surfaces:
|
|
1274
|
+
* - The visible drop area is a `role="button"` div with `tabIndex=0` and the
|
|
1275
|
+
* required `aria-label`. Click, Enter, or Space proxies through to click the
|
|
1276
|
+
* hidden input, opening the system file dialog.
|
|
1277
|
+
* - The hidden input itself remains in the accessibility tree (sr-only, NOT
|
|
1278
|
+
* `aria-hidden`) so AT-driven file pickers can find it directly.
|
|
1279
|
+
*
|
|
1280
|
+
* Pass `children` as a node (default placeholder) or a function receiving
|
|
1281
|
+
* `{ isDragOver, isDisabled, openFileDialog }` for full layout control.
|
|
1282
|
+
* @returns A drop area + hidden file input pair that yields a File[].
|
|
1283
|
+
*/
|
|
1284
|
+
declare function Dropzone({ onFilesSelected, onFilesRejected, accept, multiple, maxFiles, maxSize, disabled, children, className, "aria-label": ariaLabel, ...rest }: DropzoneProps): react_jsx_runtime.JSX.Element;
|
|
1285
|
+
declare namespace Dropzone {
|
|
1286
|
+
var displayName: string;
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
interface TimePickerProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "size"> {
|
|
1290
|
+
/** Controlled time value as `"HH:MM"` or `"HH:MM:SS"` (24-hour). */
|
|
1291
|
+
value?: string;
|
|
1292
|
+
/** Fired with the new `"HH:MM"` (or `"HH:MM:SS"`) string when the user picks a time. */
|
|
1293
|
+
onChange?: (value: string) => void;
|
|
1294
|
+
/**
|
|
1295
|
+
* Step in seconds — `60` shows HH:MM only (default), `1` shows HH:MM:SS.
|
|
1296
|
+
* Smaller values change the spinner increment in supported browsers.
|
|
1297
|
+
*/
|
|
1298
|
+
step?: number;
|
|
1299
|
+
/** Earliest selectable time as `"HH:MM"`. */
|
|
1300
|
+
min?: string;
|
|
1301
|
+
/** Latest selectable time as `"HH:MM"`. */
|
|
1302
|
+
max?: string;
|
|
1303
|
+
/** Disable the input. */
|
|
1304
|
+
disabled?: boolean;
|
|
1305
|
+
/** Accessible label for the trigger (required when no adjacent visible <label>). */
|
|
1306
|
+
"aria-label"?: string;
|
|
1307
|
+
}
|
|
1308
|
+
/**
|
|
1309
|
+
* Time input — styled wrapper around the native `<input type="time">` so the
|
|
1310
|
+
* browser handles 12/24-hour locale, keyboard arrow stepping, and screen-reader
|
|
1311
|
+
* announcement. Value is a `"HH:MM"` (or `"HH:MM:SS"` when `step={1}`) string.
|
|
1312
|
+
*
|
|
1313
|
+
* For free-form composite hour/minute fields with explicit AM/PM segments,
|
|
1314
|
+
* compose Input + Select yourself — the native input covers ~95% of TimePicker
|
|
1315
|
+
* use cases with full a11y, including keyboard-driven hour/minute spinning.
|
|
1316
|
+
* @returns A token-styled native time input.
|
|
1317
|
+
*/
|
|
1318
|
+
declare const TimePicker: React$1.ForwardRefExoticComponent<TimePickerProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1319
|
+
|
|
1320
|
+
interface FileTreeNode {
|
|
1321
|
+
/** Stable unique id used as React key + ARIA target. */
|
|
1322
|
+
id: string;
|
|
1323
|
+
/** Display name (file or folder). */
|
|
1324
|
+
name: string;
|
|
1325
|
+
/** Nested children. Presence (even if empty array) marks the node as a folder. */
|
|
1326
|
+
children?: FileTreeNode[];
|
|
1327
|
+
/** Optional icon override. Default chooses folder/file based on `children`. */
|
|
1328
|
+
icon?: React$1.ReactNode;
|
|
1329
|
+
/** Disable selection + expand toggle. */
|
|
1330
|
+
disabled?: boolean;
|
|
1331
|
+
}
|
|
1332
|
+
interface FileTreeProps {
|
|
1333
|
+
/** Root nodes. */
|
|
1334
|
+
nodes: FileTreeNode[];
|
|
1335
|
+
/** Uncontrolled initial expanded ids. */
|
|
1336
|
+
defaultExpanded?: string[];
|
|
1337
|
+
/** Controlled expanded ids. */
|
|
1338
|
+
expanded?: string[];
|
|
1339
|
+
/** Fired when expanded set changes (array of ids). */
|
|
1340
|
+
onExpandedChange?: (ids: string[]) => void;
|
|
1341
|
+
/** Controlled selected node id. */
|
|
1342
|
+
selected?: string;
|
|
1343
|
+
/** Fired when the user activates a node (click, Enter, or Space). */
|
|
1344
|
+
onSelect?: (id: string) => void;
|
|
1345
|
+
/** Required accessible name for the tree container. */
|
|
1346
|
+
"aria-label": string;
|
|
1347
|
+
/** Extra class names on the root tree element. */
|
|
1348
|
+
className?: string;
|
|
1349
|
+
}
|
|
1350
|
+
/**
|
|
1351
|
+
* Hierarchical tree view for files, folders, settings sections, or any nested
|
|
1352
|
+
* navigation. Built on the WAI-ARIA tree pattern: `role="tree"` root,
|
|
1353
|
+
* `role="treeitem"` per node, `role="group"` per child group, with
|
|
1354
|
+
* `aria-level` / `aria-expanded` / `aria-selected` reflecting state.
|
|
1355
|
+
*
|
|
1356
|
+
* Keyboard: Up/Down move between visible items; Right expands a folder or
|
|
1357
|
+
* moves to the first child; Left collapses or moves to the parent;
|
|
1358
|
+
* Enter/Space activate the focused node; Home/End jump to the first/last.
|
|
1359
|
+
*
|
|
1360
|
+
* Expanded state is uncontrolled by default (`defaultExpanded`). Pass
|
|
1361
|
+
* `expanded` + `onExpandedChange` for controlled mode.
|
|
1362
|
+
* @returns A keyboard-accessible nested tree.
|
|
1363
|
+
*/
|
|
1364
|
+
declare function FileTree({ nodes, defaultExpanded, expanded: expandedProp, onExpandedChange, selected, onSelect, "aria-label": ariaLabel, className, }: FileTreeProps): react_jsx_runtime.JSX.Element;
|
|
1365
|
+
declare namespace FileTree {
|
|
1366
|
+
var displayName: string;
|
|
1367
|
+
}
|
|
1368
|
+
|
|
984
1369
|
/** Root container controlling open state of a side sheet. */
|
|
985
1370
|
declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
|
|
986
1371
|
/** The element (usually a button) that opens the sheet. */
|
|
@@ -1235,6 +1620,20 @@ declare const commandSchema: ComponentSchemaDefinition;
|
|
|
1235
1620
|
|
|
1236
1621
|
declare const comboboxSchema: ComponentSchemaDefinition;
|
|
1237
1622
|
|
|
1623
|
+
declare const multiComboboxSchema: ComponentSchemaDefinition;
|
|
1624
|
+
|
|
1625
|
+
declare const stepperSchema: ComponentSchemaDefinition;
|
|
1626
|
+
|
|
1627
|
+
declare const timelineSchema: ComponentSchemaDefinition;
|
|
1628
|
+
|
|
1629
|
+
declare const dropzoneSchema: ComponentSchemaDefinition;
|
|
1630
|
+
|
|
1631
|
+
declare const timePickerSchema: ComponentSchemaDefinition;
|
|
1632
|
+
|
|
1633
|
+
declare const fileTreeSchema: ComponentSchemaDefinition;
|
|
1634
|
+
|
|
1635
|
+
declare const colorPickerSchema: ComponentSchemaDefinition;
|
|
1636
|
+
|
|
1238
1637
|
declare const sheetSchema: ComponentSchemaDefinition;
|
|
1239
1638
|
|
|
1240
1639
|
declare const drawerSchema: ComponentSchemaDefinition;
|
|
@@ -1250,4 +1649,4 @@ declare const sidebarSchema: ComponentSchemaDefinition;
|
|
|
1250
1649
|
*/
|
|
1251
1650
|
declare function cn(...inputs: ClassValue[]): string;
|
|
1252
1651
|
|
|
1253
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Cluster, type ClusterProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, type DataTableProps, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, type SpacerProps, Stack, type StackProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, accordionSchema, alertDialogSchema, alertSchema, alertVariants, aspectRatioSchema, avatarSchema, badgeSchema, badgeVariants, breadcrumbSchema, buttonSchema, buttonVariants, calendarSchema, cardSchema, checkboxSchema, clusterSchema, clusterVariants, cn, collapsibleSchema, comboboxSchema, commandSchema, containerSchema, containerVariants, contextMenuSchema, dataTableSchema, datePickerSchema, dialogSchema, drawerSchema, dropdownMenuSchema, formSchema, gridSchema, gridVariants, hoverCardSchema, inputOTPSchema, inputSchema, labelSchema, menubarSchema, navigationMenuSchema, navigationMenuTriggerStyle, paginationSchema, popoverSchema, progressSchema, radioGroupSchema, resizableSchema, scrollAreaSchema, selectSchema, separatorSchema, sheetSchema, sidebarSchema, skeletonSchema, sliderSchema, sonnerSchema, spacerSchema, spacerVariants, stackSchema, stackVariants, switchSchema, tableSchema, tabsSchema, textareaSchema, toggleGroupSchema, toggleSchema, toggleVariants, tooltipSchema, useFormField, useSidebar };
|
|
1652
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Cluster, type ClusterProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, type DataTableProps, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, type DropzoneProps, type DropzoneRenderState, FileTree, type FileTreeNode, type FileTreeProps, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, type HslTriplet, Input, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputProps, Label, type LabelProps, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, MultiCombobox, type MultiComboboxOption, type MultiComboboxProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, type RgbColor, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, type SpacerProps, Stack, type StackProps, type StepStatus, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, accordionSchema, alertDialogSchema, alertSchema, alertVariants, aspectRatioSchema, avatarSchema, badgeSchema, badgeVariants, breadcrumbSchema, buttonSchema, buttonVariants, calendarSchema, cardSchema, checkboxSchema, clusterSchema, clusterVariants, cn, collapsibleSchema, colorPickerSchema, comboboxSchema, commandSchema, containerSchema, containerVariants, contextMenuSchema, dataTableSchema, datePickerSchema, dialogSchema, drawerSchema, dropdownMenuSchema, dropzoneSchema, fileTreeSchema, formSchema, formatHslTriplet, gridSchema, gridVariants, hexToHslTriplet, hoverCardSchema, hslToRgb, hslTripletToHex, inputOTPSchema, inputSchema, labelSchema, menubarSchema, multiComboboxSchema, navigationMenuSchema, navigationMenuTriggerStyle, paginationSchema, parseHslTriplet, popoverSchema, progressSchema, radioGroupSchema, resizableSchema, rgbToHsl, scrollAreaSchema, selectSchema, separatorSchema, sheetSchema, sidebarSchema, skeletonSchema, sliderSchema, sonnerSchema, spacerSchema, spacerVariants, stackSchema, stackVariants, stepperSchema, switchSchema, tableSchema, tabsSchema, textareaSchema, timePickerSchema, timelineSchema, toggleGroupSchema, toggleSchema, toggleVariants, tooltipSchema, useFormField, useSidebar };
|