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

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

import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { createContext } from './TROPIN4C.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1, template, spread } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import { splitProps, Show, createMemo } from 'solid-js';
import * as toggle from '@zag-js/toggle';
import { createAnatomy } from '@zag-js/anatomy';

// src/components/toggle/toggle.ts
var toggle_exports = {};
__export(toggle_exports, {
  Context: () => ToggleContext,
  Indicator: () => ToggleIndicator,
  Root: () => ToggleRoot,
  toggleAnatomy: () => toggleAnatomy
});

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

// src/components/toggle/toggle-context.tsx
var ToggleContext = (props) => props.children(useToggleContext());
var ToggleIndicator = (props) => {
  const [baseProps, restProps] = splitProps(props, ["children", "fallback"]);
  const toggle2 = useToggleContext();
  const mergedProps = mergeProps(() => toggle2().getIndicatorProps(), restProps);
  return createComponent(ark.div, mergeProps$1(mergedProps, {
    get children() {
      return createComponent(Show, {
        get when() {
          return toggle2().pressed;
        },
        get fallback() {
          return baseProps.fallback;
        },
        get children() {
          return baseProps.children;
        }
      });
    }
  }));
};
function useToggle(props) {
  const service = useMachine(toggle.machine, props);
  return createMemo(() => toggle.connect(service, normalizeProps));
}

// src/components/toggle/toggle-root.tsx
var _tmpl$ = /* @__PURE__ */ template(`<button>`);
var ToggleRoot = (props) => {
  const [useToggleProps, localProps] = createSplitProps()(props, ["pressed", "defaultPressed", "disabled", "onPressedChange"]);
  const toggle2 = useToggle(useToggleProps);
  const mergedProps = mergeProps(() => toggle2().getRootProps(), localProps);
  return createComponent(ToggleProvider, {
    value: toggle2,
    get children() {
      var _el$ = _tmpl$();
      spread(_el$, mergedProps, false, false);
      return _el$;
    }
  });
};
var toggleAnatomy = createAnatomy("toggle", ["root", "indicator"]);
toggleAnatomy.build();

export { ToggleContext, ToggleIndicator, ToggleRoot, toggleAnatomy, toggle_exports, useToggle, useToggleContext };