@ark-ui/react 2.2.3 → 3.0.0-1

package/dist/components/slider/slider-root.d.cts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { UseSliderProps } from './use-slider';
+import { HTMLArkProps } from '../factory';
+import { Assign } from '../../types';
+
+export interface SliderRootProps extends Assign<HTMLArkProps<'div'>, UseSliderProps> {
+}
+export declare const SliderRoot: ForwardRefExoticComponent<SliderRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-root.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { UseSliderProps } from './use-slider';
+import { HTMLArkProps } from '../factory';
+import { Assign } from '../../types';
+
+export interface SliderRootProps extends Assign<HTMLArkProps<'div'>, UseSliderProps> {
+}
+export declare const SliderRoot: ForwardRefExoticComponent<SliderRootProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-root.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useSlider } from './use-slider.js';
+import { SliderProvider } from './use-slider-context.js';
+
+const SliderRoot = forwardRef((props, ref) => {
+  const [useSliderProps, localProps] = createSplitProps()(props, [
+    "aria-label",
+    "aria-labelledby",
+    "defaultValue",
+    "disabled",
+    "form",
+    "getAriaValueText",
+    "id",
+    "ids",
+    "invalid",
+    "max",
+    "min",
+    "minStepsBetweenThumbs",
+    "name",
+    "onFocusChange",
+    "onValueChange",
+    "onValueChangeEnd",
+    "orientation",
+    "origin",
+    "readOnly",
+    "step",
+    "thumbAlignment",
+    "thumbAlignment",
+    "thumbSize",
+    "value"
+  ]);
+  const slider = useSlider(useSliderProps);
+  const mergedProps = mergeProps(slider.rootProps, localProps);
+  return /* @__PURE__ */ jsx(SliderProvider, { value: slider, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+});
+SliderRoot.displayName = "SliderRoot";
+
+export { SliderRoot };

package/dist/components/slider/slider-thumb.cjs

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useSliderContext = require('./use-slider-context.cjs');
+
+const SliderThumb = react.forwardRef((props, ref) => {
+  const [thumbProps, localProps] = createSplitProps.createSplitProps()(props, ["index", "name"]);
+  const slider = useSliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(slider.getThumbProps(thumbProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...slider.getHiddenInputProps(thumbProps) })
+  ] });
+});
+SliderThumb.displayName = "SliderThumb";
+
+exports.SliderThumb = SliderThumb;

package/dist/components/slider/slider-thumb.d.cts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+import { Assign } from '../../types';
+import { ThumbProps } from '@zag-js/slider';
+
+export interface SliderThumbProps extends Assign<HTMLArkProps<'div'>, ThumbProps> {
+}
+export declare const SliderThumb: ForwardRefExoticComponent<SliderThumbProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-thumb.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+import { Assign } from '../../types';
+import { ThumbProps } from '@zag-js/slider';
+
+export interface SliderThumbProps extends Assign<HTMLArkProps<'div'>, ThumbProps> {
+}
+export declare const SliderThumb: ForwardRefExoticComponent<SliderThumbProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-thumb.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useSliderContext } from './use-slider-context.js';
+
+const SliderThumb = forwardRef((props, ref) => {
+  const [thumbProps, localProps] = createSplitProps()(props, ["index", "name"]);
+  const slider = useSliderContext();
+  const mergedProps = mergeProps(slider.getThumbProps(thumbProps), localProps);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...slider.getHiddenInputProps(thumbProps) })
+  ] });
+});
+SliderThumb.displayName = "SliderThumb";
+
+export { SliderThumb };

