@yamada-ui/react 2.2.1-dev-20260511135752 → 2.2.1-dev-20260511183442

package/dist/esm/hooks/use-combobox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["createContext"],"sources":["../../../../src/hooks/use-combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  JSXElementConstructor,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n} from \"react\"\nimport type { UsePopoverProps } from \"../../components/popover\"\nimport type { HTMLProps, PropGetter, SimpleDirection } from \"../../core\"\nimport type { Descendant } from \"../use-descendants\"\nimport type { UseDisclosureProps } from \"../use-disclosure\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { usePopoverProps } from \"../../components/popover\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  findChild,\n  getValidChildren,\n  handlerAll,\n  isComposing,\n  isSomeElement,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { createDescendants } from \"../use-descendants\"\nimport { useDisclosure } from \"../use-disclosure\"\n\ninterface ComboboxSharedItem extends Omit<HTMLProps, \"children\" | \"value\"> {\n  label: ReactNode\n}\n\nexport interface ComboboxItemWithValue extends ComboboxSharedItem {\n  query?: string\n  value?: string\n}\n\nexport interface ComboboxItemWithItems extends ComboboxSharedItem {\n  items: ComboboxItemWithValue[]\n}\n\nexport type ComboboxItem = ComboboxItemWithItems | ComboboxItemWithValue\n\nexport interface CreateComboboxItemOptions {\n  Group: JSXElementConstructor<any>\n  Label: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n}\n\nexport const createComboboxItem = (\n  children: ReactNode,\n  { Group, Label, Option }: CreateComboboxItemOptions,\n) => {\n  const validChildren = getValidChildren(children)\n\n  return validChildren\n    .filter(\n      ({ type }) => isSomeElement(type, Option) || isSomeElement(type, Group),\n    )\n    .map(({ type, props }) => {\n      if (isSomeElement(type, Option)) {\n        return { ...props, label: props.children }\n      } else {\n        const validChildren = getValidChildren(props.children)\n        const label = findChild(validChildren, Label)\n\n        return {\n          ...props,\n          items: validChildren\n            .filter(({ type }) => isSomeElement(type, Option))\n            .map(({ props }) => ({ ...props, label: props.children })),\n          label: label?.props.children ?? props.label,\n        }\n      }\n    })\n}\n\nexport interface CreateComboboxChildrenOptions {\n  Group: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n  Empty?: JSXElementConstructor<any>\n}\n\nexport const createComboboxChildren = (\n  items: ComboboxItem[],\n  { Empty, Group, Option }: CreateComboboxChildrenOptions,\n) => {\n  return items.map((item, index) => {\n    if (\"data-empty\" in item && Empty) {\n      const { label, ...rest } = item\n\n      return (\n        <Empty key={index} {...rest}>\n          {label}\n        </Empty>\n      )\n    } else if (\"items\" in item) {\n      const { items, label, ...rest } = item\n\n      return (\n        <Group key={index} label={label} {...rest}>\n          {items.map(({ label, ...rest }, index) => (\n            <Option key={index} {...rest}>\n              {label}\n            </Option>\n          ))}\n        </Group>\n      )\n    } else {\n      const { label, ...rest } = item\n\n      return (\n        <Option key={index} {...rest}>\n          {label}\n        </Option>\n      )\n    }\n  })\n}\n\nexport interface ComboboxDescendantProps {\n  id: string\n  closeOnSelect?: boolean\n  value?: string\n}\nexport type ComboboxDescendant = Descendant<\n  HTMLDivElement,\n  ComboboxDescendantProps\n>\n\nconst {\n  DescendantsContext: ComboboxDescendantsContext,\n  useDescendant: useComboboxDescendant,\n  useDescendantRegister: useComboboxDescendantRegister,\n  useDescendants: useComboboxDescendants,\n} = createDescendants<HTMLDivElement, ComboboxDescendantProps>()\n\nexport {\n  ComboboxDescendantsContext,\n  useComboboxDescendant,\n  useComboboxDescendantRegister,\n  useComboboxDescendants,\n}\n\ninterface ComboboxContext extends Pick<\n  UseComboboxReturn,\n  \"onActiveDescendant\" | \"onClose\" | \"onSelect\"\n> {}\n\nconst [ComboboxContext, useComboboxContext] = createContext<ComboboxContext>({\n  name: \"ComboboxContext\",\n})\n\ninterface ComboboxGroupContext extends Pick<\n  UseComboboxGroupReturn,\n  \"getLabelProps\"\n> {}\n\nconst [ComboboxGroupContext, useComboboxGroupContext] =\n  createContext<ComboboxGroupContext>({\n    name: \"ComboboxGroupContext\",\n  })\n\nexport {\n  ComboboxContext,\n  ComboboxGroupContext,\n  useComboboxContext,\n  useComboboxGroupContext,\n}\n\nexport interface UseComboboxProps\n  extends\n    Omit<HTMLProps, \"onChange\">,\n    Omit<UseDisclosureProps, \"timing\">,\n    Omit<\n      UsePopoverProps,\n      \"autoFocus\" | \"initialFocusRef\" | \"modal\" | \"transform\" | \"updateRef\"\n    > {\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default true\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the combobox will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The value to focus on when the combobox is opened.\n   */\n  initialFocusValue?: string\n  /**\n   * If `true`, the combobox will be opened when click on the field.\n   *\n   * @default true\n   */\n  openOnClick?: boolean\n  /**\n   * If `true`, the combobox will be opened when enter is pressed.\n   *\n   * @default true\n   */\n  openOnEnter?: boolean\n  /**\n   * If `true`, the combobox will be opened when space is pressed.\n   *\n   * @default true\n   */\n  openOnSpace?: boolean\n  /**\n   * If `true`, the combobox will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The `ref` of the element that should receive focus when selected.\n   */\n  selectFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the item will be selected when space is pressed.\n   *\n   * @default true\n   */\n  selectOnSpace?: boolean\n  /**\n   * The callback invoked when value is selected.\n   */\n  onChange?: (value: string) => void\n}\n\nexport const useCombobox = (props: UseComboboxProps = {}) => {\n  const [\n    { matchWidth = true, ...popoverProps },\n    {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      closeOnSelect: closeOnSelectProp = true,\n      defaultOpen,\n      disabled,\n      initialFocusValue,\n      open: openProp,\n      openOnClick = true,\n      openOnEnter = true,\n      openOnSpace = true,\n      readOnly,\n      selectFocusRef,\n      selectOnSpace = true,\n      onChange: onChangeProp,\n      onClose: onCloseProp,\n      onOpen: onOpenProp,\n      ...rest\n    },\n  ] = usePopoverProps(props, [\n    \"disabled\",\n    \"open\",\n    \"defaultOpen\",\n    \"onOpen\",\n    \"onClose\",\n    \"openOnClick\",\n  ])\n  const { getWindow } = useEnvironment()\n  const interactive = !(readOnly || disabled)\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n  const descendants = useComboboxDescendants()\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const activeDescendant = useRef<ComboboxDescendant | null>(null)\n  const mergedPopoverProps = useMemo<UsePopoverProps>(\n    () => ({\n      autoFocus: false,\n      matchWidth,\n      openOnClick: false,\n      ...popoverProps,\n      disabled: !interactive,\n      open,\n      onClose,\n      onOpen,\n    }),\n    [interactive, matchWidth, onClose, onOpen, open, popoverProps],\n  )\n\n  const onSelect = useCallback(\n    (value?: string, closeOnSelect = closeOnSelectProp) => {\n      const ref = selectFocusRef ?? triggerRef\n\n      ref.current?.focus()\n\n      if (!interactive || isUndefined(value)) return\n\n      onChangeProp?.(value)\n\n      if (!closeOnSelect) return\n\n      onClose()\n    },\n    [closeOnSelectProp, interactive, onChangeProp, onClose, selectFocusRef],\n  )\n\n  const onScrollIntoView = useCallback(\n    (descendant?: ComboboxDescendant, block: SimpleDirection = \"start\") => {\n      if (!contentRef.current || !descendant) return\n\n      const style = getWindow()?.getComputedStyle(contentRef.current)\n      const padding =\n        block === \"start\" ? style?.paddingBlockStart : style?.paddingBlockEnd\n      const value = parseInt(padding ?? \"0px\")\n\n      scrollIntoView(descendant.node, {\n        behavior: (actions) =>\n          actions.forEach(({ el, top }) => {\n            el.scrollTop = block === \"start\" ? top - value : top + value\n          }),\n        block,\n        boundary: contentRef.current,\n        inline: \"nearest\",\n        scrollMode: \"if-needed\",\n      })\n    },\n    [getWindow],\n  )\n\n  const onActiveDescendant = useCallback(\n    (descendant?: ComboboxDescendant) => {\n      if (!triggerRef.current || !descendant || disabled) return\n\n      triggerRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n      activeDescendant.current = descendant\n\n      descendants.active(descendant)\n    },\n    [descendants, disabled],\n  )\n\n  const onOpenWithActiveDescendant = useCallback(\n    (\n      getFallbackDescendant: () => ComboboxDescendant | undefined,\n      block: SimpleDirection = \"start\",\n    ) => {\n      onOpen()\n\n      setTimeout(() => {\n        if (!initialFocusValue) {\n          const descendant = getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        } else {\n          const values = descendants.values()\n          const descendant =\n            values.find(({ value }) => initialFocusValue === value) ??\n            getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        }\n      })\n    },\n    [\n      descendants,\n      initialFocusValue,\n      onActiveDescendant,\n      onOpen,\n      onScrollIntoView,\n    ],\n  )\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      ev.preventDefault()\n\n      if (!open) {\n        if (openOnClick)\n          onOpenWithActiveDescendant(descendants.enabledFirstValue)\n      } else {\n        onClose()\n      }\n    },\n    [\n      descendants,\n      disabled,\n      onClose,\n      onOpenWithActiveDescendant,\n      open,\n      openOnClick,\n    ],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || isComposing(ev)) return\n\n      runKeyAction(\n        ev,\n        {\n          ArrowDown: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledNextValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"start\" : \"end\",\n              )\n            } else {\n              const descendant = descendants.enabledFirstValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant)\n            }\n          },\n          ArrowUp: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledLastValue, \"end\")\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledPrevValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"end\" : \"start\",\n              )\n            } else {\n              const descendant = descendants.enabledLastValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant, \"end\")\n            }\n          },\n          End: (ev) => {\n            ev.preventDefault()\n\n            if (!open) return\n\n            const descendant = descendants.enabledLastValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant, \"end\")\n          },\n          Enter: (ev) => {\n            if (!open) {\n              if (!openOnEnter) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n          Home: (ev) => {\n            if (!open) return\n\n            ev.preventDefault()\n\n            const descendant = descendants.enabledFirstValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant)\n          },\n          Space: (ev) => {\n            if (!open) {\n              if (!openOnSpace) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current || !selectOnSpace) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n        },\n        { preventDefault: false },\n      )\n    },\n    [\n      disabled,\n      open,\n      onOpenWithActiveDescendant,\n      descendants,\n      onActiveDescendant,\n      onScrollIntoView,\n      openOnEnter,\n      onSelect,\n      openOnSpace,\n      selectOnSpace,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (open) return\n\n    activeDescendant.current = null\n  }, [open])\n\n  const getTriggerProps: PropGetter = useCallback(\n    ({\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) =>\n      mergeProps(\n        {\n          ref: triggerRef,\n          \"aria-controls\": open ? contentId : undefined,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-expanded\": open,\n          \"aria-haspopup\": \"listbox\",\n          \"aria-label\": ariaLabel || ariaLabelProp,\n          \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"combobox\",\n          tabIndex: interactive ? 0 : -1,\n        },\n        rest,\n        props,\n        { onClick, onKeyDown },\n      )(),\n    [\n      open,\n      contentId,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      ariaLabelProp,\n      rest,\n      onClick,\n      onKeyDown,\n    ],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: contentId,\n      role: \"listbox\",\n      ...props,\n      ref: mergeRefs(ref, contentRef),\n      onKeyDown: handlerAll(props.onKeyDown),\n    }),\n    [contentId],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({ role: \"separator\", ...props }),\n    [],\n  )\n\n  return {\n    activeDescendant,\n    descendants,\n    interactive,\n    open,\n    getContentProps,\n    getSeparatorProps,\n    getTriggerProps,\n    popoverProps: mergedPopoverProps,\n    onActiveDescendant,\n    onClose,\n    onOpen,\n    onOpenWithActiveDescendant,\n    onScrollIntoView,\n    onSelect,\n  }\n}\n\nexport type UseComboboxReturn = ReturnType<typeof useCombobox>\n\nexport interface UseComboboxGroupProps extends HTMLProps {}\n\nexport const useComboboxGroup = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseComboboxGroupProps = {}) => {\n  const labelId = useId()\n\n  const getGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [ariaLabelledbyProp, labelId, rest],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({ id: labelId, role: \"presentation\", ...props }),\n    [labelId],\n  )\n\n  return { getGroupProps, getLabelProps }\n}\n\nexport type UseComboboxGroupReturn = ReturnType<typeof useComboboxGroup>\n\nexport interface UseComboboxItemProps extends HTMLProps {\n  /**\n   * If `true`, the item will be closed when selected.\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the item will be selected.\n   */\n  selected?: boolean\n  /**\n   * The value of the item.\n   */\n  value?: string\n}\n\nexport const useComboboxItem = ({\n  id,\n  \"aria-disabled\": ariaDisabled,\n  \"data-disabled\": dataDisabled,\n  closeOnSelect,\n  disabled = false,\n  selected = false,\n  value,\n  ...rest\n}: UseComboboxItemProps = {}) => {\n  const uuid = useId()\n  const itemRef = useRef<HTMLDivElement>(null)\n  const { onActiveDescendant, onClose, onSelect } = useComboboxContext()\n\n  id ??= uuid\n\n  const { descendants, register } = useComboboxDescendant({\n    id,\n    closeOnSelect,\n    disabled,\n    value,\n  })\n\n  const onActive = useCallback(() => {\n    if (disabled) return\n\n    const current = descendants.value(itemRef.current)\n\n    onActiveDescendant(current)\n  }, [descendants, disabled, onActiveDescendant])\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      if (disabled) return\n\n      onSelect(value, closeOnSelect)\n    },\n    [closeOnSelect, disabled, onSelect, value],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps(\n        {\n          id,\n          ref: itemRef,\n          \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n          \"aria-selected\": selected,\n          \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n          \"data-selected\": dataAttr(selected),\n          \"data-value\": value,\n          role: \"option\",\n          tabIndex: -1,\n        },\n        rest,\n        props,\n        { ref: register, onClick, onMouseMove: onActive },\n      )(),\n    [\n      id,\n      ariaDisabled,\n      disabled,\n      selected,\n      dataDisabled,\n      value,\n      rest,\n      register,\n      onClick,\n      onActive,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(),\n    [selected],\n  )\n\n  return {\n    descendants,\n    disabled,\n    selected,\n    getIndicatorProps,\n    getItemProps,\n    onActiveDescendant,\n    onClose,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["createContext"],"sources":["../../../../src/hooks/use-combobox/index.tsx"],"sourcesContent":["\"use client\"\n\nimport type {\n  JSXElementConstructor,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  RefObject,\n} from \"react\"\nimport type { UsePopoverProps } from \"../../components/popover\"\nimport type { HTMLProps, PropGetter, SimpleDirection } from \"../../core\"\nimport type { Descendant } from \"../use-descendants\"\nimport type { UseDisclosureProps } from \"../use-disclosure\"\nimport { useCallback, useId, useMemo, useRef } from \"react\"\nimport scrollIntoView from \"scroll-into-view-if-needed\"\nimport { usePopoverProps } from \"../../components/popover\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport {\n  ariaAttr,\n  createContext,\n  cx,\n  dataAttr,\n  findChild,\n  getValidChildren,\n  handlerAll,\n  isComposing,\n  isSomeElement,\n  isUndefined,\n  mergeRefs,\n  runKeyAction,\n  useUpdateEffect,\n} from \"../../utils\"\nimport { createDescendants } from \"../use-descendants\"\nimport { useDisclosure } from \"../use-disclosure\"\n\ninterface ComboboxSharedItem extends Omit<HTMLProps, \"children\" | \"value\"> {\n  label: ReactNode\n}\n\nexport interface ComboboxItemWithValue extends ComboboxSharedItem {\n  query?: string\n  value?: string\n}\n\nexport interface ComboboxItemWithItems extends ComboboxSharedItem {\n  items: ComboboxItemWithValue[]\n}\n\nexport type ComboboxItem = ComboboxItemWithItems | ComboboxItemWithValue\n\nexport interface CreateComboboxItemOptions {\n  Group: JSXElementConstructor<any>\n  Label: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n}\n\nexport const createComboboxItem = (\n  children: ReactNode,\n  { Group, Label, Option }: CreateComboboxItemOptions,\n) => {\n  const validChildren = getValidChildren(children)\n\n  return validChildren\n    .filter(\n      ({ type }) => isSomeElement(type, Option) || isSomeElement(type, Group),\n    )\n    .map(({ type, props }) => {\n      if (isSomeElement(type, Option)) {\n        return { ...props, label: props.children }\n      } else {\n        const validChildren = getValidChildren(props.children)\n        const label = findChild(validChildren, Label)\n\n        return {\n          ...props,\n          items: validChildren\n            .filter(({ type }) => isSomeElement(type, Option))\n            .map(({ props }) => ({ ...props, label: props.children })),\n          label: label?.props.children ?? props.label,\n        }\n      }\n    })\n}\n\nexport interface CreateComboboxChildrenOptions {\n  Group: JSXElementConstructor<any>\n  Option: JSXElementConstructor<any>\n  Empty?: JSXElementConstructor<any>\n}\n\nexport const createComboboxChildren = (\n  items: ComboboxItem[],\n  { Empty, Group, Option }: CreateComboboxChildrenOptions,\n) => {\n  return items.map((item, index) => {\n    if (\"data-empty\" in item && Empty) {\n      const { label, ...rest } = item\n\n      return (\n        <Empty key={index} {...rest}>\n          {label}\n        </Empty>\n      )\n    } else if (\"items\" in item) {\n      const { items, label, ...rest } = item\n\n      return (\n        <Group key={index} label={label} {...rest}>\n          {items.map(({ label, ...rest }, index) => (\n            <Option key={index} {...rest}>\n              {label}\n            </Option>\n          ))}\n        </Group>\n      )\n    } else {\n      const { label, ...rest } = item\n\n      return (\n        <Option key={index} {...rest}>\n          {label}\n        </Option>\n      )\n    }\n  })\n}\n\nexport interface ComboboxDescendantProps {\n  id: string\n  closeOnSelect?: boolean\n  value?: string\n}\nexport type ComboboxDescendant = Descendant<\n  HTMLDivElement,\n  ComboboxDescendantProps\n>\n\nconst {\n  DescendantsContext: ComboboxDescendantsContext,\n  useDescendant: useComboboxDescendant,\n  useDescendantRegister: useComboboxDescendantRegister,\n  useDescendants: useComboboxDescendants,\n} = createDescendants<HTMLDivElement, ComboboxDescendantProps>()\n\nexport {\n  ComboboxDescendantsContext,\n  useComboboxDescendant,\n  useComboboxDescendantRegister,\n  useComboboxDescendants,\n}\n\ninterface ComboboxContext extends Pick<\n  UseComboboxReturn,\n  \"onActiveDescendant\" | \"onClose\" | \"onSelect\"\n> {}\n\nconst [ComboboxContext, useComboboxContext] = createContext<ComboboxContext>({\n  name: \"ComboboxContext\",\n})\n\ninterface ComboboxGroupContext extends Pick<\n  UseComboboxGroupReturn,\n  \"getLabelProps\"\n> {}\n\nconst [ComboboxGroupContext, useComboboxGroupContext] =\n  createContext<ComboboxGroupContext>({\n    name: \"ComboboxGroupContext\",\n  })\n\nexport {\n  ComboboxContext,\n  ComboboxGroupContext,\n  useComboboxContext,\n  useComboboxGroupContext,\n}\n\nexport interface UseComboboxProps\n  extends\n    Omit<HTMLProps, \"onChange\">,\n    Omit<UseDisclosureProps, \"timing\">,\n    Omit<\n      UsePopoverProps,\n      \"autoFocus\" | \"initialFocusRef\" | \"modal\" | \"transform\" | \"updateRef\"\n    > {\n  /**\n   * If `true`, the list element will be closed when value is selected.\n   *\n   * @default true\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the combobox will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The value to focus on when the combobox is opened.\n   */\n  initialFocusValue?: string\n  /**\n   * If `true`, the combobox will be opened when click on the field.\n   *\n   * @default true\n   */\n  openOnClick?: boolean\n  /**\n   * If `true`, the combobox will be opened when enter is pressed.\n   *\n   * @default true\n   */\n  openOnEnter?: boolean\n  /**\n   * If `true`, the combobox will be opened when space is pressed.\n   *\n   * @default true\n   */\n  openOnSpace?: boolean\n  /**\n   * If `true`, the combobox will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The `ref` of the element that should receive focus when selected.\n   */\n  selectFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the item will be selected when space is pressed.\n   *\n   * @default true\n   */\n  selectOnSpace?: boolean\n  /**\n   * The callback invoked when value is selected.\n   */\n  onChange?: (value: string) => void\n}\n\nexport const useCombobox = (props: UseComboboxProps = {}) => {\n  const [\n    { matchWidth = true, ...popoverProps },\n    {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledbyProp,\n      closeOnSelect: closeOnSelectProp = true,\n      defaultOpen,\n      disabled,\n      initialFocusValue,\n      open: openProp,\n      openOnClick = true,\n      openOnEnter = true,\n      openOnSpace = true,\n      readOnly,\n      selectFocusRef,\n      selectOnSpace = true,\n      onChange: onChangeProp,\n      onClose: onCloseProp,\n      onOpen: onOpenProp,\n      ...rest\n    },\n  ] = usePopoverProps(props, [\n    \"disabled\",\n    \"open\",\n    \"defaultOpen\",\n    \"onOpen\",\n    \"onClose\",\n    \"openOnClick\",\n  ])\n  const { getWindow } = useEnvironment()\n  const interactive = !(readOnly || disabled)\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const contentId = useId()\n  const descendants = useComboboxDescendants()\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const activeDescendant = useRef<ComboboxDescendant | null>(null)\n  const mergedPopoverProps = useMemo<UsePopoverProps>(\n    () => ({\n      autoFocus: false,\n      matchWidth,\n      openOnClick: false,\n      ...popoverProps,\n      disabled: !interactive,\n      open,\n      onClose,\n      onOpen,\n    }),\n    [interactive, matchWidth, onClose, onOpen, open, popoverProps],\n  )\n\n  const onSelect = useCallback(\n    (value?: string, closeOnSelect = closeOnSelectProp) => {\n      const ref = selectFocusRef ?? triggerRef\n\n      ref.current?.focus()\n\n      if (!interactive || isUndefined(value)) return\n\n      onChangeProp?.(value)\n\n      if (!closeOnSelect) return\n\n      onClose()\n    },\n    [closeOnSelectProp, interactive, onChangeProp, onClose, selectFocusRef],\n  )\n\n  const onScrollIntoView = useCallback(\n    (descendant?: ComboboxDescendant, block: SimpleDirection = \"start\") => {\n      if (!contentRef.current || !descendant) return\n\n      const style = getWindow()?.getComputedStyle(contentRef.current)\n      const padding =\n        block === \"start\" ? style?.paddingBlockStart : style?.paddingBlockEnd\n      const value = parseInt(padding ?? \"0px\")\n\n      scrollIntoView(descendant.node, {\n        behavior: (actions) =>\n          actions.forEach(({ el, top }) => {\n            el.scrollTop = block === \"start\" ? top - value : top + value\n          }),\n        block,\n        boundary: contentRef.current,\n        inline: \"nearest\",\n        scrollMode: \"if-needed\",\n      })\n    },\n    [getWindow],\n  )\n\n  const onActiveDescendant = useCallback(\n    (descendant?: ComboboxDescendant) => {\n      if (!triggerRef.current || !descendant || disabled) return\n\n      triggerRef.current.setAttribute(\"aria-activedescendant\", descendant.id)\n\n      activeDescendant.current = descendant\n\n      descendants.active(descendant)\n    },\n    [descendants, disabled],\n  )\n\n  const onOpenWithActiveDescendant = useCallback(\n    (\n      getFallbackDescendant: () => ComboboxDescendant | undefined,\n      block: SimpleDirection = \"start\",\n    ) => {\n      onOpen()\n\n      setTimeout(() => {\n        if (!initialFocusValue) {\n          const descendant = getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        } else {\n          const values = descendants.values()\n          const descendant =\n            values.find(({ value }) => initialFocusValue === value) ??\n            getFallbackDescendant()\n\n          onActiveDescendant(descendant)\n          onScrollIntoView(descendant, block)\n        }\n      })\n    },\n    [\n      descendants,\n      initialFocusValue,\n      onActiveDescendant,\n      onOpen,\n      onScrollIntoView,\n    ],\n  )\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n\n      ev.preventDefault()\n\n      if (!open) {\n        if (openOnClick)\n          onOpenWithActiveDescendant(descendants.enabledFirstValue)\n      } else {\n        onClose()\n      }\n    },\n    [\n      descendants,\n      disabled,\n      onClose,\n      onOpenWithActiveDescendant,\n      open,\n      openOnClick,\n    ],\n  )\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLDivElement>) => {\n      if (disabled || isComposing(ev)) return\n\n      runKeyAction(\n        ev,\n        {\n          ArrowDown: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledNextValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"start\" : \"end\",\n              )\n            } else {\n              const descendant = descendants.enabledFirstValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant)\n            }\n          },\n          ArrowUp: (ev) => {\n            ev.preventDefault()\n\n            if (!open) {\n              onOpenWithActiveDescendant(descendants.enabledLastValue, \"end\")\n            } else if (activeDescendant.current) {\n              const descendant = descendants.enabledPrevValue(\n                activeDescendant.current,\n              )\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(\n                descendant,\n                descendant?.recurred ? \"end\" : \"start\",\n              )\n            } else {\n              const descendant = descendants.enabledLastValue()\n\n              onActiveDescendant(descendant)\n\n              onScrollIntoView(descendant, \"end\")\n            }\n          },\n          End: (ev) => {\n            ev.preventDefault()\n\n            if (!open) return\n\n            const descendant = descendants.enabledLastValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant, \"end\")\n          },\n          Enter: (ev) => {\n            if (!open) {\n              if (!openOnEnter) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n          Home: (ev) => {\n            if (!open) return\n\n            ev.preventDefault()\n\n            const descendant = descendants.enabledFirstValue()\n\n            onActiveDescendant(descendant)\n\n            onScrollIntoView(descendant)\n          },\n          Space: (ev) => {\n            if (!open) {\n              if (!openOnSpace) return\n\n              ev.preventDefault()\n\n              onOpenWithActiveDescendant(descendants.enabledFirstValue)\n            } else {\n              if (!activeDescendant.current || !selectOnSpace) return\n\n              ev.preventDefault()\n\n              const { closeOnSelect, value } = activeDescendant.current\n\n              onSelect(value, closeOnSelect)\n            }\n          },\n        },\n        { preventDefault: false },\n      )\n    },\n    [\n      disabled,\n      open,\n      onOpenWithActiveDescendant,\n      descendants,\n      onActiveDescendant,\n      onScrollIntoView,\n      openOnEnter,\n      onSelect,\n      openOnSpace,\n      selectOnSpace,\n    ],\n  )\n\n  useUpdateEffect(() => {\n    if (open) return\n\n    activeDescendant.current = null\n  }, [open])\n\n  const getTriggerProps: PropGetter = useCallback(\n    ({\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => ({\n      ...mergeProps(\n        {\n          ref: triggerRef,\n          \"aria-controls\": open ? contentId : undefined,\n          \"aria-disabled\": ariaAttr(!interactive),\n          \"aria-expanded\": open,\n          \"aria-haspopup\": \"listbox\",\n          \"aria-label\": ariaLabel || ariaLabelProp,\n          \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n          \"data-disabled\": dataAttr(disabled),\n          \"data-readonly\": dataAttr(readOnly),\n          role: \"combobox\",\n          tabIndex: interactive ? 0 : -1,\n        },\n        rest,\n        props,\n      )({ mergeEvent: false }),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onKeyDown: handlerAll(props.onKeyDown, rest.onKeyDown, onKeyDown),\n    }),\n    [\n      open,\n      contentId,\n      interactive,\n      ariaLabelledbyProp,\n      disabled,\n      readOnly,\n      ariaLabelProp,\n      rest,\n      onClick,\n      onKeyDown,\n    ],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: contentId,\n      role: \"listbox\",\n      ...props,\n      ref: mergeRefs(ref, contentRef),\n      onKeyDown: handlerAll(props.onKeyDown),\n    }),\n    [contentId],\n  )\n\n  const getSeparatorProps: PropGetter = useCallback(\n    (props) => ({ role: \"separator\", ...props }),\n    [],\n  )\n\n  return {\n    activeDescendant,\n    descendants,\n    interactive,\n    open,\n    getContentProps,\n    getSeparatorProps,\n    getTriggerProps,\n    popoverProps: mergedPopoverProps,\n    onActiveDescendant,\n    onClose,\n    onOpen,\n    onOpenWithActiveDescendant,\n    onScrollIntoView,\n    onSelect,\n  }\n}\n\nexport type UseComboboxReturn = ReturnType<typeof useCombobox>\n\nexport interface UseComboboxGroupProps extends HTMLProps {}\n\nexport const useComboboxGroup = ({\n  \"aria-labelledby\": ariaLabelledbyProp,\n  ...rest\n}: UseComboboxGroupProps = {}) => {\n  const labelId = useId()\n\n  const getGroupProps: PropGetter = useCallback(\n    ({ \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n      mergeProps(\n        {\n          \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, labelId),\n          role: \"group\",\n        },\n        rest,\n        props,\n      )(),\n    [ariaLabelledbyProp, labelId, rest],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props) => ({ id: labelId, role: \"presentation\", ...props }),\n    [labelId],\n  )\n\n  return { getGroupProps, getLabelProps }\n}\n\nexport type UseComboboxGroupReturn = ReturnType<typeof useComboboxGroup>\n\nexport interface UseComboboxItemProps extends HTMLProps {\n  /**\n   * If `true`, the item will be closed when selected.\n   */\n  closeOnSelect?: boolean\n  /**\n   * If `true`, the item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, the item will be selected.\n   */\n  selected?: boolean\n  /**\n   * The value of the item.\n   */\n  value?: string\n}\n\nexport const useComboboxItem = ({\n  id,\n  \"aria-disabled\": ariaDisabled,\n  \"data-disabled\": dataDisabled,\n  closeOnSelect,\n  disabled = false,\n  selected = false,\n  value,\n  ...rest\n}: UseComboboxItemProps = {}) => {\n  const uuid = useId()\n  const itemRef = useRef<HTMLDivElement>(null)\n  const { onActiveDescendant, onClose, onSelect } = useComboboxContext()\n\n  id ??= uuid\n\n  const { descendants, register } = useComboboxDescendant({\n    id,\n    closeOnSelect,\n    disabled,\n    value,\n  })\n\n  const onActive = useCallback(() => {\n    if (disabled) return\n\n    const current = descendants.value(itemRef.current)\n\n    onActiveDescendant(current)\n  }, [descendants, disabled, onActiveDescendant])\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLDivElement>) => {\n      ev.preventDefault()\n\n      if (disabled) return\n\n      onSelect(value, closeOnSelect)\n    },\n    [closeOnSelect, disabled, onSelect, value],\n  )\n\n  const getItemProps: PropGetter = useCallback(\n    (props = {}) => ({\n      ...mergeProps(\n        {\n          id,\n          ref: itemRef,\n          \"aria-disabled\": ariaDisabled ?? ariaAttr(disabled),\n          \"aria-selected\": selected,\n          \"data-disabled\": dataDisabled ?? dataAttr(disabled),\n          \"data-selected\": dataAttr(selected),\n          \"data-value\": value,\n          role: \"option\",\n          tabIndex: -1,\n        },\n        rest,\n        props,\n        { ref: register },\n      )({ mergeEvent: false }),\n      onClick: handlerAll(props.onClick, rest.onClick, onClick),\n      onMouseMove: handlerAll(props.onMouseMove, rest.onMouseMove, onActive),\n    }),\n    [\n      id,\n      ariaDisabled,\n      disabled,\n      selected,\n      dataDisabled,\n      value,\n      rest,\n      register,\n      onClick,\n      onActive,\n    ],\n  )\n\n  const getIndicatorProps: PropGetter = useCallback(\n    (props = {}) =>\n      mergeProps({ style: { opacity: selected ? 1 : 0 } }, props)(),\n    [selected],\n  )\n\n  return {\n    descendants,\n    disabled,\n    selected,\n    getIndicatorProps,\n    getItemProps,\n    onActiveDescendant,\n    onClose,\n  }\n}\n"],"mappings":"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"}

