@accelint/design-system 0.5.2 → 0.6.0

package/dist/components/index.d.ts

@@ -60,6 +60,9 @@ export { SearchFieldClassNames, SearchFieldMapping, SearchFieldProps, SearchFiel
 export { Select, SelectContext } from './select/select.js';
 export { selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './select/select.css.js';
 export { SelectClassNames, SelectMapping, SelectProps, SelectRenderProps, SelectState } from './select/types.js';
+export { Slider, SliderContext, SliderThumb, SliderTrack } from './slider/slider.js';
+export { sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars } from './slider/slider.css.js';
+export { SliderClassNames, SliderLayout, SliderProps, SliderRenderProps, SliderState, SliderThumbProps, SliderThumbState } from './slider/types.js';
 export { Switch, SwitchContext } from './switch/switch.js';
 export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './switch/switch.css.js';
 export { SwitchAlignment, SwitchClassNames, SwitchProps, SwitchRenderProps, SwitchState } from './switch/types.js';

package/dist/components/index.js

@@ -21,6 +21,7 @@ export { QueryBuilder, QueryBuilderContext, pressToMouseEvent, queryBuilderClass
 export { Radio, RadioContext, RadioGroup, RadioGroupContext, radioClassNames, radioColorVars, radioGroupStateVars, radioSpaceVars, radioStateVars } from './radio/index.js';
 export { SearchField, SearchFieldContext, searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, searchFieldStateVars } from './search-field/index.js';
 export { Select, SelectContext, selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './select/index.js';
+export { Slider, SliderContext, SliderThumb, SliderTrack, sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars } from './slider/index.js';
 export { Switch, SwitchContext, switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './switch/index.js';
 export { Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext, tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers } from './tabs/index.js';
 export { TextArea, TextAreaContext, textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './textarea/index.js';

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

@@ -0,0 +1,15 @@
+export { Slider, SliderBar, SliderBarContext, SliderContext, SliderOutput, SliderOutputContext, SliderThumb, SliderThumbContext, SliderTrack, SliderTrackContext } from './slider.js';
+export { sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars } from './slider.css.js';
+export { SliderClassNames, SliderLayout, SliderProps, SliderRenderProps, SliderState, SliderThumbProps, SliderThumbState } from './types.js';
+import 'react';
+import 'react-aria-components';
+import '../../types/react-aria.js';
+import 'type-fest';
+import '../../types/generic.js';
+import '../group/types.js';
+import '@react-types/shared';
+import '../number-field/types.js';
+import '../button/types.js';
+import '../../types/props.js';
+import '../icon/types.js';
+import '../input/types.js';

package/dist/components/slider/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Slider, SliderBar, SliderBarContext, SliderContext, SliderOutput, SliderOutputContext, SliderThumb, SliderThumbContext, SliderTrack, SliderTrackContext } from './slider.js';
+export { sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars } from './slider.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

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

@@ -0,0 +1,66 @@
+import { SliderClassNames } from './types.js';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/react-aria.js';
+import 'react';
+import '../group/types.js';
+import '@react-types/shared';
+import '../number-field/types.js';
+import '../button/types.js';
+import '../../types/props.js';
+import '../icon/types.js';
+import '../input/types.js';
+
+declare const sliderColorVars: {
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    thumb: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    track: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    bar: {
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const sliderSpaceVars: {
+    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    margin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    track: {
+        minDimension: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        thickness: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    thumb: {
+        height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    bar: {
+        height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const sliderStateVars: {
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const sliderThumbStateVars: {
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDragging: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const sliderTrackStateVars: {
+    layout: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const sliderClassNames: SliderClassNames;
+
+export { sliderClassNames, sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars };

package/dist/components/slider/slider.css.js

@@ -0,0 +1,13 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/slider/slider.css.ts
+var sliderClassNames = { slider: { container: "slider_sliderClassNames_slider_container__1bot8cnr", slider: "slider_sliderClassNames_slider_slider__1bot8cns", label: "slider_sliderClassNames_slider_label__1bot8cnt", tick: "slider_sliderClassNames_slider_tick__1bot8cnu", min: "slider_sliderClassNames_slider_min__1bot8cnv", max: "slider_sliderClassNames_slider_max__1bot8cnw" }, track: { container: "slider_sliderClassNames_track_container__1bot8cnx", track: "slider_sliderClassNames_track_track__1bot8cny", bar: "slider_sliderClassNames_track_bar__1bot8cnz" }, thumb: { container: "slider_sliderClassNames_thumb_container__1bot8cn10", thumb: "slider_sliderClassNames_thumb_thumb__1bot8cn11" }, numberField: { container: "slider_sliderClassNames_numberField_container__1bot8cn12" }, group: { group: "slider_sliderClassNames_group_group__1bot8cn13" }, output: { container: "slider_sliderClassNames_output_container__1bot8cn14", output: "slider_sliderClassNames_output_output__1bot8cn15" } };
+var sliderColorVars = { color: "var(--color__1bot8cn0)", background: "var(--background__1bot8cn1)", boxShadow: "var(--boxShadow__1bot8cn2)", thumb: { color: "var(--thumb-color__1bot8cn3)" }, track: { color: "var(--track-color__1bot8cn4)" }, bar: { color: "var(--bar-color__1bot8cn5)" } };
+var sliderSpaceVars = { gap: "var(--gap__1bot8cn6)", margin: "var(--margin__1bot8cn7)", track: { minDimension: "var(--track-minDimension__1bot8cn8)", thickness: "var(--track-thickness__1bot8cn9)" }, thumb: { height: "var(--thumb-height__1bot8cna)", width: "var(--thumb-width__1bot8cnb)", borderRadius: "var(--thumb-borderRadius__1bot8cnc)" }, bar: { height: "var(--bar-height__1bot8cnd)", width: "var(--bar-width__1bot8cne)" } };
+var sliderStateVars = { layout: "var(--layout__1bot8cnf)", orientation: "var(--orientation__1bot8cng)", isDisabled: "var(--isDisabled__1bot8cnh)" };
+var sliderThumbStateVars = { layout: "var(--layout__1bot8cni)", isDisabled: "var(--isDisabled__1bot8cnj)", isDragging: "var(--isDragging__1bot8cnk)", isFocused: "var(--isFocused__1bot8cnl)", isFocusVisible: "var(--isFocusVisible__1bot8cnm)", isHovered: "var(--isHovered__1bot8cnn)" };
+var sliderTrackStateVars = { layout: "var(--layout__1bot8cno)", isDisabled: "var(--isDisabled__1bot8cnp)", isHovered: "var(--isHovered__1bot8cnq)" };
+
+export { sliderClassNames, sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars };
+//# sourceMappingURL=slider.css.js.map
+//# sourceMappingURL=slider.css.js.map

package/dist/components/slider/slider.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/slider/slider.css.ts"],"names":[],"mappings":";;;AAAW,IAAA,gBAAA,GAAmB,EAAC,MAAO,EAAA,EAAC,WAAU,oDAAqD,EAAA,MAAA,EAAO,iDAAkD,EAAA,KAAA,EAAM,gDAAiD,EAAA,IAAA,EAAK,iDAAgD,GAAI,EAAA,8CAAA,EAA+C,KAAI,8CAA8C,EAAA,EAAE,OAAM,EAAC,SAAA,EAAU,mDAAoD,EAAA,KAAA,EAAM,+CAAgD,EAAA,GAAA,EAAI,+CAA+C,EAAA,KAAA,EAAM,EAAC,SAAU,EAAA,oDAAA,EAAqD,OAAM,gDAAgD,EAAA,EAAE,WAAY,EAAA,EAAC,SAAU,EAAA,0DAAA,IAA4D,KAAM,EAAA,EAAC,KAAM,EAAA,gDAAA,EAAkD,EAAA,MAAA,EAAO,EAAC,SAAU,EAAA,qDAAA,EAAsD,MAAO,EAAA,kDAAA,EAAmD;AACv6B,IAAA,eAAA,GAAkB,EAAC,KAAM,EAAA,wBAAA,EAAyB,YAAW,6BAA8B,EAAA,SAAA,EAAU,4BAA6B,EAAA,KAAA,EAAM,EAAC,KAAA,EAAM,gCAAgC,EAAA,KAAA,EAAM,EAAC,KAAM,EAAA,8BAAA,IAAgC,GAAI,EAAA,EAAC,KAAM,EAAA,4BAAA,EAA6B;AACxQ,IAAI,eAAkB,GAAA,EAAC,GAAI,EAAA,sBAAA,EAAuB,MAAO,EAAA,yBAAA,EAA0B,KAAM,EAAA,EAAC,YAAa,EAAA,qCAAA,EAAsC,SAAU,EAAA,kCAAA,EAAoC,EAAA,KAAA,EAAM,EAAC,MAAA,EAAO,+BAAgC,EAAA,KAAA,EAAM,8BAA+B,EAAA,YAAA,EAAa,qCAAqC,EAAA,EAAE,GAAI,EAAA,EAAC,MAAO,EAAA,6BAAA,EAA8B,KAAM,EAAA,4BAAA,EAA6B;AAC/Y,IAAI,kBAAkB,EAAC,MAAA,EAAO,2BAA0B,WAAY,EAAA,8BAAA,EAA+B,YAAW,6BAA6B;AAC3I,IAAI,oBAAuB,GAAA,EAAC,MAAO,EAAA,yBAAA,EAA0B,UAAW,EAAA,6BAAA,EAA8B,UAAW,EAAA,6BAAA,EAA8B,SAAU,EAAA,4BAAA,EAA6B,cAAe,EAAA,iCAAA,EAAkC,WAAU,4BAA4B;AAC7Q,IAAI,uBAAuB,EAAC,MAAA,EAAO,2BAA0B,UAAW,EAAA,6BAAA,EAA8B,WAAU,4BAA4B","file":"slider.css.js","sourcesContent":["export var sliderClassNames = {slider:{container:'slider_sliderClassNames_slider_container__1bot8cnr',slider:'slider_sliderClassNames_slider_slider__1bot8cns',label:'slider_sliderClassNames_slider_label__1bot8cnt',tick:'slider_sliderClassNames_slider_tick__1bot8cnu',min:'slider_sliderClassNames_slider_min__1bot8cnv',max:'slider_sliderClassNames_slider_max__1bot8cnw'},track:{container:'slider_sliderClassNames_track_container__1bot8cnx',track:'slider_sliderClassNames_track_track__1bot8cny',bar:'slider_sliderClassNames_track_bar__1bot8cnz'},thumb:{container:'slider_sliderClassNames_thumb_container__1bot8cn10',thumb:'slider_sliderClassNames_thumb_thumb__1bot8cn11'},numberField:{container:'slider_sliderClassNames_numberField_container__1bot8cn12'},group:{group:'slider_sliderClassNames_group_group__1bot8cn13'},output:{container:'slider_sliderClassNames_output_container__1bot8cn14',output:'slider_sliderClassNames_output_output__1bot8cn15'}};\nexport var sliderColorVars = {color:'var(--color__1bot8cn0)',background:'var(--background__1bot8cn1)',boxShadow:'var(--boxShadow__1bot8cn2)',thumb:{color:'var(--thumb-color__1bot8cn3)'},track:{color:'var(--track-color__1bot8cn4)'},bar:{color:'var(--bar-color__1bot8cn5)'}};\nexport var sliderSpaceVars = {gap:'var(--gap__1bot8cn6)',margin:'var(--margin__1bot8cn7)',track:{minDimension:'var(--track-minDimension__1bot8cn8)',thickness:'var(--track-thickness__1bot8cn9)'},thumb:{height:'var(--thumb-height__1bot8cna)',width:'var(--thumb-width__1bot8cnb)',borderRadius:'var(--thumb-borderRadius__1bot8cnc)'},bar:{height:'var(--bar-height__1bot8cnd)',width:'var(--bar-width__1bot8cne)'}};\nexport var sliderStateVars = {layout:'var(--layout__1bot8cnf)',orientation:'var(--orientation__1bot8cng)',isDisabled:'var(--isDisabled__1bot8cnh)'};\nexport var sliderThumbStateVars = {layout:'var(--layout__1bot8cni)',isDisabled:'var(--isDisabled__1bot8cnj)',isDragging:'var(--isDragging__1bot8cnk)',isFocused:'var(--isFocused__1bot8cnl)',isFocusVisible:'var(--isFocusVisible__1bot8cnm)',isHovered:'var(--isHovered__1bot8cnn)'};\nexport var sliderTrackStateVars = {layout:'var(--layout__1bot8cno)',isDisabled:'var(--isDisabled__1bot8cnp)',isHovered:'var(--isHovered__1bot8cnq)'};"]}

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

@@ -0,0 +1,49 @@
+import * as react from 'react';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import { RenderPropsChildren } from '../../types/react-aria.js';
+import { SliderRenderProps, SliderClassNames, SliderLayout, SliderProps, SliderBarProps, SliderOutputProps, SliderThumbProps, SliderTrackProps } from './types.js';
+import 'type-fest';
+import '../../types/generic.js';
+import '../group/types.js';
+import '@react-types/shared';
+import '../number-field/types.js';
+import '../button/types.js';
+import '../../types/props.js';
+import '../icon/types.js';
+import '../input/types.js';
+
+declare const SliderBarContext: react.Context<ContextValue<SliderBarProps, HTMLDivElement>>;
+/**
+ * SliderBar is optional, but must be used as a child of SliderTrack
+ */
+declare const SliderBar: (props: SliderBarProps & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const SliderOutputContext: react.Context<ContextValue<SliderOutputProps, HTMLOutputElement>>;
+declare const SliderOutput: (props: Omit<react_aria_components.SliderOutputProps, "className" | "style"> & {
+    classNames?: SliderClassNames;
+} & react.RefAttributes<HTMLOutputElement>) => react.ReactElement | null;
+declare const SliderTrackContext: react.Context<ContextValue<SliderTrackProps, HTMLDivElement>>;
+/**
+ * SliderTrack must be used as a child of Slider, a parent of SliderThumb,
+ * and if used, a parent of SliderBar
+ */
+declare const SliderTrack: (props: Omit<react_aria_components.SliderTrackProps, "className" | "style"> & {
+    classNames?: SliderClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const SliderThumbContext: react.Context<ContextValue<SliderThumbProps, HTMLDivElement>>;
+/**
+ * SliderThumb must be used as a child of SliderTrack
+ */
+declare const SliderThumb: (props: Omit<react_aria_components.SliderThumbProps, "className" | "style"> & {
+    classNames?: SliderClassNames;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const SliderContext: react.Context<ContextValue<SliderProps, HTMLDivElement>>;
+declare const Slider: (props: Omit<react_aria_components.SliderProps<number | number[]>, "children" | "style" | "classname"> & {
+    children?: RenderPropsChildren<SliderRenderProps>;
+    classNames?: SliderClassNames;
+    layout?: SliderLayout;
+    minValue?: number;
+    maxValue?: number;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { Slider, SliderBar, SliderBarContext, SliderContext, SliderOutput, SliderOutputContext, SliderThumb, SliderThumbContext, SliderTrack, SliderTrackContext };

package/dist/components/slider/slider.js

@@ -0,0 +1,230 @@
+import '../../chunk-PZ5AY32C.js';
+import { clsx } from 'clsx';
+import { createContext, forwardRef, useMemo, useContext, useCallback } from 'react';
+import { SliderStateContext, SliderOutput as SliderOutput$1, Provider, SliderTrack as SliderTrack$1, SliderThumb as SliderThumb$1, LabelContext, DEFAULT_SLOT, Slider as Slider$1 } from 'react-aria-components';
+import { AriaTextContext, NumberFieldContext, GroupContext } from '../../components/index.js';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { sliderClassNames, sliderStateVars, sliderTrackStateVars, sliderThumbStateVars } from './slider.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var SliderBarContext = createContext(null);
+var SliderBar = forwardRef(function SliderBar2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SliderBarContext);
+  props = useDefaultProps(props, "SliderBar");
+  const { classNames: classNamesProp, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),
+    [theme.Slider, classNamesProp]
+  );
+  const state = useContext(SliderStateContext);
+  const min = state.getThumbPercent(0);
+  const max = state.getThumbPercent(1);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      className: classNames?.track?.bar,
+      style: {
+        position: "absolute",
+        ...state.orientation === "horizontal" && {
+          left: max ? `${min * 100}%` : 0,
+          width: max ? `${(max * 100 || 0) - (min * 100 || 0)}%` : `${min * 100}%`
+        },
+        ...state.orientation === "vertical" && {
+          bottom: max ? `${min * 100}%` : 0,
+          height: max ? `${(max * 100 || 0) - (min * 100 || 0)}%` : `${min * 100}%`
+        }
+      }
+    }
+  );
+});
+var SliderOutputContext = createContext(null);
+var SliderOutput = forwardRef(function SliderOutput2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SliderOutputContext);
+  props = useDefaultProps(props, "SliderOutput");
+  const { children: childrenProp, classNames: classNamesProp, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),
+    [theme.Slider, classNamesProp]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(sliderStateVars, renderProps),
+    []
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx("div", { className: classNames?.output?.output, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }),
+    [childrenProp, classNames?.output?.output]
+  );
+  return /* @__PURE__ */ jsx(
+    SliderOutput$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.output?.container,
+      style,
+      children
+    }
+  );
+});
+var SliderTrackContext = createContext(null);
+var SliderTrack = forwardRef(function SliderTrack2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SliderTrackContext);
+  props = useDefaultProps(props, "SliderTrack");
+  const { children: childrenProp, classNames: classNamesProp, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),
+    [theme.Slider, classNamesProp]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(sliderTrackStateVars, renderProps),
+    []
+  );
+  const values = useMemo(
+    () => [
+      [SliderThumbContext, { classNames }],
+      [SliderBarContext, { classNames }]
+    ],
+    [classNames]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx("div", { className: classNames?.track?.track, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }) }),
+    [childrenProp, values, classNames?.track?.track]
+  );
+  return /* @__PURE__ */ jsx(
+    SliderTrack$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.track?.container,
+      style,
+      children
+    }
+  );
+});
+var SliderThumbContext = createContext(null);
+var SliderThumb = forwardRef(function SliderThumb2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SliderThumbContext);
+  props = useDefaultProps(props, "SliderThumb");
+  const { children: childrenProp, classNames: classNamesProp, ...rest } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),
+    [theme.Slider, classNamesProp]
+  );
+  const style = useCallback(
+    (renderProps) => inlineVars(sliderThumbStateVars, renderProps),
+    []
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx("div", { className: classNames?.thumb?.thumb, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      defaultChildren: null
+    }) }),
+    [childrenProp, classNames?.thumb?.thumb]
+  );
+  return /* @__PURE__ */ jsx(
+    SliderThumb$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.thumb?.container,
+      style,
+      children
+    }
+  );
+});
+var SliderContext = createContext(null);
+var Slider = forwardRef(function Slider2(props, ref) {
+  [props, ref] = useContextProps(props, ref, SliderContext);
+  props = useDefaultProps(props, "Slider");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    layout = "stacked",
+    orientation = "horizontal",
+    isDisabled,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),
+    [theme.Slider, classNamesProp]
+  );
+  const style = useCallback(
+    ({ ...renderProps }) => inlineVars(sliderStateVars, {
+      ...renderProps,
+      layout
+    }),
+    [layout]
+  );
+  const values = useMemo(
+    () => [
+      [LabelContext, { className: classNames?.slider?.label }],
+      [
+        AriaTextContext,
+        {
+          slots: {
+            [DEFAULT_SLOT]: {},
+            min: {
+              className: clsx(
+                classNames?.slider?.tick,
+                classNames?.slider?.min
+              )
+            },
+            max: {
+              className: clsx(
+                classNames?.slider?.tick,
+                classNames?.slider?.max
+              )
+            }
+          }
+        }
+      ],
+      [NumberFieldContext, { classNames: classNames?.numberField, isDisabled }],
+      [SliderOutputContext, { classNames }],
+      [SliderTrackContext, { classNames }],
+      [
+        GroupContext,
+        {
+          classNames: classNames?.group,
+          context: NumberFieldContext,
+          orientation,
+          reverse: orientation === "vertical",
+          values: { classNames: classNames?.group?.numberField }
+        }
+      ]
+    ],
+    [classNames, orientation, isDisabled]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx(Provider, { values, children: /* @__PURE__ */ jsx("div", { className: classNames?.slider?.slider, children: callRenderProps(childrenProp, renderProps) }) }),
+    [childrenProp, classNames?.slider, values]
+  );
+  return /* @__PURE__ */ jsx(
+    Slider$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.slider?.container,
+      orientation,
+      style,
+      isDisabled,
+      children
+    }
+  );
+});
+
+export { Slider, SliderBar, SliderBarContext, SliderContext, SliderOutput, SliderOutputContext, SliderThumb, SliderThumbContext, SliderTrack, SliderTrackContext };
+//# sourceMappingURL=slider.js.map
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/slider/slider.tsx"],"names":["SliderBar","SliderOutput","RACSliderOutput","SliderTrack","RACSliderTrack","SliderThumb","RACSliderThumb","Slider","RACSlider"],"mappings":"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","file":"slider.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport { clsx } from 'clsx';\nimport {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  DEFAULT_SLOT,\n  LabelContext,\n  type LabelProps,\n  Provider,\n  Slider as RACSlider,\n  SliderOutput as RACSliderOutput,\n  SliderThumb as RACSliderThumb,\n  SliderTrack as RACSliderTrack,\n  SliderStateContext,\n  type TextProps,\n} from 'react-aria-components';\nimport {\n  type AriaLabelContext,\n  AriaTextContext,\n  GroupContext,\n  type GroupProps,\n  NumberFieldContext,\n  type NumberFieldProps,\n} from '../../components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  sliderClassNames,\n  sliderStateVars,\n  sliderThumbStateVars,\n  sliderTrackStateVars,\n} from './slider.css';\nimport type {\n  SliderBarProps,\n  SliderOutputProps,\n  SliderProps,\n  SliderRenderProps,\n  SliderThumbProps,\n  SliderThumbRenderProps,\n  SliderTrackProps,\n  SliderTrackRenderProps,\n} from './types';\n\nexport const SliderBarContext =\n  createContext<ContextValue<SliderBarProps, HTMLDivElement>>(null);\n\n/**\n * SliderBar is optional, but must be used as a child of SliderTrack\n */\nexport const SliderBar = forwardRef(function SliderBar(\n  props: SliderBarProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SliderBarContext);\n\n  props = useDefaultProps(props, 'SliderBar');\n\n  const { classNames: classNamesProp, ...rest } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),\n    [theme.Slider, classNamesProp],\n  );\n\n  const state = useContext(SliderStateContext);\n\n  const min = state.getThumbPercent(0);\n  const max = state.getThumbPercent(1);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={classNames?.track?.bar}\n      style={{\n        position: 'absolute',\n        ...(state.orientation === 'horizontal' && {\n          left: max ? `${min * 100}%` : 0,\n          width: max\n            ? `${(max * 100 || 0) - (min * 100 || 0)}%`\n            : `${min * 100}%`,\n        }),\n        ...(state.orientation === 'vertical' && {\n          bottom: max ? `${min * 100}%` : 0,\n          height: max\n            ? `${(max * 100 || 0) - (min * 100 || 0)}%`\n            : `${min * 100}%`,\n        }),\n      }}\n    />\n  );\n});\n\nexport const SliderOutputContext =\n  createContext<ContextValue<SliderOutputProps, HTMLOutputElement>>(null);\n\nexport const SliderOutput = forwardRef(function SliderOutput(\n  props: SliderOutputProps,\n  ref: ForwardedRef<HTMLOutputElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SliderOutputContext);\n\n  props = useDefaultProps(props, 'SliderOutput');\n\n  const { children: childrenProp, classNames: classNamesProp, ...rest } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),\n    [theme.Slider, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: SliderRenderProps) =>\n      inlineVars(sliderStateVars, renderProps),\n    [],\n  );\n\n  const children = useCallback(\n    (renderProps: SliderRenderProps) => (\n      <div className={classNames?.output?.output}>\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [childrenProp, classNames?.output?.output],\n  );\n\n  return (\n    <RACSliderOutput\n      {...rest}\n      ref={ref}\n      className={classNames?.output?.container}\n      style={style}\n    >\n      {children}\n    </RACSliderOutput>\n  );\n});\n\nexport const SliderTrackContext =\n  createContext<ContextValue<SliderTrackProps, HTMLDivElement>>(null);\n\n/**\n * SliderTrack must be used as a child of Slider, a parent of SliderThumb,\n * and if used, a parent of SliderBar\n */\nexport const SliderTrack = forwardRef(function SliderTrack(\n  props: SliderTrackProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SliderTrackContext);\n\n  props = useDefaultProps(props, 'SliderTrack');\n\n  const { children: childrenProp, classNames: classNamesProp, ...rest } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),\n    [theme.Slider, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: SliderTrackRenderProps) =>\n      inlineVars(sliderTrackStateVars, renderProps),\n    [],\n  );\n\n  const values = useMemo<\n    [\n      [\n        typeof SliderThumbContext,\n        ContextValue<SliderThumbProps, HTMLDivElement>,\n      ],\n      [typeof SliderBarContext, ContextValue<SliderBarProps, HTMLDivElement>],\n    ]\n  >(\n    () => [\n      [SliderThumbContext, { classNames }],\n      [SliderBarContext, { classNames }],\n    ],\n    [classNames],\n  );\n\n  const children = useCallback(\n    (renderProps: SliderTrackRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.track?.track}>\n          {callRenderProps(childrenProp, {\n            ...renderProps,\n            defaultChildren: null,\n          })}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, values, classNames?.track?.track],\n  );\n\n  return (\n    <RACSliderTrack\n      {...rest}\n      ref={ref}\n      className={classNames?.track?.container}\n      style={style}\n    >\n      {children}\n    </RACSliderTrack>\n  );\n});\n\nexport const SliderThumbContext =\n  createContext<ContextValue<SliderThumbProps, HTMLDivElement>>(null);\n\n/**\n * SliderThumb must be used as a child of SliderTrack\n */\nexport const SliderThumb = forwardRef(function SliderThumb(\n  props: SliderThumbProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SliderThumbContext);\n\n  props = useDefaultProps(props, 'SliderThumb');\n\n  const { children: childrenProp, classNames: classNamesProp, ...rest } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),\n    [theme.Slider, classNamesProp],\n  );\n\n  const style = useCallback(\n    (renderProps: SliderThumbRenderProps) =>\n      inlineVars(sliderThumbStateVars, renderProps),\n    [],\n  );\n\n  const children = useCallback(\n    (renderProps: SliderThumbRenderProps) => (\n      <div className={classNames?.thumb?.thumb}>\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          defaultChildren: null,\n        })}\n      </div>\n    ),\n    [childrenProp, classNames?.thumb?.thumb],\n  );\n\n  return (\n    <RACSliderThumb\n      {...rest}\n      ref={ref}\n      className={classNames?.thumb?.container}\n      style={style}\n    >\n      {children}\n    </RACSliderThumb>\n  );\n});\n\nexport const SliderContext =\n  createContext<ContextValue<SliderProps, HTMLDivElement>>(null);\n\nexport const Slider = forwardRef(function Slider(\n  props: SliderProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, SliderContext);\n\n  props = useDefaultProps(props, 'Slider');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    layout = 'stacked',\n    orientation = 'horizontal',\n    isDisabled,\n    ...rest\n  } = props;\n\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(sliderClassNames, theme.Slider, classNamesProp),\n    [theme.Slider, classNamesProp],\n  );\n\n  const style = useCallback(\n    ({ ...renderProps }: SliderRenderProps) =>\n      inlineVars(sliderStateVars, {\n        ...renderProps,\n        layout,\n      }),\n    [layout],\n  );\n\n  const values = useMemo<\n    [\n      [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n      [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n      [\n        typeof NumberFieldContext,\n        ContextValue<NumberFieldProps, HTMLDivElement>,\n      ],\n      [\n        typeof SliderOutputContext,\n        ContextValue<SliderOutputProps, HTMLOutputElement>,\n      ],\n      [\n        typeof SliderTrackContext,\n        ContextValue<SliderTrackProps, HTMLDivElement>,\n      ],\n      [\n        typeof GroupContext,\n        ContextValue<\n          GroupProps<NumberFieldProps, HTMLDivElement>,\n          HTMLDivElement\n        >,\n      ],\n    ]\n  >(\n    () => [\n      [LabelContext, { className: classNames?.slider?.label }],\n      [\n        AriaTextContext,\n        {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            min: {\n              className: clsx(\n                classNames?.slider?.tick,\n                classNames?.slider?.min,\n              ),\n            },\n            max: {\n              className: clsx(\n                classNames?.slider?.tick,\n                classNames?.slider?.max,\n              ),\n            },\n          },\n        },\n      ],\n      [NumberFieldContext, { classNames: classNames?.numberField, isDisabled }],\n      [SliderOutputContext, { classNames }],\n      [SliderTrackContext, { classNames }],\n      [\n        GroupContext,\n        {\n          classNames: classNames?.group,\n          context: NumberFieldContext,\n          orientation,\n          reverse: orientation === 'vertical',\n          values: { classNames: classNames?.group?.numberField },\n        },\n      ],\n    ],\n    [classNames, orientation, isDisabled],\n  );\n\n  const children = useCallback(\n    (renderProps: SliderRenderProps) => (\n      <Provider values={values}>\n        <div className={classNames?.slider?.slider}>\n          {callRenderProps(childrenProp, renderProps)}\n        </div>\n      </Provider>\n    ),\n    [childrenProp, classNames?.slider, values],\n  );\n\n  return (\n    <RACSlider\n      {...rest}\n      ref={ref}\n      className={classNames?.slider?.container}\n      orientation={orientation}\n      style={style}\n      isDisabled={isDisabled}\n    >\n      {children}\n    </RACSlider>\n  );\n});\n"]}

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

