@ark-ui/solid/dist/chunk/U2YO5R2S.jsx

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

import {
  useFieldContext
} from "./57XA73T6.jsx";
import {
  PresenceProvider,
  splitPresenceProps,
  usePresence,
  usePresenceContext
} from "./IG7INNI2.jsx";
import {
  composeRefs
} from "./PT2CJE3O.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/combobox/combobox-clear-trigger.tsx
import { mergeProps } from "@zag-js/solid";

// src/components/combobox/use-combobox-context.ts
var [ComboboxProvider, useComboboxContext] = createContext({
  hookName: "useComboboxContext",
  providerName: "<ComboboxProvider />"
});

// src/components/combobox/combobox-clear-trigger.tsx
var ComboboxClearTrigger = (props) => {
  const combobox2 = useComboboxContext();
  const mergedProps = mergeProps(() => combobox2().getClearTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/combobox/combobox-content.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
import { Show } from "solid-js";
var ComboboxContent = (props) => {
  const api = useComboboxContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps2(
    () => api().getContentProps(),
    () => presenceApi().presenceProps,
    props
  );
  return <Show when={!presenceApi().unmounted}>
      <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} />
    </Show>;
};

// src/components/combobox/combobox-context.tsx
var ComboboxContext = (props) => props.children(useComboboxContext());

// src/components/combobox/combobox-control.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var ComboboxControl = (props) => {
  const combobox2 = useComboboxContext();
  const mergedProps = mergeProps3(() => combobox2().getControlProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/combobox/combobox-input.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var ComboboxInput = (props) => {
  const combobox2 = useComboboxContext();
  const mergedProps = mergeProps4(() => combobox2().getInputProps(), props);
  const field = useFieldContext();
  return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
};

// src/components/combobox/combobox-item.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
import { createMemo } from "solid-js";

// src/components/combobox/use-combobox-item-context.ts
var [ComboboxItemProvider, useComboboxItemContext] = createContext({
  hookName: "useComboboxItemContext",
  providerName: "<ComboboxItemProvider />"
});

// src/components/combobox/use-combobox-item-props-context.ts
var [ComboboxItemPropsProvider, useComboboxItemPropsContext] = createContext({
  hookName: "useComboboxItemPropsContext",
  providerName: "<ComboboxItemPropsProvider />"
});

// src/components/combobox/combobox-item.tsx
var ComboboxItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, ["item", "persistFocus"]);
  const api = useComboboxContext();
  const mergedProps = mergeProps5(() => api().getItemProps(itemProps), localProps);
  const itemState = createMemo(() => api().getItemState(itemProps));
  return <ComboboxItemPropsProvider value={itemProps}>
      <ComboboxItemProvider value={itemState}>
        <ark.div {...mergedProps} />
      </ComboboxItemProvider>
    </ComboboxItemPropsProvider>;
};

// src/components/combobox/combobox-item-context.tsx
var ComboboxItemContext = (props) => props.children(useComboboxItemContext());

// src/components/combobox/combobox-item-group.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
import { createUniqueId } from "solid-js";

// src/components/combobox/use-combobox-item-group-props-context.ts
var [ComboboxItemGroupPropsProvider, useComboboxItemGroupPropsContext] = createContext({
  hookName: "useComboboxItemGroupPropsContext",
  providerName: "<ComboboxItemGroupPropsProvider />"
});

// src/components/combobox/combobox-item-group.tsx
var ComboboxItemGroup = (props) => {
  const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
  const combobox2 = useComboboxContext();
  const itemGroupProps = mergeProps6({ id: createUniqueId() }, _itemGroupProps);
  const mergedProps = mergeProps6(() => combobox2().getItemGroupProps(itemGroupProps), localProps);
  return <ComboboxItemGroupPropsProvider value={itemGroupProps}>
      <ark.div {...mergedProps} />
    </ComboboxItemGroupPropsProvider>;
};

// src/components/combobox/combobox-item-group-label.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var ComboboxItemGroupLabel = (props) => {
  const combobox2 = useComboboxContext();
  const itemGroupProps = useComboboxItemGroupPropsContext();
  const mergedProps = mergeProps7(() => combobox2().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
  return <ark.div {...mergedProps} />;
};

