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

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

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

Files changed (811) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-rating.cjs","names":["createContext","useFieldProps","useControllableState","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n clampNumber,\n createContext,\n dataAttr,\n handlerAll,\n runKeyAction,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n const rounded = Math.round(value / to) * to\n const precision = `${to}`.split(\".\")[1]?.length \|\| 0\n\n return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n extends FieldProps, Omit<HTMLProps, \"color\" \| \"defaultValue\" \| \"onChange\"> {\n /*\n Number of controls that should be rendered.\n \n @default 5\n /\n count?: number\n /\n The initial value of the rating.\n \n @default 0\n /\n defaultValue?: number\n /\n Number of fractions each item can be divided into,\n \n @default 1\n /\n fractions?: number\n /\n If `true`, only the selected icons will be filled.\n \n @default false\n /\n highlightSelectedOnly?: boolean\n /\n The top-level id string that will be applied to the rating.\n * The index of the rating item will be appended to this top-level id.\n /\n id?: string\n /\n The name of the input element.\n /\n name?: string\n /\n The value of the rating.\n /\n value?: number\n /\n The callback invoked when value state changes.\n /\n onChange?: (value: number) => void\n /\n The callback invoked when hovering over the rating.\n /\n onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n name = uuid,\n count: countProp = 5,\n defaultValue = 0,\n disabled,\n fractions: fractionsProp = 1,\n highlightSelectedOnly = false,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onHover,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps({ ...props, notSupportReadOnly: true })\n const rootRef = useRef<HTMLDivElement>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hoveredValue, setHoveredValue] = useState(-1)\n const outsideRef = useRef(true)\n const fractions = Math.floor(fractionsProp)\n const count = Math.floor(countProp)\n const decimal = 1 / fractions\n const roundedValue = useMemo(\n () => getRoundedValue(value, decimal),\n [decimal, value],\n )\n const interactive = !(readOnly \|\| disabled)\n const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n const getHoveredValue = useCallback(\n (x: number) => {\n if (!rootRef.current) return -1\n\n const { left, width } = rootRef.current.getBoundingClientRect()\n const itemWidth = width / count\n\n const hoveredValue = (x - left) / itemWidth\n\n const value = clampNumber(\n getRoundedValue(hoveredValue + decimal / 2, decimal),\n decimal,\n count,\n )\n\n return value\n },\n [count, decimal],\n )\n\n const onMouseEnter = useCallback(() => {\n if (interactive) outsideRef.current = false\n }, [interactive])\n\n const onMouseLeave = useCallback(() => {\n if (!interactive) return\n\n setHoveredValue(-1)\n outsideRef.current = true\n\n if (hoveredValue !== -1) onHover?.(-1)\n }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled \|\| readOnly) return\n\n const roundedValue = getHoveredValue(ev.clientX)\n\n setHoveredValue(roundedValue)\n\n if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n },\n [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n )\n\n const onTouchStart = useCallback(\n (ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const el = ev.touches[0]\n\n if (!el) return\n\n const value = getHoveredValue(el.clientX)\n\n setValue(value)\n },\n [getHoveredValue, setValue],\n )\n\n const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n }, [])\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => {\n const merged = mergeProps(\n dataProps,\n eventProps,\n ariaProps,\n {\n id,\n \"aria-label\": `${value} Stars`,\n \"aria-readonly\": ariaAttr(readOnly),\n role: \"radiogroup\",\n },\n rest,\n props,\n { ref },\n { ref: rootRef },\n )()\n return {\n ...merged,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onMouseMove: handlerAll(\n props.onMouseMove,\n rest.onMouseMove,\n onMouseMove,\n ),\n onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n onTouchStart: handlerAll(\n props.onTouchStart,\n rest.onTouchStart,\n onTouchStart,\n ),\n }\n },\n [\n ariaProps,\n dataProps,\n eventProps,\n id,\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n onTouchEnd,\n onTouchStart,\n readOnly,\n rest,\n value,\n ],\n )\n\n return {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n groupValue: number\n index: number\n}\n\nexport const useRatingItem = ({\n groupValue,\n index,\n ...rest\n}: UseRatingItemProps) => {\n const {\n id: rootId,\n name,\n decimal,\n disabled,\n displayValue,\n highlightSelectedOnly,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n ariaProps,\n dataProps,\n eventProps,\n } = useRatingContext()\n const fractionValue = decimal (groupValue === 1 ? index : index + 1)\n const value = useMemo(\n () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n [decimal, fractionValue, groupValue],\n )\n const active = value === displayValue\n const checked = value === roundedValue\n const filled = highlightSelectedOnly\n ? value === displayValue\n : value <= displayValue\n const id = `${rootId}-${groupValue}-${value}`\n\n const onBlur = useCallback(() => {\n if (outsideRef.current) setHoveredValue(-1)\n }, [outsideRef, setHoveredValue])\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return\n\n const value = parseFloat(ev.target.value)\n\n setHoveredValue(value)\n },\n [interactive, setHoveredValue],\n )\n\n const onChange = useCallback(\n (value: number) => {\n if (!interactive) return\n\n setValue(value)\n },\n [interactive, setValue],\n )\n\n const onMouseDown = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onTouchStart = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n runKeyAction(ev, {\n Space: () => onChange(value),\n })\n },\n [onChange, value],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n ({ style, ...props } = {}) =>\n mergeProps(\n dataProps,\n ariaProps,\n {\n htmlFor: id,\n \"data-active\": dataAttr(active),\n \"data-filled\": dataAttr(filled),\n },\n rest,\n props,\n { style },\n {\n style: {\n zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n },\n },\n { onMouseDown, onTouchStart },\n )(),\n [\n active,\n ariaProps,\n dataProps,\n filled,\n fractionValue,\n id,\n onMouseDown,\n onTouchStart,\n rest,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...eventProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-label\": value.toString(),\n \"data-active\": dataAttr(active),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n onBlur: handlerAll(onBlur, props.onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n value,\n active,\n checked,\n dataProps,\n eventProps,\n ariaProps,\n disabled,\n readOnly,\n required,\n onBlur,\n onInputChange,\n onKeyDown,\n ],\n )\n\n return {\n active,\n checked,\n filled,\n fractionValue,\n groupValue,\n value,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":";;;;;;;;;AAmBA,MAAM,mBAAmB,OAAe,OAAe;CACrD,MAAM,UAAU,KAAK,MAAM,QAAQ,EAAE,IAAI;CACzC,MAAM,YAAY,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,UAAU;CAEnD,OAAO,OAAO,QAAQ,QAAQ,SAAS,CAAC;AAC1C;AAIA,MAAM,CAAC,eAAe,oBAAoBA,gBAAAA,cAA6B,EACrE,MAAM,gBACR,CAAC;AAqDD,MAAa,aAAa,QAAwB,CAAC,MAAM;CACvD,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,OAAO,MACP,OAAO,YAAY,GACnB,eAAe,GACf,UACA,WAAW,gBAAgB,GAC3B,wBAAwB,OACxB,UACA,UACA,OAAO,WACP,UAAU,cACV,SACA,GAAG,QAEL,WACA,WACA,eACEC,wBAAAA,cAAc;EAAE,GAAG;EAAO,oBAAoB;CAAK,CAAC;CACxD,MAAM,WAAA,GAAA,MAAA,OAAA,CAAiC,IAAI;CAC3C,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP,UAAU;CACZ,CAAC;CACD,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,SAAA,CAA4B,EAAE;CACnD,MAAM,cAAA,GAAA,MAAA,OAAA,CAAoB,IAAI;CAC9B,MAAM,YAAY,KAAK,MAAM,aAAa;CAC1C,MAAM,QAAQ,KAAK,MAAM,SAAS;CAClC,MAAM,UAAU,IAAI;CACpB,MAAM,gBAAA,GAAA,MAAA,QAAA,OACE,gBAAgB,OAAO,OAAO,GACpC,CAAC,SAAS,KAAK,CACjB;CACA,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,eAAe,iBAAiB,KAAK,eAAe;CAE1D,MAAM,mBAAA,GAAA,MAAA,YAAA,EACH,MAAc;EACb,IAAI,CAAC,QAAQ,SAAS,OAAO;EAE7B,MAAM,EAAE,MAAM,UAAU,QAAQ,QAAQ,sBAAsB;EAC9D,MAAM,YAAY,QAAQ;EAE1B,MAAM,gBAAgB,IAAI,QAAQ;EAQlC,QAAA,GAAA,oBAAA,cAAA,YAAA,CALE,gBAAgB,eAAe,UAAU,GAAG,OAAO,GACnD,SACA,KAGS;CACb,GACA,CAAC,OAAO,OAAO,CACjB;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,IAAI,aAAa,WAAW,UAAU;CACxC,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,IAAI,CAAC,aAAa;EAElB,gBAAgB,EAAE;EAClB,WAAW,UAAU;EAErB,IAAI,iBAAiB,IAAI,UAAU,EAAE;CACvC,GAAG;EAAC;EAAc;EAAS;EAAa;CAAe,CAAC;CAExD,MAAM,eAAA,GAAA,MAAA,YAAA,EACH,OAAmC;EAClC,IAAI,YAAY,UAAU;EAE1B,MAAM,eAAe,gBAAgB,GAAG,OAAO;EAE/C,gBAAgB,YAAY;EAE5B,IAAI,iBAAiB,cAAc,UAAU,YAAY;CAC3D,GACA;EAAC;EAAU;EAAiB;EAAc;EAAU;CAAO,CAC7D;CAEA,MAAM,gBAAA,GAAA,MAAA,YAAA,EACH,OAAmC;EAClC,GAAG,eAAe;EAElB,MAAM,KAAK,GAAG,QAAQ;EAEtB,IAAI,CAAC,IAAI;EAET,MAAM,QAAQ,gBAAgB,GAAG,OAAO;EAExC,SAAS,KAAK;CAChB,GACA,CAAC,iBAAiB,QAAQ,CAC5B;CAEA,MAAM,cAAA,GAAA,MAAA,YAAA,EAA0B,OAAmC;EACjE,GAAG,eAAe;CACpB,GAAG,CAAC,CAAC;CA4DL,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,eAAA,GAAA,MAAA,YAAA,EA9EC,EAAE,KAAK,GAAG,UAAU,CAAC,MAAM;GAgB1B,OAAO;IACL,GAhBaC,cAAAA,WACb,WACA,YACA,WACA;KACE;KACA,cAAc,GAAG,MAAM;KACvB,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,QAAQ;KAClC,MAAM;IACR,GACA,MACA,OACA,EAAE,IAAI,GACN,EAAE,KAAK,QAAQ,CACjB,CAAC,CAES;IACR,eAAA,GAAA,oBAAA,cAAA,WAAA,CACE,MAAM,cACN,KAAK,cACL,YACF;IACA,eAAA,GAAA,oBAAA,cAAA,WAAA,CACE,MAAM,cACN,KAAK,cACL,YACF;IACA,cAAA,GAAA,oBAAA,cAAA,WAAA,CACE,MAAM,aACN,KAAK,aACL,WACF;IACA,aAAA,GAAA,oBAAA,cAAA,WAAA,CAAuB,MAAM,YAAY,KAAK,YAAY,UAAU;IACpE,eAAA,GAAA,oBAAA,cAAA,WAAA,CACE,MAAM,cACN,KAAK,cACL,YACF;GACF;EACF,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAwBW;CACb;AACF;AASA,MAAa,iBAAiB,EAC5B,YACA,OACA,GAAG,WACqB;CACxB,MAAM,EACJ,IAAI,QACJ,MACA,SACA,UACA,cACA,uBACA,aACA,YACA,UACA,UACA,cACA,iBACA,UACA,WACA,WACA,eACE,iBAAiB;CACrB,MAAM,gBAAgB,WAAW,eAAe,IAAI,QAAQ,QAAQ;CACpE,MAAM,SAAA,GAAA,MAAA,QAAA,OACE,gBAAgB,aAAa,IAAI,eAAe,OAAO,GAC7D;EAAC;EAAS;EAAe;CAAU,CACrC;CACA,MAAM,SAAS,UAAU;CACzB,MAAM,UAAU,UAAU;CAC1B,MAAM,SAAS,wBACX,UAAU,eACV,SAAS;CACb,MAAM,KAAK,GAAG,OAAO,GAAG,WAAW,GAAG;CAEtC,MAAM,UAAA,GAAA,MAAA,YAAA,OAA2B;EAC/B,IAAI,WAAW,SAAS,gBAAgB,EAAE;CAC5C,GAAG,CAAC,YAAY,eAAe,CAAC;CAEhC,MAAM,iBAAA,GAAA,MAAA,YAAA,EACH,OAAsC;EACrC,IAAI,CAAC,aAAa;EAElB,MAAM,QAAQ,WAAW,GAAG,OAAO,KAAK;EAExC,gBAAgB,KAAK;CACvB,GACA,CAAC,aAAa,eAAe,CAC/B;CAEA,MAAM,YAAA,GAAA,MAAA,YAAA,EACH,UAAkB;EACjB,IAAI,CAAC,aAAa;EAElB,SAAS,KAAK;CAChB,GACA,CAAC,aAAa,QAAQ,CACxB;CAEA,MAAM,eAAA,GAAA,MAAA,YAAA,OAAgC;EACpC,SAAS,KAAK;CAChB,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,SAAS,KAAK;CAChB,GAAG,CAAC,UAAU,KAAK,CAAC;CAEpB,MAAM,aAAA,GAAA,MAAA,YAAA,EACH,OAAwC;EACvC,YAAA,aAAa,IAAI,EACf,aAAa,SAAS,KAAK,EAC7B,CAAC;CACH,GACA,CAAC,UAAU,KAAK,CAClB;CAEA,MAAM,iBAAA,GAAA,MAAA,YAAA,EACH,EAAE,OAAO,GAAG,UAAU,CAAC,MACtBA,cAAAA,WACE,WACA,WACA;EACE,SAAS;EACT,gBAAA,GAAA,oBAAA,cAAA,SAAA,CAAwB,MAAM;EAC9B,gBAAA,GAAA,oBAAA,cAAA,SAAA,CAAwB,MAAM;CAChC,GACA,MACA,OACA,EAAE,MAAM,GACR,EACE,OAAO,EACL,QAAQ,kBAAkB,IAAK,SAAS,IAAI,KAAM,KAAA,EACpD,EACF,GACA;EAAE;EAAa;CAAa,CAC9B,CAAC,CAAC,GACJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CA0CA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,gBAAA,GAAA,MAAA,YAAA,EA9CC,QAAQ,CAAC,OAAO;GACf,GAAG;GACH,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOC,YAAAA,yBAAyB;GAChC,cAAc,MAAM,SAAS;GAC7B,gBAAA,GAAA,oBAAA,cAAA,SAAA,CAAwB,MAAM;GAC9B,iBAAA,GAAA,oBAAA,cAAA,SAAA,CAAyB,OAAO;GAChC;GACA;GACA;GACA;GACA;GACA,GAAG;GACH,SAAA,GAAA,oBAAA,cAAA,WAAA,CAAmB,QAAQ,MAAM,MAAM;GACvC,WAAA,GAAA,oBAAA,cAAA,WAAA,CAAqB,MAAM,UAAU,aAAa;GAClD,YAAA,GAAA,oBAAA,cAAA,WAAA,CAAsB,MAAM,WAAW,SAAS;EAClD,IACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAUY;EACZ;CACF;AACF"}
1	+ {"version":3,"file":"use-rating.cjs","names":["createContext","useId","useFieldProps","useRef","useControllableState","useState","useMemo","useCallback","mergeProps","visuallyHiddenAttributes"],"sources":["../../../../src/components/rating/use-rating.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, KeyboardEvent, MouseEvent, TouchEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useMemo, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n clampNumber,\n createContext,\n dataAttr,\n handlerAll,\n runKeyAction,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nconst getRoundedValue = (value: number, to: number) => {\n const rounded = Math.round(value / to) * to\n const precision = `${to}`.split(\".\")[1]?.length \|\| 0\n\n return Number(rounded.toFixed(precision))\n}\n\nexport interface RatingContext extends Omit<UseRatingReturn, \"getRootProps\"> {}\n\nconst [RatingContext, useRatingContext] = createContext<RatingContext>({\n name: \"RatingContext\",\n})\n\nexport { RatingContext, useRatingContext }\n\nexport interface UseRatingProps\n extends FieldProps, Omit<HTMLProps, \"color\" \| \"defaultValue\" \| \"onChange\"> {\n /*\n Number of controls that should be rendered.\n \n @default 5\n /\n count?: number\n /\n The initial value of the rating.\n \n @default 0\n /\n defaultValue?: number\n /\n Number of fractions each item can be divided into,\n \n @default 1\n /\n fractions?: number\n /\n If `true`, only the selected icons will be filled.\n \n @default false\n /\n highlightSelectedOnly?: boolean\n /\n The top-level id string that will be applied to the rating.\n * The index of the rating item will be appended to this top-level id.\n /\n id?: string\n /\n The name of the input element.\n /\n name?: string\n /\n The value of the rating.\n /\n value?: number\n /\n The callback invoked when value state changes.\n /\n onChange?: (value: number) => void\n /\n The callback invoked when hovering over the rating.\n /\n onHover?: (value: number) => void\n}\n\nexport const useRating = (props: UseRatingProps = {}) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n name = uuid,\n count: countProp = 5,\n defaultValue = 0,\n disabled,\n fractions: fractionsProp = 1,\n highlightSelectedOnly = false,\n readOnly,\n required,\n value: valueProp,\n onChange: onChangeProp,\n onHover,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps({ ...props, notSupportReadOnly: true })\n const rootRef = useRef<HTMLDivElement>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [hoveredValue, setHoveredValue] = useState(-1)\n const outsideRef = useRef(true)\n const fractions = Math.floor(fractionsProp)\n const count = Math.floor(countProp)\n const decimal = 1 / fractions\n const roundedValue = useMemo(\n () => getRoundedValue(value, decimal),\n [decimal, value],\n )\n const interactive = !(readOnly \|\| disabled)\n const displayValue = hoveredValue !== -1 ? hoveredValue : roundedValue\n\n const getHoveredValue = useCallback(\n (x: number) => {\n if (!rootRef.current) return -1\n\n const { left, width } = rootRef.current.getBoundingClientRect()\n const itemWidth = width / count\n\n const hoveredValue = (x - left) / itemWidth\n\n const value = clampNumber(\n getRoundedValue(hoveredValue + decimal / 2, decimal),\n decimal,\n count,\n )\n\n return value\n },\n [count, decimal],\n )\n\n const onMouseEnter = useCallback(() => {\n if (interactive) outsideRef.current = false\n }, [interactive])\n\n const onMouseLeave = useCallback(() => {\n if (!interactive) return\n\n setHoveredValue(-1)\n outsideRef.current = true\n\n if (hoveredValue !== -1) onHover?.(-1)\n }, [hoveredValue, onHover, interactive, setHoveredValue])\n\n const onMouseMove = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n if (disabled \|\| readOnly) return\n\n const roundedValue = getHoveredValue(ev.clientX)\n\n setHoveredValue(roundedValue)\n\n if (roundedValue !== hoveredValue) onHover?.(roundedValue)\n },\n [disabled, getHoveredValue, hoveredValue, readOnly, onHover],\n )\n\n const onTouchStart = useCallback(\n (ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const el = ev.touches[0]\n\n if (!el) return\n\n const value = getHoveredValue(el.clientX)\n\n setValue(value)\n },\n [getHoveredValue, setValue],\n )\n\n const onTouchEnd = useCallback((ev: TouchEvent<HTMLDivElement>) => {\n ev.preventDefault()\n }, [])\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => {\n const merged = mergeProps(\n dataProps,\n eventProps,\n ariaProps,\n {\n id,\n \"aria-label\": `${value} Stars`,\n \"aria-readonly\": ariaAttr(readOnly),\n role: \"radiogroup\",\n },\n rest,\n props,\n { ref },\n { ref: rootRef },\n )()\n return {\n ...merged,\n onMouseEnter: handlerAll(\n props.onMouseEnter,\n rest.onMouseEnter,\n onMouseEnter,\n ),\n onMouseLeave: handlerAll(\n props.onMouseLeave,\n rest.onMouseLeave,\n onMouseLeave,\n ),\n onMouseMove: handlerAll(\n props.onMouseMove,\n rest.onMouseMove,\n onMouseMove,\n ),\n onTouchEnd: handlerAll(props.onTouchEnd, rest.onTouchEnd, onTouchEnd),\n onTouchStart: handlerAll(\n props.onTouchStart,\n rest.onTouchStart,\n onTouchStart,\n ),\n }\n },\n [\n ariaProps,\n dataProps,\n eventProps,\n id,\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n onTouchEnd,\n onTouchStart,\n readOnly,\n rest,\n value,\n ],\n )\n\n return {\n id,\n name,\n count,\n decimal,\n disabled,\n displayValue,\n fractions,\n highlightSelectedOnly,\n hoveredValue,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n value,\n ariaProps,\n dataProps,\n eventProps,\n getRootProps,\n }\n}\n\nexport type UseRatingReturn = ReturnType<typeof useRating>\n\nexport interface UseRatingItemProps extends HTMLProps<\"label\"> {\n groupValue: number\n index: number\n}\n\nexport const useRatingItem = ({\n groupValue,\n index,\n ...rest\n}: UseRatingItemProps) => {\n const {\n id: rootId,\n name,\n decimal,\n disabled,\n displayValue,\n highlightSelectedOnly,\n interactive,\n outsideRef,\n readOnly,\n required,\n roundedValue,\n setHoveredValue,\n setValue,\n ariaProps,\n dataProps,\n eventProps,\n } = useRatingContext()\n const fractionValue = decimal (groupValue === 1 ? index : index + 1)\n const value = useMemo(\n () => getRoundedValue(groupValue - 1 + fractionValue, decimal),\n [decimal, fractionValue, groupValue],\n )\n const active = value === displayValue\n const checked = value === roundedValue\n const filled = highlightSelectedOnly\n ? value === displayValue\n : value <= displayValue\n const id = `${rootId}-${groupValue}-${value}`\n\n const onBlur = useCallback(() => {\n if (outsideRef.current) setHoveredValue(-1)\n }, [outsideRef, setHoveredValue])\n\n const onInputChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return\n\n const value = parseFloat(ev.target.value)\n\n setHoveredValue(value)\n },\n [interactive, setHoveredValue],\n )\n\n const onChange = useCallback(\n (value: number) => {\n if (!interactive) return\n\n setValue(value)\n },\n [interactive, setValue],\n )\n\n const onMouseDown = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onTouchStart = useCallback(() => {\n onChange(value)\n }, [onChange, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n runKeyAction(ev, {\n Space: () => onChange(value),\n })\n },\n [onChange, value],\n )\n\n const getLabelProps: PropGetter<\"label\"> = useCallback(\n ({ style, ...props } = {}) =>\n mergeProps(\n dataProps,\n ariaProps,\n {\n htmlFor: id,\n \"data-active\": dataAttr(active),\n \"data-filled\": dataAttr(filled),\n },\n rest,\n props,\n { style },\n {\n style: {\n zIndex: fractionValue !== 1 ? (active ? 1 : -1) : undefined,\n },\n },\n { onMouseDown, onTouchStart },\n )(),\n [\n active,\n ariaProps,\n dataProps,\n filled,\n fractionValue,\n id,\n onMouseDown,\n onTouchStart,\n rest,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...eventProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-label\": value.toString(),\n \"data-active\": dataAttr(active),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n onBlur: handlerAll(onBlur, props.onBlur),\n onChange: handlerAll(props.onChange, onInputChange),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n id,\n name,\n value,\n active,\n checked,\n dataProps,\n eventProps,\n ariaProps,\n disabled,\n readOnly,\n required,\n onBlur,\n onInputChange,\n onKeyDown,\n ],\n )\n\n return {\n active,\n checked,\n filled,\n fractionValue,\n groupValue,\n value,\n getInputProps,\n getLabelProps,\n }\n}\n\nexport type UseRatingItemReturn = ReturnType<typeof useRatingItem>\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_children = require("../../utils/children.cjs");
 const require_context = require("../../utils/context.cjs");
 const require_effect = require("../../utils/effect.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","mergeProps","mergeRefs"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isObject,\n mergeRefs,\n useUpdateEffect,\n useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n isObject(value) \|\| isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n HTMLMotionProps<\"ul\">,\n Pick<\n Parameters<typeof Reorder.Group<Y[]>>[0],\n \"axis\" \| \"onReorder\" \| \"values\"\n >\n>\ntype ReorderItemProps<Y = string> = Merge<\n HTMLMotionProps<\"li\">,\n Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" \| \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderItemContext\",\n })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n extends\n Partial<Omit<ReorderGroupProps<Y>, \"children\" \| \"onChange\" \| \"values\">>,\n PropsWithChildren {\n /*\n The component to be used for the item.\n /\n item?: ReactElement<any>\n /\n If provided, generate reorder items based on items.\n \n /\n items?: UseReorderItemProps<Y>[]\n /*\n The orientation of the reorder.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n The callback invoked when reorder items are moved.\n /\n onChange?: (values: Y[]) => void\n /\n The callback invoked when the movement of reorder items is completed.\n /\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n ref,\n children,\n item,\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n}: UseReorderProps<Y> = {}) => {\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(\n ({ props }) => props.value ?? getAlternativeValue(props),\n )\n : items.map((props) => props.value ?? getAlternativeValue(props))\n\n const duplicatedValues = values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return Array.from(new Set(values))\n }, [hasChildren, validChildren, items])\n const childMap = useMemo(() => {\n return Object.fromEntries(\n validChildren.map((child) => [\n serializeValue(child.props.value) ??\n serializeValue(getAlternativeValue(child.props)),\n child,\n ]),\n )\n }, [validChildren])\n const itemMap = useMemo(() => {\n return Object.fromEntries(\n items.map((props) => [\n serializeValue(props.value) ??\n serializeValue(getAlternativeValue(props)),\n props,\n ]),\n )\n }, [items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return childMap[serializeValue(value)]\n } else {\n const props = itemMap[serializeValue(value)]\n\n return props && item\n ? cloneElement(item, { key: serializeValue(props.value), ...props })\n : null\n }\n }),\n [values, hasChildren, childMap, itemMap, item],\n )\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (equal) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const equal =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (equal) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const getRootProps: PropGetter<\n Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n undefined,\n ReorderGroupProps<Y>\n > = useCallback(\n (props = {}) =>\n mergeProps(\n { axis, values },\n rest,\n props,\n { ref },\n {\n onMouseUp: onCompleteReorder,\n onReorder,\n onTouchEnd: onCompleteReorder,\n },\n )(),\n [rest, ref, onCompleteReorder, onReorder, axis, values],\n )\n\n return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n /\n The label of the reorder item.\n /\n label?: ReactNode\n /\n The value of the reorder item.\n */\n value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n ref,\n label,\n value,\n ...rest\n}: UseReorderItemProps<Y>) => {\n const { orientation } = useReorderContext()\n const dragControls = useDragControls()\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [drag, setDrag] = useState<boolean>(false)\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement \| null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const getItemProps: PropGetter<\n Omit<HTMLMotionProps<\"li\">, \"layout\" \| \"value\"> &\n Pick<ReorderItemProps<Y>, \"layout\">,\n undefined,\n ReorderItemProps<Y>\n > = useCallback(\n (props = {}) => {\n const children = props.children ?? rest.children ?? label\n\n const merged = mergeProps(\n {\n \"data-has-trigger\": dataAttr(hasTrigger),\n \"data-selected\": dataAttr(drag),\n dragControls,\n dragListener: !hasTrigger,\n value: value ?? getAlternativeValue({ children }),\n },\n props,\n rest,\n { ref },\n )()\n\n return {\n ...merged,\n style: { x, y, ...props.style, ...rest.style },\n children,\n }\n },\n [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(register, props.ref),\n \"data-selected\": dataAttr(drag),\n onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n dragControls.start(ev),\n ),\n }),\n [drag, dragControls, register],\n )\n\n return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n typeof useReorderItem<Y>\n>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-reorder.cjs","names":["createContext","useValidChildren","useMemo","useRef","useState","cloneElement","useCallback","mergeProps","useDragControls","useMotionValue","mergeRefs"],"sources":["../../../../src/components/reorder/use-reorder.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLMotionProps, Reorder } from \"motion/react\"\nimport type { PropsWithChildren, ReactElement, ReactNode } from \"react\"\nimport type { Orientation, PropGetter } from \"../../core\"\nimport type { Dict, Merge } from \"../../utils\"\nimport { useDragControls, useMotionValue } from \"motion/react\"\nimport {\n cloneElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\"\nimport { mergeProps } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n handlerAll,\n isArray,\n isObject,\n mergeRefs,\n useUpdateEffect,\n useValidChildren,\n} from \"../../utils\"\n\nconst getAlternativeValue = ({ children, label }: Dict = {}) =>\n serializeValue(children ?? label)\n\nconst serializeValue = (value: any) =>\n isObject(value) \|\| isArray(value) ? JSON.stringify(value) : value\n\ntype ReorderGroupProps<Y = string> = Merge<\n HTMLMotionProps<\"ul\">,\n Pick<\n Parameters<typeof Reorder.Group<Y[]>>[0],\n \"axis\" \| \"onReorder\" \| \"values\"\n >\n>\ntype ReorderItemProps<Y = string> = Merge<\n HTMLMotionProps<\"li\">,\n Partial<Pick<Parameters<typeof Reorder.Item<Y>>[0], \"layout\" \| \"value\">>\n>\n\ninterface ReorderContext extends Pick<UseReorderProps, \"orientation\"> {}\n\nconst [ReorderContext, useReorderContext] = createContext<ReorderContext>({\n name: \"ReorderContext\",\n})\n\nexport { ReorderContext, useReorderContext }\n\ninterface ReorderItemContext {\n getTriggerProps: PropGetter\n}\n\nconst [ReorderItemContext, useReorderItemContext] =\n createContext<ReorderItemContext>({\n name: \"ReorderItemContext\",\n })\n\nexport { ReorderItemContext, useReorderItemContext }\n\nexport interface UseReorderProps<Y = string>\n extends\n Partial<Omit<ReorderGroupProps<Y>, \"children\" \| \"onChange\" \| \"values\">>,\n PropsWithChildren {\n /*\n The component to be used for the item.\n /\n item?: ReactElement<any>\n /\n If provided, generate reorder items based on items.\n \n /\n items?: UseReorderItemProps<Y>[]\n /*\n The orientation of the reorder.\n \n @default 'vertical'\n /\n orientation?: Orientation\n /\n The callback invoked when reorder items are moved.\n /\n onChange?: (values: Y[]) => void\n /\n The callback invoked when the movement of reorder items is completed.\n /\n onCompleteChange?: (values: Y[]) => void\n}\n\nexport const useReorder = <Y = string>({\n ref,\n children,\n item,\n items = [],\n orientation = \"vertical\",\n onChange,\n onCompleteChange,\n ...rest\n}: UseReorderProps<Y> = {}) => {\n const axis = orientation === \"vertical\" ? \"y\" : \"x\"\n const validChildren = useValidChildren(children)\n const hasChildren = !!validChildren.length\n const defaultValues = useMemo(() => {\n const values = hasChildren\n ? validChildren.map(\n ({ props }) => props.value ?? getAlternativeValue(props),\n )\n : items.map((props) => props.value ?? getAlternativeValue(props))\n\n const duplicatedValues = values.filter(\n (value, index, self) =>\n self.indexOf(value) === index && index !== self.lastIndexOf(value),\n )\n\n if (duplicatedValues.length)\n console.warn(\n `Reorder: 'value' of 'ReorderItem' must not be duplicated. duplicate 'value' is '${duplicatedValues.join(\n `', '`,\n )}' `,\n )\n\n return Array.from(new Set(values))\n }, [hasChildren, validChildren, items])\n const childMap = useMemo(() => {\n return Object.fromEntries(\n validChildren.map((child) => [\n serializeValue(child.props.value) ??\n serializeValue(getAlternativeValue(child.props)),\n child,\n ]),\n )\n }, [validChildren])\n const itemMap = useMemo(() => {\n return Object.fromEntries(\n items.map((props) => [\n serializeValue(props.value) ??\n serializeValue(getAlternativeValue(props)),\n props,\n ]),\n )\n }, [items])\n const prevDefaultValues = useRef<Y[]>(defaultValues)\n const [values, setValues] = useState<Y[]>(defaultValues)\n const prevValues = useRef<Y[]>(defaultValues)\n const cloneChildren = useMemo(\n () =>\n values.map((value) => {\n if (hasChildren) {\n return childMap[serializeValue(value)]\n } else {\n const props = itemMap[serializeValue(value)]\n\n return props && item\n ? cloneElement(item, { key: serializeValue(props.value), ...props })\n : null\n }\n }),\n [values, hasChildren, childMap, itemMap, item],\n )\n\n const onReorder = useCallback(\n (newValues: Y[]) => {\n setValues(newValues)\n\n onChange?.(newValues)\n },\n [onChange],\n )\n\n const onCompleteReorder = useCallback(() => {\n const equal = JSON.stringify(prevValues.current) === JSON.stringify(values)\n\n if (equal) return\n\n prevValues.current = values\n\n onCompleteChange?.(values)\n }, [onCompleteChange, values])\n\n useUpdateEffect(() => {\n const equal =\n JSON.stringify(defaultValues) ===\n JSON.stringify(prevDefaultValues.current)\n\n if (equal) return\n\n prevValues.current = defaultValues\n prevDefaultValues.current = defaultValues\n\n setValues(defaultValues)\n }, [defaultValues])\n\n const getRootProps: PropGetter<\n Partial<Omit<ReorderGroupProps<Y>, \"values\">>,\n undefined,\n ReorderGroupProps<Y>\n > = useCallback(\n (props = {}) =>\n mergeProps(\n { axis, values },\n rest,\n props,\n { ref },\n {\n onMouseUp: onCompleteReorder,\n onReorder,\n onTouchEnd: onCompleteReorder,\n },\n )(),\n [rest, ref, onCompleteReorder, onReorder, axis, values],\n )\n\n return { children: cloneChildren, orientation, values, getRootProps }\n}\n\nexport type UseReorderReturn<Y = string> = ReturnType<typeof useReorder<Y>>\n\nexport interface UseReorderItemProps<Y = string> extends ReorderItemProps<Y> {\n /\n The label of the reorder item.\n /\n label?: ReactNode\n /\n The value of the reorder item.\n */\n value?: Y\n}\n\nexport const useReorderItem = <Y = string>({\n ref,\n label,\n value,\n ...rest\n}: UseReorderItemProps<Y>) => {\n const { orientation } = useReorderContext()\n const dragControls = useDragControls()\n const [hasTrigger, setHasTrigger] = useState<boolean>(false)\n const [drag, setDrag] = useState<boolean>(false)\n const x = useMotionValue(0)\n const y = useMotionValue(0)\n\n const register = useCallback(\n (node: HTMLElement \| null) => setHasTrigger(!!node),\n [],\n )\n\n useEffect(() => {\n const unsubscribeX = x.on(\"change\", (x) => {\n if (orientation === \"horizontal\") setDrag(x !== 0)\n })\n const unsubscribeY = y.on(\"change\", (y) => {\n if (orientation === \"vertical\") setDrag(y !== 0)\n })\n\n return () => {\n unsubscribeX()\n unsubscribeY()\n }\n }, [orientation, x, y])\n\n const getItemProps: PropGetter<\n Omit<HTMLMotionProps<\"li\">, \"layout\" \| \"value\"> &\n Pick<ReorderItemProps<Y>, \"layout\">,\n undefined,\n ReorderItemProps<Y>\n > = useCallback(\n (props = {}) => {\n const children = props.children ?? rest.children ?? label\n\n const merged = mergeProps(\n {\n \"data-has-trigger\": dataAttr(hasTrigger),\n \"data-selected\": dataAttr(drag),\n dragControls,\n dragListener: !hasTrigger,\n value: value ?? getAlternativeValue({ children }),\n },\n props,\n rest,\n { ref },\n )()\n\n return {\n ...merged,\n style: { x, y, ...props.style, ...rest.style },\n children,\n }\n },\n [ref, rest, dragControls, hasTrigger, value, x, y, drag, label],\n )\n\n const getTriggerProps: PropGetter = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(register, props.ref),\n \"data-selected\": dataAttr(drag),\n onPointerDown: handlerAll(props.onPointerDown, (ev) =>\n dragControls.start(ev),\n ),\n }),\n [drag, dragControls, register],\n )\n\n return { getItemProps, getTriggerProps }\n}\n\nexport type UseReorderItemReturn<Y = string> = ReturnType<\n typeof useReorderItem<Y>\n>\n"],"mappings":";;;;;;;;;;;AA2BA,MAAM,uBAAuB,EAAE,UAAU,UAAgB,CAAC,MACxD,eAAe,YAAY,KAAK;AAElC,MAAM,kBAAkB,WAAA,GAAA,oBAAA,cACtB,SAAA,CAAS,KAAK,MAAA,GAAA,oBAAA,cAAK,QAAA,CAAQ,KAAK,IAAI,KAAK,UAAU,KAAK,IAAI;AAgB9D,MAAM,CAAC,gBAAgB,qBAAqBA,gBAAAA,cAA8B,EACxE,MAAM,iBACR,CAAC;AAQD,MAAM,CAAC,oBAAoB,yBACzBA,gBAAAA,cAAkC,EAChC,MAAM,qBACR,CAAC;AAiCH,MAAa,cAA0B,EACrC,KACA,UACA,MACA,QAAQ,CAAC,GACT,cAAc,YACd,UACA,kBACA,GAAG,SACmB,CAAC,MAAM;CAC7B,MAAM,OAAO,gBAAgB,aAAa,MAAM;CAChD,MAAM,gBAAgBC,iBAAAA,iBAAiB,QAAQ;CAC/C,MAAM,cAAc,CAAC,CAAC,cAAc;CACpC,MAAM,iBAAA,GAAgBC,MAAAA,QAAAA,OAAc;EAClC,MAAM,SAAS,cACX,cAAc,KACX,EAAE,YAAY,MAAM,SAAS,oBAAoB,KAAK,CACzD,IACA,MAAM,KAAK,UAAU,MAAM,SAAS,oBAAoB,KAAK,CAAC;EAElE,MAAM,mBAAmB,OAAO,QAC7B,OAAO,OAAO,SACb,KAAK,QAAQ,KAAK,MAAM,SAAS,UAAU,KAAK,YAAY,KAAK,CACrE;EAEA,IAAI,iBAAiB,QACnB,QAAQ,KACN,mFAAmF,iBAAiB,KAClG,MACF,EAAE,GACJ;EAEF,OAAO,MAAM,KAAK,IAAI,IAAI,MAAM,CAAC;CACnC,GAAG;EAAC;EAAa;EAAe;CAAK,CAAC;CACtC,MAAM,YAAA,GAAWA,MAAAA,QAAAA,OAAc;EAC7B,OAAO,OAAO,YACZ,cAAc,KAAK,UAAU,CAC3B,eAAe,MAAM,MAAM,KAAK,KAC9B,eAAe,oBAAoB,MAAM,KAAK,CAAC,GACjD,KACF,CAAC,CACH;CACF,GAAG,CAAC,aAAa,CAAC;CAClB,MAAM,WAAA,GAAUA,MAAAA,QAAAA,OAAc;EAC5B,OAAO,OAAO,YACZ,MAAM,KAAK,UAAU,CACnB,eAAe,MAAM,KAAK,KACxB,eAAe,oBAAoB,KAAK,CAAC,GAC3C,KACF,CAAC,CACH;CACF,GAAG,CAAC,KAAK,CAAC;CACV,MAAM,qBAAA,GAAoBC,MAAAA,OAAAA,CAAY,aAAa;CACnD,MAAM,CAAC,QAAQ,cAAA,GAAaC,MAAAA,SAAAA,CAAc,aAAa;CACvD,MAAM,cAAA,GAAaD,MAAAA,OAAAA,CAAY,aAAa;CAC5C,MAAM,iBAAA,GAAgBD,MAAAA,QAAAA,OAElB,OAAO,KAAK,UAAU;EACpB,IAAI,aACF,OAAO,SAAS,eAAe,KAAK;OAC/B;GACL,MAAM,QAAQ,QAAQ,eAAe,KAAK;GAE1C,OAAO,SAAS,QAAA,GACZG,MAAAA,aAAAA,CAAa,MAAM;IAAE,KAAK,eAAe,MAAM,KAAK;IAAG,GAAG;GAAM,CAAC,IACjE;EACN;CACF,CAAC,GACH;EAAC;EAAQ;EAAa;EAAU;EAAS;CAAI,CAC/C;CAEA,MAAM,aAAA,GAAYC,MAAAA,YAAAA,EACf,cAAmB;EAClB,UAAU,SAAS;EAEnB,WAAW,SAAS;CACtB,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,qBAAA,GAAoBA,MAAAA,YAAAA,OAAkB;EAG1C,IAFc,KAAK,UAAU,WAAW,OAAO,MAAM,KAAK,UAAU,MAAM,GAE/D;EAEX,WAAW,UAAU;EAErB,mBAAmB,MAAM;CAC3B,GAAG,CAAC,kBAAkB,MAAM,CAAC;CAE7B,eAAA,sBAAsB;EAKpB,IAHE,KAAK,UAAU,aAAa,MAC5B,KAAK,UAAU,kBAAkB,OAAO,GAE/B;EAEX,WAAW,UAAU;EACrB,kBAAkB,UAAU;EAE5B,UAAU,aAAa;CACzB,GAAG,CAAC,aAAa,CAAC;CAsBlB,OAAO;EAAE,UAAU;EAAe;EAAa;EAAQ,eAAA,GAhBnDA,MAAAA,YAAAA,EACD,QAAQ,CAAC,MACRC,cAAAA,WACE;GAAE;GAAM;EAAO,GACf,MACA,OACA,EAAE,IAAI,GACN;GACE,WAAW;GACX;GACA,YAAY;EACd,CACF,CAAC,CAAC,GACJ;GAAC;GAAM;GAAK;GAAmB;GAAW;GAAM;EAAM,CAGU;CAAE;AACtE;AAeA,MAAa,kBAA8B,EACzC,KACA,OACA,OACA,GAAG,WACyB;CAC5B,MAAM,EAAE,gBAAgB,kBAAkB;CAC1C,MAAM,gBAAA,GAAeC,aAAAA,gBAAAA,CAAgB;CACrC,MAAM,CAAC,YAAY,kBAAA,GAAiBJ,MAAAA,SAAAA,CAAkB,KAAK;CAC3D,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAAkB,KAAK;CAC/C,MAAM,KAAA,GAAIK,aAAAA,eAAAA,CAAe,CAAC;CAC1B,MAAM,KAAA,GAAIA,aAAAA,eAAAA,CAAe,CAAC;CAE1B,MAAM,YAAA,GAAWH,MAAAA,YAAAA,EACd,SAA6B,cAAc,CAAC,CAAC,IAAI,GAClD,CAAC,CACH;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,eAAe,EAAE,GAAG,WAAW,MAAM;GACzC,IAAI,gBAAgB,cAAc,QAAQ,MAAM,CAAC;EACnD,CAAC;EACD,MAAM,eAAe,EAAE,GAAG,WAAW,MAAM;GACzC,IAAI,gBAAgB,YAAY,QAAQ,MAAM,CAAC;EACjD,CAAC;EAED,aAAa;GACX,aAAa;GACb,aAAa;EACf;CACF,GAAG;EAAC;EAAa;EAAG;CAAC,CAAC;CA6CtB,OAAO;EAAE,eAAA,GAtCLA,MAAAA,YAAAA,EACD,QAAQ,CAAC,MAAM;GACd,MAAM,WAAW,MAAM,YAAY,KAAK,YAAY;GAepD,OAAO;IACL,GAdaC,cAAAA,WACb;KACE,qBAAA,GAAA,oBAAA,cAAoB,SAAA,CAAS,UAAU;KACvC,kBAAA,GAAA,oBAAA,cAAiB,SAAA,CAAS,IAAI;KAC9B;KACA,cAAc,CAAC;KACf,OAAO,SAAS,oBAAoB,EAAE,SAAS,CAAC;IAClD,GACA,OACA,MACA,EAAE,IAAI,CACR,CAAC,CAGS;IACR,OAAO;KAAE;KAAG;KAAG,GAAG,MAAM;KAAO,GAAG,KAAK;IAAM;IAC7C;GACF;EACF,GACA;GAAC;GAAK;GAAM;GAAc;GAAY;GAAO;GAAG;GAAG;GAAM;EAAK,CAe5C;EAAG,kBAAA,GAZaD,MAAAA,YAAAA,EACjC,QAAQ,CAAC,OAAO;GACf,GAAG;GACH,KAAKI,YAAAA,UAAU,UAAU,MAAM,GAAG;GAClC,kBAAA,GAAA,oBAAA,cAAiB,SAAA,CAAS,IAAI;GAC9B,gBAAA,GAAA,oBAAA,cAAe,WAAA,CAAW,MAAM,gBAAgB,OAC9C,aAAa,MAAM,EAAE,CACvB;EACF,IACA;GAAC;GAAM;GAAc;EAAQ,CAGM;CAAE;AACzC"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_factory = require("../../core/system/factory.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
@@ -10,20 +11,22 @@ let react_resizable_panels = require("react-resizable-panels");
 //#region src/components/resizable/resizable.tsx
 const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("resizable", require_resizable_style.resizableStyle);
 const ResizableRoot = withProvider(({ children, orientation: orientationProp, ...rest }) => {
+	const computedOrientation = require_hooks_use_value_index.useValue(orientationProp);
 	const { disabled, groupRef, orientation, getRootProps } = require_use_resizable.useResizable({
-		orientation: require_hooks_use_value_index.useValue(orientationProp),
+		orientation: computedOrientation,
 		...rest
 	});
+	const context = (0, react.useMemo)(() => ({
+		disabled,
+		groupRef,
+		orientation
+	}), [
+		disabled,
+		orientation,
+		groupRef
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_resizable.ResizableContext, {
-		value: (0, react.useMemo)(() => ({
-			disabled,
-			groupRef,
-			orientation
-		}), [
-			disabled,
-			orientation,
-			groupRef
-		]),
+		value: context,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
 			as: react_resizable_panels.Group,
 			...getRootProps(),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"resizable.cjs","names":["createSlotComponent","resizableStyle","useResizable","~~useValue~~","ResizableContext","styled","Group","useResizableItem","Panel","useResizableTrigger","Separator"],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n HTMLStyledProps,\n HTMLStyledPropsWithoutAs,\n ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n UseResizableItemProps,\n UseResizableProps,\n UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n ResizableContext,\n useResizable,\n useResizableItem,\n useResizableTrigger,\n} from \"./use-resizable\"\n\n/*\n `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n \n @see https://yamada-ui.com/docs/components/resizable\n /\nexport interface ResizableRootProps\n extends\n HTMLStyledProps,\n ThemeProps<ResizableStyle>,\n Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n PropsContext: ResizablePropsContext,\n usePropsContext: useResizablePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n \"resizable\",\n resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n \"div\",\n ResizableRootProps,\n \"orientation\"\n>(\n ({ children, orientation: orientationProp, ...rest }) => {\n const computedOrientation = useValue(orientationProp)\n const { disabled, groupRef, orientation, getRootProps } = useResizable({\n orientation: computedOrientation,\n ...rest,\n })\n\n const context = useMemo(\n () => ({ disabled, groupRef, orientation }),\n [disabled, orientation, groupRef],\n )\n\n return (\n <ResizableContext value={context}>\n <styled.div as={Group} {...getRootProps()}>\n {children}\n </styled.div>\n </ResizableContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n const { getItemProps } = useResizableItem(props)\n\n return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n /\n The resizable trigger icon to use.\n /\n icon?: ReactElement\n /\n Props for resizable trigger icon component.\n */\n iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n ({ children, icon, iconProps, ...rest }) => {\n const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n return (\n <styled.div as={Separator} {...getTriggerProps()}>\n {icon ? (\n <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n ) : null}\n\n {children}\n </styled.div>\n )\n },\n \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":"~~;;;;;;;;;;~~AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,cACF;AAIA,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;~~CAEvD~~,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiBC,sBAAAA,aAAa;EACrE,~~aAF0BC,8BAAAA,SAAS,eAEJ~~;~~EAC/B~~,GAAG;CACL,CAAC;~~CAOD~~,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD;EAAkB,~~QAAA,GAAA,MAAA,QAAA,QALX~~;~~GAAE;GAAU;GAAU;EAAY~~,~~IACzC;GAAC;GAAU;GAAa;EAAQ,CAID;EAC7B,~~UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GAAY,IAAIC,uBAAAA;GAAO,GAAI,aAAa;GACrC;EACS,CAAA;CACI,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAKF,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiBC,sBAAAA,iBAAiB,KAAK;CAE/C,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACF,gBAAAA,OAAO,KAAR;EAAY,IAAIG,uBAAAA;EAAO,GAAI,aAAa;CAAI,CAAA;AACrD,GAAG,MAAM,CAAC,CAAC;AAcX,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoBC,sBAAAA,oBAAoB,IAAI;CAElE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACJ,gBAAAA,OAAO,KAAR;EAAY,IAAIK,uBAAAA;EAAW,GAAI,gBAAgB;EAA/C,UAAA,CACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;GAAe,GAAI,aAAa,SAAS;GAAI,UAAA;EAAoB,CAAA,IAC/D,MAEH,QACS;;AAEhB,GACA,SACF,CAAC,CAAC;AAIF,MAAM,gBAAgB,YAAuC,OAAO,MAAM,CAAC,CAAC"}
1	+ {"version":3,"file":"resizable.cjs","names":["createSlotComponent","resizableStyle","useValue","useResizable","useMemo","ResizableContext","styled","Group","useResizableItem","Panel","useResizableTrigger","Separator"],"sources":["../../../../src/components/resizable/resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n HTMLStyledProps,\n HTMLStyledPropsWithoutAs,\n ThemeProps,\n} from \"../../core\"\nimport type { ResizableStyle } from \"./resizable.style\"\nimport type {\n UseResizableItemProps,\n UseResizableProps,\n UseResizableTriggerProps,\n} from \"./use-resizable\"\nimport { useMemo } from \"react\"\nimport { Group, Panel, Separator } from \"react-resizable-panels\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { resizableStyle } from \"./resizable.style\"\nimport {\n ResizableContext,\n useResizable,\n useResizableItem,\n useResizableTrigger,\n} from \"./use-resizable\"\n\n/*\n `Resizable` is accessible resizable panel groups and layouts with keyboard support.\n \n @see https://yamada-ui.com/docs/components/resizable\n /\nexport interface ResizableRootProps\n extends\n HTMLStyledProps,\n ThemeProps<ResizableStyle>,\n Omit<UseResizableProps, \"orientation\"> {}\n\nconst {\n PropsContext: ResizablePropsContext,\n usePropsContext: useResizablePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ResizableRootProps, ResizableStyle>(\n \"resizable\",\n resizableStyle,\n)\n\nexport { ResizablePropsContext, useResizablePropsContext }\n\nexport const ResizableRoot = withProvider<\n \"div\",\n ResizableRootProps,\n \"orientation\"\n>(\n ({ children, orientation: orientationProp, ...rest }) => {\n const computedOrientation = useValue(orientationProp)\n const { disabled, groupRef, orientation, getRootProps } = useResizable({\n orientation: computedOrientation,\n ...rest,\n })\n\n const context = useMemo(\n () => ({ disabled, groupRef, orientation }),\n [disabled, orientation, groupRef],\n )\n\n return (\n <ResizableContext value={context}>\n <styled.div as={Group} {...getRootProps()}>\n {children}\n </styled.div>\n </ResizableContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface ResizableItemProps\n extends HTMLStyledPropsWithoutAs, UseResizableItemProps {}\n\nexport const ResizableItem = withContext<\"div\", ResizableItemProps>((props) => {\n const { getItemProps } = useResizableItem(props)\n\n return <styled.div as={Panel} {...getItemProps()} />\n}, \"item\")()\n\nexport interface ResizableTriggerProps\n extends HTMLStyledPropsWithoutAs, UseResizableTriggerProps {\n /\n The resizable trigger icon to use.\n /\n icon?: ReactElement\n /\n Props for resizable trigger icon component.\n */\n iconProps?: HTMLStyledProps\n}\n\nexport const ResizableTrigger = withContext<\"div\", ResizableTriggerProps>(\n ({ children, icon, iconProps, ...rest }) => {\n const { getIconProps, getTriggerProps } = useResizableTrigger(rest)\n\n return (\n <styled.div as={Separator} {...getTriggerProps()}>\n {icon ? (\n <ResizableIcon {...getIconProps(iconProps)}>{icon}</ResizableIcon>\n ) : null}\n\n {children}\n </styled.div>\n )\n },\n \"trigger\",\n)()\n\ninterface ResizableIconProps extends HTMLStyledProps {}\n\nconst ResizableIcon = withContext<\"div\", ResizableIconProps>(\"div\", \"icon\")()\n"],"mappings":";;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,aACAC,wBAAAA,cACF;AAIA,MAAa,gBAAgB,cAK1B,EAAE,UAAU,aAAa,iBAAiB,GAAG,WAAW;CACvD,MAAM,sBAAsBC,8BAAAA,SAAS,eAAe;CACpD,MAAM,EAAE,UAAU,UAAU,aAAa,iBAAiBC,sBAAAA,aAAa;EACrE,aAAa;EACb,GAAG;CACL,CAAC;CAED,MAAM,WAAA,GAAUC,MAAAA,QAAAA,QACP;EAAE;EAAU;EAAU;CAAY,IACzC;EAAC;EAAU;EAAa;CAAQ,CAClC;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,sBAAAA,kBAAD;EAAkB,OAAO;EACvB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GAAY,IAAIC,uBAAAA;GAAO,GAAI,aAAa;GACrC;EACS,CAAA;CACI,CAAA;AAEtB,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAKF,MAAa,gBAAgB,aAAwC,UAAU;CAC7E,MAAM,EAAE,iBAAiBC,sBAAAA,iBAAiB,KAAK;CAE/C,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACF,gBAAAA,OAAO,KAAR;EAAY,IAAIG,uBAAAA;EAAO,GAAI,aAAa;CAAI,CAAA;AACrD,GAAG,MAAM,CAAC,CAAC;AAcX,MAAa,mBAAmB,aAC7B,EAAE,UAAU,MAAM,WAAW,GAAG,WAAW;CAC1C,MAAM,EAAE,cAAc,oBAAoBC,sBAAAA,oBAAoB,IAAI;CAElE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACJ,gBAAAA,OAAO,KAAR;EAAY,IAAIK,uBAAAA;EAAW,GAAI,gBAAgB;EAA/C,UAAA,CACG,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,eAAD;GAAe,GAAI,aAAa,SAAS;GAAI,UAAA;EAAoB,CAAA,IAC/D,MAEH,QACS;;AAEhB,GACA,SACF,CAAC,CAAC;AAIF,MAAM,gBAAgB,YAAuC,OAAO,MAAM,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_context = require("../../utils/context.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-resizable.cjs","names":["createContext","mergeProps","mergeRefs"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n GroupImperativeHandle,\n GroupProps,\n LayoutStorage,\n PanelImperativeHandle,\n PanelProps,\n SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n useGroupRef,\n usePanelRef,\n useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n fnAll,\n mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n {\n name: \"ResizableContext\",\n },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n extends\n HTMLProps,\n Omit<GroupProps, \"color\" \| \"content\" \| \"elementRef\" \| \"groupRef\"> {\n /*\n Ref of the resizable item callback.\n /\n controlRef?: RefObject<null \| ResizableRootControl>\n}\n\nexport const useResizable = ({\n controlRef,\n disabled,\n orientation = \"horizontal\",\n ...rest\n}: UseResizableProps = {}) => {\n const groupRef = useGroupRef()\n\n const getRootProps: PropGetter<GroupProps> = useCallback(\n (props = {}) => {\n const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n return {\n ...merged,\n style: {\n height: undefined,\n width: undefined,\n ...rest.style,\n ...props.style,\n },\n elementRef: mergeRefs(props.elementRef, rest.ref),\n groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n }\n },\n [disabled, orientation, groupRef, controlRef, rest],\n )\n\n return {\n disabled,\n groupRef,\n orientation,\n getRootProps,\n }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n extends\n HTMLProps,\n Omit<PanelProps, \"color\" \| \"content\" \| \"elementRef\" \| \"panelRef\"> {\n /\n Ref of the resizable item callback.\n */\n controlRef?: RefObject<null \| ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n controlRef,\n ...rest\n}: UseResizableItemProps) => {\n const panelRef = usePanelRef()\n\n const getItemProps: PropGetter<PanelProps> = useCallback(\n (props = {}) => {\n const merged = mergeProps(rest, props)()\n\n return {\n ...merged,\n elementRef: mergeRefs(props.elementRef, rest.ref),\n panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n onResize: fnAll(props.onResize, rest.onResize),\n }\n },\n [panelRef, controlRef, rest],\n )\n\n return {\n panelRef,\n getItemProps,\n }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n extends HTMLProps, Omit<SeparatorProps, \"color\" \| \"content\" \| \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n disabled,\n ...rest\n}: UseResizableTriggerProps) => {\n const {\n disabled: groupDisabled,\n groupRef,\n orientation,\n } = useResizableContext()\n const trulyDisabled = disabled \|\| groupDisabled\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = groupRef.current?.getLayout()\n\n if (!layout) return\n\n const count = Object.keys(layout).length\n const size = 100 / count\n const nextLayout = Object.fromEntries(\n Object.keys(layout).map((key) => [key, size]),\n )\n\n groupRef.current?.setLayout(nextLayout)\n },\n [groupRef],\n )\n\n const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n (props = {}) => {\n const merged = mergeProps(\n {\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"aria-orientation\": orientation,\n \"data-disabled\": dataAttr(trulyDisabled),\n disabled: trulyDisabled,\n tabIndex: trulyDisabled ? -1 : 0,\n },\n props,\n rest,\n { onDoubleClick },\n )()\n\n return {\n ...merged,\n elementRef: mergeRefs(props.elementRef, rest.ref),\n }\n },\n [orientation, trulyDisabled, rest, onDoubleClick],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-icon\": \"\",\n ...props,\n }),\n [],\n )\n\n return {\n getIconProps,\n getTriggerProps,\n }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":"~~;;;;;;;;~~AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAAAA,cAC9C,EACE,MAAM,mBACR,CACF;AAkBA,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,YAAA,~~GAAA~~,~~uBAAA~~,~~YAAA~~,~~CAAuB~~;CAuB7B,OAAO;EACL;EACA;EACA;EACA,eAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EAxBC~~,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHaC,cAAAA,WAAW;KAAE;KAAU;IAAY,GAAG,MAAM,KAAK,CAAC,CAGvD;IACR,OAAO;KACL,QAAQ,KAAA;KACR,OAAO,KAAA;KACP,GAAG,KAAK;KACR,GAAG,MAAM;IACX;IACA,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAUA,YAAAA,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,iBAAA,GAAA,oBAAA,~~cAAA~~,MAAA,~~CAAsB~~,MAAM,gBAAgB,KAAK,cAAc;IAC/D,kBAAA,GAAA,oBAAA,~~cAAA~~,MAAA,~~CAAuB~~,MAAM,iBAAiB,KAAK,eAAe;GACpE;EACF,GACA;GAAC;GAAU;GAAa;GAAU;GAAY;EAAI,CAOvC;CACb;AACF;AAcA,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,YAAA,~~GAAA~~,~~uBAAA~~,~~YAAA~~,~~CAAuB~~;CAgB7B,OAAO;EACL;EACA,eAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EAfC~~,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,~~GAHaD~~,cAAAA,WAAW,MAAM,KAAK,CAAC,CAG5B;IACR,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAUA,YAAAA,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,WAAA,GAAA,oBAAA,~~cAAA~~,MAAA,~~CAAgB~~,MAAM,UAAU,KAAK,QAAQ;GAC/C;EACF,GACA;GAAC;GAAU;GAAY;EAAI,CAKhB;CACb;AACF;AAOA,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,oBAAoB;CACxB,MAAM,gBAAgB,YAAY;CAElC,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,OAAmC;EAClC,GAAG,eAAe;EAElB,MAAM,SAAS,SAAS,SAAS,UAAU;EAE3C,IAAI,CAAC,QAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,MAAM,CAAC,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,MAAM,CAAC,CAAC,KAAK,QAAQ,CAAC,KAAK,IAAI,CAAC,CAC9C;EAEA,SAAS,SAAS,UAAU,UAAU;CACxC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,mBAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,QAAQ,CAAC,MAAM;EAcd,OAAO;GACL,~~GAdaD~~,cAAAA,WACb;IACE,kBAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAA0B~~,aAAa;IACvC,oBAAoB;IACpB,kBAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAA0B~~,aAAa;IACvC,UAAU;IACV,UAAU,gBAAgB,KAAK;GACjC,GACA,OACA,MACA,EAAE,cAAc,CAClB,CAAC,CAGS;GACR,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,GAAG;EAClD;CACF,GACA;EAAC;EAAa;EAAe;EAAM;CAAa,CAClD;CAUA,OAAO;EACL,eAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EARC~~,QAAQ,CAAC,OAAO;GACf,aAAa;GACb,GAAG;EACL,IACA,CAAC,CAIU;EACX;CACF;AACF"}
1	+ {"version":3,"file":"use-resizable.cjs","names":["createContext","useGroupRef","useCallback","mergeProps","mergeRefs","usePanelRef"],"sources":["../../../../src/components/resizable/use-resizable.ts"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type {\n GroupImperativeHandle,\n GroupProps,\n LayoutStorage,\n PanelImperativeHandle,\n PanelProps,\n SeparatorProps,\n} from \"react-resizable-panels\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback } from \"react\"\nimport {\n useGroupRef,\n usePanelRef,\n useDefaultLayout as useResizableLayout,\n} from \"react-resizable-panels\"\nimport { mergeProps } from \"../../core\"\nimport {\n ariaAttr,\n createContext,\n dataAttr,\n fnAll,\n mergeRefs,\n} from \"../../utils\"\n\ninterface ResizableContext extends Omit<UseResizableReturn, \"getRootProps\"> {}\n\nconst [ResizableContext, useResizableContext] = createContext<ResizableContext>(\n {\n name: \"ResizableContext\",\n },\n)\n\nexport { ResizableContext, useResizableContext, useResizableLayout }\n\nexport interface ResizableStorage extends LayoutStorage {}\nexport interface ResizableRootControl extends GroupImperativeHandle {}\nexport interface ResizableItemControl extends PanelImperativeHandle {}\n\nexport interface UseResizableProps\n extends\n HTMLProps,\n Omit<GroupProps, \"color\" \| \"content\" \| \"elementRef\" \| \"groupRef\"> {\n /*\n Ref of the resizable item callback.\n /\n controlRef?: RefObject<null \| ResizableRootControl>\n}\n\nexport const useResizable = ({\n controlRef,\n disabled,\n orientation = \"horizontal\",\n ...rest\n}: UseResizableProps = {}) => {\n const groupRef = useGroupRef()\n\n const getRootProps: PropGetter<GroupProps> = useCallback(\n (props = {}) => {\n const merged = mergeProps({ disabled, orientation }, rest, props)()\n\n return {\n ...merged,\n style: {\n height: undefined,\n width: undefined,\n ...rest.style,\n ...props.style,\n },\n elementRef: mergeRefs(props.elementRef, rest.ref),\n groupRef: mergeRefs(props.groupRef, groupRef, controlRef),\n onLayoutChange: fnAll(props.onLayoutChange, rest.onLayoutChange),\n onLayoutChanged: fnAll(props.onLayoutChanged, rest.onLayoutChanged),\n }\n },\n [disabled, orientation, groupRef, controlRef, rest],\n )\n\n return {\n disabled,\n groupRef,\n orientation,\n getRootProps,\n }\n}\n\nexport type UseResizableReturn = ReturnType<typeof useResizable>\n\nexport interface UseResizableItemProps\n extends\n HTMLProps,\n Omit<PanelProps, \"color\" \| \"content\" \| \"elementRef\" \| \"panelRef\"> {\n /\n Ref of the resizable item callback.\n */\n controlRef?: RefObject<null \| ResizableItemControl>\n}\n\nexport const useResizableItem = ({\n controlRef,\n ...rest\n}: UseResizableItemProps) => {\n const panelRef = usePanelRef()\n\n const getItemProps: PropGetter<PanelProps> = useCallback(\n (props = {}) => {\n const merged = mergeProps(rest, props)()\n\n return {\n ...merged,\n elementRef: mergeRefs(props.elementRef, rest.ref),\n panelRef: mergeRefs(props.panelRef, panelRef, controlRef),\n onResize: fnAll(props.onResize, rest.onResize),\n }\n },\n [panelRef, controlRef, rest],\n )\n\n return {\n panelRef,\n getItemProps,\n }\n}\n\nexport type UseResizableItemReturn = ReturnType<typeof useResizableItem>\n\nexport interface UseResizableTriggerProps\n extends HTMLProps, Omit<SeparatorProps, \"color\" \| \"content\" \| \"elementRef\"> {}\n\nexport const useResizableTrigger = ({\n disabled,\n ...rest\n}: UseResizableTriggerProps) => {\n const {\n disabled: groupDisabled,\n groupRef,\n orientation,\n } = useResizableContext()\n const trulyDisabled = disabled \|\| groupDisabled\n\n const onDoubleClick = useCallback(\n (ev: MouseEvent<HTMLDivElement>) => {\n ev.preventDefault()\n\n const layout = groupRef.current?.getLayout()\n\n if (!layout) return\n\n const count = Object.keys(layout).length\n const size = 100 / count\n const nextLayout = Object.fromEntries(\n Object.keys(layout).map((key) => [key, size]),\n )\n\n groupRef.current?.setLayout(nextLayout)\n },\n [groupRef],\n )\n\n const getTriggerProps: PropGetter<SeparatorProps> = useCallback(\n (props = {}) => {\n const merged = mergeProps(\n {\n \"aria-disabled\": ariaAttr(trulyDisabled),\n \"aria-orientation\": orientation,\n \"data-disabled\": dataAttr(trulyDisabled),\n disabled: trulyDisabled,\n tabIndex: trulyDisabled ? -1 : 0,\n },\n props,\n rest,\n { onDoubleClick },\n )()\n\n return {\n ...merged,\n elementRef: mergeRefs(props.elementRef, rest.ref),\n }\n },\n [orientation, trulyDisabled, rest, onDoubleClick],\n )\n\n const getIconProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-icon\": \"\",\n ...props,\n }),\n [],\n )\n\n return {\n getIconProps,\n getTriggerProps,\n }\n}\n\nexport type UseResizableTriggerReturn = ReturnType<typeof useResizableTrigger>\n"],"mappings":";;;;;;;;;AA6BA,MAAM,CAAC,kBAAkB,uBAAuBA,gBAAAA,cAC9C,EACE,MAAM,mBACR,CACF;AAkBA,MAAa,gBAAgB,EAC3B,YACA,UACA,cAAc,cACd,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,YAAA,GAAWC,uBAAAA,YAAAA,CAAY;CAuB7B,OAAO;EACL;EACA;EACA;EACA,eAAA,GAzB2CC,MAAAA,YAAAA,EAC1C,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHaC,cAAAA,WAAW;KAAE;KAAU;IAAY,GAAG,MAAM,KAAK,CAAC,CAGvD;IACR,OAAO;KACL,QAAQ,KAAA;KACR,OAAO,KAAA;KACP,GAAG,KAAK;KACR,GAAG,MAAM;IACX;IACA,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAUA,YAAAA,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,iBAAA,GAAA,oBAAA,cAAgB,MAAA,CAAM,MAAM,gBAAgB,KAAK,cAAc;IAC/D,kBAAA,GAAA,oBAAA,cAAiB,MAAA,CAAM,MAAM,iBAAiB,KAAK,eAAe;GACpE;EACF,GACA;GAAC;GAAU;GAAa;GAAU;GAAY;EAAI,CAOvC;CACb;AACF;AAcA,MAAa,oBAAoB,EAC/B,YACA,GAAG,WACwB;CAC3B,MAAM,YAAA,GAAWC,uBAAAA,YAAAA,CAAY;CAgB7B,OAAO;EACL;EACA,eAAA,GAhB2CH,MAAAA,YAAAA,EAC1C,QAAQ,CAAC,MAAM;GAGd,OAAO;IACL,GAHaC,cAAAA,WAAW,MAAM,KAAK,CAAC,CAG5B;IACR,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,GAAG;IAChD,UAAUA,YAAAA,UAAU,MAAM,UAAU,UAAU,UAAU;IACxD,WAAA,GAAA,oBAAA,cAAU,MAAA,CAAM,MAAM,UAAU,KAAK,QAAQ;GAC/C;EACF,GACA;GAAC;GAAU;GAAY;EAAI,CAKhB;CACb;AACF;AAOA,MAAa,uBAAuB,EAClC,UACA,GAAG,WAC2B;CAC9B,MAAM,EACJ,UAAU,eACV,UACA,gBACE,oBAAoB;CACxB,MAAM,gBAAgB,YAAY;CAElC,MAAM,iBAAA,GAAgBF,MAAAA,YAAAA,EACnB,OAAmC;EAClC,GAAG,eAAe;EAElB,MAAM,SAAS,SAAS,SAAS,UAAU;EAE3C,IAAI,CAAC,QAAQ;EAGb,MAAM,OAAO,MADC,OAAO,KAAK,MAAM,CAAC,CAAC;EAElC,MAAM,aAAa,OAAO,YACxB,OAAO,KAAK,MAAM,CAAC,CAAC,KAAK,QAAQ,CAAC,KAAK,IAAI,CAAC,CAC9C;EAEA,SAAS,SAAS,UAAU,UAAU;CACxC,GACA,CAAC,QAAQ,CACX;CAEA,MAAM,mBAAA,GAA8CA,MAAAA,YAAAA,EACjD,QAAQ,CAAC,MAAM;EAcd,OAAO;GACL,GAdaC,cAAAA,WACb;IACE,kBAAA,GAAA,oBAAA,cAAiB,SAAA,CAAS,aAAa;IACvC,oBAAoB;IACpB,kBAAA,GAAA,oBAAA,cAAiB,SAAA,CAAS,aAAa;IACvC,UAAU;IACV,UAAU,gBAAgB,KAAK;GACjC,GACA,OACA,MACA,EAAE,cAAc,CAClB,CAAC,CAGS;GACR,YAAYC,YAAAA,UAAU,MAAM,YAAY,KAAK,GAAG;EAClD;CACF,GACA;EAAC;EAAa;EAAe;EAAM;CAAa,CAClD;CAUA,OAAO;EACL,eAAA,GAT+BF,MAAAA,YAAAA,EAC9B,QAAQ,CAAC,OAAO;GACf,aAAa;GACb,GAAG;EACL,IACA,CAAC,CAIU;EACX;CACF;AACF"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ripple.cjs","names":["createComponent","rippleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n extends HTMLMotionProps<\"span\">, ThemeProps<RippleStyle> {\n /*\n The ripples to use.\n /\n ripples: RippleOptions[]\n /\n The callback invoked when a ripple is cleared.\n /\n onClear: (key: Key) => void\n /\n If `true`, disable ripple effects when pressing a element.\n \n @default false\n /\n disabled?: boolean\n}\n\nconst {\n PropsContext: RipplePropsContext,\n usePropsContext: useRipplePropsContext,\n withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/\n `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n \n @see https://yamada-ui.com/docs/components/ripple\n /\nexport const Ripple = withContext<\"span\", RippleProps>(\n ({\n style,\n color = \"currentColor\",\n disabled,\n ripples,\n onAnimationComplete,\n onClear,\n ...rest\n }) => {\n if (disabled) return null\n\n return (\n <>\n {ripples.map(({ key, size, x, y }) => {\n const duration = clamp(0.01 size, 0.2, size > 100 ? 0.75 : 0.5)\n\n return (\n <AnimatePresence key={key} mode=\"popLayout\">\n <motion.span\n style={{\n height: `${size}px`,\n left: x,\n pointerEvents: \"none\",\n position: \"absolute\",\n top: y,\n transformOrigin: \"center\",\n width: `${size}px`,\n ...style,\n }}\n animate={{ opacity: 0, transform: \"scale(2)\" }}\n bgColor={color}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n transition={{ duration }}\n {...rest}\n onAnimationComplete={handlerAll(onAnimationComplete, () =>\n onClear(key),\n )}\n />\n </AnimatePresence>\n )\n })}\n </>\n )\n },\n)()\n"],"mappings":";;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAoBpC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yBAAAA,gBAA0C,UAAUC,qBAAAA,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;CACJ,IAAI,UAAU,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,EAAG;EAEhE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;GAA2B,MAAK;GAC9B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;IACE,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;IACL;IACA,SAAS;KAAE,SAAS;KAAG,WAAW;IAAW;IAC7C,SAAS;IACT,MAAM,EAAE,SAAS,EAAE;IACnB,SAAS;KAAE,SAAS;KAAM,WAAW;IAAW;IAChD,YAAY,EAAE,SAAS;IACvB,GAAI;IACJ,sBAAA,GAAA,oBAAA,~~cAAA~~,WAAA,~~CAAgC~~,2BAC9B,QAAQ,GAAG,CACb;GACD,CAAA;EACc,GAtBK,GAsBL;CAErB,CAAC,EACD,CAAA;AAEN,CACF,CAAC,CAAC"}
1	+ {"version":3,"file":"ripple.cjs","names":["createComponent","rippleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/ripple/ripple.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Key } from \"react\"\nimport type { ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RippleStyle } from \"./ripple.style\"\nimport type { RippleOptions } from \"./use-ripple\"\nimport { AnimatePresence } from \"motion/react\"\nimport { createComponent } from \"../../core\"\nimport { handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rippleStyle } from \"./ripple.style\"\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max)\n\nexport interface RippleProps\n extends HTMLMotionProps<\"span\">, ThemeProps<RippleStyle> {\n /*\n The ripples to use.\n /\n ripples: RippleOptions[]\n /\n The callback invoked when a ripple is cleared.\n /\n onClear: (key: Key) => void\n /\n If `true`, disable ripple effects when pressing a element.\n \n @default false\n /\n disabled?: boolean\n}\n\nconst {\n PropsContext: RipplePropsContext,\n usePropsContext: useRipplePropsContext,\n withContext,\n} = createComponent<RippleProps, RippleStyle>(\"ripple\", rippleStyle)\n\nexport { RipplePropsContext, useRipplePropsContext }\n\n/\n `Ripple` is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.\n \n @see https://yamada-ui.com/docs/components/ripple\n /\nexport const Ripple = withContext<\"span\", RippleProps>(\n ({\n style,\n color = \"currentColor\",\n disabled,\n ripples,\n onAnimationComplete,\n onClear,\n ...rest\n }) => {\n if (disabled) return null\n\n return (\n <>\n {ripples.map(({ key, size, x, y }) => {\n const duration = clamp(0.01 size, 0.2, size > 100 ? 0.75 : 0.5)\n\n return (\n <AnimatePresence key={key} mode=\"popLayout\">\n <motion.span\n style={{\n height: `${size}px`,\n left: x,\n pointerEvents: \"none\",\n position: \"absolute\",\n top: y,\n transformOrigin: \"center\",\n width: `${size}px`,\n ...style,\n }}\n animate={{ opacity: 0, transform: \"scale(2)\" }}\n bgColor={color}\n exit={{ opacity: 0 }}\n initial={{ opacity: 0.35, transform: \"scale(0)\" }}\n transition={{ duration }}\n {...rest}\n onAnimationComplete={handlerAll(onAnimationComplete, () =>\n onClear(key),\n )}\n />\n </AnimatePresence>\n )\n })}\n </>\n )\n },\n)()\n"],"mappings":";;;;;;;;AAaA,MAAM,SAAS,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAoBpC,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yBAAAA,gBAA0C,UAAUC,qBAAAA,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,OACA,QAAQ,gBACR,UACA,SACA,qBACA,SACA,GAAG,WACC;CACJ,IAAI,UAAU,OAAO;CAErB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAA,kBAAA,UAAA,EAAA,UACG,QAAQ,KAAK,EAAE,KAAK,MAAM,GAAG,QAAQ;EACpC,MAAM,WAAW,MAAM,MAAO,MAAM,IAAK,OAAO,MAAM,MAAO,EAAG;EAEhE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;GAA2B,MAAK;GAC9B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;IACE,OAAO;KACL,QAAQ,GAAG,KAAK;KAChB,MAAM;KACN,eAAe;KACf,UAAU;KACV,KAAK;KACL,iBAAiB;KACjB,OAAO,GAAG,KAAK;KACf,GAAG;IACL;IACA,SAAS;KAAE,SAAS;KAAG,WAAW;IAAW;IAC7C,SAAS;IACT,MAAM,EAAE,SAAS,EAAE;IACnB,SAAS;KAAE,SAAS;KAAM,WAAW;IAAW;IAChD,YAAY,EAAE,SAAS;IACvB,GAAI;IACJ,sBAAA,GAAA,oBAAA,cAAqB,WAAA,CAAW,2BAC9B,QAAQ,GAAG,CACb;GACD,CAAA;EACc,GAtBK,GAsBL;CAErB,CAAC,EACD,CAAA;AAEN,CACF,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 let react = require("react");
 //#region src/components/ripple/use-ripple.ts

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-ripple.cjs","names":[],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n key: Key\n size: number\n x: number\n y: number\n}\n\nexport interface UseRippleProps<Y = HTMLElement> {\n disabled?: boolean\n onClick?: MouseEventHandler<Y>\n}\n\nexport const useRipple = <Y = HTMLElement>({\n disabled,\n ...rest\n}: UseRippleProps<Y> = {}) => {\n const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n const onClick: MouseEventHandler<Y> = useCallback(\n (ev) => {\n if (disabled) return\n\n const trigger = ev.currentTarget as unknown as Element\n\n const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n const rect = trigger.getBoundingClientRect()\n\n setRipples((prev) => [\n ...prev,\n {\n key: uuid(),\n size,\n x: ev.clientX - rect.x - size / 2,\n y: ev.clientY - rect.y - size / 2,\n },\n ])\n },\n [disabled],\n )\n\n const onClear = useCallback((key: Key) => {\n setRipples((prev) => prev.filter((item) => item.key !== key))\n }, [])\n\n return {\n ripples,\n onClear,\n onClick: handlerAll(onClick, rest.onClick),\n }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":"~~;;;;~~AAkBA,MAAa,aAA8B,EACzC,UACA,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,CAAC,SAAS,eAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAAwC~~,CAAC,CAAC;CAE1D,MAAM,WAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,OAAO;EACN,IAAI,UAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;EAC/D,MAAM,OAAO,QAAQ,sBAAsB;EAE3C,YAAY,SAAS,CACnB,GAAG,MACH;GACE,MAAA,GAAA,oBAAA,~~cAAA~~,KAAA,~~CAAU~~;GACV;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;EAClC,CACF,CAAC;CACH,GACA,CAAC,QAAQ,CACX;CAMA,OAAO;EACL;EACA,UAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EAN2B~~,QAAa;GACxC,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,GAAG,CAAC;EAC9D,GAAG,CAAC,CAII;EACN,UAAA,GAAA,oBAAA,~~cAAA~~,WAAA,~~CAAoB~~,SAAS,KAAK,OAAO;CAC3C;AACF"}
1	+ {"version":3,"file":"use-ripple.cjs","names":["useState","useCallback"],"sources":["../../../../src/components/ripple/use-ripple.ts"],"sourcesContent":["\"use client\"\n\nimport type { Key, MouseEventHandler } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport { handlerAll, uuid } from \"../../utils\"\n\nexport interface RippleOptions {\n key: Key\n size: number\n x: number\n y: number\n}\n\nexport interface UseRippleProps<Y = HTMLElement> {\n disabled?: boolean\n onClick?: MouseEventHandler<Y>\n}\n\nexport const useRipple = <Y = HTMLElement>({\n disabled,\n ...rest\n}: UseRippleProps<Y> = {}) => {\n const [ripples, setRipples] = useState<RippleOptions[]>([])\n\n const onClick: MouseEventHandler<Y> = useCallback(\n (ev) => {\n if (disabled) return\n\n const trigger = ev.currentTarget as unknown as Element\n\n const size = Math.max(trigger.clientWidth, trigger.clientHeight)\n const rect = trigger.getBoundingClientRect()\n\n setRipples((prev) => [\n ...prev,\n {\n key: uuid(),\n size,\n x: ev.clientX - rect.x - size / 2,\n y: ev.clientY - rect.y - size / 2,\n },\n ])\n },\n [disabled],\n )\n\n const onClear = useCallback((key: Key) => {\n setRipples((prev) => prev.filter((item) => item.key !== key))\n }, [])\n\n return {\n ripples,\n onClear,\n onClick: handlerAll(onClick, rest.onClick),\n }\n}\n\nexport type UseRippleReturn = ReturnType<typeof useRipple>\n"],"mappings":";;;;;AAkBA,MAAa,aAA8B,EACzC,UACA,GAAG,SACkB,CAAC,MAAM;CAC5B,MAAM,CAAC,SAAS,eAAA,GAAcA,MAAAA,SAAAA,CAA0B,CAAC,CAAC;CAE1D,MAAM,WAAA,GAAgCC,MAAAA,YAAAA,EACnC,OAAO;EACN,IAAI,UAAU;EAEd,MAAM,UAAU,GAAG;EAEnB,MAAM,OAAO,KAAK,IAAI,QAAQ,aAAa,QAAQ,YAAY;EAC/D,MAAM,OAAO,QAAQ,sBAAsB;EAE3C,YAAY,SAAS,CACnB,GAAG,MACH;GACE,MAAA,GAAA,oBAAA,cAAK,KAAA,CAAK;GACV;GACA,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;GAChC,GAAG,GAAG,UAAU,KAAK,IAAI,OAAO;EAClC,CACF,CAAC;CACH,GACA,CAAC,QAAQ,CACX;CAMA,OAAO;EACL;EACA,UAAA,GANcA,MAAAA,YAAAA,EAAa,QAAa;GACxC,YAAY,SAAS,KAAK,QAAQ,SAAS,KAAK,QAAQ,GAAG,CAAC;EAC9D,GAAG,CAAC,CAII;EACN,UAAA,GAAA,oBAAA,cAAS,WAAA,CAAW,SAAS,KAAK,OAAO;CAC3C;AACF"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_utils_index = require("../../utils/index.cjs");
 const require_use_inject_vars = require("../../core/css/use-inject-vars.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"rotate.cjs","names":["createComponent","rotateStyle","useControllableState","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n createComponent,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n extends\n Omit<HTMLMotionProps<\"button\">, \"onChange\" \| \"rotate\">,\n ThemeProps<RotateStyle> {\n /*\n Passing React elements to \"from\" is required.\n /\n from: ReactNode\n /\n Passing React elements to \"to\" is required.\n /\n to: ReactNode\n /\n You can set the initial state.\n \n @default 'from'\n /\n defaultValue?: KeyframeIdent\n /\n The animation delay.\n \n @default 0\n /\n delay?: number\n /\n If `true`, the component is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The animation duration.\n \n @default 0.4\n /\n duration?: number\n /\n If `true`, the component is readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The animation rotation.\n \n @default 45\n /\n rotate?: number\n /\n Use this when you want to control the animation from outside the component.\n /\n value?: KeyframeIdent\n /\n This is a callback function that is called when the animation state changes.\n /\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: RotatePropsContext,\n usePropsContext: useRotatePropsContext,\n withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/\n `Rotate` is an animation component that alternately rotates two elements as they switch.\n \n @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.4,\n from,\n readOnly,\n rotate = 45,\n to,\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const opacity = \"var(--opacity)\"\n const animate = useAnimation()\n const [value, setValue] = useControllableState<KeyframeIdent>({\n defaultValue,\n value: valueProp,\n onChange,\n })\n\n const onClick = useCallback(async () => {\n if (readOnly) return\n\n await animate.start({\n opacity: 0,\n rotate: `${rotate}deg`,\n transition: { delay, duration },\n })\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n await animate.start({\n opacity: \"var(--opacity)\",\n rotate: \"0deg\",\n transition: { duration },\n })\n }, [readOnly, animate, rotate, duration, delay, setValue])\n\n return (\n <motion.button\n type=\"button\"\n data-disabled={dataAttr(disabled)}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n animate={animate}\n custom={{ rotate }}\n disabled={disabled}\n initial={{ opacity, rotate: \"0deg\" }}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n {value === \"from\" ? from : to}\n </motion.button>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":"~~;;;;;;;;;;;~~AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yBAAAA,gBAA0C,UAAUC,qBAAAA,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,WAAA,~~GAAA~~,~~aAAA~~,~~aAAA~~,~~CAAuB~~;CAC7B,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAoC;EAC5D;EACA,OAAO;EACP;CACF,CAAC;CAED,MAAM,WAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~CAAsB~~,YAAY;EACtC,IAAI,UAAU;EAEd,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;GAAS;EAChC,CAAC;EAED,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;EAEpD,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,SAAS;EACzB,CAAC;CACH,GAAG;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;CAAQ,CAAC;CAEzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,QAAR;EACE,MAAK;EACL,kBAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAAwB~~,QAAQ;EAChC,kBAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAAwB~~,QAAQ;EAChC,cAAY;EACH;EACT,QAAQ,EAAE,OAAO;EACP;EACV,SAAS;GAAE;GAAS,QAAQ;EAAO;EACnC,UAAA,GAAA,oBAAA,~~cAAA~~,WAAA,~~CAAoB~~,aAAa,OAAO;EACxC,GAAI;EAEH,UAAA,UAAU,SAAS,OAAO;CACd,CAAA;AAEnB,CACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,MAAMC,wBAAAA,qBAAqB,MAAM,KAAK,EAAE,SAAS,UAAU,CAAC;CAGlE,OAAO;EAAE,GAFIC,wBAAAA,uBAAuB,OAAO,EAAE,SAAS,UAAU,CAEjD;EAAG;EAAK,SAAS;CAAY;AAC9C,CAAC"}
1	+ {"version":3,"file":"rotate.cjs","names":["createComponent","rotateStyle","useAnimation","useControllableState","useCallback","motion","useInjectVarsIntoCss","useInjectVarsIntoProps"],"sources":["../../../../src/components/rotate/rotate.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { RotateStyle } from \"./rotate.style\"\nimport { useAnimation } from \"motion/react\"\nimport { useCallback } from \"react\"\nimport {\n createComponent,\n useInjectVarsIntoCss,\n useInjectVarsIntoProps,\n} from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { rotateStyle } from \"./rotate.style\"\n\nexport interface RotateProps\n extends\n Omit<HTMLMotionProps<\"button\">, \"onChange\" \| \"rotate\">,\n ThemeProps<RotateStyle> {\n /*\n Passing React elements to \"from\" is required.\n /\n from: ReactNode\n /\n Passing React elements to \"to\" is required.\n /\n to: ReactNode\n /\n You can set the initial state.\n \n @default 'from'\n /\n defaultValue?: KeyframeIdent\n /\n The animation delay.\n \n @default 0\n /\n delay?: number\n /\n If `true`, the component is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n The animation duration.\n \n @default 0.4\n /\n duration?: number\n /\n If `true`, the component is readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The animation rotation.\n \n @default 45\n /\n rotate?: number\n /\n Use this when you want to control the animation from outside the component.\n /\n value?: KeyframeIdent\n /\n This is a callback function that is called when the animation state changes.\n /\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: RotatePropsContext,\n usePropsContext: useRotatePropsContext,\n withContext,\n} = createComponent<RotateProps, RotateStyle>(\"rotate\", rotateStyle)\n\nexport { RotatePropsContext, useRotatePropsContext }\n\n/\n `Rotate` is an animation component that alternately rotates two elements as they switch.\n \n @see https://yamada-ui.com/docs/components/rotate\n */\nexport const Rotate = withContext<\"button\", RotateProps>(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.4,\n from,\n readOnly,\n rotate = 45,\n to,\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const opacity = \"var(--opacity)\"\n const animate = useAnimation()\n const [value, setValue] = useControllableState<KeyframeIdent>({\n defaultValue,\n value: valueProp,\n onChange,\n })\n\n const onClick = useCallback(async () => {\n if (readOnly) return\n\n await animate.start({\n opacity: 0,\n rotate: `${rotate}deg`,\n transition: { delay, duration },\n })\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n\n await animate.start({\n opacity: \"var(--opacity)\",\n rotate: \"0deg\",\n transition: { duration },\n })\n }, [readOnly, animate, rotate, duration, delay, setValue])\n\n return (\n <motion.button\n type=\"button\"\n data-disabled={dataAttr(disabled)}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n animate={animate}\n custom={{ rotate }}\n disabled={disabled}\n initial={{ opacity, rotate: \"0deg\" }}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n {value === \"from\" ? from : to}\n </motion.button>\n )\n },\n)(undefined, (props) => {\n const css = useInjectVarsIntoCss(props.css, { opacity: \"opacity\" })\n const rest = useInjectVarsIntoProps(props, { opacity: \"opacity\" })\n\n return { ...rest, css, opacity: \"{opacity}\" }\n})\n"],"mappings":";;;;;;;;;;;;AA4EA,MAAM,EACJ,cAAc,oBACd,iBAAiB,uBACjB,gBACEA,yBAAAA,gBAA0C,UAAUC,qBAAAA,WAAW;;;;;;AASnE,MAAa,SAAS,aACnB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,UACA,SAAS,IACT,IACA,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,UAAU;CAChB,MAAM,WAAA,GAAUC,aAAAA,aAAAA,CAAa;CAC7B,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAoC;EAC5D;EACA,OAAO;EACP;CACF,CAAC;CAED,MAAM,WAAA,GAAUC,MAAAA,YAAAA,CAAY,YAAY;EACtC,IAAI,UAAU;EAEd,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ,GAAG,OAAO;GAClB,YAAY;IAAE;IAAO;GAAS;EAChC,CAAC;EAED,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;EAEpD,MAAM,QAAQ,MAAM;GAClB,SAAS;GACT,QAAQ;GACR,YAAY,EAAE,SAAS;EACzB,CAAC;CACH,GAAG;EAAC;EAAU;EAAS;EAAQ;EAAU;EAAO;CAAQ,CAAC;CAEzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,QAAR;EACE,MAAK;EACL,kBAAA,GAAA,oBAAA,cAAe,SAAA,CAAS,QAAQ;EAChC,kBAAA,GAAA,oBAAA,cAAe,SAAA,CAAS,QAAQ;EAChC,cAAY;EACH;EACT,QAAQ,EAAE,OAAO;EACP;EACV,SAAS;GAAE;GAAS,QAAQ;EAAO;EACnC,UAAA,GAAA,oBAAA,cAAS,WAAA,CAAW,aAAa,OAAO;EACxC,GAAI;EAEH,UAAA,UAAU,SAAS,OAAO;CACd,CAAA;AAEnB,CACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,MAAMC,wBAAAA,qBAAqB,MAAM,KAAK,EAAE,SAAS,UAAU,CAAC;CAGlE,OAAO;EAAE,GAFIC,wBAAAA,uBAAuB,OAAO,EAAE,SAAS,UAAU,CAEjD;EAAG;EAAK,SAAS;CAAY;AAC9C,CAAC"}

package/dist/cjs/components/saturation-slider/saturation-slider.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_factory = require("../../core/system/factory.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_saturation_slider_style = require("./saturation-slider.style.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"saturation-slider.cjs","names":["createSlotComponent","saturationSliderStyle","useSaturationSlider","styled"],"sources":["../../../../src/components/saturation-slider/saturation-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SaturationSliderStyle } from \"./saturation-slider.style\"\nimport type {\n UseSaturationSliderProps,\n UseSaturationSliderReturn,\n} from \"./use-saturation-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { saturationSliderStyle } from \"./saturation-slider.style\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ninterface ComponentContext extends Pick<\n UseSaturationSliderReturn,\n \"getThumbProps\" \| \"getTrackProps\"\n> {}\n\nexport interface SaturationSliderRootProps\n extends\n Merge<HTMLStyledProps, UseSaturationSliderProps>,\n ThemeProps<SaturationSliderStyle> {\n /*\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the thumb element.\n /\n thumbProps?: SaturationSliderThumbProps\n /\n Props for the track element.\n /\n trackProps?: SaturationSliderTrackProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SaturationSliderPropsContext,\n useComponentContext,\n usePropsContext: useSaturationSliderPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n SaturationSliderRootProps,\n SaturationSliderStyle,\n ComponentContext\n>(\"saturation-slider\", saturationSliderStyle)\n\nexport { SaturationSliderPropsContext, useSaturationSliderPropsContext }\n\n/\n `SaturationSlider` is a component used to allow the user to select a color saturation.\n \n @see https://yamada-ui.com/docs/components/saturation-slider\n */\nexport const SaturationSliderRoot = withProvider<\n \"input\",\n SaturationSliderRootProps\n>(({ children, inputProps, thumbProps, trackProps, ...rest }) => {\n const { getInputProps, getRootProps, getThumbProps, getTrackProps } =\n useSaturationSlider(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <SaturationSliderTrack {...trackProps}>\n <SaturationSliderThumb {...thumbProps} />\n </SaturationSliderTrack>\n )\n }, [children, thumbProps, trackProps])\n const context = useMemo(\n () => ({ getThumbProps, getTrackProps }),\n [getThumbProps, getTrackProps],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>\n <styled.input {...getInputProps(inputProps)} />\n {computedChildren}\n </styled.div>\n </ComponentContext>\n )\n}, \"root\")()\n\nexport interface SaturationSliderTrackProps extends HTMLStyledProps {}\n\nexport const SaturationSliderTrack = withContext<\n \"div\",\n SaturationSliderTrackProps\n>(\"div\", \"track\")(undefined, (props) => {\n const { getTrackProps } = useComponentContext()\n\n return getTrackProps(props)\n})\n\nexport interface SaturationSliderThumbProps extends HTMLStyledProps {}\n\nexport const SaturationSliderThumb = withContext<\n \"div\",\n SaturationSliderThumbProps\n>(\"div\", \"thumb\")(undefined, (props) => {\n const { getThumbProps } = useComponentContext()\n\n return getThumbProps(props)\n})\n"],"mappings":"~~;;;;;;;;~~AAqCA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClDC,8BAAAA,oBAAoB,IAAI;CAC1B,MAAM,oBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~OAAiC~~;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;GAAuB,GAAI;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD,EAAuB,GAAI,WAAa,CAAA;EACnB,CAAA;CAE3B,GAAG;EAAC;EAAU;EAAY;CAAU,CAAC;CACrC,MAAM,WAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~QACG~~;EAAE;EAAe;CAAc,IACtC,CAAC,eAAe,aAAa,CAC/B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;GAAY,GAAI,aAAa;GAA7B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA,GAC7C,gBACS;;CACI,CAAA;AAEtB,GAAG,MAAM,CAAC,CAAC;AAIX,MAAa,wBAAwB,YAGnC,OAAO,OAAO,CAAC,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC;AAID,MAAa,wBAAwB,YAGnC,OAAO,OAAO,CAAC,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC"}
1	+ {"version":3,"file":"saturation-slider.cjs","names":["createSlotComponent","saturationSliderStyle","useSaturationSlider","useMemo","styled"],"sources":["../../../../src/components/saturation-slider/saturation-slider.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SaturationSliderStyle } from \"./saturation-slider.style\"\nimport type {\n UseSaturationSliderProps,\n UseSaturationSliderReturn,\n} from \"./use-saturation-slider\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { saturationSliderStyle } from \"./saturation-slider.style\"\nimport { useSaturationSlider } from \"./use-saturation-slider\"\n\ninterface ComponentContext extends Pick<\n UseSaturationSliderReturn,\n \"getThumbProps\" \| \"getTrackProps\"\n> {}\n\nexport interface SaturationSliderRootProps\n extends\n Merge<HTMLStyledProps, UseSaturationSliderProps>,\n ThemeProps<SaturationSliderStyle> {\n /*\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the thumb element.\n /\n thumbProps?: SaturationSliderThumbProps\n /\n Props for the track element.\n /\n trackProps?: SaturationSliderTrackProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SaturationSliderPropsContext,\n useComponentContext,\n usePropsContext: useSaturationSliderPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n SaturationSliderRootProps,\n SaturationSliderStyle,\n ComponentContext\n>(\"saturation-slider\", saturationSliderStyle)\n\nexport { SaturationSliderPropsContext, useSaturationSliderPropsContext }\n\n/\n `SaturationSlider` is a component used to allow the user to select a color saturation.\n \n @see https://yamada-ui.com/docs/components/saturation-slider\n */\nexport const SaturationSliderRoot = withProvider<\n \"input\",\n SaturationSliderRootProps\n>(({ children, inputProps, thumbProps, trackProps, ...rest }) => {\n const { getInputProps, getRootProps, getThumbProps, getTrackProps } =\n useSaturationSlider(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return (\n <SaturationSliderTrack {...trackProps}>\n <SaturationSliderThumb {...thumbProps} />\n </SaturationSliderTrack>\n )\n }, [children, thumbProps, trackProps])\n const context = useMemo(\n () => ({ getThumbProps, getTrackProps }),\n [getThumbProps, getTrackProps],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.div {...getRootProps()}>\n <styled.input {...getInputProps(inputProps)} />\n {computedChildren}\n </styled.div>\n </ComponentContext>\n )\n}, \"root\")()\n\nexport interface SaturationSliderTrackProps extends HTMLStyledProps {}\n\nexport const SaturationSliderTrack = withContext<\n \"div\",\n SaturationSliderTrackProps\n>(\"div\", \"track\")(undefined, (props) => {\n const { getTrackProps } = useComponentContext()\n\n return getTrackProps(props)\n})\n\nexport interface SaturationSliderThumbProps extends HTMLStyledProps {}\n\nexport const SaturationSliderThumb = withContext<\n \"div\",\n SaturationSliderThumbProps\n>(\"div\", \"thumb\")(undefined, (props) => {\n const { getThumbProps } = useComponentContext()\n\n return getThumbProps(props)\n})\n"],"mappings":";;;;;;;;;AAqCA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cAGjC,EAAE,UAAU,YAAY,YAAY,YAAY,GAAG,WAAW;CAC/D,MAAM,EAAE,eAAe,cAAc,eAAe,kBAClDC,8BAAAA,oBAAoB,IAAI;CAC1B,MAAM,oBAAA,GAAmBC,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;GAAuB,GAAI;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD,EAAuB,GAAI,WAAa,CAAA;EACnB,CAAA;CAE3B,GAAG;EAAC;EAAU;EAAY;CAAU,CAAC;CACrC,MAAM,WAAA,GAAUA,MAAAA,QAAAA,QACP;EAAE;EAAe;CAAc,IACtC,CAAC,eAAe,aAAa,CAC/B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;GAAY,GAAI,aAAa;GAA7B,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,UAAU,EAAI,CAAA,GAC7C,gBACS;;CACI,CAAA;AAEtB,GAAG,MAAM,CAAC,CAAC;AAIX,MAAa,wBAAwB,YAGnC,OAAO,OAAO,CAAC,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC;AAID,MAAa,wBAAwB,YAGnC,OAAO,OAAO,CAAC,CAAC,KAAA,IAAY,UAAU;CACtC,MAAM,EAAE,kBAAkB,oBAAoB;CAE9C,OAAO,cAAc,KAAK;AAC5B,CAAC"}

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

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_ref = require("../../utils/ref.cjs");
 const require_utils_index = require("../../utils/index.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-saturation-slider.cjs","names":["useFieldProps","useI18n","useControllableState","usePanEvent","mergeProps","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } 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 handlerAll,\n mergeRefs,\n roundNumberToStep,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n return [\n clampNumber(value[0], 0, 360),\n clampNumber(value[1], 0, 1),\n clampNumber(value[2], 0, 1),\n ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The initial value of the saturation slider.\n \n @default [0, 0, 1]\n /\n defaultValue?: [number, number, number]\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The step in which increments or decrements have to be made.\n \n @default 0.01\n /\n step?: number\n /\n The value of the saturation slider.\n /\n value?: [number, number, number]\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, number, number]) => string \| undefined\n /\n Function called whenever the saturation slider value changes.\n /\n onChange?: (value: [number, number, number]) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: [number, number, number]) => void\n /\n Function called when the user starts selecting a new value.\n /\n onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n defaultValue = [0, 0, 1],\n disabled,\n getAriaValueText,\n readOnly,\n required,\n step = 0.01,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const { t } = useI18n(\"saturationSlider\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [h, s, v] = clampValue(value)\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 onChangeEnd?.(panValue)\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n setValue(panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeStart?.(value)\n setValue(panValue)\n },\n })\n\n const onChange = useCallback(\n ([h, s, v]: [number, number, number]) => {\n if (!interactive) return\n\n s = clampNumber(s, 0, 1)\n v = clampNumber(v, 0, 1)\n\n setValue([h, s, v])\n },\n [interactive, setValue],\n )\n\n const getPanValue = useCallback(\n (\n { x, y }: Point,\n { bottom, height, left, width }: DOMRect,\n ): [number, number, number] => {\n const diff = { x: x - left, y: bottom - y }\n const percent = { x: diff.x / width, y: diff.y / height }\n const clamp = {\n x: clampNumber(percent.x, 0, 1),\n y: clampNumber(percent.y, 0, 1),\n }\n const s = roundNumberToStep(clamp.x, 0, step)\n const v = roundNumberToStep(clamp.y, 0, step)\n\n return [h, parseFloat(s), parseFloat(v)]\n },\n [h, step],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => onChange([h, s, v - step]),\n ArrowLeft: () => onChange([h, s - step, v]),\n ArrowRight: () => onChange([h, s + step, v]),\n ArrowUp: () => onChange([h, s, v + step]),\n })\n },\n [h, onChange, s, step, v],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const merged = mergeProps(dataProps, rest, props)()\n\n return {\n ...merged,\n style: {\n ...rest.style,\n ...props.style,\n \"--x\": `${Math.abs(s 100)}%`,\n \"--y\": `${Math.abs(100 - v * 100)}%`,\n backgroundColor: `hsl(${h}, 100%, 50%)`,\n backgroundImage:\n \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n },\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [dataProps, eventProps, h, rest, s, v],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: [h, s, v].toString(),\n ...props,\n ref: mergeRefs(props.ref, ref),\n }),\n [\n ariaProps,\n dataProps,\n disabled,\n h,\n id,\n name,\n readOnly,\n ref,\n required,\n s,\n v,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n [dataProps, getPanEventProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Saturation and brightness thumb\"),\n \"aria-roledescription\": \"2D slider\",\n \"aria-valuemax\": 100,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": s * 100,\n \"aria-valuetext\":\n ariaValueText ??\n getAriaValueText?.(value) ??\n t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n brightness: v * 100,\n saturation: s * 100,\n }),\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n interactive,\n onKeyDown,\n s,\n t,\n v,\n value,\n ],\n )\n\n return {\n setValue,\n value,\n getInputProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-saturation-slider.cjs","names":["useFieldProps","useI18n","useControllableState","usePanEvent","useCallback","mergeProps","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/saturation-slider/use-saturation-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback } 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 handlerAll,\n mergeRefs,\n roundNumberToStep,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { runKeyAction } from \"../../utils/dom\"\nimport { useFieldProps } from \"../field\"\n\nfunction clampValue(value: [number, number, number]) {\n return [\n clampNumber(value[0], 0, 360),\n clampNumber(value[1], 0, 1),\n clampNumber(value[2], 0, 1),\n ] as [number, number, number]\n}\n\nexport interface UseSaturationSliderProps\n extends\n Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n The initial value of the saturation slider.\n \n @default [0, 0, 1]\n /\n defaultValue?: [number, number, number]\n /\n The base `id` to use for the slider.\n /\n id?: string\n /\n The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n /\n name?: string\n /\n The step in which increments or decrements have to be made.\n \n @default 0.01\n /\n step?: number\n /\n The value of the saturation slider.\n /\n value?: [number, number, number]\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, number, number]) => string \| undefined\n /\n Function called whenever the saturation slider value changes.\n /\n onChange?: (value: [number, number, number]) => void\n /\n Function called when the user is done selecting a new value.\n /\n onChangeEnd?: (value: [number, number, number]) => void\n /\n Function called when the user starts selecting a new value.\n /\n onChangeStart?: (value: [number, number, number]) => void\n}\n\nexport const useSaturationSlider = (props: UseSaturationSliderProps = {}) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n defaultValue = [0, 0, 1],\n disabled,\n getAriaValueText,\n readOnly,\n required,\n step = 0.01,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const { t } = useI18n(\"saturationSlider\")\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const [h, s, v] = clampValue(value)\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 onChangeEnd?.(panValue)\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n setValue(panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChangeStart?.(value)\n setValue(panValue)\n },\n })\n\n const onChange = useCallback(\n ([h, s, v]: [number, number, number]) => {\n if (!interactive) return\n\n s = clampNumber(s, 0, 1)\n v = clampNumber(v, 0, 1)\n\n setValue([h, s, v])\n },\n [interactive, setValue],\n )\n\n const getPanValue = useCallback(\n (\n { x, y }: Point,\n { bottom, height, left, width }: DOMRect,\n ): [number, number, number] => {\n const diff = { x: x - left, y: bottom - y }\n const percent = { x: diff.x / width, y: diff.y / height }\n const clamp = {\n x: clampNumber(percent.x, 0, 1),\n y: clampNumber(percent.y, 0, 1),\n }\n const s = roundNumberToStep(clamp.x, 0, step)\n const v = roundNumberToStep(clamp.y, 0, step)\n\n return [h, parseFloat(s), parseFloat(v)]\n },\n [h, step],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: () => onChange([h, s, v - step]),\n ArrowLeft: () => onChange([h, s - step, v]),\n ArrowRight: () => onChange([h, s + step, v]),\n ArrowUp: () => onChange([h, s, v + step]),\n })\n },\n [h, onChange, s, step, v],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const merged = mergeProps(dataProps, rest, props)()\n\n return {\n ...merged,\n style: {\n ...rest.style,\n ...props.style,\n \"--x\": `${Math.abs(s 100)}%`,\n \"--y\": `${Math.abs(100 - v * 100)}%`,\n backgroundColor: `hsl(${h}, 100%, 50%)`,\n backgroundImage:\n \"linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, transparent)\",\n },\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n },\n [dataProps, eventProps, h, rest, s, v],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: [h, s, v].toString(),\n ...props,\n ref: mergeRefs(props.ref, ref),\n }),\n [\n ariaProps,\n dataProps,\n disabled,\n h,\n id,\n name,\n readOnly,\n ref,\n required,\n s,\n v,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => getPanEventProps({ ...dataProps, ...props }),\n [dataProps, getPanEventProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Saturation and brightness thumb\"),\n \"aria-roledescription\": \"2D slider\",\n \"aria-valuemax\": 100,\n \"aria-valuemin\": 0,\n \"aria-valuenow\": s * 100,\n \"aria-valuetext\":\n ariaValueText ??\n getAriaValueText?.(value) ??\n t(\"Saturation {saturation}%, Brightness {brightness}%\", {\n brightness: v * 100,\n saturation: s * 100,\n }),\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...props,\n \"aria-labelledby\": cx(props[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n interactive,\n onKeyDown,\n s,\n t,\n v,\n value,\n ],\n )\n\n return {\n setValue,\n value,\n getInputProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>\n"],"mappings":"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"}

package/dist/cjs/components/scroll-area/use-scroll-area.cjs CHANGED Viewed

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

package/dist/cjs/components/scroll-area/use-scroll-area.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-scroll-area.cjs","names":["mergeProps"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /*\n Delay in milliseconds before scrollbars are hidden.\n \n @default 1000\n /\n scrollHideDelay?: number\n /\n Scrollbar visibility type.\n \n @default 'hover'\n /\n type?: \"always\" \| \"hover\" \| \"never\" \| \"scroll\"\n /\n Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current \|\| !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" \|\| isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n style: { overflow: \"auto\" },\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n },\n isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n rest,\n props,\n {\n onMouseEnter,\n onMouseLeave,\n onPointerEnter: onMouseEnter,\n onPointerLeave: onMouseLeave,\n onScroll,\n },\n )(),\n [\n isNever,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n key,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":"~~;;;;;;~~AA2BA,MAAa,iBAAiB,EAC5B,IACA,OAAO,SACP,kBAAkB,KAClB,wBACA,GAAG,SACmB,CAAC,MAAM;CAC7B,MAAM,CAAC,WAAW,iBAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAAkC~~,KAAK;CACzD,MAAM,CAAC,aAAa,mBAAA,~~GAAA~~,~~MAAA~~,~~SAAA~~,~~CAAoC~~,KAAK;CAC7D,MAAM,WAAW,SAAS;CAC1B,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,CAAC,YAAY,CAAC,aAAa,CAAC;CAC7C,MAAM,YAAA,GAAA,oBAAA,~~cAAA~~,MAAA,~~CAAiB~~,MAAA,GAAA,oBAAA,~~cAAA~~,OAAA,~~CAAY~~,QAAQ;CAC3C,MAAM,QAAA,~~GAAA~~,~~MAAA~~,~~MAAA~~,~~CAAa~~;CACnB,MAAM,MAAM,GAAG,MAAM,KAAK,GAAG,UAAU,GAAG;CAE1C,MAAM,gBAAA,~~GAAA~~,~~MAAA~~,~~OAAA~~,~~CAA2B~~,KAAA,CAAS;CAC1C,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~OAAA~~,~~CAA4B~~,KAAA,CAAS;CAC3C,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~OAAA~~,~~CAAuC~~,IAAI;CACjD,MAAM,kBAAA,~~GAAA~~,~~MAAA~~,~~OAAA~~,~~CAAwB~~;EAAE,GAAG;EAAG,GAAG;CAAE,CAAC;CAE5C,eAAA,0BAA0B;EACxB,IAAI,CAAC,cAAc,WAAW,CAAC,UAAU;EAEzC,cAAc,QAAQ,aAAa,eAAe,QAAQ;EAC1D,cAAc,QAAQ,YAAY,eAAe,QAAQ;CAC3D,CAAC;CAED,MAAM,gBAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~OAAiC~~;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,aAAa,OAAO;EAEjC,aAAa,IAAI;CACnB,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,gBAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~OAAiC~~;EACrC,IAAI,SAAS,SAAS;EAEtB,aAAa,UAAU,iBACf,aAAa,KAAK,GACxB,eACF;CACF,GAAG,CAAC,iBAAiB,IAAI,CAAC;CAE1B,MAAM,YAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EACH~~,OAAgC;EAG/B,MAAM,EAAE,YAAY,GAAG,WAAW,MAFvB,GAAG;EAGd,MAAM,EAAE,GAAG,OAAO,GAAG,UAAU,eAAe;EAC9C,MAAM,UAAU,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK;EAEnE,yBAAyB;GAAE;GAAG;EAAE,CAAC;EACjC,eAAe,UAAU;GAAE;GAAG;EAAE;EAEhC,IAAI,SAAS,YAAY,SAAS;EAElC,IAAI,CAAC,aAAa,eAAe,IAAI;EAErC,aAAa,cAAc,OAAO;EAElC,cAAc,UAAU,iBAChB,eAAe,KAAK,GAC1B,eACF;CACF,GACA;EAAC;EAAa;EAAwB;EAAiB;CAAI,CAC7D;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,aAAa;GACX,IAAI,aAAa,SAAS,aAAa,aAAa,OAAO;GAC3D,IAAI,cAAc,SAAS,aAAa,cAAc,OAAO;EAC/D;CACF,GAAG,CAAC,CAAC;CAsCL,OAAO;EACL;EACA;EACA;EACA;EACA;EACA,eAAA,~~GAAA~~,~~MAAA~~,~~YAAA~~,~~EAzCC~~,QAAQ,CAAC,~~MACRA~~,cAAAA,WACE;GACE,OAAO,EAAE,UAAU,OAAO;GAC1B,gBAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAAwB~~,QAAQ;GAChC,eAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAAuB~~,SAAS;GAChC,eAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAAuB~~,OAAO;GAC9B,gBAAA,GAAA,oBAAA,~~cAAA~~,SAAA,~~CAAwB~~,WAAW;GACnC,UAAU;EACZ,GACA,WAAW;GAAE;GAAK,KAAK;GAAe,YAAY;EAAI,IAAI,CAAC,GAC3D,MACA,OACA;GACE;GACA;GACA,gBAAgB;GAChB,gBAAgB;GAChB;EACF,CACF,CAAC,CAAC,GACJ;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CASW;CACb;AACF"}
1	+ {"version":3,"file":"use-scroll-area.cjs","names":["useState","useId","useRef","useCallback","mergeProps"],"sources":["../../../../src/components/scroll-area/use-scroll-area.ts"],"sourcesContent":["\"use client\"\n\nimport type { UIEvent } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { dataAttr, isMac, useSafeLayoutEffect, vendor } from \"../../utils\"\n\nexport interface UseScrollAreaProps extends HTMLProps {\n /*\n Delay in milliseconds before scrollbars are hidden.\n \n @default 1000\n /\n scrollHideDelay?: number\n /\n Scrollbar visibility type.\n \n @default 'hover'\n /\n type?: \"always\" \| \"hover\" \| \"never\" \| \"scroll\"\n /\n Callback function for when the scroll position changes.\n */\n onScrollPositionChange?: ({ x, y }: { x: number; y: number }) => void\n}\n\nexport const useScrollArea = ({\n id,\n type = \"hover\",\n scrollHideDelay = 1000,\n onScrollPositionChange,\n ...rest\n}: UseScrollAreaProps = {}) => {\n const [isHovered, setIsHovered] = useState<boolean>(false)\n const [isScrolling, setIsScrolling] = useState<boolean>(false)\n const isAlways = type === \"always\"\n const isNever = type === \"never\"\n const isHidden = !isAlways && !isHovered && !isScrolling\n const isSafari = isMac() && vendor(/apple/i)\n const uuid = useId()\n const key = `${id ?? uuid}-${isHovered}-${isScrolling}`\n\n const hoverTimeout = useRef<any>(undefined)\n const scrollTimeout = useRef<any>(undefined)\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const scrollPosition = useRef({ x: 0, y: 0 })\n\n useSafeLayoutEffect(() => {\n if (!scrollAreaRef.current \|\| !isSafari) return\n\n scrollAreaRef.current.scrollLeft = scrollPosition.current.x\n scrollAreaRef.current.scrollTop = scrollPosition.current.y\n })\n\n const onMouseEnter = useCallback(() => {\n if (type !== \"hover\") return\n\n clearTimeout(hoverTimeout.current)\n\n setIsHovered(true)\n }, [type])\n\n const onMouseLeave = useCallback(() => {\n if (type !== \"hover\") return\n\n hoverTimeout.current = setTimeout(\n () => setIsHovered(false),\n scrollHideDelay,\n )\n }, [scrollHideDelay, type])\n\n const onScroll = useCallback(\n (ev: UIEvent<HTMLDivElement>) => {\n const el = ev.target as HTMLDivElement\n\n const { scrollLeft: x, scrollTop: y } = el\n const { x: prevX, y: prevY } = scrollPosition.current\n const isEqual = Math.abs(x - prevX) <= 5 && Math.abs(y - prevY) <= 5\n\n onScrollPositionChange?.({ x, y })\n scrollPosition.current = { x, y }\n\n if (type !== \"scroll\" \|\| isEqual) return\n\n if (!isScrolling) setIsScrolling(true)\n\n clearTimeout(scrollTimeout.current)\n\n scrollTimeout.current = setTimeout(\n () => setIsScrolling(false),\n scrollHideDelay,\n )\n },\n [isScrolling, onScrollPositionChange, scrollHideDelay, type],\n )\n\n useEffect(() => {\n return () => {\n if (hoverTimeout.current) clearTimeout(hoverTimeout.current)\n if (scrollTimeout.current) clearTimeout(scrollTimeout.current)\n }\n }, [])\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) =>\n mergeProps(\n {\n style: { overflow: \"auto\" },\n \"data-hidden\": dataAttr(isHidden),\n \"data-hover\": dataAttr(isHovered),\n \"data-never\": dataAttr(isNever),\n \"data-scroll\": dataAttr(isScrolling),\n tabIndex: 0,\n },\n isSafari ? { key, ref: scrollAreaRef, \"data-key\": key } : {},\n rest,\n props,\n {\n onMouseEnter,\n onMouseLeave,\n onPointerEnter: onMouseEnter,\n onPointerLeave: onMouseLeave,\n onScroll,\n },\n )(),\n [\n isNever,\n isHidden,\n isHovered,\n isScrolling,\n isSafari,\n key,\n rest,\n onMouseEnter,\n onMouseLeave,\n onScroll,\n ],\n )\n\n return {\n isAlways,\n isHidden,\n isHovered,\n isNever,\n isScrolling,\n getRootProps,\n }\n}\n\nexport type UseScrollAreaReturn = ReturnType<typeof useScrollArea>\n"],"mappings":"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"}

package/dist/cjs/components/segmented-control/segmented-control.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_factory = require("../../core/system/factory.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory$1 = require("../motion/factory.cjs");
@@ -16,8 +17,9 @@ const { ComponentContext, PropsContext: SegmentedControlPropsContext, useCompone
 * @see https://yamada-ui.com/docs/components/segmented-control
 */
 const SegmentedControlRoot = withProvider(({ children, items = [], orientation: orientationProp, indicatorProps, itemProps, ...rest }) => {
+	const computedOrientation = require_hooks_use_value_index.useValue(orientationProp);
 	const { id, name, descendants, disabled, orientation, readOnly, setValue, value, getRootProps } = require_use_segmented_control.useSegmentedControl({
-		orientation: require_hooks_use_value_index.useValue(orientationProp),
+		orientation: computedOrientation,
 		...rest
 	});
 	const cloneChildren = (0, react.useMemo)(() => {

package/dist/cjs/components/segmented-control/segmented-control.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.cjs","names":["createSlotComponent","segmentedControlStyle","useSegmentedControl","~~useValue~~","SegmentedControlContext","SegmentedControlDescendantsContext","LayoutGroup","styled","useSegmentedControlItem","motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n UseSegmentedControlItemProps,\n UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n SegmentedControlContext,\n SegmentedControlDescendantsContext,\n useSegmentedControl,\n useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n SegmentedControlRootProps,\n \"indicatorProps\" \| \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"onChange\">,\n ThemeProps<SegmentedControlStyle>,\n Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n /*\n If provided, generate segmented control buttons but based on items.\n \n @default []\n /\n items?: SegmentedControlItem[]\n /\n Props for the indicator component.\n /\n indicatorProps?: SegmentedControlIndicatorProps\n /\n Props for the item component.\n /\n itemProps?: SegmentedControlItemProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SegmentedControlPropsContext,\n useComponentContext,\n usePropsContext: useSegmentedControlPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n SegmentedControlRootProps,\n SegmentedControlStyle,\n ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/\n `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/segmented-control\n /\nexport const SegmentedControlRoot = withProvider(\n ({\n children,\n items = [],\n orientation: orientationProp,\n indicatorProps,\n itemProps,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const {\n id,\n name,\n descendants,\n disabled,\n orientation,\n readOnly,\n setValue,\n value,\n getRootProps,\n } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n const cloneChildren = useMemo(() => {\n if (children) return children\n else\n return items.map(({ label, ...rest }, index) => (\n <SegmentedControlItem key={index} {...rest}>\n {label}\n </SegmentedControlItem>\n ))\n }, [children, items])\n const context = useMemo(\n () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n [id, name, disabled, readOnly, orientation, setValue, value],\n )\n const componentContext = useMemo(\n () => ({ indicatorProps, itemProps }),\n [itemProps, indicatorProps],\n )\n\n return (\n <SegmentedControlContext value={context}>\n <ComponentContext value={componentContext}>\n <SegmentedControlDescendantsContext value={descendants}>\n <LayoutGroup id={id}>\n <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n </LayoutGroup>\n </SegmentedControlDescendantsContext>\n </ComponentContext>\n </SegmentedControlContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n /\n Props for the indicator component.\n */\n indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n \"label\",\n SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n const { checked, getInputProps, getLabelProps } =\n useSegmentedControlItem(rest)\n\n return (\n <styled.label {...getLabelProps()}>\n <styled.input {...getInputProps()} />\n\n <styled.span>{children}</styled.span>\n\n {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n </styled.label>\n )\n}, \"item\")((props) => {\n const { indicatorProps, itemProps } = useComponentContext()\n\n return {\n ...itemProps,\n ...props,\n indicatorProps: {\n ...indicatorProps,\n ...itemProps?.indicatorProps,\n ...props.indicatorProps,\n },\n }\n}) as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n \"div\",\n SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n return (\n <motion.div\n layoutDependency={false}\n layoutId=\"indicator\"\n transition={{ duration: 0.2, ...transition }}\n {...props}\n />\n )\n}, \"indicator\")()\n"],"mappings":"~~;;;;;;;;;;;~~AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,CAAC,GACT,aAAa,iBACb,gBACA,WACA,GAAG,WACC;~~CAEJ~~,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACEC,8BAAAA,oBAAoB;EAAE,~~aAXEC,8BAAAA,SAAS,eAWoB~~;~~EAAG~~,GAAG;CAAK,CAAC;CACrE,MAAM,iBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~OAA8B~~;EAClC,IAAI,UAAU,OAAO;OAEnB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;GAAkC,GAAI;GACnC,UAAA;EACmB,GAFK,KAEL,CACvB;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,WAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~QACG~~;EAAE;EAAI;EAAM;EAAU;EAAa;EAAU;EAAU;CAAM,IACpE;EAAC;EAAI;EAAM;EAAU;EAAU;EAAa;EAAU;CAAK,CAC7D;CACA,MAAM,oBAAA,~~GAAA~~,~~MAAA~~,~~QAAA~~,~~QACG~~;EAAE;EAAgB;CAAU,IACnC,CAAC,WAAW,cAAc,CAC5B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,yBAAD;EAAyB,OAAO;EAC9B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,OAAO;GACvB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,oCAAD;IAAoC,OAAO;IACzC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,aAAD;KAAiB;KACf,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;MAAY,GAAI,aAAa;MAAI,UAAA;KAA0B,CAAA;IAChD,CAAA;GACqB,CAAA;EACpB,CAAA;CACK,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAYF,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9BC,8BAAAA,wBAAwB,IAAI;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,gBAAAA,OAAO,OAAR;EAAc,GAAI,cAAc;EAAhC,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;GAEpC,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,MAAR,EAAc,SAAsB,CAAA;GAEnC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,2BAAD,EAA2B,GAAI,eAAiB,CAAA,IAAI;EACnD;;AAElB,GAAG,MAAM,CAAC,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,oBAAoB;CAE1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;EACX;CACF;AACF,CAAC;AAMD,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,OAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;EAAW;EAC3C,GAAI;CACL,CAAA;AAEL,GAAG,WAAW,CAAC,CAAC"}
1	+ {"version":3,"file":"segmented-control.cjs","names":["createSlotComponent","segmentedControlStyle","useValue","useSegmentedControl","useMemo","SegmentedControlContext","SegmentedControlDescendantsContext","LayoutGroup","styled","useSegmentedControlItem","motion"],"sources":["../../../../src/components/segmented-control/segmented-control.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { SegmentedControlStyle } from \"./segmented-control.style\"\nimport type {\n UseSegmentedControlItemProps,\n UseSegmentedControlProps,\n} from \"./use-segmented-control\"\nimport { LayoutGroup } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { motion } from \"../motion\"\nimport { segmentedControlStyle } from \"./segmented-control.style\"\nimport {\n SegmentedControlContext,\n SegmentedControlDescendantsContext,\n useSegmentedControl,\n useSegmentedControlItem,\n} from \"./use-segmented-control\"\n\nexport interface SegmentedControlItem extends SegmentedControlItemProps {\n label?: ReactNode\n}\n\ninterface ComponentContext extends Pick<\n SegmentedControlRootProps,\n \"indicatorProps\" \| \"itemProps\"\n> {}\n\nexport interface SegmentedControlRootProps<Y extends string = string>\n extends\n Omit<HTMLStyledProps, \"defaultValue\" \| \"onChange\">,\n ThemeProps<SegmentedControlStyle>,\n Omit<UseSegmentedControlProps<Y>, \"orientation\"> {\n /*\n If provided, generate segmented control buttons but based on items.\n \n @default []\n /\n items?: SegmentedControlItem[]\n /\n Props for the indicator component.\n /\n indicatorProps?: SegmentedControlIndicatorProps\n /\n Props for the item component.\n /\n itemProps?: SegmentedControlItemProps\n}\n\nconst {\n ComponentContext,\n PropsContext: SegmentedControlPropsContext,\n useComponentContext,\n usePropsContext: useSegmentedControlPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<\n SegmentedControlRootProps,\n SegmentedControlStyle,\n ComponentContext\n>(\"segmented-control\", segmentedControlStyle)\n\nexport { SegmentedControlPropsContext, useSegmentedControlPropsContext }\n\n/\n `SegmentedControl` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/segmented-control\n /\nexport const SegmentedControlRoot = withProvider(\n ({\n children,\n items = [],\n orientation: orientationProp,\n indicatorProps,\n itemProps,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const {\n id,\n name,\n descendants,\n disabled,\n orientation,\n readOnly,\n setValue,\n value,\n getRootProps,\n } = useSegmentedControl({ orientation: computedOrientation, ...rest })\n const cloneChildren = useMemo(() => {\n if (children) return children\n else\n return items.map(({ label, ...rest }, index) => (\n <SegmentedControlItem key={index} {...rest}>\n {label}\n </SegmentedControlItem>\n ))\n }, [children, items])\n const context = useMemo(\n () => ({ id, name, disabled, orientation, readOnly, setValue, value }),\n [id, name, disabled, readOnly, orientation, setValue, value],\n )\n const componentContext = useMemo(\n () => ({ indicatorProps, itemProps }),\n [itemProps, indicatorProps],\n )\n\n return (\n <SegmentedControlContext value={context}>\n <ComponentContext value={componentContext}>\n <SegmentedControlDescendantsContext value={descendants}>\n <LayoutGroup id={id}>\n <styled.div {...getRootProps()}>{cloneChildren}</styled.div>\n </LayoutGroup>\n </SegmentedControlDescendantsContext>\n </ComponentContext>\n </SegmentedControlContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)() as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlRootProps<Y>): ReactElement\n}>\n\nexport interface SegmentedControlItemProps<Y extends string = string>\n extends HTMLStyledProps<\"label\">, UseSegmentedControlItemProps<Y> {\n /\n Props for the indicator component.\n */\n indicatorProps?: SegmentedControlIndicatorProps\n}\n\nexport const SegmentedControlItem = withContext<\n \"label\",\n SegmentedControlItemProps\n>(({ children, indicatorProps, ...rest }) => {\n const { checked, getInputProps, getLabelProps } =\n useSegmentedControlItem(rest)\n\n return (\n <styled.label {...getLabelProps()}>\n <styled.input {...getInputProps()} />\n\n <styled.span>{children}</styled.span>\n\n {checked ? <SegmentedControlIndicator {...indicatorProps} /> : null}\n </styled.label>\n )\n}, \"item\")((props) => {\n const { indicatorProps, itemProps } = useComponentContext()\n\n return {\n ...itemProps,\n ...props,\n indicatorProps: {\n ...indicatorProps,\n ...itemProps?.indicatorProps,\n ...props.indicatorProps,\n },\n }\n}) as GenericsComponent<{\n <Y extends string = string>(props: SegmentedControlItemProps<Y>): ReactElement\n}>\n\ninterface SegmentedControlIndicatorProps extends HTMLMotionProps {}\n\nconst SegmentedControlIndicator = withContext<\n \"div\",\n SegmentedControlIndicatorProps\n>(({ transition, ...props }) => {\n return (\n <motion.div\n layoutDependency={false}\n layoutId=\"indicator\"\n transition={{ duration: 0.2, ...transition }}\n {...props}\n />\n )\n}, \"indicator\")()\n"],"mappings":";;;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,8BACd,qBACA,iBAAiB,iCACjB,aACA,iBACEA,yBAAAA,oBAIF,qBAAqBC,gCAAAA,qBAAqB;;;;;;AAS5C,MAAa,uBAAuB,cACjC,EACC,UACA,QAAQ,CAAC,GACT,aAAa,iBACb,gBACA,WACA,GAAG,WACC;CACJ,MAAM,sBAAsBC,8BAAAA,SAAS,eAAe;CACpD,MAAM,EACJ,IACA,MACA,aACA,UACA,aACA,UACA,UACA,OACA,iBACEC,8BAAAA,oBAAoB;EAAE,aAAa;EAAqB,GAAG;CAAK,CAAC;CACrE,MAAM,iBAAA,GAAgBC,MAAAA,QAAAA,OAAc;EAClC,IAAI,UAAU,OAAO;OAEnB,OAAO,MAAM,KAAK,EAAE,OAAO,GAAG,QAAQ,UACpC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;GAAkC,GAAI;GACnC,UAAA;EACmB,GAFK,KAEL,CACvB;CACL,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,MAAM,WAAA,GAAUA,MAAAA,QAAAA,QACP;EAAE;EAAI;EAAM;EAAU;EAAa;EAAU;EAAU;CAAM,IACpE;EAAC;EAAI;EAAM;EAAU;EAAU;EAAa;EAAU;CAAK,CAC7D;CACA,MAAM,oBAAA,GAAmBA,MAAAA,QAAAA,QAChB;EAAE;EAAgB;CAAU,IACnC,CAAC,WAAW,cAAc,CAC5B;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,yBAAD;EAAyB,OAAO;EAC9B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,kBAAD;GAAkB,OAAO;GACvB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,8BAAAA,oCAAD;IAAoC,OAAO;IACzC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,aAAD;KAAiB;KACf,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;MAAY,GAAI,aAAa;MAAI,UAAA;KAA0B,CAAA;IAChD,CAAA;GACqB,CAAA;EACpB,CAAA;CACK,CAAA;AAE7B,GACA,QACA,EAAE,eAAe,CAAC,aAAa,EAAE,CACnC,CAAC,CAAC;AAYF,MAAa,uBAAuB,aAGjC,EAAE,UAAU,gBAAgB,GAAG,WAAW;CAC3C,MAAM,EAAE,SAAS,eAAe,kBAC9BC,8BAAAA,wBAAwB,IAAI;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACD,gBAAAA,OAAO,OAAR;EAAc,GAAI,cAAc;EAAhC,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA;GAEpC,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,MAAR,EAAc,SAAsB,CAAA;GAEnC,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAAC,2BAAD,EAA2B,GAAI,eAAiB,CAAA,IAAI;EACnD;;AAElB,GAAG,MAAM,CAAC,EAAE,UAAU;CACpB,MAAM,EAAE,gBAAgB,cAAc,oBAAoB;CAE1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,gBAAgB;GACd,GAAG;GACH,GAAG,WAAW;GACd,GAAG,MAAM;EACX;CACF;AACF,CAAC;AAMD,MAAM,4BAA4B,aAG/B,EAAE,YAAY,GAAG,YAAY;CAC9B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,kBAAAA,OAAO,KAAR;EACE,kBAAkB;EAClB,UAAS;EACT,YAAY;GAAE,UAAU;GAAK,GAAG;EAAW;EAC3C,GAAI;CACL,CAAA;AAEL,GAAG,WAAW,CAAC,CAAC"}

package/dist/cjs/components/segmented-control/use-segmented-control.cjs CHANGED Viewed

@@ -1,4 +1,5 @@
 "use client";
+require("../../_virtual/_rolldown/runtime.cjs");
 const require_context = require("../../utils/context.cjs");
 const require_dom = require("../../utils/dom.cjs");
 const require_ref = require("../../utils/ref.cjs");