@takeoff-ui/react-spar 0.2.0 → 0.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.mjs CHANGED
@@ -1,17 +1,29 @@
1
- import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, createElement, useContext, Fragment as Fragment$1 } from 'react';
1
+ import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, useId, createElement, useContext, Fragment as Fragment$1 } from 'react';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
- import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Select as Select$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
3
+ import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, DropdownMenu, DropdownMenuArrow, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuItem, DropdownMenuViewport, useDropdownMenuContext, DropdownMenuContent, DropdownMenuTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, useOptionalFieldContext, Select as Select$1, SelectArrow as SelectArrow$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, SelectViewport as SelectViewport$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
4
4
  export { createToaster } from '@turkish-technology/spar';
5
5
  import { clsx } from 'clsx';
6
6
  import { ChevronBottomIconOutlinedRounded } from '@takeoff-icons/react/chevron-bottom';
7
7
  import { ChevronTopIconOutlinedRounded } from '@takeoff-icons/react/chevron-top';
8
- import { useReactTable, getPaginationRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, functionalUpdate, flexRender } from '@tanstack/react-table';
8
+ import { CloseIconOutlinedRounded } from '@takeoff-icons/react/close';
9
9
  import { ChevronRightIconOutlinedRounded } from '@takeoff-icons/react/chevron-right';
10
+ import { CheckIconOutlinedRounded } from '@takeoff-icons/react/check';
11
+ import { RemoveIconOutlinedRounded } from '@takeoff-icons/react/remove';
12
+ import { InfoIconFilledRounded } from '@takeoff-icons/react/info';
13
+ import { AlertCircleIconFilledRounded } from '@takeoff-icons/react/alert-circle';
14
+ import { EyeClosedIconOutlinedRounded } from '@takeoff-icons/react/eye-closed';
15
+ import { EyeOpenIconOutlinedRounded } from '@takeoff-icons/react/eye-open';
16
+ import { useReactTable, getPaginationRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, functionalUpdate, flexRender } from '@tanstack/react-table';
17
+ import { ArrowBottomIconOutlinedRounded } from '@takeoff-icons/react/arrow-bottom';
18
+ import { ArrowTopIconOutlinedRounded } from '@takeoff-icons/react/arrow-top';
10
19
  import { SwapIconOutlinedRounded } from '@takeoff-icons/react/swap';
11
20
  import { SearchIconOutlinedRounded } from '@takeoff-icons/react/search';
12
- import { ArrowLeftIconOutlinedRounded } from '@takeoff-icons/react/arrow-left';
13
- import { ArrowRightIconOutlinedRounded } from '@takeoff-icons/react/arrow-right';
14
21
  import { ChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/chevron-left';
22
+ import { DoubleChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-left';
23
+ import { DoubleChevronRightIconOutlinedRounded } from '@takeoff-icons/react/double-chevron-right';
24
+ import { ArrowDownloadIconOutlinedRounded } from '@takeoff-icons/react/arrow-download';
25
+ import { CheckCircleIconFilledRounded } from '@takeoff-icons/react/check-circle';
26
+ import { CloseCircleIconFilledRounded } from '@takeoff-icons/react/close-circle';
15
27
 
16
28
  // src/provider.tsx
17
29
 
@@ -145,6 +157,10 @@ var resolveDisclosureIndicator = (children, isOpen) => {
145
157
  if (typeof children === "function") return children({ isOpen });
146
158
  return children ?? (isOpen ? DEFAULT_DISCLOSURE_COLLAPSE_ICON : DEFAULT_DISCLOSURE_EXPAND_ICON);
147
159
  };
160
+ var renderPointerArrow = () => /* @__PURE__ */ jsxs(Fragment, { children: [
161
+ /* @__PURE__ */ jsx("polygon", { className: "tk-arrow-border", points: "0,0 5,5 10,0" }),
162
+ /* @__PURE__ */ jsx("polygon", { className: "tk-arrow-fill", points: "-0.086,-1.5 5,3.586 10.086,-1.5" })
163
+ ] });
148
164
 
149
165
  // src/components/accordion/base.ts
150
166
  var AccordionBase = createComponentBase({
@@ -195,6 +211,37 @@ function createSafeContext(displayName) {
195
211
  };
196
212
  return [Provider, useSafeContext];
197
213
  }
214
+ var resolveStaticWidth = (mode) => {
215
+ if (mode === "trigger" || mode === "content") return void 0;
216
+ return typeof mode === "number" ? `${mode}px` : mode;
217
+ };
218
+ var useContentWidthStyle = (mode, triggerRef) => {
219
+ const [triggerWidth, setTriggerWidth] = useState(null);
220
+ useEffect(() => {
221
+ if (mode !== "trigger") return;
222
+ const node = triggerRef.current;
223
+ if (!node) return;
224
+ const measure = () => setTriggerWidth(Math.round(node.getBoundingClientRect().width));
225
+ measure();
226
+ let frame = 0;
227
+ const observer = new ResizeObserver(() => {
228
+ cancelAnimationFrame(frame);
229
+ frame = requestAnimationFrame(measure);
230
+ });
231
+ observer.observe(node);
232
+ return () => {
233
+ cancelAnimationFrame(frame);
234
+ observer.disconnect();
235
+ };
236
+ }, [mode, triggerRef]);
237
+ return useMemo(() => {
238
+ if (mode === "trigger") {
239
+ return triggerWidth != null ? { width: triggerWidth } : void 0;
240
+ }
241
+ const staticWidth = resolveStaticWidth(mode);
242
+ return staticWidth != null ? { width: staticWidth } : void 0;
243
+ }, [mode, triggerWidth]);
244
+ };
198
245
  function useControllableState(controlledValue, defaultValue, onChange) {
199
246
  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
200
247
  const { current: isControlled } = useRef(controlledValue !== void 0);
@@ -208,7 +255,7 @@ function useControllableState(controlledValue, defaultValue, onChange) {
208
255
  },
209
256
  [isControlled, onChange]
210
257
  );
211
- return [value, setValue];
258
+ return [value, setValue, isControlled];
212
259
  }
213
260
 
214
261
  // src/components/accordion/context.ts
@@ -385,40 +432,6 @@ var AlertActions = (props) => {
385
432
  return /* @__PURE__ */ jsx(Component, { ...actionsProps, ref, ...rootAttrs, children });
386
433
  };
387
434
  AlertActions.displayName = "Alert.Actions";
388
- var baseSvgProps = {
389
- "xmlns": "http://www.w3.org/2000/svg",
390
- "width": "1em",
391
- "height": "1em",
392
- "viewBox": "0 0 24 24",
393
- "fill": "none",
394
- "stroke": "currentColor",
395
- "strokeWidth": 2,
396
- "strokeLinecap": "round",
397
- "strokeLinejoin": "round",
398
- "focusable": false,
399
- "aria-hidden": true
400
- };
401
- var filledSvgProps = {
402
- "xmlns": "http://www.w3.org/2000/svg",
403
- "width": "1em",
404
- "height": "1em",
405
- "viewBox": "0 0 24 24",
406
- "fill": "currentColor",
407
- "focusable": false,
408
- "aria-hidden": true
409
- };
410
- var PlaceholderChevronDown = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-down", ...props, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
411
- var PlaceholderChevronUp = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-up", ...props, children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
412
- var PlaceholderClose = (props) => /* @__PURE__ */ jsxs("svg", { ...baseSvgProps, "data-placeholder-icon": "close", ...props, children: [
413
- /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
414
- /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
415
- ] });
416
- var PlaceholderInfo = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "info", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(2 2) scale(1.714)", children: /* @__PURE__ */ jsx("path", { d: "M5.83333 0C2.61333 0 0 2.61333 0 5.83333C0 9.05333 2.61333 11.6667 5.83333 11.6667C9.05333 11.6667 11.6667 9.05333 11.6667 5.83333C11.6667 2.61333 9.05333 0 5.83333 0ZM5.83333 8.75C5.5125 8.75 5.25 8.4875 5.25 8.16667V5.83333C5.25 5.5125 5.5125 5.25 5.83333 5.25C6.15417 5.25 6.41667 5.5125 6.41667 5.83333V8.16667C6.41667 8.4875 6.15417 8.75 5.83333 8.75ZM6.41667 4.08333H5.25V2.91667H6.41667V4.08333Z" }) }) });
417
- var PlaceholderError = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "error", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(2 2) scale(1.714)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M5.83333 0C2.61333 0 0 2.61333 0 5.83333C0 9.05333 2.61333 11.6667 5.83333 11.6667C9.05333 11.6667 11.6667 9.05333 11.6667 5.83333C11.6667 2.61333 9.05333 0 5.83333 0ZM5.83333 2.91667C6.15417 2.91667 6.41667 3.17917 6.41667 3.5V5.83333C6.41667 6.15417 6.15417 6.41667 5.83333 6.41667C5.5125 6.41667 5.25 6.15417 5.25 5.83333V3.5C5.25 3.17917 5.5125 2.91667 5.83333 2.91667ZM5.25 7.58333H6.41667V8.75H5.25V7.58333Z" }) }) });
418
- var PlaceholderCheck = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5L20 7" }) });
419
- var PlaceholderRemove = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
420
- var PlaceholderEye = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(1 4.5) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M9.16667 1.66667C12.325 1.66667 15.1417 3.44167 16.5167 6.25C15.1417 9.05833 12.325 10.8333 9.16667 10.8333C6.00833 10.8333 3.19167 9.05833 1.81667 6.25C3.19167 3.44167 6.00833 1.66667 9.16667 1.66667ZM9.16667 0C5 0 1.44167 2.59167 0 6.25C1.44167 9.90833 5 12.5 9.16667 12.5C13.3333 12.5 16.8917 9.90833 18.3333 6.25C16.8917 2.59167 13.3333 0 9.16667 0ZM9.16667 4.16667C10.3167 4.16667 11.25 5.1 11.25 6.25C11.25 7.4 10.3167 8.33333 9.16667 8.33333C8.01667 8.33333 7.08333 7.4 7.08333 6.25C7.08333 5.1 8.01667 4.16667 9.16667 4.16667ZM9.16667 2.5C7.1 2.5 5.41667 4.18333 5.41667 6.25C5.41667 8.31667 7.1 10 9.16667 10C11.2333 10 12.9167 8.31667 12.9167 6.25C12.9167 4.18333 11.2333 2.5 9.16667 2.5Z" }) }) });
421
- var PlaceholderEyeOff = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye-off", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(1 2.42) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsx("path", { d: "M9.16667 2.95833C12.325 2.95833 15.1417 4.73333 16.5167 7.54167C16.025 8.55833 15.3333 9.43333 14.5083 10.1417L15.6833 11.3167C16.8417 10.2917 17.7583 9.00833 18.3333 7.54167C16.8917 3.88333 13.3333 1.29167 9.16667 1.29167C8.10833 1.29167 7.09167 1.45833 6.13333 1.76667L7.50833 3.14167C8.05 3.03333 8.6 2.95833 9.16667 2.95833ZM8.275 3.90833L10 5.63333C10.475 5.84167 10.8583 6.225 11.0667 6.7L12.7917 8.425C12.8583 8.14167 12.9083 7.84167 12.9083 7.53333C12.9167 5.46667 11.2333 3.79167 9.16667 3.79167C8.85833 3.79167 8.56667 3.83333 8.275 3.90833ZM0.841667 1.18333L3.075 3.41667C1.71667 4.48333 0.641667 5.9 0 7.54167C1.44167 11.2 5 13.7917 9.16667 13.7917C10.4333 13.7917 11.65 13.55 12.7667 13.1083L15.6167 15.9583L16.7917 14.7833L2.01667 0L0.841667 1.18333ZM7.09167 7.43333L9.26667 9.60833C9.23333 9.61667 9.2 9.625 9.16667 9.625C8.01667 9.625 7.08333 8.69167 7.08333 7.54167C7.08333 7.5 7.09167 7.475 7.09167 7.43333ZM4.25833 4.6L5.71667 6.05833C5.525 6.51667 5.41667 7.01667 5.41667 7.54167C5.41667 9.60833 7.1 11.2917 9.16667 11.2917C9.69167 11.2917 10.1917 11.1833 10.6417 10.9917L11.4583 11.8083C10.725 12.0083 9.95833 12.125 9.16667 12.125C6.00833 12.125 3.19167 10.35 1.81667 7.54167C2.4 6.35 3.25 5.36667 4.25833 4.6Z" }) }) });
422
435
  var AlertClose = (props) => {
423
436
  const theme = useComponentTheme("AlertClose");
424
437
  const { onClose } = useAlertContext("Alert.Close");
@@ -441,7 +454,7 @@ var AlertClose = (props) => {
441
454
  "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL),
442
455
  onClick: handleClick,
443
456
  ...closeRootAttrs,
444
- children: hasCustomChildren ? children : /* @__PURE__ */ jsx(PlaceholderClose, {})
457
+ children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {})
445
458
  }
446
459
  );
447
460
  };
@@ -568,7 +581,6 @@ var [BreadcrumbProvider] = createSafeContext("BreadcrumbProvider");
568
581
  // src/components/breadcrumb/defaults.ts
569
582
  var DEFAULT_SIZE3 = "base";
570
583
  var DEFAULT_TYPE2 = "basic";
571
- var DEFAULT_SEPARATOR_VARIANT = "chevron";
572
584
  var Breadcrumb = (props) => {
573
585
  const theme = useComponentTheme("Breadcrumb");
574
586
  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbBase, props, theme, {
@@ -610,17 +622,11 @@ var BreadcrumbPage = (props) => {
610
622
  return /* @__PURE__ */ jsx(BreadcrumbPage$1, { ...spar, ref, ...rootAttrs, children });
611
623
  };
612
624
  BreadcrumbPage.displayName = "Breadcrumb.Page";
613
- var DEFAULT_SEPARATOR_ICON = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
614
625
  var BreadcrumbSeparator = (props) => {
615
626
  const theme = useComponentTheme("BreadcrumbSeparator");
616
- const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme, {
617
- stateAttrs: ({ variant: variant2 = DEFAULT_SEPARATOR_VARIANT }) => ({
618
- "data-variant": variant2
619
- })
620
- });
621
- const { variant = DEFAULT_SEPARATOR_VARIANT, children, ref, ...spar } = rest;
622
- const fallback = variant === "chevron" ? DEFAULT_SEPARATOR_ICON : null;
623
- return /* @__PURE__ */ jsx(BreadcrumbSeparator$1, { ...spar, ref, ...rootAttrs, children: children ?? fallback });
627
+ const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme);
628
+ const { children, ref, ...spar } = rest;
629
+ return /* @__PURE__ */ jsx(BreadcrumbSeparator$1, { ...spar, ref, ...rootAttrs, children: children ?? /* @__PURE__ */ jsx(ChevronRightIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }) });
624
630
  };
625
631
  BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
626
632
 
@@ -849,56 +855,47 @@ var Checkbox = (props) => {
849
855
  // Visual props are consumed via `stateAttrs`; destructured to keep them
850
856
  // off the rendered DOM where they would leak as raw HTML attributes.
851
857
  size: _size,
852
- // `invalid` is forwarded to Spar as `invalid` (same name).
853
- invalid = false,
854
858
  // takeoff-spar tri-state vocabulary; mapped to Spar's `CheckedState` below.
855
859
  checked,
856
860
  defaultChecked,
857
861
  indeterminate = false,
858
862
  onChange,
859
- // Behavior props owned by Spar — defaults are restated here so they also
860
- // flow into the context for compound sub-components (asterisk on Label).
861
- disabled = false,
862
- readOnly = false,
863
- required = false,
864
863
  children,
865
864
  ref,
865
+ // `invalid`, `disabled`, `readOnly` and `required` are intentionally NOT
866
+ // destructured (so no eager `= false` default is applied) — they flow to
867
+ // Spar via `...sparProps` untouched. Defaulting them here would turn an
868
+ // omitted prop into an explicit `false`, defeating Spar's
869
+ // `prop ?? fieldCtx?.x` inheritance and silently overriding a wrapping
870
+ // `<Field disabled>`. Their resolved values are read back off Spar's
871
+ // render-prop `state` below for the compound context. See Radio/Input/
872
+ // Select wrappers for the same pass-through pattern.
866
873
  ...sparProps
867
874
  } = rest;
868
875
  const sparChecked = indeterminate ? "indeterminate" : checked;
869
876
  const sparDefaultChecked = indeterminate ? "indeterminate" : defaultChecked;
870
877
  const handleSparChange = onChange ? (next) => onChange(next === true) : void 0;
871
- return /* @__PURE__ */ jsx(
872
- Checkbox$1,
878
+ return /* @__PURE__ */ jsx(Checkbox$1, { ...sparProps, checked: sparChecked, defaultChecked: sparDefaultChecked, onChange: handleSparChange, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
879
+ CheckboxProvider,
873
880
  {
874
- ...sparProps,
875
- checked: sparChecked,
876
- defaultChecked: sparDefaultChecked,
877
- onChange: handleSparChange,
878
- disabled,
879
- readOnly,
880
- required,
881
- invalid,
882
- ref,
883
- ...rootAttrs,
884
- children: (state) => /* @__PURE__ */ jsx(
885
- CheckboxProvider,
886
- {
887
- value: {
888
- classNames,
889
- slotProps,
890
- required,
891
- invalid,
892
- disabled: state.disabled,
893
- readOnly: state.readOnly,
894
- checked: state.checked === true,
895
- indeterminate: state.checked === "indeterminate"
896
- },
897
- children: typeof children === "function" ? children(state) : children
898
- }
899
- )
881
+ value: {
882
+ classNames,
883
+ slotProps,
884
+ // Read the *resolved* behavior state off Spar's render-prop so the
885
+ // compound context reflects Field-inherited values, not the raw
886
+ // props. `state.required` / `state.invalid` already fold in
887
+ // `fieldCtx`, so `<Field disabled>` / `<Field invalid>` reach the
888
+ // Label asterisk and slotted styling correctly.
889
+ required: state.required,
890
+ invalid: state.invalid,
891
+ disabled: state.disabled,
892
+ readOnly: state.readOnly,
893
+ checked: state.checked === true,
894
+ indeterminate: state.checked === "indeterminate"
895
+ },
896
+ children: typeof children === "function" ? children(state) : children
900
897
  }
901
- );
898
+ ) });
902
899
  };
903
900
  Checkbox.displayName = "Checkbox";
904
901
  var CheckboxIndicator = (props) => {
@@ -917,7 +914,7 @@ var CheckboxIndicator = (props) => {
917
914
  instanceSlotProps: slotProps,
918
915
  instanceClassNames: classNames
919
916
  });
920
- const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsx(PlaceholderRemove, {}) : /* @__PURE__ */ jsx(PlaceholderCheck, {}) });
917
+ const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsx(RemoveIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(CheckIconOutlinedRounded, {}) });
921
918
  return /* @__PURE__ */ jsx("span", { ...rest, ...indicatorAttrs, ref, children: resolvedChildren });
922
919
  };
923
920
  CheckboxIndicator.displayName = "Checkbox.Indicator";
@@ -1042,7 +1039,7 @@ var Chip = (props) => {
1042
1039
  isRenderableNode(children) && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }),
1043
1040
  removable && // The icon-only remove control needs an accessible name. Default it,
1044
1041
  // but let `slotProps.remove` (spread after) override via `aria-label`.
1045
- /* @__PURE__ */ jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsx(PlaceholderClose, {}) })
1042
+ /* @__PURE__ */ jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) })
1046
1043
  ]
1047
1044
  }
1048
1045
  );
@@ -1057,6 +1054,7 @@ var DEFAULT_PLACEMENT = "right";
1057
1054
  var DEFAULT_HEADER_TYPE2 = "basic";
1058
1055
  var DEFAULT_FOOTER_TYPE2 = "basic";
1059
1056
  var DEFAULT_INTENSITY = "base";
1057
+ var DEFAULT_CLOSE_LABEL2 = "Close";
1060
1058
  var Drawer = (props) => {
1061
1059
  const theme = useComponentTheme("Drawer");
1062
1060
  const merged = { ...theme?.defaultProps, ...props };
@@ -1202,8 +1200,9 @@ DrawerFooter.displayName = "Drawer.Footer";
1202
1200
  var DrawerClose = (props) => {
1203
1201
  const theme = useComponentTheme("DrawerClose");
1204
1202
  const { rootAttrs, rest } = composeRootAttrs(DrawerCloseBase, props, theme);
1205
- const { children, ref, ...closeProps } = rest;
1206
- return /* @__PURE__ */ jsx(DialogClose$1, { ...closeProps, ref, ...rootAttrs, children });
1203
+ const { children, ref, "aria-label": ariaLabel, ...closeProps } = rest;
1204
+ const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
1205
+ return /* @__PURE__ */ jsx(DialogClose$1, { ...closeProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL2), ref, ...rootAttrs, children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) });
1207
1206
  };
1208
1207
  DrawerClose.displayName = "Drawer.Close";
1209
1208
 
@@ -1306,6 +1305,7 @@ DialogTrigger.displayName = "Dialog.Trigger";
1306
1305
  var DEFAULT_INTENSITY2 = "base";
1307
1306
  var DEFAULT_HEADER_TYPE3 = "basic";
1308
1307
  var DEFAULT_FOOTER_TYPE3 = "basic";