@@ -0,0 +1,71 @@
+import { SliderRenderProps as SliderRenderProps$1, SliderProps as SliderProps$1, SliderThumbProps as SliderThumbProps$1, SliderThumbRenderProps as SliderThumbRenderProps$1, NumberFieldProps, SliderOutputProps as SliderOutputProps$1, SliderTrackProps as SliderTrackProps$1, SliderTrackRenderProps as SliderTrackRenderProps$1 } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+import { AsType } from '../../types/generic.js';
+import { RenderPropsChildren } from '../../types/react-aria.js';
+import { GroupClassNames } from '../group/types.js';
+import { NumberFieldClassNames } from '../number-field/types.js';
+import 'react';
+import '@react-types/shared';
+import '../button/types.js';
+import '../../types/props.js';
+import '../icon/types.js';
+import '../input/types.js';
+
+type SliderClassNames = PartialDeep<{
+    slider: {
+        container: string;
+        slider: string;
+        label: string;
+        tick: string;
+        min: string;
+        max: string;
+    };
+    track: {
+        container: string;
+        track: string;
+        bar: string;
+    };
+    thumb: {
+        container: string;
+        thumb: string;
+    };
+    numberField: NumberFieldClassNames;
+    output: {
+        container: string;
+        output: string;
+    };
+    group: GroupClassNames & {
+        numberField: NumberFieldClassNames;
+    };
+}>;
+type SliderLayout = 'stacked' | 'inline';
+type SliderRenderProps = AsType<SliderRenderProps$1>;
+type SliderThumbRenderProps = AsType<SliderThumbRenderProps$1>;
+type SliderTrackRenderProps = AsType<SliderTrackRenderProps$1>;
+type BaseSliderProps = {
+    children?: RenderPropsChildren<SliderRenderProps>;
+    classNames?: SliderClassNames;
+    layout?: SliderLayout;
+    minValue?: number;
+    maxValue?: number;
+};
+type SliderState = Omit<SliderRenderProps$1, 'state'> & Required<Pick<BaseSliderProps, 'layout'>>;
+type SliderProps = Omit<SliderProps$1, 'children' | 'classname' | 'style'> & BaseSliderProps;
+type SliderThumbProps = Omit<SliderThumbProps$1, 'className' | 'style'> & {
+    classNames?: SliderClassNames;
+};
+type SliderThumbState = Omit<SliderThumbRenderProps$1, 'state'>;
+type SliderTrackProps = Omit<SliderTrackProps$1, 'className' | 'style'> & {
+    classNames?: SliderClassNames;
+};
+type SliderInputProps = Omit<NumberFieldProps, 'className' | 'style'> & {
+    classNames?: SliderClassNames;
+};
+type SliderOutputProps = Omit<SliderOutputProps$1, 'className' | 'style'> & {
+    classNames?: SliderClassNames;
+};
+type SliderBarProps = {
+    classNames?: SliderClassNames;
+};
+
+export type { SliderBarProps, SliderClassNames, SliderInputProps, SliderLayout, SliderOutputProps, SliderProps, SliderRenderProps, SliderState, SliderThumbProps, SliderThumbRenderProps, SliderThumbState, SliderTrackProps, SliderTrackRenderProps };

