@ark-ui/solid 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,100 @@
+# @ark-ui/solid
+
+`@ark-ui/solid` is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience.
+
+## Key Features
+
+- **Accessible**: Components in Ark UI are designed with accessibility in mind, adhering to WAI-ARIA design patterns and handling implementation details such as aria and role attributes, focus management, and keyboard navigation.
+- **Headless**: Components are shipped without styles, giving developers full control over styling.
+- **Customizable**: The open component architecture allows for customization and customization, providing granular access to each component part.
+- **Powered by state machines**: Predictable, simplified, and robust component behavior.
+- **Developer Experience**: The library provides a fully-typed API with a consistent and predictable experience.
+
+## Available Components
+
+At the moment, `@ark-ui/solid`offers the following components:
+
+- [Accordion](https://ark-ui.com/docs/solid/components/accordion)
+- [Carousel](https://ark-ui.com/docs/solid/components/carousel)
+- [Checkbox](https://ark-ui.com/docs/solid/components/checkbox)
+- [Color Picker](https://ark-ui.com/docs/solid/components/color-picker)
+- [Combobox](https://ark-ui.com/docs/solid/components/combobox)
+- [Dialog](https://ark-ui.com/docs/solid/components/dialog)
+- [Editable](https://ark-ui.com/docs/solid/components/editable)
+- [Hover Card](https://ark-ui.com/docs/solid/components/hover-card)
+- [Menu](https://ark-ui.com/docs/solid/components/menu)
+- [Number Input](https://ark-ui.com/docs/solid/components/number-input)
+- [Pagination](https://ark-ui.com/docs/solid/components/pagination)
+- [Pin Input](https://ark-ui.com/docs/solid/components/pin-input)
+- [Popover](https://ark-ui.com/docs/solid/components/popover)
+- [Pressable](https://ark-ui.com/docs/solid/components/pressable)
+- [Radio Group](https://ark-ui.com/docs/solid/components/radio-group)
+- [Range Slider](https://ark-ui.com/docs/solid/components/range-slider)
+- [Rating Group](https://ark-ui.com/docs/solid/components/rating-group)
+- [Select](https://ark-ui.com/docs/solid/components/select)
+- [Slider](https://ark-ui.com/docs/solid/components/slider)
+- [Splitter](https://ark-ui.com/docs/solid/components/splitter)
+- [Tabs](https://ark-ui.com/docs/solid/components/tabs)
+- [Tags Input](https://ark-ui.com/docs/solid/components/tags-input)
+- [Toast](https://ark-ui.com/docs/solid/components/toast)
+- [Tooltip](https://ark-ui.com/docs/solid/components/tooltip)
+
+## Installation
+
+To install `@ark-ui/solid`, run the following command:
+
+```bash
+npm install @ark-ui/solid
+```
+
+or with yarn:
+
+```bash
+yarn add @ark-ui/solid
+```
+
+## Usage
+
+To use a component from `@ark-ui/solid`, import it and include it in your application:
+
+```tsx
+import {
+  Slider,
+  SliderControl,
+  SliderLabel,
+  SliderOutput,
+  SliderRange,
+  SliderThumb,
+  SliderTrack,
+} from '@ark-ui/solid'
+import { createSignal } from 'solid-js'
+
+export const MySlider = () => {
+  const [value, setValue] = createSignal(30)
+
+  return (
+    <Slider min={-50} max={50} value={value()} onChange={(e) => setValue(e.value)}>
+      <SliderLabel>Label</SliderLabel>
+      <SliderOutput>{value}</SliderOutput>
+      <SliderControl>
+        <SliderTrack>
+          <SliderRange />
+        </SliderTrack>
+        <SliderThumb />
+      </SliderControl>
+    </Slider>
+  )
+}
+```
+
+## Documentation
+
+For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
+
+## Contribution
+
+We welcome contributions to `@ark-ui/solid`. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

package/dist/accordion/accordion-content.cjs

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
-const solidJs = require('solid-js');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionContent = props => {
-  const accordion = accordionContext.useAccordionContext();
-  const accordionItem = accordionItemContext.useAccordionItemContext();
-  const mergedProps = () => solidJs.mergeProps(accordion().getContentProps(accordionItem), props);
-  return web.createComponent(factory.ark.div, web.mergeProps(mergedProps));
+  const api = accordionContext.useAccordionContext();
+  const itemParams = accordionItemContext.useAccordionItemContext();
+  const contentProps = solid.mergeProps(() => api().getContentProps(itemParams), props);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.AccordionContent = AccordionContent;

package/dist/accordion/accordion-content.mjs

@@ -1,14 +1,14 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { mergeProps as mergeProps$1 } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
 const AccordionContent = props => {
-  const accordion = useAccordionContext();
-  const accordionItem = useAccordionItemContext();
-  const mergedProps = () => mergeProps$1(accordion().getContentProps(accordionItem), props);
-  return createComponent(ark.div, mergeProps(mergedProps));
+  const api = useAccordionContext();
+  const itemParams = useAccordionItemContext();
+  const contentProps = mergeProps(() => api().getContentProps(itemParams), props);
+  return createComponent(ark.div, contentProps);
 };
 
 export { AccordionContent };

package/dist/accordion/accordion-context.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const createContext = require('../create-context.cjs');
 
 const [AccordionProvider, useAccordionContext] = createContext.createContext({
-  hookName: 'useAccordionContext',
-  providerName: '<AccordionProvider />'
+  hookName: "useAccordionContext",
+  providerName: "<AccordionProvider />"
 });
 
 exports.AccordionProvider = AccordionProvider;

package/dist/accordion/accordion-context.mjs

@@ -1,8 +1,8 @@
 import { createContext } from '../create-context.mjs';
 
 const [AccordionProvider, useAccordionContext] = createContext({
-  hookName: 'useAccordionContext',
-  providerName: '<AccordionProvider />'
+  hookName: "useAccordionContext",
+  providerName: "<AccordionProvider />"
 });
 
 export { AccordionProvider, useAccordionContext };

package/dist/accordion/accordion-item.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
@@ -10,14 +11,17 @@ const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionItem = props => {
-  const [itemProps, divProps] = solidJs.splitProps(props, ['value', 'disabled']);
-  const accordion = accordionContext.useAccordionContext();
-  const view = () => solidJs.children(() => runIfFn.runIfFn(divProps.children, () => accordion().getItemState(props)));
+  const [itemParams, restProps] = solidJs.splitProps(props, ['value', 'disabled']);
+  const api = accordionContext.useAccordionContext();
+  const itemProps = solid.mergeProps(() => api().getItemProps(itemParams), restProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, () => api().getItemState(itemParams));
   return web.createComponent(accordionItemContext.AccordionItemProvider, {
-    value: itemProps,
+    value: itemParams,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => accordion().getItemProps(itemProps), divProps, {
-        children: view
+      return web.createComponent(factory.ark.div, web.mergeProps(itemProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/accordion/accordion-item.d.ts

@@ -1,6 +1,6 @@
-import { type Assign } from '@polymorphic-factory/solid';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type AccordionContext } from './accordion-context';
 export type AccordionItemState = () => ReturnType<ReturnType<AccordionContext>['getItemState']>;
 export type AccordionItemProps = Assign<HTMLArkProps<'div'>, {

package/dist/accordion/accordion-item.mjs

@@ -1,19 +1,23 @@
-import { createComponent, mergeProps } from 'solid-js/web';
-import { splitProps, children } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { splitProps } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItemProvider } from './accordion-item-context.mjs';
 
 const AccordionItem = props => {
-  const [itemProps, divProps] = splitProps(props, ['value', 'disabled']);
-  const accordion = useAccordionContext();
-  const view = () => children(() => runIfFn(divProps.children, () => accordion().getItemState(props)));
+  const [itemParams, restProps] = splitProps(props, ['value', 'disabled']);
+  const api = useAccordionContext();
+  const itemProps = mergeProps(() => api().getItemProps(itemParams), restProps);
+  const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemParams));
   return createComponent(AccordionItemProvider, {
-    value: itemProps,
+    value: itemParams,
     get children() {
-      return createComponent(ark.div, mergeProps(() => accordion().getItemProps(itemProps), divProps, {
-        children: view
+      return createComponent(ark.div, mergeProps$1(itemProps, {
+        get children() {
+          return getChildren();
+        }
       }));
     }
   });

package/dist/accordion/accordion-trigger.cjs

@@ -2,24 +2,17 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
-const spread = require('../spread.cjs');
-const ssrSpread = require('../ssr-spread.cjs');
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionTrigger = props => {
-  const accordion = accordionContext.useAccordionContext();
-  const accordionItem = accordionItemContext.useAccordionItemContext();
-  const triggerProps = accordion().getTriggerProps(accordionItem);
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread.spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = accordionContext.useAccordionContext();
+  const itemParams = accordionItemContext.useAccordionItemContext();
+  const triggerProps = solid.mergeProps(() => api().getTriggerProps(itemParams), props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.AccordionTrigger = AccordionTrigger;

package/dist/accordion/accordion-trigger.d.ts

@@ -1,6 +1,4 @@
-import type { ResolvedChildren } from 'solid-js/types/reactive/signal';
-import { type JSX } from 'solid-js';
-export type AccordionTriggerProps = {
-    children: JSX.Element;
-};
-export declare const AccordionTrigger: (props: AccordionTriggerProps) => ResolvedChildren;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type AccordionTriggerProps = HTMLArkProps<'button'>;
+export declare const AccordionTrigger: (props: AccordionTriggerProps) => JSX.Element;

package/dist/accordion/accordion-trigger.mjs

@@ -1,21 +1,14 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from '../spread.mjs';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
 const AccordionTrigger = props => {
-  const accordion = useAccordionContext();
-  const accordionItem = useAccordionItemContext();
-  const triggerProps = accordion().getTriggerProps(accordionItem);
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren();
+  const api = useAccordionContext();
+  const itemParams = useAccordionItemContext();
+  const triggerProps = mergeProps(() => api().getTriggerProps(itemParams), props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { AccordionTrigger };

package/dist/accordion/accordion.cjs

@@ -3,18 +3,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const useAccordion = require('./use-accordion.cjs');
 
 const Accordion = props => {
-  const [accordionProps, divProps] = createSplitProps.createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'value', 'orientation']);
-  const accordion = useAccordion.useAccordion(accordionProps);
+  const [params, localProps] = createSplitProps.createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'value', 'orientation']);
+  const api = useAccordion.useAccordion(params);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(accordionContext.AccordionProvider, {
-    value: accordion,
+    value: api,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => accordion().rootProps, divProps));
+      return web.createComponent(factory.ark.div, rootProps);
     }
   });
 };

package/dist/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'solid-js';
-import { type Assign } from '@polymorphic-factory/solid';
 import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';
 export type AccordionProps = Assign<HTMLArkProps<'div'>, UseAccordionProps>;
 export declare const Accordion: (props: AccordionProps) => JSX.Element;

package/dist/accordion/accordion.mjs

@@ -1,16 +1,18 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
 import { AccordionProvider } from './accordion-context.mjs';
 import { useAccordion } from './use-accordion.mjs';
 
 const Accordion = props => {
-  const [accordionProps, divProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'value', 'orientation']);
-  const accordion = useAccordion(accordionProps);
+  const [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'value', 'orientation']);
+  const api = useAccordion(params);
+  const rootProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(AccordionProvider, {
-    value: accordion,
+    value: api,
     get children() {
-      return createComponent(ark.div, mergeProps(() => accordion().rootProps, divProps));
+      return createComponent(ark.div, rootProps);
     }
   });
 };

package/dist/carousel/carousel-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [CarouselProvider, useCarouselContext] = createContext.createContext({
+  hookName: "useCarouselContext",
+  providerName: "<CarouselProvider />"
+});
+
+exports.CarouselProvider = CarouselProvider;
+exports.useCarouselContext = useCarouselContext;

package/dist/carousel/carousel-context.d.ts

@@ -0,0 +1,62 @@
+import type { SlideProps } from '@zag-js/carousel/dist/carousel.types';
+import type { Accessor, JSX } from 'solid-js';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type UseCarouselReturn } from './use-carousel';
+export type CarouselContext = UseCarouselReturn;
+export declare const CarouselProvider: ContextProviderComponent<Accessor<{
+    index: number;
+    scrollProgress: number;
+    isAutoplay: boolean;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    scrollTo(index: number, jump?: boolean | undefined): void;
+    scrollToNext(): void;
+    scrollToPrevious(): void;
+    getSlideState: (props: SlideProps) => {
+        valueText: string;
+        isCurrent: boolean;
+        isNext: boolean;
+        isPrevious: boolean;
+        isInView: boolean;
+    };
+    play(): void;
+    pause(): void;
+    rootProps: JSX.HTMLAttributes<any>;
+    viewportProps: JSX.HTMLAttributes<any>;
+    slideGroupProps: JSX.HTMLAttributes<any>;
+    getSlideProps(props: SlideProps): JSX.HTMLAttributes<any>;
+    prevTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    nextTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    indicatorGroupProps: JSX.HTMLAttributes<any>;
+    getIndicatorProps(props: {
+        index: number;
+    }): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}>>, useCarouselContext: () => Accessor<{
+    index: number;
+    scrollProgress: number;
+    isAutoplay: boolean;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    scrollTo(index: number, jump?: boolean | undefined): void;
+    scrollToNext(): void;
+    scrollToPrevious(): void;
+    getSlideState: (props: SlideProps) => {
+        valueText: string;
+        isCurrent: boolean;
+        isNext: boolean;
+        isPrevious: boolean;
+        isInView: boolean;
+    };
+    play(): void;
+    pause(): void;
+    rootProps: JSX.HTMLAttributes<any>;
+    viewportProps: JSX.HTMLAttributes<any>;
+    slideGroupProps: JSX.HTMLAttributes<any>;
+    getSlideProps(props: SlideProps): JSX.HTMLAttributes<any>;
+    prevTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    nextTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+    indicatorGroupProps: JSX.HTMLAttributes<any>;
+    getIndicatorProps(props: {
+        index: number;
+    }): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}>;

package/dist/carousel/carousel-context.mjs

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [CarouselProvider, useCarouselContext] = createContext({
+  hookName: "useCarouselContext",
+  providerName: "<CarouselProvider />"
+});
+
+export { CarouselProvider, useCarouselContext };

package/dist/carousel/carousel-control.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+
+const CarouselControl = props => web.createComponent(factory.ark.div, props);
+
+exports.CarouselControl = CarouselControl;

package/dist/carousel/carousel-control.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type CarouselControlProps = HTMLArkProps<'div'>;
+export declare const CarouselControl: (props: CarouselControlProps) => JSX.Element;

package/dist/carousel/carousel-control.mjs

@@ -0,0 +1,6 @@
+import { createComponent } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+
+const CarouselControl = props => createComponent(ark.div, props);
+
+export { CarouselControl };

package/dist/carousel/carousel-next-slide-trigger.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselNextSlideTrigger = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const nextTriggerProps = solid.mergeProps(() => carousel().nextTriggerProps, props);
+  return web.createComponent(factory.ark.button, nextTriggerProps);
+};
+
+exports.CarouselNextSlideTrigger = CarouselNextSlideTrigger;

package/dist/carousel/carousel-next-slide-trigger.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type CarouselNextSlideTriggerProps = HTMLArkProps<'button'>;
+export declare const CarouselNextSlideTrigger: (props: CarouselNextSlideTriggerProps) => JSX.Element;

package/dist/carousel/carousel-next-slide-trigger.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselNextSlideTrigger = props => {
+  const carousel = useCarouselContext();
+  const nextTriggerProps = mergeProps(() => carousel().nextTriggerProps, props);
+  return createComponent(ark.button, nextTriggerProps);
+};
+
+export { CarouselNextSlideTrigger };

package/dist/carousel/carousel-prev-slide-trigger.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselPrevSlideTrigger = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const prevTriggerProps = solid.mergeProps(() => carousel().prevTriggerProps, props);
+  return web.createComponent(factory.ark.button, prevTriggerProps);
+};
+
+exports.CarouselPrevSlideTrigger = CarouselPrevSlideTrigger;

package/dist/carousel/carousel-prev-slide-trigger.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type CarouselPrevSlideTriggerProps = HTMLArkProps<'button'>;
+export declare const CarouselPrevSlideTrigger: (props: CarouselPrevSlideTriggerProps) => JSX.Element;

package/dist/carousel/carousel-prev-slide-trigger.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselPrevSlideTrigger = props => {
+  const carousel = useCarouselContext();
+  const prevTriggerProps = mergeProps(() => carousel().prevTriggerProps, props);
+  return createComponent(ark.button, prevTriggerProps);
+};
+
+export { CarouselPrevSlideTrigger };

package/dist/carousel/carousel-slide-group.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselSlideGroup = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const groupProps = solid.mergeProps(() => carousel().slideGroupProps, props);
+  return web.createComponent(factory.ark.div, groupProps);
+};
+
+exports.CarouselSlideGroup = CarouselSlideGroup;

package/dist/carousel/carousel-slide-group.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type CarouselSlideGroupProps = HTMLArkProps<'div'>;
+export declare const CarouselSlideGroup: (props: CarouselSlideGroupProps) => JSX.Element;

package/dist/carousel/carousel-slide-group.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useCarouselContext } from './carousel-context.mjs';
+
+const CarouselSlideGroup = props => {
+  const carousel = useCarouselContext();
+  const groupProps = mergeProps(() => carousel().slideGroupProps, props);
+  return createComponent(ark.div, groupProps);
+};
+
+export { CarouselSlideGroup };

package/dist/carousel/carousel-slide.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const carouselContext = require('./carousel-context.cjs');
+
+const CarouselSlide = props => {
+  const [slideParams, localProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const carousel = carouselContext.useCarouselContext();
+  const sliderProps = solid.mergeProps(() => carousel().getSlideProps(slideParams), localProps);
+  return web.createComponent(factory.ark.div, sliderProps);
+};
+
+exports.CarouselSlide = CarouselSlide;

package/dist/carousel/carousel-slide.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { SlideProps } from '@zag-js/carousel/dist/carousel.types';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type CarouselSlideProps = Assign<HTMLArkProps<'div'>, SlideProps>;
+export declare const CarouselSlide: (props: CarouselSlideProps) => JSX.Element;