package/dist/types/components/accordion/accordion.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/accordion/accordion.style.d.ts
-declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
+declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/autocomplete/autocomplete.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/breadcrumb/breadcrumb.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/breadcrumb/breadcrumb.style.d.ts
-declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "root" | "item", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "root" | "item">>, {
+declare const breadcrumbStyle: ComponentSlotStyle<"link" | "list" | "separator" | "ellipsis" | "item" | "root", CSSPropObject<CSSSlotObject<"link" | "list" | "separator" | "ellipsis" | "item" | "root">>, {
   sm: {
     list: {
       fontSize: "sm";

package/dist/types/components/calendar/calendar.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/calendar/calendar.style.d.ts
-declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks", {
+declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "control" | "months" | "prev" | "weeks" | "years", {
   /**
    * If `true`, the calendar will be fixed rows.
    *
@@ -73,7 +73,7 @@ declare const calendarStyle: ComponentSlotStyle<"button" | "select" | "cell" | "
       "--font-size": "fontSizes.xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "prev" | "month" | "week" | "control" | "weekday" | "day" | "months" | "years" | "weeks">>>;
+}, CSSModifierObject<CSSSlotObject<"button" | "select" | "cell" | "navigation" | "row" | "separator" | "next" | "root" | "month" | "week" | "weekday" | "day" | "control" | "months" | "prev" | "weeks" | "years">>>;
 type CalendarStyle = typeof calendarStyle;
 //#endregion
 export { CalendarStyle, calendarStyle };

package/dist/types/components/carousel/carousel.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/carousel/carousel.style.d.ts
-declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "trigger" | "prev" | "indicator" | "item" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "prev" | "indicator" | "item" | "indicators">>, {
+declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "item" | "root" | "trigger" | "indicator" | "prev" | "indicators", CSSPropObject<CSSSlotObject<"list" | "next" | "item" | "root" | "trigger" | "indicator" | "prev" | "indicators">>, {
   sm: {
     root: {
       h: "sm";
@@ -17,7 +17,7 @@ declare const carouselStyle: ComponentSlotStyle<"list" | "next" | "root" | "trig
       h: "lg";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"list" | "next" | "root" | "trigger" | "prev" | "indicator" | "item" | "indicators">>>;
+}, CSSModifierObject<CSSSlotObject<"list" | "next" | "item" | "root" | "trigger" | "indicator" | "prev" | "indicators">>>;
 type CarouselStyle = typeof carouselStyle;
 //#endregion
 export { CarouselStyle, carouselStyle };

package/dist/types/components/chart/cartesian-chart.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/chart/cartesian-chart.style.d.ts
-declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 export { CartesianChartStyle, cartesianChartStyle };

package/dist/types/components/chart/polar-chart.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

package/dist/types/components/checkbox-card/checkbox-card.d.ts

@@ -63,7 +63,7 @@ interface CheckboxCardRootProps<Y extends string = string> extends Merge<HTMLSty
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -213,7 +213,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: _$react.Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -363,7 +363,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/checkbox-card/checkbox-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/checkbox-card/checkbox-card.style.d.ts
-declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/color-picker/color-picker.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/color-picker/color-picker.style.d.ts
-declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "colorSwatch" | "field" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "colorSwatch" | "field" | "eyeDropper">>, {
+declare const colorPickerStyle: ComponentSlotStyle<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper", CSSPropObject<CSSSlotObject<"input" | "content" | "icon" | "root" | "field" | "colorSwatch" | "eyeDropper">>, {
   xs: {
     field: {
       fontSize: "1em";

package/dist/types/components/data-list/data-list.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/data-list/data-list.style.d.ts
-declare const dataListStyle: ComponentSlotStyle<"term" | "root" | "item" | "description", {
+declare const dataListStyle: ComponentSlotStyle<"term" | "item" | "root" | "description", {
   /**
    * The orientation of the data list.
    *

package/dist/types/components/empty-state/empty-state.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/empty-state/empty-state.style.d.ts
-declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>, {
+declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>, {
   sm: {
     content: {
       gap: "xs";
@@ -47,7 +47,7 @@ declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "ind
       fontSize: "xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>>;
 type EmptyState = typeof emptyState;
 //#endregion
 export { EmptyState, emptyState };

package/dist/types/components/flip/flip.d.ts

@@ -82,7 +82,7 @@ declare const Flip: Component<({
   onChange,
   onClick: onClickProp,
   ...rest
-}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
+}: WithoutThemeProps<FlipProps, ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>, keyof FlipProps>) => _$react_jsx_runtime0.JSX.Element, FlipProps>;
 //#endregion
 export { Flip, FlipProps, FlipPropsContext, useFlipPropsContext };
 //# sourceMappingURL=flip.d.ts.map

package/dist/types/components/flip/flip.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/flip/flip.style.d.ts
-declare const flipStyle: ComponentSlotStyle<"from" | "to" | "root" | "item", CSSPropObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "root" | "item">>>;
+declare const flipStyle: ComponentSlotStyle<"from" | "to" | "item" | "root", CSSPropObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"from" | "to" | "item" | "root">>>;
 type FlipStyle = typeof flipStyle;
 //#endregion
 export { FlipStyle, flipStyle };

package/dist/types/components/list/list.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/list/list.style.d.ts
-declare const listStyle: ComponentSlotStyle<"icon" | "root" | "item", {
+declare const listStyle: ComponentSlotStyle<"icon" | "item" | "root", {
   styleType: {
     circle: {
       root: {
@@ -35,7 +35,7 @@ declare const listStyle: ComponentSlotStyle<"icon" | "root" | "item", {
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>, CSSModifierObject<CSSSlotObject<"icon" | "root" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root">>>;
 type ListStyle = typeof listStyle;
 //#endregion
 export { ListStyle, listStyle };

package/dist/types/components/menu/menu.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/menu/menu.style.d.ts
-declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>, {
+declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator", CSSPropObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>, {
   sm: {
     command: {
       fontSize: "2xs";
@@ -86,7 +86,7 @@ declare const menuStyle: ComponentSlotStyle<"footer" | "header" | "label" | "con
       px: "2";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "indicator" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"footer" | "header" | "label" | "content" | "command" | "group" | "separator" | "item" | "indicator">>>;
 type MenuStyle = typeof menuStyle;
 //#endregion
 export { MenuStyle, menuStyle };

package/dist/types/components/native-accordion/native-accordion.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/native-accordion/native-accordion.style.d.ts
-declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "root" | "item", {
+declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", {
   /**
    * If `true`, animate the accordion items when they are expanded or collapsed.
    *
@@ -31,7 +31,7 @@ declare const nativeAccordionStyle: ComponentSlotStyle<"button" | "panel" | "ico
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "root" | "item">>, {
+}, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
   panel: {
     button: {
       rounded: "l2";

package/dist/types/components/notice/notice.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/notice/notice.style.d.ts
-declare const noticeStyle: ComponentSlotStyle<"content" | "root" | "closeButton" | "item", CSSPropObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>, CSSModifierObject<CSSSlotObject<"content" | "root" | "closeButton" | "item">>>;
+declare const noticeStyle: ComponentSlotStyle<"content" | "item" | "root" | "closeButton", CSSPropObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>, CSSModifierObject<CSSSlotObject<"content" | "item" | "root" | "closeButton">>>;
 type NoticeStyle = typeof noticeStyle;
 //#endregion
 export { NoticeStyle };

package/dist/types/components/number-input/number-input.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/number-input/number-input.style.d.ts
-declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "decrement" | "increment" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "decrement" | "increment" | "control">>, {
+declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "field" | "control" | "decrement" | "increment", CSSPropObject<CSSSlotObject<"button" | "root" | "field" | "control" | "decrement" | "increment">>, {
   xs: {
     control: {
       boxSize: "calc({--height} - {spaces.2})";

package/dist/types/components/pagination/pagination.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/pagination/pagination.style.d.ts
-declare const paginationStyle: ComponentSlotStyle<"text" | "root" | "item", CSSPropObject<CSSSlotObject<"text" | "root" | "item">>, {
+declare const paginationStyle: ComponentSlotStyle<"text" | "item" | "root", CSSPropObject<CSSSlotObject<"text" | "item" | "root">>, {
   xs: {
     item: {
       fontSize: "{font-size}";

package/dist/types/components/radio-card/radio-card.d.ts

@@ -55,7 +55,7 @@ interface RadioCardRootProps<Y extends string = string> extends Merge<HTMLStyled
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const component: <H extends "fragment" | As = "div", R extends _$_yamada_ui_utils0.Dict = _$_yamada_ui_utils0.Dict<any>>(el: H | _$react.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -232,7 +232,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? _$react.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: _$react.Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends _$_yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {
@@ -409,7 +409,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _$_yamada
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
     justify: {
       end: {
         addon: {

package/dist/types/components/radio-card/radio-card.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/radio-card/radio-card.style.d.ts
-declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
+declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/rating/rating.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/rating/rating.style.d.ts
-declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item", CSSPropObject<CSSSlotObject<"group" | "icon" | "root" | "item">>, {
+declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"group" | "icon" | "item" | "root">>, {
   xs: {
     icon: {
       fontSize: "md";
@@ -27,7 +27,7 @@ declare const ratingStyle: ComponentSlotStyle<"group" | "icon" | "root" | "item"
       fontSize: "3xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "root" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"group" | "icon" | "item" | "root">>>;
 type RatingStyle = typeof ratingStyle;
 //#endregion
 export { RatingStyle, ratingStyle };

package/dist/types/components/reorder/reorder.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/reorder/reorder.style.d.ts
-declare const reorderStyle: ComponentSlotStyle<"root" | "trigger" | "item", {
+declare const reorderStyle: ComponentSlotStyle<"item" | "root" | "trigger", {
   /**
    * The orientation of the reorder.
    *

package/dist/types/components/resizable/resizable.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/resizable/resizable.style.d.ts
-declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "trigger" | "item", {
+declare const resizableStyle: ComponentSlotStyle<"icon" | "item" | "root" | "trigger", {
   /**
    * The orientation of the resizable.
    *
@@ -19,7 +19,7 @@ declare const resizableStyle: ComponentSlotStyle<"icon" | "root" | "trigger" | "
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"icon" | "root" | "trigger" | "item">>, {
+}, CSSModifierObject<CSSSlotObject<"icon" | "item" | "root" | "trigger">>, {
   border: {
     icon: {
       bg: "colorScheme.muted";

package/dist/types/components/segmented-control/segmented-control.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.types.js";
 //#region src/components/segmented-control/segmented-control.style.d.ts
-declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "item", {
+declare const segmentedControlStyle: ComponentSlotStyle<"item" | "root" | "indicator", {
   /**
    * If `true`, the segmented control will be full rounded.
    *
@@ -113,7 +113,7 @@ declare const segmentedControlStyle: ComponentSlotStyle<"root" | "indicator" | "
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"root" | "indicator" | "item">>>;
+}, CSSModifierObject<CSSSlotObject<"item" | "root" | "indicator">>>;
 type SegmentedControlStyle = typeof segmentedControlStyle;
 //#endregion
 export { SegmentedControlStyle, segmentedControlStyle };

package/dist/types/components/steps/steps.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/steps/steps.style.d.ts
-declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "indicator" | "item" | "description", {
+declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "item" | "root" | "description" | "indicator", {
   /**
    * The orientation of the steps.
    *

package/dist/types/components/timeline/timeline.d.ts

@@ -69,7 +69,7 @@ declare const TimelineRoot: Component<({
   index,
   items,
   ...rest
-}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "item" | "description" | "connector", {
+}: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector", {
   align: {
     center: {
       content: {

package/dist/types/components/timeline/timeline.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/timeline/timeline.style.d.ts
-declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "item" | "description" | "connector", {
+declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "item" | "root" | "description" | "indicator" | "connector", {
   /**
    * The alignment of the timeline.
    *

package/dist/types/components/tree/tree.style.d.ts

@@ -1,6 +1,6 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 //#region src/components/tree/tree.style.d.ts
-declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "root" | "indicator" | "item", {
+declare const treeStyle: ComponentSlotStyle<"label" | "checkbox" | "group" | "end" | "start" | "element" | "item" | "root" | "indicator", {
   /**
    * The shape of the component
    *