package/dist/components/slider/types.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/components/slider/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

package/dist/hooks/index.d.ts

@@ -12,25 +12,26 @@ import '@react-types/shared';
 import 'react';
 import 'react-aria-components';
 import 'react/jsx-runtime';
+import '../components/slider/types.js';
+import 'type-fest';
+import '../types/generic.js';
+import '../types/react-aria.js';
+import '../components/group/types.js';
+import '../components/number-field/types.js';
 import '../components/button/types.js';
 import '../types/props.js';
-import '../types/react-aria.js';
 import '../components/icon/types.js';
+import '../components/input/types.js';
 import '../components/checkbox/types.js';
-import 'type-fest';
 import '../components/chip/types.js';
-import '../types/generic.js';
 import '../components/combo-box/types.js';
-import '../components/input/types.js';
 import '../components/options/types.js';
 import '../components/dialog/types.js';
-import '../components/group/types.js';
 import '../components/drawer/types.js';
 import '@react-aria/overlays';
 import '@react-stately/overlays';
 import '../components/tabs/types.js';
 import '../components/menu/types.js';
-import '../components/number-field/types.js';
 import '../components/picker/types.js';
 import '../components/popover/types.js';
 import '../components/radio/types.js';

package/dist/hooks/use-defaults/index.d.ts

