@ark-ui/solid 0.1.0 → 0.3.0

package/dist/toast/use-toast-item.mjs

@@ -0,0 +1,10 @@
+import { useActor, normalizeProps } from '@zag-js/solid';
+import * as toast from '@zag-js/toast';
+import { createMemo } from 'solid-js';
+
+const useToastItem = (props) => {
+  const [state, send] = useActor(props.toast);
+  return createMemo(() => toast.connect(state, send, normalizeProps));
+};
+
+export { useToastItem };

package/dist/tooltip/tooltip-arrow-tip.cjs

@@ -3,12 +3,14 @@
 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 tooltipContext = require('./tooltip-context.cjs');
 
 const TooltipArrowTip = props => {
-  const tooltip = tooltipContext.useTooltipContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tooltip().arrowTipProps, props));
+  const api = tooltipContext.useTooltipContext();
+  const arrowTipProps = solid.mergeProps(() => api().arrowTipProps, props);
+  return web.createComponent(factory.ark.div, arrowTipProps);
 };
 
 exports.TooltipArrowTip = TooltipArrowTip;

package/dist/tooltip/tooltip-arrow-tip.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
 
 const TooltipArrowTip = props => {
-  const tooltip = useTooltipContext();
-  return createComponent(ark.div, mergeProps(() => tooltip().arrowTipProps, props));
+  const api = useTooltipContext();
+  const arrowTipProps = mergeProps(() => api().arrowTipProps, props);
+  return createComponent(ark.div, arrowTipProps);
 };
 
 export { TooltipArrowTip };

package/dist/tooltip/tooltip-arrow.cjs

@@ -3,12 +3,14 @@
 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 tooltipContext = require('./tooltip-context.cjs');
 
 const TooltipArrow = props => {
   const tooltip = tooltipContext.useTooltipContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tooltip().arrowProps, props));
+  const arrowProps = solid.mergeProps(() => tooltip().arrowProps, props);
+  return web.createComponent(factory.ark.div, arrowProps);
 };
 
 exports.TooltipArrow = TooltipArrow;

package/dist/tooltip/tooltip-arrow.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
 
 const TooltipArrow = props => {
   const tooltip = useTooltipContext();
-  return createComponent(ark.div, mergeProps(() => tooltip().arrowProps, props));
+  const arrowProps = mergeProps(() => tooltip().arrowProps, props);
+  return createComponent(ark.div, arrowProps);
 };
 
 export { TooltipArrow };

package/dist/tooltip/tooltip-content.cjs