package/dist/components/slider/slider-track.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useSliderContext = require('./use-slider-context.cjs');
+
+const SliderTrack = react.forwardRef((props, ref) => {
+  const slider = useSliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(slider.trackProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+SliderTrack.displayName = "SliderTrack";
+
+exports.SliderTrack = SliderTrack;

package/dist/components/slider/slider-track.d.cts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface SliderTrackProps extends HTMLArkProps<'div'> {
+}
+export declare const SliderTrack: ForwardRefExoticComponent<SliderTrackProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-track.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface SliderTrackProps extends HTMLArkProps<'div'> {
+}
+export declare const SliderTrack: ForwardRefExoticComponent<SliderTrackProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-track.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useSliderContext } from './use-slider-context.js';
+
+const SliderTrack = forwardRef((props, ref) => {
+  const slider = useSliderContext();
+  const mergedProps = mergeProps(slider.trackProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+SliderTrack.displayName = "SliderTrack";
+
+export { SliderTrack };

package/dist/components/slider/slider-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 react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useSliderContext = require('./use-slider-context.cjs');
+
+const SliderValueText = react.forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const slider = useSliderContext.useSliderContext();
+  const mergedProps = react$1.mergeProps(slider.valueTextProps, rest);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: children || slider.value.join(", ") });
+});
+SliderValueText.displayName = "SliderValueText";
+
+exports.SliderValueText = SliderValueText;

package/dist/components/slider/slider-value-text.d.cts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface SliderValueTextProps extends HTMLArkProps<'span'> {
+}
+export declare const SliderValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-value-text.d.ts

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+
+export interface SliderValueTextProps extends HTMLArkProps<'span'> {
+}
+export declare const SliderValueText: ForwardRefExoticComponent<SliderValueTextProps & RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider-value-text.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useSliderContext } from './use-slider-context.js';
+
+const SliderValueText = forwardRef((props, ref) => {
+  const { children, ...rest } = props;
+  const slider = useSliderContext();
+  const mergedProps = mergeProps(slider.valueTextProps, rest);
+  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: children || slider.value.join(", ") });
+});
+SliderValueText.displayName = "SliderValueText";
+
+export { SliderValueText };

package/dist/components/slider/slider.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sliderContext = require('./slider-context.cjs');
+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 sliderRange = require('./slider-range.cjs');
+const sliderRoot = require('./slider-root.cjs');
+const sliderThumb = require('./slider-thumb.cjs');
+const sliderTrack = require('./slider-track.cjs');
+const sliderValueText = require('./slider-value-text.cjs');
+
+
+
+exports.Context = sliderContext.SliderContext;
+exports.Control = sliderControl.SliderControl;
+exports.Label = sliderLabel.SliderLabel;
+exports.Marker = sliderMarker.SliderMarker;
+exports.MarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
+exports.Range = sliderRange.SliderRange;
+exports.Root = sliderRoot.SliderRoot;
+exports.Thumb = sliderThumb.SliderThumb;
+exports.Track = sliderTrack.SliderTrack;
+exports.ValueText = sliderValueText.SliderValueText;

package/dist/components/slider/slider.d.cts

