@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

package/dist/esm/components/popover/use-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","popoverProps: (\n  | keyof PopupAnimationProps\n  | keyof UsePopoverProps\n)[]"],"sources":["../../../../src/components/popover/use-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FocusEvent, KeyboardEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport type { Dict } from \"../../utils\"\nimport type { PopupAnimationProps } from \"./popover\"\nimport { useCallback, useEffect, useId, useRef } from \"react\"\nimport { useEnvironment, useSplitProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useFocusOnShow } from \"../../hooks/use-focus\"\nimport { useOutsideClick } from \"../../hooks/use-outside-click\"\nimport { popperProps, usePopper } from \"../../hooks/use-popper\"\nimport {\n  ariaAttr,\n  assignRef,\n  contains,\n  dataAttr,\n  focusTransfer,\n  focusTrap,\n  getEventRelatedTarget,\n  handlerAll,\n  mergeRefs,\n  runKeyAction,\n  scrollLock,\n  setAttribute,\n  useSafeLayoutEffect,\n  useUnmountEffect,\n} from \"../../utils\"\n\nexport interface UsePopoverProps\n  extends Omit<UseDisclosureProps, \"timing\">, UsePopperProps<\"button\"> {\n  /**\n   * If `true`, focus will be transferred to the first interactive element when the popover opens.\n   *\n   * @default true\n   */\n  autoFocus?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default false\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * If `true`, the popover will close when you blur out it by clicking outside or tabbing out.\n   *\n   * @default true\n   */\n  closeOnBlur?: boolean\n  /**\n   * If `true`, the popover will hide on pressing Esc key.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n  /**\n   * If `true`, the popover will hide on scroll.\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean\n  /**\n   * If `true`, the popover will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The `ref` of the element that should receive focus when the popover opens.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the popover will be modal.\n   *\n   * - scrolling is blocked.\n   * - focus is trapped within the popover.\n   *\n   * @default false\n   */\n  modal?: boolean\n  /**\n   * If `true`, the popover will be opened when click on the field.\n   *\n   * @default true\n   */\n  openOnClick?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: Direction\n  /**\n   * If `true`, the focus will be transferred to the popover content when the tab key is pressed.\n   *\n   * @default true\n   */\n  transferFocus?: boolean\n  /**\n   * Update the position of the floating element, re-rendering the component if required.\n   */\n  updateRef?: RefObject<() => void>\n}\n\nexport const usePopover = ({\n  autoFocus = true,\n  autoUpdate,\n  modal = false,\n  blockScrollOnMount = modal,\n  closeOnBlur = true,\n  closeOnEsc = true,\n  closeOnScroll,\n  defaultOpen,\n  disabled,\n  elements,\n  flip,\n  gutter,\n  initialFocusRef,\n  matchWidth,\n  middleware,\n  offset,\n  open: openProp,\n  openOnClick = true,\n  placement = \"end\",\n  platform,\n  preventOverflow,\n  strategy,\n  transferFocus = true,\n  transform,\n  updateRef,\n  whileElementsMounted,\n  onClose: onCloseProp,\n  onOpen: onOpenProp,\n}: UsePopoverProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const headerId = useId()\n  const bodyId = useId()\n  const contentId = useId()\n  const anchorRef = useRef<HTMLElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const contentRef = useRef<HTMLElement>(null)\n  const openTimeout = useRef<NodeJS.Timeout>(undefined)\n  const closeTimeout = useRef<NodeJS.Timeout>(undefined)\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const { refs, update, getPopperProps } = usePopper<\"button\">({\n    autoUpdate,\n    elements,\n    flip,\n    gutter,\n    matchWidth,\n    middleware,\n    offset,\n    open,\n    placement,\n    platform,\n    preventOverflow,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  assignRef(updateRef, update)\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      runKeyAction(ev, {\n        Escape: () => {\n          if (!closeOnEsc) return\n\n          onClose()\n\n          triggerRef.current?.focus()\n        },\n      })\n    },\n    [closeOnEsc, onClose],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLDivElement>) => {\n      const relatedTarget = getEventRelatedTarget(ev)\n      const popup = relatedTarget?.hasAttribute(\"data-popup\")\n\n      if (contains(triggerRef.current, relatedTarget)) return\n      if (contains(contentRef.current, relatedTarget)) return\n      if (contains(contentRef.current, ev.target) && popup) return\n\n      if (closeOnBlur) onClose()\n    },\n    [closeOnBlur, onClose],\n  )\n\n  useEventListener(getDocument(), \"scroll\", () => {\n    if (open && closeOnScroll) onClose()\n  })\n\n  useFocusOnShow(contentRef, {\n    focusTarget: initialFocusRef,\n    shouldFocus: autoFocus,\n    visible: open,\n  })\n\n  useOutsideClick({\n    ref: [contentRef, triggerRef],\n    enabled: open && closeOnBlur,\n    handler: onClose,\n  })\n\n  useSafeLayoutEffect(() => {\n    const el = contentRef.current\n    const hasHeader = !!getDocument()?.getElementById(headerId)\n    const hasBody = !!getDocument()?.getElementById(bodyId)\n\n    if (el && hasHeader) setAttribute(el, \"aria-labelledby\", headerId)\n    if (el && hasBody) setAttribute(el, \"aria-describedby\", bodyId)\n  }, [open, headerId, bodyId])\n\n  useEffect(() => {\n    if (!open || !modal) return\n\n    return focusTrap(contentRef.current)\n  }, [open, modal])\n\n  useEffect(() => {\n    if (!open || !blockScrollOnMount) return\n\n    return scrollLock(contentRef.current)\n  }, [open, modal, blockScrollOnMount])\n\n  useEffect(() => {\n    if (!open || modal || !transferFocus) return\n\n    return focusTransfer(contentRef.current, triggerRef.current)\n  }, [open, modal, transferFocus])\n\n  useUnmountEffect(() => {\n    clearTimeout(openTimeout.current)\n    clearTimeout(closeTimeout.current)\n  })\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"aria-controls\": open ? contentId : undefined,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-expanded\": open,\n      \"aria-haspopup\": \"dialog\",\n      role: \"button\",\n      ...props,\n      ref: mergeRefs(ref, triggerRef, (node) => {\n        if (anchorRef.current == null) refs.setReference(node)\n      }),\n      onBlur: handlerAll(props.onBlur, (ev) =>\n        !contains(contentRef.current, getEventRelatedTarget(ev)) && closeOnBlur\n          ? onClose()\n          : void 0,\n      ),\n      onClick: handlerAll(\n        props.onClick,\n        !open ? (!disabled && openOnClick ? onOpen : undefined) : onClose,\n      ),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      closeOnBlur,\n      contentId,\n      disabled,\n      onClose,\n      onKeyDown,\n      onOpen,\n      open,\n      openOnClick,\n      refs,\n    ],\n  )\n\n  const getAnchorProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ref: mergeRefs(ref, anchorRef, refs.setReference),\n    }),\n    [refs.setReference],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(\n    (props) => {\n      return getPopperProps(props)\n    },\n    [getPopperProps],\n  )\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: contentId,\n      \"aria-hidden\": !open,\n      \"aria-modal\": modal ? \"true\" : undefined,\n      \"data-close\": dataAttr(!open),\n      \"data-open\": dataAttr(open),\n      \"data-popup\": dataAttr(true),\n      role: \"dialog\",\n      tabIndex: -1,\n      ...props,\n      ref: mergeRefs(ref, contentRef),\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [contentId, open, modal, onBlur, onKeyDown],\n  )\n\n  const getHeaderProps: PropGetter = useCallback(\n    (props) => ({\n      id: headerId,\n      ...props,\n    }),\n    [headerId],\n  )\n\n  const getBodyProps: PropGetter = useCallback(\n    (props) => ({\n      id: bodyId,\n      ...props,\n    }),\n    [bodyId],\n  )\n\n  const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  return {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UsePopoverReturn = ReturnType<typeof usePopover>\n\nexport const popoverProps: (\n  | keyof PopupAnimationProps\n  | keyof UsePopoverProps\n)[] = [\n  ...popperProps,\n  \"autoFocus\",\n  \"transferFocus\",\n  \"blockScrollOnMount\",\n  \"closeOnBlur\",\n  \"closeOnEsc\",\n  \"closeOnScroll\",\n  \"openOnClick\",\n  \"disabled\",\n  \"initialFocusRef\",\n  \"modal\",\n  \"updateRef\",\n  \"defaultOpen\",\n  \"onOpen\",\n  \"onClose\",\n  \"animationScheme\",\n  \"duration\",\n]\n\nexport const usePopoverProps = <\n  Y extends Dict = Dict,\n  M extends keyof PopupAnimationProps | keyof UsePopoverProps =\n    | keyof PopupAnimationProps\n    | keyof UsePopoverProps,\n>(\n  props: Y,\n  omitKeys?: M[],\n) => {\n  return useSplitProps(\n    props,\n    popoverProps.filter((key) => !omitKeys?.includes(key as M)),\n  ) as unknown as [\n    keyof PopupAnimationProps | keyof UsePopoverProps extends M\n      ? PopupAnimationProps & UsePopoverProps\n      : Omit<PopupAnimationProps & UsePopoverProps, M>,\n    Omit<\n      Y,\n      keyof PopupAnimationProps | keyof UsePopoverProps extends M\n        ? keyof PopupAnimationProps | keyof UsePopoverProps\n        : Exclude<keyof PopupAnimationProps | keyof UsePopoverProps, M>\n    >,\n  ]\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-popover.js","names":["getTriggerProps: PropGetter<\"button\">","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter","popoverProps: (\n  | keyof PopupAnimationProps\n  | keyof UsePopoverProps\n)[]"],"sources":["../../../../src/components/popover/use-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FocusEvent, KeyboardEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UseDisclosureProps } from \"../../hooks/use-disclosure\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport type { Dict } from \"../../utils\"\nimport type { PopupAnimationProps } from \"./popover\"\nimport { useCallback, useEffect, useId, useRef } from \"react\"\nimport { useEnvironment, useSplitProps } from \"../../core\"\nimport { useDisclosure } from \"../../hooks/use-disclosure\"\nimport { useEventListener } from \"../../hooks/use-event-listener\"\nimport { useFocusOnShow } from \"../../hooks/use-focus\"\nimport { useOutsideClick } from \"../../hooks/use-outside-click\"\nimport { popperProps, usePopper } from \"../../hooks/use-popper\"\nimport {\n  ariaAttr,\n  assignRef,\n  contains,\n  dataAttr,\n  focusTransfer,\n  focusTrap,\n  getEventRelatedTarget,\n  handlerAll,\n  mergeRefs,\n  runKeyAction,\n  scrollLock,\n  setAttribute,\n  useSafeLayoutEffect,\n  useUnmountEffect,\n} from \"../../utils\"\n\nexport interface UsePopoverProps\n  extends Omit<UseDisclosureProps, \"timing\">, UsePopperProps<\"button\"> {\n  /**\n   * If `true`, focus will be transferred to the first interactive element when the popover opens.\n   *\n   * @default true\n   */\n  autoFocus?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default false\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * If `true`, the popover will close when you blur out it by clicking outside or tabbing out.\n   *\n   * @default true\n   */\n  closeOnBlur?: boolean\n  /**\n   * If `true`, the popover will hide on pressing Esc key.\n   *\n   * @default true\n   */\n  closeOnEsc?: boolean\n  /**\n   * If `true`, the popover will hide on scroll.\n   *\n   * @default false\n   */\n  closeOnScroll?: boolean\n  /**\n   * If `true`, the popover will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The `ref` of the element that should receive focus when the popover opens.\n   */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  /**\n   * If `true`, the popover will be modal.\n   *\n   * - scrolling is blocked.\n   * - focus is trapped within the popover.\n   *\n   * @default false\n   */\n  modal?: boolean\n  /**\n   * If `true`, the popover will be opened when click on the field.\n   *\n   * @default true\n   */\n  openOnClick?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: Direction\n  /**\n   * If `true`, the focus will be transferred to the popover content when the tab key is pressed.\n   *\n   * @default true\n   */\n  transferFocus?: boolean\n  /**\n   * Update the position of the floating element, re-rendering the component if required.\n   */\n  updateRef?: RefObject<() => void>\n}\n\nexport const usePopover = ({\n  autoFocus = true,\n  autoUpdate,\n  modal = false,\n  blockScrollOnMount = modal,\n  closeOnBlur = true,\n  closeOnEsc = true,\n  closeOnScroll,\n  defaultOpen,\n  disabled,\n  elements,\n  flip,\n  gutter,\n  initialFocusRef,\n  matchWidth,\n  middleware,\n  offset,\n  open: openProp,\n  openOnClick = true,\n  placement = \"end\",\n  platform,\n  preventOverflow,\n  strategy,\n  transferFocus = true,\n  transform,\n  updateRef,\n  whileElementsMounted,\n  onClose: onCloseProp,\n  onOpen: onOpenProp,\n}: UsePopoverProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const headerId = useId()\n  const bodyId = useId()\n  const contentId = useId()\n  const anchorRef = useRef<HTMLElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const contentRef = useRef<HTMLElement>(null)\n  const openTimeout = useRef<NodeJS.Timeout>(undefined)\n  const closeTimeout = useRef<NodeJS.Timeout>(undefined)\n  const { open, onClose, onOpen } = useDisclosure({\n    defaultOpen,\n    open: openProp,\n    onClose: onCloseProp,\n    onOpen: onOpenProp,\n  })\n  const { refs, update, getPopperProps } = usePopper<\"button\">({\n    autoUpdate,\n    elements,\n    flip,\n    gutter,\n    matchWidth,\n    middleware,\n    offset,\n    open,\n    placement,\n    platform,\n    preventOverflow,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  assignRef(updateRef, update)\n\n  const onKeyDown = useCallback(\n    (ev: KeyboardEvent<HTMLElement>) => {\n      runKeyAction(ev, {\n        Escape: () => {\n          if (!closeOnEsc) return\n\n          onClose()\n\n          triggerRef.current?.focus()\n        },\n      })\n    },\n    [closeOnEsc, onClose],\n  )\n\n  const onBlur = useCallback(\n    (ev: FocusEvent<HTMLDivElement>) => {\n      const relatedTarget = getEventRelatedTarget(ev)\n      const popup = relatedTarget?.hasAttribute(\"data-popup\")\n\n      if (contains(triggerRef.current, relatedTarget)) return\n      if (contains(contentRef.current, relatedTarget)) return\n      if (contains(contentRef.current, ev.target) && popup) return\n\n      if (closeOnBlur) onClose()\n    },\n    [closeOnBlur, onClose],\n  )\n\n  useEventListener(getDocument(), \"scroll\", () => {\n    if (open && closeOnScroll) onClose()\n  })\n\n  useFocusOnShow(contentRef, {\n    focusTarget: initialFocusRef,\n    shouldFocus: autoFocus,\n    visible: open,\n  })\n\n  useOutsideClick({\n    ref: [contentRef, triggerRef],\n    enabled: open && closeOnBlur,\n    handler: onClose,\n  })\n\n  useSafeLayoutEffect(() => {\n    const el = contentRef.current\n    const hasHeader = !!getDocument()?.getElementById(headerId)\n    const hasBody = !!getDocument()?.getElementById(bodyId)\n\n    if (el && hasHeader) setAttribute(el, \"aria-labelledby\", headerId)\n    if (el && hasBody) setAttribute(el, \"aria-describedby\", bodyId)\n  }, [open, headerId, bodyId])\n\n  useEffect(() => {\n    if (!open || !modal) return\n\n    return focusTrap(contentRef.current)\n  }, [open, modal])\n\n  useEffect(() => {\n    if (!open || !blockScrollOnMount) return\n\n    return scrollLock(contentRef.current)\n  }, [open, modal, blockScrollOnMount])\n\n  useEffect(() => {\n    if (!open || modal || !transferFocus) return\n\n    return focusTransfer(contentRef.current, triggerRef.current)\n  }, [open, modal, transferFocus])\n\n  useUnmountEffect(() => {\n    clearTimeout(openTimeout.current)\n    clearTimeout(closeTimeout.current)\n  })\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => ({\n      \"aria-controls\": open ? contentId : undefined,\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-expanded\": open,\n      \"aria-haspopup\": \"dialog\",\n      role: \"button\",\n      ...props,\n      ref: mergeRefs(ref, triggerRef, (node) => {\n        if (anchorRef.current == null) refs.setReference(node)\n      }),\n      onBlur: handlerAll(props.onBlur, (ev) =>\n        !contains(contentRef.current, getEventRelatedTarget(ev)) && closeOnBlur\n          ? onClose()\n          : void 0,\n      ),\n      onClick: handlerAll(\n        props.onClick,\n        !open ? (!disabled && openOnClick ? onOpen : undefined) : onClose,\n      ),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [\n      closeOnBlur,\n      contentId,\n      disabled,\n      onClose,\n      onKeyDown,\n      onOpen,\n      open,\n      openOnClick,\n      refs,\n    ],\n  )\n\n  const getAnchorProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ref: mergeRefs(ref, anchorRef, refs.setReference),\n    }),\n    [refs.setReference],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(getPopperProps, [\n    getPopperProps,\n  ])\n\n  const getContentProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      id: contentId,\n      \"aria-hidden\": !open,\n      \"aria-modal\": modal ? \"true\" : undefined,\n      \"data-close\": dataAttr(!open),\n      \"data-open\": dataAttr(open),\n      \"data-popup\": dataAttr(true),\n      role: \"dialog\",\n      tabIndex: -1,\n      ...props,\n      ref: mergeRefs(ref, contentRef),\n      onBlur: handlerAll(props.onBlur, onBlur),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n    }),\n    [contentId, open, modal, onBlur, onKeyDown],\n  )\n\n  const getHeaderProps: PropGetter = useCallback(\n    (props) => ({ id: headerId, ...props }),\n    [headerId],\n  )\n\n  const getBodyProps: PropGetter = useCallback(\n    (props) => ({ id: bodyId, ...props }),\n    [bodyId],\n  )\n\n  const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => ({\n      ...props,\n      onClick: handlerAll(props.onClick, () => {\n        onClose()\n\n        triggerRef.current?.focus()\n      }),\n    }),\n    [onClose],\n  )\n\n  return {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n    onOpen,\n  }\n}\n\nexport type UsePopoverReturn = ReturnType<typeof usePopover>\n\nexport const popoverProps: (\n  | keyof PopupAnimationProps\n  | keyof UsePopoverProps\n)[] = [\n  ...popperProps,\n  \"autoFocus\",\n  \"transferFocus\",\n  \"blockScrollOnMount\",\n  \"closeOnBlur\",\n  \"closeOnEsc\",\n  \"closeOnScroll\",\n  \"openOnClick\",\n  \"disabled\",\n  \"initialFocusRef\",\n  \"modal\",\n  \"updateRef\",\n  \"defaultOpen\",\n  \"onOpen\",\n  \"onClose\",\n  \"animationScheme\",\n  \"duration\",\n]\n\nexport const usePopoverProps = <\n  Y extends Dict = Dict,\n  M extends keyof PopupAnimationProps | keyof UsePopoverProps =\n    | keyof PopupAnimationProps\n    | keyof UsePopoverProps,\n>(\n  props: Y,\n  omitKeys?: M[],\n) => {\n  return useSplitProps(\n    props,\n    popoverProps.filter((key) => !omitKeys?.includes(key as M)),\n  ) as unknown as [\n    keyof PopupAnimationProps | keyof UsePopoverProps extends M\n      ? PopupAnimationProps & UsePopoverProps\n      : Omit<PopupAnimationProps & UsePopoverProps, M>,\n    Omit<\n      Y,\n      keyof PopupAnimationProps | keyof UsePopoverProps extends M\n        ? keyof PopupAnimationProps | keyof UsePopoverProps\n        : Exclude<keyof PopupAnimationProps | keyof UsePopoverProps, M>\n    >,\n  ]\n}\n"],"mappings":"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"}

