@ark-ui/solid/dist/chunk/SYNEPEHD.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 { runIfFn } from './DT73WLR4.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 { For, createUniqueId, createMemo } from 'solid-js';
import * as marquee from '@zag-js/marquee';

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

// src/components/marquee/marquee-content.tsx
var MarqueeContent = (props) => {
  const context = useMarqueeContext();
  return createComponent(For, {
    get each() {
      return Array.from({
        length: context().contentCount
      });
    },
    children: (_, index) => {
      const mergedProps = mergeProps(() => context().getContentProps({
        index: index()
      }), props);
      return createComponent(ark.div, mergeProps$1(mergedProps, {
        get children() {
          return props.children;
        }
      }));
    }
  });
};

// src/components/marquee/marquee-context.tsx
var MarqueeContext = (props) => props.children(useMarqueeContext());
var MarqueeEdge = (props) => {
  const [edgeProps, localProps] = createSplitProps()(props, ["side"]);
  const context = useMarqueeContext();
  const mergedProps = mergeProps(() => context().getEdgeProps(edgeProps), localProps);
  return createComponent(ark.div, mergedProps);
};
var MarqueeItem = (props) => {
  const context = useMarqueeContext();
  const mergedProps = mergeProps(() => context().getItemProps(), props);
  return createComponent(ark.div, mergedProps);
};
var useMarquee = (props) => {
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const id = createUniqueId();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(marquee.machine, machineProps);
  return createMemo(() => marquee.connect(service, normalizeProps));
};

// src/components/marquee/marquee-root.tsx
var MarqueeRoot = (props) => {
  const [useMarqueeProps, localProps] = createSplitProps()(props, ["autoFill", "defaultPaused", "delay", "id", "ids", "loopCount", "onComplete", "onLoopComplete", "onPauseChange", "paused", "pauseOnInteraction", "reverse", "side", "spacing", "speed", "translations"]);
  const context = useMarquee(useMarqueeProps);
  const mergedProps = mergeProps(() => context().getRootProps(), localProps);
  return createComponent(MarqueeProvider, {
    value: context,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var MarqueeRootProvider = (props) => {
  const [{
    value: marquee2
  }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps(() => marquee2().getRootProps(), localProps);
  return createComponent(MarqueeProvider, {
    value: marquee2,
    get children() {
      return createComponent(ark.div, mergedProps);
    }
  });
};
var MarqueeViewport = (props) => {
  const context = useMarqueeContext();
  const mergedProps = mergeProps(() => context().getViewportProps(), props);
  return createComponent(ark.div, mergedProps);
};

// src/components/marquee/marquee.ts
var marquee_exports = {};
__export(marquee_exports, {
  Content: () => MarqueeContent,
  Context: () => MarqueeContext,
  Edge: () => MarqueeEdge,
  Item: () => MarqueeItem,
  Root: () => MarqueeRoot,
  RootProvider: () => MarqueeRootProvider,
  Viewport: () => MarqueeViewport
});

export { MarqueeContent, MarqueeContext, MarqueeEdge, MarqueeItem, MarqueeRoot, MarqueeRootProvider, MarqueeViewport, marquee_exports, useMarquee, useMarqueeContext };