npm - @yamada-ui/react - Versions diffs - 2.2.2-dev-20260608072350 → 2.2.2 - Mend

@yamada-ui/react 2.2.2-dev-20260608072350 → 2.2.2

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

package/dist/esm/components/skeleton/skeleton-text.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-text.js","names":[],"sources":["../../../../src/components/skeleton/skeleton-text.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Component, HTMLStyledProps } from \"../../core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { mergeCSS, styled } from \"../../core\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"lineClamp\"> {\n /*\n The number of lines to display.\n /\n lineClamp?: number\n /\n Props for the root element.\n */\n rootProps?: HTMLStyledProps\n}\n\nexport const SkeletonText = (({\n css,\n children,\n gap = \"2\",\n lineClamp = 3,\n loading = true,\n _loading,\n _notFirst,\n rootProps,\n ...rest\n}: SkeletonTextProps) => {\n return (\n <styled.div w=\"full\" {...rootProps}>\n {Array.from({ length: lineClamp }).map((_, index) => {\n if (!loading && index > 0) return null\n\n return (\n <Skeleton\n key={index}\n css={mergeCSS(css, { \"--height\": \"sizes.4\" })}\n loading={loading}\n _loading={{\n _last: { maxW: lineClamp > 1 ? \"80%\" : \"100%\" },\n ..._loading,\n }}\n _notFirst={{ mt: gap, ..._notFirst }}\n {...rest}\n >\n {!loading && index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </styled.div>\n )\n}) as Component<\"div\", SkeletonTextProps>\n"],"mappings":";;;;;;AAkBA,MAAa,iBAAiB,EAC5B,KACA,UACA,MAAM,KACN,YAAY,GACZ,UAAU,MACV,UACA,WACA,WACA,GAAG,WACoB;CACvB,OACE,oBAAC,OAAO,KAAR;EAAY,GAAE;EAAO,GAAI;YACtB,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,~~EAAE~~,KAAK,GAAG,UAAU;GACnD,IAAI,CAAC,WAAW,QAAQ,GAAG,OAAO;GAElC,OACE,oBAAC,UAAD;IAEE,KAAK,SAAS,KAAK,EAAE,YAAY,UAAU,CAAC;IACnC;IACT,UAAU;KACR,OAAO,EAAE,MAAM,YAAY,IAAI,QAAQ,OAAO;KAC9C,GAAG;IACL;IACA,WAAW;KAAE,IAAI;KAAK,GAAG;IAAU;IACnC,GAAI;cAEH,CAAC,WAAW,UAAU,IAAI,WAAW,KAAA;GAC9B,GAXH,KAWG;EAEd,CAAC;CACS,CAAA;AAEhB"}
1	+ {"version":3,"file":"skeleton-text.js","names":[],"sources":["../../../../src/components/skeleton/skeleton-text.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Component, HTMLStyledProps } from \"../../core\"\nimport type { SkeletonProps } from \"./skeleton\"\nimport { mergeCSS, styled } from \"../../core\"\nimport { Skeleton } from \"./skeleton\"\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"lineClamp\"> {\n /*\n The number of lines to display.\n /\n lineClamp?: number\n /\n Props for the root element.\n */\n rootProps?: HTMLStyledProps\n}\n\nexport const SkeletonText = (({\n css,\n children,\n gap = \"2\",\n lineClamp = 3,\n loading = true,\n _loading,\n _notFirst,\n rootProps,\n ...rest\n}: SkeletonTextProps) => {\n return (\n <styled.div w=\"full\" {...rootProps}>\n {Array.from({ length: lineClamp }).map((_, index) => {\n if (!loading && index > 0) return null\n\n return (\n <Skeleton\n key={index}\n css={mergeCSS(css, { \"--height\": \"sizes.4\" })}\n loading={loading}\n _loading={{\n _last: { maxW: lineClamp > 1 ? \"80%\" : \"100%\" },\n ..._loading,\n }}\n _notFirst={{ mt: gap, ..._notFirst }}\n {...rest}\n >\n {!loading && index === 0 ? children : undefined}\n </Skeleton>\n )\n })}\n </styled.div>\n )\n}) as Component<\"div\", SkeletonTextProps>\n"],"mappings":";;;;;;AAkBA,MAAa,iBAAiB,EAC5B,KACA,UACA,MAAM,KACN,YAAY,GACZ,UAAU,MACV,UACA,WACA,WACA,GAAG,WACoB;CACvB,OACE,oBAAC,OAAO,KAAR;EAAY,GAAE;EAAO,GAAI;YACtB,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,UAAU;GACnD,IAAI,CAAC,WAAW,QAAQ,GAAG,OAAO;GAElC,OACE,oBAAC,UAAD;IAEE,KAAK,SAAS,KAAK,EAAE,YAAY,UAAU,CAAC;IACnC;IACT,UAAU;KACR,OAAO,EAAE,MAAM,YAAY,IAAI,QAAQ,OAAO;KAC9C,GAAG;IACL;IACA,WAAW;KAAE,IAAI;KAAK,GAAG;IAAU;IACnC,GAAI;cAEH,CAAC,WAAW,UAAU,IAAI,WAAW,KAAA;GAC9B,GAXH,KAWG;EAEd,CAAC;CACS,CAAA;AAEhB"}

package/dist/esm/components/skeleton/skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SkeletonStyle } from \"./skeleton.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { dataAttr, isNumber, useValidChildren } from \"../../utils\"\nimport { skeletonStyle } from \"./skeleton.style\"\n\nexport interface SkeletonProps\n extends HTMLStyledProps, ThemeProps<SkeletonStyle> {\n /*\n The animation duration in seconds.\n /\n duration?: number \| string\n /\n The color at the animation end.\n /\n endColor?: CSSProps[\"color\"]\n /\n The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.\n /\n fadeDuration?: number \| string\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n fitContent?: boolean\n /\n The color at the animation start.\n /\n startColor?: CSSProps[\"color\"]\n}\n\nconst {\n PropsContext: SkeletonPropsContext,\n usePropsContext: useSkeletonPropsContext,\n withContext,\n} = createComponent<SkeletonProps, SkeletonStyle>(\"skeleton\", skeletonStyle)\n\nexport { SkeletonPropsContext, useSkeletonPropsContext }\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see https://yamada-ui.com/docs/components/skeleton\n */\nexport const Skeleton = withContext(\"div\", { transferProps: [\"loading\"] })(\n undefined,\n ({\n children,\n duration,\n endColor,\n fadeDuration,\n fitContent,\n loading,\n startColor,\n ...rest\n }) => {\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n\n fitContent ??= hasChildren\n\n return {\n \"aria-busy\": loading,\n \"data-loaded\": dataAttr(!loading),\n \"data-loading\": dataAttr(loading),\n \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n \"--end-color\": varAttr(endColor, \"colors\"),\n \"--fade-duration\": isNumber(fadeDuration)\n ? `${fadeDuration}s`\n : fadeDuration,\n \"--height\": fitContent ? \"fit-content\" : undefined,\n \"--start-color\": varAttr(startColor, \"colors\"),\n \"--width\": fitContent ? \"fit-content\" : undefined,\n children,\n ...rest,\n }\n },\n)\n"],"mappings":";;;;;;;AAkCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,YAAY,aAAa;;;;;;AAS3E,MAAa,WAAW,YAAY,OAAO,EAAE,eAAe,CAAC,SAAS,EAAE,CAAC,~~EACvE~~,KAAA,IACC,EACC,UACA,UACA,UACA,cACA,YACA,SACA,YACA,GAAG,WACC;CAEJ,MAAM,cAAc,CAAC,CADC,iBAAiB,QACL,~~EAAE~~;CAEpC,eAAe;CAEf,OAAO;EACL,aAAa;EACb,gBAAA,GAAA,cAAA,~~UAAwB~~,CAAC,OAAO;EAChC,iBAAA,GAAA,cAAA,~~UAAyB~~,OAAO;EAChC,eAAA,GAAA,cAAA,~~UAAuB~~,QAAQ,IAAI,GAAG,SAAS,KAAK;EACpD,eAAe,QAAQ,UAAU,QAAQ;EACzC,oBAAA,GAAA,cAAA,~~UAA4B~~,YAAY,IACpC,GAAG,aAAa,KAChB;EACJ,YAAY,aAAa,gBAAgB,KAAA;EACzC,iBAAiB,QAAQ,YAAY,QAAQ;EAC7C,WAAW,aAAa,gBAAgB,KAAA;EACxC;EACA,GAAG;CACL;AACF,CACF"}
1	+ {"version":3,"file":"skeleton.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { SkeletonStyle } from \"./skeleton.style\"\nimport { createComponent, varAttr } from \"../../core\"\nimport { dataAttr, isNumber, useValidChildren } from \"../../utils\"\nimport { skeletonStyle } from \"./skeleton.style\"\n\nexport interface SkeletonProps\n extends HTMLStyledProps, ThemeProps<SkeletonStyle> {\n /*\n The animation duration in seconds.\n /\n duration?: number \| string\n /\n The color at the animation end.\n /\n endColor?: CSSProps[\"color\"]\n /\n The fade in duration in seconds. Requires `loaded` toggled to `true` in order to see the transition.\n /\n fadeDuration?: number \| string\n /\n If `true`, the skeleton will take the width of it's children.\n \n @default false\n /\n fitContent?: boolean\n /\n The color at the animation start.\n /\n startColor?: CSSProps[\"color\"]\n}\n\nconst {\n PropsContext: SkeletonPropsContext,\n usePropsContext: useSkeletonPropsContext,\n withContext,\n} = createComponent<SkeletonProps, SkeletonStyle>(\"skeleton\", skeletonStyle)\n\nexport { SkeletonPropsContext, useSkeletonPropsContext }\n\n/\n `Skeleton` is a component that acts as a placeholder until content is loaded.\n \n @see https://yamada-ui.com/docs/components/skeleton\n */\nexport const Skeleton = withContext(\"div\", { transferProps: [\"loading\"] })(\n undefined,\n ({\n children,\n duration,\n endColor,\n fadeDuration,\n fitContent,\n loading,\n startColor,\n ...rest\n }) => {\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n\n fitContent ??= hasChildren\n\n return {\n \"aria-busy\": loading,\n \"data-loaded\": dataAttr(!loading),\n \"data-loading\": dataAttr(loading),\n \"--duration\": isNumber(duration) ? `${duration}s` : duration,\n \"--end-color\": varAttr(endColor, \"colors\"),\n \"--fade-duration\": isNumber(fadeDuration)\n ? `${fadeDuration}s`\n : fadeDuration,\n \"--height\": fitContent ? \"fit-content\" : undefined,\n \"--start-color\": varAttr(startColor, \"colors\"),\n \"--width\": fitContent ? \"fit-content\" : undefined,\n children,\n ...rest,\n }\n },\n)\n"],"mappings":";;;;;;;AAkCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,gBACE,gBAA8C,YAAY,aAAa;;;;;;AAS3E,MAAa,WAAW,YAAY,OAAO,EAAE,eAAe,CAAC,SAAS,EAAE,CAAC,CAAC,CACxE,KAAA,IACC,EACC,UACA,UACA,UACA,cACA,YACA,SACA,YACA,GAAG,WACC;CAEJ,MAAM,cAAc,CAAC,CADC,iBAAiB,QACL,CAAC,CAAC;CAEpC,eAAe;CAEf,OAAO;EACL,aAAa;EACb,gBAAA,GAAA,cAAA,SAAA,CAAwB,CAAC,OAAO;EAChC,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;EAChC,eAAA,GAAA,cAAA,SAAA,CAAuB,QAAQ,IAAI,GAAG,SAAS,KAAK;EACpD,eAAe,QAAQ,UAAU,QAAQ;EACzC,oBAAA,GAAA,cAAA,SAAA,CAA4B,YAAY,IACpC,GAAG,aAAa,KAChB;EACJ,YAAY,aAAa,gBAAgB,KAAA;EACzC,iBAAiB,QAAQ,YAAY,QAAQ;EAC7C,WAAW,aAAa,gBAAgB,KAAA;EACxC;EACA,GAAG;CACL;AACF,CACF"}

