@ark-ui/react 0.13.1 → 0.15.0-beta.0

package/toast/index.d.ts

@@ -1,52 +1,35 @@
 import { Placement, Service } from '@zag-js/toast';
 import { JSX } from 'react/jsx-runtime';
 import { UseToastItemProps } from './use-toast-item';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 /// <reference types="react" />
 import { Toast as ToastRoot, type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
 import { ToastGroup, type ToastGroupProps } from './toast-group';
-import { useToastItemContext } from './toast-item-context';
+import { useToastItemContext, type ToastItemContext } from './toast-item-context';
 import { ToastPlacements, type ToastPlacementsProps } from './toast-placements';
 import { ToastProvider, useToast, type ToastProviderProps } from './toast-provider';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
 import { toastAnatomy } from './toast.anatomy';
-declare const Toast: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>> & {
+declare const Toast: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>> & {
     Provider: (props: ToastProviderProps) => JSX.Element;
-    Title: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-        ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined;
-    } & {
+    Title: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLHeadingElement>>;
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLHeadingElement>>;
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
+    Description: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
-    Description: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-        ref?: ((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLParagraphElement>>;
+    CloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLParagraphElement>>;
-    CloseTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
     Placements: (props: ToastPlacementsProps) => JSX.Element;
-    Group: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "children" | "placement"> & {
+    Group: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | "placement"> & {
         placement: Placement;
-        children: ReactNode | ((toasts: Service[]) => ReactNode);
+        children?: ReactNode | ((toasts: Service[]) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
 };
 export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastPlacements, ToastProvider, ToastRoot, ToastTitle, toastAnatomy, useToast, useToastItemContext, };
-export type { ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastPlacementsProps, ToastProps, ToastProviderProps, ToastTitleProps, };
+export type { ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastItemContext, ToastPlacementsProps, ToastProps, ToastProviderProps, ToastTitleProps, };

package/toast/toast-close-trigger.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ToastCloseTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const ToastCloseTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ToastCloseTriggerProps = HTMLArkProps<'button'>;
+export declare const ToastCloseTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/toast/toast-description.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ToastDescriptionProps = ComponentPropsWithoutRef<typeof ark.p>;
-export declare const ToastDescription: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void) | RefObject<HTMLParagraphElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ToastDescriptionProps = HTMLArkProps<'p'>;
+export declare const ToastDescription: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLParagraphElement>>;
+} & RefAttributes<HTMLParagraphElement>>;

package/toast/toast-group.d.ts

@@ -1,16 +1,12 @@
 import { type Placement, type Service } from '@zag-js/toast';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export type ToastGroupProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, {
+export type ToastGroupProps = Assign<HTMLArkProps<'div'>, {
     placement: Placement;
-    children: ReactNode | ((toasts: Service[]) => ReactNode);
+    children?: ReactNode | ((toasts: Service[]) => ReactNode);
 }>;
-export declare const ToastGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "children" | "placement"> & {
+export declare const ToastGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | "placement"> & {
     placement: Placement;
-    children: ReactNode | ((toasts: Service[]) => ReactNode);
+    children?: ReactNode | ((toasts: Service[]) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/toast';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseToastItemReturn } from './use-toast-item';
 export type ToastItemContext = UseToastItemReturn;
-export declare const ToastItemProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useToastItemContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const ToastItemProvider: Provider<UseToastItemReturn>, useToastItemContext: () => UseToastItemReturn;

package/toast/toast-provider.cjs

@@ -40,6 +40,5 @@ const ToastProvider = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(ToastContextProvider, { value: api, children });
 };
 
-exports.ToastContextProvider = ToastContextProvider;
 exports.ToastProvider = ToastProvider;
 exports.useToast = useToast;

package/toast/toast-provider.d.ts

@@ -1,66 +1,10 @@
 import { JSX } from 'react/jsx-runtime';
+import { PropTypes } from '@zag-js/types';
 import * as toast from '@zag-js/toast';
-import { Provider, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type Optional } from '../types';
 type GroupPublicContext = Parameters<(typeof toast)['group']['machine']>[0];
-export type ToastContext = ReturnType<(typeof toast)['group']['connect']>;
-export declare const ToastContextProvider: Provider<{
-    count: number;
-    toasts: toast.Service[];
-    toastsByPlacement: Partial<Record<toast.Placement, toast.Service[]>>;
-    isVisible(id: string): boolean;
-    create(options: Partial<toast.ToastOptions>): string | undefined;
-    upsert(options: Partial<toast.ToastOptions>): string | undefined;
-    dismiss(id?: string | undefined): void;
-    remove(id?: string | undefined): void;
-    dismissByPlacement(placement: toast.Placement): void;
-    update(id: string, options: Partial<toast.ToastOptions>): string | undefined;
-    loading(options: Partial<toast.ToastOptions>): string | undefined;
-    success(options: Partial<toast.ToastOptions>): string | undefined;
-    error(options: Partial<toast.ToastOptions>): string | undefined;
-    promise<T_1>(promise: Promise<T_1>, options: {
-        loading: toast.ToastOptions;
-        success: toast.ToastOptions | ((arg: T_1) => toast.ToastOptions);
-        error: toast.ToastOptions | ((arg: Error) => toast.ToastOptions);
-    }, shared?: Partial<toast.ToastOptions> | undefined): Promise<T_1>;
-    pause(id?: string | undefined): void;
-    resume(id?: string | undefined): void;
-    getGroupProps(options: {
-        placement: toast.Placement;
-        label?: string | undefined;
-    }): {
-        [x: string]: any;
-    };
-    subscribe(fn: (toasts: any) => void): () => void;
-}>, useToast: () => {
-    count: number;
-    toasts: toast.Service[];
-    toastsByPlacement: Partial<Record<toast.Placement, toast.Service[]>>;
-    isVisible(id: string): boolean;
-    create(options: Partial<toast.ToastOptions>): string | undefined;
-    upsert(options: Partial<toast.ToastOptions>): string | undefined;
-    dismiss(id?: string | undefined): void;
-    remove(id?: string | undefined): void;
-    dismissByPlacement(placement: toast.Placement): void;
-    update(id: string, options: Partial<toast.ToastOptions>): string | undefined;
-    loading(options: Partial<toast.ToastOptions>): string | undefined;
-    success(options: Partial<toast.ToastOptions>): string | undefined;
-    error(options: Partial<toast.ToastOptions>): string | undefined;
-    promise<T_1>(promise: Promise<T_1>, options: {
-        loading: toast.ToastOptions;
-        success: toast.ToastOptions | ((arg: T_1) => toast.ToastOptions);
-        error: toast.ToastOptions | ((arg: Error) => toast.ToastOptions);
-    }, shared?: Partial<toast.ToastOptions> | undefined): Promise<T_1>;
-    pause(id?: string | undefined): void;
-    resume(id?: string | undefined): void;
-    getGroupProps(options: {
-        placement: toast.Placement;
-        label?: string | undefined;
-    }): {
-        [x: string]: any;
-    };
-    subscribe(fn: (toasts: any) => void): () => void;
-};
+declare const useToast: () => toast.GroupApi<PropTypes>;
 export type ToastProviderProps = PropsWithChildren & Optional<GroupPublicContext, 'id'>;
 export declare const ToastProvider: (props: ToastProviderProps) => JSX.Element;
-export {};
+export { useToast };

package/toast/toast-provider.mjs

@@ -17,4 +17,4 @@ const ToastProvider = (props) => {
   return /* @__PURE__ */ jsx(ToastContextProvider, { value: api, children });
 };
 
-export { ToastContextProvider, ToastProvider, useToast };
+export { ToastProvider, useToast };

package/toast/toast-title.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type ToastTitleProps = ComponentPropsWithoutRef<typeof ark.h3>;
-export declare const ToastTitle: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
-    ref?: ((instance: HTMLHeadingElement | null) => void) | RefObject<HTMLHeadingElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type ToastTitleProps = HTMLArkProps<'h3'>;
+export declare const ToastTitle: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLHeadingElement>>;
+} & RefAttributes<HTMLHeadingElement>>;

package/toast/toast.d.ts

@@ -1,10 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseToastItemProps } from './use-toast-item';
-export type ToastProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseToastItemProps>;
-export declare const Toast: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;
+export type ToastProps = Assign<HTMLArkProps<'div'>, UseToastItemProps>;
+export declare const Toast: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "toast"> & UseToastItemProps & RefAttributes<HTMLDivElement>>;

package/toast/toast.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Toast, type ToastProviderProps } from '.';
+import { Toast, type ToastProviderProps } from './';
 type ToastType = typeof Toast;
 declare const meta: Meta<ToastType>;
 export default meta;

package/toast/use-toast-item.d.ts

@@ -1,11 +1,6 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as toast from '@zag-js/toast';
 export type UseToastItemProps = {
     toast: toast.Service;
 };
-export type UseToastItemReturn = ReturnType<typeof useToastItem>;
-export declare const useToastItem: (props: UseToastItemProps) => toast.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UseToastItemReturn = toast.Api;
+export declare const useToastItem: (props: UseToastItemProps) => UseToastItemReturn;

package/toggle-group/index.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const toggle = require('./toggle.cjs');
+const toggleGroup = require('./toggle-group.cjs');
+const toggleGroupContext = require('./toggle-group-context.cjs');
+
+const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
+  Root: toggleGroup.ToggleGroup,
+  Toggle: toggle.Toggle
+});
+
+exports.Toggle = toggle.Toggle;
+exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;
+exports.ToggleGroup = ToggleGroup;

package/toggle-group/index.d.ts

@@ -0,0 +1,19 @@
+import { UseToggleGroupProps } from './use-toggle-group';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { Toggle, type ToggleProps } from './toggle';
+import { type ToggleGroupProps } from './toggle-group';
+import { useToggleGroupContext, type ToggleGroupContext } from './toggle-group-context';
+declare const ToggleGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>>;
+    Toggle: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof {
+        value: string;
+        disabled?: boolean | undefined;
+    }> & {
+        value: string;
+        disabled?: boolean | undefined;
+    } & RefAttributes<HTMLButtonElement>>;
+};
+export { Toggle, ToggleGroup, useToggleGroupContext };
+export type { ToggleGroupContext, ToggleGroupProps, ToggleProps };

package/toggle-group/index.mjs

@@ -0,0 +1,11 @@
+'use client';
+import { Toggle } from './toggle.mjs';
+import { ToggleGroup as ToggleGroup$1 } from './toggle-group.mjs';
+export { useToggleGroupContext } from './toggle-group-context.mjs';
+
+const ToggleGroup = Object.assign(ToggleGroup$1, {
+  Root: ToggleGroup$1,
+  Toggle
+});
+
+export { Toggle, ToggleGroup };

package/toggle-group/toggle-group-context.cjs

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

package/toggle-group/toggle-group-context.d.ts

@@ -0,0 +1,5 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import { type UseToggleGroupReturn } from './use-toggle-group';
+export type ToggleGroupContext = UseToggleGroupReturn;
+export declare const ToggleGroupProvider: Provider<UseToggleGroupReturn>, useToggleGroupContext: () => UseToggleGroupReturn;

package/toggle-group/toggle-group-context.mjs

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [ToggleGroupProvider, useToggleGroupContext] = createContext({
+  name: "ToggleGroupContext",
+  hookName: "useToggleGroupContext",
+  providerName: "<ToggleGroupProvider />"
+});
+
+export { ToggleGroupProvider, useToggleGroupContext };

package/toggle-group/toggle-group.cjs

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const toggleGroupContext = require('./toggle-group-context.cjs');
+const useToggleGroup = require('./use-toggle-group.cjs');
+
+const ToggleGroup = react.forwardRef((props, ref) => {
+  const [toggleGroup, localProps] = createSplitProps.createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "loop",
+    "multiple",
+    "onChange",
+    "orientation",
+    "rovingFocus",
+    "value"
+  ]);
+  const api = useToggleGroup.useToggleGroup(toggleGroup);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(toggleGroupContext.ToggleGroupProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+});
+ToggleGroup.displayName = "ToggleGroup";
+
+exports.ToggleGroup = ToggleGroup;

