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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "0.11.0",
+  "version": "1.0.0-beta.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -20,9 +20,7 @@
     "pin input",
     "popover",
     "presence",
-    "pressable",
     "radio group",
-    "range slider",
     "rating group",
     "segment group",
     "select",
@@ -32,6 +30,7 @@
     "tabs",
     "tags input",
     "toast",
+    "toggle group",
     "tooltip"
   ],
   "homepage": "https://ark-ui.com",
@@ -43,7 +42,7 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chakra-ui/ark.git",
-    "directory": "packages/solid"
+    "directory": "packages/frameworks/solid"
   },
   "bugs": {
     "url": "https://github.com/chakra-ui/ark/issues"
@@ -57,71 +56,71 @@
     "storydocs": "pnpm --filter=@ark-ui/scripts document:stories solid",
     "typedocs": "pnpm --filter=@ark-ui/scripts document:types solid",
     "storybook": "storybook dev -p 6006",
-    "release-it": "release-it --config ../../release-it.json"
+    "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.17.0",
-    "@zag-js/anatomy": "0.17.0",
-    "@zag-js/avatar": "0.17.0",
-    "@zag-js/carousel": "0.17.0",
-    "@zag-js/checkbox": "0.17.0",
-    "@zag-js/color-picker": "0.17.0",
-    "@zag-js/combobox": "0.17.0",
-    "@zag-js/date-picker": "0.17.0",
-    "@zag-js/dialog": "0.17.0",
-    "@zag-js/editable": "0.17.0",
-    "@zag-js/hover-card": "0.17.0",
-    "@zag-js/menu": "0.17.0",
-    "@zag-js/number-input": "0.17.0",
-    "@zag-js/pagination": "0.17.0",
-    "@zag-js/pin-input": "0.17.0",
-    "@zag-js/popover": "0.17.0",
-    "@zag-js/presence": "0.17.0",
-    "@zag-js/pressable": "0.17.0",
-    "@zag-js/radio-group": "0.17.0",
-    "@zag-js/range-slider": "0.17.0",
-    "@zag-js/rating-group": "0.17.0",
-    "@zag-js/select": "0.17.0",
-    "@zag-js/slider": "0.17.0",
-    "@zag-js/solid": "0.17.0",
-    "@zag-js/splitter": "0.17.0",
-    "@zag-js/switch": "0.17.0",
-    "@zag-js/tabs": "0.17.0",
-    "@zag-js/tags-input": "0.17.0",
-    "@zag-js/toast": "0.17.0",
-    "@zag-js/tooltip": "0.17.0",
-    "@zag-js/types": "0.17.0"
+    "@ark-ui/anatomy": "workspace:*",
+    "@zag-js/accordion": "0.26.0",
+    "@zag-js/anatomy": "0.26.0",
+    "@zag-js/avatar": "0.26.0",
+    "@zag-js/carousel": "0.26.0",
+    "@zag-js/checkbox": "0.26.0",
+    "@zag-js/color-picker": "0.26.0",
+    "@zag-js/combobox": "0.26.0",
+    "@zag-js/date-picker": "0.26.0",
+    "@zag-js/dialog": "0.26.0",
+    "@zag-js/editable": "0.26.0",
+    "@zag-js/hover-card": "0.26.0",
+    "@zag-js/menu": "0.26.0",
+    "@zag-js/number-input": "0.26.0",
+    "@zag-js/pagination": "0.26.0",
+    "@zag-js/pin-input": "0.26.0",
+    "@zag-js/popover": "0.26.0",
+    "@zag-js/presence": "0.26.0",
+    "@zag-js/radio-group": "0.26.0",
+    "@zag-js/rating-group": "0.26.0",
+    "@zag-js/select": "0.26.0",
+    "@zag-js/slider": "0.26.0",
+    "@zag-js/solid": "0.26.0",
+    "@zag-js/splitter": "0.26.0",
+    "@zag-js/switch": "0.26.0",
+    "@zag-js/tabs": "0.26.0",
+    "@zag-js/tags-input": "0.26.0",
+    "@zag-js/toast": "0.26.0",
+    "@zag-js/toggle-group": "0.26.0",
+    "@zag-js/tooltip": "0.26.0",
+    "@zag-js/types": "0.26.0"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
     "@solidjs/testing-library": "0.8.4",
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-interactions": "7.4.0",
-    "@storybook/addon-links": "7.4.0",
-    "@storybook/blocks": "7.4.0",
-    "@storybook/testing-library": "0.2.0",
-    "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "6.1.3",
-    "@testing-library/user-event": "14.4.3",
-    "@types/jsdom": "21.1.2",
+    "@storybook/addon-essentials": "7.4.6",
+    "@storybook/addon-interactions": "7.4.6",
+    "@storybook/addon-links": "7.4.6",
+    "@storybook/blocks": "7.4.6",
+    "@storybook/testing-library": "0.2.2",
+    "@testing-library/dom": "9.3.3",
+    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/user-event": "14.5.1",
+    "@types/jsdom": "21.1.3",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.6.0",
-    "@typescript-eslint/parser": "6.6.0",
+    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@typescript-eslint/parser": "6.7.5",
     "@vitest/coverage-v8": "0.34.3",
-    "eslint": "8.48.0",
+    "eslint": "8.51.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "16.1.5",
-    "solid-js": "1.7.11",
-    "storybook": "7.4.0",
+    "release-it": "16.2.1",
+    "solid-js": "1.8.1",
+    "storybook": "7.4.6",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.2.2",
-    "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.3",
-    "vite-plugin-solid": "2.7.0",
+    "vite": "4.4.11",
+    "vite-plugin-dts": "3.6.0",
+    "vite-plugin-solid": "2.7.1",
     "vitest": "0.34.2"
   },
   "peerDependencies": {
@@ -224,21 +223,11 @@
       "import": "./presence/index.mjs",
       "require": "./presence/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",
@@ -284,6 +273,11 @@
       "import": "./toast/index.mjs",
       "require": "./toast/index.cjs"
     },
