@ark-ui/react 0.7.0 → 0.7.2

package/package.json

@@ -1,10 +1,8 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
-    "react",
-    "headless",
     "accordion",
     "avatar",
     "carousel",
@@ -14,29 +12,30 @@
     "date picker",
     "dialog",
     "editable",
+    "environment",
     "hover card",
     "menu",
     "number input",
     "pagination",
     "pin input",
     "popover",
+    "pressable",
     "radio group",
     "range slider",
     "rating group",
+    "segment group",
     "select",
     "slider",
     "splitter",
+    "switch",
     "tabs",
     "tags input",
     "toast",
-    "tooltip"
+    "tooltip",
+    "transition"
   ],
-  "homepage": "https://github.com/chakra-ui/ark#readme",
+  "homepage": "https://ark-ui.com",
   "license": "MIT",
-  "main": "dist/index.cjs",
-  "files": [
-    "dist"
-  ],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -55,66 +54,64 @@
     "test": "vitest",
     "test:ci": "vitest --run --coverage",
     "typecheck": "tsc",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore",
-    "typedocs": "ts-node ../../scripts/generate-type-docs.ts",
-    "storydocs": "ts-node ../../scripts/generate-stories.ts",
+    "storydocs": "pnpm --filter=@ark-ui/scripts document:stories react",
+    "typedocs": "pnpm --filter=@ark-ui/scripts document:types react",
     "storybook": "storybook dev -p 6006",
-    "release-it": "release-it --config ../../config/release-it.json"
+    "release-it": "release-it --config ../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.10.2",
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/avatar": "0.10.2",
-    "@zag-js/carousel": "0.10.2",
-    "@zag-js/checkbox": "0.10.2",
-    "@zag-js/color-picker": "0.10.2",
-    "@zag-js/combobox": "0.10.2",
-    "@zag-js/date-picker": "0.10.2",
-    "@zag-js/dialog": "0.10.2",
-    "@zag-js/editable": "0.10.2",
-    "@zag-js/hover-card": "0.10.2",
-    "@zag-js/menu": "0.10.2",
-    "@zag-js/number-input": "0.10.2",
-    "@zag-js/pagination": "0.10.2",
-    "@zag-js/pin-input": "0.10.2",
-    "@zag-js/popover": "0.10.2",
-    "@zag-js/pressable": "0.10.2",
-    "@zag-js/radio-group": "0.10.2",
-    "@zag-js/range-slider": "0.10.2",
-    "@zag-js/rating-group": "0.10.2",
-    "@zag-js/react": "0.10.2",
-    "@zag-js/select": "0.10.2",
-    "@zag-js/slider": "0.10.2",
-    "@zag-js/splitter": "0.10.2",
-    "@zag-js/switch": "0.10.2",
-    "@zag-js/tabs": "0.10.2",
-    "@zag-js/tags-input": "0.10.2",
-    "@zag-js/toast": "0.10.2",
-    "@zag-js/tooltip": "0.10.2",
-    "@zag-js/transition": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/date-utils": "0.10.3",
+    "@zag-js/accordion": "0.10.3",
+    "@zag-js/anatomy": "0.10.3",
+    "@zag-js/avatar": "0.10.3",
+    "@zag-js/carousel": "0.10.3",
+    "@zag-js/checkbox": "0.10.3",
+    "@zag-js/color-picker": "0.10.3",
+    "@zag-js/combobox": "0.10.3",
+    "@zag-js/date-picker": "0.10.3",
+    "@zag-js/dialog": "0.10.3",
+    "@zag-js/editable": "0.10.3",
+    "@zag-js/hover-card": "0.10.3",
+    "@zag-js/menu": "0.10.3",
+    "@zag-js/number-input": "0.10.3",
+    "@zag-js/pagination": "0.10.3",
+    "@zag-js/pin-input": "0.10.3",
+    "@zag-js/popover": "0.10.3",
+    "@zag-js/pressable": "0.10.3",
+    "@zag-js/radio-group": "0.10.3",
+    "@zag-js/range-slider": "0.10.3",
+    "@zag-js/rating-group": "0.10.3",
+    "@zag-js/react": "0.10.3",
+    "@zag-js/select": "0.10.3",
+    "@zag-js/slider": "0.10.3",
+    "@zag-js/splitter": "0.10.3",
+    "@zag-js/switch": "0.10.3",
+    "@zag-js/tabs": "0.10.3",
+    "@zag-js/tags-input": "0.10.3",
+    "@zag-js/toast": "0.10.3",
+    "@zag-js/tooltip": "0.10.3",
+    "@zag-js/transition": "0.10.3",
+    "@zag-js/types": "0.10.3"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "3.1.0",
-    "@storybook/addon-a11y": "7.0.23",
-    "@storybook/addon-essentials": "7.0.23",
-    "@storybook/addons": "7.0.23",
-    "@storybook/react": "7.0.23",
-    "@storybook/react-vite": "7.0.23",
+    "@storybook/addon-a11y": "7.0.24",
+    "@storybook/addon-essentials": "7.0.24",
+    "@storybook/addons": "7.0.24",
+    "@storybook/react": "7.0.24",
+    "@storybook/react-vite": "7.0.24",
     "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.1",
