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

package/dist/cjs/components/popover/popover.style.cjs

@@ -1,65 +1,15 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
+const require_native_popover_style = require('../native-popover/native-popover.style.cjs');
+require('../native-popover/index.cjs');
 
 //#region src/components/popover/popover.style.ts
 const popoverStyle = require_config.defineComponentSlotStyle({
 	base: {
-		body: {
-			alignItems: "flex-start",
-			display: "flex",
-			flex: "1",
-			flexDirection: "column",
-			gap: "{gap}"
-		},
-		content: {
-			bg: "bg.float",
-			borderColor: "border.muted",
-			borderWidth: "1px",
-			boxShadow: "sm",
-			display: "flex",
-			flexDirection: "column",
-			focusVisibleRing: "none",
-			gap: "{gap}",
-			p: "{padding}",
-			rounded: "l2"
-		},
-		footer: {
-			alignItems: "center",
-			display: "flex",
-			gap: "{gap}",
-			justifyContent: "flex-start"
-		},
-		header: {
-			alignItems: "center",
-			display: "flex",
-			fontWeight: "semibold",
-			gap: "{gap}",
-			justifyContent: "flex-start"
-		},
+		...require_native_popover_style.nativePopoverStyle.base,
 		positioner: { zIndex: "recoome" }
 	},
-	sizes: {
-		xs: { content: {
-			"--gap": "spaces.1",
-			"--padding": "spaces.2",
-			fontSize: "xs"
-		} },
-		sm: { content: {
-			"--gap": "spaces.2",
-			"--padding": "spaces.3",
-			fontSize: "sm"
-		} },
-		md: { content: {
-			"--gap": "spaces.3",
-			"--padding": "spaces.4",
-			fontSize: "md"
-		} },
-		lg: { content: {
-			"--gap": "spaces.4",
-			"--padding": "spaces.5",
-			fontSize: "md"
-		} }
-	},
+	sizes: require_native_popover_style.nativePopoverStyle.sizes,
 	defaultProps: { size: "md" }
 });
 

package/dist/cjs/components/popover/popover.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/popover/popover.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const popoverStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flex: \"1\",\n      flexDirection: \"column\",\n      gap: \"{gap}\",\n    },\n    content: {\n      bg: \"bg.float\",\n      borderColor: \"border.muted\",\n      borderWidth: \"1px\",\n      boxShadow: \"sm\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      focusVisibleRing: \"none\",\n      gap: \"{gap}\",\n      p: \"{padding}\",\n      rounded: \"l2\",\n    },\n    footer: {\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n    header: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"semibold\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n    positioner: {\n      zIndex: \"recoome\",\n    },\n  },\n\n  sizes: {\n    xs: {\n      content: {\n        \"--gap\": \"spaces.1\",\n        \"--padding\": \"spaces.2\",\n        fontSize: \"xs\",\n      },\n    },\n    sm: {\n      content: {\n        \"--gap\": \"spaces.2\",\n        \"--padding\": \"spaces.3\",\n        fontSize: \"sm\",\n      },\n    },\n    md: {\n      content: {\n        \"--gap\": \"spaces.3\",\n        \"--padding\": \"spaces.4\",\n        fontSize: \"md\",\n      },\n    },\n    lg: {\n      content: {\n        \"--gap\": \"spaces.4\",\n        \"--padding\": \"spaces.5\",\n        fontSize: \"md\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type PopoverStyle = typeof popoverStyle\n"],"mappings":";;;;AAEA,MAAa,eAAeA,wCAAyB;CACnD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACN;EACD,SAAS;GACP,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,eAAe;GACf,kBAAkB;GAClB,KAAK;GACL,GAAG;GACH,SAAS;GACV;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GACjB;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,gBAAgB;GACjB;EACD,YAAY,EACV,QAAQ,WACT;EACF;CAED,OAAO;EACL,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}
+{"version":3,"file":"popover.style.cjs","names":["defineComponentSlotStyle","nativePopoverStyle"],"sources":["../../../../src/components/popover/popover.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { nativePopoverStyle } from \"../native-popover\"\n\nexport const popoverStyle = defineComponentSlotStyle({\n  base: {\n    ...nativePopoverStyle.base,\n    positioner: { zIndex: \"recoome\" },\n  },\n\n  sizes: nativePopoverStyle.sizes,\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type PopoverStyle = typeof popoverStyle\n"],"mappings":";;;;;;AAGA,MAAa,eAAeA,wCAAyB;CACnD,MAAM;EACJ,GAAGC,gDAAmB;EACtB,YAAY,EAAE,QAAQ,WAAW;EAClC;CAED,OAAOA,gDAAmB;CAE1B,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/cjs/components/popover/use-popover.cjs

@@ -8,12 +8,12 @@ const require_utils_index = require('../../utils/index.cjs');
 const require_environment_provider = require('../../core/system/environment-provider.cjs');
 const require_props = require('../../core/components/props.cjs');
 require('../../core/index.cjs');
+const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
 const require_use_disclosure = require('../../hooks/use-disclosure/use-disclosure.cjs');
 require('../../hooks/use-disclosure/index.cjs');
 const require_hooks_use_event_listener_index = require('../../hooks/use-event-listener/index.cjs');
 const require_hooks_use_focus_index = require('../../hooks/use-focus/index.cjs');
 const require_hooks_use_outside_click_index = require('../../hooks/use-outside-click/index.cjs');
-const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
 let react = require("react");
 
 //#region src/components/popover/use-popover.tsx
@@ -141,9 +141,7 @@ const usePopover = ({ autoFocus = true, autoUpdate, modal = false, blockScrollOn
 		...props,
 		ref: require_ref.mergeRefs(ref, anchorRef, refs.setReference)
 	}), [refs.setReference]);
