@ark-ui/react 1.0.0-beta.3 → 1.0.0-beta.4

package/CHANGELOG.md

@@ -6,6 +6,12 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.0.0-beta.4] - 2023-10-31
+
+### Fixed
+
+- Resolved an accessibility issue with `Select`
+
 ## [1.0.0-beta.3] - 2023-10-26
 
 ### Added
@@ -193,7 +199,7 @@ import { anatomy } from '@ark-ui/anatomy/accordion'
 
 ### Added
 
-- Support for standalone component imports: Developers can now import individual components, such as `@ark-ui/react/tabs` instead of the full `@ark-ui/react` 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.
+- Support for standalone component imports: Developers can now import individual components, such as `@ark-ui/react/src/srctabs` instead of the full `@ark-ui/react` 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.7.0] - 2023-06-23
 

package/carousel/carousel.stories.d.ts

@@ -5,3 +5,5 @@ type CarouselType = typeof Carousel;
 declare const meta: Meta<CarouselType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Customized: () => JSX.Element;

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

@@ -5,3 +5,4 @@ type ColorPickerType = typeof ColorPicker;
 declare const meta: Meta<ColorPickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/date-picker/date-picker.cjs

@@ -16,6 +16,7 @@ const DatePicker = react.forwardRef((props, ref) => {
   const [datePickerProps, { children, ...localProps }] = createSplitProps.createSplitProps()(
     props,
     [
+      "closeOnSelect",
       "defaultValue",
       "dir",
       "disabled",
@@ -25,7 +26,6 @@ const DatePicker = react.forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "inline",
       "isDateUnavailable",
       "isDateUnavailable",
       "locale",

package/date-picker/date-picker.mjs

@@ -12,6 +12,7 @@ const DatePicker = forwardRef((props, ref) => {
   const [datePickerProps, { children, ...localProps }] = createSplitProps()(
     props,
     [
+      "closeOnSelect",
       "defaultValue",
       "dir",
       "disabled",
@@ -21,7 +22,6 @@ const DatePicker = forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "inline",
       "isDateUnavailable",
       "isDateUnavailable",
       "locale",

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

@@ -5,3 +5,4 @@ type DatePickerType = typeof DatePicker;
 declare const meta: Meta<DatePickerType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const RangeWithSingleGrid: () => JSX.Element;

package/index.cjs

@@ -217,10 +217,10 @@ const sliderControl = require('./slider/slider-control.cjs');
 const sliderLabel = require('./slider/slider-label.cjs');
 const sliderMarker = require('./slider/slider-marker.cjs');
 const sliderMarkerGroup = require('./slider/slider-marker-group.cjs');
-const sliderOutput = require('./slider/slider-output.cjs');
 const sliderRange = require('./slider/slider-range.cjs');
 const sliderThumb = require('./slider/slider-thumb.cjs');
 const sliderTrack = require('./slider/slider-track.cjs');
+const sliderValueText = require('./slider/slider-value-text.cjs');
 const sliderContext = require('./slider/slider-context.cjs');
 const splitterPanel = require('./splitter/splitter-panel.cjs');
 const splitterResizeTrigger = require('./splitter/splitter-resize-trigger.cjs');
@@ -475,10 +475,10 @@ exports.SliderControl = sliderControl.SliderControl;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
-exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
+exports.SliderValueText = sliderValueText.SliderValueText;
 exports.useSliderContext = sliderContext.useSliderContext;
 exports.SplitterPanel = splitterPanel.SplitterPanel;
 exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;

package/index.mjs

@@ -213,10 +213,10 @@ export { SliderControl } from './slider/slider-control.mjs';
 export { SliderLabel } from './slider/slider-label.mjs';
 export { SliderMarker } from './slider/slider-marker.mjs';
 export { SliderMarkerGroup } from './slider/slider-marker-group.mjs';
-export { SliderOutput } from './slider/slider-output.mjs';
 export { SliderRange } from './slider/slider-range.mjs';
 export { SliderThumb } from './slider/slider-thumb.mjs';
 export { SliderTrack } from './slider/slider-track.mjs';
+export { SliderValueText } from './slider/slider-value-text.mjs';
 export { useSliderContext } from './slider/slider-context.mjs';
 export { SplitterPanel } from './splitter/splitter-panel.mjs';
 export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.mjs';

package/menu/index.d.ts

@@ -23,7 +23,7 @@ declare const Menu: ((props: MenuProps) => JSX.Element) & {
     ContextTrigger: ForwardRefExoticComponent<MenuContextTriggerProps & RefAttributes<HTMLButtonElement>>;
     Item: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLDivElement>>;
     ItemGroup: ForwardRefExoticComponent<MenuItemGroupProps & RefAttributes<HTMLDivElement>>;
-    ItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+    ItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
     OptionItem: ForwardRefExoticComponent<MenuOptionItemProps & RefAttributes<HTMLDivElement>>;
     Positioner: ForwardRefExoticComponent<MenuPositionerProps & RefAttributes<HTMLDivElement>>;
     Separator: ForwardRefExoticComponent<MenuSeparatorProps & RefAttributes<HTMLHRElement>>;

package/menu/menu-item-group-label.cjs

@@ -15,7 +15,7 @@ const MenuItemGroupLabel = react.forwardRef(
     const [labelProps, htmlProps] = createSplitProps.createSplitProps()(props, ["htmlFor"]);
     const api = menuContext.useMenuContext();
     const mergedProps = react$1.mergeProps(api?.getItemGroupLabelProps(labelProps) ?? {}, htmlProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
   }
 );
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";

package/menu/menu-item-group-label.d.ts

@@ -2,10 +2,10 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-interface MenuItemGroupLabelParams {
+interface ItemGroupLabelProps {
     htmlFor: string;
 }
-export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'label'>, MenuItemGroupLabelParams> {
+export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
 }
-export declare const MenuItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLLabelElement>>;
+export declare const MenuItemGroupLabel: ForwardRefExoticComponent<MenuItemGroupLabelProps & RefAttributes<HTMLDivElement>>;
 export {};

package/menu/menu-item-group-label.mjs

@@ -11,7 +11,7 @@ const MenuItemGroupLabel = forwardRef(
     const [labelProps, htmlProps] = createSplitProps()(props, ["htmlFor"]);
     const api = useMenuContext();
     const mergedProps = mergeProps(api?.getItemGroupLabelProps(labelProps) ?? {}, htmlProps);
-    return /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref });
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
   }
 );
 MenuItemGroupLabel.displayName = "MenuItemGroupLabel";

package/menu/menu.stories.d.ts

@@ -5,7 +5,10 @@ type MenuType = typeof Menu;
 declare const meta: Meta<MenuType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
 export declare const Group: () => JSX.Element;
-export declare const Options: () => JSX.Element;
+export declare const Separator: () => JSX.Element;
+export declare const ContextMenu: () => JSX.Element;
 export declare const SubMenu: () => JSX.Element;
+export declare const Options: () => JSX.Element;
 export declare const ComplexSubMenu: () => JSX.Element;

package/number-input/number-input.stories.d.ts

@@ -5,5 +5,10 @@ type NumberInputType = typeof NumberInput.Root;
 declare const meta: Meta<NumberInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const MouseWheel: () => JSX.Element;
+export declare const MinMax: () => JSX.Element;
 export declare const FractionDigits: () => JSX.Element;
+export declare const Scrubber: () => JSX.Element;
+export declare const MouseWheel: () => JSX.Element;
+export declare const NoClamp: () => JSX.Element;
+export declare const FormUsage: () => JSX.Element;
+export declare const Formatted: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -60,47 +60,47 @@
   },
   "dependencies": {
     "@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",
-    "@zag-js/carousel": "0.26.0",
-    "@zag-js/checkbox": "0.26.0",
-    "@zag-js/color-picker": "0.26.0",
-    "@zag-js/color-utils": "0.26.0",
-    "@zag-js/combobox": "0.26.0",
-    "@zag-js/core": "0.26.0",
-    "@zag-js/date-picker": "0.26.0",
-    "@zag-js/date-utils": "0.26.0",
-    "@zag-js/dialog": "0.26.0",
-    "@zag-js/editable": "0.26.0",
-    "@zag-js/hover-card": "0.26.0",
-    "@zag-js/menu": "0.26.0",
-    "@zag-js/number-input": "0.26.0",
-    "@zag-js/pagination": "0.26.0",
-    "@zag-js/pin-input": "0.26.0",
-    "@zag-js/popover": "0.26.0",
-    "@zag-js/presence": "0.26.0",
-    "@zag-js/radio-group": "0.26.0",
-    "@zag-js/rating-group": "0.26.0",
-    "@zag-js/react": "0.26.0",
-    "@zag-js/select": "0.26.0",
-    "@zag-js/slider": "0.26.0",
-    "@zag-js/splitter": "0.26.0",
-    "@zag-js/switch": "0.26.0",
-    "@zag-js/tabs": "0.26.0",
-    "@zag-js/tags-input": "0.26.0",
-    "@zag-js/toast": "0.26.0",
-    "@zag-js/toggle-group": "0.26.0",
-    "@zag-js/tooltip": "0.26.0",
-    "@zag-js/types": "0.26.0"
+    "@zag-js/accordion": "0.27.1",
+    "@zag-js/anatomy": "0.27.1",
+    "@zag-js/avatar": "0.27.1",
+    "@zag-js/carousel": "0.27.1",
+    "@zag-js/checkbox": "0.27.1",
+    "@zag-js/color-picker": "0.27.1",
+    "@zag-js/color-utils": "0.27.1",
+    "@zag-js/combobox": "0.27.1",
+    "@zag-js/core": "0.27.1",
+    "@zag-js/date-picker": "0.27.1",
+    "@zag-js/date-utils": "0.27.1",
+    "@zag-js/dialog": "0.27.1",
+    "@zag-js/editable": "0.27.1",
+    "@zag-js/hover-card": "0.27.1",
+    "@zag-js/menu": "0.27.1",
+    "@zag-js/number-input": "0.27.1",
+    "@zag-js/pagination": "0.27.1",
+    "@zag-js/pin-input": "0.27.1",
+    "@zag-js/popover": "0.27.1",
+    "@zag-js/presence": "0.27.1",
+    "@zag-js/radio-group": "0.27.1",
+    "@zag-js/rating-group": "0.27.1",
+    "@zag-js/react": "0.27.1",
+    "@zag-js/select": "0.27.1",
+    "@zag-js/slider": "0.27.1",
+    "@zag-js/splitter": "0.27.1",
+    "@zag-js/switch": "0.27.1",
+    "@zag-js/tabs": "0.27.1",
+    "@zag-js/tags-input": "0.27.1",
+    "@zag-js/toast": "0.27.1",
+    "@zag-js/toggle-group": "0.27.1",
+    "@zag-js/tooltip": "0.27.1",
+    "@zag-js/types": "0.27.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@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",
+    "@storybook/addon-a11y": "7.5.2",
+    "@storybook/addon-essentials": "7.5.2",
+    "@storybook/addons": "7.5.2",
+    "@storybook/react": "7.5.2",
+    "@storybook/react-vite": "7.5.2",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
@@ -109,8 +109,8 @@
     "@types/react": "18.2.33",
     "@types/react-dom": "18.2.14",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.9.0",
-    "@typescript-eslint/parser": "6.9.0",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
     "@vitejs/plugin-react": "4.1.0",
     "@vitest/coverage-v8": "0.34.6",
     "eslint": "8.52.0",
@@ -118,16 +118,16 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
-    "lucide-react": "0.289.0",
+    "lucide-react": "0.291.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.5.1",
+    "storybook": "7.5.2",
     "typescript": "5.2.2",
     "vite": "4.5.0",
-    "vite-plugin-dts": "3.6.1",
+    "vite-plugin-dts": "3.6.3",
     "vitest": "0.34.6"
   },
   "peerDependencies": {

package/pin-input/pin-input.stories.d.ts

@@ -5,3 +5,8 @@ type PinInputType = typeof PinInput;
 declare const meta: Meta<PinInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Customized: () => JSX.Element;
+export declare const Blurred: () => JSX.Element;
+export declare const OTPMode: () => JSX.Element;
+export declare const WithMask: () => JSX.Element;

package/popover/popover.stories.d.ts

@@ -5,8 +5,11 @@ type PopoverType = typeof Popover;
 declare const meta: Meta<PopoverType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Portalled: () => JSX.Element;
+export declare const OnOpenChange: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;
 export declare const RenderFn: () => JSX.Element;
 export declare const Arrow: () => JSX.Element;
-export declare const Positioning: () => JSX.Element;
 export declare const CloseBehavior: () => JSX.Element;
+export declare const Positioning: () => JSX.Element;
+export declare const Modal: () => JSX.Element;

package/radio-group/radio-group.stories.d.ts

@@ -5,3 +5,6 @@ type RadioGroupType = typeof RadioGroup;
 declare const meta: Meta<RadioGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const OnChange: () => JSX.Element;

package/rating-group/rating-group.stories.d.ts

@@ -5,3 +5,9 @@ type RatingGroupType = typeof RatingGroup;
 declare const meta: Meta<RatingGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const HalfRatings: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
+export declare const ReadOnly: () => JSX.Element;
+export declare const FormUsage: () => JSX.Element;

package/segment-group/segment-group.stories.d.ts

@@ -5,3 +5,6 @@ type SegmentGroupType = typeof SegmentGroup;
 declare const meta: Meta<SegmentGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;

package/select/select-control.cjs

@@ -12,7 +12,10 @@ const selectContext = require('./select-context.cjs');
 const SelectControl = react.forwardRef((props, ref) => {
   const api = selectContext.useSelectContext();
   const mergedProps = react$1.mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("select", { ...api.hiddenSelectProps, children: api.collection.toArray().map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })
+  ] });
 });
 SelectControl.displayName = "SelectControl";
 

package/select/select-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -8,7 +8,10 @@ import { useSelectContext } from './select-context.mjs';
 const SelectControl = forwardRef((props, ref) => {
   const api = useSelectContext();
   const mergedProps = mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("select", { ...api.hiddenSelectProps, children: api.collection.toArray().map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) })
+  ] });
 });
 SelectControl.displayName = "SelectControl";
 