-    "@types/react": "18.2.13",
+    "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
     "@types/testing-library__jest-dom": "5.14.6",
-    "@typescript-eslint/eslint-plugin": "5.60.0",
-    "@typescript-eslint/parser": "5.60.0",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@vitejs/plugin-react": "4.0.1",
-    "@vitest/coverage-c8": "0.31.4",
-    "clean-package": "2.2.0",
+    "@vitest/coverage-v8": "0.32.2",
     "eslint": "8.43.0",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -125,24 +122,177 @@
     "react-frame-component": "5.2.6",
     "release-it": "15.11.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.0.23",
-    "typescript": "5.1.3",
+    "storybook": "7.0.24",
+    "typescript": "5.1.6",
     "vite": "4.3.9",
     "vite-plugin-dts": "2.3.0",
-    "vitest": "0.31.4"
+    "vitest": "0.32.2"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
-  "clean-package": "../../config/clean-package.config.json",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "index.cjs",
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "files": [
+    "./"
+  ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "import": "./accordion/index.mjs",
+      "require": "./accordion/index.cjs"
+    },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "import": "./avatar/index.mjs",
+      "require": "./avatar/index.cjs"
+    },
+    "./carousel": {
+      "types": "./carousel/index.d.ts",
+      "import": "./carousel/index.mjs",
+      "require": "./carousel/index.cjs"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "import": "./checkbox/index.mjs",
+      "require": "./checkbox/index.cjs"
+    },
+    "./color-picker": {
+      "types": "./color-picker/index.d.ts",
+      "import": "./color-picker/index.mjs",
+      "require": "./color-picker/index.cjs"
+    },
+    "./combobox": {
+      "types": "./combobox/index.d.ts",
+      "import": "./combobox/index.mjs",
+      "require": "./combobox/index.cjs"
+    },
+    "./date-picker": {
+      "types": "./date-picker/index.d.ts",
+      "import": "./date-picker/index.mjs",
+      "require": "./date-picker/index.cjs"
+    },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "import": "./dialog/index.mjs",
+      "require": "./dialog/index.cjs"
+    },
+    "./editable": {
+      "types": "./editable/index.d.ts",
+      "import": "./editable/index.mjs",
+      "require": "./editable/index.cjs"
+    },
+    "./environment": {
+      "types": "./environment/index.d.ts",
+      "import": "./environment/index.mjs",
+      "require": "./environment/index.cjs"
+    },
+    "./hover-card": {
+      "types": "./hover-card/index.d.ts",
+      "import": "./hover-card/index.mjs",
+      "require": "./hover-card/index.cjs"
+    },
+    "./menu": {
+      "types": "./menu/index.d.ts",
+      "import": "./menu/index.mjs",
+      "require": "./menu/index.cjs"
+    },
+    "./number-input": {
+      "types": "./number-input/index.d.ts",
+      "import": "./number-input/index.mjs",
+      "require": "./number-input/index.cjs"
+    },
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "import": "./pagination/index.mjs",
+      "require": "./pagination/index.cjs"
+    },
+    "./pin-input": {
+      "types": "./pin-input/index.d.ts",
+      "import": "./pin-input/index.mjs",
+      "require": "./pin-input/index.cjs"
+    },
+    "./popover": {
+      "types": "./popover/index.d.ts",
+      "import": "./popover/index.mjs",
+      "require": "./popover/index.cjs"
+    },
+    "./pressable": {
+      "types": "./pressable/index.d.ts",
+      "import": "./pressable/index.mjs",
+      "require": "./pressable/index.cjs"
+    },
+    "./radio-group": {
+      "types": "./radio-group/index.d.ts",
+      "import": "./radio-group/index.mjs",
+      "require": "./radio-group/index.cjs"
+    },
+    "./range-slider": {
+      "types": "./range-slider/index.d.ts",
+      "import": "./range-slider/index.mjs",
+      "require": "./range-slider/index.cjs"
+    },
+    "./rating-group": {
+      "types": "./rating-group/index.d.ts",
+      "import": "./rating-group/index.mjs",
+      "require": "./rating-group/index.cjs"
+    },
+    "./segment-group": {
+      "types": "./segment-group/index.d.ts",
+      "import": "./segment-group/index.mjs",
+      "require": "./segment-group/index.cjs"
+    },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "import": "./select/index.mjs",
+      "require": "./select/index.cjs"
+    },
+    "./slider": {
+      "types": "./slider/index.d.ts",
+      "import": "./slider/index.mjs",
+      "require": "./slider/index.cjs"
+    },
+    "./splitter": {
+      "types": "./splitter/index.d.ts",
+      "import": "./splitter/index.mjs",
+      "require": "./splitter/index.cjs"
+    },
+    "./switch": {
+      "types": "./switch/index.d.ts",
+      "import": "./switch/index.mjs",
+      "require": "./switch/index.cjs"
+    },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "import": "./tabs/index.mjs",
+      "require": "./tabs/index.cjs"
+    },
+    "./tags-input": {
+      "types": "./tags-input/index.d.ts",
+      "import": "./tags-input/index.mjs",
+      "require": "./tags-input/index.cjs"
+    },
+    "./toast": {
+      "types": "./toast/index.d.ts",
+      "import": "./toast/index.mjs",
+      "require": "./toast/index.cjs"
+    },
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "import": "./tooltip/index.mjs",
+      "require": "./tooltip/index.cjs"
+    },
+    "./transition": {
+      "types": "./transition/index.d.ts",
+      "import": "./transition/index.mjs",
+      "require": "./transition/index.cjs"
     },
     "./package.json": "./package.json"
   }

