@ark-ui/solid 0.10.0 → 0.11.0

package/index.mjs

@@ -3,17 +3,20 @@ export { Accordion } from './accordion/index.mjs';
 export { Avatar } from './avatar/index.mjs';
 export { Carousel } from './carousel/index.mjs';
 export { Checkbox } from './checkbox/index.mjs';
+export { ColorPicker } from './color-picker/index.mjs';
 export { Combobox } from './combobox/index.mjs';
 export { DatePicker } from './date-picker/index.mjs';
 export { Dialog } from './dialog/index.mjs';
 export { Editable } from './editable/index.mjs';
 export { Environment } from './environment/index.mjs';
+export { ark } from './factory.mjs';
 export { HoverCard } from './hover-card/index.mjs';
 export { Menu } from './menu/index.mjs';
 export { NumberInput } from './number-input/index.mjs';
 export { Pagination } from './pagination/index.mjs';
 export { PinInput } from './pin-input/index.mjs';
 export { Popover } from './popover/index.mjs';
+export { Presence } from './presence/index.mjs';
 export { Pressable } from './pressable/index.mjs';
 export { RadioGroup } from './radio-group/index.mjs';
 export { RangeSlider } from './range-slider/index.mjs';
@@ -51,6 +54,22 @@ export { CheckboxControl } from './checkbox/checkbox-control.mjs';
 export { CheckboxLabel } from './checkbox/checkbox-label.mjs';
 export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';
 export { useCheckboxContext } from './checkbox/checkbox-context.mjs';
+export { ColorPickerArea } from './color-picker/color-picker-area.mjs';
+export { ColorPickerAreaGradient } from './color-picker/color-picker-area-gradient.mjs';
+export { ColorPickerAreaThumb } from './color-picker/color-picker-area-thumb.mjs';
+export { ColorPickerChannelInput } from './color-picker/color-picker-channel-input.mjs';
+export { ColorPickerChannelSliderBackground } from './color-picker/color-picker-channel-slider-background.mjs';
+export { ColorPickerChannelSliderThumb } from './color-picker/color-picker-channel-slider-thumb.mjs';
+export { ColorPickerChannelSliderTrack } from './color-picker/color-picker-channel-slider-track.mjs';
+export { ColorPickerContent } from './color-picker/color-picker-content.mjs';
+export { ColorPickerEyeDropperTrigger } from './color-picker/color-picker-eye-dropper-trigger.mjs';
+export { ColorPickerSwatch } from './color-picker/color-picker-swatch.mjs';
+export { ColorPickerSwatchBackground } from './color-picker/color-picker-swatch-background.mjs';
+export { ColorPickerSwatchGroup } from './color-picker/color-picker-swatch-group.mjs';
+export { colorPickerAnatomy } from './color-picker/color-picker.anatomy.mjs';
+export { useColorPickerAreaContext } from './color-picker/color-picker-area-context.mjs';
+export { useColorPickerContext } from './color-picker/color-picker-context.mjs';
+export { useColorPickerSwatchContext } from './color-picker/color-picker-swatch-context.mjs';
 export { ComboboxClearTrigger } from './combobox/combobox-clear-trigger.mjs';
 export { ComboboxContent } from './combobox/combobox-content.mjs';
 export { ComboboxControl } from './combobox/combobox-control.mjs';
@@ -162,6 +181,7 @@ export { PopoverTitle } from './popover/popover-title.mjs';
 export { PopoverTrigger } from './popover/popover-trigger.mjs';
 export { anatomy as popoverAnatomy } from '@zag-js/popover';
 export { usePopoverContext } from './popover/popover-context.mjs';
+export { splitPresenceProps } from './presence/split-presence-props.mjs';
 export { usePressable } from './pressable/use-pressable.mjs';
 export { Radio } from './radio-group/radio.mjs';
 export { RadioControl } from './radio-group/radio-control.mjs';

package/menu/menu-content.cjs