@@ -1,28 +1,29 @@
 export { DefaultsProvider, useDefaultProps, useDefaults } from './use-defaults.js';
 export { DefaultsContext, DefaultsProviderProps } from './types.js';
 import 'react/jsx-runtime';
-import '../../components/button/types.js';
+import '../../components/slider/types.js';
 import 'react-aria-components';
-import '../../types/props.js';
+import 'type-fest';
+import '../../types/generic.js';
 import '../../types/react-aria.js';
 import 'react';
+import '../../components/group/types.js';
+import '@react-types/shared';
+import '../../components/number-field/types.js';
+import '../../components/button/types.js';
+import '../../types/props.js';
 import '../../components/icon/types.js';
+import '../../components/input/types.js';
 import '../../components/checkbox/types.js';
-import '@react-types/shared';
-import 'type-fest';
 import '../../components/chip/types.js';
-import '../../types/generic.js';
 import '../../components/combo-box/types.js';
-import '../../components/input/types.js';
 import '../../components/options/types.js';
 import '../../components/dialog/types.js';
-import '../../components/group/types.js';
 import '../../components/drawer/types.js';
 import '@react-aria/overlays';
 import '@react-stately/overlays';
 import '../../components/tabs/types.js';
 import '../../components/menu/types.js';
-import '../../components/number-field/types.js';
 import '../../components/picker/types.js';
 import '../../components/popover/types.js';
 import '../../components/radio/types.js';

package/dist/hooks/use-defaults/types.d.ts

@@ -15,6 +15,7 @@ import { PopoverProps } from '../../components/popover/types.js';
 import { RadioProps, RadioGroupProps } from '../../components/radio/types.js';
 import { SearchFieldProps } from '../../components/search-field/types.js';
 import { SelectProps } from '../../components/select/types.js';
+import { SliderProps, SliderBarProps, SliderInputProps, SliderOutputProps, SliderThumbProps, SliderTrackProps } from '../../components/slider/types.js';
 import { SwitchProps } from '../../components/switch/types.js';
 import { TabProps, TabListProps, TabPanelProps, TabPanelsProps, TabsProps } from '../../components/tabs/types.js';
 import { TextFieldProps } from '../../components/text-field/types.js';
@@ -63,6 +64,12 @@ type DefaultsContext = DefaultsOf<{
     RadioGroup: RadioGroupProps;
     SearchField: SearchFieldProps;
     Select: SelectProps<object>;
+    Slider: SliderProps;
+    SliderBar: SliderBarProps;
+    SliderInput: SliderInputProps;
+    SliderOutput: SliderOutputProps;
+    SliderThumb: SliderThumbProps;
+    SliderTrack: SliderTrackProps;
     Switch: SwitchProps;
     Tab: TabProps;
     TabList: TabListProps<unknown>;

package/dist/hooks/use-defaults/use-defaults.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SliderProps, SliderBarProps, SliderInputProps, SliderOutputProps, SliderThumbProps, SliderTrackProps } from '../../components/slider/types.js';
 import { ButtonProps, LinkButtonProps, ToggleButtonProps } from '../../components/button/types.js';
 import { CheckboxProps, CheckboxGroupProps } from '../../components/checkbox/types.js';
 import { ChipProps, ChipGroupProps } from '../../components/chip/types.js';
@@ -24,12 +25,12 @@ import { TooltipProps, TooltipTargetProps } from '../../components/tooltip/types
 import { TreeProps } from '../../components/tree/types.js';
 import { DefaultsProviderProps, DefaultsContext } from './types.js';
 import 'react-aria-components';
-import '../../types/react-aria.js';
-import 'react';
-import '@react-types/shared';
 import 'type-fest';
 import '../../types/generic.js';
+import '../../types/react-aria.js';
+import 'react';
 import '../../components/group/types.js';
+import '@react-types/shared';
 import '@react-aria/overlays';
 import '@react-stately/overlays';
 import '../../types/use-tree.js';
