@ark-ui/solid 0.8.1 → 0.10.0

package/CHANGELOG.md

@@ -6,6 +6,40 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.10.0] - 2023-09-02
+
+### Addded
+
+- Added `DatePickerPositioner` component to the `DatePicker` component to help with positioning the calendar.
+- Added `ComboboxOptionGroupLabel` to the `Combobox` component. This component can be used to render a label for a group of options in the `ComboboxOptionGroup` component.
+- Exposed `ark` factory function.
+
+### Changed
+
+- BREAKING: Renamed `NumberInputField` to `NumberInputInput` to match the naming convention of other input components.
+- BREAKING: Renamed `PinInputField` to `PinInputInput` to match the naming convention of other input components.
+- BREAKING: Renamed `TagsInputField` to `TagsInputInput` to match the naming convention of other input components.
+- BREAKING: Renamed `SegmentIndicator` to `SegmentGroupIndicator` to match the naming convention of other components.
+
+### Removed
+
+- BREAKING: Removed `CheckboxInput`. This component is no longer required.
+- BREAKING: Removed `RadioInput`. This component is no longer required.
+- BREAKING: Removed `SegmentInput`. This component is no longer required.
+
+### Fixed
+
+- Added missing exports for `ColorPicker`.
+
+## [0.9.0] - 2023-08-06
+
+### Added
+
+- Enhanced `Carousel` component: Introduced `CarouselIndicator` and `CarouselIndicatorGroup` components. These sub-components offer finer control over the carousel navigation, enabling users to directly access desired carousel slides.
+- Expose `use<X>Context` for all components that use context.
+- Added `ComboboxOptionGroup` and `ComboboxClearTrigger` components to the `Combobox` component.
+- Developers can now set default options for all `Toast` components in their application, ensuring a consistent look and feel across the board.
+
 ## [0.8.1] - 2023-07-10
 
 ### Fixed
