@yamada-ui/react/dist/esm/components/segmented-control/segmented-control.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { styled } from "../../core/system/factory.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";
import { segmentedControlStyle } from "./segmented-control.style.js";
import { SegmentedControlContext, SegmentedControlDescendantsContext, useSegmentedControl, useSegmentedControlItem } from "./use-segmented-control.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { LayoutGroup } from "motion/react";

//#region src/components/segmented-control/segmented-control.tsx
const { ComponentContext, PropsContext: SegmentedControlPropsContext, useComponentContext, usePropsContext: useSegmentedControlPropsContext, withContext, withProvider } = createSlotComponent("segmented-control", segmentedControlStyle);
/**
* `SegmentedControl` is a component used for allowing users to select one option from multiple choices.
*
* @see https://yamada-ui.com/docs/components/segmented-control
*/
const SegmentedControlRoot = withProvider(({ children, items = [], orientation: orientationProp, indicatorProps, itemProps,...rest }) => {
	const { id, name, descendants, disabled, orientation, readOnly, setValue, value, getRootProps } = useSegmentedControl({
		orientation: useValue(orientationProp),
		...rest
	});
	const cloneChildren = useMemo(() => {
		if (children) return children;
		else return items.map(({ label,...rest$1 }, index) => /* @__PURE__ */ jsx(SegmentedControlItem, {
			...rest$1,
			children: label
		}, index));
	}, [children, items]);
	return /* @__PURE__ */ jsx(SegmentedControlContext, {
		value: useMemo(() => ({
			id,
			name,
			disabled,
			orientation,
			readOnly,
			setValue,
			value
		}), [
			id,
			name,
			disabled,
			readOnly,
			orientation,
			setValue,
			value
		]),
		children: /* @__PURE__ */ jsx(ComponentContext, {
			value: useMemo(() => ({
				indicatorProps,
				itemProps
			}), [itemProps, indicatorProps]),
			children: /* @__PURE__ */ jsx(SegmentedControlDescendantsContext, {
				value: descendants,
				children: /* @__PURE__ */ jsx(LayoutGroup, {
					id,
					children: /* @__PURE__ */ jsx(styled.div, {
						...getRootProps(),
						children: cloneChildren
					})
				})
			})
		})
	});
}, "root", { transferProps: ["orientation"] })();
const SegmentedControlItem = withContext(({ children, indicatorProps,...rest }) => {
	const { checked, getInputProps, getLabelProps } = useSegmentedControlItem(rest);
	return /* @__PURE__ */ jsxs(styled.label, {
		...getLabelProps(),
		children: [
			/* @__PURE__ */ jsx(styled.input, { ...getInputProps() }),
			/* @__PURE__ */ jsx(styled.span, { children }),
			checked ? /* @__PURE__ */ jsx(SegmentedControlIndicator, { ...indicatorProps }) : null
		]
	});
}, "item")((props) => {
	const { indicatorProps, itemProps } = useComponentContext();
	return {
		...itemProps,
		...props,
		indicatorProps: {
			...indicatorProps,
			...itemProps?.indicatorProps,
			...props.indicatorProps
		}
	};
});
const SegmentedControlIndicator = withContext(({ transition,...props }) => {
	return /* @__PURE__ */ jsx(motion$1.div, {
		layoutDependency: false,
		layoutId: "indicator",
		transition: {
			duration: .2,
			...transition
		},
		...props
	});
}, "indicator")();

//#endregion
export { SegmentedControlItem, SegmentedControlPropsContext, SegmentedControlRoot, useSegmentedControlPropsContext };
//# sourceMappingURL=segmented-control.js.map