npm - @yamada-ui/react - Versions diffs - 2.3.1-dev-20261030085350 → 2.4.0-next-20261101160828 - Mend

@yamada-ui/react 2.3.1-dev-20261030085350 → 2.4.0-next-20261101160828

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

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

@@ -1,6 +1,5 @@
 "use client";
 const require_factory = require("../../core/system/factory.cjs");
-const require_props = require("../../core/components/props.cjs");
 const require_create_component = require("../../core/components/create-component.cjs");
 const require_factory$1 = require("../motion/factory.cjs");
 const require_hooks_use_value_index = require("../../hooks/use-value/index.cjs");
@@ -80,8 +79,13 @@ const SegmentedControlItem = withContext(({ children, indicatorProps, ...rest })
 }, "item")((props) => {
 	const { indicatorProps, itemProps } = useComponentContext();
 	return {
-		...require_props.mergeProps(itemProps, props)(),
-		indicatorProps: require_props.mergeProps(indicatorProps, itemProps?.indicatorProps, props.indicatorProps)()
+		...itemProps,
+		...props,
+		indicatorProps: {
+			...indicatorProps,
+			...itemProps?.indicatorProps,
+			...props.indicatorProps
+		}
 	};
 });
 const SegmentedControlIndicator = withContext(({ transition, ...props }) => {

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

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

package/dist/cjs/components/toggle/toggle-group.cjs CHANGED Viewed

@@ -6,12 +6,20 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/toggle/toggle-group.tsx
 const ToggleGroupRoot = require_toggle.component((props) => {
-	const [, { colorScheme, size, variant, attached, ...rest }] = require_toggle.useRootComponentProps(props, "group", { transferProps: [
+	const [, { colorScheme, size, variant, attached, children, items = [], ...rest }] = require_toggle.useRootComponentProps(props, "group", { transferProps: [
 		"size",
 		"variant",
 		"colorScheme"
 	] });
 	const { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef } = require_use_toggle_group.useToggleGroup(rest);
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return items.map(({ "aria-label": ariaLabel, label, value, ...rest }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_toggle.Toggle, {
+			"aria-label": ariaLabel ?? label,
+			value,
+			...rest
+		}, value ?? index));
+	}, [items, children]);
 	const context = (0, react.useMemo)(() => ({
 		colorScheme,
 		size,
@@ -42,7 +50,8 @@ const ToggleGroupRoot = require_toggle.component((props) => {
 			value: groupContext,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
 				attached,
-				...getGroupProps()
+				...getGroupProps(),
+				children: computedChildren
 			})
 		})
 	});

package/dist/cjs/components/toggle/toggle-group.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-group.cjs","names":["component","useRootComponentProps","useToggleGroup","useMemo","TogglePropsContext","ToggleGroupContext","Group"],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport { component, TogglePropsContext, useRootComponentProps } from \"./toggle\"\nimport { ToggleGroupContext, useToggleGroup } from \"./use-toggle-group\"\n\n/*\n `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n */\nexport interface ToggleGroupRootProps<Y extends string \| string[] = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, ToggleStyle>,\n \"defaultValue\" \| \"onChange\" \| \"value\"\n >,\n UseToggleGroupProps<Y>,\n ThemeProps<ToggleStyle> {}\n\nexport const ToggleGroupRoot = component<\"div\", ToggleGroupRootProps>(\n (props: ToggleGroupRootProps) => {\n const [, { colorScheme, size, variant, attached, ...rest }] ~~=\n~~ useRootComponentProps(props, \"group\", {\n transferProps: [\"size\", \"variant\", \"colorScheme\"],\n })\n const {\n disabled,\n readOnly,\n value,\n getGroupProps,\n onChange,\n onChangeMapRef,\n } = useToggleGroup(rest)\n const context = useMemo<ToggleProps>(\n () => ({\n colorScheme,\n size,\n variant,\n focusVisibleRing: attached ? \"inside\" : undefined,\n }),\n [variant, size, colorScheme, attached],\n )\n const groupContext = useMemo(\n () => ({\n disabled,\n readOnly,\n value,\n onChange,\n onChangeMapRef,\n }),\n [value, disabled, readOnly, onChange, onChangeMapRef],\n )\n\n return (\n <TogglePropsContext value={context}>\n <ToggleGroupContext value={groupContext}>\n <Group attached={attached} {...getGroupProps()} ~~/>\~~n </ToggleGroupContext>\n </TogglePropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string \| string[] = string>(\n props: ToggleGroupRootProps<Y>,\n ): ReactElement\n}>\n"],"mappings":";;;;;;;~~AA+BA~~,MAAa,kBAAkBA,eAAAA,WAC5B,UAAgC;CAC/B,MAAM,~~GAAG~~,EAAE,aAAa,MAAM,SAAS,UAAU,GAAG,~~UAClDC~~,eAAAA,sBAAsB,OAAO,SAAS,~~EACpC~~,eAAe;EAAC;EAAQ;EAAW;CAAa,EAClD,CAAC;~~CACH~~,MAAM,EACJ,UACA,UACA,OACA,eACA,UACA,mBACEC,yBAAAA,eAAe,IAAI;CACvB,MAAM,WAAA,~~GAAUC~~,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA,kBAAkB,WAAW,WAAW,KAAA;CAC1C,IACA;EAAC;EAAS;EAAM;EAAa;CAAQ,CACvC;CACA,MAAM,gBAAA,GAAeA,MAAAA,QAAAA,QACZ;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAU;EAAU;CAAc,CACtD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,~~CAACC~~,eAAAA,oBAAD;EAAoB,OAAO;EACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,oBAAD;GAAoB,OAAO;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAiB;IAAU,GAAI,cAAc;~~GAAI~~,CAAA;~~EAC/B~~,CAAA;CACF,CAAA;AAExB,GACA,OACF,CAAC,CAAC"}
1	+ {"version":3,"file":"toggle-group.cjs","names":["component","useRootComponentProps","useToggleGroup","useMemo","Toggle","TogglePropsContext","ToggleGroupContext","Group"],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n component,\n Toggle,\n TogglePropsContext,\n useRootComponentProps,\n} from \"./toggle\"\nimport { ToggleGroupContext, useToggleGroup } from \"./use-toggle-group\"\n\n/*\n `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n /\nexport interface ToggleGroupRootProps<Y extends string \| string[] = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, ToggleStyle>,\n \"defaultValue\" \| \"onChange\" \| \"value\"\n >,\n UseToggleGroupProps<Y>,\n ThemeProps<ToggleStyle> {\n /\n If provided, generate options based on items.\n \n @default []\n */\n items?: Toggle<Y extends any[] ? Y[number] : Y>[]\n}\n\nexport const ToggleGroupRoot = component<\"div\", ToggleGroupRootProps>(\n (props: ToggleGroupRootProps) => {\n const [\n ,\n { colorScheme, size, variant, attached, children, items = [], ...rest },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"size\", \"variant\", \"colorScheme\"],\n })\n const {\n disabled,\n readOnly,\n value,\n getGroupProps,\n onChange,\n onChangeMapRef,\n } = useToggleGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(\n ({ \"aria-label\": ariaLabel, label, value, ...rest }, index) => (\n <Toggle\n key={value ?? index}\n aria-label={ariaLabel ?? label}\n value={value}\n {...rest}\n />\n ),\n )\n }, [items, children])\n const context = useMemo<ToggleProps>(\n () => ({\n colorScheme,\n size,\n variant,\n focusVisibleRing: attached ? \"inside\" : undefined,\n }),\n [variant, size, colorScheme, attached],\n )\n const groupContext = useMemo(\n () => ({\n disabled,\n readOnly,\n value,\n onChange,\n onChangeMapRef,\n }),\n [value, disabled, readOnly, onChange, onChangeMapRef],\n )\n\n return (\n <TogglePropsContext value={context}>\n <ToggleGroupContext value={groupContext}>\n <Group attached={attached} {...getGroupProps()}>\n {computedChildren}\n </Group>\n </ToggleGroupContext>\n </TogglePropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string \| string[] = string>(\n props: ToggleGroupRootProps<Y>,\n ): ReactElement\n}>\n"],"mappings":";;;;;;;AA2CA,MAAa,kBAAkBA,eAAAA,WAC5B,UAAgC;CAC/B,MAAM,GAEJ,EAAE,aAAa,MAAM,SAAS,UAAU,UAAU,QAAQ,CAAC,GAAG,GAAG,UAC/DC,eAAAA,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAQ;EAAW;CAAa,EAClD,CAAC;CACD,MAAM,EACJ,UACA,UACA,OACA,eACA,UACA,mBACEC,yBAAAA,eAAe,IAAI;CACvB,MAAM,oBAAA,GAAmBC,MAAAA,QAAAA,OAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KACV,EAAE,cAAc,WAAW,OAAO,OAAO,GAAG,QAAQ,UACnD,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;GAEE,cAAY,aAAa;GAClB;GACP,GAAI;EACL,GAJM,SAAS,KAIf,CAEL;CACF,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,WAAA,GAAUD,MAAAA,QAAAA,QACP;EACL;EACA;EACA;EACA,kBAAkB,WAAW,WAAW,KAAA;CAC1C,IACA;EAAC;EAAS;EAAM;EAAa;CAAQ,CACvC;CACA,MAAM,gBAAA,GAAeA,MAAAA,QAAAA,QACZ;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAU;EAAU;CAAc,CACtD;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACE,eAAAA,oBAAD;EAAoB,OAAO;EACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,yBAAAA,oBAAD;GAAoB,OAAO;GACzB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IAAiB;IAAU,GAAI,cAAc;IAC1C,UAAA;GACI,CAAA;EACW,CAAA;CACF,CAAA;AAExB,GACA,OACF,CAAC,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.cjs","names":["createSlotComponent","toggleStyle","useToggle","useInputBorder","Portal","styled","IconButton"],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/*\n `Toggle` is a two-state button that can be either on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;~~AA6BA~~,MAAM,EACJ,WACA,cAAc,oBACd,iBAAiB,uBACjB,cACA,0BACEA,yBAAAA,oBAA8C,UAAUC,qBAAAA,WAAW;;;;;;AAcvE,MAAa,SAAS,cACnB,EAAE,kBAAkB,MAAM,GAAG,WAAwB;CACpD,MAAM,EAAE,gBAAgB,kBAAkBC,mBAAAA,UAAU,IAAI;CACxD,MAAM,WAAWC,yBAAAA,eAAe,EAAE,iBAAiB,CAAC;CAEpD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;EAAkB;EAAM,GAAI;EAAU,GAAI,eAAe;CAAI,CAAA,CAC7D,EAAA,CAAA;AAEN,GACA,MACF,CAAC,CAAC"}
1	+ {"version":3,"file":"toggle.cjs","names":["createSlotComponent","toggleStyle","useToggle","useInputBorder","Portal","styled","IconButton"],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface Toggle<Y extends string = string> extends ToggleProps<Y> {\n /*\n The accessible name of the toggle button, unless `aria-label` is provided.\n /\n label?: string\n}\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/\n `Toggle` is a two-state button that can be either on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;AAoCA,MAAM,EACJ,WACA,cAAc,oBACd,iBAAiB,uBACjB,cACA,0BACEA,yBAAAA,oBAA8C,UAAUC,qBAAAA,WAAW;;;;;;AAcvE,MAAa,SAAS,cACnB,EAAE,kBAAkB,MAAM,GAAG,WAAwB;CACpD,MAAM,EAAE,gBAAgB,kBAAkBC,mBAAAA,UAAU,IAAI;CACxD,MAAM,WAAWC,yBAAAA,eAAe,EAAE,iBAAiB,CAAC;CAEpD,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAD;EAAkB;EAAM,GAAI;EAAU,GAAI,eAAe;CAAI,CAAA,CAC7D,EAAA,CAAA;AAEN,GACA,MACF,CAAC,CAAC"}

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

@@ -20,7 +20,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
 		ghost: { root: {
 			_checked: {
 				layerStyle: "solid",
-				borderWidth: "1px",
 				_invalid: {
 					borderColor: "{error-border-color}",
 					borderWidth: "1px"
@@ -85,7 +84,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
 		surface: { root: {
 			_checked: {
 				layerStyle: "solid",
-				borderWidth: "1px",
 				_invalid: { borderColor: "{error-border-color}" }
 			},
 			_notChecked: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.style.cjs","names":["defineComponentSlotStyle","iconButtonStyle"],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /*\n If true, the toggle button is full rounded. Else, it'll be slightly round.\n \n @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n ~~borderWidth: \"1px\",\n~~ _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"ghost\",\n _hover: {\n layerStyle: \"ghost.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n outline: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n borderColor: \"colorScheme.solid\",\n borderWidth: \"1px\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"outline\",\n _hover: {\n layerStyle: \"outline.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n solid: {\n root: {\n _checked: {\n layerStyle: \"subtle\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"solid\",\n _hover: {\n layerStyle: \"solid.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n subtle: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"subtle\",\n _hover: {\n layerStyle: \"subtle.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n surface: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n ~~borderWidth: \"1px\",\n~~ _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"surface\",\n _hover: {\n layerStyle: \"surface.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n },\n\n sizes: {\n xs: {\n root: {\n ...iconButtonStyle.sizes?.xs,\n gap: \"1\",\n },\n },\n sm: {\n root: {\n ...iconButtonStyle.sizes?.sm,\n gap: \"2\",\n },\n },\n md: {\n root: {\n ...iconButtonStyle.sizes?.md,\n gap: \"2\",\n },\n },\n lg: {\n root: {\n ...iconButtonStyle.sizes?.lg,\n gap: \"2.5\",\n },\n },\n xl: {\n root: {\n ...iconButtonStyle.sizes?.xl,\n gap: \"3\",\n },\n },\n \"2xl\": {\n root: {\n ...iconButtonStyle.sizes?.[\"2xl\"],\n gap: \"3\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"ghost\",\n },\n})\n\nexport type ToggleStyle = typeof toggleStyle\n"],"mappings":";;;AAGA,MAAa,cAAcA,eAAAA,yBAAyB;CAClD,MAAM;EACJ,OAAO,CAAC;EACR,MAAM;GACJ,wBAAwB;GACxB,KAAK;EACP;CACF;CAEA,OAAO;;;;;;AAML,aAAa,EACX,MAAM,EACJ,MAAM,EACJ,SAAS,OACX,EACF,EACF,EACF;CAEA,UAAU;EACR,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,~~aAAa;IACb,~~UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,aAAa;IACb,aAAa;IACb,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,eACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,~~aAAa;IACb,~~UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM;GACJ,GAAGC,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,OAAO,EACL,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,QAAQ;GAC3B,KAAK;EACP,EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
1	+ {"version":3,"file":"toggle.style.cjs","names":["defineComponentSlotStyle","iconButtonStyle"],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /*\n If true, the toggle button is full rounded. Else, it'll be slightly round.\n \n @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"ghost\",\n _hover: {\n layerStyle: \"ghost.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n outline: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n borderColor: \"colorScheme.solid\",\n borderWidth: \"1px\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"outline\",\n _hover: {\n layerStyle: \"outline.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n solid: {\n root: {\n _checked: {\n layerStyle: \"subtle\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"solid\",\n _hover: {\n layerStyle: \"solid.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n subtle: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"subtle\",\n _hover: {\n layerStyle: \"subtle.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n surface: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"surface\",\n _hover: {\n layerStyle: \"surface.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n },\n\n sizes: {\n xs: {\n root: {\n ...iconButtonStyle.sizes?.xs,\n gap: \"1\",\n },\n },\n sm: {\n root: {\n ...iconButtonStyle.sizes?.sm,\n gap: \"2\",\n },\n },\n md: {\n root: {\n ...iconButtonStyle.sizes?.md,\n gap: \"2\",\n },\n },\n lg: {\n root: {\n ...iconButtonStyle.sizes?.lg,\n gap: \"2.5\",\n },\n },\n xl: {\n root: {\n ...iconButtonStyle.sizes?.xl,\n gap: \"3\",\n },\n },\n \"2xl\": {\n root: {\n ...iconButtonStyle.sizes?.[\"2xl\"],\n gap: \"3\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"ghost\",\n },\n})\n\nexport type ToggleStyle = typeof toggleStyle\n"],"mappings":";;;AAGA,MAAa,cAAcA,eAAAA,yBAAyB;CAClD,MAAM;EACJ,OAAO,CAAC;EACR,MAAM;GACJ,wBAAwB;GACxB,KAAK;EACP;CACF;CAEA,OAAO;;;;;;AAML,aAAa,EACX,MAAM,EACJ,MAAM,EACJ,SAAS,OACX,EACF,EACF,EACF;CAEA,UAAU;EACR,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,aAAa;IACb,aAAa;IACb,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,eACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM;GACJ,GAAGC,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,OAAO,EACL,MAAM;GACJ,GAAGA,0BAAAA,gBAAgB,QAAQ;GAC3B,KAAK;EACP,EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}

package/dist/esm/components/segmented-control/segmented-control.js CHANGED Viewed

@@ -1,6 +1,5 @@
 "use client";
 import { styled } from "../../core/system/factory.js";
-import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import { motion as motion$1 } from "../motion/factory.js";
 import { useValue } from "../../hooks/use-value/index.js";
@@ -80,8 +79,13 @@ const SegmentedControlItem = withContext(({ children, indicatorProps, ...rest })
 }, "item")((props) => {
 	const { indicatorProps, itemProps } = useComponentContext();
 	return {
-		...mergeProps(itemProps, props)(),
-		indicatorProps: mergeProps(indicatorProps, itemProps?.indicatorProps, props.indicatorProps)()
+		...itemProps,
+		...props,
+		indicatorProps: {
+			...indicatorProps,
+			...itemProps?.indicatorProps,
+			...props.indicatorProps
+		}
 	};
 });
 const SegmentedControlIndicator = withContext(({ transition, ...props }) => {

package/dist/esm/components/segmented-control/segmented-control.js.map CHANGED Viewed

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

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

@@ -1,17 +1,25 @@
 "use client";
 import { Group } from "../group/group.js";
 import { ToggleGroupContext, useToggleGroup } from "./use-toggle-group.js";
-import { TogglePropsContext, component, useRootComponentProps } from "./toggle.js";
+import { Toggle, TogglePropsContext, component, useRootComponentProps } from "./toggle.js";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/toggle/toggle-group.tsx
 const ToggleGroupRoot = component((props) => {
-	const [, { colorScheme, size, variant, attached, ...rest }] = useRootComponentProps(props, "group", { transferProps: [
+	const [, { colorScheme, size, variant, attached, children, items = [], ...rest }] = useRootComponentProps(props, "group", { transferProps: [
 		"size",
 		"variant",
 		"colorScheme"
 	] });
 	const { disabled, readOnly, value, getGroupProps, onChange, onChangeMapRef } = useToggleGroup(rest);
+	const computedChildren = useMemo(() => {
+		if (children) return children;
+		return items.map(({ "aria-label": ariaLabel, label, value, ...rest }, index) => /* @__PURE__ */ jsx(Toggle, {
+			"aria-label": ariaLabel ?? label,
+			value,
+			...rest
+		}, value ?? index));
+	}, [items, children]);
 	const context = useMemo(() => ({
 		colorScheme,
 		size,
@@ -42,7 +50,8 @@ const ToggleGroupRoot = component((props) => {
 			value: groupContext,
 			children: /* @__PURE__ */ jsx(Group, {
 				attached,
-				...getGroupProps()
+				...getGroupProps(),
+				children: computedChildren
 			})
 		})
 	});

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle-group.js","names":[],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport { component, TogglePropsContext, useRootComponentProps } from \"./toggle\"\nimport { ToggleGroupContext, useToggleGroup } from \"./use-toggle-group\"\n\n/*\n `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n */\nexport interface ToggleGroupRootProps<Y extends string \| string[] = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, ToggleStyle>,\n \"defaultValue\" \| \"onChange\" \| \"value\"\n >,\n UseToggleGroupProps<Y>,\n ThemeProps<ToggleStyle> {}\n\nexport const ToggleGroupRoot = component<\"div\", ToggleGroupRootProps>(\n (props: ToggleGroupRootProps) => {\n const [, { colorScheme, size, variant, attached, ...rest }] ~~=\n~~ useRootComponentProps(props, \"group\", {\n transferProps: [\"size\", \"variant\", \"colorScheme\"],\n })\n const {\n disabled,\n readOnly,\n value,\n getGroupProps,\n onChange,\n onChangeMapRef,\n } = useToggleGroup(rest)\n const context = useMemo<ToggleProps>(\n () => ({\n colorScheme,\n size,\n variant,\n focusVisibleRing: attached ? \"inside\" : undefined,\n }),\n [variant, size, colorScheme, attached],\n )\n const groupContext = useMemo(\n () => ({\n disabled,\n readOnly,\n value,\n onChange,\n onChangeMapRef,\n }),\n [value, disabled, readOnly, onChange, onChangeMapRef],\n )\n\n return (\n <TogglePropsContext value={context}>\n <ToggleGroupContext value={groupContext}>\n <Group attached={attached} {...getGroupProps()} ~~/>\~~n </ToggleGroupContext>\n </TogglePropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string \| string[] = string>(\n props: ToggleGroupRootProps<Y>,\n ): ReactElement\n}>\n"],"mappings":";;;;;;;~~AA+BA~~,MAAa,kBAAkB,WAC5B,UAAgC;CAC/B,MAAM,~~GAAG~~,EAAE,aAAa,MAAM,SAAS,UAAU,GAAG,~~UAClD~~,sBAAsB,OAAO,SAAS,~~EACpC~~,eAAe;EAAC;EAAQ;EAAW;CAAa,EAClD,CAAC;~~CACH~~,MAAM,EACJ,UACA,UACA,OACA,eACA,UACA,mBACE,eAAe,IAAI;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,kBAAkB,WAAW,WAAW,KAAA;CAC1C,IACA;EAAC;EAAS;EAAM;EAAa;CAAQ,CACvC;CACA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAU;EAAU;CAAc,CACtD;CAEA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GACzB,UAAA,oBAAC,OAAD;IAAiB;IAAU,GAAI,cAAc;~~GAAI~~,CAAA;~~EAC/B~~,CAAA;CACF,CAAA;AAExB,GACA,OACF,CAAC,CAAC"}
1	+ {"version":3,"file":"toggle-group.js","names":[],"sources":["../../../../src/components/toggle/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { GroupProps } from \"../group\"\nimport type { ToggleProps } from \"./toggle\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleGroupProps } from \"./use-toggle-group\"\nimport { useMemo } from \"react\"\nimport { Group } from \"../group\"\nimport {\n component,\n Toggle,\n TogglePropsContext,\n useRootComponentProps,\n} from \"./toggle\"\nimport { ToggleGroupContext, useToggleGroup } from \"./use-toggle-group\"\n\n/*\n `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n /\nexport interface ToggleGroupRootProps<Y extends string \| string[] = string>\n extends\n Omit<\n WithoutThemeProps<GroupProps, ToggleStyle>,\n \"defaultValue\" \| \"onChange\" \| \"value\"\n >,\n UseToggleGroupProps<Y>,\n ThemeProps<ToggleStyle> {\n /\n If provided, generate options based on items.\n \n @default []\n */\n items?: Toggle<Y extends any[] ? Y[number] : Y>[]\n}\n\nexport const ToggleGroupRoot = component<\"div\", ToggleGroupRootProps>(\n (props: ToggleGroupRootProps) => {\n const [\n ,\n { colorScheme, size, variant, attached, children, items = [], ...rest },\n ] = useRootComponentProps(props, \"group\", {\n transferProps: [\"size\", \"variant\", \"colorScheme\"],\n })\n const {\n disabled,\n readOnly,\n value,\n getGroupProps,\n onChange,\n onChangeMapRef,\n } = useToggleGroup(rest)\n const computedChildren = useMemo(() => {\n if (children) return children\n\n return items.map(\n ({ \"aria-label\": ariaLabel, label, value, ...rest }, index) => (\n <Toggle\n key={value ?? index}\n aria-label={ariaLabel ?? label}\n value={value}\n {...rest}\n />\n ),\n )\n }, [items, children])\n const context = useMemo<ToggleProps>(\n () => ({\n colorScheme,\n size,\n variant,\n focusVisibleRing: attached ? \"inside\" : undefined,\n }),\n [variant, size, colorScheme, attached],\n )\n const groupContext = useMemo(\n () => ({\n disabled,\n readOnly,\n value,\n onChange,\n onChangeMapRef,\n }),\n [value, disabled, readOnly, onChange, onChangeMapRef],\n )\n\n return (\n <TogglePropsContext value={context}>\n <ToggleGroupContext value={groupContext}>\n <Group attached={attached} {...getGroupProps()}>\n {computedChildren}\n </Group>\n </ToggleGroupContext>\n </TogglePropsContext>\n )\n },\n \"group\",\n)() as GenericsComponent<{\n <Y extends string \| string[] = string>(\n props: ToggleGroupRootProps<Y>,\n ): ReactElement\n}>\n"],"mappings":";;;;;;;AA2CA,MAAa,kBAAkB,WAC5B,UAAgC;CAC/B,MAAM,GAEJ,EAAE,aAAa,MAAM,SAAS,UAAU,UAAU,QAAQ,CAAC,GAAG,GAAG,UAC/D,sBAAsB,OAAO,SAAS,EACxC,eAAe;EAAC;EAAQ;EAAW;CAAa,EAClD,CAAC;CACD,MAAM,EACJ,UACA,UACA,OACA,eACA,UACA,mBACE,eAAe,IAAI;CACvB,MAAM,mBAAmB,cAAc;EACrC,IAAI,UAAU,OAAO;EAErB,OAAO,MAAM,KACV,EAAE,cAAc,WAAW,OAAO,OAAO,GAAG,QAAQ,UACnD,oBAAC,QAAD;GAEE,cAAY,aAAa;GAClB;GACP,GAAI;EACL,GAJM,SAAS,KAIf,CAEL;CACF,GAAG,CAAC,OAAO,QAAQ,CAAC;CACpB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,kBAAkB,WAAW,WAAW,KAAA;CAC1C,IACA;EAAC;EAAS;EAAM;EAAa;CAAQ,CACvC;CACA,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAU;EAAU;CAAc,CACtD;CAEA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,oBAAD;GAAoB,OAAO;GACzB,UAAA,oBAAC,OAAD;IAAiB;IAAU,GAAI,cAAc;IAC1C,UAAA;GACI,CAAA;EACW,CAAA;CACF,CAAA;AAExB,GACA,OACF,CAAC,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","names":[],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/*\n `Toggle` is a two-state button that can be either on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;~~AA6BA~~,MAAM,EACJ,WACA,cAAc,oBACd,iBAAiB,uBACjB,cACA,0BACE,oBAA8C,UAAU,WAAW;;;;;;AAcvE,MAAa,SAAS,cACnB,EAAE,kBAAkB,MAAM,GAAG,WAAwB;CACpD,MAAM,EAAE,gBAAgB,kBAAkB,UAAU,IAAI;CACxD,MAAM,WAAW,eAAe,EAAE,iBAAiB,CAAC;CAEpD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,oBAAC,YAAD;EAAkB;EAAM,GAAI;EAAU,GAAI,eAAe;CAAI,CAAA,CAC7D,EAAA,CAAA;AAEN,GACA,MACF,CAAC,CAAC"}
1	+ {"version":3,"file":"toggle.js","names":[],"sources":["../../../../src/components/toggle/toggle.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type {\n GenericsComponent,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { IconButtonProps } from \"../button\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { ToggleStyle } from \"./toggle.style\"\nimport type { UseToggleProps } from \"./use-toggle\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { IconButton } from \"../button\"\nimport { useInputBorder } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { toggleStyle } from \"./toggle.style\"\nimport { useToggle } from \"./use-toggle\"\n\nexport interface Toggle<Y extends string = string> extends ToggleProps<Y> {\n /*\n The accessible name of the toggle button, unless `aria-label` is provided.\n /\n label?: string\n}\n\nexport interface ToggleProps<Y extends string = string>\n extends\n Omit<\n WithoutThemeProps<IconButtonProps, ToggleStyle>,\n \"aria-label\" \| \"onChange\" \| \"ref\" \| \"value\"\n >,\n UseToggleProps<Y>,\n Pick<UseInputBorderProps, \"errorBorderColor\">,\n ThemeProps<ToggleStyle> {}\n\nconst {\n component,\n PropsContext: TogglePropsContext,\n usePropsContext: useTogglePropsContext,\n withProvider,\n useRootComponentProps,\n} = createSlotComponent<ToggleProps, ToggleStyle>(\"toggle\", toggleStyle)\n\nexport {\n component,\n TogglePropsContext,\n useRootComponentProps,\n useTogglePropsContext,\n}\n\n/\n `Toggle` is a two-state button that can be either on or off.\n \n @see https://yamada-ui.com/docs/components/toggle\n */\nexport const Toggle = withProvider<\"button\", ToggleProps>(\n ({ errorBorderColor, icon, ...rest }: ToggleProps) => {\n const { getButtonProps, getInputProps } = useToggle(rest)\n const varProps = useInputBorder({ errorBorderColor })\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <IconButton icon={icon} {...varProps} {...getButtonProps()} />\n </>\n )\n },\n \"root\",\n)() as GenericsComponent<{\n <Y extends string = string>(props: ToggleProps<Y>): ReactElement\n}>\n"],"mappings":";;;;;;;;;;AAoCA,MAAM,EACJ,WACA,cAAc,oBACd,iBAAiB,uBACjB,cACA,0BACE,oBAA8C,UAAU,WAAW;;;;;;AAcvE,MAAa,SAAS,cACnB,EAAE,kBAAkB,MAAM,GAAG,WAAwB;CACpD,MAAM,EAAE,gBAAgB,kBAAkB,UAAU,IAAI;CACxD,MAAM,WAAW,eAAe,EAAE,iBAAiB,CAAC;CAEpD,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,oBAAC,YAAD;EAAkB;EAAM,GAAI;EAAU,GAAI,eAAe;CAAI,CAAA,CAC7D,EAAA,CAAA;AAEN,GACA,MACF,CAAC,CAAC"}

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

