@central-ui/react 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/dist/components/accordion/index.d.ts +14 -14
  2. package/dist/components/accordion/index.js +19 -19
  3. package/dist/components/autocomplete/index.d.ts +51 -47
  4. package/dist/components/autocomplete/index.js +57 -57
  5. package/dist/components/avatar/index.d.ts +7 -6
  6. package/dist/components/avatar/index.js +9 -9
  7. package/dist/components/banner/index.js +1 -1
  8. package/dist/components/carousel/index.d.ts +31 -11
  9. package/dist/components/carousel/index.js +25 -21
  10. package/dist/components/checkbox/index.d.ts +12 -11
  11. package/dist/components/checkbox/index.js +21 -21
  12. package/dist/components/combobox/index.d.ts +56 -56
  13. package/dist/components/combobox/index.js +67 -68
  14. package/dist/components/datepicker/index.d.ts +8 -9
  15. package/dist/components/datepicker/index.js +13 -13
  16. package/dist/components/dialog/index.d.ts +18 -18
  17. package/dist/components/dialog/index.js +22 -21
  18. package/dist/components/drawer/index.d.ts +24 -24
  19. package/dist/components/drawer/index.js +28 -27
  20. package/dist/components/exception/index.d.ts +23 -11
  21. package/dist/components/exception/index.js +17 -17
  22. package/dist/components/fileupload/index.d.ts +8 -8
  23. package/dist/components/input/index.d.ts +14 -14
  24. package/dist/components/input/index.js +27 -27
  25. package/dist/components/menu/index.d.ts +37 -37
  26. package/dist/components/menu/index.js +47 -47
  27. package/dist/components/numberinput/index.d.ts +22 -22
  28. package/dist/components/numberinput/index.js +35 -35
  29. package/dist/components/otpinput/index.d.ts +12 -12
  30. package/dist/components/otpinput/index.js +21 -21
  31. package/dist/components/pagination/index.d.ts +158 -0
  32. package/dist/components/pagination/index.js +157 -0
  33. package/dist/components/passwordinput/index.d.ts +15 -15
  34. package/dist/components/passwordinput/index.js +27 -27
  35. package/dist/components/popover/index.d.ts +16 -16
  36. package/dist/components/popover/index.js +20 -19
  37. package/dist/components/radio/index.d.ts +12 -12
  38. package/dist/components/radio/index.js +25 -25
  39. package/dist/components/ratinginput/index.d.ts +1 -1
  40. package/dist/components/ratinginput/index.js +3 -3
  41. package/dist/components/select/index.d.ts +29 -29
  42. package/dist/components/select/index.js +33 -33
  43. package/dist/components/slider/index.d.ts +20 -20
  44. package/dist/components/slider/index.js +27 -27
  45. package/dist/components/stepper/index.d.ts +135 -44
  46. package/dist/components/stepper/index.js +185 -62
  47. package/dist/components/switch/index.d.ts +9 -9
  48. package/dist/components/switch/index.js +17 -17
  49. package/dist/components/table/index.d.ts +2 -2
  50. package/dist/components/table/index.js +16 -16
  51. package/dist/components/tabs/index.d.ts +10 -10
  52. package/dist/components/tabs/index.js +11 -11
  53. package/dist/components/textarea/index.d.ts +13 -13
  54. package/dist/components/textarea/index.js +25 -25
  55. package/dist/components/toast/index.d.ts +11 -11
  56. package/dist/components/toast/index.js +11 -11
  57. package/dist/components/toggle/index.d.ts +7 -7
  58. package/dist/components/toggle/index.js +9 -9
  59. package/dist/components/tooltip/index.d.ts +6 -6
  60. package/dist/components/tooltip/index.js +6 -7
  61. package/dist/components/tour/index.d.ts +2 -2
  62. package/dist/components/tour/index.js +5 -4
  63. package/dist/index.d.ts +1 -0
  64. package/dist/index.js +1 -0
  65. package/dist/utils/icons.d.ts +104 -23
  66. package/dist/utils/icons.js +16 -3
  67. package/package.json +69 -69
  68. package/src/presets/shopify-polaris/shopify-polaris-accordion.css +28 -28
  69. package/src/presets/shopify-polaris/shopify-polaris-pagination.css +55 -0
  70. package/src/presets/shopify-polaris/shopify-polaris-stepper.css +63 -27
  71. package/src/presets/shopify-polaris/shopify-polaris.css +1 -0
  72. package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-accordion.css +28 -28
  73. package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-pagination.css +49 -0
  74. package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy-stepper.css +64 -26
  75. package/src/presets/shopify-polaris-legacy/shopify-polaris-legacy.css +1 -0
@@ -212,14 +212,14 @@ export type RootProps<T extends readonly GroupShape[], Multiple extends boolean
212
212
  */
213
213
  export declare function Root<T extends readonly GroupShape[], Multiple extends boolean | undefined = false>({ children, id, validation, defaultOpen, onOpenChange, ...props }: RootProps<T, Multiple>): import("react").JSX.Element;
214
214
  /** Use for the standard stacked layout, or omit when supplying your own layout. */
