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

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

import { usePresence, PresenceProvider } from './SIT3D7TL.js';
import { composeRefs } from './ROP6QZQ7.js';
import { splitRenderStrategyProps, RenderStrategyProvider, useRenderStrategyContext } from './QFAL6GWC.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.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 { Show, createUniqueId, createMemo } from 'solid-js';
import * as tabs from '@zag-js/tabs';
export { anatomy } from '@zag-js/tabs';

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

// src/components/tabs/tab-content.tsx
var TabContent = (props) => {
  const [contentProps, localProps] = createSplitProps()(props, ["value"]);
  const api = useTabsContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
    present: api().value === contentProps.value,
    immediate: true
  })));
  const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
  return createComponent(PresenceProvider, {
    value: presenceApi,
    get children() {
      return createComponent(Show, {
        get when() {
          return !presenceApi().unmounted;
        },
        get children() {
          return createComponent(ark.div, mergeProps$1(mergedProps, {
            ref(r$) {
              var _ref$ = composeRefs(presenceApi().ref, props.ref);
              typeof _ref$ === "function" && _ref$(r$);
            }
          }));
        }
      });
    }
  });
};
var TabIndicator = (props) => {
  const api = useTabsContext();
  const mergedProps = mergeProps(() => api().getIndicatorProps(), props);
  return createComponent(ark.div, mergedProps);
};
var TabList = (props) => {
  const api = useTabsContext();
  const mergedProps = mergeProps(() => api().getListProps(), props);
  return createComponent(ark.div, mergedProps);
};
var TabTrigger = (props) => {
  const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "value"]);
  const api = useTabsContext();
  const mergedProps = mergeProps(() => api().getTriggerProps(triggerProps), localProps);
  return createComponent(ark.button, mergedProps);
};

// src/components/tabs/tabs-context.tsx
var TabsContext = (props) => props.children(useTabsContext());
var useTabs = (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(tabs.machine, machineProps);
  return createMemo(() => tabs.connect(service, normalizeProps));
};

// src/components/tabs/tabs-root.tsx
var TabsRoot = (props) => {
  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
  const [useTabsProps, restProps] = createSplitProps()(tabsProps, ["activationMode", "composite", "defaultValue", "deselectable", "id", "ids", "loopFocus", "navigate", "onFocusChange", "onValueChange", "orientation", "translations", "value"]);
  const api = useTabs(useTabsProps);
  const mergedProps = mergeProps(() => api().getRootProps(), restProps);
  return createComponent(TabsProvider, {
    value: api,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};
var TabsRootProvider = (props) => {
  const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props);
  const [{
    value: tabs2
  }, localprops] = createSplitProps()(tabsProps, ["value"]);
  const mergedProps = mergeProps(() => tabs2().getRootProps(), localprops);
  return createComponent(TabsProvider, {
    value: tabs2,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(ark.div, mergedProps);
        }
      });
    }
  });
};

// src/components/tabs/tabs.ts
var tabs_exports = {};
__export(tabs_exports, {
  Content: () => TabContent,
  Context: () => TabsContext,
  Indicator: () => TabIndicator,
  List: () => TabList,
  Root: () => TabsRoot,
  RootProvider: () => TabsRootProvider,
  Trigger: () => TabTrigger
});

export { TabContent, TabIndicator, TabList, TabTrigger, TabsContext, TabsRoot, TabsRootProvider, tabs_exports, useTabs, useTabsContext };