+    "./toggle-group": {
+      "types": "./toggle-group/index.d.ts",
+      "import": "./toggle-group/index.mjs",
+      "require": "./toggle-group/index.cjs"
+    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "import": "./tooltip/index.mjs",

package/pagination/index.cjs

@@ -5,29 +5,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const pagination = require('./pagination.cjs');
 const paginationContext = require('./pagination-context.cjs');
 const paginationEllipsis = require('./pagination-ellipsis.cjs');
-const paginationList = require('./pagination-list.cjs');
-const paginationListItem = require('./pagination-list-item.cjs');
-const paginationNextPageTrigger = require('./pagination-next-page-trigger.cjs');
-const paginationPageTrigger = require('./pagination-page-trigger.cjs');
-const paginationPrevPageTrigger = require('./pagination-prev-page-trigger.cjs');
-const pagination_anatomy = require('./pagination.anatomy.cjs');
+const paginationItem = require('./pagination-item.cjs');
+const paginationNextTrigger = require('./pagination-next-trigger.cjs');
+const paginationPrevTrigger = require('./pagination-prev-trigger.cjs');
 
 const Pagination = Object.assign(pagination.Pagination, {
   Root: pagination.Pagination,
   Ellipsis: paginationEllipsis.PaginationEllipsis,
-  List: paginationList.PaginationList,
-  ListItem: paginationListItem.PaginationListItem,
-  NextPageTrigger: paginationNextPageTrigger.PaginationNextPageTrigger,
-  PageTrigger: paginationPageTrigger.PaginationPageTrigger,
-  PrevPageTrigger: paginationPrevPageTrigger.PaginationPrevPageTrigger
+  Item: paginationItem.PaginationItem,
+  NextTrigger: paginationNextTrigger.PaginationNextTrigger,
+  PrevTrigger: paginationPrevTrigger.PaginationPrevTrigger
 });
 
 exports.usePaginationContext = paginationContext.usePaginationContext;
 exports.PaginationEllipsis = paginationEllipsis.PaginationEllipsis;
-exports.PaginationList = paginationList.PaginationList;
-exports.PaginationListItem = paginationListItem.PaginationListItem;
-exports.PaginationNextPageTrigger = paginationNextPageTrigger.PaginationNextPageTrigger;
-exports.PaginationPageTrigger = paginationPageTrigger.PaginationPageTrigger;
-exports.PaginationPrevPageTrigger = paginationPrevPageTrigger.PaginationPrevPageTrigger;
-exports.paginationAnatomy = pagination_anatomy.paginationAnatomy;
+exports.PaginationItem = paginationItem.PaginationItem;
+exports.PaginationNextTrigger = paginationNextTrigger.PaginationNextTrigger;
+exports.PaginationPrevTrigger = paginationPrevTrigger.PaginationPrevTrigger;
 exports.Pagination = Pagination;

package/pagination/index.d.ts

@@ -1,21 +1,16 @@
 import { JSX } from 'solid-js';
 import { type PaginationProps } from './pagination';
-import { usePaginationContext } from './pagination-context';
+import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
-import { PaginationList, type PaginationListProps } from './pagination-list';
-import { PaginationListItem, type PaginationListItemProps } from './pagination-list-item';
-import { PaginationNextPageTrigger, type PaginationNextPageTriggerProps } from './pagination-next-page-trigger';
-import { PaginationPageTrigger, type PaginationPageTriggerProps } from './pagination-page-trigger';
-import { PaginationPrevPageTrigger, type PaginationPrevPageTriggerProps } from './pagination-prev-page-trigger';
-import { paginationAnatomy } from './pagination.anatomy';
+import { PaginationItem, type PaginationItemProps } from './pagination-item';
+import { PaginationNextTrigger, type PaginationNextTriggerProps } from './pagination-next-trigger';
+import { PaginationPrevTrigger, type PaginationPrevTriggerProps } from './pagination-prev-trigger';
 declare const Pagination: ((props: PaginationProps) => JSX.Element) & {
     Root: (props: PaginationProps) => JSX.Element;
     Ellipsis: (props: PaginationEllipsisProps) => JSX.Element;
-    List: (props: PaginationListProps) => JSX.Element;
-    ListItem: (props: PaginationListItemProps) => JSX.Element;
-    NextPageTrigger: (props: PaginationNextPageTriggerProps) => JSX.Element;
-    PageTrigger: (props: PaginationPageTriggerProps) => JSX.Element;
-    PrevPageTrigger: (props: PaginationPrevPageTriggerProps) => JSX.Element;
+    Item: (props: PaginationItemProps) => JSX.Element;
+    NextTrigger: (props: PaginationNextTriggerProps) => JSX.Element;
+    PrevTrigger: (props: PaginationPrevTriggerProps) => JSX.Element;
 };
-export { Pagination, PaginationEllipsis, PaginationList, PaginationListItem, PaginationNextPageTrigger, PaginationPageTrigger, PaginationPrevPageTrigger, paginationAnatomy, usePaginationContext, };
-export type { PaginationEllipsisProps, PaginationListItemProps, PaginationListProps, PaginationNextPageTriggerProps, PaginationPageTriggerProps, PaginationPrevPageTriggerProps, PaginationProps, };
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemProps, PaginationNextTriggerProps, PaginationPrevTriggerProps, PaginationProps, };