package/dist/esm/components/qr-code/index.js

@@ -0,0 +1,6 @@
+import { qrCodeStyle } from "./qr-code.style.js";
+import { useQrCode } from "./use-qr-code.js";
+import { QrCodeFrame, QrCodeOverlay, QrCodePattern, QrCodePropsContext, QrCodeRoot, useQrCodePropsContext } from "./qr-code.js";
+import { namespace_exports } from "./namespace.js";
+
+export { namespace_exports as QrCode, QrCodeFrame, QrCodeOverlay, QrCodePattern, QrCodePropsContext, QrCodeRoot, qrCodeStyle, useQrCode, useQrCodePropsContext };

package/dist/esm/components/qr-code/namespace.js

@@ -0,0 +1,16 @@
+import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+import { QrCodeFrame, QrCodeOverlay, QrCodePattern, QrCodePropsContext, QrCodeRoot, useQrCodePropsContext } from "./qr-code.js";
+
+//#region src/components/qr-code/namespace.ts
+var namespace_exports = /* @__PURE__ */ __exportAll({
+	Frame: () => QrCodeFrame,
+	Overlay: () => QrCodeOverlay,
+	Pattern: () => QrCodePattern,
+	PropsContext: () => QrCodePropsContext,
+	Root: () => QrCodeRoot,
+	usePropsContext: () => useQrCodePropsContext
+});
+
+//#endregion
+export { namespace_exports };
+//# sourceMappingURL=namespace.js.map

