@ark-ui/solid 0.10.1 → 1.0.0-beta.0

package/CHANGELOG.md

@@ -6,6 +6,44 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.0-beta.0] - 2023-10-20
+
+### Added
+
+- Added `ToggleGroup` component
+
+### Changed
+
+- Revised `Comoobox` component to support multiple selection
+- Revised `Select` component to support multiple selection
+
+### Fixed
+
+- Resolved an issue where the `asChild` property was not working as expected
+
+### Removed
+
+- Removed anatomy exports. These exports are now available in `@ark-ui/anatomy`.
+
+```tsx
+// before
+import { accordionAnatomy } from '@ark-ui/solid'
+// after
+import { accordionAnatomy } from '@ark-ui/anatomy' // or
+import { anatomy } from '@ark-ui/anatomy/accordion'
+```
+
+## [0.11.0] - 2023-09-08
+
+### Added
+
+- Added `Presence` component
+- To improve performance and reduce initial load times, we've introduced two new properties to the `AccordionContent`, `ComboboxContent`, `DialogBackdrop`, `DialogContent`, `HoverCardContent`, `MenuContent`, `PopoverContent`, `SelectContent`, and `TooltipContent` components. The `lazyMount` property allows for on-demand rendering of content, while the `unmountOnExit` property enables the removal of the component from the DOM once it's no longer required, ensuring better resource management and cleaner code.
+
+### Fixed
+
+- Resolved an issue where the `ark` factory was not exported correctly.
+
 ## [0.10.1] - 2023-09-02
 
 ### Fixed
