npm - @yamada-ui/react - Versions diffs - 2.1.3-dev-20260315020004 → 2.1.3-dev-20260315080238 - Mend

@yamada-ui/react 2.1.3-dev-20260315020004 → 2.1.3-dev-20260315080238

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (270) hide show

package/dist/cjs/components/native-popover/use-native-popover.cjs CHANGED Viewed

@@ -65,7 +65,7 @@ const useNativePopover = ({ autoUpdate, disabled = false, elements, flip, gutter
 		...props,
 		ref: require_ref.mergeRefs(ref, anchorRef, refs.setReference)
 	}), [refs.setReference]);
-	const getPositionerProps = (0, react.useCallback)(getPopperProps, [getPopperProps]);
+	const getPositionerProps = (0, react.useCallback)((props) => getPopperProps(props), [getPopperProps]);
 	const getContentProps = (0, react.useCallback)(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
 		const hasHeader = !!getDocument()?.getElementById(headerId);
 		const hasBody = !!getDocument()?.getElementById(bodyId);

package/dist/cjs/components/native-popover/use-native-popover.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-native-popover.cjs","names":["useEnvironment","usePopper","getTriggerProps: PropGetter<\"button\">","mergeRefs","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n ariaAttr,\n assignRef,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n /*\n If `true`, the popover will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: Direction\n /\n The mode of the popover.\n \n @default 'auto'\n /\n popover?: \"\" \| \"auto\" \| \"hint\" \| \"manual\" \| true\n /\n The target element ID for the popover trigger.\n * If not provided, a generated ID will be used.\n /\n popoverTarget?: string\n /\n The action for the popover target.\n \n @default 'toggle'\n /\n popoverTargetAction?: \"hide\" \| \"show\" \| \"toggle\"\n /\n Update the position of the floating element, re-rendering the component if required.\n */\n updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n autoUpdate,\n disabled = false,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement = \"end\",\n platform,\n popover = \"auto\",\n popoverTarget,\n popoverTargetAction = \"toggle\",\n preventOverflow,\n strategy,\n transform,\n updateRef,\n whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n const { getDocument } = useEnvironment()\n const headerId = useId()\n const bodyId = useId()\n const generatedContentId = useId()\n const contentId = popoverTarget ?? generatedContentId\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const { refs, update, getPopperProps } = usePopper<\"button\">({\n autoUpdate,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement,\n platform,\n preventOverflow,\n strategy,\n transform,\n whileElementsMounted,\n })\n\n assignRef(updateRef, update)\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n if (!disabled) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [disabled],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n return {\n type: \"button\",\n \"aria-controls\": contentId,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-haspopup\": \"dialog\",\n popoverTarget: contentId,\n popoverTargetAction,\n role: \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, (node) => {\n if (anchorRef.current == null) refs.setReference(node)\n }),\n onClick: handlerAll(props.onClick, onClick),\n }\n },\n [contentId, disabled, onClick, popoverTargetAction, refs],\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 ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const hasHeader = !!getDocument()?.getElementById(headerId)\n const hasBody = !!getDocument()?.getElementById(bodyId)\n\n return {\n id: contentId,\n \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n \"data-popup\": dataAttr(true),\n popover: popover === true ? \"\" : popover,\n role: \"dialog\",\n tabIndex: -1,\n ...props,\n ref: mergeRefs(ref, contentRef),\n }\n },\n [getDocument, headerId, bodyId, contentId, popover],\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 return {\n popoverTarget: contentId,\n popoverTargetAction: \"hide\",\n ...props,\n }\n },\n [contentId],\n )\n\n return {\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":";;;;;;;;;;;AAqDA,MAAa,oBAAoB,EAC/B,YACA,WAAW,OACX,UACA,MACA,QACA,YACA,YACA,QACA,YAAY,OACZ,UACA,UAAU,QACV,eACA,sBAAsB,UACtB,iBACA,UACA,WACA,WACA,yBACyB,EAAE,KAAK;CAChC,MAAM,EAAE,gBAAgBA,6CAAgB;CACxC,MAAM,6BAAkB;CACxB,MAAM,2BAAgB;CACtB,MAAM,uCAA4B;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,8BAAgC,KAAK;CAC3C,MAAM,+BAAuC,KAAK;CAClD,MAAM,+BAAoC,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmBC,yCAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,uBAAU,WAAW,OAAO;CAE5B,MAAM,kCACH,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,iEAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAKC,sBAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,2DAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,yCACH,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAKD,sBAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAME,~~4CAA6C~~,~~gBAAgB~~,~~CACjE~~,~~eACD~~,CAAC;~~CAEF~~,MAAMC,0CACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,YAAY,CAAC,CAAC,aAAa,EAAE,eAAe,SAAS;EAC3D,MAAM,UAAU,CAAC,CAAC,aAAa,EAAE,eAAe,OAAO;AAEvD,SAAO;GACL,IAAI;GACJ,8DAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,6DAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,8DAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAKH,sBAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMI,yCACH,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,uCACH,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,yCAA0C,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,8CAbC,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-native-popover.cjs","names":["useEnvironment","usePopper","getTriggerProps: PropGetter<\"button\">","mergeRefs","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n ariaAttr,\n assignRef,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n /*\n If `true`, the popover will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The placement of the popper relative to its reference.\n \n @default 'end'\n /\n placement?: Direction\n /\n The mode of the popover.\n \n @default 'auto'\n /\n popover?: \"\" \| \"auto\" \| \"hint\" \| \"manual\" \| true\n /\n The target element ID for the popover trigger.\n * If not provided, a generated ID will be used.\n /\n popoverTarget?: string\n /\n The action for the popover target.\n \n @default 'toggle'\n /\n popoverTargetAction?: \"hide\" \| \"show\" \| \"toggle\"\n /\n Update the position of the floating element, re-rendering the component if required.\n */\n updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n autoUpdate,\n disabled = false,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement = \"end\",\n platform,\n popover = \"auto\",\n popoverTarget,\n popoverTargetAction = \"toggle\",\n preventOverflow,\n strategy,\n transform,\n updateRef,\n whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n const { getDocument } = useEnvironment()\n const headerId = useId()\n const bodyId = useId()\n const generatedContentId = useId()\n const contentId = popoverTarget ?? generatedContentId\n const anchorRef = useRef<HTMLElement>(null)\n const triggerRef = useRef<HTMLButtonElement>(null)\n const contentRef = useRef<HTMLDivElement>(null)\n const { refs, update, getPopperProps } = usePopper<\"button\">({\n autoUpdate,\n elements,\n flip,\n gutter,\n matchWidth,\n middleware,\n offset,\n placement,\n platform,\n preventOverflow,\n strategy,\n transform,\n whileElementsMounted,\n })\n\n assignRef(updateRef, update)\n\n const onClick = useCallback(\n (ev: MouseEvent<HTMLButtonElement>) => {\n if (!disabled) return\n\n ev.preventDefault()\n ev.stopPropagation()\n },\n [disabled],\n )\n\n const getTriggerProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => {\n return {\n type: \"button\",\n \"aria-controls\": contentId,\n \"aria-disabled\": ariaAttr(disabled),\n \"aria-haspopup\": \"dialog\",\n popoverTarget: contentId,\n popoverTargetAction,\n role: \"button\",\n ...props,\n ref: mergeRefs(ref, triggerRef, (node) => {\n if (anchorRef.current == null) refs.setReference(node)\n }),\n onClick: handlerAll(props.onClick, onClick),\n }\n },\n [contentId, disabled, onClick, popoverTargetAction, refs],\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) => getPopperProps(props),\n [getPopperProps],\n )\n\n const getContentProps: PropGetter = useCallback(\n ({\n ref,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const hasHeader = !!getDocument()?.getElementById(headerId)\n const hasBody = !!getDocument()?.getElementById(bodyId)\n\n return {\n id: contentId,\n \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n \"data-popup\": dataAttr(true),\n popover: popover === true ? \"\" : popover,\n role: \"dialog\",\n tabIndex: -1,\n ...props,\n ref: mergeRefs(ref, contentRef),\n }\n },\n [getDocument, headerId, bodyId, contentId, popover],\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 return {\n popoverTarget: contentId,\n popoverTargetAction: \"hide\",\n ...props,\n }\n },\n [contentId],\n )\n\n return {\n getAnchorProps,\n getBodyProps,\n getCloseTriggerProps,\n getContentProps,\n getFooterProps,\n getHeaderProps,\n getPositionerProps,\n getTriggerProps,\n }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":";;;;;;;;;;;AAqDA,MAAa,oBAAoB,EAC/B,YACA,WAAW,OACX,UACA,MACA,QACA,YACA,YACA,QACA,YAAY,OACZ,UACA,UAAU,QACV,eACA,sBAAsB,UACtB,iBACA,UACA,WACA,WACA,yBACyB,EAAE,KAAK;CAChC,MAAM,EAAE,gBAAgBA,6CAAgB;CACxC,MAAM,6BAAkB;CACxB,MAAM,2BAAgB;CACtB,MAAM,uCAA4B;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,8BAAgC,KAAK;CAC3C,MAAM,+BAAuC,KAAK;CAClD,MAAM,+BAAoC,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmBC,yCAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,uBAAU,WAAW,OAAO;CAE5B,MAAM,kCACH,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,iEAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAKC,sBAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,2DAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,yCACH,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAKD,sBAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAME,6CACH,UAAU,eAAe,MAAM,EAChC,CAAC,eAAe,CACjB;CAED,MAAMC,0CACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,YAAY,CAAC,CAAC,aAAa,EAAE,eAAe,SAAS;EAC3D,MAAM,UAAU,CAAC,CAAC,aAAa,EAAE,eAAe,OAAO;AAEvD,SAAO;GACL,IAAI;GACJ,8DAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,6DAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,8DAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAKH,sBAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMI,yCACH,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,uCACH,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,yCAA0C,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,8CAbC,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}

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

@@ -141,7 +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)(getPopperProps, [getPopperProps]);
+	const getPositionerProps = (0, react.useCallback)((props) => getPopperProps(props), [getPopperProps]);
 	const getContentProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
 		id: contentId,
 		"aria-hidden": !open,

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

	@@ -1 +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","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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"}
1	+ {"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(\n (props) => getPopperProps(props),\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/rotate/rotate.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rotate.cjs","names":["createComponent","rotateStyle","useControllableState","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n createComponent,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n extends\n Omit<HTMLMotionProps<\"button\">, \"onChange\" \| \"rotate\">,\n ThemeProps<RotateStyle> {\n /*\n Passing React elements to \"from\" is required.\n /\n from: ReactNode\n /\n Passing React elements to \"to\" is required.\n /\n to: ReactNode\n /\n You can set the initial state.\n \n @default 'from'\n /\n defaultValue?: KeyframeIdent\n /\n 　The animation delay.\n \n @default 0\n /\n delay?: number\n /\n If `true`, the component is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The animation duration.\n \n @default 0.4\n /\n duration?: number\n /\n If `true`, the component is readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The animation rotation.\n \n @default 45\n /\n rotate?: number\n /\n Use this when you want to control the animation from outside the component.\n /\n value?: KeyframeIdent\n /\n This is a callback function that is called when the animation state changes.\n /\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: RotatePropsContext,\n usePropsContext: useRotatePropsContext,\n withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/\n `Rotate` is an animation component that alternately rotates two elements as they switch.\n \n @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.4,\n from,\n readOnly,\n rotate = 45,\n to,\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const opacity = \"var(--opacity)\"\n const animate = useAnimation()\n const [value, setValue] = useControllableState<KeyframeIdent>({\n defaultValue,\n value: valueProp,\n onChange,\n })\n\n const onClick = useCallback(async () => {\n if (readOnly) return\n\n await animate.start({\n opacity: 0,\n rotate: `${rotate}deg`,\n transition: { delay, duration },\n })\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n await animate.start({\n opacity: \"var(--opacity)\",\n rotate: \"0deg\",\n transition: { duration },\n })\n }, [readOnly, animate, rotate, duration, delay, setValue])\n\n return (\n <motion.button\n type=\"button\"\n data-disabled={dataAttr(disabled)}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n animate={animate}\n custom={{ rotate }}\n disabled={disabled}\n initial={{ opacity, rotate: \"0deg\" }}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n {value === \"from\" ? from : to}\n </motion.button>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yCAA0C,UAAUC,iCAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,0CAAwB;CAC9B,MAAM,CAAC,OAAO,YAAYC,gEAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,iCAAsB,YAAY;AACtC,MAAI,SAAU;AAEd,QAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;IAAU;GAChC,CAAC;AAEF,YAAU,SAAU,SAAS,SAAS,OAAO,OAAQ;AAErD,QAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,UAAU;GACzB,CAAC;IACD;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;EAAS,CAAC;AAE1D,QACE,2CAACC,uBAAO;EACN,MAAK;EACL,iEAAwB,SAAS;EACjC,iEAAwB,SAAS;EACjC,cAAY;EACH;EACT,QAAQ,EAAE,QAAQ;EACR;EACV,SAAS;GAAE;GAAS,QAAQ;GAAQ;EACpC,2DAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;GACb;EAGrB,CAAC,SAAY,UAAU;CACtB,MAAM,MAAMC,6CAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;AAGnE,QAAO;EAAE,GAFIC,+CAAuB,OAAO,EAAE,SAAS,WAAW,CAAC;EAEhD;EAAK,SAAS;EAAa;EAC7C"}
1	+ {"version":3,"file":"rotate.cjs","names":["createComponent","rotateStyle","useControllableState","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n createComponent,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n extends\n Omit<HTMLMotionProps<\"button\">, \"onChange\" \| \"rotate\">,\n ThemeProps<RotateStyle> {\n /*\n Passing React elements to \"from\" is required.\n /\n from: ReactNode\n /\n Passing React elements to \"to\" is required.\n /\n to: ReactNode\n /\n You can set the initial state.\n \n @default 'from'\n /\n defaultValue?: KeyframeIdent\n /\n The animation delay.\n \n @default 0\n /\n delay?: number\n /\n If `true`, the component is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The animation duration.\n \n @default 0.4\n /\n duration?: number\n /\n If `true`, the component is readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The animation rotation.\n \n @default 45\n /\n rotate?: number\n /\n Use this when you want to control the animation from outside the component.\n /\n value?: KeyframeIdent\n /\n This is a callback function that is called when the animation state changes.\n /\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: RotatePropsContext,\n usePropsContext: useRotatePropsContext,\n withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/\n `Rotate` is an animation component that alternately rotates two elements as they switch.\n \n @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.4,\n from,\n readOnly,\n rotate = 45,\n to,\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const opacity = \"var(--opacity)\"\n const animate = useAnimation()\n const [value, setValue] = useControllableState<KeyframeIdent>({\n defaultValue,\n value: valueProp,\n onChange,\n })\n\n const onClick = useCallback(async () => {\n if (readOnly) return\n\n await animate.start({\n opacity: 0,\n rotate: `${rotate}deg`,\n transition: { delay, duration },\n })\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n await animate.start({\n opacity: \"var(--opacity)\",\n rotate: \"0deg\",\n transition: { duration },\n })\n }, [readOnly, animate, rotate, duration, delay, setValue])\n\n return (\n <motion.button\n type=\"button\"\n data-disabled={dataAttr(disabled)}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n animate={animate}\n custom={{ rotate }}\n disabled={disabled}\n initial={{ opacity, rotate: \"0deg\" }}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n {value === \"from\" ? from : to}\n </motion.button>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yCAA0C,UAAUC,iCAAY;;;;;;AASpE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,0CAAwB;CAC9B,MAAM,CAAC,OAAO,YAAYC,gEAAoC;EAC5D;EACA,OAAO;EACP;EACD,CAAC;CAEF,MAAM,iCAAsB,YAAY;AACtC,MAAI,SAAU;AAEd,QAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;IAAU;GAChC,CAAC;AAEF,YAAU,SAAU,SAAS,SAAS,OAAO,OAAQ;AAErD,QAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,UAAU;GACzB,CAAC;IACD;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;EAAS,CAAC;AAE1D,QACE,2CAACC,uBAAO;EACN,MAAK;EACL,iEAAwB,SAAS;EACjC,iEAAwB,SAAS;EACjC,cAAY;EACH;EACT,QAAQ,EAAE,QAAQ;EACR;EACV,SAAS;GAAE;GAAS,QAAQ;GAAQ;EACpC,2DAAoB,aAAa,QAAQ;EACzC,GAAI;YAEH,UAAU,SAAS,OAAO;GACb;EAGrB,CAAC,SAAY,UAAU;CACtB,MAAM,MAAMC,6CAAqB,MAAM,KAAK,EAAE,SAAS,WAAW,CAAC;AAGnE,QAAO;EAAE,GAFIC,+CAAuB,OAAO,EAAE,SAAS,WAAW,CAAC;EAEhD;EAAK,SAAS;EAAa;EAC7C"}

package/dist/cjs/components/snacks/snacks.cjs CHANGED Viewed

@@ -49,7 +49,7 @@ const Snacks = withProvider(({ snacks: { direction = "start", items, startIndex
 		setHeight(height$1);
 	}, [count, direction]);
 	require_effect.useUpdateEffect(() => {
-		if (!!count) setExist(true);
+		if (count) setExist(true);
 	}, [count]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
 		value: context,

package/dist/cjs/components/snacks/snacks.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"snacks.cjs","names":["createSlotComponent","snacksStyle","height","AnimatePresence","motion","varAttr","createTransition","CloseButton"],"sources":["../../../../src/components/snacks/snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dispatch, RefObject, SetStateAction } from \"react\"\nimport type { CSSProps, HTMLStyledProps, SimpleDirection } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SnacksStyle } from \"./snacks.style\"\nimport type { Snack, UseSnacksReturn } from \"./use-snacks\"\nimport { AnimatePresence, useIsPresent } from \"motion/react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent, varAttr } from \"../../core\"\nimport { useTimeout } from \"../../hooks/use-timeout\"\nimport { dataAttr, handlerAll, noop, useUpdateEffect } from \"../../utils\"\nimport { Alert } from \"../alert\"\nimport { CloseButton } from \"../close-button\"\nimport { createTransition, motion } from \"../motion\"\nimport { snacksStyle } from \"./snacks.style\"\n\ninterface ComponentContext {\n direction: SimpleDirection\n elMapRef: RefObject<Map<number, HTMLDivElement \| null>>\n setExist: Dispatch<SetStateAction<boolean>>\n startIndex: number\n}\n\nexport interface SnacksProps extends HTMLMotionProps {\n /*\n The snacks created by `useSnacks`.\n /\n snacks: UseSnacksReturn[\"snacks\"]\n /\n The CSS `gap` property.\n \n @default 'md'\n /\n gap?: CSSProps[\"gap\"]\n /\n A property that provides spacing between the top and bottom.\n \n @default [0, \"lg\"]\n /\n gutter?: [CSSProps[\"paddingTop\"], CSSProps[\"paddingBottom\"]]\n /\n If `true`, apply gutter value to negative margins\n \n @default true\n /\n negativeMargins?: boolean\n /\n Props for the snacks list element.\n /\n listProps?: HTMLMotionProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SnacksPropsContext,\n useComponentContext,\n usePropsContext: useSnacksPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SnacksProps, SnacksStyle, ComponentContext>(\n \"snacks\",\n snacksStyle,\n)\n\nexport { SnacksPropsContext, useSnacksPropsContext }\n\nexport const Snacks = withProvider<\"div\", SnacksProps>(\n ({\n snacks: { direction = \"start\", items, startIndex = 0 },\n listProps,\n ...rest\n }) => {\n const count = items.length\n const elMapRef = useRef<Map<number, HTMLDivElement \| null>>(new Map())\n const [height, setHeight] = useState(0)\n const [exist, setExist] = useState(!!count)\n const show = !!count \|\| exist\n const context = useMemo(\n () => ({ direction, elMapRef, setExist, startIndex }),\n [direction, startIndex],\n )\n\n const onExitComplete = useCallback(() => {\n if (!count) setExist(false)\n }, [count])\n\n useEffect(() => {\n let height = 0\n\n if (!count) return\n\n const els = [...elMapRef.current.values()].slice(0, count)\n\n for (const el of els) {\n if (!el) continue\n\n let { offsetHeight, offsetTop } = el\n\n offsetHeight += offsetTop\n\n if (offsetHeight > height) height = offsetHeight\n }\n\n setHeight(height)\n }, [count, direction])\n\n useUpdateEffect(() => {\n if (!!count) setExist(true)\n }, [count])\n\n return (\n <ComponentContext value={context}>\n <AnimatePresence initial={false}>\n {show ? (\n <motion.div {...rest}>\n <SnackList custom={{ height }} {...listProps}>\n <AnimatePresence onExitComplete={onExitComplete}>\n {items.map((props, index) => {\n return (\n <Snack\n key={props.id}\n index={index}\n lastIndex={count - index - 1}\n {...props}\n />\n )\n })}\n </AnimatePresence>\n </SnackList>\n </motion.div>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n variants: {\n animate: {\n padding: \"var(--top) 0 var(--bottom)\",\n transition: { duration: 0.4 },\n },\n exit: { padding: 0 },\n initial: { padding: 0 },\n },\n },\n ({ gap, gutter = [0, \"lg\"], negativeMargins = true, ...rest }) => ({\n \"data-negative\": dataAttr(negativeMargins),\n \"--bottom\": varAttr(gutter[1], \"spaces\", \"0px\"),\n \"--gap\": varAttr(gap, \"spaces\"),\n \"--top\": varAttr(gutter[0], \"spaces\", \"0px\"),\n ...rest,\n }),\n)\n\ninterface SnackListProps extends HTMLMotionProps {}\n\nconst SnackList = withContext<\"div\", SnackListProps>(\n motion.div,\n \"list\",\n)({\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n role: \"list\",\n variants: {\n animate: ({ height }) => ({\n height,\n opacity: 1,\n transition: { duration: 0.4 },\n }),\n exit: { height: 0, opacity: 0 },\n initial: { height: 0, opacity: 1 },\n },\n})\n\ninterface SnackProps extends Merge<\n HTMLMotionProps,\n Merge<Alert.RootProps, Snack>\n> {\n index: number\n lastIndex: number\n}\n\nconst Snack = withContext<\"div\", SnackProps>(\n ({\n variant = \"plain\",\n closable = true,\n description,\n duration: durationProp = null,\n loadingScheme,\n status,\n title,\n withIcon = true,\n closeButtonProps,\n contentProps,\n descriptionProps,\n iconProps,\n loadingProps,\n titleProps,\n onClose: onCloseProp,\n onCloseComplete,\n ...rest\n }) => {\n const [duration, setDuration] = useState(durationProp)\n const present = useIsPresent()\n const onClose = present ? onCloseProp : noop\n\n const onMouseEnter = useCallback(() => {\n setDuration(null)\n }, [])\n\n const onMouseLeave = useCallback(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useUpdateEffect(() => {\n if (!present) onCloseComplete?.()\n }, [present])\n\n useUpdateEffect(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useTimeout(onClose, duration)\n\n return (\n <Alert.Root\n as={motion.div}\n variant={variant}\n status={status}\n {...rest}\n onMouseEnter={handlerAll(rest.onMouseEnter, onMouseEnter)}\n onMouseLeave={handlerAll(rest.onMouseLeave, onMouseLeave)}\n >\n {withIcon ? (\n loadingScheme ? (\n <Alert.Loading loadingScheme={loadingScheme} {...loadingProps} />\n ) : (\n <Alert.Icon {...iconProps} />\n )\n ) : null}\n\n <SnackContent data-close-button={dataAttr(closable)} {...contentProps}>\n {title ? (\n <Alert.Title me=\"0\" {...titleProps}>\n {title}\n </Alert.Title>\n ) : null}\n\n {description ? (\n <Alert.Description {...descriptionProps}>\n {description}\n </Alert.Description>\n ) : null}\n </SnackContent>\n\n {closable ? (\n <SnackCloseButton\n data-variant={variant}\n {...closeButtonProps}\n onClick={handlerAll(closeButtonProps?.onClick, onClose)}\n />\n ) : null}\n </Alert.Root>\n )\n },\n \"item\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n layout: true,\n role: \"listitem\",\n variants: {\n animate: ({ index }) => ({\n opacity: 1,\n transition: createTransition.enter()(!index ? 0.2 : 0, 0.4),\n y: 0,\n }),\n exit: {\n opacity: 0,\n transition: createTransition.exit()(undefined, 0.2),\n },\n initial: ({ direction, index }) => ({\n opacity: 0,\n ...(index ? { y: (direction === \"start\" ? -1 : 1) 16 } : {}),\n }),\n },\n },\n ({ index, lastIndex, ...rest }) => {\n const ref = useRef<HTMLDivElement>(null)\n const { direction, elMapRef, startIndex } = useComponentContext()\n\n useEffect(() => {\n const elMap = elMapRef.current\n\n elMap.set(index, ref.current)\n\n return () => {\n elMap.delete(index)\n }\n }, [elMapRef, index])\n\n return {\n ref,\n \"--index\": direction === \"start\" ? lastIndex : index,\n \"--z-index\": startIndex + index,\n custom: { direction, index },\n ...rest,\n }\n },\n)\n\nexport interface SnackContentProps extends HTMLStyledProps {}\n\nconst SnackContent = withContext<\"div\", SnackContentProps>(\"div\", \"content\")()\n\nexport interface SnackCloseButtonProps extends CloseButtonProps {}\n\nconst SnackCloseButton = withContext<\"button\", SnackCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)()\n"],"mappings":"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"}
1	+ {"version":3,"file":"snacks.cjs","names":["createSlotComponent","snacksStyle","height","AnimatePresence","motion","varAttr","createTransition","CloseButton"],"sources":["../../../../src/components/snacks/snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dispatch, RefObject, SetStateAction } from \"react\"\nimport type { CSSProps, HTMLStyledProps, SimpleDirection } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SnacksStyle } from \"./snacks.style\"\nimport type { Snack, UseSnacksReturn } from \"./use-snacks\"\nimport { AnimatePresence, useIsPresent } from \"motion/react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent, varAttr } from \"../../core\"\nimport { useTimeout } from \"../../hooks/use-timeout\"\nimport { dataAttr, handlerAll, noop, useUpdateEffect } from \"../../utils\"\nimport { Alert } from \"../alert\"\nimport { CloseButton } from \"../close-button\"\nimport { createTransition, motion } from \"../motion\"\nimport { snacksStyle } from \"./snacks.style\"\n\ninterface ComponentContext {\n direction: SimpleDirection\n elMapRef: RefObject<Map<number, HTMLDivElement \| null>>\n setExist: Dispatch<SetStateAction<boolean>>\n startIndex: number\n}\n\nexport interface SnacksProps extends HTMLMotionProps {\n /*\n The snacks created by `useSnacks`.\n /\n snacks: UseSnacksReturn[\"snacks\"]\n /\n The CSS `gap` property.\n \n @default 'md'\n /\n gap?: CSSProps[\"gap\"]\n /\n A property that provides spacing between the top and bottom.\n \n @default [0, \"lg\"]\n /\n gutter?: [CSSProps[\"paddingTop\"], CSSProps[\"paddingBottom\"]]\n /\n If `true`, apply gutter value to negative margins\n \n @default true\n /\n negativeMargins?: boolean\n /\n Props for the snacks list element.\n /\n listProps?: HTMLMotionProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SnacksPropsContext,\n useComponentContext,\n usePropsContext: useSnacksPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SnacksProps, SnacksStyle, ComponentContext>(\n \"snacks\",\n snacksStyle,\n)\n\nexport { SnacksPropsContext, useSnacksPropsContext }\n\nexport const Snacks = withProvider<\"div\", SnacksProps>(\n ({\n snacks: { direction = \"start\", items, startIndex = 0 },\n listProps,\n ...rest\n }) => {\n const count = items.length\n const elMapRef = useRef<Map<number, HTMLDivElement \| null>>(new Map())\n const [height, setHeight] = useState(0)\n const [exist, setExist] = useState(!!count)\n const show = !!count \|\| exist\n const context = useMemo(\n () => ({ direction, elMapRef, setExist, startIndex }),\n [direction, startIndex],\n )\n\n const onExitComplete = useCallback(() => {\n if (!count) setExist(false)\n }, [count])\n\n useEffect(() => {\n let height = 0\n\n if (!count) return\n\n const els = [...elMapRef.current.values()].slice(0, count)\n\n for (const el of els) {\n if (!el) continue\n\n let { offsetHeight, offsetTop } = el\n\n offsetHeight += offsetTop\n\n if (offsetHeight > height) height = offsetHeight\n }\n\n setHeight(height)\n }, [count, direction])\n\n useUpdateEffect(() => {\n if (count) setExist(true)\n }, [count])\n\n return (\n <ComponentContext value={context}>\n <AnimatePresence initial={false}>\n {show ? (\n <motion.div {...rest}>\n <SnackList custom={{ height }} {...listProps}>\n <AnimatePresence onExitComplete={onExitComplete}>\n {items.map((props, index) => {\n return (\n <Snack\n key={props.id}\n index={index}\n lastIndex={count - index - 1}\n {...props}\n />\n )\n })}\n </AnimatePresence>\n </SnackList>\n </motion.div>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n variants: {\n animate: {\n padding: \"var(--top) 0 var(--bottom)\",\n transition: { duration: 0.4 },\n },\n exit: { padding: 0 },\n initial: { padding: 0 },\n },\n },\n ({ gap, gutter = [0, \"lg\"], negativeMargins = true, ...rest }) => ({\n \"data-negative\": dataAttr(negativeMargins),\n \"--bottom\": varAttr(gutter[1], \"spaces\", \"0px\"),\n \"--gap\": varAttr(gap, \"spaces\"),\n \"--top\": varAttr(gutter[0], \"spaces\", \"0px\"),\n ...rest,\n }),\n)\n\ninterface SnackListProps extends HTMLMotionProps {}\n\nconst SnackList = withContext<\"div\", SnackListProps>(\n motion.div,\n \"list\",\n)({\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n role: \"list\",\n variants: {\n animate: ({ height }) => ({\n height,\n opacity: 1,\n transition: { duration: 0.4 },\n }),\n exit: { height: 0, opacity: 0 },\n initial: { height: 0, opacity: 1 },\n },\n})\n\ninterface SnackProps extends Merge<\n HTMLMotionProps,\n Merge<Alert.RootProps, Snack>\n> {\n index: number\n lastIndex: number\n}\n\nconst Snack = withContext<\"div\", SnackProps>(\n ({\n variant = \"plain\",\n closable = true,\n description,\n duration: durationProp = null,\n loadingScheme,\n status,\n title,\n withIcon = true,\n closeButtonProps,\n contentProps,\n descriptionProps,\n iconProps,\n loadingProps,\n titleProps,\n onClose: onCloseProp,\n onCloseComplete,\n ...rest\n }) => {\n const [duration, setDuration] = useState(durationProp)\n const present = useIsPresent()\n const onClose = present ? onCloseProp : noop\n\n const onMouseEnter = useCallback(() => {\n setDuration(null)\n }, [])\n\n const onMouseLeave = useCallback(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useUpdateEffect(() => {\n if (!present) onCloseComplete?.()\n }, [present])\n\n useUpdateEffect(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useTimeout(onClose, duration)\n\n return (\n <Alert.Root\n as={motion.div}\n variant={variant}\n status={status}\n {...rest}\n onMouseEnter={handlerAll(rest.onMouseEnter, onMouseEnter)}\n onMouseLeave={handlerAll(rest.onMouseLeave, onMouseLeave)}\n >\n {withIcon ? (\n loadingScheme ? (\n <Alert.Loading loadingScheme={loadingScheme} {...loadingProps} />\n ) : (\n <Alert.Icon {...iconProps} />\n )\n ) : null}\n\n <SnackContent data-close-button={dataAttr(closable)} {...contentProps}>\n {title ? (\n <Alert.Title me=\"0\" {...titleProps}>\n {title}\n </Alert.Title>\n ) : null}\n\n {description ? (\n <Alert.Description {...descriptionProps}>\n {description}\n </Alert.Description>\n ) : null}\n </SnackContent>\n\n {closable ? (\n <SnackCloseButton\n data-variant={variant}\n {...closeButtonProps}\n onClick={handlerAll(closeButtonProps?.onClick, onClose)}\n />\n ) : null}\n </Alert.Root>\n )\n },\n \"item\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n layout: true,\n role: \"listitem\",\n variants: {\n animate: ({ index }) => ({\n opacity: 1,\n transition: createTransition.enter()(!index ? 0.2 : 0, 0.4),\n y: 0,\n }),\n exit: {\n opacity: 0,\n transition: createTransition.exit()(undefined, 0.2),\n },\n initial: ({ direction, index }) => ({\n opacity: 0,\n ...(index ? { y: (direction === \"start\" ? -1 : 1) 16 } : {}),\n }),\n },\n },\n ({ index, lastIndex, ...rest }) => {\n const ref = useRef<HTMLDivElement>(null)\n const { direction, elMapRef, startIndex } = useComponentContext()\n\n useEffect(() => {\n const elMap = elMapRef.current\n\n elMap.set(index, ref.current)\n\n return () => {\n elMap.delete(index)\n }\n }, [elMapRef, index])\n\n return {\n ref,\n \"--index\": direction === \"start\" ? lastIndex : index,\n \"--z-index\": startIndex + index,\n custom: { direction, index },\n ...rest,\n }\n },\n)\n\nexport interface SnackContentProps extends HTMLStyledProps {}\n\nconst SnackContent = withContext<\"div\", SnackContentProps>(\"div\", \"content\")()\n\nexport interface SnackCloseButtonProps extends CloseButtonProps {}\n\nconst SnackCloseButton = withContext<\"button\", SnackCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)()\n"],"mappings":"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"}

package/dist/cjs/components/snacks/use-snacks.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-snacks.cjs","names":["useSystem","options","snack: Snack"],"sources":["../../../../src/components/snacks/use-snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { SnacksConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { SnackCloseButtonProps, SnackContentProps } from \"./snacks\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useSystem } from \"../../core\"\n\nexport interface Snack extends Omit<\n UseSnacksOptions,\n \"direction\" \| \"limit\" \| \"startIndex\"\n> {\n id: string\n onClose: () => void\n onCloseComplete?: () => void\n}\n\nlet counter = 0\n\ninterface SnackMethodsOptions extends Partial<Omit<Snack, \"onClose\">> {}\n\nexport interface UseSnacksOptions\n extends\n Omit<Alert.RootProps, \"direction\" \| \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\">,\n SnacksConfig {\n /*\n The description of the snack.\n /\n description?: ReactNode\n /\n The title of the snack.\n /\n title?: ReactNode\n /\n If `true`, the snack will have an icon.\n \n @default true\n /\n withIcon?: boolean\n /\n Props for the snack close button.\n /\n closeButtonProps?: SnackCloseButtonProps\n /\n Props for the snack content component.\n /\n contentProps?: SnackContentProps\n /\n Props for the alert description component.\n /\n descriptionProps?: Alert.DescriptionProps\n /\n Props for the alert icon component.\n /\n iconProps?: Alert.IconProps\n /\n Props for the alert loading component.\n /\n loadingProps?: Alert.LoadingProps\n /\n Props for the alert title component.\n /\n titleProps?: Alert.TitleProps\n}\n\n/\n `useSnacks` is a custom hook for controlling notifications used in forms and the like.\n \n @see https://yamada-ui.com/docs/hooks/use-snacks\n /\nexport const useSnacks = (options: UseSnacksOptions = {}) => {\n const [items, setItems] = useState<Snack[]>([])\n const { config } = useSystem()\n\n const systemOptions = useMemo(() => config.snacks ?? {}, [config])\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n const { direction, limit = 3, startIndex } = defaultOptions\n\n const getOptions = useCallback(\n (options: SnackMethodsOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n const snack = useMemo(() => {\n const methods = (options: SnackMethodsOptions = {}) => {\n options = getOptions(options)\n counter += 1\n\n const { id = counter.toString(), ...rest } = options\n const onClose = () =>\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n\n const snack: Snack = { id, onClose, ...rest }\n\n setItems((prev) => [\n ...prev.splice(-1 ((limit ?? Infinity) - 1)),\n snack,\n ])\n\n return id\n }\n\n methods.update = (\n id: number \| string,\n options: Omit<SnackMethodsOptions, \"id\">,\n ) => {\n options = getOptions(options)\n\n setItems((prev) =>\n prev.map((prevOptions) =>\n prevOptions.id === id ? { ...prevOptions, ...options } : prevOptions,\n ),\n )\n }\n\n methods.closeAll = () => {\n setItems([])\n }\n\n methods.close = (id: number \| string) => {\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n }\n\n methods.isActive = (id: number \| string) =>\n !!items.find((prevOptions) => prevOptions.id === id)\n\n return methods\n }, [items, limit, getOptions])\n\n const snacks = useMemo(\n () => ({ direction, items, startIndex }),\n [direction, startIndex, items],\n )\n\n return { snack, snacks }\n}\n\nexport type UseSnacksReturn = ReturnType<typeof useSnacks>\n"],"mappings":";;;;;;;;AAkBA,IAAI,UAAU;;;;;;AAsDd,MAAa,aAAa,UAA4B,EAAE,KAAK;CAC3D,MAAM,CAAC,OAAO,gCAA8B,EAAE,CAAC;CAC/C,MAAM,EAAE,WAAWA,mCAAW;CAE9B,MAAM,yCAA8B,OAAO,UAAU,EAAE,EAAE,CAAC,OAAO,CAAC;CAClE,MAAM,2CACG;EAAE,GAAG;EAAe,GAAG;EAAS,GACvC,CAAC,SAAS,cAAc,CACzB;CACD,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAe;CAE7C,MAAM,qCACH,eAAkC;EAAE,GAAG;EAAgB,GAAGC;EAAS,GACpE,CAAC,eAAe,CACjB;~~AAqDD~~,QAAO;EAAE,~~gCAnDmB~~;GAC1B,MAAM,WAAW,YAA+B,EAAE,KAAK;AACrD,gBAAU,WAAWA,UAAQ;~~AAC7B~~,eAAW;IAEX,MAAM,EAAE,KAAK,QAAQ,UAAU,EAAE,GAAG,SAASA;IAC7C,MAAM,gBACJ,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,GAAG,CAAC;IAEzE,MAAMC,QAAe;KAAE;KAAI;KAAS,GAAG;KAAM;AAE7C,cAAU,SAAS,CACjB,GAAG,KAAK,OAAO,OAAO,SAAS,YAAY,GAAG,EAC9C,MACD,CAAC;AAEF,WAAO;;AAGT,WAAQ,UACN,IACA,cACG;AACH,gBAAU,WAAWD,UAAQ;AAE7B,cAAU,SACR,KAAK,KAAK,gBACR,YAAY,OAAO,KAAK;KAAE,GAAG;KAAa,GAAGA;KAAS,GAAG,YAC1D,CACF;;AAGH,WAAQ,iBAAiB;AACvB,aAAS,EAAE,CAAC;;AAGd,WAAQ,SAAS,OAAwB;AACvC,cAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,GAAG,CAAC;;AAGzE,WAAQ,YAAY,OAClB,CAAC,CAAC,MAAM,MAAM,gBAAgB,YAAY,OAAO,GAAG;AAEtD,UAAO;KACN;GAAC;GAAO;GAAO;GAAW,CAAC;EAOd,kCAJP;GAAE;GAAW;GAAO;GAAY,GACvC;GAAC;GAAW;GAAY;GAAM,CAC/B;EAEuB"}
1	+ {"version":3,"file":"use-snacks.cjs","names":["useSystem","options","snack: Snack"],"sources":["../../../../src/components/snacks/use-snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { SnacksConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { SnackCloseButtonProps, SnackContentProps } from \"./snacks\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useSystem } from \"../../core\"\n\nexport interface Snack extends Omit<\n UseSnacksOptions,\n \"direction\" \| \"limit\" \| \"startIndex\"\n> {\n id: string\n onClose: () => void\n onCloseComplete?: () => void\n}\n\nlet counter = 0\n\ninterface SnackMethodsOptions extends Partial<Omit<Snack, \"onClose\">> {}\n\nexport interface UseSnacksOptions\n extends\n Omit<Alert.RootProps, \"direction\" \| \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\">,\n SnacksConfig {\n /*\n The description of the snack.\n /\n description?: ReactNode\n /\n The title of the snack.\n /\n title?: ReactNode\n /\n If `true`, the snack will have an icon.\n \n @default true\n /\n withIcon?: boolean\n /\n Props for the snack close button.\n /\n closeButtonProps?: SnackCloseButtonProps\n /\n Props for the snack content component.\n /\n contentProps?: SnackContentProps\n /\n Props for the alert description component.\n /\n descriptionProps?: Alert.DescriptionProps\n /\n Props for the alert icon component.\n /\n iconProps?: Alert.IconProps\n /\n Props for the alert loading component.\n /\n loadingProps?: Alert.LoadingProps\n /\n Props for the alert title component.\n /\n titleProps?: Alert.TitleProps\n}\n\n/\n `useSnacks` is a custom hook for controlling notifications used in forms and the like.\n \n @see https://yamada-ui.com/docs/hooks/use-snacks\n /\nexport const useSnacks = (options: UseSnacksOptions = {}) => {\n const [items, setItems] = useState<Snack[]>([])\n const { config } = useSystem()\n\n const systemOptions = useMemo(() => config.snacks ?? {}, [config])\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n const { direction, limit = 3, startIndex } = defaultOptions\n\n const getOptions = useCallback(\n (options: SnackMethodsOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n const snack = useMemo(() => {\n const methods = (options: SnackMethodsOptions = {}) => {\n options = getOptions(options)\n // eslint-disable-next-line react-hooks/globals\n counter += 1\n\n const { id = counter.toString(), ...rest } = options\n const onClose = () =>\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n\n const snack: Snack = { id, onClose, ...rest }\n\n setItems((prev) => [\n ...prev.splice(-1 ((limit ?? Infinity) - 1)),\n snack,\n ])\n\n return id\n }\n\n methods.update = (\n id: number \| string,\n options: Omit<SnackMethodsOptions, \"id\">,\n ) => {\n options = getOptions(options)\n\n setItems((prev) =>\n prev.map((prevOptions) =>\n prevOptions.id === id ? { ...prevOptions, ...options } : prevOptions,\n ),\n )\n }\n\n methods.closeAll = () => {\n setItems([])\n }\n\n methods.close = (id: number \| string) => {\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n }\n\n methods.isActive = (id: number \| string) =>\n !!items.find((prevOptions) => prevOptions.id === id)\n\n return methods\n }, [items, limit, getOptions])\n\n const snacks = useMemo(\n () => ({ direction, items, startIndex }),\n [direction, startIndex, items],\n )\n\n return { snack, snacks }\n}\n\nexport type UseSnacksReturn = ReturnType<typeof useSnacks>\n"],"mappings":";;;;;;;;AAkBA,IAAI,UAAU;;;;;;AAsDd,MAAa,aAAa,UAA4B,EAAE,KAAK;CAC3D,MAAM,CAAC,OAAO,gCAA8B,EAAE,CAAC;CAC/C,MAAM,EAAE,WAAWA,mCAAW;CAE9B,MAAM,yCAA8B,OAAO,UAAU,EAAE,EAAE,CAAC,OAAO,CAAC;CAClE,MAAM,2CACG;EAAE,GAAG;EAAe,GAAG;EAAS,GACvC,CAAC,SAAS,cAAc,CACzB;CACD,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAe;CAE7C,MAAM,qCACH,eAAkC;EAAE,GAAG;EAAgB,GAAGC;EAAS,GACpE,CAAC,eAAe,CACjB;AAsDD,QAAO;EAAE,gCApDmB;GAC1B,MAAM,WAAW,YAA+B,EAAE,KAAK;AACrD,gBAAU,WAAWA,UAAQ;AAE7B,eAAW;IAEX,MAAM,EAAE,KAAK,QAAQ,UAAU,EAAE,GAAG,SAASA;IAC7C,MAAM,gBACJ,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,GAAG,CAAC;IAEzE,MAAMC,QAAe;KAAE;KAAI;KAAS,GAAG;KAAM;AAE7C,cAAU,SAAS,CACjB,GAAG,KAAK,OAAO,OAAO,SAAS,YAAY,GAAG,EAC9C,MACD,CAAC;AAEF,WAAO;;AAGT,WAAQ,UACN,IACA,cACG;AACH,gBAAU,WAAWD,UAAQ;AAE7B,cAAU,SACR,KAAK,KAAK,gBACR,YAAY,OAAO,KAAK;KAAE,GAAG;KAAa,GAAGA;KAAS,GAAG,YAC1D,CACF;;AAGH,WAAQ,iBAAiB;AACvB,aAAS,EAAE,CAAC;;AAGd,WAAQ,SAAS,OAAwB;AACvC,cAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,GAAG,CAAC;;AAGzE,WAAQ,YAAY,OAClB,CAAC,CAAC,MAAM,MAAM,gBAAgB,YAAY,OAAO,GAAG;AAEtD,UAAO;KACN;GAAC;GAAO;GAAO;GAAW,CAAC;EAOd,kCAJP;GAAE;GAAW;GAAO;GAAY,GACvC;GAAC;GAAW;GAAY;GAAM,CAC/B;EAEuB"}

package/dist/cjs/components/stack/stack.cjs CHANGED Viewed

@@ -27,7 +27,7 @@ const Stack = withContext(({ align: alignItems, children, direction: flexDirecti
 			h: (0, require_utils_index.utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "fit-content" : "100%"),
 			w: (0, require_utils_index.utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "100%" : "fit-content")
 		});
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [!!index ? cloneSeparator : null, child] }, key);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [index ? cloneSeparator : null, child] }, key);
 	}) : validChildren, [
 		separator,
 		flexDirection,

package/dist/cjs/components/stack/stack.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.cjs","names":["createComponent","stackStyle","useValidChildren","Fragment","styled"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n /*\n The CSS `align-items` property.\n /\n align?: CSSProps[\"alignItems\"]\n /\n The CSS `flex-direction` property.\n /\n direction?: CSSProps[\"flexDirection\"]\n /\n The CSS `justify-content` property.\n /\n justify?: CSSProps[\"justifyContent\"]\n /\n If `true`, each stack item will show a separator.\n /\n separator?: ReactElement\n /\n The CSS `flex-wrap` property.\n /\n wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n PropsContext: StackPropsContext,\n usePropsContext: useStackPropsContext,\n withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/\n `Stack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n ({\n align: alignItems,\n children,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n separator,\n wrap: flexWrap,\n ...rest\n }) => {\n const isColumn = (value: any) =>\n value === \"column\" \|\| value === \"column-reverse\"\n\n const validChildren = useValidChildren(children)\n const cloneChildren = useMemo(\n () =>\n separator\n ? validChildren.map((child, index) => {\n const key = typeof child.key !== \"undefined\" ? child.key : index\n\n const cloneSeparator = cloneElement<any>(separator, {\n borderWidth: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n ),\n h: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"fit-content\" : \"100%\",\n ),\n w: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"100%\" : \"fit-content\",\n ),\n })\n\n return (\n <Fragment key={key}>\n {!!index ? cloneSeparator : null}\n {child}\n </Fragment>\n )\n })\n : validChildren,\n [separator, flexDirection, validChildren],\n )\n\n return (\n <styled.div\n alignItems={alignItems}\n flexDirection={flexDirection}\n flexWrap={flexWrap}\n justifyContent={justifyContent}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)()\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACEA,yCAAwC,SAASC,+BAAW;;;;;;AAShE,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,UACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgBC,kCAAiB,SAAS;CAChD,MAAM,yCAEF,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,yCAAmC,WAAW;GAClD,kEAA2B,gBAAgB,UACzC,SAAS,MAAM,GAAG,cAAc,YACjC;GACD,wDAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,gBAAgB,OACnC;GACD,wDAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,SAAS,cAC5B;GACF,CAAC;AAEF,SACE,4CAACC,6BACE,~~CAAC,CAAC,~~QAAQ,iBAAiB,~~MAC3B~~,UAFY,IAGJ;GAEb,GACF,eACN;EAAC;EAAW;EAAe;EAAc,CAC1C;AAED,QACE,2CAACC,uBAAO;EACM;EACG;EACL;EACM;EAChB,GAAI;YAEH;GACU;EAGlB,EAAE"}
1	+ {"version":3,"file":"stack.cjs","names":["createComponent","stackStyle","useValidChildren","Fragment","styled"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n /*\n The CSS `align-items` property.\n /\n align?: CSSProps[\"alignItems\"]\n /\n The CSS `flex-direction` property.\n /\n direction?: CSSProps[\"flexDirection\"]\n /\n The CSS `justify-content` property.\n /\n justify?: CSSProps[\"justifyContent\"]\n /\n If `true`, each stack item will show a separator.\n /\n separator?: ReactElement\n /\n The CSS `flex-wrap` property.\n /\n wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n PropsContext: StackPropsContext,\n usePropsContext: useStackPropsContext,\n withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/\n `Stack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n ({\n align: alignItems,\n children,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n separator,\n wrap: flexWrap,\n ...rest\n }) => {\n const isColumn = (value: any) =>\n value === \"column\" \|\| value === \"column-reverse\"\n\n const validChildren = useValidChildren(children)\n const cloneChildren = useMemo(\n () =>\n separator\n ? validChildren.map((child, index) => {\n const key = typeof child.key !== \"undefined\" ? child.key : index\n\n const cloneSeparator = cloneElement<any>(separator, {\n borderWidth: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n ),\n h: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"fit-content\" : \"100%\",\n ),\n w: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"100%\" : \"fit-content\",\n ),\n })\n\n return (\n <Fragment key={key}>\n {index ? cloneSeparator : null}\n {child}\n </Fragment>\n )\n })\n : validChildren,\n [separator, flexDirection, validChildren],\n )\n\n return (\n <styled.div\n alignItems={alignItems}\n flexDirection={flexDirection}\n flexWrap={flexWrap}\n justifyContent={justifyContent}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)()\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACEA,yCAAwC,SAASC,+BAAW;;;;;;AAShE,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,UACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgBC,kCAAiB,SAAS;CAChD,MAAM,yCAEF,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,yCAAmC,WAAW;GAClD,kEAA2B,gBAAgB,UACzC,SAAS,MAAM,GAAG,cAAc,YACjC;GACD,wDAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,gBAAgB,OACnC;GACD,wDAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,SAAS,cAC5B;GACF,CAAC;AAEF,SACE,4CAACC,6BACE,QAAQ,iBAAiB,MACzB,UAFY,IAGJ;GAEb,GACF,eACN;EAAC;EAAW;EAAe;EAAc,CAC1C;AAED,QACE,2CAACC,uBAAO;EACM;EACG;EACL;EACM;EAChB,GAAI;YAEH;GACU;EAGlB,EAAE"}

package/dist/cjs/core/components/use-component-style.cjs CHANGED Viewed

@@ -148,7 +148,7 @@ function mergeSlotCSS(slot, style, css) {
 	else temp.push(style[slot]);
 	if (css) temp.push(...(0, require_utils_index.utils_exports.toArray)(css));
 	const result = (0, require_utils_index.utils_exports.filterEmpty)(temp);
-	return !!result.length ? result : void 0;
+	return result.length ? result : void 0;
 }
 function omitThemeProps(props, omitKeys = [], transferProps) {
 	if (transferProps) omitKeys = omitKeys.filter((key) => !transferProps.includes(key));

package/dist/cjs/core/components/use-component-style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-component-style.cjs","names":["style","conditions","getCondition","style: Style<Y> \| undefined","variants","temp: (CSSObject \| undefined)[]","slot","css","useSystem","useColorSchemeContext","isEqualProps","style: Style<H>","mergeCSS"],"sources":["../../../../src/core/components/use-component-style.ts"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type {\n ColorModeArray,\n CSSModifierObject,\n CSSObject,\n CSSPropObject,\n CSSSlotObject,\n ResponsiveWithConditionObject,\n StyleValueWithCondition,\n} from \"../css\"\nimport type {\n Breakpoints,\n ComponentCompound,\n ComponentSlotStyle,\n ComponentStyle,\n Layers,\n LayerScheme,\n ThemeProps,\n WithoutThemeProps,\n} from \"../system\"\nimport type { ComponentSlot, ComponentSlotName } from \"./create-component\"\nimport type { HTMLStyledProps } from \"./index.types\"\nimport { useRef } from \"react\"\nimport {\n bem,\n cx,\n filterEmpty,\n isArray,\n isBooleanish,\n isEmptyObject,\n isObject,\n isRegExp,\n isUndefined,\n merge,\n omitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport { conditions, getCondition, mergeCSS } from \"../css\"\nimport { useColorSchemeContext, useSystem } from \"../system\"\nimport { isEqualProps } from \"./props\"\n\ntype Style<Y extends boolean = false> = Y extends false\n ? CSSObject\n : CSSSlotObject\n\ntype MergedStyle = CSSModifierObject \| CSSModifierObject<CSSSlotObject>\n\ninterface GetStyleOptions\n extends Partial<Breakpoints>, Pick<Partial<Layers>, \"wrap\"> {\n hasSlot?: boolean\n modifier?: string\n name?: string\n selectors?: (string \| undefined)[]\n value?: string\n}\n\nfunction getSelectorStyle<Y extends Dict = Dict>(\n selectors: (string \| undefined)[],\n style: Y,\n) {\n return selectors.reduceRight<Dict>(\n (prev, key) => (key ? { [key]: prev } : prev),\n style,\n ) as Y\n}\n\nfunction getStyle<Y extends boolean = false>(\n style: CSSObject \| CSSSlotObject \| undefined,\n) {\n return function ({\n name: rootName,\n hasSlot = false,\n modifier,\n selectors = [],\n value,\n }: GetStyleOptions): Style<Y> \| undefined {\n if (!style \|\| isEmptyObject(style)) return\n\n if (hasSlot) {\n return Object.fromEntries(\n Object.entries(style as CSSSlotObject).map(([name, style]) => {\n if (selectors.length) {\n if (value && modifier)\n style = {\n [`--${rootName}-${name}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return [name, getSelectorStyle(selectors, style ?? {})]\n } else {\n if (value && modifier)\n style = {\n [`--${rootName}-${name}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return [name, style]\n }\n }),\n ) as Style<Y>\n } else if (selectors.length) {\n if (value && modifier)\n style = {\n [`--${rootName}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return getSelectorStyle(selectors, style) as Style<Y>\n } else {\n if (value && modifier)\n style = {\n [`--${rootName}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return style as Style<Y>\n }\n }\n}\n\nfunction getColorModeStyle<Y extends boolean = false>(\n value: ColorModeArray<string>,\n mergedStyle: MergedStyle,\n) {\n return function ({ selectors = [], ...rest }: GetStyleOptions) {\n const [lightValue, darkValue] = value\n\n const lightStyle = getModifierStyle<Y>(\n lightValue,\n mergedStyle,\n )({ ...rest, selectors })\n\n const darkStyle = getModifierStyle<Y>(\n darkValue,\n mergedStyle,\n )({ ...rest, selectors: [...selectors, conditions._dark] })\n\n return merge(lightStyle, darkStyle)\n }\n}\n\nfunction getConditionStyle<Y extends boolean = false>(\n value: ResponsiveWithConditionObject<string>,\n mergedStyle: MergedStyle,\n) {\n return function (options: GetStyleOptions) {\n const { isResponsiveKey, queries = [], selectors = [] } = options\n const conditionalKeys = Object.keys(value).filter(\n (key) => !isResponsiveKey?.(key),\n )\n\n const breakpointObj = queries.reduce<Style<Y>>(\n (prev, { breakpoint, query }) => {\n if (!isUndefined(value[breakpoint])) {\n prev = merge(\n prev,\n getModifierStyle<Y>(\n value[breakpoint],\n mergedStyle,\n )({ ...options, selectors: [...selectors, query] }),\n )\n }\n\n return prev\n },\n {},\n )\n\n const additionalObj = conditionalKeys.reduce<Style<Y>>((prev, key) => {\n prev = merge(\n prev,\n getModifierStyle<Y>(\n value[key as keyof typeof value],\n mergedStyle,\n )({ ...options, selectors: [...selectors, getCondition(key)] }),\n )\n\n return prev\n }, {})\n\n return merge(breakpointObj, additionalObj)\n }\n}\n\nfunction getModifierStyle<Y extends boolean = false>(\n value: StyleValueWithCondition<string> \| undefined,\n mergedStyle: MergedStyle,\n) {\n return function (options: GetStyleOptions): Style<Y> \| undefined {\n let style: Style<Y> \| undefined = undefined\n\n if (!value) return style\n\n if (isArray(value)) {\n style = getColorModeStyle<Y>(value, mergedStyle)(options)\n } else if (isObject(value)) {\n style = getConditionStyle<Y>(value, mergedStyle)(options)\n } else {\n style = getStyle<Y>(mergedStyle[value])({ ...options, value })\n }\n\n return style\n }\n}\n\nfunction getPropStyle<Y extends boolean = false>(\n props: Dict,\n propVariants: CSSPropObject \| CSSPropObject<CSSSlotObject>,\n style: Style<Y> \| undefined = {},\n) {\n const variants = Object.entries(propVariants)\n\n return function (options: GetStyleOptions) {\n if (!variants.length) return style\n\n variants.forEach(([modifier, variants]) => {\n const value = props[modifier as keyof typeof props]\n\n if (value) {\n const propStyle = getModifierStyle<Y>(\n value,\n variants,\n )({ modifier, value, ...options })\n\n if (propStyle)\n style = merge(style, wrapStyle<Y>(\"props\", propStyle)(options))\n } else {\n const boolean = Object.keys(variants).every((key) => isBooleanish(key))\n\n if (boolean) {\n const propStyle = getModifierStyle<Y>(\n \"false\",\n variants,\n )({ modifier, value: \"true\", ...options })\n\n if (propStyle)\n style = merge(style, wrapStyle<Y>(\"props\", propStyle)(options))\n }\n }\n })\n\n return style\n }\n}\n\nfunction getCompoundStyle<Y extends boolean = false>(\n props: Dict,\n compounds: ComponentCompound<CSSSlotObject>[] \| ComponentCompound[],\n style: Style<Y> \| undefined = {},\n) {\n return function (options: GetStyleOptions) {\n if (!compounds.length) return style\n\n compounds.forEach(({ css, layer, ...rest }) => {\n const conditions = Object.entries(rest)\n\n if (!conditions.length) return\n\n const apply = conditions.every(([key, value]) =>\n isArray(value)\n ? value.includes(props[key])\n : isRegExp(value)\n ? value.test(props[key])\n : props[key] === value,\n )\n\n if (!apply) return\n\n style = merge(\n style,\n wrapStyle<Y>(layer ?? \"compounds\", css as Style<Y>)(options),\n )\n })\n\n return style\n }\n}\n\nexport function getSlotClassName<Y extends string>(\n className?: string,\n slot?: ComponentSlot<Y>,\n) {\n if (!className \|\| !slot) return className\n\n if (isArray(slot)) {\n const [element, modifier] = slot.map((value) =>\n toKebabCase(value as string),\n )\n\n return cx(bem(className, element), bem(className, element, modifier))\n } else if (isObject(slot)) {\n const slotArray = toArray(slot.slot)\n const [element, modifier] = slotArray.map((value) =>\n toKebabCase(value as string),\n )\n\n return cx(bem(className, element), bem(className, element, modifier))\n } else {\n return bem(className, toKebabCase(slot as string))\n }\n}\n\nexport function mergeSlotCSS<Y extends string>(\n slot?: ComponentSlot<Y>,\n style?: CSSSlotObject<Y>,\n css?: CSSObject \| CSSObject[],\n): CSSObject \| CSSObject[] \| undefined {\n if (!style \|\| !slot) return css\n\n const temp: (CSSObject \| undefined)[] = []\n\n if (isArray(slot)) {\n temp.push(...slot.map((slot) => style[slot]))\n } else if (isObject(slot)) {\n if (isArray(slot.slot)) {\n temp.push(...slot.slot.map((slot) => style[slot]))\n } else {\n temp.push(style[slot.slot])\n }\n } else {\n temp.push(style[slot])\n }\n\n if (css) temp.push(...toArray(css))\n\n const result = filterEmpty(temp)\n\n return !!result.length ? result : undefined\n}\n\nfunction omitThemeProps<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n>(props: Y, omitKeys: string[] = [], transferProps?: D[]) {\n if (transferProps)\n omitKeys = omitKeys.filter((key) => !transferProps.includes(key as D))\n\n return omitObject(props, omitKeys) as unknown as WithoutThemeProps<Y, M, D>\n}\n\nfunction wrapStyle<Y extends boolean = false>(\n layer: LayerScheme,\n style?: Style<Y>,\n) {\n return function ({ hasSlot, wrap }: GetStyleOptions) {\n if (hasSlot) {\n if (!style) return undefined\n\n return Object.fromEntries(\n Object.entries(style).map(([slot, style]) => [\n slot,\n wrap?.(layer, style) ?? style,\n ]),\n )\n } else {\n return wrap?.(layer, style) ?? style\n }\n }\n}\n\nfunction getHasAtRuleStyle(css?: CSSObject \| CSSObject[]) {\n return (getAtRule?: Layers[\"getAtRule\"]) => {\n let hasVariant = false\n let hasSize = false\n\n if (!css \|\| !getAtRule) return { hasSize, hasVariant }\n\n const variantAtRule = getAtRule(\"variant\")\n const sizeAtRule = getAtRule(\"size\")\n\n css = toArray(css)\n\n css.forEach((css) => {\n const keys = Object.keys(css)\n\n if (keys.includes(variantAtRule)) hasVariant = true\n if (keys.includes(sizeAtRule)) hasSize = true\n })\n\n return { hasSize, hasVariant }\n }\n}\n\nfunction mergeDefaultProps<\n Y extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n M extends Dict = Dict,\n>(defaultProps: Y[\"defaultProps\"], props: M) {\n return Object.entries(defaultProps ?? {}).reduce<Dict>(\n (prev, [key, value]) => {\n prev[key] ??= value\n\n return prev\n },\n props,\n ) as M\n}\n\ninterface UseStyleOptions<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n H extends boolean = false,\n> {\n className?: string\n hasSlot?: H\n name?: string\n slot?: ComponentSlot<ComponentSlotName<M>>\n style?: M\n transferProps?: D[]\n}\n\nfunction useStyle<\n Y extends HTMLStyledProps & ThemeProps<{}> = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n H extends boolean = false,\n>(\n props: Y,\n {\n name,\n className: defaultClassName,\n style: componentStyle,\n hasSlot,\n slot,\n transferProps,\n }: UseStyleOptions<Y, M, D, H> = {},\n): [Style<H>, WithoutThemeProps<Y, M, D>] {\n const system = useSystem()\n const { getAtRule, wrap } = system.layers\n const rootColorScheme = useColorSchemeContext()\n const options = { ...system.breakpoints, name, hasSlot, wrap }\n\n const propsRef = useRef<Dict>({})\n const mergedPropsRef = useRef<Dict>({})\n const styleRef = useRef<Style<H> \| undefined>(undefined)\n\n const hasComponentStyle =\n componentStyle && !!Object.keys(componentStyle).length\n\n if (hasComponentStyle) {\n const {\n className: customClassName,\n base,\n compounds,\n props: propVariants,\n sizes,\n variants,\n defaultProps: { colorScheme: defaultColorScheme, ...defaultProps } = {},\n } = componentStyle\n\n const colorScheme =\n props.colorScheme ?? rootColorScheme ?? defaultColorScheme\n\n const className = cx(defaultClassName ?? customClassName, props.className)\n const mergedProps = {\n ...mergeDefaultProps(defaultProps, props),\n className,\n colorScheme,\n }\n const omitProps = Object.keys(propVariants ?? {})\n const { size, variant } = mergedProps\n\n if (variants) omitProps.push(\"variant\")\n if (sizes) omitProps.push(\"size\")\n\n const computedProps = omitThemeProps(\n mergedProps,\n omitProps,\n transferProps,\n ) as Y\n\n if (\n !isEqualProps(mergedPropsRef.current, mergedProps, [\"css\", \"children\"])\n ) {\n const { hasSize, hasVariant } = getHasAtRuleStyle(props.css)(getAtRule)\n\n let style: Style<H> = {}\n\n if (base) {\n const baseStyle = getStyle<H>(base)(options)\n\n style = merge(style, wrapStyle<H>(\"base\", baseStyle)(options))\n }\n\n if (sizes && !hasSize) {\n const sizeStyle = merge(\n sizes.base,\n getModifierStyle<H>(size, sizes)({ modifier: \"size\", ...options }),\n )\n\n style = merge(style, wrapStyle<H>(\"size\", sizeStyle)(options))\n }\n\n if (variants && !hasVariant) {\n const variantStyle = merge(\n variants.base,\n getModifierStyle<H>(\n variant,\n variants,\n )({ modifier: \"variant\", ...options }),\n )\n\n style = merge(style, wrapStyle<H>(\"variant\", variantStyle)(options))\n }\n\n if (propVariants)\n style = getPropStyle<H>(mergedProps, propVariants, style)(options)\n\n if (compounds)\n style = getCompoundStyle<H>(mergedProps, compounds, style)(options)\n\n styleRef.current = style\n\n if (hasSlot) {\n computedProps.css = mergeSlotCSS<ComponentSlotName<M>>(\n slot,\n style as CSSSlotObject,\n computedProps.css,\n )\n } else {\n computedProps.css = mergeCSS(style as CSSObject, computedProps.css)\n }\n } else {\n computedProps.css = propsRef.current.css\n }\n\n mergedPropsRef.current = mergedProps\n\n if (!isEqualProps(propsRef.current, computedProps))\n propsRef.current = computedProps\n } else {\n const className = cx(defaultClassName, props.className)\n\n if (className) props.className = className\n\n if (!isEqualProps(propsRef.current, props))\n propsRef.current = props as unknown as WithoutThemeProps<Y, M, D>\n }\n\n return [\n styleRef.current ?? {},\n propsRef.current as WithoutThemeProps<Y, M, D>,\n ]\n}\n\nexport interface UseComponentStyleOptions<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n> extends Omit<UseStyleOptions<Y, M, D>, \"hasSlot\" \| \"slot\"> {}\n\nexport function useComponentStyle<\n Y extends Dict = Dict,\n M extends ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n>(props: Y, options: UseComponentStyleOptions<Y, M, D> = {}) {\n return useStyle<Y, M, D>(props, options)\n}\n\nexport interface UseComponentSlotStyleOptions<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n> extends Omit<UseStyleOptions<Y, M, D, true>, \"hasSlot\"> {}\n\nexport function useComponentSlotStyle<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle = ComponentSlotStyle,\n D extends keyof Y = keyof Y,\n>(props: Y, options: UseComponentSlotStyleOptions<Y, M, D> = {}) {\n return useStyle<Y, M, D, true>(props, { ...options, hasSlot: true })\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-component-style.cjs","names":["style","conditions","getCondition","style: Style<Y> \| undefined","variants","temp: (CSSObject \| undefined)[]","slot","css","useSystem","useColorSchemeContext","isEqualProps","style: Style<H>","mergeCSS"],"sources":["../../../../src/core/components/use-component-style.ts"],"sourcesContent":["\"use client\"\n\nimport type { Dict } from \"../../utils\"\nimport type {\n ColorModeArray,\n CSSModifierObject,\n CSSObject,\n CSSPropObject,\n CSSSlotObject,\n ResponsiveWithConditionObject,\n StyleValueWithCondition,\n} from \"../css\"\nimport type {\n Breakpoints,\n ComponentCompound,\n ComponentSlotStyle,\n ComponentStyle,\n Layers,\n LayerScheme,\n ThemeProps,\n WithoutThemeProps,\n} from \"../system\"\nimport type { ComponentSlot, ComponentSlotName } from \"./create-component\"\nimport type { HTMLStyledProps } from \"./index.types\"\nimport { useRef } from \"react\"\nimport {\n bem,\n cx,\n filterEmpty,\n isArray,\n isBooleanish,\n isEmptyObject,\n isObject,\n isRegExp,\n isUndefined,\n merge,\n omitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport { conditions, getCondition, mergeCSS } from \"../css\"\nimport { useColorSchemeContext, useSystem } from \"../system\"\nimport { isEqualProps } from \"./props\"\n\ntype Style<Y extends boolean = false> = Y extends false\n ? CSSObject\n : CSSSlotObject\n\ntype MergedStyle = CSSModifierObject \| CSSModifierObject<CSSSlotObject>\n\ninterface GetStyleOptions\n extends Partial<Breakpoints>, Pick<Partial<Layers>, \"wrap\"> {\n hasSlot?: boolean\n modifier?: string\n name?: string\n selectors?: (string \| undefined)[]\n value?: string\n}\n\nfunction getSelectorStyle<Y extends Dict = Dict>(\n selectors: (string \| undefined)[],\n style: Y,\n) {\n return selectors.reduceRight<Dict>(\n (prev, key) => (key ? { [key]: prev } : prev),\n style,\n ) as Y\n}\n\nfunction getStyle<Y extends boolean = false>(\n style: CSSObject \| CSSSlotObject \| undefined,\n) {\n return function ({\n name: rootName,\n hasSlot = false,\n modifier,\n selectors = [],\n value,\n }: GetStyleOptions): Style<Y> \| undefined {\n if (!style \|\| isEmptyObject(style)) return\n\n if (hasSlot) {\n return Object.fromEntries(\n Object.entries(style as CSSSlotObject).map(([name, style]) => {\n if (selectors.length) {\n if (value && modifier)\n style = {\n [`--${rootName}-${name}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return [name, getSelectorStyle(selectors, style ?? {})]\n } else {\n if (value && modifier)\n style = {\n [`--${rootName}-${name}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return [name, style]\n }\n }),\n ) as Style<Y>\n } else if (selectors.length) {\n if (value && modifier)\n style = {\n [`--${rootName}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return getSelectorStyle(selectors, style) as Style<Y>\n } else {\n if (value && modifier)\n style = {\n [`--${rootName}-${modifier}`]: `\"${value}\"`,\n ...style,\n } as CSSObject\n\n return style as Style<Y>\n }\n }\n}\n\nfunction getColorModeStyle<Y extends boolean = false>(\n value: ColorModeArray<string>,\n mergedStyle: MergedStyle,\n) {\n return function ({ selectors = [], ...rest }: GetStyleOptions) {\n const [lightValue, darkValue] = value\n\n const lightStyle = getModifierStyle<Y>(\n lightValue,\n mergedStyle,\n )({ ...rest, selectors })\n\n const darkStyle = getModifierStyle<Y>(\n darkValue,\n mergedStyle,\n )({ ...rest, selectors: [...selectors, conditions._dark] })\n\n return merge(lightStyle, darkStyle)\n }\n}\n\nfunction getConditionStyle<Y extends boolean = false>(\n value: ResponsiveWithConditionObject<string>,\n mergedStyle: MergedStyle,\n) {\n return function (options: GetStyleOptions) {\n const { isResponsiveKey, queries = [], selectors = [] } = options\n const conditionalKeys = Object.keys(value).filter(\n (key) => !isResponsiveKey?.(key),\n )\n\n const breakpointObj = queries.reduce<Style<Y>>(\n (prev, { breakpoint, query }) => {\n if (!isUndefined(value[breakpoint])) {\n prev = merge(\n prev,\n getModifierStyle<Y>(\n value[breakpoint],\n mergedStyle,\n )({ ...options, selectors: [...selectors, query] }),\n )\n }\n\n return prev\n },\n {},\n )\n\n const additionalObj = conditionalKeys.reduce<Style<Y>>((prev, key) => {\n prev = merge(\n prev,\n getModifierStyle<Y>(\n value[key as keyof typeof value],\n mergedStyle,\n )({ ...options, selectors: [...selectors, getCondition(key)] }),\n )\n\n return prev\n }, {})\n\n return merge(breakpointObj, additionalObj)\n }\n}\n\nfunction getModifierStyle<Y extends boolean = false>(\n value: StyleValueWithCondition<string> \| undefined,\n mergedStyle: MergedStyle,\n) {\n return function (options: GetStyleOptions): Style<Y> \| undefined {\n let style: Style<Y> \| undefined = undefined\n\n if (!value) return style\n\n if (isArray(value)) {\n style = getColorModeStyle<Y>(value, mergedStyle)(options)\n } else if (isObject(value)) {\n style = getConditionStyle<Y>(value, mergedStyle)(options)\n } else {\n style = getStyle<Y>(mergedStyle[value])({ ...options, value })\n }\n\n return style\n }\n}\n\nfunction getPropStyle<Y extends boolean = false>(\n props: Dict,\n propVariants: CSSPropObject \| CSSPropObject<CSSSlotObject>,\n style: Style<Y> \| undefined = {},\n) {\n const variants = Object.entries(propVariants)\n\n return function (options: GetStyleOptions) {\n if (!variants.length) return style\n\n variants.forEach(([modifier, variants]) => {\n const value = props[modifier as keyof typeof props]\n\n if (value) {\n const propStyle = getModifierStyle<Y>(\n value,\n variants,\n )({ modifier, value, ...options })\n\n if (propStyle)\n style = merge(style, wrapStyle<Y>(\"props\", propStyle)(options))\n } else {\n const boolean = Object.keys(variants).every((key) => isBooleanish(key))\n\n if (boolean) {\n const propStyle = getModifierStyle<Y>(\n \"false\",\n variants,\n )({ modifier, value: \"true\", ...options })\n\n if (propStyle)\n style = merge(style, wrapStyle<Y>(\"props\", propStyle)(options))\n }\n }\n })\n\n return style\n }\n}\n\nfunction getCompoundStyle<Y extends boolean = false>(\n props: Dict,\n compounds: ComponentCompound<CSSSlotObject>[] \| ComponentCompound[],\n style: Style<Y> \| undefined = {},\n) {\n return function (options: GetStyleOptions) {\n if (!compounds.length) return style\n\n compounds.forEach(({ css, layer, ...rest }) => {\n const conditions = Object.entries(rest)\n\n if (!conditions.length) return\n\n const apply = conditions.every(([key, value]) =>\n isArray(value)\n ? value.includes(props[key])\n : isRegExp(value)\n ? value.test(props[key])\n : props[key] === value,\n )\n\n if (!apply) return\n\n style = merge(\n style,\n wrapStyle<Y>(layer ?? \"compounds\", css as Style<Y>)(options),\n )\n })\n\n return style\n }\n}\n\nexport function getSlotClassName<Y extends string>(\n className?: string,\n slot?: ComponentSlot<Y>,\n) {\n if (!className \|\| !slot) return className\n\n if (isArray(slot)) {\n const [element, modifier] = slot.map((value) =>\n toKebabCase(value as string),\n )\n\n return cx(bem(className, element), bem(className, element, modifier))\n } else if (isObject(slot)) {\n const slotArray = toArray(slot.slot)\n const [element, modifier] = slotArray.map((value) =>\n toKebabCase(value as string),\n )\n\n return cx(bem(className, element), bem(className, element, modifier))\n } else {\n return bem(className, toKebabCase(slot as string))\n }\n}\n\nexport function mergeSlotCSS<Y extends string>(\n slot?: ComponentSlot<Y>,\n style?: CSSSlotObject<Y>,\n css?: CSSObject \| CSSObject[],\n): CSSObject \| CSSObject[] \| undefined {\n if (!style \|\| !slot) return css\n\n const temp: (CSSObject \| undefined)[] = []\n\n if (isArray(slot)) {\n temp.push(...slot.map((slot) => style[slot]))\n } else if (isObject(slot)) {\n if (isArray(slot.slot)) {\n temp.push(...slot.slot.map((slot) => style[slot]))\n } else {\n temp.push(style[slot.slot])\n }\n } else {\n temp.push(style[slot])\n }\n\n if (css) temp.push(...toArray(css))\n\n const result = filterEmpty(temp)\n\n return result.length ? result : undefined\n}\n\nfunction omitThemeProps<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n>(props: Y, omitKeys: string[] = [], transferProps?: D[]) {\n if (transferProps)\n omitKeys = omitKeys.filter((key) => !transferProps.includes(key as D))\n\n return omitObject(props, omitKeys) as unknown as WithoutThemeProps<Y, M, D>\n}\n\nfunction wrapStyle<Y extends boolean = false>(\n layer: LayerScheme,\n style?: Style<Y>,\n) {\n return function ({ hasSlot, wrap }: GetStyleOptions) {\n if (hasSlot) {\n if (!style) return undefined\n\n return Object.fromEntries(\n Object.entries(style).map(([slot, style]) => [\n slot,\n wrap?.(layer, style) ?? style,\n ]),\n )\n } else {\n return wrap?.(layer, style) ?? style\n }\n }\n}\n\nfunction getHasAtRuleStyle(css?: CSSObject \| CSSObject[]) {\n return (getAtRule?: Layers[\"getAtRule\"]) => {\n let hasVariant = false\n let hasSize = false\n\n if (!css \|\| !getAtRule) return { hasSize, hasVariant }\n\n const variantAtRule = getAtRule(\"variant\")\n const sizeAtRule = getAtRule(\"size\")\n\n css = toArray(css)\n\n css.forEach((css) => {\n const keys = Object.keys(css)\n\n if (keys.includes(variantAtRule)) hasVariant = true\n if (keys.includes(sizeAtRule)) hasSize = true\n })\n\n return { hasSize, hasVariant }\n }\n}\n\nfunction mergeDefaultProps<\n Y extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n M extends Dict = Dict,\n>(defaultProps: Y[\"defaultProps\"], props: M) {\n return Object.entries(defaultProps ?? {}).reduce<Dict>(\n (prev, [key, value]) => {\n prev[key] ??= value\n\n return prev\n },\n props,\n ) as M\n}\n\ninterface UseStyleOptions<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n H extends boolean = false,\n> {\n className?: string\n hasSlot?: H\n name?: string\n slot?: ComponentSlot<ComponentSlotName<M>>\n style?: M\n transferProps?: D[]\n}\n\nfunction useStyle<\n Y extends HTMLStyledProps & ThemeProps<{}> = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n H extends boolean = false,\n>(\n props: Y,\n {\n name,\n className: defaultClassName,\n style: componentStyle,\n hasSlot,\n slot,\n transferProps,\n }: UseStyleOptions<Y, M, D, H> = {},\n): [Style<H>, WithoutThemeProps<Y, M, D>] {\n const system = useSystem()\n const { getAtRule, wrap } = system.layers\n const rootColorScheme = useColorSchemeContext()\n const options = { ...system.breakpoints, name, hasSlot, wrap }\n\n const propsRef = useRef<Dict>({})\n const mergedPropsRef = useRef<Dict>({})\n const styleRef = useRef<Style<H> \| undefined>(undefined)\n\n const hasComponentStyle =\n componentStyle && !!Object.keys(componentStyle).length\n\n if (hasComponentStyle) {\n const {\n className: customClassName,\n base,\n compounds,\n props: propVariants,\n sizes,\n variants,\n defaultProps: { colorScheme: defaultColorScheme, ...defaultProps } = {},\n } = componentStyle\n\n const colorScheme =\n props.colorScheme ?? rootColorScheme ?? defaultColorScheme\n\n const className = cx(defaultClassName ?? customClassName, props.className)\n const mergedProps = {\n ...mergeDefaultProps(defaultProps, props),\n className,\n colorScheme,\n }\n const omitProps = Object.keys(propVariants ?? {})\n const { size, variant } = mergedProps\n\n if (variants) omitProps.push(\"variant\")\n if (sizes) omitProps.push(\"size\")\n\n const computedProps = omitThemeProps(\n mergedProps,\n omitProps,\n transferProps,\n ) as Y\n\n if (\n !isEqualProps(mergedPropsRef.current, mergedProps, [\"css\", \"children\"])\n ) {\n const { hasSize, hasVariant } = getHasAtRuleStyle(props.css)(getAtRule)\n\n let style: Style<H> = {}\n\n if (base) {\n const baseStyle = getStyle<H>(base)(options)\n\n style = merge(style, wrapStyle<H>(\"base\", baseStyle)(options))\n }\n\n if (sizes && !hasSize) {\n const sizeStyle = merge(\n sizes.base,\n getModifierStyle<H>(size, sizes)({ modifier: \"size\", ...options }),\n )\n\n style = merge(style, wrapStyle<H>(\"size\", sizeStyle)(options))\n }\n\n if (variants && !hasVariant) {\n const variantStyle = merge(\n variants.base,\n getModifierStyle<H>(\n variant,\n variants,\n )({ modifier: \"variant\", ...options }),\n )\n\n style = merge(style, wrapStyle<H>(\"variant\", variantStyle)(options))\n }\n\n if (propVariants)\n style = getPropStyle<H>(mergedProps, propVariants, style)(options)\n\n if (compounds)\n style = getCompoundStyle<H>(mergedProps, compounds, style)(options)\n\n styleRef.current = style\n\n if (hasSlot) {\n computedProps.css = mergeSlotCSS<ComponentSlotName<M>>(\n slot,\n style as CSSSlotObject,\n computedProps.css,\n )\n } else {\n computedProps.css = mergeCSS(style as CSSObject, computedProps.css)\n }\n } else {\n computedProps.css = propsRef.current.css\n }\n\n mergedPropsRef.current = mergedProps\n\n if (!isEqualProps(propsRef.current, computedProps))\n propsRef.current = computedProps\n } else {\n const className = cx(defaultClassName, props.className)\n\n if (className) props.className = className\n\n if (!isEqualProps(propsRef.current, props))\n propsRef.current = props as unknown as WithoutThemeProps<Y, M, D>\n }\n\n return [\n styleRef.current ?? {},\n propsRef.current as WithoutThemeProps<Y, M, D>,\n ]\n}\n\nexport interface UseComponentStyleOptions<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n> extends Omit<UseStyleOptions<Y, M, D>, \"hasSlot\" \| \"slot\"> {}\n\nexport function useComponentStyle<\n Y extends Dict = Dict,\n M extends ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n>(props: Y, options: UseComponentStyleOptions<Y, M, D> = {}) {\n return useStyle<Y, M, D>(props, options)\n}\n\nexport interface UseComponentSlotStyleOptions<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle \| ComponentStyle = ComponentStyle,\n D extends keyof Y = keyof Y,\n> extends Omit<UseStyleOptions<Y, M, D, true>, \"hasSlot\"> {}\n\nexport function useComponentSlotStyle<\n Y extends Dict = Dict,\n M extends ComponentSlotStyle = ComponentSlotStyle,\n D extends keyof Y = keyof Y,\n>(props: Y, options: UseComponentSlotStyleOptions<Y, M, D> = {}) {\n return useStyle<Y, M, D, true>(props, { ...options, hasSlot: true })\n}\n"],"mappings":"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"}

package/dist/cjs/core/system/color-mode-provider.cjs CHANGED Viewed

@@ -18,7 +18,7 @@ const ColorModeContext = (0, react.createContext)({
 	internalColorMode: "light",
 	toggleColorMode: require_utils_index.utils_exports.noop
 });
-const ColorModeProvider = ({ children, colorMode: forcedColorMode, config: { defaultColorMode = "light", disableTransitionOnChange = true } = {}, cookie, storage = !!cookie ? "cookie" : "localStorage", storageKey = require_constant.COLOR_MODE_STORAGE_KEY }) => {
+const ColorModeProvider = ({ children, colorMode: forcedColorMode, config: { defaultColorMode = "light", disableTransitionOnChange = true } = {}, cookie, storage = cookie ? "cookie" : "localStorage", storageKey = require_constant.COLOR_MODE_STORAGE_KEY }) => {
 	const storageManager = (0, react.useMemo)(() => require_storage_manager.createStorageManager(storage, storageKey, defaultColorMode, cookie), [
 		cookie,
 		defaultColorMode,

package/dist/cjs/core/system/color-mode-provider.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-mode-provider.cjs","names":["ColorModeProvider: FC<ColorModeProviderProps>","COLOR_MODE_STORAGE_KEY","createStorageManager","useEnvironment","useSystemColorMode","systemColorMode","getPreventTransition","colorMode","internalColorMode"],"sources":["../../../../src/core/system/color-mode-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { ColorMode, ColorModeWithSystem, ThemeConfig } from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n createContext,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\"\nimport { isEmptyObject, noop } from \"../../utils\"\nimport { COLOR_MODE_STORAGE_KEY } from \"../constant\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { getPreventTransition } from \"./theme-provider\"\nimport { useSystemColorMode } from \"./use-system-color-mode\"\n\ninterface ColorModeContext {\n colorMode: ColorMode\n internalColorMode: ColorModeWithSystem\n changeColorMode: (colorMode: ColorModeWithSystem) => void\n toggleColorMode: () => void\n forced?: boolean\n}\n\nexport const ColorModeContext = createContext<ColorModeContext>({\n changeColorMode: noop,\n colorMode: \"light\",\n forced: false,\n internalColorMode: \"light\",\n toggleColorMode: noop,\n})\n\nexport interface ColorModeProviderProps extends PropsWithChildren {\n /*\n The forced color mode.\n /\n colorMode?: ColorMode\n /\n The config of the yamada ui.\n /\n config?: ThemeConfig\n /\n If `storage` is `cookie`, the cookie to use.\n * If not provided, the cookie will be set to `document.cookie`.\n /\n cookie?: string\n /\n The storage to use.\n * If you are using a server-side rendering library, you should use `cookie`.\n \n @default 'localStorage'\n /\n storage?: Storage\n /\n The key of the value saved in storage.\n \n @default 'color-mode'\n /\n storageKey?: string\n}\n\nexport const ColorModeProvider: FC<ColorModeProviderProps> = ({\n children,\n colorMode: forcedColorMode,\n config: {\n defaultColorMode = \"light\" as ColorModeWithSystem,\n disableTransitionOnChange = true,\n } = {},\n cookie,\n storage = !!cookie ? \"cookie\" : \"localStorage\",\n storageKey = COLOR_MODE_STORAGE_KEY,\n}) => {\n const storageManager = useMemo(\n () =>\n createStorageManager<ColorModeWithSystem, ColorMode>(\n storage,\n storageKey,\n defaultColorMode,\n cookie,\n ),\n [cookie, defaultColorMode, storage, storageKey],\n )\n const environment = useEnvironment()\n const { getDocument } = environment\n const [internalColorMode, setInternalColorMode] =\n useState<ColorModeWithSystem>(storageManager.get())\n const { getSystemColorMode, systemColorMode } = useSystemColorMode({\n callback: (systemColorMode) => {\n if (internalColorMode !== \"system\") return\n\n setClassName(systemColorMode === \"dark\")\n setDataset(systemColorMode)\n },\n defaultColorMode: storageManager.default(\n defaultColorMode === \"dark\" ? \"dark\" : \"light\",\n ),\n })\n const colorMode =\n internalColorMode === \"system\" ? systemColorMode : internalColorMode\n\n const setDataset = useCallback(\n (colorMode: ColorMode) => {\n const doc = getDocument()\n\n if (!doc) return\n\n const cleanup = disableTransitionOnChange\n ? getPreventTransition(environment)\n : undefined\n\n doc.documentElement.dataset.mode = colorMode\n doc.documentElement.style.colorScheme = colorMode\n\n cleanup?.()\n },\n [disableTransitionOnChange, environment, getDocument],\n )\n\n const setClassName = useCallback(\n (isDark: boolean) => {\n const doc = getDocument()\n\n if (!doc) return\n\n doc.body.classList.add(isDark ? \"dark\" : \"light\")\n doc.body.classList.remove(isDark ? \"light\" : \"dark\")\n },\n [getDocument],\n )\n\n const changeColorMode = useCallback(\n (internalColorMode: ColorModeWithSystem) => {\n const colorMode =\n internalColorMode === \"system\"\n ? getSystemColorMode()\n : internalColorMode\n\n setInternalColorMode(internalColorMode)\n setClassName(colorMode === \"dark\")\n setDataset(colorMode)\n\n storageManager.set(internalColorMode)\n },\n [storageManager, getSystemColorMode, setClassName, setDataset],\n )\n\n const toggleColorMode = useCallback(() => {\n changeColorMode(colorMode === \"dark\" ? \"light\" : \"dark\")\n }, [changeColorMode, colorMode])\n\n useEffect(() => {\n const internalColorMode = storageManager.get()\n\n changeColorMode(internalColorMode)\n }, [changeColorMode, storageManager])\n\n const context = useMemo(\n () => ({\n changeColorMode: forcedColorMode ? noop : changeColorMode,\n colorMode: forcedColorMode ?? colorMode,\n forced: forcedColorMode !== undefined,\n internalColorMode,\n toggleColorMode: forcedColorMode ? noop : toggleColorMode,\n }),\n [\n forcedColorMode,\n colorMode,\n internalColorMode,\n changeColorMode,\n toggleColorMode,\n ],\n )\n\n return <ColorModeContext value={context}>{children}</ColorModeContext>\n}\n\n/\n `useColorMode` is a custom hook that returns the current color mode.\n \n @see https://yamada-ui.com/docs/hooks/use-color-mode\n */\nexport const useColorMode = (): ColorModeContext => {\n const context = use(ColorModeContext)\n\n if (isEmptyObject(context)) {\n return {\n changeColorMode: noop,\n colorMode: \"light\",\n forced: false,\n internalColorMode: \"light\",\n toggleColorMode: noop,\n }\n } else {\n return context\n }\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAa,4CAAmD;CAC9D,mDAAiB;CACjB,WAAW;CACX,QAAQ;CACR,mBAAmB;CACnB,mDAAiB;CAClB,CAAC;AA+BF,MAAaA,qBAAiD,EAC5D,UACA,WAAW,iBACX,QAAQ,EACN,mBAAmB,SACnB,4BAA4B,SAC1B,EAAE,EACN,QACA,UAAU,~~CAAC,CAAC,~~SAAS,WAAW,~~gBAChC~~,aAAaC,8CACT;CACJ,MAAM,0CAEFC,6CACE,SACA,YACA,kBACA,OACD,EACH;EAAC;EAAQ;EAAkB;EAAS;EAAW,CAChD;CACD,MAAM,cAAcC,6CAAgB;CACpC,MAAM,EAAE,gBAAgB;CACxB,MAAM,CAAC,mBAAmB,4CACM,eAAe,KAAK,CAAC;CACrD,MAAM,EAAE,oBAAoB,oBAAoBC,iDAAmB;EACjE,WAAW,sBAAoB;AAC7B,OAAI,sBAAsB,SAAU;AAEpC,gBAAaC,sBAAoB,OAAO;AACxC,cAAWA,kBAAgB;;EAE7B,kBAAkB,eAAe,QAC/B,qBAAqB,SAAS,SAAS,QACxC;EACF,CAAC;CACF,MAAM,YACJ,sBAAsB,WAAW,kBAAkB;CAErD,MAAM,qCACH,gBAAyB;EACxB,MAAM,MAAM,aAAa;AAEzB,MAAI,CAAC,IAAK;EAEV,MAAM,UAAU,4BACZC,4CAAqB,YAAY,GACjC;AAEJ,MAAI,gBAAgB,QAAQ,OAAOC;AACnC,MAAI,gBAAgB,MAAM,cAAcA;AAExC,aAAW;IAEb;EAAC;EAA2B;EAAa;EAAY,CACtD;CAED,MAAM,uCACH,WAAoB;EACnB,MAAM,MAAM,aAAa;AAEzB,MAAI,CAAC,IAAK;AAEV,MAAI,KAAK,UAAU,IAAI,SAAS,SAAS,QAAQ;AACjD,MAAI,KAAK,UAAU,OAAO,SAAS,UAAU,OAAO;IAEtD,CAAC,YAAY,CACd;CAED,MAAM,0CACH,wBAA2C;EAC1C,MAAMA,cACJC,wBAAsB,WAClB,oBAAoB,GACpBA;AAEN,uBAAqBA,oBAAkB;AACvC,eAAaD,gBAAc,OAAO;AAClC,aAAWA,YAAU;AAErB,iBAAe,IAAIC,oBAAkB;IAEvC;EAAC;EAAgB;EAAoB;EAAc;EAAW,CAC/D;CAED,MAAM,+CAAoC;AACxC,kBAAgB,cAAc,SAAS,UAAU,OAAO;IACvD,CAAC,iBAAiB,UAAU,CAAC;AAEhC,4BAAgB;AAGd,kBAF0B,eAAe,KAAK,CAEZ;IACjC,CAAC,iBAAiB,eAAe,CAAC;AAmBrC,QAAO,2CAAC;EAAiB,iCAhBhB;GACL,iBAAiB,oDAAkB,OAAO;GAC1C,WAAW,mBAAmB;GAC9B,QAAQ,oBAAoB;GAC5B;GACA,iBAAiB,oDAAkB,OAAO;GAC3C,GACD;GACE;GACA;GACA;GACA;GACA;GACD,CACF;EAEyC;GAA4B;;;;;;;AAQxE,MAAa,qBAAuC;CAClD,MAAM,yBAAc,iBAAiB;AAErC,0DAAkB,QAAQ,CACxB,QAAO;EACL,mDAAiB;EACjB,WAAW;EACX,QAAQ;EACR,mBAAmB;EACnB,mDAAiB;EAClB;KAED,QAAO"}
1	+ {"version":3,"file":"color-mode-provider.cjs","names":["ColorModeProvider: FC<ColorModeProviderProps>","COLOR_MODE_STORAGE_KEY","createStorageManager","useEnvironment","useSystemColorMode","systemColorMode","getPreventTransition","colorMode","internalColorMode"],"sources":["../../../../src/core/system/color-mode-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { ColorMode, ColorModeWithSystem, ThemeConfig } from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n createContext,\n use,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\"\nimport { isEmptyObject, noop } from \"../../utils\"\nimport { COLOR_MODE_STORAGE_KEY } from \"../constant\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { getPreventTransition } from \"./theme-provider\"\nimport { useSystemColorMode } from \"./use-system-color-mode\"\n\ninterface ColorModeContext {\n colorMode: ColorMode\n internalColorMode: ColorModeWithSystem\n changeColorMode: (colorMode: ColorModeWithSystem) => void\n toggleColorMode: () => void\n forced?: boolean\n}\n\nexport const ColorModeContext = createContext<ColorModeContext>({\n changeColorMode: noop,\n colorMode: \"light\",\n forced: false,\n internalColorMode: \"light\",\n toggleColorMode: noop,\n})\n\nexport interface ColorModeProviderProps extends PropsWithChildren {\n /*\n The forced color mode.\n /\n colorMode?: ColorMode\n /\n The config of the yamada ui.\n /\n config?: ThemeConfig\n /\n If `storage` is `cookie`, the cookie to use.\n * If not provided, the cookie will be set to `document.cookie`.\n /\n cookie?: string\n /\n The storage to use.\n * If you are using a server-side rendering library, you should use `cookie`.\n \n @default 'localStorage'\n /\n storage?: Storage\n /\n The key of the value saved in storage.\n \n @default 'color-mode'\n /\n storageKey?: string\n}\n\nexport const ColorModeProvider: FC<ColorModeProviderProps> = ({\n children,\n colorMode: forcedColorMode,\n config: {\n defaultColorMode = \"light\" as ColorModeWithSystem,\n disableTransitionOnChange = true,\n } = {},\n cookie,\n storage = cookie ? \"cookie\" : \"localStorage\",\n storageKey = COLOR_MODE_STORAGE_KEY,\n}) => {\n const storageManager = useMemo(\n () =>\n createStorageManager<ColorModeWithSystem, ColorMode>(\n storage,\n storageKey,\n defaultColorMode,\n cookie,\n ),\n [cookie, defaultColorMode, storage, storageKey],\n )\n const environment = useEnvironment()\n const { getDocument } = environment\n const [internalColorMode, setInternalColorMode] =\n useState<ColorModeWithSystem>(storageManager.get())\n const { getSystemColorMode, systemColorMode } = useSystemColorMode({\n callback: (systemColorMode) => {\n if (internalColorMode !== \"system\") return\n\n setClassName(systemColorMode === \"dark\")\n setDataset(systemColorMode)\n },\n defaultColorMode: storageManager.default(\n defaultColorMode === \"dark\" ? \"dark\" : \"light\",\n ),\n })\n const colorMode =\n internalColorMode === \"system\" ? systemColorMode : internalColorMode\n\n const setDataset = useCallback(\n (colorMode: ColorMode) => {\n const doc = getDocument()\n\n if (!doc) return\n\n const cleanup = disableTransitionOnChange\n ? getPreventTransition(environment)\n : undefined\n\n doc.documentElement.dataset.mode = colorMode\n doc.documentElement.style.colorScheme = colorMode\n\n cleanup?.()\n },\n [disableTransitionOnChange, environment, getDocument],\n )\n\n const setClassName = useCallback(\n (isDark: boolean) => {\n const doc = getDocument()\n\n if (!doc) return\n\n doc.body.classList.add(isDark ? \"dark\" : \"light\")\n doc.body.classList.remove(isDark ? \"light\" : \"dark\")\n },\n [getDocument],\n )\n\n const changeColorMode = useCallback(\n (internalColorMode: ColorModeWithSystem) => {\n const colorMode =\n internalColorMode === \"system\"\n ? getSystemColorMode()\n : internalColorMode\n\n setInternalColorMode(internalColorMode)\n setClassName(colorMode === \"dark\")\n setDataset(colorMode)\n\n storageManager.set(internalColorMode)\n },\n [storageManager, getSystemColorMode, setClassName, setDataset],\n )\n\n const toggleColorMode = useCallback(() => {\n changeColorMode(colorMode === \"dark\" ? \"light\" : \"dark\")\n }, [changeColorMode, colorMode])\n\n useEffect(() => {\n const internalColorMode = storageManager.get()\n\n changeColorMode(internalColorMode)\n }, [changeColorMode, storageManager])\n\n const context = useMemo(\n () => ({\n changeColorMode: forcedColorMode ? noop : changeColorMode,\n colorMode: forcedColorMode ?? colorMode,\n forced: forcedColorMode !== undefined,\n internalColorMode,\n toggleColorMode: forcedColorMode ? noop : toggleColorMode,\n }),\n [\n forcedColorMode,\n colorMode,\n internalColorMode,\n changeColorMode,\n toggleColorMode,\n ],\n )\n\n return <ColorModeContext value={context}>{children}</ColorModeContext>\n}\n\n/\n `useColorMode` is a custom hook that returns the current color mode.\n \n @see https://yamada-ui.com/docs/hooks/use-color-mode\n */\nexport const useColorMode = (): ColorModeContext => {\n const context = use(ColorModeContext)\n\n if (isEmptyObject(context)) {\n return {\n changeColorMode: noop,\n colorMode: \"light\",\n forced: false,\n internalColorMode: \"light\",\n toggleColorMode: noop,\n }\n } else {\n return context\n }\n}\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAa,4CAAmD;CAC9D,mDAAiB;CACjB,WAAW;CACX,QAAQ;CACR,mBAAmB;CACnB,mDAAiB;CAClB,CAAC;AA+BF,MAAaA,qBAAiD,EAC5D,UACA,WAAW,iBACX,QAAQ,EACN,mBAAmB,SACnB,4BAA4B,SAC1B,EAAE,EACN,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaC,8CACT;CACJ,MAAM,0CAEFC,6CACE,SACA,YACA,kBACA,OACD,EACH;EAAC;EAAQ;EAAkB;EAAS;EAAW,CAChD;CACD,MAAM,cAAcC,6CAAgB;CACpC,MAAM,EAAE,gBAAgB;CACxB,MAAM,CAAC,mBAAmB,4CACM,eAAe,KAAK,CAAC;CACrD,MAAM,EAAE,oBAAoB,oBAAoBC,iDAAmB;EACjE,WAAW,sBAAoB;AAC7B,OAAI,sBAAsB,SAAU;AAEpC,gBAAaC,sBAAoB,OAAO;AACxC,cAAWA,kBAAgB;;EAE7B,kBAAkB,eAAe,QAC/B,qBAAqB,SAAS,SAAS,QACxC;EACF,CAAC;CACF,MAAM,YACJ,sBAAsB,WAAW,kBAAkB;CAErD,MAAM,qCACH,gBAAyB;EACxB,MAAM,MAAM,aAAa;AAEzB,MAAI,CAAC,IAAK;EAEV,MAAM,UAAU,4BACZC,4CAAqB,YAAY,GACjC;AAEJ,MAAI,gBAAgB,QAAQ,OAAOC;AACnC,MAAI,gBAAgB,MAAM,cAAcA;AAExC,aAAW;IAEb;EAAC;EAA2B;EAAa;EAAY,CACtD;CAED,MAAM,uCACH,WAAoB;EACnB,MAAM,MAAM,aAAa;AAEzB,MAAI,CAAC,IAAK;AAEV,MAAI,KAAK,UAAU,IAAI,SAAS,SAAS,QAAQ;AACjD,MAAI,KAAK,UAAU,OAAO,SAAS,UAAU,OAAO;IAEtD,CAAC,YAAY,CACd;CAED,MAAM,0CACH,wBAA2C;EAC1C,MAAMA,cACJC,wBAAsB,WAClB,oBAAoB,GACpBA;AAEN,uBAAqBA,oBAAkB;AACvC,eAAaD,gBAAc,OAAO;AAClC,aAAWA,YAAU;AAErB,iBAAe,IAAIC,oBAAkB;IAEvC;EAAC;EAAgB;EAAoB;EAAc;EAAW,CAC/D;CAED,MAAM,+CAAoC;AACxC,kBAAgB,cAAc,SAAS,UAAU,OAAO;IACvD,CAAC,iBAAiB,UAAU,CAAC;AAEhC,4BAAgB;AAGd,kBAF0B,eAAe,KAAK,CAEZ;IACjC,CAAC,iBAAiB,eAAe,CAAC;AAmBrC,QAAO,2CAAC;EAAiB,iCAhBhB;GACL,iBAAiB,oDAAkB,OAAO;GAC1C,WAAW,mBAAmB;GAC9B,QAAQ,oBAAoB;GAC5B;GACA,iBAAiB,oDAAkB,OAAO;GAC3C,GACD;GACE;GACA;GACA;GACA;GACA;GACD,CACF;EAEyC;GAA4B;;;;;;;AAQxE,MAAa,qBAAuC;CAClD,MAAM,yBAAc,iBAAiB;AAErC,0DAAkB,QAAQ,CACxB,QAAO;EACL,mDAAiB;EACjB,WAAW;EACX,QAAQ;EACR,mBAAmB;EACnB,mDAAiB;EAClB;KAED,QAAO"}

package/dist/cjs/core/system/styled.cjs CHANGED Viewed

@@ -93,7 +93,7 @@ function createStyled(el, { name, base, compounds, props, sizes, variants, defau
 			theme
 		]);
 		const serialized = (0, react.useMemo)(() => (0, _emotion_serialize.serializeStyles)(interpolations, cache.registered), [interpolations, cache.registered]);
-		className = (0, require_utils_index.utils_exports.cx)(className, !!serialized.styles ? `${cache.key}-${serialized.name}` : void 0);
+		className = (0, require_utils_index.utils_exports.cx)(className, serialized.styles ? `${cache.key}-${serialized.name}` : void 0);
 		className = (0, require_utils_index.utils_exports.cx)(className, options.target);
 		if (!className) className = void 0;
 		const mergedProps = {

package/dist/cjs/core/system/styled.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styled.cjs","names":["Insertion: FC<InsertionProps>","createContext","getDisplayName","createShouldForwardProp","props","className: string \| undefined","useSystem","useTheme","useComponentStyle","forwardProps","css","colorScheme","Slot"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n getRegisteredStyles,\n insertStyles,\n registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized, htmlTag),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number \| string \| symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) \| string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean \| ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string \| undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild \|\| options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n !!serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName \|\| \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAMA,aAAiC,EAAE,OAAO,SAAS,iBAAiB;AACxE,oCAAe,OAAO,YAAY,QAAQ;CAE1C,MAAM,0IACS,OAAO,YAAY,QAAQ,CACzC;AAED,KAAI,oDAAa,IAAI,oDAAa,MAAM,EAAE;EACxC,IAAI,YAAY,WAAW;EAC3B,IAAI,OAAO,WAAW;AAEtB,SAAO,SAAS,QAAW;AACzB,yDAAe,WAAW,KAAK,KAAK,IAAI;AACxC,UAAO,KAAK;;AAGd,SACE,2CAAC;GACC,0DAAiB,MAAM,KAAK,UAAU;GACtC,yBAAyB,EAAE,QAAQ,OAAO;GAC1C,OAAO,MAAM,MAAM;IACnB;OAGJ,QAAO;;AAIX,MAAM,iBACJ,OACA,sBACG;CACH,MAAM,6BAAkB,MAAM;AAE9B,KAAI,iCAAS,SAAS,SAAS,MAAM,CAAE,UAAS,UAAU;CAE1D,MAAM,gBAAgB,SAAS;AAE/B,oFAC0B,eAAe,kBAAkB,EACzD,CAAC,eAAe,kBAAkB,CACnC;;AAGH,MAAa,CAAC,oBAAoB,yBAChCC,8BAA2B;CACzB,MAAM;CACN,QAAQ;CACT,CAAC;AAkBJ,SAAgB,aAOd,IACA,EACE,MACA,MACA,WACA,OACA,OACA,UACA,cACA,eACA,GAAG,YACgC,EAAE,EACvC;CACA,MAAM,cAAc,QAAQ,eAAeC,6BAAe,MAAM,GAAG;CACnE,MAAM,oBAAoB,CAAC,QAAQ,oBAC/BC,sCAAwB,QAAQ,aAAa,GAC7C;CACJ,MAAM,+DAAwB;EAC5B;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,uDAAyC,SAC7C,EAAE,IAAI,YAAY,IAAI,SAAS,UAAU,GAAGC,WAC5C,OACA,KACA;EACA,IAAIC,YAAgC;EAEpC,MAAM,SAASC,mCAAW;EAC1B,MAAM,EAAE,UAAUC,iCAAsB;EACxC,MAAM,wBAAwB;GAC5B;GACA,WAAW,OAAO,MAAM,4DACd,QAAQ,WAAW,OAAO,uDAAgB,QAAQ,GAAG,CAC9D;GACD;GACA;GACD;EACD,MAAM,+BAA8B,EAAE,CAAC;EACvC,MAAM,0DAAmB,UAAU;EACnC,MAAM,iBACJ,QAAQ,kBAAkB,QAAQ,cAAc,SAAS,UAAU;EACrE,MAAM,CAAC,cAAc,cAAc,cAAcH,SAAO,kBAAkB;EAC1E,MAAM,GAAG,QAAQI,8CACf,cACA,sBACD;EACD,MAAM,CAAC,UAAU,aAAa,yCAA8B;GAC1D,MAAM,EAAE,YAAK,4BAAa,GAAGC,mBAAiB;AAE9C,UAAO;mDAASC,MAAI;IAAEC;IAAaF;IAAa;KAC/C,CAAC,KAAK,CAAC;AAEV,aAAW,gBAAgB;AAE3B,MAAI,aAAa,UACf,qDACE,MAAM,YACN,WAAW,SACX,aAAa,UACd,CAAC,MAAM;EAEV,MAAM,0CACE,CACJ,GAAG,WAAW,SACd,sDAAe,CAAC,GAAG,UAAU,WAAW,CAAC,IAAIC,gBAAI,QAAQ,MAAM,CAAC,CAAC,CAClE,EACD;GAAC;GAAU;GAAQ;GAAY;GAAM,CACtC;EAED,MAAM,8EACkB,gBAAgB,MAAM,WAAW,EACvD,CAAC,gBAAgB,MAAM,WAAW,CACnC;AAED,wDACE,WACA,~~CAAC,CAAC,~~WAAW,SAAS,GAAG,MAAM,IAAI,GAAG,WAAW,SAAS,~~OAC3D~~;AACD,wDAAe,WAAW,QAAQ,OAAO;AAEzC,MAAI,CAAC,UAAW,aAAY;EAE5B,MAAM,cAAc;GAAE,GAAG;GAAc;GAAW;GAAU;AAE5D,SACE,4CAAC;GAAmB,OAAO,WAAW;cACpC,2CAAC;IAAiB;IAAgB;IAAqB;KAAc,EAEpE,WAAW,CAAC,iBACX,2CAACE;IAAU;IAAK,GAAI;KAAe,GAEnC,2CAAC;IAAe;IAAK,GAAI;KAAe;IAEvB;GAEvB;AAEF,iBAAgB,cAAc,eAAe;AAE7C,QAAO"}
1	+ {"version":3,"file":"styled.cjs","names":["Insertion: FC<InsertionProps>","createContext","getDisplayName","createShouldForwardProp","props","className: string \| undefined","useSystem","useTheme","useComponentStyle","forwardProps","css","colorScheme","Slot"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n getRegisteredStyles,\n insertStyles,\n registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized, htmlTag),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number \| string \| symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) \| string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean \| ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string \| undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild \|\| options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName \|\| \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}

package/dist/cjs/core/system/theme-provider.cjs CHANGED Viewed

@@ -32,7 +32,7 @@ const getPreventTransition = (environment) => {
 		});
 	};
 };
-const ThemeProvider = ({ children, config, cookie, storage = !!cookie ? "cookie" : "localStorage", storageKey = require_constant.THEME_SCHEME_STORAGE_KEY, theme = {} }) => {
+const ThemeProvider = ({ children, config, cookie, storage = cookie ? "cookie" : "localStorage", storageKey = require_constant.THEME_SCHEME_STORAGE_KEY, theme = {} }) => {
 	const { defaultThemeScheme = "base", disableTransitionOnChange } = config ?? {};
 	const storageManager = (0, react.useMemo)(() => require_storage_manager.createStorageManager(storage, storageKey, defaultThemeScheme, cookie), [
 		cookie,