@ark-ui/react 1.0.0-beta.0 → 1.0.0-beta.2

package/CHANGELOG.md

@@ -6,6 +6,26 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.0-beta.2] - 2023-10-25
+
+### Added
+
+- Added `ValueText` to the `ColorPicker` component
+
+### Fixed
+
+- Added missing data attributes to `DatePickerView` component
+
+## [1.0.0-beta.1] - 2023-10-20
+
+### Added
+
+- Parsed `focusedValue` in `DatePicker`
+
+### Fixed
+
+- Resolved an issue with `@ark-ui/anatomy`
+
 ## [1.0.0-beta.0] - 2023-10-20
 
 ### Changed

package/color-picker/color-picker-transparency-grid.d.ts

@@ -5,7 +5,7 @@ import type { Assign } from '../types';
 interface TransparancyGridProps {
     size: string;
 }
-export interface ColorPickerTransparencyGridPrps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
+export interface ColorPickerTransparencyGridProps extends Assign<HTMLArkProps<'div'>, TransparancyGridProps> {
 }
-export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridPrps & RefAttributes<HTMLDivElement>>;
+export declare const ColorPickerTransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
 export {};

package/color-picker/color-picker-value-text.cjs

@@ -0,0 +1,20 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
+const react = require('react');
+const factory = require('../factory.cjs');
+const colorPickerContext = require('./color-picker-context.cjs');
+
+const ColorPickerValueText = react.forwardRef(
+  (props, ref) => {
+    const api = colorPickerContext.useColorPickerContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...anatomy.colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || api.valueAsString });
+  }
+);
+ColorPickerValueText.displayName = "ColorPickerValueText";
+
+exports.ColorPickerValueText = ColorPickerValueText;

package/color-picker/color-picker-value-text.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface ColorPickerValueTextProps extends HTMLArkProps<'span'> {
+}
+export declare const ColorPickerValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;

package/color-picker/color-picker-value-text.mjs

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { colorPickerAnatomy } from '@ark-ui/anatomy';
+import { forwardRef } from 'react';
+import { ark } from '../factory.mjs';
+import { useColorPickerContext } from './color-picker-context.mjs';
+
+const ColorPickerValueText = forwardRef(
+  (props, ref) => {
+    const api = useColorPickerContext();
+    return /* @__PURE__ */ jsx(ark.span, { ...colorPickerAnatomy.build().valueText.attrs, ...props, ref, children: props.children || api.valueAsString });
+  }
+);
+ColorPickerValueText.displayName = "ColorPickerValueText";
+
+export { ColorPickerValueText };

package/color-picker/index.cjs

@@ -24,6 +24,7 @@ const colorPickerSwatchGroup = require('./color-picker-swatch-group.cjs');
 const colorPickerSwatchTrigger = require('./color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker-trigger.cjs');
+const colorPickerValueText = require('./color-picker-value-text.cjs');
 
 const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   Root: colorPicker.ColorPicker,
@@ -43,7 +44,8 @@ const ColorPicker = Object.assign(colorPicker.ColorPicker, {
   SwatchGroup: colorPickerSwatchGroup.ColorPickerSwatchGroup,
   SwatchTrigger: colorPickerSwatchTrigger.ColorPickerSwatchTrigger,
   TransparencyGrid: colorPickerTransparencyGrid.ColorPickerTransparencyGrid,
-  Trigger: colorPickerTrigger.ColorPickerTrigger
+  Trigger: colorPickerTrigger.ColorPickerTrigger,
+  ValueText: colorPickerValueText.ColorPickerValueText
 });
 
 exports.ColorPickerArea = colorPickerArea.ColorPickerArea;
@@ -66,4 +68,5 @@ exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
+exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.ColorPicker = ColorPicker;

package/color-picker/index.d.ts

@@ -19,8 +19,9 @@ import { ColorPickerPositioner, type ColorPickerPositionerProps } from './color-
 import { ColorPickerSwatch, type ColorPickerSwatchProps } from './color-picker-swatch';
 import { ColorPickerSwatchGroup, type ColorPickerSwatchGroupProps } from './color-picker-swatch-group';
 import { ColorPickerSwatchTrigger, type ColorPickerSwatchTriggerProps } from './color-picker-swatch-trigger';
-import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridPrps } from './color-picker-transparency-grid';
+import { ColorPickerTransparencyGrid, type ColorPickerTransparencyGridProps } from './color-picker-transparency-grid';
 import { ColorPickerTrigger, type ColorPickerTriggerProps } from './color-picker-trigger';