package/pagination/pagination.anatomy.d.ts

@@ -0,0 +1,3 @@
+import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
+export declare const paginationAnatomy: AnatomyInstance<"list" | "root" | "ellipsis" | "pageTrigger" | "prevPageTrigger" | "nextPageTrigger" | "listItem">;
+export declare const parts: Record<"list" | "root" | "ellipsis" | "pageTrigger" | "prevPageTrigger" | "nextPageTrigger" | "listItem", AnatomyPart>;

package/popover/popover-context.d.ts

@@ -0,0 +1,35 @@
+import type { PositioningOptions } from '@zag-js/combobox';
+import type { Provider, HTMLAttributes, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
+import { type UsePopoverReturn } from './use-popover';
+export type PopoverContext = UsePopoverReturn;
+export declare const PopoverProvider: Provider<{
+    portalled: boolean;
+    isOpen: boolean;
+    open(): void;
+    close(): void;
+    setPositioning(options?: Partial<PositioningOptions> | undefined): void;
+    arrowProps: HTMLAttributes<HTMLElement>;
+    arrowTipProps: HTMLAttributes<HTMLElement>;
+    anchorProps: HTMLAttributes<HTMLElement>;
+    triggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    positionerProps: HTMLAttributes<HTMLElement>;
+    contentProps: HTMLAttributes<HTMLElement>;
+    titleProps: HTMLAttributes<HTMLElement>;
+    descriptionProps: HTMLAttributes<HTMLElement>;
+    closeTriggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+}>, usePopoverContext: () => {
+    portalled: boolean;
+    isOpen: boolean;
+    open(): void;
+    close(): void;
+    setPositioning(options?: Partial<PositioningOptions> | undefined): void;
+    arrowProps: HTMLAttributes<HTMLElement>;
+    arrowTipProps: HTMLAttributes<HTMLElement>;
+    anchorProps: HTMLAttributes<HTMLElement>;
+    triggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    positionerProps: HTMLAttributes<HTMLElement>;
+    contentProps: HTMLAttributes<HTMLElement>;
+    titleProps: HTMLAttributes<HTMLElement>;
+    descriptionProps: HTMLAttributes<HTMLElement>;
+    closeTriggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+};

package/popover/use-popover.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
+import * as popover from '@zag-js/popover';
+import { type Optional } from '../types';
+export type UsePopoverProps = Optional<popover.Context, 'id'> & {
+    /**
+     * Control the open state of the popover.
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+};
+export declare const usePopover: (props: UsePopoverProps) => {
+    portalled: boolean;
+    isOpen: boolean;
+    open(): void;
+    close(): void;
+    setPositioning(options?: Partial<popover.PositioningOptions> | undefined): void;
+    arrowProps: HTMLAttributes<HTMLElement>;
+    arrowTipProps: HTMLAttributes<HTMLElement>;
+    anchorProps: HTMLAttributes<HTMLElement>;
+    triggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    positionerProps: HTMLAttributes<HTMLElement>;
+    contentProps: HTMLAttributes<HTMLElement>;
+    titleProps: HTMLAttributes<HTMLElement>;
+    descriptionProps: HTMLAttributes<HTMLElement>;
+    closeTriggerProps: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+};
+export type UsePopoverReturn = ReturnType<typeof usePopover>;

package/{dist/rating-group → rating-group}/rating-context.d.ts

@@ -1,5 +1,4 @@
-import type { ItemState } from '@zag-js/rating-group/dist/rating-group.types';
 import type { Provider } from 'react';
-import { type connect } from '@zag-js/rating-group';
+import type { ItemState, type connect } from '@zag-js/rating-group';
 export type RatingContext = ReturnType<ReturnType<typeof connect>['getRatingState']>;
 export declare const RatingProvider: Provider<ItemState>, useRatingContext: () => ItemState;

package/{dist/rating-group → rating-group}/rating-group-context.d.ts

@@ -1,4 +1,4 @@
-import type { ItemProps, ItemState } from '@zag-js/rating-group/dist/rating-group.types';
+import type { ItemProps, ItemState } from '@zag-js/rating-group';
 import type { Provider, HTMLAttributes, DetailedHTMLProps, InputHTMLAttributes } from 'react';
 import { type UseRatingGroupReturn } from './use-rating-group';
 export type RatingGroupContext = UseRatingGroupReturn;

package/{dist/segment-group → segment-group}/segment-group.anatomy.d.ts

@@ -1,3 +1,3 @@
-import type { Anatomy, AnatomyPart } from '@zag-js/anatomy/dist/create-anatomy';
+import type { Anatomy, AnatomyPart } from '@zag-js/anatomy';
 export declare const segmentGroupAnatomy: Anatomy<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl" | "radioInput">;
 export declare const parts: Record<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl" | "radioInput", AnatomyPart>;

package/{dist/select → select}/select-context.d.ts

@@ -1,4 +1,5 @@
-import type { Option, OptionProps, OptionGroupLabelProps, OptionGroupProps } from '@zag-js/select/dist/select.types';
+import type { OptionProps, OptionGroupLabelProps, OptionGroupProps } from '@zag-js/select';
+import type { Option } from '@zag-js/select/dist/select.types';
 import type { Provider, DetailedHTMLProps, LabelHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, SelectHTMLAttributes } from 'react';
 import { type UseSelectReturn } from './use-select';
 export type SelectContext = UseSelectReturn;

package/{dist/splitter → splitter}/splitter-context.d.ts

@@ -1,4 +1,5 @@
-import type { PanelId, ResizeTriggerProps, PanelProps } from '@zag-js/splitter/dist/splitter.types';
+import type { ResizeTriggerProps, PanelProps } from '@zag-js/splitter';
+import type { PanelId } from '@zag-js/splitter/dist/splitter.types';
 import type { Provider, HTMLAttributes } from 'react';
 import { type UseSplitterReturn } from './use-splitter';
 export type SplitterContext = UseSplitterReturn;

package/{dist/tabs → tabs}/tabs-context.d.ts

@@ -1,4 +1,4 @@
-import type { TriggerProps, ContentProps } from '@zag-js/tabs/dist/tabs.types';
+import type { TriggerProps, ContentProps } from '@zag-js/tabs';
 import type { Provider, HTMLAttributes, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
 import { type UseTabsReturn } from './use-tabs';
 export type TabsContext = UseTabsReturn;

package/{dist/tabs → tabs}/use-tabs.d.ts

@@ -1,6 +1,5 @@
-import type { TriggerProps, ContentProps } from '@zag-js/tabs/dist/tabs.types';
 import type { HTMLAttributes, DetailedHTMLProps, ButtonHTMLAttributes } from 'react';
-import { type Context } from '@zag-js/tabs';
+import type { TriggerProps, ContentProps, type Context } from '@zag-js/tabs';
 import { type Optional } from '../types';
 export type UseTabsProps = Optional<Context, 'id'> & {
     defaultValue?: Context['value'];