@ark-ui/solid 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -0,0 +1,98 @@
+---
+id: changelog
+name: Changelog
+description: All notable changes to this project will be documented in this file. The format is based on Keep a Changelog and this project adheres to and this project adheres to Semantic Versioning.
+---
+
+## [Unreleased]
+
+## [0.7.0] - 2023-06-27
+
+### Added
+
+- Added `Avatar`
+- Added `SegmentGroup`
+- Support for standalone component imports: Developers can now import individual components, such as `@ark-ui/solid/tabs` instead of the full `@ark-ui/solid` package. This is a significant feature for those working with bundlers that do not support tree-shaking. By allowing imports of individual components, we ensure a reduced bundle size when the full package import is not necessary.
+
+## [0.6.0] - 2023-06-03
+
+### Added
+
+- Added `DatePicker` component
+- Introduced the `onLongPress` property to `Pressable`
+
+### Changed
+
+- Exposed direct access to the `Splitter` component's internal API, enabling more control over the component's state.
+- Updated all `@zag-js` dependencies to their latest versions
+
+## [0.5.0] - 2023-05-25
+
+### Removed
+
+- Removed `AccordionIcon`
+
+## [0.4.0] - 2023-05-23
+
+### Added
+
+- Add `Switch`
+
+### Changed
+
+- Update `Checkbox`. Control `indeterminate` state in `checked` prop
+
+## [0.3.0] - 2023-05-11
+
+### Added
+
+- Add support for `asChild`
+
+## [0.2.0] - 2023-04-29
+
+### Added
+
+- Add `ColorPicker`
+
+### Fixed
+
+- Add missing exports for `RangeSlider`, `Splitter` and `Toast`
+
+## [0.1.0] - 2023-04-17
+
+### Added
+
+- Add `Accordion`
+- Add `Carousel`
+- Add `Checkbox`
+- Add `Combobox`
+- Add `DatePicker`
+- Add `Dialog`
+- Add `Editable`
+- Add `HoverCard`
+- Add `Menu`
+- Add `NumberInput`
+- Add `Pagination`
+- Add `PinInput`
+- Add `Popover`
+- Add `Pressable`
+- Add `RadioGroup`
+- Add `RangeSlider`
+- Add `RatingGroup`
+- Add `Select`
+- Add `Slider`
+- Add `Splitter`
+- Add `Tabs`
+- Add `TagsInput`
+- Add `Toast`
+- Add `Tooltip`
+
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.7.0...HEAD
+[0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.1.0
+[0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.2.0
+[0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.3.0
+[0.4.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.4.0
+[0.5.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.5.0
+[0.6.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.6.0
+
+[0.7.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.0

package/README.md

@@ -15,10 +15,12 @@
 At the moment, `@ark-ui/solid`offers the following components:
 
 - [Accordion](https://ark-ui.com/docs/solid/components/accordion)
+- [Avatar](https://ark-ui.com/docs/solid/components/avatar)
 - [Carousel](https://ark-ui.com/docs/solid/components/carousel)
 - [Checkbox](https://ark-ui.com/docs/solid/components/checkbox)
 - [Color Picker](https://ark-ui.com/docs/solid/components/color-picker)
 - [Combobox](https://ark-ui.com/docs/solid/components/combobox)
+- [Date Picker](https://ark-ui.com/docs/solid/components/date-picker)
 - [Dialog](https://ark-ui.com/docs/solid/components/dialog)
 - [Editable](https://ark-ui.com/docs/solid/components/editable)
 - [Hover Card](https://ark-ui.com/docs/solid/components/hover-card)
@@ -31,6 +33,7 @@ At the moment, `@ark-ui/solid`offers the following components:
 - [Radio Group](https://ark-ui.com/docs/solid/components/radio-group)
 - [Range Slider](https://ark-ui.com/docs/solid/components/range-slider)
 - [Rating Group](https://ark-ui.com/docs/solid/components/rating-group)
+- [Segment Group](https://ark-ui.com/docs/solid/components/segment-group)
 - [Select](https://ark-ui.com/docs/solid/components/select)
 - [Slider](https://ark-ui.com/docs/solid/components/slider)
 - [Splitter](https://ark-ui.com/docs/solid/components/splitter)

package/avatar/avatar-context.cjs

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

package/avatar/avatar-context.d.ts

@@ -0,0 +1,23 @@
+import type { Accessor, JSX } from 'solid-js';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type UseAvatarReturn } from './use-avatar';
+export type AvatarContext = UseAvatarReturn;
+export declare const AvatarProvider: ContextProviderComponent<Accessor<{
+    isLoaded: boolean;
+    showFallback: boolean;
+    setSrc(src: string): void;
+    setLoaded(): void;
+    setError(): void;
+    rootProps: JSX.HTMLAttributes<any>;
+    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
+    fallbackProps: JSX.HTMLAttributes<any>;
+}>>, useAvatarContext: () => Accessor<{
+    isLoaded: boolean;
+    showFallback: boolean;
+    setSrc(src: string): void;
+    setLoaded(): void;
+    setError(): void;
+    rootProps: JSX.HTMLAttributes<any>;
+    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
+    fallbackProps: JSX.HTMLAttributes<any>;
+}>;

package/avatar/avatar-context.mjs

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

package/avatar/avatar-fallback.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 avatarContext = require('./avatar-context.cjs');
+
+const AvatarFallback = props => {
+  const avatar = avatarContext.useAvatarContext();
+  const fallbackProps = solid.mergeProps(() => avatar().fallbackProps, props);
+  return web.createComponent(factory.ark.span, fallbackProps);
+};
+
+exports.AvatarFallback = AvatarFallback;

package/avatar/avatar-fallback.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type AvatarFallbackProps = HTMLArkProps<'span'>;
+export declare const AvatarFallback: (props: AvatarFallbackProps) => JSX.Element;

package/avatar/avatar-fallback.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useAvatarContext } from './avatar-context.mjs';
+
+const AvatarFallback = props => {
+  const avatar = useAvatarContext();
+  const fallbackProps = mergeProps(() => avatar().fallbackProps, props);
+  return createComponent(ark.span, fallbackProps);
+};
+
+export { AvatarFallback };

package/avatar/avatar-image.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 avatarContext = require('./avatar-context.cjs');
+
+const AvatarImage = props => {
+  const avatar = avatarContext.useAvatarContext();
+  const imageProps = solid.mergeProps(() => avatar().imageProps, props);
+  return web.createComponent(factory.ark.img, imageProps);
+};
+
+exports.AvatarImage = AvatarImage;

package/avatar/avatar-image.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type AvatarImageProps = HTMLArkProps<'img'>;
+export declare const AvatarImage: (props: AvatarImageProps) => JSX.Element;

package/avatar/avatar-image.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useAvatarContext } from './avatar-context.mjs';
+
+const AvatarImage = props => {
+  const avatar = useAvatarContext();
+  const imageProps = mergeProps(() => avatar().imageProps, props);
+  return createComponent(ark.img, imageProps);
+};
+
+export { AvatarImage };

package/avatar/avatar.anatomy.d.ts

@@ -0,0 +1 @@
+export { anatomy as avatarAnatomy } from '@zag-js/avatar';

package/avatar/avatar.cjs

@@ -0,0 +1,24 @@
+'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 avatarContext = require('./avatar-context.cjs');
+const useAvatar = require('./use-avatar.cjs');
+
+const Avatar = props => {
+  const [params, localProps] = createSplitProps.createSplitProps()(props, ['getRootNode', 'id', 'onError', 'onLoad']);
+  const api = useAvatar.useAvatar(params);
+  const rootProps = solid.mergeProps(() => api().rootProps, localProps);
+  return web.createComponent(avatarContext.AvatarProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(factory.ark.div, rootProps);
+    }
+  });
+};
+
+exports.Avatar = Avatar;

package/avatar/avatar.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseAvatarProps } from './use-avatar';
+export type AvatarProps = Assign<HTMLArkProps<'div'>, UseAvatarProps>;
+export declare const Avatar: (props: AvatarProps) => JSX.Element;

package/avatar/avatar.mjs

@@ -0,0 +1,20 @@
+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 { AvatarProvider } from './avatar-context.mjs';
+import { useAvatar } from './use-avatar.mjs';
+
+const Avatar = props => {
+  const [params, localProps] = createSplitProps()(props, ['getRootNode', 'id', 'onError', 'onLoad']);
+  const api = useAvatar(params);
+  const rootProps = mergeProps(() => api().rootProps, localProps);
+  return createComponent(AvatarProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, rootProps);
+    }
+  });
+};
+
+export { Avatar };

package/avatar/index.d.ts

@@ -0,0 +1,4 @@
+export { Avatar, type AvatarProps } from './avatar';
+export { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
+export { AvatarImage, type AvatarImageProps } from './avatar-image';
+export { avatarAnatomy } from './avatar.anatomy';

package/avatar/use-avatar.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const avatar = require('@zag-js/avatar');
+const solid = require('@zag-js/solid');
+const solidJs = require('solid-js');
+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 avatar__namespace = /*#__PURE__*/_interopNamespaceDefault(avatar);
+
+const useAvatar = (props) => {
+  const getRootNode = environmentContext.useEnvironmentContext();
+  const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
+  const [state, send] = solid.useMachine(avatar__namespace.machine(context), { context });
+  return solidJs.createMemo(() => avatar__namespace.connect(state, send, solid.normalizeProps));
+};
+
+exports.useAvatar = useAvatar;

package/avatar/use-avatar.d.ts

@@ -0,0 +1,15 @@
+import type { Accessor, JSX } from 'solid-js';
+import * as avatar from '@zag-js/avatar';
+import { type Optional } from '../types';
+export type UseAvatarProps = Optional<avatar.Context, 'id'>;
+export type UseAvatarReturn = ReturnType<typeof useAvatar>;
+export declare const useAvatar: (props: UseAvatarProps) => Accessor<{
+    isLoaded: boolean;
+    showFallback: boolean;
+    setSrc(src: string): void;
+    setLoaded(): void;
+    setError(): void;
+    rootProps: JSX.HTMLAttributes<any>;
+    imageProps: JSX.ImgHTMLAttributes<HTMLImageElement>;
+    fallbackProps: JSX.HTMLAttributes<any>;
+}>;

package/avatar/use-avatar.mjs

@@ -0,0 +1,13 @@
+import * as avatar from '@zag-js/avatar';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
+import { createUniqueId, createMemo } from 'solid-js';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
+
+const useAvatar = (props) => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+  const [state, send] = useMachine(avatar.machine(context), { context });
+  return createMemo(() => avatar.connect(state, send, normalizeProps));
+};
+
+export { useAvatar };

package/date-picker/date-picker-cell-context.cjs

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

package/date-picker/date-picker-cell-context.d.ts

@@ -0,0 +1,3 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import type { CellProps } from '@zag-js/date-picker';
+export declare const DatePickerCellProvider: ContextProviderComponent<CellProps>, useDatePickerCellContext: () => CellProps;

package/date-picker/date-picker-cell-context.mjs

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

package/date-picker/date-picker-clear-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 datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerClearTrigger = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const triggerProps = solid.mergeProps(() => datePicker().clearTriggerProps, props);
+  return web.createComponent(factory.ark.button, triggerProps);
+};
+
+exports.DatePickerClearTrigger = DatePickerClearTrigger;

package/date-picker/date-picker-clear-trigger.d.ts

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

package/date-picker/date-picker-clear-trigger.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerClearTrigger = props => {
+  const datePicker = useDatePickerContext();
+  const triggerProps = mergeProps(() => datePicker().clearTriggerProps, props);
+  return createComponent(ark.button, triggerProps);
+};
+
+export { DatePickerClearTrigger };

package/date-picker/date-picker-column-header.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const factory = require('../factory.cjs');
+const datePicker_anatomy = require('./date-picker.anatomy.cjs');
+
+const DatePickerColumnHeader = props => web.createComponent(factory.ark.div, web.mergeProps({
+  role: "columnheader"
+}, () => datePicker_anatomy.parts.columnHeader.attrs, props));
+
+exports.DatePickerColumnHeader = DatePickerColumnHeader;

package/date-picker/date-picker-column-header.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerColumnHeaderProps = HTMLArkProps<'div'>;
+export declare const DatePickerColumnHeader: (props: DatePickerColumnHeaderProps) => JSX.Element;

package/date-picker/date-picker-column-header.mjs

@@ -0,0 +1,9 @@
+import { createComponent, mergeProps } from 'solid-js/web';
+import { ark } from '../factory.mjs';
+import { parts } from './date-picker.anatomy.mjs';
+
+const DatePickerColumnHeader = props => createComponent(ark.div, mergeProps({
+  role: "columnheader"
+}, () => parts.columnHeader.attrs, props));
+
+export { DatePickerColumnHeader };

package/date-picker/date-picker-content.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 datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerContent = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().contentProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.DatePickerContent = DatePickerContent;

package/date-picker/date-picker-content.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerContentProps = HTMLArkProps<'div'>;
+export declare const DatePickerContent: (props: DatePickerContentProps) => JSX.Element;

package/date-picker/date-picker-content.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerContent = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().contentProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { DatePickerContent };

package/date-picker/date-picker-context.cjs

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

package/date-picker/date-picker-context.mjs

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

package/date-picker/date-picker-control.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 datePickerContext = require('./date-picker-context.cjs');
+
+const DatePickerControl = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const mergedProps = solid.mergeProps(() => datePicker().controlProps, props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.DatePickerControl = DatePickerControl;

package/date-picker/date-picker-control.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type DatePickerControlProps = HTMLArkProps<'div'>;
+export declare const DatePickerControl: (props: DatePickerControlProps) => JSX.Element;

package/date-picker/date-picker-control.mjs

@@ -0,0 +1,12 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+
+const DatePickerControl = props => {
+  const datePicker = useDatePickerContext();
+  const mergedProps = mergeProps(() => datePicker().controlProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { DatePickerControl };

package/date-picker/date-picker-day-cell-context.cjs

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

package/date-picker/date-picker-day-cell-context.d.ts

@@ -0,0 +1,3 @@
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import type { DayCellProps } from '@zag-js/date-picker';
+export declare const DatePickerDayCellProvider: ContextProviderComponent<DayCellProps>, useDatePickerDayCellContext: () => DayCellProps;

package/date-picker/date-picker-day-cell-context.mjs

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

package/date-picker/date-picker-day-cell-trigger.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 factory = require('../factory.cjs');
+const datePickerContext = require('./date-picker-context.cjs');
+const datePickerDayCellContext = require('./date-picker-day-cell-context.cjs');
+
+const DatePickerDayCellTrigger = props => {
+  const datePicker = datePickerContext.useDatePickerContext();
+  const cellProps = datePickerDayCellContext.useDatePickerDayCellContext();
+  const mergedProps = solid.mergeProps(() => datePicker().getDayCellTriggerProps(cellProps), props);
+  return web.createComponent(factory.ark.button, mergedProps);
+};
+
+exports.DatePickerDayCellTrigger = DatePickerDayCellTrigger;

package/date-picker/date-picker-day-cell-trigger.d.ts

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

package/date-picker/date-picker-day-cell-trigger.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useDatePickerContext } from './date-picker-context.mjs';
+import { useDatePickerDayCellContext } from './date-picker-day-cell-context.mjs';
+
+const DatePickerDayCellTrigger = props => {
+  const datePicker = useDatePickerContext();
+  const cellProps = useDatePickerDayCellContext();
+  const mergedProps = mergeProps(() => datePicker().getDayCellTriggerProps(cellProps), props);
+  return createComponent(ark.button, mergedProps);
+};
+
+export { DatePickerDayCellTrigger };