@blockle/blocks 0.9.1 → 0.10.0

package/dist/index.cjs

@@ -14,6 +14,7 @@ const styles_components_form_Checkbox_Checkbox_cjs = require("./styles/component
 const styles_components_form_Input_Input_cjs = require("./styles/components/form/Input/Input.cjs");
 const styles_components_form_Radio_Radio_cjs = require("./styles/components/form/Radio/Radio.cjs");
 const styles_components_form_Select_Select_cjs = require("./styles/components/form/Select/Select.cjs");
+const styles_components_form_Slider_Slider_cjs = require("./styles/components/form/Slider/Slider.cjs");
 const styles_components_form_Switch_Switch_cjs = require("./styles/components/form/Switch/Switch.cjs");
 const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("./styles/components/other/BlocksProvider/BlocksProvider.cjs");
 const styles_components_overlay_Dialog_Dialog_cjs = require("./styles/components/overlay/Dialog/Dialog.cjs");
@@ -155,6 +156,7 @@ exports.Label = styles_components_form_Checkbox_Checkbox_cjs.Label;
 exports.Input = styles_components_form_Input_Input_cjs.Input;
 exports.Radio = styles_components_form_Radio_Radio_cjs.Radio;
 exports.Select = styles_components_form_Select_Select_cjs.Select;
+exports.Slider = styles_components_form_Slider_Slider_cjs.Slider;
 exports.Switch = styles_components_form_Switch_Switch_cjs.Switch;
 exports.BlocksProvider = styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider;
 exports.Dialog = styles_components_overlay_Dialog_Dialog_cjs.Dialog;

package/dist/index.d.mts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

package/dist/index.d.ts

@@ -1 +1 @@
-export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';
+export { BlocksProvider, BlocksProviderProps, Box, BoxProps, Button, ButtonProps, Checkbox, CheckboxProps, Dialog, DialogProps, Divider, DividerProps, Heading, HeadingProps, Inline, InlineProps, Input, InputProps, Label, LabelProps, Link, LinkProps, Portal, PortalProps, Progress, ProgressProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Slot, Spinner, SpinnerProps, Stack, StackProps, Switch, SwitchProps, Text, TextProps, ThemeComponentsStyles, ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars } from './momotaro.chunk.js';

package/dist/index.mjs

@@ -15,6 +15,7 @@ import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs"
 import { Input } from "./styles/components/form/Input/Input.mjs";
 import { Radio } from "./styles/components/form/Radio/Radio.mjs";
 import { Select } from "./styles/components/form/Select/Select.mjs";
+import { Slider } from "./styles/components/form/Slider/Slider.mjs";
 import { Switch } from "./styles/components/form/Switch/Switch.mjs";
 import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
 import { Dialog, Portal, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
@@ -152,6 +153,7 @@ export {
   Progress,
   Radio,
   Select,
+  Slider,
   Slot,
   Spinner,
   Stack,

package/dist/momotaro.chunk.d.ts

@@ -390,6 +390,16 @@ type SelectTheme = {
         variant: 'solid' | 'outline';
     };
 };
+type SliderTheme = {
+    base: string;
+    track: string;
+    filledTrack: string;
+    thumb: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        colorScheme: 'primary' | 'secondary';
+    };
+};
 type ComponentThemes = {
     button: ButtonTheme;
     checkbox: CheckboxTheme;
@@ -404,6 +414,7 @@ type ComponentThemes = {
     select: SelectTheme;
     spinner: SpinnerTheme;
     switch: SwitchTheme;
+    slider: SliderTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -712,6 +723,23 @@ declare const Select: react__default.ForwardRefExoticComponent<{
     } | undefined;
 } & HTMLElementProps<HTMLSelectElement> & react__default.RefAttributes<HTMLSelectElement>>;
 
+type SliderProps = {
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    'aria-label'?: string;
+    size: SliderTheme['variants']['size'];
+    colorScheme: SliderTheme['variants']['colorScheme'];
+};
+declare const Slider: react__default.FC<SliderProps>;
+
 type SwitchProps = {
     onChange?: (value: boolean) => void;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
@@ -1106,4 +1134,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 
 declare const momotaro: Theme;
 
-export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };
+export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };

package/dist/reset.css.cjs

@@ -1,4 +1,4 @@
 "use strict";
 const fileScope = require("@vanilla-extract/css/fileScope");
-fileScope.setFileScope("src/entries/reset.css.ts", "blocks");
+fileScope.setFileScope("src/entries/reset.css.ts", "@blockle/blocks");
 fileScope.endFileScope();

package/dist/reset.css.mjs

@@ -1,3 +1,3 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-setFileScope("src/entries/reset.css.ts", "blocks");
+setFileScope("src/entries/reset.css.ts", "@blockle/blocks");
 endFileScope();

package/dist/styles/components/display/Divider/divider.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
+fileScope.setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/display/Divider/divider.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/display/Divider/divider.css.ts", "blocks");
+setFileScope("src/components/display/Divider/divider.css.ts", "@blockle/blocks");
 const divider = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Button/Button.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Button/Button.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
 const buttonReset = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Button/Button.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Button/Button.css.ts", "blocks");
+setFileScope("src/components/form/Button/Button.css.ts", "@blockle/blocks");
 const buttonReset = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Checkbox/checkbox.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Checkbox/checkbox.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Checkbox/checkbox.css.ts", "blocks");
+setFileScope("src/components/form/Checkbox/checkbox.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Input/input.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Input/input.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
 const input = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Input/input.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Input/input.css.ts", "blocks");
+setFileScope("src/components/form/Input/input.css.ts", "@blockle/blocks");
 const input = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Radio/radio.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Radio/radio.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Radio/radio.css.ts", "blocks");
+setFileScope("src/components/form/Radio/radio.css.ts", "@blockle/blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Select/select.css.cjs

@@ -2,7 +2,7 @@
 const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
-fileScope.setFileScope("src/components/form/Select/select.css.ts", "blocks");
+fileScope.setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
 const wrapper = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/form/Select/select.css.mjs

@@ -1,7 +1,7 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
-setFileScope("src/components/form/Select/select.css.ts", "blocks");
+setFileScope("src/components/form/Select/select.css.ts", "@blockle/blocks");
 const wrapper = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Slider/Slider.cjs

@@ -0,0 +1,155 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Slider_slider_css_cjs = require("./slider.css.cjs");
+function getProgress(event, rect) {
+  const { clientX, clientY } = event;
+  const { width, height, left, top } = rect;
+  const x = (clientX - left) / width;
+  const y = (clientY - top) / height;
+  return [x, y];
+}
+function usePointerProgress({ container, orientation, onChange }) {
+  react.useEffect(() => {
+    const element = container.current;
+    function pointerdown(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!element) {
+        return;
+      }
+      const containerRect = element.getBoundingClientRect();
+      const axisIndex = orientation === "horizontal" ? 0 : 1;
+      const progress = getProgress(event, containerRect);
+      onChange(progress[axisIndex]);
+      const pointermove = (event2) => {
+        event2.preventDefault();
+        const progress2 = getProgress(event2, containerRect);
+        onChange(progress2[axisIndex]);
+      };
+      const pointerup = () => {
+        document.removeEventListener("pointermove", pointermove);
+        document.removeEventListener("pointerup", pointerup);
+      };
+      document.addEventListener("pointermove", pointermove);
+      document.addEventListener("pointerup", pointerup);
+    }
+    if (!element) {
+      return;
+    }
+    element.addEventListener("pointerdown", pointerdown);
+    return () => {
+      element.removeEventListener("pointerdown", pointerdown);
+    };
+  }, [container, onChange, orientation]);
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  ...restProps
+}) => {
+  const [internValue, setInternValue] = react.useState(
+    getBoundValue(value ?? defaultValue, min, max, step)
+  );
+  const baseClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const trackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { filledTrack: true }, false);
+  const thumbClass = styles_components_display_Divider_Divider_cjs.useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = react.useRef(null);
+  react.useEffect(() => {
+    if (value !== void 0) {
+      setInternValue(getBoundValue(value, min, max, step));
+    }
+  }, [value, min, max, step]);
+  react.useEffect(() => {
+    if (onChange && internValue !== value) {
+      onChange(internValue);
+    }
+  }, [internValue, onChange, value]);
+  usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        progress = 1 - progress;
+      }
+      setInternValue(getBoundValue(max * progress, min, max, step));
+    }
+  });
+  const onKeyDown = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const specialKey = ["PageUp", "PageDown"];
+      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
+        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
+        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+      }
+      if (event.key === "Home") {
+        return setInternValue(min);
+      }
+      if (event.key === "End") {
+        return setInternValue(max);
+      }
+    },
+    [max, min, step]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: styles_components_display_Divider_Divider_cjs.classnames(
+        styles_components_form_Slider_slider_css_cjs.container,
+        orientation === "vertical" ? styles_components_form_Slider_slider_css_cjs.containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.track, trackClass), children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${internValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Slider_slider_css_cjs.thumb, thumbClass),
+            tabIndex: 0,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": internValue,
+            "aria-orientation": orientation,
+            style: {
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+            },
+            onKeyDown,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: internValue })
+      ]
+    }
+  );
+};
+exports.Slider = Slider;