-	const getPositionerProps = (0, react.useCallback)((props) => {
-		return getPopperProps(props);
-	}, [getPopperProps]);
+	const getPositionerProps = (0, react.useCallback)(getPopperProps, [getPopperProps]);
 	const getContentProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
 		id: contentId,
 		"aria-hidden": !open,
@@ -168,15 +166,24 @@ const usePopover = ({ autoFocus = true, autoUpdate, modal = false, blockScrollOn
 		id: headerId,
 		...props
 	}), [headerId]);
+	const getBodyProps = (0, react.useCallback)((props) => ({
+		id: bodyId,
+		...props
+	}), [bodyId]);
+	const getFooterProps = (0, react.useCallback)((props) => ({ ...props }), []);
 	return {
 		open,
 		getAnchorProps,
-		getBodyProps: (0, react.useCallback)((props) => ({
-			id: bodyId,
-			...props
-		}), [bodyId]),
+		getBodyProps,
+		getCloseTriggerProps: (0, react.useCallback)((props = {}) => ({
+			...props,
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, () => {
+				onClose();
+				triggerRef.current?.focus();
+			})
+		}), [onClose]),
 		getContentProps,
-		getFooterProps: (0, react.useCallback)((props) => ({ ...props }), []),
+		getFooterProps,
 		getHeaderProps,
 		getPositionerProps,
 		getTriggerProps,

package/dist/cjs/components/popover/use-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-popover.cjs","names":["useEnvironment","useDisclosure","usePopper","getEventRelatedTarget","getTriggerProps: PropGetter<\"button\">","mergeRefs","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","popoverProps: (\n  | keyof PopupAnimationProps\n  | keyof UsePopoverProps\n)[]","popperProps","useSplitProps"],"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.cjs","names":["useEnvironment","useDisclosure","usePopper","getEventRelatedTarget","getTriggerProps: PropGetter<\"button\">","mergeRefs","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter","popoverProps: (\n  | keyof PopupAnimationProps\n  | keyof UsePopoverProps\n)[]","popperProps","useSplitProps"],"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/cjs/components/qr-code/index.cjs