package/dist/esm/components/qr-code/namespace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/qr-code/namespace.ts"],"sourcesContent":["export {\n  QrCodeFrame as Frame,\n  QrCodeOverlay as Overlay,\n  QrCodePattern as Pattern,\n  QrCodePropsContext as PropsContext,\n  QrCodeRoot as Root,\n  useQrCodePropsContext as usePropsContext,\n} from \"./qr-code\"\nexport type {\n  QrCodeFrameProps as FrameProps,\n  QrCodeOverlayProps as OverlayProps,\n  QrCodePatternProps as PatternProps,\n  QrCodeRootProps as RootProps,\n} from \"./qr-code\"\n"],"mappings":""}

package/dist/esm/components/qr-code/qr-code.js

@@ -0,0 +1,60 @@
+"use client";
+
+import { useSplitChildren } from "../../utils/children.js";
+import "../../utils/index.js";
+import { styled } from "../../core/system/factory.js";
+import { createSlotComponent } from "../../core/components/create-component.js";
+import "../../core/index.js";
+import { qrCodeStyle } from "./qr-code.style.js";
+import { useQrCode } from "./use-qr-code.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/qr-code/qr-code.tsx
+const { ComponentContext, PropsContext: QrCodePropsContext, useComponentContext, usePropsContext: useQrCodePropsContext, withContext, withProvider } = createSlotComponent("qr-code", qrCodeStyle);
+/**
+* `QrCode` is a component that displays a QR code.
+*
+* @see https://yamada-ui.com/docs/components/qr-code
+*/
+const QrCodeRoot = withProvider(({ children, frameProps, patternProps, ...rest }) => {
+	const { getFrameProps, getOverlayProps, getPatternProps, getRootProps } = useQrCode(rest);
+	const [omittedChildren, customFrame] = useSplitChildren(children, QrCodeFrame);
+	return /* @__PURE__ */ jsx(ComponentContext, {
+		value: useMemo(() => ({
+			getFrameProps,
+			getOverlayProps,
+			getPatternProps,
+			patternProps
+		}), [
+			getFrameProps,
+			getOverlayProps,
+			getPatternProps,
+			patternProps
+		]),
+		children: /* @__PURE__ */ jsxs(styled.div, {
+			...getRootProps(),
+			children: [customFrame ?? /* @__PURE__ */ jsx(QrCodeFrame, { ...frameProps }), omittedChildren]
+		})
+	});
+}, "root")();
+const QrCodeFrame = withContext(({ children, ...rest }) => {
+	const { getFrameProps, patternProps } = useComponentContext();
+	const [omittedChildren, customPattern] = useSplitChildren(children, QrCodePattern);
+	return /* @__PURE__ */ jsxs(styled.svg, {
+		...getFrameProps(rest),
+		children: [customPattern ?? /* @__PURE__ */ jsx(QrCodePattern, { ...patternProps }), omittedChildren]
+	});
+}, "frame")();
+const QrCodePattern = withContext("path", "pattern")(void 0, (props) => {
+	const { getPatternProps } = useComponentContext();
+	return getPatternProps(props);
+});
+const QrCodeOverlay = withContext("div", "overlay")(void 0, (props) => {
+	const { getOverlayProps } = useComponentContext();
+	return getOverlayProps(props);
+});
+
+//#endregion
+export { QrCodeFrame, QrCodeOverlay, QrCodePattern, QrCodePropsContext, QrCodeRoot, useQrCodePropsContext };
+//# sourceMappingURL=qr-code.js.map

package/dist/esm/components/qr-code/qr-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.js","names":[],"sources":["../../../../src/components/qr-code/qr-code.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { QrCodeStyle } from \"./qr-code.style\"\nimport type { UseQrCodeProps, UseQrCodeReturn } from \"./use-qr-code\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { qrCodeStyle } from \"./qr-code.style\"\nimport { useQrCode } from \"./use-qr-code\"\n\ninterface ComponentContext\n  extends\n    Pick<\n      UseQrCodeReturn,\n      \"getFrameProps\" | \"getOverlayProps\" | \"getPatternProps\"\n    >,\n    Pick<QrCodeRootProps, \"patternProps\"> {}\n\nexport interface QrCodeRootProps\n  extends\n    Omit<HTMLStyledProps, \"border\" | \"invert\">,\n    ThemeProps<QrCodeStyle>,\n    UseQrCodeProps {\n  /**\n   * Props for the frame component.\n   */\n  frameProps?: QrCodeFrameProps\n  /**\n   * Props for the pattern component.\n   */\n  patternProps?: QrCodePatternProps\n}\n\nconst {\n  ComponentContext,\n  PropsContext: QrCodePropsContext,\n  useComponentContext,\n  usePropsContext: useQrCodePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<QrCodeRootProps, QrCodeStyle, ComponentContext>(\n  \"qr-code\",\n  qrCodeStyle,\n)\n\nexport { QrCodePropsContext, useQrCodePropsContext }\n\n/**\n * `QrCode` is a component that displays a QR code.\n *\n * @see https://yamada-ui.com/docs/components/qr-code\n */\nexport const QrCodeRoot = withProvider<\"div\", QrCodeRootProps>(\n  ({ children, frameProps, patternProps, ...rest }) => {\n    const { getFrameProps, getOverlayProps, getPatternProps, getRootProps } =\n      useQrCode(rest)\n    const [omittedChildren, customFrame] = useSplitChildren(\n      children,\n      QrCodeFrame,\n    )\n    const context = useMemo(\n      () => ({ getFrameProps, getOverlayProps, getPatternProps, patternProps }),\n      [getFrameProps, getOverlayProps, getPatternProps, patternProps],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        <styled.div {...getRootProps()}>\n          {customFrame ?? <QrCodeFrame {...frameProps} />}\n          {omittedChildren}\n        </styled.div>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface QrCodeFrameProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const QrCodeFrame = withContext<\"svg\", QrCodeFrameProps>(\n  ({ children, ...rest }) => {\n    const { getFrameProps, patternProps } = useComponentContext()\n    const [omittedChildren, customPattern] = useSplitChildren(\n      children,\n      QrCodePattern,\n    )\n\n    return (\n      <styled.svg {...getFrameProps(rest)}>\n        {customPattern ?? <QrCodePattern {...patternProps} />}\n        {omittedChildren}\n      </styled.svg>\n    )\n  },\n  \"frame\",\n)()\n\nexport interface QrCodePatternProps extends HTMLStyledProps<\"path\"> {}\n\nexport const QrCodePattern = withContext<\"path\", QrCodePatternProps>(\n  \"path\",\n  \"pattern\",\n)(undefined, (props) => {\n  const { getPatternProps } = useComponentContext()\n\n  return getPatternProps(props)\n})\n\nexport interface QrCodeOverlayProps extends HTMLStyledProps {}\n\nexport const QrCodeOverlay = withContext<\"div\", QrCodeOverlayProps>(\n  \"div\",\n  \"overlay\",\n)(undefined, (props) => {\n  const { getOverlayProps } = useComponentContext()\n\n  return getOverlayProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;AAkCA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,WACA,YACD;;;;;;AASD,MAAa,aAAa,cACvB,EAAE,UAAU,YAAY,cAAc,GAAG,WAAW;CACnD,MAAM,EAAE,eAAe,iBAAiB,iBAAiB,iBACvD,UAAU,KAAK;CACjB,MAAM,CAAC,iBAAiB,eAAe,iBACrC,UACA,YACD;AAMD,QACE,oBAAC;EAAiB,OANJ,eACP;GAAE;GAAe;GAAiB;GAAiB;GAAc,GACxE;GAAC;GAAe;GAAiB;GAAiB;GAAa,CAChE;YAIG,qBAAC,OAAO;GAAI,GAAI,cAAc;cAC3B,eAAe,oBAAC,eAAY,GAAI,aAAc,EAC9C;IACU;GACI;GAGvB,OACD,EAAE;AAIH,MAAa,cAAc,aACxB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,eAAe,iBAAiB,qBAAqB;CAC7D,MAAM,CAAC,iBAAiB,iBAAiB,iBACvC,UACA,cACD;AAED,QACE,qBAAC,OAAO;EAAI,GAAI,cAAc,KAAK;aAChC,iBAAiB,oBAAC,iBAAc,GAAI,eAAgB,EACpD;GACU;GAGjB,QACD,EAAE;AAIH,MAAa,gBAAgB,YAC3B,QACA,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QAAO,gBAAgB,MAAM;EAC7B;AAIF,MAAa,gBAAgB,YAC3B,OACA,UACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QAAO,gBAAgB,MAAM;EAC7B"}

package/dist/esm/components/qr-code/qr-code.style.js