+import { ColorPickerValueText, type ColorPickerValueTextProps } from './color-picker-value-text';
 declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
     Area: ForwardRefExoticComponent<ColorPickerAreaProps & RefAttributes<HTMLDivElement>>;
@@ -38,8 +39,9 @@ declare const ColorPicker: ForwardRefExoticComponent<ColorPickerProps & RefAttri
     Swatch: ForwardRefExoticComponent<ColorPickerSwatchProps & RefAttributes<HTMLDivElement>>;
     SwatchGroup: ForwardRefExoticComponent<ColorPickerSwatchGroupProps & RefAttributes<HTMLDivElement>>;
     SwatchTrigger: ForwardRefExoticComponent<ColorPickerSwatchTriggerProps & RefAttributes<HTMLButtonElement>>;
-    TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridPrps & RefAttributes<HTMLDivElement>>;
+    TransparencyGrid: ForwardRefExoticComponent<ColorPickerTransparencyGridProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<ColorPickerTriggerProps & RefAttributes<HTMLButtonElement>>;
+    ValueText: ForwardRefExoticComponent<ColorPickerValueTextProps & RefAttributes<HTMLDivElement>>;
 };
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
-export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridPrps, ColorPickerTriggerProps, };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, };
+export type { ColorPickerAreaBackgroundProps, ColorPickerAreaContext, ColorPickerAreaProps, ColorPickerAreaThumbProps, ColorPickerChannelInputProps, ColorPickerChannelSliderContext, ColorPickerChannelSliderProps, ColorPickerChannelSliderThumbProps, ColorPickerChannelSliderTrackProps, ColorPickerContentProps, ColorPickerContext, ColorPickerControlProps, ColorPickerEyeDropperTriggerProps, ColorPickerLabelProps, ColorPickerPositionerProps, ColorPickerProps, ColorPickerSwatchGroupProps, ColorPickerSwatchProps, ColorPickerSwatchTriggerProps, ColorPickerTransparencyGridProps, ColorPickerTriggerProps, ColorPickerValueTextProps, };

package/color-picker/index.mjs

@@ -20,6 +20,7 @@ import { ColorPickerSwatchGroup } from './color-picker-swatch-group.mjs';
 import { ColorPickerSwatchTrigger } from './color-picker-swatch-trigger.mjs';
 import { ColorPickerTransparencyGrid } from './color-picker-transparency-grid.mjs';
 import { ColorPickerTrigger } from './color-picker-trigger.mjs';
+import { ColorPickerValueText } from './color-picker-value-text.mjs';
 
 const ColorPicker = Object.assign(ColorPicker$1, {
   Root: ColorPicker$1,
@@ -39,7 +40,8 @@ const ColorPicker = Object.assign(ColorPicker$1, {
   SwatchGroup: ColorPickerSwatchGroup,
   SwatchTrigger: ColorPickerSwatchTrigger,
   TransparencyGrid: ColorPickerTransparencyGrid,
-  Trigger: ColorPickerTrigger
+  Trigger: ColorPickerTrigger,
+  ValueText: ColorPickerValueText
 });
 
-export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger };
+export { ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText };

package/date-picker/date-picker-view.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
@@ -17,7 +18,16 @@ const DatePickerView = react.forwardRef((props, ref) => {
   ]);
   const api = datePickerContext.useDatePickerContext();
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(datePickerViewContext.DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...localProps, ref, hidden: api.view !== viewProps.view, children: view }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(datePickerViewContext.DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsxRuntime.jsx(
+    factory.ark.div,
+    {
+      hidden: api.view !== viewProps.view,
+      ...anatomy.datePickerAnatomy.build().view.attrs,
+      ...localProps,
+      ref,
+      children: view
+    }
+  ) });
 });
 DatePickerView.displayName = "DatePickerView";
 

package/date-picker/date-picker-view.mjs

@@ -1,5 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { datePickerAnatomy } from '@ark-ui/anatomy';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
@@ -13,7 +14,16 @@ const DatePickerView = forwardRef((props, ref) => {
   ]);
   const api = useDatePickerContext();
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsx(ark.div, { ...localProps, ref, hidden: api.view !== viewProps.view, children: view }) });
+  return /* @__PURE__ */ jsx(DatePickerViewProvider, { value: viewProps, children: /* @__PURE__ */ jsx(
+    ark.div,
+    {
+      hidden: api.view !== viewProps.view,
+      ...datePickerAnatomy.build().view.attrs,
+      ...localProps,
+      ref,
+      children: view
+    }
+  ) });
 });
 DatePickerView.displayName = "DatePickerView";
 

