@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
112 lines (108 loc) • 4.5 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory$1 = require('../motion/factory.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_segmented_control_style = require('./segmented-control.style.cjs');
const require_use_segmented_control = require('./use-segmented-control.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
//#region src/components/segmented-control/segmented-control.tsx
const { ComponentContext, PropsContext: SegmentedControlPropsContext, useComponentContext, usePropsContext: useSegmentedControlPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("segmented-control", require_segmented_control_style.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 } = require_use_segmented_control.useSegmentedControl({
orientation: require_hooks_use_value_index.useValue(orientationProp),
...rest
});
const cloneChildren = (0, react.useMemo)(() => {
if (children) return children;
else return items.map(({ label,...rest$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlItem, {
...rest$1,
children: label
}, index));
}, [children, items]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_segmented_control.SegmentedControlContext, {
value: (0, react.useMemo)(() => ({
id,
name,
disabled,
orientation,
readOnly,
setValue,
value
}), [
id,
name,
disabled,
readOnly,
orientation,
setValue,
value
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({
indicatorProps,
itemProps
}), [itemProps, indicatorProps]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_segmented_control.SegmentedControlDescendantsContext, {
value: descendants,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.LayoutGroup, {
id,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
...getRootProps(),
children: cloneChildren
})
})
})
})
});
}, "root", { transferProps: ["orientation"] })();
const SegmentedControlItem = withContext(({ children, indicatorProps,...rest }) => {
const { checked, getInputProps, getLabelProps } = require_use_segmented_control.useSegmentedControlItem(rest);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.label, {
...getLabelProps(),
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps() }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.span, { children }),
checked ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.div, {
layoutDependency: false,
layoutId: "indicator",
transition: {
duration: .2,
...transition
},
...props
});
}, "indicator")();
//#endregion
exports.SegmentedControlItem = SegmentedControlItem;
exports.SegmentedControlPropsContext = SegmentedControlPropsContext;
exports.SegmentedControlRoot = SegmentedControlRoot;
exports.useSegmentedControlPropsContext = useSegmentedControlPropsContext;
//# sourceMappingURL=segmented-control.cjs.map