@@ -150,7 +188,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.10.1...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.11.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.3.0
@@ -163,5 +201,5 @@ description: All notable changes to this project will be documented in this file
 [0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.1
 [0.9.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.9.0
 [0.10.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.10.0
-
 [0.10.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.10.1
+[0.11.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.11.0

package/accordion/accordion-item-content.cjs

@@ -0,0 +1,29 @@
+'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 index = require('../presence/index.cjs');
+const accordionContext = require('./accordion-context.cjs');
+const accordionItemContext = require('./accordion-item-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
+
+const AccordionItemContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = accordionContext.useAccordionContext();
+  const accordionItem = accordionItemContext.useAccordionItemContext();
+  const contentProps = solid.mergeProps(() => api().getItemContentProps(accordionItem), localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return accordionItem.isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, contentProps);
+    }
+  }));
+};
+
+exports.AccordionItemContent = AccordionItemContent;

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

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import { type PresenceProps } from '../presence';
+export type AccordionItemContentProps = HTMLArkProps<'div'> & PresenceProps;
+export declare const AccordionItemContent: (props: AccordionItemContentProps) => JSX.Element;

package/accordion/accordion-item-content.mjs

@@ -0,0 +1,25 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
+import { useAccordionContext } from './accordion-context.mjs';
+import { useAccordionItemContext } from './accordion-item-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+
+const AccordionItemContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useAccordionContext();
+  const accordionItem = useAccordionItemContext();
+  const contentProps = mergeProps(() => api().getItemContentProps(accordionItem), localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return accordionItem.isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
+};
+
+export { AccordionItemContent };

package/accordion/{accordion-content.cjs → accordion-item-indicator.cjs}

@@ -8,11 +8,11 @@ const factory = require('../factory.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
-const AccordionContent = props => {
+const AccordionItemIndicator = props => {
   const api = accordionContext.useAccordionContext();
   const itemParams = accordionItemContext.useAccordionItemContext();
-  const contentProps = solid.mergeProps(() => api().getContentProps(itemParams), props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const mergedProps = solid.mergeProps(() => api().getItemIndicatorProps(itemParams), props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.AccordionContent = AccordionContent;
+exports.AccordionItemIndicator = AccordionItemIndicator;

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

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

package/accordion/{accordion-trigger.mjs → accordion-item-indicator.mjs}

@@ -4,11 +4,11 @@ import { ark } from '../factory.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
-const AccordionTrigger = props => {
+const AccordionItemIndicator = props => {
   const api = useAccordionContext();
   const itemParams = useAccordionItemContext();
-  const triggerProps = mergeProps(() => api().getTriggerProps(itemParams), props);
-  return createComponent(ark.button, triggerProps);
+  const mergedProps = mergeProps(() => api().getItemIndicatorProps(itemParams), props);
+  return createComponent(ark.div, mergedProps);
 };
 
-export { AccordionTrigger };
+export { AccordionItemIndicator };

package/accordion/{accordion-trigger.cjs → accordion-item-trigger.cjs}

@@ -8,11 +8,11 @@ const factory = require('../factory.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
-const AccordionTrigger = props => {
+const AccordionItemTrigger = props => {
   const api = accordionContext.useAccordionContext();
-  const itemParams = accordionItemContext.useAccordionItemContext();
-  const triggerProps = solid.mergeProps(() => api().getTriggerProps(itemParams), props);
-  return web.createComponent(factory.ark.button, triggerProps);
+  const item = accordionItemContext.useAccordionItemContext();
+  const mergedProps = solid.mergeProps(() => api().getItemTriggerProps(item), props);
+  return web.createComponent(factory.ark.button, mergedProps);
 };
 
-exports.AccordionTrigger = AccordionTrigger;
+exports.AccordionItemTrigger = AccordionItemTrigger;

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

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

package/accordion/{accordion-content.mjs → accordion-item-trigger.mjs}

@@ -4,11 +4,11 @@ import { ark } from '../factory.mjs';
 import { useAccordionContext } from './accordion-context.mjs';
 import { useAccordionItemContext } from './accordion-item-context.mjs';
 
-const AccordionContent = props => {
+const AccordionItemTrigger = props => {
   const api = useAccordionContext();
-  const itemParams = useAccordionItemContext();
-  const contentProps = mergeProps(() => api().getContentProps(itemParams), props);
-  return createComponent(ark.div, contentProps);
+  const item = useAccordionItemContext();
+  const mergedProps = mergeProps(() => api().getItemTriggerProps(item), props);
+  return createComponent(ark.button, mergedProps);
 };
 
-export { AccordionContent };
+export { AccordionItemTrigger };

package/accordion/accordion-item.d.ts

@@ -1,10 +1,8 @@
-import { type ItemState } from '@zag-js/accordion';
+import { type ItemProps, type ItemState } from '@zag-js/accordion';
 import { type JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type AccordionItemProps = Assign<HTMLArkProps<'div'>, {
-    value: string;
-    disabled?: boolean;
+export type AccordionItemProps = Assign<HTMLArkProps<'div'>, ItemProps & {
     children?: JSX.Element | ((state: () => ItemState) => JSX.Element);
 }>;
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;

package/accordion/accordion.cjs

@@ -10,7 +10,7 @@ const accordionContext = require('./accordion-context.cjs');
 const useAccordion = require('./use-accordion.cjs');
 
 const Accordion = props => {
-  const [params, localProps] = createSplitProps.createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'onFocusChange', 'orientation', 'value']);
+  const [params, localProps] = createSplitProps.createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
   const api = useAccordion.useAccordion(params);
   const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(accordionContext.AccordionProvider, {

package/accordion/accordion.mjs

@@ -6,7 +6,7 @@ import { AccordionProvider } from './accordion-context.mjs';
 import { useAccordion } from './use-accordion.mjs';
 
 const Accordion = props => {
-  const [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'onFocusChange', 'orientation', 'value']);
+  const [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onFocusChange', 'onValueChange', 'orientation', 'value']);
   const api = useAccordion(params);
   const rootProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(AccordionProvider, {

package/accordion/index.cjs

@@ -2,28 +2,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const accordion$1 = require('./accordion.cjs');
-const accordionContent = require('./accordion-content.cjs');
+const accordion = require('./accordion.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItem = require('./accordion-item.cjs');
+const accordionItemContent = require('./accordion-item-content.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
-const accordionTrigger = require('./accordion-trigger.cjs');
-const accordion = require('@zag-js/accordion');
+const accordionItemIndicator = require('./accordion-item-indicator.cjs');
+const accordionItemTrigger = require('./accordion-item-trigger.cjs');
 
-const Accordion = Object.assign(accordion$1.Accordion, {
-  Root: accordion$1.Accordion,
-  Content: accordionContent.AccordionContent,
+const Accordion = Object.assign(accordion.Accordion, {
+  Root: accordion.Accordion,
   Item: accordionItem.AccordionItem,
-  Trigger: accordionTrigger.AccordionTrigger
+  ItemContent: accordionItemContent.AccordionItemContent,
+  ItemIndicator: accordionItemIndicator.AccordionItemIndicator,
+  ItemTrigger: accordionItemTrigger.AccordionItemTrigger
 });
 
-exports.AccordionContent = accordionContent.AccordionContent;
 exports.useAccordionContext = accordionContext.useAccordionContext;
 exports.AccordionItem = accordionItem.AccordionItem;
+exports.AccordionItemContent = accordionItemContent.AccordionItemContent;
 exports.useAccordionItemContext = accordionItemContext.useAccordionItemContext;
-exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
-Object.defineProperty(exports, 'accordionAnatomy', {
-  enumerable: true,
-  get: () => accordion.anatomy
-});
+exports.AccordionItemIndicator = accordionItemIndicator.AccordionItemIndicator;
+exports.AccordionItemTrigger = accordionItemTrigger.AccordionItemTrigger;
 exports.Accordion = Accordion;

package/accordion/index.d.ts

@@ -1,16 +1,17 @@
 import { JSX } from 'solid-js';
 import { type AccordionProps } from './accordion';
-import { AccordionContent, type AccordionContentProps } from './accordion-content';
-import { useAccordionContext } from './accordion-context';
+import { useAccordionContext, type AccordionContext } from './accordion-context';
 import { AccordionItem, type AccordionItemProps } from './accordion-item';
-import { useAccordionItemContext } from './accordion-item-context';
-import { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
-import { accordionAnatomy } from './accordion.anatomy';
+import { AccordionItemContent, type AccordionItemContentProps } from './accordion-item-content';
+import { useAccordionItemContext, type AccordionItemContext } from './accordion-item-context';
+import { AccordionItemIndicator, type AccordionItemIndicatorProps } from './accordion-item-indicator';
+import { AccordionItemTrigger, type AccordionItemTriggerProps } from './accordion-item-trigger';
 declare const Accordion: ((props: AccordionProps) => JSX.Element) & {
     Root: (props: AccordionProps) => JSX.Element;
-    Content: (props: AccordionContentProps) => JSX.Element;
     Item: (props: AccordionItemProps) => JSX.Element;
-    Trigger: (props: AccordionTriggerProps) => JSX.Element;
+    ItemContent: (props: AccordionItemContentProps) => JSX.Element;
+    ItemIndicator: (props: AccordionItemIndicatorProps) => JSX.Element;
+    ItemTrigger: (props: AccordionItemTriggerProps) => JSX.Element;
 };
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionAnatomy, useAccordionContext, useAccordionItemContext, };
-export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
+export type { AccordionContext, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, };

package/accordion/index.mjs

@@ -1,16 +1,17 @@
 import { Accordion as Accordion$1 } from './accordion.mjs';
-import { AccordionContent } from './accordion-content.mjs';
 export { useAccordionContext } from './accordion-context.mjs';
 import { AccordionItem } from './accordion-item.mjs';
+import { AccordionItemContent } from './accordion-item-content.mjs';
 export { useAccordionItemContext } from './accordion-item-context.mjs';
-import { AccordionTrigger } from './accordion-trigger.mjs';
-export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+import { AccordionItemIndicator } from './accordion-item-indicator.mjs';
+import { AccordionItemTrigger } from './accordion-item-trigger.mjs';
 
 const Accordion = Object.assign(Accordion$1, {
   Root: Accordion$1,
-  Content: AccordionContent,
   Item: AccordionItem,
-  Trigger: AccordionTrigger
+  ItemContent: AccordionItemContent,
+  ItemIndicator: AccordionItemIndicator,
+  ItemTrigger: AccordionItemTrigger
 });
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger };

package/avatar/avatar.cjs

@@ -10,7 +10,7 @@ const avatarContext = require('./avatar-context.cjs');
 const useAvatar = require('./use-avatar.cjs');
 
 const Avatar = props => {
-  const [params, localProps] = createSplitProps.createSplitProps()(props, ['getRootNode', 'id', 'onError', 'onLoad']);
+  const [params, localProps] = createSplitProps.createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
   const api = useAvatar.useAvatar(params);
   const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(avatarContext.AvatarProvider, {

package/avatar/avatar.mjs

@@ -6,7 +6,7 @@ import { AvatarProvider } from './avatar-context.mjs';
 import { useAvatar } from './use-avatar.mjs';
 
 const Avatar = props => {
-  const [params, localProps] = createSplitProps()(props, ['getRootNode', 'id', 'onError', 'onLoad']);
+  const [params, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'onLoadingStatusChange']);
   const api = useAvatar(params);
   const rootProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(AvatarProvider, {

package/avatar/index.cjs

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const avatar$1 = require('./avatar.cjs');
+const avatar = require('./avatar.cjs');
 const avatarContext = require('./avatar-context.cjs');
 const avatarFallback = require('./avatar-fallback.cjs');
 const avatarImage = require('./avatar-image.cjs');
-const avatar = require('@zag-js/avatar');
 
-const Avatar = Object.assign(avatar$1.Avatar, {
-  Root: avatar$1.Avatar,
+const Avatar = Object.assign(avatar.Avatar, {
+  Root: avatar.Avatar,
   Fallback: avatarFallback.AvatarFallback,
   Image: avatarImage.AvatarImage
 });
@@ -17,8 +16,4 @@ const Avatar = Object.assign(avatar$1.Avatar, {
 exports.useAvatarContext = avatarContext.useAvatarContext;
 exports.AvatarFallback = avatarFallback.AvatarFallback;
 exports.AvatarImage = avatarImage.AvatarImage;
-Object.defineProperty(exports, 'avatarAnatomy', {
-  enumerable: true,
-  get: () => avatar.anatomy
-});
 exports.Avatar = Avatar;

package/avatar/index.d.ts

@@ -1,13 +1,12 @@
 import { JSX } from 'solid-js';
 import { type AvatarProps } from './avatar';
-import { useAvatarContext } from './avatar-context';
+import { useAvatarContext, type AvatarContext } from './avatar-context';
 import { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 import { AvatarImage, type AvatarImageProps } from './avatar-image';
-import { avatarAnatomy } from './avatar.anatomy';
 declare const Avatar: ((props: AvatarProps) => JSX.Element) & {
     Root: (props: AvatarProps) => JSX.Element;
     Fallback: (props: AvatarFallbackProps) => JSX.Element;
     Image: (props: AvatarImageProps) => JSX.Element;
 };
-export { Avatar, AvatarFallback, AvatarImage, avatarAnatomy, useAvatarContext };
-export type { AvatarFallbackProps, AvatarImageProps, AvatarProps };
+export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
+export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps };

package/avatar/index.mjs

@@ -2,7 +2,6 @@ import { Avatar as Avatar$1 } from './avatar.mjs';
 export { useAvatarContext } from './avatar-context.mjs';
 import { AvatarFallback } from './avatar-fallback.mjs';
 import { AvatarImage } from './avatar-image.mjs';
-export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 
 const Avatar = Object.assign(Avatar$1, {
   Root: Avatar$1,

package/carousel/carousel-control.cjs

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
+const anatomy = require('@ark-ui/anatomy');
+const solid = require('@zag-js/solid');
 const factory = require('../factory.cjs');
 
-const CarouselControl = props => web.createComponent(factory.ark.div, props);
+const CarouselControl = props => {
+  const mergedProps = solid.mergeProps(() => anatomy.carouselAnatomy.build().control.attrs, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
 
 exports.CarouselControl = CarouselControl;

package/carousel/carousel-control.mjs

@@ -1,6 +1,11 @@
 import { createComponent } from 'solid-js/web';
+import { carouselAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 
-const CarouselControl = props => createComponent(ark.div, props);
+const CarouselControl = props => {
+  const mergedProps = mergeProps(() => carouselAnatomy.build().control.attrs, props);
+  return createComponent(ark.div, mergedProps);
+};
 
 export { CarouselControl };

package/carousel/carousel-indicator-group.cjs

@@ -8,9 +8,9 @@ const factory = require('../factory.cjs');
 const carouselContext = require('./carousel-context.cjs');
 
 const CarouselIndicatorGroup = props => {
-  const carousel = carouselContext.useCarouselContext();
-  const indicatorGroupProps = solid.mergeProps(() => carousel().indicatorGroupProps, props);
-  return web.createComponent(factory.ark.div, indicatorGroupProps);
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().indicatorGroupProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.CarouselIndicatorGroup = CarouselIndicatorGroup;

package/carousel/carousel-indicator-group.mjs

@@ -4,9 +4,9 @@ import { ark } from '../factory.mjs';
 import { useCarouselContext } from './carousel-context.mjs';
 
 const CarouselIndicatorGroup = props => {
-  const carousel = useCarouselContext();
-  const indicatorGroupProps = mergeProps(() => carousel().indicatorGroupProps, props);
-  return createComponent(ark.div, indicatorGroupProps);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().indicatorGroupProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { CarouselIndicatorGroup };

package/carousel/carousel-indicator.cjs

@@ -10,8 +10,8 @@ const carouselContext = require('./carousel-context.cjs');
 
 const CarouselIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps.createSplitProps()(props, ['index', 'readOnly']);
-  const carousel = carouselContext.useCarouselContext();
-  const mergedProps = solid.mergeProps(() => carousel().getIndicatorProps(indicatorProps), localProps);
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().getIndicatorProps(indicatorProps), localProps);
   return web.createComponent(factory.ark.button, mergedProps);
 };
 

package/carousel/carousel-indicator.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'solid-js';
-import type { SlideIndicatorProps } from '@zag-js/carousel';
+import type { IndicatorProps } from '@zag-js/carousel';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type CarouselIndicatorProps = Assign<HTMLArkProps<'button'>, SlideIndicatorProps>;
+export type CarouselIndicatorProps = Assign<HTMLArkProps<'button'>, IndicatorProps>;
 export declare const CarouselIndicator: (props: CarouselIndicatorProps) => JSX.Element;

package/carousel/carousel-indicator.mjs

@@ -6,8 +6,8 @@ import { useCarouselContext } from './carousel-context.mjs';
 
 const CarouselIndicator = props => {
   const [indicatorProps, localProps] = createSplitProps()(props, ['index', 'readOnly']);
-  const carousel = useCarouselContext();
-  const mergedProps = mergeProps(() => carousel().getIndicatorProps(indicatorProps), localProps);
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().getIndicatorProps(indicatorProps), localProps);
   return createComponent(ark.button, mergedProps);
 };
 

package/carousel/{carousel-next-slide-trigger.cjs → carousel-next-trigger.cjs}

@@ -7,10 +7,10 @@ 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 mergedProps = solid.mergeProps(() => carousel().nextSlideTriggerProps, props);
+const CarouselNextTrigger = props => {
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().nextTriggerProps, props);
   return web.createComponent(factory.ark.button, mergedProps);
 };
 
-exports.CarouselNextSlideTrigger = CarouselNextSlideTrigger;
+exports.CarouselNextTrigger = CarouselNextTrigger;

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

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

package/carousel/{carousel-next-slide-trigger.mjs → carousel-next-trigger.mjs}

@@ -3,10 +3,10 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useCarouselContext } from './carousel-context.mjs';
 
-const CarouselNextSlideTrigger = props => {
-  const carousel = useCarouselContext();
-  const mergedProps = mergeProps(() => carousel().nextSlideTriggerProps, props);
+const CarouselNextTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().nextTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-export { CarouselNextSlideTrigger };
+export { CarouselNextTrigger };

package/carousel/{carousel-prev-slide-trigger.cjs → carousel-prev-trigger.cjs}

@@ -7,10 +7,10 @@ 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 mergedProps = solid.mergeProps(() => carousel().prevSlideTriggerProps, props);
+const CarouselPrevTrigger = props => {
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().prevTriggerProps, props);
   return web.createComponent(factory.ark.button, mergedProps);
 };
 
-exports.CarouselPrevSlideTrigger = CarouselPrevSlideTrigger;
+exports.CarouselPrevTrigger = CarouselPrevTrigger;

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

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

package/carousel/{carousel-prev-slide-trigger.mjs → carousel-prev-trigger.mjs}

@@ -3,10 +3,10 @@ import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useCarouselContext } from './carousel-context.mjs';
 
-const CarouselPrevSlideTrigger = props => {
-  const carousel = useCarouselContext();
-  const mergedProps = mergeProps(() => carousel().prevSlideTriggerProps, props);
+const CarouselPrevTrigger = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().prevTriggerProps, props);
   return createComponent(ark.button, mergedProps);
 };
 
-export { CarouselPrevSlideTrigger };
+export { CarouselPrevTrigger };

package/carousel/carousel-slide-group.cjs

@@ -7,10 +7,10 @@ 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);
+const CarouselItemGroup = props => {
+  const api = carouselContext.useCarouselContext();
+  const mergedProps = solid.mergeProps(() => api().itemGroupProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
-exports.CarouselSlideGroup = CarouselSlideGroup;
+exports.CarouselItemGroup = CarouselItemGroup;

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

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

package/carousel/carousel-slide-group.mjs

@@ -3,10 +3,10 @@ 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);
+const CarouselItemGroup = props => {
+  const api = useCarouselContext();
+  const mergedProps = mergeProps(() => api().itemGroupProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
-export { CarouselSlideGroup };
+export { CarouselItemGroup };