package/select/select.stories.d.ts

@@ -6,5 +6,5 @@ declare const meta: Meta<SelectType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Advanced: () => JSX.Element;
-export declare const Controlled: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;

package/slider/index.cjs

@@ -9,10 +9,10 @@ const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
 const sliderMarkerGroup = require('./slider-marker-group.cjs');
-const sliderOutput = require('./slider-output.cjs');
 const sliderRange = require('./slider-range.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
+const sliderValueText = require('./slider-value-text.cjs');
 
 const Slider = Object.assign(slider.Slider, {
   Root: slider.Slider,
@@ -20,10 +20,10 @@ const Slider = Object.assign(slider.Slider, {
   Label: sliderLabel.SliderLabel,
   Marker: sliderMarker.SliderMarker,
   MarkerGroup: sliderMarkerGroup.SliderMarkerGroup,
-  Output: sliderOutput.SliderOutput,
   Range: sliderRange.SliderRange,
   Thumb: sliderThumb.SliderThumb,
-  Track: sliderTrack.SliderTrack
+  Track: sliderTrack.SliderTrack,
+  ValueText: sliderValueText.SliderValueText
 });
 
 exports.useSliderContext = sliderContext.useSliderContext;
@@ -31,8 +31,8 @@ exports.SliderControl = sliderControl.SliderControl;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
 exports.SliderMarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
-exports.SliderOutput = sliderOutput.SliderOutput;
 exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
+exports.SliderValueText = sliderValueText.SliderValueText;
 exports.Slider = Slider;

package/slider/index.d.ts

@@ -6,20 +6,20 @@ import { SliderControl, type SliderControlProps } from './slider-control';
 import { SliderLabel, type SliderLabelProps } from './slider-label';
 import { SliderMarker, type SliderMarkerProps } from './slider-marker';
 import { SliderMarkerGroup, type SliderMarkerGroupProps } from './slider-marker-group';
-import { SliderOutput, type SliderOutputProps } from './slider-output';
 import { SliderRange, type SliderRangeProps } from './slider-range';
 import { SliderThumb, type SliderThumbProps } from './slider-thumb';
 import { SliderTrack, type SliderTrackProps } from './slider-track';
+import { SliderValueText, type SliderValueTextProps } from './slider-value-text';
 declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<SliderControlProps & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<SliderLabelProps & RefAttributes<HTMLLabelElement>>;
     Marker: ForwardRefExoticComponent<SliderMarkerProps & RefAttributes<HTMLSpanElement>>;
     MarkerGroup: ForwardRefExoticComponent<SliderMarkerGroupProps & RefAttributes<HTMLDivElement>>;
-    Output: ForwardRefExoticComponent<SliderOutputProps & RefAttributes<HTMLOutputElement>>;
     Range: ForwardRefExoticComponent<SliderRangeProps & RefAttributes<HTMLDivElement>>;
     Thumb: ForwardRefExoticComponent<SliderThumbProps & RefAttributes<HTMLDivElement>>;
     Track: ForwardRefExoticComponent<SliderTrackProps & RefAttributes<HTMLDivElement>>;
+    ValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;
 };
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack, useSliderContext, };
-export type { SliderContext, SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderOutputProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, useSliderContext, };
+export type { SliderContext, SliderControlProps, SliderLabelProps, SliderMarkerGroupProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderThumbProps, SliderTrackProps, SliderValueTextProps, };

package/slider/index.mjs

@@ -5,10 +5,10 @@ import { SliderControl } from './slider-control.mjs';
 import { SliderLabel } from './slider-label.mjs';
 import { SliderMarker } from './slider-marker.mjs';
 import { SliderMarkerGroup } from './slider-marker-group.mjs';
-import { SliderOutput } from './slider-output.mjs';
 import { SliderRange } from './slider-range.mjs';
 import { SliderThumb } from './slider-thumb.mjs';
 import { SliderTrack } from './slider-track.mjs';
+import { SliderValueText } from './slider-value-text.mjs';
 
 const Slider = Object.assign(Slider$1, {
   Root: Slider$1,
@@ -16,10 +16,10 @@ const Slider = Object.assign(Slider$1, {
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
-  Output: SliderOutput,
   Range: SliderRange,
   Thumb: SliderThumb,
-  Track: SliderTrack
+  Track: SliderTrack,
+  ValueText: SliderValueText
 });
 
-export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderOutput, SliderRange, SliderThumb, SliderTrack };
+export { Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText };

package/slider/{slider-output.cjs → slider-value-text.cjs}

@@ -10,13 +10,13 @@ const factory = require('../factory.cjs');
 const runIfFn = require('../run-if-fn.cjs');
 const sliderContext = require('./slider-context.cjs');
 
-const SliderOutput = react.forwardRef((props, ref) => {
+const SliderValueText = react.forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const api = sliderContext.useSliderContext();
-  const mergedProps = react$1.mergeProps(api.outputProps, rest);
+  const mergedProps = react$1.mergeProps(api.valueTextProps, rest);
   const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.output, { ...mergedProps, ref, children: view });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view });
 });