1308
+ var DEFAULT_CLOSE_LABEL3 = "Close";
1309
1309
  var DialogOverlay = (props) => {
1310
1310
  const theme = useComponentTheme("DialogOverlay");
1311
1311
  const { rootAttrs, rest } = composeRootAttrs(DialogOverlayBase, props, theme, {
@@ -1381,8 +1381,9 @@ DialogFooter.displayName = "Dialog.Footer";
1381
1381
  var DialogClose = (props) => {
1382
1382
  const theme = useComponentTheme("DialogClose");
1383
1383
  const { rootAttrs, rest } = composeRootAttrs(DialogCloseBase, props, theme);
1384
- const { children, ref, ...sparProps } = rest;
1385
- return /* @__PURE__ */ jsx(DialogClose$1, { ...sparProps, ...rootAttrs, ref, children });
1384
+ const { children, ref, "aria-label": ariaLabel, ...sparProps } = rest;
1385
+ const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
1386
+ return /* @__PURE__ */ jsx(DialogClose$1, { ...sparProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL3), ...rootAttrs, ref, children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) });
1386
1387
  };
1387
1388
  DialogClose.displayName = "Dialog.Close";
1388
1389
 
@@ -1399,6 +1400,182 @@ var Dialog2 = Object.assign(Dialog, {
1399
1400
  Close: DialogClose
1400
1401
  });
1401
1402
 
1403
+ // src/components/divider/base.ts
1404
+ var DividerBase = createComponentBase({
1405
+ name: "Divider",
1406
+ slots: ["root", "label"],
1407
+ classes: {
1408
+ root: "tk-divider",
1409
+ label: "tk-divider-label"
1410
+ }
1411
+ });
1412
+
1413
+ // src/components/divider/defaults.ts
1414
+ var DEFAULT_ORIENTATION = "horizontal";
1415
+ var DEFAULT_APPEARANCE5 = "solid";
1416
+ var DEFAULT_ALIGN = "center";
1417
+ var hasRenderableDividerLabel = (node) => Array.isArray(node) ? node.some(hasRenderableDividerLabel) : isRenderableNode(node);
1418
+ var Divider = (props) => {
1419
+ const theme = useComponentTheme("Divider");
1420
+ const { rootAttrs, rest } = composeRootAttrs(DividerBase, props, theme, {
1421
+ // role/aria-orientation live here alongside the data-* hooks so consumer
1422
+ // slotProps cannot silently strip the separator semantics.
1423
+ stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION, appearance = DEFAULT_APPEARANCE5, align = DEFAULT_ALIGN, decorative: decorative2 = false }) => ({
1424
+ "role": decorative2 ? "none" : "separator",
1425
+ "data-orientation": orientation2,
1426
+ "data-type": appearance,
1427
+ "data-align": align
1428
+ })
1429
+ });
1430
+ const { orientation = DEFAULT_ORIENTATION, appearance: _appearance, align: _align, decorative = false, children, ref, ...nativeProps } = rest;
1431
+ const labelSlotAttrs = buildSlotAttrs(DividerBase.getSlotProps("label"), "label", {
1432
+ themeSlotProps: theme?.slotProps,
1433
+ themeClassNames: theme?.classNames,
1434
+ instanceSlotProps: props.slotProps,
1435
+ instanceClassNames: props.classNames
1436
+ });
1437
+ return /* @__PURE__ */ jsx("div", { ...nativeProps, ...rootAttrs, "aria-orientation": decorative ? void 0 : orientation, ref, children: hasRenderableDividerLabel(children) && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }) });
1438
+ };
1439
+ Divider.displayName = "Divider";
1440
+
1441
+ // src/components/dropdown/context.ts
1442
+ var [DropdownProvider, useDropdownOwnContext] = createSafeContext("DropdownProvider");
1443
+
1444
+ // src/components/dropdown/defaults.ts
1445
+ var DEFAULT_SIZE7 = "base";
1446
+ var DEFAULT_CONTENT_WIDTH = "content";
1447
+ var Dropdown = (props) => {
1448
+ const theme = useComponentTheme("Dropdown");
1449
+ const merged = { ...theme?.defaultProps, ...props };
1450
+ const { size = DEFAULT_SIZE7, contentWidth = DEFAULT_CONTENT_WIDTH, children, ...sparProps } = merged;
1451
+ return /* @__PURE__ */ jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsx(DropdownMenu, { ...sparProps, children }) });
1452
+ };
1453
+ Dropdown.displayName = "Dropdown";
1454
+
1455
+ // src/components/dropdown/base.ts
1456
+ var DropdownTriggerBase = createComponentBase({
1457
+ name: "DropdownTrigger",
1458
+ slots: ["root"],
1459
+ classes: { root: "tk-dropdown-trigger" }
1460
+ });
1461
+ var DropdownContentBase = createComponentBase({
1462
+ name: "DropdownContent",
1463
+ slots: ["root"],
1464
+ classes: { root: "tk-dropdown-content" }
1465
+ });
1466
+ var DropdownViewportBase = createComponentBase({
1467
+ name: "DropdownViewport",
1468
+ slots: ["root"],
1469
+ classes: { root: "tk-dropdown-viewport" }
1470
+ });
1471
+ var DropdownItemBase = createComponentBase({
1472
+ name: "DropdownItem",
1473
+ slots: ["root"],
1474
+ classes: { root: "tk-dropdown-item" }
1475
+ });
1476
+ var DropdownGroupBase = createComponentBase({
1477
+ name: "DropdownGroup",
1478
+ slots: ["root"],
1479
+ classes: { root: "tk-dropdown-group" }
1480
+ });
1481
+ var DropdownLabelBase = createComponentBase({
1482
+ name: "DropdownLabel",
1483
+ slots: ["root"],
1484
+ classes: { root: "tk-dropdown-label" }
1485
+ });
1486
+ var DropdownSeparatorBase = createComponentBase({
1487
+ name: "DropdownSeparator",
1488
+ slots: ["root"],
1489
+ classes: { root: "tk-dropdown-separator" }
1490
+ });
1491
+ var DropdownArrowBase = createComponentBase({
1492
+ name: "DropdownArrow",
1493
+ slots: ["root"],
1494
+ classes: { root: "tk-dropdown-arrow" }
1495
+ });
1496
+ var DropdownArrow = (props) => {
1497
+ const theme = useComponentTheme("DropdownArrow");
1498
+ const { rootAttrs, rest } = composeRootAttrs(DropdownArrowBase, props, theme);
1499
+ const { children, ref, ...sparProps } = rest;
1500
+ return /* @__PURE__ */ jsx(DropdownMenuArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
1501
+ };
1502
+ DropdownArrow.displayName = "Dropdown.Arrow";
1503
+ var DropdownContent = (props) => {
1504
+ const theme = useComponentTheme("DropdownContent");
1505
+ const { size, contentWidth } = useDropdownOwnContext("Dropdown.Content");
1506
+ const { triggerRef } = useDropdownMenuContext();
1507
+ const widthStyle = useContentWidthStyle(contentWidth, triggerRef);
1508
+ const { rootAttrs, rest } = composeRootAttrs(DropdownContentBase, props, theme, {
1509
+ stateAttrs: () => ({
1510
+ "data-size": size
1511
+ })
1512
+ });
1513
+ const { children, ref, style: userStyle, ...sparProps } = rest;
1514
+ const { style: rootStyle, ...rootRest } = rootAttrs;
1515
+ const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
1516
+ return /* @__PURE__ */ jsx(DropdownMenuContent, { ...sparProps, ...rootRest, ref, style: mergedStyle, children });
1517
+ };
1518
+ DropdownContent.displayName = "Dropdown.Content";
1519
+ var DropdownGroup = (props) => {
1520
+ const theme = useComponentTheme("DropdownGroup");
1521
+ const { rootAttrs, rest } = composeRootAttrs(DropdownGroupBase, props, theme);
1522
+ const { children, ref, ...sparProps } = rest;
1523
+ return /* @__PURE__ */ jsx(DropdownMenuGroup, { ...sparProps, ...rootAttrs, ref, children });
1524
+ };
1525
+ DropdownGroup.displayName = "Dropdown.Group";
1526
+ var DropdownItem = (props) => {
1527
+ const theme = useComponentTheme("DropdownItem");
1528
+ const { rootAttrs, rest } = composeRootAttrs(DropdownItemBase, props, theme);
1529
+ const { children, ref, ...sparProps } = rest;
1530
+ return /* @__PURE__ */ jsx(DropdownMenuItem, { ...sparProps, ...rootAttrs, ref, children });
1531
+ };
1532
+ DropdownItem.displayName = "Dropdown.Item";
1533
+ var DropdownLabel = (props) => {
1534
+ const theme = useComponentTheme("DropdownLabel");
1535
+ const { rootAttrs, rest } = composeRootAttrs(DropdownLabelBase, props, theme);
1536
+ const { children, ref, ...sparProps } = rest;
1537
+ return /* @__PURE__ */ jsx(DropdownMenuLabel, { ...sparProps, ...rootAttrs, ref, children });
1538
+ };
1539
+ DropdownLabel.displayName = "Dropdown.Label";
1540
+ var DropdownSeparator = (props) => {
1541
+ const theme = useComponentTheme("DropdownSeparator");
1542
+ const { rootAttrs, rest } = composeRootAttrs(DropdownSeparatorBase, props, theme);
1543
+ const { children, ref, ...sparProps } = rest;
1544
+ return /* @__PURE__ */ jsx(DropdownMenuSeparator, { ...sparProps, ...rootAttrs, ref, children });
1545
+ };
1546
+ DropdownSeparator.displayName = "Dropdown.Separator";
1547
+ var DropdownTrigger = (props) => {
1548
+ const theme = useComponentTheme("DropdownTrigger");
1549
+ const { size } = useDropdownOwnContext("Dropdown.Trigger");
1550
+ const { rootAttrs, rest } = composeRootAttrs(DropdownTriggerBase, props, theme, {
1551
+ stateAttrs: () => ({
1552
+ "data-size": size
1553
+ })
1554
+ });
1555
+ const { children, ref, ...sparProps } = rest;
1556
+ return /* @__PURE__ */ jsx(DropdownMenuTrigger, { ...sparProps, ...rootAttrs, ref, children });
1557
+ };
1558
+ DropdownTrigger.displayName = "Dropdown.Trigger";
1559
+ var DropdownViewport = (props) => {
1560
+ const theme = useComponentTheme("DropdownViewport");
1561
+ const { rootAttrs, rest } = composeRootAttrs(DropdownViewportBase, props, theme);
1562
+ const { children, ref, ...sparProps } = rest;
1563
+ return /* @__PURE__ */ jsx(DropdownMenuViewport, { ...sparProps, ...rootAttrs, ref, children });
1564
+ };
1565
+ DropdownViewport.displayName = "Dropdown.Viewport";
1566
+
1567
+ // src/components/dropdown/index.ts
1568
+ var Dropdown2 = Object.assign(Dropdown, {
1569
+ Trigger: DropdownTrigger,
1570
+ Content: DropdownContent,
1571
+ Viewport: DropdownViewport,
1572
+ Item: DropdownItem,
1573
+ Group: DropdownGroup,
1574
+ Label: DropdownLabel,
1575
+ Separator: DropdownSeparator,
1576
+ Arrow: DropdownArrow
1577
+ });
1578
+
1402
1579
  // src/components/field/base.ts
1403
1580
  var FieldBase = createComponentBase({
1404
1581
  name: "Field",
@@ -1456,7 +1633,7 @@ var FieldDescription = (props) => {
1456
1633
  });
1457
1634
  const hasContent = children != null && children !== "";
1458
1635
  return /* @__PURE__ */ jsxs(FieldDescription$1, { ...spar, ref, ...rootAttrs, children: [
1459
- hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlaceholderInfo, {}) }),
1636
+ hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(InfoIconFilledRounded, {}) }),
1460
1637
  children
1461
1638
  ] });
1462
1639
  };
@@ -1473,7 +1650,7 @@ var FieldErrorMessage = (props) => {
1473
1650
  });
1474
1651
  const hasContent = children != null && children !== "";
1475
1652
  return /* @__PURE__ */ jsxs(FieldErrorMessage$1, { ...spar, ref, ...rootAttrs, children: [
1476
- hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlaceholderError, {}) }),
1653
+ hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(AlertCircleIconFilledRounded, {}) }),
1477
1654
  children
1478
1655
  ] });
1479
1656
  };
@@ -1562,7 +1739,7 @@ var InputChipsBase = createComponentBase({
1562
1739
  var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
1563
1740
 
1564
1741
  // src/components/input/defaults.ts
1565
- var DEFAULT_SIZE7 = "base";
1742
+ var DEFAULT_SIZE8 = "base";
1566
1743
  var SEGMENT_COUNT = 4;
1567
1744
  var computeStrength = (value) => {
1568
1745
  let strength = 0;
@@ -1614,11 +1791,11 @@ var Input = (props) => {
1614
1791
  for (const value of clearablesRef.current.values()) value.clear();
1615
1792
  }, []);
1616
1793
  const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
1617
- stateAttrs: ({ size: size2 = DEFAULT_SIZE7 }) => ({
1794
+ stateAttrs: ({ size: size2 = DEFAULT_SIZE8 }) => ({
1618
1795
  "data-size": size2
1619
1796
  })
1620
1797
  });
1621
- const { size = DEFAULT_SIZE7, children, ref, ...sparProps } = rest;
1798
+ const { size = DEFAULT_SIZE8, children, ref, ...sparProps } = rest;
1622
1799
  const contextValue = useMemo(
1623
1800
  () => ({
1624
1801
  size,
@@ -1802,7 +1979,7 @@ var InputClearButton = (props) => {
1802
1979
  "aria-label": ariaLabel,
1803
1980
  onClick: handleClick,
1804
1981
  onKeyDown: handleKeyDown,
1805
- startContent: children ?? /* @__PURE__ */ jsx(PlaceholderClose, {})
1982
+ startContent: children ?? /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {})
1806
1983
  }
1807
1984
  );
1808
1985
  };
@@ -1833,7 +2010,7 @@ var InputDecrement = (props) => {
1833
2010
  disabled: disabled || readOnly,
1834
2011
  "aria-label": ariaLabel,
1835
2012
  onClick: handleClick,
1836
- startContent: children ?? /* @__PURE__ */ jsx(PlaceholderChevronDown, {})
2013
+ startContent: children ?? /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {})
1837
2014
  }
1838
2015
  );
1839
2016
  };
@@ -1911,7 +2088,7 @@ var InputIncrement = (props) => {
1911
2088
  disabled: disabled || readOnly,
1912
2089
  "aria-label": ariaLabel,
1913
2090
  onClick: handleClick,
1914
- startContent: children ?? /* @__PURE__ */ jsx(PlaceholderChevronUp, {})
2091
+ startContent: children ?? /* @__PURE__ */ jsx(ChevronTopIconOutlinedRounded, {})
1915
2092
  }
1916
2093
  );
1917
2094
  };
@@ -1970,7 +2147,7 @@ var InputRevealButton = (props) => {
1970
2147
  "aria-label": "Toggle password visibility",
1971
2148
  "aria-pressed": revealed,
1972
2149
  onClick: handleClick,
1973
- startContent: children ?? (revealed ? /* @__PURE__ */ jsx(PlaceholderEyeOff, {}) : /* @__PURE__ */ jsx(PlaceholderEye, {}))
2150
+ startContent: children ?? (revealed ? /* @__PURE__ */ jsx(EyeClosedIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(EyeOpenIconOutlinedRounded, {}))
1974
2151
  }
1975
2152
  );
1976
2153
  };
@@ -2074,19 +2251,19 @@ var RADIO_ITEM_CONTEXT_VALUE = { inside: true };
2074
2251
  var [RadioItemProvider, useRadioItemOwnContext] = createSafeContext("RadioItemProvider");
2075
2252
 
2076
2253
  // src/components/radio/defaults.ts
2077
- var DEFAULT_SIZE8 = "base";
2254
+ var DEFAULT_SIZE9 = "base";
2078
2255
  var DEFAULT_POSITION = "left";
