@mekari/pixel3-slider 0.0.1-dev.0

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  MpSlider
+} from "./chunk-BEKWS6QE.mjs";
+import "./chunk-KTN7D244.mjs";
+import "./chunk-SXAHQ4O2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpSlider
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/slider.hooks.ts":{"bytes":6822,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/slider.props.ts":{"bytes":1276,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2363,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/slider.hooks.ts","kind":"import-statement","original":"./modules/slider.hooks"},{"path":"src/modules/slider.props.ts","kind":"import-statement","original":"./modules/slider.props"}],"format":"esm"},"src/index.ts":{"bytes":121,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"}],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":121},"src/slider.tsx":{"bytesInOutput":2427},"src/modules/slider.hooks.ts":{"bytesInOutput":7147},"src/modules/slider.props.ts":{"bytesInOutput":677}},"bytes":11482},"dist/slider.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-text","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/slider.tsx","inputs":{"src/slider.tsx":{"bytesInOutput":2557},"src/modules/slider.hooks.ts":{"bytesInOutput":7147},"src/modules/slider.props.ts":{"bytesInOutput":677}},"bytes":11474},"dist/modules/slider.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/slider.hooks.ts","inputs":{"src/modules/slider.hooks.ts":{"bytesInOutput":7297}},"bytes":8321},"dist/modules/slider.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.props.ts","inputs":{"src/modules/slider.props.ts":{"bytesInOutput":865}},"bytes":1816}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/slider.hooks.ts":{"bytes":6822,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/slider.props.ts":{"bytes":1276,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2363,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true},{"path":"src/modules/slider.hooks.ts","kind":"import-statement","original":"./modules/slider.hooks"},{"path":"src/modules/slider.props.ts","kind":"import-statement","original":"./modules/slider.props"}],"format":"esm"},"src/index.ts":{"bytes":121,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-BEKWS6QE.mjs","kind":"import-statement"},{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":167},"dist/slider.mjs":{"imports":[{"path":"dist/chunk-BEKWS6QE.mjs","kind":"import-statement"},{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/slider.tsx","inputs":{},"bytes":167},"dist/chunk-BEKWS6QE.mjs":{"imports":[{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-text","kind":"import-statement","external":true}],"exports":["MpSlider"],"inputs":{"src/slider.tsx":{"bytesInOutput":2137}},"bytes":2301},"dist/modules/slider.hooks.mjs":{"imports":[{"path":"dist/chunk-KTN7D244.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useSlider"],"entryPoint":"src/modules/slider.hooks.ts","inputs":{},"bytes":109},"dist/chunk-KTN7D244.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/css","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useSlider"],"inputs":{"src/modules/slider.hooks.ts":{"bytesInOutput":6564}},"bytes":6670},"dist/modules/slider.props.mjs":{"imports":[{"path":"dist/chunk-SXAHQ4O2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["sliderEmits","sliderProps"],"entryPoint":"src/modules/slider.props.ts","inputs":{},"bytes":143},"dist/chunk-SXAHQ4O2.mjs":{"imports":[],"exports":["sliderEmits","sliderProps"],"inputs":{"src/modules/slider.props.ts":{"bytesInOutput":677}},"bytes":750},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/slider.hooks.d.mts

@@ -0,0 +1,72 @@
+import * as vue from 'vue';
+import { SliderProps, SliderEmits } from './slider.props.mjs';
+import '@mekari/pixel3-styled-system/tokens';
+import '@mekari/pixel3-utils';
+
+declare function useSlider(props: SliderProps, emit: SliderEmits): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+    }>;
+    labelWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    sliderWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    sliderAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            background: string;
+            left: string;
+            right: string;
+        };
+    }>;
+    progressAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            background: string;
+        };
+    }>;
+    inputWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    inputMinAttrs: vue.ComputedRef<{
+        id: string;
+        type: string;
+        min: number;
+        max: number;
+        step: number;
+        value: number | false | number[];
+        disabled: boolean;
+        class: string;
+        onInput: (e: Event) => void;
+        onChange: () => void;
+        onMouseup: () => void;
+        onMousedown: () => void;
+    }>;
+    inputMaxAttrs: vue.ComputedRef<{
+        id: string;
+        type: string;
+        min: number;
+        max: number;
+        step: number;
+        value: number | false;
+        disabled: boolean;
+        class: string;
+        onInput: (e: Event) => void;
+        onChange: () => void;
+        onMouseup: () => void;
+        onMousedown: () => void;
+    }>;
+    legendWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    isRangeSlider: vue.ComputedRef<boolean>;
+    currentValue: vue.Ref<number | number[]>;
+    minRangeValue: vue.ComputedRef<number | false>;
+    maxRangeValue: vue.ComputedRef<number | false>;
+};
+
+export { useSlider };