-SliderOutput.displayName = "SliderOutput";
+SliderValueText.displayName = "SliderValueText";
 
-exports.SliderOutput = SliderOutput;
+exports.SliderValueText = SliderValueText;

package/slider/{slider-output.d.ts → slider-value-text.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react'
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseSliderReturn } from './use-slider';
-export interface SliderOutputProps extends Assign<HTMLArkProps<'output'>, {
+export interface SliderValueTextProps extends Assign<HTMLArkProps<'output'>, {
     children?: ((api: UseSliderReturn) => ReactNode) | ReactNode;
 }> {
 }
-export declare const SliderOutput: ForwardRefExoticComponent<SliderOutputProps & RefAttributes<HTMLOutputElement>>;
+export declare const SliderValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;

package/slider/{slider-output.mjs → slider-value-text.mjs}

@@ -6,13 +6,13 @@ import { ark } from '../factory.mjs';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useSliderContext } from './slider-context.mjs';
 
-const SliderOutput = forwardRef((props, ref) => {
+const SliderValueText = forwardRef((props, ref) => {
   const { children, ...rest } = props;
   const api = useSliderContext();
-  const mergedProps = mergeProps(api.outputProps, rest);
+  const mergedProps = mergeProps(api.valueTextProps, rest);
   const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(ark.output, { ...mergedProps, ref, children: view });
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view });
 });
