npm - @yamada-ui/react - Versions diffs - 2.2.6 → 2.2.7-dev-20260804111744 - Mend

@yamada-ui/react 2.2.6 → 2.2.7-dev-20260804111744

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.cjs","names":["createSlotComponent","sliderStyle","useSlider","useValue","styled","varAttr"],"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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"}
1	+ {"version":3,"file":"slider.cjs","names":["createSlotComponent","sliderStyle","useValue","useSlider","useMemo","styled","varAttr"],"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/cjs/components/slider/use-slider.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");
@@ -73,7 +74,8 @@ const useSlider = (props = {}) => {
 		value
 	]);
 	const getPanValue = (0, react.useCallback)(({ x, y }, { bottom, height, left, width }) => {
-		let nextValue = (0, require_utils_index.utils_exports.percentToValue)((orientation === "horizontal" ? x - left : bottom - y) / (orientation === "horizontal" ? width : height), min, max);
+		const percent = (orientation === "horizontal" ? x - left : bottom - y) / (orientation === "horizontal" ? width : height);
+		let nextValue = (0, require_utils_index.utils_exports.percentToValue)(percent, min, max);
 		nextValue = parseFloat((0, require_utils_index.utils_exports.roundNumberToStep)(nextValue, min, step));
 		nextValue = (0, require_utils_index.utils_exports.clampNumber)(nextValue, min, max);
 		return nextValue;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-slider.cjs","names":["useFieldProps","useControllableState","useI18n","usePanEvent","mergeProps","visuallyHiddenAttributes","mergeRefs"],"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)\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.cjs","names":["useFieldProps","useControllableState","useI18n","useRef","usePanEvent","useCallback","mergeProps","visuallyHiddenAttributes","mergeRefs"],"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)\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/cjs/components/slot/slot.cjs CHANGED Viewed

@@ -1,3 +1,4 @@
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_children = require("../../utils/children.cjs");
 const require_props = require("../../core/components/props.cjs");
 let react = require("react");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slot.cjs","names":["useValidChildren","useFindChild","Children","mergeProps"],"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,gBAAgBA,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,YAAYC,iBAAAA,aAAa,eAAe,SAAS;CAEvD,IAAI,WAAW;EACb,MAAM,aAAa,UAAU,MAAM;EAEnC,MAAM,cAAc,cAAc,KAAK,UAAU;GAC/C,IAAI,UAAU,WAAW;IACvB,IAAIC,MAAAA,SAAS,MAAM,UAAU,IAAI,GAAG,OAAOA,MAAAA,SAAS,KAAK,IAAI;IAC7D,QAAA,~~GAAA~~,~~MAAA~~,~~eAAA~~,~~CAAyC~~,UAAU,IAC/C,WAAW,MAAM,WACjB;GACN,OACE,OAAO;EAEX,CAAC;EAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;GAAW,GAAI;~~GACG~~,~~WAAA~~,~~GAAA~~,~~MAAA~~,~~eAAA~~,~~CAAA~~,UAAU,KAAA,~~GAAA~~,~~MAAA~~,~~aAAA~~,~~CACT~~,YAAY,KAAA,GAAW,WAAW,IAC/C;EACK,CAAA;CAEf;CAEA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,GAAI;EAAO;CAAoB,CAAA;AACnD;AAKA,MAAM,aAAiC,EAAE,UAAU,GAAG,WAAW;CAC/D,KAAA,~~GAAA~~,~~MAAA~~,~~eAAA~~,~~CAA+C~~,QAAQ,GACrD,QAAA,~~GAAA~~,~~MAAA~~,~~aAAA~~,~~CAAoB~~,UAAUC,cAAAA,WAAW,MAAM,SAAS,KAAK,CAAC,CAAC,CAAC;CAElE,~~OAAOD~~,MAAAA,SAAS,MAAM,QAAQ,IAAI,IAAIA,MAAAA,SAAS,KAAK,IAAI,IAAI;AAC9D;AAEA,MAAa,aAAoC,EAAE,eAAe;CAEhE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAG,SAAW,CAAA;AACvB"}