@@ -3,12 +3,14 @@
 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 tooltipContext = require('./tooltip-context.cjs');
 
 const TooltipContent = props => {
-  const tooltip = tooltipContext.useTooltipContext();
-  return web.createComponent(factory.ark.div, web.mergeProps(() => tooltip().contentProps, props));
+  const api = tooltipContext.useTooltipContext();
+  const contentProps = solid.mergeProps(() => api().contentProps, props);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.TooltipContent = TooltipContent;

package/dist/tooltip/tooltip-content.mjs

@@ -1,10 +1,12 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
 
 const TooltipContent = props => {
-  const tooltip = useTooltipContext();
-  return createComponent(ark.div, mergeProps(() => tooltip().contentProps, props));
+  const api = useTooltipContext();
+  const contentProps = mergeProps(() => api().contentProps, props);
+  return createComponent(ark.div, contentProps);
 };
 
 export { TooltipContent };

package/dist/tooltip/tooltip-context.cjs

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const createContext = require('../create-context.cjs');
 
 const [TooltipProvider, useTooltipContext] = createContext.createContext({
-  hookName: 'useTooltipContext',
-  providerName: '<TooltipProvider />'
+  hookName: "useTooltipContext",
+  providerName: "<TooltipProvider />"
 });
 
 exports.TooltipProvider = TooltipProvider;

package/dist/tooltip/tooltip-context.mjs

@@ -1,8 +1,8 @@
 import { createContext } from '../create-context.mjs';
 
 const [TooltipProvider, useTooltipContext] = createContext({
-  hookName: 'useTooltipContext',
-  providerName: '<TooltipProvider />'
+  hookName: "useTooltipContext",
+  providerName: "<TooltipProvider />"
 });
 
 export { TooltipProvider, useTooltipContext };

package/dist/tooltip/tooltip-positioner.cjs

@@ -3,18 +3,20 @@
 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 tooltipContext = require('./tooltip-context.cjs');
 
 const TooltipPositioner = props => {
-  const tooltip = tooltipContext.useTooltipContext();
+  const api = tooltipContext.useTooltipContext();
+  const positionerProps = solid.mergeProps(() => api().positionerProps, props);
   return web.createComponent(solidJs.Show, {
     get when() {
-      return tooltip().isOpen;
+      return api().isOpen;
     },
     get children() {
-      return web.createComponent(factory.ark.div, web.mergeProps(() => tooltip().positionerProps, props));
+      return web.createComponent(factory.ark.div, positionerProps);
     }
   });
 };

package/dist/tooltip/tooltip-positioner.mjs

@@ -1,16 +1,18 @@
-import { createComponent, mergeProps } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
 import { Show } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
 
 const TooltipPositioner = props => {
-  const tooltip = useTooltipContext();
+  const api = useTooltipContext();
+  const positionerProps = mergeProps(() => api().positionerProps, props);
   return createComponent(Show, {
     get when() {
-      return tooltip().isOpen;
+      return api().isOpen;
     },
     get children() {
-      return createComponent(ark.div, mergeProps(() => tooltip().positionerProps, props));
+      return createComponent(ark.div, positionerProps);
     }
   });
 };

package/dist/tooltip/tooltip-trigger.cjs

@@ -2,22 +2,15 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const solidJs = require('solid-js');
 const web = require('solid-js/web');
-const ssrSpread = require('../ssr-spread.cjs');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
 const tooltipContext = require('./tooltip-context.cjs');
 
 const TooltipTrigger = props => {
-  const tooltip = tooltipContext.useTooltipContext();
-  const triggerProps = tooltip().triggerProps;
-  const getChildren = solidJs.children(() => ssrSpread.ssrSpread(props.children, triggerProps));
-  solidJs.createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      web.spread(children, triggerProps);
-    }
-  });
-  return getChildren;
+  const api = tooltipContext.useTooltipContext();
+  const triggerProps = solid.mergeProps(() => api().triggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
 };
 
 exports.TooltipTrigger = TooltipTrigger;

package/dist/tooltip/tooltip-trigger.d.ts

@@ -1,6 +1,4 @@
-import type { ChildrenReturn } from 'solid-js';
-import { type JSX } from 'solid-js/jsx-runtime';
-export type TooltipTriggerProps = {
-    children: JSX.Element;
-};
-export declare const TooltipTrigger: (props: TooltipTriggerProps) => ChildrenReturn;
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type TooltipTriggerProps = HTMLArkProps<'button'>;
+export declare const TooltipTrigger: (props: TooltipTriggerProps) => JSX.Element;

package/dist/tooltip/tooltip-trigger.mjs

@@ -1,19 +1,12 @@
-import { children, createEffect } from 'solid-js';
-import { spread } from 'solid-js/web';
-import { ssrSpread } from '../ssr-spread.mjs';
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
 import { useTooltipContext } from './tooltip-context.mjs';
 
 const TooltipTrigger = props => {
-  const tooltip = useTooltipContext();
-  const triggerProps = tooltip().triggerProps;
-  const getChildren = children(() => ssrSpread(props.children, triggerProps));
-  createEffect(() => {
-    const children = getChildren();
-    if (children instanceof HTMLElement) {
-      spread(children, triggerProps);
-    }
-  });
-  return getChildren;
+  const api = useTooltipContext();
+  const triggerProps = mergeProps(() => api().triggerProps, props);
+  return createComponent(ark.button, triggerProps);
 };
 
 export { TooltipTrigger };

