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/esm/components/slider/use-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-slider.js","names":[],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] \| number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n \n @default 0\n /\n betweenThumbs?: number\n /\n The initial value of the slider.\n /\n defaultValue?: Y\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The maximum allowed value of the slider. Cannot be less than min.\n \n @default 100\n /\n max?: number\n /\n The minimum allowed value of the slider. Cannot be greater than max.\n \n @default 0\n /\n min?: number\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The orientation of the slider.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The step in which increments or decrements have to be made.\n \n @default 1\n /\n step?: number\n /\n The value of the slider.\n /\n value?: Y\n /\n This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n \n It is used to set the `aria-valuetext` property of the input.\n /\n getAriaValueText?: (value: number, index: number) => string \| undefined\n /\n Function called whenever the slider value changes.\n /\n onChange?: (value: Y) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: Y) => void\n /\n Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] \| number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled \|\| readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value)\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":";;;;;;;;;;;AA2GA,MAAa,aACX,QAA2B,CAAC,MACzB;CACH,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,mBAAmB,gBACnB,kBAAkB,eAClB,gBAAgB,GAChB,eAAe,GACf,UACA,kBACA,MAAM,KACN,MAAM,GACN,cAAc,cACd,UACA,UACA,OAAO,GACP,OAAO,WACP,UAAU,cACV,aACA,eACA,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,EAAE,MAAM,QAAQ,QAAQ;CAC9B,MAAM,eAAe,OAAO,CAAC;CAC7B,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,CAAC,GAAG,oBAAoB,YAA4B;EACxD,QAAQ,GAAG,OAAO,SAAS;GACzB,IAAI,CAAC,aAAa;GAElB,MAAM,WAAW,YAAY,OAAO,IAAI;GAExC,IAAI,OAAO;IACT,MAAM,QAAQ,aAAa,YAAY;IACvC,MAAM,gBAAgB,aAAa,YAAY,IAAI,IAAI;IACvD,MAAM,gBAAgB,MAAM;IAE5B,cACG,QAAQ,CAAC,UAAU,aAAa,IAAI,CAAC,eAAe,QAAQ,CAC/D;GACF,OACE,cAAc,QAAa;EAE/B;EACA,SAAS,GAAG,OAAO,SAAS;GAC1B,IAAI,CAAC,aAAa;GAElB,MAAM,WAAW,YAAY,OAAO,IAAI;GAExC,SAAS,aAAa,SAAS,QAAQ;EACzC;EACA,UAAU,GAAG,OAAO,SAAS;GAC3B,IAAI,CAAC,aAAa;GAElB,MAAM,WAAW,YAAY,OAAO,IAAI;GAExC,IAAI,OAAO;IACT,MAAM,YAAY,MAAM,KAAK,UAAU,KAAK,IAAI,QAAQ,QAAQ,CAAC;IACjE,MAAM,UAAU,KAAK,IAAI,GAAG,SAAS;IACrC,MAAM,QAAQ,UAAU,QAAQ,OAAO;IAEvC,aAAa,UAAU;IAEvB,MAAM,QAAQ,UAAU;IAExB,MAAM,gBAAgB,MADA,UAAU,IAAI,IAAI;IAGxC,gBACG,QAAQ,CAAC,UAAU,aAAa,IAAI,CAAC,eAAe,QAAQ,CAC/D;GACF,OAAO;IACL,aAAa,UAAU;IAEvB,gBAAgB,KAAK;GACvB;GAEA,SAAS,aAAa,SAAS,QAAQ;EACzC;CACF,CAAC;CACD,MAAM,QAAQ,EAAA,GAAA,cAAA,SAAA,CAAU,KAAK;CAC7B,MAAM,UACJ,QACI,MAAM,KAAK,WAAA,GAAA,cAAA,eAAA,CAAyB,OAAO,KAAK,GAAG,CAAC,KAAA,GAAA,cAAA,eAAA,CACrC,OAAO,KAAK,GAAG;CAEpC,MAAM,WAAW,MAAM,OAAO;CAC9B,MAAM,UAAU,SAAS,MAAM,OAAO;CAEtC,IAAI,MAAM,KAAK,QAAQ,KAAK,iDAAiD;CAE7E,MAAM,YAAY,aACf,UAAkB;EACjB,MAAM,QAAQ,UAAU;EAExB,MAAM,gBAAgB,QAAQ,MADR,UAAU,IAAI,IAAI,KACa;EAErD,OAAO;GACL,KAAK,QAAS,QAAQ,gBAAgB,gBAAgB,MAAO;GAC7D,KAAK,QAAS,QAAQ,MAAM,gBAAgB,gBAAiB;EAC/D;CACF,GACA;EAAC;EAAe;EAAK;EAAK;EAAO;CAAK,CACxC;CAEA,MAAM,cAAc,aACjB,EAAE,GAAG,KAAY,EAAE,QAAQ,QAAQ,MAAM,YAAqB;EAK7D,IAAI,aAAA,GAAA,cAAA,eAAA,EAJS,gBAAgB,eAAe,IAAI,OAAO,SAAS,MACjD,gBAAgB,eAAe,QAAQ,SAGd,KAAK,GAAG;EAEhD,YAAY,YAAA,GAAA,cAAA,kBAAA,CAA6B,WAAW,KAAK,IAAI,CAAC;EAC9D,aAAA,GAAA,cAAA,YAAA,CAAwB,WAAW,KAAK,GAAG;EAE3C,OAAO;CACT,GACA;EAAC;EAAa;EAAK;EAAK;CAAI,CAC9B;CAEA,MAAM,WAAW,aACd,OAAe,UAAkB;EAChC,IAAI,CAAC,aAAa;EAElB,MAAM,EAAE,KAAK,QAAQ,UAAU,KAAK;EAEpC,QAAQ,YAAA,GAAA,cAAA,kBAAA,CAA6B,OAAO,KAAK,OAAO,CAAC;EACzD,SAAA,GAAA,cAAA,YAAA,CAAoB,OAAO,KAAK,GAAG;EAEnC,UAAU,SAAS;GACjB,KAAA,GAAA,cAAA,QAAA,CAAY,IAAI,GAAG;IACjB,MAAM,OAAO,CAAC,GAAG,IAAI;IAErB,KAAK,SAAS;IAEd,OAAO;GACT,OACE,OAAO;EAEX,CAAC;CACH,GACA;EAAC;EAAW;EAAa;EAAS;CAAQ,CAC5C;CAEA,MAAM,SAAS,aACZ,OAAe,OAAO,YACrB,QACI,SAAS,OAAO,MAAM,SAAU,IAAI,IACpC,SAAS,OAAO,QAAQ,IAAI,GAClC;EAAC;EAAS;EAAO;EAAU;CAAK,CAClC;CAEA,MAAM,WAAW,aACd,OAAe,OAAO,YACrB,QACI,SAAS,OAAO,MAAM,SAAU,IAAI,IACpC,SAAS,OAAO,QAAQ,IAAI,GAClC;EAAC;EAAS;EAAO;EAAU;CAAK,CAClC;CAEA,MAAM,YAAY,aACf,WAAmB,OAAsC;EACxD,MAAM,EAAE,KAAK,QAAQ,UAAU,KAAK;EAEpC,aAAa,IAAI;GACf,iBAAiB,SAAS,KAAK;GAC/B,iBAAiB,SAAS,KAAK;GAC/B,kBAAkB,OAAO,KAAK;GAC9B,eAAe,OAAO,KAAK;GAC3B,WAAW,SAAS,OAAO,GAAG;GAC9B,YAAY,SAAS,OAAO,GAAG;GAC/B,gBAAgB,SAAS,OAAO,OAAO;GACvC,cAAc,OAAO,OAAO,OAAO;EACrC,CAAC;CACH,GACA;EAAC;EAAW;EAAU;EAAU;EAAQ;CAAO,CACjD;CAEA,MAAM,eAA2B,aAC9B,QAAQ,CAAC,MAAM;EACd,MAAM,gBAA2B,WAC/B,WACA,EAAE,oBAAoB,YAAY,GAClC,MACA,OACA;GAAE,QAAQ,WAAW;GAAQ,SAAS,WAAW;EAAQ,CAC3D,CAAC,CAAC;EAEF,cAAc,UAAU,CAAC;EAEzB,KAAA,GAAA,cAAA,QAAA,CAAY,OAAO,GAAG;GACpB,cAAc,MAAM,mBAAmB,GAAG,KAAK,IAAI,QAAQ,EAAG,EAAE;GAChE,cAAc,MAAM,iBAAiB,GAAG,KAAK,IAAI,QAAQ,EAAG,EAAE;EAChE,OAAO;GACL,cAAc,MAAM,mBAAmB;GACvC,cAAc,MAAM,iBAAiB,GAAG,KAAK,IAAI,OAAO,EAAE;EAC5D;EAEA,OAAO;CACT,GACA;EAAC;EAAW;EAAY;EAAa;EAAS;CAAI,CACpD;CAEA,MAAM,gBAAyD,aAC5D,EAAE,QAAQ,GAAG,GAAG,UAAU,CAAC,OAAO;EACjC,GAAG;EACH,GAAG;EACH,GAAG;EACH;EACA,MAAM;EACN;EACA;EACA;EACA;EACA,OAAO,QAAQ,MAAM,SAAU;EAC/B,GAAG;EACH,KAAK,UAAU,IAAI,UAAU,MAAM,KAAK,GAAG,IAAI,MAAM;CACvD,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAEA,MAAM,gBAA4B,aAC/B,UACC,iBAAiB;EACf,GAAG;EACH,oBAAoB;EACpB,GAAG;CACL,CAAC,GACH;EAAC;EAAW;EAAkB;CAAW,CAC3C;CAEA,MAAM,gBAA4B,aAC/B,WAAW;EACV,GAAG;EACH,oBAAoB;EACpB,eAAA,GAAA,cAAA,SAAA,CAAuB,KAAK;EAC5B,GAAG;CACL,IACA;EAAC;EAAW;EAAa;CAAK,CAChC;CA4EA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAjFA,aACG,EAAE,OAAO,OAAO,WAAW,GAAG,YAAY;GACzC,MAAM,UAAU,QACZ,MAAM,KAAK,aAAa,YAAY,MAAM,KAC1C,YAAY;GAChB,MAAM,WAAA,GAAA,cAAA,eAAA,CAAyB,WAAW,KAAK,GAAG;GAElD,OAAO;IACL,GAAG;IACH,eAAe;IACf,iBAAA,GAAA,cAAA,SAAA,CAAyB,OAAO;IAChC,oBAAoB;IACpB,MAAM;IACN,GAAG;IACH,OAAO;KAAE,GAAG;KAAO,mBAAmB,GAAG,QAAQ;IAAG;GACtD;EACF,GACA;GAAC;GAAW;GAAK;GAAK;GAAa;GAAO;EAAK,CAgEtC;EACX;EACA;EACA,eAhE2D,aAC1D,EAAE,QAAQ,GAAG,GAAG,SAAS,CAAC,MAAM;GAC/B,MAAM,EAAE,KAAK,QAAQ,UAAU,KAAK;GAEpC,MAAM,QAAmB;IACvB,GAAG;IACH,GAAG;IACH,cAAc,EAAE,cAAc;IAC9B,oBAAoB;IACpB,iBAAiB;IACjB,iBAAiB;IACjB,MAAM;IACN,UAAU,cAAc,IAAI;IAC5B,GAAG;IACH,oBAAA,GAAA,cAAA,GAAA,CAAsB,KAAK,oBAAoB,cAAc;IAC7D,YAAA,GAAA,cAAA,WAAA,CAAsB,KAAK,WAAW,UAAU,KAAK,CAAC;GACxD;GAEA,IAAI,OAAO;IACT,MAAM,eAAe,MAAM;IAE3B,MAAM,iBAAA,GAAA,cAAA,SAAA,CAAyB,UAAU,CAAC;IAC1C,MAAM,eAAA,GAAA,cAAA,SAAA,CAAuB,UAAU,CAAC;IACxC,MAAM,mBAAmB;IACzB,MAAM,oBACJ,iBACA,mBAAmB,cAAc,KAAK,KACtC,aAAa,SAAS;GAC1B,OAAO;IACL,MAAM,eAAA,GAAA,cAAA,SAAA,CAAuB,UAAU,CAAC;IACxC,MAAM,mBAAmB;IACzB,MAAM,oBACJ,iBAAiB,mBAAmB,OAAO,KAAK,KAAK,MAAM,SAAS;GACxE;GAEA,OAAO;EACT,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAcY;EACZ;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-slider.js","names":["isNumber","valueToPercent","percentToValue","roundNumberToStep","clampNumber","isArray","dataAttr","cx","handlerAll"],"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/esm/components/snacks/snacks.js.map CHANGED Viewed

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

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

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

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