@@ -0,0 +1,48 @@
+import { defineComponentSlotStyle } from "../../core/system/config.js";
+import "../../core/index.js";
+
+//#region src/components/qr-code/qr-code.style.ts
+const qrCodeStyle = defineComponentSlotStyle({
+	base: {
+		frame: {
+			boxSize: "{size}",
+			fill: "currentColor"
+		},
+		overlay: {
+			alignItems: "center",
+			bg: "{overlay-bg}",
+			boxSize: "{overlay-size}",
+			display: "flex",
+			justifyContent: "center",
+			left: "50%",
+			p: "1",
+			position: "absolute",
+			top: "50%",
+			transform: "translate(-50%, -50%)"
+		},
+		pattern: {},
+		root: {
+			"--overlay-bg": "colors.bg",
+			"--overlay-size": "calc({size} / 3)",
+			color: "colorScheme.solid",
+			position: "relative",
+			w: "fit-content"
+		}
+	},
+	sizes: {
+		"2xs": { frame: { "--size": "sizes.12" } },
+		xs: { frame: { "--size": "sizes.16" } },
+		sm: { frame: { "--size": "sizes.20" } },
+		md: { frame: { "--size": "sizes.24" } },
+		lg: { frame: { "--size": "sizes.32" } },
+		xl: { frame: { "--size": "sizes.40" } },
+		"2xl": { frame: { "--size": "sizes.48" } },
+		"3xl": { frame: { "--size": "sizes.56" } },
+		"4xl": { frame: { "--size": "sizes.64" } }
+	},
+	defaultProps: { size: "md" }
+});
+
+//#endregion
+export { qrCodeStyle };
+//# sourceMappingURL=qr-code.style.js.map