package/dist/styles/components/form/Slider/Slider.mjs

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { containerVertical, container, track, filledTrack, thumb } from "./slider.css.mjs";
+function getProgress(event, rect) {
+  const { clientX, clientY } = event;
+  const { width, height, left, top } = rect;
+  const x = (clientX - left) / width;
+  const y = (clientY - top) / height;
+  return [x, y];
+}
+function usePointerProgress({ container: container2, orientation, onChange }) {
+  useEffect(() => {
+    const element = container2.current;
+    function pointerdown(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!element) {
+        return;
+      }
+      const containerRect = element.getBoundingClientRect();
+      const axisIndex = orientation === "horizontal" ? 0 : 1;
+      const progress = getProgress(event, containerRect);
+      onChange(progress[axisIndex]);
+      const pointermove = (event2) => {
+        event2.preventDefault();
+        const progress2 = getProgress(event2, containerRect);
+        onChange(progress2[axisIndex]);
+      };
+      const pointerup = () => {
+        document.removeEventListener("pointermove", pointermove);
+        document.removeEventListener("pointerup", pointerup);
+      };
+      document.addEventListener("pointermove", pointermove);
+      document.addEventListener("pointerup", pointerup);
+    }
+    if (!element) {
+      return;
+    }
+    element.addEventListener("pointerdown", pointerdown);
+    return () => {
+      element.removeEventListener("pointerdown", pointerdown);
+    };
+  }, [container2, onChange, orientation]);
+}
+function getBoundValue(newValue, min, max, step) {
+  let value = Math.round(newValue / step) * step;
+  value = Math.max(min, Math.min(max, value));
+  return value;
+}
+const Slider = ({
+  min = 0,
+  max = 100,
+  step = 1,
+  orientation = "horizontal",
+  defaultValue = 0,
+  onChange,
+  value,
+  name,
+  size,
+  colorScheme,
+  ...restProps
+}) => {
+  const [internValue, setInternValue] = useState(
+    getBoundValue(value ?? defaultValue, min, max, step)
+  );
+  const baseClass = useComponentStyles("slider", { base: true, variants: { size, colorScheme } });
+  const trackClass = useComponentStyles("slider", { track: true }, false);
+  const filledTrackClass = useComponentStyles("slider", { filledTrack: true }, false);
+  const thumbClass = useComponentStyles("slider", { thumb: true }, false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternValue(getBoundValue(value, min, max, step));
+    }
+  }, [value, min, max, step]);
+  useEffect(() => {
+    if (onChange && internValue !== value) {
+      onChange(internValue);
+    }
+  }, [internValue, onChange, value]);
+  usePointerProgress({
+    container: containerRef,
+    orientation,
+    onChange(progress) {
+      if (orientation === "vertical") {
+        progress = 1 - progress;
+      }
+      setInternValue(getBoundValue(max * progress, min, max, step));
+    }
+  });
+  const onKeyDown = useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const specialKey = ["PageUp", "PageDown"];
+      const stepModifier = event.shiftKey || specialKey.includes(event.key) ? (max - min) / 10 : step;
+      if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") {
+        return setInternValue((value2) => getBoundValue(value2 - stepModifier, min, max, step));
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") {
+        return setInternValue((value2) => getBoundValue(value2 + stepModifier, min, max, step));
+      }
+      if (event.key === "Home") {
+        return setInternValue(min);
+      }
+      if (event.key === "End") {
+        return setInternValue(max);
+      }
+    },
+    [max, min, step]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: classnames(
+        container,
+        orientation === "vertical" ? containerVertical : "",
+        baseClass
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: classnames(track, trackClass), children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(filledTrack, filledTrackClass),
+            style: {
+              inlineSize: `${internValue / max * 100}%`
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classnames(thumb, thumbClass),
+            tabIndex: 0,
+            role: "slider",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": internValue,
+            "aria-orientation": orientation,
+            style: {
+              [orientation === "horizontal" ? "insetInlineStart" : "insetInlineEnd"]: `${internValue / max * 100}%`
+            },
+            onKeyDown,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("input", { type: "hidden", name, value: internValue })
+      ]
+    }
+  );
+};
+export {
+  Slider
+};