package/pagination/index.mjs

@@ -1,21 +1,16 @@
 import { Pagination as Pagination$1 } from './pagination.mjs';
 export { usePaginationContext } from './pagination-context.mjs';
 import { PaginationEllipsis } from './pagination-ellipsis.mjs';
-import { PaginationList } from './pagination-list.mjs';
-import { PaginationListItem } from './pagination-list-item.mjs';
-import { PaginationNextPageTrigger } from './pagination-next-page-trigger.mjs';
-import { PaginationPageTrigger } from './pagination-page-trigger.mjs';
-import { PaginationPrevPageTrigger } from './pagination-prev-page-trigger.mjs';
-export { paginationAnatomy } from './pagination.anatomy.mjs';
+import { PaginationItem } from './pagination-item.mjs';
+import { PaginationNextTrigger } from './pagination-next-trigger.mjs';
+import { PaginationPrevTrigger } from './pagination-prev-trigger.mjs';
 
 const Pagination = Object.assign(Pagination$1, {
   Root: Pagination$1,
   Ellipsis: PaginationEllipsis,
-  List: PaginationList,
-  ListItem: PaginationListItem,
-  NextPageTrigger: PaginationNextPageTrigger,
-  PageTrigger: PaginationPageTrigger,
-  PrevPageTrigger: PaginationPrevPageTrigger
+  Item: PaginationItem,
+  NextTrigger: PaginationNextTrigger,
+  PrevTrigger: PaginationPrevTrigger
 });
 
-export { Pagination, PaginationEllipsis, PaginationList, PaginationListItem, PaginationNextPageTrigger, PaginationPageTrigger, PaginationPrevPageTrigger };
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger };

