@ark-ui/solid/dist/chunk/HYQNCIWP.js

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

import { carouselAnatomy } from './OENRIKKR.js';
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 { createMemo, Show, createUniqueId } from 'solid-js';
import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
import * as carousel from '@zag-js/carousel';

// 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 createComponent(ark.span, mergeProps$1(() => parts.autoplayIndicator.attrs, props, {
    get children() {
      return createComponent(Show, {
        get when() {
          return api().isPlaying;
        },
        get fallback() {
          return props.fallback;
        },
        get children() {
          return props.children;
        }
      });
    }
  }));
};
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 createComponent(ark.span, mergeProps$1(() => parts2.progressText.attrs, props, {
    get children() {
      return props.children || progressText();
    }
  }));
};
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", "autoSize", "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, {
  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 { CarouselAutoplayIndicator, CarouselAutoplayTrigger, CarouselContext, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselProgressText, CarouselRoot, CarouselRootProvider, carousel_exports, useCarousel, useCarouselContext };