npm - @yamada-ui/react - Versions diffs - 2.2.5-dev-20260721065212 → 2.2.5-dev-20260725054331 - Mend

@yamada-ui/react 2.2.5-dev-20260721065212 → 2.2.5-dev-20260725054331

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 (67) hide show

package/dist/cjs/components/color-swatch/color-swatch.cjs CHANGED Viewed

@@ -7,10 +7,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/color-swatch/color-swatch.tsx
 const checkersProps = {
 	bgImage: [
-		"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)",
-		"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
+		"linear(45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(-45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(45deg, transparent 75%, {checkers-fg} 75%)",
+		"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
 	].join(", "),
 	bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
 	bgSize: `8px 8px`

package/dist/cjs/components/color-swatch/color-swatch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear~~-gradient~~(45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear~~-gradient~~(-45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear~~-gradient~~(45deg, transparent 75%, {checkers-fg} 75%)\",\n \"linear~~-gradient~~(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n ].join(\", \"),\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n background: CSSProps[\"color\"],\n withShadow: boolean,\n): HTMLStyledProps[] => {\n const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n return layers\n}\n\nexport interface ColorSwatchProps\n extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n /*\n The color used for the swatch element.\n \n @default '#ffffff00'\n /\n color?: CSSProps[\"color\"]\n /\n The overlay used for the swatch element.\n /\n layers?: HTMLStyledProps[]\n /\n If `true`, the swatch element has an inner `box-shadow`.\n \n @default true\n /\n withShadow?: boolean\n}\n\nconst {\n PropsContext: ColorSwatchPropsContext,\n usePropsContext: useColorSwatchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n \"color-swatch\",\n colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/\n `ColorSwatch` is a component that displays color samples.\n \n @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n ({\n children,\n color = \"#ffffff00\",\n withShadow = true,\n layers = defaultLayers(color, withShadow),\n ...rest\n }) => {\n return (\n <styled.div\n aria-label={isString(color) ? color : undefined}\n aria-roledescription=\"color swatch\"\n role=\"img\"\n {...rest}\n >\n {children}\n {layers.map((props, index) => (\n <ColorSwatchOverlay key={index} {...props} />\n ))}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n \"div\",\n \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
1	+ {"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n ].join(\", \"),\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n background: CSSProps[\"color\"],\n withShadow: boolean,\n): HTMLStyledProps[] => {\n const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n return layers\n}\n\nexport interface ColorSwatchProps\n extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n /*\n The color used for the swatch element.\n \n @default '#ffffff00'\n /\n color?: CSSProps[\"color\"]\n /\n The overlay used for the swatch element.\n /\n layers?: HTMLStyledProps[]\n /\n If `true`, the swatch element has an inner `box-shadow`.\n \n @default true\n /\n withShadow?: boolean\n}\n\nconst {\n PropsContext: ColorSwatchPropsContext,\n usePropsContext: useColorSwatchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n \"color-swatch\",\n colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/\n `ColorSwatch` is a component that displays color samples.\n \n @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n ({\n children,\n color = \"#ffffff00\",\n withShadow = true,\n layers = defaultLayers(color, withShadow),\n ...rest\n }) => {\n return (\n <styled.div\n aria-label={isString(color) ? color : undefined}\n aria-roledescription=\"color swatch\"\n role=\"img\"\n {...rest}\n >\n {children}\n {layers.map((props, index) => (\n <ColorSwatchOverlay key={index} {...props} />\n ))}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n \"div\",\n \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n extends\n Omit<UseModalReturn, \"getRootProps\">,\n UsePopupAnimationProps,\n Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n extends\n Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" \| \"title\">,\n ThemeProps<ModalStyle>,\n Omit<UseModalProps, \"title\">,\n Pick<\n FocusLockProps,\n \| \"autoFocus\"\n \| \"finalFocusRef\"\n \| \"initialFocusRef\"\n \| \"lockFocusAcrossFrames\"\n \| \"restoreFocus\"\n >,\n UsePopupAnimationProps,\n ShorthandModalContentProps {\n /*\n Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n \n @default false.\n /\n allowPinchZoom?: boolean\n /\n If `true`, scrolling will be disabled on the `body` when the modal opens.\n \n @default true\n /\n blockScrollOnMount?: boolean\n /\n The modal trigger to use.\n /\n trigger?: ReactNode\n /\n If `true`, display the modal close button.\n \n @default true\n /\n withCloseButton?: boolean\n /\n If `true`, display the modal overlay.\n \n @default true\n /\n withOverlay?: boolean\n /\n Props to be forwarded to the portal component.\n /\n portalProps?: Omit<PortalProps, \"children\">\n /\n Callback function to run side effects after the modal has closed.\n /\n onCloseComplete?: () => void\n}\n\nconst {\n ComponentContext,\n PropsContext: ModalPropsContext,\n useComponentContext,\n usePropsContext: useModalPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n \"modal\",\n modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/\n `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n \n @see https://yamada-ui.com/docs/components/modal\n /\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n ({\n allowPinchZoom = false,\n animationScheme = \"scale\",\n autoFocus,\n blockScrollOnMount = true,\n body,\n cancel,\n children,\n duration,\n finalFocusRef,\n footer,\n header,\n initialFocusRef,\n lockFocusAcrossFrames = true,\n middle,\n restoreFocus,\n success,\n title,\n trigger,\n withCloseButton = true,\n withOverlay = true,\n portalProps,\n onCancel,\n onCloseComplete,\n onMiddle,\n onSuccess,\n ...props\n }) => {\n const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n children,\n ModalOpenTrigger,\n ModalOverlay,\n )\n const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n const { open, getRootProps, ...rest } = useModal(props)\n const customOpenTrigger = trigger ? (\n <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n ) : null\n const context = useMemo(\n () => ({\n animationScheme,\n duration,\n open,\n withCloseButton,\n ...rest,\n }),\n [animationScheme, duration, open, withCloseButton, rest],\n )\n\n return (\n <ComponentContext value={context}>\n {openTrigger ?? customOpenTrigger}\n\n <AnimatePresence onExitComplete={onCloseComplete}>\n {open ? (\n <Portal {...portalProps}>\n <FocusLock\n autoFocus={autoFocus}\n finalFocusRef={finalFocusRef}\n initialFocusRef={initialFocusRef}\n lockFocusAcrossFrames={lockFocusAcrossFrames}\n restoreFocus={restoreFocus}\n >\n <RemoveScroll\n allowPinchZoom={allowPinchZoom}\n enabled={blockScrollOnMount}\n forwardProps\n >\n <styled.div {...getRootProps()}>\n {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n {hasChildren ? (\n omittedChildren\n ) : (\n <ShorthandModalContent\n body={body}\n cancel={cancel}\n footer={footer}\n header={header}\n middle={middle}\n success={success}\n title={title}\n onCancel={onCancel}\n onMiddle={onMiddle}\n onSuccess={onSuccess}\n />\n )}\n </styled.div>\n </RemoveScroll>\n </FocusLock>\n </Portal>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n \"button\",\n { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n const { getOpenTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n \"button\",\n { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n const { getCloseTriggerProps } = useComponentContext()\n\n return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)(undefined, (props) => {\n const { getCloseButtonProps } = useComponentContext()\n\n return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n const {\n animationScheme,\n duration: durationProp,\n getOverlayProps,\n } = useComponentContext()\n const duration = useValue(durationProp)\n\n return (\n <motion.div\n custom={{ duration }}\n {...(animationScheme !== \"none\"\n ? {\n animate: \"enter\",\n exit: \"exit\",\n initial: \"exit\",\n variants: fadeVariants,\n }\n : {})}\n {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n />\n )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n ({ children, ...rest }) => {\n const { animationScheme, duration, withCloseButton, getContentProps } =\n useComponentContext()\n const [omittedChildren, customCloseButton] = useSplitChildren(\n children,\n ModalCloseButton,\n )\n const popupAnimationProps = usePopupAnimationProps({\n animationScheme,\n duration,\n })\n\n return (\n <motion.section\n {...popupAnimationProps}\n {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n getContentProps(cast<HTMLProps<\"section\">>(rest)),\n )}\n >\n {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n {omittedChildren}\n </motion.section>\n )\n },\n \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n /\n The modal body to use.\n /\n body?: ModalBodyProps \| ReactNode\n /\n The modal cancel button to use.\n /\n cancel?: ButtonProps \| ReactNode\n /\n The modal footer to use.\n /\n footer?: ModalFooterProps \| ReactNode\n /\n The modal header to use.\n /\n header?: ModalHeaderProps \| ReactNode\n /\n The modal middle button to use.\n /\n middle?: ButtonProps \| ReactNode\n /\n The modal success button to use.\n /\n success?: ButtonProps \| ReactNode\n /\n The modal title to use.\n /\n title?: ModalTitleProps \| ReactNode\n /\n The callback invoked when cancel button clicked.\n /\n onCancel?: (onClose: () => void) => void\n /\n The callback invoked when middle button clicked.\n /\n onMiddle?: (onClose: () => void) => void\n /\n The callback invoked when success button clicked.\n */\n onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n body,\n cancel,\n footer,\n header,\n middle,\n success,\n title,\n onCancel,\n onMiddle,\n onSuccess,\n}) => {\n const { onClose } = useComponentContext()\n const customHeader = wrapOrPassProps(ModalHeader, header)\n const customTitle = wrapOrPassProps(ModalTitle, title)\n const customBody = wrapOrPassProps(ModalBody, body)\n const customFooter = wrapOrPassProps(ModalFooter, footer)\n const customCancel = wrapOrPassProps(Button, cancel, {\n colorScheme: \"mono\",\n variant: \"ghost\",\n onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n })\n const customMiddle = wrapOrPassProps(Button, middle, {\n colorScheme: \"secondary\",\n onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n })\n const customSuccess = wrapOrPassProps(Button, success, {\n colorScheme: \"primary\",\n onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n })\n\n return (\n <ModalContent>\n {customHeader ??\n (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n {customBody}\n {customFooter ??\n (customCancel \|\| customMiddle \|\| customSuccess ? (\n <ModalFooter>\n {customCancel}\n {customMiddle}\n {customSuccess}\n </ModalFooter>\n ) : null)}\n </ModalContent>\n )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n \"header\",\n \"header\",\n)(undefined, (props) => {\n const { getHeaderProps } = useComponentContext()\n\n return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useComponentContext()\n\n return { ...getTitleProps(props) }\n },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n undefined,\n (props) => {\n const { getBodyProps } = useComponentContext()\n\n return { ...getBodyProps(props) }\n },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n \"footer\",\n \"footer\",\n)(undefined, (props) => {\n const { getFooterProps } = useComponentContext()\n\n return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/cjs/components/progress/progress.style.cjs CHANGED Viewed

@@ -58,7 +58,7 @@ const progressStyle = require("../../core/system/config.cjs").defineComponentSlo
 			"--stripe-angle": "45deg",
 			"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
 			"--stripe-size": "1rem",
-			bgImage: `linear-gradient(
+			bgImage: `linear(
             {stripe-angle},
             {stripe-color} 25%,
             transparent 25%,

package/dist/cjs/components/progress/progress.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n base: {\n range: {\n bgColor: \"{filledTrackColor}\",\n h: \"full\",\n rounded: \"inherit\",\n transitionDuration: \"slow\",\n transitionProperty: \"size\",\n w: \"{width}\",\n _indeterminate: {\n \"--animation-from-x\": \"-40%\",\n \"--animation-to-x\": \"100%\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"position\",\n animationTimingFunction: \"ease\",\n minW: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n },\n },\n root: {\n overflow: \"hidden\",\n position: \"relative\",\n w: \"full\",\n },\n },\n\n props: {\n /*\n If `true`, the progress bar will animate.\n \n @default false\n /\n animated: {\n true: {\n range: {\n \"--animation-from\": \"{stripe-size}\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"linear\",\n },\n },\n },\n /\n The shape of the progress bar.\n \n @default 'rounded'\n /\n shape: {\n circle: {\n root: { rounded: \"full\" },\n },\n rounded: {\n root: { rounded: \"l1\" },\n },\n square: {\n root: { rounded: \"0\" },\n },\n },\n /\n If `true`, the progress bar will show stripe.\n \n @default false\n */\n striped: {\n true: {\n range: {\n \"--stripe-angle\": \"45deg\",\n \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n \"--stripe-size\": \"1rem\",\n bgImage: `linear~~-gradient~~(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )`,\n bgSize: \"{stripe-size} {stripe-size}\",\n },\n },\n },\n },\n\n variants: {\n outline: {\n range: {\n bg: \"colorScheme.solid\",\n },\n root: {\n bg: \"bg.subtle\",\n },\n },\n subtle: {\n range: {\n bg: \"colorScheme.solid/80\",\n },\n root: {\n bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n },\n },\n },\n\n sizes: {\n xs: {\n root: { h: \"1\" },\n },\n sm: {\n root: { h: \"2\" },\n },\n md: {\n root: { h: \"3\" },\n },\n lg: {\n root: { h: \"4\" },\n },\n xl: {\n root: { h: \"5\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"outline\",\n shape: \"rounded\",\n striped: false,\n },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
1	+ {"version":3,"file":"progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n base: {\n range: {\n bgColor: \"{filledTrackColor}\",\n h: \"full\",\n rounded: \"inherit\",\n transitionDuration: \"slow\",\n transitionProperty: \"size\",\n w: \"{width}\",\n _indeterminate: {\n \"--animation-from-x\": \"-40%\",\n \"--animation-to-x\": \"100%\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"position\",\n animationTimingFunction: \"ease\",\n minW: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n },\n },\n root: {\n overflow: \"hidden\",\n position: \"relative\",\n w: \"full\",\n },\n },\n\n props: {\n /*\n If `true`, the progress bar will animate.\n \n @default false\n /\n animated: {\n true: {\n range: {\n \"--animation-from\": \"{stripe-size}\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"linear\",\n },\n },\n },\n /\n The shape of the progress bar.\n \n @default 'rounded'\n /\n shape: {\n circle: {\n root: { rounded: \"full\" },\n },\n rounded: {\n root: { rounded: \"l1\" },\n },\n square: {\n root: { rounded: \"0\" },\n },\n },\n /\n If `true`, the progress bar will show stripe.\n \n @default false\n */\n striped: {\n true: {\n range: {\n \"--stripe-angle\": \"45deg\",\n \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n \"--stripe-size\": \"1rem\",\n bgImage: `linear(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )`,\n bgSize: \"{stripe-size} {stripe-size}\",\n },\n },\n },\n },\n\n variants: {\n outline: {\n range: {\n bg: \"colorScheme.solid\",\n },\n root: {\n bg: \"bg.subtle\",\n },\n },\n subtle: {\n range: {\n bg: \"colorScheme.solid/80\",\n },\n root: {\n bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n },\n },\n },\n\n sizes: {\n xs: {\n root: { h: \"1\" },\n },\n sm: {\n root: { h: \"2\" },\n },\n md: {\n root: { h: \"3\" },\n },\n lg: {\n root: { h: \"4\" },\n },\n xl: {\n root: { h: \"5\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"outline\",\n shape: \"rounded\",\n striped: false,\n },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}

package/dist/cjs/components/skeleton/skeleton.style.cjs CHANGED Viewed

@@ -49,7 +49,7 @@ loading: {
 			animationIterationCount: "infinite",
 			animationName: "bg-position",
 			animationTimingFunction: "ease-in-out",
-			bgImage: "linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
+			bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
 			bgSize: "400% 100%"
 		}
 	},

package/dist/cjs/components/skeleton/skeleton.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n base: {},\n\n props: {\n /*\n If `false`, it'll render its children with a nice fade transition.\n \n @default true\n /\n loading: {\n false: {\n animationDuration: \"{fade-duration, 0.1s}\",\n animationIterationCount: \"1\",\n animationName: \"fade-in\",\n animationTimingFunction: \"ease-out\",\n bg: \"unset\",\n },\n true: {\n \"&::before, &::after, \": {\n visibility: \"hidden\",\n },\n \"--height\": \"sizes.6\",\n \"--width\": \"sizes.full\",\n bgClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n flexShrink: \"0\",\n h: \"{height}\",\n maxW: \"full\",\n pointerEvents: \"none\",\n rounded: \"l1\",\n userSelect: \"none\",\n w: \"{width}\",\n },\n },\n },\n\n variants: {\n none: {\n animation: \"none\",\n },\n pulse: {\n animationDuration: \"{duration, 1.2s}\",\n animationIterationCount: \"infinite\",\n animationName: \"pulse\",\n bg: \"bg.muted\",\n },\n shine: {\n \"--animation-from\": \"200%\",\n \"--animation-to\": \"-200%\",\n \"--end-color\": \"colors.bg.muted\",\n \"--start-color\": \"colors.bg.subtle\",\n animationDuration: \"{duration, 5s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"ease-in-out\",\n bgImage:\n \"linear~~-gradient~~(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n bgSize: \"400% 100%\",\n },\n },\n\n defaultProps: {\n variant: \"pulse\",\n loading: true,\n },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
1	+ {"version":3,"file":"skeleton.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n base: {},\n\n props: {\n /*\n If `false`, it'll render its children with a nice fade transition.\n \n @default true\n /\n loading: {\n false: {\n animationDuration: \"{fade-duration, 0.1s}\",\n animationIterationCount: \"1\",\n animationName: \"fade-in\",\n animationTimingFunction: \"ease-out\",\n bg: \"unset\",\n },\n true: {\n \"&::before, &::after, \": {\n visibility: \"hidden\",\n },\n \"--height\": \"sizes.6\",\n \"--width\": \"sizes.full\",\n bgClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n flexShrink: \"0\",\n h: \"{height}\",\n maxW: \"full\",\n pointerEvents: \"none\",\n rounded: \"l1\",\n userSelect: \"none\",\n w: \"{width}\",\n },\n },\n },\n\n variants: {\n none: {\n animation: \"none\",\n },\n pulse: {\n animationDuration: \"{duration, 1.2s}\",\n animationIterationCount: \"infinite\",\n animationName: \"pulse\",\n bg: \"bg.muted\",\n },\n shine: {\n \"--animation-from\": \"200%\",\n \"--animation-to\": \"-200%\",\n \"--end-color\": \"colors.bg.muted\",\n \"--start-color\": \"colors.bg.subtle\",\n animationDuration: \"{duration, 5s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"ease-in-out\",\n bgImage:\n \"linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n bgSize: \"400% 100%\",\n },\n },\n\n defaultProps: {\n variant: \"pulse\",\n loading: true,\n },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}

package/dist/cjs/core/css/gradient.cjs CHANGED Viewed

@@ -15,25 +15,27 @@ const directionValues = new Set(Object.values(directions));
 function gradient(value, { system }) {
 	if (value == null || require_utils.globalValues.has(value)) return value;
 	if (!require_utils.isCSSFunction(value)) return `url('${value}')`;
-	let { type, values } = require_utils.getCSSFunction(value);
-	if (!type || !values) return value;
-	type = type.includes("-gradient") ? type : `${type}-gradient`;
-	const [maybeDirection, ...colors] = require_utils.splitValues(values);
-	if (!colors.length) return value;
-	const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
-	if (!(0, require_utils_index.utils_exports.isUndefined)(direction)) colors.unshift(direction);
-	const computedValues = colors.map((_color) => {
-		if ((0, require_utils_index.utils_exports.isUndefined)(_color)) return _color;
-		if (directionValues.has(_color)) return _color;
-		const i = _color.indexOf(" ");
-		let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
-		const ratio = require_utils.isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
-		const token = `colors.${color}`;
-		color = require_utils.isCSSToken(system)(token) ? system.cssMap[token].ref : color;
-		if (ratio) return [color, ...(0, require_utils_index.utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
-		else return color;
-	});
-	return `${type}(${computedValues.join(", ")})`;
+	return require_utils.splitValues(value).map((value) => {
+		let { type, values } = require_utils.getCSSFunction(value);
+		if (!type || !values) return value;
+		type = type.includes("-gradient") ? type : `${type}-gradient`;
+		const [maybeDirection, ...colors] = require_utils.splitValues(values);
+		if (!colors.length) return value;
+		const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
+		if (!(0, require_utils_index.utils_exports.isUndefined)(direction)) colors.unshift(direction);
+		const computedValues = colors.map((_color) => {
+			if ((0, require_utils_index.utils_exports.isUndefined)(_color)) return _color;
+			if (directionValues.has(_color)) return _color;
+			const i = _color.indexOf(" ");
+			let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
+			const ratio = require_utils.isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
+			const token = `colors.${color}`;
+			color = require_utils.isCSSToken(system)(token) ? system.cssMap[token].ref : color;
+			if (ratio) return [color, ...(0, require_utils_index.utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
+			else return color;
+		});
+		return `${type}(${computedValues.join(", ")})`;
+	}).join(", ");
 }
 //#endregion
 exports.gradient = gradient;

package/dist/cjs/core/css/gradient.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gradient.cjs","names":["globalValues","isCSSFunction","~~getCSSFunction~~","~~splitValues~~","isCSSToken"],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n getCSSFunction,\n globalValues,\n isCSSFunction,\n isCSSToken,\n splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n \"to-b\": \"to bottom\",\n \"to-bl\": \"to bottom left\",\n \"to-br\": \"to bottom right\",\n \"to-l\": \"to left\",\n \"to-r\": \"to right\",\n \"to-t\": \"to top\",\n \"to-tl\": \"to top left\",\n \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n if (value == null \|\| globalValues.has(value)) return value\n\n const prevent = isCSSFunction(value)\n\n if (!prevent) return `url('${value}')`\n\n let { type, values } = getCSSFunction(value)\n\n if (!type \|\| !values) return value\n\n type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n const [maybeDirection, ...colors] = splitValues(values)\n\n if (!colors.length) return value\n\n const direction =\n maybeDirection && maybeDirection in directions\n ? directions[maybeDirection]\n : maybeDirection\n\n if (!isUndefined(direction)) colors.unshift(direction)\n\n const computedValues = colors.map((_color) => {\n if (isUndefined(_color)) return _color\n\n if (directionValues.has(_color)) return _color\n\n const i = _color.indexOf(\" \")\n\n let [color, _ratio] =\n i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n const token = `colors.${color}`\n\n color = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n if (ratio) return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n else return color\n })\n\n return `${type}(${computedValues.join(\", \")})`\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQA,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFYC,cAAAA,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,IAAI,EAAE,MAAM,WAAWC,cAAAA,eAAe,KAAK;~~CAE3C~~,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;~~CAE7B~~,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;~~CAEnD~~,MAAM,CAAC,gBAAgB,GAAG,~~UAAUC~~,cAAAA,YAAY,MAAM;~~CAEtD~~,IAAI,CAAC,OAAO,QAAQ,OAAO;~~CAE3B~~,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;~~CAEN~~,IAAI,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;~~CAErD~~,MAAM,iBAAiB,OAAO,KAAK,WAAW;~~EAC5C~~,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;~~EAEhC~~,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;~~EAExC~~,MAAM,IAAI,OAAO,QAAQ,GAAG;~~EAE5B~~,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;~~EAEhE~~,MAAM,~~QAAQF~~,cAAAA,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;~~EAEhE~~,MAAM,QAAQ,UAAU;~~EAExB~~,QAAQG,cAAAA,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;~~EAEhE~~,IAAI,~~OAAO~~,OAAO,CAAC,OAAO,IAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;~~OACpE~~,OAAO;~~CACd~~,CAAC;~~CAED~~,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;~~AAC9C~~"}
1	+ {"version":3,"file":"gradient.cjs","names":["globalValues","isCSSFunction","splitValues","getCSSFunction","isCSSToken"],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n getCSSFunction,\n globalValues,\n isCSSFunction,\n isCSSToken,\n splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n \"to-b\": \"to bottom\",\n \"to-bl\": \"to bottom left\",\n \"to-br\": \"to bottom right\",\n \"to-l\": \"to left\",\n \"to-r\": \"to right\",\n \"to-t\": \"to top\",\n \"to-tl\": \"to top left\",\n \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n if (value == null \|\| globalValues.has(value)) return value\n\n const prevent = isCSSFunction(value)\n\n if (!prevent) return `url('${value}')`\n\n return splitValues(value)\n .map((value) => {\n let { type, values } = getCSSFunction(value)\n\n if (!type \|\| !values) return value\n\n type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n const [maybeDirection, ...colors] = splitValues(values)\n\n if (!colors.length) return value\n\n const direction =\n maybeDirection && maybeDirection in directions\n ? directions[maybeDirection]\n : maybeDirection\n\n if (!isUndefined(direction)) colors.unshift(direction)\n\n const computedValues = colors.map((_color) => {\n if (isUndefined(_color)) return _color\n\n if (directionValues.has(_color)) return _color\n\n const i = _color.indexOf(\" \")\n\n let [color, _ratio] =\n i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n const token = `colors.${color}`\n\n color = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n if (ratio)\n return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n else return color\n })\n\n return `${type}(${computedValues.join(\", \")})`\n })\n .join(\", \")\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQA,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFYC,cAAAA,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,OAAOC,cAAAA,YAAY,KAAK,CAAC,CACtB,KAAK,UAAU;EACd,IAAI,EAAE,MAAM,WAAWC,cAAAA,eAAe,KAAK;EAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;EAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAUD,cAAAA,YAAY,MAAM;EAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;EAEN,IAAI,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;EAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;GAC5C,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;GAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;GAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;GAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;GAEhE,MAAM,QAAQD,cAAAA,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;GAEhE,MAAM,QAAQ,UAAU;GAExB,QAAQG,cAAAA,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;GAEhE,IAAI,OACF,OAAO,CAAC,OAAO,IAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;QAC3D,OAAO;EACd,CAAC;EAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AACd"}

package/dist/cjs/core/css/utils.cjs CHANGED Viewed

@@ -82,7 +82,7 @@ function tokenToVar(system) {
 }
 function varToValue(system) {
 	return function(variable) {
-		const value = system.cssVars[variable];
+		const value = system.cssVars.light[variable];
 		if (isCSSVar(value)) return varToValue(system)(value.replace(/^var\(/, "").replace(/\)$/, ""));
 		else return value;
 	};

package/dist/cjs/core/css/utils.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.cjs","names":["isColorScheme","getColorSchemeVar"],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n system: System\n css?: CSSFunction\n fallback?: any\n prev?: Dict\n properties?: CSSProperties[]\n theme?: UsageTheme\n}\n\nexport interface Transform {\n (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n \"inherit\",\n \"initial\",\n \"none\",\n \"revert\",\n \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n const regex = /(^[a-z-A-Z]+)\$(.)\$/g\n const [, type, values] = regex.exec(value) ?? []\n\n return { type, values }\n}\n\nexport function splitValues(\n values: string,\n cb: (\n current: string,\n prev: string \| undefined,\n next: string \| undefined,\n ) => boolean = (current) => current === \",\",\n addSeparator = false,\n) {\n const result = []\n\n let value = \"\"\n let depth = 0\n\n for (let i = 0; i < values.length; i++) {\n const current = values[i]\n const prev = values[i - 1]\n const next = values[i + 1]\n\n if (current === \"(\") depth++\n if (current === \")\") depth--\n\n if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n if (value) result.push(value.trim())\n\n if (addSeparator) result.push(current)\n\n value = \"\"\n } else {\n value += current\n }\n }\n\n if (value) result.push(value.trim())\n\n return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n return /^var\$--.+\$$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n return function (value: any) {\n return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n }\n}\n\nexport function isImportant(value: any): boolean {\n return (\n isString(value) && (/\\s!important$/.test(value) \|\| /\\s*!$/.test(value))\n )\n}\n\nexport function omitImportant(value: any): string {\n return isString(value) ? value.replace(/(!important\|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n if (isString(value)) return value + \" !important\"\n else if (isObject(value))\n if (style?.important) {\n return Object.fromEntries(\n Object.entries(value).map(([key, value]) => [\n key,\n value + \" !important\",\n ]),\n )\n } else {\n if (!style?.properties) return value\n\n for (const property of style.properties) value[property] += \" !important\"\n }\n\n return value\n}\n\nexport function analyzeCSSValue(value: any) {\n let n = parseFloat(value.toString())\n const unit = value.toString().replace(String(n), \"\")\n\n return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n return function (token: ThemeToken, value: any, fallbackValue?: any) {\n if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n const resolvedToken = `${token}.${value}`\n\n if (isCSSToken(system)(resolvedToken))\n return system.cssMap[resolvedToken]!.ref\n else return fallbackValue \|\| value\n }\n}\n\nexport function varToValue(system: System) {\n return function (variable: string): string {\n const value = system.cssVars[variable]\n\n if (isCSSVar(value))\n return varToValue(system)(value.replace(/^var\$/, \"\").replace(/\$$/, \"\"))\n else return value\n }\n}\n\nexport function tokenToValue(system: System) {\n return function (token: ThemeToken, value: any, fallbackValue?: any) {\n const resolvedToken = `${token}.${value}`\n\n if (isCSSToken(system)(resolvedToken)) {\n const variable = system.cssMap[resolvedToken]!.var\n\n return varToValue(system)(variable)\n } else {\n return fallbackValue \|\| value\n }\n }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n return function (colorMode: ColorMode \| undefined = \"light\"): D \| L {\n return colorMode === \"light\" ? light : dark\n }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n return function (value, ...args) {\n return b(a(value, ...args), ...args)\n }\n}\n\nexport function pipe(...transformers: Transform[]) {\n return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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~~EAE7B~~,IAAI,SAAS,KAAK,GAChB,OAAO,WAAW,MAAM,CAAC,CAAC,MAAM,QAAQ,UAAU,EAAE,CAAC,CAAC,QAAQ,OAAO,EAAE,CAAC;OACrE,OAAO;CACd;AACF;AAEA,SAAgB,aAAa,QAAgB;CAC3C,OAAO,SAAU,OAAmB,OAAY,eAAqB;EACnE,MAAM,gBAAgB,GAAG,MAAM,GAAG;EAElC,IAAI,WAAW,MAAM,CAAC,CAAC,aAAa,GAAG;GACrC,MAAM,WAAW,OAAO,OAAO,cAAc,CAAE;GAE/C,OAAO,WAAW,MAAM,CAAC,CAAC,QAAQ;EACpC,OACE,OAAO,iBAAiB;CAE5B;AACF;AAQA,SAAS,iBAAiB,GAAc,GAAyB;CAC/D,OAAO,SAAU,OAAO,GAAG,MAAM;EAC/B,OAAO,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,GAAG,IAAI;CACrC;AACF;AAEA,SAAgB,KAAK,GAAG,cAA2B;CACjD,OAAO,aAAa,OAAO,gBAAgB;AAC7C"}
1	+ {"version":3,"file":"utils.cjs","names":["isColorScheme","getColorSchemeVar"],"sources":["../../../../src/core/css/utils.ts"],"sourcesContent":["import type { Dict } from \"../../utils\"\nimport type { ColorMode, System, ThemeToken, UsageTheme } from \"../system\"\nimport type { StyleConfig } from \"./config\"\nimport type { CSSFunction, CSSProperties } from \"./index.types\"\nimport { isObject, isString, isUndefined } from \"../../utils\"\nimport { getColorSchemeVar, isColorScheme } from \"../system\"\n\nexport interface TransformOptions {\n system: System\n css?: CSSFunction\n fallback?: any\n prev?: Dict\n properties?: CSSProperties[]\n theme?: UsageTheme\n}\n\nexport interface Transform {\n (value: any, options: TransformOptions): any\n}\n\nexport const globalValues = new Set([\n \"inherit\",\n \"initial\",\n \"none\",\n \"revert\",\n \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n const regex = /(^[a-z-A-Z]+)\$(.)\$/g\n const [, type, values] = regex.exec(value) ?? []\n\n return { type, values }\n}\n\nexport function splitValues(\n values: string,\n cb: (\n current: string,\n prev: string \| undefined,\n next: string \| undefined,\n ) => boolean = (current) => current === \",\",\n addSeparator = false,\n) {\n const result = []\n\n let value = \"\"\n let depth = 0\n\n for (let i = 0; i < values.length; i++) {\n const current = values[i]\n const prev = values[i - 1]\n const next = values[i + 1]\n\n if (current === \"(\") depth++\n if (current === \")\") depth--\n\n if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n if (value) result.push(value.trim())\n\n if (addSeparator) result.push(current)\n\n value = \"\"\n } else {\n value += current\n }\n }\n\n if (value) result.push(value.trim())\n\n return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n return /^var\$--.+\$$/.test(value)\n}\n\nexport function isInterpolation(value: string) {\n return /\\{.+\\}/.test(value)\n}\n\nexport function isCSSToken({ cssMap }: System) {\n return function (value: any) {\n return isObject(cssMap) && value in cssMap && !!cssMap[value]?.ref\n }\n}\n\nexport function isImportant(value: any): boolean {\n return (\n isString(value) && (/\\s!important$/.test(value) \|\| /\\s*!$/.test(value))\n )\n}\n\nexport function omitImportant(value: any): string {\n return isString(value) ? value.replace(/(!important\|!)$/, \"\").trim() : value\n}\n\nexport function insertImportant(value: any, style?: StyleConfig): any {\n if (isString(value)) return value + \" !important\"\n else if (isObject(value))\n if (style?.important) {\n return Object.fromEntries(\n Object.entries(value).map(([key, value]) => [\n key,\n value + \" !important\",\n ]),\n )\n } else {\n if (!style?.properties) return value\n\n for (const property of style.properties) value[property] += \" !important\"\n }\n\n return value\n}\n\nexport function analyzeCSSValue(value: any) {\n let n = parseFloat(value.toString())\n const unit = value.toString().replace(String(n), \"\")\n\n return { unit, unitless: !unit, value }\n}\n\nexport function tokenToVar(system: System) {\n return function (token: ThemeToken, value: any, fallbackValue?: any) {\n if (isColorScheme(value)) return getColorSchemeVar(system)(value)\n\n const resolvedToken = `${token}.${value}`\n\n if (isCSSToken(system)(resolvedToken))\n return system.cssMap[resolvedToken]!.ref\n else return fallbackValue \|\| value\n }\n}\n\nexport function varToValue(system: System) {\n return function (variable: string): string {\n const value = system.cssVars.light[variable]\n\n if (isCSSVar(value))\n return varToValue(system)(value.replace(/^var\$/, \"\").replace(/\$$/, \"\"))\n else return value\n }\n}\n\nexport function tokenToValue(system: System) {\n return function (token: ThemeToken, value: any, fallbackValue?: any) {\n const resolvedToken = `${token}.${value}`\n\n if (isCSSToken(system)(resolvedToken)) {\n const variable = system.cssMap[resolvedToken]!.var\n\n return varToValue(system)(variable)\n } else {\n return fallbackValue \|\| value\n }\n }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n return function (colorMode: ColorMode \| undefined = \"light\"): D \| L {\n return colorMode === \"light\" ? light : dark\n }\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n return function (value, ...args) {\n return b(a(value, ...args), ...args)\n }\n}\n\nexport function pipe(...transformers: Transform[]) {\n return transformers.reduce(combineFunctions)\n}\n"],"mappings":"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"}

package/dist/cjs/core/index.cjs CHANGED Viewed

@@ -70,6 +70,7 @@ exports.createSlotComponent = require_create_component.createSlotComponent;
 exports.createStorageManager = require_storage_manager.createStorageManager;
 exports.createStyled = require_styled.createStyled;
 exports.createSystem = require_create_system.createSystem;
+exports.createVarRules = require_var.createVarRules;
 exports.createVars = require_var.createVars;
 exports.css = require_css.css;
 exports.cssProps = require_props.cssProps;

package/dist/cjs/core/system/create-system.cjs CHANGED Viewed

@@ -33,7 +33,10 @@ const defaultSystem = {
 	breakpoints: require_breakpoint.createBreakpoints(),
 	config: {},
 	cssMap: {},
-	cssVars: {},
+	cssVars: {
+		light: {},
+		dark: {}
+	},
 	layers: require_layer.createLayers(),
 	utils: { getClassName: require_utils_index.utils_exports.bem }
 };
@@ -57,7 +60,6 @@ function createSystem(theme, config = {}, rootNode) {
 	if (theme.themeSchemes) {
 		const themeSchemeEntries = Object.entries(theme.themeSchemes);
 		for (const [themeScheme, nestedTheme] of themeSchemeEntries) {
-			const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`;
 			const nestedPrimaryTokens = {
 				...createTokens(nestedTheme, "primary", shouldProcess),
 				...createColorSchemeTokens(theme, nestedTheme, shouldProcess)
@@ -69,7 +71,8 @@ function createSystem(theme, config = {}, rootNode) {
 				...secondaryTokens,
 				...tertiaryTokens
 			});
-			cssVars[themeCondition] = nestedCSSVars;
+			cssVars.themes ??= {};
+			cssVars.themes[themeScheme] = nestedCSSVars;
 		}
 	}
 	return {

package/dist/cjs/core/system/create-system.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-system.cjs","names":["createBreakpoints","createLayers","mergeVars","createVars"],"sources":["../../../../src/core/system/create-system.ts"],"sourcesContent":["import type { Dict, FlattenObjectOptions } from \"../../utils\"\nimport type { CSSAnimationObject, CSSModifierObject } from \"../css\"\nimport type {\n DefineThemeValue,\n System,\n ThemeConfig,\n UsageTheme,\n} from \"./index.types\"\nimport { bem, flattenObject, isArray, isObject, isUndefined } from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport { createBreakpoints } from \"./breakpoint\"\nimport { createLayers } from \"./layer\"\nimport { createVars, mergeVars } from \"./var\"\n\nexport type VariableResponsiveValue = Dict<\n [DefineThemeValue, DefineThemeValue] \| DefineThemeValue\n>\n\nexport type VariableColorModeValue = [\n DefineThemeValue \| Dict<DefineThemeValue>,\n DefineThemeValue \| Dict<DefineThemeValue>,\n]\n\nexport type VariableKeyframeValue =\n \| [\n CSSModifierObject \| Dict<CSSModifierObject>,\n CSSModifierObject \| Dict<CSSModifierObject>,\n ]\n \| CSSModifierObject\n \| Dict<CSSModifierObject>\n\nexport type VariableAnimationValue =\n \| CSSAnimationObject\n \| CSSAnimationObject[]\n \| Dict<CSSAnimationObject>\n\nexport type VariableValue =\n \| DefineThemeValue\n \| VariableAnimationValue\n \| VariableColorModeValue\n \| VariableKeyframeValue\n \| VariableResponsiveValue\n\ninterface VariableToken {\n semantic: boolean\n value: VariableValue\n}\n\nexport interface VariableTokens {\n [key: string]: VariableToken\n}\n\ninterface TokenOptions {\n [key: string]: FlattenObjectOptions\n}\n\nconst primaryTokens = {\n aspectRatios: {},\n blurs: {},\n borders: {},\n colors: {},\n durations: {},\n easings: {},\n fonts: {},\n fontSizes: {},\n fontWeights: {},\n letterSpacings: {},\n lineHeights: {},\n radii: {},\n sizes: {},\n spaces: {},\n zIndices: {},\n} satisfies TokenOptions\n\ntype PrimaryToken = keyof typeof primaryTokens\n\nconst secondaryTokens = {\n gradients: {},\n keyframes: { maxDepth: 1 },\n shadows: {},\n} satisfies TokenOptions\n\ntype SecondaryToken = keyof typeof secondaryTokens\n\nconst tertiaryTokens = {\n animations: { shouldProcess: (obj) => !obj.keyframes },\n} satisfies TokenOptions\n\ntype TertiaryToken = keyof typeof tertiaryTokens\n\nconst tokenMap: {\n [key in \"primary\" \| \"secondary\" \| \"tertiary\"]: TokenOptions\n} = {\n primary: primaryTokens,\n secondary: secondaryTokens,\n tertiary: tertiaryTokens,\n}\n\nexport type ThemeToken =\n \| \"breakpoints\"\n \| PrimaryToken\n \| SecondaryToken\n \| TertiaryToken\n\nexport const defaultSystem: System = {\n breakpoints: createBreakpoints(),\n config: {},\n cssMap: {},\n cssVars: {},\n layers: createLayers(),\n utils: { getClassName: bem },\n}\n\nexport function createSystem(\n theme: UsageTheme,\n config: ThemeConfig = {},\n rootNode?: Document \| Node \| ShadowRoot,\n): System {\n const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint)\n const layers = createLayers(config.css?.layers)\n const shouldProcess = config.theme?.responsive\n ? (obj: any) => !breakpoints.isResponsive(obj, true)\n : () => true\n\n const primaryTokens = {\n ...createTokens(theme, \"primary\", shouldProcess),\n ...createColorSchemeTokens(theme, undefined, shouldProcess),\n }\n const secondaryTokens = createTokens(theme, \"secondary\", shouldProcess)\n const tertiaryTokens = createTokens(theme, \"tertiary\", shouldProcess)\n\n const { cssMap, cssVars } = mergeVars(\n createVars(prefix, theme, breakpoints, rootNode)(primaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(secondaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(tertiaryTokens),\n )()\n\n const getClassName = (\n block?: string,\n element?: string,\n modifier?: string,\n ) => {\n if (!block) return \"\"\n\n const className = bem(block, element, modifier)\n\n return `${prefix}-${className}`\n }\n\n if (theme.themeSchemes) {\n const themeSchemeEntries = Object.entries<Dict>(theme.themeSchemes)\n\n for (const [themeScheme, nestedTheme] of themeSchemeEntries) {\n const themeCondition = `[data-theme=${themeScheme}] &:not([data-theme]), &[data-theme=${themeScheme}]`\n\n const nestedPrimaryTokens = {\n ...createTokens(nestedTheme, \"primary\", shouldProcess),\n ...createColorSchemeTokens(theme, nestedTheme, shouldProcess),\n }\n const nestedSecondaryTokens = createTokens(\n nestedTheme,\n \"secondary\",\n shouldProcess,\n )\n const nestedTertiaryTokens = createTokens(\n nestedTheme,\n \"tertiary\",\n shouldProcess,\n )\n\n const { cssVars: nestedCSSVars } = mergeVars(\n createVars(prefix, theme, breakpoints, rootNode)(nestedPrimaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(nestedSecondaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(nestedTertiaryTokens),\n )({ ...primaryTokens, ...secondaryTokens, ...tertiaryTokens })\n\n cssVars[themeCondition] = nestedCSSVars\n }\n }\n\n return {\n breakpoints,\n config,\n cssMap,\n cssVars,\n layers,\n rootNode,\n utils: { getClassName },\n }\n}\n\nfunction createColorSchemeTokens(\n theme: Dict,\n nestedTheme: Dict \| undefined,\n shouldProcess: FlattenObjectOptions[\"shouldProcess\"],\n) {\n const colors = { base: theme.colors ?? {}, nested: nestedTheme?.colors ?? {} }\n const semanticColors = {\n base: theme.semanticTokens?.colors ?? {},\n nested: nestedTheme?.semanticTokens?.colors ?? {},\n }\n const colorSchemeTokens = flattenObject(\n (nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {},\n { shouldProcess },\n )\n\n const results: VariableTokens = {}\n\n function insertToken(\n primaryKey: string,\n secondaryKey: string \| undefined,\n value: any,\n ) {\n if (isUndefined(value)) return\n\n if (!secondaryKey \|\| secondaryKey === \"base\")\n results[`colors.${primaryKey}`] = { semantic: true, value }\n else\n results[`colors.${primaryKey}.${secondaryKey}`] = {\n semantic: true,\n value,\n }\n }\n\n function processValue(primaryKey: string, colors: any, keyOrValue: any) {\n const value = colors.nested[keyOrValue] ?? colors.base[keyOrValue]\n\n if (isObject(value)) {\n const tokens = flattenObject(value, { shouldProcess })\n\n Object.keys(tokens).forEach((secondaryKey) => {\n const value =\n secondaryKey === \"base\" ? keyOrValue : `${keyOrValue}.${secondaryKey}`\n\n insertToken(primaryKey, secondaryKey, value)\n })\n } else {\n insertToken(primaryKey, undefined, keyOrValue)\n }\n }\n\n function processColorModeValue(\n primaryKey: string,\n colors: any,\n keyOrValue: any[],\n ) {\n const [lightValue, darkValue] = keyOrValue\n const lightColors = colors.nested[lightValue] ?? colors.base[lightValue]\n const darkColors = colors.nested[darkValue] ?? colors.base[darkValue]\n\n if (isObject(lightColors) && isObject(darkColors)) {\n const tokens = flattenObject(lightColors, { shouldProcess })\n\n Object.keys(tokens).forEach((secondaryKey) => {\n const value = [\n secondaryKey === \"base\"\n ? lightValue\n : `${lightValue}.${secondaryKey}`,\n secondaryKey === \"base\" ? darkValue : `${darkValue}.${secondaryKey}`,\n ]\n\n insertToken(primaryKey, secondaryKey, value)\n })\n } else if (!isObject(lightValue) && !isObject(darkValue)) {\n insertToken(primaryKey, undefined, [lightValue, darkValue])\n }\n }\n\n Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {\n if (isArray(value)) {\n processColorModeValue(primaryKey, colors, value)\n processColorModeValue(primaryKey, semanticColors, value)\n } else {\n processValue(primaryKey, colors, value)\n processValue(primaryKey, semanticColors, value)\n }\n })\n\n return results\n}\n\nfunction createTokens(\n theme: Dict,\n target: \"primary\" \| \"secondary\" \| \"tertiary\",\n shouldProcess: FlattenObjectOptions[\"shouldProcess\"] = () => true,\n) {\n const results: VariableTokens = {}\n\n Object.entries(tokenMap[target]).forEach(\n ([primaryKey, { shouldProcess: shouldProcessProp, ...rest }]) => {\n const options: FlattenObjectOptions = {\n ...rest,\n shouldProcess: (obj) =>\n shouldProcess(obj) && (!shouldProcessProp \|\| shouldProcessProp(obj)),\n }\n\n const tokens = flattenObject(theme[primaryKey] ?? {}, options)\n const semanticTokens = flattenObject(\n theme.semanticTokens?.[primaryKey] ?? {},\n options,\n )\n\n Object.entries(tokens).forEach(([secondaryKey, value]) => {\n const token = `${primaryKey}.${secondaryKey}`\n\n results[token] = { semantic: false, value }\n })\n\n Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {\n let token = `${primaryKey}.${secondaryKey}`\n\n if (token.endsWith(\".base\")) token = token.replace(\".base\", \"\")\n\n results[token] = { semantic: true, value }\n })\n },\n )\n\n return results\n}\n"],"mappings":";;;;;;AA0FA,MAAM,WAEF;CACF,SAAS;EApCT,cAAc,CAAC;EACf,OAAO,CAAC;EACR,SAAS,CAAC;EACV,QAAQ,CAAC;EACT,WAAW,CAAC;EACZ,SAAS,CAAC;EACV,OAAO,CAAC;EACR,WAAW,CAAC;EACZ,aAAa,CAAC;EACd,gBAAgB,CAAC;EACjB,aAAa,CAAC;EACd,OAAO,CAAC;EACR,OAAO,CAAC;EACR,QAAQ,CAAC;EACT,UAAU,CAAC;CAsBU;CACrB,WAAW;EAjBX,WAAW,CAAC;EACZ,WAAW,EAAE,UAAU,EAAE;EACzB,SAAS,CAAC;CAee;CACzB,UAAU,EAVV,YAAY,EAAE,gBAAgB,QAAQ,CAAC,IAAI,UAAU,EAU9B;AACzB;AAQA,MAAa,gBAAwB;CACnC,aAAaA,mBAAAA,kBAAkB;CAC/B,QAAQ,CAAC;CACT,QAAQ,CAAC;CACT,SAAS,CAAC;CACV,QAAQC,cAAAA,aAAa;CACrB,OAAO,EAAE,cAAA,oBAAA,cAAc,IAAI;AAC7B;AAEA,SAAgB,aACd,OACA,SAAsB,CAAC,GACvB,UACQ;CACR,MAAM,SAAS,OAAO,KAAK,aAAA;CAC3B,MAAM,cAAcD,mBAAAA,kBAAkB,MAAM,aAAa,OAAO,UAAU;CAC1E,MAAM,SAASC,cAAAA,aAAa,OAAO,KAAK,MAAM;CAC9C,MAAM,gBAAgB,OAAO,OAAO,cAC/B,QAAa,CAAC,YAAY,aAAa,KAAK,IAAI,UAC3C;CAEV,MAAM,gBAAgB;EACpB,GAAG,aAAa,OAAO,WAAW,aAAa;EAC/C,GAAG,wBAAwB,OAAO,KAAA,GAAW,aAAa;CAC5D;CACA,MAAM,kBAAkB,aAAa,OAAO,aAAa,aAAa;CACtE,MAAM,iBAAiB,aAAa,OAAO,YAAY,aAAa;CAEpE,MAAM,EAAE,QAAQ,YAAYC,YAAAA,UAC1BC,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,aAAa,GAC9DA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,eAAe,GAChEA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,cAAc,CACjE,CAAC,CAAC;CAEF,MAAM,gBACJ,OACA,SACA,aACG;EACH,IAAI,CAAC,OAAO,OAAO;EAEnB,MAAM,aAAA,GAAA,oBAAA,cAAA,IAAA,CAAgB,OAAO,SAAS,QAAQ;EAE9C,OAAO,GAAG,OAAO,GAAG;CACtB;CAEA,IAAI,MAAM,cAAc;EACtB,MAAM,qBAAqB,OAAO,QAAc,MAAM,YAAY;EAElE,KAAK,MAAM,CAAC,aAAa,gBAAgB,oBAAoB;GAC3D,MAAM,iBAAiB,eAAe,YAAY,sCAAsC,YAAY;GAEpG,MAAM,sBAAsB;IAC1B,GAAG,aAAa,aAAa,WAAW,aAAa;IACrD,GAAG,wBAAwB,OAAO,aAAa,aAAa;GAC9D;GACA,MAAM,wBAAwB,aAC5B,aACA,aACA,aACF;GACA,MAAM,uBAAuB,aAC3B,aACA,YACA,aACF;GAEA,MAAM,EAAE,SAAS,kBAAkBD,YAAAA,UACjCC,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,mBAAmB,GACpEA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,qBAAqB,GACtEA,YAAAA,WAAW,QAAQ,OAAO,aAAa,QAAQ,CAAC,CAAC,oBAAoB,CACvE,CAAC,CAAC;IAAE,GAAG;IAAe,GAAG;IAAiB,GAAG;GAAe,CAAC;GAE7D,QAAQ,kBAAkB;EAC5B;CACF;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,EAAE,aAAa;CACxB;AACF;AAEA,SAAS,wBACP,OACA,aACA,eACA;CACA,MAAM,SAAS;EAAE,MAAM,MAAM,UAAU,CAAC;EAAG,QAAQ,aAAa,UAAU,CAAC;CAAE;CAC7E,MAAM,iBAAiB;EACrB,MAAM,MAAM,gBAAgB,UAAU,CAAC;EACvC,QAAQ,aAAa,gBAAgB,UAAU,CAAC;CAClD;CACA,MAAM,qBAAA,GAAA,oBAAA,cAAA,cAAA,EACH,eAAe,MAAA,CAAO,gBAAgB,gBAAgB,CAAC,GACxD,EAAE,cAAc,CAClB;CAEA,MAAM,UAA0B,CAAC;CAEjC,SAAS,YACP,YACA,cACA,OACA;EACA,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,KAAK,GAAG;EAExB,IAAI,CAAC,gBAAgB,iBAAiB,QACpC,QAAQ,UAAU,gBAAgB;GAAE,UAAU;GAAM;EAAM;OAE1D,QAAQ,UAAU,WAAW,GAAG,kBAAkB;GAChD,UAAU;GACV;EACF;CACJ;CAEA,SAAS,aAAa,YAAoB,QAAa,YAAiB;EACtE,MAAM,QAAQ,OAAO,OAAO,eAAe,OAAO,KAAK;EAEvD,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,KAAK,GAAG;GACnB,MAAM,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,OAAO,EAAE,cAAc,CAAC;GAErD,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,iBAAiB;IAI5C,YAAY,YAAY,cAFtB,iBAAiB,SAAS,aAAa,GAAG,WAAW,GAAG,cAEf;GAC7C,CAAC;EACH,OACE,YAAY,YAAY,KAAA,GAAW,UAAU;CAEjD;CAEA,SAAS,sBACP,YACA,QACA,YACA;EACA,MAAM,CAAC,YAAY,aAAa;EAChC,MAAM,cAAc,OAAO,OAAO,eAAe,OAAO,KAAK;EAC7D,MAAM,aAAa,OAAO,OAAO,cAAc,OAAO,KAAK;EAE3D,KAAA,GAAA,oBAAA,cAAA,SAAA,CAAa,WAAW,MAAA,GAAA,oBAAA,cAAA,SAAA,CAAc,UAAU,GAAG;GACjD,MAAM,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,aAAa,EAAE,cAAc,CAAC;GAE3D,OAAO,KAAK,MAAM,CAAC,CAAC,SAAS,iBAAiB;IAQ5C,YAAY,YAAY,cAAc,CANpC,iBAAiB,SACb,aACA,GAAG,WAAW,GAAG,gBACrB,iBAAiB,SAAS,YAAY,GAAG,UAAU,GAAG,cAGd,CAAC;GAC7C,CAAC;EACH,OAAO,IAAI,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,UAAU,KAAK,EAAA,GAAA,oBAAA,cAAA,SAAA,CAAU,SAAS,GACrD,YAAY,YAAY,KAAA,GAAW,CAAC,YAAY,SAAS,CAAC;CAE9D;CAEA,OAAO,QAAQ,iBAAiB,CAAC,CAAC,SAAS,CAAC,YAAY,WAAW;EACjE,KAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,GAAG;GAClB,sBAAsB,YAAY,QAAQ,KAAK;GAC/C,sBAAsB,YAAY,gBAAgB,KAAK;EACzD,OAAO;GACL,aAAa,YAAY,QAAQ,KAAK;GACtC,aAAa,YAAY,gBAAgB,KAAK;EAChD;CACF,CAAC;CAED,OAAO;AACT;AAEA,SAAS,aACP,OACA,QACA,sBAA6D,MAC7D;CACA,MAAM,UAA0B,CAAC;CAEjC,OAAO,QAAQ,SAAS,OAAO,CAAC,CAAC,SAC9B,CAAC,YAAY,EAAE,eAAe,mBAAmB,GAAG,YAAY;EAC/D,MAAM,UAAgC;GACpC,GAAG;GACH,gBAAgB,QACd,cAAc,GAAG,MAAM,CAAC,qBAAqB,kBAAkB,GAAG;EACtE;EAEA,MAAM,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,MAAM,eAAe,CAAC,GAAG,OAAO;EAC7D,MAAM,kBAAA,GAAA,oBAAA,cAAA,cAAA,CACJ,MAAM,iBAAiB,eAAe,CAAC,GACvC,OACF;EAEA,OAAO,QAAQ,MAAM,CAAC,CAAC,SAAS,CAAC,cAAc,WAAW;GACxD,MAAM,QAAQ,GAAG,WAAW,GAAG;GAE/B,QAAQ,SAAS;IAAE,UAAU;IAAO;GAAM;EAC5C,CAAC;EAED,OAAO,QAAQ,cAAc,CAAC,CAAC,SAAS,CAAC,cAAc,WAAW;GAChE,IAAI,QAAQ,GAAG,WAAW,GAAG;GAE7B,IAAI,MAAM,SAAS,OAAO,GAAG,QAAQ,MAAM,QAAQ,SAAS,EAAE;GAE9D,QAAQ,SAAS;IAAE,UAAU;IAAM;GAAM;EAC3C,CAAC;CACH,CACF;CAEA,OAAO;AACT"}
1	+ {"version":3,"file":"create-system.cjs","names":["createBreakpoints","createLayers","mergeVars","createVars"],"sources":["../../../../src/core/system/create-system.ts"],"sourcesContent":["import type { Dict, FlattenObjectOptions } from \"../../utils\"\nimport type { CSSAnimationObject, CSSModifierObject } from \"../css\"\nimport type {\n DefineThemeValue,\n System,\n ThemeConfig,\n UsageTheme,\n} from \"./index.types\"\nimport { bem, flattenObject, isArray, isObject, isUndefined } from \"../../utils\"\nimport { DEFAULT_VAR_PREFIX } from \"../constant\"\nimport { createBreakpoints } from \"./breakpoint\"\nimport { createLayers } from \"./layer\"\nimport { createVars, mergeVars } from \"./var\"\n\nexport type VariableResponsiveValue = Dict<\n [DefineThemeValue, DefineThemeValue] \| DefineThemeValue\n>\n\nexport type VariableColorModeValue = [\n DefineThemeValue \| Dict<DefineThemeValue>,\n DefineThemeValue \| Dict<DefineThemeValue>,\n]\n\nexport type VariableKeyframeValue =\n \| [\n CSSModifierObject \| Dict<CSSModifierObject>,\n CSSModifierObject \| Dict<CSSModifierObject>,\n ]\n \| CSSModifierObject\n \| Dict<CSSModifierObject>\n\nexport type VariableAnimationValue =\n \| CSSAnimationObject\n \| CSSAnimationObject[]\n \| Dict<CSSAnimationObject>\n\nexport type VariableValue =\n \| DefineThemeValue\n \| VariableAnimationValue\n \| VariableColorModeValue\n \| VariableKeyframeValue\n \| VariableResponsiveValue\n\ninterface VariableToken {\n semantic: boolean\n value: VariableValue\n}\n\nexport interface VariableTokens {\n [key: string]: VariableToken\n}\n\ninterface TokenOptions {\n [key: string]: FlattenObjectOptions\n}\n\nconst primaryTokens = {\n aspectRatios: {},\n blurs: {},\n borders: {},\n colors: {},\n durations: {},\n easings: {},\n fonts: {},\n fontSizes: {},\n fontWeights: {},\n letterSpacings: {},\n lineHeights: {},\n radii: {},\n sizes: {},\n spaces: {},\n zIndices: {},\n} satisfies TokenOptions\n\ntype PrimaryToken = keyof typeof primaryTokens\n\nconst secondaryTokens = {\n gradients: {},\n keyframes: { maxDepth: 1 },\n shadows: {},\n} satisfies TokenOptions\n\ntype SecondaryToken = keyof typeof secondaryTokens\n\nconst tertiaryTokens = {\n animations: { shouldProcess: (obj) => !obj.keyframes },\n} satisfies TokenOptions\n\ntype TertiaryToken = keyof typeof tertiaryTokens\n\nconst tokenMap: {\n [key in \"primary\" \| \"secondary\" \| \"tertiary\"]: TokenOptions\n} = {\n primary: primaryTokens,\n secondary: secondaryTokens,\n tertiary: tertiaryTokens,\n}\n\nexport type ThemeToken =\n \| \"breakpoints\"\n \| PrimaryToken\n \| SecondaryToken\n \| TertiaryToken\n\nexport const defaultSystem: System = {\n breakpoints: createBreakpoints(),\n config: {},\n cssMap: {},\n cssVars: { light: {}, dark: {} },\n layers: createLayers(),\n utils: { getClassName: bem },\n}\n\nexport function createSystem(\n theme: UsageTheme,\n config: ThemeConfig = {},\n rootNode?: Document \| Node \| ShadowRoot,\n): System {\n const prefix = config.css?.varPrefix ?? DEFAULT_VAR_PREFIX\n const breakpoints = createBreakpoints(theme.breakpoints, config.breakpoint)\n const layers = createLayers(config.css?.layers)\n const shouldProcess = config.theme?.responsive\n ? (obj: any) => !breakpoints.isResponsive(obj, true)\n : () => true\n\n const primaryTokens = {\n ...createTokens(theme, \"primary\", shouldProcess),\n ...createColorSchemeTokens(theme, undefined, shouldProcess),\n }\n const secondaryTokens = createTokens(theme, \"secondary\", shouldProcess)\n const tertiaryTokens = createTokens(theme, \"tertiary\", shouldProcess)\n\n const { cssMap, cssVars } = mergeVars(\n createVars(prefix, theme, breakpoints, rootNode)(primaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(secondaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(tertiaryTokens),\n )()\n\n const getClassName = (\n block?: string,\n element?: string,\n modifier?: string,\n ) => {\n if (!block) return \"\"\n\n const className = bem(block, element, modifier)\n\n return `${prefix}-${className}`\n }\n\n if (theme.themeSchemes) {\n const themeSchemeEntries = Object.entries<Dict>(theme.themeSchemes)\n\n for (const [themeScheme, nestedTheme] of themeSchemeEntries) {\n const nestedPrimaryTokens = {\n ...createTokens(nestedTheme, \"primary\", shouldProcess),\n ...createColorSchemeTokens(theme, nestedTheme, shouldProcess),\n }\n const nestedSecondaryTokens = createTokens(\n nestedTheme,\n \"secondary\",\n shouldProcess,\n )\n const nestedTertiaryTokens = createTokens(\n nestedTheme,\n \"tertiary\",\n shouldProcess,\n )\n\n const { cssVars: nestedCSSVars } = mergeVars(\n createVars(prefix, theme, breakpoints, rootNode)(nestedPrimaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(nestedSecondaryTokens),\n createVars(prefix, theme, breakpoints, rootNode)(nestedTertiaryTokens),\n )({ ...primaryTokens, ...secondaryTokens, ...tertiaryTokens })\n\n cssVars.themes ??= {}\n cssVars.themes[themeScheme] = nestedCSSVars\n }\n }\n\n return {\n breakpoints,\n config,\n cssMap,\n cssVars,\n layers,\n rootNode,\n utils: { getClassName },\n }\n}\n\nfunction createColorSchemeTokens(\n theme: Dict,\n nestedTheme: Dict \| undefined,\n shouldProcess: FlattenObjectOptions[\"shouldProcess\"],\n) {\n const colors = { base: theme.colors ?? {}, nested: nestedTheme?.colors ?? {} }\n const semanticColors = {\n base: theme.semanticTokens?.colors ?? {},\n nested: nestedTheme?.semanticTokens?.colors ?? {},\n }\n const colorSchemeTokens = flattenObject(\n (nestedTheme ?? theme).semanticTokens?.colorSchemes ?? {},\n { shouldProcess },\n )\n\n const results: VariableTokens = {}\n\n function insertToken(\n primaryKey: string,\n secondaryKey: string \| undefined,\n value: any,\n ) {\n if (isUndefined(value)) return\n\n if (!secondaryKey \|\| secondaryKey === \"base\")\n results[`colors.${primaryKey}`] = { semantic: true, value }\n else\n results[`colors.${primaryKey}.${secondaryKey}`] = {\n semantic: true,\n value,\n }\n }\n\n function processValue(primaryKey: string, colors: any, keyOrValue: any) {\n const value = colors.nested[keyOrValue] ?? colors.base[keyOrValue]\n\n if (isObject(value)) {\n const tokens = flattenObject(value, { shouldProcess })\n\n Object.keys(tokens).forEach((secondaryKey) => {\n const value =\n secondaryKey === \"base\" ? keyOrValue : `${keyOrValue}.${secondaryKey}`\n\n insertToken(primaryKey, secondaryKey, value)\n })\n } else {\n insertToken(primaryKey, undefined, keyOrValue)\n }\n }\n\n function processColorModeValue(\n primaryKey: string,\n colors: any,\n keyOrValue: any[],\n ) {\n const [lightValue, darkValue] = keyOrValue\n const lightColors = colors.nested[lightValue] ?? colors.base[lightValue]\n const darkColors = colors.nested[darkValue] ?? colors.base[darkValue]\n\n if (isObject(lightColors) && isObject(darkColors)) {\n const tokens = flattenObject(lightColors, { shouldProcess })\n\n Object.keys(tokens).forEach((secondaryKey) => {\n const value = [\n secondaryKey === \"base\"\n ? lightValue\n : `${lightValue}.${secondaryKey}`,\n secondaryKey === \"base\" ? darkValue : `${darkValue}.${secondaryKey}`,\n ]\n\n insertToken(primaryKey, secondaryKey, value)\n })\n } else if (!isObject(lightValue) && !isObject(darkValue)) {\n insertToken(primaryKey, undefined, [lightValue, darkValue])\n }\n }\n\n Object.entries(colorSchemeTokens).forEach(([primaryKey, value]) => {\n if (isArray(value)) {\n processColorModeValue(primaryKey, colors, value)\n processColorModeValue(primaryKey, semanticColors, value)\n } else {\n processValue(primaryKey, colors, value)\n processValue(primaryKey, semanticColors, value)\n }\n })\n\n return results\n}\n\nfunction createTokens(\n theme: Dict,\n target: \"primary\" \| \"secondary\" \| \"tertiary\",\n shouldProcess: FlattenObjectOptions[\"shouldProcess\"] = () => true,\n) {\n const results: VariableTokens = {}\n\n Object.entries(tokenMap[target]).forEach(\n ([primaryKey, { shouldProcess: shouldProcessProp, ...rest }]) => {\n const options: FlattenObjectOptions = {\n ...rest,\n shouldProcess: (obj) =>\n shouldProcess(obj) && (!shouldProcessProp \|\| shouldProcessProp(obj)),\n }\n\n const tokens = flattenObject(theme[primaryKey] ?? {}, options)\n const semanticTokens = flattenObject(\n theme.semanticTokens?.[primaryKey] ?? {},\n options,\n )\n\n Object.entries(tokens).forEach(([secondaryKey, value]) => {\n const token = `${primaryKey}.${secondaryKey}`\n\n results[token] = { semantic: false, value }\n })\n\n Object.entries(semanticTokens).forEach(([secondaryKey, value]) => {\n let token = `${primaryKey}.${secondaryKey}`\n\n if (token.endsWith(\".base\")) token = token.replace(\".base\", \"\")\n\n results[token] = { semantic: true, value }\n })\n },\n )\n\n return results\n}\n"],"mappings":"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"}

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

@@ -28,6 +28,7 @@ exports.createLayers = require_layer.createLayers;
 exports.createStorageManager = require_storage_manager.createStorageManager;
 exports.createStyled = require_styled.createStyled;
 exports.createSystem = require_create_system.createSystem;
+exports.createVarRules = require_var.createVarRules;
 exports.createVars = require_var.createVars;
 exports.defaultEnvironment = require_environment_provider.defaultEnvironment;
 exports.defaultLayers = require_layer.defaultLayers;

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

@@ -3,6 +3,7 @@ const require_utils_index = require("../../utils/index.cjs");
 const require_constant = require("../constant.cjs");
 const require_environment_provider = require("./environment-provider.cjs");
 const require_storage_manager = require("./storage-manager.cjs");
+const require_var = require("./var.cjs");
 const require_system_provider = require("./system-provider.cjs");
 const require_css = require("../css/css.cjs");
 let react = require("react");
@@ -84,7 +85,7 @@ const GlobalStyles = () => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.Global, { styles: [
 		atRule,
 		wrap("tokens", (0, react.useMemo)(() => {
-			return { [system.config.css?.varRoot ?? ":host, :root, [data-mode]"]: system.cssVars };
+			return require_var.createVarRules(system.config.css?.varRoot ?? ":host, :root", system.cssVars);
 		}, [system])),
 		wrap("reset", resetStyle),
 		wrap("global", globalStyle)

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

	@@ -1 +1 @@
1	- {"version":3,"file":"theme-provider.cjs","names":["THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","EmotionThemeProvider","useSystem","css","Global","ThemeContext"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n ChangeThemeScheme,\n StyledTheme,\n Theme,\n ThemeConfig,\n ThemeScheme,\n UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n ThemeProvider as EmotionThemeProvider,\n Global,\n ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n isEmptyObject,\n isObject,\n isShadowRoot,\n isUndefined,\n merge,\n} from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\n\nexport const getPreventTransition = (environment: Environment) => {\n const win = environment.getWindow()\n const doc = environment.getDocument()\n const root = environment.getRootElement()\n const rootNode = environment.getRootNode()\n\n if (!win \|\| !doc \|\| !root) return\n\n const css = doc.createElement(\"style\")\n const shadowRoot = isShadowRoot(rootNode)\n const selector = shadowRoot ? \":host, \" : \"\"\n const container = shadowRoot ? rootNode : doc.head\n\n const node = doc.createTextNode(\n `${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n )\n\n css.appendChild(node)\n\n container.appendChild(css)\n\n return () => {\n const forceReflow = () => win.getComputedStyle(root)\n\n forceReflow()\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n container.removeChild(css)\n })\n })\n }\n}\n\nexport interface ThemeProviderProps\n extends\n PropsWithChildren,\n Omit<EmotionThemeProviderProps, \"children\" \| \"theme\"> {\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 Key of value saved in storage.\n * By default, it is saved to `local storage`.\n /\n storageKey?: string\n /\n The theme of the yamada ui.\n /\n theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n children,\n config,\n cookie,\n storage = cookie ? \"cookie\" : \"localStorage\",\n storageKey = THEME_SCHEME_STORAGE_KEY,\n theme = {},\n}) => {\n const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n config ?? {}\n const storageManager = useMemo(\n () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n [cookie, defaultThemeScheme, storage, storageKey],\n )\n const environment = useEnvironment()\n const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n storageManager.get(),\n )\n\n const changeThemeScheme: ChangeThemeScheme = useCallback(\n (themeScheme) => {\n const root = environment.getRootElement()\n\n const cleanup = disableTransitionOnChange\n ? getPreventTransition(environment)\n : undefined\n\n if (root) root.dataset.theme = themeScheme\n\n cleanup?.()\n\n setThemeScheme(themeScheme)\n\n storageManager.set(themeScheme)\n },\n [disableTransitionOnChange, environment, storageManager],\n )\n\n useEffect(() => {\n const themeScheme = storageManager.get()\n\n changeThemeScheme(themeScheme)\n }, [changeThemeScheme, storageManager])\n\n return (\n <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n <GlobalStyles />\n\n {children}\n </EmotionThemeProvider>\n )\n}\n\nexport const GlobalStyles: FC = () => {\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const { atRule, wrap } = system.layers\n\n const resetStyle = useMemo(() => {\n const style = theme.styles?.resetStyle\n\n if (!style \|\| isEmptyObject(style)) return undefined\n\n return css(system, theme)(style)\n }, [system, theme])\n\n const globalStyle = useMemo(() => {\n const style = theme.styles?.globalStyle\n\n if (!style \|\| isEmptyObject(style)) return undefined\n\n return css(system, theme)(style)\n }, [system, theme])\n\n const ~~cssVars~~ = useMemo(() => {\n return {\n [system.config.css?.varRoot ?? \":host, :root~~, [data-mode]~~\"~~]:\~~n system.cssVars,\n }\n }, [system])\n\n return (\n <Global\n styles={[\n atRule,\n wrap(\"tokens\", ~~cssVars~~),\n wrap(\"reset\", resetStyle),\n wrap(\"global\", globalStyle),\n ]}\n />\n )\n}\n\n/\n `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n \n @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n const theme = useMemo(() => {\n const { themeScheme } = internalTheme\n\n if (isUndefined(themeScheme) \|\| themeScheme === \"base\") return internalTheme\n\n const nestedTheme =\n \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n ? internalTheme.themeSchemes[themeScheme as string]\n : undefined\n\n if (!nestedTheme) return internalTheme\n\n return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n }, [internalTheme])\n\n const value = useMemo(() => {\n const { changeThemeScheme, themeScheme } = internalTheme\n\n return {\n changeThemeScheme,\n internalTheme,\n theme,\n themeScheme,\n }\n }, [theme, internalTheme])\n\n return value\n}\n"],"mappings":"~~;;;;;;;;;;;AAiCA~~,MAAa,wBAAwB,gBAA6B;CAChE,MAAM,MAAM,YAAY,UAAU;CAClC,MAAM,MAAM,YAAY,YAAY;CACpC,MAAM,OAAO,YAAY,eAAe;CACxC,MAAM,WAAW,YAAY,YAAY;CAEzC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM;CAE3B,MAAM,MAAM,IAAI,cAAc,OAAO;CACrC,MAAM,cAAA,GAAA,oBAAA,cAAA,aAAA,CAA0B,QAAQ;CACxC,MAAM,WAAW,aAAa,aAAa;CAC3C,MAAM,YAAY,aAAa,WAAW,IAAI;CAE9C,MAAM,OAAO,IAAI,eACf,GAAG,SAAS,wJACd;CAEA,IAAI,YAAY,IAAI;CAEpB,UAAU,YAAY,GAAG;CAEzB,aAAa;EACX,MAAM,oBAAoB,IAAI,iBAAiB,IAAI;EAEnD,YAAY;EAEZ,4BAA4B;GAC1B,4BAA4B;IAC1B,UAAU,YAAY,GAAG;GAC3B,CAAC;EACH,CAAC;CACH;AACF;AAiCA,MAAa,iBAAyC,EACpD,UACA,QACA,QACA,UAAU,SAAS,WAAW,gBAC9B,aAAaA,iBAAAA,0BACb,QAAQ,CAAC,QACL;CACJ,MAAM,EAAE,qBAAqB,QAAQ,8BACnC,UAAU,CAAC;CACb,MAAM,kBAAA,GAAA,MAAA,QAAA,OACEC,wBAAAA,qBAAqB,SAAS,YAAY,oBAAoB,MAAM,GAC1E;EAAC;EAAQ;EAAoB;EAAS;CAAU,CAClD;CACA,MAAM,cAAcC,6BAAAA,eAAe;CACnC,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,SAAA,CAClB,eAAe,IAAI,CACrB;CAEA,MAAM,qBAAA,GAAA,MAAA,YAAA,EACH,gBAAgB;EACf,MAAM,OAAO,YAAY,eAAe;EAExC,MAAM,UAAU,4BACZ,qBAAqB,WAAW,IAChC,KAAA;EAEJ,IAAI,MAAM,KAAK,QAAQ,QAAQ;EAE/B,UAAU;EAEV,eAAe,WAAW;EAE1B,eAAe,IAAI,WAAW;CAChC,GACA;EAAC;EAA2B;EAAa;CAAc,CACzD;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,cAAc,eAAe,IAAI;EAEvC,kBAAkB,WAAW;CAC/B,GAAG,CAAC,mBAAmB,cAAc,CAAC;CAEtC,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,eAAAA,eAAD;EAAsB,OAAO;GAAE;GAAmB;GAAa,GAAG;EAAM;YAAxE,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,CAAe,CAAA,GAEd,QACmB;;AAE1B;AAEA,MAAa,qBAAyB;CACpC,MAAM,SAASC,wBAAAA,UAAU;CACzB,MAAM,EAAE,UAAU,SAAqB;CACvC,MAAM,EAAE,QAAQ,SAAS,OAAO;CAEhC,MAAM,cAAA,GAAA,MAAA,QAAA,OAA2B;EAC/B,MAAM,QAAQ,MAAM,QAAQ;EAE5B,IAAI,CAAC,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,KAAK,GAAG,OAAO,KAAA;EAE3C,OAAOC,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK;CACjC,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,MAAM,eAAA,GAAA,MAAA,QAAA,OAA4B;EAChC,MAAM,QAAQ,MAAM,QAAQ;EAE5B,IAAI,CAAC,UAAA,GAAA,oBAAA,cAAA,cAAA,CAAuB,KAAK,GAAG,OAAO,KAAA;EAE3C,OAAOA,YAAAA,IAAI,QAAQ,KAAK,CAAC,CAAC,KAAK;CACjC,GAAG,CAAC,QAAQ,KAAK,CAAC;CASlB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EACE,QAAQ;EACN;EACA,KAAK,WAAA,GAAA,MAAA,QAAA,~~OAXmB~~;~~GAC5B~~,~~OAAO~~,~~GACJ~~,OAAO,OAAO,KAAK,WAAW,~~8BAC7B~~,OAAO,~~QACX~~;EACF,GAAG,CAAC,MAAM,~~CAMiB~~,CAAC;~~EACtB~~,KAAK,SAAS,UAAU;EACxB,KAAK,UAAU,WAAW;CAC5B,EACD,CAAA;AAEL;;;;;;AAOA,MAAa,iBAA+C;CAC1D,MAAM,iBAAA,GAAA,MAAA,IAAA,CAAoBC,eAAAA,YAAY;CAEtC,MAAM,SAAA,GAAA,MAAA,QAAA,OAAsB;EAC1B,MAAM,EAAE,gBAAgB;EAExB,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,WAAW,KAAK,gBAAgB,QAAQ,OAAO;EAE/D,MAAM,cACJ,kBAAkB,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,cAAc,YAAY,IAClE,cAAc,aAAa,eAC3B,KAAA;EAEN,IAAI,CAAC,aAAa,OAAO;EAEzB,QAAA,GAAA,oBAAA,cAAA,MAAA,CAA6B,eAAe,WAAW;CACzD,GAAG,CAAC,aAAa,CAAC;CAalB,QAAA,GAAA,MAAA,QAAA,OAX4B;EAC1B,MAAM,EAAE,mBAAmB,gBAAgB;EAE3C,OAAO;GACL;GACA;GACA;GACA;EACF;CACF,GAAG,CAAC,OAAO,aAAa,CAEb;AACb"}
1	+ {"version":3,"file":"theme-provider.cjs","names":["THEME_SCHEME_STORAGE_KEY","createStorageManager","useEnvironment","EmotionThemeProvider","useSystem","css","Global","createVarRules","ThemeContext"],"sources":["../../../../src/core/system/theme-provider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProviderProps as EmotionThemeProviderProps } from \"@emotion/react\"\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { Environment } from \"./environment-provider\"\nimport type {\n ChangeThemeScheme,\n StyledTheme,\n Theme,\n ThemeConfig,\n ThemeScheme,\n UsageTheme,\n} from \"./index.types\"\nimport type { Storage } from \"./storage-manager\"\nimport {\n ThemeProvider as EmotionThemeProvider,\n Global,\n ThemeContext,\n} from \"@emotion/react\"\nimport { use, useCallback, useEffect, useMemo, useState } from \"react\"\nimport {\n isEmptyObject,\n isObject,\n isShadowRoot,\n isUndefined,\n merge,\n} from \"../../utils\"\nimport { THEME_SCHEME_STORAGE_KEY } from \"../constant\"\nimport { css } from \"../css\"\nimport { useEnvironment } from \"./environment-provider\"\nimport { createStorageManager } from \"./storage-manager\"\nimport { useSystem } from \"./system-provider\"\nimport { createVarRules } from \"./var\"\n\nexport const getPreventTransition = (environment: Environment) => {\n const win = environment.getWindow()\n const doc = environment.getDocument()\n const root = environment.getRootElement()\n const rootNode = environment.getRootNode()\n\n if (!win \|\| !doc \|\| !root) return\n\n const css = doc.createElement(\"style\")\n const shadowRoot = isShadowRoot(rootNode)\n const selector = shadowRoot ? \":host, \" : \"\"\n const container = shadowRoot ? rootNode : doc.head\n\n const node = doc.createTextNode(\n `${selector}{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n )\n\n css.appendChild(node)\n\n container.appendChild(css)\n\n return () => {\n const forceReflow = () => win.getComputedStyle(root)\n\n forceReflow()\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n container.removeChild(css)\n })\n })\n }\n}\n\nexport interface ThemeProviderProps\n extends\n PropsWithChildren,\n Omit<EmotionThemeProviderProps, \"children\" \| \"theme\"> {\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 Key of value saved in storage.\n * By default, it is saved to `local storage`.\n /\n storageKey?: string\n /\n The theme of the yamada ui.\n /\n theme?: UsageTheme\n}\n\nexport const ThemeProvider: FC<ThemeProviderProps> = ({\n children,\n config,\n cookie,\n storage = cookie ? \"cookie\" : \"localStorage\",\n storageKey = THEME_SCHEME_STORAGE_KEY,\n theme = {},\n}) => {\n const { defaultThemeScheme = \"base\", disableTransitionOnChange } =\n config ?? {}\n const storageManager = useMemo(\n () => createStorageManager(storage, storageKey, defaultThemeScheme, cookie),\n [cookie, defaultThemeScheme, storage, storageKey],\n )\n const environment = useEnvironment()\n const [themeScheme, setThemeScheme] = useState<ThemeScheme>(\n storageManager.get(),\n )\n\n const changeThemeScheme: ChangeThemeScheme = useCallback(\n (themeScheme) => {\n const root = environment.getRootElement()\n\n const cleanup = disableTransitionOnChange\n ? getPreventTransition(environment)\n : undefined\n\n if (root) root.dataset.theme = themeScheme\n\n cleanup?.()\n\n setThemeScheme(themeScheme)\n\n storageManager.set(themeScheme)\n },\n [disableTransitionOnChange, environment, storageManager],\n )\n\n useEffect(() => {\n const themeScheme = storageManager.get()\n\n changeThemeScheme(themeScheme)\n }, [changeThemeScheme, storageManager])\n\n return (\n <EmotionThemeProvider theme={{ changeThemeScheme, themeScheme, ...theme }}>\n <GlobalStyles />\n\n {children}\n </EmotionThemeProvider>\n )\n}\n\nexport const GlobalStyles: FC = () => {\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const { atRule, wrap } = system.layers\n\n const resetStyle = useMemo(() => {\n const style = theme.styles?.resetStyle\n\n if (!style \|\| isEmptyObject(style)) return undefined\n\n return css(system, theme)(style)\n }, [system, theme])\n\n const globalStyle = useMemo(() => {\n const style = theme.styles?.globalStyle\n\n if (!style \|\| isEmptyObject(style)) return undefined\n\n return css(system, theme)(style)\n }, [system, theme])\n\n const varRules = useMemo(() => {\n return createVarRules(\n system.config.css?.varRoot ?? \":host, :root\",\n system.cssVars,\n )\n }, [system])\n\n return (\n <Global\n styles={[\n atRule,\n wrap(\"tokens\", varRules),\n wrap(\"reset\", resetStyle),\n wrap(\"global\", globalStyle),\n ]}\n />\n )\n}\n\n/\n `useTheme` is a custom hook that returns a function for retrieving and switching themes.\n \n @see https://yamada-ui.com/docs/hooks/use-theme\n */\nexport const useTheme = <Y extends UsageTheme = Theme>() => {\n const internalTheme = use(ThemeContext) as StyledTheme<Y>\n\n const theme = useMemo(() => {\n const { themeScheme } = internalTheme\n\n if (isUndefined(themeScheme) \|\| themeScheme === \"base\") return internalTheme\n\n const nestedTheme =\n \"themeSchemes\" in internalTheme && isObject(internalTheme.themeSchemes)\n ? internalTheme.themeSchemes[themeScheme as string]\n : undefined\n\n if (!nestedTheme) return internalTheme\n\n return merge<StyledTheme<Y>>(internalTheme, nestedTheme)\n }, [internalTheme])\n\n const value = useMemo(() => {\n const { changeThemeScheme, themeScheme } = internalTheme\n\n return {\n changeThemeScheme,\n internalTheme,\n theme,\n themeScheme,\n }\n }, [theme, internalTheme])\n\n return value\n}\n"],"mappings":"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"}