@@ -20,7 +20,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
 		ghost: { root: {
 			_checked: {
 				layerStyle: "solid",
-				borderWidth: "1px",
 				_invalid: {
 					borderColor: "{error-border-color}",
 					borderWidth: "1px"
@@ -85,7 +84,6 @@ fullRounded: { true: { root: { rounded: "full" } } } },
 		surface: { root: {
 			_checked: {
 				layerStyle: "solid",
-				borderWidth: "1px",
 				_invalid: { borderColor: "{error-border-color}" }
 			},
 			_notChecked: {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.style.js","names":[],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /*\n If true, the toggle button is full rounded. Else, it'll be slightly round.\n \n @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n ~~borderWidth: \"1px\",\n~~ _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"ghost\",\n _hover: {\n layerStyle: \"ghost.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n outline: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n borderColor: \"colorScheme.solid\",\n borderWidth: \"1px\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"outline\",\n _hover: {\n layerStyle: \"outline.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n solid: {\n root: {\n _checked: {\n layerStyle: \"subtle\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"solid\",\n _hover: {\n layerStyle: \"solid.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n subtle: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"subtle\",\n _hover: {\n layerStyle: \"subtle.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n surface: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n ~~borderWidth: \"1px\",\n~~ _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"surface\",\n _hover: {\n layerStyle: \"surface.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n },\n\n sizes: {\n xs: {\n root: {\n ...iconButtonStyle.sizes?.xs,\n gap: \"1\",\n },\n },\n sm: {\n root: {\n ...iconButtonStyle.sizes?.sm,\n gap: \"2\",\n },\n },\n md: {\n root: {\n ...iconButtonStyle.sizes?.md,\n gap: \"2\",\n },\n },\n lg: {\n root: {\n ...iconButtonStyle.sizes?.lg,\n gap: \"2.5\",\n },\n },\n xl: {\n root: {\n ...iconButtonStyle.sizes?.xl,\n gap: \"3\",\n },\n },\n \"2xl\": {\n root: {\n ...iconButtonStyle.sizes?.[\"2xl\"],\n gap: \"3\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"ghost\",\n },\n})\n\nexport type ToggleStyle = typeof toggleStyle\n"],"mappings":";;;AAGA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,CAAC;EACR,MAAM;GACJ,wBAAwB;GACxB,KAAK;EACP;CACF;CAEA,OAAO;;;;;;AAML,aAAa,EACX,MAAM,EACJ,MAAM,EACJ,SAAS,OACX,EACF,EACF,EACF;CAEA,UAAU;EACR,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,~~aAAa;IACb,~~UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,aAAa;IACb,aAAa;IACb,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,eACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,~~aAAa;IACb,~~UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,OAAO,EACL,MAAM;GACJ,GAAG,gBAAgB,QAAQ;GAC3B,KAAK;EACP,EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}
1	+ {"version":3,"file":"toggle.style.js","names":[],"sources":["../../../../src/components/toggle/toggle.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\nimport { iconButtonStyle } from \"../button\"\n\nexport const toggleStyle = defineComponentSlotStyle({\n base: {\n group: {},\n root: {\n \"--error-border-color\": \"colors.border.error\",\n gap: \"2\",\n },\n },\n\n props: {\n /*\n If true, the toggle button is full rounded. Else, it'll be slightly round.\n \n @default false\n */\n fullRounded: {\n true: {\n root: {\n rounded: \"full\",\n },\n },\n },\n },\n\n variants: {\n ghost: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"ghost\",\n _hover: {\n layerStyle: \"ghost.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n outline: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n borderColor: \"colorScheme.solid\",\n borderWidth: \"1px\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"outline\",\n _hover: {\n layerStyle: \"outline.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n solid: {\n root: {\n _checked: {\n layerStyle: \"subtle\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"solid\",\n _hover: {\n layerStyle: \"solid.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n subtle: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n _notChecked: {\n layerStyle: \"subtle\",\n _hover: {\n layerStyle: \"subtle.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n borderWidth: \"1px\",\n },\n },\n },\n },\n surface: {\n root: {\n _checked: {\n layerStyle: \"solid\",\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n _notChecked: {\n layerStyle: \"surface\",\n _hover: {\n layerStyle: \"surface.hover\",\n },\n _invalid: {\n borderColor: \"{error-border-color}\",\n },\n },\n },\n },\n },\n\n sizes: {\n xs: {\n root: {\n ...iconButtonStyle.sizes?.xs,\n gap: \"1\",\n },\n },\n sm: {\n root: {\n ...iconButtonStyle.sizes?.sm,\n gap: \"2\",\n },\n },\n md: {\n root: {\n ...iconButtonStyle.sizes?.md,\n gap: \"2\",\n },\n },\n lg: {\n root: {\n ...iconButtonStyle.sizes?.lg,\n gap: \"2.5\",\n },\n },\n xl: {\n root: {\n ...iconButtonStyle.sizes?.xl,\n gap: \"3\",\n },\n },\n \"2xl\": {\n root: {\n ...iconButtonStyle.sizes?.[\"2xl\"],\n gap: \"3\",\n },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"ghost\",\n },\n})\n\nexport type ToggleStyle = typeof toggleStyle\n"],"mappings":";;;AAGA,MAAa,cAAc,yBAAyB;CAClD,MAAM;EACJ,OAAO,CAAC;EACR,MAAM;GACJ,wBAAwB;GACxB,KAAK;EACP;CACF;CAEA,OAAO;;;;;;AAML,aAAa,EACX,MAAM,EACJ,MAAM,EACJ,SAAS,OACX,EACF,EACF,EACF;CAEA,UAAU;EACR,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,aAAa;IACb,aAAa;IACb,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;EACA,OAAO,EACL,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,cACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,QAAQ,EACN,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,eACd;IACA,UAAU;KACR,aAAa;KACb,aAAa;IACf;GACF;EACF,EACF;EACA,SAAS,EACP,MAAM;GACJ,UAAU;IACR,YAAY;IACZ,UAAU,EACR,aAAa,uBACf;GACF;GACA,aAAa;IACX,YAAY;IACZ,QAAQ,EACN,YAAY,gBACd;IACA,UAAU,EACR,aAAa,uBACf;GACF;EACF,EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,IAAI,EACF,MAAM;GACJ,GAAG,gBAAgB,OAAO;GAC1B,KAAK;EACP,EACF;EACA,OAAO,EACL,MAAM;GACJ,GAAG,gBAAgB,QAAQ;GAC3B,KAAK;EACP,EACF;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;CACX;AACF,CAAC"}

package/dist/types/components/chart/cartesian-chart.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
 import "../../index.js";
 //#region src/components/chart/cartesian-chart.style.d.ts
-export declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
+export declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "activeDot" | "labelList" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
 export type CartesianChartStyle = typeof cartesianChartStyle;
 //#endregion
 //# sourceMappingURL=cartesian-chart.style.d.ts.map

package/dist/types/components/chart/polar-chart.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
 import "../../index.js";
 //#region src/components/chart/polar-chart.style.d.ts
-export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+export declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "radial" | "labelLine" | "activeDot" | "labelList" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 export type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 //# sourceMappingURL=polar-chart.style.d.ts.map

package/dist/types/components/checkbox-card/checkbox-card.d.ts CHANGED Viewed

@@ -64,7 +64,7 @@ export interface CheckboxCardRootProps<Y extends string = string> extends Merge<
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   justify: {
     end: {
       addon: {
@@ -210,7 +210,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
       };
     };
   };
-}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: import("react").Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, CheckboxCardPropsContext: import("react").Context<Partial<CheckboxCardRootProps<string>> | undefined>, useCheckboxCardPropsContext: () => Partial<CheckboxCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   justify: {
     end: {
       addon: {
@@ -356,7 +356,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
       };
     };
   };
-}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   justify: {
     end: {
       addon: {

package/dist/types/components/checkbox-card/checkbox-card.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import "../../index.js";
 //#region src/components/checkbox-card/checkbox-card.style.d.ts
-export declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+export declare const checkboxCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/empty-state/empty-state.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
 import "../../index.js";
 //#region src/components/empty-state/empty-state.style.d.ts
-export declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "description" | "indicator", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>, {
+export declare const emptyState: ComponentSlotStyle<"title" | "content" | "root" | "indicator" | "description", CSSPropObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>, {
   sm: {
     content: {
       gap: "xs";
@@ -48,7 +48,7 @@ export declare const emptyState: ComponentSlotStyle<"title" | "content" | "root"
       fontSize: "xl";
     };
   };
-}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "description" | "indicator">>>;
+}, CSSModifierObject<CSSSlotObject<"title" | "content" | "root" | "indicator" | "description">>>;
 export type EmptyState = typeof emptyState;
 //#endregion
 //# sourceMappingURL=empty-state.style.d.ts.map

package/dist/types/components/field/field.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import { CSSModifierObject, CSSSlotObject } from "../../core/css/index.type.js";
 import "../../index.js";
 //#region src/components/field/field.style.d.ts
-export declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator", {
+export declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "helperMessage" | "errorMessage" | "requiredIndicator", {
   /**
    * The orientation of the field.
    */
@@ -36,7 +36,7 @@ export declare const fieldStyle: ComponentSlotStyle<"label" | "root" | "errorMes
       };
     };
   };
-}, CSSModifierObject<CSSSlotObject<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "errorMessage" | "helperMessage" | "requiredIndicator">>>;
+}, CSSModifierObject<CSSSlotObject<"label" | "root" | "helperMessage" | "errorMessage" | "requiredIndicator">>, CSSModifierObject<CSSSlotObject<"label" | "root" | "helperMessage" | "errorMessage" | "requiredIndicator">>>;
 export type FieldStyle = typeof fieldStyle;
 //#endregion
 //# sourceMappingURL=field.style.d.ts.map

package/dist/types/components/fieldset/fieldset.style.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import { CSSPropObject, CSSSlotObject } from "../../core/css/index.type.js";
 import "../../index.js";
 //#region src/components/fieldset/fieldset.style.d.ts
-export declare const fieldsetStyle: ComponentSlotStyle<"header" | "legend" | "content" | "root" | "errorMessage" | "helperMessage", CSSPropObject<CSSSlotObject<"header" | "legend" | "content" | "root" | "errorMessage" | "helperMessage">>, {
+export declare const fieldsetStyle: ComponentSlotStyle<"header" | "legend" | "content" | "root" | "helperMessage" | "errorMessage", CSSPropObject<CSSSlotObject<"header" | "legend" | "content" | "root" | "helperMessage" | "errorMessage">>, {
   sm: {
     content: {
       gap: "3";

package/dist/types/components/radio-card/radio-card.d.ts CHANGED Viewed

@@ -56,7 +56,7 @@ export interface RadioCardRootProps<Y extends string = string> extends Merge<HTM
    */
   rootProps?: HTMLStyledProps<"label">;
 }
-declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   justify: {
     end: {
       addon: {
@@ -229,7 +229,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
       };
     };
   };
-}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: import("react").Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, RadioCardPropsContext: import("react").Context<Partial<RadioCardRootProps<string>> | undefined>, useRadioCardPropsContext: () => Partial<RadioCardRootProps<string>> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   justify: {
     end: {
       addon: {
@@ -402,7 +402,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
       };
     };
   };
-}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, Merge<WithoutThemeProps<Y, ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   justify: {
     end: {
       addon: {

package/dist/types/components/radio-card/radio-card.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import "../../index.js";
 //#region src/components/radio-card/radio-card.style.d.ts
-export declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "description" | "indicator" | "addon", {
+export declare const radioCardStyle: ComponentSlotStyle<"group" | "root" | "indicator" | "description" | "addon", {
   /**
    * The justify indicator of the component
    *

package/dist/types/components/steps/steps.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import "../../index.js";
 //#region src/components/steps/steps.style.d.ts
-export declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "item" | "description" | "indicator", {
+export declare const stepsStyle: ComponentSlotStyle<"title" | "list" | "separator" | "root" | "item" | "indicator" | "description", {
   /**
    * The orientation of the steps.
    *

package/dist/types/components/timeline/timeline.d.ts CHANGED Viewed

@@ -62,7 +62,7 @@ declare const TimelinePropsContext: import("react").Context<Partial<TimelineRoot
  *
  * @see https://yamada-ui.com/docs/components/timeline
  */
-export declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "item" | "description" | "indicator" | "connector", {
+export declare const TimelineRoot: Component<({ variant: variantProp, children, index, items, ...rest }: WithoutThemeProps<TimelineRootProps, ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
   align: {
     center: {
       content: {

package/dist/types/components/timeline/timeline.style.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.type.js";
 import "../../index.js";
 //#region src/components/timeline/timeline.style.d.ts
-export declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "description" | "indicator" | "connector", {
+export declare const timelineStyle: ComponentSlotStyle<"title" | "content" | "root" | "item" | "indicator" | "description" | "connector", {
   /**
    * The alignment of the timeline.
    *

package/dist/types/components/toggle/toggle-group.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import "../../core/index.js";
 import { GroupProps } from "../group/group.js";
 import "../group/index.js";
 import { ToggleStyle } from "./toggle.style.js";
+import { Toggle } from "./toggle.js";
 import { UseToggleGroupProps } from "./use-toggle-group.js";
 import { ReactElement } from "react";
 //#region src/components/toggle/toggle-group.d.ts
@@ -12,7 +13,14 @@ import { ReactElement } from "react";
  *
  * @see https://yamada-ui.com/docs/components/toggle
  */
-export interface ToggleGroupRootProps<Y extends string | string[] = string> extends Omit<WithoutThemeProps<GroupProps, ToggleStyle>, "defaultValue" | "onChange" | "value">, UseToggleGroupProps<Y>, ThemeProps<ToggleStyle> {}
+export interface ToggleGroupRootProps<Y extends string | string[] = string> extends Omit<WithoutThemeProps<GroupProps, ToggleStyle>, "defaultValue" | "onChange" | "value">, UseToggleGroupProps<Y>, ThemeProps<ToggleStyle> {
+  /**
+   * If provided, generate options based on items.
+   *
+   * @default []
+   */
+  items?: Toggle<Y extends any[] ? Y[number] : Y>[];
+}
 export declare const ToggleGroupRoot: GenericsComponent<{
   <Y extends string | string[] = string>(props: ToggleGroupRootProps<Y>): ReactElement;
 }>;

package/dist/types/components/toggle/toggle.d.ts CHANGED Viewed

@@ -12,6 +12,12 @@ import { UseToggleProps } from "./use-toggle.js";
 import "../../index.js";
 import { ReactElement } from "react";
 //#region src/components/toggle/toggle.d.ts
+export interface Toggle<Y extends string = string> extends ToggleProps<Y> {
+  /**
+   * The accessible name of the toggle button, unless `aria-label` is provided.
+   */
+  label?: string;
+}
 export interface ToggleProps<Y extends string = string> extends Omit<WithoutThemeProps<IconButtonProps, ToggleStyle>, "aria-label" | "onChange" | "ref" | "value">, UseToggleProps<Y>, Pick<UseInputBorderProps, "errorBorderColor">, ThemeProps<ToggleStyle> {}
 declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"group" | "root", {
   fullRounded: {
@@ -69,7 +75,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
           borderWidth: "1px";
@@ -154,7 +159,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
         };
@@ -226,7 +230,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
           borderWidth: "1px";
@@ -311,7 +314,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
         };
@@ -383,7 +385,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
           borderWidth: "1px";
@@ -468,7 +469,6 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
         };

package/dist/types/components/toggle/toggle.style.d.ts CHANGED Viewed

@@ -62,7 +62,6 @@ export declare const toggleStyle: ComponentSlotStyle<"group" | "root", {
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
           borderWidth: "1px";
@@ -147,7 +146,6 @@ export declare const toggleStyle: ComponentSlotStyle<"group" | "root", {
     root: {
       _checked: {
         layerStyle: "solid";
-        borderWidth: "1px";
         _invalid: {
           borderColor: "{error-border-color}";
         };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.3.1-dev-20261030085350",
+  "version": "2.4.0-next-20261101160828",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",