215
- export declare const Container: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
215
+ export declare function Container({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
216
216
  /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
217
- export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
217
+ export declare function Label({ disableStyle, className, ref, ...props }: Omit<ComponentProps<'label'>, 'htmlFor'> & StyleProps): import("react").JSX.Element;
218
218
  /** Search input with built-in filtering and selected-label display. Its id is managed by Root. Inside ChipsList, the preset automatically uses the compact chip-input sizing. */
219
- export declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteInputProps, "className" | "id"> & {
219
+ export declare function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }: (Omit<BaseCombobox.Input.Props, 'id' | 'className' | 'render'> & {
220
220
  className?: string;
221
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
222
- export type ChipsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Chips>, 'children' | 'className'> & {
221
+ }) & StyleProps): import("react").JSX.Element;
222
+ export type ChipsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Chips>, 'children' | 'className' | 'render'> & {
223
223
  className?: string;
224
224
  /**
225
225
  * Keep Input after the chips so keyboard navigation can move between them.
@@ -255,16 +255,16 @@ export type ChipsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
255
255
  * </Combobox.ChipsList>
256
256
  * </Combobox.InputGroup>
257
257
  */
258
- export declare const ChipsList: <Item extends ItemShape = ItemShape>(props: ChipsListProps<Item>) => ReactElement;
258
+ export declare function ChipsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ref, ...props }: ChipsListProps<Item>): import("react").JSX.Element;
259
259
  /** Reads Base UI selection without rendering its own element. Use its children callback only when you need a custom selection display; Input already displays the selected label automatically. */
260
260
  export declare const Value: typeof BaseCombobox.Value;
261
- export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.List>, 'children' | 'className'> & {
261
+ export type ScrollAreaProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.List>, 'children' | 'className' | 'render'> & {
262
262
  className?: string;
263
263
  /** Required groups composition. Use GroupsList rather than another listbox primitive. */
264
264
  children?: ReactNode;
265
265
  } & StyleProps;
266
266
  /** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
267
- export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
267
+ export declare function ScrollArea({ disableStyle, className, ref, ...props }: ScrollAreaProps): import("react").JSX.Element;
268
268
  export type GroupsListProps<Group extends GroupShape = GroupShape> = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
269
269
  /**
270
270
  * Return Group with its ItemsList; the collection already performs filtering.
@@ -288,21 +288,21 @@ export type ItemsListProps<Item extends ItemShape = ItemShape> = Omit<ComponentP
288
288
  } & StyleProps;
289
289
  /** Required items container inside Group. A children callback receives the filtered items belonging to that Group; do not repeat filtering yourself. Manually annotate item with Combobox.ItemType<typeof rootItems>, using the exact items variable passed to Root. */
290
290
  export declare function ItemsList<Item extends ItemShape = ItemShape>({ disableStyle, children, className, ...props }: ItemsListProps<Item>): import("react").JSX.Element;
291
- export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Group>, 'items' | 'className'> & {
291
+ export type GroupProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Group>, 'items' | 'className' | 'render'> & {
292
292
  className?: string;
293
293
  /** Items for this group; pass group.items from GroupsList. Required even for a flat list. */
294
294
  items: readonly Item[];
295
295
  } & StyleProps;
296
296
  /** Required wrapper around ItemsList, even for a visually flat list. Pass group.items. A GroupLabel is optional; omit it when the group has an empty label. */
297
297
  export declare function Group<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: GroupProps<Item>): import("react").JSX.Element;
298
- export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Item>, 'value' | 'className'> & {
298
+ export type ItemProps<Item extends ItemShape = ItemShape> = Omit<ComponentPropsWithRef<typeof BaseCombobox.Item>, 'value' | 'className' | 'render'> & {
299
299
  className?: string;
300
300
  /** Pass the item supplied by ItemsList so selection can match it by item.value. */
301
301
  value: Item;
302
302
  } & StyleProps;
303
303
  /** Required selectable row inside ItemsList. Pass the complete item object as value, with ItemText and ItemIndicator inside. Selection, highlighting, and keyboard behavior are built in. */
304
304
  export declare function Item<Item extends ItemShape = ItemShape>({ disableStyle, className, ...props }: ItemProps<Item>): import("react").JSX.Element;
305
- export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>, 'className'> & {
305
+ export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>, 'className' | 'render'> & {
306
306
  className?: string;
307
307
  } & Pick<BaseCombobox.Portal.Props, 'container' | 'keepMounted'> & Pick<BaseCombobox.Positioner.Props, 'anchor' | 'positionMethod' | 'alignOffset' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'arrowPadding' | 'disableAnchorTracking' | 'collisionAvoidance'> & {
308
308
  /** Preferred popup side; collision handling may choose another side. @default 'bottom' */
@@ -315,97 +315,97 @@ export type PopupProps = Omit<ComponentPropsWithRef<typeof BaseCombobox.Popup>,
315
315
  /** Popup containing Empty, an optional Loading message, and ScrollArea, in that order. Already includes the portal and positioner: do not add either yourself. Defaults to bottom/start with a 5px gap. Core available-space and anchor-width inline styles stay active when preset styling is disabled. */
316
316
  export declare function Popup({ disableStyle, container, keepMounted, anchor, positionMethod, side, sideOffset, align, alignOffset, collisionBoundary, collisionPadding, sticky, arrowPadding, disableAnchorTracking, collisionAvoidance, className, style, ...props }: PopupProps): import("react").JSX.Element;
317
317
  /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
318
- export declare const Arrow: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML"> & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
318
+ export declare function Arrow({ disableStyle, className, style, ref, ...props }: Omit<ComponentProps<'svg'>, 'children' | 'dangerouslySetInnerHTML'> & StyleProps): import("react").JSX.Element;
319
319
  /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
320
- export declare const Addon: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
320
+ export declare function Addon({ disableStyle, variant, className, ref, ...props }: (ComponentProps<'div'> & {
321
321
  /** Preset adornment appearance. Does not add button behavior. @default 'normal' */
322
- variant?: "normal" | "emphasized";
323
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
322
+ variant?: 'normal' | 'emphasized';
323
+ }) & StyleProps): import("react").JSX.Element;
324
324
  /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
325
- export declare const AddonIcon: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "strokeWidth"> & {
326
- /** @default 1.5 */
327
- strokeWidth?: SVGIconProps["strokeWidth"];
328
- } & {
325
+ export declare function AddonIcon({ disableStyle, children, className, strokeWidth, ref, ...props }: (IconProps & {
329
326
  /** One icon element to clone. Its own className is preserved. */
330
327
  children: ReactElement<SVGIconProps>;
331
- } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
328
+ }) & StyleProps): ReactElement<SVGIconProps & {
329
+ 'data-component'?: string;
330
+ 'data-style-disabled'?: string;
331
+ }, string | import("react").JSXElementConstructor<any>>;
332
332
  /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
333
- export declare const AddonButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "disabled"> & {
333
+ export declare function AddonButton({ disableStyle, className, disabled, type, ref, ...props }: Omit<ComponentProps<'button'>, 'type' | 'disabled'> & {
334
334
  /** Button type. @default 'button' */
335
- type?: ComponentProps<"button">["type"];
335
+ type?: ComponentProps<'button'>['type'];
336
336
  /** Disables this button. Root disabled or readOnly also disables it automatically. */
337
- disabled?: ComponentProps<"button">["disabled"];
338
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
337
+ disabled?: ComponentProps<'button'>['disabled'];
338
+ } & StyleProps): import("react").JSX.Element;
339
339
  /** Input control wrapper. Place Input (or ChipsList containing Input) and optional Addon controls inside. Root validation controls its preset validation border. */
340
- export declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxInputGroupProps, "className"> & {
340
+ export declare function InputGroup({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.InputGroup.Props, 'className' | 'render'> & {
341
341
  className?: string;
342
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
342
+ }) & StyleProps): import("react").JSX.Element;
343
343
  /** Displays one selected item inside ChipsList. Keep chips in selected-item order so Base UI can remove the matching item. Supply the item label and an optional removal control. */
344
- export declare const Chip: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxChipProps, "className"> & {
344
+ export declare function Chip({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Chip.Props, 'className' | 'render'> & {
345
345
  className?: string;
346
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
346
+ }) & StyleProps): import("react").JSX.Element;
347
347
  /** Removes the surrounding Chip from selection automatically; no onClick handler needed. Supply its content, normally ChipRemoveButtonIcon, and an accessible label. */
348
- export declare const ChipRemoveButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxChipRemoveProps, "className"> & {
348
+ export declare function ChipRemoveButton({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.ChipRemove.Props, 'className' | 'render'> & {
349
349
  className?: string;
350
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
350
+ }) & StyleProps): import("react").JSX.Element;
351
351
  /** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
352
- export declare const AddonOpenButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxTriggerProps, "className"> & {
352
+ export declare function AddonOpenButton({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Trigger.Props, 'className' | 'render'> & {
353
353
  className?: string;
354
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
354
+ }) & StyleProps): import("react").JSX.Element;
355
355
  /** Clears the selection automatically; no click handler needed. Supply its content, normally AddonClearButtonIcon, and an accessible label. */
356
- export declare const AddonClearButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteClearProps, "className"> & {
356
+ export declare function AddonClearButton({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Clear.Props, 'className' | 'render'> & {
357
357
  className?: string;
358
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
358
+ }) & StyleProps): import("react").JSX.Element;
359
359
  /** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
360
- export declare const GroupLabel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "className"> & {
360
+ export declare function GroupLabel({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.GroupLabel.Props, 'className' | 'render'> & {
361
361
  className?: string;
362
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
362
+ }) & StyleProps): import("react").JSX.Element;
363
363
  /** Required empty-results message inside Popup, before optional Loading and ScrollArea. Keep mounted statically: Base UI renders its children only when no items match. Do not manually toggle, hide, or conditionally mount it. */
364
- export declare const Empty: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteEmptyProps, "className"> & {
364
+ export declare function Empty({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Empty.Props, 'className' | 'render'> & {
365
365
  className?: string;
366
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
366
+ }) & StyleProps): import("react").JSX.Element;
367
367
  /** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
368
- export declare const Separator: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ComboboxSeparatorProps, "className"> & {
368
+ export declare function Separator({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Separator.Props, 'className' | 'render'> & {
369
369
  className?: string;
370
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
370
+ }) & StyleProps): import("react").JSX.Element;
371
371
  /** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
372
- export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
372
+ export declare function ItemText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
373
373
  /** Optional decorative text inside Addon. Supply the text as children. */
374
- export declare const AddonText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
374
+ export declare function AddonText({ disableStyle, className, ref, ...props }: ComponentProps<'span'> & StyleProps): import("react").JSX.Element;
375
375
  /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
376
- export declare const EmptyText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
376
+ export declare function EmptyText({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
377
377
  /** Optional supporting text. Supply its content; it describes the input to screen readers automatically. */
378
- export declare const Description: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
378
+ export declare function Description({ disableStyle, className, id, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
379
379
  type MessageProps = Omit<ComponentProps<'div'>, 'children'> & StyleProps & {
380
380
  children?: ValidationMessageChildren;
381
381
  };
382
382
  /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
383
- export declare const Error: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
383
+ export declare function Error({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
384
384
  /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
385
- export declare const Success: import("react").ForwardRefExoticComponent<Omit<MessageProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
385
+ export declare function Success({ children, ref, ...props }: MessageProps): import("react").JSX.Element | null;
386
386
  type BuiltInIconProps = Omit<IconProps, 'children'> & StyleProps & {
387
387
  /** Omit for the supplied default icon; pass a child icon only to replace it. */
388
388
  children?: ReactElement<SVGIconProps>;
389
389
  };
390
390
  /** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
391
- export declare const AddonOpenButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
391
+ export declare function AddonOpenButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
392
392
  /** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
393
- export declare const AddonClearButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
393
+ export declare function AddonClearButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
394
394
  /** Built-in decorative removal icon. Place inside ChipRemoveButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
395
- export declare const ChipRemoveButtonIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
395
+ export declare function ChipRemoveButtonIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
396
396
  /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
397
- export declare const AddonLoadingIcon: import("react").ForwardRefExoticComponent<Omit<BuiltInIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
397
+ export declare function AddonLoadingIcon({ ref, ...props }: BuiltInIconProps): import("react").JSX.Element;
398
398
  /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
399
- export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & Pick<import("@base-ui/react").ComboboxItemIndicatorProps, "keepMounted"> & {
399
+ export declare function ItemIndicator({ disableStyle, children, keepMounted, ref, ...props }: Omit<SVGIconProps, 'children'> & Pick<BaseCombobox.ItemIndicator.Props, 'keepMounted'> & {
400
400
  /** Optional replacement SVG icon. It receives this indicator's props and ref. */
401
401
  children?: ReactElement<SVGIconProps>;
402
- } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
402
+ } & StyleProps): import("react").JSX.Element;
403
403
  /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
404
- export declare const Loading: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").AutocompleteStatusProps, "className"> & {
404
+ export declare function Loading({ disableStyle, className, ref, ...props }: (Omit<BaseCombobox.Status.Props, 'className' | 'render'> & {
405
405
  className?: string;
406
- } & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
406
+ }) & StyleProps): import("react").JSX.Element;
407
407
  /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
408
- export declare const LoadingText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & StyleProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
408
+ export declare function LoadingText({ disableStyle, className, ref, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
409
409
  /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
410
- export declare const LoadingIcon: import("react").ForwardRefExoticComponent<Omit<SVGIconProps & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
410
+ export declare function LoadingIcon({ disableStyle, className, strokeWidth, ref, ...props }: SVGIconProps & StyleProps): import("react").JSX.Element;
411
411
  export {};
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
3
3
  import { Check, ChevronsUpDown, LoaderCircle, X } from "../../utils/icons.js";
4
- import { cloneElement, createContext, forwardRef, useContext, useEffect, useId, useState } from 'react';
4
+ import { cloneElement, createContext, useContext, useEffect, useId, useState } from 'react';
5
5
  import { twMerge } from 'tailwind-merge';
6
6
  import { readValidation, validationAttributes, validationMessageContent } from "../../utils/Validation.js";
7
7
  /**
@@ -181,23 +181,20 @@ export function Root({ children, id, validation, defaultOpen = false, onOpenChan
181
181
  }, children: children }) }));
182
182
  }
183
183
  /** Use for the standard stacked layout, or omit when supplying your own layout. */
184
- export const Container = /* @__PURE__ */ forwardRef(function Container({ disableStyle, className, ...props }, ref) {
184
+ export function Container({ disableStyle, className, ref, ...props }) {
185
185
  return (_jsx("div", { ...props, ref: ref, "data-component": "combobox-container", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
186
- });
186
+ }
187
187
  /** Labels the input automatically using Root's id. Supply the visible label as children; no htmlFor needed. */
188
- export const Label = /* @__PURE__ */ forwardRef(function Label({ disableStyle, className, ...props }, ref) {
188
+ export function Label({ disableStyle, className, ref, ...props }) {
189
189
  const context = useComboboxContext();
190
190
  const attributes = usePartAttributes();
191
191
  return (_jsx("label", { ...attributes, ...props, ref: ref, htmlFor: context.inputId, "data-component": "combobox-label", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
192
- });
192
+ }
193
193
  /** Search input with built-in filtering and selected-label display. Its id is managed by Root. Inside ChipsList, the preset automatically uses the compact chip-input sizing. */
194
- export const Input = /* @__PURE__ */ forwardRef(function Input({ disableStyle, className, 'aria-describedby': describedBy, ...props }, ref) {
194
+ export function Input({ disableStyle, className, 'aria-describedby': describedBy, ref, ...props }) {
195
195
  const context = useComboboxContext();
196
196
  const inChips = useContext(ChipsContext);
197
197
  return (_jsx(BaseCombobox.Input, { "aria-invalid": context.validation.state === 'error' || undefined, "aria-describedby": [describedBy, ...context.describedByIds].filter(Boolean).join(' ') || undefined, ...props, ref: ref, id: context.inputId, "data-component": "combobox-input", "data-style-disabled": disableStyle ? '' : undefined, "data-in-chips": inChips ? '' : undefined, className: className }));
198
- });
199
- function ChipsListInner({ disableStyle, children, className, ...props }, ref) {
200
- return (_jsx(BaseCombobox.Value, { children: (selected) => (_jsx(ChipsContext.Provider, { value: true, children: _jsx(BaseCombobox.Chips, { ...props, ref: ref, "data-slot": "chips-list", "data-component": "combobox-chipslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? children(selected) : children }) })) }));
201
198
  }
202
199
  /**
203
200
  * Selected-item chips inside InputGroup for multiple selection.
@@ -225,13 +222,15 @@ function ChipsListInner({ disableStyle, children, className, ...props }, ref) {
225
222
  * </Combobox.ChipsList>
226
223
  * </Combobox.InputGroup>
227
224
  */
228
- export const ChipsList = /* @__PURE__ */ forwardRef(ChipsListInner);
225
+ export function ChipsList({ disableStyle, children, className, ref, ...props }) {
226
+ return (_jsx(BaseCombobox.Value, { children: (selected) => (_jsx(ChipsContext.Provider, { value: true, children: _jsx(BaseCombobox.Chips, { ...props, ref: ref, "data-slot": "chips-list", "data-component": "combobox-chipslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? children(selected) : children }) })) }));
227
+ }
229
228
  /** Reads Base UI selection without rendering its own element. Use its children callback only when you need a custom selection display; Input already displays the selected label automatically. */
230
229
  export const Value = BaseCombobox.Value;
231
230
  /** Required listbox and scroll viewport inside Popup. Place GroupsList inside it. Owns keyboard/listbox semantics; do not nest another listbox primitive. */
232
- export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ disableStyle, className, ...props }, ref) {
231
+ export function ScrollArea({ disableStyle, className, ref, ...props }) {
233
232
  return (_jsx(BaseCombobox.List, { ...props, ref: ref, "data-component": "combobox-scrollarea", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
234
- });
233
+ }
235
234
  /** Required groups container inside ScrollArea. A children callback receives each automatically filtered group; do not filter or map the original groups again. Manually annotate group with Combobox.GroupType<typeof rootItems>, using the exact items variable passed to Root. */
236
235
  export function GroupsList({ disableStyle, children, className, ...props }) {
237
236
  return (_jsx("div", { ...props, "data-component": "combobox-groupslist", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: typeof children === 'function' ? (_jsx(BaseCombobox.Collection, { children: children })) : (children) }));
@@ -259,15 +258,15 @@ export function Popup({ disableStyle, container, keepMounted, anchor, positionMe
259
258
  : { ...baseStyle, ...style } }) }) }));
260
259
  }
261
260
  /** Optional decorative popup arrow. Place inside Popup; the SVG and direction handling are supplied. No children needed. */
262
- export const Arrow = /* @__PURE__ */ forwardRef(function Arrow({ disableStyle, className, style, ...props }, ref) {
261
+ export function Arrow({ disableStyle, className, style, ref, ...props }) {
263
262
  return (_jsxs(BaseCombobox.Arrow, { style: style, render: _jsx("svg", { ...props, ref: ref, "aria-hidden": true, width: "20", height: "10", viewBox: "0 0 20 10" }), "data-component": "combobox-arrow", "data-style-disabled": disableStyle ? '' : undefined, className: className, children: [_jsx("path", { d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z", "data-component": "combobox-arrow-1" }), _jsx("path", { d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z", "data-component": "combobox-arrow-2" }), _jsx("path", { d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z", "data-component": "combobox-arrow-3" })] }));
264
- });
263
+ }
265
264
  /** Optional input adornment container inside InputGroup. Wraps icons, text, or buttons without adding trigger behavior. */
266
- export const Addon = /* @__PURE__ */ forwardRef(function Addon({ disableStyle, variant = 'normal', className, ...props }, ref) {
265
+ export function Addon({ disableStyle, variant = 'normal', className, ref, ...props }) {
267
266
  return (_jsx("div", { ...props, ref: ref, "data-variant": variant, "data-component": "combobox-addon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
268
- });
267
+ }
269
268
  /** Clones one supplied icon element, forwarding its ref and preserving its classes. Decorative only; does not open the popup or perform an action. */
270
- export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ...props }, ref) {
269
+ export function AddonIcon({ disableStyle, children, className, strokeWidth = 1.5, ref, ...props }) {
271
270
  const attributes = usePartAttributes();
272
271
  return cloneElement(children, {
273
272
  ...attributes,
@@ -279,107 +278,107 @@ export const AddonIcon = /* @__PURE__ */ forwardRef(function AddonIcon({ disable
279
278
  'data-style-disabled': disableStyle ? '' : undefined,
280
279
  className: twMerge(children.props.className, className),
281
280
  });
282
- });
281
+ }
283
282
  /** Optional general-purpose button inside Addon. Supply its action yourself. Automatically disabled when Root is disabled or readOnly; defaults to type="button". */
284
- export const AddonButton = /* @__PURE__ */ forwardRef(function AddonButton({ disableStyle, className, disabled, type = 'button', ...props }, ref) {
283
+ export function AddonButton({ disableStyle, className, disabled, type = 'button', ref, ...props }) {
285
284
  const context = useComboboxContext();
286
285
  const attributes = usePartAttributes();
287
286
  return (_jsx("button", { ...attributes, ...props, ref: ref, type: type, disabled: disabled || context.disabled || context.readOnly, "data-component": "combobox-addonbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
288
- });
287
+ }
289
288
  /** Input control wrapper. Place Input (or ChipsList containing Input) and optional Addon controls inside. Root validation controls its preset validation border. */
290
- export const InputGroup = /* @__PURE__ */ forwardRef(function InputGroup({ disableStyle, className, ...props }, ref) {
289
+ export function InputGroup({ disableStyle, className, ref, ...props }) {
291
290
  const attributes = usePartAttributes();
292
291
  return (_jsx(BaseCombobox.InputGroup, { "data-validation": attributes['data-validation'], ...props, ref: ref, "data-component": "combobox-inputgroup", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
293
- });
292
+ }
294
293
  /** Displays one selected item inside ChipsList. Keep chips in selected-item order so Base UI can remove the matching item. Supply the item label and an optional removal control. */
295
- export const Chip = /* @__PURE__ */ forwardRef(function Chip({ disableStyle, className, ...props }, ref) {
294
+ export function Chip({ disableStyle, className, ref, ...props }) {
296
295
  return (_jsx(BaseCombobox.Chip, { ...props, ref: ref, "data-component": "combobox-chip", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
297
- });
296
+ }
298
297
  /** Removes the surrounding Chip from selection automatically; no onClick handler needed. Supply its content, normally ChipRemoveButtonIcon, and an accessible label. */
299
- export const ChipRemoveButton = /* @__PURE__ */ forwardRef(function ChipRemoveButton({ disableStyle, className, ...props }, ref) {
298
+ export function ChipRemoveButton({ disableStyle, className, ref, ...props }) {
300
299
  return (_jsx(BaseCombobox.ChipRemove, { ...props, ref: ref, "data-component": "combobox-chipremovebutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
301
- });
300
+ }
302
301
  /** Opens and closes the popup automatically; no click handler needed. Supply its content, normally AddonOpenButtonIcon, and an accessible label. */
303
- export const AddonOpenButton = /* @__PURE__ */ forwardRef(function AddonOpenButton({ disableStyle, className, ...props }, ref) {
302
+ export function AddonOpenButton({ disableStyle, className, ref, ...props }) {
304
303
  return (_jsx(BaseCombobox.Trigger, { ...props, ref: ref, "data-component": "combobox-addonopenbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
305
- });
304
+ }
306
305
  /** Clears the selection automatically; no click handler needed. Supply its content, normally AddonClearButtonIcon, and an accessible label. */
307
- export const AddonClearButton = /* @__PURE__ */ forwardRef(function AddonClearButton({ disableStyle, className, ...props }, ref) {
306
+ export function AddonClearButton({ disableStyle, className, ref, ...props }) {
308
307
  return (_jsx(BaseCombobox.Clear, { ...props, ref: ref, "data-component": "combobox-addonclearbutton", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
309
- });
308
+ }
310
309
  /** Optional heading inside Group. Supply group.label as children. Omit this part for an empty label; always keep Group and ItemsList. */
311
- export const GroupLabel = /* @__PURE__ */ forwardRef(function GroupLabel({ disableStyle, className, ...props }, ref) {
310
+ export function GroupLabel({ disableStyle, className, ref, ...props }) {
312
311
  return (_jsx(BaseCombobox.GroupLabel, { ...props, ref: ref, "data-component": "combobox-grouplabel", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
313
- });
312
+ }
314
313
  /** Required empty-results message inside Popup, before optional Loading and ScrollArea. Keep mounted statically: Base UI renders its children only when no items match. Do not manually toggle, hide, or conditionally mount it. */
315
- export const Empty = /* @__PURE__ */ forwardRef(function Empty({ disableStyle, className, ...props }, ref) {
314
+ export function Empty({ disableStyle, className, ref, ...props }) {
316
315
  return (_jsx(BaseCombobox.Empty, { ...props, ref: ref, "data-component": "combobox-empty", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
317
- });
316
+ }
318
317
  /** Optional visual separator inside the popup. Does not replace Group or any required list containers. */
319
- export const Separator = /* @__PURE__ */ forwardRef(function Separator({ disableStyle, className, ...props }, ref) {
318
+ export function Separator({ disableStyle, className, ref, ...props }) {
320
319
  return (_jsx(BaseCombobox.Separator, { ...props, ref: ref, "data-component": "combobox-separator", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
321
- });
320
+ }
322
321
  /** Required label content inside Item. Supply item.label as children; does not derive text from the item automatically. */
323
- export const ItemText = /* @__PURE__ */ forwardRef(function ItemText({ disableStyle, className, ...props }, ref) {
322
+ export function ItemText({ disableStyle, className, ref, ...props }) {
324
323
  const attributes = usePartAttributes();
325
324
  return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "combobox-itemtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
326
- });
325
+ }
327
326
  /** Optional decorative text inside Addon. Supply the text as children. */
328
- export const AddonText = /* @__PURE__ */ forwardRef(function AddonText({ disableStyle, className, ...props }, ref) {
327
+ export function AddonText({ disableStyle, className, ref, ...props }) {
329
328
  const attributes = usePartAttributes();
330
329
  return (_jsx("span", { ...attributes, ...props, ref: ref, "data-component": "combobox-addontext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
331
- });
330
+ }
332
331
  /** Text content inside Empty. Supply your empty-result message; Empty handles its visibility automatically. */
333
- export const EmptyText = /* @__PURE__ */ forwardRef(function EmptyText({ disableStyle, className, ...props }, ref) {
332
+ export function EmptyText({ disableStyle, className, ref, ...props }) {
334
333
  const attributes = usePartAttributes();
335
334
  return (_jsx("div", { ...attributes, ...props, ref: ref, "data-component": "combobox-emptytext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
336
- });
335
+ }
337
336
  /** Optional supporting text. Supply its content; it describes the input to screen readers automatically. */
338
- export const Description = /* @__PURE__ */ forwardRef(function Description({ disableStyle, className, id, ...props }, ref) {
337
+ export function Description({ disableStyle, className, id, ref, ...props }) {
339
338
  const describedById = useDescribedById(id);
340
339
  const attributes = usePartAttributes();
341
340
  return (_jsx("div", { ...attributes, ...props, id: describedById, ref: ref, "data-component": "combobox-description", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
342
- });
341
+ }
343
342
  /** Shows itself only while Root's validation is `'error'`: with no children it shows the message from `['error', message]`, a function children formats that message, and other children replace it. */
344
- export const Error = /* @__PURE__ */ forwardRef(function Error({ children, ...props }, ref) {
343
+ export function Error({ children, ref, ...props }) {
345
344
  const context = useComboboxContext();
346
345
  const content = validationMessageContent(context.validation, 'error', children);
347
346
  if (content === undefined)
348
347
  return null;
349
348
  return _jsx(Message, { ...props, ref: ref, role: "alert", component: "combobox-error", children: content });
350
- });
349
+ }
351
350
  /** Shows itself only while Root's validation is `'success'`: with no children it shows the message from `['success', message]`, a function children formats that message, and other children replace it. */
352
- export const Success = /* @__PURE__ */ forwardRef(function Success({ children, ...props }, ref) {
351
+ export function Success({ children, ref, ...props }) {
353
352
  const context = useComboboxContext();
354
353
  const content = validationMessageContent(context.validation, 'success', children);
355
354
  if (content === undefined)
356
355
  return null;
357
356
  return _jsx(Message, { ...props, ref: ref, role: "status", component: "combobox-success", children: content });
358
- });
357
+ }
359
358
  // The shared body of Error and Success, mounted only while they show, so only visible messages describe the input
360
- const Message = /* @__PURE__ */ forwardRef(function Message({ disableStyle, className, id, component, ...props }, ref) {
359
+ function Message({ disableStyle, className, id, component, ref, ...props }) {
361
360
  const describedById = useDescribedById(id);
362
361
  const attributes = usePartAttributes();
363
362
  return _jsx("div", { "aria-atomic": "true", ...attributes, ...props, id: describedById, ref: ref, "data-component": component, "data-style-disabled": disableStyle ? '' : undefined, className: className });
364
- });
363
+ }
365
364
  /** Built-in decorative open-button icon. Place inside AddonOpenButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
366
- export const AddonOpenButtonIcon = /* @__PURE__ */ forwardRef(function AddonOpenButtonIcon(props, ref) {
365
+ export function AddonOpenButtonIcon({ ref, ...props }) {
367
366
  return _jsx(BuiltInIcon, { ...props, ref: ref, icon: ChevronsUpDown, component: "combobox-addonopenbuttonicon" });
368
- });
367
+ }
369
368
  /** Built-in decorative clear icon. Place inside AddonClearButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
370
- export const AddonClearButtonIcon = /* @__PURE__ */ forwardRef(function AddonClearButtonIcon(props, ref) {
369
+ export function AddonClearButtonIcon({ ref, ...props }) {
371
370
  return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "combobox-addonclearbuttonicon" });
372
- });
371
+ }
373
372
  /** Built-in decorative removal icon. Place inside ChipRemoveButton. Omit children for the supplied default icon; pass an icon only to replace it. Defaults to strokeWidth 1.5. */
374
- export const ChipRemoveButtonIcon = /* @__PURE__ */ forwardRef(function ChipRemoveButtonIcon(props, ref) {
373
+ export function ChipRemoveButtonIcon({ ref, ...props }) {
375
374
  return _jsx(BuiltInIcon, { ...props, ref: ref, icon: X, component: "combobox-chipremovebuttonicon" });
376
- });
375
+ }
377
376
  /** Optional spinner inside Addon. Does not detect requests: you decide when to render it. Defaults to strokeWidth 1.5. */
378
- export const AddonLoadingIcon = /* @__PURE__ */ forwardRef(function AddonLoadingIcon(props, ref) {
377
+ export function AddonLoadingIcon({ ref, ...props }) {
379
378
  return _jsx(BuiltInIcon, { ...props, ref: ref, icon: LoaderCircle, component: "combobox-addonloadingicon" });
380
- });
379
+ }
381
380
  // The shared body of the built-in decorative icons above, which only differ by their icon and component name
382
- const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ...props }, ref) {
381
+ function BuiltInIcon({ disableStyle, className, strokeWidth, icon: Icon, component, children, ref, ...props }) {
383
382
  const attributes = usePartAttributes();
384
383
  return cloneElement(children ?? _jsx(Icon, {}), {
385
384
  ...attributes,
@@ -391,9 +390,9 @@ const BuiltInIcon = /* @__PURE__ */ forwardRef(function BuiltInIcon({ disableSty
391
390
  'data-style-disabled': disableStyle ? '' : undefined,
392
391
  className: twMerge(children?.props.className, className),
393
392
  });
394
- });
393
+ }
395
394
  /** Required selection indicator inside Item. Visibility is automatic and a checkmark is supplied: no children or selection condition needed. Pass children only to replace the built-in checkmark. */
396
- export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({ disableStyle, children, keepMounted, ...props }, ref) {
395
+ export function ItemIndicator({ disableStyle, children, keepMounted, ref, ...props }) {
397
396
  const iconProps = {
398
397
  'aria-hidden': true,
399
398
  strokeWidth: 2,
@@ -403,19 +402,19 @@ export const ItemIndicator = /* @__PURE__ */ forwardRef(function ItemIndicator({
403
402
  'data-style-disabled': disableStyle ? '' : undefined,
404
403
  };
405
404
  return (_jsx(BaseCombobox.ItemIndicator, { keepMounted: keepMounted, children: null, render: cloneElement(children ?? _jsx(Check, {}), iconProps) }));
406
- });
405
+ }
407
406
  /** Optional async status inside Popup, below Empty and above ScrollArea. Omit entirely for synchronous items. For async items, keep Loading mounted and conditionally render only LoadingIcon and LoadingText from your request state. Does not detect requests or manage visibility. */
408
- export const Loading = /* @__PURE__ */ forwardRef(function Loading({ disableStyle, className, ...props }, ref) {
407
+ export function Loading({ disableStyle, className, ref, ...props }) {
409
408
  return (_jsx(BaseCombobox.Status, { ...props, ref: ref, "data-component": "combobox-loading", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
410
- });
409
+ }
411
410
  /** Text inside Loading. Supply the message only while your request is loading; this part does not detect request state. */
412
- export const LoadingText = /* @__PURE__ */ forwardRef(function LoadingText({ disableStyle, className, ...props }, ref) {
411
+ export function LoadingText({ disableStyle, className, ref, ...props }) {
413
412
  return (_jsx("div", { ...props, ref: ref, "data-component": "combobox-loadingtext", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
414
- });
413
+ }
415
414
  /** Built-in decorative spinner for Loading. No children needed; you control when it is rendered. */
416
- export const LoadingIcon = /* @__PURE__ */ forwardRef(function LoadingIcon({ disableStyle, className, strokeWidth = 2, ...props }, ref) {
415
+ export function LoadingIcon({ disableStyle, className, strokeWidth = 2, ref, ...props }) {
417
416
  return (_jsx(LoaderCircle, { "aria-hidden": true, ...props, ref: ref, strokeWidth: strokeWidth, "data-component": "combobox-loadingicon", "data-style-disabled": disableStyle ? '' : undefined, className: className }));
418
- });
417
+ }
419
418
  const ComboboxContext = /* @__PURE__ */ createContext(null);
420
419
  // Telling Input it sits inside ChipsList, so the preset uses the compact chip-input sizing
421
420
  const ChipsContext = /* @__PURE__ */ createContext(false);
@@ -15,7 +15,7 @@ import type { ListBoxProps, ListBoxItemProps } from 'react-aria-components/ListB
15
15
  import { Text } from 'react-aria-components/Text';
16
16
  import { FieldError } from 'react-aria-components/FieldError';
17
17
  import type { CalendarDate } from '@internationalized/date';
18
- import type { ComponentProps, ReactElement, ReactNode } from 'react';
18
+ import type { ComponentProps, ReactElement, ReactNode, Ref } from 'react';
19
19
  import type { SVGIconProps } from '../../types/Icon.ts';
20
20
  import type { Validation } from '../../types/Validation.ts';
21
21
  import type { ValidationMessageChildren } from '../../utils/Validation.ts';
@@ -53,6 +53,7 @@ type SharedRootProps = {
53
53
  * Omit it to keep only the picker's own validation, like a required or out-of-range date.
54
54
  */
55
55
  validation?: Validation;
56
+ ref?: Ref<HTMLDivElement>;
56
57
  };
57
58
  type SingleRootProps = Pick<DatePickerProps<CalendarDate>, CoreKeys | 'name' | 'autoComplete'> & SharedRootProps & {
58
59
  /** Use range for a start/end selection; single is the default. Choose the corresponding field composition. */
@@ -158,7 +159,7 @@ export type RootProps = SingleRootProps | RangeRootProps;
158
159
  * }
159
160
  * </DatePicker.PresetsList>
160
161
  */
161
- export declare const Root: import("react").ForwardRefExoticComponent<RootProps & import("react").RefAttributes<HTMLDivElement>>;
162
+ export declare function Root({ ref, ...props }: RootProps): import("react").JSX.Element;
162
163
  export declare function Container({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
163
164
  export declare function Label({ disableStyle, className, ...props }: Omit<ComponentProps<typeof AriaLabel>, 'htmlFor' | 'slot' | 'render'> & StyleProps): import("react").JSX.Element;
164
165
  export declare function InputGroup({ disableStyle, className, ...props }: (Omit<ComponentProps<typeof AriaGroup>, 'className' | 'style' | 'render' | 'slot' | 'isDisabled' | 'isReadOnly' | 'isInvalid'> & {
@@ -219,12 +220,10 @@ export declare function OpenButtonIcon({ disableStyle, children, className, ...p
219
220
  export type PopupProps = Omit<PopoverProps, 'className' | 'style' | 'render' | 'slot' | 'trigger' | 'isOpen' | 'defaultOpen' | 'onOpenChange'> & {
220
221
  className?: string;
221
222
  style?: ComponentProps<'div'>['style'];
223
+ ref?: Ref<HTMLElement>;
222
224
  } & StyleProps;
223
225
  /** Use the same calendar composition for both trigger choices. Opening and focus management are handled by the picker; do not add your own popup visibility condition. */
224
- export declare const Popup: import("react").ForwardRefExoticComponent<Omit<PopoverProps, "className" | "slot" | "style" | "render" | "onOpenChange" | "defaultOpen" | "isOpen" | "trigger"> & {
225
- className?: string;
226
- style?: ComponentProps<"div">["style"];
227
- } & StyleProps & import("react").RefAttributes<HTMLElement>>;
226
+ export declare function Popup({ disableStyle, ref, ...props }: PopupProps): import("react").JSX.Element;
228
227
  export type CalendarConfiguration = Omit<CalendarProps<CalendarDate>, 'children' | 'render' | 'className' | 'style' | 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'isDateUnavailable' | 'focusedValue' | 'defaultFocusedValue' | 'onFocusChange' | 'selectionMode' | 'pageBehavior' | 'slot' | 'isDisabled' | 'isReadOnly' | 'isInvalid' | 'firstDayOfWeek' | 'createCalendar' | 'visibleDuration'> & {
229
228
  /** Choose how many months to show. TablesList calls its children once for each month. */
230
229
  visibleDuration?: Pick<NonNullable<CalendarProps<CalendarDate>['visibleDuration']>, 'months'>;
@@ -253,12 +252,12 @@ export declare function Item({ disableStyle, value, className, textValue, ...pro
253
252
  className?: string;
254
253
  style?: ComponentProps<'div'>['style'];
255
254
  }) & StyleProps): import("react").JSX.Element;
256
- export declare const ItemText: import("react").ForwardRefExoticComponent<Omit<Omit<import("react-aria-components/DatePicker").TextProps & import("react").RefAttributes<HTMLElement>, "slot" | "render"> & StyleProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
255
+ export declare function ItemText({ disableStyle, className, ref, ...props }: Omit<ComponentProps<typeof Text>, 'slot' | 'render'> & StyleProps): import("react").JSX.Element;
257
256
  /** Tracks the surrounding item state automatically. Keep it mounted; do not add your own visibility condition. Use the supplied default visual unless customization is needed. */
258
- export declare const ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Omit<SVGIconProps, "children"> & {
257
+ export declare function ItemIndicator({ disableStyle, children, ref, ...props }: Omit<SVGIconProps, 'children'> & {
259
258
  /** Optional replacement SVG icon. It receives this indicator's props and ref. */
260
259
  children?: ReactElement<SVGIconProps>;
261
- } & StyleProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
260
+ } & StyleProps): import("react").FunctionComponentElement<any> | null;
262
261
  export declare function Actions({ disableStyle, className, ...props }: ComponentProps<'div'> & StyleProps): import("react").JSX.Element;
263
262
  export declare function ViewDateValue({ disableStyle, className, level, ...props }: (Omit<ComponentProps<'h2'>, 'children'> & Pick<ComponentProps<typeof Heading>, 'level'>) & StyleProps): import("react").JSX.Element;
264
263
  export declare function PreviousButton({ disableStyle, className, isDisabled, ...props }: StyledButtonProps & StyleProps): import("react").JSX.Element;