@@ -65,6 +66,12 @@ declare function useDefaults(): {
     RadioGroup?: OmitProtectedProps<RadioGroupProps> | undefined;
     SearchField?: OmitProtectedProps<SearchFieldProps> | undefined;
     Select?: OmitProtectedProps<SelectProps<object>> | undefined;
+    Slider?: OmitProtectedProps<SliderProps> | undefined;
+    SliderBar?: OmitProtectedProps<SliderBarProps> | undefined;
+    SliderInput?: OmitProtectedProps<SliderInputProps> | undefined;
+    SliderOutput?: OmitProtectedProps<SliderOutputProps> | undefined;
+    SliderThumb?: OmitProtectedProps<SliderThumbProps> | undefined;
+    SliderTrack?: OmitProtectedProps<SliderTrackProps> | undefined;
     Switch?: OmitProtectedProps<SwitchProps> | undefined;
     Tab?: OmitProtectedProps<TabProps> | undefined;
     TabList?: OmitProtectedProps<TabListProps<unknown>> | undefined;

package/dist/hooks/use-theme/index.d.ts

@@ -36,6 +36,7 @@ import '../../components/tooltip/types.js';
 import '../../components/tree/types.js';
 import '../../types/use-tree.js';
 import '@react-stately/data';
+import '../../components/slider/types.js';
 import 'react/jsx-runtime';
 import '../../types/vanilla-extract.js';
 import '@vanilla-extract/css';

package/dist/hooks/use-theme/types.d.ts

@@ -19,10 +19,11 @@ import { SearchFieldClassNames } from '../../components/search-field/types.js';
 import { SelectClassNames } from '../../components/select/types.js';
 import { SwitchClassNames } from '../../components/switch/types.js';
 import { TabsClassNames } from '../../components/tabs/types.js';
-import { TextFieldClassNames } from '../../components/text-field/types.js';
 import { TextAreaClassNames } from '../../components/textarea/types.js';
+import { TextFieldClassNames } from '../../components/text-field/types.js';
 import { TooltipClassNames } from '../../components/tooltip/types.js';
 import { TreeClassNames } from '../../components/tree/types.js';
+import { SliderClassNames } from '../../components/slider/types.js';
 import 'react-aria-components';
 import '../../types/props.js';
 import '../../types/react-aria.js';
@@ -65,6 +66,7 @@ type ThemeContext = {
     Radio?: RadioClassNames;
     SearchField?: SearchFieldClassNames;
     Select?: SelectClassNames;
+    Slider?: SliderClassNames;
     Switch?: SwitchClassNames;
     Tabs?: TabsClassNames;
     TextArea?: TextAreaClassNames;

package/dist/hooks/use-theme/use-theme.d.ts

@@ -38,6 +38,7 @@ import '../../components/tooltip/types.js';
 import '../../components/tree/types.js';
 import '../../types/use-tree.js';
 import '@react-stately/data';
+import '../../components/slider/types.js';
 import '@vanilla-extract/css';
 import '../../types/deckgl.js';
 

package/dist/index.css

@@ -750,7 +750,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:src/components/options/options.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VWyW7bMBC95yvYnGrACixnaaNcAjTnXns0RhItM6ZImaS8pPC/F9wkanGjFOlFEjgzbx5n5lF8pnDCApmnXK0FlPjAxXa12m3T3e41vnGWjJcVZ5gp6U2PQ9MNjb0Vnq6ePxd66a3pp0O3rNHvK4RueKUIZ3Ll3j8oSPkTStysrDLOFBCGxWoV3y2Kt/Q+Tk0sQo0pYlDiBPXBvLkF8xCLJwOQE1lROCUopTzb2rW3iLAcHxO0B/E1iipe8b1OTl9JedjdP8zQF1JWXChgSkecp22jzyDO3CZKwqIDydXGZ3SeUUnYL73ehBznzkMJUhRY2LDZzPKuIM8JK/oopyb8bY4Ws5712FhP2mqRUi5yLCIBOamlx5OlL8FtPpuwb0qkGutd/uHeGaQmvtc4DaMnayojiTO93uKtHZ9e+ZxfUL74NqifN7f1i5e+gFNobDDkYVWKcRbWLSRx72eAKFyGhkedftaNC9jddeICw3cTFzY+QXF1RJJTkiMlgMkKBLazjlAK2bYQvGZ5j2NraLC5g8045aLnbtYaz93kwklcgQAVxMYbV7sNJsVGGfY2bwmiIKztqIsMq/at01PvEJTnIZDFYOtDMmLKRnQLxqRBPiwNg+Tjl1NTd6LiV5e1kVQhSG53rL8ihcuKgsIRCAwyQdck4wxRSDFFsoIMIzBauHaWHMtMEJO5ax/DzDitSyYTBLXi9hGvhfkYcxf8EPpaF6CkYGauZYIyzBQWLhaqJJz6Aqp22zB+bI7K6m/SuaScIMQamzg1D2V1cbhs6FBVckxVxrmrqdr71UJqx4oTX5opQ2Ia3O6Vuikx/dCTkNgRGOHSjdxPVkQwOG3ecpg38BvJPoZymF+gNpmb3HChsjr4D7EhMTvnHvK5kTGS6kSx7pJ8IRJSitturhOkRI1nDu3fpNs2mXEVAaX8gJ2Ez5fZbEC+jBQLJ2gNVE6mdGFQXGUEP0RSgVCdeQmMWE/8oKWW9vn/XWzfu32an0335oH7B+WaYven0V9RToS9FehbiT7WLilbw44pm44fScY9OJJiP837xa2/ky2Pzb/fuAen1OL9U8oS6p5S5egp9Rk3QzvIGWf20RDdDhWlHSzi+Q8w00oEPg0AAA== */
+/* vanilla-extract-css-ns:src/components/options/options.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VWyW7bMBC95yvYnGrACixnaaNcAjTnXns0RhItM6ZImaS8pPC/F9wkanGjFOlFNjgzj48z84Z8pnDCApmvXK0FlPjAxXa12m3T3e41vnGWjJcVZ5gp6U2PQ9MNjb0Vnq6ePxd66a3pp0O3rNHvK4RueKUIZ3Llfn9QkPInlLhZWWWcKSAMi9UqvlsUb+l9nJpYhBpTxKDECeqDeXML5iEWTwYgJ7KicEpQSnm2tWtvEWE5PiZoD+JrFFW84nu9OX0l5WF3/zBDX0hZcaGAKRuh7WvKD9EpQVArrlfP0w7X5xVn7mglYdGB5GrjeTjPqCTsl15vQo5z56EEKQosbNhsZrlVkOeEFX2UUxP+NkeLWc96bKwnbbVIKRc5FpGAnNTS48nSJ+Y2n004NyVSjVU0/3BFDVITf6mcU+hInOn1FmztyPRy5/yC3MW3QfK8uU1evPTZm0JjgyEPU1KMs7BuIYl73wBE4TI0POrtZ924gN1dJy4wfDdxYdUTFFdHJDklOVICmKxAYN/+KWTbQvCa5T2OraHB5g4245SLnrtZazx3kxMncQUCVBAbb1zuNpgUG2XY231LEAVhbUVdZJi1b52aeocgPQ+BJgZHH5IRUw6iSzCmC/JhXRgkH7+cunUnKn51uzZ6KgTJ7Yn1v0jhsqKgcAQCg0zQNck4QxRSTJGsIMMIjBaunSXHMhPE7Ny1j2FmnNYlk3aU2k+8Fs1g7bsLfgh9rQtQUjDT1zJBGWYKCxcLVRJ2fQFVe2wYn5mjsvqbdC4pJwixxiZOzUNZXWwuGzpUlRxTlXHuaqr2frWQ2rHixKdmSpOYArdnpa5LTD10JyS2BUa4dCP3kxURNE67bzncN/Ab2X0M5TC/QG0yN7nhQmV1cAmxITHb5x7yuZExkupEsa6SfCESUorbaq4TpESNZw7t36TbFplxFQGl/ICdhM+X2WxAvowkCydoDVROpnShUVxmBD9EUoFQnX4JjFh3/KCklvb5/71133uQmsum++zA/UG5ptjdNPpflBNhXwUJsmPtkrI17Jiy6fhIMu7BSIp9N+8Xt/5Btjw2d79xD6bU4v0pZQl1p1Q5OqU+41loGznjzH4aotuhorSDRTz/AbP/H+FRDQAA */
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
@@ -758,6 +758,7 @@
     container-name: options_optionsContainers_options__140gzb50;
     display: block;
     z-index: var(--popover__ljimwq56) !important;
+    overflow-y: auto;
   }
   .options_optionsClassNames_options_options__140gzb51c {
     min-width: var(--options-minWidth__140gzb5x, var(--trigger-width));
@@ -766,7 +767,7 @@
   }
   .options_optionsClassNames_list_container__140gzb51d {
     container-name: options_optionsContainers_list__140gzb51;
-    display: contents;
+    display: block;
   }
   .options_optionsClassNames_list_section__140gzb51f {
     padding: var(--section-y__140gzb513, 0) var(--section-x__140gzb512, 0);
@@ -1197,7 +1198,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:src/components/drawer/drawer.css.ts.vanilla.css?source=#H4sIAAAAAAAAA8VXQW/bOgy+71cQAwY0D1WRbMDb5l4K7L4ddnk7BbRF22pkyZWUtMFD/vsgW3LSJLWdrF0utmGK5Ef6E/X5TuKaDDRXO88NVvSozWI+f1ikDw/3s5tgyXRVa0XK2Wj6emi6kbNoxdt3d68b+mO0pq8eeosa/n8HcMMNPpKZt7dvEq39jhV5H+VQKDLz+adyJXlaNusBOgNTWFECzwPse01vGycubC1xnTTeHoh/venLzwVKXRzCWAQYJYmidAnMptMPY4OFW4gkQ6RHwV2ZwArNFWOtK2vexYX/Tm6PptwpK5f01L7yT4wLQ5kTWvmC5bJSra3Aei9PgXXM8jlkqZFzoYq9heu47Os1TCfPbU/R9sXbBptREnIy8RZcq9CMrqLCCB5QG8GZo6qW6IihIbQJvE8xW4ATThJkUlt6f2xxW7xNAJdOwyw3zcMJzUApCsWEo8omkJFyZMbW12CL8XQor0JTCMVS7ZyuEpgOBgt8jXEeQhz/lROYDbrnWrttk81+k7e0uV9aJ/I1C/laEyPFY4q7bieAdWtJV4xJXOul+1mKvMPHE8hRWpqETGdvrxO2BUCtrWjZjqnVcukoWpxBFW3Nc65NFWMuDXpLjPfxGqaVjdwmtEJ1e/XTNUihCE1HfZLY7YlZ6xmT6hWZXOrHBErBOaktTOEJxGjlJ1ACSqsAdDOqWcfHx4WK3C9mu7E2LzMGVVbq7ltnCUjK3QRQ8b9EKp8vbLvTgBo/ev8mUtPO+mGox2E4s3zFTTgdovYuBRuft6Xfme3Y/XrC/qipw5W/dseGx9YbbpPeOk8iaO/I8WMmTBx/2v53xbwyOaO8UzfXpeobV56w30oheQxajIXUpxuCsPHiJ4Gt9DkDyyiaj4aygwLA0ZNjjWLa1UoR3+btflL6/yQcpuESKhEvSPgdYZRKnS2CHu7EhSGJTqxoUHU1yaSwrr2EtPch7UtqxelOkHo35nQnRzGw7hgtf13t+nRvo2vqNfloUe6pdTjdVEC+x8GxQRt9fhi1PozarOxRnC8MxgE293+OKAq2LDhjdP0hArNPxJMPuHEjZgjHBZTkpY7BUXNwVL8Ojom+s39yxsa94GH6hl3KUGa9rYJ/gM3+qGGb3xvigKVyEwAA */
+/* vanilla-extract-css-ns:src/components/drawer/drawer.css.ts.vanilla.css?source=#H4sIAAAAAAAAA8VXTW/bMAy971cQAwY0Q1UkG7AP91Kg9+2wy3YKaIu21ciSKylpgyH/fZAtOWmSOk7WNhfbEEXykSKp5xuJSzLQPO00N1jRgzaz6fR+lt7f302ugiTTVa0VKWej6Puu6EpOohSv3928rOlPUZq+uOk1avj7DuCKG3wgM21ftxKt/YEVeR3lUCgy0+nnciF5Wjb7AToBU1hRAk8NbGuNrxslLmwtcZk02h6IX171+ecCpS52YcwCjJJEUboEJuPxh6HGwitYksHSg+CuTGCB5oKxVpU1a3Hjl9H1XpcbYeWSHtsl/8W4MJQ5oZUPWM4r1coKrLf8FFhHL1+Dlxo5F6rY2riM275fwnj0VPYYZd+87GAySkJOJr6CahWS0UVUGMEDaiM4c1TVEh0xNIQ2gfcpZjNwwkmCTGpL7/dtboO3CeDcaZjkpvk4IhkoRaGYcFTZBDJSjszQ+Bps0Z4O4VVoCqFYqp3TVQLjg8ZCvUY798GOP+UEJi1IvSCTS/3AlkkXX6/RXGu3Tr3ZTv26mO7m1ol8yQKKVsRI8ejipusPsG4p6YIxiUs9d79KkXeoeQI5Skuj4OnkpjuiWQBqbUXbA5haLeeOosQZVFHWfOfaVNHm3KCXRHufLmFc2VjxhFaoroM/X4IUitB0DUESu06ZtJrRaTylBErBOak1TOHLitHCz6UElFYB6GpQsvYPlTMFuR3Mut1Wz1cMqqzU3VlnCUjK3QhQ8TcqKu8vNONxQI0fyG+J1LQ3wGGo+2E4M3/BJhwfKu3NEmx0Xrf8TkzH5ukJ+7OmDlf+0hk7PLZesU164zyqQHtHjh8zYeL4O/j3BfN85YTwjm2uc8U3LDxhb0sheTRaDIXUxyYC3fGUKIE1IToBy6AyHwxlAwWAo0fHGh61yaAivtXr/br0/184TMMjRCKeIfYbxCiVOpsFltyRC0MSnVjQQdbVOJPCuvYR3N4Ft8+xFac7murVmNMdScVQdfvK8s/Fpk63GlVTz9QHU3VfWrvTTQXkWzU41GjD2net1rtWm509jPOZwXigmvuPI5KCdRWcMLr+E4HZLsSjL7hhI+YQjjMwyXNdg4Pm4KB87VwTfXf/6ITGPeNl+opZylBmvamCj8Am/5Ww1T/3AzHoiBMAAA== */
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
@@ -1228,6 +1229,7 @@
   }
   .drawer_drawerClassNames_content__3hvldbq {
     flex: 1;
+    overflow-y: auto;
   }
   .drawer_drawerClassNames_footer__3hvldbr {
     display: flex;
@@ -1334,7 +1336,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:src/components/menu/menu.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VWy1LbMBTd9ytUVs0MZjC0tJgNM2XdbZeZG0txRPSKJJOEDv/e0cuWYyfAlG48ic499x7dh6R7Bnuikf+a+VIDJ1up1/P5Zr3YbB7Li4jUkispiLAmQbdj6IKVCYW7T/cf6/oqoYsPd92rRn8+IXTBiWjn7vOTgTG/gBPj/85rKSxQQfR8jpV5xqa89QyEOqQQwEmFehcJiC4i8fLO0zA1isG+Qgsm63VYey6owGRXoSfQX4pCSSWfXET2SPl28+1mhj5TrqS2IKxjvJyUnActIarlVBRbiu0qBXFWBafit1tM5k/nEbWaNg3RgTKbBZkKMKaiGXjYJ+ruHF3OcmSXkK1DgoeF1JjoQgOmrUl+DE87vcazk9tj1NiJiizeURHvIhEPKuL4rj1e12BIbakUnSMcFRxkKJr1SSrLLEsJ7RJVXqZMnY6+IoCz7ZPp4MEqi32dikst4dn6dxd1NmT1mq4GrH79xrPyslaoVDtkJKMYWQ3CKNAkNCxCC6jXjZatwAf6eiC55tFrLZnUB9Z+LRnKN+TKEAUabE8qlzFdK0KblfWiQzwOuqGir10kZpn6NqhewvucfM06fbTfkRJ1Wr7L90SzN+9odu8iEq9eD5abl6sYp5uORlMc9uZ+FZZwxcCSAjQBU6EzWkuBGCwIQ0ZBTRD49j6LCCam1lS5pSE+5bOWrOXCVAhaK8OnXGr/Y8pcy21uG0yA0Ub4rjUVqomwREcuqCrv6QZUt+sf00fd1MScGItjU5ExApho+jyfmKMtFJijgdlMDYy3HYyLSWatNs5OSZqScrovfFG7HT7GxvAlcMWvQtUnNAyI9g3tnjVJF289jpeZTUSdcNKeTyt6gySzktrWbX9p8LGe0MnJ1303msjYPSOuGOaBGlgw0tUMV8jqlsyis3cOZV9EIW0BjMkticP5clzFCszDODdQoSUw8wYp030QM6HltjAWtB20QwYS18ejygW5L//v6Xj8fefvh8F7oD4885aMxMvB/Sow1eHOdm8Fd0IdG1TndWJQH6dPF2/dnS7PqVefLq/Tw+hq113Q3rg7b/avHzdBy+C4WU8eN//2NgvNWksRPimldDwtDn/dFZeaDF2x04P38hcsEa612QwAAA== */
+/* vanilla-extract-css-ns:src/components/menu/menu.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VWy1LbMBTd8xUqq2YGMxgKLWbDTFl322XmxlIcEb0iySShw7939LJl7ASY0o0n0bnn3Kv7kHTPYE808l8zX2rgZCv1ej7frBebzWN5HpFaciUFEdYk6HYMnbMyoXB3cv+50pcJXXy6dB81+nOC0Dknop27z08GxvwCToz/O6+lsEAF0fM5VuYZm/LWMxDqkEIAJxXqJRIQJSLx4s7TMDWKwb5CCybrdVh7LqjAZFehJ9Bfi0JJJZ+cR/ZI+XZzfTNDXyhXUlsQ1jFejoacOy0hRsupKLYU21Vy4qwKTsVvt5jMn84iajVtGqIDZTYLYSrAmIpmoLBP1N0ZupjlyC4hW4cEhYXUmOhCA6atSTqGp51e4dnR7TFq7ERFFh+oiJdIxEMVOR6AIbWlUnQqOLp/lZ5o1meoLLMUJbTLUnmR0nTc+4oAzvZOpp0Hq8z3VaostYRn69+d19mQ1cd0OWD16zeelde0QqXaISMZxchqEEaBJqFbEVpAvW60bAV+FV8PJGkeVWvJpH5l7deSoXxHrgxRoMH2pHIZ07UitFlZH3Twx0E3VPS1i8QsU9eD6iW8z8m3rM1H+x1Foo6H7/I90enNBzrdS0Ti5dvOcvNyFf10o9FoisPe3K/CEq4YWFKAJmAqdEprKRCDBWHIKKgJAt/epxHBxNSaKrc0xKc0a8laLkyFoLUyfMql9j+mzLXc5rbBBBhthO9aU6GaCEt05IKq8p5uQHW7/jF9zk1NzJGxODQVGSOAiabP8ok52EKBORqYzdTAeNvBuJhk1mrj7JSkKSnH+8IXtdvhY2wMXwJX/CpUfSKGAdG+o92zJun8rcf+MrMJrxMi7dl0RO8IyayktnXb3xh8HE/o5KR1340mMnbPiCuGeaAGFox0NcMVsrolsyj2waHsiyikLYAxuSVxOF8OR7EC8zDODVRoCcy8I5TpPoiZ0HJbGAvaDtohA4nr41HlQrgv/+/dePhx5++HwWOgfn3mLRmJl4P7VWCqw51doXBCHRpUpzoxqI/Tp4u37k6X59SrTxdX6VV0uesuaG/cnTf7t4+bEMvguFlPHjf/9jALzVpLET4ppXQ8LQ5/W4pLTYZS7PjgvfwFBEDrHtYMAAA= */
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
@@ -1350,7 +1352,7 @@
   }
   .menu_menuClassNames_list_container__dpszds1b {
     container-name: menu_menuContainers_list__dpszds1;
-    display: contents;
+    display: block;
   }
   .menu_menuClassNames_list_section__dpszds1d {
     padding: var(--section-y__dpszds11, 0) var(--section-x__dpszds10, 0);
@@ -1966,6 +1968,208 @@
   }
 }
 