2079
2256
  var Radio = (props) => {
2080
2257
  const theme = useComponentTheme("Radio");
2081
2258
  const { rootAttrs, rest } = composeRootAttrs(RadioBase, props, theme, {
2082
- stateAttrs: ({ size: size2 = DEFAULT_SIZE8, position: position2 = DEFAULT_POSITION, spread }) => ({
2259
+ stateAttrs: ({ size: size2 = DEFAULT_SIZE9, position: position2 = DEFAULT_POSITION, spread }) => ({
2083
2260
  "data-size": size2,
2084
2261
  "data-position": position2,
2085
2262
  "data-spread": spread ? "" : void 0
2086
2263
  })
2087
2264
  });
2088
2265
  const {
2089
- size = DEFAULT_SIZE8,
2266
+ size = DEFAULT_SIZE9,
2090
2267
  position = DEFAULT_POSITION,
2091
2268
  invalid,
2092
2269
  // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -2205,6 +2382,7 @@ PopoverTrigger.displayName = "Popover.Trigger";
2205
2382
 
2206
2383
  // src/components/popover/defaults.ts
2207
2384
  var DEFAULT_VARIANT5 = "white";
2385
+ var DEFAULT_CLOSE_LABEL4 = "Close";
2208
2386
  var PopoverContent = (props) => {
2209
2387
  const theme = useComponentTheme("PopoverContent");
2210
2388
  const { rootAttrs, rest } = composeRootAttrs(PopoverContentBase, props, theme, {
@@ -2233,15 +2411,16 @@ PopoverDescription.displayName = "Popover.Description";
2233
2411
  var PopoverArrow = (props) => {
2234
2412
  const theme = useComponentTheme("PopoverArrow");
2235
2413
  const { rootAttrs, rest } = composeRootAttrs(PopoverArrowBase, props, theme);
2236
- const { ref, ...sparProps } = rest;
2237
- return /* @__PURE__ */ jsx(PopoverArrow$1, { ...sparProps, ...rootAttrs, ref });
2414
+ const { ref, children, ...sparProps } = rest;
2415
+ return /* @__PURE__ */ jsx(PopoverArrow$1, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
2238
2416
  };
2239
2417
  PopoverArrow.displayName = "Popover.Arrow";
2240
2418
  var PopoverClose = (props) => {
2241
2419
  const theme = useComponentTheme("PopoverClose");
2242
2420
  const { rootAttrs, rest } = composeRootAttrs(PopoverCloseBase, props, theme);
2243
- const { children, ref, ...sparProps } = rest;
2244
- return /* @__PURE__ */ jsx(PopoverClose$1, { ...sparProps, ...rootAttrs, ref, children });
2421
+ const { children, ref, "aria-label": ariaLabel, ...sparProps } = rest;
2422
+ const hasCustomChildren = typeof children === "function" || isRenderableNode(children);
2423
+ return /* @__PURE__ */ jsx(PopoverClose$1, { ...sparProps, "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL4), ...rootAttrs, ref, children: hasCustomChildren ? children : /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {}) });
2245
2424
  };
2246
2425
  PopoverClose.displayName = "Popover.Close";
2247
2426
 
@@ -2255,6 +2434,193 @@ var Popover2 = Object.assign(Popover, {
2255
2434
  Close: PopoverClose
2256
2435
  });
2257
2436
 
2437
+ // src/components/progress/base.ts
2438
+ var ProgressBase = createComponentBase({
2439
+ name: "Progress",
2440
+ slots: ["root"],
2441
+ classes: { root: "tk-progress" }
2442
+ });
2443
+ var ProgressTrackBase = createComponentBase({
2444
+ name: "ProgressTrack",
2445
+ slots: ["root", "rail"],
2446
+ classes: { root: "tk-progress-track", rail: "tk-progress-rail" }
2447
+ });
2448
+ var ProgressIndicatorBase = createComponentBase({
2449
+ name: "ProgressIndicator",
2450
+ slots: ["root"],
2451
+ classes: { root: "tk-progress-indicator" }
2452
+ });
2453
+ var ProgressValueBase = createComponentBase({
2454
+ name: "ProgressValue",
2455
+ slots: ["root"],
2456
+ classes: { root: "tk-progress-value" }
2457
+ });
2458
+
2459
+ // src/components/progress/context.ts
2460
+ var [ProgressProvider, useProgressContext] = createSafeContext("ProgressProvider");
2461
+
2462
+ // src/components/progress/defaults.ts
2463
+ var DEFAULT_APPEARANCE6 = "linear";
2464
+ var DEFAULT_SIZE10 = "base";
2465
+ var DEFAULT_VARIANT6 = "primary";
2466
+ var DEFAULT_MIN = 0;
2467
+ var DEFAULT_MAX = 100;
2468
+ var DEFAULT_RANGE = 100;
2469
+ var DEFAULT_ARIA_LABEL = "Progress";
2470
+ var RING_VIEWBOX = "0 0 40 40";
2471
+ var RING_CENTER = 20;
2472
+ var RING_RADIUS = 18;
2473
+ var ProgressIndicator = (props) => {
2474
+ const theme = useComponentTheme("ProgressIndicator");
2475
+ const { value, min, max, appearance, indeterminate } = useProgressContext("Progress.Indicator");
2476
+ const percent = Math.min(100, Math.max(0, (value - min) * 100 / (max - min)));
2477
+ const { rootAttrs, rest } = composeRootAttrs(ProgressIndicatorBase, props, theme, {
2478
+ stateAttrs: () => ({
2479
+ "data-type": appearance,
2480
+ "data-indeterminate": indeterminate ? "" : void 0
2481
+ })
2482
+ });
2483
+ const { ref, style, ...nativeProps } = rest;
2484
+ const { style: slotStyle, ...slotAttrs } = rootAttrs;
2485
+ if (appearance === "circular") {
2486
+ return /* @__PURE__ */ jsx(
2487
+ "circle",
2488
+ {
2489
+ cx: RING_CENTER,
2490
+ cy: RING_CENTER,
2491
+ r: RING_RADIUS,
2492
+ ...nativeProps,
2493
+ ...slotAttrs,
2494
+ pathLength: "100",
2495
+ style: { ...style, ...slotStyle, strokeDasharray: 100, strokeDashoffset: indeterminate ? void 0 : 100 - percent },
2496
+ ref
2497
+ }
2498
+ );
2499
+ }
2500
+ return /* @__PURE__ */ jsx("span", { ...nativeProps, ...slotAttrs, "aria-hidden": "true", style: { ...style, ...slotStyle, width: indeterminate ? void 0 : `${percent}%` }, ref });
2501
+ };
2502
+ ProgressIndicator.displayName = "Progress.Indicator";
2503
+ var ProgressTrack = (props) => {
2504
+ const theme = useComponentTheme("ProgressTrack");
2505
+ const { appearance } = useProgressContext("Progress.Track");
2506
+ const { rootAttrs, rest } = composeRootAttrs(ProgressTrackBase, props, theme, {
2507
+ stateAttrs: () => ({ "data-type": appearance })
2508
+ });
2509
+ const { children, ref, ...nativeProps } = rest;
2510
+ const content = children ?? /* @__PURE__ */ jsx(ProgressIndicator, {});
2511
+ if (appearance === "circular") {
2512
+ const railAttrs = buildSlotAttrs(ProgressTrackBase.getSlotProps("rail"), "rail", {
2513
+ themeSlotProps: theme?.slotProps,
2514
+ themeClassNames: theme?.classNames,
2515
+ instanceSlotProps: props.slotProps,
2516
+ instanceClassNames: props.classNames
2517
+ });
2518
+ return (
2519
+ // The decorative role and the ring geometry are design-system
2520
+ // invariants (the value is announced by the root; the viewBox must
2521
+ // agree with the rail/arc circles) — layered after the spreads so
2522
+ // neither instance nor slot props can override them.
2523
+ /* @__PURE__ */ jsxs("svg", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", focusable: "false", viewBox: RING_VIEWBOX, ref, children: [
2524
+ /* @__PURE__ */ jsx("circle", { ...railAttrs, cx: RING_CENTER, cy: RING_CENTER, r: RING_RADIUS }),
2525
+ content
2526
+ ] })
2527
+ );
2528
+ }
2529
+ return /* @__PURE__ */ jsx("div", { ...nativeProps, ...rootAttrs, ref, children: content });
2530
+ };
2531
+ ProgressTrack.displayName = "Progress.Track";
2532
+ var resolveRange = ({ value: rawValue, min: rawMin = DEFAULT_MIN, max: rawMax = DEFAULT_MAX }) => {
2533
+ const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN;
2534
+ const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : min + DEFAULT_RANGE;
2535
+ const value = typeof rawValue === "number" && Number.isFinite(rawValue) ? Math.min(Math.max(rawValue, min), max) : min;
2536
+ return { min, max, value };
2537
+ };
2538
+ var warnedRanges = /* @__PURE__ */ new Set();
2539
+ var Progress = (props) => {
2540
+ const theme = useComponentTheme("Progress");
2541
+ const field = useOptionalFieldContext();
2542
+ const resolveState = ({
2543
+ indeterminate: indeterminate2 = false,
2544
+ appearance: appearance2 = DEFAULT_APPEARANCE6,
2545
+ size: size2 = DEFAULT_SIZE10,
2546
+ variant: variant2 = DEFAULT_VARIANT6,
2547
+ disabled: disabled2 = field?.disabled ?? false
2548
+ }) => ({ indeterminate: indeterminate2, appearance: appearance2, size: size2, variant: variant2, disabled: disabled2 });
2549
+ const { rootAttrs, rest } = composeRootAttrs(ProgressBase, props, theme);
2550
+ const {
2551
+ // Consumed through resolveState/resolveRange (and as the root data-* hooks
2552
+ // below); destructured so the <div> doesn't receive unknown DOM
2553
+ // attributes.
2554
+ value: _value,
2555
+ min: _min,
2556
+ max: rawMax,
2557
+ indeterminate: _indeterminate,
2558
+ appearance: _appearance,
2559
+ disabled: _disabled,
2560
+ size: _size,
2561
+ variant: _variant,
2562
+ as,
2563
+ children,
2564
+ ref,
2565
+ ...nativeProps
2566
+ } = rest;
2567
+ const { indeterminate, appearance, size, variant, disabled } = resolveState(rest);
2568
+ const { min, max, value } = resolveRange(rest);
2569
+ const dataAttrs = {
2570
+ "data-type": appearance,
2571
+ "data-size": size,
2572
+ "data-variant": variant,
2573
+ "data-disabled": disabled ? "" : void 0,
2574
+ "data-indeterminate": indeterminate ? "" : void 0,
2575
+ // Styling hook for the finished state (e.g. a success fill at 100%);
2576
+ // meaningless while indeterminate, so dropped alongside the value.
2577
+ "data-complete": !indeterminate && value === max ? "" : void 0
2578
+ };
2579
+ if (isDevelopment() && typeof rawMax === "number" && Number.isFinite(rawMax) && rawMax <= min) {
2580
+ const message = `[Progress] \`max\` (${rawMax}) must be greater than \`min\` (${min}); falling back to ${max}.`;
2581
+ if (!warnedRanges.has(message)) {
2582
+ warnedRanges.add(message);
2583
+ console.warn(message);
2584
+ }
2585
+ }
2586
+ const consumerLabelledBy = nativeProps["aria-labelledby"];
2587
+ const accessibilityAttrs = {
2588
+ "role": nativeProps.role ?? "progressbar",
2589
+ "aria-valuemin": min,
2590
+ "aria-valuemax": max,
2591
+ // Per the progressbar pattern, an indeterminate bar exposes no
2592
+ // aria-valuenow — assistive tech then announces it as busy rather than
2593
+ // stuck at a bogus percentage.
2594
+ "aria-valuenow": indeterminate ? void 0 : value,
2595
+ // aria-valuetext accompanies aria-valuenow; drop it while indeterminate so
2596
+ // a consumer-formatted value can't linger next to a busy bar.
2597
+ "aria-valuetext": indeterminate ? void 0 : nativeProps["aria-valuetext"],
2598
+ "aria-labelledby": consumerLabelledBy ?? field?.labelId,
2599
+ "aria-label": nativeProps["aria-label"] ?? (consumerLabelledBy ? void 0 : DEFAULT_ARIA_LABEL),
2600
+ "aria-disabled": disabled || void 0
2601
+ };
2602
+ const Component = as ?? "div";
2603
+ return /* @__PURE__ */ jsx(ProgressProvider, { value: { value, min, max, appearance, indeterminate }, children: /* @__PURE__ */ jsx(Component, { ...nativeProps, ...accessibilityAttrs, ...rootAttrs, ...dataAttrs, ref, children: children ?? /* @__PURE__ */ jsx(ProgressTrack, {}) }) });
2604
+ };
2605
+ Progress.displayName = "Progress";
2606
+ var ProgressValue = (props) => {
2607
+ const theme = useComponentTheme("ProgressValue");
2608
+ const { appearance } = useProgressContext("Progress.Value");
2609
+ const { rootAttrs, rest } = composeRootAttrs(ProgressValueBase, props, theme, {
2610
+ stateAttrs: () => ({ "data-type": appearance })
2611
+ });
2612
+ const { children, ref, ...nativeProps } = rest;
2613
+ return /* @__PURE__ */ jsx("span", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children });
2614
+ };
2615
+ ProgressValue.displayName = "Progress.Value";
2616
+
2617
+ // src/components/progress/index.ts
2618
+ var Progress2 = Object.assign(Progress, {
2619
+ Track: ProgressTrack,
2620
+ Indicator: ProgressIndicator,
2621
+ Value: ProgressValue
2622
+ });
2623
+
2258
2624
  // src/components/select/base.ts
2259
2625
  var SelectBase = createComponentBase({
2260
2626
  name: "Select",
@@ -2285,6 +2651,11 @@ var SelectContentBase = createComponentBase({
2285
2651
  slots: ["root"],
2286
2652
  classes: { root: "tk-select-content" }
2287
2653
  });
2654
+ var SelectViewportBase = createComponentBase({
2655
+ name: "SelectViewport",
2656
+ slots: ["root"],
2657
+ classes: { root: "tk-select-viewport" }
2658
+ });
2288
2659
  var SelectItemBase = createComponentBase({
2289
2660
  name: "SelectItem",
2290
2661
  slots: ["root"],
@@ -2305,22 +2676,27 @@ var SelectSeparatorBase = createComponentBase({
2305
2676
  slots: ["root"],
2306
2677
  classes: { root: "tk-select-separator" }
2307
2678
  });
2679
+ var SelectArrowBase = createComponentBase({
2680
+ name: "SelectArrow",
2681
+ slots: ["root"],
2682
+ classes: { root: "tk-select-arrow" }
2683
+ });
2308
2684
 
2309
2685
  // src/components/select/context.ts
2310
2686
  var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
2311
2687
 
2312
2688
  // src/components/select/defaults.ts
2313
- var DEFAULT_SIZE9 = "base";
2314
- var DEFAULT_CONTENT_WIDTH = "trigger";
2689
+ var DEFAULT_SIZE11 = "base";
2690
+ var DEFAULT_CONTENT_WIDTH2 = "trigger";
2315
2691
  var Select = (props) => {
2316
2692
  const theme = useComponentTheme("Select");
2317
2693
  const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
2318
- stateAttrs: ({ size: size2 = DEFAULT_SIZE9, invalid: invalid2 }) => ({
2694
+ stateAttrs: ({ size: size2 = DEFAULT_SIZE11, invalid: invalid2 }) => ({
2319
2695
  "data-size": size2,
2320
2696
  "data-invalid": invalid2 ? "" : void 0
2321
2697
  })
2322
2698
  });
2323
- const { size = DEFAULT_SIZE9, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH, children, ref, ...sparProps } = rest;
2699
+ const { size = DEFAULT_SIZE11, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
2324
2700
  return /* @__PURE__ */ jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
2325
2701
  };
2326
2702
  Select.displayName = "Select";
@@ -2371,44 +2747,29 @@ var SelectIndicator = (props) => {
2371
2747
  return /* @__PURE__ */ jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
2372
2748
  };
2373
2749
  SelectIndicator.displayName = "Select.Indicator";
2374
- var resolveStaticWidth = (mode) => {
2375
- if (mode === "trigger" || mode === "content") return void 0;
2376
- return typeof mode === "number" ? `${mode}px` : mode;
2377
- };
2378
2750
  var SelectContent = (props) => {
2379
2751
  const theme = useComponentTheme("SelectContent");
2380
2752
  const { size, contentWidth } = useSelectOwnContext("Select.Content");
2381
2753
  const { triggerRef } = useSelectContext();
2382
- const [triggerWidth, setTriggerWidth] = useState(null);
2383
- useEffect(() => {
2384
- if (contentWidth !== "trigger") return;
2385
- const node = triggerRef.current;
2386
- if (!node) return;
2387
- setTriggerWidth(node.offsetWidth);
2388
- const observer = new ResizeObserver((entries) => {
2389
- const entry = entries[0];
2390
- if (entry) setTriggerWidth(Math.round(entry.contentRect.width + 2));
2391
- });
2392
- observer.observe(node);
2393
- return () => observer.disconnect();
2394
- }, [contentWidth, triggerRef]);
2754
+ const widthStyle = useContentWidthStyle(contentWidth, triggerRef);
2395
2755
  const { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
2396
2756
  stateAttrs: () => ({
2397
2757
  "data-size": size
2398
2758
  })
2399
2759
  });
2400
2760
  const { children, ref, style: userStyle, ...spar } = rest;
2401
- const widthStyle = useMemo(() => {
2402
- if (contentWidth === "trigger") {
2403
- return triggerWidth != null ? { width: triggerWidth } : void 0;
2404
- }
2405
- const staticWidth = resolveStaticWidth(contentWidth);
2406
- return staticWidth != null ? { width: staticWidth } : void 0;
2407
- }, [contentWidth, triggerWidth]);
2408
- const mergedStyle = widthStyle || userStyle ? { ...widthStyle, ...userStyle } : void 0;
2409
- return /* @__PURE__ */ jsx(SelectContent$1, { ...spar, ref, style: mergedStyle, ...rootAttrs, children });
2761
+ const { style: rootStyle, ...rootRest } = rootAttrs;
2762
+ const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
2763
+ return /* @__PURE__ */ jsx(SelectContent$1, { ...spar, ...rootRest, ref, style: mergedStyle, children });
2410
2764
  };
2411
2765
  SelectContent.displayName = "Select.Content";
2766
+ var SelectViewport = (props) => {
2767
+ const theme = useComponentTheme("SelectViewport");
2768
+ const { rootAttrs, rest } = composeRootAttrs(SelectViewportBase, props, theme);
2769
+ const { children, ref, ...spar } = rest;
2770
+ return /* @__PURE__ */ jsx(SelectViewport$1, { ...spar, ref, ...rootAttrs, children });
2771
+ };
2772
+ SelectViewport.displayName = "Select.Viewport";
2412
2773
  var SelectItem = (props) => {
2413
2774
  const theme = useComponentTheme("SelectItem");
2414
2775
  const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
@@ -2437,90 +2798,1007 @@ var SelectSeparator = (props) => {
2437
2798
  return /* @__PURE__ */ jsx(SelectSeparator$1, { ...spar, ref, ...rootAttrs, children });
2438
2799
  };
2439
2800
  SelectSeparator.displayName = "Select.Separator";
2801
+ var SelectArrow = (props) => {
2802
+ const theme = useComponentTheme("SelectArrow");
2803
+ const { rootAttrs, rest } = composeRootAttrs(SelectArrowBase, props, theme);
2804
+ const { children, ref, ...sparProps } = rest;
2805
+ return /* @__PURE__ */ jsx(SelectArrow$1, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
2806
+ };
2807
+ SelectArrow.displayName = "Select.Arrow";
2440
2808
 
2441
2809
  // src/components/select/index.ts
2442
2810
  var Select2 = Object.assign(Select, {
2443
2811
  Trigger: SelectTrigger,
2444
2812
  Indicator: SelectIndicator,
2445
2813
  Content: SelectContent,
2814
+ Viewport: SelectViewport,
2446
2815
  Item: SelectItem,
2447
2816
  Group: SelectGroup,
2448
2817
  Label: SelectLabel,
2449
- Separator: SelectSeparator
2818
+ Separator: SelectSeparator,
2819
+ Arrow: SelectArrow
2450
2820
  });
2451
2821
 
2452
- // src/components/spinner/base.ts
2453
- var SpinnerBase = createComponentBase({
2454
- name: "Spinner",
2455
- slots: ["root", "indicator"],
2456
- classes: {
2457
- root: "tk-spinner",
2458
- indicator: "tk-spinner-indicator"
2459
- }
2822
+ // src/components/slider/base.ts
2823
+ var SliderBase = createComponentBase({
2824
+ name: "Slider",
2825
+ slots: ["root"],
2826
+ classes: { root: "tk-slider" }
2827
+ });
2828
+ var SliderTrackBase = createComponentBase({
2829
+ name: "SliderTrack",
2830
+ slots: ["root"],
2831
+ classes: { root: "tk-slider-track" }
2832
+ });
2833
+ var SliderRangeBase = createComponentBase({
2834
+ name: "SliderRange",
2835
+ slots: ["root"],
2836
+ classes: { root: "tk-slider-range" }
2837
+ });
2838
+ var SliderThumbBase = createComponentBase({
2839
+ name: "SliderThumb",
2840
+ slots: ["root", "tooltip", "arrow"],
2841
+ classes: { root: "tk-slider-thumb", tooltip: "tk-slider-tooltip", arrow: "tk-slider-arrow" }
2842
+ });
2843
+ var SliderTicksBase = createComponentBase({
2844
+ name: "SliderTicks",
2845
+ slots: ["root", "tick"],
2846
+ classes: { root: "tk-slider-ticks", tick: "tk-slider-tick" }
2847
+ });
2848
+ var SliderValueBase = createComponentBase({
2849
+ name: "SliderValue",
2850
+ slots: ["root"],
2851
+ classes: { root: "tk-slider-value" }
2460
2852
  });
2461
2853
 
2462
- // src/components/spinner/defaults.ts
2463
- var DEFAULT_APPEARANCE5 = "rounded";
2464
- var DEFAULT_SIZE10 = "base";
2465
- var DEFAULT_VARIANT6 = "neutral";
2466
- var DEFAULT_ARIA_LABEL = "Loading";
2467
- var SPINNER_RADIAL_PARTS = 8;
2468
- var SPINNER_THREE_DOT_PARTS = 3;
2469
- var renderIndicatorContent = (appearance) => {
2470
- if (appearance === "rounded") {
2471
- return /* @__PURE__ */ jsxs(Fragment, { children: [
2472
- /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "16.6667" }) }),
2473
- /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 36.6667 20" }) })
2474
- ] });
2475
- }
2476
- if (appearance === "loader") {
2477
- return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 31.7851 8.2149" }) });
2854
+ // src/components/slider/context.ts
2855
+ var [SliderProvider, useSliderContext] = createSafeContext("SliderProvider");
2856
+
2857
+ // src/components/slider/defaults.ts
2858
+ var DEFAULT_ORIENTATION2 = "horizontal";
2859
+ var DEFAULT_SIZE12 = "base";
2860
+ var DEFAULT_VARIANT7 = "primary";
2861
+ var DEFAULT_TOOLTIP = "auto";
2862
+ var DEFAULT_TRACK = "normal";
2863
+ var DEFAULT_MIN_DISTANCE = 0;
2864
+ var DEFAULT_MIN2 = 0;
2865
+ var DEFAULT_MAX2 = 100;
2866
+ var DEFAULT_STEP = 1;
2867
+ var DEFAULT_SPAN = 100;
2868
+ var PAGE_STEP_MULTIPLIER = 10;
2869
+ var MAX_TICKS = 100;
2870
+ var RANGE_VALUE_SEPARATOR = " \u2013 ";
2871
+ var RANGE_THUMB_LABELS = ["Minimum", "Maximum"];
2872
+
2873
+ // src/components/slider/helpers.ts
2874
+ var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
2875
+ var decimalsOf = (value) => {
2876
+ if (!Number.isFinite(value)) return 0;
2877
+ const text = String(value);
2878
+ const exponent = text.indexOf("e-");
2879
+ if (exponent !== -1) {
2880
+ const fraction = text.slice(0, exponent).split(".")[1]?.length ?? 0;
2881
+ return fraction + Number(text.slice(exponent + 2));
2478
2882
  }
2479
- if (appearance === "dots") {
2480
- return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-dot" }, index));
2883
+ const dot = text.indexOf(".");
2884
+ return dot === -1 ? 0 : text.length - dot - 1;
2885
+ };
2886
+ var roundTo = (value, decimals) => decimals > 0 ? Number(value.toFixed(Math.min(decimals, 15))) : Math.round(value);
2887
+ var resolveBounds = (rawMin = DEFAULT_MIN2, rawMax = DEFAULT_MAX2, rawStep = DEFAULT_STEP) => {
2888
+ const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN2;
2889
+ const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : min + DEFAULT_SPAN;
2890
+ const step = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : DEFAULT_STEP;
2891
+ return { min, max, step };
2892
+ };
2893
+ var snap = (value, { min, max, step }) => {
2894
+ if (!Number.isFinite(value)) return min;
2895
+ const steps = Math.round((value - min) / step);
2896
+ const snapped = min + steps * step;
2897
+ return clamp(roundTo(snapped, Math.max(decimalsOf(step), decimalsOf(min))), min, max);
2898
+ };
2899
+ var toPercent = (value, { min, max }) => clamp((value - min) * 100 / (max - min), 0, 100);
2900
+ var fromRatio = (ratio, { min, max }) => min + ratio * (max - min);
2901
+ var pointerCoord = (event, orientation) => orientation === "vertical" ? event.clientY : event.clientX;
2902
+ var valueFromPointer = (rect, point, bounds, orientation) => {
2903
+ const ratio = orientation === "vertical" ? rect.height === 0 ? 0 : (rect.bottom - point) / rect.height : rect.width === 0 ? 0 : (point - rect.left) / rect.width;
2904
+ return snap(fromRatio(clamp(ratio, 0, 1), bounds), bounds);
2905
+ };
2906
+ var offsetStyle = (percent, orientation) => orientation === "vertical" ? { insetBlockEnd: `${percent}%` } : { insetInlineStart: `${percent}%` };
2907
+ var bandStyle = (start, end, orientation) => orientation === "vertical" ? { insetBlockEnd: `${start}%`, height: `${end - start}%` } : { insetInlineStart: `${start}%`, width: `${end - start}%` };
2908
+ var normalizeValues = (value, range, bounds) => {
2909
+ if (range) {
2910
+ const seeded = Array.isArray(value) && value.length >= 2 ? value : [bounds.min, bounds.max];
2911
+ return seeded.map((entry) => snap(entry, bounds)).sort((a, b) => a - b);
2481
2912
  }
2482
- if (appearance === "lines") {
2483
- return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-line" }, index));
2913
+ return [snap(Array.isArray(value) ? value[0] : value ?? bounds.min, bounds)];
2914
+ };
2915
+ var toCommittedValue = (values, range) => range ? [...values] : values[0];
2916
+ var rangeInputName = (name, index, count) => count === 2 ? index === 0 ? `${name}-min` : `${name}-max` : `${name}-${index + 1}`;
2917
+ var valuesEqual = (a, b) => a.length === b.length && a.every((entry, index) => entry === b[index]);
2918
+ var thumbLabel = (index, count) => {
2919
+ if (count < 2) return void 0;
2920
+ if (count === 2) return RANGE_THUMB_LABELS[index];
2921
+ return `Value ${index + 1}`;
2922
+ };
2923
+ var closestThumbIndex = (values, target, disabled = []) => {
2924
+ let index = 0;
2925
+ let best = Infinity;
2926
+ let found = false;
2927
+ values.forEach((entry, current) => {
2928
+ if (disabled[current]) return;
2929
+ const distance = Math.abs(entry - target);
2930
+ if (distance <= best) {
2931
+ best = distance;
2932
+ index = current;
2933
+ found = true;
2934
+ }
2935
+ });
2936
+ if (found) return index;
2937
+ values.forEach((entry, current) => {
2938
+ const distance = Math.abs(entry - target);
2939
+ if (distance <= best) {
2940
+ best = distance;
2941
+ index = current;
2942
+ }
2943
+ });
2944
+ return index;
2945
+ };
2946
+ var thumbBounds = (values, index, bounds, minDistance = 0) => {
2947
+ const hardLower = index > 0 ? values[index - 1] : bounds.min;
2948
+ const hardUpper = index < values.length - 1 ? values[index + 1] : bounds.max;
2949
+ const lower = index > 0 ? hardLower + minDistance : bounds.min;
2950
+ const upper = index < values.length - 1 ? hardUpper - minDistance : bounds.max;
2951
+ return lower <= upper ? { min: lower, max: upper } : { min: hardLower, max: hardUpper };
2952
+ };
2953
+ var withThumbClamped = (values, index, next, bounds, minDistance = 0) => {
2954
+ const { min: lower, max: upper } = thumbBounds(values, index, bounds, minDistance);
2955
+ const updated = [...values];
2956
+ updated[index] = clamp(snap(next, bounds), lower, upper);
2957
+ return updated;
2958
+ };
2959
+ var withThumbSwapped = (values, index, next, bounds, minDistance = 0, disabled = []) => {
2960
+ const lowerBlocked = index > 0 && disabled[index - 1];
2961
+ const upperBlocked = index < values.length - 1 && disabled[index + 1];
2962
+ if (minDistance > 0 || lowerBlocked || upperBlocked) {
2963
+ const { min: lower, max: upper } = thumbBounds(values, index, bounds, minDistance);
2964
+ const updated2 = [...values];
2965
+ updated2[index] = clamp(snap(next, bounds), lower, upper);
2966
+ return { values: updated2, index };
2484
2967
  }
2485
- if (appearance === "threeDots") {
2486
- return Array.from({ length: SPINNER_THREE_DOT_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-dot" }, index));
2968
+ const updated = [...values];
2969
+ updated[index] = snap(next, bounds);
2970
+ let active = index;
2971
+ while (active > 0 && updated[active] < updated[active - 1]) {
2972
+ [updated[active], updated[active - 1]] = [updated[active - 1], updated[active]];
2973
+ active -= 1;
2487
2974
  }
2488
- if (appearance === "logo") {
2489
- return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 48 48", children: /* @__PURE__ */ jsx(
2490
- "path",
2491
- {
2492
- clipRule: "evenodd",
2493
- d: "M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24V4C48 1.79086 46.2091 0 44 0H24ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z",
2494
- fillRule: "evenodd"
2495
- }
2496
- ) });
2975
+ while (active < updated.length - 1 && updated[active] > updated[active + 1]) {
2976
+ [updated[active], updated[active + 1]] = [updated[active + 1], updated[active]];
2977
+ active += 1;
2497
2978
  }
2498
- return null;
2499
- };
2500
- var Spinner = (props) => {
2501
- const theme = useComponentTheme("Spinner");
2502
- const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
2503
- stateAttrs: ({ variant = DEFAULT_VARIANT6, size = DEFAULT_SIZE10, appearance: appearance2 = DEFAULT_APPEARANCE5 }) => ({
2504
- "data-variant": variant,
2505
- "data-size": size,
2506
- "data-type": appearance2
2507
- })
2979
+ return { values: updated, index: active };
2980
+ };
2981
+ var formatValueText = (value, formatValue) => formatValue?.(value) ?? String(value);
2982
+ var tickPercents = ({ min, max, step }, limit) => {
2983
+ const raw = (max - min) / step;
2984
+ const steps = Math.abs(raw - Math.round(raw)) < 1e-9 ? Math.round(raw) : Math.floor(raw);
2985
+ const count = steps + 1;
2986
+ if (count > limit) return null;
2987
+ return Array.from({ length: count }, (_, index) => toPercent(min + index * step, { min, max}));
2988
+ };
2989
+ var SliderRange = (props) => {
2990
+ const theme = useComponentTheme("SliderRange");
2991
+ const { values, bounds, range, orientation } = useSliderContext("Slider.Range");
2992
+ const start = range ? toPercent(values[0], bounds) : 0;
2993
+ const end = toPercent(range ? values[values.length - 1] : values[0], bounds);
2994
+ const { rootAttrs, rest } = composeRootAttrs(SliderRangeBase, props, theme);
2995
+ const { ref, style, ...nativeProps } = rest;
2996
+ const { style: slotStyle, ...slotAttrs } = rootAttrs;
2997
+ return /* @__PURE__ */ jsx("span", { ...nativeProps, ...slotAttrs, "aria-hidden": "true", style: { ...style, ...slotStyle, ...bandStyle(start, end, orientation) }, ref });
2998
+ };
2999
+ SliderRange.displayName = "Slider.Range";
3000
+ var SliderThumb = (props) => {
3001
+ const theme = useComponentTheme("SliderThumb");
3002
+ const {
3003
+ values,
3004
+ bounds,
3005
+ range,
3006
+ minDistance,
3007
+ orientation,
3008
+ disabled,
3009
+ readOnly,
3010
+ invalid,
3011
+ required,
3012
+ draggingIndex,
3013
+ formatValue,
3014
+ setThumbValue,
3015
+ startDrag,
3016
+ thumbRefs,
3017
+ thumbDisabledRef,
3018
+ fieldId,
3019
+ labelId,
3020
+ describedBy,
3021
+ rootAriaLabel,
3022
+ rootAriaLabelledby
3023
+ } = useSliderContext("Slider.Thumb");
3024
+ const [isFocused, setIsFocused] = useState(false);
3025
+ const { rootAttrs, rest } = composeRootAttrs(SliderThumbBase, props, theme);
3026
+ const { index = 0, disabled: ownDisabled, children, ref, style, onKeyDown, onPointerDown, onFocus, onBlur, ...nativeProps } = rest;
3027
+ const value = values[index] ?? bounds.min;
3028
+ const isDragging = draggingIndex === index;
3029
+ const isDisabled = disabled || Boolean(ownDisabled);
3030
+ thumbDisabledRef.current[index] = isDisabled;
3031
+ const { min: lowerBound, max: upperBound } = thumbBounds(values, index, bounds, minDistance);
3032
+ const handleKeyDown = (event) => {
3033
+ onKeyDown?.(event);
3034
+ if (isDisabled || readOnly || event.defaultPrevented) return;
3035
+ const page = bounds.step * PAGE_STEP_MULTIPLIER;
3036
+ const next = {
3037
+ ArrowRight: value + bounds.step,
3038
+ ArrowUp: value + bounds.step,
3039
+ ArrowLeft: value - bounds.step,
3040
+ ArrowDown: value - bounds.step,
3041
+ PageUp: value + page,
3042
+ PageDown: value - page,
3043
+ Home: bounds.min,
3044
+ End: bounds.max
3045
+ }[event.key];
3046
+ if (next === void 0) return;
3047
+ event.preventDefault();
3048
+ setThumbValue(index, next);
3049
+ };
3050
+ const handlePointerDown = (event) => {
3051
+ onPointerDown?.(event);
3052
+ if (isDisabled || readOnly || event.defaultPrevented || event.button !== 0) return;
3053
+ event.preventDefault();
3054
+ event.stopPropagation();
3055
+ startDrag(index, pointerCoord(event, orientation), false, event.pointerId);
3056
+ };
3057
+ const tooltipAttrs = buildSlotAttrs(SliderThumbBase.getSlotProps("tooltip"), "tooltip", {
3058
+ themeSlotProps: theme?.slotProps,
3059
+ themeClassNames: theme?.classNames,
3060
+ instanceSlotProps: props.slotProps,
3061
+ instanceClassNames: props.classNames
2508
3062
  });
2509
- const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE5, ref, ...nativeProps } = rest;
2510
- const indicatorSlotAttrs = buildSlotAttrs(SpinnerBase.getSlotProps("indicator"), "indicator", {
3063
+ const arrowAttrs = buildSlotAttrs(SliderThumbBase.getSlotProps("arrow"), "arrow", {
2511
3064
  themeSlotProps: theme?.slotProps,
2512
3065
  themeClassNames: theme?.classNames,
2513
3066
  instanceSlotProps: props.slotProps,
2514
3067
  instanceClassNames: props.classNames
2515
3068
  });
2516
- const isDecorative = nativeProps["aria-hidden"] === true || nativeProps["aria-hidden"] === "true";
2517
- const accessibilityAttrs = isDecorative ? {} : {
2518
- "role": nativeProps.role ?? "status",
2519
- "aria-label": nativeProps["aria-label"] ?? (nativeProps["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL)
2520
- };
2521
- return /* @__PURE__ */ jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ jsx("span", { ...indicatorSlotAttrs, "aria-hidden": "true", children: renderIndicatorContent(appearance) }) });
2522
- };
2523
- Spinner.displayName = "Spinner";
3069
+ const formattedText = formatValueText(value, formatValue);
3070
+ const formatted = formatValue ? formattedText : void 0;
3071
+ const { style: slotStyle, ...slotAttrs } = rootAttrs;
3072
+ const bubbleContent = children === void 0 ? formattedText : typeof children === "function" ? children({ value, formatted: formattedText, index, isDragging, isFocused }) : children;
3073
+ return /* @__PURE__ */ jsx(
3074
+ "span",
3075
+ {
3076
+ ...nativeProps,
3077
+ ...slotAttrs,
3078
+ role: "slider",
3079
+ tabIndex: isDisabled ? -1 : 0,
3080
+ "aria-valuemin": lowerBound,
3081
+ "aria-valuemax": upperBound,
3082
+ "aria-valuenow": value,
3083
+ "aria-valuetext": formatted,
3084
+ "aria-orientation": orientation,
3085
+ "aria-disabled": isDisabled || void 0,
3086
+ "aria-readonly": readOnly || void 0,
3087
+ "aria-invalid": invalid || void 0,
3088
+ "aria-required": required || void 0,
3089
+ "aria-label": nativeProps["aria-label"] ?? thumbLabel(index, values.length) ?? rootAriaLabel,
3090
+ "aria-labelledby": nativeProps["aria-labelledby"] ?? (range ? void 0 : rootAriaLabelledby ?? labelId),
3091
+ "aria-describedby": nativeProps["aria-describedby"] ?? describedBy,
3092
+ id: nativeProps.id ?? (index === 0 ? fieldId : void 0),
3093
+ "data-thumb": range ? index === 0 ? "min" : index === values.length - 1 ? "max" : void 0 : void 0,
3094
+ "data-dragging": isDragging ? "" : void 0,
3095
+ "data-focus": isFocused ? "" : void 0,
3096
+ "data-disabled": isDisabled ? "" : void 0,
3097
+ onKeyDown: handleKeyDown,
3098
+ onPointerDown: handlePointerDown,
3099
+ onFocus: (event) => {
3100
+ onFocus?.(event);
3101
+ setIsFocused(true);
3102
+ },
3103
+ onBlur: (event) => {
3104
+ onBlur?.(event);
3105
+ setIsFocused(false);
3106
+ },
3107
+ style: { ...style, ...slotStyle, ...offsetStyle(toPercent(value, bounds), orientation) },
3108
+ ref: (node) => {
3109
+ thumbRefs.current[index] = node;
3110
+ if (typeof ref === "function") ref(node);
3111
+ else if (ref) ref.current = node;
3112
+ },
3113
+ children: /* @__PURE__ */ jsxs("span", { ...tooltipAttrs, "aria-hidden": "true", children: [
3114
+ bubbleContent,
3115
+ /* @__PURE__ */ jsx("span", { ...arrowAttrs, "aria-hidden": "true" })
3116
+ ] })
3117
+ }
3118
+ );
3119
+ };
3120
+ SliderThumb.displayName = "Slider.Thumb";
3121
+ var SliderTrack = (props) => {
3122
+ const theme = useComponentTheme("SliderTrack");
3123
+ const { values, disabled, readOnly, orientation, valueFromPoint, startDrag, trackRef, thumbDisabledRef } = useSliderContext("Slider.Track");
3124
+ const { rootAttrs, rest } = composeRootAttrs(SliderTrackBase, props, theme);
3125
+ const { children, ref, onPointerDown, ...nativeProps } = rest;
3126
+ const handlePointerDown = (event) => {
3127
+ onPointerDown?.(event);
3128
+ if (disabled || readOnly || event.defaultPrevented || event.button !== 0) return;
3129
+ event.preventDefault();
3130
+ const point = pointerCoord(event, orientation);
3131
+ startDrag(closestThumbIndex(values, valueFromPoint(point), thumbDisabledRef.current), point, true, event.pointerId);
3132
+ };
3133
+ return /* @__PURE__ */ jsx(
3134
+ "div",
3135
+ {
3136
+ ...nativeProps,
3137
+ ...rootAttrs,
3138
+ onPointerDown: handlePointerDown,
3139
+ ref: (node) => {
3140
+ trackRef.current = node;
3141
+ if (typeof ref === "function") ref(node);
3142
+ else if (ref) ref.current = node;
3143
+ },
3144
+ children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
3145
+ /* @__PURE__ */ jsx(SliderRange, {}),
3146
+ values.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, { index }, index))
3147
+ ] })
3148
+ }
3149
+ );
3150
+ };
3151
+ SliderTrack.displayName = "Slider.Track";
3152
+ var warnedRanges2 = /* @__PURE__ */ new Set();
3153
+ var Slider = (props) => {
3154
+ const theme = useComponentTheme("Slider");
3155
+ const field = useOptionalFieldContext();
3156
+ const { rootAttrs, rest } = composeRootAttrs(SliderBase, props, theme, {
3157
+ stateAttrs: (merged) => {
3158
+ const {
3159
+ size = DEFAULT_SIZE12,
3160
+ variant = DEFAULT_VARIANT7,
3161
+ orientation: orientation2 = DEFAULT_ORIENTATION2,
3162
+ tooltip = DEFAULT_TOOLTIP,
3163
+ track = DEFAULT_TRACK,
3164
+ range: range2,
3165
+ disabled: disabled2,
3166
+ readOnly: readOnly2,
3167
+ invalid: invalid2,
3168
+ required: required2
3169
+ } = merged;
3170
+ return {
3171
+ "data-size": size,
3172
+ "data-variant": variant,
3173
+ "data-orientation": orientation2,
3174
+ "data-tooltip": tooltip,
3175
+ "data-track": track,
3176
+ "data-range": range2 ? "" : void 0,
3177
+ "data-disabled": disabled2 ?? field?.disabled ? "" : void 0,
3178
+ "data-readonly": readOnly2 ?? field?.readOnly ? "" : void 0,
3179
+ "data-invalid": invalid2 ?? field?.invalid ? "" : void 0,
3180
+ "data-required": required2 ?? field?.required ? "" : void 0
3181
+ };
3182
+ }
3183
+ });
3184
+ const {
3185
+ // Consumed through the resolved state below (and as the root data-* hooks);
3186
+ // destructured so the <div> doesn't receive unknown DOM attributes.
3187
+ min: rawMin,
3188
+ max: rawMax,
3189
+ step: rawStep,
3190
+ range = false,
3191
+ value,
3192
+ defaultValue,
3193
+ onValueChange,
3194
+ onValueChangeEnd,
3195
+ disabled: ownDisabled,
3196
+ readOnly: ownReadOnly,
3197
+ invalid: ownInvalid,
3198
+ required: ownRequired,
3199
+ minDistance = DEFAULT_MIN_DISTANCE,
3200
+ orientation = DEFAULT_ORIENTATION2,
3201
+ size: _size,
3202
+ variant: _variant,
3203
+ // Consumed as the `data-tooltip` / `data-track` root hooks above (the recipe
3204
+ // drives the value bubble and the inverted/none fill off them); pulled out
3205
+ // so they never land on the <div> as unknown attributes.
3206
+ tooltip: _tooltip,
3207
+ track: _track,
3208
+ formatValue,
3209
+ name,
3210
+ form,
3211
+ as,
3212
+ children,
3213
+ ref,
3214
+ ...nativeProps
3215
+ } = rest;
3216
+ const disabled = ownDisabled ?? field?.disabled ?? false;
3217
+ const readOnly = ownReadOnly ?? field?.readOnly ?? false;
3218
+ const invalid = ownInvalid ?? field?.invalid ?? false;
3219
+ const required = ownRequired ?? field?.required ?? false;
3220
+ const bounds = resolveBounds(rawMin, rawMax, rawStep);
3221
+ if (isDevelopment() && typeof rawMax === "number" && Number.isFinite(rawMax) && rawMax <= bounds.min) {
3222
+ const message = `[Slider] \`max\` (${rawMax}) must be greater than \`min\` (${bounds.min}); falling back to ${bounds.max}.`;
3223
+ if (!warnedRanges2.has("inverted-range")) {
3224
+ warnedRanges2.add("inverted-range");
3225
+ console.warn(message);
3226
+ }
3227
+ }
3228
+ const controlledValues = value === void 0 ? void 0 : normalizeValues(value, range, bounds);
3229
+ const initialValues = normalizeValues(defaultValue, range, bounds);
3230
+ const onValueChangeRef = useRef(onValueChange);
3231
+ onValueChangeRef.current = onValueChange;
3232
+ const handleCommit = useCallback((next) => onValueChangeRef.current?.(toCommittedValue(next, range)), [range]);
3233
+ const [rawValues = initialValues, setValues] = useControllableState(controlledValues, initialValues, handleCommit);
3234
+ const values = useMemo(() => normalizeValues(toCommittedValue(rawValues, range), range, bounds), [rawValues, range, bounds.min, bounds.max, bounds.step]);
3235
+ const onValueChangeEndRef = useRef(onValueChangeEnd);
3236
+ onValueChangeEndRef.current = onValueChangeEnd;
3237
+ const emitChangeEnd = useCallback((vals) => onValueChangeEndRef.current?.(toCommittedValue(vals, range)), [range]);
3238
+ const emitChangeEndRef = useRef(emitChangeEnd);
3239
+ emitChangeEndRef.current = emitChangeEnd;
3240
+ const [draggingIndex, setDraggingIndex] = useState(null);
3241
+ const trackRef = useRef(null);
3242
+ const thumbRefs = useRef([]);
3243
+ const thumbDisabledRef = useRef([]);
3244
+ const gestureStartRef = useRef(null);
3245
+ const dragPointerRef = useRef(null);
3246
+ const valuesRef = useRef(values);
3247
+ valuesRef.current = values;
3248
+ thumbDisabledRef.current.length = values.length;
3249
+ const valueFromPoint = useCallback(
3250
+ (point) => {
3251
+ const track = trackRef.current;
3252
+ if (!track) return bounds.min;
3253
+ return valueFromPointer(track.getBoundingClientRect(), point, bounds, orientation);
3254
+ },
3255
+ [bounds.min, bounds.max, bounds.step, orientation]
3256
+ );
3257
+ const commit = useCallback(
3258
+ (next) => {
3259
+ if (!valuesEqual(next, valuesRef.current)) setValues(next);
3260
+ },
3261
+ [setValues]
3262
+ );
3263
+ const setThumbValue = useCallback(
3264
+ (index, next) => {
3265
+ if (disabled || readOnly || thumbDisabledRef.current[index]) return;
3266
+ const before = valuesRef.current;
3267
+ const updated = withThumbClamped(before, index, next, bounds, minDistance);
3268
+ commit(updated);
3269
+ if (!valuesEqual(updated, before)) emitChangeEnd(updated);
3270
+ },
3271
+ [disabled, readOnly, commit, emitChangeEnd, minDistance, bounds.min, bounds.max, bounds.step]
3272
+ );
3273
+ const startDrag = useCallback(
3274
+ (index, point, seek, pointerId) => {
3275
+ if (disabled || readOnly || thumbDisabledRef.current[index]) return;
3276
+ gestureStartRef.current = valuesRef.current;
3277
+ dragPointerRef.current = pointerId;
3278
+ if (!seek) {
3279
+ setDraggingIndex(index);
3280
+ thumbRefs.current[index]?.focus();
3281
+ return;
3282
+ }
3283
+ const { values: next, index: active } = withThumbSwapped(valuesRef.current, index, valueFromPoint(point), bounds, minDistance, thumbDisabledRef.current);
3284
+ setDraggingIndex(active);
3285
+ thumbRefs.current[active]?.focus();
3286
+ commit(next);
3287
+ },
3288
+ [disabled, readOnly, commit, valueFromPoint, minDistance, bounds.min, bounds.max, bounds.step]
3289
+ );
3290
+ useEffect(() => {
3291
+ if (draggingIndex === null) return;
3292
+ const ownerId = dragPointerRef.current;
3293
+ const isOwner = (event) => ownerId === null || event.pointerId === ownerId;
3294
+ const settle = () => {
3295
+ setDraggingIndex(null);
3296
+ if (gestureStartRef.current && !valuesEqual(valuesRef.current, gestureStartRef.current)) emitChangeEnd(valuesRef.current);
3297
+ gestureStartRef.current = null;
3298
+ dragPointerRef.current = null;
3299
+ };
3300
+ const handleMove = (event) => {
3301
+ if (!isOwner(event)) return;
3302
+ if (event.buttons === 0) {
3303
+ settle();
3304
+ return;
3305
+ }
3306
+ const { values: next, index: active } = withThumbSwapped(
3307
+ valuesRef.current,
3308
+ draggingIndex,
3309
+ valueFromPoint(pointerCoord(event, orientation)),
3310
+ bounds,
3311
+ minDistance,
3312
+ thumbDisabledRef.current
3313
+ );
3314
+ if (active !== draggingIndex) {
3315
+ setDraggingIndex(active);
3316
+ thumbRefs.current[active]?.focus();
3317
+ }
3318
+ commit(next);
3319
+ };
3320
+ const handleEnd = (event) => {
3321
+ if (!isOwner(event)) return;
3322
+ settle();
3323
+ };
3324
+ document.addEventListener("pointermove", handleMove);
3325
+ document.addEventListener("pointerup", handleEnd);
3326
+ document.addEventListener("pointercancel", handleEnd);
3327
+ return () => {
3328
+ document.removeEventListener("pointermove", handleMove);
3329
+ document.removeEventListener("pointerup", handleEnd);
3330
+ document.removeEventListener("pointercancel", handleEnd);
3331
+ };
3332
+ }, [draggingIndex, valueFromPoint, commit, emitChangeEnd, minDistance, orientation, bounds.min, bounds.max, bounds.step]);
3333
+ useEffect(
3334
+ () => () => {
3335
+ if (gestureStartRef.current && !valuesEqual(valuesRef.current, gestureStartRef.current)) emitChangeEndRef.current(valuesRef.current);
3336
+ gestureStartRef.current = null;
3337
+ },
3338
+ []
3339
+ );
3340
+ const Component = as ?? "div";
3341
+ const htmlProps = nativeProps;
3342
+ const groupAttrs = range ? {
3343
+ "role": htmlProps.role ?? "group",
3344
+ "aria-labelledby": htmlProps["aria-labelledby"] ?? field?.labelId
3345
+ } : {};
3346
+ const { "aria-label": rootAriaLabel, "aria-labelledby": rootAriaLabelledby, ...singleWrapperProps } = htmlProps;
3347
+ const wrapperProps = range ? nativeProps : singleWrapperProps;
3348
+ return /* @__PURE__ */ jsx(
3349
+ SliderProvider,
3350
+ {
3351
+ value: {
3352
+ values,
3353
+ bounds,
3354
+ range,
3355
+ minDistance,
3356
+ orientation,
3357
+ disabled,
3358
+ readOnly,
3359
+ invalid,
3360
+ required,
3361
+ draggingIndex,
3362
+ trackRef,
3363
+ thumbRefs,
3364
+ thumbDisabledRef,
3365
+ formatValue,
3366
+ setThumbValue,
3367
+ startDrag,
3368
+ valueFromPoint,
3369
+ fieldId: field?.fieldId,
3370
+ labelId: field?.labelId,
3371
+ describedBy: invalid ? field?.errorId : field?.descriptionId,
3372
+ // Only a single slider forwards the root name to its thumb; a range
3373
+ // carries it on the group wrapper above.
3374
+ rootAriaLabel: range ? void 0 : rootAriaLabel,
3375
+ rootAriaLabelledby: range ? void 0 : rootAriaLabelledby
3376
+ },
3377
+ children: /* @__PURE__ */ jsxs(Component, { ...wrapperProps, ...groupAttrs, ...rootAttrs, ref, children: [
3378
+ children ?? /* @__PURE__ */ jsx(SliderTrack, {}),
3379
+ name && !disabled && (range ? (
3380
+ // One input per handle so a 3+ thumb range submits every value; a
3381
+ // two-handle range keeps the conventional `-min` / `-max` pair.
3382
+ values.map((entry, index) => /* @__PURE__ */ jsx(InputField$1, { type: "hidden", name: rangeInputName(name, index, values.length), value: entry, form }, index))
3383
+ ) : /* @__PURE__ */ jsx(InputField$1, { type: "hidden", name, value: values[0], form }))
3384
+ ] })
3385
+ }
3386
+ );
3387
+ };
3388
+ Slider.displayName = "Slider";
3389
+ var warnedGrids = /* @__PURE__ */ new Set();
3390
+ var SliderTicks = (props) => {
3391
+ const theme = useComponentTheme("SliderTicks");
3392
+ const { bounds, orientation } = useSliderContext("Slider.Ticks");
3393
+ const { rootAttrs, rest } = composeRootAttrs(SliderTicksBase, props, theme);
3394
+ const { ref, ...nativeProps } = rest;
3395
+ const percents = tickPercents(bounds, MAX_TICKS);
3396
+ if (percents === null) {
3397
+ if (isDevelopment()) {
3398
+ const message = `[Slider.Ticks] needs at most ${MAX_TICKS} marks, but min ${bounds.min} / max ${bounds.max} / step ${bounds.step} produces more; the ticks are not rendered.`;
3399
+ if (!warnedGrids.has("ticks-too-dense")) {
3400
+ warnedGrids.add("ticks-too-dense");
3401
+ console.warn(message);
3402
+ }
3403
+ }
3404
+ return null;
3405
+ }
3406
+ const tickAttrs = buildSlotAttrs(SliderTicksBase.getSlotProps("tick"), "tick", {
3407
+ themeSlotProps: theme?.slotProps,
3408
+ themeClassNames: theme?.classNames,
3409
+ instanceSlotProps: props.slotProps,
3410
+ instanceClassNames: props.classNames
3411
+ });
3412
+ return /* @__PURE__ */ jsx("div", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: percents.map((percent, index) => /* @__PURE__ */ jsx("span", { ...tickAttrs, style: offsetStyle(percent, orientation) }, index)) });
3413
+ };
3414
+ SliderTicks.displayName = "Slider.Ticks";
3415
+ var SliderValue = (props) => {
3416
+ const theme = useComponentTheme("SliderValue");
3417
+ const { values, range, formatValue } = useSliderContext("Slider.Value");
3418
+ const { rootAttrs, rest } = composeRootAttrs(SliderValueBase, props, theme);
3419
+ const { children, ref, ...nativeProps } = rest;
3420
+ const formatted = values.map((value) => formatValueText(value, formatValue));
3421
+ const state = { values, formatted, range };
3422
+ return /* @__PURE__ */ jsx("span", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: typeof children === "function" ? children(state) : children ?? formatted.join(RANGE_VALUE_SEPARATOR) });
3423
+ };
3424
+ SliderValue.displayName = "Slider.Value";
3425
+
3426
+ // src/components/slider/index.ts
3427
+ var Slider2 = Object.assign(Slider, {
3428
+ Track: SliderTrack,
3429
+ Range: SliderRange,
3430
+ Thumb: SliderThumb,
3431
+ Ticks: SliderTicks,
3432
+ Value: SliderValue
3433
+ });
3434
+
3435
+ // src/components/spinner/base.ts
3436
+ var SpinnerBase = createComponentBase({
3437
+ name: "Spinner",
3438
+ slots: ["root", "indicator"],
3439
+ classes: {
3440
+ root: "tk-spinner",
3441
+ indicator: "tk-spinner-indicator"
3442
+ }
3443
+ });
3444
+
3445
+ // src/components/spinner/defaults.ts
3446
+ var DEFAULT_APPEARANCE7 = "rounded";
3447
+ var DEFAULT_SIZE13 = "base";
3448
+ var DEFAULT_VARIANT8 = "neutral";
3449
+ var DEFAULT_ARIA_LABEL2 = "Loading";
3450
+ var SPINNER_RADIAL_PARTS = 8;
3451
+ var SPINNER_THREE_DOT_PARTS = 3;
3452
+ var renderIndicatorContent = (appearance) => {
3453
+ if (appearance === "rounded") {
3454
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
3455
+ /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "16.6667" }) }),
3456
+ /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 36.6667 20" }) })
3457
+ ] });
3458
+ }
3459
+ if (appearance === "loader") {
3460
+ return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 31.7851 8.2149" }) });
3461
+ }
3462
+ if (appearance === "dots") {
3463
+ return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-dot" }, index));
3464
+ }
3465
+ if (appearance === "lines") {
3466
+ return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-line" }, index));
3467
+ }
3468
+ if (appearance === "threeDots") {
3469
+ return Array.from({ length: SPINNER_THREE_DOT_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-dot" }, index));
3470
+ }
3471
+ if (appearance === "logo") {
3472
+ return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 48 48", children: /* @__PURE__ */ jsx(
3473
+ "path",
3474
+ {
3475
+ clipRule: "evenodd",
3476
+ d: "M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24V4C48 1.79086 46.2091 0 44 0H24ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z",
3477
+ fillRule: "evenodd"
3478
+ }
3479
+ ) });
3480
+ }
3481
+ return null;
3482
+ };
3483
+ var Spinner = (props) => {
3484
+ const theme = useComponentTheme("Spinner");
3485
+ const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
3486
+ stateAttrs: ({ variant = DEFAULT_VARIANT8, size = DEFAULT_SIZE13, appearance: appearance2 = DEFAULT_APPEARANCE7 }) => ({
3487
+ "data-variant": variant,
3488
+ "data-size": size,
3489
+ "data-type": appearance2
3490
+ })
3491
+ });
3492
+ const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE7, ref, ...nativeProps } = rest;
3493
+ const indicatorSlotAttrs = buildSlotAttrs(SpinnerBase.getSlotProps("indicator"), "indicator", {
3494
+ themeSlotProps: theme?.slotProps,
3495
+ themeClassNames: theme?.classNames,
3496
+ instanceSlotProps: props.slotProps,
3497
+ instanceClassNames: props.classNames
3498
+ });
3499
+ const isDecorative = nativeProps["aria-hidden"] === true || nativeProps["aria-hidden"] === "true";
3500
+ const accessibilityAttrs = isDecorative ? {} : {
3501
+ "role": nativeProps.role ?? "status",
3502
+ "aria-label": nativeProps["aria-label"] ?? (nativeProps["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL2)
3503
+ };
3504
+ return /* @__PURE__ */ jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ jsx("span", { ...indicatorSlotAttrs, "aria-hidden": "true", children: renderIndicatorContent(appearance) }) });
3505
+ };
3506
+ Spinner.displayName = "Spinner";
3507
+
3508
+ // src/components/stepper/base.ts
3509
+ var StepperBase = createComponentBase({
3510
+ name: "Stepper",
3511
+ slots: ["root"],
3512
+ classes: { root: "tk-stepper" }
3513
+ });
3514
+ var StepperItemBase = createComponentBase({
3515
+ name: "StepperItem",
3516
+ slots: ["root", "trigger", "rail", "indicator", "content"],
3517
+ classes: {
3518
+ root: "tk-stepper-item",
3519
+ trigger: "tk-stepper-trigger",
3520
+ rail: "tk-stepper-rail",
3521
+ indicator: "tk-stepper-indicator",
3522
+ content: "tk-stepper-content"
3523
+ }
3524
+ });
3525
+ var StepperTitleBase = createComponentBase({
3526
+ name: "StepperTitle",
3527
+ slots: ["root"],
3528
+ classes: { root: "tk-stepper-title" }
3529
+ });
3530
+ var StepperDescriptionBase = createComponentBase({
3531
+ name: "StepperDescription",
3532
+ slots: ["root"],
3533
+ classes: { root: "tk-stepper-description" }
3534
+ });
3535
+
3536
+ // src/components/stepper/context.ts
3537
+ var [StepperProvider, useStepperContext] = createSafeContext("StepperProvider");
3538
+ var [StepperItemIndexProvider, useStepperItemIndex] = createSafeContext("StepperItemIndexProvider");
3539
+ var [StepperItemProvider, useStepperItem] = createSafeContext("Stepper.Item");
3540
+
3541
+ // src/components/stepper/defaults.ts
3542
+ var DEFAULT_ORIENTATION3 = "horizontal";
3543
+ var DEFAULT_MODE2 = "default";
3544
+ var DEFAULT_SIZE14 = "base";
3545
+ var DEFAULT_ACTIVE = 0;
3546
+ var DEFAULT_COMPLETED_LABEL = "completed";
3547
+ var DEFAULT_ERROR_LABEL = "error";
3548
+ var FOCUSABLE_TRIGGER_SELECTOR = '.tk-stepper-trigger:not(:disabled):not([tabindex="-1"])';
3549
+ var Stepper = (props) => {
3550
+ const theme = useComponentTheme("Stepper");
3551
+ const { rootAttrs, rest } = composeRootAttrs(StepperBase, props, theme, {
3552
+ stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION3, mode: mode2 = DEFAULT_MODE2, size = DEFAULT_SIZE14, linear: linear2 = false, reverse = false }) => ({
3553
+ "data-orientation": orientation2,
3554
+ "data-mode": mode2,
3555
+ "data-size": size,
3556
+ "data-linear": linear2 ? "" : void 0,
3557
+ "data-reverse": reverse ? "" : void 0
3558
+ })
3559
+ });
3560
+ const {
3561
+ active: controlledActive,
3562
+ defaultActive = DEFAULT_ACTIVE,
3563
+ onActiveChange,
3564
+ onStepClick,
3565
+ orientation = DEFAULT_ORIENTATION3,
3566
+ mode = DEFAULT_MODE2,
3567
+ // Consumed only as root data-* hooks above; destructured so the <ol>
3568
+ // doesn't receive unknown DOM attributes.
3569
+ size: _size,
3570
+ linear = false,
3571
+ reverse: _reverse,
3572
+ completedLabel = DEFAULT_COMPLETED_LABEL,
3573
+ errorLabel = DEFAULT_ERROR_LABEL,
3574
+ onKeyDown: nativeOnKeyDown,
3575
+ as,
3576
+ children,
3577
+ ref,
3578
+ ...nativeProps
3579
+ } = rest;
3580
+ const onActiveChangeRef = useRef(onActiveChange);
3581
+ onActiveChangeRef.current = onActiveChange;
3582
+ const stableOnActiveChange = useCallback((index) => {
3583
+ onActiveChangeRef.current?.(index);
3584
+ }, []);
3585
+ const onStepClickRef = useRef(onStepClick);
3586
+ onStepClickRef.current = onStepClick;
3587
+ const stableOnStepClick = useCallback((detail) => {
3588
+ onStepClickRef.current?.(detail);
3589
+ }, []);
3590
+ const [activeValue, setActive] = useControllableState(controlledActive, defaultActive, stableOnActiveChange);
3591
+ const active = activeValue ?? DEFAULT_ACTIVE;
3592
+ const [stepsMeta, setStepsMeta] = useState(/* @__PURE__ */ new Map());
3593
+ const { items, renderStepsMeta } = useMemo(() => {
3594
+ const meta = /* @__PURE__ */ new Map();
3595
+ let stepIndex = 0;
3596
+ const items2 = Children.toArray(children).map((child) => {
3597
+ if (!isValidElement(child)) return child;
3598
+ const index = stepIndex++;
3599
+ const { error = false, disabled = false, isClickable = true } = child.props;
3600
+ meta.set(index, { error, disabled, isClickable });
3601
+ return /* @__PURE__ */ jsx(StepperItemIndexProvider, { value: { index }, children: child }, child.key ?? index);
3602
+ });
3603
+ return { items: items2, renderStepsMeta: meta };
3604
+ }, [children]);
3605
+ const registerStep = useCallback((index, meta) => {
3606
+ setStepsMeta((previous) => new Map(previous).set(index, meta));
3607
+ return () => {
3608
+ setStepsMeta((previous) => {
3609
+ const next = new Map(previous);
3610
+ next.delete(index);
3611
+ return next;
3612
+ });
3613
+ };
3614
+ }, []);
3615
+ const contextValue = useMemo(() => {
3616
+ const canSelectStep = (index, selfMeta) => {
3617
+ const target = stepsMeta.get(index) ?? selfMeta ?? renderStepsMeta.get(index);
3618
+ if (!target || target.disabled || !target.isClickable) return false;
3619
+ if (!linear) return true;
3620
+ if (index < active) return true;
3621
+ if (index === active + 1) {
3622
+ const current = stepsMeta.get(active) ?? renderStepsMeta.get(active);
3623
+ return !current?.error && !current?.disabled;
3624
+ }
3625
+ return false;
3626
+ };
3627
+ const getStepStatus = (options) => {
3628
+ const { index } = options;
3629
+ if (index < active) return "completed";
3630
+ if (index === active) return "active";
3631
+ return "inactive";
3632
+ };
3633
+ return {
3634
+ active,
3635
+ mode,
3636
+ completedLabel,
3637
+ errorLabel,
3638
+ getStepStatus,
3639
+ registerStep,
3640
+ canSelectStep,
3641
+ selectStep: (index) => {
3642
+ if (index !== active && canSelectStep(index)) {
3643
+ setActive(index);
3644
+ }
3645
+ },
3646
+ emitStepClick: (detail) => {
3647
+ stableOnStepClick(detail);
3648
+ }
3649
+ };
3650
+ }, [active, mode, completedLabel, errorLabel, linear, stepsMeta, renderStepsMeta, registerStep, setActive, stableOnStepClick]);
3651
+ const { onKeyDown: slotOnKeyDown, ...restRootAttrs } = rootAttrs;
3652
+ const userOnKeyDown = slotOnKeyDown ?? nativeOnKeyDown;
3653
+ const handleKeyDown = (event) => {
3654
+ userOnKeyDown?.(event);
3655
+ if (event.defaultPrevented) return;
3656
+ const forwardKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
3657
+ const backwardKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
3658
+ if (event.key !== forwardKey && event.key !== backwardKey && event.key !== "Home" && event.key !== "End") return;
3659
+ const pressedTrigger = event.target instanceof HTMLElement ? event.target.closest(".tk-stepper-trigger") : null;
3660
+ if (!pressedTrigger || pressedTrigger.closest(".tk-stepper") !== event.currentTarget) return;
3661
+ event.preventDefault();
3662
+ const triggers = Array.from(event.currentTarget.querySelectorAll(FOCUSABLE_TRIGGER_SELECTOR)).filter(
3663
+ (trigger) => trigger.closest(".tk-stepper") === event.currentTarget
3664
+ );
3665
+ const currentIndex = triggers.indexOf(pressedTrigger);
3666
+ if (triggers.length === 0 || currentIndex === -1 && event.key !== "Home" && event.key !== "End") return;
3667
+ const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : event.key === forwardKey ? currentIndex + 1 : currentIndex - 1;
3668
+ triggers[nextIndex]?.focus();
3669
+ };
3670
+ const Component = as ?? "ol";
3671
+ return /* @__PURE__ */ jsx(StepperProvider, { value: contextValue, children: /* @__PURE__ */ jsx(Component, { ...nativeProps, ...restRootAttrs, ref, onKeyDown: handleKeyDown, children: items }) });
3672
+ };
3673
+ Stepper.displayName = "Stepper";
3674
+ var StepperTitle = (props) => {
3675
+ const theme = useComponentTheme("StepperTitle");
3676
+ useStepperContext("Stepper.Title");
3677
+ const { rootAttrs, rest } = composeRootAttrs(StepperTitleBase, props, theme);
3678
+ const { as, children, ref, ...nativeProps } = rest;
3679
+ const Component = as ?? "span";
3680
+ return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
3681
+ };
3682
+ StepperTitle.displayName = "Stepper.Title";
3683
+ var visuallyHidden = {
3684
+ position: "absolute",
3685
+ width: 1,
3686
+ height: 1,
3687
+ margin: -1,
3688
+ padding: 0,
3689
+ overflow: "hidden",
3690
+ clip: "rect(0 0 0 0)",
3691
+ whiteSpace: "nowrap",
3692
+ border: 0
3693
+ };
3694
+ var StepperItem = (props) => {
3695
+ const theme = useComponentTheme("StepperItem");
3696
+ const { active, mode, completedLabel, errorLabel, getStepStatus, registerStep, canSelectStep, selectStep, emitStepClick } = useStepperContext("Stepper.Item");
3697
+ const { index } = useStepperItemIndex("Stepper.Item");
3698
+ const { rootAttrs, rest } = composeRootAttrs(StepperItemBase, props, theme, {
3699
+ stateAttrs: ({ error: error2 = false, disabled: disabled2 = false, isClickable: isClickable2 = true }) => ({
3700
+ "data-state": getStepStatus({ index }),
3701
+ "data-error": error2 ? "" : void 0,
3702
+ "data-disabled": disabled2 ? "" : void 0,
3703
+ // The active step is excluded: pressing it re-emits `onStepClick` but
3704
+ // can never change the selection, which is what this hook advertises.
3705
+ "data-clickable": index !== active && canSelectStep(index, { error: error2, disabled: disabled2, isClickable: isClickable2 }) ? "" : void 0
3706
+ })
3707
+ });
3708
+ const { error = false, disabled = false, isClickable = true, indicator, as, children, ref, ...nativeProps } = rest;
3709
+ useEffect(() => registerStep(index, { error, disabled, isClickable }), [registerStep, index, error, disabled, isClickable]);
3710
+ const status = getStepStatus({ index });
3711
+ const selectable = canSelectStep(index, { error, disabled, isClickable });
3712
+ const isActive = index === active;
3713
+ const ariaDisabled = selectable || isActive ? void 0 : true;
3714
+ const statusLabel = error ? errorLabel : status === "completed" ? completedLabel : void 0;
3715
+ const [descriptionId, setDescriptionId] = useState();
3716
+ const registerDescription = useCallback((id) => {
3717
+ setDescriptionId(id);
3718
+ return () => {
3719
+ setDescriptionId((current) => current === id ? void 0 : current);
3720
+ };
3721
+ }, []);
3722
+ const itemContextValue = useMemo(() => ({ registerDescription }), [registerDescription]);
3723
+ const slotLayering = {
3724
+ themeSlotProps: theme?.slotProps,
3725
+ themeClassNames: theme?.classNames,
3726
+ instanceSlotProps: props.slotProps,
3727
+ instanceClassNames: props.classNames
3728
+ };
3729
+ const triggerSlotAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("trigger"), "trigger", slotLayering);
3730
+ const { onClick: triggerSlotOnClick, ...triggerAttrs } = triggerSlotAttrs;
3731
+ const railAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("rail"), "rail", slotLayering);
3732
+ const indicatorAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("indicator"), "indicator", slotLayering);
3733
+ const contentAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("content"), "content", slotLayering);
3734
+ const resolvedIndicator = typeof indicator === "function" ? indicator({ status, index }) : indicator;
3735
+ let indicatorContent = null;
3736
+ if (!disabled) {
3737
+ if (resolvedIndicator != null) {
3738
+ indicatorContent = resolvedIndicator;
3739
+ } else if (error) {
3740
+ indicatorContent = /* @__PURE__ */ jsx(CloseIconOutlinedRounded, {});
3741
+ } else if (status === "completed") {
3742
+ indicatorContent = /* @__PURE__ */ jsx(CheckIconOutlinedRounded, {});
3743
+ }
3744
+ }
3745
+ const handleTriggerClick = (event) => {
3746
+ triggerSlotOnClick?.(event);
3747
+ if (event.defaultPrevented) return;
3748
+ if (!selectable && !(isActive && isClickable)) return;
3749
+ emitStepClick({ index, status });
3750
+ selectStep(index);
3751
+ };
3752
+ const Component = as ?? "li";
3753
+ return /* @__PURE__ */ jsx(StepperItemProvider, { value: itemContextValue, children: /* @__PURE__ */ jsxs(Component, { ...nativeProps, ...rootAttrs, ref, children: [
3754
+ mode !== "compact" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...railAttrs }),
3755
+ /* @__PURE__ */ jsxs(
3756
+ "button",
3757
+ {
3758
+ ...triggerAttrs,
3759
+ type: "button",
3760
+ disabled,
3761
+ onClick: handleTriggerClick,
3762
+ "aria-current": isActive ? "step" : void 0,
3763
+ "aria-disabled": ariaDisabled,
3764
+ "aria-describedby": descriptionId,
3765
+ tabIndex: isClickable ? void 0 : -1,
3766
+ children: [
3767
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
3768
+ /* @__PURE__ */ jsx("span", { ...contentAttrs, children }),
3769
+ statusLabel ? /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: `, ${statusLabel}` }) : null
3770
+ ]
3771
+ }
3772
+ )
3773
+ ] }) });
3774
+ };
3775
+ StepperItem.displayName = "Stepper.Item";
3776
+ var StepperDescription = (props) => {
3777
+ const theme = useComponentTheme("StepperDescription");
3778
+ const { registerDescription } = useStepperItem("Stepper.Description");
3779
+ const { rootAttrs, rest } = composeRootAttrs(StepperDescriptionBase, props, theme);
3780
+ const { as, children, ref, id: idProp, ...nativeProps } = rest;
3781
+ const autoId = useId();
3782
+ const id = idProp ?? autoId;
3783
+ useEffect(() => registerDescription(id), [registerDescription, id]);
3784
+ const Component = as ?? "span";
3785
+ return (
3786
+ // Locked after the spread: the id must match the trigger's
3787
+ // `aria-describedby` registration, and `aria-hidden` keeps the description
3788
+ // out of the trigger's accessible NAME — it still reaches assistive
3789
+ // technology as the trigger's description, since `aria-describedby` may
3790
+ // reference hidden elements.
3791
+ /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, id, "aria-hidden": "true", children })
3792
+ );
3793
+ };
3794
+ StepperDescription.displayName = "Stepper.Description";
3795
+
3796
+ // src/components/stepper/index.ts
3797
+ var Stepper2 = Object.assign(Stepper, {
3798
+ Item: StepperItem,
3799
+ Title: StepperTitle,
3800
+ Description: StepperDescription
3801
+ });
2524
3802
 
