@ark-ui/solid/dist/chunk/J6B3R7PY.jsx

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

import {
  createSplitProps
} from "./6WEDGJKQ.jsx";
import {
  ark
} from "./UFYZ7HLU.jsx";
import {
  useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
  useLocaleContext
} from "./JFOWNFC7.jsx";
import {
  runIfFn
} from "./KGOB2IMX.jsx";
import {
  createContext
} from "./UZJJWJQM.jsx";
import {
  __export
} from "./7IUG3E2V.jsx";

// src/components/marquee/marquee-content.tsx
import { mergeProps } from "@zag-js/solid";
import { For } from "solid-js";

// 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 <For each={Array.from({ length: context().contentCount })}>
      {(_, index) => {
    const mergedProps = mergeProps(() => context().getContentProps({ index: index() }), props);
    return <ark.div {...mergedProps}>{props.children}</ark.div>;
  }}
    </For>;
};

// src/components/marquee/marquee-context.tsx
var MarqueeContext = (props) => props.children(useMarqueeContext());

// src/components/marquee/marquee-edge.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var MarqueeEdge = (props) => {
  const [edgeProps, localProps] = createSplitProps()(props, ["side"]);
  const context = useMarqueeContext();
  const mergedProps = mergeProps2(() => context().getEdgeProps(edgeProps), localProps);
  return <ark.div {...mergedProps} />;
};

// src/components/marquee/marquee-item.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var MarqueeItem = (props) => {
  const context = useMarqueeContext();
  const mergedProps = mergeProps3(() => context().getItemProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/marquee/marquee-root.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";

// src/components/marquee/use-marquee.ts
import * as marquee from "@zag-js/marquee";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo, createUniqueId } from "solid-js";
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 = mergeProps4(() => context().getRootProps(), localProps);
  return <MarqueeProvider value={context}>
      <ark.div {...mergedProps} />
    </MarqueeProvider>;
};

// src/components/marquee/marquee-root-provider.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var MarqueeRootProvider = (props) => {
  const [{ value: marquee2 }, localProps] = createSplitProps()(props, ["value"]);
  const mergedProps = mergeProps5(() => marquee2().getRootProps(), localProps);
  return <MarqueeProvider value={marquee2}>
      <ark.div {...mergedProps} />
    </MarqueeProvider>;
};

// src/components/marquee/marquee-viewport.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var MarqueeViewport = (props) => {
  const context = useMarqueeContext();
  const mergedProps = mergeProps6(() => context().getViewportProps(), props);
  return <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 {
  useMarqueeContext,
  MarqueeContent,
  MarqueeContext,
  MarqueeEdge,
  MarqueeItem,
  useMarquee,
  MarqueeRoot,
  MarqueeRootProvider,
  MarqueeViewport,
  marquee_exports
};