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

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

import { usePresenceContext, splitPresenceProps, PresenceProvider } from './JBLHW7IM.js';
import { usePresence } from './X22PRPOR.js';
import { composeRefs } from './ROP6QZQ7.js';
import { splitRenderStrategyProps, RenderStrategyProvider, useRenderStrategyContext } from './GUFIKGZ6.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { useLocaleContext } from './EM5SH6A3.js';
import { useEnvironmentContext } from './3P5T77QU.js';
import { runIfFn } from './DT73WLR4.js';
import { ark } from './EPLBB4QN.js';
import { createContext } from './THN5C4U6.js';
import { __export } from './ESLJRKWD.js';
import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
import { createContext as createContext$1, createMemo, Show, createUniqueId, useContext } from 'solid-js';
import * as drawer from '@zag-js/drawer';
import { createStore, reconcile } from 'solid-js/store';

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

// src/components/drawer/drawer-backdrop.tsx
var DrawerBackdrop = (props) => {
  const drawer3 = useDrawerContext();
  const renderStrategyProps = useRenderStrategyContext();
  const presence = usePresence(mergeProps(renderStrategyProps, () => ({
    present: drawer3().open
  })));
  const mergedProps = mergeProps(() => drawer3().getBackdropProps(), () => presence().presenceProps, props);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presence().ref, props.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};
var DrawerCloseTrigger = (props) => {
  const context = useDrawerContext();
  const mergedProps = mergeProps(() => context().getCloseTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var DrawerContent = (props) => {
  const [contentProps, localProps] = createSplitProps()(props, ["draggable"]);
  const drawer3 = useDrawerContext();
  const presence = usePresenceContext();
  const mergedProps = mergeProps(() => drawer3().getContentProps({
    draggable: true,
    ...contentProps
  }), () => presence().presenceProps, localProps);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        ref(r$) {
          var _ref$ = composeRefs(presence().ref, localProps.ref);
          typeof _ref$ === "function" && _ref$(r$);
        }
      }));
    }
  });
};

// src/components/drawer/drawer-context.tsx
var DrawerContext = (props) => props.children(useDrawerContext());
var DrawerPositioner = (props) => {
  const drawer3 = useDrawerContext();
  const presence = usePresenceContext();
  const mergedProps = mergeProps(() => drawer3().getPositionerProps(), props);
  return createComponent(Show, {
    get when() {
      return !presence().unmounted;
    },
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var DrawerGrabber = (props) => {
  const drawer3 = useDrawerContext();
  const mergedProps = mergeProps(() => drawer3().getGrabberProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DrawerGrabberIndicator = (props) => {
  const drawer3 = useDrawerContext();
  const mergedProps = mergeProps(() => drawer3().getGrabberIndicatorProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DrawerStackStoreContext = createContext$1();
var DrawerStackStoreProvider = DrawerStackStoreContext.Provider;
var useDrawerStackStore = () => useContext(DrawerStackStoreContext);

// src/components/drawer/use-drawer.ts
var useDrawer = (props) => {
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const id = createUniqueId();
  const stack = useDrawerStackStore();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    stack,
    ...runIfFn(props)
  }));
  const service = useMachine(drawer.machine, machineProps);
  return createMemo(() => drawer.connect(service, normalizeProps));
};

// src/components/drawer/drawer-root.tsx
var DrawerRoot = (props) => {
  const [presenceProps, drawerProps] = splitPresenceProps(props);
  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
  const [useDrawerProps, localProps] = createSplitProps()(drawerProps, ["id", "ids", "open", "defaultOpen", "onOpenChange", "closeOnInteractOutside", "closeOnEscape", "snapPoints", "swipeDirection", "snapToSequentialPoints", "swipeVelocityThreshold", "closeThreshold", "preventDragOnScroll", "stack", "snapPoint", "defaultSnapPoint", "onSnapPointChange", "modal", "trapFocus", "restoreFocus", "preventScroll", "initialFocusEl", "finalFocusEl", "role", "onInteractOutside", "onEscapeKeyDown", "onPointerDownOutside", "onFocusOutside", "onRequestDismiss"]);
  const drawer3 = useDrawer(useDrawerProps);
  const presence = usePresence(mergeProps(presenceProps, () => ({
    present: drawer3().open
  })));
  return createComponent(DrawerProvider, {
    value: drawer3,
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(PresenceProvider, {
            value: presence,
            get children() {
              return localProps.children;
            }
          });
        }
      });
    }
  });
};
var DrawerRootProvider = (props) => {
  const [presenceProps, drawerProps] = splitPresenceProps(props);
  const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
  const presence = usePresence(mergeProps(() => ({
    present: drawerProps.value().open
  }), presenceProps));
  return createComponent(DrawerProvider, {
    get value() {
      return drawerProps.value;
    },
    get children() {
      return createComponent(RenderStrategyProvider, {
        value: renderStrategyProps,
        get children() {
          return createComponent(PresenceProvider, {
            value: presence,
            get children() {
              return drawerProps.children;
            }
          });
        }
      });
    }
  });
};
var DrawerTitle = (props) => {
  const drawer3 = useDrawerContext();
  const mergedProps = mergeProps(() => drawer3().getTitleProps(), props);
  return createComponent(ark.h2, mergedProps);
};
var DrawerTrigger = (props) => {
  const drawer3 = useDrawerContext();
  const presence = usePresenceContext();
  const mergedProps = mergeProps(() => drawer3().getTriggerProps(), () => ({
    "aria-controls": presence().unmounted && null
  }), props);
  return createComponent(ark.button, mergedProps);
};