package/dist/esm/components/slide/slide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slide.js","names":["motion"],"sources":["../../../../src/components/slide/slide.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { SlideStyle } from \"./slide.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { createTransition, motion } from \"../motion\"\nimport { slideStyle } from \"./slide.style\"\n\nconst getAnimationProps = (placement: SlideProps[\"placement\"]) => {\n switch (placement) {\n case \"block-start\":\n return { enter: { x: 0, y: 0 }, exit: { x: 0, y: \"-100%\" } }\n case \"inline-end\":\n return { enter: { x: 0, y: 0 }, exit: { x: \"100%\", y: 0 } }\n case \"block-end\":\n return { enter: { x: 0, y: 0 }, exit: { x: 0, y: \"100%\" } }\n case \"inline-start\":\n return { enter: { x: 0, y: 0 }, exit: { x: \"-100%\", y: 0 } }\n default:\n return {}\n }\n}\nexport const slideVariants: Variants = {\n enter: ({\n delay,\n duration,\n enter,\n placement,\n transition,\n transitionEnd,\n } = {}) => ({\n ...getAnimationProps(placement).enter,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n placement,\n transition,\n transitionEnd,\n } = {}) => ({\n ...getAnimationProps(placement).exit,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n ...exit,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface SlideProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<SlideStyle> {}\n\nconst {\n PropsContext: SlidePropsContext,\n usePropsContext: useSlidePropsContext,\n withContext,\n} = createComponent<SlideProps, SlideStyle>(\"slide\", slideStyle)\n\nexport { SlidePropsContext, useSlidePropsContext }\n\n/*\n `Slide` is a component that shows or hides an element from the corners of the page.\n \n @see https://yamada-ui.com/docs/components/slide\n */\nexport const Slide = withContext<\"div\", SlideProps, \"placement\">(\n ({\n delay,\n duration = { enter: 0.4, exit: 0.3 },\n open: openProp,\n placement: placementProp,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp \|\| unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n const placement = useValue(placementProp)\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n placement,\n transition,\n transitionEnd,\n }),\n [delay, duration, placement, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={slideVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n { transferProps: [\"placement\"] },\n)()\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,qBAAqB,cAAuC;CAChE,QAAQ,WAAR;EACE,KAAK,eACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAG,GAAG;GAAQ;EAAE;EAC7D,KAAK,cACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAQ,GAAG;GAAE;EAAE;EAC5D,KAAK,aACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAG,GAAG;GAAO;EAAE;EAC5D,KAAK,gBACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAS,GAAG;GAAE;EAAE;EAC7D,SACE,OAAO,CAAC;CACZ;AACF;AACA,MAAa,gBAA0B;CACrC,QAAQ,EACN,OACA,UACA,OACA,WACA,YACA,kBACE,CAAC,OAAO;EACV,GAAG,kBAAkB,SAAS,~~EAAE~~;EAChC,YAAY,iBAAiB,MAAM,YAAY,KAAK,~~EAAE~~,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,WACA,YACA,kBACE,CAAC,OAAO;EACV,GAAG,kBAAkB,SAAS,~~EAAE~~;EAChC,YAAY,iBAAiB,KAAK,YAAY,IAAI,~~EAAE~~,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAKA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,aAClB,EACC,OACA,WAAW;CAAE,OAAO;CAAK,MAAM;AAAI,GACnC,MAAM,UACN,WAAW,eACX,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CACzD,MAAM,YAAY,SAAS,aAAa;CAExC,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAW;EAAY;CAAa,CACxD;CAEA,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,GACA,EAAE,eAAe,CAAC,WAAW,EAAE,CACjC,~~EAAE~~"}
1	+ {"version":3,"file":"slide.js","names":["motion"],"sources":["../../../../src/components/slide/slide.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { SlideStyle } from \"./slide.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { createTransition, motion } from \"../motion\"\nimport { slideStyle } from \"./slide.style\"\n\nconst getAnimationProps = (placement: SlideProps[\"placement\"]) => {\n switch (placement) {\n case \"block-start\":\n return { enter: { x: 0, y: 0 }, exit: { x: 0, y: \"-100%\" } }\n case \"inline-end\":\n return { enter: { x: 0, y: 0 }, exit: { x: \"100%\", y: 0 } }\n case \"block-end\":\n return { enter: { x: 0, y: 0 }, exit: { x: 0, y: \"100%\" } }\n case \"inline-start\":\n return { enter: { x: 0, y: 0 }, exit: { x: \"-100%\", y: 0 } }\n default:\n return {}\n }\n}\nexport const slideVariants: Variants = {\n enter: ({\n delay,\n duration,\n enter,\n placement,\n transition,\n transitionEnd,\n } = {}) => ({\n ...getAnimationProps(placement).enter,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n placement,\n transition,\n transitionEnd,\n } = {}) => ({\n ...getAnimationProps(placement).exit,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n ...exit,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface SlideProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<SlideStyle> {}\n\nconst {\n PropsContext: SlidePropsContext,\n usePropsContext: useSlidePropsContext,\n withContext,\n} = createComponent<SlideProps, SlideStyle>(\"slide\", slideStyle)\n\nexport { SlidePropsContext, useSlidePropsContext }\n\n/*\n `Slide` is a component that shows or hides an element from the corners of the page.\n \n @see https://yamada-ui.com/docs/components/slide\n */\nexport const Slide = withContext<\"div\", SlideProps, \"placement\">(\n ({\n delay,\n duration = { enter: 0.4, exit: 0.3 },\n open: openProp,\n placement: placementProp,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp \|\| unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n const placement = useValue(placementProp)\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n placement,\n transition,\n transitionEnd,\n }),\n [delay, duration, placement, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={slideVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n { transferProps: [\"placement\"] },\n)()\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,qBAAqB,cAAuC;CAChE,QAAQ,WAAR;EACE,KAAK,eACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAG,GAAG;GAAQ;EAAE;EAC7D,KAAK,cACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAQ,GAAG;GAAE;EAAE;EAC5D,KAAK,aACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAG,GAAG;GAAO;EAAE;EAC5D,KAAK,gBACH,OAAO;GAAE,OAAO;IAAE,GAAG;IAAG,GAAG;GAAE;GAAG,MAAM;IAAE,GAAG;IAAS,GAAG;GAAE;EAAE;EAC7D,SACE,OAAO,CAAC;CACZ;AACF;AACA,MAAa,gBAA0B;CACrC,QAAQ,EACN,OACA,UACA,OACA,WACA,YACA,kBACE,CAAC,OAAO;EACV,GAAG,kBAAkB,SAAS,CAAC,CAAC;EAChC,YAAY,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,WACA,YACA,kBACE,CAAC,OAAO;EACV,GAAG,kBAAkB,SAAS,CAAC,CAAC;EAChC,YAAY,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAKA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,aAClB,EACC,OACA,WAAW;CAAE,OAAO;CAAK,MAAM;AAAI,GACnC,MAAM,UACN,WAAW,eACX,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CACzD,MAAM,YAAY,SAAS,aAAa;CAExC,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAW;EAAY;CAAa,CACxD;CAEA,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,GACA,EAAE,eAAe,CAAC,WAAW,EAAE,CACjC,CAAC,CAAC"}

package/dist/esm/components/slide-fade/slide-fade.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slide-fade.js","names":["motion"],"sources":["../../../../src/components/slide-fade/slide-fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { SlideFadeStyle } from \"./slide-fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { slideFadeStyle } from \"./slide-fade.style\"\n\nexport const slideFadeVariants: Variants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n x: 0,\n y: 0,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n } = {}) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n ...(reverse\n ? { transitionEnd: transitionEnd?.exit, x: offsetX, y: offsetY }\n : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd?.exit } }),\n ...exit,\n }),\n initial: ({\n delay,\n duration,\n initial,\n offsetX,\n offsetY,\n transition,\n transitionEnd,\n }) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n x: offsetX,\n y: offsetY,\n ...initial,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface SlideFadeProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<SlideFadeStyle> {\n /*\n The offset on the horizontal or `x` axis.\n \n @default 0\n /\n offsetX?: number \| string\n /\n The offset on the vertical or `y` axis.\n \n @default 8\n /\n offsetY?: number \| string\n /\n If `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out.\n \n @default true\n /\n reverse?: boolean\n}\n\nconst {\n PropsContext: SlideFadePropsContext,\n usePropsContext: useSlideFadePropsContext,\n withContext,\n} = createComponent<SlideFadeProps, SlideFadeStyle>(\n \"slide-fade\",\n slideFadeStyle,\n)\n\nexport { SlideFadePropsContext, useSlideFadePropsContext }\n\n/\n `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.\n \n @see https://yamada-ui.com/docs/components/slide-fade\n */\nexport const SlideFade = withContext<\"div\", SlideFadeProps>(\n ({\n delay,\n duration,\n offsetX = 0,\n offsetY = 8,\n open: openProp,\n reverse = true,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp \|\| unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n }),\n [delay, duration, offsetX, offsetY, reverse, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={slideFadeVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,oBAA8B;CACzC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,YAAY,iBAAiB,MAAM,YAAY,KAAK,~~EAAE~~,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,SACA,SACA,SACA,YACA,kBACE,CAAC,OAAO;EACV,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,IAAI,~~EAAE~~,OAAO,QAAQ;EACnE,GAAI,UACA;GAAE,eAAe,eAAe;GAAM,GAAG;GAAS,GAAG;EAAQ,IAC7D,EAAE,eAAe;GAAE,GAAG;GAAS,GAAG;GAAS,GAAG,eAAe;EAAK,EAAE;EACxE,GAAG;CACL;CACA,UAAU,EACR,OACA,UACA,SACA,SACA,SACA,YACA,qBACK;EACL,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,IAAI,~~EAAE~~,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;EACH,GAAG;EACH,GAAG;CACL;AACF;AAwBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,aACtB,EACC,OACA,UACA,UAAU,GACV,UAAU,GACV,MAAM,UACN,UAAU,MACV,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAS;EAAS;EAAS;EAAY;CAAa,CACxE;CAEA,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,~~EAAE~~"}
1	+ {"version":3,"file":"slide-fade.js","names":["motion"],"sources":["../../../../src/components/slide-fade/slide-fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { SlideFadeStyle } from \"./slide-fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { slideFadeStyle } from \"./slide-fade.style\"\n\nexport const slideFadeVariants: Variants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n x: 0,\n y: 0,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n } = {}) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n ...(reverse\n ? { transitionEnd: transitionEnd?.exit, x: offsetX, y: offsetY }\n : { transitionEnd: { x: offsetX, y: offsetY, ...transitionEnd?.exit } }),\n ...exit,\n }),\n initial: ({\n delay,\n duration,\n initial,\n offsetX,\n offsetY,\n transition,\n transitionEnd,\n }) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n x: offsetX,\n y: offsetY,\n ...initial,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface SlideFadeProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<SlideFadeStyle> {\n /*\n The offset on the horizontal or `x` axis.\n \n @default 0\n /\n offsetX?: number \| string\n /\n The offset on the vertical or `y` axis.\n \n @default 8\n /\n offsetY?: number \| string\n /\n If `true`, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out.\n \n @default true\n /\n reverse?: boolean\n}\n\nconst {\n PropsContext: SlideFadePropsContext,\n usePropsContext: useSlideFadePropsContext,\n withContext,\n} = createComponent<SlideFadeProps, SlideFadeStyle>(\n \"slide-fade\",\n slideFadeStyle,\n)\n\nexport { SlideFadePropsContext, useSlideFadePropsContext }\n\n/\n `SlideFade` is a component that gradually shows or hides an element while moving it from a specified position.\n \n @see https://yamada-ui.com/docs/components/slide-fade\n */\nexport const SlideFade = withContext<\"div\", SlideFadeProps>(\n ({\n delay,\n duration,\n offsetX = 0,\n offsetY = 8,\n open: openProp,\n reverse = true,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp \|\| unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n offsetX,\n offsetY,\n reverse,\n transition,\n transitionEnd,\n }),\n [delay, duration, offsetX, offsetY, reverse, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={slideFadeVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,oBAA8B;CACzC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,YAAY,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;EACH,GAAG;EACH,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,SACA,SACA,SACA,YACA,kBACE,CAAC,OAAO;EACV,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,GAAI,UACA;GAAE,eAAe,eAAe;GAAM,GAAG;GAAS,GAAG;EAAQ,IAC7D,EAAE,eAAe;GAAE,GAAG;GAAS,GAAG;GAAS,GAAG,eAAe;EAAK,EAAE;EACxE,GAAG;CACL;CACA,UAAU,EACR,OACA,UACA,SACA,SACA,SACA,YACA,qBACK;EACL,SAAS;EACT,YAAY,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;EACH,GAAG;EACH,GAAG;CACL;AACF;AAwBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACE,gBACF,cACA,cACF;;;;;;AASA,MAAa,YAAY,aACtB,EACC,OACA,UACA,UAAU,GACV,UAAU,GACV,MAAM,UACN,UAAU,MACV,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,SAAS,eACN;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAS;EAAS;EAAS;EAAY;CAAa,CACxE;CAEA,OACE,oBAAC,iBAAD;EAAyB;YACtB,OACC,oBAACA,SAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,CAAC,CAAC"}

package/dist/esm/components/slider/slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.js","names":[],"sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n CSSProps,\n GenericsComponent,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { SliderStyle } from \"./slider.style\"\nimport type { UseSliderProps, UseSliderReturn } from \"./use-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr, isNumber } from \"../../utils\"\nimport { sliderStyle } from \"./slider.style\"\nimport { useSlider } from \"./use-slider\"\n\ninterface ComponentContext extends Pick<\n UseSliderReturn,\n \| \"getInputProps\"\n \| \"getMarkProps\"\n \| \"getRangeProps\"\n \| \"getThumbProps\"\n \| \"getTrackProps\"\n \| \"range\"\n> {}\n\nexport interface SliderRootProps<Y extends [number, number] \| number = number>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n Omit<UseSliderProps<Y>, \"orientation\">,\n ThemeProps<SliderStyle> {\n /*\n The fill color of the indicator.\n /\n indicatorFill?: CSSProps[\"color\"]\n /\n The rounded of the indicator.\n /\n indicatorRounded?: CSSProps[\"rounded\"]\n /\n The marks to display on the slider.\n /\n marks?: SliderMarksProps[\"marks\"]\n /\n The fill color of the range.\n /\n rangeFill?: CSSProps[\"color\"]\n /\n The fill color of the thumb.\n /\n thumbFill?: CSSProps[\"color\"]\n /\n The rounded of the thumb.\n /\n thumbRounded?: CSSProps[\"rounded\"]\n /\n The size of the thumb.\n /\n thumbSize?: CSSProps[\"boxSize\"]\n /\n The stroke color of the thumb.\n /\n thumbStroke?: CSSProps[\"color\"]\n /\n The fill color of the track.\n /\n trackFill?: CSSProps[\"color\"]\n /\n The rounded of the track.\n /\n trackRounded?: CSSProps[\"rounded\"]\n /\n The size of the track.\n /\n trackSize?: CSSProps[\"boxSize\"]\n /\n Props for the input element.\n /\n inputProps?: SliderInputProps\n /\n Props for the marks element.\n /\n marksProps?: Partial<SliderMarksProps>\n /\n Props for the range element.\n /\n rangeProps?: SliderRangeProps\n /\n Props for the thumb element.\n /\n thumbProps?: SliderThumbProps\n /\n Props for the track element.\n /\n trackProps?: SliderTrackProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SliderPropsContext,\n useComponentContext,\n usePropsContext: useSliderPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SliderRootProps, SliderStyle, ComponentContext>(\n \"slider\",\n sliderStyle,\n)\n\nexport { SliderPropsContext, useSliderPropsContext }\n\n/\n `Slider` is a component used for allowing users to select a value from a range.\n \n @see https://yamada-ui.com/docs/components/slider\n /\nexport const SliderRoot = withProvider<\"input\", SliderRootProps, \"orientation\">(\n <Y extends [number, number] \| number = number>({\n children,\n marks,\n orientation: orientationProp,\n inputProps,\n marksProps,\n rangeProps,\n thumbProps,\n trackProps,\n ...rest\n }: SliderRootProps<Y>) => {\n const orientation = useValue(orientationProp)\n const {\n range,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n } = useSlider<Y>({ orientation, ...rest })\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <SliderTrack {...trackProps}>\n <SliderRange {...rangeProps} />\n\n {range ? (\n <SliderThumbs {...thumbProps} />\n ) : (\n <SliderThumb {...thumbProps} />\n )}\n </SliderTrack>\n\n {marks ? <SliderMarks marks={marks} {...marksProps} /> : null}\n </>\n )\n }, [children, marks, marksProps, range, rangeProps, thumbProps, trackProps])\n const context = useMemo(\n () => ({\n range,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getThumbProps,\n getTrackProps,\n }),\n [\n range,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getThumbProps,\n getTrackProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>\n <SliderInput {...inputProps} />\n\n {computedChildren}\n </styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)(\n undefined,\n ({\n indicatorFill,\n indicatorRounded,\n rangeFill,\n thumbFill,\n thumbRounded,\n thumbSize,\n thumbStroke,\n trackFill,\n trackRounded,\n trackSize,\n ...rest\n }) => ({\n \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n \"--indicator-rounded\": varAttr(indicatorRounded, \"radii\"),\n \"--range-fill\": varAttr(rangeFill, \"colors\"),\n \"--thumb-fill\": varAttr(thumbFill, \"colors\"),\n \"--thumb-rounded\": varAttr(thumbRounded, \"radii\"),\n \"--thumb-size\": varAttr(thumbSize, \"sizes\"),\n \"--thumb-stroke\": varAttr(thumbStroke, \"colors\"),\n \"--track-fill\": varAttr(trackFill, \"colors\"),\n \"--track-rounded\": varAttr(trackRounded, \"radii\"),\n \"--track-size\": varAttr(trackSize, \"sizes\"),\n ...rest,\n }),\n) as GenericsComponent<{\n <Y extends [number, number] \| number = number>(\n props: SliderRootProps<Y>,\n ): ReactElement\n}>\n\ninterface SliderInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst SliderInput: FC<SliderInputProps> = () => {\n const { range, getInputProps } = useComponentContext()\n\n return range ? (\n Array.from({ length: 2 }).map((_, index) => (\n <styled.input key={index} {...getInputProps({ index })} />\n ))\n ) : (\n <styled.input {...getInputProps()} />\n )\n}\n\nexport interface SliderTrackProps extends HTMLStyledProps {}\n\nexport const SliderTrack = withContext<\"div\", SliderTrackProps>(\"div\", \"track\")(\n undefined,\n (props) => {\n const { getTrackProps } = useComponentContext()\n\n return getTrackProps(props)\n },\n)\n\nexport interface SliderRangeProps extends HTMLStyledProps {}\n\nexport const SliderRange = withContext<\"div\", SliderRangeProps>(\"div\", \"range\")(\n undefined,\n (props) => {\n const { getRangeProps } = useComponentContext()\n\n return getRangeProps(props)\n },\n)\n\nexport interface SliderMarkProps extends HTMLStyledProps {\n /\n The value of the mark.\n /\n value: number\n /\n Whether the mark is an indicator.\n \n @default true\n /\n indicator?: boolean\n}\n\nexport const SliderMark = withContext<\"div\", SliderMarkProps>(\"div\", \"mark\")(\n undefined,\n ({ indicator = true, ...props }) => {\n const { getMarkProps } = useComponentContext()\n\n return getMarkProps({ \"data-indicator\": dataAttr(indicator), ...props })\n },\n)\n\nexport interface SliderMarksProps extends Omit<SliderMarkProps, \"value\"> {\n /\n The marks to display on the slider.\n /\n marks: (number \| { label: ReactNode; value: number; indicator?: boolean })[]\n}\n\nexport const SliderMarks: FC<SliderMarksProps> = ({ marks, ...props }) => {\n return (\n <>\n {marks.map((mark, index) => {\n if (isNumber(mark)) {\n return <SliderMark key={index} value={mark} {...props} />\n } else {\n const { indicator, label, value } = mark\n\n return (\n <SliderMark key={index} indicator={indicator} value={value}>\n {label}\n </SliderMark>\n )\n }\n })}\n </>\n )\n}\n\nexport interface SliderThumbProps extends HTMLStyledProps {\n /\n The index of the thumb.\n */\n index?: number\n}\n\nexport const SliderThumb = withContext<\"div\", SliderThumbProps>(\"div\", \"thumb\")(\n undefined,\n (props) => {\n const { getThumbProps } = useComponentContext()\n\n return getThumbProps(props)\n },\n)\n\nexport interface SliderThumbsProps extends SliderThumbProps {}\n\nexport const SliderThumbs: FC<SliderThumbsProps> = (props) => {\n return (\n <>\n {Array.from({ length: 2 }).map((_, index) => (\n <SliderThumb key={index} index={index} {...props} />\n ))}\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;AAmGA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,UACA,WACF;;;;;;AASA,MAAa,aAAa,cACuB,EAC7C,UACA,OACA,aAAa,iBACb,YACA,YACA,YACA,YACA,YACA,GAAG,WACqB;CAExB,MAAM,EACJ,OACA,eACA,cACA,eACA,cACA,eACA,kBACE,UAAa;EAAE,aATC,SAAS,eASA;EAAG,GAAG;CAAK,CAAC;CACzC,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,qBAAC,aAAD;GAAa,GAAI;aAAjB,CACE,oBAAC,aAAD,EAAa,GAAI,WAAa,CAAA,GAE7B,QACC,oBAAC,cAAD,EAAc,GAAI,WAAa,CAAA,IAE/B,oBAAC,aAAD,EAAa,GAAI,WAAa,CAAA,CAErB;MAEZ,QAAQ,oBAAC,aAAD;GAAoB;GAAO,GAAI;EAAa,CAAA,IAAI,IACzD,EAAA,CAAA;CAEN,GAAG;EAAC;EAAU;EAAO;EAAY;EAAO;EAAY;EAAY;CAAU,CAAC;CAoB3E,OACE,oBAAC,kBAAD;EAAkB,OApBJ,eACP;GACL;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;EACF,CAI+B;YAC7B,qBAAC,OAAO,KAAR;GAAY,GAAI,aAAa;aAA7B,CACE,oBAAC,aAAD,EAAa,GAAI,WAAa,CAAA,GAE7B,gBACS;;CACI,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,EACE,KAAA,IACC,EACC,eACA,kBACA,WACA,WACA,cACA,WACA,aACA,WACA,cACA,WACA,GAAG,YACE;CACL,oBAAoB,QAAQ,eAAe,QAAQ;CACnD,uBAAuB,QAAQ,kBAAkB,OAAO;CACxD,gBAAgB,QAAQ,WAAW,QAAQ;CAC3C,gBAAgB,QAAQ,WAAW,QAAQ;CAC3C,mBAAmB,QAAQ,cAAc,OAAO;CAChD,gBAAgB,QAAQ,WAAW,OAAO;CAC1C,kBAAkB,QAAQ,aAAa,QAAQ;CAC/C,gBAAgB,QAAQ,WAAW,QAAQ;CAC3C,mBAAmB,QAAQ,cAAc,OAAO;CAChD,gBAAgB,QAAQ,WAAW,OAAO;CAC1C,GAAG;AACL,EACF;AAQA,MAAM,oBAA0C;CAC9C,MAAM,EAAE,OAAO,kBAAkB,oBAAoB;CAErD,OAAO,QACL,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,UAChC,oBAAC,OAAO,OAAR,EAA0B,GAAI,cAAc,EAAE,MAAM,CAAC,EAAI,GAAtC,KAAsC,CAC1D,IAED,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;AAExC;AAIA,MAAa,cAAc,YAAqC,OAAO,OAAO,EAC5E,KAAA,IACC,UAAU;CACT,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CACF;AAIA,MAAa,cAAc,YAAqC,OAAO,OAAO,EAC5E,KAAA,IACC,UAAU;CACT,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CACF;AAeA,MAAa,aAAa,YAAoC,OAAO,MAAM,EACzE,KAAA,IACC,EAAE,YAAY,MAAM,GAAG,YAAY;CAClC,MAAM,EAAE,iBAAiB,oBAAoB;CAE7C,OAAO,aAAa;EAAE,mBAAA,GAAA,cAAA,UAA2B,SAAS;EAAG,GAAG;CAAM,CAAC;AACzE,CACF;AASA,MAAa,eAAqC,EAAE,OAAO,GAAG,YAAY;CACxE,OACE,oBAAA,YAAA,EAAA,UACG,MAAM,KAAK,MAAM,UAAU;EAC1B,KAAA,GAAA,cAAA,UAAa,IAAI,GACf,OAAO,oBAAC,YAAD;GAAwB,OAAO;GAAM,GAAI;EAAQ,GAAhC,KAAgC;OACnD;GACL,MAAM,EAAE,WAAW,OAAO,UAAU;GAEpC,OACE,oBAAC,YAAD;IAAmC;IAAkB;cAClD;GACS,GAFK,KAEL;EAEhB;CACF,CAAC,EACD,CAAA;AAEN;AASA,MAAa,cAAc,YAAqC,OAAO,OAAO,EAC5E,KAAA,IACC,UAAU;CACT,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CACF;AAIA,MAAa,gBAAuC,UAAU;CAC5D,OACE,oBAAA,YAAA,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,UACjC,oBAAC,aAAD;EAAgC;EAAO,GAAI;CAAQ,GAAjC,KAAiC,CACpD,EACD,CAAA;AAEN"}
1	+ {"version":3,"file":"slider.js","names":[],"sources":["../../../../src/components/slider/slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactElement, ReactNode } from \"react\"\nimport type {\n CSSProps,\n GenericsComponent,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { SliderStyle } from \"./slider.style\"\nimport type { UseSliderProps, UseSliderReturn } from \"./use-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled, varAttr } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { dataAttr, isNumber } from \"../../utils\"\nimport { sliderStyle } from \"./slider.style\"\nimport { useSlider } from \"./use-slider\"\n\ninterface ComponentContext extends Pick<\n UseSliderReturn,\n \| \"getInputProps\"\n \| \"getMarkProps\"\n \| \"getRangeProps\"\n \| \"getThumbProps\"\n \| \"getTrackProps\"\n \| \"range\"\n> {}\n\nexport interface SliderRootProps<Y extends [number, number] \| number = number>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n Omit<UseSliderProps<Y>, \"orientation\">,\n ThemeProps<SliderStyle> {\n /*\n The fill color of the indicator.\n /\n indicatorFill?: CSSProps[\"color\"]\n /\n The rounded of the indicator.\n /\n indicatorRounded?: CSSProps[\"rounded\"]\n /\n The marks to display on the slider.\n /\n marks?: SliderMarksProps[\"marks\"]\n /\n The fill color of the range.\n /\n rangeFill?: CSSProps[\"color\"]\n /\n The fill color of the thumb.\n /\n thumbFill?: CSSProps[\"color\"]\n /\n The rounded of the thumb.\n /\n thumbRounded?: CSSProps[\"rounded\"]\n /\n The size of the thumb.\n /\n thumbSize?: CSSProps[\"boxSize\"]\n /\n The stroke color of the thumb.\n /\n thumbStroke?: CSSProps[\"color\"]\n /\n The fill color of the track.\n /\n trackFill?: CSSProps[\"color\"]\n /\n The rounded of the track.\n /\n trackRounded?: CSSProps[\"rounded\"]\n /\n The size of the track.\n /\n trackSize?: CSSProps[\"boxSize\"]\n /\n Props for the input element.\n /\n inputProps?: SliderInputProps\n /\n Props for the marks element.\n /\n marksProps?: Partial<SliderMarksProps>\n /\n Props for the range element.\n /\n rangeProps?: SliderRangeProps\n /\n Props for the thumb element.\n /\n thumbProps?: SliderThumbProps\n /\n Props for the track element.\n /\n trackProps?: SliderTrackProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SliderPropsContext,\n useComponentContext,\n usePropsContext: useSliderPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SliderRootProps, SliderStyle, ComponentContext>(\n \"slider\",\n sliderStyle,\n)\n\nexport { SliderPropsContext, useSliderPropsContext }\n\n/\n `Slider` is a component used for allowing users to select a value from a range.\n \n @see https://yamada-ui.com/docs/components/slider\n /\nexport const SliderRoot = withProvider<\"input\", SliderRootProps, \"orientation\">(\n <Y extends [number, number] \| number = number>({\n children,\n marks,\n orientation: orientationProp,\n inputProps,\n marksProps,\n rangeProps,\n thumbProps,\n trackProps,\n ...rest\n }: SliderRootProps<Y>) => {\n const orientation = useValue(orientationProp)\n const {\n range,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n } = useSlider<Y>({ orientation, ...rest })\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <>\n <SliderTrack {...trackProps}>\n <SliderRange {...rangeProps} />\n\n {range ? (\n <SliderThumbs {...thumbProps} />\n ) : (\n <SliderThumb {...thumbProps} />\n )}\n </SliderTrack>\n\n {marks ? <SliderMarks marks={marks} {...marksProps} /> : null}\n </>\n )\n }, [children, marks, marksProps, range, rangeProps, thumbProps, trackProps])\n const context = useMemo(\n () => ({\n range,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getThumbProps,\n getTrackProps,\n }),\n [\n range,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getThumbProps,\n getTrackProps,\n ],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>\n <SliderInput {...inputProps} />\n\n {computedChildren}\n </styled.div>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)(\n undefined,\n ({\n indicatorFill,\n indicatorRounded,\n rangeFill,\n thumbFill,\n thumbRounded,\n thumbSize,\n thumbStroke,\n trackFill,\n trackRounded,\n trackSize,\n ...rest\n }) => ({\n \"--indicator-fill\": varAttr(indicatorFill, \"colors\"),\n \"--indicator-rounded\": varAttr(indicatorRounded, \"radii\"),\n \"--range-fill\": varAttr(rangeFill, \"colors\"),\n \"--thumb-fill\": varAttr(thumbFill, \"colors\"),\n \"--thumb-rounded\": varAttr(thumbRounded, \"radii\"),\n \"--thumb-size\": varAttr(thumbSize, \"sizes\"),\n \"--thumb-stroke\": varAttr(thumbStroke, \"colors\"),\n \"--track-fill\": varAttr(trackFill, \"colors\"),\n \"--track-rounded\": varAttr(trackRounded, \"radii\"),\n \"--track-size\": varAttr(trackSize, \"sizes\"),\n ...rest,\n }),\n) as GenericsComponent<{\n <Y extends [number, number] \| number = number>(\n props: SliderRootProps<Y>,\n ): ReactElement\n}>\n\ninterface SliderInputProps extends HTMLStyledProps<\"input\"> {}\n\nconst SliderInput: FC<SliderInputProps> = () => {\n const { range, getInputProps } = useComponentContext()\n\n return range ? (\n Array.from({ length: 2 }).map((_, index) => (\n <styled.input key={index} {...getInputProps({ index })} />\n ))\n ) : (\n <styled.input {...getInputProps()} />\n )\n}\n\nexport interface SliderTrackProps extends HTMLStyledProps {}\n\nexport const SliderTrack = withContext<\"div\", SliderTrackProps>(\"div\", \"track\")(\n undefined,\n (props) => {\n const { getTrackProps } = useComponentContext()\n\n return getTrackProps(props)\n },\n)\n\nexport interface SliderRangeProps extends HTMLStyledProps {}\n\nexport const SliderRange = withContext<\"div\", SliderRangeProps>(\"div\", \"range\")(\n undefined,\n (props) => {\n const { getRangeProps } = useComponentContext()\n\n return getRangeProps(props)\n },\n)\n\nexport interface SliderMarkProps extends HTMLStyledProps {\n /\n The value of the mark.\n /\n value: number\n /\n Whether the mark is an indicator.\n \n @default true\n /\n indicator?: boolean\n}\n\nexport const SliderMark = withContext<\"div\", SliderMarkProps>(\"div\", \"mark\")(\n undefined,\n ({ indicator = true, ...props }) => {\n const { getMarkProps } = useComponentContext()\n\n return getMarkProps({ \"data-indicator\": dataAttr(indicator), ...props })\n },\n)\n\nexport interface SliderMarksProps extends Omit<SliderMarkProps, \"value\"> {\n /\n The marks to display on the slider.\n /\n marks: (number \| { label: ReactNode; value: number; indicator?: boolean })[]\n}\n\nexport const SliderMarks: FC<SliderMarksProps> = ({ marks, ...props }) => {\n return (\n <>\n {marks.map((mark, index) => {\n if (isNumber(mark)) {\n return <SliderMark key={index} value={mark} {...props} />\n } else {\n const { indicator, label, value } = mark\n\n return (\n <SliderMark key={index} indicator={indicator} value={value}>\n {label}\n </SliderMark>\n )\n }\n })}\n </>\n )\n}\n\nexport interface SliderThumbProps extends HTMLStyledProps {\n /\n The index of the thumb.\n */\n index?: number\n}\n\nexport const SliderThumb = withContext<\"div\", SliderThumbProps>(\"div\", \"thumb\")(\n undefined,\n (props) => {\n const { getThumbProps } = useComponentContext()\n\n return getThumbProps(props)\n },\n)\n\nexport interface SliderThumbsProps extends SliderThumbProps {}\n\nexport const SliderThumbs: FC<SliderThumbsProps> = (props) => {\n return (\n <>\n {Array.from({ length: 2 }).map((_, index) => (\n <SliderThumb key={index} index={index} {...props} />\n ))}\n </>\n )\n}\n"],"mappings":"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"}