package/dist/tooltip/tooltip.cjs

@@ -8,11 +8,11 @@ const tooltipContext = require('./tooltip-context.cjs');
 const useTooltip = require('./use-tooltip.cjs');
 
 const Tooltip = props => {
-  const [useTooltipProps, rest] = createSplitProps.createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
-  const tooltip = useTooltip.useTooltip(useTooltipProps);
+  const [useTooltipProps, restProps] = createSplitProps.createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip.useTooltip(useTooltipProps);
   return web.createComponent(tooltipContext.TooltipProvider, web.mergeProps({
-    value: tooltip
-  }, rest));
+    value: api
+  }, restProps));
 };
 
 exports.Tooltip = Tooltip;

package/dist/tooltip/tooltip.mjs

@@ -4,11 +4,11 @@ import { TooltipProvider } from './tooltip-context.mjs';
 import { useTooltip } from './use-tooltip.mjs';
 
 const Tooltip = props => {
-  const [useTooltipProps, rest] = createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
-  const tooltip = useTooltip(useTooltipProps);
+  const [useTooltipProps, restProps] = createSplitProps()(props, ['aria-label', 'closeDelay', 'closeOnEsc', 'closeOnPointerDown', 'disabled', 'getRootNode', 'id', 'ids', 'interactive', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
+  const api = useTooltip(useTooltipProps);
   return createComponent(TooltipProvider, mergeProps({
-    value: tooltip
-  }, rest));
+    value: api
+  }, restProps));
 };
 
 export { Tooltip };

package/dist/types.d.ts

@@ -1,4 +1,7 @@
-/**
- * Type to make properties optional and preserve their type
- */
-export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type Pretty<T> = T extends infer U ? {
+    [K in keyof U]: U[K];
+} : never;
+type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export type Assign<T, U> = Pretty<DistributiveOmit<T, keyof U> & U>;
+export type Optional<T, K extends keyof T> = Pretty<Pick<Partial<T>, K> & Omit<T, K>>;
+export {};

package/package.json

@@ -1,14 +1,33 @@
 {
   "name": "@ark-ui/solid",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
-    "components",
-    "headless",
     "solid",
-    "state-machines",
-    "ui",
-    "zag"
+    "headless",
+    "accordion",
+    "carousel",
+    "checkbox",
+    "color picker",
+    "combobox",
+    "dialog",
+    "editable",
+    "hover card",
+    "menu",
+    "number input",
+    "pagination",
+    "pin input",
+    "popover",
+    "radio group",
+    "range slider",
+    "rating group",
+    "select",
+    "slider",
+    "splitter",
+    "tabs",
+    "tags input",
+    "toast",
+    "tooltip"
   ],
   "homepage": "https://github.com/chakra-ui/ark#readme",
   "license": "MIT",