+/* vanilla-extract-css-ns:src/components/slider/slider.css.ts.vanilla.css?source=#H4sIAAAAAAAAA81ZzY6jOBC+5ymskUbprJZMkplezZBLSzPa4x52HyAqwCTu+Ie2TYf0qt99ZQMGEgJ0Qs9ODgbs8lfl+lyugjxQOGKJbKs2sQSGD0LuN5unffD09LicFyOhYIngmGtVDn07H5rTZTkK68nDuNCrcjRYT+aKkgjLTX75TkGpv4BhtdG7lAWbUHANhGO52SwDob+GfLlA/04QSoQimgjuIwiUoKnG6wlCWgJXsZDMz28paHzn3S8+/o5MOzMyLx7hEc58tFxPXi/rF6lOUl1enPZ7qz0iKqFw9FFMcdYJ07EMwpNUW7gDifTOR88g7zzPzvBsl5MOZkbJyDRUDFsjLi6h6D9fg7Tzat4wIgbbuPl1AGRxKfFUgVe4IybaKxDXTT1bSaK8y9x5GrPEMO2BxKB8NKUQYIrmiIiplbK/qZYQ7lGtrQ8ywtEcMcimbcChoCnjykeQaoGWsbQ3hSQkJXVbSNxi/pgN9YK11s3ThROsAWZBPrICQ9E0CfcOLC3AYsG1FwMj9FjaygQXmw19JOzw9JnM8rWEggpZStgHB7UYvB5GuJv1fL4aRvhgJMgc0qEFCbLc7MdUaRIfPYVp7CPMo14Flv+WLZ2da7GiAwHztgQ7FmDVWSUxBU2ecW42A7kl3Ech0PCuK/jRJ7QqGAog3G+lSHnkzguj84SsL/1ktRrs+wGOhcSF4UX0+ejDh/XJSuqn7vtbBbHG8n82KoBq0ksPs+eqA5Aniu+vUjweQ+NZNBI71xlk82veuty6bCaS7rxqBHeYbHe6KZn3OVEoA1DICEtPQkRS1ZyRD/1tR9y88CxwvcYpW/VX9jtVmad2EImDExbZP7bDya76XVSUMC01yJfz046IEu/BTUBKHym+8zwhCeYaDJ0OZOujnZDkxQjTGQIeOXEKR1GrnWIfEU4Jx7NC7ZXlQXfWN4k8z/EMMlMBrFsnNTN6I63XcntPdjc/oGTLPaIxUz4KMddY5kOvb/bjM5aahP1eVBrCPY5uduOlOqvbwbW2VkDlRRRkhe/np0PzSwMVX/1cMcJLSxv3DcIaU6U4tHJcUXRdPVPy3qg4LpYi77kZfkJI9TA+Pye14Lqd7ZZuIhARaD4dHHXDWB6J6ianpzF+XRl7A2pf7doHfWEfEvWDKAgorhLRzlS/6e2bK0ylMhmPC+0BpeKArw6Leq7psaqrJEf2/GjWB7Y4ZIT/IAxzVdf71e27k0LBTtE7Eu45VlXO/zZ7A5HdJbg7pd/ykoCQFomPFuVTILQWrNYh81UsF4uPt1haL/zex1CK47fb2VapV9TdAvZrktP9pcxpvK/jXZuMboq5lni7HDx5iLYF3MAYtaQYLyIPrdBvna8BYwZsQ//gTZHv9NNNcLZLxg3ZdzHVbrZRQrbYL6NG7K/ETsd79M/hpvk1fJyzJrfg5LAZ/eN19R9C98drnrIAyz8JplGb2auuN+CLoOZ9PSlaB/X5MtTrf7xA3iacGQAA */
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb;
+.slider_sliderClassNames_thumb_container__1bot8cn10 {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+.slider_sliderClassNames_output_output__1bot8cn15 {
+  display: flex;
+}
+.slider_sliderClassNames_thumb_container__1bot8cn10 input {
+  width: var(--thumb-width__1bot8cnb);
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {
+  .slider_sliderClassNames_slider_container__1bot8cnr {
+    display: contents;
+  }
+  .slider_sliderClassNames_slider_slider__1bot8cns {
+    width: -moz-fit-content;
+    width: fit-content;
+    display: grid;
+    grid-template-areas: "label . io" "track track track" "min . max";
+    grid-template-columns: auto 1fr auto;
+    gap: var(--gap__1bot8cn6);
+  }
+  .slider_sliderClassNames_slider_label__1bot8cnt {
+    grid-area: label;
+  }
+  .slider_sliderClassNames_slider_tick__1bot8cnu {
+    font-family: var(--mono__ljimwq3i);
+    color: var(--color__1bot8cn0);
+  }
+  .slider_sliderClassNames_slider_min__1bot8cnv {
+    grid-area: min;
+  }
+  .slider_sliderClassNames_slider_max__1bot8cnw {
+    grid-area: max;
+    justify-self: end;
+  }
+  .slider_sliderClassNames_track_container__1bot8cnx {
+    grid-area: track;
+  }
+  .slider_sliderClassNames_track_track__1bot8cny {
+    position: relative;
+    margin: calc(var(--thumb-width__1bot8cnb) / 2);
+    background: var(--track-color__1bot8cn4);
+  }
+  .slider_sliderClassNames_track_track__1bot8cny::before {
+    content: "";
+    position: absolute;
+    background: var(--track-color__1bot8cn4);
+  }
+  .slider_sliderClassNames_track_track__1bot8cny::after {
+    content: "";
+    position: absolute;
+    background: var(--track-color__1bot8cn4);
+  }
+  .slider_sliderClassNames_track_bar__1bot8cnz {
+    position: relative;
+    background: var(--bar-color__1bot8cn5);
+  }
+  .slider_sliderClassNames_track_bar__1bot8cnz::before {
+    content: "";
+    position: absolute;
+    background: var(--bar-color__1bot8cn5);
+  }
+  .slider_sliderClassNames_track_bar__1bot8cnz::after {
+    content: "";
+    position: absolute;
+    background: var(--bar-color__1bot8cn5);
+  }
+  .slider_sliderClassNames_thumb_thumb__1bot8cn11 {
+    width: var(--thumb-width__1bot8cnb);
+    height: var(--thumb-height__1bot8cna);
+    border-radius: var(--thumb-borderRadius__1bot8cnc);
+    background-color: var(--background__1bot8cn1);
+    box-shadow: var(--boxShadow__1bot8cn2);
+  }
+  .slider_sliderClassNames_output_container__1bot8cn14 {
+    grid-area: io;
+  }
+  @container style(--orientation__1bot8cng: horizontal) and style(--layout__1bot8cnf: inline) {
+    .slider_sliderClassNames_slider_slider__1bot8cns {
+      grid-template-areas: "label min track max io";
+      grid-template-columns: auto auto 1fr auto auto;
+      gap: var(--gap__1bot8cn6);
+      align-items: center;
+    }
+  }
+  @container style(--orientation__1bot8cng: vertical) and style(--layout__1bot8cnf: stacked) {
+    .slider_sliderClassNames_slider_slider__1bot8cns {
+      width: -moz-fit-content;
+      width: fit-content;
+      grid-template-areas: "label label label" "max track ." ". track ." "min track io";
+      grid-template-columns: min-content min-content auto;
+      grid-template-rows: auto auto 1fr auto;
+    }
+    .slider_sliderClassNames_slider_min__1bot8cnv {
+      align-self: end;
+      justify-self: end;
+    }
+  }
+  @container style(--orientation__1bot8cng: vertical) and style(--layout__1bot8cnf: inline) {
+    .slider_sliderClassNames_slider_slider__1bot8cns {
+      grid-template-areas: "label label label" "max . ." "track . ." "min . ." "io io .";
+      gap: var(--gap__1bot8cn6);
+      grid-template-rows: auto auto 1fr auto auto;
+    }
+    .slider_sliderClassNames_slider_min__1bot8cnv {
+      justify-self: center;
+    }
+    .slider_sliderClassNames_slider_max__1bot8cnw {
+      justify-self: center;
+    }
+    .slider_sliderClassNames_track_container__1bot8cnx {
+      justify-self: center;
+    }
+  }
+  @container style(--isDisabled__1bot8cnh: true) {
+    .slider_sliderClassNames_slider_slider__1bot8cns {
+      cursor: not-allowed;
+    }
+  }
+  @container style(--orientation__1bot8cng: horizontal) {
+    .slider_sliderClassNames_track_track__1bot8cny {
+      min-width: var(--track-minDimension__1bot8cn8);
+      height: var(--track-thickness__1bot8cn9);
+    }
+    .slider_sliderClassNames_track_track__1bot8cny::before {
+      width: calc(var(--thumb-width__1bot8cnb) / 2);
+      top: 0;
+      bottom: 0;
+      right: 100%;
+    }
+    .slider_sliderClassNames_track_track__1bot8cny::after {
+      width: calc(var(--thumb-width__1bot8cnb) / 2);
+      top: 0;
+      bottom: 0;
+      left: 100%;
+    }
+    .slider_sliderClassNames_track_bar__1bot8cnz {
+      height: 100%;
+    }
+    .slider_sliderClassNames_track_bar__1bot8cnz::before {
+      width: calc(var(--thumb-width__1bot8cnb) / 2);
+      top: 0;
+      bottom: 0;
+      right: 100%;
+    }
+    .slider_sliderClassNames_thumb_container__1bot8cn10 {
+      top: 50%;
+    }
+  }
+  @container style(--orientation__1bot8cng: vertical) {
+    .slider_sliderClassNames_track_track__1bot8cny {
+      width: var(--track-thickness__1bot8cn9);
+      min-height: var(--track-minDimension__1bot8cn8);
+      height: calc(100% - 2 * var(--thumb-width__1bot8cnb));
+    }
+    .slider_sliderClassNames_track_track__1bot8cny::before {
+      height: calc(var(--thumb-width__1bot8cnb) / 2);
+      left: 0;
+      right: 0;
+      bottom: 100%;
+    }
+    .slider_sliderClassNames_track_track__1bot8cny::after {
+      height: calc(var(--thumb-width__1bot8cnb) / 2);
+      left: 0;
+      right: 0;
+      top: 100%;
+    }
+    .slider_sliderClassNames_track_bar__1bot8cnz {
+      width: 100%;
+    }
+    .slider_sliderClassNames_track_bar__1bot8cnz::before {
+      height: calc(var(--thumb-width__1bot8cnb) / 2);
+      left: 0;
+      right: 0;
+      bottom: 100%;
+    }
+    .slider_sliderClassNames_track_bar__1bot8cnz::after {
+      height: calc(var(--thumb-width__1bot8cnb) / 2);
+      left: 0;
+      right: 0;
+      top: 100%;
+      z-index: 1;
+    }
+    .slider_sliderClassNames_thumb_container__1bot8cn10 {
+      left: 50%;
+    }
+  }
+}
+@layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l2__qkbqqjb {
+  .slider_sliderClassNames_numberField_container__1bot8cn12 {
+    grid-area: io;
+  }
+  .slider_sliderClassNames_group_group__1bot8cn13 {
+    grid-area: io;
+  }
+}
+
 /* vanilla-extract-css-ns:src/components/text-field/text-field.css.ts.vanilla.css?source=QGxheWVyIGxheWVyc19mcmFtZXdvcmtfX3FrYnFxajEubGF5ZXJzX2NvbXBvbmVudHNfX3FrYnFxajkubGF5ZXJzX2NvbXBvbmVudHMubDFfX3FrYnFxamE7CkBsYXllciBsYXllcnNfZnJhbWV3b3JrX19xa2JxcWoxLmxheWVyc19jb21wb25lbnRzX19xa2JxcWo5LmxheWVyc19jb21wb25lbnRzLmwxX19xa2JxcWphIHsKICAudGV4dC1maWVsZF90ZXh0RmllbGRDbGFzc05hbWVzX2NvbnRhaW5lcl9fb2R1ZXk5IHsKICAgIGNvbnRhaW5lci1uYW1lOiB0ZXh0LWZpZWxkX3RleHRGaWVsZENvbnRhaW5lcl9fb2R1ZXkwOwogIH0KICAudGV4dC1maWVsZF90ZXh0RmllbGRDbGFzc05hbWVzX3RleHRGaWVsZF9fb2R1ZXlhIHsKICAgIGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0OwogICAgZGlzcGxheTogZmxleDsKICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47CiAgICBnYXA6IHZhcigtLWdhcF9fb2R1ZXkzKTsKICB9CiAgLnRleHQtZmllbGRfdGV4dEZpZWxkQ2xhc3NOYW1lc19kZXNjcmlwdGlvbl9fb2R1ZXljIHsKICAgIGNvbG9yOiB2YXIoLS1kZXNjcmlwdGlvbi1jb2xvcl9fb2R1ZXkxKTsKICB9CiAgLnRleHQtZmllbGRfdGV4dEZpZWxkQ2xhc3NOYW1lc19lcnJvcl9fb2R1ZXlkIHsKICAgIGNvbG9yOiB2YXIoLS1lcnJvci1jb2xvcl9fb2R1ZXkyKTsKICB9Cn0= */
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja;
 @layer layers_framework__qkbqqj1.layers_components__qkbqqj9.layers_components.l1__qkbqqja {

package/dist/index.d.ts

@@ -60,6 +60,9 @@ export { SearchFieldClassNames, SearchFieldMapping, SearchFieldProps, SearchFiel
 export { Select, SelectContext } from './components/select/select.js';
 export { selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './components/select/select.css.js';
 export { SelectClassNames, SelectMapping, SelectProps, SelectRenderProps, SelectState } from './components/select/types.js';
+export { Slider, SliderContext, SliderThumb, SliderTrack } from './components/slider/slider.js';
+export { sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars } from './components/slider/slider.css.js';
+export { SliderClassNames, SliderLayout, SliderProps, SliderRenderProps, SliderState, SliderThumbProps, SliderThumbState } from './components/slider/types.js';
 export { Switch, SwitchContext } from './components/switch/switch.js';
 export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './components/switch/switch.css.js';
 export { SwitchAlignment, SwitchClassNames, SwitchProps, SwitchRenderProps, SwitchState } from './components/switch/types.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import './chunk-PZ5AY32C.js';
-export { AriaFieldError, AriaFieldErrorContext, AriaGroup, AriaGroupContext, AriaHeader, AriaHeaderContext, AriaHeading, AriaHeadingContext, AriaKeyboard, AriaKeyboardContext, AriaLabel, AriaLabelContext, AriaSection, AriaSectionContext, AriaSelectValue, AriaSelectValueContext, AriaSeparator, AriaSeparatorContext, AriaText, AriaTextContext, Button, ButtonContext, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, Chip, ChipContext, ChipGroup, ChipGroupContext, ChipItem, ChipList, ComboBox, ComboBoxContext, Dialog, DialogContext, Drawer, DrawerDialog, DrawerTab, DrawerTabList, Element, ElementContext, Group, GroupContext, Icon, IconContext, Input, InputContext, LinkButton, LinkButtonContext, Menu, MenuContext, MenuItem, MenuItemContext, MenuList, MenuListContext, MergeProvider, NumberField, NumberFieldContext, Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext, Picker, PickerContext, PickerItem, PickerItemContext, Popover, PopoverContext, QueryBuilder, QueryBuilderContext, Radio, RadioContext, RadioGroup, RadioGroupContext, SearchField, SearchFieldContext, Select, SelectContext, Switch, SwitchContext, Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext, TextArea, TextAreaContext, TextField, TextFieldContext, ToggleButton, ToggleButtonContext, Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext, Tree, TreeGroup, TreeItem, TreeStateContext, buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars, checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars, chipClassNames, chipColorVars, chipContainer, chipSpaceVars, chipStateVars, comboBoxClassNames, comboBoxColorVars, comboBoxContainer, comboBoxSpaceVars, comboBoxStateVars, createCollectionRenderer, dialogClassNames, dialogColorVars, dialogContainer, dialogSpaceVars, dialogStateVars, drawerAnimationVars, drawerClassNames, drawerColorVars, drawerContainer, drawerDialogStateVars, drawerSpaceVars, drawerStateVars, groupClassNames, groupContainer, groupSpaceVars, groupStateVars, iconClassNames, iconColorVars, iconContainer, iconSpaceVars, iconStateVars, inputClassNames, inputColorVars, inputContainer, inputSpaceVars, inputStateVars, menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars, numberFieldClassNames, numberFieldColorVars, numberFieldContainer, numberFieldSpaceVars, numberFieldStateVars, optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars, pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars, popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars, pressToMouseEvent, queryBuilderClassNames, queryBuilderColorVars, queryBuilderContainers, queryBuilderGroupStateVars, queryBuilderRuleStateVars, queryBuilderSpaceVars, queryBuilderStateVars, radioClassNames, radioColorVars, radioGroupStateVars, radioSpaceVars, radioStateVars, searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, searchFieldStateVars, selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars, switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars, tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers, textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars, textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars, tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars, treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars } from './components/index.js';
+export { AriaFieldError, AriaFieldErrorContext, AriaGroup, AriaGroupContext, AriaHeader, AriaHeaderContext, AriaHeading, AriaHeadingContext, AriaKeyboard, AriaKeyboardContext, AriaLabel, AriaLabelContext, AriaSection, AriaSectionContext, AriaSelectValue, AriaSelectValueContext, AriaSeparator, AriaSeparatorContext, AriaText, AriaTextContext, Button, ButtonContext, Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, Chip, ChipContext, ChipGroup, ChipGroupContext, ChipItem, ChipList, ComboBox, ComboBoxContext, Dialog, DialogContext, Drawer, DrawerDialog, DrawerTab, DrawerTabList, Element, ElementContext, Group, GroupContext, Icon, IconContext, Input, InputContext, LinkButton, LinkButtonContext, Menu, MenuContext, MenuItem, MenuItemContext, MenuList, MenuListContext, MergeProvider, NumberField, NumberFieldContext, Options, OptionsContext, OptionsItem, OptionsItemContext, OptionsList, OptionsListContext, Picker, PickerContext, PickerItem, PickerItemContext, Popover, PopoverContext, QueryBuilder, QueryBuilderContext, Radio, RadioContext, RadioGroup, RadioGroupContext, SearchField, SearchFieldContext, Select, SelectContext, Slider, SliderContext, SliderThumb, SliderTrack, Switch, SwitchContext, Tab, TabContext, TabList, TabListContext, TabPanel, TabPanelContext, TabPanels, TabPanelsContext, Tabs, TabsContext, TextArea, TextAreaContext, TextField, TextFieldContext, ToggleButton, ToggleButtonContext, Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext, Tree, TreeGroup, TreeItem, TreeStateContext, buttonClassNames, buttonColorVars, buttonContainer, buttonSpaceVars, buttonStateVars, checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars, chipClassNames, chipColorVars, chipContainer, chipSpaceVars, chipStateVars, comboBoxClassNames, comboBoxColorVars, comboBoxContainer, comboBoxSpaceVars, comboBoxStateVars, createCollectionRenderer, dialogClassNames, dialogColorVars, dialogContainer, dialogSpaceVars, dialogStateVars, drawerAnimationVars, drawerClassNames, drawerColorVars, drawerContainer, drawerDialogStateVars, drawerSpaceVars, drawerStateVars, groupClassNames, groupContainer, groupSpaceVars, groupStateVars, iconClassNames, iconColorVars, iconContainer, iconSpaceVars, iconStateVars, inputClassNames, inputColorVars, inputContainer, inputSpaceVars, inputStateVars, menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars, numberFieldClassNames, numberFieldColorVars, numberFieldContainer, numberFieldSpaceVars, numberFieldStateVars, optionsClassNames, optionsColorVars, optionsContainers, optionsItemStateVars, optionsListStateVars, optionsSpaceVars, optionsStateVars, pickerClassNames, pickerContainers, pickerItemColorVars, pickerItemStateVars, pickerSpaceVars, pickerStateVars, popoverClassNames, popoverColorVars, popoverSpaceVars, popoverStateVars, pressToMouseEvent, queryBuilderClassNames, queryBuilderColorVars, queryBuilderContainers, queryBuilderGroupStateVars, queryBuilderRuleStateVars, queryBuilderSpaceVars, queryBuilderStateVars, radioClassNames, radioColorVars, radioGroupStateVars, radioSpaceVars, radioStateVars, searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, searchFieldStateVars, selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars, sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars, sliderTrackStateVars, switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars, tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers, textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars, textFieldClassNames, textFieldColorVars, textFieldContainer, textFieldSpaceVars, textFieldStateVars, tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars, treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars } from './components/index.js';
 export { DefaultsProvider, ThemeProvider, useCollectionRender, useContextProps, useDefaultProps, useDefaults, usePropagatingPress, useSlot, useTheme, useTree, useUpdateEffect } from './hooks/index.js';
 export { bodies, defaultElevationVarValues, defaultElevations, defaultFocus, defaultFocusVarValues, defaultGenericColorVarValues, defaultGenericColors, defaultRadius, defaultRadiusVarValues, defaultSemanticColorVarValues, defaultSemanticColors, defaultSizes, defaultSizesVarValues, defaultSpace, defaultSpaceVarValues, defaultTypography, defaultTypographyVarValues, defaultZIndex, defaultZIndexVarValues, elevationVars, families, focusOutlineStyle, focusVars, genericColorVars, headings, inputs, label, layers, radiusVars, semanticColorVars, sizeVars, spaceVars, surfaces, typographyVars, zIndexVars } from './styles/index.js';
 export { alphaChannelAsNumberValidator, alphaChannelAsStringValidator, applyThemeVars, assignPartialVars, callRenderProps, colorChannelAsNumberValidator, colorChannelAsStringValidator, computeContract, containerQueries, containerQuery, continuePropagation, inlineVars, mergeClassNames, mergeProps, pixelValueAsNumberValidator, pixelValueAsStringValidator, rgbaAsStringValidator, rgbaAsTupleValidator, unwrapCssVar, wrapRenderProps } from './utils/index.js';

package/dist/vanilla.d.ts

@@ -34,6 +34,8 @@ export { searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, sear
 export { SearchFieldClassNames, SearchFieldMapping, SearchFieldProps, SearchFieldRenderProps, SearchFieldState } from './components/search-field/types.js';
 export { selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './components/select/select.css.js';
 export { SelectClassNames, SelectMapping, SelectProps, SelectRenderProps, SelectState } from './components/select/types.js';
+export { sliderClassNames, sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars } from './components/slider/slider.css.js';
+export { SliderClassNames, SliderLayout, SliderProps, SliderRenderProps, SliderState, SliderThumbState } from './components/slider/types.js';
 export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './components/switch/switch.css.js';
 export { SwitchAlignment, SwitchClassNames, SwitchProps, SwitchRenderProps, SwitchState } from './components/switch/types.js';
 export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers } from './components/tabs/tabs.css.js';

package/dist/vanilla.js

@@ -17,6 +17,7 @@ export { queryBuilderClassNames, queryBuilderColorVars, queryBuilderContainers,
 export { radioClassNames, radioColorVars, radioGroupStateVars, radioSpaceVars, radioStateVars } from './components/radio/radio.css.js';
 export { searchFieldClassNames, searchFieldContainer, searchFieldSpaceVars, searchFieldStateVars } from './components/search-field/search-field.css.js';
 export { selectClassNames, selectColorVars, selectContainer, selectSpaceVars, selectStateVars } from './components/select/select.css.js';
+export { sliderClassNames, sliderColorVars, sliderSpaceVars, sliderStateVars, sliderThumbStateVars } from './components/slider/slider.css.js';
 export { switchClassNames, switchColorVars, switchContainer, switchSpaceVars, switchStateVars } from './components/switch/switch.css.js';
 export { tabColorVars, tabListStateVars, tabPanelStateVars, tabPanelsStateVars, tabSpaceVars, tabStateVars, tabsClassNames, tabsContainers } from './components/tabs/tabs.css.js';
 export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './components/textarea/textarea.css.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@accelint/design-system",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "private": false,
   "license": "Apache-2.0",
   "repository": {
@@ -73,8 +73,8 @@
     "tsup": "8.3.0",
     "vite": "5.4.9",
     "vitest": "2.1.3",
-    "@accelint/typescript-config": "0.1.2",
     "@accelint/biome-config": "0.1.2",
+    "@accelint/typescript-config": "0.1.2",
     "@accelint/vitest-config": "0.1.3"
   },
   "dependencies": {
@@ -85,8 +85,8 @@
     "type-fest": "4.26.1",
     "typescript": "5.6.3",
     "zod": "3.23.8",
-    "@accelint/converters": "0.2.0",
-    "@accelint/core": "0.2.0"
+    "@accelint/core": "0.2.1",
+    "@accelint/converters": "0.3.0"
   },
   "$schema": "https://json.schemastore.org/package",
   "author": "https://hypergiant.com",