package/dist/esm/components/slider/use-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] \| number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n \n @default 0\n /\n betweenThumbs?: number\n /\n The initial value of the slider.\n /\n defaultValue?: Y\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The maximum allowed value of the slider. Cannot be less than min.\n \n @default 100\n /\n max?: number\n /\n The minimum allowed value of the slider. Cannot be greater than max.\n \n @default 0\n /\n min?: number\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The orientation of the slider.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The step in which increments or decrements have to be made.\n \n @default 1\n /\n step?: number\n /\n The value of the slider.\n /\n value?: Y\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: number, index: number) => string \| undefined\n /\n Function called whenever the slider value changes.\n /\n onChange?: (value: Y) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: Y) => void\n /\n Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] \| number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value as Y)\n }\n\n onChange(currentIndex.current, panValue)\n },\n })\n const range = !isNumber(value)\n const percent = (\n range\n ? value.map((value) => valueToPercent(value, min, max))\n : valueToPercent(value, min, max)\n ) as Y extends number ? number : number[]\n const tenStep = (max - min) / 10\n const oneStep = step \|\| (max - min) / 100\n\n if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n const getMinMax = useCallback(\n (index: number) => {\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = range ? value[oppositeIndex] : value\n\n return {\n max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n }\n },\n [betweenThumbs, max, min, range, value],\n )\n\n const getPanValue = useCallback(\n ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n const diff = orientation === \"horizontal\" ? x - left : bottom - y\n const length = orientation === \"horizontal\" ? width : height\n const percent = diff / length\n\n let nextValue = percentToValue(percent, min, max)\n\n nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [orientation, min, max, step],\n )\n\n const onChange = useCallback(\n (index: number, value: number) => {\n if (!interactive) return\n\n const { max, min } = getMinMax(index)\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue((prev) => {\n if (isArray(prev)) {\n const next = [...prev]\n\n next[index] = value\n\n return next as Y\n } else {\n return value as Y\n }\n })\n },\n [getMinMax, interactive, oneStep, setValue],\n )\n\n const stepUp = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! + step)\n : onChange(index, value + step),\n [oneStep, range, onChange, value],\n )\n\n const stepDown = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! - step)\n : onChange(index, value - step),\n [oneStep, range, onChange, value],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n const { max, min } = getMinMax(index)\n\n runKeyAction(ev, {\n ArrowDown: () => stepDown(index),\n ArrowLeft: () => stepDown(index),\n ArrowRight: () => stepUp(index),\n ArrowUp: () => stepUp(index),\n End: () => onChange(index, max),\n Home: () => onChange(index, min),\n PageDown: () => stepDown(index, tenStep),\n PageUp: () => stepUp(index, tenStep),\n })\n },\n [getMinMax, onChange, stepDown, stepUp, tenStep],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const computedProps: HTMLProps = mergeProps(\n dataProps,\n { \"data-orientation\": orientation },\n rest,\n props,\n { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n )()\n\n computedProps.style ??= {}\n\n if (isArray(percent)) {\n computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n } else {\n computedProps.style[\"--range-start\"] = \"0%\"\n computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n }\n\n return computedProps\n },\n [dataProps, eventProps, orientation, percent, rest],\n )\n\n const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n ({ index = 0, ...props } = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: range ? value[index]! : value,\n ...props,\n ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n }),\n [\n dataProps,\n ariaProps,\n id,\n name,\n disabled,\n readOnly,\n required,\n range,\n value,\n ref,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props) =>\n getPanEventProps({\n ...dataProps,\n \"data-orientation\": orientation,\n ...props,\n }),\n [dataProps, getPanEventProps, orientation],\n )\n\n const getRangeProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n \"data-orientation\": orientation,\n \"data-range\": dataAttr(range),\n ...props,\n }),\n [dataProps, orientation, range],\n )\n\n const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n useCallback(\n ({ style, value: valueProp, ...props }) => {\n const between = range\n ? value[0] < valueProp && valueProp < value[1]\n : valueProp < value\n const percent = valueToPercent(valueProp, min, max)\n\n return {\n ...dataProps,\n \"aria-hidden\": true,\n \"data-between\": dataAttr(between),\n \"data-orientation\": orientation,\n role: \"presentation\",\n ...props,\n style: { ...style, \"--mark-position\": `${percent}%` },\n }\n },\n [dataProps, max, min, orientation, range, value],\n )\n\n const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index = 0, ...rest } = {}) => {\n const { max, min } = getMinMax(index)\n\n const props: HTMLProps = {\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Slider thumb\"),\n \"aria-orientation\": orientation,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n }\n\n if (range) {\n const currentValue = value[index]!\n\n props[\"data-start\"] = dataAttr(index === 0)\n props[\"data-end\"] = dataAttr(index === 1)\n props[\"aria-valuenow\"] = currentValue\n props[\"aria-valuetext\"] =\n ariaValueText ??\n getAriaValueText?.(currentValue, index) ??\n currentValue.toString()\n } else {\n props[\"data-end\"] = dataAttr(index === 0)\n props[\"aria-valuenow\"] = value\n props[\"aria-valuetext\"] =\n ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n }\n\n return props\n },\n [\n t,\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n getMinMax,\n interactive,\n onKeyDown,\n orientation,\n range,\n value,\n ],\n )\n\n return {\n percent,\n range,\n setValue,\n stepDown,\n stepUp,\n value,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] \| number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n \n @default 0\n /\n betweenThumbs?: number\n /\n The initial value of the slider.\n /\n defaultValue?: Y\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The maximum allowed value of the slider. Cannot be less than min.\n \n @default 100\n /\n max?: number\n /\n The minimum allowed value of the slider. Cannot be greater than max.\n \n @default 0\n /\n min?: number\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The orientation of the slider.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The step in which increments or decrements have to be made.\n \n @default 1\n /\n step?: number\n /\n The value of the slider.\n /\n value?: Y\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: number, index: number) => string \| undefined\n /\n Function called whenever the slider value changes.\n /\n onChange?: (value: Y) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: Y) => void\n /\n Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] \| number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value as Y)\n }\n\n onChange(currentIndex.current, panValue)\n },\n })\n const range = !isNumber(value)\n const percent = (\n range\n ? value.map((value) => valueToPercent(value, min, max))\n : valueToPercent(value, min, max)\n ) as Y extends number ? number : number[]\n const tenStep = (max - min) / 10\n const oneStep = step \|\| (max - min) / 100\n\n if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n const getMinMax = useCallback(\n (index: number) => {\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = range ? value[oppositeIndex] : value\n\n return {\n max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n }\n },\n [betweenThumbs, max, min, range, value],\n )\n\n const getPanValue = useCallback(\n ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n const diff = orientation === \"horizontal\" ? x - left : bottom - y\n const length = orientation === \"horizontal\" ? width : height\n const percent = diff / length\n\n let nextValue = percentToValue(percent, min, max)\n\n nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [orientation, min, max, step],\n )\n\n const onChange = useCallback(\n (index: number, value: number) => {\n if (!interactive) return\n\n const { max, min } = getMinMax(index)\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue((prev) => {\n if (isArray(prev)) {\n const next = [...prev]\n\n next[index] = value\n\n return next as Y\n } else {\n return value as Y\n }\n })\n },\n [getMinMax, interactive, oneStep, setValue],\n )\n\n const stepUp = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! + step)\n : onChange(index, value + step),\n [oneStep, range, onChange, value],\n )\n\n const stepDown = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! - step)\n : onChange(index, value - step),\n [oneStep, range, onChange, value],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n const { max, min } = getMinMax(index)\n\n runKeyAction(ev, {\n ArrowDown: () => stepDown(index),\n ArrowLeft: () => stepDown(index),\n ArrowRight: () => stepUp(index),\n ArrowUp: () => stepUp(index),\n End: () => onChange(index, max),\n Home: () => onChange(index, min),\n PageDown: () => stepDown(index, tenStep),\n PageUp: () => stepUp(index, tenStep),\n })\n },\n [getMinMax, onChange, stepDown, stepUp, tenStep],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const computedProps: HTMLProps = mergeProps(\n dataProps,\n { \"data-orientation\": orientation },\n rest,\n props,\n { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n )()\n\n computedProps.style ??= {}\n\n if (isArray(percent)) {\n computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n } else {\n computedProps.style[\"--range-start\"] = \"0%\"\n computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n }\n\n return computedProps\n },\n [dataProps, eventProps, orientation, percent, rest],\n )\n\n const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n ({ index = 0, ...props } = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: range ? value[index]! : value,\n ...props,\n ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n }),\n [\n dataProps,\n ariaProps,\n id,\n name,\n disabled,\n readOnly,\n required,\n range,\n value,\n ref,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props) =>\n getPanEventProps({\n ...dataProps,\n \"data-orientation\": orientation,\n ...props,\n }),\n [dataProps, getPanEventProps, orientation],\n )\n\n const getRangeProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n \"data-orientation\": orientation,\n \"data-range\": dataAttr(range),\n ...props,\n }),\n [dataProps, orientation, range],\n )\n\n const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n useCallback(\n ({ style, value: valueProp, ...props }) => {\n const between = range\n ? value[0] < valueProp && valueProp < value[1]\n : valueProp < value\n const percent = valueToPercent(valueProp, min, max)\n\n return {\n ...dataProps,\n \"aria-hidden\": true,\n \"data-between\": dataAttr(between),\n \"data-orientation\": orientation,\n role: \"presentation\",\n ...props,\n style: { ...style, \"--mark-position\": `${percent}%` },\n }\n },\n [dataProps, max, min, orientation, range, value],\n )\n\n const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index = 0, ...rest } = {}) => {\n const { max, min } = getMinMax(index)\n\n const props: HTMLProps = {\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Slider thumb\"),\n \"aria-orientation\": orientation,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n }\n\n if (range) {\n const currentValue = value[index]!\n\n props[\"data-start\"] = dataAttr(index === 0)\n props[\"data-end\"] = dataAttr(index === 1)\n props[\"aria-valuenow\"] = currentValue\n props[\"aria-valuetext\"] =\n ariaValueText ??\n getAriaValueText?.(currentValue, index) ??\n currentValue.toString()\n } else {\n props[\"data-end\"] = dataAttr(index === 0)\n props[\"aria-valuenow\"] = value\n props[\"aria-valuetext\"] =\n ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n }\n\n return props\n },\n [\n t,\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n getMinMax,\n interactive,\n onKeyDown,\n orientation,\n range,\n value,\n ],\n )\n\n return {\n percent,\n range,\n setValue,\n stepDown,\n stepUp,\n value,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}

package/dist/esm/components/slot/slot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slot.js","names":[],"sources":["../../../../src/components/slot/slot.tsx"],"sourcesContent":["import type {\n FC,\n HTMLAttributes,\n PropsWithChildren,\n RefAttributes,\n} from \"react\"\nimport { Children, cloneElement, isValidElement } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useFindChild, useValidChildren } from \"../../utils\"\n\nexport interface SlotProps\n extends\n HTMLAttributes<HTMLElement>,\n RefAttributes<HTMLElement>,\n PropsWithChildren {}\n\n/*\n `Slot` is a component that merges its props onto its immediate child.\n \n @see https://yamada-ui.com/docs/components/slot\n */\nexport const Slot: FC<SlotProps> = ({ children, ...rest }) => {\n const validChildren = useValidChildren(children)\n const slottable = useFindChild(validChildren, Slottable)\n\n if (slottable) {\n const newElement = slottable.props.children\n\n const newChildren = validChildren.map((child) => {\n if (child === slottable) {\n if (Children.count(newElement) > 1) return Children.only(null)\n return isValidElement<PropsWithChildren>(newElement)\n ? newElement.props.children\n : null\n } else {\n return child\n }\n })\n\n return (\n <SlotClone {...rest}>\n {isValidElement(newElement)\n ? cloneElement(newElement, undefined, newChildren)\n : null}\n </SlotClone>\n )\n }\n\n return <SlotClone {...rest}>{children}</SlotClone>\n}\n\ninterface SlotCloneProps\n extends RefAttributes<HTMLElement>, PropsWithChildren {}\n\nconst SlotClone: FC<SlotCloneProps> = ({ children, ...rest }) => {\n if (isValidElement<RefAttributes<HTMLElement>>(children))\n return cloneElement(children, mergeProps(rest, children.props)())\n\n return Children.count(children) > 1 ? Children.only(null) : null\n}\n\nexport const Slottable: FC<PropsWithChildren> = ({ children }) => {\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return <>{children}</>\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,QAAuB,EAAE,UAAU,GAAG,WAAW;CAC5D,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,YAAY,aAAa,eAAe,SAAS;CAEvD,IAAI,WAAW;EACb,MAAM,aAAa,UAAU,MAAM;EAEnC,MAAM,cAAc,cAAc,KAAK,UAAU;GAC/C,IAAI,UAAU,WAAW;IACvB,IAAI,SAAS,MAAM,UAAU,IAAI,GAAG,OAAO,SAAS,KAAK,IAAI;IAC7D,OAAO,eAAkC,UAAU,IAC/C,WAAW,MAAM,WACjB;GACN,OACE,OAAO;EAEX,CAAC;EAED,OACE,oBAAC,WAAD;GAAW,GAAI;aACZ,eAAe,UAAU,IACtB,aAAa,YAAY,KAAA,GAAW,WAAW,IAC/C;EACK,CAAA;CAEf;CAEA,OAAO,oBAAC,WAAD;EAAW,GAAI;EAAO;CAAoB,CAAA;AACnD;AAKA,MAAM,aAAiC,EAAE,UAAU,GAAG,WAAW;CAC/D,IAAI,eAA2C,QAAQ,GACrD,OAAO,aAAa,UAAU,WAAW,MAAM,SAAS,KAAK,~~EAAE~~,CAAC;CAElE,OAAO,SAAS,MAAM,QAAQ,IAAI,IAAI,SAAS,KAAK,IAAI,IAAI;AAC9D;AAEA,MAAa,aAAoC,EAAE,eAAe;CAEhE,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;AACvB"}
1	+ {"version":3,"file":"slot.js","names":[],"sources":["../../../../src/components/slot/slot.tsx"],"sourcesContent":["import type {\n FC,\n HTMLAttributes,\n PropsWithChildren,\n RefAttributes,\n} from \"react\"\nimport { Children, cloneElement, isValidElement } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useFindChild, useValidChildren } from \"../../utils\"\n\nexport interface SlotProps\n extends\n HTMLAttributes<HTMLElement>,\n RefAttributes<HTMLElement>,\n PropsWithChildren {}\n\n/*\n `Slot` is a component that merges its props onto its immediate child.\n \n @see https://yamada-ui.com/docs/components/slot\n */\nexport const Slot: FC<SlotProps> = ({ children, ...rest }) => {\n const validChildren = useValidChildren(children)\n const slottable = useFindChild(validChildren, Slottable)\n\n if (slottable) {\n const newElement = slottable.props.children\n\n const newChildren = validChildren.map((child) => {\n if (child === slottable) {\n if (Children.count(newElement) > 1) return Children.only(null)\n return isValidElement<PropsWithChildren>(newElement)\n ? newElement.props.children\n : null\n } else {\n return child\n }\n })\n\n return (\n <SlotClone {...rest}>\n {isValidElement(newElement)\n ? cloneElement(newElement, undefined, newChildren)\n : null}\n </SlotClone>\n )\n }\n\n return <SlotClone {...rest}>{children}</SlotClone>\n}\n\ninterface SlotCloneProps\n extends RefAttributes<HTMLElement>, PropsWithChildren {}\n\nconst SlotClone: FC<SlotCloneProps> = ({ children, ...rest }) => {\n if (isValidElement<RefAttributes<HTMLElement>>(children))\n return cloneElement(children, mergeProps(rest, children.props)())\n\n return Children.count(children) > 1 ? Children.only(null) : null\n}\n\nexport const Slottable: FC<PropsWithChildren> = ({ children }) => {\n // eslint-disable-next-line react/jsx-no-useless-fragment\n return <>{children}</>\n}\n"],"mappings":";;;;;;;;;;AAqBA,MAAa,QAAuB,EAAE,UAAU,GAAG,WAAW;CAC5D,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,YAAY,aAAa,eAAe,SAAS;CAEvD,IAAI,WAAW;EACb,MAAM,aAAa,UAAU,MAAM;EAEnC,MAAM,cAAc,cAAc,KAAK,UAAU;GAC/C,IAAI,UAAU,WAAW;IACvB,IAAI,SAAS,MAAM,UAAU,IAAI,GAAG,OAAO,SAAS,KAAK,IAAI;IAC7D,OAAO,eAAkC,UAAU,IAC/C,WAAW,MAAM,WACjB;GACN,OACE,OAAO;EAEX,CAAC;EAED,OACE,oBAAC,WAAD;GAAW,GAAI;aACZ,eAAe,UAAU,IACtB,aAAa,YAAY,KAAA,GAAW,WAAW,IAC/C;EACK,CAAA;CAEf;CAEA,OAAO,oBAAC,WAAD;EAAW,GAAI;EAAO;CAAoB,CAAA;AACnD;AAKA,MAAM,aAAiC,EAAE,UAAU,GAAG,WAAW;CAC/D,IAAI,eAA2C,QAAQ,GACrD,OAAO,aAAa,UAAU,WAAW,MAAM,SAAS,KAAK,CAAC,CAAC,CAAC;CAElE,OAAO,SAAS,MAAM,QAAQ,IAAI,IAAI,SAAS,KAAK,IAAI,IAAI;AAC9D;AAEA,MAAa,aAAoC,EAAE,eAAe;CAEhE,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;AACvB"}