@@ -0,0 +1,19 @@
+const require_qr_code_style = require('./qr-code.style.cjs');
+const require_use_qr_code = require('./use-qr-code.cjs');
+const require_qr_code = require('./qr-code.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'QrCode', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.QrCodeFrame = require_qr_code.QrCodeFrame;
+exports.QrCodeOverlay = require_qr_code.QrCodeOverlay;
+exports.QrCodePattern = require_qr_code.QrCodePattern;
+exports.QrCodePropsContext = require_qr_code.QrCodePropsContext;
+exports.QrCodeRoot = require_qr_code.QrCodeRoot;
+exports.qrCodeStyle = require_qr_code_style.qrCodeStyle;
+exports.useQrCode = require_use_qr_code.useQrCode;
+exports.useQrCodePropsContext = require_qr_code.useQrCodePropsContext;

package/dist/cjs/components/qr-code/namespace.cjs

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_qr_code = require('./qr-code.cjs');
+
+//#region src/components/qr-code/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Frame: () => require_qr_code.QrCodeFrame,
+	Overlay: () => require_qr_code.QrCodeOverlay,
+	Pattern: () => require_qr_code.QrCodePattern,
+	PropsContext: () => require_qr_code.QrCodePropsContext,
+	Root: () => require_qr_code.QrCodeRoot,
+	usePropsContext: () => require_qr_code.useQrCodePropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/qr-code/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","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/cjs/components/qr-code/qr-code.cjs

@@ -0,0 +1,66 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_children = require('../../utils/children.cjs');
+require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_qr_code_style = require('./qr-code.style.cjs');
+const require_use_qr_code = require('./use-qr-code.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/qr-code/qr-code.tsx
+const { ComponentContext, PropsContext: QrCodePropsContext, useComponentContext, usePropsContext: useQrCodePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("qr-code", require_qr_code_style.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 } = require_use_qr_code.useQrCode(rest);
+	const [omittedChildren, customFrame] = require_children.useSplitChildren(children, QrCodeFrame);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+		value: (0, react.useMemo)(() => ({
+			getFrameProps,
+			getOverlayProps,
+			getPatternProps,
+			patternProps
+		}), [
+			getFrameProps,
+			getOverlayProps,
+			getPatternProps,
+			patternProps
+		]),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
+			...getRootProps(),
+			children: [customFrame ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QrCodeFrame, { ...frameProps }), omittedChildren]
+		})
+	});
+}, "root")();
+const QrCodeFrame = withContext(({ children, ...rest }) => {
+	const { getFrameProps, patternProps } = useComponentContext();
+	const [omittedChildren, customPattern] = require_children.useSplitChildren(children, QrCodePattern);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.svg, {
+		...getFrameProps(rest),
+		children: [customPattern ?? /* @__PURE__ */ (0, react_jsx_runtime.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
+exports.QrCodeFrame = QrCodeFrame;
+exports.QrCodeOverlay = QrCodeOverlay;
+exports.QrCodePattern = QrCodePattern;
+exports.QrCodePropsContext = QrCodePropsContext;
+exports.QrCodeRoot = QrCodeRoot;
+exports.useQrCodePropsContext = useQrCodePropsContext;
+//# sourceMappingURL=qr-code.cjs.map

package/dist/cjs/components/qr-code/qr-code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.cjs","names":["createSlotComponent","qrCodeStyle","useQrCode","useSplitChildren","styled"],"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,iBACEA,6CACF,WACAC,kCACD;;;;;;AASD,MAAa,aAAa,cACvB,EAAE,UAAU,YAAY,cAAc,GAAG,WAAW;CACnD,MAAM,EAAE,eAAe,iBAAiB,iBAAiB,iBACvDC,8BAAU,KAAK;CACjB,MAAM,CAAC,iBAAiB,eAAeC,kCACrC,UACA,YACD;AAMD,QACE,2CAAC;EAAiB,iCALX;GAAE;GAAe;GAAiB;GAAiB;GAAc,GACxE;GAAC;GAAe;GAAiB;GAAiB;GAAa,CAChE;YAIG,4CAACC,uBAAO;GAAI,GAAI,cAAc;cAC3B,eAAe,2CAAC,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,iBAAiBD,kCACvC,UACA,cACD;AAED,QACE,4CAACC,uBAAO;EAAI,GAAI,cAAc,KAAK;aAChC,iBAAiB,2CAAC,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/cjs/components/qr-code/qr-code.style.cjs

@@ -0,0 +1,48 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/qr-code/qr-code.style.ts
+const qrCodeStyle = require_config.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
+exports.qrCodeStyle = qrCodeStyle;
+//# sourceMappingURL=qr-code.style.cjs.map

package/dist/cjs/components/qr-code/qr-code.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qr-code.style.cjs","names":["defineComponentSlotStyle"],"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,cAAcA,wCAAyB;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/cjs/components/qr-code/use-qr-code.cjs

@@ -0,0 +1,67 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let uqr = require("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 = (0, react.useMemo)(() => (0, uqr.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 = (0, react.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 = (0, react.useCallback)((props = {}) => ({
+		...rest,
+		...props
+	}), [rest]);
+	return {
+		height,
+		paths,
+		viewBox,
+		width,
+		getFrameProps: (0, react.useCallback)((props = {}) => ({
+			viewBox: `0 0 ${width} ${height}`,
+			...props
+		}), [height, width]),
+		getOverlayProps: (0, react.useCallback)((props = {}) => ({ ...props }), []),
+		getPatternProps: (0, react.useCallback)((props) => ({
+			...props,
+			d: paths.join(" ")
+		}), [paths]),
+		getRootProps
+	};
+};
+
+//#endregion
+exports.useQrCode = useQrCode;
+//# sourceMappingURL=use-qr-code.cjs.map

package/dist/cjs/components/qr-code/use-qr-code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-qr-code.cjs","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,mDAEK,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,iCAAgC;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,uCACH,QAAQ,EAAE,MAAM;EAAE,GAAG;EAAM,GAAG;EAAO,GACtC,CAAC,KAAK,CACP;AAiBD,QAAO;EACL;EACA;EACA;EACA;EACA,uCAnBC,QAAQ,EAAE,MAAM;GAAE,SAAS,OAAO,MAAM,GAAG;GAAU,GAAG;GAAO,GAChE,CAAC,QAAQ,MAAM,CAChB;EAkBC,yCAfC,QAAQ,EAAE,MAAM,EAAE,GAAG,OAAO,GAC7B,EAAE,CACH;EAcC,yCAXC,WAAW;GAAE,GAAG;GAAO,GAAG,MAAM,KAAK,IAAI;GAAE,GAC5C,CAAC,MAAM,CACR;EAUC;EACD"}

package/dist/cjs/components/radio/radio.style.cjs

@@ -16,6 +16,24 @@ const radioStyle = require_config.defineComponentSlotStyle({
 			"input:focus-visible + &": require_focus_ring.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/cjs/components/radio/radio.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"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,aAAaA,wCAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2BC,kCAAe;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.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"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,aAAaA,wCAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2BC,kCAAe;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/cjs/components/radio-card/radio-card.style.cjs

@@ -78,7 +78,27 @@ const radioCardStyle = require_config.defineComponentSlotStyle({
 		shape: { ...require_radio_style.radioStyle.props?.shape }
 	},
 	variants: {
-		base: { indicator: require_radio_style.radioStyle.variants?.base.indicator },
+		base: {
+			indicator: require_radio_style.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/cjs/components/radio-card/radio-card.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-card.style.cjs","names":["defineComponentSlotStyle","radioStyle","focusRingStyle"],"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,iBAAiBA,wCAAyB;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,GAAGC,+BAAW,MAAM;GACpB,2BAA2B,EACzB,aAAa,sBACd;GACD,UAAU;GACV,KAAK;GACN;EACD,MAAM;GACJ,GAAGA,+BAAW,MAAM;GACpB,8BAA8BC,kCAAe;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,GAAGD,+BAAW,OAAO,OAAO;EACtC;CAED,UAAU;EACR,MAAM,EAAE,WAAWA,+BAAW,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,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,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.cjs","names":["defineComponentSlotStyle","radioStyle","focusRingStyle"],"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":";;;;;;;AAGA,MAAa,iBAAiBA,wCAAyB;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,GAAGC,+BAAW,MAAM;GACpB,2BAA2B,EACzB,aAAa,sBACd;GACD,UAAU;GACV,KAAK;GACN;EACD,MAAM;GACJ,GAAGA,+BAAW,MAAM;GACpB,8BAA8BC,kCAAe;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,GAAGD,+BAAW,OAAO,OAAO;EACtC;CAED,UAAU;EACR,MAAM;GACJ,WAAWA,+BAAW,UAAU,KAAK;GACrC,MAAM,EACJ,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,EACF;GACF;EACD,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,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACD,IAAI;GACF,WAAWA,+BAAW,OAAO,GAAG;GAChC,MAAM;IACJ,GAAGA,+BAAW,OAAO,GAAG;IACxB,sBAAsB;IACtB,aAAa;IACb,aAAa;IACd;GACF;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACR;CACF,CAAC"}

package/dist/cjs/components/rating/rating.style.cjs

@@ -34,7 +34,25 @@ const ratingStyle = require_config.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: {