UNPKG

@ark-ui/solid

Version:

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

143 lines (132 loc) 6.24 kB
import { createSplitProps } from './ZMHI4GDJ.js'; import { ark } from './EPLBB4QN.js'; import { useEnvironmentContext } from './YO2MCGXO.js'; import { useLocaleContext } from './OKZ64GSY.js'; import { createContext } from './TROPIN4C.js'; import { runIfFn } from './DT73WLR4.js'; import { __export } from './ESLJRKWD.js'; import { createComponent } from 'solid-js/web'; import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid'; import * as segmentGroup from '@zag-js/radio-group'; import { anatomy } from '@zag-js/radio-group'; import { createMemo, createUniqueId } from 'solid-js'; // src/components/segment-group/use-segment-group-context.ts var [SegmentGroupProvider, useSegmentGroupContext] = createContext({ hookName: "useSegmentGroupContext", providerName: "<SegmentGroupProvider />" }); // src/components/segment-group/segment-group-context.tsx var SegmentGroupContext = (props) => props.children(useSegmentGroupContext()); var segmentGroupAnatomy = anatomy.rename("segment-group"); var parts = segmentGroupAnatomy.build(); // src/components/segment-group/segment-group-indicator.tsx var SegmentGroupIndicator = (props) => { const segmentGroup2 = useSegmentGroupContext(); const mergedProps = mergeProps(() => segmentGroup2().getIndicatorProps(), parts.indicator.attrs, props); return createComponent(ark.div, mergedProps); }; // src/components/segment-group/use-segment-group-item-context.ts var [SegmentGroupItemProvider, useSegmentGroupItemContext] = createContext({ hookName: "useSegmentGroupItemContext", providerName: "<SegmentGroupItemProvider />" }); // src/components/segment-group/use-segment-group-item-props-context.ts var [SegmentGroupItemPropsProvider, useSegmentGroupItemPropsContext] = createContext({ hookName: "useSegmentGroupItemPropsContext", providerName: "<SegmentGroupItemPropsProvider />" }); // src/components/segment-group/segment-group-item.tsx var SegmentGroupItem = (props) => { const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled", "invalid"]); const segmentGroup2 = useSegmentGroupContext(); const mergedProps = mergeProps(() => segmentGroup2().getItemProps(itemProps), parts.item.attrs, localProps); const itemState = createMemo(() => segmentGroup2().getItemState(itemProps)); return createComponent(SegmentGroupItemPropsProvider, { value: itemProps, get children() { return createComponent(SegmentGroupItemProvider, { value: itemState, get children() { return createComponent(ark.label, mergedProps); } }); } }); }; // src/components/segment-group/segment-group-item-context.tsx var SegmentGroupItemContext = (props) => props.children(useSegmentGroupItemContext()); var SegmentGroupItemControl = (props) => { const segmentGroup2 = useSegmentGroupContext(); const itemProps = useSegmentGroupItemPropsContext(); const mergedProps = mergeProps(() => segmentGroup2().getItemControlProps(itemProps), parts.itemControl.attrs, props); return createComponent(ark.div, mergedProps); }; var SegmentGroupItemHiddenInput = (props) => { const segmentGroup2 = useSegmentGroupContext(); const itemProps = useSegmentGroupItemPropsContext(); const mergedProps = mergeProps(() => segmentGroup2().getItemHiddenInputProps(itemProps), props); return createComponent(ark.input, mergedProps); }; var SegmentGroupItemText = (props) => { const segmentGroup2 = useSegmentGroupContext(); const itemProps = useSegmentGroupItemPropsContext(); const mergedProps = mergeProps(() => segmentGroup2().getItemTextProps(itemProps), parts.itemText.attrs, props); return createComponent(ark.span, mergedProps); }; var SegmentGroupLabel = (props) => { const segmentGroup2 = useSegmentGroupContext(); const mergedProps = mergeProps(() => segmentGroup2().getLabelProps(), parts.label.attrs, props); return createComponent(ark.label, mergedProps); }; var useSegmentGroup = (props) => { const id = createUniqueId(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const machineProps = createMemo(() => ({ id, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(segmentGroup.machine, machineProps); return createMemo(() => segmentGroup.connect(service, normalizeProps)); }; // src/components/segment-group/segment-group-root.tsx var SegmentGroupRoot = (props) => { const [useSegmentGroupProps, localProps] = createSplitProps()(props, ["defaultValue", "disabled", "form", "id", "ids", "name", "onValueChange", "orientation", "readOnly", "value"]); const segmentGroup2 = useSegmentGroup(useSegmentGroupProps); const mergedProps = mergeProps(() => segmentGroup2().getRootProps(), parts.root.attrs, localProps); return createComponent(SegmentGroupProvider, { value: segmentGroup2, get children() { return createComponent(ark.div, mergedProps); } }); }; var SegmentGroupRootProvider = (props) => { const [{ value: segmentGroup2 }, localProps] = createSplitProps()(props, ["value"]); const mergedProps = mergeProps(() => segmentGroup2().getRootProps(), parts.root.attrs, localProps); return createComponent(SegmentGroupProvider, { value: segmentGroup2, get children() { return createComponent(ark.div, mergedProps); } }); }; // src/components/segment-group/segment-group.ts var segment_group_exports = {}; __export(segment_group_exports, { Context: () => SegmentGroupContext, Indicator: () => SegmentGroupIndicator, Item: () => SegmentGroupItem, ItemContext: () => SegmentGroupItemContext, ItemControl: () => SegmentGroupItemControl, ItemHiddenInput: () => SegmentGroupItemHiddenInput, ItemText: () => SegmentGroupItemText, Label: () => SegmentGroupLabel, Root: () => SegmentGroupRoot, RootProvider: () => SegmentGroupRootProvider }); export { SegmentGroupContext, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemContext, SegmentGroupItemControl, SegmentGroupItemHiddenInput, SegmentGroupItemText, SegmentGroupLabel, SegmentGroupRoot, SegmentGroupRootProvider, segmentGroupAnatomy, segment_group_exports, useSegmentGroup, useSegmentGroupContext, useSegmentGroupItemContext };