@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
139 lines (129 loc) • 5.67 kB
JavaScript
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 { createMemo, createUniqueId } from 'solid-js';
import * as radio from '@zag-js/radio-group';
export { anatomy } from '@zag-js/radio-group';
// src/components/radio-group/use-radio-group-context.ts
var [RadioGroupProvider, useRadioGroupContext] = createContext({
hookName: "useRadioGroupContext",
providerName: "<RadioGroupProvider />"
});
// src/components/radio-group/radio-group-context.tsx
var RadioGroupContext = (props) => props.children(useRadioGroupContext());
var RadioGroupIndicator = (props) => {
const radioGroup = useRadioGroupContext();
const mergedProps = mergeProps(() => radioGroup().getIndicatorProps(), props);
return createComponent(ark.div, mergedProps);
};
// src/components/radio-group/use-radio-group-item-context.ts
var [RadioGroupItemProvider, useRadioGroupItemContext] = createContext({
hookName: "useRadioGroupItemContext",
providerName: "<RadioGroupItemProvider />"
});
// src/components/radio-group/use-radio-group-item-props-context.ts
var [RadioGroupItemPropsProvider, useRadioGroupItemPropsContext] = createContext({
hookName: "useRadioGroupItemPropsContext",
providerName: "<RadioGroupItemPropsProvider />"
});
// src/components/radio-group/radio-group-item.tsx
var RadioGroupItem = (props) => {
const [itemProps, localProps] = createSplitProps()(props, ["value", "disabled", "invalid"]);
const radioGroup = useRadioGroupContext();
const mergedProps = mergeProps(() => radioGroup().getItemProps(itemProps), localProps);
const itemState = createMemo(() => radioGroup().getItemState(itemProps));
return createComponent(RadioGroupItemPropsProvider, {
value: itemProps,
get children() {
return createComponent(RadioGroupItemProvider, {
value: itemState,
get children() {
return createComponent(ark.label, mergedProps);
}
});
}
});
};
// src/components/radio-group/radio-group-item-context.tsx
var RadioGroupItemContext = (props) => props.children(useRadioGroupItemContext());
var RadioGroupItemControl = (props) => {
const radioGroup = useRadioGroupContext();
const itemProps = useRadioGroupItemPropsContext();
const mergedProps = mergeProps(() => radioGroup().getItemControlProps(itemProps), props);
return createComponent(ark.div, mergedProps);
};
var RadioGroupItemHiddenInput = (props) => {
const radioGroup = useRadioGroupContext();
const itemProps = useRadioGroupItemPropsContext();
const mergedProps = mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps), props);
return createComponent(ark.input, mergedProps);
};
var RadioGroupItemText = (props) => {
const radioGroup = useRadioGroupContext();
const itemProps = useRadioGroupItemPropsContext();
const mergedProps = mergeProps(() => radioGroup().getItemTextProps(itemProps), props);
return createComponent(ark.span, mergedProps);
};
var RadioGroupLabel = (props) => {
const radioGroup = useRadioGroupContext();
const mergedProps = mergeProps(() => radioGroup().getLabelProps(), props);
return createComponent(ark.label, mergedProps);
};
var useRadioGroup = (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(radio.machine, machineProps);
return createMemo(() => radio.connect(service, normalizeProps));
};
// src/components/radio-group/radio-group-root.tsx
var RadioGroupRoot = (props) => {
const [useRadioGroupProps, localProps] = createSplitProps()(props, ["defaultValue", "disabled", "form", "id", "ids", "name", "onValueChange", "orientation", "readOnly", "value"]);
const radioGroup = useRadioGroup(useRadioGroupProps);
const mergedProps = mergeProps(() => radioGroup().getRootProps(), localProps);
return createComponent(RadioGroupProvider, {
value: radioGroup,
get children() {
return createComponent(ark.div, mergedProps);
}
});
};
var RadioGroupRootProvider = (props) => {
const [{
value: radioGroup
}, localProps] = createSplitProps()(props, ["value"]);
const mergedProps = mergeProps(() => radioGroup().getRootProps(), localProps);
return createComponent(RadioGroupProvider, {
value: radioGroup,
get children() {
return createComponent(ark.div, mergedProps);
}
});
};
// src/components/radio-group/radio-group.ts
var radio_group_exports = {};
__export(radio_group_exports, {
Context: () => RadioGroupContext,
Indicator: () => RadioGroupIndicator,
Item: () => RadioGroupItem,
ItemContext: () => RadioGroupItemContext,
ItemControl: () => RadioGroupItemControl,
ItemHiddenInput: () => RadioGroupItemHiddenInput,
ItemText: () => RadioGroupItemText,
Label: () => RadioGroupLabel,
Root: () => RadioGroupRoot,
RootProvider: () => RadioGroupRootProvider
});
export { RadioGroupContext, RadioGroupIndicator, RadioGroupItem, RadioGroupItemContext, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemText, RadioGroupLabel, RadioGroupRoot, RadioGroupRootProvider, radio_group_exports, useRadioGroup, useRadioGroupContext, useRadioGroupItemContext };