package/dist/esm/components/snacks/snacks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"snacks.js","names":["motion","noop","Alert.Root","Alert.Loading","Alert.Icon","Alert.Title","Alert.Description"],"sources":["../../../../src/components/snacks/snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dispatch, RefObject, SetStateAction } from \"react\"\nimport type { CSSProps, HTMLStyledProps, SimpleDirection } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SnacksStyle } from \"./snacks.style\"\nimport type { Snack, UseSnacksReturn } from \"./use-snacks\"\nimport { AnimatePresence, useIsPresent } from \"motion/react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent, varAttr } from \"../../core\"\nimport { useTimeout } from \"../../hooks/use-timeout\"\nimport { dataAttr, handlerAll, noop, useUpdateEffect } from \"../../utils\"\nimport { Alert } from \"../alert\"\nimport { CloseButton } from \"../close-button\"\nimport { createTransition, motion } from \"../motion\"\nimport { snacksStyle } from \"./snacks.style\"\n\ninterface ComponentContext {\n direction: SimpleDirection\n elMapRef: RefObject<Map<number, HTMLDivElement \| null>>\n setExist: Dispatch<SetStateAction<boolean>>\n startIndex: number\n}\n\nexport interface SnacksProps extends HTMLMotionProps {\n /*\n The snacks created by `useSnacks`.\n /\n snacks: UseSnacksReturn[\"snacks\"]\n /\n The CSS `gap` property.\n \n @default 'md'\n /\n gap?: CSSProps[\"gap\"]\n /\n A property that provides spacing between the top and bottom.\n \n @default [0, \"lg\"]\n /\n gutter?: [CSSProps[\"paddingTop\"], CSSProps[\"paddingBottom\"]]\n /\n If `true`, apply gutter value to negative margins\n \n @default true\n /\n negativeMargins?: boolean\n /\n Props for the snacks list element.\n /\n listProps?: HTMLMotionProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SnacksPropsContext,\n useComponentContext,\n usePropsContext: useSnacksPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SnacksProps, SnacksStyle, ComponentContext>(\n \"snacks\",\n snacksStyle,\n)\n\nexport { SnacksPropsContext, useSnacksPropsContext }\n\nexport const Snacks = withProvider<\"div\", SnacksProps>(\n ({\n snacks: { direction = \"start\", items, startIndex = 0 },\n listProps,\n ...rest\n }) => {\n const count = items.length\n const elMapRef = useRef<Map<number, HTMLDivElement \| null>>(new Map())\n const [height, setHeight] = useState(0)\n const [exist, setExist] = useState(!!count)\n const show = !!count \|\| exist\n const context = useMemo(\n () => ({ direction, elMapRef, setExist, startIndex }),\n [direction, startIndex],\n )\n\n const onExitComplete = useCallback(() => {\n if (!count) setExist(false)\n }, [count])\n\n useEffect(() => {\n let height = 0\n\n if (!count) return\n\n const els = [...elMapRef.current.values()].slice(0, count)\n\n for (const el of els) {\n if (!el) continue\n\n let { offsetHeight, offsetTop } = el\n\n offsetHeight += offsetTop\n\n if (offsetHeight > height) height = offsetHeight\n }\n\n setHeight(height)\n }, [count, direction])\n\n useUpdateEffect(() => {\n if (count) setExist(true)\n }, [count])\n\n return (\n <ComponentContext value={context}>\n <AnimatePresence initial={false}>\n {show ? (\n <motion.div {...rest}>\n <SnackList custom={{ height }} {...listProps}>\n <AnimatePresence onExitComplete={onExitComplete}>\n {items.map((props, index) => {\n return (\n <Snack\n key={props.id}\n index={index}\n lastIndex={count - index - 1}\n {...props}\n />\n )\n })}\n </AnimatePresence>\n </SnackList>\n </motion.div>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n variants: {\n animate: {\n padding: \"var(--top) 0 var(--bottom)\",\n transition: { duration: 0.4 },\n },\n exit: { padding: 0 },\n initial: { padding: 0 },\n },\n },\n ({ gap, gutter = [0, \"lg\"], negativeMargins = true, ...rest }) => ({\n \"data-negative\": dataAttr(negativeMargins),\n \"--bottom\": varAttr(gutter[1], \"spaces\", \"0px\"),\n \"--gap\": varAttr(gap, \"spaces\"),\n \"--top\": varAttr(gutter[0], \"spaces\", \"0px\"),\n ...rest,\n }),\n)\n\ninterface SnackListProps extends HTMLMotionProps {}\n\nconst SnackList = withContext<\"div\", SnackListProps>(\n motion.div,\n \"list\",\n)({\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n role: \"list\",\n variants: {\n animate: ({ height }) => ({\n height,\n opacity: 1,\n transition: { duration: 0.4 },\n }),\n exit: { height: 0, opacity: 0 },\n initial: { height: 0, opacity: 1 },\n },\n})\n\ninterface SnackProps extends Merge<\n HTMLMotionProps,\n Merge<Alert.RootProps, Snack>\n> {\n index: number\n lastIndex: number\n}\n\nconst Snack = withContext<\"div\", SnackProps>(\n ({\n variant = \"plain\",\n closable = true,\n description,\n duration: durationProp = null,\n loadingScheme,\n status,\n title,\n withIcon = true,\n closeButtonProps,\n contentProps,\n descriptionProps,\n iconProps,\n loadingProps,\n titleProps,\n onClose: onCloseProp,\n onCloseComplete,\n ...rest\n }) => {\n const [duration, setDuration] = useState(durationProp)\n const present = useIsPresent()\n const onClose = present ? onCloseProp : noop\n\n const onMouseEnter = useCallback(() => {\n setDuration(null)\n }, [])\n\n const onMouseLeave = useCallback(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useUpdateEffect(() => {\n if (!present) onCloseComplete?.()\n }, [present])\n\n useUpdateEffect(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useTimeout(onClose, duration)\n\n return (\n <Alert.Root\n as={motion.div}\n variant={variant}\n status={status}\n {...rest}\n onMouseEnter={handlerAll(rest.onMouseEnter, onMouseEnter)}\n onMouseLeave={handlerAll(rest.onMouseLeave, onMouseLeave)}\n >\n {withIcon ? (\n loadingScheme ? (\n <Alert.Loading loadingScheme={loadingScheme} {...loadingProps} />\n ) : (\n <Alert.Icon {...iconProps} />\n )\n ) : null}\n\n <SnackContent data-close-button={dataAttr(closable)} {...contentProps}>\n {title ? (\n <Alert.Title me=\"0\" {...titleProps}>\n {title}\n </Alert.Title>\n ) : null}\n\n {description ? (\n <Alert.Description {...descriptionProps}>\n {description}\n </Alert.Description>\n ) : null}\n </SnackContent>\n\n {closable ? (\n <SnackCloseButton\n data-variant={variant}\n {...closeButtonProps}\n onClick={handlerAll(closeButtonProps?.onClick, onClose)}\n />\n ) : null}\n </Alert.Root>\n )\n },\n \"item\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n layout: true,\n role: \"listitem\",\n variants: {\n animate: ({ index }) => ({\n opacity: 1,\n transition: createTransition.enter()(!index ? 0.2 : 0, 0.4),\n y: 0,\n }),\n exit: {\n opacity: 0,\n transition: createTransition.exit()(undefined, 0.2),\n },\n initial: ({ direction, index }) => ({\n opacity: 0,\n ...(index ? { y: (direction === \"start\" ? -1 : 1) 16 } : {}),\n }),\n },\n },\n ({ index, lastIndex, ...rest }) => {\n const ref = useRef<HTMLDivElement>(null)\n const { direction, elMapRef, startIndex } = useComponentContext()\n\n useEffect(() => {\n const elMap = elMapRef.current\n\n elMap.set(index, ref.current)\n\n return () => {\n elMap.delete(index)\n }\n }, [elMapRef, index])\n\n return {\n ref,\n \"--index\": direction === \"start\" ? lastIndex : index,\n \"--z-index\": startIndex + index,\n custom: { direction, index },\n ...rest,\n }\n },\n)\n\nexport interface SnackContentProps extends HTMLStyledProps {}\n\nconst SnackContent = withContext<\"div\", SnackContentProps>(\"div\", \"content\")()\n\nexport interface SnackCloseButtonProps extends CloseButtonProps {}\n\nconst SnackCloseButton = withContext<\"button\", SnackCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)()\n"],"mappings":"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"}
1	+ {"version":3,"file":"snacks.js","names":["motion","noop","Alert.Root","Alert.Loading","Alert.Icon","Alert.Title","Alert.Description"],"sources":["../../../../src/components/snacks/snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Dispatch, RefObject, SetStateAction } from \"react\"\nimport type { CSSProps, HTMLStyledProps, SimpleDirection } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SnacksStyle } from \"./snacks.style\"\nimport type { Snack, UseSnacksReturn } from \"./use-snacks\"\nimport { AnimatePresence, useIsPresent } from \"motion/react\"\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent, varAttr } from \"../../core\"\nimport { useTimeout } from \"../../hooks/use-timeout\"\nimport { dataAttr, handlerAll, noop, useUpdateEffect } from \"../../utils\"\nimport { Alert } from \"../alert\"\nimport { CloseButton } from \"../close-button\"\nimport { createTransition, motion } from \"../motion\"\nimport { snacksStyle } from \"./snacks.style\"\n\ninterface ComponentContext {\n direction: SimpleDirection\n elMapRef: RefObject<Map<number, HTMLDivElement \| null>>\n setExist: Dispatch<SetStateAction<boolean>>\n startIndex: number\n}\n\nexport interface SnacksProps extends HTMLMotionProps {\n /*\n The snacks created by `useSnacks`.\n /\n snacks: UseSnacksReturn[\"snacks\"]\n /\n The CSS `gap` property.\n \n @default 'md'\n /\n gap?: CSSProps[\"gap\"]\n /\n A property that provides spacing between the top and bottom.\n \n @default [0, \"lg\"]\n /\n gutter?: [CSSProps[\"paddingTop\"], CSSProps[\"paddingBottom\"]]\n /\n If `true`, apply gutter value to negative margins\n \n @default true\n /\n negativeMargins?: boolean\n /\n Props for the snacks list element.\n /\n listProps?: HTMLMotionProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SnacksPropsContext,\n useComponentContext,\n usePropsContext: useSnacksPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SnacksProps, SnacksStyle, ComponentContext>(\n \"snacks\",\n snacksStyle,\n)\n\nexport { SnacksPropsContext, useSnacksPropsContext }\n\nexport const Snacks = withProvider<\"div\", SnacksProps>(\n ({\n snacks: { direction = \"start\", items, startIndex = 0 },\n listProps,\n ...rest\n }) => {\n const count = items.length\n const elMapRef = useRef<Map<number, HTMLDivElement \| null>>(new Map())\n const [height, setHeight] = useState(0)\n const [exist, setExist] = useState(!!count)\n const show = !!count \|\| exist\n const context = useMemo(\n () => ({ direction, elMapRef, setExist, startIndex }),\n [direction, startIndex],\n )\n\n const onExitComplete = useCallback(() => {\n if (!count) setExist(false)\n }, [count])\n\n useEffect(() => {\n let height = 0\n\n if (!count) return\n\n const els = [...elMapRef.current.values()].slice(0, count)\n\n for (const el of els) {\n if (!el) continue\n\n let { offsetHeight, offsetTop } = el\n\n offsetHeight += offsetTop\n\n if (offsetHeight > height) height = offsetHeight\n }\n\n setHeight(height)\n }, [count, direction])\n\n useUpdateEffect(() => {\n if (count) setExist(true)\n }, [count])\n\n return (\n <ComponentContext value={context}>\n <AnimatePresence initial={false}>\n {show ? (\n <motion.div {...rest}>\n <SnackList custom={{ height }} {...listProps}>\n <AnimatePresence onExitComplete={onExitComplete}>\n {items.map((props, index) => {\n return (\n <Snack\n key={props.id}\n index={index}\n lastIndex={count - index - 1}\n {...props}\n />\n )\n })}\n </AnimatePresence>\n </SnackList>\n </motion.div>\n ) : null}\n </AnimatePresence>\n </ComponentContext>\n )\n },\n \"root\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n variants: {\n animate: {\n padding: \"var(--top) 0 var(--bottom)\",\n transition: { duration: 0.4 },\n },\n exit: { padding: 0 },\n initial: { padding: 0 },\n },\n },\n ({ gap, gutter = [0, \"lg\"], negativeMargins = true, ...rest }) => ({\n \"data-negative\": dataAttr(negativeMargins),\n \"--bottom\": varAttr(gutter[1], \"spaces\", \"0px\"),\n \"--gap\": varAttr(gap, \"spaces\"),\n \"--top\": varAttr(gutter[0], \"spaces\", \"0px\"),\n ...rest,\n }),\n)\n\ninterface SnackListProps extends HTMLMotionProps {}\n\nconst SnackList = withContext<\"div\", SnackListProps>(\n motion.div,\n \"list\",\n)({\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n role: \"list\",\n variants: {\n animate: ({ height }) => ({\n height,\n opacity: 1,\n transition: { duration: 0.4 },\n }),\n exit: { height: 0, opacity: 0 },\n initial: { height: 0, opacity: 1 },\n },\n})\n\ninterface SnackProps extends Merge<\n HTMLMotionProps,\n Merge<Alert.RootProps, Snack>\n> {\n index: number\n lastIndex: number\n}\n\nconst Snack = withContext<\"div\", SnackProps>(\n ({\n variant = \"plain\",\n closable = true,\n description,\n duration: durationProp = null,\n loadingScheme,\n status,\n title,\n withIcon = true,\n closeButtonProps,\n contentProps,\n descriptionProps,\n iconProps,\n loadingProps,\n titleProps,\n onClose: onCloseProp,\n onCloseComplete,\n ...rest\n }) => {\n const [duration, setDuration] = useState(durationProp)\n const present = useIsPresent()\n const onClose = present ? onCloseProp : noop\n\n const onMouseEnter = useCallback(() => {\n setDuration(null)\n }, [])\n\n const onMouseLeave = useCallback(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useUpdateEffect(() => {\n if (!present) onCloseComplete?.()\n }, [present])\n\n useUpdateEffect(() => {\n setDuration(durationProp)\n }, [durationProp])\n\n useTimeout(onClose, duration)\n\n return (\n <Alert.Root\n as={motion.div}\n variant={variant}\n status={status}\n {...rest}\n onMouseEnter={handlerAll(rest.onMouseEnter, onMouseEnter)}\n onMouseLeave={handlerAll(rest.onMouseLeave, onMouseLeave)}\n >\n {withIcon ? (\n loadingScheme ? (\n <Alert.Loading loadingScheme={loadingScheme} {...loadingProps} />\n ) : (\n <Alert.Icon {...iconProps} />\n )\n ) : null}\n\n <SnackContent data-close-button={dataAttr(closable)} {...contentProps}>\n {title ? (\n <Alert.Title me=\"0\" {...titleProps}>\n {title}\n </Alert.Title>\n ) : null}\n\n {description ? (\n <Alert.Description {...descriptionProps}>\n {description}\n </Alert.Description>\n ) : null}\n </SnackContent>\n\n {closable ? (\n <SnackCloseButton\n data-variant={variant}\n {...closeButtonProps}\n onClick={handlerAll(closeButtonProps?.onClick, onClose)}\n />\n ) : null}\n </Alert.Root>\n )\n },\n \"item\",\n)(\n {\n animate: \"animate\",\n exit: \"exit\",\n initial: \"initial\",\n layout: true,\n role: \"listitem\",\n variants: {\n animate: ({ index }) => ({\n opacity: 1,\n transition: createTransition.enter()(!index ? 0.2 : 0, 0.4),\n y: 0,\n }),\n exit: {\n opacity: 0,\n transition: createTransition.exit()(undefined, 0.2),\n },\n initial: ({ direction, index }) => ({\n opacity: 0,\n ...(index ? { y: (direction === \"start\" ? -1 : 1) 16 } : {}),\n }),\n },\n },\n ({ index, lastIndex, ...rest }) => {\n const ref = useRef<HTMLDivElement>(null)\n const { direction, elMapRef, startIndex } = useComponentContext()\n\n useEffect(() => {\n const elMap = elMapRef.current\n\n elMap.set(index, ref.current)\n\n return () => {\n elMap.delete(index)\n }\n }, [elMapRef, index])\n\n return {\n ref,\n \"--index\": direction === \"start\" ? lastIndex : index,\n \"--z-index\": startIndex + index,\n custom: { direction, index },\n ...rest,\n }\n },\n)\n\nexport interface SnackContentProps extends HTMLStyledProps {}\n\nconst SnackContent = withContext<\"div\", SnackContentProps>(\"div\", \"content\")()\n\nexport interface SnackCloseButtonProps extends CloseButtonProps {}\n\nconst SnackCloseButton = withContext<\"button\", SnackCloseButtonProps>(\n CloseButton,\n \"closeButton\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAuDA,MAAM,EACJ,kBACA,cAAc,oBACd,qBACA,iBAAiB,uBACjB,aACA,iBACE,oBACF,UACA,WACF;AAIA,MAAa,SAAS,cACnB,EACC,QAAQ,EAAE,YAAY,SAAS,OAAO,aAAa,KACnD,WACA,GAAG,WACC;CACJ,MAAM,QAAQ,MAAM;CACpB,MAAM,WAAW,uBAA2C,IAAI,IAAI,CAAC;CACrE,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CACtC,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC,CAAC,KAAK;CAC1C,MAAM,OAAO,CAAC,CAAC,SAAS;CACxB,MAAM,UAAU,eACP;EAAE;EAAW;EAAU;EAAU;CAAW,IACnD,CAAC,WAAW,UAAU,CACxB;CAEA,MAAM,iBAAiB,kBAAkB;EACvC,IAAI,CAAC,OAAO,SAAS,KAAK;CAC5B,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,IAAI,SAAS;EAEb,IAAI,CAAC,OAAO;EAEZ,MAAM,MAAM,CAAC,GAAG,SAAS,QAAQ,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,KAAK;EAEzD,KAAK,MAAM,MAAM,KAAK;GACpB,IAAI,CAAC,IAAI;GAET,IAAI,EAAE,cAAc,cAAc;GAElC,gBAAgB;GAEhB,IAAI,eAAe,QAAQ,SAAS;EACtC;EAEA,UAAU,MAAM;CAClB,GAAG,CAAC,OAAO,SAAS,CAAC;CAErB,sBAAsB;EACpB,IAAI,OAAO,SAAS,IAAI;CAC1B,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,oBAAC,iBAAD;GAAiB,SAAS;aACvB,OACC,oBAACA,SAAO,KAAR;IAAY,GAAI;cACd,oBAAC,WAAD;KAAW,QAAQ,EAAE,OAAO;KAAG,GAAI;eACjC,oBAAC,iBAAD;MAAiC;gBAC9B,MAAM,KAAK,OAAO,UAAU;OAC3B,OACE,oBAAC,OAAD;QAES;QACP,WAAW,QAAQ,QAAQ;QAC3B,GAAI;OACL,GAJM,MAAM,EAIZ;MAEL,CAAC;KACc,CAAA;IACR,CAAA;GACD,CAAA,IACV;EACW,CAAA;CACD,CAAA;AAEtB,GACA,MACF,CAAC,CACC;CACE,SAAS;CACT,MAAM;CACN,SAAS;CACT,UAAU;EACR,SAAS;GACP,SAAS;GACT,YAAY,EAAE,UAAU,GAAI;EAC9B;EACA,MAAM,EAAE,SAAS,EAAE;EACnB,SAAS,EAAE,SAAS,EAAE;CACxB;AACF,IACC,EAAE,KAAK,SAAS,CAAC,GAAG,IAAI,GAAG,kBAAkB,MAAM,GAAG,YAAY;CACjE,kBAAA,GAAA,cAAA,SAAA,CAA0B,eAAe;CACzC,YAAY,QAAQ,OAAO,IAAI,UAAU,KAAK;CAC9C,SAAS,QAAQ,KAAK,QAAQ;CAC9B,SAAS,QAAQ,OAAO,IAAI,UAAU,KAAK;CAC3C,GAAG;AACL,EACF;AAIA,MAAM,YAAY,YAChBA,SAAO,KACP,MACF,CAAC,CAAC;CACA,SAAS;CACT,MAAM;CACN,SAAS;CACT,MAAM;CACN,UAAU;EACR,UAAU,EAAE,cAAc;GACxB;GACA,SAAS;GACT,YAAY,EAAE,UAAU,GAAI;EAC9B;EACA,MAAM;GAAE,QAAQ;GAAG,SAAS;EAAE;EAC9B,SAAS;GAAE,QAAQ;GAAG,SAAS;EAAE;CACnC;AACF,CAAC;AAUD,MAAM,QAAQ,aACX,EACC,UAAU,SACV,WAAW,MACX,aACA,UAAU,eAAe,MACzB,eACA,QACA,OACA,WAAW,MACX,kBACA,cACA,kBACA,WACA,cACA,YACA,SAAS,aACT,iBACA,GAAG,WACC;CACJ,MAAM,CAAC,UAAU,eAAe,SAAS,YAAY;CACrD,MAAM,UAAU,aAAa;CAC7B,MAAM,UAAU,UAAU,cAAcC,cAAAA;CAExC,MAAM,eAAe,kBAAkB;EACrC,YAAY,IAAI;CAClB,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;EACrC,YAAY,YAAY;CAC1B,GAAG,CAAC,YAAY,CAAC;CAEjB,sBAAsB;EACpB,IAAI,CAAC,SAAS,kBAAkB;CAClC,GAAG,CAAC,OAAO,CAAC;CAEZ,sBAAsB;EACpB,YAAY,YAAY;CAC1B,GAAG,CAAC,YAAY,CAAC;CAEjB,WAAW,SAAS,QAAQ;CAE5B,OACE,qBAACC,WAAD;EACE,IAAIF,SAAO;EACF;EACD;EACR,GAAI;EACJ,eAAA,GAAA,cAAA,WAAA,CAAyB,KAAK,cAAc,YAAY;EACxD,eAAA,GAAA,cAAA,WAAA,CAAyB,KAAK,cAAc,YAAY;YAN1D;GAQG,WACC,gBACE,oBAACG,cAAD;IAA8B;IAAe,GAAI;GAAe,CAAA,IAEhE,oBAACC,WAAD,EAAY,GAAI,UAAY,CAAA,IAE5B;GAEJ,qBAAC,cAAD;IAAc,sBAAA,GAAA,cAAA,SAAA,CAA4B,QAAQ;IAAG,GAAI;cAAzD,CACG,QACC,oBAACC,YAAD;KAAa,IAAG;KAAI,GAAI;eACrB;IACU,CAAA,IACX,MAEH,cACC,oBAACC,kBAAD;KAAmB,GAAI;eACpB;IACgB,CAAA,IACjB,IACQ;;GAEb,WACC,oBAAC,kBAAD;IACE,gBAAc;IACd,GAAI;IACJ,UAAA,GAAA,cAAA,WAAA,CAAoB,kBAAkB,SAAS,OAAO;GACvD,CAAA,IACC;EACM;;AAEhB,GACA,MACF,CAAC,CACC;CACE,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;CACR,MAAM;CACN,UAAU;EACR,UAAU,EAAE,aAAa;GACvB,SAAS;GACT,YAAY,iBAAiB,MAAM,CAAC,CAAC,CAAC,QAAQ,KAAM,GAAG,EAAG;GAC1D,GAAG;EACL;EACA,MAAM;GACJ,SAAS;GACT,YAAY,iBAAiB,KAAK,CAAC,CAAC,KAAA,GAAW,EAAG;EACpD;EACA,UAAU,EAAE,WAAW,aAAa;GAClC,SAAS;GACT,GAAI,QAAQ,EAAE,IAAI,cAAc,UAAU,KAAK,KAAK,GAAG,IAAI,CAAC;EAC9D;CACF;AACF,IACC,EAAE,OAAO,WAAW,GAAG,WAAW;CACjC,MAAM,MAAM,OAAuB,IAAI;CACvC,MAAM,EAAE,WAAW,UAAU,eAAe,oBAAoB;CAEhE,gBAAgB;EACd,MAAM,QAAQ,SAAS;EAEvB,MAAM,IAAI,OAAO,IAAI,OAAO;EAE5B,aAAa;GACX,MAAM,OAAO,KAAK;EACpB;CACF,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OAAO;EACL;EACA,WAAW,cAAc,UAAU,YAAY;EAC/C,aAAa,aAAa;EAC1B,QAAQ;GAAE;GAAW;EAAM;EAC3B,GAAG;CACL;AACF,CACF;AAIA,MAAM,eAAe,YAAsC,OAAO,SAAS,CAAC,CAAC;AAI7E,MAAM,mBAAmB,YACvB,aACA,aACF,CAAC,CAAC"}

package/dist/esm/components/stack/h-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"h-stack.js","names":[],"sources":["../../../../src/components/stack/h-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { HStackStyle } from \"./h-stack.style\"\nimport type { StackProps } from \"./stack\"\nimport { createComponent } from \"../../core\"\nimport { hStackStyle } from \"./h-stack.style\"\nimport { Stack } from \"./stack\"\n\nexport interface HStackProps\n extends WithoutThemeProps<StackProps, HStackStyle>, ThemeProps<HStackStyle> {}\n\nconst {\n PropsContext: HStackPropsContext,\n usePropsContext: useHStackPropsContext,\n withContext,\n} = createComponent<HStackProps, HStackStyle>(\"stack--horizontal\", hStackStyle)\n\nexport { HStackPropsContext, useHStackPropsContext }\n\n/*\n `HStack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const HStack = withContext<\"div\", HStackProps>(Stack)(undefined, {\n direction: \"row\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,qBAAqB,WAAW;;;;;;AAS9E,MAAa,SAAS,YAAgC,KAAK,~~EAAE~~,KAAA,GAAW,EACtE,WAAW,MACb,CAAC"}
1	+ {"version":3,"file":"h-stack.js","names":[],"sources":["../../../../src/components/stack/h-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { HStackStyle } from \"./h-stack.style\"\nimport type { StackProps } from \"./stack\"\nimport { createComponent } from \"../../core\"\nimport { hStackStyle } from \"./h-stack.style\"\nimport { Stack } from \"./stack\"\n\nexport interface HStackProps\n extends WithoutThemeProps<StackProps, HStackStyle>, ThemeProps<HStackStyle> {}\n\nconst {\n PropsContext: HStackPropsContext,\n usePropsContext: useHStackPropsContext,\n withContext,\n} = createComponent<HStackProps, HStackStyle>(\"stack--horizontal\", hStackStyle)\n\nexport { HStackPropsContext, useHStackPropsContext }\n\n/*\n `HStack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const HStack = withContext<\"div\", HStackProps>(Stack)(undefined, {\n direction: \"row\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,qBAAqB,WAAW;;;;;;AAS9E,MAAa,SAAS,YAAgC,KAAK,CAAC,CAAC,KAAA,GAAW,EACtE,WAAW,MACb,CAAC"}

package/dist/esm/components/stack/stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n /*\n The CSS `align-items` property.\n /\n align?: CSSProps[\"alignItems\"]\n /\n The CSS `flex-direction` property.\n /\n direction?: CSSProps[\"flexDirection\"]\n /\n The CSS `justify-content` property.\n /\n justify?: CSSProps[\"justifyContent\"]\n /\n If `true`, each stack item will show a separator.\n /\n separator?: ReactElement\n /\n The CSS `flex-wrap` property.\n /\n wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n PropsContext: StackPropsContext,\n usePropsContext: useStackPropsContext,\n withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/\n `Stack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n ({\n align: alignItems,\n children,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n separator,\n wrap: flexWrap,\n ...rest\n }) => {\n const isColumn = (value: any) =>\n value === \"column\" \|\| value === \"column-reverse\"\n\n const validChildren = useValidChildren(children)\n const cloneChildren = useMemo(\n () =>\n separator\n ? validChildren.map((child, index) => {\n const key = typeof child.key !== \"undefined\" ? child.key : index\n\n const cloneSeparator = cloneElement<any>(separator, {\n borderWidth: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n ),\n h: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"fit-content\" : \"100%\",\n ),\n w: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"100%\" : \"fit-content\",\n ),\n })\n\n return (\n <Fragment key={key}>\n {index ? cloneSeparator : null}\n {child}\n </Fragment>\n )\n })\n : validChildren,\n [separator, flexDirection, validChildren],\n )\n\n return (\n <styled.div\n alignItems={alignItems}\n flexDirection={flexDirection}\n flexWrap={flexWrap}\n justifyContent={justifyContent}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,UACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,gBAAgB,cAElB,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,iBAAiB,aAAkB,WAAW;GAClD,cAAA,GAAA,cAAA,~~eAA2B~~,gBAAgB,UACzC,SAAS,KAAK,IAAI,cAAc,WAClC;GACA,IAAA,GAAA,cAAA,~~eAAiB~~,gBAAgB,UAC/B,SAAS,KAAK,IAAI,gBAAgB,MACpC;GACA,IAAA,GAAA,cAAA,~~eAAiB~~,gBAAgB,UAC/B,SAAS,KAAK,IAAI,SAAS,aAC7B;EACF,CAAC;EAED,OACE,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,iBAAiB,MACzB,KACO,EAAA,GAHK,GAGL;CAEd,CAAC,IACD,eACN;EAAC;EAAW;EAAe;CAAa,CAC1C;CAEA,OACE,oBAAC,OAAO,KAAR;EACc;EACG;EACL;EACM;EAChB,GAAI;YAEH;CACS,CAAA;AAEhB,CACF,~~EAAE~~"}
1	+ {"version":3,"file":"stack.js","names":[],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n /*\n The CSS `align-items` property.\n /\n align?: CSSProps[\"alignItems\"]\n /\n The CSS `flex-direction` property.\n /\n direction?: CSSProps[\"flexDirection\"]\n /\n The CSS `justify-content` property.\n /\n justify?: CSSProps[\"justifyContent\"]\n /\n If `true`, each stack item will show a separator.\n /\n separator?: ReactElement\n /\n The CSS `flex-wrap` property.\n /\n wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n PropsContext: StackPropsContext,\n usePropsContext: useStackPropsContext,\n withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/\n `Stack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n ({\n align: alignItems,\n children,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n separator,\n wrap: flexWrap,\n ...rest\n }) => {\n const isColumn = (value: any) =>\n value === \"column\" \|\| value === \"column-reverse\"\n\n const validChildren = useValidChildren(children)\n const cloneChildren = useMemo(\n () =>\n separator\n ? validChildren.map((child, index) => {\n const key = typeof child.key !== \"undefined\" ? child.key : index\n\n const cloneSeparator = cloneElement<any>(separator, {\n borderWidth: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n ),\n h: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"fit-content\" : \"100%\",\n ),\n w: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"100%\" : \"fit-content\",\n ),\n })\n\n return (\n <Fragment key={key}>\n {index ? cloneSeparator : null}\n {child}\n </Fragment>\n )\n })\n : validChildren,\n [separator, flexDirection, validChildren],\n )\n\n return (\n <styled.div\n alignItems={alignItems}\n flexDirection={flexDirection}\n flexWrap={flexWrap}\n justifyContent={justifyContent}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACE,gBAAwC,SAAS,UAAU;;;;;;AAS/D,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,UACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgB,iBAAiB,QAAQ;CAC/C,MAAM,gBAAgB,cAElB,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,iBAAiB,aAAkB,WAAW;GAClD,cAAA,GAAA,cAAA,cAAA,CAA2B,gBAAgB,UACzC,SAAS,KAAK,IAAI,cAAc,WAClC;GACA,IAAA,GAAA,cAAA,cAAA,CAAiB,gBAAgB,UAC/B,SAAS,KAAK,IAAI,gBAAgB,MACpC;GACA,IAAA,GAAA,cAAA,cAAA,CAAiB,gBAAgB,UAC/B,SAAS,KAAK,IAAI,SAAS,aAC7B;EACF,CAAC;EAED,OACE,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,iBAAiB,MACzB,KACO,EAAA,GAHK,GAGL;CAEd,CAAC,IACD,eACN;EAAC;EAAW;EAAe;CAAa,CAC1C;CAEA,OACE,oBAAC,OAAO,KAAR;EACc;EACG;EACL;EACM;EAChB,GAAI;YAEH;CACS,CAAA;AAEhB,CACF,CAAC,CAAC"}

package/dist/esm/components/stack/v-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"v-stack.js","names":[],"sources":["../../../../src/components/stack/v-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { StackProps } from \"./stack\"\nimport type { VStackStyle } from \"./v-stack.style\"\nimport { createComponent } from \"../../core\"\nimport { Stack } from \"./stack\"\nimport { vStackStyle } from \"./v-stack.style\"\n\nexport interface VStackProps\n extends WithoutThemeProps<StackProps, VStackStyle>, ThemeProps<VStackStyle> {}\n\nconst {\n PropsContext: VStackPropsContext,\n usePropsContext: useVStackPropsContext,\n withContext,\n} = createComponent<VStackProps, VStackStyle>(\"stack--vertical\", vStackStyle)\n\nexport { useVStackPropsContext, VStackPropsContext }\n\n/*\n `VStack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const VStack = withContext<\"div\", VStackProps>(Stack)(undefined, {\n direction: \"column\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,mBAAmB,WAAW;;;;;;AAS5E,MAAa,SAAS,YAAgC,KAAK,~~EAAE~~,KAAA,GAAW,EACtE,WAAW,SACb,CAAC"}
1	+ {"version":3,"file":"v-stack.js","names":[],"sources":["../../../../src/components/stack/v-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { StackProps } from \"./stack\"\nimport type { VStackStyle } from \"./v-stack.style\"\nimport { createComponent } from \"../../core\"\nimport { Stack } from \"./stack\"\nimport { vStackStyle } from \"./v-stack.style\"\n\nexport interface VStackProps\n extends WithoutThemeProps<StackProps, VStackStyle>, ThemeProps<VStackStyle> {}\n\nconst {\n PropsContext: VStackPropsContext,\n usePropsContext: useVStackPropsContext,\n withContext,\n} = createComponent<VStackProps, VStackStyle>(\"stack--vertical\", vStackStyle)\n\nexport { useVStackPropsContext, VStackPropsContext }\n\n/*\n `VStack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const VStack = withContext<\"div\", VStackProps>(Stack)(undefined, {\n direction: \"column\",\n})\n"],"mappings":";;;;;AAYA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,mBAAmB,WAAW;;;;;;AAS5E,MAAa,SAAS,YAAgC,KAAK,CAAC,CAAC,KAAA,GAAW,EACtE,WAAW,SACb,CAAC"}

package/dist/esm/components/stack/z-stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"z-stack.js","names":[],"sources":["../../../../src/components/stack/z-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type {\n CSSObject,\n Direction,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { ZStackStyle } from \"./z-stack.style\"\nimport {\n cloneElement,\n createRef,\n Fragment,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n createComponent,\n mergeCSS,\n styled,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { zStackStyle } from \"./z-stack.style\"\n\nexport interface ZStackProps\n extends Omit<HTMLStyledProps, \"direction\">, ThemeProps<ZStackStyle> {\n /*\n Stack in the specified direction.\n \n @default 'end'\n /\n direction?: Direction\n /\n If `true`, calculate the `width` and `height` of the element and assign container.\n \n @default true\n /\n fit?: boolean\n /\n If `true`, reverse direction.\n \n @default false\n /\n reverse?: boolean\n /\n If set the stack will start from the given index.\n \n @default 0\n /\n startIndex?: number\n}\n\nconst {\n PropsContext: ZStackPropsContext,\n usePropsContext: useZStackPropsContext,\n withContext,\n} = createComponent<ZStackProps, ZStackStyle>(\"stack--depth\", zStackStyle)\n\nexport { useZStackPropsContext, ZStackPropsContext }\n\n/\n `ZStack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n /\nexport const ZStack = withContext<\"div\", ZStackProps>(\n ({\n css,\n children,\n direction = \"end\",\n fit = true,\n reverse = false,\n startIndex = 0,\n ...rest\n }) => {\n if (direction === \"start-center\") direction = \"start\"\n if (direction === \"end-center\") direction = \"end\"\n\n const refMap = useRef<Map<number, RefObject<HTMLDivElement \| null>>>(\n new Map(),\n )\n const [rect, setRect] = useState<{ height: number; width: number }>({\n height: 0,\n width: 0,\n })\n\n const vertical = useCallback(\n (space: string) => {\n if (direction.startsWith(\"start\")) {\n return { [!reverse ? \"bottom\" : \"top\"]: space }\n } else if (direction.startsWith(\"end\")) {\n return { [!reverse ? \"top\" : \"bottom\"]: space }\n } else {\n return { [!reverse ? \"top\" : \"bottom\"]: 0 }\n }\n },\n [direction, reverse],\n )\n\n const horizontal = useCallback(\n (space: string) => {\n if (direction.endsWith(\"-start\")) {\n return { [!reverse ? \"right\" : \"left\"]: space }\n } else if (direction.endsWith(\"-end\")) {\n return { [!reverse ? \"left\" : \"right\"]: space }\n } else {\n return { [!reverse ? \"left\" : \"right\"]: 0 }\n }\n },\n [direction, reverse],\n )\n\n const cloneChildren = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n const clonedChildren = validChildren.map((child, index) => {\n const ref = createRef<HTMLDivElement>()\n\n refMap.current.set(index, ref)\n\n const key = child.key ?? index\n\n const zIndex = startIndex + index\n const space = `calc({space} ${index})`\n\n const css: CSSObject = {\n position: \"absolute\",\n zIndex,\n ...vertical(space),\n ...horizontal(space),\n }\n\n const props = {\n ...child.props,\n ref: mergeRefs(child.props.ref, ref),\n css: mergeCSS(child.props.css, css),\n }\n\n const clonedChild = cloneElement(child, props)\n\n return <Fragment key={key}>{clonedChild}</Fragment>\n })\n\n return clonedChildren\n }, [children, startIndex, vertical, horizontal])\n\n useEffect(() => {\n if (!fit) return\n\n let negativeLeft = direction.endsWith(\"-start\")\n let negativeTop = direction.startsWith(\"start\")\n let width = 0\n let height = 0\n\n if (reverse) {\n negativeLeft = !negativeLeft\n negativeTop = !negativeTop\n }\n\n for (const ref of refMap.current.values()) {\n if (!ref.current) continue\n\n let { offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth } =\n ref.current\n\n if (!offsetParent && process.env.NODE_ENV !== \"test\") continue\n\n if (negativeLeft) {\n const offsetParentWidth =\n (offsetParent as HTMLDivElement \| null)?.offsetWidth ?? 0\n\n offsetLeft = offsetParentWidth - offsetLeft - offsetWidth\n }\n\n if (negativeTop) {\n const offsetParentHeight =\n (offsetParent as HTMLDivElement \| null)?.offsetHeight ?? 0\n\n offsetTop = offsetParentHeight - offsetTop - offsetHeight\n }\n\n offsetWidth += offsetLeft\n offsetHeight += offsetTop\n\n if (offsetWidth > width) width = offsetWidth\n if (offsetHeight > height) height = offsetHeight\n }\n\n setRect({ height, width })\n }, [cloneChildren, direction, reverse, fit])\n\n return (\n <styled.div\n css={css}\n minHeight={fit ? `${rect.height}px` : undefined}\n minWidth={fit ? `${rect.width}px` : undefined}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { gap: \"space\" })\n const rest = useInjectVarsIntoProps(props, { gap: \"space\" })\n\n return { ...rest, css }\n})\n"],"mappings":";;;;;;;;;;;AA0DA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACE,gBAA0C,gBAAgB,WAAW;;;;;;AASzE,MAAa,SAAS,aACnB,EACC,KACA,UACA,YAAY,OACZ,MAAM,MACN,UAAU,OACV,aAAa,GACb,GAAG,WACC;CACJ,IAAI,cAAc,gBAAgB,YAAY;CAC9C,IAAI,cAAc,cAAc,YAAY;CAE5C,MAAM,SAAS,uBACb,IAAI,IAAI,CACV;CACA,MAAM,CAAC,MAAM,WAAW,SAA4C;EAClE,QAAQ;EACR,OAAO;CACT,CAAC;CAED,MAAM,WAAW,aACd,UAAkB;EACjB,IAAI,UAAU,WAAW,OAAO,GAC9B,OAAO,GAAG,CAAC,UAAU,WAAW,QAAQ,MAAM;OACzC,IAAI,UAAU,WAAW,KAAK,GACnC,OAAO,GAAG,CAAC,UAAU,QAAQ,WAAW,MAAM;OAE9C,OAAO,GAAG,CAAC,UAAU,QAAQ,WAAW,EAAE;CAE9C,GACA,CAAC,WAAW,OAAO,CACrB;CAEA,MAAM,aAAa,aAChB,UAAkB;EACjB,IAAI,UAAU,SAAS,QAAQ,GAC7B,OAAO,GAAG,CAAC,UAAU,UAAU,SAAS,MAAM;OACzC,IAAI,UAAU,SAAS,MAAM,GAClC,OAAO,GAAG,CAAC,UAAU,SAAS,UAAU,MAAM;OAE9C,OAAO,GAAG,CAAC,UAAU,SAAS,UAAU,EAAE;CAE9C,GACA,CAAC,WAAW,OAAO,CACrB;CAEA,MAAM,gBAAgB,cAAc;EA+BlC,OA9BsB,iBAAiB,QAEJ,~~EAAE~~,KAAK,OAAO,UAAU;GACzD,MAAM,MAAM,UAA0B;GAEtC,OAAO,QAAQ,IAAI,OAAO,GAAG;GAE7B,MAAM,MAAM,MAAM,OAAO;GAEzB,MAAM,SAAS,aAAa;GAC5B,MAAM,QAAQ,kBAAkB,MAAM;GAEtC,MAAM,MAAiB;IACrB,UAAU;IACV;IACA,GAAG,SAAS,KAAK;IACjB,GAAG,WAAW,KAAK;GACrB;GAUA,OAAO,oBAAC,UAAD,EAAA,UAFa,aAAa,OAAO;IALtC,GAAG,MAAM;IACT,KAAK,UAAU,MAAM,MAAM,KAAK,GAAG;IACnC,KAAK,SAAS,MAAM,MAAM,KAAK,GAAG;GAGQ,CAEN,EAAY,GAA5B,GAA4B;EACpD,CAEoB;CACtB,GAAG;EAAC;EAAU;EAAY;EAAU;CAAU,CAAC;CAE/C,gBAAgB;EACd,IAAI,CAAC,KAAK;EAEV,IAAI,eAAe,UAAU,SAAS,QAAQ;EAC9C,IAAI,cAAc,UAAU,WAAW,OAAO;EAC9C,IAAI,QAAQ;EACZ,IAAI,SAAS;EAEb,IAAI,SAAS;GACX,eAAe,CAAC;GAChB,cAAc,CAAC;EACjB;EAEA,KAAK,MAAM,OAAO,OAAO,QAAQ,OAAO,GAAG;GACzC,IAAI,CAAC,IAAI,SAAS;GAElB,IAAI,EAAE,cAAc,YAAY,cAAc,WAAW,gBACvD,IAAI;GAEN,IAAI,CAAC,gBAAgB,MAAiC;GAEtD,IAAI,cAIF,cAFG,cAAwC,eAAe,KAEzB,aAAa;GAGhD,IAAI,aAIF,aAFG,cAAwC,gBAAgB,KAE1B,YAAY;GAG/C,eAAe;GACf,gBAAgB;GAEhB,IAAI,cAAc,OAAO,QAAQ;GACjC,IAAI,eAAe,QAAQ,SAAS;EACtC;EAEA,QAAQ;GAAE;GAAQ;EAAM,CAAC;CAC3B,GAAG;EAAC;EAAe;EAAW;EAAS;CAAG,CAAC;CAE3C,OACE,oBAAC,OAAO,KAAR;EACO;EACL,WAAW,MAAM,GAAG,KAAK,OAAO,MAAM,KAAA;EACtC,UAAU,MAAM,GAAG,KAAK,MAAM,MAAM,KAAA;EACpC,GAAI;YAEH;CACS,CAAA;AAEhB,CACF,~~EAAE~~,KAAA,IAAY,UAAU;CACtB,MAAM,MAAM,qBAAqB,MAAM,KAAK,EAAE,KAAK,QAAQ,CAAC;CAG5D,OAAO;EAAE,GAFI,uBAAuB,OAAO,EAAE,KAAK,QAAQ,CAE3C;EAAG;CAAI;AACxB,CAAC"}
1	+ {"version":3,"file":"z-stack.js","names":[],"sources":["../../../../src/components/stack/z-stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type {\n CSSObject,\n Direction,\n HTMLStyledProps,\n ThemeProps,\n} from \"../../core\"\nimport type { ZStackStyle } from \"./z-stack.style\"\nimport {\n cloneElement,\n createRef,\n Fragment,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport {\n createComponent,\n mergeCSS,\n styled,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { getValidChildren, mergeRefs } from \"../../utils\"\nimport { zStackStyle } from \"./z-stack.style\"\n\nexport interface ZStackProps\n extends Omit<HTMLStyledProps, \"direction\">, ThemeProps<ZStackStyle> {\n /*\n Stack in the specified direction.\n \n @default 'end'\n /\n direction?: Direction\n /\n If `true`, calculate the `width` and `height` of the element and assign container.\n \n @default true\n /\n fit?: boolean\n /\n If `true`, reverse direction.\n \n @default false\n /\n reverse?: boolean\n /\n If set the stack will start from the given index.\n \n @default 0\n /\n startIndex?: number\n}\n\nconst {\n PropsContext: ZStackPropsContext,\n usePropsContext: useZStackPropsContext,\n withContext,\n} = createComponent<ZStackProps, ZStackStyle>(\"stack--depth\", zStackStyle)\n\nexport { useZStackPropsContext, ZStackPropsContext }\n\n/\n `ZStack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n /\nexport const ZStack = withContext<\"div\", ZStackProps>(\n ({\n css,\n children,\n direction = \"end\",\n fit = true,\n reverse = false,\n startIndex = 0,\n ...rest\n }) => {\n if (direction === \"start-center\") direction = \"start\"\n if (direction === \"end-center\") direction = \"end\"\n\n const refMap = useRef<Map<number, RefObject<HTMLDivElement \| null>>>(\n new Map(),\n )\n const [rect, setRect] = useState<{ height: number; width: number }>({\n height: 0,\n width: 0,\n })\n\n const vertical = useCallback(\n (space: string) => {\n if (direction.startsWith(\"start\")) {\n return { [!reverse ? \"bottom\" : \"top\"]: space }\n } else if (direction.startsWith(\"end\")) {\n return { [!reverse ? \"top\" : \"bottom\"]: space }\n } else {\n return { [!reverse ? \"top\" : \"bottom\"]: 0 }\n }\n },\n [direction, reverse],\n )\n\n const horizontal = useCallback(\n (space: string) => {\n if (direction.endsWith(\"-start\")) {\n return { [!reverse ? \"right\" : \"left\"]: space }\n } else if (direction.endsWith(\"-end\")) {\n return { [!reverse ? \"left\" : \"right\"]: space }\n } else {\n return { [!reverse ? \"left\" : \"right\"]: 0 }\n }\n },\n [direction, reverse],\n )\n\n const cloneChildren = useMemo(() => {\n const validChildren = getValidChildren(children)\n\n const clonedChildren = validChildren.map((child, index) => {\n const ref = createRef<HTMLDivElement>()\n\n refMap.current.set(index, ref)\n\n const key = child.key ?? index\n\n const zIndex = startIndex + index\n const space = `calc({space} ${index})`\n\n const css: CSSObject = {\n position: \"absolute\",\n zIndex,\n ...vertical(space),\n ...horizontal(space),\n }\n\n const props = {\n ...child.props,\n ref: mergeRefs(child.props.ref, ref),\n css: mergeCSS(child.props.css, css),\n }\n\n const clonedChild = cloneElement(child, props)\n\n return <Fragment key={key}>{clonedChild}</Fragment>\n })\n\n return clonedChildren\n }, [children, startIndex, vertical, horizontal])\n\n useEffect(() => {\n if (!fit) return\n\n let negativeLeft = direction.endsWith(\"-start\")\n let negativeTop = direction.startsWith(\"start\")\n let width = 0\n let height = 0\n\n if (reverse) {\n negativeLeft = !negativeLeft\n negativeTop = !negativeTop\n }\n\n for (const ref of refMap.current.values()) {\n if (!ref.current) continue\n\n let { offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth } =\n ref.current\n\n if (!offsetParent && process.env.NODE_ENV !== \"test\") continue\n\n if (negativeLeft) {\n const offsetParentWidth =\n (offsetParent as HTMLDivElement \| null)?.offsetWidth ?? 0\n\n offsetLeft = offsetParentWidth - offsetLeft - offsetWidth\n }\n\n if (negativeTop) {\n const offsetParentHeight =\n (offsetParent as HTMLDivElement \| null)?.offsetHeight ?? 0\n\n offsetTop = offsetParentHeight - offsetTop - offsetHeight\n }\n\n offsetWidth += offsetLeft\n offsetHeight += offsetTop\n\n if (offsetWidth > width) width = offsetWidth\n if (offsetHeight > height) height = offsetHeight\n }\n\n setRect({ height, width })\n }, [cloneChildren, direction, reverse, fit])\n\n return (\n <styled.div\n css={css}\n minHeight={fit ? `${rect.height}px` : undefined}\n minWidth={fit ? `${rect.width}px` : undefined}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { gap: \"space\" })\n const rest = useInjectVarsIntoProps(props, { gap: \"space\" })\n\n return { ...rest, css }\n})\n"],"mappings":"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"}

package/dist/esm/components/stat/stat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stat.js","names":[],"sources":["../../../../src/components/stat/stat.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatStyle } from \"./stat.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useSplitChildren } from \"../../utils\"\nimport { TriangleIcon } from \"../icon\"\nimport { statStyle } from \"./stat.style\"\n\nexport interface StatRootProps\n extends HTMLStyledProps<\"dl\">, ThemeProps<StatStyle> {\n /*\n If `true`, container will center its children regardless of their width.\n \n @default false\n /\n centerContent?: boolean\n /\n The stat helper message to use.\n /\n helperMessage?: ReactNode\n /\n The stat icon to use.\n /\n icon?: StatIconProps[\"type\"]\n /\n The stat label to use.\n /\n label?: ReactNode\n /\n The stat value to use.\n /\n value?: ReactNode\n /\n Props for stat helper message component.\n /\n helperMessageProps?: StatHelperMessageProps\n /\n Props for stat icon component.\n /\n iconProps?: Omit<StatIconProps, \"type\">\n /\n Props for stat label component.\n /\n labelProps?: StatLabelProps\n /\n Props for stat value component.\n /\n valueProps?: StatValueProps\n}\n\nconst {\n PropsContext: StatPropsContext,\n usePropsContext: useStatPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StatRootProps, StatStyle>(\"stat\", statStyle)\n\nexport { StatPropsContext, useStatPropsContext }\n\n/\n `Stat` is used to show numbers and data in a box.\n \n @see https://yamada-ui.com/docs/components/stat\n /\nexport const StatRoot = withProvider<\"dl\", StatRootProps>(\n ({\n children,\n helperMessage,\n icon,\n label,\n value,\n helperMessageProps,\n iconProps,\n labelProps,\n valueProps,\n ...rest\n }) => {\n const [\n omittedChildren,\n customStatLabel,\n customStatValue,\n customStatHelperMessage,\n ] = useSplitChildren(children, StatLabel, StatValue, StatHelperMessage)\n\n return (\n <styled.dl {...rest}>\n {customStatLabel ?? <StatLabel {...labelProps}>{label}</StatLabel>}\n {customStatValue ?? <StatValue {...valueProps}>{value}</StatValue>}\n {customStatHelperMessage ?? (\n <StatHelperMessage {...helperMessageProps}>\n {icon ? <StatIcon type={icon} {...iconProps} /> : null}\n {helperMessage}\n </StatHelperMessage>\n )}\n {omittedChildren}\n </styled.dl>\n )\n },\n \"root\",\n)()\n\nexport interface StatIconProps extends HTMLStyledProps<\"svg\"> {\n /\n The type of the icon.\n \n @default 'increase'\n */\n type?: \"decrease\" \| \"increase\"\n}\n\nexport const StatIcon = withContext<\"svg\", StatIconProps>(\n ({ type = \"increase\", ...rest }) => {\n const { t } = useI18n(\"stat\")\n\n return (\n <TriangleIcon\n aria-label={type === \"increase\" ? t(\"Increased by\") : t(\"Decreased by\")}\n data-type={type}\n {...rest}\n />\n )\n },\n \"icon\",\n)()\n\nexport interface StatLabelProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const StatLabel = withContext<\"dt\", StatLabelProps>(\"dt\", \"label\")()\n\nexport interface StatValueProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatValue = withContext<\"dd\", StatValueProps>(\"dd\", \"value\")()\n\nexport interface StatUnitProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StatUnit = withContext<\"span\", StatUnitProps>(\"span\", \"unit\")()\n\nexport interface StatHelperMessageProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatHelperMessage = withContext<\"dd\", StatHelperMessageProps>(\n \"dd\",\n \"helperMessage\",\n)()\n"],"mappings":";;;;;;;;;AAqDA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA8C,QAAQ,SAAS;;;;;;AASnE,MAAa,WAAW,cACrB,EACC,UACA,eACA,MACA,OACA,OACA,oBACA,WACA,YACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,iBACA,2BACE,iBAAiB,UAAU,WAAW,WAAW,iBAAiB;CAEtE,OACE,qBAAC,OAAO,IAAR;EAAW,GAAI;YAAf;GACG,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;GAAiB,CAAA;GAChE,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;GAAiB,CAAA;GAChE,2BACC,qBAAC,mBAAD;IAAmB,GAAI;cAAvB,CACG,OAAO,oBAAC,UAAD;KAAU,MAAM;KAAM,GAAI;IAAY,CAAA,IAAI,MACjD,aACgB;;GAEpB;EACQ;;AAEf,GACA,MACF,~~EAAE~~;AAWF,MAAa,WAAW,aACrB,EAAE,OAAO,YAAY,GAAG,WAAW;CAClC,MAAM,EAAE,MAAM,QAAQ,MAAM;CAE5B,OACE,oBAAC,cAAD;EACE,cAAY,SAAS,aAAa,EAAE,cAAc,IAAI,EAAE,cAAc;EACtE,aAAW;EACX,GAAI;CACL,CAAA;AAEL,GACA,MACF,~~EAAE~~;AAIF,MAAa,YAAY,YAAkC,MAAM,OAAO,~~EAAE~~;AAI1E,MAAa,YAAY,YAAkC,MAAM,OAAO,~~EAAE~~;AAI1E,MAAa,WAAW,YAAmC,QAAQ,MAAM,~~EAAE~~;AAI3E,MAAa,oBAAoB,YAC/B,MACA,eACF,~~EAAE~~"}
1	+ {"version":3,"file":"stat.js","names":[],"sources":["../../../../src/components/stat/stat.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatStyle } from \"./stat.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { useSplitChildren } from \"../../utils\"\nimport { TriangleIcon } from \"../icon\"\nimport { statStyle } from \"./stat.style\"\n\nexport interface StatRootProps\n extends HTMLStyledProps<\"dl\">, ThemeProps<StatStyle> {\n /*\n If `true`, container will center its children regardless of their width.\n \n @default false\n /\n centerContent?: boolean\n /\n The stat helper message to use.\n /\n helperMessage?: ReactNode\n /\n The stat icon to use.\n /\n icon?: StatIconProps[\"type\"]\n /\n The stat label to use.\n /\n label?: ReactNode\n /\n The stat value to use.\n /\n value?: ReactNode\n /\n Props for stat helper message component.\n /\n helperMessageProps?: StatHelperMessageProps\n /\n Props for stat icon component.\n /\n iconProps?: Omit<StatIconProps, \"type\">\n /\n Props for stat label component.\n /\n labelProps?: StatLabelProps\n /\n Props for stat value component.\n /\n valueProps?: StatValueProps\n}\n\nconst {\n PropsContext: StatPropsContext,\n usePropsContext: useStatPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StatRootProps, StatStyle>(\"stat\", statStyle)\n\nexport { StatPropsContext, useStatPropsContext }\n\n/\n `Stat` is used to show numbers and data in a box.\n \n @see https://yamada-ui.com/docs/components/stat\n /\nexport const StatRoot = withProvider<\"dl\", StatRootProps>(\n ({\n children,\n helperMessage,\n icon,\n label,\n value,\n helperMessageProps,\n iconProps,\n labelProps,\n valueProps,\n ...rest\n }) => {\n const [\n omittedChildren,\n customStatLabel,\n customStatValue,\n customStatHelperMessage,\n ] = useSplitChildren(children, StatLabel, StatValue, StatHelperMessage)\n\n return (\n <styled.dl {...rest}>\n {customStatLabel ?? <StatLabel {...labelProps}>{label}</StatLabel>}\n {customStatValue ?? <StatValue {...valueProps}>{value}</StatValue>}\n {customStatHelperMessage ?? (\n <StatHelperMessage {...helperMessageProps}>\n {icon ? <StatIcon type={icon} {...iconProps} /> : null}\n {helperMessage}\n </StatHelperMessage>\n )}\n {omittedChildren}\n </styled.dl>\n )\n },\n \"root\",\n)()\n\nexport interface StatIconProps extends HTMLStyledProps<\"svg\"> {\n /\n The type of the icon.\n \n @default 'increase'\n */\n type?: \"decrease\" \| \"increase\"\n}\n\nexport const StatIcon = withContext<\"svg\", StatIconProps>(\n ({ type = \"increase\", ...rest }) => {\n const { t } = useI18n(\"stat\")\n\n return (\n <TriangleIcon\n aria-label={type === \"increase\" ? t(\"Increased by\") : t(\"Decreased by\")}\n data-type={type}\n {...rest}\n />\n )\n },\n \"icon\",\n)()\n\nexport interface StatLabelProps extends HTMLStyledProps<\"dt\"> {}\n\nexport const StatLabel = withContext<\"dt\", StatLabelProps>(\"dt\", \"label\")()\n\nexport interface StatValueProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatValue = withContext<\"dd\", StatValueProps>(\"dd\", \"value\")()\n\nexport interface StatUnitProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StatUnit = withContext<\"span\", StatUnitProps>(\"span\", \"unit\")()\n\nexport interface StatHelperMessageProps extends HTMLStyledProps<\"dd\"> {}\n\nexport const StatHelperMessage = withContext<\"dd\", StatHelperMessageProps>(\n \"dd\",\n \"helperMessage\",\n)()\n"],"mappings":";;;;;;;;;AAqDA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACE,oBAA8C,QAAQ,SAAS;;;;;;AASnE,MAAa,WAAW,cACrB,EACC,UACA,eACA,MACA,OACA,OACA,oBACA,WACA,YACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,iBACA,2BACE,iBAAiB,UAAU,WAAW,WAAW,iBAAiB;CAEtE,OACE,qBAAC,OAAO,IAAR;EAAW,GAAI;YAAf;GACG,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;GAAiB,CAAA;GAChE,mBAAmB,oBAAC,WAAD;IAAW,GAAI;cAAa;GAAiB,CAAA;GAChE,2BACC,qBAAC,mBAAD;IAAmB,GAAI;cAAvB,CACG,OAAO,oBAAC,UAAD;KAAU,MAAM;KAAM,GAAI;IAAY,CAAA,IAAI,MACjD,aACgB;;GAEpB;EACQ;;AAEf,GACA,MACF,CAAC,CAAC;AAWF,MAAa,WAAW,aACrB,EAAE,OAAO,YAAY,GAAG,WAAW;CAClC,MAAM,EAAE,MAAM,QAAQ,MAAM;CAE5B,OACE,oBAAC,cAAD;EACE,cAAY,SAAS,aAAa,EAAE,cAAc,IAAI,EAAE,cAAc;EACtE,aAAW;EACX,GAAI;CACL,CAAA;AAEL,GACA,MACF,CAAC,CAAC;AAIF,MAAa,YAAY,YAAkC,MAAM,OAAO,CAAC,CAAC;AAI1E,MAAa,YAAY,YAAkC,MAAM,OAAO,CAAC,CAAC;AAI1E,MAAa,WAAW,YAAmC,QAAQ,MAAM,CAAC,CAAC;AAI3E,MAAa,oBAAoB,YAC/B,MACA,eACF,CAAC,CAAC"}

