npm - @yamada-ui/react - Versions diffs - 2.0.0-dev-20250626073729 → 2.0.0-dev-20250626191018 - Mend

@yamada-ui/react 2.0.0-dev-20250626073729 → 2.0.0-dev-20250626191018

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

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

@@ -1,7 +1,7 @@
 "use client";
-import { utils_exports } from "../../utils/index.js";
+import { isObject } from "../../utils/common/assertion.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { switchStyle } from "./switch.style.js";
@@ -28,7 +28,7 @@ const Switch = withProvider(({ children, icon, inputProps, labelProps,...props }
 				...getTrackProps(),
 				children: /* @__PURE__ */ jsx(SwitchThumb, {
 					...getThumbProps(),
-					children: icon && (0, utils_exports.isObject)(icon) && "on" in icon ? checked ? icon.on : icon.off : icon
+					children: icon && isObject(icon) && "on" in icon ? checked ? icon.on : icon.off : icon
 				})
 			}),
 			children ? /* @__PURE__ */ jsx(SwitchLabel, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n extends Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n ThemeProps<SwitchStyle> {\n /*\n The switch icon to use.\n /\n icon?: ReactNode \| { off: ReactNode; on: ReactNode }\n /\n Props for switch input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for switch label element.\n /\n labelProps?: HTMLStyledProps<\"span\">\n}\n\nexport const {\n PropsContext: SwitchPropsContext,\n usePropsContext: useSwitchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\n/\n `Switch` is a component used to toggle between on and off states.\n \n @see https://yamada-ui.com/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n ({ children, icon, inputProps, labelProps, ...props }) => {\n const {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n } = useSwitch(props)\n\n return (\n <styled.label {...getRootProps()}>\n <styled.input data-peer {...getInputProps(inputProps)} />\n\n <SwitchTrack {...getTrackProps()}>\n <SwitchThumb {...getThumbProps()}>\n {icon && isObject(icon) && \"on\" in icon\n ? checked\n ? icon.on\n : icon.off\n : icon}\n </SwitchThumb>\n </SwitchTrack>\n\n {children ? (\n <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,EACX,cAAc,oBACd,iBAAiB,uBACjB,aACA,cACD,GAAG,oBAA8C,UAAU,YAAY;;;;;;AAOxE,MAAa,SAAS,aACpB,CAAC,EAAE,UAAU,MAAM,YAAY,WAAY,GAAG,OAAO,KAAK;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,eACD,GAAG,UAAU,MAAM;AAEpB,wBACE,KAAC,OAAO;EAAM,GAAI,cAAc;;mBAC9B,IAAC,OAAO;IAAM;IAAU,GAAI,cAAc,WAAW;KAAI;mBAEzD,IAAC;IAAY,GAAI,eAAe;8BAC9B,IAAC;KAAY,GAAI,eAAe;eAC7B,QAAQ,~~4BAAS~~,KAAK,IAAI,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;MACQ;KACF;GAEb,2BACC,IAAC;IAAY,GAAI,cAAc,WAAW;IAAG;KAAuB,GAClE;;GACS;AAElB,GACD,OACD,EAAE;AAIH,MAAM,cAAc,YAAqC,OAAO,QAAQ,EAAE;AAI1E,MAAM,cAAc,YAAqC,OAAO,QAAQ,EAAE;AAI1E,MAAM,cAAc,YAAsC,QAAQ,QAAQ,EAAE"}
1	+ {"version":3,"file":"switch.js","names":[],"sources":["../../../../src/components/switch/switch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { SwitchStyle } from \"./switch.style\"\nimport type { UseSwitchProps } from \"./use-switch\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isObject } from \"../../utils\"\nimport { switchStyle } from \"./switch.style\"\nimport { useSwitch } from \"./use-switch\"\n\nexport interface SwitchProps\n extends Merge<HTMLStyledProps<\"label\">, UseSwitchProps>,\n ThemeProps<SwitchStyle> {\n /*\n The switch icon to use.\n /\n icon?: ReactNode \| { off: ReactNode; on: ReactNode }\n /\n Props for switch input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for switch label element.\n /\n labelProps?: HTMLStyledProps<\"span\">\n}\n\nexport const {\n PropsContext: SwitchPropsContext,\n usePropsContext: useSwitchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<SwitchProps, SwitchStyle>(\"switch\", switchStyle)\n\n/\n `Switch` is a component used to toggle between on and off states.\n \n @see https://yamada-ui.com/components/switch\n */\nexport const Switch = withProvider<\"input\", SwitchProps>(\n ({ children, icon, inputProps, labelProps, ...props }) => {\n const {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n } = useSwitch(props)\n\n return (\n <styled.label {...getRootProps()}>\n <styled.input data-peer {...getInputProps(inputProps)} />\n\n <SwitchTrack {...getTrackProps()}>\n <SwitchThumb {...getThumbProps()}>\n {icon && isObject(icon) && \"on\" in icon\n ? checked\n ? icon.on\n : icon.off\n : icon}\n </SwitchThumb>\n </SwitchTrack>\n\n {children ? (\n <SwitchLabel {...getLabelProps(labelProps)}>{children}</SwitchLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)()\n\ninterface SwitchThumbProps extends HTMLStyledProps {}\n\nconst SwitchThumb = withContext<\"div\", SwitchThumbProps>(\"div\", \"thumb\")()\n\ninterface SwitchTrackProps extends HTMLStyledProps {}\n\nconst SwitchTrack = withContext<\"div\", SwitchTrackProps>(\"div\", \"track\")()\n\ninterface SwitchLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst SwitchLabel = withContext<\"span\", SwitchLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,EACX,cAAc,oBACd,iBAAiB,uBACjB,aACA,cACD,GAAG,oBAA8C,UAAU,YAAY;;;;;;AAOxE,MAAa,SAAS,aACpB,CAAC,EAAE,UAAU,MAAM,YAAY,WAAY,GAAG,OAAO,KAAK;CACxD,MAAM,EACJ,SACA,eACA,eACA,cACA,eACA,eACD,GAAG,UAAU,MAAM;AAEpB,wBACE,KAAC,OAAO;EAAM,GAAI,cAAc;;mBAC9B,IAAC,OAAO;IAAM;IAAU,GAAI,cAAc,WAAW;KAAI;mBAEzD,IAAC;IAAY,GAAI,eAAe;8BAC9B,IAAC;KAAY,GAAI,eAAe;eAC7B,QAAQ,SAAS,KAAK,IAAI,QAAQ,OAC/B,UACE,KAAK,KACL,KAAK,MACP;MACQ;KACF;GAEb,2BACC,IAAC;IAAY,GAAI,cAAc,WAAW;IAAG;KAAuB,GAClE;;GACS;AAElB,GACD,OACD,EAAE;AAIH,MAAM,cAAc,YAAqC,OAAO,QAAQ,EAAE;AAI1E,MAAM,cAAc,YAAqC,OAAO,QAAQ,EAAE;AAI1E,MAAM,cAAc,YAAsC,QAAQ,QAAQ,EAAE"}

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

@@ -3,7 +3,8 @@
 import { visuallyHiddenAttributes } from "../../utils/dom.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useFieldProps } from "../field/use-field-props.js";
 import { useCallback, useId, useRef } from "react";
@@ -33,7 +34,7 @@ const useSwitch = (props = {}) => {
 	const getRootProps = useCallback((props$1 = {}) => ({
 		...dataProps,
 		htmlFor: id,
-		"data-checked": (0, utils_exports.dataAttr)(checked),
+		"data-checked": dataAttr(checked),
 		...rest,
 		...props$1
 	}), [
@@ -43,12 +44,12 @@ const useSwitch = (props = {}) => {
 		dataProps
 	]);
 	const getTrackProps = useCallback((props$1 = {}) => ({
-		"data-checked": (0, utils_exports.dataAttr)(checked),
+		"data-checked": dataAttr(checked),
 		...dataProps,
 		...props$1
 	}), [checked, dataProps]);
 	const getThumbProps = useCallback((props$1 = {}) => ({
-		"data-checked": (0, utils_exports.dataAttr)(checked),
+		"data-checked": dataAttr(checked),
 		...dataProps,
 		...props$1
 	}), [checked, dataProps]);
@@ -68,10 +69,10 @@ const useSwitch = (props = {}) => {
 		value,
 		...props$1,
 		ref: mergeRefs(inputRef, props$1.ref, ref),
-		onBlur: (0, utils_exports.handlerAll)(eventProps.onBlur, props$1.onBlur),
-		onChange: (0, utils_exports.handlerAll)(props$1.onChange, onChange),
-		onFocus: (0, utils_exports.handlerAll)(eventProps.onFocus, props$1.onFocus),
-		onKeyDown: (0, utils_exports.handlerAll)(props$1.onKeyDown, onKeyDown)
+		onBlur: handlerAll(eventProps.onBlur, props$1.onBlur),
+		onChange: handlerAll(props$1.onChange, onChange),
+		onFocus: handlerAll(eventProps.onFocus, props$1.onFocus),
+		onKeyDown: handlerAll(props$1.onKeyDown, onKeyDown)
 	}), [
 		ariaProps,
 		dataProps,
@@ -90,7 +91,7 @@ const useSwitch = (props = {}) => {
 	]);
 	const getLabelProps = useCallback((props$1 = {}) => ({
 		...dataProps,
-		"data-checked": (0, utils_exports.dataAttr)(checked),
+		"data-checked": dataAttr(checked),
 		...props$1
 	}), [dataProps, checked]);
 	return {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-switch.js","names":["props: UseSwitchProps<Y>","ev: ChangeEvent<HTMLInputElement>","ev: KeyboardEvent<HTMLInputElement>","getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter","getInputProps: PropGetter<\"input\">","getLabelProps: PropGetter<\"span\">"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n dataAttr,\n handlerAll,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number \| string = string>\n extends Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n id assigned to input.\n /\n id?: string\n /\n The HTML `name` attribute used for forms.\n /\n name?: string\n /\n If `true`, the switch will be checked.\n \n @default false\n /\n checked?: boolean\n /\n If `true`, the switch will be checked when the Enter key is pressed.\n \n @default true\n /\n checkOnEnter?: boolean\n /\n If `true`, the switch will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n The tab-index property of the underlying input element.\n /\n tabIndex?: number\n /\n The value to be used in the switch input.\n /\n value?: Y\n /\n The callback invoked when the switch is blurred.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>\n /\n The callback invoked when the checked state changes.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>\n /\n The callback invoked when the switch is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number \| string = string>(\n props: UseSwitchProps<Y> = {},\n) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n ref,\n name,\n checked: checkedProp,\n checkOnEnter = true,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [checked, setChecked] = useControllableState({\n defaultValue: defaultChecked,\n value: checkedProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return ev.preventDefault()\n\n setChecked(ev.target.checked)\n onChangeProp?.(ev)\n },\n [onChangeProp, setChecked, interactive],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (interactive && checkOnEnter && ev.key === \"Enter\")\n inputRef.current?.click()\n },\n [interactive, checkOnEnter],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n htmlFor: id,\n \"data-checked\": dataAttr(checked),\n ...rest,\n ...props,\n }),\n [checked, rest, id, dataProps],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-checked\": dataAttr(checked),\n ...dataProps,\n ...props,\n }),\n [checked, dataProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-checked\": dataAttr(checked),\n ...dataProps,\n ...props,\n }),\n [checked, dataProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...ariaProps,\n ...dataProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n checked,\n disabled,\n readOnly,\n required,\n role: \"switch\",\n tabIndex: interactive ? 0 : -1,\n value,\n ...props,\n ref: mergeRefs(inputRef, props.ref, ref),\n onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaProps,\n dataProps,\n id,\n name,\n checked,\n disabled,\n readOnly,\n required,\n interactive,\n value,\n ref,\n eventProps,\n onChange,\n onKeyDown,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n ...props,\n }),\n [dataProps, checked],\n )\n\n return {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":"~~;;;;;;;;;;;~~AAwEA,MAAa,YAAY,CACvBA,QAA2B,CAAE,MAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,aACV,GAAG,MACJ,EACD,WACA,WACA,YACD,GAAG,cAAc,MAAM;CACxB,MAAM,gBAAgB,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,WAAW,GAAG,qBAAqB;EACjD,cAAc;EACd,OAAO;CACR,EAAC;CAEF,MAAM,WAAW,YACf,CAACC,OAAsC;AACrC,OAAK,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;CACnB,GACD;EAAC;EAAc;EAAY;CAAY,EACxC;CAED,MAAM,YAAY,YAChB,CAACC,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;CAC5B,GACD,CAAC,aAAa,YAAa,EAC5B;CAED,MAAMC,eAAoC,YACxC,CAACC,UAAQ,CAAE,OAAM;EACf,GAAG;EACH,SAAS;EACT,gBAAgB,~~4BAAS~~,QAAQ;EACjC,GAAG;EACH,GAAGA;CACJ,IACD;EAAC;EAAS;EAAM;EAAI;CAAU,EAC/B;CAED,MAAMC,gBAA4B,YAChC,CAACD,UAAQ,CAAE,OAAM;EACf,gBAAgB,~~4BAAS~~,QAAQ;EACjC,GAAG;EACH,GAAGA;CACJ,IACD,CAAC,SAAS,SAAU,EACrB;CAED,MAAME,gBAA4B,YAChC,CAACF,UAAQ,CAAE,OAAM;EACf,gBAAgB,~~4BAAS~~,QAAQ;EACjC,GAAG;EACH,GAAGA;CACJ,IACD,CAAC,SAAS,SAAU,EACrB;CAED,MAAMG,gBAAqC,YACzC,CAACH,UAAQ,CAAE,OAAM;EACf,GAAG;EACH,GAAG;EACH;EACA,MAAM;EACN;EACA,OAAO,yBAAyB;EAChC;EACA;EACA;EACA;EACA,MAAM;EACN,UAAU,cAAc,IAAI;EAC5B;EACA,GAAGA;EACH,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;EACxC,QAAQ,~~8BAAW~~,WAAW,QAAQA,QAAM,OAAO;EACnD,UAAU,~~8BAAWA~~,QAAM,UAAU,SAAS;EAC9C,SAAS,~~8BAAW~~,WAAW,SAASA,QAAM,QAAQ;EACtD,WAAW,~~8BAAWA~~,QAAM,WAAW,UAAU;CAClD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMI,gBAAoC,YACxC,CAACJ,UAAQ,CAAE,OAAM;EACf,GAAG;EACH,gBAAgB,~~4BAAS~~,QAAQ;EACjC,GAAGA;CACJ,IACD,CAAC,WAAW,OAAQ,EACrB;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACD;AACF"}
1	+ {"version":3,"file":"use-switch.js","names":["props: UseSwitchProps<Y>","ev: ChangeEvent<HTMLInputElement>","ev: KeyboardEvent<HTMLInputElement>","getRootProps: PropGetter<\"label\">","props","getTrackProps: PropGetter","getThumbProps: PropGetter","getInputProps: PropGetter<\"input\">","getLabelProps: PropGetter<\"span\">"],"sources":["../../../../src/components/switch/use-switch.ts"],"sourcesContent":["\"use client\"\n\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n FocusEventHandler,\n KeyboardEvent,\n} from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n dataAttr,\n handlerAll,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSwitchProps<Y extends number \| string = string>\n extends Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n id assigned to input.\n /\n id?: string\n /\n The HTML `name` attribute used for forms.\n /\n name?: string\n /\n If `true`, the switch will be checked.\n \n @default false\n /\n checked?: boolean\n /\n If `true`, the switch will be checked when the Enter key is pressed.\n \n @default true\n /\n checkOnEnter?: boolean\n /\n If `true`, the switch will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n The tab-index property of the underlying input element.\n /\n tabIndex?: number\n /\n The value to be used in the switch input.\n /\n value?: Y\n /\n The callback invoked when the switch is blurred.\n /\n onBlur?: FocusEventHandler<HTMLInputElement>\n /\n The callback invoked when the checked state changes.\n /\n onChange?: ChangeEventHandler<HTMLInputElement>\n /\n The callback invoked when the switch is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useSwitch = <Y extends number \| string = string>(\n props: UseSwitchProps<Y> = {},\n) => {\n const uuid = useId()\n const {\n props: {\n id = uuid,\n ref,\n name,\n checked: checkedProp,\n checkOnEnter = true,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const interactive = !(readOnly \|\| disabled)\n const inputRef = useRef<HTMLInputElement>(null)\n const [checked, setChecked] = useControllableState({\n defaultValue: defaultChecked,\n value: checkedProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return ev.preventDefault()\n\n setChecked(ev.target.checked)\n onChangeProp?.(ev)\n },\n [onChangeProp, setChecked, interactive],\n )\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLInputElement>) => {\n if (interactive && checkOnEnter && ev.key === \"Enter\")\n inputRef.current?.click()\n },\n [interactive, checkOnEnter],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n htmlFor: id,\n \"data-checked\": dataAttr(checked),\n ...rest,\n ...props,\n }),\n [checked, rest, id, dataProps],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-checked\": dataAttr(checked),\n ...dataProps,\n ...props,\n }),\n [checked, dataProps],\n )\n\n const getThumbProps: PropGetter = useCallback(\n (props = {}) => ({\n \"data-checked\": dataAttr(checked),\n ...dataProps,\n ...props,\n }),\n [checked, dataProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n (props = {}) => ({\n ...ariaProps,\n ...dataProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n checked,\n disabled,\n readOnly,\n required,\n role: \"switch\",\n tabIndex: interactive ? 0 : -1,\n value,\n ...props,\n ref: mergeRefs(inputRef, props.ref, ref),\n onBlur: handlerAll(eventProps.onBlur, props.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n ariaProps,\n dataProps,\n id,\n name,\n checked,\n disabled,\n readOnly,\n required,\n interactive,\n value,\n ref,\n eventProps,\n onChange,\n onKeyDown,\n ],\n )\n\n const getLabelProps: PropGetter<\"span\"> = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n ...props,\n }),\n [dataProps, checked],\n )\n\n return {\n checked,\n getInputProps,\n getLabelProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n }\n}\n\nexport type UseSwitchReturn = ReturnType<typeof useSwitch>\n"],"mappings":";;;;;;;;;;;;AAwEA,MAAa,YAAY,CACvBA,QAA2B,CAAE,MAC1B;CACH,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,KAAK,MACL,KACA,MACA,SAAS,aACT,eAAe,MACf,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,aACV,GAAG,MACJ,EACD,WACA,WACA,YACD,GAAG,cAAc,MAAM;CACxB,MAAM,gBAAgB,YAAY;CAClC,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,CAAC,SAAS,WAAW,GAAG,qBAAqB;EACjD,cAAc;EACd,OAAO;CACR,EAAC;CAEF,MAAM,WAAW,YACf,CAACC,OAAsC;AACrC,OAAK,YAAa,QAAO,GAAG,gBAAgB;AAE5C,aAAW,GAAG,OAAO,QAAQ;AAC7B,iBAAe,GAAG;CACnB,GACD;EAAC;EAAc;EAAY;CAAY,EACxC;CAED,MAAM,YAAY,YAChB,CAACC,OAAwC;AACvC,MAAI,eAAe,gBAAgB,GAAG,QAAQ,QAC5C,UAAS,SAAS,OAAO;CAC5B,GACD,CAAC,aAAa,YAAa,EAC5B;CAED,MAAMC,eAAoC,YACxC,CAACC,UAAQ,CAAE,OAAM;EACf,GAAG;EACH,SAAS;EACT,gBAAgB,SAAS,QAAQ;EACjC,GAAG;EACH,GAAGA;CACJ,IACD;EAAC;EAAS;EAAM;EAAI;CAAU,EAC/B;CAED,MAAMC,gBAA4B,YAChC,CAACD,UAAQ,CAAE,OAAM;EACf,gBAAgB,SAAS,QAAQ;EACjC,GAAG;EACH,GAAGA;CACJ,IACD,CAAC,SAAS,SAAU,EACrB;CAED,MAAME,gBAA4B,YAChC,CAACF,UAAQ,CAAE,OAAM;EACf,gBAAgB,SAAS,QAAQ;EACjC,GAAG;EACH,GAAGA;CACJ,IACD,CAAC,SAAS,SAAU,EACrB;CAED,MAAMG,gBAAqC,YACzC,CAACH,UAAQ,CAAE,OAAM;EACf,GAAG;EACH,GAAG;EACH;EACA,MAAM;EACN;EACA,OAAO,yBAAyB;EAChC;EACA;EACA;EACA;EACA,MAAM;EACN,UAAU,cAAc,IAAI;EAC5B;EACA,GAAGA;EACH,KAAK,UAAU,UAAUA,QAAM,KAAK,IAAI;EACxC,QAAQ,WAAW,WAAW,QAAQA,QAAM,OAAO;EACnD,UAAU,WAAWA,QAAM,UAAU,SAAS;EAC9C,SAAS,WAAW,WAAW,SAASA,QAAM,QAAQ;EACtD,WAAW,WAAWA,QAAM,WAAW,UAAU;CAClD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;CAED,MAAMI,gBAAoC,YACxC,CAACJ,UAAQ,CAAE,OAAM;EACf,GAAG;EACH,gBAAgB,SAAS,QAAQ;EACjC,GAAGA;CACJ,IACD,CAAC,WAAW,OAAQ,EACrB;AAED,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;CACD;AACF"}

package/dist/esm/components/tabs/tabs.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
-import { utils_exports } from "../../utils/index.js";
+import { isNull, isUndefined } from "../../utils/common/assertion.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { useValue } from "../../hooks/use-value/index.js";
@@ -72,7 +72,7 @@ const TabsList = withContext(({ children,...rest }) => {
 	const { getListProps } = useTabsContext();
 	const computedChildren = useMemo(() => {
 		if (children) return children;
-		else return items?.map(({ id, panel: _panel, tab, panelProps: _panelProps,...rest$1 }, index) => (0, utils_exports.isUndefined)(tab) || (0, utils_exports.isNull)(tab) ? null : /* @__PURE__ */ jsx(TabsTab, {
+		else return items?.map(({ id, panel: _panel, tab, panelProps: _panelProps,...rest$1 }, index) => isUndefined(tab) || isNull(tab) ? null : /* @__PURE__ */ jsx(TabsTab, {
 			id,
 			...rest$1,
 			children: tab
@@ -91,7 +91,7 @@ const TabsPanels = ({ children }) => {
 	const { items } = useComponentContext();
 	return useMemo(() => {
 		if (children) return children;
-		else return items?.map(({ id, panel, panelProps }, index) => (0, utils_exports.isUndefined)(panel) || (0, utils_exports.isNull)(panel) ? null : /* @__PURE__ */ jsx(TabsPanel, {
+		else return items?.map(({ id, panel, panelProps }, index) => isUndefined(panel) || isNull(panel) ? null : /* @__PURE__ */ jsx(TabsPanel, {
 			...panelProps,
 			children: panel
 		}, id ?? index));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","names":["TabsRoot: FC<TabsRootProps>","rest","TabsPanels: FC<TabsPanelsProps>"],"sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { TabsStyle } from \"./tabs.style\"\nimport type { UseTabPanelProps, UseTabProps, UseTabsProps } from \"./use-tabs\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, isUndefined } from \"../../utils\"\nimport { tabsStyle } from \"./tabs.style\"\nimport {\n TabDescendantsContext,\n TabPanelDescendantsContext,\n TabsContext,\n useTab,\n useTabPanel,\n useTabs,\n useTabsContext,\n} from \"./use-tabs\"\n\ninterface ComponentContext\n extends Pick<TabsRootProps, \"items\" \| \"lazy\" \| \"lazyBehavior\"> {}\n\ninterface TabsItem extends TabsTabProps {\n /*\n The content for panel element.\n /\n panel: ReactNode\n /\n The content for tab element.\n /\n tab: ReactNode\n /\n Props for panel element.\n /\n panelProps?: TabsPanelProps\n}\n\nexport interface TabsRootProps\n extends Omit<HTMLStyledProps, \"onChange\">,\n Omit<UseTabsProps, \"orientation\">,\n Pick<UseLazyMountProps, \"lazy\" \| \"lazyBehavior\">,\n ThemeProps<TabsStyle> {\n /\n If provided, generate tab and panel components based on tabs.\n /\n items?: TabsItem[]\n}\n\nexport const {\n ComponentContext,\n PropsContext: TabsPropsContext,\n useComponentContext,\n usePropsContext: useTabsPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<TabsRootProps, TabsStyle, ComponentContext>(\n \"tabs\",\n tabsStyle,\n)\n\n/\n `Tabs` is a component for switching between different display areas.\n \n @see https://yamada-ui.com/components/tabs\n */\nexport const TabsRoot: FC<TabsRootProps> = withProvider(\n ({\n children,\n items,\n lazy,\n lazyBehavior,\n orientation: orientationProp,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const {\n focusedIndex,\n index,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n tabDescendants,\n tabPanelDescendants,\n getListProps,\n getRootProps,\n } = useTabs({ orientation: computedOrientation, ...rest })\n const componentContext = useMemo(\n () => ({ items, lazy, lazyBehavior }),\n [items, lazy, lazyBehavior],\n )\n const tabsContext = useMemo(\n () => ({\n focusedIndex,\n index,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n getListProps,\n }),\n [\n manual,\n focusedIndex,\n index,\n orientation,\n setFocusedIndex,\n setIndex,\n getListProps,\n ],\n )\n\n return (\n <TabDescendantsContext value={tabDescendants}>\n <TabPanelDescendantsContext value={tabPanelDescendants}>\n <TabsContext value={tabsContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>{children}</styled.div>\n </ComponentContext>\n </TabsContext>\n </TabPanelDescendantsContext>\n </TabDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface TabsListProps extends HTMLStyledProps {}\n\nexport const TabsList = withContext<\"div\", TabsListProps>(\n ({ children, ...rest }) => {\n const { items } = useComponentContext()\n const { getListProps } = useTabsContext()\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(\n (\n { id, panel: _panel, tab, panelProps: _panelProps, ...rest },\n index,\n ) =>\n isUndefined(tab) \|\| isNull(tab) ? null : (\n <TabsTab id={id} key={id ?? index} {...rest}>\n {tab}\n </TabsTab>\n ),\n )\n }\n }, [children, items])\n\n return <styled.div {...getListProps(rest)}>{computedChildren}</styled.div>\n },\n \"list\",\n)()\n\nexport interface TabsTabProps extends HTMLStyledProps<\"button\">, UseTabProps {}\n\nexport const TabsTab = withContext<\"button\", TabsTabProps>(\"button\", \"tab\")(\n undefined,\n (props) => {\n const { getRootProps } = useTab(props)\n\n return getRootProps()\n },\n)\n\nexport interface TabsPanelsProps extends PropsWithChildren {}\n\nexport const TabsPanels: FC<TabsPanelsProps> = ({ children }) => {\n const { items } = useComponentContext()\n\n return useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(({ id, panel, panelProps }, index) =>\n isUndefined(panel) \|\| isNull(panel) ? null : (\n <TabsPanel key={id ?? index} {...panelProps}>\n {panel}\n </TabsPanel>\n ),\n )\n }\n }, [children, items])\n}\n\nexport interface TabsPanelProps extends HTMLStyledProps, UseTabPanelProps {}\n\nexport const TabsPanel = withContext<\"div\", TabsPanelProps>(\"div\", \"panel\")(\n undefined,\n (props) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { selected: mounted, getRootProps } = useTabPanel(props)\n const children = useLazyMount({ lazy, lazyBehavior, mounted, ...props })\n\n return { ...getRootProps(), children }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAa,EACX,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,cACD,GAAG,oBACF,QACA,UACD;;;;;;AAOD,MAAaA,WAA8B,aACzC,CAAC,EACC,UACA,OACA,MACA,cACA,aAAa,gBACb,GAAG,MACJ,KAAK;CACJ,MAAM,sBAAsB,SAAS,gBAAgB;CACrD,MAAM,EACJ,cACA,OACA,QACA,aACA,iBACA,UACA,gBACA,qBACA,cACA,cACD,GAAG,QAAQ;EAAE,aAAa;EAAqB,GAAG;CAAM,EAAC;CAC1D,MAAM,mBAAmB,QACvB,OAAO;EAAE;EAAO;EAAM;CAAc,IACpC;EAAC;EAAO;EAAM;CAAa,EAC5B;CACD,MAAM,cAAc,QAClB,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,wBACE,IAAC;EAAsB,OAAO;4BAC5B,IAAC;GAA2B,OAAO;6BACjC,IAAC;IAAY,OAAO;8BAClB,IAAC;KAAiB,OAAO;+BACvB,IAAC,OAAO;MAAI,GAAI,cAAc;MAAG;OAAsB;MACtC;KACP;IACa;GACP;AAE3B,GACD,QACA,EAAE,eAAe,CAAC,aAAc,EAAE,EACnC,EAAE;AAIH,MAAa,WAAW,YACtB,CAAC,EAAE,SAAU,GAAG,MAAM,KAAK;CACzB,MAAM,EAAE,OAAO,GAAG,qBAAqB;CACvC,MAAM,EAAE,cAAc,GAAG,gBAAgB;CACzC,MAAM,mBAAmB,QAAQ,MAAM;AACrC,MAAI,SACF,QAAO;MAEP,QAAO,OAAO,IACZ,CACE,EAAE,IAAI,OAAO,QAAQ,KAAK,YAAY,YAAa,GAAGC,QAAM,EAC5D,UAEA~~,+BAAY~~,IAAI,IAAI,~~0BAAO~~,IAAI,GAAG,uBAChC,IAAC;GAAY;GAAsB,GAAIA;aACpC;KADmB,MAAM,MAElB,CAEf;CAEJ,GAAE,CAAC,UAAU,KAAM,EAAC;AAErB,wBAAO,IAAC,OAAO;EAAI,GAAI,aAAa,KAAK;YAAG;GAA8B;AAC3E,GACD,OACD,EAAE;AAIH,MAAa,UAAU,YAAoC,UAAU,MAAM,SAEzE,CAAC,UAAU;CACT,MAAM,EAAE,cAAc,GAAG,OAAO,MAAM;AAEtC,QAAO,cAAc;AACtB,EACF;AAID,MAAaC,aAAkC,CAAC,EAAE,UAAU,KAAK;CAC/D,MAAM,EAAE,OAAO,GAAG,qBAAqB;AAEvC,QAAO,QAAQ,MAAM;AACnB,MAAI,SACF,QAAO;MAEP,QAAO,OAAO,IAAI,CAAC,EAAE,IAAI,OAAO,YAAY,EAAE,UAC5C~~,+BAAY~~,MAAM,IAAI,~~0BAAO~~,MAAM,GAAG,uBACpC,IAAC;GAA4B,GAAI;aAC9B;KADa,MAAM,MAEV,CAEf;CAEJ,GAAE,CAAC,UAAU,KAAM,EAAC;AACtB;AAID,MAAa,YAAY,YAAmC,OAAO,QAAQ,SAEzE,CAAC,UAAU;CACT,MAAM,EAAE,MAAM,cAAc,GAAG,qBAAqB;CACpD,MAAM,EAAE,UAAU,SAAS,cAAc,GAAG,YAAY,MAAM;CAC9D,MAAM,WAAW,aAAa;EAAE;EAAM;EAAc;EAAS,GAAG;CAAO,EAAC;AAExE,QAAO;EAAE,GAAG,cAAc;EAAE;CAAU;AACvC,EACF"}
1	+ {"version":3,"file":"tabs.js","names":["TabsRoot: FC<TabsRootProps>","rest","TabsPanels: FC<TabsPanelsProps>"],"sources":["../../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { UseLazyMountProps } from \"../../hooks/use-lazy-mount\"\nimport type { TabsStyle } from \"./tabs.style\"\nimport type { UseTabPanelProps, UseTabProps, UseTabsProps } from \"./use-tabs\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useLazyMount } from \"../../hooks/use-lazy-mount\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { isNull, isUndefined } from \"../../utils\"\nimport { tabsStyle } from \"./tabs.style\"\nimport {\n TabDescendantsContext,\n TabPanelDescendantsContext,\n TabsContext,\n useTab,\n useTabPanel,\n useTabs,\n useTabsContext,\n} from \"./use-tabs\"\n\ninterface ComponentContext\n extends Pick<TabsRootProps, \"items\" \| \"lazy\" \| \"lazyBehavior\"> {}\n\ninterface TabsItem extends TabsTabProps {\n /*\n The content for panel element.\n /\n panel: ReactNode\n /\n The content for tab element.\n /\n tab: ReactNode\n /\n Props for panel element.\n /\n panelProps?: TabsPanelProps\n}\n\nexport interface TabsRootProps\n extends Omit<HTMLStyledProps, \"onChange\">,\n Omit<UseTabsProps, \"orientation\">,\n Pick<UseLazyMountProps, \"lazy\" \| \"lazyBehavior\">,\n ThemeProps<TabsStyle> {\n /\n If provided, generate tab and panel components based on tabs.\n /\n items?: TabsItem[]\n}\n\nexport const {\n ComponentContext,\n PropsContext: TabsPropsContext,\n useComponentContext,\n usePropsContext: useTabsPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<TabsRootProps, TabsStyle, ComponentContext>(\n \"tabs\",\n tabsStyle,\n)\n\n/\n `Tabs` is a component for switching between different display areas.\n \n @see https://yamada-ui.com/components/tabs\n */\nexport const TabsRoot: FC<TabsRootProps> = withProvider(\n ({\n children,\n items,\n lazy,\n lazyBehavior,\n orientation: orientationProp,\n ...rest\n }) => {\n const computedOrientation = useValue(orientationProp)\n const {\n focusedIndex,\n index,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n tabDescendants,\n tabPanelDescendants,\n getListProps,\n getRootProps,\n } = useTabs({ orientation: computedOrientation, ...rest })\n const componentContext = useMemo(\n () => ({ items, lazy, lazyBehavior }),\n [items, lazy, lazyBehavior],\n )\n const tabsContext = useMemo(\n () => ({\n focusedIndex,\n index,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n getListProps,\n }),\n [\n manual,\n focusedIndex,\n index,\n orientation,\n setFocusedIndex,\n setIndex,\n getListProps,\n ],\n )\n\n return (\n <TabDescendantsContext value={tabDescendants}>\n <TabPanelDescendantsContext value={tabPanelDescendants}>\n <TabsContext value={tabsContext}>\n <ComponentContext value={componentContext}>\n <styled.div {...getRootProps()}>{children}</styled.div>\n </ComponentContext>\n </TabsContext>\n </TabPanelDescendantsContext>\n </TabDescendantsContext>\n )\n },\n \"root\",\n { transferProps: [\"orientation\"] },\n)()\n\nexport interface TabsListProps extends HTMLStyledProps {}\n\nexport const TabsList = withContext<\"div\", TabsListProps>(\n ({ children, ...rest }) => {\n const { items } = useComponentContext()\n const { getListProps } = useTabsContext()\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(\n (\n { id, panel: _panel, tab, panelProps: _panelProps, ...rest },\n index,\n ) =>\n isUndefined(tab) \|\| isNull(tab) ? null : (\n <TabsTab id={id} key={id ?? index} {...rest}>\n {tab}\n </TabsTab>\n ),\n )\n }\n }, [children, items])\n\n return <styled.div {...getListProps(rest)}>{computedChildren}</styled.div>\n },\n \"list\",\n)()\n\nexport interface TabsTabProps extends HTMLStyledProps<\"button\">, UseTabProps {}\n\nexport const TabsTab = withContext<\"button\", TabsTabProps>(\"button\", \"tab\")(\n undefined,\n (props) => {\n const { getRootProps } = useTab(props)\n\n return getRootProps()\n },\n)\n\nexport interface TabsPanelsProps extends PropsWithChildren {}\n\nexport const TabsPanels: FC<TabsPanelsProps> = ({ children }) => {\n const { items } = useComponentContext()\n\n return useMemo(() => {\n if (children) {\n return children\n } else {\n return items?.map(({ id, panel, panelProps }, index) =>\n isUndefined(panel) \|\| isNull(panel) ? null : (\n <TabsPanel key={id ?? index} {...panelProps}>\n {panel}\n </TabsPanel>\n ),\n )\n }\n }, [children, items])\n}\n\nexport interface TabsPanelProps extends HTMLStyledProps, UseTabPanelProps {}\n\nexport const TabsPanel = withContext<\"div\", TabsPanelProps>(\"div\", \"panel\")(\n undefined,\n (props) => {\n const { lazy, lazyBehavior } = useComponentContext()\n const { selected: mounted, getRootProps } = useTabPanel(props)\n const children = useLazyMount({ lazy, lazyBehavior, mounted, ...props })\n\n return { ...getRootProps(), children }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;AAoDA,MAAa,EACX,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,cACD,GAAG,oBACF,QACA,UACD;;;;;;AAOD,MAAaA,WAA8B,aACzC,CAAC,EACC,UACA,OACA,MACA,cACA,aAAa,gBACb,GAAG,MACJ,KAAK;CACJ,MAAM,sBAAsB,SAAS,gBAAgB;CACrD,MAAM,EACJ,cACA,OACA,QACA,aACA,iBACA,UACA,gBACA,qBACA,cACA,cACD,GAAG,QAAQ;EAAE,aAAa;EAAqB,GAAG;CAAM,EAAC;CAC1D,MAAM,mBAAmB,QACvB,OAAO;EAAE;EAAO;EAAM;CAAc,IACpC;EAAC;EAAO;EAAM;CAAa,EAC5B;CACD,MAAM,cAAc,QAClB,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACD,IACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;CACD,EACF;AAED,wBACE,IAAC;EAAsB,OAAO;4BAC5B,IAAC;GAA2B,OAAO;6BACjC,IAAC;IAAY,OAAO;8BAClB,IAAC;KAAiB,OAAO;+BACvB,IAAC,OAAO;MAAI,GAAI,cAAc;MAAG;OAAsB;MACtC;KACP;IACa;GACP;AAE3B,GACD,QACA,EAAE,eAAe,CAAC,aAAc,EAAE,EACnC,EAAE;AAIH,MAAa,WAAW,YACtB,CAAC,EAAE,SAAU,GAAG,MAAM,KAAK;CACzB,MAAM,EAAE,OAAO,GAAG,qBAAqB;CACvC,MAAM,EAAE,cAAc,GAAG,gBAAgB;CACzC,MAAM,mBAAmB,QAAQ,MAAM;AACrC,MAAI,SACF,QAAO;MAEP,QAAO,OAAO,IACZ,CACE,EAAE,IAAI,OAAO,QAAQ,KAAK,YAAY,YAAa,GAAGC,QAAM,EAC5D,UAEA,YAAY,IAAI,IAAI,OAAO,IAAI,GAAG,uBAChC,IAAC;GAAY;GAAsB,GAAIA;aACpC;KADmB,MAAM,MAElB,CAEf;CAEJ,GAAE,CAAC,UAAU,KAAM,EAAC;AAErB,wBAAO,IAAC,OAAO;EAAI,GAAI,aAAa,KAAK;YAAG;GAA8B;AAC3E,GACD,OACD,EAAE;AAIH,MAAa,UAAU,YAAoC,UAAU,MAAM,SAEzE,CAAC,UAAU;CACT,MAAM,EAAE,cAAc,GAAG,OAAO,MAAM;AAEtC,QAAO,cAAc;AACtB,EACF;AAID,MAAaC,aAAkC,CAAC,EAAE,UAAU,KAAK;CAC/D,MAAM,EAAE,OAAO,GAAG,qBAAqB;AAEvC,QAAO,QAAQ,MAAM;AACnB,MAAI,SACF,QAAO;MAEP,QAAO,OAAO,IAAI,CAAC,EAAE,IAAI,OAAO,YAAY,EAAE,UAC5C,YAAY,MAAM,IAAI,OAAO,MAAM,GAAG,uBACpC,IAAC;GAA4B,GAAI;aAC9B;KADa,MAAM,MAEV,CAEf;CAEJ,GAAE,CAAC,UAAU,KAAM,EAAC;AACtB;AAID,MAAa,YAAY,YAAmC,OAAO,QAAQ,SAEzE,CAAC,UAAU;CACT,MAAM,EAAE,MAAM,cAAc,GAAG,qBAAqB;CACpD,MAAM,EAAE,UAAU,SAAS,cAAc,GAAG,YAAY,MAAM;CAC9D,MAAM,WAAW,aAAa;EAAE;EAAM;EAAc;EAAS,GAAG;CAAO,EAAC;AAExE,QAAO;EAAE,GAAG,cAAc;EAAE;CAAU;AACvC,EACF"}

package/dist/esm/components/tabs/use-tabs.js CHANGED Viewed

@@ -5,7 +5,9 @@ import { createContext } from "../../utils/context.js";
 import { runKeyAction } from "../../utils/dom.js";
 import { useUpdateEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { isUndefined } from "../../utils/common/assertion.js";
+import { handlerAll } from "../../utils/common/function.js";
+import { cx } from "../../utils/common/string.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { createDescendant } from "../../hooks/use-descendant/index.js";
 import { useCallback, useId, useState } from "react";
@@ -59,7 +61,7 @@ const useTabs = ({ id, defaultIndex = 0, index: indexProp, manual = false, orien
 		onFocusFirstTab
 	]);
 	useUpdateEffect(() => {
-		if ((0, utils_exports.isUndefined)(indexProp)) return;
+		if (isUndefined(indexProp)) return;
 		setIndex(indexProp);
 		setFocusedIndex(indexProp);
 	}, [indexProp]);
@@ -73,7 +75,7 @@ const useTabs = ({ id, defaultIndex = 0, index: indexProp, manual = false, orien
 		"aria-orientation": orientation,
 		role: "tablist",
 		...props,
-		onKeyDown: (0, utils_exports.handlerAll)(props.onKeyDown, onKeyDown)
+		onKeyDown: handlerAll(props.onKeyDown, onKeyDown)
 	}), [orientation, onKeyDown]);
 	return {
 		focusedIndex,
@@ -126,8 +128,8 @@ const useTab = ({ id, disabled,...rest } = {}) => {
 		...rest,
 		...props,
 		ref: mergeRefs(ref, register),
-		onClick: (0, utils_exports.handlerAll)(props.onClick, rest.onClick, onClick),
-		onFocus: (0, utils_exports.handlerAll)(props.onFocus, rest.onFocus, onFocus)
+		onClick: handlerAll(props.onClick, rest.onClick, onClick),
+		onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus)
 	}), [
 		disabled,
 		id,
@@ -154,7 +156,7 @@ const useTabPanel = ({ "aria-labelledby": ariaLabelledbyProp,...rest } = {}) =>
 	const selected = index === selectedIndex;
 	const getRootProps = useCallback(({ ref, "aria-labelledby": ariaLabelledby,...props } = {}) => ({
 		id,
-		"aria-labelledby": (0, utils_exports.cx)(ariaLabelledbyProp, ariaLabelledby, tabId),
+		"aria-labelledby": cx(ariaLabelledbyProp, ariaLabelledby, tabId),
 		"data-orientation": orientation,
 		hidden: !selected,
 		role: "tabpanel",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tabs.js","names":["ev: KeyboardEvent<HTMLDivElement>","getRootProps: PropGetter","getListProps: PropGetter","getRootProps: PropGetter<\"button\">"],"sources":["../../../../src/components/tabs/use-tabs.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport {\n createContext,\n cx,\n handlerAll,\n isUndefined,\n mergeRefs,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\n\nexport const {\n DescendantsContext: TabDescendantsContext,\n useDescendant: useTabDescendant,\n useDescendants: useTabDescendants,\n} = createDescendant<HTMLButtonElement>()\n\nexport const {\n DescendantsContext: TabPanelDescendantsContext,\n useDescendant: useTabPanelDescendant,\n useDescendants: useTabPanelDescendants,\n} = createDescendant<HTMLDivElement>()\n\ninterface TabsContext\n extends Omit<\n UseTabsReturn,\n \"getRootProps\" \| \"tabDescendants\" \| \"tabPanelDescendants\"\n > {}\n\nexport const [TabsContext, useTabsContext] = createContext<TabsContext>({\n name: \"TabsContext\",\n})\n\nexport interface UseTabsProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The index of the selected tab.\n /\n defaultIndex?: number\n /\n The index of the selected tab.\n /\n index?: number\n /\n If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n \n If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n \n @default false\n /\n manual?: boolean\n /\n The orientation of the tabs.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The callback invoked when the index changes.\n */\n onChange?: (index: number) => void\n}\n\nexport const useTabs = ({\n id,\n defaultIndex = 0,\n index: indexProp,\n manual = false,\n orientation = \"horizontal\",\n onChange,\n ...rest\n}: UseTabsProps = {}) => {\n const uuid = useId()\n const tabDescendants = useTabDescendants()\n const tabPanelDescendants = useTabPanelDescendants()\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [focusedIndex, setFocusedIndex] = useState<number>(index)\n const horizontal = orientation === \"horizontal\"\n\n id ??= uuid\n\n const onFocusFirstTab = useCallback(() => {\n const first = tabDescendants.enabledFirstValue()\n\n if (first) first.node.focus()\n }, [tabDescendants])\n\n const onFocusLastTab = useCallback(() => {\n const last = tabDescendants.enabledLastValue()\n\n if (last) last.node.focus()\n }, [tabDescendants])\n\n const onFocusNextTab = useCallback(() => {\n const next = tabDescendants.enabledNextValue(focusedIndex)\n\n if (next) next.node.focus()\n }, [tabDescendants, focusedIndex])\n\n const onFocusPrevTab = useCallback(() => {\n const prev = tabDescendants.enabledPrevValue(focusedIndex)\n\n if (prev) prev.node.focus()\n }, [tabDescendants, focusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: !horizontal ? onFocusNextTab : undefined,\n ArrowLeft: horizontal ? onFocusPrevTab : undefined,\n ArrowRight: horizontal ? onFocusNextTab : undefined,\n ArrowUp: !horizontal ? onFocusPrevTab : undefined,\n End: onFocusLastTab,\n Home: onFocusFirstTab,\n })\n },\n [\n horizontal,\n onFocusNextTab,\n onFocusPrevTab,\n onFocusLastTab,\n onFocusFirstTab,\n ],\n )\n\n useUpdateEffect(() => {\n if (isUndefined(indexProp)) return\n\n setIndex(indexProp)\n setFocusedIndex(indexProp)\n }, [indexProp])\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n \"data-orientation\": orientation,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n }),\n [orientation, rest],\n )\n\n const getListProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [orientation, onKeyDown],\n )\n\n return {\n focusedIndex,\n index,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n tabDescendants,\n tabPanelDescendants,\n getListProps,\n getRootProps,\n }\n}\n\nexport type UseTabsReturn = ReturnType<typeof useTabs>\n\nexport interface UseTabProps extends HTMLProps<\"button\"> {}\n\nexport const useTab = ({ id, disabled, ...rest }: UseTabProps = {}) => {\n const uuid = useId()\n const {\n index: selectedIndex,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n } = useTabsContext()\n const { index, register } = useTabDescendant({ disabled })\n const { descendants } = useTabPanelDescendant()\n const tabPanelId = descendants.value(index)?.node.id\n const selected = index === selectedIndex\n\n id ??= uuid\n\n const onClick = useCallback(() => {\n if (!disabled) setIndex(index)\n }, [index, setIndex, disabled])\n\n const onFocus = useCallback(() => {\n if (disabled) return\n\n setFocusedIndex(index)\n\n if (!manual) setIndex(index)\n }, [setFocusedIndex, index, manual, disabled, setIndex])\n\n const getRootProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n type: \"button\",\n \"aria-controls\": tabPanelId,\n \"aria-selected\": selected,\n \"data-orientation\": orientation,\n disabled,\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, register),\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n }),\n [\n disabled,\n id,\n onClick,\n onFocus,\n orientation,\n register,\n rest,\n selected,\n tabPanelId,\n ],\n )\n\n return { index, selected, getRootProps }\n}\n\nexport type UseTabReturn = ReturnType<typeof useTab>\n\nexport interface UseTabPanelProps extends HTMLProps {}\n\nexport const useTabPanel = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n ...rest\n}: UseTabPanelProps = {}) => {\n const id = useId()\n const { index: selectedIndex, orientation } = useTabsContext()\n const { index, register } = useTabPanelDescendant()\n const { descendants } = useTabDescendant()\n const tabId = descendants.value(index)?.node.id\n const selected = index === selectedIndex\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id,\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, tabId),\n \"data-orientation\": orientation,\n hidden: !selected,\n role: \"tabpanel\",\n tabIndex: selected ? 0 : -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, register),\n }),\n [id, ariaLabelledbyProp, orientation, register, rest, selected, tabId],\n )\n\n return { index, selected, getRootProps }\n}\n\nexport type UseTabPanelReturn = ReturnType<typeof useTabPanel>\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-tabs.js","names":["ev: KeyboardEvent<HTMLDivElement>","getRootProps: PropGetter","getListProps: PropGetter","getRootProps: PropGetter<\"button\">"],"sources":["../../../../src/components/tabs/use-tabs.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type { HTMLProps, Orientation, PropGetter } from \"../../core\"\nimport { useCallback, useId, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { createDescendant } from \"../../hooks/use-descendant\"\nimport {\n createContext,\n cx,\n handlerAll,\n isUndefined,\n mergeRefs,\n runKeyAction,\n useUpdateEffect,\n} from \"../../utils\"\n\nexport const {\n DescendantsContext: TabDescendantsContext,\n useDescendant: useTabDescendant,\n useDescendants: useTabDescendants,\n} = createDescendant<HTMLButtonElement>()\n\nexport const {\n DescendantsContext: TabPanelDescendantsContext,\n useDescendant: useTabPanelDescendant,\n useDescendants: useTabPanelDescendants,\n} = createDescendant<HTMLDivElement>()\n\ninterface TabsContext\n extends Omit<\n UseTabsReturn,\n \"getRootProps\" \| \"tabDescendants\" \| \"tabPanelDescendants\"\n > {}\n\nexport const [TabsContext, useTabsContext] = createContext<TabsContext>({\n name: \"TabsContext\",\n})\n\nexport interface UseTabsProps extends Omit<HTMLProps, \"onChange\"> {\n /*\n The index of the selected tab.\n /\n defaultIndex?: number\n /\n The index of the selected tab.\n /\n index?: number\n /\n If `true`, the tabs will be manually activated and display its panel by pressing Space or Enter.\n \n If `false`, the tabs will be automatically activated and their panel is displayed when they receive focus.\n \n @default false\n /\n manual?: boolean\n /\n The orientation of the tabs.\n \n @default 'horizontal'\n /\n orientation?: Orientation\n /\n The callback invoked when the index changes.\n */\n onChange?: (index: number) => void\n}\n\nexport const useTabs = ({\n id,\n defaultIndex = 0,\n index: indexProp,\n manual = false,\n orientation = \"horizontal\",\n onChange,\n ...rest\n}: UseTabsProps = {}) => {\n const uuid = useId()\n const tabDescendants = useTabDescendants()\n const tabPanelDescendants = useTabPanelDescendants()\n const [index, setIndex] = useControllableState({\n defaultValue: defaultIndex,\n value: indexProp,\n onChange,\n })\n const [focusedIndex, setFocusedIndex] = useState<number>(index)\n const horizontal = orientation === \"horizontal\"\n\n id ??= uuid\n\n const onFocusFirstTab = useCallback(() => {\n const first = tabDescendants.enabledFirstValue()\n\n if (first) first.node.focus()\n }, [tabDescendants])\n\n const onFocusLastTab = useCallback(() => {\n const last = tabDescendants.enabledLastValue()\n\n if (last) last.node.focus()\n }, [tabDescendants])\n\n const onFocusNextTab = useCallback(() => {\n const next = tabDescendants.enabledNextValue(focusedIndex)\n\n if (next) next.node.focus()\n }, [tabDescendants, focusedIndex])\n\n const onFocusPrevTab = useCallback(() => {\n const prev = tabDescendants.enabledPrevValue(focusedIndex)\n\n if (prev) prev.node.focus()\n }, [tabDescendants, focusedIndex])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent<HTMLDivElement>) => {\n runKeyAction(ev, {\n ArrowDown: !horizontal ? onFocusNextTab : undefined,\n ArrowLeft: horizontal ? onFocusPrevTab : undefined,\n ArrowRight: horizontal ? onFocusNextTab : undefined,\n ArrowUp: !horizontal ? onFocusPrevTab : undefined,\n End: onFocusLastTab,\n Home: onFocusFirstTab,\n })\n },\n [\n horizontal,\n onFocusNextTab,\n onFocusPrevTab,\n onFocusLastTab,\n onFocusFirstTab,\n ],\n )\n\n useUpdateEffect(() => {\n if (isUndefined(indexProp)) return\n\n setIndex(indexProp)\n setFocusedIndex(indexProp)\n }, [indexProp])\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, ...props } = {}) => ({\n \"data-orientation\": orientation,\n ...rest,\n ...props,\n ref: mergeRefs(ref, rest.ref),\n }),\n [orientation, rest],\n )\n\n const getListProps: PropGetter = useCallback(\n (props = {}) => ({\n \"aria-orientation\": orientation,\n role: \"tablist\",\n ...props,\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [orientation, onKeyDown],\n )\n\n return {\n focusedIndex,\n index,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n tabDescendants,\n tabPanelDescendants,\n getListProps,\n getRootProps,\n }\n}\n\nexport type UseTabsReturn = ReturnType<typeof useTabs>\n\nexport interface UseTabProps extends HTMLProps<\"button\"> {}\n\nexport const useTab = ({ id, disabled, ...rest }: UseTabProps = {}) => {\n const uuid = useId()\n const {\n index: selectedIndex,\n manual,\n orientation,\n setFocusedIndex,\n setIndex,\n } = useTabsContext()\n const { index, register } = useTabDescendant({ disabled })\n const { descendants } = useTabPanelDescendant()\n const tabPanelId = descendants.value(index)?.node.id\n const selected = index === selectedIndex\n\n id ??= uuid\n\n const onClick = useCallback(() => {\n if (!disabled) setIndex(index)\n }, [index, setIndex, disabled])\n\n const onFocus = useCallback(() => {\n if (disabled) return\n\n setFocusedIndex(index)\n\n if (!manual) setIndex(index)\n }, [setFocusedIndex, index, manual, disabled, setIndex])\n\n const getRootProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n id,\n type: \"button\",\n \"aria-controls\": tabPanelId,\n \"aria-selected\": selected,\n \"data-orientation\": orientation,\n disabled,\n role: \"tab\",\n tabIndex: selected ? 0 : -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, register),\n onClick: handlerAll(props.onClick, rest.onClick, onClick),\n onFocus: handlerAll(props.onFocus, rest.onFocus, onFocus),\n }),\n [\n disabled,\n id,\n onClick,\n onFocus,\n orientation,\n register,\n rest,\n selected,\n tabPanelId,\n ],\n )\n\n return { index, selected, getRootProps }\n}\n\nexport type UseTabReturn = ReturnType<typeof useTab>\n\nexport interface UseTabPanelProps extends HTMLProps {}\n\nexport const useTabPanel = ({\n \"aria-labelledby\": ariaLabelledbyProp,\n ...rest\n}: UseTabPanelProps = {}) => {\n const id = useId()\n const { index: selectedIndex, orientation } = useTabsContext()\n const { index, register } = useTabPanelDescendant()\n const { descendants } = useTabDescendant()\n const tabId = descendants.value(index)?.node.id\n const selected = index === selectedIndex\n\n const getRootProps: PropGetter = useCallback(\n ({ ref, \"aria-labelledby\": ariaLabelledby, ...props } = {}) => ({\n id,\n \"aria-labelledby\": cx(ariaLabelledbyProp, ariaLabelledby, tabId),\n \"data-orientation\": orientation,\n hidden: !selected,\n role: \"tabpanel\",\n tabIndex: selected ? 0 : -1,\n ...rest,\n ...props,\n ref: mergeRefs(ref, register),\n }),\n [id, ariaLabelledbyProp, orientation, register, rest, selected, tabId],\n )\n\n return { index, selected, getRootProps }\n}\n\nexport type UseTabPanelReturn = ReturnType<typeof useTabPanel>\n"],"mappings":"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"}

package/dist/esm/components/tag/tag.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
-import { utils_exports } from "../../utils/index.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { styled } from "../../core/system/factory.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { XIcon } from "../icon/icons/x-icon.js";
@@ -23,7 +23,7 @@ const Tag = withProvider(({ children, disabled, endIcon, startIcon, closeButtonP
 	return /* @__PURE__ */ jsx(ComponentContext, {
 		value: context,
 		children: /* @__PURE__ */ jsxs(styled.span, {
-			"data-disabled": (0, utils_exports.dataAttr)(disabled),
+			"data-disabled": dataAttr(disabled),
 			...rest,
 			children: [
 				startIcon ? /* @__PURE__ */ jsx(TagStartIcon, {
@@ -49,21 +49,21 @@ const Tag = withProvider(({ children, disabled, endIcon, startIcon, closeButtonP
 const TagContent = withContext("span", "content")(void 0, (props) => {
 	const { disabled } = useComponentContext();
 	return {
-		"data-disabled": (0, utils_exports.dataAttr)(disabled),
+		"data-disabled": dataAttr(disabled),
 		...props
 	};
 });
 const TagStartIcon = withContext("span", ["icon", "start"])(void 0, (props) => {
 	const { disabled } = useComponentContext();
 	return {
-		"data-disabled": (0, utils_exports.dataAttr)(disabled),
+		"data-disabled": dataAttr(disabled),
 		...props
 	};
 });
 const TagEndIcon = withContext("span", ["icon", "end"])(void 0, (props) => {
 	const { disabled } = useComponentContext();
 	return {
-		"data-disabled": (0, utils_exports.dataAttr)(disabled),
+		"data-disabled": dataAttr(disabled),
 		...props
 	};
 });
@@ -78,7 +78,7 @@ const TagCloseButton = withContext("span", ["icon", "closeButton"])(void 0, ({ c
 	const { t } = useI18n("tag");
 	return {
 		"aria-label": t("Close tag"),
-		"data-disabled": (0, utils_exports.dataAttr)(disabled),
+		"data-disabled": dataAttr(disabled),
 		children: children || /* @__PURE__ */ jsx(XIcon, {}),
 		...rest
 	};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.js","names":[],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n extends HTMLStyledProps<\"span\">,\n ThemeProps<TagStyle> {\n /*\n If `true`, the tag is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n Icon to be displayed to the end of the tag.\n /\n endIcon?: ReactNode\n /\n Icon to be displayed to the start of the tag.\n /\n startIcon?: ReactNode\n /\n Props for tag close button element.\n /\n closeButtonProps?: TagCloseButtonProps\n /\n Props for content element.\n /\n contentProps?: TagContentProps\n /\n Props for icon element.\n /\n iconProps?: HTMLStyledProps<\"span\">\n /\n Function to be executed when the close button is clicked.\n /\n onClose?: MouseEventHandler<HTMLElement>\n}\n\nexport const {\n ComponentContext,\n PropsContext: TagPropsContext,\n useComponentContext,\n usePropsContext: useTagPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\n/\n `Tag` is a component used to categorize or organize items using keywords that describe them.\n \n @see https://yamada-ui.com/components/tag\n */\nexport const Tag = withProvider(\n ({\n children,\n disabled,\n endIcon,\n startIcon,\n closeButtonProps,\n contentProps,\n iconProps,\n onClose,\n ...rest\n }) => {\n const context = useMemo(() => ({ disabled }), [disabled])\n\n return (\n <ComponentContext value={context}>\n <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n {startIcon ? (\n <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n ) : null}\n\n {children ? (\n <TagContent {...contentProps}>{children}</TagContent>\n ) : null}\n\n {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n {onClose ? (\n <TagCloseButton onClick={onClose} {...closeButtonProps} />\n ) : null}\n </styled.span>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n undefined,\n (props) => {\n const { disabled } = useComponentContext()\n\n return { \"data-disabled\": dataAttr(disabled), ...props }\n },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n \"icon\",\n \"start\",\n])(undefined, (props) => {\n const { disabled } = useComponentContext()\n\n return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n \"icon\",\n \"end\",\n])(undefined, (props) => {\n const { disabled } = useComponentContext()\n\n return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n \"icon\",\n \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n const ref = useRef<HTMLSpanElement>(null)\n const { disabled } = useComponentContext()\n const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n const { t } = useI18n(\"tag\")\n\n return {\n \"aria-label\": t(\"Close tag\"),\n \"data-disabled\": dataAttr(disabled),\n children: children \|\| <XIcon />,\n ...rest,\n }\n})\n"],"mappings":";;;;;;;;;;;;;;AAkDA,MAAa,EACX,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,cACD,GAAG,oBAA0D,OAAO,SAAS;;;;;;AAO9E,MAAa,MAAM,aACjB,CAAC,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,QACA,GAAG,MACJ,KAAK;CACJ,MAAM,UAAU,QAAQ,OAAO,EAAE,SAAU,IAAG,CAAC,QAAS,EAAC;AAEzD,wBACE,IAAC;EAAiB,OAAO;4BACvB,KAAC,OAAO;GAAK,iBAAe,~~4BAAS~~,SAAS;GAAE,GAAI;;IACjD,4BACC,IAAC;KAAa,GAAI;eAAY;MAAyB,GACrD;IAEH,2BACC,IAAC;KAAW,GAAI;KAAe;MAAsB,GACnD;IAEH,0BAAU,IAAC;KAAW,GAAI;eAAY;MAAqB,GAAG;IAE9D,0BACC,IAAC;KAAe,SAAS;KAAS,GAAI;MAAoB,GACxD;;IACQ;GACG;AAEtB,GACD,QACA,EAAE,eAAe,CAAC,UAAW,EAAE,EAChC,EAAE;AAIH,MAAM,aAAa,YAAqC,QAAQ,UAAU,SAExE,CAAC,UAAU;CACT,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,~~4BAAS~~,SAAS;EAAE,GAAG;CAAO;AACzD,EACF;AAID,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACD,EAAC,SAAY,CAAC,UAAU;CACvB,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,~~4BAAS~~,SAAS;EAAE,GAAG;CAAO;AACzD,EAAC;AAIF,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACD,EAAC,SAAY,CAAC,UAAU;CACvB,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,~~4BAAS~~,SAAS;EAAE,GAAG;CAAO;AACzD,EAAC;AAIF,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACD,EAAC,SAAY,CAAC,EAAE,SAAU,GAAG,OAAO,KAAK;CACxC,MAAM,MAAM,OAAwB,KAAK;CACzC,MAAM,EAAE,UAAU,GAAG,qBAAqB;CAC1C,MAAM,OAAO,aAA8B;EAAE;EAAK;EAAU,GAAG;CAAO,EAAC;CACvE,MAAM,EAAE,GAAG,GAAG,QAAQ,MAAM;AAE5B,QAAO;EACL,cAAc,EAAE,YAAY;EAC5B,iBAAiB,~~4BAAS~~,SAAS;EACnC,UAAU,4BAAY,IAAC,UAAQ;EAC/B,GAAG;CACJ;AACF,EAAC"}
1	+ {"version":3,"file":"tag.js","names":[],"sources":["../../../../src/components/tag/tag.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEventHandler, ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { TagStyle } from \"./tag.style\"\nimport { useMemo, useRef } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useClickable } from \"../../hooks/use-clickable\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { dataAttr } from \"../../utils\"\nimport { XIcon } from \"../icon\"\nimport { tagStyle } from \"./tag.style\"\n\ninterface ComponentContext extends Pick<TagProps, \"disabled\"> {}\n\nexport interface TagProps\n extends HTMLStyledProps<\"span\">,\n ThemeProps<TagStyle> {\n /*\n If `true`, the tag is disabled.\n \n @default false\n /\n disabled?: boolean\n /\n Icon to be displayed to the end of the tag.\n /\n endIcon?: ReactNode\n /\n Icon to be displayed to the start of the tag.\n /\n startIcon?: ReactNode\n /\n Props for tag close button element.\n /\n closeButtonProps?: TagCloseButtonProps\n /\n Props for content element.\n /\n contentProps?: TagContentProps\n /\n Props for icon element.\n /\n iconProps?: HTMLStyledProps<\"span\">\n /\n Function to be executed when the close button is clicked.\n /\n onClose?: MouseEventHandler<HTMLElement>\n}\n\nexport const {\n ComponentContext,\n PropsContext: TagPropsContext,\n useComponentContext,\n usePropsContext: useTagPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<TagProps, TagStyle, ComponentContext>(\"tag\", tagStyle)\n\n/\n `Tag` is a component used to categorize or organize items using keywords that describe them.\n \n @see https://yamada-ui.com/components/tag\n */\nexport const Tag = withProvider(\n ({\n children,\n disabled,\n endIcon,\n startIcon,\n closeButtonProps,\n contentProps,\n iconProps,\n onClose,\n ...rest\n }) => {\n const context = useMemo(() => ({ disabled }), [disabled])\n\n return (\n <ComponentContext value={context}>\n <styled.span data-disabled={dataAttr(disabled)} {...rest}>\n {startIcon ? (\n <TagStartIcon {...iconProps}>{startIcon}</TagStartIcon>\n ) : null}\n\n {children ? (\n <TagContent {...contentProps}>{children}</TagContent>\n ) : null}\n\n {endIcon ? <TagEndIcon {...iconProps}>{endIcon}</TagEndIcon> : null}\n\n {onClose ? (\n <TagCloseButton onClick={onClose} {...closeButtonProps} />\n ) : null}\n </styled.span>\n </ComponentContext>\n )\n },\n \"root\",\n { transferProps: [\"disabled\"] },\n)()\n\ninterface TagContentProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagContent = withContext<\"span\", TagContentProps>(\"span\", \"content\")(\n undefined,\n (props) => {\n const { disabled } = useComponentContext()\n\n return { \"data-disabled\": dataAttr(disabled), ...props }\n },\n)\n\ninterface TagStartIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagStartIcon = withContext<\"span\", TagStartIconProps>(\"span\", [\n \"icon\",\n \"start\",\n])(undefined, (props) => {\n const { disabled } = useComponentContext()\n\n return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagEndIconProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagEndIcon = withContext<\"span\", TagEndIconProps>(\"span\", [\n \"icon\",\n \"end\",\n])(undefined, (props) => {\n const { disabled } = useComponentContext()\n\n return { \"data-disabled\": dataAttr(disabled), ...props }\n})\n\ninterface TagCloseButtonProps extends HTMLStyledProps<\"span\"> {}\n\nconst TagCloseButton = withContext<\"span\", TagCloseButtonProps>(\"span\", [\n \"icon\",\n \"closeButton\",\n])(undefined, ({ children, ...props }) => {\n const ref = useRef<HTMLSpanElement>(null)\n const { disabled } = useComponentContext()\n const rest = useClickable<HTMLSpanElement>({ ref, disabled, ...props })\n const { t } = useI18n(\"tag\")\n\n return {\n \"aria-label\": t(\"Close tag\"),\n \"data-disabled\": dataAttr(disabled),\n children: children \|\| <XIcon />,\n ...rest,\n }\n})\n"],"mappings":";;;;;;;;;;;;;;AAkDA,MAAa,EACX,kBACA,cAAc,iBACd,qBACA,iBAAiB,oBACjB,aACA,cACD,GAAG,oBAA0D,OAAO,SAAS;;;;;;AAO9E,MAAa,MAAM,aACjB,CAAC,EACC,UACA,UACA,SACA,WACA,kBACA,cACA,WACA,QACA,GAAG,MACJ,KAAK;CACJ,MAAM,UAAU,QAAQ,OAAO,EAAE,SAAU,IAAG,CAAC,QAAS,EAAC;AAEzD,wBACE,IAAC;EAAiB,OAAO;4BACvB,KAAC,OAAO;GAAK,iBAAe,SAAS,SAAS;GAAE,GAAI;;IACjD,4BACC,IAAC;KAAa,GAAI;eAAY;MAAyB,GACrD;IAEH,2BACC,IAAC;KAAW,GAAI;KAAe;MAAsB,GACnD;IAEH,0BAAU,IAAC;KAAW,GAAI;eAAY;MAAqB,GAAG;IAE9D,0BACC,IAAC;KAAe,SAAS;KAAS,GAAI;MAAoB,GACxD;;IACQ;GACG;AAEtB,GACD,QACA,EAAE,eAAe,CAAC,UAAW,EAAE,EAChC,EAAE;AAIH,MAAM,aAAa,YAAqC,QAAQ,UAAU,SAExE,CAAC,UAAU;CACT,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,SAAS,SAAS;EAAE,GAAG;CAAO;AACzD,EACF;AAID,MAAM,eAAe,YAAuC,QAAQ,CAClE,QACA,OACD,EAAC,SAAY,CAAC,UAAU;CACvB,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,SAAS,SAAS;EAAE,GAAG;CAAO;AACzD,EAAC;AAIF,MAAM,aAAa,YAAqC,QAAQ,CAC9D,QACA,KACD,EAAC,SAAY,CAAC,UAAU;CACvB,MAAM,EAAE,UAAU,GAAG,qBAAqB;AAE1C,QAAO;EAAE,iBAAiB,SAAS,SAAS;EAAE,GAAG;CAAO;AACzD,EAAC;AAIF,MAAM,iBAAiB,YAAyC,QAAQ,CACtE,QACA,aACD,EAAC,SAAY,CAAC,EAAE,SAAU,GAAG,OAAO,KAAK;CACxC,MAAM,MAAM,OAAwB,KAAK;CACzC,MAAM,EAAE,UAAU,GAAG,qBAAqB;CAC1C,MAAM,OAAO,aAA8B;EAAE;EAAK;EAAU,GAAG;CAAO,EAAC;CACvE,MAAM,EAAE,GAAG,GAAG,QAAQ,MAAM;AAE5B,QAAO;EACL,cAAc,EAAE,YAAY;EAC5B,iBAAiB,SAAS,SAAS;EACnC,UAAU,4BAAY,IAAC,UAAQ;EAC/B,GAAG;CACJ;AACF,EAAC"}

package/dist/esm/components/textarea/use-autosize.js CHANGED Viewed

@@ -3,7 +3,10 @@
 import { useSafeLayoutEffect, useUpdateEffect } from "../../utils/effect.js";
 import { mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll, noop } from "../../utils/common/function.js";
+import { createdDom } from "../../utils/common/dom.js";
+import { addDomEvent } from "../../utils/common/event.js";
+import { pickObject } from "../../utils/common/object.js";
 import { useCallback, useRef } from "react";
 //#region src/components/textarea/use-autosize.ts
@@ -44,7 +47,7 @@ const HIDDEN_STYLE = {
 const getSizingStyle = (el) => {
 	const style = window.getComputedStyle(el);
 	if (style == null) return null;
-	const computedStyle = (0, utils_exports.pickObject)(style, SIZING_STYLE_PROPERTIES);
+	const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES);
 	if (computedStyle.boxSizing === "") return null;
 	const padding = parseFloat(computedStyle.paddingBottom) + parseFloat(computedStyle.paddingTop);
 	const border = parseFloat(computedStyle.borderBottomWidth) + parseFloat(computedStyle.borderTopWidth);
@@ -105,17 +108,17 @@ const useAutosize = ({ disabled = false, maxRows = Infinity, minRows = 2 } = {})
 			resize: !disabled ? "none" : void 0,
 			...props.style
 		},
-		onChange: (0, utils_exports.handlerAll)(props.onChange, !disabled ? onResizeTextarea : utils_exports.noop)
+		onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop)
 	}), [
 		ref,
 		onResizeTextarea,
 		disabled
 	]);
 	useSafeLayoutEffect(() => {
-		if (!(0, utils_exports.createdDom)() || disabled) return;
+		if (!createdDom() || disabled) return;
 		onResizeTextarea();
-		const unsubscribeResize = (0, utils_exports.addDomEvent)(window, "resize", onResizeTextarea);
-		const unsubscribeLoadingdone = (0, utils_exports.addDomEvent)(document.fonts, "loadingdone", onResizeTextarea);
+		const unsubscribeResize = addDomEvent(window, "resize", onResizeTextarea);
+		const unsubscribeLoadingdone = addDomEvent(document.fonts, "loadingdone", onResizeTextarea);
 		return () => {
 			unsubscribeResize();
 			unsubscribeLoadingdone();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-autosize.js","names":["el: HTMLElement","el: HTMLTextAreaElement","sizingStyle: SizingStyle","value: string","maxRows: number","minRows: number","rows: number","value","getTextareaProps: PropGetter<\"textarea\">"~~,"noop"~~],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n addDomEvent,\n createdDom,\n handlerAll,\n mergeRefs,\n noop,\n pickObject,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n \"borderBottomWidth\",\n \"borderLeftWidth\",\n \"borderRightWidth\",\n \"borderTopWidth\",\n \"boxSizing\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"letterSpacing\",\n \"lineHeight\",\n \"paddingBottom\",\n \"paddingLeft\",\n \"paddingRight\",\n \"paddingTop\",\n // non-standard\n \"tabSize\",\n \"textIndent\",\n // non-standard\n \"textRendering\",\n \"textTransform\",\n \"width\",\n \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n height: \"0\",\n \"max-height\": \"none\",\n \"min-height\": \"0\",\n overflow: \"hidden\",\n position: \"absolute\",\n right: \"0\",\n top: \"0\",\n visibility: \"hidden\",\n \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n (typeof SIZING_STYLE_PROPERTIES)[number],\n keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n style: Pick<CSSStyleDeclaration, SizingProperties>\n border: number\n padding: number\n rowHeight: number\n}\n\nconst getSizingStyle = (el: HTMLElement): null \| SizingStyle => {\n const style = window.getComputedStyle(el) as CSSStyleDeclaration \| undefined\n\n if (style == null) return null\n\n const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n if (computedStyle.boxSizing === \"\") return null\n\n const padding =\n parseFloat(computedStyle.paddingBottom!) +\n parseFloat(computedStyle.paddingTop!)\n\n const border =\n parseFloat(computedStyle.borderBottomWidth!) +\n parseFloat(computedStyle.borderTopWidth!)\n\n const rowHeight = parseFloat(computedStyle.lineHeight!)\n\n return {\n style: computedStyle,\n border,\n padding,\n rowHeight,\n }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n Object.keys(HIDDEN_STYLE).forEach((key) => {\n el.style.setProperty(\n key,\n HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n \"important\",\n )\n })\n}\n\nconst calcRows = (\n el: HTMLTextAreaElement,\n sizingStyle: SizingStyle,\n value: string,\n maxRows: number,\n minRows: number,\n) => {\n const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n Object.assign(cloneEl.style, sizingStyle.style)\n\n setHiddenStyle(cloneEl)\n\n cloneEl.value = value\n\n document.body.appendChild(cloneEl)\n\n let rows: number\n\n if (cloneEl.scrollHeight) {\n const rowHeight = sizingStyle.rowHeight\n\n rows = Math.min(\n maxRows,\n Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n )\n } else {\n const lineBreaks = (value.match(/\\n/g) \|\| []).length\n\n rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n }\n\n document.body.removeChild(cloneEl)\n\n return rows\n}\n\nexport interface UseAutosizeProps {\n /*\n If `true`, the Textarea height will not be adjusted.\n \n @default false\n /\n disabled?: boolean\n /\n Autosize up to maxRows rows.\n \n @default Infinity\n /\n maxRows?: number\n /\n Autosize up to minRows rows.\n \n @default 2\n */\n minRows?: number\n}\n\nexport const useAutosize = ({\n disabled = false,\n maxRows = Infinity,\n minRows = 2,\n}: UseAutosizeProps = {}) => {\n const ref = useRef<HTMLTextAreaElement>(null)\n const beforeValueRef = useRef<string>(null)\n const value = ref.current?.value ?? \"\"\n\n const onResizeTextarea = useCallback(() => {\n const el = ref.current\n\n if (!el) return\n\n let { placeholder, value } = el\n\n if (value === beforeValueRef.current) return\n\n beforeValueRef.current = value\n\n value \|\|= placeholder \|\| \"x\"\n\n const sizingStyle = getSizingStyle(el)\n\n if (!sizingStyle) return\n\n const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n el.rows = rows\n }, [ref, maxRows, minRows])\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(props.ref, ref),\n style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n }),\n [ref, onResizeTextarea, disabled],\n )\n\n useSafeLayoutEffect(() => {\n if (!createdDom() \|\| disabled) return\n\n onResizeTextarea()\n\n const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n const unsubscribeLoadingdone = addDomEvent(\n document.fonts,\n \"loadingdone\",\n onResizeTextarea,\n )\n\n return () => {\n unsubscribeResize()\n unsubscribeLoadingdone()\n }\n }, [])\n\n useUpdateEffect(() => {\n if (disabled) return\n\n onResizeTextarea()\n }, [value])\n\n return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":"~~;;;;;;;;;~~AAeA,MAAM,0BAA0B;CAC9B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;AACD;AAED,MAAM,eAAe;CACnB,QAAQ;CACR,cAAc;CACd,cAAc;CACd,UAAU;CACV,UAAU;CACV,OAAO;CACP,KAAK;CACL,YAAY;CACZ,WAAW;AACZ;AAcD,MAAM,iBAAiB,CAACA,OAAwC;CAC9D,MAAM,QAAQ,OAAO,iBAAiB,GAAG;AAEzC,KAAI,SAAS,KAAM,QAAO;CAE1B,MAAM,gBAAgB,~~8BAAW~~,OAAO,wBAAwB;AAEhE,KAAI,cAAc,cAAc,GAAI,QAAO;CAE3C,MAAM,UACJ,WAAW,cAAc,cAAe,GACxC,WAAW,cAAc,WAAY;CAEvC,MAAM,SACJ,WAAW,cAAc,kBAAmB,GAC5C,WAAW,cAAc,eAAgB;CAE3C,MAAM,YAAY,WAAW,cAAc,WAAY;AAEvD,QAAO;EACL,OAAO;EACP;EACA;EACA;CACD;AACF;AAED,MAAM,iBAAiB,CAACA,OAAoB;AAC1C,QAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,QAAQ;AACzC,KAAG,MAAM,YACP,KACA,aAAa,MACb,YACD;CACF,EAAC;AACH;AAED,MAAM,WAAW,CACfC,IACAC,aACAC,OACAC,SACAC,YACG;CACH,MAAM,UAAU,GAAG,WAAW;AAE9B,QAAO,OAAO,QAAQ,OAAO,YAAY,MAAM;AAE/C,gBAAe,QAAQ;AAEvB,SAAQ,QAAQ;AAEhB,UAAS,KAAK,YAAY,QAAQ;CAElC,IAAIC;AAEJ,KAAI,QAAQ,cAAc;EACxB,MAAM,YAAY,YAAY;AAE9B,SAAO,KAAK,IACV,SACA,KAAK,IAAI,SAAS,KAAK,MAAM,QAAQ,eAAe,UAAU,CAAC,CAChE;CACF,OAAM;EACL,MAAM,cAAc,MAAM,MAAM,MAAM,IAAI,CAAE,GAAE;AAE9C,SAAO,KAAK,IAAI,SAAS,KAAK,IAAI,SAAS,aAAa,EAAE,CAAC;CAC5D;AAED,UAAS,KAAK,YAAY,QAAQ;AAElC,QAAO;AACR;AAuBD,MAAa,cAAc,CAAC,EAC1B,WAAW,OACX,UAAU,UACV,UAAU,GACO,GAAG,CAAE,MAAK;CAC3B,MAAM,MAAM,OAA4B,KAAK;CAC7C,MAAM,iBAAiB,OAAe,KAAK;CAC3C,MAAM,QAAQ,IAAI,SAAS,SAAS;CAEpC,MAAM,mBAAmB,YAAY,MAAM;EACzC,MAAM,KAAK,IAAI;AAEf,OAAK,GAAI;EAET,IAAI,EAAE,aAAa,gBAAO,GAAG;AAE7B,MAAIC,YAAU,eAAe,QAAS;AAEtC,iBAAe,UAAUA;AAEzB,cAAU,eAAe;EAEzB,MAAM,cAAc,eAAe,GAAG;AAEtC,OAAK,YAAa;EAElB,MAAM,OAAO,SAAS,IAAI,aAAaA,SAAO,SAAS,QAAQ;AAE/D,KAAG,OAAO;CACX,GAAE;EAAC;EAAK;EAAS;CAAQ,EAAC;CAE3B,MAAMC,mBAA2C,YAC/C,CAAC,QAAQ,CAAE,OAAM;EACf,GAAG;EACH,KAAK,UAAU,MAAM,KAAK,IAAI;EAC9B,OAAO;GAAE,SAAS,WAAW;GAAoB,GAAG,MAAM;EAAO;EACjE,UAAU,~~8BAAW~~,MAAM,WAAW,WAAW,~~mBAAmBC~~,~~mBAAK~~;CAC1E,IACD;EAAC;EAAK;EAAkB;CAAS,EAClC;AAED,qBAAoB,MAAM;AACxB,OAAK~~,+BAAY~~,IAAI,SAAU;AAE/B,oBAAkB;EAElB,MAAM,oBAAoB~~,+BAAY~~,QAAQ,UAAU,iBAAiB;EACzE,MAAM,yBAAyB~~,+BAC7B~~,SAAS,OACT,eACA,iBACD;AAED,SAAO,MAAM;AACX,sBAAmB;AACnB,2BAAwB;EACzB;CACF,GAAE,CAAE,EAAC;AAEN,iBAAgB,MAAM;AACpB,MAAI,SAAU;AAEd,oBAAkB;CACnB,GAAE,CAAC,KAAM,EAAC;AAEX,QAAO;EAAE;EAAK;EAAkB;CAAkB;AACnD"}
1	+ {"version":3,"file":"use-autosize.js","names":["el: HTMLElement","el: HTMLTextAreaElement","sizingStyle: SizingStyle","value: string","maxRows: number","minRows: number","rows: number","value","getTextareaProps: PropGetter<\"textarea\">"],"sources":["../../../../src/components/textarea/use-autosize.ts"],"sourcesContent":["\"use client\"\n\nimport type { PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport {\n addDomEvent,\n createdDom,\n handlerAll,\n mergeRefs,\n noop,\n pickObject,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\n\nconst SIZING_STYLE_PROPERTIES = [\n \"borderBottomWidth\",\n \"borderLeftWidth\",\n \"borderRightWidth\",\n \"borderTopWidth\",\n \"boxSizing\",\n \"fontFamily\",\n \"fontSize\",\n \"fontStyle\",\n \"fontWeight\",\n \"letterSpacing\",\n \"lineHeight\",\n \"paddingBottom\",\n \"paddingLeft\",\n \"paddingRight\",\n \"paddingTop\",\n // non-standard\n \"tabSize\",\n \"textIndent\",\n // non-standard\n \"textRendering\",\n \"textTransform\",\n \"width\",\n \"wordBreak\",\n] as const\n\nconst HIDDEN_STYLE = {\n height: \"0\",\n \"max-height\": \"none\",\n \"min-height\": \"0\",\n overflow: \"hidden\",\n position: \"absolute\",\n right: \"0\",\n top: \"0\",\n visibility: \"hidden\",\n \"z-index\": \"-1000\",\n} as const\n\ntype SizingProperties = Extract<\n (typeof SIZING_STYLE_PROPERTIES)[number],\n keyof CSSStyleDeclaration\n>\n\ninterface SizingStyle {\n style: Pick<CSSStyleDeclaration, SizingProperties>\n border: number\n padding: number\n rowHeight: number\n}\n\nconst getSizingStyle = (el: HTMLElement): null \| SizingStyle => {\n const style = window.getComputedStyle(el) as CSSStyleDeclaration \| undefined\n\n if (style == null) return null\n\n const computedStyle = pickObject(style, SIZING_STYLE_PROPERTIES)\n\n if (computedStyle.boxSizing === \"\") return null\n\n const padding =\n parseFloat(computedStyle.paddingBottom!) +\n parseFloat(computedStyle.paddingTop!)\n\n const border =\n parseFloat(computedStyle.borderBottomWidth!) +\n parseFloat(computedStyle.borderTopWidth!)\n\n const rowHeight = parseFloat(computedStyle.lineHeight!)\n\n return {\n style: computedStyle,\n border,\n padding,\n rowHeight,\n }\n}\n\nconst setHiddenStyle = (el: HTMLElement) => {\n Object.keys(HIDDEN_STYLE).forEach((key) => {\n el.style.setProperty(\n key,\n HIDDEN_STYLE[key as keyof typeof HIDDEN_STYLE],\n \"important\",\n )\n })\n}\n\nconst calcRows = (\n el: HTMLTextAreaElement,\n sizingStyle: SizingStyle,\n value: string,\n maxRows: number,\n minRows: number,\n) => {\n const cloneEl = el.cloneNode() as HTMLTextAreaElement\n\n Object.assign(cloneEl.style, sizingStyle.style)\n\n setHiddenStyle(cloneEl)\n\n cloneEl.value = value\n\n document.body.appendChild(cloneEl)\n\n let rows: number\n\n if (cloneEl.scrollHeight) {\n const rowHeight = sizingStyle.rowHeight\n\n rows = Math.min(\n maxRows,\n Math.max(minRows, Math.floor(cloneEl.scrollHeight / rowHeight)),\n )\n } else {\n const lineBreaks = (value.match(/\\n/g) \|\| []).length\n\n rows = Math.min(maxRows, Math.max(minRows, lineBreaks + 1))\n }\n\n document.body.removeChild(cloneEl)\n\n return rows\n}\n\nexport interface UseAutosizeProps {\n /*\n If `true`, the Textarea height will not be adjusted.\n \n @default false\n /\n disabled?: boolean\n /\n Autosize up to maxRows rows.\n \n @default Infinity\n /\n maxRows?: number\n /\n Autosize up to minRows rows.\n \n @default 2\n */\n minRows?: number\n}\n\nexport const useAutosize = ({\n disabled = false,\n maxRows = Infinity,\n minRows = 2,\n}: UseAutosizeProps = {}) => {\n const ref = useRef<HTMLTextAreaElement>(null)\n const beforeValueRef = useRef<string>(null)\n const value = ref.current?.value ?? \"\"\n\n const onResizeTextarea = useCallback(() => {\n const el = ref.current\n\n if (!el) return\n\n let { placeholder, value } = el\n\n if (value === beforeValueRef.current) return\n\n beforeValueRef.current = value\n\n value \|\|= placeholder \|\| \"x\"\n\n const sizingStyle = getSizingStyle(el)\n\n if (!sizingStyle) return\n\n const rows = calcRows(el, sizingStyle, value, maxRows, minRows)\n\n el.rows = rows\n }, [ref, maxRows, minRows])\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n (props = {}) => ({\n ...props,\n ref: mergeRefs(props.ref, ref),\n style: { resize: !disabled ? \"none\" : undefined, ...props.style },\n onChange: handlerAll(props.onChange, !disabled ? onResizeTextarea : noop),\n }),\n [ref, onResizeTextarea, disabled],\n )\n\n useSafeLayoutEffect(() => {\n if (!createdDom() \|\| disabled) return\n\n onResizeTextarea()\n\n const unsubscribeResize = addDomEvent(window, \"resize\", onResizeTextarea)\n const unsubscribeLoadingdone = addDomEvent(\n document.fonts,\n \"loadingdone\",\n onResizeTextarea,\n )\n\n return () => {\n unsubscribeResize()\n unsubscribeLoadingdone()\n }\n }, [])\n\n useUpdateEffect(() => {\n if (disabled) return\n\n onResizeTextarea()\n }, [value])\n\n return { ref, getTextareaProps, onResizeTextarea }\n}\n\nexport type UseAutosizeReturn = ReturnType<typeof useAutosize>\n"],"mappings":"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"}

package/dist/esm/components/textarea/use-textarea.js CHANGED Viewed

@@ -2,7 +2,7 @@
 import { assignRef, mergeRefs } from "../../utils/ref.js";
-import { utils_exports } from "../../utils/index.js";
+import { handlerAll, noop } from "../../utils/common/function.js";
 import { useAutosize } from "./use-autosize.js";
 import { useCallback } from "react";
@@ -23,7 +23,7 @@ const useTextarea = ({ autosize, maxRows, minRows, resizeRef,...rest } = {}) =>
 			...rest.style,
 			...style
 		},
-		onChange: (0, utils_exports.handlerAll)(props.onChange, rest.onChange, autosize ? onResizeTextarea : utils_exports.noop)
+		onChange: handlerAll(props.onChange, rest.onChange, autosize ? onResizeTextarea : noop)
 	}), [
 		autosize,
 		onResizeTextarea,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-textarea.js","names":["getTextareaProps: PropGetter<\"textarea\">"~~,"noop"~~],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { assignRef, handlerAll, mergeRefs, noop } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n extends HTMLProps<\"textarea\">,\n Omit<UseAutosizeProps, \"disabled\" \| \"ref\"> {\n /*\n If `true`, the Textarea height auto-adjusts to text height.\n /\n autosize?: boolean\n /\n Ref to a resize function.\n */\n resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n autosize,\n maxRows,\n minRows,\n resizeRef,\n ...rest\n}: UseTextareaProps = {}) => {\n const { ref, onResizeTextarea } = useAutosize({\n disabled: !autosize,\n maxRows,\n minRows,\n })\n\n assignRef(resizeRef, onResizeTextarea)\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ style, ...props } = {}) => ({\n ...rest,\n ...props,\n ref: mergeRefs(props.ref, rest.ref, ref),\n style: { resize: autosize ? \"none\" : undefined, ...rest.style, ...style },\n onChange: handlerAll(\n props.onChange,\n rest.onChange,\n autosize ? onResizeTextarea : noop,\n ),\n }),\n [autosize, onResizeTextarea, rest, ref],\n )\n\n return {\n getTextareaProps,\n onResizeTextarea,\n }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;;;;AAsBA,MAAa,cAAc,CAAC,EAC1B,UACA,SACA,SACA,UACA,GAAG,MACc,GAAG,CAAE,MAAK;CAC3B,MAAM,EAAE,KAAK,kBAAkB,GAAG,YAAY;EAC5C,WAAW;EACX;EACA;CACD,EAAC;AAEF,WAAU,WAAW,iBAAiB;CAEtC,MAAMA,mBAA2C,YAC/C,CAAC,EAAE,MAAO,GAAG,OAAO,GAAG,CAAE,OAAM;EAC7B,GAAG;EACH,GAAG;EACH,KAAK,UAAU,MAAM,KAAK,KAAK,KAAK,IAAI;EACxC,OAAO;GAAE,QAAQ,WAAW;GAAoB,GAAG,KAAK;GAAO,GAAG;EAAO;EACzE,UAAU,~~8BACR~~,MAAM,UACN,KAAK,UACL,WAAW,~~mBAAmBC~~,~~mBAC~~/B;CACF,IACD;EAAC;EAAU;EAAkB;EAAM;CAAI,EACxC;AAED,QAAO;EACL;EACA;CACD;AACF"}
1	+ {"version":3,"file":"use-textarea.js","names":["getTextareaProps: PropGetter<\"textarea\">"],"sources":["../../../../src/components/textarea/use-textarea.ts"],"sourcesContent":["\"use client\"\n\nimport type { ForwardedRef } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { UseAutosizeProps } from \"./use-autosize\"\nimport { useCallback } from \"react\"\nimport { assignRef, handlerAll, mergeRefs, noop } from \"../../utils\"\nimport { useAutosize } from \"./use-autosize\"\n\nexport interface UseTextareaProps\n extends HTMLProps<\"textarea\">,\n Omit<UseAutosizeProps, \"disabled\" \| \"ref\"> {\n /*\n If `true`, the Textarea height auto-adjusts to text height.\n /\n autosize?: boolean\n /\n Ref to a resize function.\n */\n resizeRef?: ForwardedRef<() => void>\n}\n\nexport const useTextarea = ({\n autosize,\n maxRows,\n minRows,\n resizeRef,\n ...rest\n}: UseTextareaProps = {}) => {\n const { ref, onResizeTextarea } = useAutosize({\n disabled: !autosize,\n maxRows,\n minRows,\n })\n\n assignRef(resizeRef, onResizeTextarea)\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ style, ...props } = {}) => ({\n ...rest,\n ...props,\n ref: mergeRefs(props.ref, rest.ref, ref),\n style: { resize: autosize ? \"none\" : undefined, ...rest.style, ...style },\n onChange: handlerAll(\n props.onChange,\n rest.onChange,\n autosize ? onResizeTextarea : noop,\n ),\n }),\n [autosize, onResizeTextarea, rest, ref],\n )\n\n return {\n getTextareaProps,\n onResizeTextarea,\n }\n}\n\nexport type UseTextareaReturn = ReturnType<typeof useTextarea>\n"],"mappings":";;;;;;;;;AAsBA,MAAa,cAAc,CAAC,EAC1B,UACA,SACA,SACA,UACA,GAAG,MACc,GAAG,CAAE,MAAK;CAC3B,MAAM,EAAE,KAAK,kBAAkB,GAAG,YAAY;EAC5C,WAAW;EACX;EACA;CACD,EAAC;AAEF,WAAU,WAAW,iBAAiB;CAEtC,MAAMA,mBAA2C,YAC/C,CAAC,EAAE,MAAO,GAAG,OAAO,GAAG,CAAE,OAAM;EAC7B,GAAG;EACH,GAAG;EACH,KAAK,UAAU,MAAM,KAAK,KAAK,KAAK,IAAI;EACxC,OAAO;GAAE,QAAQ,WAAW;GAAoB,GAAG,KAAK;GAAO,GAAG;EAAO;EACzE,UAAU,WACR,MAAM,UACN,KAAK,UACL,WAAW,mBAAmB,KAC/B;CACF,IACD;EAAC;EAAU;EAAkB;EAAM;CAAI,EACxC;AAED,QAAO;EACL;EACA;CACD;AACF"}

package/dist/esm/components/toggle/use-toggle-group.js CHANGED Viewed

@@ -3,7 +3,9 @@
 import { createContext } from "../../utils/context.js";
 import { useUpdateEffect } from "../../utils/effect.js";
-import { utils_exports } from "../../utils/index.js";
+import { isArray, isUndefined } from "../../utils/common/assertion.js";
+import { toArray } from "../../utils/common/array.js";
+import { dataAttr } from "../../utils/common/dom.js";
 import { useControllableState } from "../../hooks/use-controllable-state/index.js";
 import { useCallback, useRef } from "react";
@@ -26,9 +28,9 @@ const useToggleGroup = ({ defaultValue, disabled, readOnly, value: valueProp, on
 		});
 	}, []);
 	const onChange = useCallback((value$1) => {
-		if ((0, utils_exports.isUndefined)(value$1)) return;
+		if (isUndefined(value$1)) return;
 		setValue((prev) => {
-			if ((0, utils_exports.isArray)(prev)) {
+			if (isArray(prev)) {
 				const included = prev.includes(value$1);
 				if (included) {
 					const nextValue = prev.filter((prevValue) => prevValue !== value$1);
@@ -49,12 +51,12 @@ const useToggleGroup = ({ defaultValue, disabled, readOnly, value: valueProp, on
 		});
 	}, [setValue, onReset]);
 	useUpdateEffect(() => {
-		onReset(!(0, utils_exports.isUndefined)(valueProp) ? (0, utils_exports.toArray)(valueProp) : void 0);
+		onReset(!isUndefined(valueProp) ? toArray(valueProp) : void 0);
 		setValue(valueProp);
 	}, [valueProp]);
 	const getGroupProps = useCallback((props) => ({
-		"data-disabled": (0, utils_exports.dataAttr)(disabled),
-		"data-readonly": (0, utils_exports.dataAttr)(readOnly),
+		"data-disabled": dataAttr(disabled),
+		"data-readonly": dataAttr(readOnly),
 		role: "group",
 		...rest,
 		...props

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-toggle-group.js","names":["targetValue?: string[]","onChange","value","value: M \| undefined","getGroupProps: PropGetter"],"sources":["../../../../src/components/toggle/use-toggle-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n createContext,\n dataAttr,\n isArray,\n isUndefined,\n toArray,\n useUpdateEffect,\n} from \"../../utils\"\n\ninterface ToggleGroupContext {\n onChangeMapRef: RefObject<Map<string, (value: boolean) => void>>\n disabled?: boolean\n readOnly?: boolean\n value?: string \| string[]\n onChange?: <Y extends string = string>(value: undefined \| Y) => void\n}\n\nexport const [ToggleGroupContext, useToggleGroupContext] =\n createContext<ToggleGroupContext>({\n name: \"ToggleGroupContext\",\n strict: false,\n })\n\nexport interface UseToggleGroupProps<Y extends string \| string[] = string>\n extends Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"value\"> {\n /*\n The initial value of the toggle button group.\n /\n defaultValue?: Y extends any[] ? Y : undefined \| Y\n /\n If `true`, all wrapped toggle button will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, all wrapped toggle button will be readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The value of the toggle button group.\n /\n value?: Y extends any[] ? Y : undefined \| Y\n /\n The callback fired when any children toggle button is selected or unselected.\n */\n onChange?: (value: Y extends any[] ? Y : undefined \| Y) => void\n}\n\nexport const useToggleGroup = <Y extends string \| string[] = string>({\n defaultValue,\n disabled,\n readOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n}: UseToggleGroupProps<Y>) => {\n type Value = Y extends any[] ? Y : undefined \| Y\n\n const onChangeMapRef = useRef<Map<string, (value: boolean) => void>>(\n new Map(),\n )\n const [value, setValue] = useControllableState<Value>({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const onReset = useCallback((targetValue?: string[]) => {\n onChangeMapRef.current.forEach((onChange, value) => {\n if (targetValue?.includes(value)) {\n onChange(true)\n } else {\n onChange(false)\n }\n })\n }, [])\n\n const onChange = useCallback(\n <M extends string = Y extends any[] ? Y[number] : Y>(\n value: M \| undefined,\n ) => {\n if (isUndefined(value)) return\n\n setValue((prev) => {\n if (isArray(prev)) {\n const included = prev.includes(value)\n\n if (included) {\n const nextValue = prev.filter((prevValue) => prevValue !== value)\n\n onReset(nextValue)\n\n return nextValue as Value\n } else {\n const nextValue = [...prev, value]\n\n onReset(nextValue)\n\n return nextValue as Value\n }\n } else {\n if (value === (prev as string \| undefined)) {\n onReset()\n\n return undefined as Value\n } else {\n onReset([value])\n\n return value as unknown as Value\n }\n }\n })\n },\n [setValue, onReset],\n )\n\n useUpdateEffect(() => {\n onReset(!isUndefined(valueProp) ? toArray(valueProp) : undefined)\n\n setValue(valueProp as Value)\n }, [valueProp])\n\n const getGroupProps: PropGetter = useCallback(\n (props) => ({\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"group\",\n ...rest,\n ...props,\n }),\n [disabled, readOnly, rest],\n )\n\n return { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef }\n}\n\nexport type UseToggleGroupReturn = ReturnType<typeof useToggleGroup>\n"],"mappings":"~~;;;;;;;;;;~~AAuBA,MAAa,CAAC,oBAAoB,sBAAsB,GACtD,cAAkC;CAChC,MAAM;CACN,QAAQ;AACT,EAAC;AA8BJ,MAAa,iBAAiB,CAAuC,EACnE,cACA,UACA,UACA,OAAO,WACP,UAAU,aACV,GAAG,MACoB,KAAK;CAG5B,MAAM,iBAAiB,uBACrB,IAAI,MACL;CACD,MAAM,CAAC,OAAO,SAAS,GAAG,qBAA4B;EACpD;EACA,OAAO;EACP,UAAU;CACX,EAAC;CAEF,MAAM,UAAU,YAAY,CAACA,gBAA2B;AACtD,iBAAe,QAAQ,QAAQ,CAACC,YAAUC,YAAU;AAClD,OAAI,aAAa,SAASA,QAAM,CAC9B,YAAS,KAAK;OAEd,YAAS,MAAM;EAElB,EAAC;CACH,GAAE,CAAE,EAAC;CAEN,MAAM,WAAW,YACf,CACEC,YACG;AACH,MAAI~~,+BAAYD~~,QAAM,CAAE;AAExB,WAAS,CAAC,SAAS;AACjB,OAAI,~~2BAAQ~~,KAAK,EAAE;IACjB,MAAM,WAAW,KAAK,SAASA,QAAM;AAErC,QAAI,UAAU;KACZ,MAAM,YAAY,KAAK,OAAO,CAAC,cAAc,cAAcA,QAAM;AAEjE,aAAQ,UAAU;AAElB,YAAO;IACR,OAAM;KACL,MAAM,YAAY,CAAC,GAAG,MAAMA,OAAM;AAElC,aAAQ,UAAU;AAElB,YAAO;IACR;GACF,WACKA,YAAW,MAA6B;AAC1C,aAAS;AAET;GACD,OAAM;AACL,YAAQ,CAACA,OAAM,EAAC;AAEhB,WAAOA;GACR;EAEJ,EAAC;CACH,GACD,CAAC,UAAU,OAAQ,EACpB;AAED,iBAAgB,MAAM;AACpB,WAAS~~,+BAAY~~,UAAU,GAAG,~~2BAAQ~~,UAAU,UAAa;AAEjE,WAAS,UAAmB;CAC7B,GAAE,CAAC,SAAU,EAAC;CAEf,MAAME,gBAA4B,YAChC,CAAC,WAAW;EACV,iBAAiB,~~4BAAS~~,SAAS;EACnC,iBAAiB,~~4BAAS~~,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;CACJ,IACD;EAAC;EAAU;EAAU;CAAK,EAC3B;AAED,QAAO;EAAE;EAAU;EAAU;EAAO;EAAe;EAAU;CAAgB;AAC9E"}
1	+ {"version":3,"file":"use-toggle-group.js","names":["targetValue?: string[]","onChange","value","value: M \| undefined","getGroupProps: PropGetter"],"sources":["../../../../src/components/toggle/use-toggle-group.ts"],"sourcesContent":["\"use client\"\n\nimport type { RefObject } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport {\n createContext,\n dataAttr,\n isArray,\n isUndefined,\n toArray,\n useUpdateEffect,\n} from \"../../utils\"\n\ninterface ToggleGroupContext {\n onChangeMapRef: RefObject<Map<string, (value: boolean) => void>>\n disabled?: boolean\n readOnly?: boolean\n value?: string \| string[]\n onChange?: <Y extends string = string>(value: undefined \| Y) => void\n}\n\nexport const [ToggleGroupContext, useToggleGroupContext] =\n createContext<ToggleGroupContext>({\n name: \"ToggleGroupContext\",\n strict: false,\n })\n\nexport interface UseToggleGroupProps<Y extends string \| string[] = string>\n extends Omit<HTMLProps, \"defaultValue\" \| \"onChange\" \| \"value\"> {\n /*\n The initial value of the toggle button group.\n /\n defaultValue?: Y extends any[] ? Y : undefined \| Y\n /\n If `true`, all wrapped toggle button will be disabled.\n \n @default false\n /\n disabled?: boolean\n /\n If `true`, all wrapped toggle button will be readonly.\n \n @default false\n /\n readOnly?: boolean\n /\n The value of the toggle button group.\n /\n value?: Y extends any[] ? Y : undefined \| Y\n /\n The callback fired when any children toggle button is selected or unselected.\n */\n onChange?: (value: Y extends any[] ? Y : undefined \| Y) => void\n}\n\nexport const useToggleGroup = <Y extends string \| string[] = string>({\n defaultValue,\n disabled,\n readOnly,\n value: valueProp,\n onChange: onChangeProp,\n ...rest\n}: UseToggleGroupProps<Y>) => {\n type Value = Y extends any[] ? Y : undefined \| Y\n\n const onChangeMapRef = useRef<Map<string, (value: boolean) => void>>(\n new Map(),\n )\n const [value, setValue] = useControllableState<Value>({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n\n const onReset = useCallback((targetValue?: string[]) => {\n onChangeMapRef.current.forEach((onChange, value) => {\n if (targetValue?.includes(value)) {\n onChange(true)\n } else {\n onChange(false)\n }\n })\n }, [])\n\n const onChange = useCallback(\n <M extends string = Y extends any[] ? Y[number] : Y>(\n value: M \| undefined,\n ) => {\n if (isUndefined(value)) return\n\n setValue((prev) => {\n if (isArray(prev)) {\n const included = prev.includes(value)\n\n if (included) {\n const nextValue = prev.filter((prevValue) => prevValue !== value)\n\n onReset(nextValue)\n\n return nextValue as Value\n } else {\n const nextValue = [...prev, value]\n\n onReset(nextValue)\n\n return nextValue as Value\n }\n } else {\n if (value === (prev as string \| undefined)) {\n onReset()\n\n return undefined as Value\n } else {\n onReset([value])\n\n return value as unknown as Value\n }\n }\n })\n },\n [setValue, onReset],\n )\n\n useUpdateEffect(() => {\n onReset(!isUndefined(valueProp) ? toArray(valueProp) : undefined)\n\n setValue(valueProp as Value)\n }, [valueProp])\n\n const getGroupProps: PropGetter = useCallback(\n (props) => ({\n \"data-disabled\": dataAttr(disabled),\n \"data-readonly\": dataAttr(readOnly),\n role: \"group\",\n ...rest,\n ...props,\n }),\n [disabled, readOnly, rest],\n )\n\n return { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef }\n}\n\nexport type UseToggleGroupReturn = ReturnType<typeof useToggleGroup>\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,CAAC,oBAAoB,sBAAsB,GACtD,cAAkC;CAChC,MAAM;CACN,QAAQ;AACT,EAAC;AA8BJ,MAAa,iBAAiB,CAAuC,EACnE,cACA,UACA,UACA,OAAO,WACP,UAAU,aACV,GAAG,MACoB,KAAK;CAG5B,MAAM,iBAAiB,uBACrB,IAAI,MACL;CACD,MAAM,CAAC,OAAO,SAAS,GAAG,qBAA4B;EACpD;EACA,OAAO;EACP,UAAU;CACX,EAAC;CAEF,MAAM,UAAU,YAAY,CAACA,gBAA2B;AACtD,iBAAe,QAAQ,QAAQ,CAACC,YAAUC,YAAU;AAClD,OAAI,aAAa,SAASA,QAAM,CAC9B,YAAS,KAAK;OAEd,YAAS,MAAM;EAElB,EAAC;CACH,GAAE,CAAE,EAAC;CAEN,MAAM,WAAW,YACf,CACEC,YACG;AACH,MAAI,YAAYD,QAAM,CAAE;AAExB,WAAS,CAAC,SAAS;AACjB,OAAI,QAAQ,KAAK,EAAE;IACjB,MAAM,WAAW,KAAK,SAASA,QAAM;AAErC,QAAI,UAAU;KACZ,MAAM,YAAY,KAAK,OAAO,CAAC,cAAc,cAAcA,QAAM;AAEjE,aAAQ,UAAU;AAElB,YAAO;IACR,OAAM;KACL,MAAM,YAAY,CAAC,GAAG,MAAMA,OAAM;AAElC,aAAQ,UAAU;AAElB,YAAO;IACR;GACF,WACKA,YAAW,MAA6B;AAC1C,aAAS;AAET;GACD,OAAM;AACL,YAAQ,CAACA,OAAM,EAAC;AAEhB,WAAOA;GACR;EAEJ,EAAC;CACH,GACD,CAAC,UAAU,OAAQ,EACpB;AAED,iBAAgB,MAAM;AACpB,WAAS,YAAY,UAAU,GAAG,QAAQ,UAAU,UAAa;AAEjE,WAAS,UAAmB;CAC7B,GAAE,CAAC,SAAU,EAAC;CAEf,MAAME,gBAA4B,YAChC,CAAC,WAAW;EACV,iBAAiB,SAAS,SAAS;EACnC,iBAAiB,SAAS,SAAS;EACnC,MAAM;EACN,GAAG;EACH,GAAG;CACJ,IACD;EAAC;EAAU;EAAU;CAAK,EAC3B;AAED,QAAO;EAAE;EAAU;EAAU;EAAO;EAAe;EAAU;CAAgB;AAC9E"}