@@ -29,52 +48,63 @@
     "url": "https://github.com/chakra-ui/ark/issues"
   },
   "dependencies": {
-    "@polymorphic-factory/solid": "0.3.1",
-    "@zag-js/accordion": "0.6.0",
+    "@zag-js/accordion": "0.7.0",
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/checkbox": "0.6.0",
-    "@zag-js/combobox": "0.6.0",
-    "@zag-js/dialog": "0.6.0",
-    "@zag-js/editable": "0.6.0",
-    "@zag-js/hover-card": "0.6.0",
-    "@zag-js/menu": "0.6.0",
-    "@zag-js/number-input": "0.6.0",
-    "@zag-js/pagination": "0.5.0",
-    "@zag-js/pin-input": "0.6.0",
-    "@zag-js/popover": "0.6.0",
-    "@zag-js/pressable": "0.6.0",
-    "@zag-js/radio-group": "0.5.0",
-    "@zag-js/range-slider": "0.6.0",
-    "@zag-js/rating-group": "0.6.0",
-    "@zag-js/select": "0.6.0",
-    "@zag-js/slider": "0.6.0",
-    "@zag-js/solid": "0.5.0",
-    "@zag-js/splitter": "0.6.0",
-    "@zag-js/tabs": "0.6.0",
-    "@zag-js/tags-input": "0.6.0",
-    "@zag-js/toast": "0.6.0",
-    "@zag-js/tooltip": "0.6.0",
+    "@zag-js/carousel": "0.7.0",
+    "@zag-js/checkbox": "0.7.0",
+    "@zag-js/color-picker": "0.7.0",
+    "@zag-js/combobox": "0.7.0",
+    "@zag-js/dialog": "0.7.0",
+    "@zag-js/editable": "0.7.0",
+    "@zag-js/hover-card": "0.7.0",
+    "@zag-js/menu": "0.7.0",
+    "@zag-js/number-input": "0.7.0",
+    "@zag-js/pagination": "0.7.0",
+    "@zag-js/pin-input": "0.7.0",
+    "@zag-js/popover": "0.7.0",
+    "@zag-js/pressable": "0.7.0",
+    "@zag-js/radio-group": "0.7.0",
+    "@zag-js/range-slider": "0.7.0",
+    "@zag-js/rating-group": "0.7.0",
+    "@zag-js/select": "0.7.0",
+    "@zag-js/slider": "0.7.0",
+    "@zag-js/solid": "0.7.0",
+    "@zag-js/splitter": "0.7.0",
+    "@zag-js/tabs": "0.7.0",
+    "@zag-js/tags-input": "0.7.0",
+    "@zag-js/toast": "0.7.0",
+    "@zag-js/tooltip": "0.7.0",
     "@zag-js/types": "0.5.0"
   },
   "devDependencies": {
     "@solidjs/testing-library": "0.7.0",
+    "@storybook/addon-essentials": "7.0.9",
+    "@storybook/addon-interactions": "7.0.9",
+    "@storybook/addon-links": "7.0.9",
+    "@storybook/blocks": "7.0.9",
+    "@storybook/testing-library": "0.0.14-next.2",
     "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.1",
     "@types/testing-library__jest-dom": "5.14.5",
-    "@typescript-eslint/eslint-plugin": "5.58.0",
-    "@typescript-eslint/parser": "5.58.0",
-    "@vitest/coverage-c8": "0.30.1",
+    "@typescript-eslint/eslint-plugin": "5.59.5",
+    "@typescript-eslint/parser": "5.59.5",
+    "@vitest/coverage-c8": "0.31.0",
     "clean-package": "2.2.0",
-    "eslint": "8.38.0",
-    "happy-dom": "9.7.1",
-    "solid-js": "1.6.16",
+    "eslint": "8.40.0",
+    "happy-dom": "9.10.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "solid-js": "1.7.5",
+    "storybook": "7.0.9",
+    "storybook-solidjs": "1.0.0-beta.2",
+    "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.0.4",
-    "vite": "4.2.1",
+    "vite": "4.3.5",
     "vite-plugin-dts": "2.3.0",
-    "vite-plugin-solid": "2.6.1",
-    "vitest": "0.30.1"
+    "vite-plugin-solid": "2.7.0",
+    "vitest": "0.31.0"
   },
   "peerDependencies": {
     "solid-js": ">=1.6.0"
@@ -97,6 +127,7 @@
     "test:ci": "vitest --run --coverage",
     "typecheck": "tsc",
     "typedocs": "ts-node ../../scripts/generate-type-docs.ts",
-    "storydocs": "ts-node ../../scripts/generate-stories.ts"
+    "storydocs": "ts-node ../../scripts/generate-stories.ts",
+    "storybook": "storybook dev -p 6006"
   }
 }