package/dist/styles/components/form/Slider/slider.css.cjs

@@ -0,0 +1,73 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Slider/slider.css.ts", "@blockle/blocks");
+const container = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "relative",
+      writingMode: "horizontal-tb"
+    }
+  }
+}, "container");
+const containerVertical = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      writingMode: "vertical-lr"
+    }
+  }
+}, "containerVertical");
+const track = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      inlineSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translateY(-50%)",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  }
+}, "track");
+const filledTrack = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      position: "absolute",
+      blockSize: "100%",
+      borderRadius: "inherit",
+      selectors: {
+        [`${containerVertical} &`]: {
+          insetInlineEnd: "0%"
+        }
+      }
+    }
+  }
+}, "filledTrack");
+const thumb = css.style({
+  "@layer": {
+    [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
+      cursor: "pointer",
+      position: "absolute",
+      blockSize: "100%",
+      insetBlockStart: "50%",
+      transform: "translate(-50%, -50%)",
+      touchAction: "none",
+      selectors: {
+        [`${containerVertical} &`]: {
+          transform: "translate(-50%, 50%)"
+        }
+      }
+    }
+  }
+}, "thumb");
+fileScope.endFileScope();
+exports.container = container;
+exports.containerVertical = containerVertical;
+exports.filledTrack = filledTrack;
+exports.thumb = thumb;
+exports.track = track;