package/dist/esm/components/status/status.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status.js","names":[],"sources":["../../../../src/components/status/status.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatusStyle } from \"./status.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { statusStyle } from \"./status.style\"\n\nexport type StatusScheme = \"error\" \| \"info\" \| \"success\" \| \"warning\"\n\nexport interface StatusProps extends HTMLStyledProps, ThemeProps<StatusStyle> {\n /*\n The type of the status\n \n @default 'info'\n * /\n value?: StatusScheme\n /\n The props for the status indicator component\n /\n indicatorProps?: HTMLStyledProps\n /\n The props for the status label component\n /\n labelProps?: HTMLStyledProps\n}\n\nconst {\n PropsContext: StatusPropsContext,\n usePropsContext: useStatusPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StatusProps, StatusStyle>(\"status\", statusStyle)\n\nexport { StatusPropsContext, useStatusPropsContext }\n\n/\n `Status` is component that indicate the status of a process or state.\n \n @see https://yamada-ui.com/docs/components/status\n */\nexport const Status = withProvider<\"div\", StatusProps>(\n ({ children, indicatorProps, labelProps, ...rest }) => {\n return (\n <styled.div {...rest}>\n <StatusIndicator {...indicatorProps} />\n\n <StatusLabel {...labelProps}>{children}</StatusLabel>\n </styled.div>\n )\n },\n \"root\",\n)(undefined, ({ colorScheme, value = \"info\", ...rest }) => ({\n colorScheme: colorScheme ?? value,\n ...rest,\n}))\n\ninterface StatusIndicatorProps extends HTMLStyledProps {}\n\nconst StatusIndicator = withContext<\"div\", StatusIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface StatusLabelProps extends HTMLStyledProps<\"p\"> {}\n\nconst StatusLabel = withContext<\"p\", StatusLabelProps>(\"p\", \"label\")()\n"],"mappings":";;;;;;AA0BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,gBAAgB,YAAY,GAAG,WAAW;CACrD,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB,CACE,oBAAC,iBAAD,EAAiB,GAAI,eAAiB,CAAA,GAEtC,oBAAC,aAAD;GAAa,GAAI;GAAa;EAAsB,CAAA,CAC1C;;AAEhB,GACA,MACF,~~EAAE~~,KAAA,IAAY,EAAE,aAAa,QAAQ,QAAQ,GAAG,YAAY;CAC1D,aAAa,eAAe;CAC5B,GAAG;AACL,EAAE;AAIF,MAAM,kBAAkB,YACtB,OACA,WACF,~~EAAE~~;AAIF,MAAM,cAAc,YAAmC,KAAK,OAAO,~~EAAE~~"}
1	+ {"version":3,"file":"status.js","names":[],"sources":["../../../../src/components/status/status.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { StatusStyle } from \"./status.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { statusStyle } from \"./status.style\"\n\nexport type StatusScheme = \"error\" \| \"info\" \| \"success\" \| \"warning\"\n\nexport interface StatusProps extends HTMLStyledProps, ThemeProps<StatusStyle> {\n /*\n The type of the status\n \n @default 'info'\n * /\n value?: StatusScheme\n /\n The props for the status indicator component\n /\n indicatorProps?: HTMLStyledProps\n /\n The props for the status label component\n /\n labelProps?: HTMLStyledProps\n}\n\nconst {\n PropsContext: StatusPropsContext,\n usePropsContext: useStatusPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StatusProps, StatusStyle>(\"status\", statusStyle)\n\nexport { StatusPropsContext, useStatusPropsContext }\n\n/\n `Status` is component that indicate the status of a process or state.\n \n @see https://yamada-ui.com/docs/components/status\n */\nexport const Status = withProvider<\"div\", StatusProps>(\n ({ children, indicatorProps, labelProps, ...rest }) => {\n return (\n <styled.div {...rest}>\n <StatusIndicator {...indicatorProps} />\n\n <StatusLabel {...labelProps}>{children}</StatusLabel>\n </styled.div>\n )\n },\n \"root\",\n)(undefined, ({ colorScheme, value = \"info\", ...rest }) => ({\n colorScheme: colorScheme ?? value,\n ...rest,\n}))\n\ninterface StatusIndicatorProps extends HTMLStyledProps {}\n\nconst StatusIndicator = withContext<\"div\", StatusIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface StatusLabelProps extends HTMLStyledProps<\"p\"> {}\n\nconst StatusLabel = withContext<\"p\", StatusLabelProps>(\"p\", \"label\")()\n"],"mappings":";;;;;;AA0BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,gBAAgB,YAAY,GAAG,WAAW;CACrD,OACE,qBAAC,OAAO,KAAR;EAAY,GAAI;YAAhB,CACE,oBAAC,iBAAD,EAAiB,GAAI,eAAiB,CAAA,GAEtC,oBAAC,aAAD;GAAa,GAAI;GAAa;EAAsB,CAAA,CAC1C;;AAEhB,GACA,MACF,CAAC,CAAC,KAAA,IAAY,EAAE,aAAa,QAAQ,QAAQ,GAAG,YAAY;CAC1D,aAAa,eAAe;CAC5B,GAAG;AACL,EAAE;AAIF,MAAM,kBAAkB,YACtB,OACA,WACF,CAAC,CAAC;AAIF,MAAM,cAAc,YAAmC,KAAK,OAAO,CAAC,CAAC"}

