@ark-ui/solid 0.6.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/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -15,6 +15,7 @@
 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)
@@ -32,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/{dist/index.cjs → index.cjs}

@@ -8,6 +8,10 @@ const accordionContent = require('./accordion/accordion-content.cjs');
 const accordionItem = require('./accordion/accordion-item.cjs');
 const accordionTrigger = require('./accordion/accordion-trigger.cjs');
 const accordion$1 = require('@zag-js/accordion');
+const avatar = require('./avatar/avatar.cjs');
+const avatarFallback = require('./avatar/avatar-fallback.cjs');
+const avatarImage = require('./avatar/avatar-image.cjs');
+const avatar$1 = require('@zag-js/avatar');
 const carousel = require('./carousel/carousel.cjs');
 const carouselControl = require('./carousel/carousel-control.cjs');
 const carouselNextSlideTrigger = require('./carousel/carousel-next-slide-trigger.cjs');
@@ -151,6 +155,14 @@ const ratingGroup = require('./rating-group/rating-group.cjs');
 const ratingGroupControl = require('./rating-group/rating-group-control.cjs');
 const ratingGroupLabel = require('./rating-group/rating-group-label.cjs');
 const rating$1 = require('@zag-js/rating-group');
+const segment = require('./segment-group/segment.cjs');
+const segmentControl = require('./segment-group/segment-control.cjs');
+const segmentGroup = require('./segment-group/segment-group.cjs');
+const segmentGroupLabel = require('./segment-group/segment-group-label.cjs');
+const segmentGroup_anatomy = require('./segment-group/segment-group.anatomy.cjs');
+const segmentIndicator = require('./segment-group/segment-indicator.cjs');
+const segmentInput = require('./segment-group/segment-input.cjs');
+const segmentLabel = require('./segment-group/segment-label.cjs');
 const select = require('./select/select.cjs');
 const selectContent = require('./select/select-content.cjs');
 const selectLabel = require('./select/select-label.cjs');
@@ -225,6 +237,13 @@ Object.defineProperty(exports, 'accordionAnatomy', {
 	enumerable: true,
 	get: () => accordion$1.anatomy
 });
+exports.Avatar = avatar.Avatar;
+exports.AvatarFallback = avatarFallback.AvatarFallback;
+exports.AvatarImage = avatarImage.AvatarImage;
+Object.defineProperty(exports, 'avatarAnatomy', {
+	enumerable: true,
+	get: () => avatar$1.anatomy
+});
 exports.Carousel = carousel.Carousel;
 exports.CarouselControl = carouselControl.CarouselControl;
 exports.CarouselNextSlideTrigger = carouselNextSlideTrigger.CarouselNextSlideTrigger;
@@ -404,6 +423,14 @@ Object.defineProperty(exports, 'ratingGroupAnatomy', {
 	enumerable: true,
 	get: () => rating$1.anatomy
 });
+exports.Segment = segment.Segment;
+exports.SegmentControl = segmentControl.SegmentControl;
+exports.SegmentGroup = segmentGroup.SegmentGroup;
+exports.SegmentGroupLabel = segmentGroupLabel.SegmentGroupLabel;
+exports.segmentGroupAnatomy = segmentGroup_anatomy.segmentGroupAnatomy;
+exports.SegmentIndicator = segmentIndicator.SegmentIndicator;
+exports.SegmentInput = segmentInput.SegmentInput;
+exports.SegmentLabel = segmentLabel.SegmentLabel;
 exports.Select = select.Select;
 exports.SelectContent = selectContent.SelectContent;
 exports.SelectLabel = selectLabel.SelectLabel;

package/{dist/index.d.ts → index.d.ts}

@@ -1,5 +1,6 @@
 export { createAnatomy } from '@zag-js/anatomy';
 export * from './accordion';
+export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
 export * from './combobox';
@@ -17,6 +18,7 @@ export * from './pressable';
 export * from './radio-group';
 export * from './range-slider';
 export * from './rating-group';
+export * from './segment-group';
 export * from './select';
 export * from './slider';
 export * from './splitter';

package/{dist/index.mjs → index.mjs}

@@ -4,6 +4,10 @@ export { AccordionContent } from './accordion/accordion-content.mjs';
 export { AccordionItem } from './accordion/accordion-item.mjs';
 export { AccordionTrigger } from './accordion/accordion-trigger.mjs';
 export { anatomy as accordionAnatomy } from '@zag-js/accordion';
+export { Avatar } from './avatar/avatar.mjs';
+export { AvatarFallback } from './avatar/avatar-fallback.mjs';
+export { AvatarImage } from './avatar/avatar-image.mjs';
+export { anatomy as avatarAnatomy } from '@zag-js/avatar';
 export { Carousel } from './carousel/carousel.mjs';
 export { CarouselControl } from './carousel/carousel-control.mjs';
 export { CarouselNextSlideTrigger } from './carousel/carousel-next-slide-trigger.mjs';
@@ -147,6 +151,14 @@ export { RatingGroup } from './rating-group/rating-group.mjs';
 export { RatingGroupControl } from './rating-group/rating-group-control.mjs';
 export { RatingGroupLabel } from './rating-group/rating-group-label.mjs';
 export { anatomy as ratingGroupAnatomy } from '@zag-js/rating-group';
+export { Segment } from './segment-group/segment.mjs';
+export { SegmentControl } from './segment-group/segment-control.mjs';
+export { SegmentGroup } from './segment-group/segment-group.mjs';
+export { SegmentGroupLabel } from './segment-group/segment-group-label.mjs';
+export { segmentGroupAnatomy } from './segment-group/segment-group.anatomy.mjs';
+export { SegmentIndicator } from './segment-group/segment-indicator.mjs';
+export { SegmentInput } from './segment-group/segment-input.mjs';
+export { SegmentLabel } from './segment-group/segment-label.mjs';
 export { Select } from './select/select.mjs';
 export { SelectContent } from './select/select-content.mjs';
 export { SelectLabel } from './select/select-label.mjs';