package/dist/modules/slider.hooks.d.ts

@@ -0,0 +1,72 @@
+import * as vue from 'vue';
+import { SliderProps, SliderEmits } from './slider.props.js';
+import '@mekari/pixel3-styled-system/tokens';
+import '@mekari/pixel3-utils';
+
+declare function useSlider(props: SliderProps, emit: SliderEmits): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        id: string | undefined;
+        class: string;
+    }>;
+    labelWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    sliderWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    sliderAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            background: string;
+            left: string;
+            right: string;
+        };
+    }>;
+    progressAttrs: vue.ComputedRef<{
+        class: string;
+        style: {
+            background: string;
+        };
+    }>;
+    inputWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    inputMinAttrs: vue.ComputedRef<{
+        id: string;
+        type: string;
+        min: number;
+        max: number;
+        step: number;
+        value: number | false | number[];
+        disabled: boolean;
+        class: string;
+        onInput: (e: Event) => void;
+        onChange: () => void;
+        onMouseup: () => void;
+        onMousedown: () => void;
+    }>;
+    inputMaxAttrs: vue.ComputedRef<{
+        id: string;
+        type: string;
+        min: number;
+        max: number;
+        step: number;
+        value: number | false;
+        disabled: boolean;
+        class: string;
+        onInput: (e: Event) => void;
+        onChange: () => void;
+        onMouseup: () => void;
+        onMousedown: () => void;
+    }>;
+    legendWrapperAttrs: vue.ComputedRef<{
+        class: string;
+    }>;
+    isRangeSlider: vue.ComputedRef<boolean>;
+    currentValue: vue.Ref<number | number[]>;
+    minRangeValue: vue.ComputedRef<number | false>;
+    maxRangeValue: vue.ComputedRef<number | false>;
+};
+
+export { useSlider };

package/dist/modules/slider.hooks.js

