npm - @yamada-ui/react - Versions diffs - 2.1.4-dev-20260323173341 → 2.1.4-dev-20260323175147 - Mend

@yamada-ui/react 2.1.4-dev-20260323173341 → 2.1.4-dev-20260323175147

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

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

@@ -65,7 +65,7 @@ const Checkbox = withProvider(({ checkedIcon, children, errorBorderColor, focusB
 		]
 	});
 }, "root")();
-const CheckboxIndicator = withContext("div", "indicator")();
+const CheckboxIndicator = withContext("div", "indicator")({ "data-indicator": "" });
 const CheckboxLabel = withContext("span", "label")();
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.cjs","names":["createSlotComponent","checkboxStyle","useCheckbox","useInputBorder","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxStyle } from \"./checkbox.style\"\nimport { useCheckbox } from \"./use-checkbox\"\n\nexport interface CheckboxProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n ThemeProps<CheckboxStyle>,\n UseInputBorderProps {\n /*\n The icon to display in the checkbox when it is checked.\n /\n checkedIcon?: ReactNode\n /\n The icon to display in the checkbox when it is indeterminate.\n /\n indeterminateIcon?: ReactNode\n /\n Props for the indicator component.\n /\n indicatorProps?: CheckboxIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: CheckboxLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: CheckboxPropsContext,\n usePropsContext: useCheckboxPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<CheckboxProps, CheckboxStyle>(\"checkbox\", checkboxStyle)\n\nexport {\n CheckboxPropsContext,\n component,\n useCheckboxPropsContext,\n useRootComponentProps,\n}\n\n/\n `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n \n @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const Checkbox = withProvider<\"label\", CheckboxProps>(\n ({\n checkedIcon,\n children,\n errorBorderColor,\n focusBorderColor,\n indeterminateIcon,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n } = useCheckbox(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const icon = useMemo(() => {\n if (indeterminate) {\n return indeterminateIcon \|\| <MinusIcon />\n } else if (checked) {\n return checkedIcon \|\| <CheckIcon />\n } else {\n return null\n }\n }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return (\n <CheckboxIndicator {...getIndicatorProps(indicatorProps)}>\n {icon}\n </CheckboxIndicator>\n )\n }, [getIndicatorProps, indicatorProps, icon])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? (\n <CheckboxLabel {...labelProps}>{children}</CheckboxLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: CheckboxProps<Y>): ReactElement\n}>\n\ninterface CheckboxIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxIndicator = withContext<\"div\", CheckboxIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface CheckboxLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst CheckboxLabel = withContext<\"span\", CheckboxLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,MAAM,EACJ,WACA,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACA,0BACEA,6CAAkD,YAAYC,qCAAc;;;;;;AAchF,MAAa,WAAW,cACrB,EACC,aACA,UACA,kBACA,kBACA,mBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,iCAAY,KAAK;CACrB,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,gCAAqB;AACzB,MAAI,cACF,QAAO,qBAAqB,2CAACC,iCAAY;WAChC,QACT,QAAO,eAAe,2CAACC,iCAAY;MAEnC,QAAO;IAER;EAAC;EAAe;EAAmB;EAAS;EAAY,CAAC;CAC5D,MAAM,iCAAsB;AAC1B,SAAO,2CAACC,uBAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,qCAA0B;AAC9B,SACE,2CAAC;GAAkB,GAAI,kBAAkB,eAAe;aACrD;IACiB;IAErB;EAAC;EAAmB;EAAgB;EAAK,CAAC;AAE7C,QACE,4CAACA,uBAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WACC,2CAAC;IAAc,GAAI;IAAa;KAAyB,GACvD;;GACS;GAGnB,OACD,EAAE;AAMH,MAAM,oBAAoB,YACxB,OACA,YACD,EAAE;~~AAIH~~,MAAM,gBAAgB,YAAwC,QAAQ,QAAQ,EAAE"}
1	+ {"version":3,"file":"checkbox.cjs","names":["createSlotComponent","checkboxStyle","useCheckbox","useInputBorder","MinusIcon","CheckIcon","styled"],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxStyle } from \"./checkbox.style\"\nimport { useCheckbox } from \"./use-checkbox\"\n\nexport interface CheckboxProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n ThemeProps<CheckboxStyle>,\n UseInputBorderProps {\n /*\n The icon to display in the checkbox when it is checked.\n /\n checkedIcon?: ReactNode\n /\n The icon to display in the checkbox when it is indeterminate.\n /\n indeterminateIcon?: ReactNode\n /\n Props for the indicator component.\n /\n indicatorProps?: CheckboxIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: CheckboxLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: CheckboxPropsContext,\n usePropsContext: useCheckboxPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<CheckboxProps, CheckboxStyle>(\"checkbox\", checkboxStyle)\n\nexport {\n CheckboxPropsContext,\n component,\n useCheckboxPropsContext,\n useRootComponentProps,\n}\n\n/\n `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n \n @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const Checkbox = withProvider<\"label\", CheckboxProps>(\n ({\n checkedIcon,\n children,\n errorBorderColor,\n focusBorderColor,\n indeterminateIcon,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n } = useCheckbox(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const icon = useMemo(() => {\n if (indeterminate) {\n return indeterminateIcon \|\| <MinusIcon />\n } else if (checked) {\n return checkedIcon \|\| <CheckIcon />\n } else {\n return null\n }\n }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return (\n <CheckboxIndicator {...getIndicatorProps(indicatorProps)}>\n {icon}\n </CheckboxIndicator>\n )\n }, [getIndicatorProps, indicatorProps, icon])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? (\n <CheckboxLabel {...labelProps}>{children}</CheckboxLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: CheckboxProps<Y>): ReactElement\n}>\n\ninterface CheckboxIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxIndicator = withContext<\"div\", CheckboxIndicatorProps>(\n \"div\",\n \"indicator\",\n)({ \"data-indicator\": \"\" })\n\ninterface CheckboxLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst CheckboxLabel = withContext<\"span\", CheckboxLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AA8CA,MAAM,EACJ,WACA,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACA,0BACEA,6CAAkD,YAAYC,qCAAc;;;;;;AAchF,MAAa,WAAW,cACrB,EACC,aACA,UACA,kBACA,kBACA,mBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACEC,iCAAY,KAAK;CACrB,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,gCAAqB;AACzB,MAAI,cACF,QAAO,qBAAqB,2CAACC,iCAAY;WAChC,QACT,QAAO,eAAe,2CAACC,iCAAY;MAEnC,QAAO;IAER;EAAC;EAAe;EAAmB;EAAS;EAAY,CAAC;CAC5D,MAAM,iCAAsB;AAC1B,SAAO,2CAACC,uBAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,qCAA0B;AAC9B,SACE,2CAAC;GAAkB,GAAI,kBAAkB,eAAe;aACrD;IACiB;IAErB;EAAC;EAAmB;EAAgB;EAAK,CAAC;AAE7C,QACE,4CAACA,uBAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WACC,2CAAC;IAAc,GAAI;IAAa;KAAyB,GACvD;;GACS;GAGnB,OACD,EAAE;AAMH,MAAM,oBAAoB,YACxB,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,gBAAgB,YAAwC,QAAQ,QAAQ,EAAE"}

