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

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

import {
  listboxAnatomy
} from "./4WBPEARW.jsx";
import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  ark
} from "./UFYZ7HLU.jsx";
import {
  useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
  useLocaleContext
} from "./JFOWNFC7.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";
import {
  createContext
} from "./UZJJWJQM.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

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

// src/components/listbox/listbox-context.tsx
function ListboxContext(props) {
  return props.children(useListboxContext());
}

// src/components/listbox/listbox-content.tsx
import { mergeProps } from "@zag-js/solid";
var ListboxContent = (props) => {
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps(() => listbox2().getContentProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/listbox/listbox-empty.tsx
import { createMemo, Show } from "solid-js";
var parts = listboxAnatomy.build();
var ListboxEmpty = (props) => {
  const listbox2 = useListboxContext();
  const size = createMemo(() => listbox2().collection.size);
  return <Show when={size() === 0}>
      <ark.div {...parts.empty.attrs} {...props} role="presentation" />
    </Show>;
};

// src/components/listbox/listbox-input.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var ListboxInput = (props) => {
  const [inputProps, localProps] = createSplitProps()(props, ["autoHighlight"]);
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps2(() => listbox2().getInputProps(inputProps), localProps);
  return <ark.input {...mergedProps} />;
};

// src/components/listbox/listbox-item.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";

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

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

// src/components/listbox/listbox-item.tsx
var ListboxItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, ["item", "highlightOnHover"]);
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps3(() => listbox2().getItemProps(itemProps), localProps);
  const itemState = () => listbox2().getItemState(itemProps);
  return <ListboxItemPropsProvider value={itemProps}>
      <ListboxItemProvider value={itemState()}>
        <ark.div {...mergedProps} />
      </ListboxItemProvider>
    </ListboxItemPropsProvider>;
};

// src/components/listbox/listbox-item-context.tsx
function ListboxItemContext(props) {
  return props.children(useListboxItemContext());
}

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

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

// src/components/listbox/listbox-item-group.tsx
var ListboxItemGroup = (props) => {
  const id = createUniqueId();
  const [_itemGroupProps, localProps] = createSplitProps()(props, ["id"]);
  const itemGroupProps = { id, ..._itemGroupProps };
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps4(() => listbox2().getItemGroupProps(itemGroupProps), localProps);
  return <ListboxItemGroupPropsProvider value={itemGroupProps}>
      <ark.div {...mergedProps} />
    </ListboxItemGroupPropsProvider>;
};

// src/components/listbox/listbox-item-group-label.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var ListboxItemGroupLabel = (props) => {
  const listbox2 = useListboxContext();
  const itemGroupProps = useListboxItemGroupPropsContext();
  const mergedProps = mergeProps5(() => listbox2().getItemGroupLabelProps({ htmlFor: itemGroupProps.id }), props);
  return <ark.div {...mergedProps} />;
};

// src/components/listbox/listbox-item-indicator.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var ListboxItemIndicator = (props) => {
  const listbox2 = useListboxContext();
  const itemProps = useListboxItemPropsContext();
  const mergedProps = mergeProps6(() => listbox2().getItemIndicatorProps(itemProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/listbox/listbox-item-text.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var ListboxItemText = (props) => {
  const listbox2 = useListboxContext();
  const itemProps = useListboxItemPropsContext();
  const mergedProps = mergeProps7(() => listbox2().getItemTextProps(itemProps), props);
  return <ark.div {...mergedProps} />;
};

// src/components/listbox/listbox-label.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
var ListboxLabel = (props) => {
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps8(() => listbox2().getLabelProps(), props);
  return <ark.label {...mergedProps} />;
};

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

// src/components/listbox/use-listbox.ts
import * as listbox from "@zag-js/listbox";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo2, createUniqueId as createUniqueId2 } from "solid-js";
var useListbox = (props) => {
  const id = createUniqueId2();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo2(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(listbox.machine, machineProps);
  return createMemo2(() => listbox.connect(service, normalizeProps));
};

// src/components/listbox/listbox-root.tsx
var ListboxRoot = (props) => {
  const [useListboxProps, localProps] = createSplitProps()(props, [
    "collection",
    "defaultHighlightedValue",
    "defaultValue",
    "deselectable",
    "disabled",
    "disallowSelectAll",
    "highlightedValue",
    "id",
    "ids",
    "loopFocus",
    "onHighlightChange",
    "onSelect",
    "onValueChange",
    "orientation",
    "scrollToIndexFn",
    "selectionMode",
    "selectOnHighlight",
    "typeahead",
    "value"
  ]);
  const listbox2 = useListbox(useListboxProps);
  const mergedProps = mergeProps9(() => listbox2().getRootProps(), localProps);
  return <ListboxProvider value={listbox2}>
      <ark.div {...mergedProps} />
    </ListboxProvider>;
};

// src/components/listbox/listbox-root-provider.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var ListboxRootProvider = (props) => {
  const [{ value: listbox2 }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps10(() => listbox2().getRootProps(), localProps);
  return <ListboxProvider value={listbox2}>
      <ark.div {...mergedProps} />
    </ListboxProvider>;
};

// src/components/listbox/listbox-value-text.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
import { children } from "solid-js";
var ListboxValueText = (props) => {
  const { placeholder, ...localprops } = props;
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps11(() => listbox2().getValueTextProps(), localprops);
  const resolved = children(() => props.children);
  return <ark.span {...mergedProps}>{resolved() || listbox2().valueAsString || placeholder}</ark.span>;
};

// src/components/listbox/listbox.ts
var listbox_exports = {};
__export(listbox_exports, {
  Content: () => ListboxContent,
  Context: () => ListboxContext,
  Empty: () => ListboxEmpty,
  Input: () => ListboxInput,
  Item: () => ListboxItem,
  ItemContext: () => ListboxItemContext,
  ItemGroup: () => ListboxItemGroup,
  ItemGroupLabel: () => ListboxItemGroupLabel,
  ItemIndicator: () => ListboxItemIndicator,
  ItemText: () => ListboxItemText,
  Label: () => ListboxLabel,
  Root: () => ListboxRoot,
  RootProvider: () => ListboxRootProvider,
  ValueText: () => ListboxValueText
});

export {
  useListboxContext,
  ListboxContext,
  ListboxContent,
  ListboxEmpty,
  ListboxInput,
  useListboxItemContext,
  ListboxItem,
  ListboxItemContext,
  ListboxItemGroup,
  ListboxItemGroupLabel,
  ListboxItemIndicator,
  ListboxItemText,
  ListboxLabel,
  useListbox,
  ListboxRoot,
  ListboxRootProvider,
  ListboxValueText,
  listbox_exports
};