-SliderOutput.displayName = "SliderOutput";
+SliderValueText.displayName = "SliderValueText";
 
-export { SliderOutput };
+export { SliderValueText };

package/slider/slider.stories.d.ts

@@ -1,8 +1,15 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Slider } from '.';
+import { Slider } from './';
 type SliderType = typeof Slider;
 declare const meta: Meta<SliderType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const WithDefaultValue: () => JSX.Element;
+export declare const WithMarks: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
+export declare const MinMax: () => JSX.Element;
+export declare const Step: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;
+export declare const Vertical: () => JSX.Element;
+export declare const CenterOrigin: () => JSX.Element;
+export declare const Advanced: () => JSX.Element;

package/tags-input/tags-input.stories.d.ts

@@ -6,3 +6,9 @@ declare const meta: Meta<TagsInputType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
+export declare const MaxWithOverflow: () => JSX.Element;
+export declare const Validated: () => JSX.Element;
+export declare const BlurBehavior: () => JSX.Element;
+export declare const PasteBehavior: () => JSX.Element;
+export declare const DisabledEditing: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;

package/toast/toast.stories.d.ts

@@ -3,3 +3,5 @@ import type { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Customized: () => JSX.Element;
+export declare const CustomRender: () => JSX.Element;

package/toggle-group/toggle-group.stories.d.ts

@@ -5,5 +5,5 @@ type ToggleGroupType = typeof ToggleGroup;
 declare const meta: Meta<ToggleGroupType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
-export declare const Initialvalue: () => JSX.Element;
+export declare const InitialValue: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;