@@ -0,0 +1,11 @@
+export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/slider';
+export { SliderContext as Context, type SliderContextProps as ContextProps } from './slider-context';
+export { SliderControl as Control, type SliderControlProps as ControlProps } from './slider-control';
+export { SliderLabel as Label, type SliderLabelProps as LabelProps } from './slider-label';
+export { SliderMarker as Marker, type SliderMarkerProps as MarkerProps } from './slider-marker';
+export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupProps as MarkerGroupProps, } from './slider-marker-group';
+export { SliderRange as Range, type SliderRangeProps as RangeProps } from './slider-range';
+export { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';
+export { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';
+export { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';
+export { SliderValueText as ValueText, type SliderValueTextProps as ValueTextProps, } from './slider-value-text';

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,11 @@
+export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/slider';
+export { SliderContext as Context, type SliderContextProps as ContextProps } from './slider-context';
+export { SliderControl as Control, type SliderControlProps as ControlProps } from './slider-control';
+export { SliderLabel as Label, type SliderLabelProps as LabelProps } from './slider-label';
+export { SliderMarker as Marker, type SliderMarkerProps as MarkerProps } from './slider-marker';
+export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupProps as MarkerGroupProps, } from './slider-marker-group';
+export { SliderRange as Range, type SliderRangeProps as RangeProps } from './slider-range';
+export { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';
+export { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';
+export { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';
+export { SliderValueText as ValueText, type SliderValueTextProps as ValueTextProps, } from './slider-value-text';

package/dist/components/slider/slider.js

@@ -0,0 +1,10 @@
+export { SliderContext as Context } from './slider-context.js';
+export { SliderControl as Control } from './slider-control.js';
+export { SliderLabel as Label } from './slider-label.js';
+export { SliderMarker as Marker } from './slider-marker.js';
+export { SliderMarkerGroup as MarkerGroup } from './slider-marker-group.js';
+export { SliderRange as Range } from './slider-range.js';
+export { SliderRoot as Root } from './slider-root.js';
+export { SliderThumb as Thumb } from './slider-thumb.js';
+export { SliderTrack as Track } from './slider-track.js';
+export { SliderValueText as ValueText } from './slider-value-text.js';

package/dist/components/slider/use-slider-context.cjs

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

package/dist/components/slider/use-slider-context.d.cts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+import { UseSliderReturn } from './use-slider';
+
+export interface UseSliderContext extends UseSliderReturn {
+}
+export declare const SliderProvider: Provider<UseSliderContext>, useSliderContext: () => UseSliderContext;

package/dist/components/slider/use-slider-context.d.ts

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+import { UseSliderReturn } from './use-slider';
+
+export interface UseSliderContext extends UseSliderReturn {
+}
+export declare const SliderProvider: Provider<UseSliderContext>, useSliderContext: () => UseSliderContext;

package/dist/components/slider/use-slider-context.js

@@ -0,0 +1,10 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [SliderProvider, useSliderContext] = createContext({
+  name: "SliderContext",
+  hookName: "useSliderContext",
+  providerName: "<SliderProvider />"
+});
+
+export { SliderProvider, useSliderContext };

package/dist/components/slider/use-slider.cjs

@@ -0,0 +1,55 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const react$1 = require('@zag-js/react');
+const Slider = require('@zag-js/slider');
+const react = require('react');
+const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
+const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
+const useEvent = require('../../utils/use-event.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 Slider__namespace = /*#__PURE__*/_interopNamespaceDefault(Slider);
+
+const useSlider = (props) => {
+  const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
+  const { dir } = useLocaleContext.useLocaleContext();
+  const initialContext = {
+    id: react.useId(),
+    dir,
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onValueChangeEnd: useEvent.useEvent(props.onValueChangeEnd),
+    onFocusChange: useEvent.useEvent(props.onFocusChange)
+  };
+  const [state, send] = react$1.useMachine(Slider__namespace.machine(initialContext), {
+    context
+  });
+  return Slider__namespace.connect(state, send, react$1.normalizeProps);
+};
+
+exports.useSlider = useSlider;

package/dist/components/slider/use-slider.d.cts

@@ -0,0 +1,14 @@
+import { Optional } from '../../types';
+import { PropTypes } from '@zag-js/react';
+
+import * as Slider from '@zag-js/slider';
+export interface UseSliderProps extends Optional<Omit<Slider.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the slider when it is first rendered.
+     * Use when you do not need to control the state of the slider picker.
+     */
+    defaultValue?: Slider.Context['value'];
+}
+export interface UseSliderReturn extends Slider.Api<PropTypes> {
+}
+export declare const useSlider: (props: UseSliderProps) => UseSliderReturn;

package/dist/components/slider/use-slider.d.ts

@@ -0,0 +1,14 @@
+import { Optional } from '../../types';
+import { PropTypes } from '@zag-js/react';
+
+import * as Slider from '@zag-js/slider';
+export interface UseSliderProps extends Optional<Omit<Slider.Context, 'dir' | 'getRootNode'>, 'id'> {
+    /**
+     * The initial value of the slider when it is first rendered.
+     * Use when you do not need to control the state of the slider picker.
+     */
+    defaultValue?: Slider.Context['value'];
+}
+export interface UseSliderReturn extends Slider.Api<PropTypes> {
+}
+export declare const useSlider: (props: UseSliderProps) => UseSliderReturn;

package/dist/components/slider/use-slider.js

@@ -0,0 +1,32 @@
+'use client';
+import { useMachine, normalizeProps } from '@zag-js/react';
+import * as Slider from '@zag-js/slider';
+import { useId } from 'react';
+import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
+import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
+import { useEvent } from '../../utils/use-event.js';
+
+const useSlider = (props) => {
+  const { getRootNode } = useEnvironmentContext();
+  const { dir } = useLocaleContext();
+  const initialContext = {
+    id: useId(),
+    dir,
+    getRootNode,
+    ...props,
+    value: props.defaultValue
+  };
+  const context = {
+    ...initialContext,
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onValueChangeEnd: useEvent(props.onValueChangeEnd),
+    onFocusChange: useEvent(props.onFocusChange)
+  };
+  const [state, send] = useMachine(Slider.machine(initialContext), {
+    context
+  });
+  return Slider.connect(state, send, normalizeProps);
+};
+
+export { useSlider };

package/dist/components/splitter/index.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const splitterContext = require('./splitter-context.cjs');
+const splitterPanel = require('./splitter-panel.cjs');
+const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
+const splitterRoot = require('./splitter-root.cjs');
+const useSplitterContext = require('./use-splitter-context.cjs');
+const splitter = require('./splitter.cjs');
+
+
+
+exports.SplitterContext = splitterContext.SplitterContext;
+exports.SplitterPanel = splitterPanel.SplitterPanel;
+exports.SplitterResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
+exports.SplitterRoot = splitterRoot.SplitterRoot;
+exports.useSplitterContext = useSplitterContext.useSplitterContext;
+exports.Splitter = splitter;

package/dist/components/splitter/index.d.cts

@@ -0,0 +1,7 @@
+export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
+export { SplitterContext, type SplitterContextProps } from './splitter-context';
+export { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
+export { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
+export { SplitterRoot, type SplitterRootProps } from './splitter-root';
+export { type UseSplitterContext, useSplitterContext } from './use-splitter-context';
+export * as Splitter from './splitter';

package/dist/components/splitter/index.d.ts

@@ -0,0 +1,7 @@
+export type { SizeChangeDetails as SplitterSizeChangeDetails } from '@zag-js/splitter';
+export { SplitterContext, type SplitterContextProps } from './splitter-context';
+export { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
+export { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
+export { SplitterRoot, type SplitterRootProps } from './splitter-root';
+export { type UseSplitterContext, useSplitterContext } from './use-splitter-context';
+export * as Splitter from './splitter';

package/dist/components/splitter/index.js

@@ -0,0 +1,7 @@
+export { SplitterContext } from './splitter-context.js';
+export { SplitterPanel } from './splitter-panel.js';
+export { SplitterResizeTrigger } from './splitter-resize-trigger.js';
+export { SplitterRoot } from './splitter-root.js';
+export { useSplitterContext } from './use-splitter-context.js';
+import * as splitter from './splitter.js';
+export { splitter as Splitter };

package/dist/components/splitter/splitter-context.cjs

@@ -0,0 +1,10 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useSplitterContext = require('./use-splitter-context.cjs');
+
+const SplitterContext = (props) => props.children(useSplitterContext.useSplitterContext());
+
+exports.SplitterContext = SplitterContext;

package/dist/components/splitter/splitter-context.d.cts

@@ -0,0 +1,7 @@
+import { UseSplitterContext } from './use-splitter-context';
+import { ReactNode } from 'react';
+
+export interface SplitterContextProps {
+    children: (context: UseSplitterContext) => ReactNode;
+}
+export declare const SplitterContext: (props: SplitterContextProps) => ReactNode;

package/dist/components/splitter/splitter-context.d.ts

@@ -0,0 +1,7 @@
+import { UseSplitterContext } from './use-splitter-context';
+import { ReactNode } from 'react';
+
+export interface SplitterContextProps {
+    children: (context: UseSplitterContext) => ReactNode;
+}
+export declare const SplitterContext: (props: SplitterContextProps) => ReactNode;

package/dist/components/splitter/splitter-context.js

@@ -0,0 +1,6 @@
+'use client';
+import { useSplitterContext } from './use-splitter-context.js';
+
+const SplitterContext = (props) => props.children(useSplitterContext());
+
+export { SplitterContext };

package/dist/components/splitter/splitter-panel.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useSplitterContext = require('./use-splitter-context.cjs');
+
+const SplitterPanel = react.forwardRef((props, ref) => {
+  const [splitterPanelProps, localProps] = createSplitProps.createSplitProps()(props, ["id", "snapSize"]);
+  const splitter = useSplitterContext.useSplitterContext();
+  const mergedProps = react$1.mergeProps(splitter.getPanelProps(splitterPanelProps), localProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+SplitterPanel.displayName = "SplitterPanel";
+
+exports.SplitterPanel = SplitterPanel;

package/dist/components/splitter/splitter-panel.d.cts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+import { Assign } from '../../types';
+import { PanelProps } from '@zag-js/splitter';
+
+export interface SplitterPanelProps extends Assign<HTMLArkProps<'div'>, PanelProps> {
+}
+export declare const SplitterPanel: ForwardRefExoticComponent<SplitterPanelProps & RefAttributes<HTMLDivElement>>;

package/dist/components/splitter/splitter-panel.d.ts

@@ -0,0 +1,8 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLArkProps } from '../factory';
+import { Assign } from '../../types';
+import { PanelProps } from '@zag-js/splitter';
+
+export interface SplitterPanelProps extends Assign<HTMLArkProps<'div'>, PanelProps> {
+}
+export declare const SplitterPanel: ForwardRefExoticComponent<SplitterPanelProps & RefAttributes<HTMLDivElement>>;

package/dist/components/splitter/splitter-panel.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useSplitterContext } from './use-splitter-context.js';
+
+const SplitterPanel = forwardRef((props, ref) => {
+  const [splitterPanelProps, localProps] = createSplitProps()(props, ["id", "snapSize"]);
+  const splitter = useSplitterContext();
+  const mergedProps = mergeProps(splitter.getPanelProps(splitterPanelProps), localProps);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+SplitterPanel.displayName = "SplitterPanel";
+
+export { SplitterPanel };