@@ -46,11 +46,13 @@ const ZStack = withContext(({ css, children, direction = "end", fit = true, reve
 				...vertical(space),
 				...horizontal(space)
 			};
-			return /* @__PURE__ */ jsx(Fragment, { children: cloneElement(child, {
+			const props = {
 				...child.props,
 				ref: mergeRefs(child.props.ref, ref),
 				css: mergeCSS(child.props.css, css)
-			}) }, key);
+			};
+			const clonedChild = cloneElement(child, props);
+			return /* @__PURE__ */ jsx(Fragment, { children: clonedChild }, key);
 		});
 	}, [
 		children,

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

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

@@ -19,7 +19,8 @@ const { ComponentContext, PropsContext: StepsPropsContext, useComponentContext,
 */
 const StepsRoot = withProvider(({ children, items = [], lazy, lazyBehavior, orientation: orientationProp, ...rest }) => {
 	const computedOrientation = useValue(orientationProp);
-	const stepsList = useFindChild(useValidChildren(children), StepsList);
+	const validChildren = useValidChildren(children);
+	const stepsList = useFindChild(validChildren, StepsList);
 	const { id, count, descendants, getStatus, index, orientation, setIndex, getContentProps, getListProps, getNextTriggerProps, getPrevTriggerProps, getRootProps, onNext, onPrev } = useSteps({
 		count: items.length || Children.count(stepsList?.props.children),
 		orientation: computedOrientation,
@@ -34,36 +35,37 @@ const StepsRoot = withProvider(({ children, items = [], lazy, lazyBehavior, orie
 		lazy,
 		lazyBehavior
 	]);
+	const stepsContext = 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__ */ jsx(StepsDescendantsContext, {
 		value: descendants,
 		children: /* @__PURE__ */ jsx(StepsContext, {
-			value: 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__ */ jsx(ComponentContext, {
 				value: componentContext,
 				children: /* @__PURE__ */ jsx(styled.div, {
@@ -108,26 +110,27 @@ const StepsList = withContext(({ children, ...rest }) => {
 }, "list")();
 const StepsItem = withContext((props) => {
 	const { first, index, last, status, getDescriptionProps, getIndicatorProps, getRootProps, getSeparatorProps, getTitleProps } = useStepsItem(props);
+	const context = useMemo(() => ({
+		first,
+		index,
+		last,
+		status,
+		getDescriptionProps,
+		getIndicatorProps,
+		getSeparatorProps,
+		getTitleProps
+	}), [
+		first,
+		index,
+		last,
+		status,
+		getTitleProps,
+		getDescriptionProps,
+		getSeparatorProps,
+		getIndicatorProps
+	]);
 	return /* @__PURE__ */ jsx(StepsItemContext, {
-		value: useMemo(() => ({
-			first,
-			index,
-			last,
-			status,
-			getDescriptionProps,
-			getIndicatorProps,
-			getSeparatorProps,
-			getTitleProps
-		}), [
-			first,
-			index,
-			last,
-			status,
-			getTitleProps,
-			getDescriptionProps,
-			getSeparatorProps,
-			getIndicatorProps
-		]),
+		value: context,
 		children: /* @__PURE__ */ jsx(styled.li, { ...getRootProps() })
 	});
 }, "item")();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"steps.js","names":[],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { Children, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n isNull,\n isUndefined,\n useFindChild,\n useValidChildren,\n} from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n StepsContext,\n StepsDescendantsContext,\n StepsItemContext,\n useSteps,\n useStepsContext,\n useStepsItem,\n useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext extends Pick<\n StepsRootProps,\n \"items\" \| \"lazy\" \| \"lazyBehavior\"\n> {}\n\nexport interface StepsItem\n extends\n Omit<StepsItemProps, \"content\" \| \"index\" \| \"title\">,\n Pick<StepsIndicatorProps, \"complete\" \| \"current\" \| \"incomplete\"> {\n /*\n The content for step element.\n /\n content?: ReactNode\n /\n The description for step element.\n /\n description?: ReactNode\n /\n If true, display the step separator.\n \n @default true\n /\n hasSeparator?: boolean\n /\n The title for step element.\n /\n title?: string\n /\n Props for step content element.\n /\n contentProps?: StepsContentProps\n /\n Props for step description element.\n /\n descriptionProps?: StepsDescriptionProps\n /\n Props for step indicator element.\n /\n indicatorProps?: StepsIndicatorProps\n /\n Props for step separator element.\n /\n separatorProps?: StepsSeparatorProps\n /\n Props for step title element.\n /\n titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n extends\n Omit<HTMLStyledProps, \"onChange\">,\n Omit<UseStepsProps, \"count\" \| \"orientation\">,\n Pick<UseLazyMountProps, \"lazy\" \| \"lazyBehavior\">,\n ThemeProps<StepsStyle> {\n /\n If provided, generate step components based on steps.\n /\n items?: StepsItem[]\n}\n\nconst {\n ComponentContext,\n PropsContext: StepsPropsContext,\n useComponentContext,\n usePropsContext: useStepsPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n \"steps\",\n stepsStyle,\n)\n\nexport { StepsPropsContext, useStepsPropsContext }\n\n/\n `Steps` is a component that displays the progress of a multi-step process.\n \n @see https://yamada-ui.com/docs/components/steps\n /\nexport const StepsRoot = withProvider<\"div\", StepsRootProps, \"orientation\">(\n ({\n children,\n items = [],\n lazy,\n lazyBehavior,\n orientation: orientationProp,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const validChildren = useValidChildren(children)\n const stepsList = useFindChild<StepsListProps>(validChildren, StepsList)\n const {\n id,\n count,\n descendants,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n onNext,\n onPrev,\n } = useSteps({\n count: items.length \|\| Children.count(stepsList?.props.children),\n orientation: computedOrientation,\n ...rest,\n })\n const componentContext = useMemo(\n () => ({ items, lazy, lazyBehavior }),\n [items, lazy, lazyBehavior],\n )\n const stepsContext = useMemo(\n () => ({\n id,\n count,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n onNext,\n onPrev,\n }),\n [\n id,\n count,\n index,\n orientation,\n setIndex,\n getStatus,\n onNext,\n onPrev,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getContentProps,\n ],\n )\n\n return (\n <StepsDescendantsContext value={descendants}>\n <StepsContext value={stepsContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>{children}</styled.div>\n </ComponentContext>\n </StepsContext>\n </StepsDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n ({ children, ...rest }) => {\n const { items } = useComponentContext()\n const { getListProps } = useStepsContext()\n const computedChildren = useMemo(() => {\n if (children) return children\n else\n return items?.map(\n (\n {\n complete,\n content: _content,\n current,\n description,\n hasSeparator = true,\n incomplete,\n title,\n contentProps: _contentProps,\n descriptionProps,\n indicatorProps,\n separatorProps,\n titleProps,\n ...rest\n },\n index,\n ) => (\n <StepsItem key={index} index={index} title={title} {...rest}>\n <StepsIndicator\n complete={complete}\n current={current}\n incomplete={incomplete}\n {...indicatorProps}\n />\n\n <styled.div>\n {title ? (\n <StepsTitle {...titleProps}>{title}</StepsTitle>\n ) : null}\n {description ? (\n <StepsDescription {...descriptionProps}>\n {description}\n </StepsDescription>\n ) : null}\n </styled.div>\n\n {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n </StepsItem>\n ),\n )\n }, [children, items])\n\n return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n },\n \"list\",\n)()\n\nexport interface StepsItemProps\n extends HTMLStyledProps<\"li\">, UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n const {\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getRootProps,\n getSeparatorProps,\n getTitleProps,\n } = useStepsItem(props)\n const context = useMemo(\n () => ({\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getSeparatorProps,\n getTitleProps,\n }),\n [\n first,\n index,\n last,\n status,\n getTitleProps,\n getDescriptionProps,\n getSeparatorProps,\n getIndicatorProps,\n ],\n )\n\n return (\n <StepsItemContext value={context}>\n <styled.li {...getRootProps()} />\n </StepsItemContext>\n )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n /\n The element for the complete indicator.\n \n @default <CheckIcon />\n /\n complete?: ReactNode\n /\n The element for the current indicator.\n \n @default <StepsNumber />\n /\n current?: ReactNode\n /\n The element for the incomplete indicator.\n \n @default <StepsNumber />\n /\n incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n ({\n complete = <CheckIcon />,\n current = <StepsNumber />,\n incomplete = <StepsNumber />,\n ...rest\n }) => {\n const { status, getIndicatorProps } = useStepsItemContext()\n const components = useMemo(\n () => ({ complete, current, incomplete }),\n [complete, current, incomplete],\n )\n\n return (\n <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n )\n },\n \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n \"span\",\n \"number\",\n)(undefined, ({ children, ...rest }) => {\n const { index } = useStepsItemContext()\n\n return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useStepsItemContext()\n\n return getTitleProps(props)\n },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { getDescriptionProps } = useStepsItemContext()\n\n return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n \"div\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useStepsItemContext()\n\n return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n const { items } = useComponentContext()\n\n return useMemo(() => {\n if (children) return children\n else\n return items?.map(({ content, contentProps }, index) =>\n isUndefined(content) \|\| isNull(content) ? null : (\n <StepsContent key={index} index={index} {...contentProps}>\n {content}\n </StepsContent>\n ),\n )\n }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n /\n The index of the step content.\n */\n index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n \"div\",\n \"content\",\n)(undefined, ({ index, ...rest }) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = index === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...rest,\n })\n\n return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n \"div\",\n StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n undefined,\n (props) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { count, index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = count !== 0 && count === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...props,\n })\n\n return { ...getContentProps(props), children }\n },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n \"button\",\n { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n const { getPrevTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n \"button\",\n { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n const { getNextTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}
1	+ {"version":3,"file":"steps.js","names":["isUndefined","isNull"],"sources":["../../../../src/components/steps/steps.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { StepsStyle } from \"./steps.style\"\nimport type { UseStepsItemProps, UseStepsProps } from \"./use-steps\"\nimport { Children, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport {\n isNull,\n isUndefined,\n useFindChild,\n useValidChildren,\n} from \"../../utils\"\nimport { CheckIcon } from \"../icon\"\nimport { stepsStyle } from \"./steps.style\"\nimport {\n StepsContext,\n StepsDescendantsContext,\n StepsItemContext,\n useSteps,\n useStepsContext,\n useStepsItem,\n useStepsItemContext,\n} from \"./use-steps\"\n\ninterface ComponentContext extends Pick<\n StepsRootProps,\n \"items\" \| \"lazy\" \| \"lazyBehavior\"\n> {}\n\nexport interface StepsItem\n extends\n Omit<StepsItemProps, \"content\" \| \"index\" \| \"title\">,\n Pick<StepsIndicatorProps, \"complete\" \| \"current\" \| \"incomplete\"> {\n /*\n The content for step element.\n /\n content?: ReactNode\n /\n The description for step element.\n /\n description?: ReactNode\n /\n If true, display the step separator.\n \n @default true\n /\n hasSeparator?: boolean\n /\n The title for step element.\n /\n title?: string\n /\n Props for step content element.\n /\n contentProps?: StepsContentProps\n /\n Props for step description element.\n /\n descriptionProps?: StepsDescriptionProps\n /\n Props for step indicator element.\n /\n indicatorProps?: StepsIndicatorProps\n /\n Props for step separator element.\n /\n separatorProps?: StepsSeparatorProps\n /\n Props for step title element.\n /\n titleProps?: StepsTitleProps\n}\n\nexport interface StepsRootProps\n extends\n Omit<HTMLStyledProps, \"onChange\">,\n Omit<UseStepsProps, \"count\" \| \"orientation\">,\n Pick<UseLazyMountProps, \"lazy\" \| \"lazyBehavior\">,\n ThemeProps<StepsStyle> {\n /\n If provided, generate step components based on steps.\n /\n items?: StepsItem[]\n}\n\nconst {\n ComponentContext,\n PropsContext: StepsPropsContext,\n useComponentContext,\n usePropsContext: useStepsPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<StepsRootProps, StepsStyle, ComponentContext>(\n \"steps\",\n stepsStyle,\n)\n\nexport { StepsPropsContext, useStepsPropsContext }\n\n/\n `Steps` is a component that displays the progress of a multi-step process.\n \n @see https://yamada-ui.com/docs/components/steps\n /\nexport const StepsRoot = withProvider<\"div\", StepsRootProps, \"orientation\">(\n ({\n children,\n items = [],\n lazy,\n lazyBehavior,\n orientation: orientationProp,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const validChildren = useValidChildren(children)\n const stepsList = useFindChild<StepsListProps>(validChildren, StepsList)\n const {\n id,\n count,\n descendants,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n onNext,\n onPrev,\n } = useSteps({\n count: items.length \|\| Children.count(stepsList?.props.children),\n orientation: computedOrientation,\n ...rest,\n })\n const componentContext = useMemo(\n () => ({ items, lazy, lazyBehavior }),\n [items, lazy, lazyBehavior],\n )\n const stepsContext = useMemo(\n () => ({\n id,\n count,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n onNext,\n onPrev,\n }),\n [\n id,\n count,\n index,\n orientation,\n setIndex,\n getStatus,\n onNext,\n onPrev,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getContentProps,\n ],\n )\n\n return (\n <StepsDescendantsContext value={descendants}>\n <StepsContext value={stepsContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>{children}</styled.div>\n </ComponentContext>\n </StepsContext>\n </StepsDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface StepsListProps extends HTMLStyledProps<\"ol\"> {}\n\nexport const StepsList = withContext<\"ol\", StepsListProps>(\n ({ children, ...rest }) => {\n const { items } = useComponentContext()\n const { getListProps } = useStepsContext()\n const computedChildren = useMemo(() => {\n if (children) return children\n else\n return items?.map(\n (\n {\n complete,\n content: _content,\n current,\n description,\n hasSeparator = true,\n incomplete,\n title,\n contentProps: _contentProps,\n descriptionProps,\n indicatorProps,\n separatorProps,\n titleProps,\n ...rest\n },\n index,\n ) => (\n <StepsItem key={index} index={index} title={title} {...rest}>\n <StepsIndicator\n complete={complete}\n current={current}\n incomplete={incomplete}\n {...indicatorProps}\n />\n\n <styled.div>\n {title ? (\n <StepsTitle {...titleProps}>{title}</StepsTitle>\n ) : null}\n {description ? (\n <StepsDescription {...descriptionProps}>\n {description}\n </StepsDescription>\n ) : null}\n </styled.div>\n\n {hasSeparator ? <StepsSeparator {...separatorProps} /> : null}\n </StepsItem>\n ),\n )\n }, [children, items])\n\n return <styled.ol {...getListProps(rest)}>{computedChildren}</styled.ol>\n },\n \"list\",\n)()\n\nexport interface StepsItemProps\n extends HTMLStyledProps<\"li\">, UseStepsItemProps {}\n\nexport const StepsItem = withContext<\"li\", StepsItemProps>((props) => {\n const {\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getRootProps,\n getSeparatorProps,\n getTitleProps,\n } = useStepsItem(props)\n const context = useMemo(\n () => ({\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getSeparatorProps,\n getTitleProps,\n }),\n [\n first,\n index,\n last,\n status,\n getTitleProps,\n getDescriptionProps,\n getSeparatorProps,\n getIndicatorProps,\n ],\n )\n\n return (\n <StepsItemContext value={context}>\n <styled.li {...getRootProps()} />\n </StepsItemContext>\n )\n}, \"item\")()\n\nexport interface StepsIndicatorProps extends HTMLStyledProps {\n /\n The element for the complete indicator.\n \n @default <CheckIcon />\n /\n complete?: ReactNode\n /\n The element for the current indicator.\n \n @default <StepsNumber />\n /\n current?: ReactNode\n /\n The element for the incomplete indicator.\n \n @default <StepsNumber />\n /\n incomplete?: ReactNode\n}\n\nexport const StepsIndicator = withContext<\"div\", StepsIndicatorProps>(\n ({\n complete = <CheckIcon />,\n current = <StepsNumber />,\n incomplete = <StepsNumber />,\n ...rest\n }) => {\n const { status, getIndicatorProps } = useStepsItemContext()\n const components = useMemo(\n () => ({ complete, current, incomplete }),\n [complete, current, incomplete],\n )\n\n return (\n <styled.div {...getIndicatorProps(rest)}>{components[status]}</styled.div>\n )\n },\n \"indicator\",\n)()\n\nexport interface StepsNumberProps extends HTMLStyledProps<\"span\"> {}\n\nexport const StepsNumber = withContext<\"span\", StepsNumberProps>(\n \"span\",\n \"number\",\n)(undefined, ({ children, ...rest }) => {\n const { index } = useStepsItemContext()\n\n return { ...rest, children: children ?? index + 1 }\n})\n\nexport interface StepsTitleProps extends HTMLStyledProps {}\n\nexport const StepsTitle = withContext<\"h3\", StepsTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { getTitleProps } = useStepsItemContext()\n\n return getTitleProps(props)\n },\n)\n\nexport interface StepsDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const StepsDescription = withContext<\"p\", StepsDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { getDescriptionProps } = useStepsItemContext()\n\n return getDescriptionProps(props)\n})\n\nexport interface StepsSeparatorProps extends HTMLStyledProps {}\n\nexport const StepsSeparator = withContext<\"div\", StepsSeparatorProps>(\n \"div\",\n \"separator\",\n)(undefined, (props) => {\n const { getSeparatorProps } = useStepsItemContext()\n\n return getSeparatorProps(props)\n})\n\nexport interface StepsContentsProps extends PropsWithChildren {}\n\nexport const StepsContents: FC<StepsContentsProps> = ({ children }) => {\n const { items } = useComponentContext()\n\n return useMemo(() => {\n if (children) return children\n else\n return items?.map(({ content, contentProps }, index) =>\n isUndefined(content) \|\| isNull(content) ? null : (\n <StepsContent key={index} index={index} {...contentProps}>\n {content}\n </StepsContent>\n ),\n )\n }, [children, items])\n}\n\nexport interface StepsContentProps extends HTMLStyledProps {\n /\n The index of the step content.\n */\n index: number\n}\n\nexport const StepsContent = withContext<\"div\", StepsContentProps>(\n \"div\",\n \"content\",\n)(undefined, ({ index, ...rest }) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = index === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...rest,\n })\n\n return { ...getContentProps({ index, ...rest }), children }\n})\n\nexport interface StepsCompletedContentProps extends HTMLStyledProps {}\n\nexport const StepsCompletedContent = withContext<\n \"div\",\n StepsCompletedContentProps\n>(\"div\", { name: \"CompletedContent\", slot: [\"content\", \"completed\"] })(\n undefined,\n (props) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { count, index: selectedIndex, getContentProps } = useStepsContext()\n const mounted = count !== 0 && count === selectedIndex\n const children = useLazyMount({\n lazy,\n lazyBehavior,\n mounted,\n ...props,\n })\n\n return { ...getContentProps(props), children }\n },\n)\n\nexport interface StepsPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsPrevTrigger = withContext<\"button\", StepsPrevTriggerProps>(\n \"button\",\n { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] },\n)((props) => {\n const { getPrevTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n})\n\nexport interface StepsNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const StepsNextTrigger = withContext<\"button\", StepsNextTriggerProps>(\n \"button\",\n { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] },\n)((props) => {\n const { getNextTriggerProps } = useStepsContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n})\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-steps.js","names":["createContext"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n createContext,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n setAttribute,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" \| \"current\" \| \"incomplete\"\n\nconst {\n DescendantsContext: StepsDescendantsContext,\n useDescendant: useStepsDescendant,\n useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n UseStepsReturn,\n \"descendants\" \| \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n {\n name: \"StepsItemContext\",\n },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The total number of steps.\n /\n count?: number\n /\n The initial index of the active step.\n \n @default 0\n /\n defaultIndex?: number\n /\n The index of the active step.\n /\n index?: number\n /\n The orientation of the steps.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The callback function that is called when the active step index is changed.\n /\n onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n count = 0,\n defaultIndex = 0,\n index: indexProp,\n orientation = \"horizontal\",\n onChange,\n ...rest\n}: UseStepsProps = {}) => {\n const descendants = useStepsDescendants()\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const id = useId()\n\n const getStatus = useCallback(\n (indexProp: number): StepStatusScheme => {\n if (indexProp < index) return \"complete\"\n else if (indexProp > index) return \"incomplete\"\n else return \"current\"\n },\n [index],\n )\n\n const onPrev = useCallback(\n () => setIndex((index) => Math.max(0, index - 1)),\n [setIndex],\n )\n\n const onNext = useCallback(() => {\n setIndex((index) => Math.min(count, index + 1))\n }, [count, setIndex])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => mergeProps(rest, props)(),\n [rest],\n )\n\n const getListProps: PropGetter<\"ol\"> = useCallback(\n (props) => {\n return {\n \"data-orientation\": orientation,\n ...props,\n }\n },\n [orientation],\n )\n\n const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index: indexProp = count, ...props } = {}) => ({\n id: `${id}-${indexProp}`,\n hidden: indexProp !== index,\n tabIndex: 0,\n ...props,\n }),\n [count, id, index],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n disabled: index === 0,\n ...props,\n onClick: handlerAll(props.onClick, onPrev),\n }),\n [onPrev, index],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => {\n return {\n disabled: count <= index,\n ...props,\n onClick: handlerAll(props.onClick, onNext),\n }\n },\n [count, index, onNext],\n )\n\n return {\n id,\n count,\n descendants,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n onNext,\n onPrev,\n }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n /\n The index of the step.\n */\n index: number\n}\n\nexport const useStepsItem = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n index,\n ...rest\n}: UseStepsItemProps) => {\n const { descendants, register } = useStepsDescendant()\n const { id, getStatus, orientation } = useStepsContext()\n const status = getStatus(index)\n const current = status === \"current\"\n const first = index === 0\n const last = index === descendants.lastValue()?.index\n const statusDataAttr = `data-${status}`\n const { getDocument } = useEnvironment()\n\n useSafeLayoutEffect(() => {\n const el = descendants.value(index)?.node\n const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n }, [descendants, getDocument, id, index])\n\n const getRootProps: PropGetter<\"li\"> = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n mergeProps(\n {\n \"aria-current\": current ? \"step\" : undefined,\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n \"data-orientation\": orientation,\n [statusDataAttr]: dataAttr(true),\n },\n rest,\n props,\n { ref: mergeRefs(ref, register) },\n )(),\n [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n )\n\n const getTitleProps: PropGetter<\"h3\"> = useCallback(\n (props) => ({\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [statusDataAttr],\n )\n\n const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n (props) => ({\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [statusDataAttr],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props) => ({\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [statusDataAttr],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({\n \"data-orientation\": orientation,\n role: \"separator\",\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [orientation, statusDataAttr],\n )\n\n return {\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getRootProps,\n getSeparatorProps,\n getTitleProps,\n }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,EACJ,oBAAoB,yBACpB,eAAe,oBACf,gBAAgB,wBACd,kBAAiC;AASrC,MAAM,CAAC,cAAc,mBAAmBA,gBAA4B,EAClE,MAAM,eACR,CAAC;AAMD,MAAM,CAAC,kBAAkB,uBAAuBA,gBAC9C,EACE,MAAM,mBACR,CACF;AA+BA,MAAa,YAAY,EACvB,QAAQ,GACR,eAAe,GACf,OAAO,WACP,cAAc,cACd,UACA,GAAG,SACc,CAAC,MAAM;CACxB,MAAM,cAAc,oBAAoB;CACxC,MAAM,CAAC,OAAO,YAAY,qBAAqB;EAC7C,cAAc;EACd,OAAO;EACP;CACF,CAAC;CACD,MAAM,KAAK,MAAM;CAEjB,MAAM,YAAY,aACf,cAAwC;EACvC,IAAI,YAAY,OAAO,OAAO;OACzB,IAAI,YAAY,OAAO,OAAO;OAC9B,OAAO;CACd,GACA,CAAC,KAAK,CACR;CAEA,MAAM,SAAS,kBACP,UAAU,UAAU,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,GAChD,CAAC,QAAQ,CACX;CAEA,MAAM,SAAS,kBAAkB;EAC/B,UAAU,UAAU,KAAK,IAAI,OAAO,QAAQ,CAAC,CAAC;CAChD,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,eAA2B,aAC9B,QAAQ,CAAC,MAAM,WAAW,MAAM,KAAK,CAAC,CAAC,GACxC,CAAC,IAAI,CACP;CAEA,MAAM,eAAiC,aACpC,UAAU;EACT,OAAO;GACL,oBAAoB;GACpB,GAAG;EACL;CACF,GACA,CAAC,WAAW,CACd;CAEA,MAAM,kBAAyD,aAC5D,EAAE,OAAO,YAAY,OAAO,GAAG,UAAU,CAAC,OAAO;EAChD,IAAI,GAAG,GAAG,GAAG;EACb,QAAQ,cAAc;EACtB,UAAU;EACV,GAAG;CACL,IACA;EAAC;EAAO;EAAI;CAAK,CACnB;CAEA,MAAM,sBAA4C,aAC/C,QAAQ,CAAC,OAAO;EACf,UAAU,UAAU;EACpB,GAAG;EACH,UAAA,~~GAAA~~,~~cAAA~~,~~WAAA~~,~~CAAoB~~,MAAM,SAAS,MAAM;CAC3C,IACA,CAAC,QAAQ,KAAK,CAChB;CAaA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,qBArBgD,aAC/C,QAAQ,CAAC,MAAM;GACd,OAAO;IACL,UAAU,SAAS;IACnB,GAAG;IACH,UAAA,~~GAAA~~,~~cAAA~~,~~WAAA~~,~~CAAoB~~,MAAM,SAAS,MAAM;GAC3C;EACF,GACA;GAAC;GAAO;GAAO;EAAM,CAaH;EAClB;EACA;EACA;EACA;CACF;AACF;AAWA,MAAa,gBAAgB,EAC3B,mBAAmB,oBACnB,OACA,GAAG,WACoB;CACvB,MAAM,EAAE,aAAa,aAAa,mBAAmB;CACrD,MAAM,EAAE,IAAI,WAAW,gBAAgB,gBAAgB;CACvD,MAAM,SAAS,UAAU,KAAK;CAC9B,MAAM,UAAU,WAAW;CAC3B,MAAM,QAAQ,UAAU;CACxB,MAAM,OAAO,UAAU,YAAY,UAAU,CAAC,EAAE;CAChD,MAAM,iBAAiB,QAAQ;CAC/B,MAAM,EAAE,gBAAgB,eAAe;CAEvC,0BAA0B;EACxB,MAAM,KAAK,YAAY,MAAM,KAAK,CAAC,EAAE;EACrC,MAAM,aAAa,CAAC,CAAC,YAAY,CAAC,EAAE,eAAe,GAAG,GAAG,GAAG,OAAO;EAEnE,IAAI,MAAM,YAAY,CAAA,GAAA,cAAA,aAAA,CAAa,IAAI,mBAAmB,GAAG,GAAG,GAAG,OAAO;CAC5E,GAAG;EAAC;EAAa;EAAa;EAAI;CAAK,CAAC;CAExC,MAAM,eAAiC,aACpC,EAAE,KAAK,mBAAmB,gBAAgB,GAAG,UAAU,CAAC,MACvD,WACE;EACE,gBAAgB,UAAU,SAAS,KAAA;EACnC,oBAAA,~~GAAA~~,~~cAAA~~,~~GAAA~~,~~CAAsB~~,oBAAoB,cAAc;EACxD,oBAAoB;GACnB,kBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAA0B~~,IAAI;CACjC,GACA,MACA,OACA,EAAE,KAAK,UAAU,KAAK,QAAQ,EAAE,CAClC,CAAC,CAAC,GACJ;EAAC;EAAoB;EAAS;EAAa;EAAgB;EAAM;CAAQ,CAC3E;CAEA,MAAM,gBAAkC,aACrC,WAAW;GACT,kBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAA0B~~,IAAI;EAC/B,GAAG;CACL,IACA,CAAC,cAAc,CACjB;CA4BA,OAAO;EACL;EACA;EACA;EACA;EACA,qBA/B2C,aAC1C,WAAW;IACT,kBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAA0B~~,IAAI;GAC/B,GAAG;EACL,IACA,CAAC,cAAc,CA0BG;EAClB,mBAxBoC,aACnC,WAAW;IACT,kBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAA0B~~,IAAI;GAC/B,GAAG;EACL,IACA,CAAC,cAAc,CAmBC;EAChB;EACA,mBAlBoC,aACnC,WAAW;GACV,oBAAoB;GACpB,MAAM;IACL,kBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAA0B~~,IAAI;GAC/B,GAAG;EACL,IACA,CAAC,aAAa,cAAc,CAWZ;EAChB;CACF;AACF"}
1	+ {"version":3,"file":"use-steps.js","names":["createContext","handlerAll","cx","dataAttr"],"sources":["../../../../src/components/steps/use-steps.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport { mergeProps, useEnvironment } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendants } from \"../../hooks/use-descendants\"\nimport {\n createContext,\n cx,\n dataAttr,\n handlerAll,\n mergeRefs,\n setAttribute,\n useSafeLayoutEffect,\n} from \"../../utils\"\n\nexport type StepStatusScheme = \"complete\" \| \"current\" \| \"incomplete\"\n\nconst {\n DescendantsContext: StepsDescendantsContext,\n useDescendant: useStepsDescendant,\n useDescendants: useStepsDescendants,\n} = createDescendants<HTMLLIElement>()\n\nexport { StepsDescendantsContext, useStepsDescendant, useStepsDescendants }\n\ninterface StepsContext extends Omit<\n UseStepsReturn,\n \"descendants\" \| \"getRootProps\"\n> {}\n\nconst [StepsContext, useStepsContext] = createContext<StepsContext>({\n name: \"StepsContext\",\n})\n\nexport { StepsContext, useStepsContext }\n\ninterface StepsItemContext extends Omit<UseStepsItemReturn, \"getRootProps\"> {}\n\nconst [StepsItemContext, useStepsItemContext] = createContext<StepsItemContext>(\n {\n name: \"StepsItemContext\",\n },\n)\n\nexport { StepsItemContext, useStepsItemContext }\n\nexport interface UseStepsProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The total number of steps.\n /\n count?: number\n /\n The initial index of the active step.\n \n @default 0\n /\n defaultIndex?: number\n /\n The index of the active step.\n /\n index?: number\n /\n The orientation of the steps.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The callback function that is called when the active step index is changed.\n /\n onChange?: (index: number) => void\n}\n\nexport const useSteps = ({\n count = 0,\n defaultIndex = 0,\n index: indexProp,\n orientation = \"horizontal\",\n onChange,\n ...rest\n}: UseStepsProps = {}) => {\n const descendants = useStepsDescendants()\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const id = useId()\n\n const getStatus = useCallback(\n (indexProp: number): StepStatusScheme => {\n if (indexProp < index) return \"complete\"\n else if (indexProp > index) return \"incomplete\"\n else return \"current\"\n },\n [index],\n )\n\n const onPrev = useCallback(\n () => setIndex((index) => Math.max(0, index - 1)),\n [setIndex],\n )\n\n const onNext = useCallback(() => {\n setIndex((index) => Math.min(count, index + 1))\n }, [count, setIndex])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => mergeProps(rest, props)(),\n [rest],\n )\n\n const getListProps: PropGetter<\"ol\"> = useCallback(\n (props) => {\n return {\n \"data-orientation\": orientation,\n ...props,\n }\n },\n [orientation],\n )\n\n const getContentProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index: indexProp = count, ...props } = {}) => ({\n id: `${id}-${indexProp}`,\n hidden: indexProp !== index,\n tabIndex: 0,\n ...props,\n }),\n [count, id, index],\n )\n\n const getPrevTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => ({\n disabled: index === 0,\n ...props,\n onClick: handlerAll(props.onClick, onPrev),\n }),\n [onPrev, index],\n )\n\n const getNextTriggerProps: PropGetter<\"button\"> = useCallback(\n (props = {}) => {\n return {\n disabled: count <= index,\n ...props,\n onClick: handlerAll(props.onClick, onNext),\n }\n },\n [count, index, onNext],\n )\n\n return {\n id,\n count,\n descendants,\n getStatus,\n index,\n orientation,\n setIndex,\n getContentProps,\n getListProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n onNext,\n onPrev,\n }\n}\n\nexport type UseStepsReturn = ReturnType<typeof useSteps>\n\nexport interface UseStepsItemProps extends HTMLProps<\"li\"> {\n /\n The index of the step.\n */\n index: number\n}\n\nexport const useStepsItem = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n index,\n ...rest\n}: UseStepsItemProps) => {\n const { descendants, register } = useStepsDescendant()\n const { id, getStatus, orientation } = useStepsContext()\n const status = getStatus(index)\n const current = status === \"current\"\n const first = index === 0\n const last = index === descendants.lastValue()?.index\n const statusDataAttr = `data-${status}`\n const { getDocument } = useEnvironment()\n\n useSafeLayoutEffect(() => {\n const el = descendants.value(index)?.node\n const hasContent = !!getDocument()?.getElementById(`${id}-${index}`)\n\n if (el && hasContent) setAttribute(el, \"aria-labelledby\", `${id}-${index}`)\n }, [descendants, getDocument, id, index])\n\n const getRootProps: PropGetter<\"li\"> = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) =>\n mergeProps(\n {\n \"aria-current\": current ? \"step\" : undefined,\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby),\n \"data-orientation\": orientation,\n [statusDataAttr]: dataAttr(true),\n },\n rest,\n props,\n { ref: mergeRefs(ref, register) },\n )(),\n [ariaLabelledbyProp, current, orientation, statusDataAttr, rest, register],\n )\n\n const getTitleProps: PropGetter<\"h3\"> = useCallback(\n (props) => ({\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [statusDataAttr],\n )\n\n const getDescriptionProps: PropGetter<\"p\"> = useCallback(\n (props) => ({\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [statusDataAttr],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props) => ({\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [statusDataAttr],\n )\n\n const getSeparatorProps: PropGetter = useCallback(\n (props) => ({\n \"data-orientation\": orientation,\n role: \"separator\",\n [statusDataAttr]: dataAttr(true),\n ...props,\n }),\n [orientation, statusDataAttr],\n )\n\n return {\n first,\n index,\n last,\n status,\n getDescriptionProps,\n getIndicatorProps,\n getRootProps,\n getSeparatorProps,\n getTitleProps,\n }\n}\n\nexport type UseStepsItemReturn = ReturnType<typeof useStepsItem>\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n extends\n Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n ThemeProps<SwitchStyle> {\n /*\n The switch icon to use.\n /\n icon?: ReactNode \| { off: ReactNode; on: ReactNode }\n /\n Props for switch input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for switch label element.\n /\n labelProps?: HTMLStyledProps<\"span\">\n}\n\nconst {\n PropsContext: SwitchPropsContext,\n usePropsContext: useSwitchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\nexport { SwitchPropsContext, useSwitchPropsContext }\n\n/\n `Switch` is a component used to toggle between on and off states.\n \n @see https://yamada-ui.com/docs/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n ({ children, icon, inputProps, labelProps, ...props }) => {\n const {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n } = useSwitch(props)\n\n return (\n <styled.label {...getRootProps()}>\n <styled.input data-peer {...getInputProps(inputProps)} />\n\n <SwitchTrack {...getTrackProps()}>\n <SwitchThumb {...getThumbProps()}>\n {icon && isObject(icon) && \"on\" in icon\n ? checked\n ? icon.on\n : icon.off\n : icon}\n </SwitchThumb>\n </SwitchTrack>\n\n {children ? (\n <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;AA8BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,MAAM,YAAY,YAAY,GAAG,YAAY;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,kBACE,UAAU,KAAK;CAEnB,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,aAAa;EAA/B,UAAA;GACE,oBAAC,OAAO,OAAR;IAAc,aAAA;IAAU,GAAI,cAAc,UAAU;GAAI,CAAA;GAExD,oBAAC,aAAD;IAAa,GAAI,cAAc;IAC7B,UAAA,oBAAC,aAAD;KAAa,GAAI,cAAc;KAC5B,UAAA,SAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAAiB~~,IAAI,KAAK,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;IACO,CAAA;GACF,CAAA;GAEZ,WACC,oBAAC,aAAD;IAAa,GAAI,cAAc,UAAU;IAAI;GAAsB,CAAA,IACjE;EACQ;;AAElB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,cAAc,YAAqC,OAAO,OAAO,CAAC,CAAC;AAIzE,MAAM,cAAc,YAAqC,OAAO,OAAO,CAAC,CAAC;AAIzE,MAAM,cAAc,YAAsC,QAAQ,OAAO,CAAC,CAAC"}
1	+ {"version":3,"file":"switch.js","names":["isObject"],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n extends\n Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n ThemeProps<SwitchStyle> {\n /*\n The switch icon to use.\n /\n icon?: ReactNode \| { off: ReactNode; on: ReactNode }\n /\n Props for switch input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for switch label element.\n /\n labelProps?: HTMLStyledProps<\"span\">\n}\n\nconst {\n PropsContext: SwitchPropsContext,\n usePropsContext: useSwitchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\nexport { SwitchPropsContext, useSwitchPropsContext }\n\n/\n `Switch` is a component used to toggle between on and off states.\n \n @see https://yamada-ui.com/docs/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n ({ children, icon, inputProps, labelProps, ...props }) => {\n const {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n } = useSwitch(props)\n\n return (\n <styled.label {...getRootProps()}>\n <styled.input data-peer {...getInputProps(inputProps)} />\n\n <SwitchTrack {...getTrackProps()}>\n <SwitchThumb {...getThumbProps()}>\n {icon && isObject(icon) && \"on\" in icon\n ? checked\n ? icon.on\n : icon.off\n : icon}\n </SwitchThumb>\n </SwitchTrack>\n\n {children ? (\n <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;AA8BA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,aACA,iBACE,oBAA8C,UAAU,WAAW;;;;;;AASvE,MAAa,SAAS,cACnB,EAAE,UAAU,MAAM,YAAY,YAAY,GAAG,YAAY;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,kBACE,UAAU,KAAK;CAEnB,OACE,qBAAC,OAAO,OAAR;EAAc,GAAI,aAAa;EAA/B,UAAA;GACE,oBAAC,OAAO,OAAR;IAAc,aAAA;IAAU,GAAI,cAAc,UAAU;GAAI,CAAA;GAExD,oBAAC,aAAD;IAAa,GAAI,cAAc;IAC7B,UAAA,oBAAC,aAAD;KAAa,GAAI,cAAc;KAC5B,UAAA,SAAA,GAAQA,cAAAA,SAAAA,CAAS,IAAI,KAAK,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;IACO,CAAA;GACF,CAAA;GAEZ,WACC,oBAAC,aAAD;IAAa,GAAI,cAAc,UAAU;IAAI;GAAsB,CAAA,IACjE;EACQ;;AAElB,GACA,MACF,CAAC,CAAC;AAIF,MAAM,cAAc,YAAqC,OAAO,OAAO,CAAC,CAAC;AAIzE,MAAM,cAAc,YAAqC,OAAO,OAAO,CAAC,CAAC;AAIzE,MAAM,cAAc,YAAsC,QAAQ,OAAO,CAAC,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-switch.js","names":[],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number \| string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the switch will be checked.\n \n @default false\n /\n checked?: boolean\n /\n If `true`, the switch will be checked when the Enter key is pressed.\n \n @default true\n /\n checkOnEnter?: boolean\n /\n If `true`, the switch will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n The HTML `name` attribute used for forms.\n /\n name?: string\n /\n The tab-index property of the underlying input element.\n /\n tabIndex?: number\n /\n The value to be used in the switch input.\n /\n value?: Y\n /\n The callback invoked when the switch is blurred.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>\n /\n The callback invoked when the checked state changes.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>\n /\n The callback invoked when the switch is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number \| string = string>(\n props: UseSwitchProps<Y> = {},\n) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n ref,\n name,\n checked: checkedProp,\n checkOnEnter = true,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [checked, setChecked] = useControllableState({\n defaultValue: defaultChecked,\n value: checkedProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return ev.preventDefault()\n\n setChecked(ev.target.checked)\n onChangeProp?.(ev)\n },\n [onChangeProp, setChecked, interactive],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (interactive && checkOnEnter && ev.key === \"Enter\")\n inputRef.current?.click()\n },\n [interactive, checkOnEnter],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) =>\n mergeProps(\n dataProps,\n { htmlFor: id, \"data-checked\": dataAttr(checked) },\n rest,\n props,\n )(),\n [checked, rest, id, dataProps],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n [checked, dataProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n [checked, dataProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => {\n const mergedProps = mergeProps(\n ariaProps,\n dataProps,\n {\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n checked,\n disabled,\n readOnly,\n required,\n role: \"switch\",\n tabIndex: interactive ? 0 : -1,\n value,\n },\n { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n props,\n { onChange, onKeyDown },\n )({ mergeRef: false })\n\n return {\n ...mergedProps,\n ref: mergeRefs(inputRef, props.ref, ref),\n }\n },\n [\n ariaProps,\n dataProps,\n id,\n name,\n checked,\n disabled,\n readOnly,\n required,\n interactive,\n value,\n ref,\n eventProps,\n onChange,\n onKeyDown,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) =>\n mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n [dataProps, checked],\n )\n\n return {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;AAqEA,MAAa,aACX,QAA2B,CAAC,MACzB;CACH,MAAM,OAAO,MAAM;CACnB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;CACT,CAAC;CAED,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAO,GAAG,eAAe;EAE3C,WAAW,GAAG,OAAO,OAAO;EAC5B,eAAe,EAAE;CACnB,GACA;EAAC;EAAc;EAAY;CAAW,CACxC;CAEA,MAAM,YAAY,aACf,OAAwC;EACvC,IAAI,eAAe,gBAAgB,GAAG,QAAQ,SAC5C,SAAS,SAAS,MAAM;CAC5B,GACA,CAAC,aAAa,YAAY,CAC5B;CAEA,MAAM,eAAoC,aACvC,QAAQ,CAAC,MACR,WACE,WACA;EAAE,SAAS;EAAI,iBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAAyB~~,OAAO;CAAE,GACjD,MACA,KACF,CAAC,CAAC,GACJ;EAAC;EAAS;EAAM;EAAI;CAAS,CAC/B;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAAyB~~,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,SAAS,SAAS,CACrB;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAAyB~~,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,SAAS,SAAS,CACrB;CAsDA,OAAO;EACL;EACA,eAtDyC,aACxC,QAAQ,CAAC,MAAM;GAsBd,OAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;IACF,GACA;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;IAAQ,GACzD,OACA;KAAE;KAAU;IAAU,CACxB,CAAC,CAAC,EAAE,UAAU,MAAM,CAGL;IACb,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;GACzC;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAWY;EACZ,eATwC,aACvC,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,~~GAAA~~,~~cAAA~~,~~SAAA~~,~~CAAyB~~,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,WAAW,OAAO,CAMP;EACZ;EACA;EACA;CACF;AACF"}
1	+ {"version":3,"file":"use-switch.js","names":["dataAttr"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, mergeRefs, visuallyHiddenAttributes } from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number \| string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the switch will be checked.\n \n @default false\n /\n checked?: boolean\n /\n If `true`, the switch will be checked when the Enter key is pressed.\n \n @default true\n /\n checkOnEnter?: boolean\n /\n If `true`, the switch will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n The HTML `name` attribute used for forms.\n /\n name?: string\n /\n The tab-index property of the underlying input element.\n /\n tabIndex?: number\n /\n The value to be used in the switch input.\n /\n value?: Y\n /\n The callback invoked when the switch is blurred.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>\n /\n The callback invoked when the checked state changes.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>\n /\n The callback invoked when the switch is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number \| string = string>(\n props: UseSwitchProps<Y> = {},\n) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n ref,\n name,\n checked: checkedProp,\n checkOnEnter = true,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [checked, setChecked] = useControllableState({\n defaultValue: defaultChecked,\n value: checkedProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return ev.preventDefault()\n\n setChecked(ev.target.checked)\n onChangeProp?.(ev)\n },\n [onChangeProp, setChecked, interactive],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (interactive && checkOnEnter && ev.key === \"Enter\")\n inputRef.current?.click()\n },\n [interactive, checkOnEnter],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) =>\n mergeProps(\n dataProps,\n { htmlFor: id, \"data-checked\": dataAttr(checked) },\n rest,\n props,\n )(),\n [checked, rest, id, dataProps],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n [checked, dataProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n [checked, dataProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => {\n const mergedProps = mergeProps(\n ariaProps,\n dataProps,\n {\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n checked,\n disabled,\n readOnly,\n required,\n role: \"switch\",\n tabIndex: interactive ? 0 : -1,\n value,\n },\n { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n props,\n { onChange, onKeyDown },\n )({ mergeRef: false })\n\n return {\n ...mergedProps,\n ref: mergeRefs(inputRef, props.ref, ref),\n }\n },\n [\n ariaProps,\n dataProps,\n id,\n name,\n checked,\n disabled,\n readOnly,\n required,\n interactive,\n value,\n ref,\n eventProps,\n onChange,\n onKeyDown,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) =>\n mergeProps(dataProps, { \"data-checked\": dataAttr(checked) }, props)(),\n [dataProps, checked],\n )\n\n return {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;AAqEA,MAAa,aACX,QAA2B,CAAC,MACzB;CACH,MAAM,OAAO,MAAM;CACnB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WACA,WACA,eACE,cAAc,KAAK;CACvB,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,SAAS,cAAc,qBAAqB;EACjD,cAAc;EACd,OAAO;CACT,CAAC;CAED,MAAM,WAAW,aACd,OAAsC;EACrC,IAAI,CAAC,aAAa,OAAO,GAAG,eAAe;EAE3C,WAAW,GAAG,OAAO,OAAO;EAC5B,eAAe,EAAE;CACnB,GACA;EAAC;EAAc;EAAY;CAAW,CACxC;CAEA,MAAM,YAAY,aACf,OAAwC;EACvC,IAAI,eAAe,gBAAgB,GAAG,QAAQ,SAC5C,SAAS,SAAS,MAAM;CAC5B,GACA,CAAC,aAAa,YAAY,CAC5B;CAEA,MAAM,eAAoC,aACvC,QAAQ,CAAC,MACR,WACE,WACA;EAAE,SAAS;EAAI,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO;CAAE,GACjD,MACA,KACF,CAAC,CAAC,GACJ;EAAC;EAAS;EAAM;EAAI;CAAS,CAC/B;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,SAAS,SAAS,CACrB;CAEA,MAAM,gBAA4B,aAC/B,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,SAAS,SAAS,CACrB;CAsDA,OAAO;EACL;EACA,eAtDyC,aACxC,QAAQ,CAAC,MAAM;GAsBd,OAAO;IACL,GAtBkB,WAClB,WACA,WACA;KACE;KACA,MAAM;KACN;KACA,OAAO,yBAAyB;KAChC;KACA;KACA;KACA;KACA,MAAM;KACN,UAAU,cAAc,IAAI;KAC5B;IACF,GACA;KAAE,QAAQ,WAAW;KAAQ,SAAS,WAAW;IAAQ,GACzD,OACA;KAAE;KAAU;IAAU,CACxB,CAAC,CAAC,EAAE,UAAU,MAAM,CAGL;IACb,KAAK,UAAU,UAAU,MAAM,KAAK,GAAG;GACzC;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAWY;EACZ,eATwC,aACvC,QAAQ,CAAC,MACR,WAAW,WAAW,EAAE,iBAAA,GAAgBA,cAAAA,SAAAA,CAAS,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC,GACtE,CAAC,WAAW,OAAO,CAMP;EACZ;EACA;EACA;CACF;AACF"}