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

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

import { splitRenderStrategyProps } from './GUFIKGZ6.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 } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { Show, createUniqueId, createMemo, createSignal, createEffect } from 'solid-js';
import * as collapsible from '@zag-js/collapsible';

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

// src/components/collapsible/collapsible-content.tsx
var CollapsibleContent = (props) => {
  const api = useCollapsibleContext();
  const mergedProps = mergeProps(() => api().getContentProps(), props);
  return createComponent(Show, {
    get when() {
      return !api().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};

// src/components/collapsible/collapsible-context.tsx
var CollapsibleContext = (props) => props.children(useCollapsibleContext());
var useCollapsible = (props = {}) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const [renderStrategyProps, collapsibleProps] = splitRenderStrategyProps(runIfFn(props));
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...collapsibleProps
  }));
  const service = useMachine(collapsible.machine, machineProps);
  const [wasVisible, setWasVisible] = createSignal(false);
  createEffect(() => {
    const isPresent = api().visible;
    if (isPresent) setWasVisible(true);
  });
  const api = createMemo(() => collapsible.connect(service, normalizeProps));
  return createMemo(() => ({
    ...api(),
    unmounted: !api().visible && !wasVisible() && renderStrategyProps.lazyMount || renderStrategyProps.unmountOnExit && !api().visible && wasVisible()
  }));
};

// src/components/collapsible/collapsible-root.tsx
var CollapsibleRoot = (props) => {
  const [useCollapsibleProps, localProps] = createSplitProps()(props, ["collapsedHeight", "collapsedWidth", "defaultOpen", "disabled", "id", "ids", "lazyMount", "onExitComplete", "onOpenChange", "open", "unmountOnExit"]);
  const api = useCollapsible(useCollapsibleProps);
  const mergedProps = mergeProps(() => api().getRootProps(), localProps);
  return createComponent(CollapsibleProvider, {
    value: api,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var CollapsibleRootProvider = (props) => {
  const [{
    value: collapsible2
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => collapsible2().getRootProps(), localProps);
  return createComponent(CollapsibleProvider, {
    value: collapsible2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var CollapsibleTrigger = (props) => {
  const api = useCollapsibleContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var CollapsibleIndicator = (props) => {
  const collapsible2 = useCollapsibleContext();
  const mergedProps = mergeProps(() => collapsible2().getIndicatorProps(), props);
  return createComponent(ark.div, mergedProps);
};

// src/components/collapsible/collapsible.ts
var collapsible_exports = {};
__export(collapsible_exports, {
  Content: () => CollapsibleContent,
  Context: () => CollapsibleContext,
  Indicator: () => CollapsibleIndicator,
  Root: () => CollapsibleRoot,
  RootProvider: () => CollapsibleRootProvider,
  Trigger: () => CollapsibleTrigger
});

export { CollapsibleContent, CollapsibleContext, CollapsibleIndicator, CollapsibleRoot, CollapsibleRootProvider, CollapsibleTrigger, collapsible_exports, useCollapsible, useCollapsibleContext };