package/pagination/pagination-ellipsis.cjs

@@ -9,10 +9,10 @@ const factory = require('../factory.cjs');
 const paginationContext = require('./pagination-context.cjs');
 
 const PaginationEllipsis = props => {
-  const [ellipsisParams, restProps] = createSplitProps.createSplitProps()(props, ['index']);
+  const [ellipsisProps, restProps] = createSplitProps.createSplitProps()(props, ['index']);
   const api = paginationContext.usePaginationContext();
-  const ellipsisProps = solid.mergeProps(() => api().getEllipsisProps(ellipsisParams), restProps);
-  return web.createComponent(factory.ark.div, ellipsisProps);
+  const mergedProps = solid.mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.PaginationEllipsis = PaginationEllipsis;

package/pagination/pagination-ellipsis.mjs

@@ -5,10 +5,10 @@ import { ark } from '../factory.mjs';
 import { usePaginationContext } from './pagination-context.mjs';
 
 const PaginationEllipsis = props => {
-  const [ellipsisParams, restProps] = createSplitProps()(props, ['index']);
+  const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
   const api = usePaginationContext();
-  const ellipsisProps = mergeProps(() => api().getEllipsisProps(ellipsisParams), restProps);
-  return createComponent(ark.div, ellipsisProps);
+  const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { PaginationEllipsis };

package/pagination/pagination-item.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const paginationContext = require('./pagination-context.cjs');
+
+const PaginationItem = props => {
+  const [itemProps, localProps] = createSplitProps.createSplitProps()(props, ['value', 'type']);
+  const api = paginationContext.usePaginationContext();
+  const mergedProps = solid.mergeProps(() => api().getItemProps(itemProps), localProps);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.PaginationItem = PaginationItem;

package/pagination/pagination-item.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'solid-js';
+import type { ItemProps } from '@zag-js/pagination';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type PaginationItemProps = Assign<HTMLArkProps<'button'>, ItemProps>;
+export declare const PaginationItem: (props: PaginationItemProps) => JSX.Element;

package/pagination/pagination-item.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { usePaginationContext } from './pagination-context.mjs';
+
+const PaginationItem = props => {
+  const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
+  const api = usePaginationContext();
+  const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { PaginationItem };

package/pagination/pagination-next-trigger.cjs

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

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

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

package/pagination/pagination-next-trigger.mjs

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

package/pagination/pagination-prev-trigger.cjs

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

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

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

package/pagination/pagination-prev-trigger.mjs

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

package/pagination/pagination.cjs

@@ -12,7 +12,7 @@ const paginationContext = require('./pagination-context.cjs');
 const usePagination = require('./use-pagination.cjs');
 
 const Pagination = props => {
-  const [paginationParams, restProps] = createSplitProps.createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [paginationParams, restProps] = createSplitProps.createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const [childrenProps, localProps] = solidJs.splitProps(restProps, ['children']);
   const api = usePagination.usePagination(paginationParams);
   const getChildren = () => runIfFn.runIfFn(childrenProps.children, api);

package/pagination/pagination.mjs

@@ -8,7 +8,7 @@ import { PaginationProvider } from './pagination-context.mjs';
 import { usePagination } from './use-pagination.mjs';
 
 const Pagination = props => {
-  const [paginationParams, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [paginationParams, restProps] = createSplitProps()(props, ['count', 'dir', 'getRootNode', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const [childrenProps, localProps] = splitProps(restProps, ['children']);
   const api = usePagination(paginationParams);
   const getChildren = () => runIfFn(childrenProps.children, api);

package/pin-input/index.cjs

@@ -2,15 +2,14 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pinInput$1 = require('./pin-input.cjs');
+const pinInput = require('./pin-input.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 const pinInputControl = require('./pin-input-control.cjs');
 const pinInputField = require('./pin-input-field.cjs');
 const pinInputLabel = require('./pin-input-label.cjs');
-const pinInput = require('@zag-js/pin-input');
 
-const PinInput = Object.assign(pinInput$1.PinInput, {
-  Root: pinInput$1.PinInput,
+const PinInput = Object.assign(pinInput.PinInput, {
+  Root: pinInput.PinInput,
   Control: pinInputControl.PinInputControl,
   Input: pinInputField.PinInputInput,
   Label: pinInputLabel.PinInputLabel
@@ -20,8 +19,4 @@ exports.usePinInputContext = pinInputContext.usePinInputContext;
 exports.PinInputControl = pinInputControl.PinInputControl;
 exports.PinInputInput = pinInputField.PinInputInput;
 exports.PinInputLabel = pinInputLabel.PinInputLabel;
-Object.defineProperty(exports, 'pinInputAnatomy', {
-  enumerable: true,
-  get: () => pinInput.anatomy
-});
 exports.PinInput = PinInput;

package/pin-input/index.d.ts

@@ -1,15 +1,14 @@
 import { JSX } from 'solid-js';
 import { type PinInputProps } from './pin-input';
-import { usePinInputContext } from './pin-input-context';
+import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
 import { PinInputInput, type PinInputInputProps } from './pin-input-field';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
-import { pinInputAnatomy } from './pin-input.anatomy';
 declare const PinInput: ((props: PinInputProps) => JSX.Element) & {
     Root: (props: PinInputProps) => JSX.Element;
     Control: (props: PinInputControlProps) => JSX.Element;
     Input: (props: PinInputInputProps) => JSX.Element;
     Label: (props: PinInputLabelProps) => JSX.Element;
 };
-export { PinInput, PinInputControl, PinInputInput, PinInputLabel, pinInputAnatomy, usePinInputContext, };
-export type { PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps };
+export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, };

package/pin-input/index.mjs

@@ -3,7 +3,6 @@ export { usePinInputContext } from './pin-input-context.mjs';
 import { PinInputControl } from './pin-input-control.mjs';
 import { PinInputInput } from './pin-input-field.mjs';
 import { PinInputLabel } from './pin-input-label.mjs';
-export { anatomy as pinInputAnatomy } from '@zag-js/pin-input';
 
 const PinInput = Object.assign(PinInput$1, {
   Root: PinInput$1,

package/pin-input/pin-input-control.cjs

@@ -4,24 +4,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
-const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const PinInputControl = props => {
   const api = pinInputContext.usePinInputContext();
-  const [childrenProps, restProps] = solidJs.splitProps(props, ['children']);
-  const controlProps = solid.mergeProps(() => api().controlProps, restProps);
-  return [web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
-    get children() {
-      return childrenProps.children;
-    }
-  })), (() => {
-    const _el$ = _tmpl$();
-    web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const mergedProps = solid.mergeProps(() => api().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
 };
 
 exports.PinInputControl = PinInputControl;

package/pin-input/pin-input-control.mjs

@@ -1,23 +1,12 @@
-import { createComponent, mergeProps as mergeProps$1, spread, template } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { usePinInputContext } from './pin-input-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const PinInputControl = props => {
   const api = usePinInputContext();
-  const [childrenProps, restProps] = splitProps(props, ['children']);
-  const controlProps = mergeProps(() => api().controlProps, restProps);
-  return [createComponent(ark.div, mergeProps$1(controlProps, {
-    get children() {
-      return childrenProps.children;
-    }
-  })), (() => {
-    const _el$ = _tmpl$();
-    spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-    return _el$;
-  })()];
+  const mergedProps = mergeProps(() => api().controlProps, props);
+  return createComponent(ark.div, mergedProps);
 };
 
 export { PinInputControl };

package/pin-input/pin-input.cjs

@@ -9,14 +9,19 @@ const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 const usePinInput = require('./use-pin-input.cjs');
 
+const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const PinInput = props => {
-  const [pinInputProps, htmlProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onChange', 'onComplete', 'onInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
+  const [pinInputProps, localProps] = createSplitProps.createSplitProps()(props, ['autoFocus', 'blurOnComplete', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'mask', 'name', 'onValueChange', 'onValueComplete', 'onValueInvalid', 'otp', 'pattern', 'placeholder', 'selectOnFocus', 'translations', 'type', 'value']);
   const api = usePinInput.usePinInput(pinInputProps);
-  const rootProps = solid.mergeProps(() => api().rootProps, htmlProps);
+  const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(pinInputContext.PinInputProvider, {
     value: api,
     get children() {
-      return web.createComponent(factory.ark.div, rootProps);
+      return [web.createComponent(factory.ark.div, mergedProps), (() => {
+        const _el$ = _tmpl$();
+        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
+        return _el$;
+      })()];
     }
   });
 };