package/dist/esm/components/qr-code/qr-code.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.style.js","names":[],"sources":["../../../../src/components/qr-code/qr-code.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const qrCodeStyle = defineComponentSlotStyle({\n  base: {\n    frame: { boxSize: \"{size}\", fill: \"currentColor\" },\n    overlay: {\n      alignItems: \"center\",\n      bg: \"{overlay-bg}\",\n      boxSize: \"{overlay-size}\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      left: \"50%\",\n      p: \"1\",\n      position: \"absolute\",\n      top: \"50%\",\n      transform: \"translate(-50%, -50%)\",\n    },\n    pattern: {},\n    root: {\n      \"--overlay-bg\": \"colors.bg\",\n      \"--overlay-size\": \"calc({size} / 3)\",\n      color: \"colorScheme.solid\",\n      position: \"relative\",\n      w: \"fit-content\",\n    },\n  },\n\n  sizes: {\n    \"2xs\": { frame: { \"--size\": \"sizes.12\" } },\n    xs: { frame: { \"--size\": \"sizes.16\" } },\n    sm: { frame: { \"--size\": \"sizes.20\" } },\n    md: { frame: { \"--size\": \"sizes.24\" } },\n    lg: { frame: { \"--size\": \"sizes.32\" } },\n    xl: { frame: { \"--size\": \"sizes.40\" } },\n    \"2xl\": { frame: { \"--size\": \"sizes.48\" } },\n    \"3xl\": { frame: { \"--size\": \"sizes.56\" } },\n    \"4xl\": { frame: { \"--size\": \"sizes.64\" } },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type QrCodeStyle = typeof qrCodeStyle\n"],"mappings":";;;;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO;GAAE,SAAS;GAAU,MAAM;GAAgB;EAClD,SAAS;GACP,YAAY;GACZ,IAAI;GACJ,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,MAAM;GACN,GAAG;GACH,UAAU;GACV,KAAK;GACL,WAAW;GACZ;EACD,SAAS,EAAE;EACX,MAAM;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,OAAO;GACP,UAAU;GACV,GAAG;GACJ;EACF;CAED,OAAO;EACL,OAAO,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EAC1C,IAAI,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EACvC,IAAI,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EACvC,IAAI,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EACvC,IAAI,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EACvC,IAAI,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EACvC,OAAO,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EAC1C,OAAO,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EAC1C,OAAO,EAAE,OAAO,EAAE,UAAU,YAAY,EAAE;EAC3C;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/esm/components/qr-code/use-qr-code.js

@@ -0,0 +1,66 @@
+import { useCallback, useMemo } from "react";
+import { encode } from "uqr";
+
+//#region src/components/qr-code/use-qr-code.tsx
+const useQrCode = ({ boostEcc, border, ecc, invert, maskPattern, maxVersion, minVersion, pixelSize = 10, value, onEncoded, ...rest }) => {
+	const encoded = useMemo(() => encode(value, {
+		boostEcc,
+		border,
+		ecc,
+		invert,
+		maskPattern,
+		maxVersion,
+		minVersion,
+		onEncoded
+	}), [
+		value,
+		border,
+		ecc,
+		boostEcc,
+		maskPattern,
+		maxVersion,
+		minVersion,
+		invert,
+		onEncoded
+	]);
+	const height = encoded.size * pixelSize;
+	const width = encoded.size * pixelSize;
+	const viewBox = `0 0 ${width} ${height}`;
+	const paths = useMemo(() => {
+		const result = [];
+		for (let row = 0; row < encoded.size; row++) for (let col = 0; col < encoded.size; col++) {
+			const x = col * pixelSize;
+			const y = row * pixelSize;
+			if (encoded.data[row]?.[col]) result.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`);
+		}
+		return result;
+	}, [
+		encoded.data,
+		encoded.size,
+		pixelSize
+	]);
+	const getRootProps = useCallback((props = {}) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		height,
+		paths,
+		viewBox,
+		width,
+		getFrameProps: useCallback((props = {}) => ({
+			viewBox: `0 0 ${width} ${height}`,
+			...props
+		}), [height, width]),
+		getOverlayProps: useCallback((props = {}) => ({ ...props }), []),
+		getPatternProps: useCallback((props) => ({
+			...props,
+			d: paths.join(" ")
+		}), [paths]),
+		getRootProps
+	};
+};
+
+//#endregion
+export { useQrCode };
+//# sourceMappingURL=use-qr-code.js.map

package/dist/esm/components/qr-code/use-qr-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-qr-code.js","names":["paths: string[]","result: string[]","getRootProps: PropGetter"],"sources":["../../../../src/components/qr-code/use-qr-code.tsx"],"sourcesContent":["import type { QrCodeGenerateResult } from \"uqr\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useMemo } from \"react\"\nimport { encode } from \"uqr\"\n\nexport interface UseQrCodeProps extends HTMLProps {\n  /**\n   * The value to encode as a QR code.\n   */\n  value: string\n  /**\n   * The error correction level to boost the error correction level to the maximum allowed by the version and size.\n   *\n   * @default false\n   */\n  boostEcc?: boolean\n  /**\n   * The border width around the QR code.\n   *\n   * @default 1\n   */\n  border?: number\n  /**\n   * The error correction level.\n   *\n   * - `L` allows for up to 7% error correction,\n   * - `M` allows for up to 15% error correction,\n   * - `Q` allows for up to 25% error correction,\n   * - `H` allows for up to 30% error correction.\n   *\n   * @default 'L'\n   */\n  ecc?: \"H\" | \"L\" | \"M\" | \"Q\"\n  /**\n   * Inverts the black and white of the QR code.\n   *\n   * @default false\n   */\n  invert?: boolean\n  /**\n   * The mask pattern to use.\n   *\n   * @default -1\n   */\n  maskPattern?: number\n  /**\n   * The maximum version of the QR code (1-40).\n   *\n   * @default 40\n   */\n  maxVersion?: number\n  /**\n   * The minimum version of the QR code (1-40).\n   *\n   * @default 1\n   */\n  minVersion?: number\n  /**\n   * The pixel size of the QR code.\n   *\n   * @default 10\n   */\n  pixelSize?: number\n  /**\n   * Callback function to receive the generated QR Code.\n   */\n  onEncoded?: (qr: QrCodeGenerateResult) => void\n}\n\nexport const useQrCode = ({\n  boostEcc,\n  border,\n  ecc,\n  invert,\n  maskPattern,\n  maxVersion,\n  minVersion,\n  pixelSize = 10,\n  value,\n  onEncoded,\n  ...rest\n}: UseQrCodeProps) => {\n  const encoded = useMemo(\n    () =>\n      encode(value, {\n        boostEcc,\n        border,\n        ecc,\n        invert,\n        maskPattern,\n        maxVersion,\n        minVersion,\n        onEncoded,\n      }),\n    [\n      value,\n      border,\n      ecc,\n      boostEcc,\n      maskPattern,\n      maxVersion,\n      minVersion,\n      invert,\n      onEncoded,\n    ],\n  )\n  const height = encoded.size * pixelSize\n  const width = encoded.size * pixelSize\n  const viewBox = `0 0 ${width} ${height}`\n  const paths: string[] = useMemo(() => {\n    const result: string[] = []\n\n    for (let row = 0; row < encoded.size; row++) {\n      for (let col = 0; col < encoded.size; col++) {\n        const x = col * pixelSize\n        const y = row * pixelSize\n        if (encoded.data[row]?.[col]) {\n          result.push(`M${x},${y}h${pixelSize}v${pixelSize}h-${pixelSize}z`)\n        }\n      }\n    }\n    return result\n  }, [encoded.data, encoded.size, pixelSize])\n\n  const getRootProps: PropGetter = useCallback(\n    (props = {}) => ({ ...rest, ...props }),\n    [rest],\n  )\n\n  const getFrameProps: PropGetter<\"svg\"> = useCallback(\n    (props = {}) => ({ viewBox: `0 0 ${width} ${height}`, ...props }),\n    [height, width],\n  )\n\n  const getOverlayProps: PropGetter = useCallback(\n    (props = {}) => ({ ...props }),\n    [],\n  )\n\n  const getPatternProps: PropGetter<\"path\"> = useCallback(\n    (props) => ({ ...props, d: paths.join(\" \") }),\n    [paths],\n  )\n\n  return {\n    height,\n    paths,\n    viewBox,\n    width,\n    getFrameProps,\n    getOverlayProps,\n    getPatternProps,\n    getRootProps,\n  }\n}\n\nexport type UseQrCodeReturn = ReturnType<typeof useQrCode>\n"],"mappings":";;;;AAqEA,MAAa,aAAa,EACxB,UACA,QACA,KACA,QACA,aACA,YACA,YACA,YAAY,IACZ,OACA,WACA,GAAG,WACiB;CACpB,MAAM,UAAU,cAEZ,OAAO,OAAO;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,SAAS,QAAQ,OAAO;CAC9B,MAAM,QAAQ,QAAQ,OAAO;CAC7B,MAAM,UAAU,OAAO,MAAM,GAAG;CAChC,MAAMA,QAAkB,cAAc;EACpC,MAAMC,SAAmB,EAAE;AAE3B,OAAK,IAAI,MAAM,GAAG,MAAM,QAAQ,MAAM,MACpC,MAAK,IAAI,MAAM,GAAG,MAAM,QAAQ,MAAM,OAAO;GAC3C,MAAM,IAAI,MAAM;GAChB,MAAM,IAAI,MAAM;AAChB,OAAI,QAAQ,KAAK,OAAO,KACtB,QAAO,KAAK,IAAI,EAAE,GAAG,EAAE,GAAG,UAAU,GAAG,UAAU,IAAI,UAAU,GAAG;;AAIxE,SAAO;IACN;EAAC,QAAQ;EAAM,QAAQ;EAAM;EAAU,CAAC;CAE3C,MAAMC,eAA2B,aAC9B,QAAQ,EAAE,MAAM;EAAE,GAAG;EAAM,GAAG;EAAO,GACtC,CAAC,KAAK,CACP;AAiBD,QAAO;EACL;EACA;EACA;EACA;EACA,eApBuC,aACtC,QAAQ,EAAE,MAAM;GAAE,SAAS,OAAO,MAAM,GAAG;GAAU,GAAG;GAAO,GAChE,CAAC,QAAQ,MAAM,CAChB;EAkBC,iBAhBkC,aACjC,QAAQ,EAAE,MAAM,EAAE,GAAG,OAAO,GAC7B,EAAE,CACH;EAcC,iBAZ0C,aACzC,WAAW;GAAE,GAAG;GAAO,GAAG,MAAM,KAAK,IAAI;GAAE,GAC5C,CAAC,MAAM,CACR;EAUC;EACD"}

package/dist/esm/components/radio/radio.style.js

@@ -16,6 +16,24 @@ const radioStyle = defineComponentSlotStyle({
 			"input:focus-visible + &": focusRingStyle.outline,
 			justifyContent: "center",
 			_before: { display: "block" },
+			_container: [
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"elevated\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"elevated\""
+				}
+			],
 			_invalid: {
 				borderColor: "{error-border-color}",
 				focusRingColor: "{error-border-color}"

package/dist/esm/components/radio/radio.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.style.js","names":[],"sources":["../../../../src/components/radio/radio.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const radioStyle = defineComponentSlotStyle({\n  base: {\n    group: {},\n    indicator: {\n      alignItems: \"center\",\n      borderColor: \"{indicator-border-color}\",\n      borderWidth: \"2px\",\n      boxSize: \"{indicator-size}\",\n      display: \"inline-flex\",\n      focusRingColor: \"{focus-border-color}\",\n      \"input:focus-visible + &\": focusRingStyle.outline,\n      justifyContent: \"center\",\n      _before: { display: \"block\" },\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    label: {},\n    root: {\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      \"--indicator-border-color\": \"colors.border.emphasized\",\n      alignItems: \"center\",\n      display: \"flex\",\n      fontSize: \"{label-size}\",\n      gap: \"2\",\n      userSelect: \"none\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the component\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: { indicator: { rounded: \"full\", _before: { rounded: \"full\" } } },\n      rounded: {\n        indicator: {\n          rounded: \"l1\",\n          _before: { rounded: \"calc({radii.l1} / 2)\" },\n        },\n      },\n      square: {\n        indicator: { rounded: \"0\", _before: { rounded: \"0\" } },\n      },\n    },\n  },\n\n  variants: {\n    base: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.solid\" } } },\n    },\n    outline: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.outline\" } } },\n      root: { _checked: { \"--indicator-border-color\": \"colorScheme.outline\" } },\n    },\n    solid: {},\n    subtle: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"transparent\" },\n    },\n    surface: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: { _before: { boxSize: \"1.5\" } },\n      root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n    },\n    md: {\n      indicator: { _before: { boxSize: \"2\" } },\n      root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n    },\n    lg: {\n      indicator: { _before: { boxSize: \"3\" } },\n      root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n    shape: \"circle\",\n  },\n})\n\nexport type RadioStyle = typeof radioStyle\n"],"mappings":";;;;;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2B,eAAe;GAC1C,gBAAgB;GAChB,SAAS,EAAE,SAAS,SAAS;GAC7B,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EAAE,WAAW;GAAE,SAAS;GAAQ,SAAS,EAAE,SAAS,QAAQ;GAAE,EAAE;EACxE,SAAS,EACP,WAAW;GACT,SAAS;GACT,SAAS,EAAE,SAAS,wBAAwB;GAC7C,EACF;EACD,QAAQ,EACN,WAAW;GAAE,SAAS;GAAK,SAAS,EAAE,SAAS,KAAK;GAAE,EACvD;EACF,EACF;CAED,UAAU;EACR,MAAM,EACJ,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAClE;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,uBAAuB,EAAE,EAAE;GACnE,MAAM,EAAE,UAAU,EAAE,4BAA4B,uBAAuB,EAAE;GAC1E;EACD,OAAO,EAAE;EACT,QAAQ;GACN,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,OAAO,EAAE;GAC1C,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"radio.style.js","names":[],"sources":["../../../../src/components/radio/radio.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const radioStyle = defineComponentSlotStyle({\n  base: {\n    group: {},\n    indicator: {\n      alignItems: \"center\",\n      borderColor: \"{indicator-border-color}\",\n      borderWidth: \"2px\",\n      boxSize: \"{indicator-size}\",\n      display: \"inline-flex\",\n      focusRingColor: \"{focus-border-color}\",\n      \"input:focus-visible + &\": focusRingStyle.outline,\n      justifyContent: \"center\",\n      _before: { display: \"block\" },\n      _container: [\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n        { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n        { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n      ],\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n    label: {},\n    root: {\n      \"--error-border-color\": \"colors.border.error\",\n      \"--focus-border-color\": \"colorScheme.outline\",\n      \"--indicator-border-color\": \"colors.border.emphasized\",\n      alignItems: \"center\",\n      display: \"flex\",\n      fontSize: \"{label-size}\",\n      gap: \"2\",\n      userSelect: \"none\",\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n  },\n\n  props: {\n    /**\n     * The shape of the component\n     *\n     * @default 'circle'\n     */\n    shape: {\n      circle: { indicator: { rounded: \"full\", _before: { rounded: \"full\" } } },\n      rounded: {\n        indicator: {\n          rounded: \"l1\",\n          _before: { rounded: \"calc({radii.l1} / 2)\" },\n        },\n      },\n      square: {\n        indicator: { rounded: \"0\", _before: { rounded: \"0\" } },\n      },\n    },\n  },\n\n  variants: {\n    base: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.solid\" } } },\n    },\n    outline: {\n      indicator: { _checked: { _before: { bg: \"colorScheme.outline\" } } },\n      root: { _checked: { \"--indicator-border-color\": \"colorScheme.outline\" } },\n    },\n    solid: {},\n    subtle: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"transparent\" },\n    },\n    surface: {\n      indicator: { bg: \"colorScheme.subtle\" },\n      root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: { _before: { boxSize: \"1.5\" } },\n      root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n    },\n    md: {\n      indicator: { _before: { boxSize: \"2\" } },\n      root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n    },\n    lg: {\n      indicator: { _before: { boxSize: \"3\" } },\n      root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"solid\",\n    shape: \"circle\",\n  },\n})\n\nexport type RadioStyle = typeof radioStyle\n"],"mappings":";;;;;AAEA,MAAa,aAAa,yBAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2B,eAAe;GAC1C,gBAAgB;GAChB,SAAS,EAAE,SAAS,SAAS;GAC7B,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EAAE,WAAW;GAAE,SAAS;GAAQ,SAAS,EAAE,SAAS,QAAQ;GAAE,EAAE;EACxE,SAAS,EACP,WAAW;GACT,SAAS;GACT,SAAS,EAAE,SAAS,wBAAwB;GAC7C,EACF;EACD,QAAQ,EACN,WAAW;GAAE,SAAS;GAAK,SAAS,EAAE,SAAS,KAAK;GAAE,EACvD;EACF,EACF;CAED,UAAU;EACR,MAAM,EACJ,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAClE;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,uBAAuB,EAAE,EAAE;GACnE,MAAM,EAAE,UAAU,EAAE,4BAA4B,uBAAuB,EAAE;GAC1E;EACD,OAAO,EAAE;EACT,QAAQ;GACN,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,OAAO,EAAE;GAC1C,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}

package/dist/esm/components/radio-card/radio-card.style.js

@@ -78,7 +78,27 @@ const radioCardStyle = defineComponentSlotStyle({
 		shape: { ...radioStyle.props?.shape }
 	},
 	variants: {
-		base: { indicator: radioStyle.variants?.base.indicator },
+		base: {
+			indicator: radioStyle.variants?.base.indicator,
+			root: { _container: [
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"panel\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--form-group-variant: \"elevated\""
+				},
+				{
+					css: { bg: "bg" },
+					style: "--fieldset-root-variant: \"elevated\""
+				}
+			] }
+		},
 		outline: { root: { _checked: {
 			"--indicator-border-color": "colorScheme.outline",
 			"--root-border-color": "colorScheme.outline"

package/dist/esm/components/radio-card/radio-card.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card.style.js","names":[],"sources":["../../../../src/components/radio-card/radio-card.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\nimport { radioStyle } from \"../radio\"\n\nexport const radioCardStyle = defineComponentSlotStyle({\n  base: {\n    addon: {\n      borderColor: \"{--addon-border-color}\",\n      borderTopWidth: \"1px\",\n      fontSize: \"{description-size}\",\n      mt: \"{space-y}\",\n      pt: \"{space-y}\",\n      px: \"{space-x}\",\n    },\n    description: { color: \"fg.muted\", fontSize: \"{description-size}\" },\n    group: { w: \"full\" },\n    indicator: {\n      ...radioStyle.base?.indicator,\n      \"input:focus-visible + &\": {\n        borderColor: \"{focus-ring-color}\",\n      },\n      position: \"absolute\",\n      top: \"calc({space-y} + ({label-size} * 1.5 - {label-size}) / 2)\",\n    },\n    root: {\n      ...radioStyle.base?.root,\n      \"&:has(input:focus-visible)\": focusRingStyle.outline,\n      \"--addon-border-color\": \"{root-border-color}\",\n      \"--root-border-color\": \"colors.border\",\n      alignItems: \"stretch\",\n      borderColor: \"{--root-border-color}\",\n      borderWidth: \"1px\",\n      flexDirection: \"column\",\n      focusRingColor: \"{focus-border-color}\",\n      gap: \"1\",\n      position: \"relative\",\n      px: \"{space-x}\",\n      py: \"{space-y}\",\n      rounded: \"l2\",\n      w: \"full\",\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The justify indicator of the component\n     *\n     * @default 'start'\n     */\n    justify: {\n      end: {\n        addon: {\n          me: \"calc({bleed-size} * -1)\",\n          ms: \"calc({space-x} * -1)\",\n        },\n        indicator: { right: \"{space-x}\" },\n        root: {\n          \"&:has([data-indicator])\": {\n            \"--bleed-size\": \"calc({indicator-size} + ({space-x} * 2))\",\n          },\n          \"--bleed-size\": \"{space-x}\",\n          pe: \"{bleed-size}\",\n        },\n      },\n      start: {\n        addon: {\n          me: \"calc({space-x} * -1)\",\n          ms: \"calc({bleed-size} * -1)\",\n        },\n        indicator: { left: \"{space-x}\" },\n        root: {\n          \"&:has([data-indicator])\": {\n            \"--bleed-size\": \"calc({indicator-size} + ({space-x} * 2))\",\n          },\n          \"--bleed-size\": \"{space-x}\",\n          ps: \"{bleed-size}\",\n        },\n      },\n    },\n    /**\n     * The shape of the component\n     *\n     * @default 'circle'\n     */\n    shape: { ...radioStyle.props?.shape },\n  },\n\n  variants: {\n    base: { indicator: radioStyle.variants?.base.indicator },\n    outline: {\n      root: {\n        _checked: {\n          \"--indicator-border-color\": \"colorScheme.outline\",\n          \"--root-border-color\": \"colorScheme.outline\",\n        },\n      },\n    },\n    subtle: {\n      indicator: { _checked: { bg: \"bg\" } },\n      root: {\n        _checked: {\n          \"--addon-border-color\": \"colorScheme.muted\",\n          \"--indicator-border-color\": \"colorScheme.emphasized\",\n          \"--root-border-color\": \"transparent\",\n          bg: \"colorScheme.subtle\",\n        },\n      },\n    },\n    surface: {\n      indicator: { _checked: { bg: \"bg\" } },\n      root: {\n        _checked: {\n          \"--indicator-border-color\": \"colorScheme.emphasized\",\n          \"--root-border-color\": \"colorScheme.muted\",\n          bg: \"colorScheme.subtle\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: radioStyle.sizes?.sm.indicator,\n      root: {\n        ...radioStyle.sizes?.sm.root,\n        \"--description-size\": \"fontSizes.xs\",\n        \"--space-x\": \"spaces.3\",\n        \"--space-y\": \"spaces.2\",\n      },\n    },\n    md: {\n      indicator: radioStyle.sizes?.md.indicator,\n      root: {\n        ...radioStyle.sizes?.md.root,\n        \"--description-size\": \"fontSizes.sm\",\n        \"--space-x\": \"spaces.4\",\n        \"--space-y\": \"spaces.3\",\n      },\n    },\n    lg: {\n      indicator: radioStyle.sizes?.lg.indicator,\n      root: {\n        ...radioStyle.sizes?.lg.root,\n        \"--description-size\": \"fontSizes.md\",\n        \"--space-x\": \"spaces.5\",\n        \"--space-y\": \"spaces.4\",\n      },\n    },\n    xl: {\n      indicator: radioStyle.sizes?.lg.indicator,\n      root: {\n        ...radioStyle.sizes?.lg.root,\n        \"--description-size\": \"fontSizes.md\",\n        \"--space-x\": \"spaces.6\",\n        \"--space-y\": \"spaces.5\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"surface\",\n    justify: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type RadioCardStyle = typeof radioCardStyle\n"],"mappings":";;;;;;;AAGA,MAAa,iBAAiB,yBAAyB;CACrD,MAAM;EACJ,OAAO;GACL,aAAa;GACb,gBAAgB;GAChB,UAAU;GACV,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,aAAa;GAAE,OAAO;GAAY,UAAU;GAAsB;EAClE,OAAO,EAAE,GAAG,QAAQ;EACpB,WAAW;GACT,GAAG,WAAW,MAAM;GACpB,2BAA2B,EACzB,aAAa,sBACd;GACD,UAAU;GACV,KAAK;GACN;EACD,MAAM;GACJ,GAAG,WAAW,MAAM;GACpB,8BAA8B,eAAe;GAC7C,wBAAwB;GACxB,uBAAuB;GACvB,YAAY;GACZ,aAAa;GACb,aAAa;GACb,eAAe;GACf,gBAAgB;GAChB,KAAK;GACL,UAAU;GACV,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,GAAG;GACH,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACF;CAED,OAAO;EAML,SAAS;GACP,KAAK;IACH,OAAO;KACL,IAAI;KACJ,IAAI;KACL;IACD,WAAW,EAAE,OAAO,aAAa;IACjC,MAAM;KACJ,2BAA2B,EACzB,gBAAgB,4CACjB;KACD,gBAAgB;KAChB,IAAI;KACL;IACF;GACD,OAAO;IACL,OAAO;KACL,IAAI;KACJ,IAAI;KACL;IACD,WAAW,EAAE,MAAM,aAAa;IAChC,MAAM;KACJ,2BAA2B,EACzB,gBAAgB,4CACjB;KACD,gBAAgB;KAChB,IAAI;KACL;IACF;GACF;EAMD,OAAO,EAAE,GAAG,WAAW,OAAO,OAAO;EACtC;CAED,UAAU;EACR,MAAM,EAAE,WAAW,WAAW,UAAU,KAAK,WAAW;EACxD,SAAS,EACP,MAAM,EACJ,UAAU;GACR,4BAA4B;GAC5B,uBAAuB;GACxB,EACF,EACF;EACD,QAAQ;GACN,WAAW,EAAE,UAAU,EAAE,IAAI,MAAM,EAAE;GACrC,MAAM,EACJ,UAAU;IACR,wBAAwB;IACxB,4BAA4B;IAC5B,uBAAuB;IACvB,IAAI;IACL,EACF;GACF;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,IAAI,MAAM,EAAE;GACrC,MAAM,EACJ,UAAU;IACR,4BAA4B;IAC5B,uBAAuB;IACvB,IAAI;IACL,EACF;GACF;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,WAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAG,WAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAW,WAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAG,WAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAW,WAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAG,WAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAW,WAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAG,WAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
+{"version":3,"file":"radio-card.style.js","names":[],"sources":["../../../../src/components/radio-card/radio-card.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\nimport { radioStyle } from \"../radio\"\n\nexport const radioCardStyle = defineComponentSlotStyle({\n  base: {\n    addon: {\n      borderColor: \"{--addon-border-color}\",\n      borderTopWidth: \"1px\",\n      fontSize: \"{description-size}\",\n      mt: \"{space-y}\",\n      pt: \"{space-y}\",\n      px: \"{space-x}\",\n    },\n    description: { color: \"fg.muted\", fontSize: \"{description-size}\" },\n    group: { w: \"full\" },\n    indicator: {\n      ...radioStyle.base?.indicator,\n      \"input:focus-visible + &\": {\n        borderColor: \"{focus-ring-color}\",\n      },\n      position: \"absolute\",\n      top: \"calc({space-y} + ({label-size} * 1.5 - {label-size}) / 2)\",\n    },\n    root: {\n      ...radioStyle.base?.root,\n      \"&:has(input:focus-visible)\": focusRingStyle.outline,\n      \"--addon-border-color\": \"{root-border-color}\",\n      \"--root-border-color\": \"colors.border\",\n      alignItems: \"stretch\",\n      borderColor: \"{--root-border-color}\",\n      borderWidth: \"1px\",\n      flexDirection: \"column\",\n      focusRingColor: \"{focus-border-color}\",\n      gap: \"1\",\n      position: \"relative\",\n      px: \"{space-x}\",\n      py: \"{space-y}\",\n      rounded: \"l2\",\n      w: \"full\",\n      _invalid: {\n        borderColor: \"{error-border-color}\",\n        focusRingColor: \"{error-border-color}\",\n      },\n    },\n  },\n\n  props: {\n    /**\n     * The justify indicator of the component\n     *\n     * @default 'start'\n     */\n    justify: {\n      end: {\n        addon: {\n          me: \"calc({bleed-size} * -1)\",\n          ms: \"calc({space-x} * -1)\",\n        },\n        indicator: { right: \"{space-x}\" },\n        root: {\n          \"&:has([data-indicator])\": {\n            \"--bleed-size\": \"calc({indicator-size} + ({space-x} * 2))\",\n          },\n          \"--bleed-size\": \"{space-x}\",\n          pe: \"{bleed-size}\",\n        },\n      },\n      start: {\n        addon: {\n          me: \"calc({space-x} * -1)\",\n          ms: \"calc({bleed-size} * -1)\",\n        },\n        indicator: { left: \"{space-x}\" },\n        root: {\n          \"&:has([data-indicator])\": {\n            \"--bleed-size\": \"calc({indicator-size} + ({space-x} * 2))\",\n          },\n          \"--bleed-size\": \"{space-x}\",\n          ps: \"{bleed-size}\",\n        },\n      },\n    },\n    /**\n     * The shape of the component\n     *\n     * @default 'circle'\n     */\n    shape: { ...radioStyle.props?.shape },\n  },\n\n  variants: {\n    base: {\n      indicator: radioStyle.variants?.base.indicator,\n      root: {\n        _container: [\n          { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n          { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n          { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n          { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n        ],\n      },\n    },\n    outline: {\n      root: {\n        _checked: {\n          \"--indicator-border-color\": \"colorScheme.outline\",\n          \"--root-border-color\": \"colorScheme.outline\",\n        },\n      },\n    },\n    subtle: {\n      indicator: { _checked: { bg: \"bg\" } },\n      root: {\n        _checked: {\n          \"--addon-border-color\": \"colorScheme.muted\",\n          \"--indicator-border-color\": \"colorScheme.emphasized\",\n          \"--root-border-color\": \"transparent\",\n          bg: \"colorScheme.subtle\",\n        },\n      },\n    },\n    surface: {\n      indicator: { _checked: { bg: \"bg\" } },\n      root: {\n        _checked: {\n          \"--indicator-border-color\": \"colorScheme.emphasized\",\n          \"--root-border-color\": \"colorScheme.muted\",\n          bg: \"colorScheme.subtle\",\n        },\n      },\n    },\n  },\n\n  sizes: {\n    sm: {\n      indicator: radioStyle.sizes?.sm.indicator,\n      root: {\n        ...radioStyle.sizes?.sm.root,\n        \"--description-size\": \"fontSizes.xs\",\n        \"--space-x\": \"spaces.3\",\n        \"--space-y\": \"spaces.2\",\n      },\n    },\n    md: {\n      indicator: radioStyle.sizes?.md.indicator,\n      root: {\n        ...radioStyle.sizes?.md.root,\n        \"--description-size\": \"fontSizes.sm\",\n        \"--space-x\": \"spaces.4\",\n        \"--space-y\": \"spaces.3\",\n      },\n    },\n    lg: {\n      indicator: radioStyle.sizes?.lg.indicator,\n      root: {\n        ...radioStyle.sizes?.lg.root,\n        \"--description-size\": \"fontSizes.md\",\n        \"--space-x\": \"spaces.5\",\n        \"--space-y\": \"spaces.4\",\n      },\n    },\n    xl: {\n      indicator: radioStyle.sizes?.lg.indicator,\n      root: {\n        ...radioStyle.sizes?.lg.root,\n        \"--description-size\": \"fontSizes.md\",\n        \"--space-x\": \"spaces.6\",\n        \"--space-y\": \"spaces.5\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"surface\",\n    justify: \"start\",\n    shape: \"circle\",\n  },\n})\n\nexport type RadioCardStyle = typeof radioCardStyle\n"],"mappings":"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"}

package/dist/esm/components/rating/rating.style.js

@@ -34,7 +34,25 @@ const ratingStyle = defineComponentSlotStyle({
 			"--empty-color": "colors.bg.muted",
 			"--filled-color": "colorScheme.solid",
 			display: "flex",
-			w: "max-content"
+			w: "max-content",
+			_container: [
+				{
+					css: { "--empty-color": "colors.bg" },
+					style: "--form-group-variant: \"panel\""
+				},
+				{
+					css: { "--empty-color": "colors.bg" },
+					style: "--fieldset-root-variant: \"panel\""
+				},
+				{
+					css: { "--empty-color": "colors.bg" },
+					style: "--form-group-variant: \"elevated\""
+				},
+				{
+					css: { "--empty-color": "colors.bg" },
+					style: "--fieldset-root-variant: \"elevated\""
+				}
+			]
 		}
 	},
 	sizes: {

package/dist/esm/components/rating/rating.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.style.js","names":[],"sources":["../../../../src/components/rating/rating.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const ratingStyle = defineComponentSlotStyle({\n  base: {\n    group: { position: \"relative\" },\n    icon: {\n      alignItems: \"center\",\n      clipPath: \"{clip-path}\",\n      display: \"inline-flex\",\n      fill: \"currentColor\",\n      justifyContent: \"center\",\n    },\n    item: {\n      \"&:has(input:focus-visible)\": { ...focusRingStyle.outside },\n      color: { base: \"{empty-color}\", _filled: \"{filled-color}\" },\n      cursor: \"pointer\",\n      display: \"block\",\n      lineHeight: \"0\",\n      rounded: \"l1\",\n      _notLast: { inset: 0, position: \"absolute\" },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    root: {\n      \"--empty-color\": \"colors.bg.muted\",\n      \"--filled-color\": \"colorScheme.solid\",\n      display: \"flex\",\n      w: \"max-content\",\n    },\n  },\n\n  sizes: {\n    xs: { icon: { fontSize: \"md\" } },\n    sm: { icon: { fontSize: \"lg\" } },\n    md: { icon: { fontSize: \"xl\" } },\n    lg: { icon: { fontSize: \"2xl\" } },\n    xl: { icon: { fontSize: \"3xl\" } },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type RatingStyle = typeof ratingStyle\n"],"mappings":";;;;;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,EAAE,UAAU,YAAY;EAC/B,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,SAAS;GACT,MAAM;GACN,gBAAgB;GACjB;EACD,MAAM;GACJ,8BAA8B,EAAE,GAAG,eAAe,SAAS;GAC3D,OAAO;IAAE,MAAM;IAAiB,SAAS;IAAkB;GAC3D,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,SAAS;GACT,UAAU;IAAE,OAAO;IAAG,UAAU;IAAY;GAC5C,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,MAAM;GACJ,iBAAiB;GACjB,kBAAkB;GAClB,SAAS;GACT,GAAG;GACJ;EACF;CAED,OAAO;EACL,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EACjC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EAClC;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"rating.style.js","names":[],"sources":["../../../../src/components/rating/rating.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const ratingStyle = defineComponentSlotStyle({\n  base: {\n    group: { position: \"relative\" },\n    icon: {\n      alignItems: \"center\",\n      clipPath: \"{clip-path}\",\n      display: \"inline-flex\",\n      fill: \"currentColor\",\n      justifyContent: \"center\",\n    },\n    item: {\n      \"&:has(input:focus-visible)\": { ...focusRingStyle.outside },\n      color: { base: \"{empty-color}\", _filled: \"{filled-color}\" },\n      cursor: \"pointer\",\n      display: \"block\",\n      lineHeight: \"0\",\n      rounded: \"l1\",\n      _notLast: { inset: 0, position: \"absolute\" },\n      _readOnly: { layerStyle: \"readOnly\" },\n      _disabled: { layerStyle: \"disabled\" },\n    },\n    root: {\n      \"--empty-color\": \"colors.bg.muted\",\n      \"--filled-color\": \"colorScheme.solid\",\n      display: \"flex\",\n      w: \"max-content\",\n      _container: [\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--form-group-variant: \"panel\"',\n        },\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--fieldset-root-variant: \"panel\"',\n        },\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--form-group-variant: \"elevated\"',\n        },\n        {\n          css: { \"--empty-color\": \"colors.bg\" },\n          style: '--fieldset-root-variant: \"elevated\"',\n        },\n      ],\n    },\n  },\n\n  sizes: {\n    xs: { icon: { fontSize: \"md\" } },\n    sm: { icon: { fontSize: \"lg\" } },\n    md: { icon: { fontSize: \"xl\" } },\n    lg: { icon: { fontSize: \"2xl\" } },\n    xl: { icon: { fontSize: \"3xl\" } },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type RatingStyle = typeof ratingStyle\n"],"mappings":";;;;;AAEA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,EAAE,UAAU,YAAY;EAC/B,MAAM;GACJ,YAAY;GACZ,UAAU;GACV,SAAS;GACT,MAAM;GACN,gBAAgB;GACjB;EACD,MAAM;GACJ,8BAA8B,EAAE,GAAG,eAAe,SAAS;GAC3D,OAAO;IAAE,MAAM;IAAiB,SAAS;IAAkB;GAC3D,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,SAAS;GACT,UAAU;IAAE,OAAO;IAAG,UAAU;IAAY;GAC5C,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACD,MAAM;GACJ,iBAAiB;GACjB,kBAAkB;GAClB,SAAS;GACT,GAAG;GACH,YAAY;IACV;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACD;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACD;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACD;KACE,KAAK,EAAE,iBAAiB,aAAa;KACrC,OAAO;KACR;IACF;GACF;EACF;CAED,OAAO;EACL,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,MAAM,EAAE;EAChC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EACjC,IAAI,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE;EAClC;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/esm/components/resizable/index.js

@@ -1,6 +1,6 @@
 import { resizableStyle } from "./resizable.style.js";
-import { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableTrigger } from "./use-resizable.js";
+import { ResizableContext, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizableTrigger } from "./use-resizable.js";
 import { ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, useResizablePropsContext } from "./resizable.js";
 import { namespace_exports } from "./namespace.js";
 
-export { namespace_exports as Resizable, ResizableContext, ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, resizableStyle, useResizable, useResizableContext, useResizableItem, useResizablePropsContext, useResizableTrigger };
+export { namespace_exports as Resizable, ResizableContext, ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, resizableStyle, useResizable, useResizableContext, useResizableItem, useResizableLayout, useResizablePropsContext, useResizableTrigger };

package/dist/esm/components/resizable/namespace.js

@@ -1,5 +1,5 @@
 import { __exportAll } from "../../_virtual/rolldown_runtime.js";
-import { ResizableContext, useResizableContext } from "./use-resizable.js";
+import { ResizableContext, useResizableContext, useResizableLayout } from "./use-resizable.js";
 import { ResizableItem, ResizablePropsContext, ResizableRoot, ResizableTrigger, useResizablePropsContext } from "./resizable.js";
 
 //#region src/components/resizable/namespace.ts
@@ -10,6 +10,7 @@ var namespace_exports = /* @__PURE__ */ __exportAll({
 	Root: () => ResizableRoot,
 	Trigger: () => ResizableTrigger,
 	useContext: () => useResizableContext,
+	useLayout: () => useResizableLayout,
 	usePropsContext: () => useResizablePropsContext
 });
 

package/dist/esm/components/resizable/namespace.js.map

@@ -1 +1 @@
-{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/resizable/namespace.ts"],"sourcesContent":["export {\n  ResizableItem as Item,\n  ResizablePropsContext as PropsContext,\n  ResizableRoot as Root,\n  ResizableTrigger as Trigger,\n  useResizablePropsContext as usePropsContext,\n} from \"./resizable\"\nexport type {\n  ResizableItemProps as ItemProps,\n  ResizableRootProps as RootProps,\n  ResizableTriggerProps as TriggerProps,\n} from \"./resizable\"\nexport {\n  ResizableContext as Context,\n  useResizableContext as useContext,\n} from \"./use-resizable\"\nexport type {\n  ResizableGroupControl as GroupControl,\n  ResizableItemControl as ItemControl,\n  ResizableStorage as Storage,\n} from \"./use-resizable\"\n"],"mappings":""}
+{"version":3,"file":"namespace.js","names":[],"sources":["../../../../src/components/resizable/namespace.ts"],"sourcesContent":["export {\n  ResizableItem as Item,\n  ResizablePropsContext as PropsContext,\n  ResizableRoot as Root,\n  ResizableTrigger as Trigger,\n  useResizablePropsContext as usePropsContext,\n} from \"./resizable\"\nexport type {\n  ResizableItemProps as ItemProps,\n  ResizableRootProps as RootProps,\n  ResizableTriggerProps as TriggerProps,\n} from \"./resizable\"\nexport {\n  ResizableContext as Context,\n  useResizableContext as useContext,\n  useResizableLayout as useLayout,\n} from \"./use-resizable\"\nexport type {\n  ResizableItemControl as ItemControl,\n  ResizableRootControl as RootControl,\n  ResizableStorage as Storage,\n} from \"./use-resizable\"\n"],"mappings":""}

package/dist/esm/components/resizable/resizable.js

@@ -8,43 +8,43 @@ import { resizableStyle } from "./resizable.style.js";
 import { ResizableContext, useResizable, useResizableItem, useResizableTrigger } from "./use-resizable.js";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { Group, Panel, Separator } from "react-resizable-panels";
 
 //#region src/components/resizable/resizable.tsx
 const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = createSlotComponent("resizable", resizableStyle);
-const ResizableRoot = withProvider(({ children, orientation: orientationProp, rootRef, ...rest }) => {
-	const { controlRef, disabled, orientation, getGroupProps, getRootProps } = useResizable({
+const ResizableRoot = withProvider(({ children, orientation: orientationProp, ...rest }) => {
+	const { disabled, groupRef, orientation, getRootProps } = useResizable({
 		orientation: useValue(orientationProp),
 		...rest
 	});
 	return /* @__PURE__ */ jsx(ResizableContext, {
 		value: useMemo(() => ({
-			controlRef,
 			disabled,
+			groupRef,
 			orientation
 		}), [
 			disabled,
 			orientation,
-			controlRef
+			groupRef
 		]),
 		children: /* @__PURE__ */ jsx(styled.div, {
-			...getRootProps({ ref: rootRef }),
-			children: /* @__PURE__ */ jsx(PanelGroup, {
-				...getGroupProps(),
-				children
-			})
+			as: Group,
+			...getRootProps(),
+			children
 		})
 	});
 }, "root", { transferProps: ["orientation"] })();
-const StyledPanel = styled(Panel, { forwardProps: ["order"] });
 const ResizableItem = withContext((props) => {
 	const { getItemProps } = useResizableItem(props);
-	return /* @__PURE__ */ jsx(StyledPanel, { ...getItemProps() });
+	return /* @__PURE__ */ jsx(styled.div, {
+		as: Panel,
+		...getItemProps()
+	});
 }, "item")();
 const ResizableTrigger = withContext(({ children, icon, iconProps, ...rest }) => {
 	const { getIconProps, getTriggerProps } = useResizableTrigger(rest);
 	return /* @__PURE__ */ jsxs(styled.div, {
-		as: PanelResizeHandle,
+		as: Separator,
 		...getTriggerProps(),
 		children: [icon ? /* @__PURE__ */ jsx(ResizableIcon, {
 			...getIconProps(iconProps),

package/dist/esm/components/resizable/resizable.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.js","names":[],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef, ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  HTMLStyledPropsWithoutAs,\n  ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n  UseResizableItemProps,\n  UseResizableProps,\n  UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Panel, PanelGroup, PanelResizeHandle } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n  ResizableContext,\n  useResizable,\n  useResizableItem,\n  useResizableTrigger,\n} from \"./use-resizable\"\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see https://yamada-ui.com/docs/components/resizable\n */\nexport interface ResizableRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {\n  /**\n   * Ref for resizable root element.\n   */\n  rootRef?: ForwardedRef<HTMLDivElement>\n}\n\nconst {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n  \"div\",\n  ResizableRootProps,\n  \"orientation\"\n>(\n  ({ children, orientation: orientationProp, rootRef, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { controlRef, disabled, orientation, getGroupProps, getRootProps } =\n      useResizable({ orientation: computedOrientation, ...rest })\n\n    const context = useMemo(\n      () => ({ controlRef, disabled, orientation }),\n      [disabled, orientation, controlRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div {...getRootProps({ ref: rootRef })}>\n          <PanelGroup {...getGroupProps()}>{children}</PanelGroup>\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nconst StyledPanel = styled(Panel, { forwardProps: [\"order\"] })\n\nexport interface ResizableItemProps\n  extends Omit<HTMLStyledPropsWithoutAs, \"order\">, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <StyledPanel {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n  extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n  ({ children, icon, iconProps, ...rest }) => {\n    const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n    return (\n      <styled.div as={PanelResizeHandle} {...getTriggerProps()}>\n        {icon ? (\n          <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n        ) : null}\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;AA0CA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,eACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,SAAS,GAAG,WAAW;CAEhE,MAAM,EAAE,YAAY,UAAU,aAAa,eAAe,iBACxD,aAAa;EAAE,aAFW,SAAS,gBAAgB;EAEF,GAAG;EAAM,CAAC;AAO7D,QACE,oBAAC;EAAiB,OANJ,eACP;GAAE;GAAY;GAAU;GAAa,GAC5C;GAAC;GAAU;GAAa;GAAW,CACpC;YAIG,oBAAC,OAAO;GAAI,GAAI,aAAa,EAAE,KAAK,SAAS,CAAC;aAC5C,oBAAC;IAAW,GAAI,eAAe;IAAG;KAAsB;IAC7C;GACI;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAEH,MAAM,cAAc,OAAO,OAAO,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC;AAK9D,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiB,iBAAiB,MAAM;AAEhD,QAAO,oBAAC,eAAY,GAAI,cAAc,GAAI;GACzC,OAAO,EAAE;AAcZ,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,KAAK;AAEnE,QACE,qBAAC,OAAO;EAAI,IAAI;EAAmB,GAAI,iBAAiB;aACrD,OACC,oBAAC;GAAc,GAAI,aAAa,UAAU;aAAG;IAAqB,GAChE,MAEH;GACU;GAGjB,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,EAAE"}
+{"version":3,"file":"resizable.js","names":[],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n  HTMLStyledProps,\n  HTMLStyledPropsWithoutAs,\n  ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n  UseResizableItemProps,\n  UseResizableProps,\n  UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n  ResizableContext,\n  useResizable,\n  useResizableItem,\n  useResizableTrigger,\n} from \"./use-resizable\"\n\n/**\n * `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n *\n * @see https://yamada-ui.com/docs/components/resizable\n */\nexport interface ResizableRootProps\n  extends\n    HTMLStyledProps,\n    ThemeProps<ResizableStyle>,\n    Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n  PropsContext: ResizablePropsContext,\n  usePropsContext: useResizablePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n  \"resizable\",\n  resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n  \"div\",\n  ResizableRootProps,\n  \"orientation\"\n>(\n  ({ children, orientation: orientationProp, ...rest }) => {\n    const computedOrientation = useValue(orientationProp)\n    const { disabled, groupRef, orientation, getRootProps } = useResizable({\n      orientation: computedOrientation,\n      ...rest,\n    })\n\n    const context = useMemo(\n      () => ({ disabled, groupRef, orientation }),\n      [disabled, orientation, groupRef],\n    )\n\n    return (\n      <ResizableContext value={context}>\n        <styled.div as={Group} {...getRootProps()}>\n          {children}\n        </styled.div>\n      </ResizableContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n  extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n  const { getItemProps } = useResizableItem(props)\n\n  return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n  extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n  /**\n   * The resizable trigger icon to use.\n   */\n  icon?: ReactElement\n  /**\n   * Props for resizable trigger icon component.\n   */\n  iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n  ({ children, icon, iconProps, ...rest }) => {\n    const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n    return (\n      <styled.div as={Separator} {...getTriggerProps()}>\n        {icon ? (\n          <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n        ) : null}\n\n        {children}\n      </styled.div>\n    )\n  },\n  \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,aACA,eACD;AAID,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CAEvD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiB,aAAa;EACrE,aAF0B,SAAS,gBAAgB;EAGnD,GAAG;EACJ,CAAC;AAOF,QACE,oBAAC;EAAiB,OANJ,eACP;GAAE;GAAU;GAAU;GAAa,GAC1C;GAAC;GAAU;GAAa;GAAS,CAClC;YAIG,oBAAC,OAAO;GAAI,IAAI;GAAO,GAAI,cAAc;GACtC;IACU;GACI;GAGvB,QACA,EAAE,eAAe,CAAC,cAAc,EAAE,CACnC,EAAE;AAKH,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiB,iBAAiB,MAAM;AAEhD,QAAO,oBAAC,OAAO;EAAI,IAAI;EAAO,GAAI,cAAc;GAAI;GACnD,OAAO,EAAE;AAcZ,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoB,oBAAoB,KAAK;AAEnE,QACE,qBAAC,OAAO;EAAI,IAAI;EAAW,GAAI,iBAAiB;aAC7C,OACC,oBAAC;GAAc,GAAI,aAAa,UAAU;aAAG;IAAqB,GAChE,MAEH;GACU;GAGjB,UACD,EAAE;AAIH,MAAM,gBAAgB,YAAuC,OAAO,OAAO,EAAE"}

package/dist/esm/components/resizable/resizable.style.js

@@ -50,8 +50,7 @@ const resizableStyle = defineComponentSlotStyle({
 			icon: {
 				color: "colorScheme.fg",
 				transitionDuration: "moderate",
-				transitionProperty: "common",
-				_active: { color: "transparent" }
+				transitionProperty: "common"
 			},
 			trigger: {
 				focusVisibleRing: "none",