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

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

import {
  carouselAnatomy
} from "./BYLUEJKC.jsx";
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/carousel/carousel-autoplay-indicator.tsx
import { Show } from "solid-js";

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

// src/components/carousel/carousel-autoplay-indicator.tsx
var parts = carouselAnatomy.build();
var CarouselAutoplayIndicator = (props) => {
  const api = useCarouselContext();
  return <ark.span {...parts.autoplayIndicator.attrs} {...props}>
      <Show when={api().isPlaying} fallback={props.fallback}>
        {props.children}
      </Show>
    </ark.span>;
};

// src/components/carousel/carousel-progress-text.tsx
import { createMemo } from "solid-js";
var parts2 = carouselAnatomy.build();
var CarouselProgressText = (props) => {
  const api = useCarouselContext();
  const progressText = createMemo(() => {
    const currentPage = api().page + 1;
    const totalPages = api().pageSnapPoints.length;
    return `${currentPage} / ${totalPages}`;
  });
  return <ark.span {...parts2.progressText.attrs} {...props}>
      {props.children || progressText()}
    </ark.span>;
};

// src/components/carousel/carousel-autoplay-trigger.tsx
import { mergeProps } from "@zag-js/solid";
var CarouselAutoplayTrigger = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getAutoplayTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/carousel/carousel-context.tsx
var CarouselContext = (props) => props.children(useCarouselContext());

// src/components/carousel/carousel-control.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var CarouselControl = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps2(() => api().getControlProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/carousel/carousel-indicator.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var CarouselIndicator = (props) => {
  const [indicatorProps, localProps] = createSplitProps()(props, ["index", "readOnly"]);
  const api = useCarouselContext();
  const mergedProps = mergeProps3(() => api().getIndicatorProps(indicatorProps), localProps);
  return <ark.button {...mergedProps} />;
};

// src/components/carousel/carousel-indicator-group.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var CarouselIndicatorGroup = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps4(() => api().getIndicatorGroupProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/carousel/carousel-item.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var CarouselItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, ["index", "snapAlign"]);
  const api = useCarouselContext();
  const mergedProps = mergeProps5(() => api().getItemProps(itemProps), localProps);
  return <ark.div {...mergedProps} />;
};

// src/components/carousel/carousel-item-group.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var CarouselItemGroup = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps6(() => api().getItemGroupProps(), props);
  return <ark.div {...mergedProps} />;
};

// src/components/carousel/carousel-next-trigger.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var CarouselNextTrigger = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps7(() => api().getNextTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

// src/components/carousel/carousel-prev-trigger.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
var CarouselPrevTrigger = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps8(() => api().getPrevTriggerProps(), props);
  return <ark.button {...mergedProps} />;
};

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

// src/components/carousel/use-carousel.ts
import * as carousel from "@zag-js/carousel";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo as createMemo2, createUniqueId } from "solid-js";
var useCarousel = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo2(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(carousel.machine, machineProps);
  return createMemo2(() => carousel.connect(service, normalizeProps));
};

// src/components/carousel/carousel-root.tsx
var CarouselRoot = (props) => {
  const [useCarouselProps, localProps] = createSplitProps()(props, [
    "allowMouseDrag",
    "autoplay",
    "autoSize",
    "defaultPage",
    "id",
    "ids",
    "inViewThreshold",
    "loop",
    "onAutoplayStatusChange",
    "onDragStatusChange",
    "onPageChange",
    "orientation",
    "padding",
    "page",
    "slideCount",
    "slidesPerMove",
    "slidesPerPage",
    "snapType",
    "spacing",
    "translations"
  ]);
  const api = useCarousel(useCarouselProps);
  const mergedProps = mergeProps9(() => api().getRootProps(), localProps);
  return <CarouselProvider value={api}>
      <ark.div {...mergedProps} />
    </CarouselProvider>;
};

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

// src/components/carousel/carousel.ts
var carousel_exports = {};
__export(carousel_exports, {
  AutoplayIndicator: () => CarouselAutoplayIndicator,
  AutoplayTrigger: () => CarouselAutoplayTrigger,
  Context: () => CarouselContext,
  Control: () => CarouselControl,
  Indicator: () => CarouselIndicator,
  IndicatorGroup: () => CarouselIndicatorGroup,
  Item: () => CarouselItem,
  ItemGroup: () => CarouselItemGroup,
  NextTrigger: () => CarouselNextTrigger,
  PrevTrigger: () => CarouselPrevTrigger,
  ProgressText: () => CarouselProgressText,
  Root: () => CarouselRoot,
  RootProvider: () => CarouselRootProvider
});

export {
  useCarouselContext,
  CarouselAutoplayIndicator,
  CarouselProgressText,
  CarouselAutoplayTrigger,
  CarouselContext,
  CarouselControl,
  CarouselIndicator,
  CarouselIndicatorGroup,
  CarouselItem,
  CarouselItemGroup,
  CarouselNextTrigger,
  CarouselPrevTrigger,
  useCarousel,
  CarouselRoot,
  CarouselRootProvider,
  carousel_exports
};