// src/components/drawer/use-drawer-stack-context.ts
var [DrawerStackProvider, useDrawerStackContext] = createContext({
  hookName: "useDrawerStackContext",
  providerName: "<DrawerStackProvider />"
});

// src/components/drawer/drawer-indent.tsx
var DrawerIndent = (props) => {
  const stackApi = useDrawerStackContext();
  const mergedProps = mergeProps(() => stackApi().getIndentProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DrawerIndentBackground = (props) => {
  const stackApi = useDrawerStackContext();
  const mergedProps = mergeProps(() => stackApi().getIndentBackgroundProps(), props);
  return createComponent(ark.div, mergedProps);
};
var DrawerStack = (props) => {
  const stack = drawer.createStack();
  const [snapshot, setSnapshot] = createStore(stack.getSnapshot());
  stack.subscribe(() => setSnapshot(reconcile(stack.getSnapshot())));
  const stackApi = createMemo(() => drawer.connectStack(snapshot, normalizeProps));
  return createComponent(DrawerStackStoreProvider, {
    value: stack,
    get children() {
      return createComponent(DrawerStackProvider, {
        value: stackApi,
        get children() {
          return props.children;
        }
      });
    }
  });
};

// src/components/drawer/drawer.ts
var drawer_exports = {};
__export(drawer_exports, {
  Backdrop: () => DrawerBackdrop,
  CloseTrigger: () => DrawerCloseTrigger,
  Content: () => DrawerContent,
  Context: () => DrawerContext,
  Grabber: () => DrawerGrabber,
  GrabberIndicator: () => DrawerGrabberIndicator,
  Indent: () => DrawerIndent,
  IndentBackground: () => DrawerIndentBackground,
  Positioner: () => DrawerPositioner,
  Root: () => DrawerRoot,
  RootProvider: () => DrawerRootProvider,
  Stack: () => DrawerStack,
  Title: () => DrawerTitle,
  Trigger: () => DrawerTrigger
});

export { DrawerBackdrop, DrawerCloseTrigger, DrawerContent, DrawerContext, DrawerGrabber, DrawerGrabberIndicator, DrawerIndent, DrawerIndentBackground, DrawerPositioner, DrawerRoot, DrawerRootProvider, DrawerStack, DrawerTitle, DrawerTrigger, drawer_exports, useDrawer, useDrawerContext, useDrawerStackContext };