package/dist/cjs/components/checkbox/checkbox.style.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ const checkboxStyle = require_config.defineComponentSlotStyle({
 		group: {},
 		indicator: {
 			alignItems: "center",
+			bg: "{indicator-bg}",
 			borderColor: "{indicator-border-color}",
 			borderWidth: "2px",
 			boxSize: "{indicator-size}",
@@ -42,6 +43,7 @@ const checkboxStyle = require_config.defineComponentSlotStyle({
 		root: {
 			"--error-border-color": "colors.border.error",
 			"--focus-border-color": "colorScheme.outline",
+			"--indicator-bg": "transparent",
 			"--indicator-border-color": "colors.border.emphasized",
 			alignItems: "center",
 			display: "flex",

package/dist/cjs/components/checkbox/checkbox.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"sources":["../../../../src/components/checkbox/checkbox.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const checkboxStyle = defineComponentSlotStyle({\n base: {\n group: {},\n indicator: {\n alignItems: \"center\",\n borderColor: \"{indicator-border-color}\",\n borderWidth: \"2px\",\n boxSize: \"{indicator-size}\",\n display: \"inline-flex\",\n focusRingColor: \"{focus-border-color}\",\n \"input:focus-visible + &\": focusRingStyle.outline,\n justifyContent: \"center\",\n _container: [\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n ],\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n label: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n \"--focus-border-color\": \"colorScheme.outline\",\n \"--indicator-border-color\": \"colors.border.emphasized\",\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"{label-size}\",\n gap: \"2\",\n userSelect: \"none\",\n _readOnly: { layerStyle: \"readOnly\" },\n _disabled: { layerStyle: \"disabled\" },\n },\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'rounded'\n */\n shape: {\n rounded: {\n indicator: { rounded: \"l1\" },\n },\n square: {\n indicator: { rounded: \"0\" },\n },\n },\n },\n\n variants: {\n outline: {\n indicator: { color: \"colorScheme.outline\" },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.outline\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.outline\" },\n },\n },\n solid: {\n indicator: {\n color: \"colorScheme.contrast\",\n _checked: { bg: \"colorScheme.solid\" },\n _indeterminate: { bg: \"colorScheme.solid\" },\n },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.solid\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.solid\" },\n },\n },\n subtle: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"transparent\" },\n },\n surface: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n },\n },\n\n sizes: {\n sm: {\n indicator: { fontSize: \"xs\" },\n root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n },\n md: {\n indicator: { fontSize: \"sm\" },\n root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n },\n lg: {\n indicator: { fontSize: \"md\" },\n root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"solid\",\n shape: \"rounded\",\n },\n})\n\nexport type CheckboxStyle = typeof checkboxStyle\n"],"mappings":";;;;;AAEA,MAAa,gBAAgBA,wCAAyB;CACpD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2BC,kCAAe;GAC1C,gBAAgB;GAChB,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,SAAS,EACP,WAAW,EAAE,SAAS,MAAM,EAC7B;EACD,QAAQ,EACN,WAAW,EAAE,SAAS,KAAK,EAC5B;EACF,EACF;CAED,UAAU;EACR,SAAS;GACP,WAAW,EAAE,OAAO,uBAAuB;GAC3C,MAAM;IACJ,UAAU,EAAE,4BAA4B,uBAAuB;IAC/D,gBAAgB,EAAE,4BAA4B,uBAAuB;IACtE;GACF;EACD,OAAO;GACL,WAAW;IACT,OAAO;IACP,UAAU,EAAE,IAAI,qBAAqB;IACrC,gBAAgB,EAAE,IAAI,qBAAqB;IAC5C;GACD,MAAM;IACJ,UAAU,EAAE,4BAA4B,qBAAqB;IAC7D,gBAAgB,EAAE,4BAA4B,qBAAqB;IACpE;GACF;EACD,QAAQ;GACN,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
1	+ {"version":3,"file":"checkbox.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"sources":["../../../../src/components/checkbox/checkbox.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const checkboxStyle = defineComponentSlotStyle({\n base: {\n group: {},\n indicator: {\n alignItems: \"center\",\n bg: \"{indicator-bg}\",\n borderColor: \"{indicator-border-color}\",\n borderWidth: \"2px\",\n boxSize: \"{indicator-size}\",\n display: \"inline-flex\",\n focusRingColor: \"{focus-border-color}\",\n \"input:focus-visible + &\": focusRingStyle.outline,\n justifyContent: \"center\",\n _container: [\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n ],\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n label: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n \"--focus-border-color\": \"colorScheme.outline\",\n \"--indicator-bg\": \"transparent\",\n \"--indicator-border-color\": \"colors.border.emphasized\",\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"{label-size}\",\n gap: \"2\",\n userSelect: \"none\",\n _readOnly: { layerStyle: \"readOnly\" },\n _disabled: { layerStyle: \"disabled\" },\n },\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'rounded'\n */\n shape: {\n rounded: {\n indicator: { rounded: \"l1\" },\n },\n square: {\n indicator: { rounded: \"0\" },\n },\n },\n },\n\n variants: {\n outline: {\n indicator: { color: \"colorScheme.outline\" },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.outline\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.outline\" },\n },\n },\n solid: {\n indicator: {\n color: \"colorScheme.contrast\",\n _checked: { bg: \"colorScheme.solid\" },\n _indeterminate: { bg: \"colorScheme.solid\" },\n },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.solid\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.solid\" },\n },\n },\n subtle: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"transparent\" },\n },\n surface: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n },\n },\n\n sizes: {\n sm: {\n indicator: { fontSize: \"xs\" },\n root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n },\n md: {\n indicator: { fontSize: \"sm\" },\n root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n },\n lg: {\n indicator: { fontSize: \"md\" },\n root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"solid\",\n shape: \"rounded\",\n },\n})\n\nexport type CheckboxStyle = typeof checkboxStyle\n"],"mappings":";;;;;AAEA,MAAa,gBAAgBA,wCAAyB;CACpD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2BC,kCAAe;GAC1C,gBAAgB;GAChB,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,kBAAkB;GAClB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,SAAS,EACP,WAAW,EAAE,SAAS,MAAM,EAC7B;EACD,QAAQ,EACN,WAAW,EAAE,SAAS,KAAK,EAC5B;EACF,EACF;CAED,UAAU;EACR,SAAS;GACP,WAAW,EAAE,OAAO,uBAAuB;GAC3C,MAAM;IACJ,UAAU,EAAE,4BAA4B,uBAAuB;IAC/D,gBAAgB,EAAE,4BAA4B,uBAAuB;IACtE;GACF;EACD,OAAO;GACL,WAAW;IACT,OAAO;IACP,UAAU,EAAE,IAAI,qBAAqB;IACrC,gBAAgB,EAAE,IAAI,qBAAqB;IAC5C;GACD,MAAM;IACJ,UAAU,EAAE,4BAA4B,qBAAqB;IAC7D,gBAAgB,EAAE,4BAA4B,qBAAqB;IACpE;GACF;EACD,QAAQ;GACN,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}

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

@@ -15,7 +15,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 	const group = require_use_checkbox_group.useCheckboxGroupContext();
 	const { max, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = (0, react.useId)();
-	const { props: { id, ref, name, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
+	const { props: { id, ref, name, "aria-controls": ariaControlsProp, "aria-labelledby": ariaLabelledbyProp, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -56,7 +56,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		rest,
 		getLabelProps
 	]);
-	const getInputProps = (0, react.useCallback)(({ "aria-describedby": ariaDescribedby$1, ...props$1 } = {}) => {
+	const getInputProps = (0, react.useCallback)(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby$1, "aria-labelledby": ariaLabelledby, ...props$1 } = {}) => {
 		const sharedProps = {
 			...dataProps,
 			...ariaProps,
@@ -65,14 +65,17 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 			name,
 			style: require_dom.visuallyHiddenAttributes.style,
 			"aria-checked": indeterminate ? "mixed" : checked,
+			"aria-controls": (0, require_utils_index.utils_exports.cx)(ariaControls, ariaControlsProp),
 			"aria-describedby": (0, require_utils_index.utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby$1),
 			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(!interactive),
+			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
 			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 			"data-indeterminate": (0, require_utils_index.utils_exports.dataAttr)(indeterminate),
 			checked,
 			disabled,
 			readOnly,
 			required,
+			tabIndex,
 			value,
 			...props$1,
 			ref: require_ref.mergeRefs(props$1.ref, ref, indeterminateRef),
@@ -86,17 +89,21 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		ariaProps,
 		id,
 		name,
+		indeterminate,
 		checked,
+		ariaControlsProp,
 		resolvedAriaDescribedby,
 		interactive,
-		indeterminate,
+		ariaLabelledbyProp,
 		disabled,
 		readOnly,
 		required,
+		tabIndex,
 		value,
 		ref,
 		indeterminateRef,
-		eventProps,
+		eventProps.onBlur,
+		eventProps.onFocus,
 		onChange,
 		getGroupInputProps
 	]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n isNumber,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the checkbox will be checked.\n /\n checked?: boolean\n /\n If `true`, the checkbox will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n If `true`, the checkbox will be indeterminate.\n \n @default false\n /\n indeterminate?: boolean\n /\n The name of the input field in a checkbox.\n /\n name?: string\n /\n The value of the checkbox.\n /\n value?: Y\n /\n The callback invoked when the checkbox 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 checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseCheckboxProps<Y> = {}) => {\n const group = useCheckboxGroupContext()\n const {\n max,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n indeterminate = false,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue.includes(value)\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n const trulyDisabled =\n !checked && isNumber(max) && group && group.value.length >= max\n const interactive = !(readOnly \|\| trulyDisabled)\n const indeterminateRef = useCallback(\n (el: HTMLInputElement \| null) => {\n if (el) el.indeterminate = indeterminate\n },\n [indeterminate],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n if (indeterminate) ev.target.checked = true\n\n setChecked(ev)\n },\n [interactive, indeterminate, setChecked],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, checked, indeterminate, rest, getLabelProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"aria-disabled\": ariaAttr(!interactive),\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref, indeterminateRef),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n dataProps,\n ariaProps,\n id,\n name,\n checked,\n resolvedAriaDescribedby,\n interactive,\n ~~indeterminate~~,\n disabled,\n readOnly,\n required,\n value,\n ref,\n indeterminateRef,\n eventProps,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...props,\n }),\n [dataProps, checked, indeterminate],\n )\n\n return {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":";;;;;;;;;;;;;AAmEA,MAAa,eAA0C,EACrD,oBAAoB,qBACpB,GAAG,UACoB,EAAE,KAAK;CAC9B,MAAM,QAAQA,oDAAyB;CACvC,MAAM,EACJ,KACA,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,SAAS,aACT,iBAAiB,OACjB,UACA,gBAAgB,OAChB,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,sCAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,qEAA0B;EACtD,cAAc;EACd,OALA,oDAAa,WAAW,IAAI,oDAAa,MAAM,GAC3C,WAAW,SAAS,MAAM,GAC1B;EAIJ,UAAU;EACX,CAAC;CACF,MAAM,gBACJ,CAAC,2DAAoB,IAAI,IAAI,SAAS,MAAM,MAAM,UAAU;CAC9D,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,2CACH,OAAgC;AAC/B,MAAI,GAAI,IAAG,gBAAgB;IAE7B,CAAC,cAAc,CAChB;CAED,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,MAAI,cAAe,IAAG,OAAO,UAAU;AAEvC,aAAW,GAAG;IAEhB;EAAC;EAAa;EAAe;EAAW,CACzC;CAED,MAAMC,uCACH,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAS;EAAe;EAAM;EAAc,CACzD;CAED,MAAMC,wCACH,~~EAAE~~,oBAAoBC,~~mBAAiB~~,GAAGF,~~YAAU~~,EAAE,KAAK;~~EAC1D~~,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC,gBAAgB,gBAAiB,UAAoB;GACrD,8DAAuB,yBAAyBD,kBAAgB;GAChE,iEAA0B,CAAC,YAAY;GACvC,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAKI,sBAAUJ,QAAM,KAAK,KAAK,iBAAiB;GAChD,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAaD,QAAO;EACL;EACA;EACA,2CAbC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C,GAAGA;GACJ,GACD;GAAC;GAAW;GAAS;GAAc,CACpC;EAMC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-checkbox.cjs","names":["useCheckboxGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n isNumber,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the checkbox will be checked.\n /\n checked?: boolean\n /\n If `true`, the checkbox will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n If `true`, the checkbox will be indeterminate.\n \n @default false\n /\n indeterminate?: boolean\n /\n The name of the input field in a checkbox.\n /\n name?: string\n /\n The value of the checkbox.\n /\n value?: Y\n /\n The callback invoked when the checkbox 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 checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseCheckboxProps<Y> = {}) => {\n const group = useCheckboxGroupContext()\n const {\n max,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name,\n \"aria-controls\": ariaControlsProp,\n \"aria-labelledby\": ariaLabelledbyProp,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n indeterminate = false,\n readOnly,\n required,\n tabIndex,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue.includes(value)\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n const trulyDisabled =\n !checked && isNumber(max) && group && group.value.length >= max\n const interactive = !(readOnly \|\| trulyDisabled)\n const indeterminateRef = useCallback(\n (el: HTMLInputElement \| null) => {\n if (el) el.indeterminate = indeterminate\n },\n [indeterminate],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n if (indeterminate) ev.target.checked = true\n\n setChecked(ev)\n },\n [interactive, indeterminate, setChecked],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, checked, indeterminate, rest, getLabelProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n \"aria-controls\": cx(ariaControls, ariaControlsProp),\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n checked,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref, indeterminateRef),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n dataProps,\n ariaProps,\n id,\n name,\n indeterminate,\n checked,\n ariaControlsProp,\n resolvedAriaDescribedby,\n interactive,\n ariaLabelledbyProp,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n ref,\n indeterminateRef,\n eventProps.onBlur,\n eventProps.onFocus,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...props,\n }),\n [dataProps, checked, indeterminate],\n )\n\n return {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":";;;;;;;;;;;;;AAmEA,MAAa,eAA0C,EACrD,oBAAoB,qBACpB,GAAG,UACoB,EAAE,KAAK;CAC9B,MAAM,QAAQA,oDAAyB;CACvC,MAAM,EACJ,KACA,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,iBAAiB,kBACjB,mBAAmB,oBACnB,SAAS,aACT,iBAAiB,OACjB,UACA,gBAAgB,OAChB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,sCAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,qEAA0B;EACtD,cAAc;EACd,OALA,oDAAa,WAAW,IAAI,oDAAa,MAAM,GAC3C,WAAW,SAAS,MAAM,GAC1B;EAIJ,UAAU;EACX,CAAC;CACF,MAAM,gBACJ,CAAC,2DAAoB,IAAI,IAAI,SAAS,MAAM,MAAM,UAAU;CAC9D,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,2CACH,OAAgC;AAC/B,MAAI,GAAI,IAAG,gBAAgB;IAE7B,CAAC,cAAc,CAChB;CAED,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,MAAI,cAAe,IAAG,OAAO,UAAU;AAEvC,aAAW,GAAG;IAEhB;EAAC;EAAa;EAAe;EAAW,CACzC;CAED,MAAMC,uCACH,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAS;EAAe;EAAM;EAAc,CACzD;CAED,MAAMC,wCACH,EACC,iBAAiB,cACjB,oBAAoBC,mBACpB,mBAAmB,gBACnB,GAAGF,YACD,EAAE,KAAK;EACT,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC,gBAAgB,gBAAiB,UAAoB;GACrD,2DAAoB,cAAc,iBAAiB;GACnD,8DAAuB,yBAAyBD,kBAAgB;GAChE,iEAA0B,CAAC,YAAY;GACvC,6DAAsB,gBAAgB,mBAAmB;GACzD,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C;GACA;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAKI,sBAAUJ,QAAM,KAAK,KAAK,iBAAiB;GAChD,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX;EACA;EACD,CACF;AAaD,QAAO;EACL;EACA;EACA,2CAbC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,gEAAyB,QAAQ;GACjC,sEAA+B,cAAc;GAC7C,GAAGA;GACJ,GACD;GAAC;GAAW;GAAS;GAAc,CACpC;EAMC;EACA;EACA;EACD"}

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

@@ -45,7 +45,7 @@ const Radio = withProvider(({ children, errorBorderColor, focusBorderColor, indi
 		]
 	});
 }, "root")();
-const RadioIndicator = withContext("div", "indicator")();
+const RadioIndicator = withContext("div", "indicator")({ "data-indicator": "" });
 const RadioLabel = withContext("span", "label")();
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.cjs","names":["createSlotComponent","radioStyle","useRadio","useInputBorder","styled"],"sources":["../../../../src/components/radio/radio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { RadioStyle } from \"./radio.style\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder } from \"../input\"\nimport { radioStyle } from \"./radio.style\"\nimport { useRadio } from \"./use-radio\"\n\nexport interface RadioProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseRadioProps<Y>>,\n ThemeProps<RadioStyle>,\n UseInputBorderProps {\n /*\n Props for the indicator component.\n /\n indicatorProps?: RadioIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: RadioLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: RadioPropsContext,\n usePropsContext: useRadioPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<RadioProps, RadioStyle>(\"radio\", radioStyle)\n\nexport {\n component,\n RadioPropsContext,\n useRadioPropsContext,\n useRootComponentProps,\n}\n\n/\n `Radio` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/radio\n */\nexport const Radio = withProvider<\"label\", RadioProps>(\n ({\n children,\n errorBorderColor,\n focusBorderColor,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const { getIndicatorProps, getInputProps, getRootProps } = useRadio(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return <RadioIndicator {...getIndicatorProps(indicatorProps)} />\n }, [getIndicatorProps, indicatorProps])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? <RadioLabel {...labelProps}>{children}</RadioLabel> : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: RadioProps<Y>): ReactElement\n}>\n\ninterface RadioIndicatorProps extends HTMLStyledProps {}\n\nconst RadioIndicator = withContext<\"div\", RadioIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface RadioLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst RadioLabel = withContext<\"span\", RadioLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,EACJ,WACA,cAAc,mBACd,iBAAiB,sBACjB,aACA,cACA,0BACEA,6CAA4C,SAASC,+BAAW;;;;;;AAcpE,MAAa,QAAQ,cAClB,EACC,UACA,kBACA,kBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,mBAAmB,eAAe,iBAAiBC,2BAAS,KAAK;CACzE,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,iCAAsB;AAC1B,SAAO,2CAACC,uBAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,qCAA0B;AAC9B,SAAO,2CAAC,kBAAe,GAAI,kBAAkB,eAAe,GAAI;IAC/D,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,4CAACA,uBAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WAAW,2CAAC;IAAW,GAAI;IAAa;KAAsB,GAAG;;GACrD;GAGnB,OACD,EAAE;AAMH,MAAM,iBAAiB,YACrB,OACA,YACD,EAAE;~~AAIH~~,MAAM,aAAa,YAAqC,QAAQ,QAAQ,EAAE"}
1	+ {"version":3,"file":"radio.cjs","names":["createSlotComponent","radioStyle","useRadio","useInputBorder","styled"],"sources":["../../../../src/components/radio/radio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { RadioStyle } from \"./radio.style\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder } from \"../input\"\nimport { radioStyle } from \"./radio.style\"\nimport { useRadio } from \"./use-radio\"\n\nexport interface RadioProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseRadioProps<Y>>,\n ThemeProps<RadioStyle>,\n UseInputBorderProps {\n /*\n Props for the indicator component.\n /\n indicatorProps?: RadioIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: RadioLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: RadioPropsContext,\n usePropsContext: useRadioPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<RadioProps, RadioStyle>(\"radio\", radioStyle)\n\nexport {\n component,\n RadioPropsContext,\n useRadioPropsContext,\n useRootComponentProps,\n}\n\n/\n `Radio` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/radio\n */\nexport const Radio = withProvider<\"label\", RadioProps>(\n ({\n children,\n errorBorderColor,\n focusBorderColor,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const { getIndicatorProps, getInputProps, getRootProps } = useRadio(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return <RadioIndicator {...getIndicatorProps(indicatorProps)} />\n }, [getIndicatorProps, indicatorProps])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? <RadioLabel {...labelProps}>{children}</RadioLabel> : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: RadioProps<Y>): ReactElement\n}>\n\ninterface RadioIndicatorProps extends HTMLStyledProps {}\n\nconst RadioIndicator = withContext<\"div\", RadioIndicatorProps>(\n \"div\",\n \"indicator\",\n)({ \"data-indicator\": \"\" })\n\ninterface RadioLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst RadioLabel = withContext<\"span\", RadioLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,EACJ,WACA,cAAc,mBACd,iBAAiB,sBACjB,aACA,cACA,0BACEA,6CAA4C,SAASC,+BAAW;;;;;;AAcpE,MAAa,QAAQ,cAClB,EACC,UACA,kBACA,kBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,mBAAmB,eAAe,iBAAiBC,2BAAS,KAAK;CACzE,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,iCAAsB;AAC1B,SAAO,2CAACC,uBAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,qCAA0B;AAC9B,SAAO,2CAAC,kBAAe,GAAI,kBAAkB,eAAe,GAAI;IAC/D,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,4CAACA,uBAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WAAW,2CAAC;IAAW,GAAI;IAAa;KAAsB,GAAG;;GACrD;GAGnB,OACD,EAAE;AAMH,MAAM,iBAAiB,YACrB,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,aAAa,YAAqC,QAAQ,QAAQ,EAAE"}

package/dist/cjs/components/radio/radio.style.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ const radioStyle = require_config.defineComponentSlotStyle({
 		group: {},
 		indicator: {
 			alignItems: "center",
+			bg: "{indicator-bg}",
 			borderColor: "{indicator-border-color}",
 			borderWidth: "2px",
 			boxSize: "{indicator-size}",
@@ -43,6 +44,7 @@ const radioStyle = require_config.defineComponentSlotStyle({
 		root: {
 			"--error-border-color": "colors.border.error",
 			"--focus-border-color": "colorScheme.outline",
+			"--indicator-bg": "transparent",
 			"--indicator-border-color": "colors.border.emphasized",
 			alignItems: "center",
 			display: "flex",

package/dist/cjs/components/radio/radio.style.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"sources":["../../../../src/components/radio/radio.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const radioStyle = defineComponentSlotStyle({\n base: {\n group: {},\n indicator: {\n alignItems: \"center\",\n borderColor: \"{indicator-border-color}\",\n borderWidth: \"2px\",\n boxSize: \"{indicator-size}\",\n display: \"inline-flex\",\n focusRingColor: \"{focus-border-color}\",\n \"input:focus-visible + &\": focusRingStyle.outline,\n justifyContent: \"center\",\n _before: { display: \"block\" },\n _container: [\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n ],\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n label: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n \"--focus-border-color\": \"colorScheme.outline\",\n \"--indicator-border-color\": \"colors.border.emphasized\",\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"{label-size}\",\n gap: \"2\",\n userSelect: \"none\",\n _readOnly: { layerStyle: \"readOnly\" },\n _disabled: { layerStyle: \"disabled\" },\n },\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'circle'\n */\n shape: {\n circle: { indicator: { rounded: \"full\", _before: { rounded: \"full\" } } },\n rounded: {\n indicator: {\n rounded: \"l1\",\n _before: { rounded: \"calc({radii.l1} / 2)\" },\n },\n },\n square: {\n indicator: { rounded: \"0\", _before: { rounded: \"0\" } },\n },\n },\n },\n\n variants: {\n base: {\n indicator: { _checked: { _before: { bg: \"colorScheme.solid\" } } },\n },\n outline: {\n indicator: { _checked: { _before: { bg: \"colorScheme.outline\" } } },\n root: { _checked: { \"--indicator-border-color\": \"colorScheme.outline\" } },\n },\n solid: {},\n subtle: {\n indicator: { bg: \"colorScheme.subtle\" },\n root: { \"--indicator-border-color\": \"transparent\" },\n },\n surface: {\n indicator: { bg: \"colorScheme.subtle\" },\n root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n },\n },\n\n sizes: {\n sm: {\n indicator: { _before: { boxSize: \"1.5\" } },\n root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n },\n md: {\n indicator: { _before: { boxSize: \"2\" } },\n root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n },\n lg: {\n indicator: { _before: { boxSize: \"3\" } },\n root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"solid\",\n shape: \"circle\",\n },\n})\n\nexport type RadioStyle = typeof radioStyle\n"],"mappings":";;;;;AAEA,MAAa,aAAaA,wCAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2BC,kCAAe;GAC1C,gBAAgB;GAChB,SAAS,EAAE,SAAS,SAAS;GAC7B,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EAAE,WAAW;GAAE,SAAS;GAAQ,SAAS,EAAE,SAAS,QAAQ;GAAE,EAAE;EACxE,SAAS,EACP,WAAW;GACT,SAAS;GACT,SAAS,EAAE,SAAS,wBAAwB;GAC7C,EACF;EACD,QAAQ,EACN,WAAW;GAAE,SAAS;GAAK,SAAS,EAAE,SAAS,KAAK;GAAE,EACvD;EACF,EACF;CAED,UAAU;EACR,MAAM,EACJ,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAClE;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,uBAAuB,EAAE,EAAE;GACnE,MAAM,EAAE,UAAU,EAAE,4BAA4B,uBAAuB,EAAE;GAC1E;EACD,OAAO,EAAE;EACT,QAAQ;GACN,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,OAAO,EAAE;GAC1C,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
1	+ {"version":3,"file":"radio.style.cjs","names":["defineComponentSlotStyle","focusRingStyle"],"sources":["../../../../src/components/radio/radio.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const radioStyle = defineComponentSlotStyle({\n base: {\n group: {},\n indicator: {\n alignItems: \"center\",\n bg: \"{indicator-bg}\",\n borderColor: \"{indicator-border-color}\",\n borderWidth: \"2px\",\n boxSize: \"{indicator-size}\",\n display: \"inline-flex\",\n focusRingColor: \"{focus-border-color}\",\n \"input:focus-visible + &\": focusRingStyle.outline,\n justifyContent: \"center\",\n _before: { display: \"block\" },\n _container: [\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n ],\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n label: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n \"--focus-border-color\": \"colorScheme.outline\",\n \"--indicator-bg\": \"transparent\",\n \"--indicator-border-color\": \"colors.border.emphasized\",\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"{label-size}\",\n gap: \"2\",\n userSelect: \"none\",\n _readOnly: { layerStyle: \"readOnly\" },\n _disabled: { layerStyle: \"disabled\" },\n },\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'circle'\n */\n shape: {\n circle: { indicator: { rounded: \"full\", _before: { rounded: \"full\" } } },\n rounded: {\n indicator: {\n rounded: \"l1\",\n _before: { rounded: \"calc({radii.l1} / 2)\" },\n },\n },\n square: {\n indicator: { rounded: \"0\", _before: { rounded: \"0\" } },\n },\n },\n },\n\n variants: {\n base: {\n indicator: { _checked: { _before: { bg: \"colorScheme.solid\" } } },\n },\n outline: {\n indicator: { _checked: { _before: { bg: \"colorScheme.outline\" } } },\n root: { _checked: { \"--indicator-border-color\": \"colorScheme.outline\" } },\n },\n solid: {},\n subtle: {\n indicator: { bg: \"colorScheme.subtle\" },\n root: { \"--indicator-border-color\": \"transparent\" },\n },\n surface: {\n indicator: { bg: \"colorScheme.subtle\" },\n root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n },\n },\n\n sizes: {\n sm: {\n indicator: { _before: { boxSize: \"1.5\" } },\n root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n },\n md: {\n indicator: { _before: { boxSize: \"2\" } },\n root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n },\n lg: {\n indicator: { _before: { boxSize: \"3\" } },\n root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"solid\",\n shape: \"circle\",\n },\n})\n\nexport type RadioStyle = typeof radioStyle\n"],"mappings":";;;;;AAEA,MAAa,aAAaA,wCAAyB;CACjD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2BC,kCAAe;GAC1C,gBAAgB;GAChB,SAAS,EAAE,SAAS,SAAS;GAC7B,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,kBAAkB;GAClB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,QAAQ,EAAE,WAAW;GAAE,SAAS;GAAQ,SAAS,EAAE,SAAS,QAAQ;GAAE,EAAE;EACxE,SAAS,EACP,WAAW;GACT,SAAS;GACT,SAAS,EAAE,SAAS,wBAAwB;GAC7C,EACF;EACD,QAAQ,EACN,WAAW;GAAE,SAAS;GAAK,SAAS,EAAE,SAAS,KAAK;GAAE,EACvD;EACF,EACF;CAED,UAAU;EACR,MAAM,EACJ,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAClE;EACD,SAAS;GACP,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,uBAAuB,EAAE,EAAE;GACnE,MAAM,EAAE,UAAU,EAAE,4BAA4B,uBAAuB,EAAE;GAC1E;EACD,OAAO,EAAE;EACT,QAAQ;GACN,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW,EAAE,IAAI,sBAAsB;GACvC,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,OAAO,EAAE;GAC1C,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,SAAS,EAAE,SAAS,KAAK,EAAE;GACxC,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}

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

@@ -15,7 +15,7 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 	const group = require_use_radio_group.useRadioGroupContext();
 	const { name: groupName, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = (0, react.useId)();
-	const { props: { id, ref, name = groupName, checked: checkedProp, defaultChecked = false, disabled, readOnly, required, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
+	const { props: { id, ref, name = groupName, "aria-controls": ariaControlsProp, "aria-labelledby": ariaLabelledbyProp, checked: checkedProp, defaultChecked = false, disabled, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = require_use_field_props.useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -45,7 +45,7 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		checked,
 		rest
 	]);
-	const getInputProps = (0, react.useCallback)(({ "aria-describedby": ariaDescribedby$1, ...props$1 } = {}) => {
+	const getInputProps = (0, react.useCallback)(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby$1, "aria-labelledby": ariaLabelledby, ...props$1 } = {}) => {
 		const sharedProps = {
 			...dataProps,
 			...ariaProps,
@@ -54,12 +54,15 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 			name,
 			style: require_dom.visuallyHiddenAttributes.style,
 			"aria-checked": checked,
+			"aria-controls": (0, require_utils_index.utils_exports.cx)(ariaControls, ariaControlsProp),
 			"aria-describedby": (0, require_utils_index.utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby$1),
+			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
 			"data-checked": (0, require_utils_index.utils_exports.dataAttr)(checked),
 			checked,
 			disabled,
 			readOnly,
 			required,
+			tabIndex,
 			value,
 			...props$1,
 			ref: require_ref.mergeRefs(props$1.ref, ref),
@@ -69,18 +72,22 @@ const useRadio = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {}) =>
 		};
 		return getGroupInputProps?.(sharedProps) ?? sharedProps;
 	}, [
+		dataProps,
+		ariaProps,
 		id,
 		name,
 		checked,
+		ariaControlsProp,
 		resolvedAriaDescribedby,
+		ariaLabelledbyProp,
 		disabled,
 		readOnly,
 		required,
+		tabIndex,
 		value,
-		dataProps,
-		ariaProps,
 		ref,
-		eventProps,
+		eventProps.onBlur,
+		eventProps.onFocus,
 		onChange,
 		getGroupInputProps
 	]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-radio.cjs","names":["useRadioGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/radio/use-radio.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useRadioGroupContext } from \"./use-radio-group\"\n\nexport interface UseRadioProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the radio will be checked.\n /\n checked?: boolean\n /\n If `true`, the radio will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n The name of the input field in a radio.\n /\n name?: string\n /\n The value of the radio.\n /\n value?: Y\n /\n The callback invoked when the radio 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 radio is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseRadioProps<Y> = {}) => {\n const group = useRadioGroupContext()\n const {\n name: groupName,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name = groupName,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const interactive = !(readOnly \|\| disabled)\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue === value\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n setChecked(ev)\n },\n [setChecked, interactive],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, getLabelProps, checked, rest],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": checked,\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n id,\n name,\n checked,\n resolvedAriaDescribedby,\n disabled,\n readOnly,\n required,\n ~~value~~,\n ~~dataProps~~,\n ~~ariaProps~~,\n ~~ref~~,\n eventProps,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n ...props,\n }),\n [dataProps, checked],\n )\n\n return {\n checked,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQA,8CAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,OAAO,WACP,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,sCAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,qEAA0B;EACtD,cAAc;EACd,OALA,oDAAa,WAAW,IAAI,oDAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,aAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAMC,uCACH,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,gEAAyB,QAAQ;GACjC,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAMC,wCACH,~~EAAE~~,oBAAoBC,~~mBAAiB~~,GAAGF,~~YAAU~~,EAAE,KAAK;~~EAC1D~~,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC,gBAAgB;GAChB,8DAAuB,yBAAyBD,kBAAgB;GAChE,gEAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAKI,sBAAUJ,QAAM,KAAK,IAAI;GAC9B,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA,2CAXC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,gEAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAKC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-radio.cjs","names":["useRadioGroupContext","useFieldProps","useControllableEventState","getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby","visuallyHiddenAttributes","mergeRefs"],"sources":["../../../../src/components/radio/use-radio.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n cx,\n dataAttr,\n handlerAll,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useRadioGroupContext } from \"./use-radio-group\"\n\nexport interface UseRadioProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the radio will be checked.\n /\n checked?: boolean\n /\n If `true`, the radio will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n The name of the input field in a radio.\n /\n name?: string\n /\n The value of the radio.\n /\n value?: Y\n /\n The callback invoked when the radio 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 radio is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseRadioProps<Y> = {}) => {\n const group = useRadioGroupContext()\n const {\n name: groupName,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name = groupName,\n \"aria-controls\": ariaControlsProp,\n \"aria-labelledby\": ariaLabelledbyProp,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const interactive = !(readOnly \|\| disabled)\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue === value\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n setChecked(ev)\n },\n [setChecked, interactive],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, getLabelProps, checked, rest],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"radio\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": checked,\n \"aria-controls\": cx(ariaControls, ariaControlsProp),\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n \"data-checked\": dataAttr(checked),\n checked,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n dataProps,\n ariaProps,\n id,\n name,\n checked,\n ariaControlsProp,\n resolvedAriaDescribedby,\n ariaLabelledbyProp,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n ref,\n eventProps.onBlur,\n eventProps.onFocus,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n ...props,\n }),\n [dataProps, checked],\n )\n\n return {\n checked,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAa,YAAuC,EAClD,oBAAoB,qBACpB,GAAG,UACiB,EAAE,KAAK;CAC3B,MAAM,QAAQA,8CAAsB;CACpC,MAAM,EACJ,MAAM,WACN,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,yBAAc;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,OAAO,WACP,iBAAiB,kBACjB,mBAAmB,oBACnB,SAAS,aACT,iBAAiB,OACjB,UACA,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACEC,sCAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAcC,qEAA0B;EACtD,cAAc;EACd,OALA,oDAAa,WAAW,IAAI,oDAAa,MAAM,GAC3C,eAAe,QACf;EAIJ,UAAU;EACX,CAAC;CAEF,MAAM,mCACH,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,aAAW,GAAG;IAEhB,CAAC,YAAY,YAAY,CAC1B;CAED,MAAMC,uCACH,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,gEAAyB,QAAQ;GACjC,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAe;EAAS;EAAK,CAC1C;CAED,MAAMC,wCACH,EACC,iBAAiB,cACjB,oBAAoBC,mBACpB,mBAAmB,gBACnB,GAAGF,YACD,EAAE,KAAK;EACT,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAOG,qCAAyB;GAChC,gBAAgB;GAChB,2DAAoB,cAAc,iBAAiB;GACnD,8DAAuB,yBAAyBD,kBAAgB;GAChE,6DAAsB,gBAAgB,mBAAmB;GACzD,gEAAyB,QAAQ;GACjC;GACA;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAKI,sBAAUJ,QAAM,KAAK,IAAI;GAC9B,0DAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,4DAAqBA,QAAM,UAAU,SAAS;GAC9C,2DAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX;EACA;EACD,CACF;AAYD,QAAO;EACL;EACA,2CAXC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,gEAAyB,QAAQ;GACjC,GAAGA;GACJ,GACD,CAAC,WAAW,QAAQ,CACrB;EAKC;EACA;EACA;EACD"}

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

@@ -64,7 +64,7 @@ const Checkbox = withProvider(({ checkedIcon, children, errorBorderColor, focusB
 		]
 	});
 }, "root")();
-const CheckboxIndicator = withContext("div", "indicator")();
+const CheckboxIndicator = withContext("div", "indicator")({ "data-indicator": "" });
 const CheckboxLabel = withContext("span", "label")();
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","names":[],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxStyle } from \"./checkbox.style\"\nimport { useCheckbox } from \"./use-checkbox\"\n\nexport interface CheckboxProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n ThemeProps<CheckboxStyle>,\n UseInputBorderProps {\n /*\n The icon to display in the checkbox when it is checked.\n /\n checkedIcon?: ReactNode\n /\n The icon to display in the checkbox when it is indeterminate.\n /\n indeterminateIcon?: ReactNode\n /\n Props for the indicator component.\n /\n indicatorProps?: CheckboxIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: CheckboxLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: CheckboxPropsContext,\n usePropsContext: useCheckboxPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<CheckboxProps, CheckboxStyle>(\"checkbox\", checkboxStyle)\n\nexport {\n CheckboxPropsContext,\n component,\n useCheckboxPropsContext,\n useRootComponentProps,\n}\n\n/\n `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n \n @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const Checkbox = withProvider<\"label\", CheckboxProps>(\n ({\n checkedIcon,\n children,\n errorBorderColor,\n focusBorderColor,\n indeterminateIcon,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n } = useCheckbox(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const icon = useMemo(() => {\n if (indeterminate) {\n return indeterminateIcon \|\| <MinusIcon />\n } else if (checked) {\n return checkedIcon \|\| <CheckIcon />\n } else {\n return null\n }\n }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return (\n <CheckboxIndicator {...getIndicatorProps(indicatorProps)}>\n {icon}\n </CheckboxIndicator>\n )\n }, [getIndicatorProps, indicatorProps, icon])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? (\n <CheckboxLabel {...labelProps}>{children}</CheckboxLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: CheckboxProps<Y>): ReactElement\n}>\n\ninterface CheckboxIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxIndicator = withContext<\"div\", CheckboxIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface CheckboxLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst CheckboxLabel = withContext<\"span\", CheckboxLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,EACJ,WACA,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACA,0BACE,oBAAkD,YAAY,cAAc;;;;;;AAchF,MAAa,WAAW,cACrB,EACC,aACA,UACA,kBACA,kBACA,mBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACE,YAAY,KAAK;CACrB,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,OAAO,cAAc;AACzB,MAAI,cACF,QAAO,qBAAqB,oBAAC,cAAY;WAChC,QACT,QAAO,eAAe,oBAAC,cAAY;MAEnC,QAAO;IAER;EAAC;EAAe;EAAmB;EAAS;EAAY,CAAC;CAC5D,MAAM,QAAQ,cAAc;AAC1B,SAAO,oBAAC,OAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,YAAY,cAAc;AAC9B,SACE,oBAAC;GAAkB,GAAI,kBAAkB,eAAe;aACrD;IACiB;IAErB;EAAC;EAAmB;EAAgB;EAAK,CAAC;AAE7C,QACE,qBAAC,OAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WACC,oBAAC;IAAc,GAAI;IAAa;KAAyB,GACvD;;GACS;GAGnB,OACD,EAAE;AAMH,MAAM,oBAAoB,YACxB,OACA,YACD,EAAE;~~AAIH~~,MAAM,gBAAgB,YAAwC,QAAQ,QAAQ,EAAE"}
1	+ {"version":3,"file":"checkbox.js","names":[],"sources":["../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { CheckboxStyle } from \"./checkbox.style\"\nimport type { UseCheckboxProps } from \"./use-checkbox\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { CheckIcon, MinusIcon } from \"../icon\"\nimport { useInputBorder } from \"../input\"\nimport { checkboxStyle } from \"./checkbox.style\"\nimport { useCheckbox } from \"./use-checkbox\"\n\nexport interface CheckboxProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseCheckboxProps<Y>>,\n ThemeProps<CheckboxStyle>,\n UseInputBorderProps {\n /*\n The icon to display in the checkbox when it is checked.\n /\n checkedIcon?: ReactNode\n /\n The icon to display in the checkbox when it is indeterminate.\n /\n indeterminateIcon?: ReactNode\n /\n Props for the indicator component.\n /\n indicatorProps?: CheckboxIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: CheckboxLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: CheckboxPropsContext,\n usePropsContext: useCheckboxPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<CheckboxProps, CheckboxStyle>(\"checkbox\", checkboxStyle)\n\nexport {\n CheckboxPropsContext,\n component,\n useCheckboxPropsContext,\n useRootComponentProps,\n}\n\n/\n `Checkbox` is a component used for allowing users to select multiple values from multiple options.\n \n @see https://yamada-ui.com/docs/components/checkbox\n */\nexport const Checkbox = withProvider<\"label\", CheckboxProps>(\n ({\n checkedIcon,\n children,\n errorBorderColor,\n focusBorderColor,\n indeterminateIcon,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n } = useCheckbox(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const icon = useMemo(() => {\n if (indeterminate) {\n return indeterminateIcon \|\| <MinusIcon />\n } else if (checked) {\n return checkedIcon \|\| <CheckIcon />\n } else {\n return null\n }\n }, [indeterminate, indeterminateIcon, checked, checkedIcon])\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return (\n <CheckboxIndicator {...getIndicatorProps(indicatorProps)}>\n {icon}\n </CheckboxIndicator>\n )\n }, [getIndicatorProps, indicatorProps, icon])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? (\n <CheckboxLabel {...labelProps}>{children}</CheckboxLabel>\n ) : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: CheckboxProps<Y>): ReactElement\n}>\n\ninterface CheckboxIndicatorProps extends HTMLStyledProps {}\n\nconst CheckboxIndicator = withContext<\"div\", CheckboxIndicatorProps>(\n \"div\",\n \"indicator\",\n)({ \"data-indicator\": \"\" })\n\ninterface CheckboxLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst CheckboxLabel = withContext<\"span\", CheckboxLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,EACJ,WACA,cAAc,sBACd,iBAAiB,yBACjB,aACA,cACA,0BACE,oBAAkD,YAAY,cAAc;;;;;;AAchF,MAAa,WAAW,cACrB,EACC,aACA,UACA,kBACA,kBACA,mBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,SACA,eACA,mBACA,eACA,iBACE,YAAY,KAAK;CACrB,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,OAAO,cAAc;AACzB,MAAI,cACF,QAAO,qBAAqB,oBAAC,cAAY;WAChC,QACT,QAAO,eAAe,oBAAC,cAAY;MAEnC,QAAO;IAER;EAAC;EAAe;EAAmB;EAAS;EAAY,CAAC;CAC5D,MAAM,QAAQ,cAAc;AAC1B,SAAO,oBAAC,OAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,YAAY,cAAc;AAC9B,SACE,oBAAC;GAAkB,GAAI,kBAAkB,eAAe;aACrD;IACiB;IAErB;EAAC;EAAmB;EAAgB;EAAK,CAAC;AAE7C,QACE,qBAAC,OAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WACC,oBAAC;IAAc,GAAI;IAAa;KAAyB,GACvD;;GACS;GAGnB,OACD,EAAE;AAMH,MAAM,oBAAoB,YACxB,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,gBAAgB,YAAwC,QAAQ,QAAQ,EAAE"}

package/dist/esm/components/checkbox/checkbox.style.js CHANGED Viewed

@@ -8,6 +8,7 @@ const checkboxStyle = defineComponentSlotStyle({
 		group: {},
 		indicator: {
 			alignItems: "center",
+			bg: "{indicator-bg}",
 			borderColor: "{indicator-border-color}",
 			borderWidth: "2px",
 			boxSize: "{indicator-size}",
@@ -42,6 +43,7 @@ const checkboxStyle = defineComponentSlotStyle({
 		root: {
 			"--error-border-color": "colors.border.error",
 			"--focus-border-color": "colorScheme.outline",
+			"--indicator-bg": "transparent",
 			"--indicator-border-color": "colors.border.emphasized",
 			alignItems: "center",
 			display: "flex",

package/dist/esm/components/checkbox/checkbox.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.style.js","names":[],"sources":["../../../../src/components/checkbox/checkbox.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const checkboxStyle = defineComponentSlotStyle({\n base: {\n group: {},\n indicator: {\n alignItems: \"center\",\n borderColor: \"{indicator-border-color}\",\n borderWidth: \"2px\",\n boxSize: \"{indicator-size}\",\n display: \"inline-flex\",\n focusRingColor: \"{focus-border-color}\",\n \"input:focus-visible + &\": focusRingStyle.outline,\n justifyContent: \"center\",\n _container: [\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n ],\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n label: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n \"--focus-border-color\": \"colorScheme.outline\",\n \"--indicator-border-color\": \"colors.border.emphasized\",\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"{label-size}\",\n gap: \"2\",\n userSelect: \"none\",\n _readOnly: { layerStyle: \"readOnly\" },\n _disabled: { layerStyle: \"disabled\" },\n },\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'rounded'\n */\n shape: {\n rounded: {\n indicator: { rounded: \"l1\" },\n },\n square: {\n indicator: { rounded: \"0\" },\n },\n },\n },\n\n variants: {\n outline: {\n indicator: { color: \"colorScheme.outline\" },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.outline\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.outline\" },\n },\n },\n solid: {\n indicator: {\n color: \"colorScheme.contrast\",\n _checked: { bg: \"colorScheme.solid\" },\n _indeterminate: { bg: \"colorScheme.solid\" },\n },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.solid\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.solid\" },\n },\n },\n subtle: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"transparent\" },\n },\n surface: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n },\n },\n\n sizes: {\n sm: {\n indicator: { fontSize: \"xs\" },\n root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n },\n md: {\n indicator: { fontSize: \"sm\" },\n root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n },\n lg: {\n indicator: { fontSize: \"md\" },\n root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"solid\",\n shape: \"rounded\",\n },\n})\n\nexport type CheckboxStyle = typeof checkboxStyle\n"],"mappings":";;;;;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2B,eAAe;GAC1C,gBAAgB;GAChB,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,SAAS,EACP,WAAW,EAAE,SAAS,MAAM,EAC7B;EACD,QAAQ,EACN,WAAW,EAAE,SAAS,KAAK,EAC5B;EACF,EACF;CAED,UAAU;EACR,SAAS;GACP,WAAW,EAAE,OAAO,uBAAuB;GAC3C,MAAM;IACJ,UAAU,EAAE,4BAA4B,uBAAuB;IAC/D,gBAAgB,EAAE,4BAA4B,uBAAuB;IACtE;GACF;EACD,OAAO;GACL,WAAW;IACT,OAAO;IACP,UAAU,EAAE,IAAI,qBAAqB;IACrC,gBAAgB,EAAE,IAAI,qBAAqB;IAC5C;GACD,MAAM;IACJ,UAAU,EAAE,4BAA4B,qBAAqB;IAC7D,gBAAgB,EAAE,4BAA4B,qBAAqB;IACpE;GACF;EACD,QAAQ;GACN,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}
1	+ {"version":3,"file":"checkbox.style.js","names":[],"sources":["../../../../src/components/checkbox/checkbox.style.ts"],"sourcesContent":["import { defineComponentSlotStyle, focusRingStyle } from \"../../core\"\n\nexport const checkboxStyle = defineComponentSlotStyle({\n base: {\n group: {},\n indicator: {\n alignItems: \"center\",\n bg: \"{indicator-bg}\",\n borderColor: \"{indicator-border-color}\",\n borderWidth: \"2px\",\n boxSize: \"{indicator-size}\",\n display: \"inline-flex\",\n focusRingColor: \"{focus-border-color}\",\n \"input:focus-visible + &\": focusRingStyle.outline,\n justifyContent: \"center\",\n _container: [\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"panel\"' },\n { css: { bg: \"bg\" }, style: '--form-group-variant: \"elevated\"' },\n { css: { bg: \"bg\" }, style: '--fieldset-root-variant: \"elevated\"' },\n ],\n _invalid: {\n borderColor: \"{error-border-color}\",\n focusRingColor: \"{error-border-color}\",\n },\n },\n label: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n \"--focus-border-color\": \"colorScheme.outline\",\n \"--indicator-bg\": \"transparent\",\n \"--indicator-border-color\": \"colors.border.emphasized\",\n alignItems: \"center\",\n display: \"flex\",\n fontSize: \"{label-size}\",\n gap: \"2\",\n userSelect: \"none\",\n _readOnly: { layerStyle: \"readOnly\" },\n _disabled: { layerStyle: \"disabled\" },\n },\n },\n\n props: {\n /*\n The shape of the component\n \n @default 'rounded'\n */\n shape: {\n rounded: {\n indicator: { rounded: \"l1\" },\n },\n square: {\n indicator: { rounded: \"0\" },\n },\n },\n },\n\n variants: {\n outline: {\n indicator: { color: \"colorScheme.outline\" },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.outline\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.outline\" },\n },\n },\n solid: {\n indicator: {\n color: \"colorScheme.contrast\",\n _checked: { bg: \"colorScheme.solid\" },\n _indeterminate: { bg: \"colorScheme.solid\" },\n },\n root: {\n _checked: { \"--indicator-border-color\": \"colorScheme.solid\" },\n _indeterminate: { \"--indicator-border-color\": \"colorScheme.solid\" },\n },\n },\n subtle: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"transparent\" },\n },\n surface: {\n indicator: { bg: \"colorScheme.subtle\", color: \"colorScheme.fg\" },\n root: { \"--indicator-border-color\": \"colorScheme.muted\" },\n },\n },\n\n sizes: {\n sm: {\n indicator: { fontSize: \"xs\" },\n root: { \"--indicator-size\": \"sizes.3.5\", \"--label-size\": \"fontSizes.sm\" },\n },\n md: {\n indicator: { fontSize: \"sm\" },\n root: { \"--indicator-size\": \"sizes.4\", \"--label-size\": \"fontSizes.md\" },\n },\n lg: {\n indicator: { fontSize: \"md\" },\n root: { \"--indicator-size\": \"sizes.5\", \"--label-size\": \"fontSizes.lg\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"solid\",\n shape: \"rounded\",\n },\n})\n\nexport type CheckboxStyle = typeof checkboxStyle\n"],"mappings":";;;;;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO,EAAE;EACT,WAAW;GACT,YAAY;GACZ,IAAI;GACJ,aAAa;GACb,aAAa;GACb,SAAS;GACT,SAAS;GACT,gBAAgB;GAChB,2BAA2B,eAAe;GAC1C,gBAAgB;GAChB,YAAY;IACV;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAiC;IAC7D;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAoC;IAChE;KAAE,KAAK,EAAE,IAAI,MAAM;KAAE,OAAO;KAAuC;IACpE;GACD,UAAU;IACR,aAAa;IACb,gBAAgB;IACjB;GACF;EACD,OAAO,EAAE;EACT,MAAM;GACJ,wBAAwB;GACxB,wBAAwB;GACxB,kBAAkB;GAClB,4BAA4B;GAC5B,YAAY;GACZ,SAAS;GACT,UAAU;GACV,KAAK;GACL,YAAY;GACZ,WAAW,EAAE,YAAY,YAAY;GACrC,WAAW,EAAE,YAAY,YAAY;GACtC;EACF;CAED,OAAO,EAML,OAAO;EACL,SAAS,EACP,WAAW,EAAE,SAAS,MAAM,EAC7B;EACD,QAAQ,EACN,WAAW,EAAE,SAAS,KAAK,EAC5B;EACF,EACF;CAED,UAAU;EACR,SAAS;GACP,WAAW,EAAE,OAAO,uBAAuB;GAC3C,MAAM;IACJ,UAAU,EAAE,4BAA4B,uBAAuB;IAC/D,gBAAgB,EAAE,4BAA4B,uBAAuB;IACtE;GACF;EACD,OAAO;GACL,WAAW;IACT,OAAO;IACP,UAAU,EAAE,IAAI,qBAAqB;IACrC,gBAAgB,EAAE,IAAI,qBAAqB;IAC5C;GACD,MAAM;IACJ,UAAU,EAAE,4BAA4B,qBAAqB;IAC7D,gBAAgB,EAAE,4BAA4B,qBAAqB;IACpE;GACF;EACD,QAAQ;GACN,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,eAAe;GACpD;EACD,SAAS;GACP,WAAW;IAAE,IAAI;IAAsB,OAAO;IAAkB;GAChE,MAAM,EAAE,4BAA4B,qBAAqB;GAC1D;EACF;CAED,OAAO;EACL,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAa,gBAAgB;IAAgB;GAC1E;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACD,IAAI;GACF,WAAW,EAAE,UAAU,MAAM;GAC7B,MAAM;IAAE,oBAAoB;IAAW,gBAAgB;IAAgB;GACxE;EACF;CAED,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACF,CAAC"}

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

@@ -14,7 +14,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 	const group = useCheckboxGroupContext();
 	const { max, value: groupValue, getInputProps: getGroupInputProps, getLabelProps } = group ?? {};
 	const uuid = useId();
-	const { props: { id, ref, name, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps({
+	const { props: { id, ref, name, "aria-controls": ariaControlsProp, "aria-labelledby": ariaLabelledbyProp, checked: checkedProp, defaultChecked = false, disabled, indeterminate = false, readOnly, required, tabIndex, value, onChange: onChangeProp, ...rest }, ariaProps: { "aria-describedby": ariaDescribedby, ...ariaProps }, dataProps, eventProps } = useFieldProps({
 		id: group ? uuid : void 0,
 		...props,
 		notSupportReadOnly: true
@@ -55,7 +55,7 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		rest,
 		getLabelProps
 	]);
-	const getInputProps = useCallback(({ "aria-describedby": ariaDescribedby$1, ...props$1 } = {}) => {
+	const getInputProps = useCallback(({ "aria-controls": ariaControls, "aria-describedby": ariaDescribedby$1, "aria-labelledby": ariaLabelledby, ...props$1 } = {}) => {
 		const sharedProps = {
 			...dataProps,
 			...ariaProps,
@@ -64,14 +64,17 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 			name,
 			style: visuallyHiddenAttributes.style,
 			"aria-checked": indeterminate ? "mixed" : checked,
+			"aria-controls": (0, utils_exports.cx)(ariaControls, ariaControlsProp),
 			"aria-describedby": (0, utils_exports.cx)(resolvedAriaDescribedby, ariaDescribedby$1),
 			"aria-disabled": (0, utils_exports.ariaAttr)(!interactive),
+			"aria-labelledby": (0, utils_exports.cx)(ariaLabelledby, ariaLabelledbyProp),
 			"data-checked": (0, utils_exports.dataAttr)(checked),
 			"data-indeterminate": (0, utils_exports.dataAttr)(indeterminate),
 			checked,
 			disabled,
 			readOnly,
 			required,
+			tabIndex,
 			value,
 			...props$1,
 			ref: mergeRefs(props$1.ref, ref, indeterminateRef),
@@ -85,17 +88,21 @@ const useCheckbox = ({ "aria-describedby": ariaDescribedbyProp, ...props } = {})
 		ariaProps,
 		id,
 		name,
+		indeterminate,
 		checked,
+		ariaControlsProp,
 		resolvedAriaDescribedby,
 		interactive,
-		indeterminate,
+		ariaLabelledbyProp,
 		disabled,
 		readOnly,
 		required,
+		tabIndex,
 		value,
 		ref,
 		indeterminateRef,
-		eventProps,
+		eventProps.onBlur,
+		eventProps.onFocus,
 		onChange,
 		getGroupInputProps
 	]);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-checkbox.js","names":["getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n isNumber,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the checkbox will be checked.\n /\n checked?: boolean\n /\n If `true`, the checkbox will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n If `true`, the checkbox will be indeterminate.\n \n @default false\n /\n indeterminate?: boolean\n /\n The name of the input field in a checkbox.\n /\n name?: string\n /\n The value of the checkbox.\n /\n value?: Y\n /\n The callback invoked when the checkbox 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 checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseCheckboxProps<Y> = {}) => {\n const group = useCheckboxGroupContext()\n const {\n max,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n indeterminate = false,\n readOnly,\n required,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue.includes(value)\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n const trulyDisabled =\n !checked && isNumber(max) && group && group.value.length >= max\n const interactive = !(readOnly \|\| trulyDisabled)\n const indeterminateRef = useCallback(\n (el: HTMLInputElement \| null) => {\n if (el) el.indeterminate = indeterminate\n },\n [indeterminate],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n if (indeterminate) ev.target.checked = true\n\n setChecked(ev)\n },\n [interactive, indeterminate, setChecked],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, checked, indeterminate, rest, getLabelProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ \"aria-describedby\": ariaDescribedby, ...props } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"aria-disabled\": ariaAttr(!interactive),\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n checked,\n disabled,\n readOnly,\n required,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref, indeterminateRef),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n dataProps,\n ariaProps,\n id,\n name,\n checked,\n resolvedAriaDescribedby,\n interactive,\n ~~indeterminate~~,\n disabled,\n readOnly,\n required,\n value,\n ref,\n indeterminateRef,\n eventProps,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...props,\n }),\n [dataProps, checked, indeterminate],\n )\n\n return {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":";;;;;;;;;;;;AAmEA,MAAa,eAA0C,EACrD,oBAAoB,qBACpB,GAAG,UACoB,EAAE,KAAK;CAC9B,MAAM,QAAQ,yBAAyB;CACvC,MAAM,EACJ,KACA,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,SAAS,aACT,iBAAiB,OACjB,UACA,gBAAgB,OAChB,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACE,cAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAc,0BAA0B;EACtD,cAAc;EACd,OALA,gCAAa,WAAW,IAAI,gCAAa,MAAM,GAC3C,WAAW,SAAS,MAAM,GAC1B;EAIJ,UAAU;EACX,CAAC;CACF,MAAM,gBACJ,CAAC,uCAAoB,IAAI,IAAI,SAAS,MAAM,MAAM,UAAU;CAC9D,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,mBAAmB,aACtB,OAAgC;AAC/B,MAAI,GAAI,IAAG,gBAAgB;IAE7B,CAAC,cAAc,CAChB;CAED,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,MAAI,cAAe,IAAG,OAAO,UAAU;AAEvC,aAAW,GAAG;IAEhB;EAAC;EAAa;EAAe;EAAW,CACzC;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,4CAAyB,QAAQ;GACjC,kDAA+B,cAAc;GAC7C,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAS;EAAe;EAAM;EAAc,CACzD;CAED,MAAMC,gBAAqC,aACxC,~~EAAE~~,oBAAoBC,~~mBAAiB~~,GAAGF,~~YAAU~~,EAAE,KAAK;~~EAC1D~~,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB,gBAAiB,UAAoB;GACrD,0CAAuB,yBAAyBE,kBAAgB;GAChE,6CAA0B,CAAC,YAAY;GACvC,4CAAyB,QAAQ;GACjC,kDAA+B,cAAc;GAC7C;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAK,UAAUA,QAAM,KAAK,KAAK,iBAAiB;GAChD,sCAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,wCAAqBA,QAAM,UAAU,SAAS;GAC9C,uCAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;AAaD,QAAO;EACL;EACA;EACA,mBAdoC,aACnC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,4CAAyB,QAAQ;GACjC,kDAA+B,cAAc;GAC7C,GAAGA;GACJ,GACD;GAAC;GAAW;GAAS;GAAc,CACpC;EAMC;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-checkbox.js","names":["getRootProps: PropGetter<\"label\">","props","getInputProps: PropGetter<\"input\">","ariaDescribedby"],"sources":["../../../../src/components/checkbox/use-checkbox.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, ChangeEventHandler, FocusEventHandler } from \"react\"\nimport type { HTMLProps, HTMLRefAttributes, PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useId } from \"react\"\nimport { useControllableEventState } from \"../../hooks/use-controllable-state\"\nimport {\n ariaAttr,\n cx,\n dataAttr,\n handlerAll,\n isNumber,\n isUndefined,\n mergeRefs,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\nimport { useCheckboxGroupContext } from \"./use-checkbox-group\"\n\nexport interface UseCheckboxProps<Y extends string = string>\n extends\n Omit<HTMLProps<\"label\">, \"onBlur\" \| \"onChange\" \| \"onFocus\" \| \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /*\n If `true`, the checkbox will be checked.\n /\n checked?: boolean\n /\n If `true`, the checkbox will be initially checked.\n \n @default false\n /\n defaultChecked?: boolean\n /\n id assigned to input.\n /\n id?: string\n /\n If `true`, the checkbox will be indeterminate.\n \n @default false\n /\n indeterminate?: boolean\n /\n The name of the input field in a checkbox.\n /\n name?: string\n /\n The value of the checkbox.\n /\n value?: Y\n /\n The callback invoked when the checkbox 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 checkbox is focused.\n */\n onFocus?: FocusEventHandler<HTMLInputElement>\n}\n\nexport const useCheckbox = <Y extends string = string>({\n \"aria-describedby\": ariaDescribedbyProp,\n ...props\n}: UseCheckboxProps<Y> = {}) => {\n const group = useCheckboxGroupContext()\n const {\n max,\n value: groupValue,\n getInputProps: getGroupInputProps,\n getLabelProps,\n } = group ?? {}\n const uuid = useId()\n const {\n props: {\n id,\n ref,\n name,\n \"aria-controls\": ariaControlsProp,\n \"aria-labelledby\": ariaLabelledbyProp,\n checked: checkedProp,\n defaultChecked = false,\n disabled,\n indeterminate = false,\n readOnly,\n required,\n tabIndex,\n value,\n onChange: onChangeProp,\n ...rest\n },\n ariaProps: { \"aria-describedby\": ariaDescribedby, ...ariaProps },\n dataProps,\n eventProps,\n } = useFieldProps({\n id: group ? uuid : undefined,\n ...props,\n notSupportReadOnly: true,\n })\n const resolvedAriaDescribedby = group ? ariaDescribedbyProp : ariaDescribedby\n const resolvedChecked =\n !isUndefined(groupValue) && !isUndefined(value)\n ? groupValue.includes(value)\n : checkedProp\n const [checked, setChecked] = useControllableEventState({\n defaultValue: defaultChecked,\n value: resolvedChecked,\n onChange: onChangeProp,\n })\n const trulyDisabled =\n !checked && isNumber(max) && group && group.value.length >= max\n const interactive = !(readOnly \|\| trulyDisabled)\n const indeterminateRef = useCallback(\n (el: HTMLInputElement \| null) => {\n if (el) el.indeterminate = indeterminate\n },\n [indeterminate],\n )\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement>) => {\n if (!interactive) return (ev.defaultPrevented = true)\n\n if (indeterminate) ev.target.checked = true\n\n setChecked(ev)\n },\n [interactive, indeterminate, setChecked],\n )\n\n const getRootProps: PropGetter<\"label\"> = useCallback(\n (props = {}) => {\n const sharedProps = {\n ...dataProps,\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...rest,\n ...props,\n }\n\n return getLabelProps?.(sharedProps) ?? sharedProps\n },\n [dataProps, checked, indeterminate, rest, getLabelProps],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({\n \"aria-controls\": ariaControls,\n \"aria-describedby\": ariaDescribedby,\n \"aria-labelledby\": ariaLabelledby,\n ...props\n } = {}) => {\n const sharedProps = {\n ...dataProps,\n ...ariaProps,\n id,\n type: \"checkbox\",\n name,\n style: visuallyHiddenAttributes.style,\n \"aria-checked\": indeterminate ? (\"mixed\" as const) : checked,\n \"aria-controls\": cx(ariaControls, ariaControlsProp),\n \"aria-describedby\": cx(resolvedAriaDescribedby, ariaDescribedby),\n \"aria-disabled\": ariaAttr(!interactive),\n \"aria-labelledby\": cx(ariaLabelledby, ariaLabelledbyProp),\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n checked,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n ...props,\n ref: mergeRefs(props.ref, ref, indeterminateRef),\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n return getGroupInputProps?.(sharedProps) ?? sharedProps\n },\n [\n dataProps,\n ariaProps,\n id,\n name,\n indeterminate,\n checked,\n ariaControlsProp,\n resolvedAriaDescribedby,\n interactive,\n ariaLabelledbyProp,\n disabled,\n readOnly,\n required,\n tabIndex,\n value,\n ref,\n indeterminateRef,\n eventProps.onBlur,\n eventProps.onFocus,\n onChange,\n getGroupInputProps,\n ],\n )\n\n const getIndicatorProps: PropGetter = useCallback(\n (props = {}) => ({\n ...dataProps,\n \"aria-hidden\": \"true\",\n \"data-checked\": dataAttr(checked),\n \"data-indeterminate\": dataAttr(indeterminate),\n ...props,\n }),\n [dataProps, checked, indeterminate],\n )\n\n return {\n checked,\n indeterminate,\n getIndicatorProps,\n getInputProps,\n getRootProps,\n onChange,\n }\n}\n\nexport type UseCheckboxReturn = ReturnType<typeof useCheckbox>\n"],"mappings":";;;;;;;;;;;;AAmEA,MAAa,eAA0C,EACrD,oBAAoB,qBACpB,GAAG,UACoB,EAAE,KAAK;CAC9B,MAAM,QAAQ,yBAAyB;CACvC,MAAM,EACJ,KACA,OAAO,YACP,eAAe,oBACf,kBACE,SAAS,EAAE;CACf,MAAM,OAAO,OAAO;CACpB,MAAM,EACJ,OAAO,EACL,IACA,KACA,MACA,iBAAiB,kBACjB,mBAAmB,oBACnB,SAAS,aACT,iBAAiB,OACjB,UACA,gBAAgB,OAChB,UACA,UACA,UACA,OACA,UAAU,cACV,GAAG,QAEL,WAAW,EAAE,oBAAoB,iBAAiB,GAAG,aACrD,WACA,eACE,cAAc;EAChB,IAAI,QAAQ,OAAO;EACnB,GAAG;EACH,oBAAoB;EACrB,CAAC;CACF,MAAM,0BAA0B,QAAQ,sBAAsB;CAK9D,MAAM,CAAC,SAAS,cAAc,0BAA0B;EACtD,cAAc;EACd,OALA,gCAAa,WAAW,IAAI,gCAAa,MAAM,GAC3C,WAAW,SAAS,MAAM,GAC1B;EAIJ,UAAU;EACX,CAAC;CACF,MAAM,gBACJ,CAAC,uCAAoB,IAAI,IAAI,SAAS,MAAM,MAAM,UAAU;CAC9D,MAAM,cAAc,EAAE,YAAY;CAClC,MAAM,mBAAmB,aACtB,OAAgC;AAC/B,MAAI,GAAI,IAAG,gBAAgB;IAE7B,CAAC,cAAc,CAChB;CAED,MAAM,WAAW,aACd,OAAsC;AACrC,MAAI,CAAC,YAAa,QAAQ,GAAG,mBAAmB;AAEhD,MAAI,cAAe,IAAG,OAAO,UAAU;AAEvC,aAAW,GAAG;IAEhB;EAAC;EAAa;EAAe;EAAW,CACzC;CAED,MAAMA,eAAoC,aACvC,UAAQ,EAAE,KAAK;EACd,MAAM,cAAc;GAClB,GAAG;GACH,4CAAyB,QAAQ;GACjC,kDAA+B,cAAc;GAC7C,GAAG;GACH,GAAGC;GACJ;AAED,SAAO,gBAAgB,YAAY,IAAI;IAEzC;EAAC;EAAW;EAAS;EAAe;EAAM;EAAc,CACzD;CAED,MAAMC,gBAAqC,aACxC,EACC,iBAAiB,cACjB,oBAAoBC,mBACpB,mBAAmB,gBACnB,GAAGF,YACD,EAAE,KAAK;EACT,MAAM,cAAc;GAClB,GAAG;GACH,GAAG;GACH;GACA,MAAM;GACN;GACA,OAAO,yBAAyB;GAChC,gBAAgB,gBAAiB,UAAoB;GACrD,uCAAoB,cAAc,iBAAiB;GACnD,0CAAuB,yBAAyBE,kBAAgB;GAChE,6CAA0B,CAAC,YAAY;GACvC,yCAAsB,gBAAgB,mBAAmB;GACzD,4CAAyB,QAAQ;GACjC,kDAA+B,cAAc;GAC7C;GACA;GACA;GACA;GACA;GACA;GACA,GAAGF;GACH,KAAK,UAAUA,QAAM,KAAK,KAAK,iBAAiB;GAChD,sCAAmBA,QAAM,QAAQ,WAAW,OAAO;GACnD,wCAAqBA,QAAM,UAAU,SAAS;GAC9C,uCAAoBA,QAAM,SAAS,WAAW,QAAQ;GACvD;AAED,SAAO,qBAAqB,YAAY,IAAI;IAE9C;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,WAAW;EACX,WAAW;EACX;EACA;EACD,CACF;AAaD,QAAO;EACL;EACA;EACA,mBAdoC,aACnC,UAAQ,EAAE,MAAM;GACf,GAAG;GACH,eAAe;GACf,4CAAyB,QAAQ;GACjC,kDAA+B,cAAc;GAC7C,GAAGA;GACJ,GACD;GAAC;GAAW;GAAS;GAAc,CACpC;EAMC;EACA;EACA;EACD"}

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

@@ -44,7 +44,7 @@ const Radio = withProvider(({ children, errorBorderColor, focusBorderColor, indi
 		]
 	});
 }, "root")();
-const RadioIndicator = withContext("div", "indicator")();
+const RadioIndicator = withContext("div", "indicator")({ "data-indicator": "" });
 const RadioLabel = withContext("span", "label")();
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.js","names":[],"sources":["../../../../src/components/radio/radio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { RadioStyle } from \"./radio.style\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder } from \"../input\"\nimport { radioStyle } from \"./radio.style\"\nimport { useRadio } from \"./use-radio\"\n\nexport interface RadioProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseRadioProps<Y>>,\n ThemeProps<RadioStyle>,\n UseInputBorderProps {\n /*\n Props for the indicator component.\n /\n indicatorProps?: RadioIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: RadioLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: RadioPropsContext,\n usePropsContext: useRadioPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<RadioProps, RadioStyle>(\"radio\", radioStyle)\n\nexport {\n component,\n RadioPropsContext,\n useRadioPropsContext,\n useRootComponentProps,\n}\n\n/\n `Radio` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/radio\n */\nexport const Radio = withProvider<\"label\", RadioProps>(\n ({\n children,\n errorBorderColor,\n focusBorderColor,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const { getIndicatorProps, getInputProps, getRootProps } = useRadio(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return <RadioIndicator {...getIndicatorProps(indicatorProps)} />\n }, [getIndicatorProps, indicatorProps])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? <RadioLabel {...labelProps}>{children}</RadioLabel> : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: RadioProps<Y>): ReactElement\n}>\n\ninterface RadioIndicatorProps extends HTMLStyledProps {}\n\nconst RadioIndicator = withContext<\"div\", RadioIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\ninterface RadioLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst RadioLabel = withContext<\"span\", RadioLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,EACJ,WACA,cAAc,mBACd,iBAAiB,sBACjB,aACA,cACA,0BACE,oBAA4C,SAAS,WAAW;;;;;;AAcpE,MAAa,QAAQ,cAClB,EACC,UACA,kBACA,kBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,mBAAmB,eAAe,iBAAiB,SAAS,KAAK;CACzE,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,QAAQ,cAAc;AAC1B,SAAO,oBAAC,OAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,YAAY,cAAc;AAC9B,SAAO,oBAAC,kBAAe,GAAI,kBAAkB,eAAe,GAAI;IAC/D,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,qBAAC,OAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WAAW,oBAAC;IAAW,GAAI;IAAa;KAAsB,GAAG;;GACrD;GAGnB,OACD,EAAE;AAMH,MAAM,iBAAiB,YACrB,OACA,YACD,EAAE;~~AAIH~~,MAAM,aAAa,YAAqC,QAAQ,QAAQ,EAAE"}
1	+ {"version":3,"file":"radio.js","names":[],"sources":["../../../../src/components/radio/radio.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { GenericsComponent, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { Merge } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { RadioStyle } from \"./radio.style\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder } from \"../input\"\nimport { radioStyle } from \"./radio.style\"\nimport { useRadio } from \"./use-radio\"\n\nexport interface RadioProps<Y extends string = string>\n extends\n Merge<HTMLStyledProps<\"label\">, UseRadioProps<Y>>,\n ThemeProps<RadioStyle>,\n UseInputBorderProps {\n /*\n Props for the indicator component.\n /\n indicatorProps?: RadioIndicatorProps\n /\n Props for the input element.\n /\n inputProps?: HTMLStyledProps<\"input\">\n /\n Props for the label component.\n /\n labelProps?: RadioLabelProps\n /\n Props for the label element.\n /\n rootProps?: HTMLStyledProps<\"label\">\n}\n\nconst {\n component,\n PropsContext: RadioPropsContext,\n usePropsContext: useRadioPropsContext,\n withContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<RadioProps, RadioStyle>(\"radio\", radioStyle)\n\nexport {\n component,\n RadioPropsContext,\n useRadioPropsContext,\n useRootComponentProps,\n}\n\n/\n `Radio` is a component used for allowing users to select one option from multiple choices.\n \n @see https://yamada-ui.com/docs/components/radio\n */\nexport const Radio = withProvider<\"label\", RadioProps>(\n ({\n children,\n errorBorderColor,\n focusBorderColor,\n indicatorProps,\n inputProps,\n labelProps,\n rootProps,\n ...rest\n }) => {\n const { getIndicatorProps, getInputProps, getRootProps } = useRadio(rest)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const input = useMemo(() => {\n return <styled.input {...getInputProps(inputProps)} />\n }, [getInputProps, inputProps])\n const indicator = useMemo(() => {\n return <RadioIndicator {...getIndicatorProps(indicatorProps)} />\n }, [getIndicatorProps, indicatorProps])\n\n return (\n <styled.label {...getRootProps({ ...varProps, ...rootProps })}>\n {input}\n {indicator}\n {children ? <RadioLabel {...labelProps}>{children}</RadioLabel> : null}\n </styled.label>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: RadioProps<Y>): ReactElement\n}>\n\ninterface RadioIndicatorProps extends HTMLStyledProps {}\n\nconst RadioIndicator = withContext<\"div\", RadioIndicatorProps>(\n \"div\",\n \"indicator\",\n)({ \"data-indicator\": \"\" })\n\ninterface RadioLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst RadioLabel = withContext<\"span\", RadioLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;AAqCA,MAAM,EACJ,WACA,cAAc,mBACd,iBAAiB,sBACjB,aACA,cACA,0BACE,oBAA4C,SAAS,WAAW;;;;;;AAcpE,MAAa,QAAQ,cAClB,EACC,UACA,kBACA,kBACA,gBACA,YACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,EAAE,mBAAmB,eAAe,iBAAiB,SAAS,KAAK;CACzE,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,QAAQ,cAAc;AAC1B,SAAO,oBAAC,OAAO,SAAM,GAAI,cAAc,WAAW,GAAI;IACrD,CAAC,eAAe,WAAW,CAAC;CAC/B,MAAM,YAAY,cAAc;AAC9B,SAAO,oBAAC,kBAAe,GAAI,kBAAkB,eAAe,GAAI;IAC/D,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,qBAAC,OAAO;EAAM,GAAI,aAAa;GAAE,GAAG;GAAU,GAAG;GAAW,CAAC;;GAC1D;GACA;GACA,WAAW,oBAAC;IAAW,GAAI;IAAa;KAAsB,GAAG;;GACrD;GAGnB,OACD,EAAE;AAMH,MAAM,iBAAiB,YACrB,OACA,YACD,CAAC,EAAE,kBAAkB,IAAI,CAAC;AAI3B,MAAM,aAAa,YAAqC,QAAQ,QAAQ,EAAE"}