@ark-ui/solid 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -6,43 +6,22 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
-## [0.8.0] - 2023-07-06
-
-- Add support for `SSR`
-
-## [0.7.2-beta.5] - 2023-07-05
-
-### Added
-
-- WIP
-
-## [0.7.2-beta.4] - 2023-07-05
-
-### Added
-
-- Generate `ssr`
-
-## [0.7.2-beta.3] - 2023-07-05
-
-### Added
-
-- Set `type` to `module`
-
-## [0.7.2-beta.2] - 2023-07-05
+## [0.8.1] - 2023-07-10
 
 ### Fixed
 
-- Declare no external
+- Resolved an issue whre the `Toast` component would not render custom content.
+- Fixed an issue where standalone imports were not working as expected.
 
-## [0.7.2-beta.1] - 2023-07-05
+## [0.8.0] - 2023-07-06
 
-- Updated @zag-js dependencies to their latest versions
+### Added
 
-## [0.7.2-beta.0] - 2023-07-03
+- Added support for `SSR`
 
 ### Fixed
 
-- Fixed an issue with SSR
+- Resolved an issue where the `SegmentGroup` component would not animate on the first click.
 
 ## [0.7.1] - 2023-06-30
 
@@ -131,7 +110,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.8.0...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.8.1...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
@@ -140,11 +119,6 @@ description: All notable changes to this project will be documented in this file
 [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
 [0.7.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.1
-[0.7.2-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.0
-[0.7.2-beta.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.1
-[0.7.2-beta.2]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.2
-[0.7.2-beta.3]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.3
-[0.7.2-beta.4]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.4
-[0.7.2-beta.5]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.5
-
 [0.8.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.0
+
+[0.8.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.8.1

package/accordion/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const accordion = require('./accordion.cjs');
+const accordionContent = require('./accordion-content.cjs');
+const accordionItem = require('./accordion-item.cjs');
+const accordionTrigger = require('./accordion-trigger.cjs');
+const accordion$1 = require('@zag-js/accordion');
+
+
+
+exports.Accordion = accordion.Accordion;
+exports.AccordionContent = accordionContent.AccordionContent;
+exports.AccordionItem = accordionItem.AccordionItem;
+exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
+Object.defineProperty(exports, 'accordionAnatomy', {
+	enumerable: true,
+	get: () => accordion$1.anatomy
+});

package/accordion/index.mjs

@@ -0,0 +1,5 @@
+export { Accordion } from './accordion.mjs';
+export { AccordionContent } from './accordion-content.mjs';
+export { AccordionItem } from './accordion-item.mjs';
+export { AccordionTrigger } from './accordion-trigger.mjs';
+export { anatomy as accordionAnatomy } from '@zag-js/accordion';

package/avatar/index.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const avatar = require('./avatar.cjs');
+const avatarFallback = require('./avatar-fallback.cjs');
+const avatarImage = require('./avatar-image.cjs');
+const avatar$1 = require('@zag-js/avatar');
+
+
+
+exports.Avatar = avatar.Avatar;
+exports.AvatarFallback = avatarFallback.AvatarFallback;
+exports.AvatarImage = avatarImage.AvatarImage;
+Object.defineProperty(exports, 'avatarAnatomy', {
+	enumerable: true,
+	get: () => avatar$1.anatomy
+});

package/avatar/index.mjs

@@ -0,0 +1,4 @@
+export { Avatar } from './avatar.mjs';
+export { AvatarFallback } from './avatar-fallback.mjs';
+export { AvatarImage } from './avatar-image.mjs';
+export { anatomy as avatarAnatomy } from '@zag-js/avatar';

package/carousel/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const carousel = require('./carousel.cjs');
+const carouselControl = require('./carousel-control.cjs');
+const carouselNextSlideTrigger = require('./carousel-next-slide-trigger.cjs');
+const carouselPrevSlideTrigger = require('./carousel-prev-slide-trigger.cjs');
+const carouselSlide = require('./carousel-slide.cjs');
+const carouselSlideGroup = require('./carousel-slide-group.cjs');
+const carouselViewport = require('./carousel-viewport.cjs');
+const carousel_anatomy = require('./carousel.anatomy.cjs');
+
+
+
+exports.Carousel = carousel.Carousel;
+exports.CarouselControl = carouselControl.CarouselControl;
+exports.CarouselNextSlideTrigger = carouselNextSlideTrigger.CarouselNextSlideTrigger;
+exports.CarouselPrevSlideTrigger = carouselPrevSlideTrigger.CarouselPrevSlideTrigger;
+exports.CarouselSlide = carouselSlide.CarouselSlide;
+exports.CarouselSlideGroup = carouselSlideGroup.CarouselSlideGroup;
+exports.CarouselViewport = carouselViewport.CarouselViewport;
+exports.carouselAnatomy = carousel_anatomy.carouselAnatomy;

package/carousel/index.mjs

@@ -0,0 +1,8 @@
+export { Carousel } from './carousel.mjs';
+export { CarouselControl } from './carousel-control.mjs';
+export { CarouselNextSlideTrigger } from './carousel-next-slide-trigger.mjs';
+export { CarouselPrevSlideTrigger } from './carousel-prev-slide-trigger.mjs';
+export { CarouselSlide } from './carousel-slide.mjs';
+export { CarouselSlideGroup } from './carousel-slide-group.mjs';
+export { CarouselViewport } from './carousel-viewport.mjs';
+export { carouselAnatomy } from './carousel.anatomy.mjs';

package/checkbox/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const checkbox = require('./checkbox.cjs');
+const checkboxControl = require('./checkbox-control.cjs');
+const checkboxInput = require('./checkbox-input.cjs');
+const checkboxLabel = require('./checkbox-label.cjs');
+const checkbox$1 = require('@zag-js/checkbox');
+
+
+
+exports.Checkbox = checkbox.Checkbox;
+exports.CheckboxControl = checkboxControl.CheckboxControl;
+exports.CheckboxInput = checkboxInput.CheckboxInput;
+exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
+Object.defineProperty(exports, 'checkboxAnatomy', {
+	enumerable: true,
+	get: () => checkbox$1.anatomy
+});

package/checkbox/index.mjs

@@ -0,0 +1,5 @@
+export { Checkbox } from './checkbox.mjs';
+export { CheckboxControl } from './checkbox-control.mjs';
+export { CheckboxInput } from './checkbox-input.mjs';
+export { CheckboxLabel } from './checkbox-label.mjs';
+export { anatomy as checkboxAnatomy } from '@zag-js/checkbox';

package/color-picker/color-picker-area-context.cjs

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

package/color-picker/color-picker-area-context.d.ts

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

package/color-picker/color-picker-area-context.mjs

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

package/color-picker/color-picker-area-gradient.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 colorPickerAreaContext = require('./color-picker-area-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerAreaGradient = props => {
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const area = colorPickerAreaContext.useColorPickerAreaContext();
+  const areaGradientProps = solid.mergeProps(() => colorPicker().getAreaGradientProps(area), props);
+  return web.createComponent(factory.ark.div, areaGradientProps);
+};
+
+exports.ColorPickerAreaGradient = ColorPickerAreaGradient;

package/color-picker/color-picker-area-gradient.d.ts

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

package/color-picker/color-picker-area-gradient.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerAreaGradient = props => {
+  const colorPicker = useColorPickerContext();
+  const area = useColorPickerAreaContext();
+  const areaGradientProps = mergeProps(() => colorPicker().getAreaGradientProps(area), props);
+  return createComponent(ark.div, areaGradientProps);
+};
+
+export { ColorPickerAreaGradient };

package/color-picker/color-picker-area-thumb.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 colorPickerAreaContext = require('./color-picker-area-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerAreaThumb = props => {
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const area = colorPickerAreaContext.useColorPickerAreaContext();
+  const areaThumbProps = solid.mergeProps(() => colorPicker().getAreaThumbProps(area), props);
+  return web.createComponent(factory.ark.div, areaThumbProps);
+};
+
+exports.ColorPickerAreaThumb = ColorPickerAreaThumb;

package/color-picker/color-picker-area-thumb.d.ts

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

package/color-picker/color-picker-area-thumb.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerAreaContext } from './color-picker-area-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerAreaThumb = props => {
+  const colorPicker = useColorPickerContext();
+  const area = useColorPickerAreaContext();
+  const areaThumbProps = mergeProps(() => colorPicker().getAreaThumbProps(area), props);
+  return createComponent(ark.div, areaThumbProps);
+};
+
+export { ColorPickerAreaThumb };

package/color-picker/color-picker-area.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 colorPickerAreaContext = require('./color-picker-area-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerArea = props => {
+  const [colorAreaProps, restProps] = createSplitProps.createSplitProps()(props, ['xChannel', 'yChannel']);
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const areaProps = solid.mergeProps(() => colorPicker().getAreaProps(colorAreaProps), restProps);
+  return web.createComponent(colorPickerAreaContext.ColorPickerAreaProvider, {
+    value: colorAreaProps,
+    get children() {
+      return web.createComponent(factory.ark.div, areaProps);
+    }
+  });
+};
+
+exports.ColorPickerArea = ColorPickerArea;

package/color-picker/color-picker-area.d.ts

@@ -0,0 +1,5 @@
+import type { JSX } from 'solid-js';
+import type { ColorAreaProps } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+export type ColorPickerAreaProps = HTMLArkProps<'div'> & ColorAreaProps;
+export declare const ColorPickerArea: (props: ColorPickerAreaProps) => JSX.Element;

package/color-picker/color-picker-area.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 { ColorPickerAreaProvider } from './color-picker-area-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerArea = props => {
+  const [colorAreaProps, restProps] = createSplitProps()(props, ['xChannel', 'yChannel']);
+  const colorPicker = useColorPickerContext();
+  const areaProps = mergeProps(() => colorPicker().getAreaProps(colorAreaProps), restProps);
+  return createComponent(ColorPickerAreaProvider, {
+    value: colorAreaProps,
+    get children() {
+      return createComponent(ark.div, areaProps);
+    }
+  });
+};
+
+export { ColorPickerArea };

package/color-picker/color-picker-channel-input.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 colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelInput = props => {
+  const [channelProps, restProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const channelInputProps = solid.mergeProps(() => colorPicker().getChannelInputProps(channelProps), restProps);
+  return web.createComponent(factory.ark.input, channelInputProps);
+};
+
+exports.ColorPickerChannelInput = ColorPickerChannelInput;

package/color-picker/color-picker-channel-input.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { ColorChannelProps } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ColorPickerChannelInputProps = Assign<HTMLArkProps<'input'>, ColorChannelProps>;
+export declare const ColorPickerChannelInput: (props: ColorPickerChannelInputProps) => JSX.Element;

package/color-picker/color-picker-channel-input.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 { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelInput = props => {
+  const [channelProps, restProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const colorPicker = useColorPickerContext();
+  const channelInputProps = mergeProps(() => colorPicker().getChannelInputProps(channelProps), restProps);
+  return createComponent(ark.input, channelInputProps);
+};
+
+export { ColorPickerChannelInput };

package/color-picker/color-picker-channel-slider-background.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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelSliderBackground = props => {
+  const api = colorPickerContext.useColorPickerContext();
+  const colorChannelProps = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
+  const mergedProps = solid.mergeProps(api().getChannelSliderBackgroundProps(colorChannelProps), props);
+  return web.createComponent(factory.ark.div, mergedProps);
+};
+
+exports.ColorPickerChannelSliderBackground = ColorPickerChannelSliderBackground;

package/color-picker/color-picker-channel-slider-background.d.ts

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

package/color-picker/color-picker-channel-slider-background.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSliderBackground = props => {
+  const api = useColorPickerContext();
+  const colorChannelProps = useColorPickerChannelSliderContext();
+  const mergedProps = mergeProps(api().getChannelSliderBackgroundProps(colorChannelProps), props);
+  return createComponent(ark.div, mergedProps);
+};
+
+export { ColorPickerChannelSliderBackground };

package/color-picker/color-picker-channel-slider-context.cjs

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

package/color-picker/color-picker-channel-slider-context.d.ts

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

package/color-picker/color-picker-channel-slider-context.mjs

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

package/color-picker/color-picker-channel-slider-thumb.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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelSliderThumb = props => {
+  const api = colorPickerContext.useColorPickerContext();
+  const sliderProps = colorPickerChannelSliderContext.useColorPickerChannelSliderContext();
+  const thumbProps = solid.mergeProps(() => api().getChannelSliderThumbProps(sliderProps), props);
+  return web.createComponent(factory.ark.div, thumbProps);
+};
+
+exports.ColorPickerChannelSliderThumb = ColorPickerChannelSliderThumb;

package/color-picker/color-picker-channel-slider-thumb.d.ts

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

package/color-picker/color-picker-channel-slider-thumb.mjs

@@ -0,0 +1,14 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useColorPickerChannelSliderContext } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSliderThumb = props => {
+  const api = useColorPickerContext();
+  const sliderProps = useColorPickerChannelSliderContext();
+  const thumbProps = mergeProps(() => api().getChannelSliderThumbProps(sliderProps), props);
+  return createComponent(ark.div, thumbProps);
+};
+
+export { ColorPickerChannelSliderThumb };

package/color-picker/color-picker-channel-slider-track.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 colorPickerChannelSliderContext = require('./color-picker-channel-slider-context.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerChannelSliderTrack = props => {
+  const [colorChannelProps, localProps] = createSplitProps.createSplitProps()(props, ['channel', 'orientation']);
+  const api = colorPickerContext.useColorPickerContext();
+  const mergedProps = solid.mergeProps(() => api().getChannelSliderTrackProps(colorChannelProps), localProps);
+  return web.createComponent(colorPickerChannelSliderContext.ColorPickerChannelSliderProvider, {
+    value: colorChannelProps,
+    get children() {
+      return web.createComponent(factory.ark.div, mergedProps);
+    }
+  });
+};
+
+exports.ColorPickerChannelSliderTrack = ColorPickerChannelSliderTrack;

package/color-picker/color-picker-channel-slider-track.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import type { ColorChannelProps } from '@zag-js/color-picker';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+export type ColorPickerChannelSliderTrackProps = Assign<HTMLArkProps<'div'>, ColorChannelProps>;
+export declare const ColorPickerChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => JSX.Element;

package/color-picker/color-picker-channel-slider-track.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 { ColorPickerChannelSliderProvider } from './color-picker-channel-slider-context.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerChannelSliderTrack = props => {
+  const [colorChannelProps, localProps] = createSplitProps()(props, ['channel', 'orientation']);
+  const api = useColorPickerContext();
+  const mergedProps = mergeProps(() => api().getChannelSliderTrackProps(colorChannelProps), localProps);
+  return createComponent(ColorPickerChannelSliderProvider, {
+    value: colorChannelProps,
+    get children() {
+      return createComponent(ark.div, mergedProps);
+    }
+  });
+};
+
+export { ColorPickerChannelSliderTrack };

package/color-picker/color-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 colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerContent = props => {
+  const colorPicker = colorPickerContext.useColorPickerContext();
+  const contentProps = solid.mergeProps(() => colorPicker().contentProps, props);
+  return web.createComponent(factory.ark.div, contentProps);
+};
+
+exports.ColorPickerContent = ColorPickerContent;

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

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

package/color-picker/color-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 { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerContent = props => {
+  const colorPicker = useColorPickerContext();
+  const contentProps = mergeProps(() => colorPicker().contentProps, props);
+  return createComponent(ark.div, contentProps);
+};
+
+export { ColorPickerContent };

package/color-picker/color-picker-context.cjs

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