@@ -110,7 +144,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.8.1...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.10.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
@@ -120,5 +154,7 @@ description: All notable changes to this project will be documented in this file
 [0.7.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.0
 [0.7.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.1
 [0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.0
-
 [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

package/accordion/accordion-content.d.ts

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

package/accordion/accordion-context.d.ts

@@ -1,24 +1,4 @@
-import type { ItemProps, ItemState } from '@zag-js/accordion';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseAccordionReturn } from './use-accordion';
 export type AccordionContext = UseAccordionReturn;
-export declare const AccordionProvider: ContextProviderComponent<Accessor<{
-    rootProps: JSX.HTMLAttributes<any>;
-    getItemProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getContentProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getTriggerProps(props: ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    focusedValue: string | null;
-    value: string | string[] | null;
-    setValue: (value: string | string[]) => void;
-    getItemState: (props: ItemProps) => ItemState;
-}>>, useAccordionContext: () => Accessor<{
-    rootProps: JSX.HTMLAttributes<any>;
-    getItemProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getContentProps(props: ItemProps): JSX.HTMLAttributes<any>;
-    getTriggerProps(props: ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    focusedValue: string | null;
-    value: string | string[] | null;
-    setValue: (value: string | string[]) => void;
-    getItemState: (props: ItemProps) => ItemState;
-}>;
+export declare const AccordionProvider: ContextProviderComponent<UseAccordionReturn>, useAccordionContext: () => UseAccordionReturn;

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

@@ -1,6 +1,4 @@
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
-export type AccordionItemContext = {
-    value: string;
-    disabled?: boolean;
-};
+import { ContextProviderComponent } from 'solid-js';
+import type { ItemProps, ItemState } from '@zag-js/accordion';
+export type AccordionItemContext = ItemProps & ItemState;
 export declare const AccordionItemProvider: ContextProviderComponent<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;

package/accordion/accordion-item.cjs

@@ -4,21 +4,22 @@ 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 createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const accordionContext = require('./accordion-context.cjs');
 const accordionItemContext = require('./accordion-item-context.cjs');
 
 const AccordionItem = props => {
-  const [itemParams, restProps] = solidJs.splitProps(props, ['value', 'disabled']);
+  const [itemProps, restProps] = createSplitProps.createSplitProps()(props, ['value', 'disabled']);
   const api = accordionContext.useAccordionContext();
-  const itemProps = solid.mergeProps(() => api().getItemProps(itemParams), restProps);
-  const getChildren = () => runIfFn.runIfFn(restProps.children, () => api().getItemState(itemParams));
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), restProps);
+  const accordionItem = solid.mergeProps(() => api().getItemState(itemProps), itemProps);
+  const getChildren = () => runIfFn.runIfFn(restProps.children, () => api().getItemState(itemProps));
   return web.createComponent(accordionItemContext.AccordionItemProvider, {
-    value: itemParams,
+    value: accordionItem,
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(itemProps, {
+      return web.createComponent(factory.ark.div, web.mergeProps(mergedProps, {
         get children() {
           return getChildren();
         }

package/accordion/accordion-item.d.ts

@@ -1,11 +1,10 @@
+import { type ItemState } from '@zag-js/accordion';
 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'>, {
     value: string;
     disabled?: boolean;
-    children?: JSX.Element | ((state: AccordionItemState) => JSX.Element);
+    children?: JSX.Element | ((state: () => ItemState) => JSX.Element);
 }>;
 export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;

package/accordion/accordion-item.mjs

@@ -1,20 +1,21 @@
 import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
 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 [itemParams, restProps] = splitProps(props, ['value', 'disabled']);
+  const [itemProps, restProps] = createSplitProps()(props, ['value', 'disabled']);
   const api = useAccordionContext();
-  const itemProps = mergeProps(() => api().getItemProps(itemParams), restProps);
-  const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemParams));
+  const mergedProps = mergeProps(() => api().getItemProps(itemProps), restProps);
+  const accordionItem = mergeProps(() => api().getItemState(itemProps), itemProps);
+  const getChildren = () => runIfFn(restProps.children, () => api().getItemState(itemProps));
   return createComponent(AccordionItemProvider, {
-    value: itemParams,
+    value: accordionItem,
     get children() {
-      return createComponent(ark.div, mergeProps$1(itemProps, {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
         get children() {
           return getChildren();
         }

package/accordion/accordion-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type AccordionTriggerProps = HTMLArkProps<'button'>;
 export declare const AccordionTrigger: (props: AccordionTriggerProps) => 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', 'value', 'orientation']);
+  const [params, localProps] = createSplitProps.createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'onFocusChange', 'orientation', 'value']);
   const api = useAccordion.useAccordion(params);
   const rootProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(accordionContext.AccordionProvider, {

package/accordion/accordion.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseAccordionProps } from './use-accordion';

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', 'value', 'orientation']);
+  const [params, localProps] = createSplitProps()(props, ['collapsible', 'dir', 'disabled', 'getRootNode', 'id', 'ids', 'multiple', 'onChange', 'onFocusChange', 'orientation', 'value']);
   const api = useAccordion(params);
   const rootProps = mergeProps(() => api().rootProps, localProps);
   return createComponent(AccordionProvider, {

package/accordion/accordion.stories.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Initial: () => JSX.Element;
+export declare const RenderProp: () => JSX.Element;
+export declare const Collapsible: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Vertical: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;

package/accordion/accordion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/accordion/index.cjs

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

package/accordion/index.d.ts

@@ -1,5 +1,16 @@
-export { Accordion, type AccordionProps } from './accordion';
-export { AccordionContent, type AccordionContentProps } from './accordion-content';
-export { AccordionItem, type AccordionItemProps } from './accordion-item';
-export { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
-export { accordionAnatomy } from './accordion.anatomy';
+import { JSX } from 'solid-js';
+import { type AccordionProps } from './accordion';
+import { AccordionContent, type AccordionContentProps } from './accordion-content';
+import { useAccordionContext } 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';
+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;
+};
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionAnatomy, useAccordionContext, useAccordionItemContext, };
+export type { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps };

package/accordion/index.mjs

@@ -1,5 +1,16 @@
-export { Accordion } from './accordion.mjs';
-export { AccordionContent } from './accordion-content.mjs';
-export { AccordionItem } from './accordion-item.mjs';
-export { AccordionTrigger } from './accordion-trigger.mjs';
+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';
+export { useAccordionItemContext } from './accordion-item-context.mjs';
+import { AccordionTrigger } from './accordion-trigger.mjs';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+
+const Accordion = Object.assign(Accordion$1, {
+  Root: Accordion$1,
+  Content: AccordionContent,
+  Item: AccordionItem,
+  Trigger: AccordionTrigger
+});
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/accordion/use-accordion.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const accordion = require('@zag-js/accordion');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/accordion/use-accordion.d.ts

@@ -1,15 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as accordion from '@zag-js/accordion';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseAccordionProps = Optional<accordion.Context, 'id'>;
-export type UseAccordionReturn = ReturnType<typeof useAccordion>;
-export declare const useAccordion: (props: UseAccordionProps) => Accessor<{
-    rootProps: JSX.HTMLAttributes<any>;
-    getItemProps(props: accordion.ItemProps): JSX.HTMLAttributes<any>;
-    getContentProps(props: accordion.ItemProps): JSX.HTMLAttributes<any>;
-    getTriggerProps(props: accordion.ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    focusedValue: string | null;
-    value: string | string[] | null;
-    setValue: (value: string | string[]) => void;
-    getItemState: (props: accordion.ItemProps) => accordion.ItemState;
-}>;
+export type UseAccordionReturn = Accessor<accordion.Api<PropTypes>>;
+export declare const useAccordion: (props: UseAccordionProps) => UseAccordionReturn;

package/accordion/use-accordion.mjs

@@ -1,6 +1,7 @@
 import * as accordion from '@zag-js/accordion';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useAccordion = (props) => {

package/avatar/avatar-context.d.ts

@@ -1,23 +1,4 @@
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseAvatarReturn } from './use-avatar';
 export type AvatarContext = UseAvatarReturn;
-export declare const AvatarProvider: ContextProviderComponent<Accessor<{
-    isLoaded: boolean;
-    showFallback: boolean;
-    setSrc(src: string): void;
-    setLoaded(): void;
-    setError(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
-    fallbackProps: JSX.HTMLAttributes<any>;
-}>>, useAvatarContext: () => Accessor<{
-    isLoaded: boolean;
-    showFallback: boolean;
-    setSrc(src: string): void;
-    setLoaded(): void;
-    setError(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
-    fallbackProps: JSX.HTMLAttributes<any>;
-}>;
+export declare const AvatarProvider: ContextProviderComponent<UseAvatarReturn>, useAvatarContext: () => UseAvatarReturn;

package/avatar/avatar-fallback.d.ts

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

package/avatar/avatar-image.d.ts

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

package/avatar/avatar.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseAvatarProps } from './use-avatar';

package/avatar/avatar.stories.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Events: () => JSX.Element;

package/avatar/index.cjs

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

package/avatar/index.d.ts

@@ -1,4 +1,13 @@
-export { Avatar, type AvatarProps } from './avatar';
-export { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
-export { AvatarImage, type AvatarImageProps } from './avatar-image';
-export { avatarAnatomy } from './avatar.anatomy';
+import { JSX } from 'solid-js';
+import { type AvatarProps } from './avatar';
+import { useAvatarContext } 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 };

package/avatar/index.mjs

@@ -1,4 +1,13 @@
-export { Avatar } from './avatar.mjs';
-export { AvatarFallback } from './avatar-fallback.mjs';
-export { AvatarImage } from './avatar-image.mjs';
+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,
+  Fallback: AvatarFallback,
+  Image: AvatarImage
+});
+
+export { Avatar, AvatarFallback, AvatarImage };

package/avatar/use-avatar.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const avatar = require('@zag-js/avatar');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/avatar/use-avatar.d.ts

@@ -1,15 +1,7 @@
-import type { Accessor, JSX } from 'solid-js';
 import * as avatar from '@zag-js/avatar';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseAvatarProps = Optional<avatar.Context, 'id'>;
-export type UseAvatarReturn = ReturnType<typeof useAvatar>;
-export declare const useAvatar: (props: UseAvatarProps) => Accessor<{
-    isLoaded: boolean;
-    showFallback: boolean;
-    setSrc(src: string): void;
-    setLoaded(): void;
-    setError(): void;
-    rootProps: JSX.HTMLAttributes<any>;
-    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
-    fallbackProps: JSX.HTMLAttributes<any>;
-}>;
+export type UseAvatarReturn = Accessor<avatar.Api<PropTypes>>;
+export declare const useAvatar: (props: UseAvatarProps) => UseAvatarReturn;

package/avatar/use-avatar.mjs

@@ -1,6 +1,7 @@
 import * as avatar from '@zag-js/avatar';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useAvatar = (props) => {

package/carousel/carousel-context.d.ts

@@ -1,62 +1,4 @@
-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 { ContextProviderComponent } from 'solid-js';
 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>;
-}>;
+export declare const CarouselProvider: ContextProviderComponent<UseCarouselReturn>, useCarouselContext: () => UseCarouselReturn;

package/carousel/carousel-control.d.ts

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

package/carousel/carousel-indicator-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 CarouselIndicatorGroup = props => {
+  const carousel = carouselContext.useCarouselContext();
+  const indicatorGroupProps = solid.mergeProps(() => carousel().indicatorGroupProps, props);
+  return web.createComponent(factory.ark.div, indicatorGroupProps);
+};
+
+exports.CarouselIndicatorGroup = CarouselIndicatorGroup;

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

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

package/carousel/carousel-indicator-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 CarouselIndicatorGroup = props => {
+  const carousel = useCarouselContext();
+  const indicatorGroupProps = mergeProps(() => carousel().indicatorGroupProps, props);
+  return createComponent(ark.div, indicatorGroupProps);
+};
+
+export { CarouselIndicatorGroup };