package/date-picker/use-date-picker.cjs

@@ -34,6 +34,7 @@ const useDatePicker = (props = {}) => {
     id: react.useId(),
     getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
+    focusedValue: props.focusedValue ? datePicker__namespace.parse(props.focusedValue) : void 0,
     value: props.defaultValue ? datePicker__namespace.parse(props.defaultValue) : void 0
   };
   const context = {

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

@@ -1,11 +1,15 @@
 import * as datePicker from '@zag-js/date-picker';
 import { type PropTypes } from '@zag-js/react';
 import type { Optional } from '../types';
-export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value'>, 'id'> {
+export interface UseDatePickerProps extends Optional<Omit<datePicker.Context, 'value' | 'focusedValue'>, 'id'> {
     /**
      * The initial value of the date picker
      */
     defaultValue?: string[];
+    /**
+     * The focused date.
+     */
+    focusedValue?: string;
     /**
      * The value of the date picker
      */

package/date-picker/use-date-picker.mjs

@@ -11,6 +11,7 @@ const useDatePicker = (props = {}) => {
     id: useId(),
     getRootNode: useEnvironmentContext(),
     ...props,
+    focusedValue: props.focusedValue ? datePicker.parse(props.focusedValue) : void 0,
     value: props.defaultValue ? datePicker.parse(props.defaultValue) : void 0
   };
   const context = {

package/index.cjs

@@ -72,6 +72,7 @@ const colorPickerSwatchGroup = require('./color-picker/color-picker-swatch-group
 const colorPickerSwatchTrigger = require('./color-picker/color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./color-picker/color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./color-picker/color-picker-trigger.cjs');
+const colorPickerValueText = require('./color-picker/color-picker-value-text.cjs');
 const colorPickerAreaContext = require('./color-picker/color-picker-area-context.cjs');
 const colorPickerChannelSliderContext = require('./color-picker/color-picker-channel-slider-context.cjs');
 const colorPickerContext = require('./color-picker/color-picker-context.cjs');
@@ -329,6 +330,7 @@ exports.ColorPickerSwatchGroup = colorPickerSwatchGroup.ColorPickerSwatchGroup;
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
+exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.useColorPickerAreaContext = colorPickerAreaContext.useColorPickerAreaContext;
 exports.useColorPickerChannelSliderContext = colorPickerChannelSliderContext.useColorPickerChannelSliderContext;
 exports.useColorPickerContext = colorPickerContext.useColorPickerContext;

package/index.mjs

@@ -68,6 +68,7 @@ export { ColorPickerSwatchGroup } from './color-picker/color-picker-swatch-group
 export { ColorPickerSwatchTrigger } from './color-picker/color-picker-swatch-trigger.mjs';
 export { ColorPickerTransparencyGrid } from './color-picker/color-picker-transparency-grid.mjs';
 export { ColorPickerTrigger } from './color-picker/color-picker-trigger.mjs';
+export { ColorPickerValueText } from './color-picker/color-picker-value-text.mjs';
 export { useColorPickerAreaContext } from './color-picker/color-picker-area-context.mjs';
 export { useColorPickerChannelSliderContext } from './color-picker/color-picker-channel-slider-context.mjs';
 export { useColorPickerContext } from './color-picker/color-picker-context.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -59,7 +59,7 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "workspace:*",
+    "@ark-ui/anatomy": "1.0.0-beta.1",
     "@zag-js/accordion": "0.26.0",
     "@zag-js/anatomy": "0.26.0",
     "@zag-js/avatar": "0.26.0",
@@ -96,21 +96,21 @@
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.4.6",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addons": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-vite": "7.4.6",
+    "@storybook/addon-a11y": "7.5.1",
+    "@storybook/addon-essentials": "7.5.1",
+    "@storybook/addons": "7.5.1",
+    "@storybook/react": "7.5.1",
+    "@storybook/react-vite": "7.5.1",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.3",
+    "@types/jsdom": "21.1.4",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@typescript-eslint/eslint-plugin": "6.8.0",
+    "@typescript-eslint/parser": "6.8.0",
     "@vitejs/plugin-react": "4.1.0",
     "@vitest/coverage-v8": "0.34.6",
     "eslint": "8.51.0",
@@ -118,13 +118,13 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
-    "lucide-react": "0.287.0",
+    "lucide-react": "0.288.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "release-it": "16.2.1",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.4.6",
+    "storybook": "7.5.1",
     "typescript": "5.2.2",
     "vite": "4.4.11",
     "vite-plugin-dts": "3.6.0",