@@ -0,0 +1,229 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/slider.hooks.ts
+var slider_hooks_exports = {};
+__export(slider_hooks_exports, {
+  useSlider: () => useSlider
+});
+module.exports = __toCommonJS(slider_hooks_exports);
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_css = require("@mekari/pixel3-styled-system/css");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+function useSlider(props, emit) {
+  const {
+    id,
+    value,
+    min,
+    max,
+    step,
+    variant,
+    color,
+    gradientColor,
+    isGradient,
+    isDisabled
+  } = (0, import_vue.toRefs)(props);
+  const currentValue = (0, import_vue.ref)(value.value);
+  const isMinPressed = (0, import_vue.ref)(false);
+  const isMaxPressed = (0, import_vue.ref)(false);
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "slider").value;
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpSlider",
+      id: getId,
+      class: (0, import_recipes.sliderSlotRecipe)().root
+    };
+  });
+  const labelWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().labelWrapper
+    };
+  });
+  const sliderWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().sliderWrapper
+    };
+  });
+  const progressAttrs = (0, import_vue.computed)(() => {
+    const background = isGradient.value ? handleGradientColor(gradientColor.value) : (0, import_tokens.token)(`colors.${color.value}`) || color.value;
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().progress,
+      style: {
+        background
+      }
+    };
+  });
+  const sliderAttrs = (0, import_vue.computed)(() => {
+    const leftValue = isRangeSlider.value ? 0 : (currentValue.value - min.value) / (max.value - min.value) * 100;
+    const rightValue = 0;
+    const background = isRangeSlider.value ? `linear-gradient(to right, #EDF0F2 ${minRangeValue.value}%, transparent ${minRangeValue.value}%, transparent ${maxRangeValue.value}%, #EDF0F2 ${maxRangeValue.value}%)` : (0, import_tokens.token)("colors.gray.50");
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().slider,
+      style: {
+        background,
+        left: `${leftValue}%`,
+        right: `${rightValue}%`
+      }
+    };
+  });
+  const inputWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().inputWrapper
+    };
+  });
+  const inputMinAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `input-min-${getId}`,
+      type: "range",
+      min: min.value,
+      max: max.value,
+      step: step.value,
+      value: isRangeSlider.value ? minRangeValue.value : currentValue.value,
+      disabled: isDisabled.value,
+      class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
+        pointerEvents: isRangeSlider.value ? "none" : "auto",
+        "&::-webkit-slider-thumb": {
+          background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
+          borderWidth: isMinPressed.value ? "1.5px" : "1px",
+          cursor: isDisabled.value ? "not-allowed" : "pointer",
+          _hover: {
+            borderColor: isMinPressed.value ? "blue.400" : "gray.400"
+          }
+        }
+      })),
+      onInput: (e) => handleInput(e, "min"),
+      onChange: handleChange,
+      onMouseup: handleRelease,
+      onMousedown: () => handlePress("min")
+    };
+  });
+  const inputMaxAttrs = (0, import_vue.computed)(() => {
+    return {
+      id: `input-max-${getId}`,
+      type: "range",
+      min: min.value,
+      max: max.value,
+      step: step.value,
+      value: maxRangeValue.value,
+      disabled: isDisabled.value,
+      class: (0, import_css.cx)((0, import_recipes.sliderSlotRecipe)().input, (0, import_css.css)({
+        pointerEvents: "none",
+        "&::-webkit-slider-thumb": {
+          background: isDisabled.value ? "radial-gradient(circle, #D0D6DD 40%, white 50%)" : "radial-gradient(circle, #4B61DD 40%, white 50%)",
+          borderWidth: isMaxPressed.value ? "1.5px" : "1px",
+          cursor: isDisabled.value ? "not-allowed" : "pointer",
+          _hover: {
+            borderColor: isMaxPressed.value ? "blue.400" : "gray.400"
+          }
+        }
+      })),
+      onInput: (e) => handleInput(e, "max"),
+      onChange: handleChange,
+      onMouseup: handleRelease,
+      onMousedown: () => handlePress("max")
+    };
+  });
+  const legendWrapperAttrs = (0, import_vue.computed)(() => {
+    return {
+      class: (0, import_recipes.sliderSlotRecipe)().labelWrapper
+    };
+  });
+  const isRangeSlider = (0, import_vue.computed)(() => {
+    return variant.value === "range";
+  });
+  const minRangeValue = (0, import_vue.computed)(() => {
+    return isRangeSlider.value && Array.isArray(currentValue.value) && currentValue.value[0];
+  });
+  const maxRangeValue = (0, import_vue.computed)(() => {
+    return isRangeSlider.value && Array.isArray(currentValue.value) && currentValue.value[1];
+  });
+  function handleInput(e, type) {
+    const target = e.target;
+    emit("input", target.value);
+    if (type === "min") {
+      if (isRangeSlider.value && Array.isArray(currentValue.value)) {
+        currentValue.value[0] = Number(target.value);
+        if (typeof maxRangeValue.value === "number" && typeof minRangeValue.value === "number") {
+          if (minRangeValue.value > maxRangeValue.value) {
+            currentValue.value[0] = maxRangeValue.value;
+          }
+        }
+      } else {
+        currentValue.value = Number(target.value);
+      }
+    }
+    if (type === "max" && Array.isArray(currentValue.value)) {
+      currentValue.value[1] = Number(target.value);
+      if (typeof maxRangeValue.value === "number" && typeof minRangeValue.value === "number") {
+        if (minRangeValue.value > maxRangeValue.value) {
+          currentValue.value[1] = minRangeValue.value;
+        }
+      }
+    }
+  }
+  __name(handleInput, "handleInput");
+  function handleChange() {
+    emit("change", currentValue.value);
+  }
+  __name(handleChange, "handleChange");
+  function handleRelease() {
+    isMinPressed.value = false;
+    isMaxPressed.value = false;
+    emit("drag-end");
+  }
+  __name(handleRelease, "handleRelease");
+  function handlePress(type) {
+    type === "min" ? isMinPressed.value = true : isMaxPressed.value = true;
+    emit("drag-start");
+  }
+  __name(handlePress, "handlePress");
+  function handleGradientColor(colors) {
+    const stepPercentage = 100 / (colors.length - 1);
+    const gradientParts = colors.map((color2, index) => {
+      const position = index * stepPercentage;
+      return `${(0, import_tokens.token)(`colors.${color2}`) || color2} ${position}%`;
+    });
+    const gradientStr = `linear-gradient(to right, ${gradientParts.join(", ")})`;
+    return gradientStr;
+  }
+  __name(handleGradientColor, "handleGradientColor");
+  return {
+    rootAttrs,
+    labelWrapperAttrs,
+    sliderWrapperAttrs,
+    sliderAttrs,
+    progressAttrs,
+    inputWrapperAttrs,
+    inputMinAttrs,
+    inputMaxAttrs,
+    legendWrapperAttrs,
+    isRangeSlider,
+    currentValue,
+    minRangeValue,
+    maxRangeValue
+  };
+}
+__name(useSlider, "useSlider");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSlider
+});

