@ark-ui/solid/dist/chunk/QARPXWDS.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 { useEnvironmentContext } from './5QLLQM7E.js';
import { useLocaleContext } from './RVOPDSQY.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 * as scrollArea from '@zag-js/scroll-area';
import { createUniqueId, createMemo } from 'solid-js';

// src/components/scroll-area/use-scroll-area-context.ts
var [ScrollAreaProvider, useScrollAreaContext] = createContext({
  hookName: "useScrollAreaContext",
  providerName: "<ScrollAreaProvider />"
});

// src/components/scroll-area/scroll-area-context.tsx
function ScrollAreaContext(props) {
  return props.children(useScrollAreaContext());
}
var ScrollAreaContent = (props) => {
  const scrollArea2 = useScrollAreaContext();
  const mergedProps = mergeProps(() => scrollArea2().getContentProps(), props);
  return createComponent(ark.div, mergedProps);
};
var ScrollAreaCorner = (props) => {
  const scrollArea2 = useScrollAreaContext();
  const mergedProps = mergeProps(() => scrollArea2().getCornerProps(), props);
  return createComponent(ark.div, mergedProps);
};
var useScrollArea = (props = {}) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...props
  }));
  const service = useMachine(scrollArea.machine, machineProps);
  return createMemo(() => scrollArea.connect(service, normalizeProps));
};

// src/components/scroll-area/scroll-area-root.tsx
var ScrollAreaRoot = (props) => {
  const [useScrollAreaProps, localProps] = createSplitProps()(props, ["id", "ids"]);
  const scrollArea2 = useScrollArea(useScrollAreaProps);
  const mergedProps = mergeProps(() => scrollArea2().getRootProps(), localProps);
  return createComponent(ScrollAreaProvider, {
    value: scrollArea2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ScrollAreaRootProvider = (props) => {
  const {
    value,
    children,
    ...localProps
  } = props;
  return createComponent(ScrollAreaProvider, {
    value,
    get children() {
      return createComponent(ark.div, mergeProps$1(localProps, {
        children
      }));
    }
  });
};

// src/components/scroll-area/use-scroll-area-scrollbar-context.ts
var [ScrollAreaScrollbarProvider, useScrollAreaScrollbarContext] = createContext({
  hookName: "useScrollAreaScrollbarContext",
  providerName: "<ScrollAreaScrollbarProvider />"
});

// src/components/scroll-area/scroll-area-scrollbar.tsx
var ScrollAreaScrollbar = (props) => {
  const [scrollbarProps, localProps] = createSplitProps()(props, ["orientation"]);
  const scrollArea2 = useScrollAreaContext();
  const mergedProps = mergeProps(() => scrollArea2().getScrollbarProps(scrollbarProps), localProps);
  return createComponent(ScrollAreaScrollbarProvider, {
    value: scrollbarProps,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var ScrollAreaThumb = (props) => {
  const scrollAreaApi = useScrollAreaContext();
  const scrollbarProps = useScrollAreaScrollbarContext();
  const mergedProps = mergeProps(() => scrollAreaApi().getThumbProps(scrollbarProps), props);
  return createComponent(ark.div, mergedProps);
};
var ScrollAreaViewport = (props) => {
  const scrollArea2 = useScrollAreaContext();
  const mergedProps = mergeProps(() => scrollArea2().getViewportProps(), props);
  return createComponent(ark.div, mergedProps);
};

// src/components/scroll-area/scroll-area.ts
var scroll_area_exports = {};
__export(scroll_area_exports, {
  Content: () => ScrollAreaContent,
  Context: () => ScrollAreaContext,
  Corner: () => ScrollAreaCorner,
  Root: () => ScrollAreaRoot,
  RootProvider: () => ScrollAreaRootProvider,
  Scrollbar: () => ScrollAreaScrollbar,
  Thumb: () => ScrollAreaThumb,
  Viewport: () => ScrollAreaViewport
});

export { ScrollAreaContent, ScrollAreaContext, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaRootProvider, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, scroll_area_exports, useScrollArea, useScrollAreaContext };