// src/components/combobox/combobox-item-indicator.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
var ComboboxItemIndicator = (props) => {
  const combobox2 = useComboboxContext();
  const itemProps = useComboboxItemPropsContext();
  const mergedProps = mergeProps8(() => combobox2().getItemIndicatorProps(itemProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/combobox/combobox-item-text.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
var ComboboxItemText = (props) => {
  const api = useComboboxContext();
  const itemProps = useComboboxItemPropsContext();
  const mergedProps = mergeProps9(() => api().getItemTextProps(itemProps), props);
  return <ark.span {...mergedProps} />;
};

// src/components/combobox/combobox-label.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var ComboboxLabel = (props) => {
  const combobox2 = useComboboxContext();
  const mergedProps = mergeProps10(() => combobox2().getLabelProps(), props);
  return <ark.label {...mergedProps} />;
};

// src/components/combobox/combobox-list.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
var ComboboxList = (props) => {
  const combobox2 = useComboboxContext();
  const mergedProps = mergeProps11(() => combobox2().getListProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/combobox/combobox-positioner.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
import { Show as Show2 } from "solid-js";
var ComboboxPositioner = (props) => {
  const api = useComboboxContext();
  const presenceApi = usePresenceContext();
  const mergedProps = mergeProps12(() => api().getPositionerProps(), props);
  return <Show2 when={!presenceApi().unmounted}>
      <ark.div {...mergedProps} />
    </Show2>;
};

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

// src/components/combobox/use-combobox.ts
import * as combobox from "@zag-js/combobox";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo2, createUniqueId as createUniqueId2 } from "solid-js";
var useCombobox = (props) => {
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const id = createUniqueId2();
  const field = useFieldContext();
  const machineProps = createMemo2(() => ({
    id,
    ids: {
      label: field?.().ids.label,
      input: field?.().ids.control
    },
    disabled: field?.().disabled,
    readOnly: field?.().readOnly,
    required: field?.().required,
    invalid: field?.().invalid,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(combobox.machine, machineProps);
  return createMemo2(() => combobox.connect(service, normalizeProps));
};

// src/components/combobox/combobox-root.tsx
var ComboboxRoot = (props) => {
  const [presenceProps, comboboxProps] = splitPresenceProps(props);
  const [useComboboxProps, localProps] = createSplitProps()(comboboxProps, [
    "allowCustomValue",
    "autoFocus",
    "closeOnSelect",
    "collection",
    "composite",
    "defaultHighlightedValue",
    "defaultInputValue",
    "defaultOpen",
    "defaultValue",
    "disabled",
    "disableLayer",
    "form",
    "highlightedValue",
    "id",
    "ids",
    "inputBehavior",
    "inputValue",
    "invalid",
    "loopFocus",
    "multiple",
    "name",
    "navigate",
    "onFocusOutside",
    "onHighlightChange",
    "onInputValueChange",
    "onInteractOutside",
    "onOpenChange",
    "onPointerDownOutside",
    "onValueChange",
    "onSelect",
    "open",
    "openOnChange",
    "openOnClick",
    "openOnKeyPress",
    "placeholder",
    "positioning",
    "readOnly",
    "required",
    "scrollToIndexFn",
    "selectionBehavior",
    "translations",
    "value"
  ]);
  const api = useCombobox(useComboboxProps);
  const apiPresence = usePresence(mergeProps13(presenceProps, () => ({ present: api().open })));
  const mergedProps = mergeProps13(() => api().getRootProps(), localProps);
  return <ComboboxProvider value={api}>
      <PresenceProvider value={apiPresence}>
        <ark.div {...mergedProps} />
      </PresenceProvider>
    </ComboboxProvider>;
};

// src/components/combobox/combobox-root-provider.tsx
import { mergeProps as mergeProps14 } from "@zag-js/solid";
var ComboboxRootProvider = (props) => {
  const [presenceProps, comboboxProps] = splitPresenceProps(props);
  const [{ value: combobox2 }, localProps] = createSplitProps()(comboboxProps, ["value"]);
  const apiPresence = usePresence(mergeProps14(presenceProps, () => ({ present: combobox2().open })));
  const mergedProps = mergeProps14(() => combobox2().getRootProps(), localProps);
  return <ComboboxProvider value={combobox2}>
      <PresenceProvider value={apiPresence}>
        <ark.div {...mergedProps} />
      </PresenceProvider>
    </ComboboxProvider>;
};

// src/components/combobox/combobox-trigger.tsx
import { mergeProps as mergeProps15 } from "@zag-js/solid";
var ComboboxTrigger = (props) => {
  const [triggerProps, localProps] = createSplitProps()(props, ["focusable"]);
  const combobox2 = useComboboxContext();
  const mergedProps = mergeProps15(() => combobox2().getTriggerProps(triggerProps), localProps);
  return <ark.button {...mergedProps} />;
};

// src/components/combobox/combobox.anatomy.ts
import { anatomy } from "@zag-js/combobox";

// src/components/combobox/combobox.ts
var combobox_exports = {};
__export(combobox_exports, {
  ClearTrigger: () => ComboboxClearTrigger,
  Content: () => ComboboxContent,
  Context: () => ComboboxContext,
  Control: () => ComboboxControl,
  Input: () => ComboboxInput,
  Item: () => ComboboxItem,
  ItemContext: () => ComboboxItemContext,
  ItemGroup: () => ComboboxItemGroup,
  ItemGroupLabel: () => ComboboxItemGroupLabel,
  ItemIndicator: () => ComboboxItemIndicator,
  ItemText: () => ComboboxItemText,
  Label: () => ComboboxLabel,
  List: () => ComboboxList,
  Positioner: () => ComboboxPositioner,
  Root: () => ComboboxRoot,
  RootProvider: () => ComboboxRootProvider,
  Trigger: () => ComboboxTrigger
});

export {
  useComboboxContext,
  ComboboxClearTrigger,
  ComboboxContent,
  ComboboxContext,
  ComboboxControl,
  ComboboxInput,
  useComboboxItemContext,
  ComboboxItem,
  ComboboxItemContext,
  ComboboxItemGroup,
  ComboboxItemGroupLabel,
  ComboboxItemIndicator,
  ComboboxItemText,
  ComboboxLabel,
  ComboboxList,
  ComboboxPositioner,
  useCombobox,
  ComboboxRoot,
  ComboboxRootProvider,
  ComboboxTrigger,
  anatomy,
  combobox_exports
};