@ark-ui/solid/dist/chunk/5HXNU2CH.jsx

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

import {
  useFieldContext
} from "./57XA73T6.jsx";
import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  ark
} from "./UFYZ7HLU.jsx";
import {
  useLocaleContext
} from "./YUC6JE7K.jsx";
import {
  useEnvironmentContext
} from "./E2L62MKC.jsx";
import {
  createContext
} from "./TVCIHLER.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

// 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());

// src/components/checkbox/checkbox-control.tsx
import { mergeProps } from "@zag-js/solid";
var CheckboxControl = (props) => {
  const checkbox2 = useCheckboxContext();
  const mergedProps = mergeProps(() => checkbox2().getControlProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/checkbox/checkbox.anatomy.ts
import { anatomy } from "@zag-js/checkbox";
var checkboxAnatomy = anatomy.extendWith("group");

// src/components/checkbox/use-checkbox-group.ts
import { createMemo as createMemo2 } from "solid-js";

// src/utils/use-controllable-state.ts
import { createMemo, createSignal, untrack } from "solid-js";
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 = createMemo2(() => !(props.disabled || props.readOnly));
  const [value, setValue] = useControllableState({
    value: props.value,
    defaultValue: props.defaultValue || [],
    onChange: props.onValueChange
  });
  return createMemo2(() => {
    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 <CheckboxGroupContextProvider value={checkboxGroup}>
      <ark.div role="group" {...localProps} {...checkboxAnatomy.build().group.attrs} />
    </CheckboxGroupContextProvider>;
};

// src/components/checkbox/checkbox-group-provider.tsx
var CheckboxGroupProvider = (props) => {
  const [localProps, restProps] = createSplitProps()(props, ["value"]);
  return <CheckboxGroupContextProvider value={localProps.value}>
      <ark.div role="group" {...restProps} {...checkboxAnatomy.build().group.attrs} />
    </CheckboxGroupContextProvider>;
};

// src/components/checkbox/checkbox-hidden-input.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var CheckboxHiddenInput = (props) => {
  const checkbox2 = useCheckboxContext();
  const mergedProps = mergeProps2(() => checkbox2().getHiddenInputProps(), props);
  const field = useFieldContext();
  return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
};

// src/components/checkbox/checkbox-indicator.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var CheckboxIndicator = (props) => {
  const [indicatorProps, localProps] = createSplitProps()(props, ["indeterminate"]);
  const checkbox2 = useCheckboxContext();
  const mergedProps = mergeProps3(() => checkbox2().getIndicatorProps(), localProps);
  return <ark.div
    {...mergedProps}
    hidden={!(indicatorProps.indeterminate ? checkbox2().indeterminate : checkbox2().checked)}
  />;
};

// src/components/checkbox/checkbox-label.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var CheckboxLabel = (props) => {
  const checkbox2 = useCheckboxContext();
  const mergedProps = mergeProps4(() => checkbox2().getLabelProps(), props);
  return <ark.span {...mergedProps} />;
};

// src/components/checkbox/checkbox-root.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";

// src/components/checkbox/use-checkbox.ts
import * as checkbox from "@zag-js/checkbox";
import { mergeProps as mergeProps5, normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo3, createUniqueId } from "solid-js";
var useCheckbox = (ownProps = {}) => {
  const checkboxGroup = useCheckboxGroupContext();
  const props = createMemo3(() => {
    const resolvedProps = runIfFn(ownProps);
    return mergeProps5(resolvedProps, checkboxGroup?.().getItemProps({ value: resolvedProps.value }) ?? {});
  }, [ownProps, checkboxGroup]);
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const field = useFieldContext();
  const machineProps = createMemo3(() => ({
    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 createMemo3(() => 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 = mergeProps6(() => checkbox2().getRootProps(), labelprops);
  return <CheckboxProvider value={checkbox2}>
      <ark.label {...mergedProps} />
    </CheckboxProvider>;
};

// src/components/checkbox/checkbox-root-provider.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var CheckboxRootProvider = (props) => {
  const [{ value: checkbox2 }, labelprops] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps7(() => checkbox2().getRootProps(), labelprops);
  return <CheckboxProvider value={checkbox2}>
      <ark.label {...mergedProps} />
    </CheckboxProvider>;
};

// 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 {
  useCheckboxContext,
  CheckboxContext,
  CheckboxControl,
  checkboxAnatomy,
  useCheckboxGroup,
  useCheckboxGroupContext,
  CheckboxGroup,
  CheckboxGroupProvider,
  CheckboxHiddenInput,
  CheckboxIndicator,
  CheckboxLabel,
  useCheckbox,
  CheckboxRoot,
  CheckboxRootProvider,
  checkbox_exports
};