1	+ {"version":3,"file":"slot.cjs","names":["useValidChildren","useFindChild","Children","isValidElement","cloneElement","mergeProps"],"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,gBAAgBA,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,YAAYC,iBAAAA,aAAa,eAAe,SAAS;CAEvD,IAAI,WAAW;EACb,MAAM,aAAa,UAAU,MAAM;EAEnC,MAAM,cAAc,cAAc,KAAK,UAAU;GAC/C,IAAI,UAAU,WAAW;IACvB,IAAIC,MAAAA,SAAS,MAAM,UAAU,IAAI,GAAG,OAAOA,MAAAA,SAAS,KAAK,IAAI;IAC7D,QAAA,GAAOC,MAAAA,eAAAA,CAAkC,UAAU,IAC/C,WAAW,MAAM,WACjB;GACN,OACE,OAAO;EAEX,CAAC;EAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;GAAW,GAAI;GACZA,WAAAA,GAAAA,MAAAA,eAAAA,CAAe,UAAU,KAAA,GACtBC,MAAAA,aAAAA,CAAa,YAAY,KAAA,GAAW,WAAW,IAC/C;EACK,CAAA;CAEf;CAEA,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,WAAD;EAAW,GAAI;EAAO;CAAoB,CAAA;AACnD;AAKA,MAAM,aAAiC,EAAE,UAAU,GAAG,WAAW;CAC/D,KAAA,GAAID,MAAAA,eAAAA,CAA2C,QAAQ,GACrD,QAAA,GAAOC,MAAAA,aAAAA,CAAa,UAAUC,cAAAA,WAAW,MAAM,SAAS,KAAK,CAAC,CAAC,CAAC;CAElE,OAAOH,MAAAA,SAAS,MAAM,QAAQ,IAAI,IAAIA,MAAAA,SAAS,KAAK,IAAI,IAAI;AAC9D;AAEA,MAAa,aAAoC,EAAE,eAAe;CAEhE,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAG,SAAW,CAAA;AACvB"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_effect = require("../../utils/effect.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_var = require("../../core/system/var.cjs");

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

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

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_system_provider = require("../../core/system/system-provider.cjs");
 let react = require("react");
 //#region src/components/snacks/use-snacks.tsx

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-snacks.cjs","names":["useSystem"],"sources":["../../../../src/components/snacks/use-snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { SnacksConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { SnackCloseButtonProps, SnackContentProps } from \"./snacks\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useSystem } from \"../../core\"\n\nexport interface Snack extends Omit<\n UseSnacksOptions,\n \"direction\" \| \"limit\" \| \"startIndex\"\n> {\n id: string\n onClose: () => void\n onCloseComplete?: () => void\n}\n\nlet counter = 0\n\ninterface SnackMethodsOptions extends Partial<Omit<Snack, \"onClose\">> {}\n\nexport interface UseSnacksOptions\n extends\n Omit<Alert.RootProps, \"direction\" \| \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\">,\n SnacksConfig {\n /*\n The description of the snack.\n /\n description?: ReactNode\n /\n The title of the snack.\n /\n title?: ReactNode\n /\n If `true`, the snack will have an icon.\n \n @default true\n /\n withIcon?: boolean\n /\n Props for the snack close button.\n /\n closeButtonProps?: SnackCloseButtonProps\n /\n Props for the snack content component.\n /\n contentProps?: SnackContentProps\n /\n Props for the alert description component.\n /\n descriptionProps?: Alert.DescriptionProps\n /\n Props for the alert icon component.\n /\n iconProps?: Alert.IconProps\n /\n Props for the alert loading component.\n /\n loadingProps?: Alert.LoadingProps\n /\n Props for the alert title component.\n /\n titleProps?: Alert.TitleProps\n}\n\n/\n `useSnacks` is a custom hook for controlling notifications used in forms and the like.\n \n @see https://yamada-ui.com/docs/hooks/use-snacks\n /\nexport const useSnacks = (options: UseSnacksOptions = {}) => {\n const [items, setItems] = useState<Snack[]>([])\n const { config } = useSystem()\n\n const systemOptions = useMemo(() => config.snacks ?? {}, [config])\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n const { direction, limit = 3, startIndex } = defaultOptions\n\n const getOptions = useCallback(\n (options: SnackMethodsOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n const snack = useMemo(() => {\n const methods = (options: SnackMethodsOptions = {}) => {\n options = getOptions(options)\n // eslint-disable-next-line react-hooks/globals\n counter += 1\n\n const { id = counter.toString(), ...rest } = options\n const onClose = () =>\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n\n const snack: Snack = { id, onClose, ...rest }\n\n setItems((prev) => [\n ...prev.splice(-1 ((limit ?? Infinity) - 1)),\n snack,\n ])\n\n return id\n }\n\n methods.update = (\n id: number \| string,\n options: Omit<SnackMethodsOptions, \"id\">,\n ) => {\n options = getOptions(options)\n\n setItems((prev) =>\n prev.map((prevOptions) =>\n prevOptions.id === id ? { ...prevOptions, ...options } : prevOptions,\n ),\n )\n }\n\n methods.closeAll = () => {\n setItems([])\n }\n\n methods.close = (id: number \| string) => {\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n }\n\n methods.isActive = (id: number \| string) =>\n !!items.find((prevOptions) => prevOptions.id === id)\n\n return methods\n }, [items, limit, getOptions])\n\n const snacks = useMemo(\n () => ({ direction, items, startIndex }),\n [direction, startIndex, items],\n )\n\n return { snack, snacks }\n}\n\nexport type UseSnacksReturn = ReturnType<typeof useSnacks>\n"],"mappings":"~~;;;;~~AAkBA,IAAI,UAAU;;;;;;AAsDd,MAAa,aAAa,UAA4B,CAAC,MAAM;CAC3D,MAAM,CAAC,OAAO,aAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAA8B~~,CAAC,CAAC;CAC9C,MAAM,EAAE,~~WAAWA~~,wBAAAA,UAAU;CAE7B,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~OAA8B~~,OAAO,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;CACjE,MAAM,kBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~QACG~~;EAAE,GAAG;EAAe,GAAG;CAAQ,IACtC,CAAC,SAAS,aAAa,CACzB;CACA,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAe;CAE7C,MAAM,cAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,aAAkC;EAAE,GAAG;EAAgB,GAAG;CAAQ,IACnE,CAAC,cAAc,CACjB;CAsDA,OAAO;EAAE,QAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~OApDmB~~;GAC1B,MAAM,WAAW,UAA+B,CAAC,MAAM;IACrD,UAAU,WAAW,OAAO;IAE5B,WAAW;IAEX,MAAM,EAAE,KAAK,QAAQ,SAAS,GAAG,GAAG,SAAS;IAC7C,MAAM,gBACJ,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,EAAE,CAAC;IAExE,MAAM,QAAe;KAAE;KAAI;KAAS,GAAG;IAAK;IAE5C,UAAU,SAAS,CACjB,GAAG,KAAK,OAAO,OAAO,SAAS,YAAY,EAAE,GAC7C,KACF,CAAC;IAED,OAAO;GACT;GAEA,QAAQ,UACN,IACA,YACG;IACH,UAAU,WAAW,OAAO;IAE5B,UAAU,SACR,KAAK,KAAK,gBACR,YAAY,OAAO,KAAK;KAAE,GAAG;KAAa,GAAG;IAAQ,IAAI,WAC3D,CACF;GACF;GAEA,QAAQ,iBAAiB;IACvB,SAAS,CAAC,CAAC;GACb;GAEA,QAAQ,SAAS,OAAwB;IACvC,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,EAAE,CAAC;GACxE;GAEA,QAAQ,YAAY,OAClB,CAAC,CAAC,MAAM,MAAM,gBAAgB,YAAY,OAAO,EAAE;GAErD,OAAO;EACT,GAAG;GAAC;GAAO;GAAO;EAAU,CAOf;EAAG,SAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~QAJP~~;GAAE;GAAW;GAAO;EAAW,IACtC;GAAC;GAAW;GAAY;EAAK,CAGV;CAAE;AACzB"}
1	+ {"version":3,"file":"use-snacks.cjs","names":["useState","useSystem","useMemo","useCallback"],"sources":["../../../../src/components/snacks/use-snacks.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { SnacksConfig } from \"../../core\"\nimport type { Alert } from \"../alert\"\nimport type { SnackCloseButtonProps, SnackContentProps } from \"./snacks\"\nimport { useCallback, useMemo, useState } from \"react\"\nimport { useSystem } from \"../../core\"\n\nexport interface Snack extends Omit<\n UseSnacksOptions,\n \"direction\" \| \"limit\" \| \"startIndex\"\n> {\n id: string\n onClose: () => void\n onCloseComplete?: () => void\n}\n\nlet counter = 0\n\ninterface SnackMethodsOptions extends Partial<Omit<Snack, \"onClose\">> {}\n\nexport interface UseSnacksOptions\n extends\n Omit<Alert.RootProps, \"direction\" \| \"title\">,\n Pick<Alert.LoadingProps, \"loadingScheme\">,\n SnacksConfig {\n /*\n The description of the snack.\n /\n description?: ReactNode\n /\n The title of the snack.\n /\n title?: ReactNode\n /\n If `true`, the snack will have an icon.\n \n @default true\n /\n withIcon?: boolean\n /\n Props for the snack close button.\n /\n closeButtonProps?: SnackCloseButtonProps\n /\n Props for the snack content component.\n /\n contentProps?: SnackContentProps\n /\n Props for the alert description component.\n /\n descriptionProps?: Alert.DescriptionProps\n /\n Props for the alert icon component.\n /\n iconProps?: Alert.IconProps\n /\n Props for the alert loading component.\n /\n loadingProps?: Alert.LoadingProps\n /\n Props for the alert title component.\n /\n titleProps?: Alert.TitleProps\n}\n\n/\n `useSnacks` is a custom hook for controlling notifications used in forms and the like.\n \n @see https://yamada-ui.com/docs/hooks/use-snacks\n /\nexport const useSnacks = (options: UseSnacksOptions = {}) => {\n const [items, setItems] = useState<Snack[]>([])\n const { config } = useSystem()\n\n const systemOptions = useMemo(() => config.snacks ?? {}, [config])\n const defaultOptions = useMemo(\n () => ({ ...systemOptions, ...options }),\n [options, systemOptions],\n )\n const { direction, limit = 3, startIndex } = defaultOptions\n\n const getOptions = useCallback(\n (options: SnackMethodsOptions) => ({ ...defaultOptions, ...options }),\n [defaultOptions],\n )\n\n const snack = useMemo(() => {\n const methods = (options: SnackMethodsOptions = {}) => {\n options = getOptions(options)\n // eslint-disable-next-line react-hooks/globals\n counter += 1\n\n const { id = counter.toString(), ...rest } = options\n const onClose = () =>\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n\n const snack: Snack = { id, onClose, ...rest }\n\n setItems((prev) => [\n ...prev.splice(-1 ((limit ?? Infinity) - 1)),\n snack,\n ])\n\n return id\n }\n\n methods.update = (\n id: number \| string,\n options: Omit<SnackMethodsOptions, \"id\">,\n ) => {\n options = getOptions(options)\n\n setItems((prev) =>\n prev.map((prevOptions) =>\n prevOptions.id === id ? { ...prevOptions, ...options } : prevOptions,\n ),\n )\n }\n\n methods.closeAll = () => {\n setItems([])\n }\n\n methods.close = (id: number \| string) => {\n setItems((prev) => prev.filter((prevOptions) => prevOptions.id !== id))\n }\n\n methods.isActive = (id: number \| string) =>\n !!items.find((prevOptions) => prevOptions.id === id)\n\n return methods\n }, [items, limit, getOptions])\n\n const snacks = useMemo(\n () => ({ direction, items, startIndex }),\n [direction, startIndex, items],\n )\n\n return { snack, snacks }\n}\n\nexport type UseSnacksReturn = ReturnType<typeof useSnacks>\n"],"mappings":";;;;;AAkBA,IAAI,UAAU;;;;;;AAsDd,MAAa,aAAa,UAA4B,CAAC,MAAM;CAC3D,MAAM,CAAC,OAAO,aAAA,GAAYA,MAAAA,SAAAA,CAAkB,CAAC,CAAC;CAC9C,MAAM,EAAE,WAAWC,wBAAAA,UAAU;CAE7B,MAAM,iBAAA,GAAgBC,MAAAA,QAAAA,OAAc,OAAO,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;CACjE,MAAM,kBAAA,GAAiBA,MAAAA,QAAAA,QACd;EAAE,GAAG;EAAe,GAAG;CAAQ,IACtC,CAAC,SAAS,aAAa,CACzB;CACA,MAAM,EAAE,WAAW,QAAQ,GAAG,eAAe;CAE7C,MAAM,cAAA,GAAaC,MAAAA,YAAAA,EAChB,aAAkC;EAAE,GAAG;EAAgB,GAAG;CAAQ,IACnE,CAAC,cAAc,CACjB;CAsDA,OAAO;EAAE,QAAA,GApDKD,MAAAA,QAAAA,OAAc;GAC1B,MAAM,WAAW,UAA+B,CAAC,MAAM;IACrD,UAAU,WAAW,OAAO;IAE5B,WAAW;IAEX,MAAM,EAAE,KAAK,QAAQ,SAAS,GAAG,GAAG,SAAS;IAC7C,MAAM,gBACJ,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,EAAE,CAAC;IAExE,MAAM,QAAe;KAAE;KAAI;KAAS,GAAG;IAAK;IAE5C,UAAU,SAAS,CACjB,GAAG,KAAK,OAAO,OAAO,SAAS,YAAY,EAAE,GAC7C,KACF,CAAC;IAED,OAAO;GACT;GAEA,QAAQ,UACN,IACA,YACG;IACH,UAAU,WAAW,OAAO;IAE5B,UAAU,SACR,KAAK,KAAK,gBACR,YAAY,OAAO,KAAK;KAAE,GAAG;KAAa,GAAG;IAAQ,IAAI,WAC3D,CACF;GACF;GAEA,QAAQ,iBAAiB;IACvB,SAAS,CAAC,CAAC;GACb;GAEA,QAAQ,SAAS,OAAwB;IACvC,UAAU,SAAS,KAAK,QAAQ,gBAAgB,YAAY,OAAO,EAAE,CAAC;GACxE;GAEA,QAAQ,YAAY,OAClB,CAAC,CAAC,MAAM,MAAM,gBAAgB,YAAY,OAAO,EAAE;GAErD,OAAO;EACT,GAAG;GAAC;GAAO;GAAO;EAAU,CAOf;EAAG,SAAA,GALDA,MAAAA,QAAAA,QACN;GAAE;GAAW;GAAO;EAAW,IACtC;GAAC;GAAW;GAAY;EAAK,CAGV;CAAE;AACzB"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"stack.cjs","names":["createComponent","stackStyle","useValidChildren","Fragment","styled"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n /*\n The CSS `align-items` property.\n /\n align?: CSSProps[\"alignItems\"]\n /\n The CSS `flex-direction` property.\n /\n direction?: CSSProps[\"flexDirection\"]\n /\n The CSS `justify-content` property.\n /\n justify?: CSSProps[\"justifyContent\"]\n /\n If `true`, each stack item will show a separator.\n /\n separator?: ReactElement\n /\n The CSS `flex-wrap` property.\n /\n wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n PropsContext: StackPropsContext,\n usePropsContext: useStackPropsContext,\n withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/\n `Stack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n ({\n align: alignItems,\n children,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n separator,\n wrap: flexWrap,\n ...rest\n }) => {\n const isColumn = (value: any) =>\n value === \"column\" \|\| value === \"column-reverse\"\n\n const validChildren = useValidChildren(children)\n const cloneChildren = useMemo(\n () =>\n separator\n ? validChildren.map((child, index) => {\n const key = typeof child.key !== \"undefined\" ? child.key : index\n\n const cloneSeparator = cloneElement<any>(separator, {\n borderWidth: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n ),\n h: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"fit-content\" : \"100%\",\n ),\n w: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"100%\" : \"fit-content\",\n ),\n })\n\n return (\n <Fragment key={key}>\n {index ? cloneSeparator : null}\n {child}\n </Fragment>\n )\n })\n : validChildren,\n [separator, flexDirection, validChildren],\n )\n\n return (\n <styled.div\n alignItems={alignItems}\n flexDirection={flexDirection}\n flexWrap={flexWrap}\n justifyContent={justifyContent}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)()\n"],"mappings":"~~;;;;;;;;;~~AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACEA,yBAAAA,gBAAwC,SAASC,oBAAAA,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,gBAAgBC,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~OAEF~~,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,kBAAA,~~GAAA~~,~~MAAA~~,~~aAAA~~,~~CAAmC~~,WAAW;GAClD,cAAA,GAAA,oBAAA,~~cAAA~~,cAAA,~~CAA2B~~,gBAAgB,UACzC,SAAS,KAAK,IAAI,cAAc,WAClC;GACA,IAAA,GAAA,oBAAA,~~cAAA~~,cAAA,~~CAAiB~~,gBAAgB,UAC/B,SAAS,KAAK,IAAI,gBAAgB,MACpC;GACA,IAAA,GAAA,oBAAA,~~cAAA~~,cAAA,~~CAAiB~~,gBAAgB,UAC/B,SAAS,KAAK,IAAI,SAAS,aAC7B;EACF,CAAC;EAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,MAAAA,UAAD,EAAA,UAAA,CACG,QAAQ,iBAAiB,MACzB,KACO,EAAA,GAHK,GAGL;CAEd,CAAC,IACD,eACN;EAAC;EAAW;EAAe;CAAa,CAC1C;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;EACc;EACG;EACL;EACM;EAChB,GAAI;EAEH,UAAA;CACS,CAAA;AAEhB,CACF,CAAC,CAAC"}
1	+ {"version":3,"file":"stack.cjs","names":["createComponent","stackStyle","useValidChildren","useMemo","cloneElement","Fragment","styled"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n /*\n The CSS `align-items` property.\n /\n align?: CSSProps[\"alignItems\"]\n /\n The CSS `flex-direction` property.\n /\n direction?: CSSProps[\"flexDirection\"]\n /\n The CSS `justify-content` property.\n /\n justify?: CSSProps[\"justifyContent\"]\n /\n If `true`, each stack item will show a separator.\n /\n separator?: ReactElement\n /\n The CSS `flex-wrap` property.\n /\n wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n PropsContext: StackPropsContext,\n usePropsContext: useStackPropsContext,\n withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/\n `Stack` is a component that groups elements and provides space between child elements.\n \n @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n ({\n align: alignItems,\n children,\n direction: flexDirection = \"column\",\n justify: justifyContent,\n separator,\n wrap: flexWrap,\n ...rest\n }) => {\n const isColumn = (value: any) =>\n value === \"column\" \|\| value === \"column-reverse\"\n\n const validChildren = useValidChildren(children)\n const cloneChildren = useMemo(\n () =>\n separator\n ? validChildren.map((child, index) => {\n const key = typeof child.key !== \"undefined\" ? child.key : index\n\n const cloneSeparator = cloneElement<any>(separator, {\n borderWidth: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n ),\n h: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"fit-content\" : \"100%\",\n ),\n w: replaceObject(flexDirection, (value) =>\n isColumn(value) ? \"100%\" : \"fit-content\",\n ),\n })\n\n return (\n <Fragment key={key}>\n {index ? cloneSeparator : null}\n {child}\n </Fragment>\n )\n })\n : validChildren,\n [separator, flexDirection, validChildren],\n )\n\n return (\n <styled.div\n alignItems={alignItems}\n flexDirection={flexDirection}\n flexWrap={flexWrap}\n justifyContent={justifyContent}\n {...rest}\n >\n {cloneChildren}\n </styled.div>\n )\n },\n)()\n"],"mappings":";;;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACEA,yBAAAA,gBAAwC,SAASC,oBAAAA,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,gBAAgBC,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,iBAAA,GAAgBC,MAAAA,QAAAA,OAElB,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,kBAAA,GAAiBC,MAAAA,aAAAA,CAAkB,WAAW;GAClD,cAAA,GAAA,oBAAA,cAAa,cAAA,CAAc,gBAAgB,UACzC,SAAS,KAAK,IAAI,cAAc,WAClC;GACA,IAAA,GAAA,oBAAA,cAAG,cAAA,CAAc,gBAAgB,UAC/B,SAAS,KAAK,IAAI,gBAAgB,MACpC;GACA,IAAA,GAAA,oBAAA,cAAG,cAAA,CAAc,gBAAgB,UAC/B,SAAS,KAAK,IAAI,SAAS,aAC7B;EACF,CAAC;EAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,MAAAA,UAAD,EAAA,UAAA,CACG,QAAQ,iBAAiB,MACzB,KACO,EAAA,GAHK,GAGL;CAEd,CAAC,IACD,eACN;EAAC;EAAW;EAAe;CAAa,CAC1C;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;EACc;EACG;EACL;EACM;EAChB,GAAI;EAEH,UAAA;CACS,CAAA;AAEhB,CACF,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_children = require("../../utils/children.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_factory = require("../../core/system/factory.cjs");
@@ -46,11 +47,13 @@ const ZStack = withContext(({ css, children, direction = "end", fit = true, reve
 				...vertical(space),
 				...horizontal(space)
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: (0, react.cloneElement)(child, {
+			const props = {
 				...child.props,
 				ref: require_ref.mergeRefs(child.props.ref, ref),
 				css: require_merge_css.mergeCSS(child.props.css, css)
-			}) }, key);
+			};
+			const clonedChild = (0, react.cloneElement)(child, props);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: clonedChild }, key);
 		});
 	}, [
 		children,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"z-stack.cjs","names":["createComponent","zStackStyle","getValidChildren","~~Fragment~~","mergeRefs","mergeCSS","styled","useInjectVarsIntoCss","useInjectVarsIntoProps"],"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 return { [!reverse ? \"top\" : \"bottom\"]: 0 }\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 return { [!reverse ? \"left\" : \"right\"]: 0 }\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,gBACEA,yBAAAA,gBAA0C,gBAAgBC,sBAAAA,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,UAAA,~~GAAA~~,~~MAAA~~,~~OAAA~~,~~iBACJ~~,IAAI,IAAI,CACV;CACA,MAAM,CAAC,MAAM,YAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAAuD~~;EAClE,QAAQ;EACR,OAAO;CACT,CAAC;CAED,MAAM,YAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,UAAkB;EACjB,IAAI,UAAU,WAAW,OAAO,GAC9B,OAAO,GAAG,CAAC,UAAU,WAAW,QAAQ,MAAM;OAC3C,IAAI,UAAU,WAAW,KAAK,GACjC,OAAO,GAAG,CAAC,UAAU,QAAQ,WAAW,MAAM;OAC3C,OAAO,GAAG,CAAC,UAAU,QAAQ,WAAW,EAAE;CACjD,GACA,CAAC,WAAW,OAAO,CACrB;CAEA,MAAM,cAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,UAAkB;EACjB,IAAI,UAAU,SAAS,QAAQ,GAC7B,OAAO,GAAG,CAAC,UAAU,UAAU,SAAS,MAAM;OAC3C,IAAI,UAAU,SAAS,MAAM,GAChC,OAAO,GAAG,CAAC,UAAU,SAAS,UAAU,MAAM;OAC3C,OAAO,GAAG,CAAC,UAAU,SAAS,UAAU,EAAE;CACjD,GACA,CAAC,WAAW,OAAO,CACrB;CAEA,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~OAA8B~~;EA+BlC,OA9BsBC,iBAAAA,iBAAiB,QAEJ,CAAC,CAAC,KAAK,OAAO,UAAU;GACzD,MAAM,OAAA,~~GAAA~~,~~MAAA~~,~~UAAA~~,~~CAAgC~~;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~~,~~iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD,EAAA,WAAA,GAAA,MAAA,aAAA,CAF0B,OAAO~~;~~IALtC~~,GAAG,MAAM;IACT,KAAKC,YAAAA,UAAU,MAAM,MAAM,KAAK,GAAG;IACnC,KAAKC,kBAAAA,SAAS,MAAM,MAAM,KAAK,GAAG;~~GAGQ~~,~~CAEN~~,~~EAAY~~,GAA5B,GAA4B;EACpD,CAEoB;CACtB,GAAG;EAAC;EAAU;EAAY;EAAU;CAAU,CAAC;CAE/C,CAAA,GAAA,MAAA,UAAA,OAAgB;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,QAAQ,IAAI,aAAa,QAAQ;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,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;EACO;EACL,WAAW,MAAM,GAAG,KAAK,OAAO,MAAM,KAAA;EACtC,UAAU,MAAM,GAAG,KAAK,MAAM,MAAM,KAAA;EACpC,GAAI;EAEH,UAAA;CACS,CAAA;AAEhB,CACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,MAAMC,wBAAAA,qBAAqB,MAAM,KAAK,EAAE,KAAK,QAAQ,CAAC;CAG5D,OAAO;EAAE,GAFIC,wBAAAA,uBAAuB,OAAO,EAAE,KAAK,QAAQ,CAE3C;EAAG;CAAI;AACxB,CAAC"}
1	+ {"version":3,"file":"z-stack.cjs","names":["createComponent","zStackStyle","useRef","useState","useCallback","useMemo","getValidChildren","createRef","mergeRefs","mergeCSS","cloneElement","Fragment","styled","useInjectVarsIntoCss","useInjectVarsIntoProps"],"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 return { [!reverse ? \"top\" : \"bottom\"]: 0 }\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 return { [!reverse ? \"left\" : \"right\"]: 0 }\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/cjs/components/steps/steps.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_children = require("../../utils/children.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_factory = require("../../core/system/factory.cjs");
@@ -19,7 +20,8 @@ const { ComponentContext, PropsContext: StepsPropsContext, useComponentContext,
 */
 const StepsRoot = withProvider(({ children, items = [], lazy, lazyBehavior, orientation: orientationProp, ...rest }) => {
 	const computedOrientation = require_hooks_use_value_index.useValue(orientationProp);
-	const stepsList = require_children.useFindChild(require_children.useValidChildren(children), StepsList);
+	const validChildren = require_children.useValidChildren(children);
+	const stepsList = require_children.useFindChild(validChildren, StepsList);
 	const { id, count, descendants, getStatus, index, orientation, setIndex, getContentProps, getListProps, getNextTriggerProps, getPrevTriggerProps, getRootProps, onNext, onPrev } = require_use_steps.useSteps({
 		count: items.length || react.Children.count(stepsList?.props.children),
 		orientation: computedOrientation,
@@ -34,36 +36,37 @@ const StepsRoot = withProvider(({ children, items = [], lazy, lazyBehavior, orie
 		lazy,
 		lazyBehavior
 	]);
+	const stepsContext = (0, react.useMemo)(() => ({
+		id,
+		count,
+		getStatus,
+		index,
+		orientation,
+		setIndex,
+		getContentProps,
+		getListProps,
+		getNextTriggerProps,
+		getPrevTriggerProps,
+		onNext,
+		onPrev
+	}), [
+		id,
+		count,
+		index,
+		orientation,
+		setIndex,
+		getStatus,
+		onNext,
+		onPrev,
+		getListProps,
+		getNextTriggerProps,
+		getPrevTriggerProps,
+		getContentProps
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_steps.StepsDescendantsContext, {
 		value: descendants,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_steps.StepsContext, {
-			value: (0, react.useMemo)(() => ({
-				id,
-				count,
-				getStatus,
-				index,
-				orientation,
-				setIndex,
-				getContentProps,
-				getListProps,
-				getNextTriggerProps,
-				getPrevTriggerProps,
-				onNext,
-				onPrev
-			}), [
-				id,
-				count,
-				index,
-				orientation,
-				setIndex,
-				getStatus,
-				onNext,
-				onPrev,
-				getListProps,
-				getNextTriggerProps,
-				getPrevTriggerProps,
-				getContentProps
-			]),
+			value: stepsContext,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
 				value: componentContext,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
@@ -108,26 +111,27 @@ const StepsList = withContext(({ children, ...rest }) => {
 }, "list")();
 const StepsItem = withContext((props) => {
 	const { first, index, last, status, getDescriptionProps, getIndicatorProps, getRootProps, getSeparatorProps, getTitleProps } = require_use_steps.useStepsItem(props);
+	const context = (0, react.useMemo)(() => ({
+		first,
+		index,
+		last,
+		status,
+		getDescriptionProps,
+		getIndicatorProps,
+		getSeparatorProps,
+		getTitleProps
+	}), [
+		first,
+		index,
+		last,
+		status,
+		getTitleProps,
+		getDescriptionProps,
+		getSeparatorProps,
+		getIndicatorProps
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_steps.StepsItemContext, {
-		value: (0, react.useMemo)(() => ({
-			first,
-			index,
-			last,
-			status,
-			getDescriptionProps,
-			getIndicatorProps,
-			getSeparatorProps,
-			getTitleProps
-		}), [
-			first,
-			index,
-			last,
-			status,
-			getTitleProps,
-			getDescriptionProps,
-			getSeparatorProps,
-			getIndicatorProps
-		]),
+		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.li, { ...getRootProps() })
 	});
 }, "item")();