@@ -5,12 +5,23 @@ 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 index = require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const MenuContent = props => {
-  const menu = menuContext.useMenuContext();
-  const contentProps = solid.mergeProps(() => menu?.().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const api = menuContext.useMenuContext();
+  const mergedProps = solid.mergeProps(() => api?.().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api?.().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.MenuContent = MenuContent;

package/menu/menu-content.d.ts

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

package/menu/menu-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const MenuContent = props => {
-  const menu = useMenuContext();
-  const contentProps = mergeProps(() => menu?.().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const api = useMenuContext();
+  const mergedProps = mergeProps(() => api?.().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api?.().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { MenuContent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -19,6 +19,7 @@
     "pagination",
     "pin input",
     "popover",
+    "presence",
     "pressable",
     "radio group",
     "range slider",
@@ -75,6 +76,7 @@
     "@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",
@@ -99,12 +101,12 @@
     "@storybook/blocks": "7.4.0",
     "@storybook/testing-library": "0.2.0",
     "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "6.1.2",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.2",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.5.0",
-    "@typescript-eslint/parser": "6.5.0",
+    "@typescript-eslint/eslint-plugin": "6.6.0",
+    "@typescript-eslint/parser": "6.6.0",
     "@vitest/coverage-v8": "0.34.3",
     "eslint": "8.48.0",
     "globby": "13.2.2",
@@ -217,6 +219,11 @@
       "import": "./popover/index.mjs",
       "require": "./popover/index.cjs"
     },
+    "./presence": {
+      "types": "./presence/index.d.ts",
+      "import": "./presence/index.mjs",
+      "require": "./presence/index.cjs"
+    },
     "./pressable": {
       "types": "./pressable/index.d.ts",
       "import": "./pressable/index.mjs",

package/popover/popover-content.cjs

@@ -5,12 +5,23 @@ 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 index = require('../presence/index.cjs');
 const popoverContext = require('./popover-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = popoverContext.usePopoverContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.PopoverContent = PopoverContent;

package/popover/popover-content.d.ts

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

package/popover/popover-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { usePopoverContext } from './popover-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const PopoverContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = usePopoverContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { PopoverContent };

package/presence/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const presence = require('./presence.cjs');
+const splitPresenceProps = require('./split-presence-props.cjs');
+
+const Presence = Object.assign(presence.Presence, {
+  Root: presence.Presence
+});
+
+exports.splitPresenceProps = splitPresenceProps.splitPresenceProps;
+exports.Presence = Presence;

package/presence/index.d.ts

@@ -0,0 +1,8 @@
+import { JSX } from 'solid-js';
+import { type PresenceProps } from './presence';
+import { splitPresenceProps } from './split-presence-props';
+declare const Presence: ((props: PresenceProps) => JSX.Element) & {
+    Root: (props: PresenceProps) => JSX.Element;
+};
+export { Presence, splitPresenceProps };
+export type { PresenceProps };

package/presence/index.mjs

@@ -0,0 +1,8 @@
+import { Presence as Presence$1 } from './presence.mjs';
+export { splitPresenceProps } from './split-presence-props.mjs';
+
+const Presence = Object.assign(Presence$1, {
+  Root: Presence$1
+});
+
+export { Presence };

package/presence/presence.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solidJs = require('solid-js');
+const createSplitProps = require('../create-split-props.cjs');
+const usePresence = require('./use-presence.cjs');
+
+const Presence = props => {
+  const [presenceProps, localProps] = createSplitProps.createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence.usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = solidJs.createSignal(false);
+  const getChildren = solidJs.children(() => props.children);
+  solidJs.createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      web.spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return web.memo((() => {
+    const _c$ = web.memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+exports.Presence = Presence;

package/presence/presence.d.ts

@@ -0,0 +1,17 @@
+import { JSX, type JSXElement } from 'solid-js';
+import { type UsePresenceProps } from './use-presence';
+export type PresenceProps = UsePresenceProps & {
+    /**
+     * Whether to enable lazy mounting. Defaults to `false`.
+     */
+    lazyMount?: boolean;
+    /**
+     * Whether to unmount on exit. Defaults to `false`.
+     */
+    unmountOnExit?: boolean;
+    /**
+     * The children to render.
+     */
+    children?: JSXElement;
+};
+export declare const Presence: (props: PresenceProps) => JSX.Element;

package/presence/presence.mjs

@@ -0,0 +1,29 @@
+import { spread, memo } from 'solid-js/web';
+import { createSignal, children, createEffect } from 'solid-js';
+import { createSplitProps } from '../create-split-props.mjs';
+import { usePresence } from './use-presence.mjs';
+
+const Presence = props => {
+  const [presenceProps, localProps] = createSplitProps()(props, ['onExitComplete', 'present']);
+  const api = usePresence(presenceProps);
+  const [wasEverPresent, setWasEverPresent] = createSignal(false);
+  const getChildren = children(() => props.children);
+  createEffect(() => {
+    const isPresent = api().isPresent;
+    if (isPresent) setWasEverPresent(true);
+    const children = getChildren();
+    if (children instanceof HTMLElement) {
+      api().setNode(children);
+      spread(children, {
+        ['data-state']: presenceProps.present ? 'open' : 'closed',
+        hidden: !api().isPresent
+      });
+    }
+  });
+  return memo((() => {
+    const _c$ = memo(() => !!(!api().isPresent && !wasEverPresent() && localProps.lazyMount || localProps.unmountOnExit && !api().isPresent && wasEverPresent()));
+    return () => _c$() ? null : getChildren();
+  })());
+};
+
+export { Presence };

package/presence/presence.stories.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+import { Presence } from './presence';
+type PresenceType = typeof Presence;
+declare const meta: Meta<PresenceType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const LazyMount: () => JSX.Element;
+export declare const UnmountOnExit: () => JSX.Element;
+export declare const LazyMountAndUnmountOnExit: () => JSX.Element;

package/presence/presence.test.d.ts

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

package/presence/split-presence-props.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createSplitProps = require('../create-split-props.cjs');
+
+function splitPresenceProps(props) {
+  return createSplitProps.createSplitProps()(props, [
+    "lazyMount",
+    "onExitComplete",
+    "present",
+    "unmountOnExit"
+  ]);
+}
+
+exports.splitPresenceProps = splitPresenceProps;

package/presence/split-presence-props.d.ts

@@ -0,0 +1,2 @@
+import type { PresenceProps } from './presence';
+export declare function splitPresenceProps<T>(props: T & Omit<PresenceProps, 'children'>): [Pick<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">, Omit<T & Omit<PresenceProps, "children">, "present" | "onExitComplete" | "lazyMount" | "unmountOnExit">];

package/presence/split-presence-props.mjs

@@ -0,0 +1,12 @@
+import { createSplitProps } from '../create-split-props.mjs';
+
+function splitPresenceProps(props) {
+  return createSplitProps()(props, [
+    "lazyMount",
+    "onExitComplete",
+    "present",
+    "unmountOnExit"
+  ]);
+}
+
+export { splitPresenceProps };

package/presence/use-presence.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const presence = require('@zag-js/presence');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+
+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 presence__namespace = /*#__PURE__*/_interopNamespaceDefault(presence);
+
+const usePresence = (props) => {
+  const [state, send] = solid.useMachine(presence__namespace.machine(props), {
+    context: props
+  });
+  return solidJs.createMemo(() => presence__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.usePresence = usePresence;

package/presence/use-presence.d.ts

@@ -0,0 +1,5 @@
+import { Accessor } from 'solid-js';
+import * as presence from '@zag-js/presence';
+import type { Optional } from '../types';
+export type UsePresenceProps = Optional<presence.Context, 'present'>;
+export declare const usePresence: (props: UsePresenceProps) => Accessor<presence.Api>;

package/presence/use-presence.mjs

@@ -0,0 +1,12 @@
+import * as presence from '@zag-js/presence';
+import { useMachine, normalizeProps } from '@zag-js/solid';
+import { createMemo } from 'solid-js';
+
+const usePresence = (props) => {
+  const [state, send] = useMachine(presence.machine(props), {
+    context: props
+  });
+  return createMemo(() => presence.connect(state, send, normalizeProps));
+};
+
+export { usePresence };

package/select/select-content.cjs

@@ -5,12 +5,23 @@ 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 index = require('../presence/index.cjs');
 const selectContext = require('./select-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
   const api = selectContext.useSelectContext();
-  const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.div, contentProps);
+  const mergedProps = solid.mergeProps(() => api().contentProps, localProps);
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  }));
 };
 
 exports.SelectContent = SelectContent;

package/select/select-content.d.ts

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

package/select/select-content.mjs

@@ -1,12 +1,23 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useSelectContext } from './select-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const SelectContent = props => {
+  const [presenceProps, localProps] = splitPresenceProps(props);
   const api = useSelectContext();
-  const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.div, contentProps);
+  const mergedProps = mergeProps(() => api().contentProps, localProps);
+  return createComponent(Presence, mergeProps$1({
+    get present() {
+      return api().isOpen;
+    }
+  }, presenceProps, {
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  }));
 };
 
 export { SelectContent };

package/tabs/tab-content.cjs

@@ -6,13 +6,21 @@ const web = require('solid-js/web');
 const solid = require('@zag-js/solid');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
+const tabPresence = require('./tab-presence.cjs');
 const tabsContext = require('./tabs-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const TabContent = props => {
-  const [tabParams, restProps] = createSplitProps.createSplitProps()(props, ['value']);
+  const [presenceProps, localProps] = splitPresenceProps.splitPresenceProps(props);
+  const [getContentProps, restProps] = createSplitProps.createSplitProps()(localProps, ['value']);
   const api = tabsContext.useTabsContext();
-  const contentProps = solid.mergeProps(() => api().getContentProps(tabParams), restProps);
-  return web.createComponent(factory.ark.div, contentProps);
+  const contentProps = solid.mergeProps(() => api().getContentProps(getContentProps), restProps);
+  return web.createComponent(tabPresence.TabPresence, web.mergeProps(presenceProps, getContentProps, {
+    get children() {
+      return web.createComponent(factory.ark.div, contentProps);
+    }
+  }));
 };
 
 exports.TabContent = TabContent;

package/tabs/tab-content.d.ts

@@ -1,8 +1,7 @@
 import { JSX } from 'solid-js';
-import { type connect } from '@zag-js/tabs';
+import { type ContentProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-type TabContentParams = Parameters<ReturnType<typeof connect>['getContentProps']>[0];
-export type TabContentProps = Assign<HTMLArkProps<'div'>, TabContentParams>;
+import { type TabPresenceProps } from './tab-presence';
+export type TabContentProps = Assign<HTMLArkProps<'div'>, ContentProps> & TabPresenceProps;
 export declare const TabContent: (props: TabContentProps) => JSX.Element;
-export {};

package/tabs/tab-content.mjs

@@ -1,14 +1,22 @@
-import { createComponent } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
+import { TabPresence } from './tab-presence.mjs';
 import { useTabsContext } from './tabs-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const TabContent = props => {
-  const [tabParams, restProps] = createSplitProps()(props, ['value']);
+  const [presenceProps, localProps] = splitPresenceProps(props);
+  const [getContentProps, restProps] = createSplitProps()(localProps, ['value']);
   const api = useTabsContext();
-  const contentProps = mergeProps(() => api().getContentProps(tabParams), restProps);
-  return createComponent(ark.div, contentProps);
+  const contentProps = mergeProps(() => api().getContentProps(getContentProps), restProps);
+  return createComponent(TabPresence, mergeProps$1(presenceProps, getContentProps, {
+    get children() {
+      return createComponent(ark.div, contentProps);
+    }
+  }));
 };
 
 export { TabContent };

package/tabs/tab-presence.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const index = require('../presence/index.cjs');
+const tabsContext = require('./tabs-context.cjs');
+
+const TabPresence = props => {
+  const api = tabsContext.useTabsContext();
+  return web.createComponent(index.Presence, web.mergeProps({
+    get present() {
+      return api().value === props.value;
+    }
+  }, props));
+};
+
+exports.TabPresence = TabPresence;

package/tabs/tab-presence.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { ContentProps } from '@zag-js/tabs';
+import { type PresenceProps } from '../presence';
+export type TabPresenceProps = PresenceProps & ContentProps;
+export declare const TabPresence: (props: TabPresenceProps) => JSX.Element;

package/tabs/tab-presence.mjs

@@ -0,0 +1,14 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { Presence } from '../presence/index.mjs';
+import { useTabsContext } from './tabs-context.mjs';
+
+const TabPresence = props => {
+  const api = useTabsContext();
+  return createComponent(Presence, mergeProps({
+    get present() {
+      return api().value === props.value;
+    }
+  }, props));
+};
+
+export { TabPresence };

package/tabs/tabs.test.d.ts

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

package/tags-input/index.d.ts

@@ -1,4 +1,4 @@
-import { HTMLArkProps } from '../factory';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
 import { JSX } from 'solid-js';
 import { Tag, type TagProps } from './tag';