@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
225 lines (216 loc) • 8.17 kB
JavaScript
import { useFieldContext } from './VJ2ZFW6U.js';
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, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import * as checkbox from '@zag-js/checkbox';
import { anatomy } from '@zag-js/checkbox';
import { createMemo, createUniqueId, createSignal, untrack } from 'solid-js';
// src/components/checkbox/use-checkbox-context.ts
var [CheckboxProvider, useCheckboxContext] = createContext({
hookName: "useCheckboxContext",
providerName: "<CheckboxProvider />"
});
// src/components/checkbox/checkbox-context.tsx
var CheckboxContext = (props) => props.children(useCheckboxContext());
var CheckboxControl = (props) => {
const checkbox2 = useCheckboxContext();
const mergedProps = mergeProps(() => checkbox2().getControlProps(), props);
return createComponent(ark.div, mergedProps);
};
var checkboxAnatomy = anatomy.extendWith("group");
function useControllableState(props) {
const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn(props.defaultValue));
const controlled = createMemo(() => props.value?.() !== void 0);
const currentValue = createMemo(() => controlled() ? props.value?.() : uncontrolledValue());
const setValue = (next) => {
untrack(() => {
const nextValue = runIfFn(next, currentValue());
if (controlled()) {
return props.onChange?.(nextValue);
}
setUncontrolledValue(nextValue);
return props.onChange?.(nextValue);
});
};
return [currentValue, setValue];
}
// src/components/checkbox/use-checkbox-group.ts
function useCheckboxGroup(props = {}) {
const interactive = createMemo(() => !(props.disabled || props.readOnly));
const [value, setValue] = useControllableState({
value: props.value,
defaultValue: props.defaultValue || [],
onChange: props.onValueChange
});
return createMemo(() => {
const isChecked = (val) => {
return value().some((v) => String(v) === String(val));
};
const toggleValue = (val) => {
isChecked(val) ? removeValue(val) : addValue(val);
};
const addValue = (val) => {
if (!interactive()) return;
if (isChecked(val)) return;
setValue(value().concat(val));
};
const removeValue = (val) => {
if (!interactive()) return;
setValue(value().filter((v) => String(v) !== String(val)));
};
const getItemProps = (itemProps) => {
return {
checked: itemProps.value != null ? isChecked(itemProps.value) : void 0,
onCheckedChange() {
if (itemProps.value != null) {
toggleValue(itemProps.value);
}
},
name: props.name,
disabled: props.disabled,
readOnly: props.readOnly,
invalid: props.invalid
};
};
return {
isChecked,
value,
name: props.name,
disabled: props.disabled,
readOnly: props.readOnly,
invalid: props.invalid,
setValue,
addValue,
toggleValue,
getItemProps
};
});
}
// src/components/checkbox/use-checkbox-group-context.tsx
var [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
hookName: "useCheckboxGroupContext",
providerName: "<CheckboxGroupProvider />",
strict: false
});
// src/components/checkbox/checkbox-group.tsx
var CheckboxGroup = (props) => {
const [checkboxGroupProps, localProps] = createSplitProps()(props, ["defaultValue", "value", "onValueChange", "disabled", "invalid", "readOnly", "name"]);
const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
return createComponent(CheckboxGroupContextProvider, {
value: checkboxGroup,
get children() {
return createComponent(ark.div, mergeProps$1({
role: "group"
}, localProps, () => checkboxAnatomy.build().group.attrs));
}
});
};
var CheckboxGroupProvider = (props) => {
const [localProps, restProps] = createSplitProps()(props, ["value"]);
return createComponent(CheckboxGroupContextProvider, {
get value() {
return localProps.value;
},
get children() {
return createComponent(ark.div, mergeProps$1({
role: "group"
}, restProps, () => checkboxAnatomy.build().group.attrs));
}
});
};
var CheckboxHiddenInput = (props) => {
const checkbox2 = useCheckboxContext();
const mergedProps = mergeProps(() => checkbox2().getHiddenInputProps(), props);
const field = useFieldContext();
return createComponent(ark.input, mergeProps$1({
get ["aria-describedby"]() {
return field?.().ariaDescribedby;
}
}, mergedProps));
};
var CheckboxIndicator = (props) => {
const [indicatorProps, localProps] = createSplitProps()(props, ["indeterminate"]);
const checkbox2 = useCheckboxContext();
const mergedProps = mergeProps(() => checkbox2().getIndicatorProps(), localProps);
return createComponent(ark.div, mergeProps$1(mergedProps, {
get hidden() {
return !(indicatorProps.indeterminate ? checkbox2().indeterminate : checkbox2().checked);
}
}));
};
var CheckboxLabel = (props) => {
const checkbox2 = useCheckboxContext();
const mergedProps = mergeProps(() => checkbox2().getLabelProps(), props);
return createComponent(ark.span, mergedProps);
};
var useCheckbox = (ownProps = {}) => {
const checkboxGroup = useCheckboxGroupContext();
const props = createMemo(() => {
const resolvedProps = runIfFn(ownProps);
return mergeProps(resolvedProps, checkboxGroup?.().getItemProps({ value: resolvedProps.value }) ?? {});
}, [ownProps, checkboxGroup]);
const id = createUniqueId();
const locale = useLocaleContext();
const environment = useEnvironmentContext();
const field = useFieldContext();
const machineProps = createMemo(() => ({
id,
ids: {
label: field?.().ids.label,
hiddenInput: field?.().ids.control
},
disabled: field?.().disabled,
readOnly: field?.().readOnly,
invalid: field?.().invalid,
required: field?.().required,
dir: locale().dir,
getRootNode: environment().getRootNode,
...props()
}));
const service = useMachine(checkbox.machine, machineProps);
return createMemo(() => checkbox.connect(service, normalizeProps));
};
// src/components/checkbox/checkbox-root.tsx
var CheckboxRoot = (props) => {
const [useCheckboxProps, labelprops] = createSplitProps()(props, ["checked", "defaultChecked", "disabled", "form", "id", "ids", "invalid", "name", "onCheckedChange", "readOnly", "required", "value"]);
const checkbox2 = useCheckbox(useCheckboxProps);
const mergedProps = mergeProps(() => checkbox2().getRootProps(), labelprops);
return createComponent(CheckboxProvider, {
value: checkbox2,
get children() {
return createComponent(ark.label, mergedProps);
}
});
};
var CheckboxRootProvider = (props) => {
const [{
value: checkbox2
}, labelprops] = createSplitProps()(props, ["value"]);
const mergedProps = mergeProps(() => checkbox2().getRootProps(), labelprops);
return createComponent(CheckboxProvider, {
value: checkbox2,
get children() {
return createComponent(ark.label, mergedProps);
}
});
};
// src/components/checkbox/checkbox.ts
var checkbox_exports = {};
__export(checkbox_exports, {
Context: () => CheckboxContext,
Control: () => CheckboxControl,
Group: () => CheckboxGroup,
GroupProvider: () => CheckboxGroupProvider,
HiddenInput: () => CheckboxHiddenInput,
Indicator: () => CheckboxIndicator,
Label: () => CheckboxLabel,
Root: () => CheckboxRoot,
RootProvider: () => CheckboxRootProvider
});
export { CheckboxContext, CheckboxControl, CheckboxGroup, CheckboxGroupProvider, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot, CheckboxRootProvider, checkboxAnatomy, checkbox_exports, useCheckbox, useCheckboxContext, useCheckboxGroup, useCheckboxGroupContext };