@ark-ui/solid/dist/chunk/Z5L7ULFZ.js

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

import { listboxAnatomy } from './3I7TGCD3.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './5QLLQM7E.js';
import { useLocaleContext } from './RVOPDSQY.js';
import { runIfFn } from './DT73WLR4.js';
import { createContext } from './THN5C4U6.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 { children, createUniqueId, createMemo, Show } from 'solid-js';
import * as listbox from '@zag-js/listbox';

// 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());
}
var ListboxContent = (props) => {
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps(() => listbox2().getContentProps(), props);
  return createComponent(ark.div, mergedProps);
};
var parts = listboxAnatomy.build();
var ListboxEmpty = (props) => {
  const listbox2 = useListboxContext();
  const size = createMemo(() => listbox2().collection.size);
  return createComponent(Show, {
    get when() {
      return size() === 0;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(() => parts.empty.attrs, props, {
        role: "presentation"
      }));
    }
  });
};
var ListboxInput = (props) => {
  const [inputProps, localProps] = createSplitProps()(props, ["autoHighlight"]);
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps(() => listbox2().getInputProps(inputProps), localProps);
  return createComponent(ark.input, mergedProps);
};

// 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 = mergeProps(() => listbox2().getItemProps(itemProps), localProps);
  const itemState = () => listbox2().getItemState(itemProps);
  return createComponent(ListboxItemPropsProvider, {
    value: itemProps,
    get children() {
      return createComponent(ListboxItemProvider, {
        get value() {
          return itemState();
        },
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};

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

// 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 = mergeProps(() => listbox2().getItemGroupProps(itemGroupProps), localProps);
  return createComponent(ListboxItemGroupPropsProvider, {
    value: itemGroupProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ListboxItemGroupLabel = (props) => {
  const listbox2 = useListboxContext();
  const itemGroupProps = useListboxItemGroupPropsContext();
  const mergedProps = mergeProps(() => listbox2().getItemGroupLabelProps({
    htmlFor: itemGroupProps.id
  }), props);
  return createComponent(ark.div, mergedProps);
};
var ListboxItemIndicator = (props) => {
  const listbox2 = useListboxContext();
  const itemProps = useListboxItemPropsContext();
  const mergedProps = mergeProps(() => listbox2().getItemIndicatorProps(itemProps), props);
  return createComponent(ark.div, mergedProps);
};
var ListboxItemText = (props) => {
  const listbox2 = useListboxContext();
  const itemProps = useListboxItemPropsContext();
  const mergedProps = mergeProps(() => listbox2().getItemTextProps(itemProps), props);
  return createComponent(ark.div, mergedProps);
};
var ListboxLabel = (props) => {
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps(() => listbox2().getLabelProps(), props);
  return createComponent(ark.label, mergedProps);
};
var useListbox = (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(listbox.machine, machineProps);
  return createMemo(() => 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 = mergeProps(() => listbox2().getRootProps(), localProps);
  return createComponent(ListboxProvider, {
    value: listbox2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ListboxRootProvider = (props) => {
  const [{
    value: listbox2
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => listbox2().getRootProps(), localProps);
  return createComponent(ListboxProvider, {
    value: listbox2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ListboxValueText = (props) => {
  const {
    placeholder,
    ...localprops
  } = props;
  const listbox2 = useListboxContext();
  const mergedProps = mergeProps(() => listbox2().getValueTextProps(), localprops);
  const resolved = children(() => props.children);
  return createComponent(ark.span, mergeProps$1(mergedProps, {
    get children() {
      return resolved() || listbox2().valueAsString || placeholder;
    }
  }));
};

// 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 { ListboxContent, ListboxContext, ListboxEmpty, ListboxInput, ListboxItem, ListboxItemContext, ListboxItemGroup, ListboxItemGroupLabel, ListboxItemIndicator, ListboxItemText, ListboxLabel, ListboxRoot, ListboxRootProvider, ListboxValueText, listbox_exports, useListbox, useListboxContext, useListboxItemContext };