@ark-ui/solid/dist/chunk/OKT2RIHV.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 './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.js';
import { __export } from './ESLJRKWD.js';
import { createComponent } from 'solid-js/web';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import * as carousel from '@zag-js/carousel';
export { anatomy } from '@zag-js/carousel';
import { createUniqueId, createMemo } from 'solid-js';

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

// src/components/carousel/carousel-autoplay-trigger.tsx
var CarouselAutoplayTrigger = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getAutoplayTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};

// src/components/carousel/carousel-context.tsx
var CarouselContext = (props) => props.children(useCarouselContext());
var CarouselControl = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getControlProps(), props);
  return createComponent(ark.div, mergedProps);
};
var CarouselIndicator = (props) => {
  const [indicatorProps, localProps] = createSplitProps()(props, ["index", "readOnly"]);
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getIndicatorProps(indicatorProps), localProps);
  return createComponent(ark.button, mergedProps);
};
var CarouselIndicatorGroup = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getIndicatorGroupProps(), props);
  return createComponent(ark.div, mergedProps);
};
var CarouselItem = (props) => {
  const [itemProps, localProps] = createSplitProps()(props, ["index", "snapAlign"]);
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
  return createComponent(ark.div, mergedProps);
};
var CarouselItemGroup = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getItemGroupProps(), props);
  return createComponent(ark.div, mergedProps);
};
var CarouselNextTrigger = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getNextTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var CarouselPrevTrigger = (props) => {
  const api = useCarouselContext();
  const mergedProps = mergeProps(() => api().getPrevTriggerProps(), props);
  return createComponent(ark.button, mergedProps);
};
var useCarousel = (props) => {
  const id = createUniqueId();
  const locale = useLocaleContext();
  const environment = useEnvironmentContext();
  const machineProps = createMemo(() => ({
    id,
    dir: locale().dir,
    getRootNode: environment().getRootNode,
    ...runIfFn(props)
  }));
  const service = useMachine(carousel.machine, machineProps);
  return createMemo(() => carousel.connect(service, normalizeProps));
};

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

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

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