package/dist/esm/components/steps/steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"steps.js","names":[],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { Children, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n isNull,\n isUndefined,\n useFindChild,\n useValidChildren,\n} from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n StepsContext,\n StepsDescendantsContext,\n StepsItemContext,\n useSteps,\n useStepsContext,\n useStepsItem,\n useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext extends Pick<\n StepsRootProps,\n \"items\" \| \"lazy\" \| \"lazyBehavior\"\n> {}\n\nexport interface StepsItem\n extends\n Omit<StepsItemProps, \"content\" \| \"index\" \| \"title\">,\n Pick<StepsIndicatorProps, \"complete\" \| \"current\" \| \"incomplete\"> {\n /*\n The content for step element.\n /\n content?: ReactNode\n /\n The description for step element.\n /\n description?: ReactNode\n /\n If true, display the step separator.\n \n @default true\n /\n hasSeparator?: boolean\n /\n The title for step element.\n /\n title?: string\n /\n Props for step content element.\n /\n contentProps?: StepsContentProps\n /\n Props for step description element.\n /\n descriptionProps?: StepsDescriptionProps\n /\n Props for step indicator element.\n /\n indicatorProps?: StepsIndicatorProps\n /\n Props for step separator element.\n /\n separatorProps?: StepsSeparatorProps\n /\n Props for step title element.\n /\n titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n extends\n Omit<HTMLStyledProps, \"onChange\">,\n Omit<UseStepsProps, \"count\" \| \"orientation\">,\n Pick<UseLazyMountProps, \"lazy\" \| \"lazyBehavior\">,\n ThemeProps<StepsStyle> {\n /\n If provided, generate step components based on steps.\n /\n items?: StepsItem[]\n}\n\nconst {\n ComponentContext,\n PropsContext: StepsPropsContext,\n useComponentContext,\n usePropsContext: useStepsPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n \"steps\",\n stepsStyle,\n)\n\nexport { StepsPropsContext, useStepsPropsContext }\n\n/\n `Steps` is a component that displays the progress of a multi-step process.\n \n @see https://yamada-ui.com/docs/components/steps\n /\nexport const StepsRoot = withProvider<\"div\", StepsRootProps, \"orientation\">(\n ({\n children,\n items = [],\n lazy,\n lazyBehavior,\n orientation: orientationProp,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const validChildren = useValidChildren(children)\n const stepsList = useFindChild<StepsListProps>(validChildren, StepsList)\n const {\n id,\n count,\n descendants,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n onNext,\n onPrev,\n } = useSteps({\n count: items.length \|\| Children.count(stepsList?.props.children),\n orientation: computedOrientation,\n ...rest,\n })\n const componentContext = useMemo(\n () => ({ items, lazy, lazyBehavior }),\n [items, lazy, lazyBehavior],\n )\n const stepsContext = useMemo(\n () => ({\n id,\n count,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n onNext,\n onPrev,\n }),\n [\n id,\n count,\n index,\n orientation,\n setIndex,\n getStatus,\n onNext,\n onPrev,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getContentProps,\n ],\n )\n\n return (\n <StepsDescendantsContext value={descendants}>\n <StepsContext value={stepsContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>{children}</styled.div>\n </ComponentContext>\n </StepsContext>\n </StepsDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n ({ children, ...rest }) => {\n const { items } = useComponentContext()\n const { getListProps } = useStepsContext()\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(\n (\n {\n complete,\n content: _content,\n current,\n description,\n hasSeparator = true,\n incomplete,\n title,\n contentProps: _contentProps,\n descriptionProps,\n indicatorProps,\n separatorProps,\n titleProps,\n ...rest\n },\n index,\n ) => (\n <StepsItem key={index} index={index} title={title} {...rest}>\n <StepsIndicator\n complete={complete}\n current={current}\n incomplete={incomplete}\n {...indicatorProps}\n />\n\n <styled.div>\n {title ? (\n <StepsTitle {...titleProps}>{title}</StepsTitle>\n ) : null}\n {description ? (\n <StepsDescription {...descriptionProps}>\n {description}\n </StepsDescription>\n ) : null}\n </styled.div>\n\n {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n </StepsItem>\n ),\n )\n }\n }, [children, items])\n\n return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n },\n \"list\",\n)()\n\nexport interface StepsItemProps\n extends HTMLStyledProps<\"li\">, UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n const {\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getRootProps,\n getSeparatorProps,\n getTitleProps,\n } = useStepsItem(props)\n const context = useMemo(\n () => ({\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getSeparatorProps,\n getTitleProps,\n }),\n [\n first,\n index,\n last,\n status,\n getTitleProps,\n getDescriptionProps,\n getSeparatorProps,\n getIndicatorProps,\n ],\n )\n\n return (\n <StepsItemContext value={context}>\n <styled.li {...getRootProps()} />\n </StepsItemContext>\n )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n /\n The element for the complete indicator.\n \n @default <CheckIcon />\n /\n complete?: ReactNode\n /\n The element for the current indicator.\n \n @default <StepsNumber />\n /\n current?: ReactNode\n /\n The element for the incomplete indicator.\n \n @default <StepsNumber />\n /\n incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n ({\n complete = <CheckIcon />,\n current = <StepsNumber />,\n incomplete = <StepsNumber />,\n ...rest\n }) => {\n const { status, getIndicatorProps } = useStepsItemContext()\n const components = useMemo(\n () => ({ complete, current, incomplete }),\n [complete, current, incomplete],\n )\n\n return (\n <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n )\n },\n \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n \"span\",\n \"number\",\n)(undefined, ({ children, ...rest }) => {\n const { index } = useStepsItemContext()\n\n return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useStepsItemContext()\n\n return getTitleProps(props)\n },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { getDescriptionProps } = useStepsItemContext()\n\n return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n \"div\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useStepsItemContext()\n\n return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n const { items } = useComponentContext()\n\n return useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(({ content, contentProps }, index) =>\n isUndefined(content) \|\| isNull(content) ? null : (\n <StepsContent key={index} index={index} {...contentProps}>\n {content}\n </StepsContent>\n ),\n )\n }\n }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n /\n The index of the step content.\n */\n index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n \"div\",\n \"content\",\n)(undefined, ({ index, ...rest }) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = index === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...rest,\n })\n\n return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n \"div\",\n StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n undefined,\n (props) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { count, index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = count !== 0 && count === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...props,\n })\n\n return { ...getContentProps(props), children }\n },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n \"button\",\n { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n const { getPrevTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n \"button\",\n { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n const { getNextTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":";;;;;;;;;;;;;AA0FA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACE,oBACF,SACA,UACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,QAAQ,CAAC,GACT,MACA,cACA,aAAa,iBACb,GAAG,WACC;CACJ,MAAM,sBAAsB,SAAS,eAAe;CAEpD,MAAM,YAAY,aADI,iBAAiB,QACoB,GAAG,SAAS;CACvE,MAAM,EACJ,IACA,OACA,aACA,WACA,OACA,aACA,UACA,iBACA,cACA,qBACA,qBACA,cACA,QACA,WACE,SAAS;EACX,OAAO,MAAM,UAAU,SAAS,MAAM,WAAW,MAAM,QAAQ;EAC/D,aAAa;EACb,GAAG;CACL,CAAC;CACD,MAAM,mBAAmB,eAChB;EAAE;EAAO;EAAM;CAAa,IACnC;EAAC;EAAO;EAAM;CAAY,CAC5B;CAgCA,OACE,oBAAC,yBAAD;EAAyB,OAAO;YAC9B,oBAAC,cAAD;GAAc,OAjCG,eACZ;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,IACA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAKkC;aAC9B,oBAAC,kBAAD;IAAkB,OAAO;cACvB,oBAAC,OAAO,KAAR;KAAY,GAAI,aAAa;KAAI;IAAqB,CAAA;GACtC,CAAA;EACN,CAAA;CACS,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,EAAE;AAIF,MAAa,YAAY,aACtB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,UAAU,oBAAoB;CACtC,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,mBAAmB,cAAc;EACrC,IAAI,UACF,OAAO;OAEP,OAAO,OAAO,KAEV,EACE,UACA,SAAS,UACT,SACA,aACA,eAAe,MACf,YACA,OACA,cAAc,eACd,kBACA,gBACA,gBACA,YACA,GAAG,QAEL,UAEA,qBAAC,WAAD;GAA8B;GAAc;GAAO,GAAI;aAAvD;IACE,oBAAC,gBAAD;KACY;KACD;KACG;KACZ,GAAI;IACL,CAAA;IAED,qBAAC,OAAO,KAAR,EAAA,UAAA,CACG,QACC,oBAAC,YAAD;KAAY,GAAI;eAAa;IAAkB,CAAA,IAC7C,MACH,cACC,oBAAC,kBAAD;KAAkB,GAAI;eACnB;IACe,CAAA,IAChB,IACM,EAAA,CAAA;IAEX,eAAe,oBAAC,gBAAD,EAAgB,GAAI,eAAiB,CAAA,IAAI;GAChD;KApBK,KAoBL,CAEf;CAEJ,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,OAAO,oBAAC,OAAO,IAAR;EAAW,GAAI,aAAa,IAAI;YAAI;CAA4B,CAAA;AACzE,GACA,MACF,EAAE;AAKF,MAAa,YAAY,aAAmC,UAAU;CACpE,MAAM,EACJ,OACA,OACA,MACA,QACA,qBACA,mBACA,cACA,mBACA,kBACE,aAAa,KAAK;CAwBtB,OACE,oBAAC,kBAAD;EAAkB,OAxBJ,eACP;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAI+B;YAC7B,oBAAC,OAAO,IAAR,EAAW,GAAI,aAAa,EAAI,CAAA;CAChB,CAAA;AAEtB,GAAG,MAAM,EAAE;AAuBX,MAAa,iBAAiB,aAC3B,EACC,WAAW,oBAAC,WAAD,CAAY,CAAA,GACvB,UAAU,oBAAC,aAAD,CAAc,CAAA,GACxB,aAAa,oBAAC,aAAD,CAAc,CAAA,GAC3B,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,sBAAsB,oBAAoB;CAC1D,MAAM,aAAa,eACV;EAAE;EAAU;EAAS;CAAW,IACvC;EAAC;EAAU;EAAS;CAAU,CAChC;CAEA,OACE,oBAAC,OAAO,KAAR;EAAY,GAAI,kBAAkB,IAAI;YAAI,WAAW;CAAoB,CAAA;AAE7E,GACA,WACF,EAAE;AAIF,MAAa,cAAc,YACzB,QACA,QACF,EAAE,KAAA,IAAY,EAAE,UAAU,GAAG,WAAW;CACtC,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO;EAAE,GAAG;EAAM,UAAU,YAAY,QAAQ;CAAE;AACpD,CAAC;AAID,MAAa,aAAa,YAAmC,MAAM,OAAO,EACxE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CACF;AAIA,MAAa,mBAAmB,YAC9B,KACA,aACF,EAAE,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,wBAAwB,oBAAoB;CAEpD,OAAO,oBAAoB,KAAK;AAClC,CAAC;AAID,MAAa,iBAAiB,YAC5B,OACA,WACF,EAAE,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,sBAAsB,oBAAoB;CAElD,OAAO,kBAAkB,KAAK;AAChC,CAAC;AAID,MAAa,iBAAyC,EAAE,eAAe;CACrE,MAAM,EAAE,UAAU,oBAAoB;CAEtC,OAAO,cAAc;EACnB,IAAI,UACF,OAAO;OAEP,OAAO,OAAO,KAAK,EAAE,SAAS,gBAAgB,WAAA,GAAA,cAAA,aAChC,OAAO,MAAA,GAAA,cAAA,QAAY,OAAO,IAAI,OACxC,oBAAC,cAAD;GAAiC;GAAO,GAAI;aACzC;EACW,GAFK,KAEL,CAElB;CAEJ,GAAG,CAAC,UAAU,KAAK,CAAC;AACtB;AASA,MAAa,eAAe,YAC1B,OACA,SACF,EAAE,KAAA,IAAY,EAAE,OAAO,GAAG,WAAW;CACnC,MAAM,EAAE,MAAM,iBAAiB,oBAAoB;CACnD,MAAM,EAAE,OAAO,eAAe,oBAAoB,gBAAgB;CAElE,MAAM,WAAW,aAAa;EAC5B;EACA;EACA,SAJc,UAAU;EAKxB,GAAG;CACL,CAAC;CAED,OAAO;EAAE,GAAG,gBAAgB;GAAE;GAAO,GAAG;EAAK,CAAC;EAAG;CAAS;AAC5D,CAAC;AAID,MAAa,wBAAwB,YAGnC,OAAO;CAAE,MAAM;CAAoB,MAAM,CAAC,WAAW,WAAW;AAAE,CAAC,EACnE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,MAAM,iBAAiB,oBAAoB;CACnD,MAAM,EAAE,OAAO,OAAO,eAAe,oBAAoB,gBAAgB;CAEzE,MAAM,WAAW,aAAa;EAC5B;EACA;EACA,SAJc,UAAU,KAAK,UAAU;EAKvC,GAAG;CACL,CAAC;CAED,OAAO;EAAE,GAAG,gBAAgB,KAAK;EAAG;CAAS;AAC/C,CACF;AAIA,MAAa,mBAAmB,YAC9B,UACA;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CACnD,GAAG,UAAU;CACX,MAAM,EAAE,wBAAwB,gBAAgB;CAEhD,OAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,KAAK;CAAE;AACxD,CAAC;AAID,MAAa,mBAAmB,YAC9B,UACA;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CACnD,GAAG,UAAU;CACX,MAAM,EAAE,wBAAwB,gBAAgB;CAEhD,OAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,KAAK;CAAE;AACxD,CAAC"}
1	+ {"version":3,"file":"steps.js","names":[],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { Children, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n isNull,\n isUndefined,\n useFindChild,\n useValidChildren,\n} from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n StepsContext,\n StepsDescendantsContext,\n StepsItemContext,\n useSteps,\n useStepsContext,\n useStepsItem,\n useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext extends Pick<\n StepsRootProps,\n \"items\" \| \"lazy\" \| \"lazyBehavior\"\n> {}\n\nexport interface StepsItem\n extends\n Omit<StepsItemProps, \"content\" \| \"index\" \| \"title\">,\n Pick<StepsIndicatorProps, \"complete\" \| \"current\" \| \"incomplete\"> {\n /*\n The content for step element.\n /\n content?: ReactNode\n /\n The description for step element.\n /\n description?: ReactNode\n /\n If true, display the step separator.\n \n @default true\n /\n hasSeparator?: boolean\n /\n The title for step element.\n /\n title?: string\n /\n Props for step content element.\n /\n contentProps?: StepsContentProps\n /\n Props for step description element.\n /\n descriptionProps?: StepsDescriptionProps\n /\n Props for step indicator element.\n /\n indicatorProps?: StepsIndicatorProps\n /\n Props for step separator element.\n /\n separatorProps?: StepsSeparatorProps\n /\n Props for step title element.\n /\n titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n extends\n Omit<HTMLStyledProps, \"onChange\">,\n Omit<UseStepsProps, \"count\" \| \"orientation\">,\n Pick<UseLazyMountProps, \"lazy\" \| \"lazyBehavior\">,\n ThemeProps<StepsStyle> {\n /\n If provided, generate step components based on steps.\n /\n items?: StepsItem[]\n}\n\nconst {\n ComponentContext,\n PropsContext: StepsPropsContext,\n useComponentContext,\n usePropsContext: useStepsPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n \"steps\",\n stepsStyle,\n)\n\nexport { StepsPropsContext, useStepsPropsContext }\n\n/\n `Steps` is a component that displays the progress of a multi-step process.\n \n @see https://yamada-ui.com/docs/components/steps\n /\nexport const StepsRoot = withProvider<\"div\", StepsRootProps, \"orientation\">(\n ({\n children,\n items = [],\n lazy,\n lazyBehavior,\n orientation: orientationProp,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const validChildren = useValidChildren(children)\n const stepsList = useFindChild<StepsListProps>(validChildren, StepsList)\n const {\n id,\n count,\n descendants,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n onNext,\n onPrev,\n } = useSteps({\n count: items.length \|\| Children.count(stepsList?.props.children),\n orientation: computedOrientation,\n ...rest,\n })\n const componentContext = useMemo(\n () => ({ items, lazy, lazyBehavior }),\n [items, lazy, lazyBehavior],\n )\n const stepsContext = useMemo(\n () => ({\n id,\n count,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n onNext,\n onPrev,\n }),\n [\n id,\n count,\n index,\n orientation,\n setIndex,\n getStatus,\n onNext,\n onPrev,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getContentProps,\n ],\n )\n\n return (\n <StepsDescendantsContext value={descendants}>\n <StepsContext value={stepsContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>{children}</styled.div>\n </ComponentContext>\n </StepsContext>\n </StepsDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n ({ children, ...rest }) => {\n const { items } = useComponentContext()\n const { getListProps } = useStepsContext()\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(\n (\n {\n complete,\n content: _content,\n current,\n description,\n hasSeparator = true,\n incomplete,\n title,\n contentProps: _contentProps,\n descriptionProps,\n indicatorProps,\n separatorProps,\n titleProps,\n ...rest\n },\n index,\n ) => (\n <StepsItem key={index} index={index} title={title} {...rest}>\n <StepsIndicator\n complete={complete}\n current={current}\n incomplete={incomplete}\n {...indicatorProps}\n />\n\n <styled.div>\n {title ? (\n <StepsTitle {...titleProps}>{title}</StepsTitle>\n ) : null}\n {description ? (\n <StepsDescription {...descriptionProps}>\n {description}\n </StepsDescription>\n ) : null}\n </styled.div>\n\n {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n </StepsItem>\n ),\n )\n }\n }, [children, items])\n\n return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n },\n \"list\",\n)()\n\nexport interface StepsItemProps\n extends HTMLStyledProps<\"li\">, UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n const {\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getRootProps,\n getSeparatorProps,\n getTitleProps,\n } = useStepsItem(props)\n const context = useMemo(\n () => ({\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getSeparatorProps,\n getTitleProps,\n }),\n [\n first,\n index,\n last,\n status,\n getTitleProps,\n getDescriptionProps,\n getSeparatorProps,\n getIndicatorProps,\n ],\n )\n\n return (\n <StepsItemContext value={context}>\n <styled.li {...getRootProps()} />\n </StepsItemContext>\n )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n /\n The element for the complete indicator.\n \n @default <CheckIcon />\n /\n complete?: ReactNode\n /\n The element for the current indicator.\n \n @default <StepsNumber />\n /\n current?: ReactNode\n /\n The element for the incomplete indicator.\n \n @default <StepsNumber />\n /\n incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n ({\n complete = <CheckIcon />,\n current = <StepsNumber />,\n incomplete = <StepsNumber />,\n ...rest\n }) => {\n const { status, getIndicatorProps } = useStepsItemContext()\n const components = useMemo(\n () => ({ complete, current, incomplete }),\n [complete, current, incomplete],\n )\n\n return (\n <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n )\n },\n \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n \"span\",\n \"number\",\n)(undefined, ({ children, ...rest }) => {\n const { index } = useStepsItemContext()\n\n return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useStepsItemContext()\n\n return getTitleProps(props)\n },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { getDescriptionProps } = useStepsItemContext()\n\n return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n \"div\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useStepsItemContext()\n\n return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n const { items } = useComponentContext()\n\n return useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(({ content, contentProps }, index) =>\n isUndefined(content) \|\| isNull(content) ? null : (\n <StepsContent key={index} index={index} {...contentProps}>\n {content}\n </StepsContent>\n ),\n )\n }\n }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n /\n The index of the step content.\n */\n index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n \"div\",\n \"content\",\n)(undefined, ({ index, ...rest }) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = index === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...rest,\n })\n\n return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n \"div\",\n StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n undefined,\n (props) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { count, index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = count !== 0 && count === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...props,\n })\n\n return { ...getContentProps(props), children }\n },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n \"button\",\n { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n const { getPrevTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n \"button\",\n { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n const { getNextTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}