2525
3803
  // src/components/switch/base.ts
2526
3804
  var SwitchBase = createComponentBase({
@@ -2539,12 +3817,12 @@ var SwitchBase = createComponentBase({
2539
3817
  var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
2540
3818
 
2541
3819
  // src/components/switch/defaults.ts
2542
- var DEFAULT_SIZE11 = "base";
2543
- var DEFAULT_VARIANT7 = "info";
3820
+ var DEFAULT_SIZE15 = "base";
3821
+ var DEFAULT_VARIANT9 = "info";
2544
3822
  var Switch = (props) => {
2545
3823
  const theme = useComponentTheme("Switch");
2546
3824
  const { rootAttrs, rest } = composeRootAttrs(SwitchBase, props, theme, {
2547
- stateAttrs: ({ size = DEFAULT_SIZE11, variant = DEFAULT_VARIANT7 }) => ({
3825
+ stateAttrs: ({ size = DEFAULT_SIZE15, variant = DEFAULT_VARIANT9 }) => ({
2548
3826
  "data-size": size,
2549
3827
  "data-variant": variant
2550
3828
  })
@@ -2555,13 +3833,17 @@ var Switch = (props) => {
2555
3833
  // off the rendered DOM where they would leak as raw HTML attributes.
2556
3834
  size: _size,
2557
3835
  variant: _variant,
2558
- // `invalid` is forwarded to Spar as `invalid` (same name).
2559
- invalid = false,
2560
3836
  children,
2561
3837
  ref,
3838
+ // `invalid`, `disabled`, `readOnly` and `required` are intentionally NOT
3839
+ // destructured (so no eager `= false` default is applied) — they flow to
3840
+ // Spar via `...sparProps` untouched. Defaulting `invalid` here would turn
3841
+ // an omitted prop into an explicit `false`, defeating Spar's
3842
+ // `invalid ?? fieldCtx?.invalid` inheritance and silently overriding a
3843
+ // wrapping `<Field invalid>`. Mirrors the Radio/Input/Select pass-through.
2562
3844
  ...sparProps
2563
3845
  } = rest;
2564
- return /* @__PURE__ */ jsx(Switch$1, { ...sparProps, invalid, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
3846
+ return /* @__PURE__ */ jsx(Switch$1, { ...sparProps, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
2565
3847
  SwitchProvider,
2566
3848
  {
2567
3849
  value: {
@@ -2667,7 +3949,7 @@ var TableBase = createComponentBase({
2667
3949
  var [TableProvider, useTableContext] = createSafeContext("Table");
2668
3950
 
2669
3951
  // src/components/table/defaults.ts
2670
- var DEFAULT_SIZE12 = "base";
3952
+ var DEFAULT_SIZE16 = "base";
2671
3953
  var DEFAULT_PAGE_SIZE = 10;
2672
3954
  var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
2673
3955
  var DEFAULT_COLUMN_WIDTH = 150;
@@ -3037,7 +4319,7 @@ var TableHeaderCell = ({ header }) => {
3037
4319
  children: /* @__PURE__ */ jsxs("div", { ...slotAttrs("headerContent"), children: [
3038
4320
  canSort ? /* @__PURE__ */ jsxs("button", { ...slotAttrs("sortTrigger"), type: "button", onClick: column.getToggleSortingHandler(), children: [
3039
4321
  content,
3040
- /* @__PURE__ */ jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsx(ChevronTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(SwapIconOutlinedRounded, {}) })
4322
+ /* @__PURE__ */ jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsx(ArrowTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(SwapIconOutlinedRounded, {}) })
3041
4323
  ] }) : content,
3042
4324
  canFilter && /* @__PURE__ */ jsx(TableColumnFilter, { header })
3043
4325
  ] })
@@ -3091,7 +4373,7 @@ var TablePagination = () => {
3091
4373
  variant: "neutral",
3092
4374
  appearance: "text",
3093
4375
  "aria-label": "First page",
3094
- startContent: /* @__PURE__ */ jsx(ArrowLeftIconOutlinedRounded, {}),
4376
+ startContent: /* @__PURE__ */ jsx(DoubleChevronLeftIconOutlinedRounded, {}),
3095
4377
  disabled: !table.getCanPreviousPage(),
3096
4378
  onClick: () => table.setPageIndex(0)
3097
4379
  }
@@ -3148,7 +4430,7 @@ var TablePagination = () => {
3148
4430
  variant: "neutral",
3149
4431
  appearance: "text",
3150
4432
  "aria-label": "Last page",
3151
- startContent: /* @__PURE__ */ jsx(ArrowRightIconOutlinedRounded, {}),
4433
+ startContent: /* @__PURE__ */ jsx(DoubleChevronRightIconOutlinedRounded, {}),
3152
4434
  disabled: !table.getCanNextPage() || pageCount <= 0,
3153
4435
  onClick: () => table.setPageIndex(pageCount - 1)
3154
4436
  }
@@ -3193,7 +4475,7 @@ var Table = (props) => {
3193
4475
  // Visual vocabulary lives on the root so recipes cascade
3194
4476
  // to the portal-free table descendants. `data-loading` mirrors the
3195
4477
  // boolean-presence convention (rule 5).
3196
- stateAttrs: ({ size: size2 = DEFAULT_SIZE12, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
4478
+ stateAttrs: ({ size: size2 = DEFAULT_SIZE16, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
3197
4479
  "data-size": size2,
3198
4480
  "data-striped": striped2 ? "" : void 0,
3199
4481
  "data-bordered": bordered2 ? "" : void 0,
@@ -3207,7 +4489,7 @@ var Table = (props) => {
3207
4489
  getRowId,
3208
4490
  manual = false,
3209
4491
  loading = false,
3210
- size = DEFAULT_SIZE12,
4492
+ size = DEFAULT_SIZE16,
3211
4493
  striped = false,
3212
4494
  bordered = false,
3213
4495
  stickyHeader = false,
@@ -3407,19 +4689,19 @@ var TabsContentBase = createComponentBase({
3407
4689
  var [TabsOwnProvider, useTabsOwnContext] = createSafeContext("Tabs");
3408
4690
 
3409
4691
  // src/components/tabs/defaults.ts
3410
- var DEFAULT_SIZE13 = "base";
3411
- var DEFAULT_VARIANT8 = "primary";
3412
- var DEFAULT_APPEARANCE6 = "basic";
4692
+ var DEFAULT_SIZE17 = "base";
4693
+ var DEFAULT_VARIANT10 = "primary";
4694
+ var DEFAULT_APPEARANCE8 = "basic";
3413
4695
  var Tabs = (props) => {
3414
4696
  const theme = useComponentTheme("Tabs");
3415
4697
  const { rootAttrs, rest } = composeRootAttrs(TabsBase, props, theme, {
3416
- stateAttrs: ({ size: size2 = DEFAULT_SIZE13, variant: variant2 = DEFAULT_VARIANT8, appearance: appearance2 = DEFAULT_APPEARANCE6 }) => ({
4698
+ stateAttrs: ({ size: size2 = DEFAULT_SIZE17, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
3417
4699
  "data-size": size2,
3418
4700
  "data-variant": variant2,
3419
4701
  "data-type": appearance2
3420
4702
  })
3421
4703
  });
3422
- const { size = DEFAULT_SIZE13, variant = DEFAULT_VARIANT8, appearance = DEFAULT_APPEARANCE6, children, ref, ...sparProps } = rest;
4704
+ const { size = DEFAULT_SIZE17, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
3423
4705
  return /* @__PURE__ */ jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsx(Tabs$1, { ...sparProps, ...rootAttrs, ref, children }) });
3424
4706
  };
3425
4707
  Tabs.displayName = "Tabs";
@@ -3519,11 +4801,11 @@ var TooltipTrigger = (props) => {
3519
4801
  TooltipTrigger.displayName = "Tooltip.Trigger";
3520
4802
 
3521
4803
  // src/components/tooltip/defaults.ts
3522
- var DEFAULT_VARIANT9 = "white";
4804
+ var DEFAULT_VARIANT11 = "white";
3523
4805
  var TooltipContent = (props) => {
3524
4806
  const theme = useComponentTheme("TooltipContent");
3525
4807
  const { rootAttrs, rest } = composeRootAttrs(TooltipContentBase, props, theme, {
3526
- stateAttrs: ({ variant = DEFAULT_VARIANT9 }) => ({
4808
+ stateAttrs: ({ variant = DEFAULT_VARIANT11 }) => ({
3527
4809
  "data-variant": variant
3528
4810
  })
3529
4811
  });
@@ -3548,8 +4830,8 @@ TooltipDescription.displayName = "Tooltip.Description";
3548
4830
  var TooltipArrow = (props) => {
3549
4831
  const theme = useComponentTheme("TooltipArrow");
3550
4832
  const { rootAttrs, rest } = composeRootAttrs(TooltipArrowBase, props, theme);
3551
- const { ref, ...sparProps } = rest;
3552
- return /* @__PURE__ */ jsx(TooltipArrow$1, { ...sparProps, ...rootAttrs, ref });
4833
+ const { ref, children, ...sparProps } = rest;
4834
+ return /* @__PURE__ */ jsx(TooltipArrow$1, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
3553
4835
  };
3554
4836
  TooltipArrow.displayName = "Tooltip.Arrow";
3555
4837
 
@@ -3581,7 +4863,7 @@ var ToastBase = createComponentBase({
3581
4863
 
3582
4864
  // src/components/toast/defaults.ts
3583
4865
  var DEFAULT_TOAST_APPEARANCE = "filled";
3584
- var DEFAULT_CLOSE_LABEL2 = "Dismiss notification";
4866
+ var DEFAULT_CLOSE_LABEL5 = "Dismiss notification";
3585
4867
 
3586
4868
  // src/components/toast/utils.ts
3587
4869
  var toastTypeToVariant = (type) => {
@@ -3602,7 +4884,7 @@ var toastTypeToVariant = (type) => {
3602
4884
  var Toast = (props) => {
3603
4885
  const theme = useComponentTheme("Toast");
3604
4886
  const { rootAttrs, rest } = composeRootAttrs(ToastBase, props, theme);
3605
- const { as, toast, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL2, children, ref, ...toastProps } = rest;
4887
+ const { as, toast, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL5, children, ref, ...toastProps } = rest;
3606
4888
  const Component = as ?? "div";
3607
4889
  const variant = toastTypeToVariant(toast.type);
3608
4890
  return /* @__PURE__ */ jsx(Toast$1.Root, { ...toastProps, as: Component, ref, toast, toaster, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxs(Alert2, { variant, appearance, role: "presentation", children: [
@@ -3622,7 +4904,7 @@ var Toaster = (props) => {
3622
4904
  "data-placement": toaster2.placement
3623
4905
  })
3624
4906
  });
3625
- const { as, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL2, overlap = false, children, ref, ...toasterProps } = rest;
4907
+ const { as, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL5, overlap = false, children, ref, ...toasterProps } = rest;
3626
4908
  const Component = as ?? "div";
3627
4909
  return /* @__PURE__ */ jsx(Toaster$1, { ...toasterProps, as: Component, ref, toaster, overlap, ...rootAttrs, children: (toast) => (
3628
4910
  // Spar renders each item directly into a mapped array, so the key must
@@ -3633,4 +4915,1079 @@ var Toaster = (props) => {
3633
4915
  };
3634
4916
  Toaster.displayName = "Toaster";
3635
4917
 
3636
- export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Drawer2 as Drawer, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Radio2 as Radio, Select2 as Select, Spinner, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, getExportRows, useComponentTheme, useTheme };
4918
+ // src/components/skeleton/base.ts
4919
+ var SkeletonBase = createComponentBase({
4920
+ name: "Skeleton",
4921
+ slots: ["root", "shimmer"],
4922
+ classes: {
4923
+ root: "tk-skeleton",
4924
+ shimmer: "tk-skeleton-shimmer"
4925
+ }
4926
+ });
4927
+
4928
+ // src/components/skeleton/defaults.ts
4929
+ var DEFAULT_SHAPE = "rectangle";
4930
+ var DEFAULT_ANIMATION = "shimmer";
4931
+ var toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
4932
+ var Skeleton = (props) => {
4933
+ const theme = useComponentTheme("Skeleton");
4934
+ const { rootAttrs, rest } = composeRootAttrs(SkeletonBase, props, theme, {
4935
+ stateAttrs: ({ shape = DEFAULT_SHAPE, animation = DEFAULT_ANIMATION }) => ({
4936
+ "data-type": shape,
4937
+ "data-animation": animation
4938
+ })
4939
+ });
4940
+ const { shape: _shape, animation: _animation, width, height, ref, style, ...nativeProps } = rest;
4941
+ const { style: slotStyle, ...slotAttrs } = rootAttrs;
4942
+ const shimmerSlotAttrs = buildSlotAttrs(SkeletonBase.getSlotProps("shimmer"), "shimmer", {
4943
+ themeSlotProps: theme?.slotProps,
4944
+ themeClassNames: theme?.classNames,
4945
+ instanceSlotProps: props.slotProps,
4946
+ instanceClassNames: props.classNames
4947
+ });
4948
+ const sizeVars = {
4949
+ ...width !== void 0 && { "--tk-skeleton-width": toCssSize(width) },
4950
+ ...height !== void 0 && { "--tk-skeleton-height": toCssSize(height) }
4951
+ };
4952
+ return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...nativeProps, ...slotAttrs, style: { ...style, ...slotStyle, ...sizeVars }, ref, children: /* @__PURE__ */ jsx("span", { ...shimmerSlotAttrs, "aria-hidden": "true" }) });
4953
+ };
4954
+ Skeleton.displayName = "Skeleton";
4955
+
4956
+ // src/components/upload/base.ts
4957
+ var UploadBase = createComponentBase({
4958
+ name: "Upload",
4959
+ slots: ["root"],
4960
+ classes: { root: "tk-upload" }
4961
+ });
4962
+ var UploadDropzoneBase = createComponentBase({
4963
+ name: "UploadDropzone",
4964
+ slots: ["root"],
4965
+ classes: { root: "tk-upload-dropzone" }
4966
+ });
4967
+ var UploadActionsBase = createComponentBase({
4968
+ name: "UploadActions",
4969
+ slots: ["root"],
4970
+ classes: { root: "tk-upload-actions" }
4971
+ });
4972
+ var UploadTriggerBase = createComponentBase({
4973
+ name: "UploadTrigger",
4974
+ slots: ["root"],
4975
+ classes: { root: "tk-upload-trigger" }
4976
+ });
4977
+ var UploadSubmitBase = createComponentBase({
4978
+ name: "UploadSubmit",
4979
+ slots: ["root"],
4980
+ classes: { root: "tk-upload-submit" }
4981
+ });
4982
+ var UploadListBase = createComponentBase({
4983
+ name: "UploadList",
4984
+ slots: ["root"],
4985
+ classes: { root: "tk-upload-list" }
4986
+ });
4987
+ var UploadItemBase = createComponentBase({
4988
+ name: "UploadItem",
4989
+ slots: ["root"],
4990
+ classes: { root: "tk-upload-item" }
4991
+ });
4992
+ var UploadItemContentBase = createComponentBase({
4993
+ name: "UploadItemContent",
4994
+ slots: ["root", "name", "size", "status", "progress"],
4995
+ classes: {
4996
+ root: "tk-upload-item-content",
4997
+ name: "tk-upload-item-name",
4998
+ size: "tk-upload-item-size",
4999
+ status: "tk-upload-item-status",
5000
+ progress: "tk-upload-item-progress"
5001
+ }
5002
+ });
5003
+ var UploadItemPreviewBase = createComponentBase({
5004
+ name: "UploadItemPreview",
5005
+ slots: ["root", "image", "icon", "extension"],
5006
+ classes: {
5007
+ root: "tk-upload-item-preview",
5008
+ image: "tk-upload-item-preview-image",
5009
+ icon: "tk-upload-item-preview-icon",
5010
+ extension: "tk-upload-item-preview-extension"
5011
+ }
5012
+ });
5013
+ var UploadItemActionsBase = createComponentBase({
5014
+ name: "UploadItemActions",
5015
+ slots: ["root"],
5016
+ classes: { root: "tk-upload-item-actions" }
5017
+ });
5018
+ var UploadItemActionBase = createComponentBase({
5019
+ name: "UploadItemAction",
5020
+ slots: ["root"],
5021
+ classes: { root: "tk-upload-item-action" }
5022
+ });
5023
+
5024
+ // src/components/upload/context.ts
5025
+ var [UploadProvider, useUploadContext] = createSafeContext("UploadProvider");
5026
+ var [UploadItemProvider, useUploadItemContext] = createSafeContext("UploadItemProvider");
5027
+
5028
+ // src/components/upload/defaults.ts
5029
+ var DEFAULT_MULTIPLE = false;
5030
+ var DEFAULT_DIRECTORY = false;
5031
+ var DEFAULT_STATUS = "idle";
5032
+ var DEFAULT_UPLOADING_LABEL = "Uploading\u2026";
5033
+ var DEFAULT_PROCESSING_LABEL = "Processing\u2026";
5034
+ var DEFAULT_COMPLETED_LABEL2 = "Completed";
5035
+ var DEFAULT_ERROR_LABEL2 = "Failed";
5036
+ var DEFAULT_PROGRESS_LABEL = "{name} upload progress";
5037
+ var DEFAULT_DOWNLOAD_LABEL = "Download {name}";
5038
+ var DEFAULT_REMOVE_LABEL2 = "Remove {name}";
5039
+
5040
+ // src/components/upload/helpers.ts
5041
+ var fileKey = (file) => `${file.webkitRelativePath || file.name}:${file.size}:${file.lastModified}`;
5042
+ var idCounter = 0;
5043
+ var generateId = () => {
5044
+ const cryptoObj = typeof globalThis !== "undefined" ? globalThis.crypto : void 0;
5045
+ if (cryptoObj && typeof cryptoObj.randomUUID === "function") {
5046
+ try {
5047
+ return cryptoObj.randomUUID();
5048
+ } catch {
5049
+ }
5050
+ }
5051
+ idCounter += 1;
5052
+ return `tk-upload-${idCounter}-${Date.now().toString(36)}`;
5053
+ };
5054
+ var createUploadFile = (file) => ({
5055
+ id: generateId(),
5056
+ file,
5057
+ name: file.name,
5058
+ size: file.size,
5059
+ type: file.type,
5060
+ status: DEFAULT_STATUS
5061
+ });
5062
+ var fileName = (item) => item.name ?? item.file?.name ?? "";
5063
+ var fileSize = (item) => item.size ?? item.file?.size;
5064
+ var fileType = (item) => item.type ?? item.file?.type;
5065
+ var fileStatus = (item) => item.status ?? DEFAULT_STATUS;
5066
+ var formatFileLabel = (template, name) => template.split("{name}").join(name);
5067
+ var isConsumerVeto = (event, preventedOnEntry) => event.defaultPrevented && !preventedOnEntry;
5068
+ var SIZE_UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte"];
5069
+ var sizeFormatters = /* @__PURE__ */ new Map();
5070
+ var sizeFormatter = (exponent) => {
5071
+ let formatter = sizeFormatters.get(exponent);
5072
+ if (!formatter) {
5073
+ formatter = new Intl.NumberFormat(void 0, { style: "unit", unit: SIZE_UNITS[exponent], unitDisplay: "short" });
5074
+ sizeFormatters.set(exponent, formatter);
5075
+ }
5076
+ return formatter;
5077
+ };
5078
+ var roundForUnit = (value, exponent) => exponent === 0 || value >= 100 ? Math.round(value) : Math.round(value * 10) / 10;
5079
+ var formatFileSize = (bytes) => {
5080
+ if (!Number.isFinite(bytes) || bytes <= 0) return sizeFormatter(0).format(0);
5081
+ let exponent = Math.max(0, Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), SIZE_UNITS.length - 1));
5082
+ let rounded = roundForUnit(bytes / 1024 ** exponent, exponent);
5083
+ if (rounded >= 1024 && exponent < SIZE_UNITS.length - 1) {
5084
+ exponent += 1;
5085
+ rounded = roundForUnit(bytes / 1024 ** exponent, exponent);
5086
+ }
5087
+ return sizeFormatter(exponent).format(rounded);
5088
+ };
5089
+ var OBJECT_URL_TTL_MS = 1e3;
5090
+ var canSaveUploadFile = (item) => Boolean(item.file || item.url);
5091
+ var saveUploadFile = (item) => {
5092
+ const canCreate = typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
5093
+ const objectUrl = item.file && canCreate ? URL.createObjectURL(item.file) : void 0;
5094
+ const href = objectUrl ?? item.url;
5095
+ if (!href) return;
5096
+ const link = document.createElement("a");
5097
+ link.href = href;
5098
+ link.download = fileName(item);
5099
+ document.body.append(link);
5100
+ link.click();
5101
+ link.remove();
5102
+ if (objectUrl) setTimeout(() => URL.revokeObjectURL(objectUrl), OBJECT_URL_TTL_MS);
5103
+ };
5104
+ var IMAGE_TYPES = /* @__PURE__ */ new Set(["image/jpeg", "image/png", "image/gif", "image/webp", "image/avif", "image/svg+xml"]);
5105
+ var isImageType = (type) => type !== void 0 && IMAGE_TYPES.has(type);
5106
+ var nameExtension = (name) => {
5107
+ const dot = name.lastIndexOf(".");
5108
+ return dot > 0 ? name.slice(dot + 1).toUpperCase() : "";
5109
+ };
5110
+ var ICON_BY_EXTENSION = {
5111
+ DOC: "word",
5112
+ DOCX: "word",
5113
+ JPEG: "jpg",
5114
+ JPG: "jpg",
5115
+ MP4: "mp4",
5116
+ PDF: "pdf",
5117
+ PNG: "png",
5118
+ PPT: "powerpoint",
5119
+ PPTX: "powerpoint",
5120
+ TXT: "text",
5121
+ XLS: "excel",
5122
+ XLSX: "excel",
5123
+ ZIP: "zip"
5124
+ };
5125
+ var ICON_BY_TYPE = {
5126
+ "application/msword": "word",
5127
+ "application/pdf": "pdf",
5128
+ "application/vnd.ms-excel": "excel",
5129
+ "application/vnd.ms-powerpoint": "powerpoint",
5130
+ "application/vnd.openxmlformats-officedocument.presentationml.presentation": "powerpoint",
5131
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "excel",
5132
+ "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "word",
5133
+ "application/zip": "zip",
5134
+ "image/jpeg": "jpg",
5135
+ "image/png": "png",
5136
+ "text/plain": "text",
5137
+ "video/mp4": "mp4"
5138
+ };
5139
+ var fileIconName = (item) => {
5140
+ const type = fileType(item);
5141
+ return ICON_BY_EXTENSION[nameExtension(fileName(item))] ?? (type ? ICON_BY_TYPE[type.toLowerCase()] : void 0);
5142
+ };
5143
+ var isWildcard = (token) => token === "*" || token === "*/*";
5144
+ var acceptTokens = (accept) => accept ? accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "") : [];
5145
+ var acceptsAnything = (tokens) => tokens.length === 0 || tokens.some(isWildcard);
5146
+ var tokenMatchesFile = (token, file) => {
5147
+ if (token.startsWith(".")) return file.name.toLowerCase().endsWith(token);
5148
+ const type = file.type.toLowerCase();
5149
+ if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
5150
+ return type === token;
5151
+ };
5152
+ var matchesAccept = (file, accept) => {
5153
+ const tokens = acceptTokens(accept);
5154
+ if (acceptsAnything(tokens)) return true;
5155
+ return tokens.some((token) => tokenMatchesFile(token, file));
5156
+ };
5157
+ var acceptMatchesType = (type, accept) => {
5158
+ const tokens = acceptTokens(accept);
5159
+ if (acceptsAnything(tokens)) return true;
5160
+ const t = type.toLowerCase();
5161
+ let unjudgeable = false;
5162
+ for (const token of tokens) {
5163
+ if (token.startsWith(".")) {
5164
+ unjudgeable = true;
5165
+ continue;
5166
+ }
5167
+ if (token.endsWith("/*") ? t.startsWith(token.slice(0, -1)) : t === token) return true;
5168
+ }
5169
+ return unjudgeable;
5170
+ };
5171
+ var validateFiles = (incoming, options) => {
5172
+ const { accept, maxFileSize, maxFileCount, multiple, currentCount } = options;
5173
+ const accepted = [];
5174
+ const rejected = [];
5175
+ const limit = multiple ? maxFileCount : 1;
5176
+ let slots = limit === void 0 ? Number.POSITIVE_INFINITY : Math.max(0, limit - (multiple ? currentCount : 0));
5177
+ for (const file of incoming) {
5178
+ if (!matchesAccept(file, accept)) {
5179
+ rejected.push({ file, code: "file-invalid-type", accept });
5180
+ continue;
5181
+ }
5182
+ if (maxFileSize !== void 0 && file.size > maxFileSize) {
5183
+ rejected.push({ file, code: "file-too-large", maxFileSize });
5184
+ continue;
5185
+ }
5186
+ if (slots <= 0) {
5187
+ rejected.push({ file, code: "too-many-files", maxFileCount: limit });
5188
+ continue;
5189
+ }
5190
+ accepted.push(file);
5191
+ slots -= 1;
5192
+ }
5193
+ return { accepted, rejected };
5194
+ };
5195
+ var Upload = (props) => {
5196
+ const theme = useComponentTheme("Upload");
5197
+ const field = useOptionalFieldContext();
5198
+ const inputRef = useRef(null);
5199
+ const { rootAttrs, rest } = composeRootAttrs(UploadBase, props, theme);
5200
+ const {
5201
+ value,
5202
+ defaultValue,
5203
+ onValueChange,
5204
+ accept,
5205
+ multiple: ownMultiple = DEFAULT_MULTIPLE,
5206
+ directory = DEFAULT_DIRECTORY,
5207
+ maxFileSize,
5208
+ maxFileCount,
5209
+ onFileAccept,
5210
+ onFilesReject,
5211
+ // The status four resolve here, at the destructure site: `??`, so an empty
5212
+ // one is honoured and the support line goes away with its glyph.
5213
+ uploadingLabel = DEFAULT_UPLOADING_LABEL,
5214
+ processingLabel = DEFAULT_PROCESSING_LABEL,
5215
+ completedLabel = DEFAULT_COMPLETED_LABEL2,
5216
+ errorLabel = DEFAULT_ERROR_LABEL2,
5217
+ // The accessible-name three cannot resolve here — see below.
5218
+ progressLabel: ownProgressLabel,
5219
+ downloadLabel: ownDownloadLabel,
5220
+ removeLabel: ownRemoveLabel,
5221
+ disabled: ownDisabled,
5222
+ readOnly: ownReadOnly,
5223
+ invalid: ownInvalid,
5224
+ as,
5225
+ children,
5226
+ ref,
5227
+ ...nativeProps
5228
+ } = rest;
5229
+ const multiple = ownMultiple || directory;
5230
+ const disabled = ownDisabled ?? field?.disabled ?? false;
5231
+ const readOnly = ownReadOnly ?? field?.readOnly ?? false;
5232
+ const invalid = ownInvalid ?? field?.invalid ?? false;
5233
+ const [files = [], setFiles, isControlled] = useControllableState(value, defaultValue ?? [], onValueChange);
5234
+ const latestFiles = useRef(files);
5235
+ latestFiles.current = files;
5236
+ const commitFiles = useCallback(
5237
+ (next) => {
5238
+ if (!isControlled) latestFiles.current = next;
5239
+ setFiles(next);
5240
+ },
5241
+ [isControlled, setFiles]
5242
+ );
5243
+ const processFiles = useCallback(
5244
+ (incoming) => {
5245
+ if (disabled || readOnly) return;
5246
+ const list = Array.from(incoming);
5247
+ if (list.length === 0) return;
5248
+ const current = latestFiles.current;
5249
+ const seen = new Set(current.filter((entry) => entry.file).map((entry) => fileKey(entry.file)));
5250
+ const fresh = list.filter((file) => {
5251
+ const key = fileKey(file);
5252
+ if (seen.has(key)) return false;
5253
+ seen.add(key);
5254
+ return true;
5255
+ });
5256
+ const { accepted, rejected } = validateFiles(fresh, { accept, maxFileSize, maxFileCount, multiple, currentCount: current.length });
5257
+ const added = accepted.map(createUploadFile);
5258
+ if (added.length > 0) {
5259
+ commitFiles(multiple ? [...current, ...added] : added);
5260
+ onFileAccept?.(added);
5261
+ }
5262
+ if (rejected.length > 0) {
5263
+ onFilesReject?.(rejected);
5264
+ }
5265
+ },
5266
+ [disabled, readOnly, accept, maxFileSize, maxFileCount, multiple, commitFiles, onFileAccept, onFilesReject]
5267
+ );
5268
+ const openFileDialog = useCallback(() => {
5269
+ if (disabled || readOnly) return;
5270
+ inputRef.current?.click();
5271
+ }, [disabled, readOnly]);
5272
+ const removeFile = useCallback(
5273
+ (id) => {
5274
+ if (disabled || readOnly) return;
5275
+ commitFiles(latestFiles.current.filter((entry) => entry.id !== id));
5276
+ if (inputRef.current) inputRef.current.value = "";
5277
+ },
5278
+ [disabled, readOnly, commitFiles]
5279
+ );
5280
+ const handleInputChange = (event) => {
5281
+ processFiles(event.target.files ?? []);
5282
+ event.target.value = "";
5283
+ };
5284
+ const progressLabel = ownProgressLabel || DEFAULT_PROGRESS_LABEL;
5285
+ const downloadLabel = ownDownloadLabel || DEFAULT_DOWNLOAD_LABEL;
5286
+ const removeLabel = ownRemoveLabel || DEFAULT_REMOVE_LABEL2;
5287
+ const contextValue = useMemo(
5288
+ () => ({
5289
+ files,
5290
+ disabled,
5291
+ readOnly,
5292
+ invalid,
5293
+ accept,
5294
+ multiple,
5295
+ openFileDialog,
5296
+ removeFile,
5297
+ processFiles,
5298
+ // Keyed by the status it stands for, so a row looks one up rather than
5299
+ // mapping names to states. Built inside this memo rather than one of its
5300
+ // own: it changes exactly when the four strings do, which is when the
5301
+ // context is rebuilt anyway.
5302
+ statusLabels: { uploading: uploadingLabel, processing: processingLabel, completed: completedLabel, error: errorLabel },
5303
+ progressLabel,
5304
+ downloadLabel,
5305
+ removeLabel
5306
+ }),
5307
+ [
5308
+ files,
5309
+ disabled,
5310
+ readOnly,
5311
+ invalid,
5312
+ accept,
5313
+ multiple,
5314
+ openFileDialog,
5315
+ removeFile,
5316
+ processFiles,
5317
+ uploadingLabel,
5318
+ processingLabel,
5319
+ completedLabel,
5320
+ errorLabel,
5321
+ progressLabel,
5322
+ downloadLabel,
5323
+ removeLabel
5324
+ ]
5325
+ );
5326
+ const Component = as ?? "div";
5327
+ const htmlProps = nativeProps;
5328
+ const named = htmlProps["aria-label"] !== void 0 || htmlProps["aria-labelledby"] !== void 0;
5329
+ const groupAttrs = {
5330
+ "id": htmlProps.id ?? field?.fieldId,
5331
+ "role": htmlProps.role ?? "group",
5332
+ "aria-labelledby": named ? htmlProps["aria-labelledby"] : field?.labelId,
5333
+ // Mirrors Spar's own controls: the error message replaces the description
5334
+ // while invalid, rather than both being announced.
5335
+ "aria-describedby": htmlProps["aria-describedby"] ?? (invalid ? field?.errorId : field?.descriptionId)
5336
+ };
5337
+ const stateAttrs = {
5338
+ ...disabled ? { "data-disabled": "" } : null,
5339
+ ...readOnly ? { "data-readonly": "" } : null,
5340
+ ...invalid ? { "data-invalid": "" } : null
5341
+ };
5342
+ return /* @__PURE__ */ jsx(UploadProvider, { value: contextValue, children: /* @__PURE__ */ jsxs(Component, { ...nativeProps, ...groupAttrs, ...rootAttrs, ...stateAttrs, ref, children: [
5343
+ children,
5344
+ /* @__PURE__ */ jsx(
5345
+ InputField$1,
5346
+ {
5347
+ ref: inputRef,
5348
+ type: "file",
5349
+ accept,
5350
+ multiple,
5351
+ ...directory ? { webkitdirectory: "" } : null,
5352
+ disabled: disabled || readOnly,
5353
+ onChange: handleInputChange,
5354
+ hidden: true,
5355
+ tabIndex: -1,
5356
+ "aria-hidden": "true"
5357
+ }
5358
+ )
5359
+ ] }) });
5360
+ };
5361
+ Upload.displayName = "Upload";
5362
+ var UploadActions = (props) => {
5363
+ const theme = useComponentTheme("UploadActions");
5364
+ useUploadContext("Upload.Actions");
5365
+ const { rootAttrs, rest } = composeRootAttrs(UploadActionsBase, props, theme);
5366
+ const { as, children, ref, ...nativeProps } = rest;
5367
+ const Component = as ?? "div";
5368
+ return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
5369
+ };
5370
+ UploadActions.displayName = "Upload.Actions";
5371
+ var dragStateFor = (event, accept) => {
5372
+ const items = event.dataTransfer?.items;
5373
+ if (!items || items.length === 0) return "accept";
5374
+ for (const item of Array.from(items)) {
5375
+ if (item.kind === "file" && !acceptMatchesType(item.type, accept)) return "reject";
5376
+ }
5377
+ return "accept";
5378
+ };
5379
+ var UploadDropzone = (props) => {
5380
+ const theme = useComponentTheme("UploadDropzone");
5381
+ const { disabled, readOnly, accept, processFiles } = useUploadContext("Upload.Dropzone");
5382
+ const { rootAttrs, rest } = composeRootAttrs(UploadDropzoneBase, props, theme);
5383
+ const {
5384
+ onDragEnter: slotOnDragEnter,
5385
+ onDragOver: slotOnDragOver,
5386
+ onDragLeave: slotOnDragLeave,
5387
+ onDrop: slotOnDrop,
5388
+ ...dropzoneRootAttrs
5389
+ } = rootAttrs;
5390
+ const { as, children, ref, onDragEnter, onDragOver, onDragLeave, onDrop, ...nativeProps } = rest;
5391
+ const [dragState, setDragState] = useState(null);
5392
+ const depth = useRef(0);
5393
+ const active = !disabled && !readOnly;
5394
+ const handleDragEnter = (event) => {
5395
+ onDragEnter?.(event);
5396
+ slotOnDragEnter?.(event);
5397
+ event.preventDefault();
5398
+ if (!active) return;
5399
+ depth.current += 1;
5400
+ setDragState(dragStateFor(event, accept));
5401
+ };
5402
+ const handleDragOver = (event) => {
5403
+ onDragOver?.(event);
5404
+ slotOnDragOver?.(event);
5405
+ event.preventDefault();
5406
+ if (!active) return;
5407
+ if (dragState === null) setDragState(dragStateFor(event, accept));
5408
+ };
5409
+ const handleDragLeave = (event) => {
5410
+ onDragLeave?.(event);
5411
+ slotOnDragLeave?.(event);
5412
+ depth.current = Math.max(0, depth.current - 1);
5413
+ if (depth.current === 0) setDragState(null);
5414
+ };
5415
+ const handleDrop = (event) => {
5416
+ onDrop?.(event);
5417
+ slotOnDrop?.(event);
5418
+ event.preventDefault();
5419
+ depth.current = 0;
5420
+ setDragState(null);
5421
+ if (!active) return;
5422
+ if (event.dataTransfer?.files?.length) processFiles(event.dataTransfer.files);
5423
+ };
5424
+ const Component = as ?? "div";
5425
+ return /* @__PURE__ */ jsx(
5426
+ Component,
5427
+ {
5428
+ ...nativeProps,
5429
+ ...dropzoneRootAttrs,
5430
+ "data-drag-state": dragState ?? void 0,
5431
+ onDragEnter: handleDragEnter,
5432
+ onDragOver: handleDragOver,
5433
+ onDragLeave: handleDragLeave,
5434
+ onDrop: handleDrop,
5435
+ ref,
5436
+ children
5437
+ }
5438
+ );
5439
+ };
5440
+ UploadDropzone.displayName = "Upload.Dropzone";
5441
+ var ACTION_ICON = {
5442
+ download: /* @__PURE__ */ jsx(ArrowDownloadIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }),
5443
+ remove: /* @__PURE__ */ jsx(CloseIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" })
5444
+ };
5445
+ var isBuiltInAction = (action) => action === "download" || action === "remove";
5446
+ var siblingRow = (row) => {
5447
+ const next = row.nextElementSibling;
5448
+ if (next?.matches(".tk-upload-item")) return next;
5449
+ const previous = row.previousElementSibling;
5450
+ return previous?.matches(".tk-upload-item") ? previous : null;
5451
+ };
5452
+ var moveFocusOffRow = (button) => {
5453
+ const row = button.closest(".tk-upload-item");
5454
+ const neighbour = row ? siblingRow(row) : null;
5455
+ const target = neighbour?.querySelector('[data-action="remove"]') ?? neighbour?.querySelector('button, [role="button"], a[href]') ?? button.closest(".tk-upload")?.querySelector(".tk-upload-trigger") ?? null;
5456
+ target?.focus();
5457
+ };
5458
+ var DEFAULT_ACTION_APPEARANCE = "outlined";
5459
+ var DEFAULT_ACTION_VARIANT = "neutral";
5460
+ var DEFAULT_ACTION_SIZE = "small";
5461
+ var UploadItemAction = (props) => {
5462
+ const theme = useComponentTheme("UploadItemAction");
5463
+ const { disabled, readOnly, removeFile, downloadLabel, removeLabel } = useUploadContext("Upload.ItemAction");
5464
+ const { item } = useUploadItemContext("Upload.ItemAction");
5465
+ const { rootAttrs, rest } = composeRootAttrs(UploadItemActionBase, props, theme, {
5466
+ // Which action this is: documented for consumers styling one action out of a
5467
+ // row. The look itself comes from Button's variant, not from this hook.
5468
+ stateAttrs: (merged) => ({ "data-action": merged.action })
5469
+ });
5470
+ const { onClick: slotOnClick, ...actionRootAttrs } = rootAttrs;
5471
+ const {
5472
+ as,
5473
+ action,
5474
+ label,
5475
+ children,
5476
+ ref,
5477
+ href,
5478
+ role,
5479
+ onClick,
5480
+ "disabled": ownDisabled,
5481
+ "aria-label": ariaLabel,
5482
+ // An icon button in the row: the anatomy and the look come from Button, so
5483
+ // the appearance knobs live here rather than in the Upload recipe. Applied
5484
+ // at the destructure site (the coding-standards rule) rather than pinned
5485
+ // after the spread, so they layer as defaults — a theme's
5486
+ // `UploadItemAction.defaultProps` is already merged into `rest` by
5487
+ // `composeRootAttrs`, and a value pinned after the spread would silently
5488
+ // outrank it.
5489
+ "appearance": appearance = DEFAULT_ACTION_APPEARANCE,
5490
+ "variant": variant = DEFAULT_ACTION_VARIANT,
5491
+ "size": size = DEFAULT_ACTION_SIZE,
5492
+ ...buttonProps
5493
+ } = rest;
5494
+ const isDisabled = disabled || ownDisabled === true;
5495
+ if (action === "remove" && readOnly) return null;
5496
+ const isButton = (as ?? "button") === "button";
5497
+ const hasHref = !isButton && href !== void 0;
5498
+ if (action === "download" && !canSaveUploadFile(item) && !hasHref && !onClick && !slotOnClick) return null;
5499
+ const nameTemplate = label || (action === "download" ? downloadLabel : action === "remove" ? removeLabel : void 0);
5500
+ const handleClick = (event) => {
5501
+ const button = event.currentTarget;
5502
+ const preventedOnEntry = event.defaultPrevented;
5503
+ onClick?.(event);
5504
+ slotOnClick?.(event);
5505
+ if (isConsumerVeto(event, preventedOnEntry)) return;
5506
+ if (action === "remove") {
5507
+ moveFocusOffRow(button);
5508
+ removeFile(item.id);
5509
+ } else if (action === "download" && !hasHref) saveUploadFile(item);
5510
+ };
5511
+ const renderedHref = isDisabled ? void 0 : href;
5512
+ const resolvedRole = role ?? (!isButton && as === "a" && renderedHref !== void 0 ? "link" : void 0);
5513
+ const roleProps = resolvedRole !== void 0 ? { role: resolvedRole } : void 0;
5514
+ return /* @__PURE__ */ jsx(
5515
+ Button,
5516
+ {
5517
+ ...buttonProps,
5518
+ ...isButton ? null : { href: renderedHref },
5519
+ ...roleProps,
5520
+ ...actionRootAttrs,
5521
+ as,
5522
+ appearance,
5523
+ variant,
5524
+ size,
5525
+ disabled: isDisabled,
5526
+ "aria-label": ariaLabel ?? (nameTemplate ? formatFileLabel(nameTemplate, fileName(item)) : void 0),
5527
+ onClick: handleClick,
5528
+ startContent: isRenderableNode(children) ? children : isBuiltInAction(action) ? ACTION_ICON[action] : null,
5529
+ ref
5530
+ }
5531
+ );
5532
+ };
5533
+ UploadItemAction.displayName = "Upload.ItemAction";
5534
+ var UploadItemActions = (props) => {
5535
+ const theme = useComponentTheme("UploadItemActions");
5536
+ const { readOnly } = useUploadContext("Upload.ItemActions");
5537
+ const { item } = useUploadItemContext("Upload.ItemActions");
5538
+ const { rootAttrs, rest } = composeRootAttrs(UploadItemActionsBase, props, theme);
5539
+ const { as, children, ref, ...nativeProps } = rest;
5540
+ const Component = as ?? "div";
5541
+ const hasChildren = isRenderableNode(children);
5542
+ const showDownload = canSaveUploadFile(item);
5543
+ const showRemove = !readOnly;
5544
+ if (!hasChildren && !showDownload && !showRemove) return null;
5545
+ return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: hasChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
5546
+ showDownload && /* @__PURE__ */ jsx(UploadItemAction, { action: "download" }),
5547
+ showRemove && /* @__PURE__ */ jsx(UploadItemAction, { action: "remove" })
5548
+ ] }) });
5549
+ };
5550
+ UploadItemActions.displayName = "Upload.ItemActions";
5551
+ var statusLabelOf = (status, statusLabels) => status === "idle" ? null : statusLabels[status];
5552
+ var statusIcon = (status) => {
5553
+ switch (status) {
5554
+ case "uploading":
5555
+ case "processing":
5556
+ return /* @__PURE__ */ jsx(Spinner, { size: "small", appearance: "rounded", variant: "info", "aria-hidden": "true" });
5557
+ case "completed":
5558
+ return /* @__PURE__ */ jsx(CheckCircleIconFilledRounded, { "aria-hidden": "true", focusable: "false" });
5559
+ case "error":
5560
+ return /* @__PURE__ */ jsx(CloseCircleIconFilledRounded, { "aria-hidden": "true", focusable: "false" });
5561
+ default:
5562
+ return null;
5563
+ }
5564
+ };
5565
+ var UploadItemContent = (props) => {
5566
+ const theme = useComponentTheme("UploadItemContent");
5567
+ const { item } = useUploadItemContext("Upload.ItemContent");
5568
+ const { statusLabels, progressLabel } = useUploadContext("Upload.ItemContent");
5569
+ const { rootAttrs, rest } = composeRootAttrs(UploadItemContentBase, props, theme);
5570
+ const { as, children, ref, ...nativeProps } = rest;
5571
+ const slotAttrs = (slot) => buildSlotAttrs(UploadItemContentBase.getSlotProps(slot), slot, {
5572
+ themeSlotProps: theme?.slotProps,
5573
+ themeClassNames: theme?.classNames,
5574
+ instanceSlotProps: props.slotProps,
5575
+ instanceClassNames: props.classNames
5576
+ });
5577
+ const Component = as ?? "div";
5578
+ const name = fileName(item);
5579
+ const size = fileSize(item);
5580
+ const status = fileStatus(item);
5581
+ const icon = statusIcon(status);
5582
+ const statusLabel = statusLabelOf(status, statusLabels);
5583
+ const statusText = status === "error" ? item.error ?? statusLabel : statusLabel;
5584
+ const defaultContent = /* @__PURE__ */ jsxs(Fragment, { children: [
5585
+ /* @__PURE__ */ jsx("span", { ...slotAttrs("name"), children: name }),
5586
+ size !== void 0 && /* @__PURE__ */ jsx("span", { ...slotAttrs("size"), children: formatFileSize(size) }),
5587
+ icon && statusText ? (
5588
+ // Icon plus its label, as one line: the glyph is decorative and the
5589
+ // text carries the meaning, so nothing here needs an aria-label of its
5590
+ // own. `title` keeps a long failure message reachable in full while the
5591
+ // line itself stays one row high.
5592
+ //
5593
+ // No text, no line — a status label emptied at the root takes the glyph
5594
+ // with it. The alternative is a lone `aria-hidden` icon: a mark that
5595
+ // says something to sighted users and nothing to anyone else, which is
5596
+ // the split this line exists to avoid.
5597
+ /* @__PURE__ */ jsxs("span", { ...slotAttrs("status"), title: status === "error" ? item.error : void 0, children: [
5598
+ icon,
5599
+ statusText
5600
+ ] })
5601
+ ) : null,
5602
+ status === "uploading" && typeof item.progress === "number" && // The bar is the *determinate* face of uploading — it only appears once
5603
+ // there is a percentage to show. Without one, the spinner and its
5604
+ // "Uploading…" label above are already the indeterminate indicator, so
5605
+ // a second (looping) bar would say the same thing twice. `processing`
5606
+ // never gets one: a server-side step reports that it is running, not
5607
+ // how far along it is.
5608
+ /* @__PURE__ */ jsx("div", { ...slotAttrs("progress"), children: /* @__PURE__ */ jsx(Progress2, { value: item.progress, size: "small", "aria-label": formatFileLabel(progressLabel, name) }) })
5609
+ ] });
5610
+ return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: isRenderableNode(children) ? children : defaultContent });
5611
+ };
5612
+ UploadItemContent.displayName = "Upload.ItemContent";
5613
+ var FileExcelIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5614
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5615
+ /* @__PURE__ */ jsx(
5616
+ "path",
5617
+ {
5618
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5619
+ stroke: "#CACFD8",
5620
+ strokeWidth: "1.875"
5621
+ }
5622
+ ),
5623
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#136C34" }),
5624
+ /* @__PURE__ */ jsx(
5625
+ "path",
5626
+ {
5627
+ d: "M6.76722 29L9.49122 24.692L6.91122 20.6H8.51922L10.4572 23.702L12.5272 20.6H14.0872L11.3752 24.728L14.1652 29H12.5512L10.4032 25.694L8.33322 29H6.76722ZM15.5803 29V20.6H16.9243V27.764H20.5843V29H15.5803ZM24.8436 29.18C24.2636 29.18 23.6956 29.098 23.1396 28.934C22.5876 28.766 22.1216 28.526 21.7416 28.214L22.4016 27.188C22.6016 27.36 22.8336 27.508 23.0976 27.632C23.3656 27.756 23.6496 27.852 23.9496 27.92C24.2496 27.984 24.5496 28.016 24.8496 28.016C25.3976 28.016 25.8396 27.912 26.1756 27.704C26.5156 27.496 26.6856 27.192 26.6856 26.792C26.6856 26.492 26.5696 26.238 26.3376 26.03C26.1096 25.822 25.6856 25.63 25.0656 25.454L24.2016 25.202C23.4096 24.974 22.8316 24.672 22.4676 24.296C22.1076 23.92 21.9276 23.452 21.9276 22.892C21.9276 22.52 22.0016 22.184 22.1496 21.884C22.3016 21.584 22.5136 21.324 22.7856 21.104C23.0616 20.884 23.3856 20.716 23.7576 20.6C24.1296 20.484 24.5376 20.426 24.9816 20.426C25.5456 20.426 26.0696 20.508 26.5536 20.672C27.0376 20.836 27.4376 21.056 27.7536 21.332L27.0696 22.328C26.8976 22.172 26.6956 22.038 26.4636 21.926C26.2356 21.814 25.9896 21.728 25.7256 21.668C25.4616 21.608 25.1936 21.578 24.9216 21.578C24.5856 21.578 24.2876 21.628 24.0276 21.728C23.7716 21.824 23.5716 21.964 23.4276 22.148C23.2836 22.332 23.2116 22.556 23.2116 22.82C23.2116 23.012 23.2596 23.18 23.3556 23.324C23.4516 23.468 23.6156 23.6 23.8476 23.72C24.0836 23.836 24.4076 23.954 24.8196 24.074L25.7316 24.344C26.5076 24.572 27.0756 24.87 27.4356 25.238C27.7956 25.602 27.9756 26.076 27.9756 26.66C27.9756 27.16 27.8516 27.6 27.6036 27.98C27.3596 28.356 27.0036 28.65 26.5356 28.862C26.0676 29.074 25.5036 29.18 24.8436 29.18Z",
5628
+ fill: "white"
5629
+ }
5630
+ )
5631
+ ] });
5632
+ var FileJpgIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5633
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5634
+ /* @__PURE__ */ jsx(
5635
+ "path",
5636
+ {
5637
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5638
+ stroke: "#CACFD8",
5639
+ strokeWidth: "1.875"
5640
+ }
5641
+ ),
5642
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#EAB308" }),
5643
+ /* @__PURE__ */ jsx(
5644
+ "path",
5645
+ {
5646
+ d: "M8.38769 29.18C8.01169 29.18 7.65369 29.13 7.31369 29.03C6.97769 28.934 6.66169 28.798 6.36569 28.622L6.80369 27.518C7.03969 27.654 7.27369 27.76 7.50569 27.836C7.74169 27.908 7.97969 27.944 8.21969 27.944C8.72369 27.944 9.10969 27.824 9.37769 27.584C9.64569 27.344 9.77969 26.954 9.77969 26.414V20.6H11.1237V26.636C11.1237 27.148 11.0177 27.596 10.8057 27.98C10.5937 28.36 10.2837 28.656 9.87569 28.868C9.46769 29.076 8.97169 29.18 8.38769 29.18ZM13.2951 29V20.6H16.3371C16.9331 20.6 17.4591 20.704 17.9151 20.912C18.3751 21.116 18.7351 21.412 18.9951 21.8C19.2551 22.184 19.3851 22.646 19.3851 23.186C19.3851 23.742 19.2651 24.212 19.0251 24.596C18.7851 24.976 18.4351 25.266 17.9751 25.466C17.5191 25.662 16.9631 25.76 16.3071 25.76H14.6391V29H13.2951ZM14.6391 24.608H16.3251C16.8691 24.608 17.2911 24.494 17.5911 24.266C17.8911 24.034 18.0411 23.684 18.0411 23.216C18.0411 22.752 17.8871 22.396 17.5791 22.148C17.2711 21.9 16.8571 21.776 16.3371 21.776H14.6391V24.608ZM25.0706 29.18C24.4026 29.18 23.7846 29.078 23.2166 28.874C22.6486 28.67 22.1506 28.378 21.7226 27.998C21.2986 27.614 20.9686 27.154 20.7326 26.618C20.4966 26.082 20.3786 25.48 20.3786 24.812C20.3786 24.148 20.4926 23.548 20.7206 23.012C20.9486 22.472 21.2666 22.01 21.6746 21.626C22.0866 21.238 22.5686 20.94 23.1206 20.732C23.6766 20.524 24.2826 20.42 24.9386 20.42C25.2426 20.42 25.5506 20.444 25.8626 20.492C26.1746 20.54 26.4806 20.62 26.7806 20.732C27.0846 20.84 27.3726 20.988 27.6446 21.176L27.0566 22.232C26.7526 22.04 26.4226 21.896 26.0666 21.8C25.7146 21.704 25.3506 21.656 24.9746 21.656C24.4866 21.656 24.0446 21.73 23.6486 21.878C23.2526 22.022 22.9146 22.232 22.6346 22.508C22.3546 22.78 22.1386 23.11 21.9866 23.498C21.8386 23.886 21.7646 24.322 21.7646 24.806C21.7646 25.486 21.9086 26.064 22.1966 26.54C22.4846 27.016 22.8806 27.378 23.3846 27.626C23.8926 27.87 24.4766 27.992 25.1366 27.992C25.4606 27.992 25.7526 27.962 26.0126 27.902C26.2726 27.838 26.4826 27.766 26.6426 27.686V25.658H24.7346V24.542H27.8486V28.466C27.6286 28.614 27.3526 28.742 27.0206 28.85C26.6926 28.958 26.3526 29.04 26.0006 29.096C25.6526 29.152 25.3426 29.18 25.0706 29.18Z",
5647
+ fill: "white"
5648
+ }
5649
+ )
5650
+ ] });
5651
+ var FileMp4Icon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5652
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5653
+ /* @__PURE__ */ jsx(
5654
+ "path",
5655
+ {
5656
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5657
+ stroke: "#CACFD8",
5658
+ strokeWidth: "1.875"
5659
+ }
5660
+ ),
5661
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#3B82F6" }),
5662
+ /* @__PURE__ */ jsx(
5663
+ "path",
5664
+ {
5665
+ d: "M5.70138 29V20.6H7.00338L10.4294 26.174L9.90738 26.18L13.2074 20.6H14.4854V29H13.1714L13.1894 22.388L13.4474 22.478L10.5914 27.188H9.60738L6.69738 22.478L6.91338 22.388L6.93138 29H5.70138ZM16.6701 29V20.6H19.7121C20.3081 20.6 20.8341 20.704 21.2901 20.912C21.7501 21.116 22.1101 21.412 22.3701 21.8C22.6301 22.184 22.7601 22.646 22.7601 23.186C22.7601 23.742 22.6401 24.212 22.4001 24.596C22.1601 24.976 21.8101 25.266 21.3501 25.466C20.8941 25.662 20.3381 25.76 19.6821 25.76H18.0141V29H16.6701ZM18.0141 24.608H19.7001C20.2441 24.608 20.6661 24.494 20.9661 24.266C21.2661 24.034 21.4161 23.684 21.4161 23.216C21.4161 22.752 21.2621 22.396 20.9541 22.148C20.6461 21.9 20.2321 21.776 19.7121 21.776H18.0141V24.608ZM27.5756 29V27.278H23.3936V26.264L26.4056 20.6H27.7736L24.8036 26.156H27.5756V24.29H28.7336V26.156H30.0296V27.278H28.7336V29H27.5756Z",
5666
+ fill: "white"
5667
+ }
5668
+ )
5669
+ ] });
5670
+ var FilePdfIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5671
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5672
+ /* @__PURE__ */ jsx(
5673
+ "path",
5674
+ {
5675
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5676
+ stroke: "#CACFD8",
5677
+ strokeWidth: "1.875"
5678
+ }
5679
+ ),
5680
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#C90019" }),
5681
+ /* @__PURE__ */ jsx(
5682
+ "path",
5683
+ {
5684
+ d: "M7.03145 29V20.6H10.0735C10.6695 20.6 11.1955 20.704 11.6515 20.912C12.1115 21.116 12.4715 21.412 12.7315 21.8C12.9915 22.184 13.1215 22.646 13.1215 23.186C13.1215 23.742 13.0015 24.212 12.7615 24.596C12.5215 24.976 12.1715 25.266 11.7115 25.466C11.2555 25.662 10.6995 25.76 10.0435 25.76H8.37545V29H7.03145ZM8.37545 24.608H10.0615C10.6055 24.608 11.0275 24.494 11.3275 24.266C11.6275 24.034 11.7775 23.684 11.7775 23.216C11.7775 22.752 11.6235 22.396 11.3155 22.148C11.0075 21.9 10.5935 21.776 10.0735 21.776H8.37545V24.608ZM14.6369 29V20.6H17.2649C18.1009 20.6 18.8389 20.78 19.4789 21.14C20.1189 21.496 20.6189 21.99 20.9789 22.622C21.3429 23.254 21.5249 23.982 21.5249 24.806C21.5249 25.418 21.4209 25.982 21.2129 26.498C21.0089 27.01 20.7169 27.452 20.3369 27.824C19.9569 28.196 19.5069 28.486 18.9869 28.694C18.4669 28.898 17.8929 29 17.2649 29H14.6369ZM15.9809 27.746H17.1029C17.5549 27.746 17.9649 27.68 18.3329 27.548C18.7049 27.412 19.0229 27.216 19.2869 26.96C19.5549 26.704 19.7609 26.396 19.9049 26.036C20.0489 25.672 20.1209 25.262 20.1209 24.806C20.1209 24.194 19.9949 23.668 19.7429 23.228C19.4949 22.784 19.1449 22.444 18.6929 22.208C18.2409 21.968 17.7109 21.848 17.1029 21.848H15.9809V27.746ZM23.1916 29V20.6H28.3816V21.83H24.5356V24.248H28.0216V25.448H24.5356V29H23.1916Z",
5685
+ fill: "white"
5686
+ }
5687
+ )
5688
+ ] });
5689
+ var FilePngIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5690
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5691
+ /* @__PURE__ */ jsx(
5692
+ "path",
5693
+ {
5694
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5695
+ stroke: "#CACFD8",
5696
+ strokeWidth: "1.875"
5697
+ }
5698
+ ),
5699
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#A47D06" }),
5700
+ /* @__PURE__ */ jsx(
5701
+ "path",
5702
+ {
5703
+ d: "M5.77169 29V20.6H8.81369C9.40969 20.6 9.93569 20.704 10.3917 20.912C10.8517 21.116 11.2117 21.412 11.4717 21.8C11.7317 22.184 11.8617 22.646 11.8617 23.186C11.8617 23.742 11.7417 24.212 11.5017 24.596C11.2617 24.976 10.9117 25.266 10.4517 25.466C9.99569 25.662 9.43969 25.76 8.78369 25.76H7.11569V29H5.77169ZM7.11569 24.608H8.80169C9.34569 24.608 9.76769 24.494 10.0677 24.266C10.3677 24.034 10.5177 23.684 10.5177 23.216C10.5177 22.752 10.3637 22.396 10.0557 22.148C9.74769 21.9 9.33369 21.776 8.81369 21.776H7.11569V24.608ZM13.3772 29V20.6H14.6612L18.9032 26.702V20.6H20.2112V29H18.9272L14.6912 22.826V29H13.3772ZM26.5706 29.18C25.9026 29.18 25.2846 29.078 24.7166 28.874C24.1486 28.67 23.6506 28.378 23.2226 27.998C22.7986 27.614 22.4686 27.154 22.2326 26.618C21.9966 26.082 21.8786 25.48 21.8786 24.812C21.8786 24.148 21.9926 23.548 22.2206 23.012C22.4486 22.472 22.7666 22.01 23.1746 21.626C23.5866 21.238 24.0686 20.94 24.6206 20.732C25.1766 20.524 25.7826 20.42 26.4386 20.42C26.7426 20.42 27.0506 20.444 27.3626 20.492C27.6746 20.54 27.9806 20.62 28.2806 20.732C28.5846 20.84 28.8726 20.988 29.1446 21.176L28.5566 22.232C28.2526 22.04 27.9226 21.896 27.5666 21.8C27.2146 21.704 26.8506 21.656 26.4746 21.656C25.9866 21.656 25.5446 21.73 25.1486 21.878C24.7526 22.022 24.4146 22.232 24.1346 22.508C23.8546 22.78 23.6386 23.11 23.4866 23.498C23.3386 23.886 23.2646 24.322 23.2646 24.806C23.2646 25.486 23.4086 26.064 23.6966 26.54C23.9846 27.016 24.3806 27.378 24.8846 27.626C25.3926 27.87 25.9766 27.992 26.6366 27.992C26.9606 27.992 27.2526 27.962 27.5126 27.902C27.7726 27.838 27.9826 27.766 28.1426 27.686V25.658H26.2346V24.542H29.3486V28.466C29.1286 28.614 28.8526 28.742 28.5206 28.85C28.1926 28.958 27.8526 29.04 27.5006 29.096C27.1526 29.152 26.8426 29.18 26.5706 29.18Z",
5704
+ fill: "white"
5705
+ }
5706
+ )
5707
+ ] });
5708
+ var FilePowerpointIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5709
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5710
+ /* @__PURE__ */ jsx(
5711
+ "path",
5712
+ {
5713
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5714
+ stroke: "#CACFD8",
5715
+ strokeWidth: "1.875"
5716
+ }
5717
+ ),
5718
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#FF6259" }),
5719
+ /* @__PURE__ */ jsx(
5720
+ "path",
5721
+ {
5722
+ d: "M3.60958 29V20.6H6.65158C7.24758 20.6 7.77358 20.704 8.22958 20.912C8.68958 21.116 9.04958 21.412 9.30958 21.8C9.56958 22.184 9.69958 22.646 9.69958 23.186C9.69958 23.742 9.57958 24.212 9.33958 24.596C9.09958 24.976 8.74958 25.266 8.28958 25.466C7.83358 25.662 7.27758 25.76 6.62158 25.76H4.95358V29H3.60958ZM4.95358 24.608H6.63958C7.18358 24.608 7.60558 24.494 7.90558 24.266C8.20558 24.034 8.35558 23.684 8.35558 23.216C8.35558 22.752 8.20158 22.396 7.89358 22.148C7.58558 21.9 7.17158 21.776 6.65158 21.776H4.95358V24.608ZM11.215 29V20.6H14.257C14.853 20.6 15.379 20.704 15.835 20.912C16.295 21.116 16.655 21.412 16.915 21.8C17.175 22.184 17.305 22.646 17.305 23.186C17.305 23.742 17.185 24.212 16.945 24.596C16.705 24.976 16.355 25.266 15.895 25.466C15.439 25.662 14.883 25.76 14.227 25.76H12.559V29H11.215ZM12.559 24.608H14.245C14.789 24.608 15.211 24.494 15.511 24.266C15.811 24.034 15.961 23.684 15.961 23.216C15.961 22.752 15.807 22.396 15.499 22.148C15.191 21.9 14.777 21.776 14.257 21.776H12.559V24.608ZM20.4165 29V21.83H18.0525V20.6H24.1245V21.83H21.7605V29H20.4165ZM24.7614 29L27.4854 24.692L24.9054 20.6H26.5134L28.4514 23.702L30.5214 20.6H32.0814L29.3694 24.728L32.1594 29H30.5454L28.3974 25.694L26.3274 29H24.7614Z",
5723
+ fill: "white"
5724
+ }
5725
+ )
5726
+ ] });
5727
+ var FileTextIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5728
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5729
+ /* @__PURE__ */ jsx(
5730
+ "path",
5731
+ {
5732
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5733
+ stroke: "#CACFD8",
5734
+ strokeWidth: "1.875"
5735
+ }
5736
+ ),
5737
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#3B82F6" }),
5738
+ /* @__PURE__ */ jsx(
5739
+ "path",
5740
+ {
5741
+ d: "M9.45363 29V21.83H7.08963V20.6H13.1616V21.83H10.7976V29H9.45363ZM13.7985 29L16.5225 24.692L13.9425 20.6H15.5505L17.4885 23.702L19.5585 20.6H21.1185L18.4065 24.728L21.1965 29H19.5825L17.4345 25.694L15.3645 29H13.7985ZM24.2075 29V21.83H21.8435V20.6H27.9155V21.83H25.5515V29H24.2075Z",
5742
+ fill: "white"
5743
+ }
5744
+ )
5745
+ ] });
5746
+ var FileWordIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5747
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5748
+ /* @__PURE__ */ jsx(
5749
+ "path",
5750
+ {
5751
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5752
+ stroke: "#CACFD8",
5753
+ strokeWidth: "1.875"
5754
+ }
5755
+ ),
5756
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#295BAC" }),
5757
+ /* @__PURE__ */ jsx(
5758
+ "path",
5759
+ {
5760
+ d: "M5.02755 29V20.6H7.65555C8.49155 20.6 9.22955 20.78 9.86955 21.14C10.5095 21.496 11.0095 21.99 11.3695 22.622C11.7335 23.254 11.9155 23.982 11.9155 24.806C11.9155 25.418 11.8115 25.982 11.6035 26.498C11.3995 27.01 11.1075 27.452 10.7275 27.824C10.3475 28.196 9.89755 28.486 9.37755 28.694C8.85755 28.898 8.28355 29 7.65555 29H5.02755ZM6.37155 27.746H7.49355C7.94555 27.746 8.35555 27.68 8.72355 27.548C9.09555 27.412 9.41355 27.216 9.67755 26.96C9.94555 26.704 10.1515 26.396 10.2955 26.036C10.4395 25.672 10.5115 25.262 10.5115 24.806C10.5115 24.194 10.3855 23.668 10.1335 23.228C9.88555 22.784 9.53555 22.444 9.08355 22.208C8.63155 21.968 8.10155 21.848 7.49355 21.848H6.37155V27.746ZM17.5994 29.18C16.9674 29.18 16.3814 29.07 15.8414 28.85C15.3054 28.626 14.8374 28.316 14.4374 27.92C14.0414 27.524 13.7314 27.06 13.5074 26.528C13.2874 25.996 13.1774 25.42 13.1774 24.8C13.1774 24.176 13.2874 23.598 13.5074 23.066C13.7314 22.534 14.0414 22.07 14.4374 21.674C14.8374 21.278 15.3054 20.97 15.8414 20.75C16.3814 20.53 16.9674 20.42 17.5994 20.42C18.2274 20.42 18.8094 20.532 19.3454 20.756C19.8814 20.98 20.3494 21.292 20.7494 21.692C21.1494 22.092 21.4594 22.558 21.6794 23.09C21.9034 23.618 22.0154 24.188 22.0154 24.8C22.0154 25.42 21.9034 25.996 21.6794 26.528C21.4594 27.06 21.1494 27.524 20.7494 27.92C20.3494 28.316 19.8814 28.626 19.3454 28.85C18.8094 29.07 18.2274 29.18 17.5994 29.18ZM17.5994 27.908C18.0234 27.908 18.4174 27.836 18.7814 27.692C19.1494 27.544 19.4694 27.334 19.7414 27.062C20.0134 26.786 20.2254 26.458 20.3774 26.078C20.5334 25.694 20.6114 25.268 20.6114 24.8C20.6114 24.172 20.4774 23.626 20.2094 23.162C19.9454 22.694 19.5854 22.332 19.1294 22.076C18.6734 21.82 18.1634 21.692 17.5994 21.692C17.1754 21.692 16.7794 21.766 16.4114 21.914C16.0474 22.058 15.7274 22.266 15.4514 22.538C15.1794 22.81 14.9654 23.138 14.8094 23.522C14.6574 23.902 14.5814 24.328 14.5814 24.8C14.5814 25.428 14.7154 25.976 14.9834 26.444C15.2514 26.908 15.6114 27.268 16.0634 27.524C16.5194 27.78 17.0314 27.908 17.5994 27.908ZM27.6173 29.18C26.7453 29.18 25.9833 29 25.3313 28.64C24.6793 28.28 24.1713 27.772 23.8073 27.116C23.4473 26.456 23.2673 25.686 23.2673 24.806C23.2673 24.166 23.3733 23.58 23.5853 23.048C23.8013 22.512 24.1033 22.048 24.4913 21.656C24.8833 21.264 25.3453 20.96 25.8773 20.744C26.4093 20.528 26.9933 20.42 27.6293 20.42C28.2693 20.42 28.8213 20.5 29.2853 20.66C29.7533 20.82 30.1613 21.048 30.5093 21.344L29.8133 22.442C29.5493 22.198 29.2413 22.016 28.8893 21.896C28.5373 21.776 28.1493 21.716 27.7253 21.716C27.2573 21.716 26.8353 21.788 26.4593 21.932C26.0833 22.076 25.7613 22.282 25.4933 22.55C25.2293 22.814 25.0253 23.136 24.8813 23.516C24.7413 23.892 24.6713 24.318 24.6713 24.794C24.6713 25.442 24.7973 25.996 25.0493 26.456C25.3053 26.916 25.6653 27.268 26.1293 27.512C26.5973 27.752 27.1493 27.872 27.7853 27.872C28.2093 27.872 28.6173 27.81 29.0093 27.686C29.4053 27.558 29.7753 27.352 30.1193 27.068L30.7433 28.202C30.3393 28.518 29.8773 28.76 29.3573 28.928C28.8413 29.096 28.2613 29.18 27.6173 29.18Z",
5761
+ fill: "white"
5762
+ }
5763
+ )
5764
+ ] });
5765
+ var FileZipIcon = (props) => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", ...props, children: [
5766
+ /* @__PURE__ */ jsx("path", { d: "M28.75 1.25V9.58333C28.75 10.5042 29.4958 11.25 30.4167 11.25H38.75", stroke: "#CACFD8", strokeWidth: "1.875" }),
5767
+ /* @__PURE__ */ jsx(
5768
+ "path",
5769
+ {
5770
+ d: "M15 0.9375H26.8936C28.634 0.937541 30.3035 1.6287 31.5342 2.85938L37.1406 8.46582C38.3713 9.69649 39.0625 11.366 39.0625 13.1064V32.5C39.0625 36.1244 36.1244 39.0625 32.5 39.0625H15C11.3756 39.0625 8.4375 36.1244 8.4375 32.5V7.5C8.4375 3.87563 11.3756 0.9375 15 0.9375Z",
5771
+ stroke: "#CACFD8",
5772
+ strokeWidth: "1.875"
5773
+ }
5774
+ ),
5775
+ /* @__PURE__ */ jsx("rect", { y: "15", width: "35", height: "20", rx: "5", fill: "#79889A" }),
5776
+ /* @__PURE__ */ jsx(
5777
+ "path",
5778
+ {
5779
+ d: "M8.97569 29V27.878L13.2777 21.83H9.11369V20.6H14.8977V21.716L10.6137 27.764H14.9337V29H8.97569ZM16.5178 29V20.6H17.8618V29H16.5178ZM20.0568 29V20.6H23.0988C23.6948 20.6 24.2208 20.704 24.6768 20.912C25.1368 21.116 25.4968 21.412 25.7568 21.8C26.0168 22.184 26.1468 22.646 26.1468 23.186C26.1468 23.742 26.0268 24.212 25.7868 24.596C25.5468 24.976 25.1968 25.266 24.7368 25.466C24.2808 25.662 23.7248 25.76 23.0688 25.76H21.4008V29H20.0568ZM21.4008 24.608H23.0868C23.6308 24.608 24.0528 24.494 24.3528 24.266C24.6528 24.034 24.8028 23.684 24.8028 23.216C24.8028 22.752 24.6488 22.396 24.3408 22.148C24.0328 21.9 23.6188 21.776 23.0988 21.776H21.4008V24.608Z",
5780
+ fill: "white"
5781
+ }
5782
+ )
5783
+ ] });
5784
+ var FILE_ICONS = {
5785
+ excel: FileExcelIcon,
5786
+ jpg: FileJpgIcon,
5787
+ mp4: FileMp4Icon,
5788
+ pdf: FilePdfIcon,
5789
+ png: FilePngIcon,
5790
+ powerpoint: FilePowerpointIcon,
5791
+ text: FileTextIcon,
5792
+ word: FileWordIcon,
5793
+ zip: FileZipIcon
5794
+ };
5795
+ var NO_BROKEN_SRCS = [];
5796
+ var useImageObjectUrl = (file, type) => {
5797
+ const [objectUrl, setObjectUrl] = useState(null);
5798
+ useEffect(() => {
5799
+ const canCreate = typeof URL !== "undefined" && typeof URL.createObjectURL === "function";
5800
+ if (file && isImageType(type) && canCreate) {
5801
+ const url = URL.createObjectURL(file);
5802
+ setObjectUrl(url);
5803
+ return () => URL.revokeObjectURL(url);
5804
+ }
5805
+ setObjectUrl(null);
5806
+ }, [file, type]);
5807
+ return objectUrl;
5808
+ };
5809
+ var UploadItemPreview = (props) => {
5810
+ const theme = useComponentTheme("UploadItemPreview");
5811
+ const { item } = useUploadItemContext("Upload.ItemPreview");
5812
+ const { rootAttrs, rest } = composeRootAttrs(UploadItemPreviewBase, props, theme);
5813
+ const { as, children, ref, ...nativeProps } = rest;
5814
+ const hasChildren = isRenderableNode(children);
5815
+ const sourceKey = `${item.id}\0${item.thumbUrl ?? ""}\0${item.url ?? ""}\0${item.file ? fileKey(item.file) : ""}`;
5816
+ const [broken, setBroken] = useState({ key: sourceKey, srcs: NO_BROKEN_SRCS });
5817
+ const brokenSrcs = broken.key === sourceKey ? broken.srcs : NO_BROKEN_SRCS;
5818
+ const markBroken = (src2) => setBroken((previous) => {
5819
+ if (previous.key !== sourceKey) return { key: sourceKey, srcs: [src2] };
5820
+ if (previous.srcs.includes(src2)) return previous;
5821
+ return { key: sourceKey, srcs: [...previous.srcs, src2] };
5822
+ });
5823
+ const thumbUsable = item.thumbUrl !== void 0 && !brokenSrcs.includes(item.thumbUrl);
5824
+ const objectUrl = useImageObjectUrl(hasChildren || thumbUsable ? void 0 : item.file, fileType(item));
5825
+ const slotAttrs = (slot) => buildSlotAttrs(UploadItemPreviewBase.getSlotProps(slot), slot, {
5826
+ themeSlotProps: theme?.slotProps,
5827
+ themeClassNames: theme?.classNames,
5828
+ instanceSlotProps: props.slotProps,
5829
+ instanceClassNames: props.classNames
5830
+ });
5831
+ const Component = as ?? "span";
5832
+ const remoteImage = item.url && isImageType(fileType(item)) ? item.url : void 0;
5833
+ const src = [item.thumbUrl, objectUrl ?? void 0, remoteImage].find((candidate) => candidate !== void 0 && !brokenSrcs.includes(candidate));
5834
+ const iconName = fileIconName(item);
5835
+ const FileIcon = iconName ? FILE_ICONS[iconName] : void 0;
5836
+ const { onError: slotOnError, ...imageAttrs } = slotAttrs("image");
5837
+ const defaultContent = src ? (
5838
+ // The defaults sit ahead of the slot layer so `slotProps.image` can still
5839
+ // override them — a consumer wanting a real `alt`, or eager loading for an
5840
+ // above-the-fold row, should not have to fight the part for it.
5841
+ /* @__PURE__ */ jsx(
5842
+ "img",
5843
+ {
5844
+ alt: "",
5845
+ loading: "lazy",
5846
+ decoding: "async",
5847
+ ...imageAttrs,
5848
+ src,
5849
+ onError: (event) => {
5850
+ markBroken(src);
5851
+ slotOnError?.(event);
5852
+ }
5853
+ }
5854
+ )
5855
+ ) : FileIcon ? /* @__PURE__ */ jsx(FileIcon, { ...slotAttrs("icon") }) : /* @__PURE__ */ jsx("span", { ...slotAttrs("extension"), "aria-hidden": "true", children: nameExtension(fileName(item)) || "FILE" });
5856
+ return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: hasChildren ? children : defaultContent });
5857
+ };
5858
+ UploadItemPreview.displayName = "Upload.ItemPreview";
5859
+ var flattenRowChildren = (children, out = []) => {
5860
+ Children.forEach(children, (child) => {
5861
+ if (isValidElement(child) && child.type === Fragment$1) flattenRowChildren(child.props.children, out);
5862
+ else out.push(child);
5863
+ });
5864
+ return out;
5865
+ };
5866
+ var UploadItem = (props) => {
5867
+ const theme = useComponentTheme("UploadItem");
5868
+ const { rootAttrs, rest } = composeRootAttrs(UploadItemBase, props, theme);
5869
+ const { as, file: item, children, ref, ...nativeProps } = rest;
5870
+ const Component = as ?? "div";
5871
+ const previewNodes = [];
5872
+ const contentNodes = [];
5873
+ const actionsNodes = [];
5874
+ const looseNodes = [];
5875
+ for (const child of flattenRowChildren(children)) {
5876
+ const type = isValidElement(child) ? child.type : void 0;
5877
+ if (type === UploadItemPreview) previewNodes.push(child);
5878
+ else if (type === UploadItemContent) contentNodes.push(child);
5879
+ else if (type === UploadItemActions) actionsNodes.push(child);
5880
+ else looseNodes.push(child);
5881
+ }
5882
+ const hasComposedActions = actionsNodes.length > 0;
5883
+ const actionsRegion = hasComposedActions ? actionsNodes : /* @__PURE__ */ jsx(UploadItemActions, { children: looseNodes.length > 0 ? looseNodes : void 0 });
5884
+ return (
5885
+ // The row publishes its own file to its parts, so an `Upload.ItemAction`,
5886
+ // `Upload.ItemContent`, or `Upload.ItemPreview` needs no per-instance wiring
5887
+ // to know which entry it renders.
5888
+ /* @__PURE__ */ jsx(UploadItemProvider, { value: { item }, children: /* @__PURE__ */ jsxs(Component, { ...nativeProps, ...rootAttrs, "data-status": fileStatus(item), ref, children: [
5889
+ previewNodes.length > 0 ? previewNodes : /* @__PURE__ */ jsx(UploadItemPreview, {}),
5890
+ contentNodes.length > 0 ? contentNodes : /* @__PURE__ */ jsx(UploadItemContent, {}),
5891
+ hasComposedActions && looseNodes,
5892
+ actionsRegion
5893
+ ] }) })
5894
+ );
5895
+ };
5896
+ UploadItem.displayName = "Upload.Item";
5897
+ var UploadList = (props) => {
5898
+ const theme = useComponentTheme("UploadList");
5899
+ const { files } = useUploadContext("Upload.List");
5900
+ const { rootAttrs, rest } = composeRootAttrs(UploadListBase, props, theme);
5901
+ const { as, children, ref, ...nativeProps } = rest;
5902
+ if (files.length === 0) return null;
5903
+ const Component = as ?? "div";
5904
+ const rows = typeof children === "function" ? children(files) : isRenderableNode(children) ? children : files.map((item) => /* @__PURE__ */ jsx(UploadItem, { file: item }, item.id));
5905
+ return /* @__PURE__ */ jsx(Component, { ...nativeProps, ...rootAttrs, ref, children: rows });
5906
+ };
5907
+ UploadList.displayName = "Upload.List";
5908
+ var DEFAULT_SUBMIT_APPEARANCE = "outlined";
5909
+ var DEFAULT_SUBMIT_VARIANT = "neutral";
5910
+ var UploadSubmit = (props) => {
5911
+ const theme = useComponentTheme("UploadSubmit");
5912
+ const { disabled, files } = useUploadContext("Upload.Submit");
5913
+ const { rootAttrs, rest } = composeRootAttrs(UploadSubmitBase, props, theme);
5914
+ const { onClick: slotOnClick, ...submitRootAttrs } = rootAttrs;
5915
+ const {
5916
+ as,
5917
+ children,
5918
+ ref,
5919
+ disabled: ownDisabled,
5920
+ href,
5921
+ onClick,
5922
+ appearance = DEFAULT_SUBMIT_APPEARANCE,
5923
+ variant = DEFAULT_SUBMIT_VARIANT,
5924
+ ...buttonProps
5925
+ } = rest;
5926
+ const handleClick = (event) => {
5927
+ onClick?.(event);
5928
+ slotOnClick?.(event);
5929
+ };
5930
+ const inFlight = files.some((entry) => {
5931
+ const status = fileStatus(entry);
5932
+ return status === "uploading" || status === "processing";
5933
+ });
5934
+ const isDisabled = disabled || ownDisabled || files.length === 0 || inFlight;
5935
+ const isButton = (as ?? "button") === "button";
5936
+ const linkProps = isButton ? void 0 : { href: isDisabled ? void 0 : href };
5937
+ return /* @__PURE__ */ jsx(Button, { ...buttonProps, ...linkProps, ...submitRootAttrs, as, appearance, variant, disabled: isDisabled, onClick: handleClick, ref, children });
5938
+ };
5939
+ UploadSubmit.displayName = "Upload.Submit";
5940
+ var DEFAULT_TRIGGER_APPEARANCE = "outlined";
5941
+ var DEFAULT_TRIGGER_VARIANT = "neutral";
5942
+ var UploadTrigger = (props) => {
5943
+ const theme = useComponentTheme("UploadTrigger");
5944
+ const { disabled, readOnly, openFileDialog } = useUploadContext("Upload.Trigger");
5945
+ const { rootAttrs, rest } = composeRootAttrs(UploadTriggerBase, props, theme);
5946
+ const { onClick: slotOnClick, ...triggerRootAttrs } = rootAttrs;
5947
+ const {
5948
+ as,
5949
+ children,
5950
+ ref,
5951
+ disabled: ownDisabled,
5952
+ href,
5953
+ onClick,
5954
+ appearance = DEFAULT_TRIGGER_APPEARANCE,
5955
+ variant = DEFAULT_TRIGGER_VARIANT,
5956
+ ...buttonProps
5957
+ } = rest;
5958
+ const isDisabled = disabled || readOnly || ownDisabled;
5959
+ const isButton = (as ?? "button") === "button";
5960
+ const linkProps = isButton ? void 0 : { href: isDisabled ? void 0 : href };
5961
+ const handleClick = (event) => {
5962
+ const preventedOnEntry = event.defaultPrevented;
5963
+ onClick?.(event);
5964
+ slotOnClick?.(event);
5965
+ if (isConsumerVeto(event, preventedOnEntry)) return;
5966
+ openFileDialog();
5967
+ };
5968
+ return (
5969
+ // Read-only freezes the Trigger rather than unmounting it, which is the
5970
+ // opposite of what the ItemAction's remove does under the same state. The
5971
+ // asymmetry is the point: a file row without its remove still reads as a
5972
+ // whole row, but the zone's browse button is most of what the zone shows —
5973
+ // drop it and a dashed box is left offering a drop that never lands.
5974
+ /* @__PURE__ */ jsx(Button, { ...buttonProps, ...linkProps, ...triggerRootAttrs, as, appearance, variant, disabled: isDisabled, onClick: handleClick, ref, children })
5975
+ );
5976
+ };
5977
+ UploadTrigger.displayName = "Upload.Trigger";
5978
+
5979
+ // src/components/upload/index.ts
5980
+ var Upload2 = Object.assign(Upload, {
5981
+ Dropzone: UploadDropzone,
5982
+ Actions: UploadActions,
5983
+ Trigger: UploadTrigger,
5984
+ Submit: UploadSubmit,
5985
+ List: UploadList,
5986
+ Item: UploadItem,
5987
+ ItemPreview: UploadItemPreview,
5988
+ ItemContent: UploadItemContent,
5989
+ ItemActions: UploadItemActions,
5990
+ ItemAction: UploadItemAction
5991
+ });
5992
+
5993
+ export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Divider, Drawer2 as Drawer, Dropdown2 as Dropdown, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Progress2 as Progress, Radio2 as Radio, Select2 as Select, Skeleton, Slider2 as Slider, Spinner, Stepper2 as Stepper, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, Upload2 as Upload, getExportRows, useComponentTheme, useTheme };