package/dist/modules/slider.hooks.mjs

@@ -0,0 +1,7 @@
+import {
+  useSlider
+} from "../chunk-KTN7D244.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useSlider
+};

package/dist/modules/slider.props.d.mts

@@ -0,0 +1,51 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { ColorToken } from '@mekari/pixel3-styled-system/tokens';
+import { CombinedString } from '@mekari/pixel3-utils';
+
+declare const sliderProps: {
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: PropType<number | number[]>;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<"single" | "range">;
+        default: string;
+    };
+    color: {
+        type: PropType<CombinedString | ColorToken>;
+        default: string;
+    };
+    gradientColor: {
+        type: PropType<ColorToken[] | CombinedString[]>;
+        default: () => string[];
+    };
+    isGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+declare const sliderEmits: string[];
+type SliderProps = ExtractPropTypes<typeof sliderProps>;
+type SliderEmits = (event: (typeof sliderEmits)[number], value?: unknown) => void;
+
+export { SliderEmits, SliderProps, sliderEmits, sliderProps };

package/dist/modules/slider.props.d.ts

@@ -0,0 +1,51 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { ColorToken } from '@mekari/pixel3-styled-system/tokens';
+import { CombinedString } from '@mekari/pixel3-utils';
+
+declare const sliderProps: {
+    id: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: PropType<number | number[]>;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    step: {
+        type: NumberConstructor;
+        default: number;
+    };
+    variant: {
+        type: PropType<"single" | "range">;
+        default: string;
+    };
+    color: {
+        type: PropType<CombinedString | ColorToken>;
+        default: string;
+    };
+    gradientColor: {
+        type: PropType<ColorToken[] | CombinedString[]>;
+        default: () => string[];
+    };
+    isGradient: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+declare const sliderEmits: string[];
+type SliderProps = ExtractPropTypes<typeof sliderProps>;
+type SliderEmits = (event: (typeof sliderEmits)[number], value?: unknown) => void;
+
+export { SliderEmits, SliderProps, sliderEmits, sliderProps };

package/dist/modules/slider.props.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/slider.props.ts
+var slider_props_exports = {};
+__export(slider_props_exports, {
+  sliderEmits: () => sliderEmits,
+  sliderProps: () => sliderProps
+});
+module.exports = __toCommonJS(slider_props_exports);
+var sliderProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  value: {
+    type: [Number, Array],
+    default: 0
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  variant: {
+    type: String,
+    default: "single"
+  },
+  color: {
+    type: String,
+    default: "sky.100"
+  },
+  gradientColor: {
+    type: Array,
+    default: () => ["blue.50", "blue.100", "blue.400", "blue.700"]
+  },
+  isGradient: {
+    type: Boolean,
+    default: false
+  },
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+};
+var sliderEmits = ["input", "change", "drag-end", "drag-start"];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  sliderEmits,
+  sliderProps
+});

package/dist/modules/slider.props.mjs

@@ -0,0 +1,9 @@
+import {
+  sliderEmits,
+  sliderProps
+} from "../chunk-SXAHQ4O2.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  sliderEmits,
+  sliderProps
+};