package/toggle-group/toggle-group.d.ts

@@ -0,0 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseToggleGroupProps } from './use-toggle-group';
+export type ToggleGroupProps = Assign<HTMLArkProps<'div'>, UseToggleGroupProps>;
+export declare const ToggleGroup: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseToggleGroupProps> & UseToggleGroupProps & RefAttributes<HTMLDivElement>>;

package/toggle-group/toggle-group.mjs

@@ -0,0 +1,31 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { ToggleGroupProvider } from './toggle-group-context.mjs';
+import { useToggleGroup } from './use-toggle-group.mjs';
+
+const ToggleGroup = forwardRef((props, ref) => {
+  const [toggleGroup, localProps] = createSplitProps()(props, [
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "id",
+    "ids",
+    "loop",
+    "multiple",
+    "onChange",
+    "orientation",
+    "rovingFocus",
+    "value"
+  ]);
+  const api = useToggleGroup(toggleGroup);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  return /* @__PURE__ */ jsx(ToggleGroupProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+ToggleGroup.displayName = "ToggleGroup";
+
+export { ToggleGroup };

package/toggle-group/toggle-group.stories.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { ToggleGroup } from './';
+type ToggleGroupType = typeof ToggleGroup;
+declare const meta: Meta<ToggleGroupType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Initialvalue: () => JSX.Element;
+export declare const Multiple: () => JSX.Element;

package/toggle-group/toggle-group.test.d.ts

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

package/toggle-group/toggle.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const toggleGroupContext = require('./toggle-group-context.cjs');
+
+const Toggle = react.forwardRef((props, ref) => {
+  const [toggleProps, localProps] = createSplitProps.createSplitProps()(props, ["value", "disabled"]);
+  const api = toggleGroupContext.useToggleGroupContext();
+  const mergedProps = react$1.mergeProps(api.getToggleProps(toggleProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+Toggle.displayName = "Toggle";
+
+exports.Toggle = Toggle;

package/toggle-group/toggle.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+type _ToggleProps = {
+    value: string;
+    disabled?: boolean;
+};
+export type ToggleProps = Assign<HTMLArkProps<'button'>, _ToggleProps>;
+export declare const Toggle: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof _ToggleProps> & _ToggleProps & RefAttributes<HTMLButtonElement>>;
+export {};

package/toggle-group/toggle.mjs

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { useToggleGroupContext } from './toggle-group-context.mjs';
+
+const Toggle = forwardRef((props, ref) => {
+  const [toggleProps, localProps] = createSplitProps()(props, ["value", "disabled"]);
+  const api = useToggleGroupContext();
+  const mergedProps = mergeProps(api.getToggleProps(toggleProps), localProps);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+Toggle.displayName = "Toggle";
+
+export { Toggle };

package/toggle-group/use-toggle-group.cjs

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react$1 = require('@zag-js/react');
+const toggleGroup = require('@zag-js/toggle-group');
+const react = require('react');
+require('../environment/index.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const toggleGroup__namespace = /*#__PURE__*/_interopNamespaceDefault(toggleGroup);
+
+const useToggleGroup = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const initialContext = {
+    id: react.useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value
+  };
+  const [state, send] = react$1.useMachine(toggleGroup__namespace.machine(initialContext), {
+    context
+  });
+  return toggleGroup__namespace.connect(state, send, react$1.normalizeProps);
+};
+
+exports.useToggleGroup = useToggleGroup;

package/toggle-group/use-toggle-group.d.ts

@@ -0,0 +1,7 @@
+import * as toggleGroup from '@zag-js/toggle-group';
+import { type Optional } from '../types';
+export interface UseToggleGroupProps extends Optional<toggleGroup.Context, 'id'> {
+    defaultValue?: toggleGroup.Context['value'];
+}
+export type UseToggleGroupReturn = toggleGroup.Api;
+export declare const useToggleGroup: (props: UseToggleGroupProps) => UseToggleGroupReturn;

package/toggle-group/use-toggle-group.mjs

@@ -0,0 +1,26 @@
+'use client';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as toggleGroup from '@zag-js/toggle-group';
+import { useId } from 'react';
+import '../environment/index.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useToggleGroup = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const initialContext = {
+    id: useId(),
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value
+  };
+  const [state, send] = useMachine(toggleGroup.machine(initialContext), {
+    context
+  });
+  return toggleGroup.connect(state, send, normalizeProps);
+};
+
+export { useToggleGroup };