@mekari/pixel3-slider 0.0.6 → 0.0.7-dev.0

package/dist/{chunk-NJDSOT4O.mjs → chunk-44UPEK7T.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-QZ7VFGWC.mjs";
 
 // src/modules/slider.hooks.ts
-import { computed, ref, toRefs } from "vue";
+import { computed, ref, watch, toRefs } from "vue";
 import { getUniqueId, usePixelTheme } from "@mekari/pixel3-utils";
 import { token } from "@mekari/pixel3-styled-system/tokens";
 import { sliderSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
@@ -177,6 +177,9 @@ function useSlider(props, emit) {
     return gradientStr;
   }
   __name(handleGradientColor, "handleGradientColor");
+  watch(() => props.value, (newValue) => {
+    currentValue.value = newValue;
+  });
   return {
     rootAttrs,
     labelWrapperAttrs,

package/dist/{chunk-T52MRHGI.mjs → chunk-GTYGVZ3D.mjs}

@@ -1,10 +1,10 @@
 import {
   useSlider
-} from "./chunk-NJDSOT4O.mjs";
+} from "./chunk-44UPEK7T.mjs";
 import {
   sliderEmits,
   sliderProps
-} from "./chunk-AX2E5DRG.mjs";
+} from "./chunk-YR25ZNN4.mjs";
 
 // src/slider.tsx
 import { createVNode as _createVNode } from "vue";
@@ -40,10 +40,11 @@ var MpSlider = defineComponent({
     return () => {
       const {
         min,
-        max
+        max,
+        label
       } = props;
-      const label = slots.label && slots.label();
-      const value = slots.value && slots.value({
+      const labelSlots = slots.label && slots.label();
+      const valueSlots = slots.value && slots.value({
         value: currentValue.value
       });
       const minSlots = slots.min && slots.min();
@@ -52,12 +53,12 @@ var MpSlider = defineComponent({
       return _createVNode("div", rootAttrs.value, [_createVNode("div", labelWrapperAttrs.value, [_createVNode(MpText, {
         "size": "label"
       }, {
-        default: () => [label ? label : "Label"]
+        default: () => [labelSlots ? labelSlots : label]
       }), _createVNode(MpText, {
         "size": "label",
         "weight": "semiBold"
       }, {
-        default: () => [value ? value : valueText]
+        default: () => [valueSlots ? valueSlots : valueText]
       })]), _createVNode("div", sliderWrapperAttrs.value, [_createVNode("div", progressAttrs.value, [_createVNode("div", sliderAttrs.value, null)]), _createVNode("div", inputWrapperAttrs.value, [_createVNode("input", inputMinAttrs.value, null), isRangeSlider.value && _createVNode("input", inputMaxAttrs.value, null)])]), _createVNode("div", legendWrapperAttrs.value, [_createVNode(MpText, {
         "size": "label-small",
         "color": isNextTheme.value ? "text.secondary" : "gray.600"

package/dist/{chunk-AX2E5DRG.mjs → chunk-YR25ZNN4.mjs}

@@ -4,6 +4,10 @@ var sliderProps = {
     type: String,
     default: ""
   },
+  label: {
+    type: String,
+    default: "Label"
+  },
   value: {
     type: [Number, Array],
     default: 0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 export { MpSlider } from './slider.mjs';
 export { SliderVariant } from './modules/slider.types.mjs';
 import 'vue/jsx-runtime';
-import '@mekari/pixel3-styled-system/tokens';
 import '@mekari/pixel3-utils';
+import '@mekari/pixel3-styled-system/tokens';
 import 'vue';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { MpSlider } from './slider.js';
 export { SliderVariant } from './modules/slider.types.js';
 import 'vue/jsx-runtime';
-import '@mekari/pixel3-styled-system/tokens';
 import '@mekari/pixel3-utils';
+import '@mekari/pixel3-styled-system/tokens';
 import 'vue';

package/dist/index.js

@@ -206,6 +206,9 @@ function useSlider(props, emit) {
     return gradientStr;
   }
   __name(handleGradientColor, "handleGradientColor");
+  (0, import_vue.watch)(() => props.value, (newValue) => {
+    currentValue.value = newValue;
+  });
   return {
     rootAttrs,
     labelWrapperAttrs,
@@ -230,6 +233,10 @@ var sliderProps = {
     type: String,
     default: ""
   },
+  label: {
+    type: String,
+    default: "Label"
+  },
   value: {
     type: [Number, Array],
     default: 0
@@ -299,10 +306,11 @@ var MpSlider = (0, import_vue3.defineComponent)({
     return () => {
       const {
         min,
-        max
+        max,
+        label
       } = props;
-      const label = slots.label && slots.label();
-      const value = slots.value && slots.value({
+      const labelSlots = slots.label && slots.label();
+      const valueSlots = slots.value && slots.value({
         value: currentValue.value
       });
       const minSlots = slots.min && slots.min();
@@ -311,12 +319,12 @@ var MpSlider = (0, import_vue3.defineComponent)({
       return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", labelWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
         "size": "label"
       }, {
-        default: () => [label ? label : "Label"]
+        default: () => [labelSlots ? labelSlots : label]
       }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
         "size": "label",
         "weight": "semiBold"
       }, {
-        default: () => [value ? value : valueText]
+        default: () => [valueSlots ? valueSlots : valueText]
       })]), (0, import_vue2.createVNode)("div", sliderWrapperAttrs.value, [(0, import_vue2.createVNode)("div", progressAttrs.value, [(0, import_vue2.createVNode)("div", sliderAttrs.value, null)]), (0, import_vue2.createVNode)("div", inputWrapperAttrs.value, [(0, import_vue2.createVNode)("input", inputMinAttrs.value, null), isRangeSlider.value && (0, import_vue2.createVNode)("input", inputMaxAttrs.value, null)])]), (0, import_vue2.createVNode)("div", legendWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
         "size": "label-small",
         "color": isNextTheme.value ? "text.secondary" : "gray.600"

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import {
   MpSlider
-} from "./chunk-T52MRHGI.mjs";
-import "./chunk-NJDSOT4O.mjs";
-import "./chunk-AX2E5DRG.mjs";
+} from "./chunk-GTYGVZ3D.mjs";
+import "./chunk-44UPEK7T.mjs";
+import "./chunk-YR25ZNN4.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 import "./chunk-S4IBQUCZ.mjs";
 export {

package/dist/metafile-cjs.json

@@ -1 +1 @@
-{"inputs":{"src/modules/slider.hooks.ts":{"bytes":6314,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","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":1317,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2500,"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":"@mekari/pixel3-utils","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/modules/slider.types.ts":{"bytes":132,"imports":[],"format":"esm"},"src/index.ts":{"bytes":161,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"},{"path":"src/modules/slider.types.ts","kind":"import-statement","original":"./modules/slider.types"}],"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":"@mekari/pixel3-utils","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/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":2596},"src/modules/slider.hooks.ts":{"bytesInOutput":6576},"src/modules/slider.props.ts":{"bytesInOutput":670}},"bytes":11073},"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":"@mekari/pixel3-utils","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/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":2726},"src/modules/slider.hooks.ts":{"bytesInOutput":6576},"src/modules/slider.props.ts":{"bytesInOutput":670}},"bytes":11065},"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/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":6726}},"bytes":7750},"dist/modules/slider.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.props.ts","inputs":{"src/modules/slider.props.ts":{"bytesInOutput":858}},"bytes":1809},"dist/modules/slider.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.types.ts","inputs":{"src/modules/slider.types.ts":{"bytesInOutput":84}},"bytes":787}}}
+{"inputs":{"src/modules/slider.hooks.ts":{"bytes":6418,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","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":1372,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2543,"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":"@mekari/pixel3-utils","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/modules/slider.types.ts":{"bytes":132,"imports":[],"format":"esm"},"src/index.ts":{"bytes":161,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"},{"path":"src/modules/slider.types.ts","kind":"import-statement","original":"./modules/slider.types"}],"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":"@mekari/pixel3-utils","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/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":2639},"src/modules/slider.hooks.ts":{"bytesInOutput":6676},"src/modules/slider.props.ts":{"bytesInOutput":725}},"bytes":11271},"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":"@mekari/pixel3-utils","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/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":2769},"src/modules/slider.hooks.ts":{"bytesInOutput":6676},"src/modules/slider.props.ts":{"bytesInOutput":725}},"bytes":11263},"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/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":6826}},"bytes":7850},"dist/modules/slider.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.props.ts","inputs":{"src/modules/slider.props.ts":{"bytesInOutput":913}},"bytes":1864},"dist/modules/slider.types.js":{"imports":[],"exports":[],"entryPoint":"src/modules/slider.types.ts","inputs":{"src/modules/slider.types.ts":{"bytesInOutput":84}},"bytes":787}}}

package/dist/metafile-esm.json

@@ -1 +1 @@
-{"inputs":{"src/modules/slider.hooks.ts":{"bytes":6314,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","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":1317,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2500,"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":"@mekari/pixel3-utils","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/modules/slider.types.ts":{"bytes":132,"imports":[],"format":"esm"},"src/index.ts":{"bytes":161,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"},{"path":"src/modules/slider.types.ts","kind":"import-statement","original":"./modules/slider.types"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-T52MRHGI.mjs","kind":"import-statement"},{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-AX2E5DRG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"dist/chunk-S4IBQUCZ.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":198},"dist/slider.mjs":{"imports":[{"path":"dist/chunk-T52MRHGI.mjs","kind":"import-statement"},{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-AX2E5DRG.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/slider.tsx","inputs":{},"bytes":167},"dist/chunk-T52MRHGI.mjs":{"imports":[{"path":"dist/chunk-NJDSOT4O.mjs","kind":"import-statement"},{"path":"dist/chunk-AX2E5DRG.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},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpSlider"],"inputs":{"src/slider.tsx":{"bytesInOutput":2274}},"bytes":2438},"dist/modules/slider.hooks.mjs":{"imports":[{"path":"dist/chunk-NJDSOT4O.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-NJDSOT4O.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/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":6011}},"bytes":6117},"dist/modules/slider.props.mjs":{"imports":[{"path":"dist/chunk-AX2E5DRG.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-AX2E5DRG.mjs":{"imports":[],"exports":["sliderEmits","sliderProps"],"inputs":{"src/modules/slider.props.ts":{"bytesInOutput":670}},"bytes":743},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/slider.types.mjs":{"imports":[{"path":"dist/chunk-S4IBQUCZ.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/slider.types.ts","inputs":{},"bytes":32},"dist/chunk-S4IBQUCZ.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/slider.types.ts":{"bytesInOutput":0}},"bytes":0}}}
+{"inputs":{"src/modules/slider.hooks.ts":{"bytes":6418,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","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":1372,"imports":[],"format":"esm"},"src/slider.tsx":{"bytes":2543,"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":"@mekari/pixel3-utils","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/modules/slider.types.ts":{"bytes":132,"imports":[],"format":"esm"},"src/index.ts":{"bytes":161,"imports":[{"path":"src/slider.tsx","kind":"import-statement","original":"./slider"},{"path":"src/modules/slider.types.ts","kind":"import-statement","original":"./modules/slider.types"}],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-GTYGVZ3D.mjs","kind":"import-statement"},{"path":"dist/chunk-44UPEK7T.mjs","kind":"import-statement"},{"path":"dist/chunk-YR25ZNN4.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"dist/chunk-S4IBQUCZ.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":198},"dist/slider.mjs":{"imports":[{"path":"dist/chunk-GTYGVZ3D.mjs","kind":"import-statement"},{"path":"dist/chunk-44UPEK7T.mjs","kind":"import-statement"},{"path":"dist/chunk-YR25ZNN4.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpSlider"],"entryPoint":"src/slider.tsx","inputs":{},"bytes":167},"dist/chunk-GTYGVZ3D.mjs":{"imports":[{"path":"dist/chunk-44UPEK7T.mjs","kind":"import-statement"},{"path":"dist/chunk-YR25ZNN4.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},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpSlider"],"inputs":{"src/slider.tsx":{"bytesInOutput":2317}},"bytes":2481},"dist/modules/slider.hooks.mjs":{"imports":[{"path":"dist/chunk-44UPEK7T.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-44UPEK7T.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/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":6102}},"bytes":6208},"dist/modules/slider.props.mjs":{"imports":[{"path":"dist/chunk-YR25ZNN4.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-YR25ZNN4.mjs":{"imports":[],"exports":["sliderEmits","sliderProps"],"inputs":{"src/modules/slider.props.ts":{"bytesInOutput":725}},"bytes":798},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/slider.types.mjs":{"imports":[{"path":"dist/chunk-S4IBQUCZ.mjs","kind":"import-statement"}],"exports":[],"entryPoint":"src/modules/slider.types.ts","inputs":{},"bytes":32},"dist/chunk-S4IBQUCZ.mjs":{"imports":[],"exports":[],"inputs":{"src/modules/slider.types.ts":{"bytesInOutput":0}},"bytes":0}}}

package/dist/modules/slider.hooks.js

@@ -198,6 +198,9 @@ function useSlider(props, emit) {
     return gradientStr;
   }
   __name(handleGradientColor, "handleGradientColor");
+  (0, import_vue.watch)(() => props.value, (newValue) => {
+    currentValue.value = newValue;
+  });
   return {
     rootAttrs,
     labelWrapperAttrs,

package/dist/modules/slider.hooks.mjs

@@ -1,6 +1,6 @@
 import {
   useSlider
-} from "../chunk-NJDSOT4O.mjs";
+} from "../chunk-44UPEK7T.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   useSlider

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

@@ -8,6 +8,10 @@ declare const sliderProps: {
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     value: {
         type: PropType<number | number[]>;
         default: number;
@@ -29,7 +33,7 @@ declare const sliderProps: {
         default: string;
     };
     color: {
-        type: PropType<CombinedString | ColorToken>;
+        type: PropType<ColorToken | CombinedString>;
         default: string;
     };
     gradientColor: {

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

@@ -8,6 +8,10 @@ declare const sliderProps: {
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     value: {
         type: PropType<number | number[]>;
         default: number;
@@ -29,7 +33,7 @@ declare const sliderProps: {
         default: string;
     };
     color: {
-        type: PropType<CombinedString | ColorToken>;
+        type: PropType<ColorToken | CombinedString>;
         default: string;
     };
     gradientColor: {

package/dist/modules/slider.props.js

@@ -29,6 +29,10 @@ var sliderProps = {
     type: String,
     default: ""
   },
+  label: {
+    type: String,
+    default: "Label"
+  },
   value: {
     type: [Number, Array],
     default: 0

package/dist/modules/slider.props.mjs

@@ -1,7 +1,7 @@
 import {
   sliderEmits,
   sliderProps
-} from "../chunk-AX2E5DRG.mjs";
+} from "../chunk-YR25ZNN4.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   sliderEmits,

package/dist/slider.d.mts

@@ -1,6 +1,6 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
-import * as _mekari_pixel3_styled_system_tokens from '@mekari/pixel3-styled-system/tokens';
 import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+import * as _mekari_pixel3_styled_system_tokens from '@mekari/pixel3-styled-system/tokens';
 import { SliderVariant } from './modules/slider.types.mjs';
 import * as vue from 'vue';
 
@@ -9,6 +9,10 @@ declare const MpSlider: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     value: {
         type: vue.PropType<number | number[]>;
         default: number;
@@ -30,7 +34,7 @@ declare const MpSlider: vue.DefineComponent<{
         default: string;
     };
     color: {
-        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken | _mekari_pixel3_utils.CombinedString>;
         default: string;
     };
     gradientColor: {
@@ -50,6 +54,10 @@ declare const MpSlider: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     value: {
         type: vue.PropType<number | number[]>;
         default: number;
@@ -71,7 +79,7 @@ declare const MpSlider: vue.DefineComponent<{
         default: string;
     };
     color: {
-        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken | _mekari_pixel3_utils.CombinedString>;
         default: string;
     };
     gradientColor: {
@@ -89,13 +97,14 @@ declare const MpSlider: vue.DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    value: number | number[];
-    color: _mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken;
     id: string;
-    max: number;
+    label: string;
+    value: number | number[];
     min: number;
+    max: number;
     step: number;
     variant: SliderVariant;
+    color: _mekari_pixel3_styled_system_tokens.ColorToken | _mekari_pixel3_utils.CombinedString;
     gradientColor: _mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[];
     isGradient: boolean;
     isDisabled: boolean;

package/dist/slider.d.ts

@@ -1,6 +1,6 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
-import * as _mekari_pixel3_styled_system_tokens from '@mekari/pixel3-styled-system/tokens';
 import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+import * as _mekari_pixel3_styled_system_tokens from '@mekari/pixel3-styled-system/tokens';
 import { SliderVariant } from './modules/slider.types.js';
 import * as vue from 'vue';
 
@@ -9,6 +9,10 @@ declare const MpSlider: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     value: {
         type: vue.PropType<number | number[]>;
         default: number;
@@ -30,7 +34,7 @@ declare const MpSlider: vue.DefineComponent<{
         default: string;
     };
     color: {
-        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken | _mekari_pixel3_utils.CombinedString>;
         default: string;
     };
     gradientColor: {
@@ -50,6 +54,10 @@ declare const MpSlider: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     value: {
         type: vue.PropType<number | number[]>;
         default: number;
@@ -71,7 +79,7 @@ declare const MpSlider: vue.DefineComponent<{
         default: string;
     };
     color: {
-        type: vue.PropType<_mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken>;
+        type: vue.PropType<_mekari_pixel3_styled_system_tokens.ColorToken | _mekari_pixel3_utils.CombinedString>;
         default: string;
     };
     gradientColor: {
@@ -89,13 +97,14 @@ declare const MpSlider: vue.DefineComponent<{
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    value: number | number[];
-    color: _mekari_pixel3_utils.CombinedString | _mekari_pixel3_styled_system_tokens.ColorToken;
     id: string;
-    max: number;
+    label: string;
+    value: number | number[];
     min: number;
+    max: number;
     step: number;
     variant: SliderVariant;
+    color: _mekari_pixel3_styled_system_tokens.ColorToken | _mekari_pixel3_utils.CombinedString;
     gradientColor: _mekari_pixel3_styled_system_tokens.ColorToken[] | _mekari_pixel3_utils.CombinedString[];
     isGradient: boolean;
     isDisabled: boolean;

package/dist/slider.js

@@ -204,6 +204,9 @@ function useSlider(props, emit) {
     return gradientStr;
   }
   __name(handleGradientColor, "handleGradientColor");
+  (0, import_vue.watch)(() => props.value, (newValue) => {
+    currentValue.value = newValue;
+  });
   return {
     rootAttrs,
     labelWrapperAttrs,
@@ -228,6 +231,10 @@ var sliderProps = {
     type: String,
     default: ""
   },
+  label: {
+    type: String,
+    default: "Label"
+  },
   value: {
     type: [Number, Array],
     default: 0
@@ -297,10 +304,11 @@ var MpSlider = (0, import_vue3.defineComponent)({
     return () => {
       const {
         min,
-        max
+        max,
+        label
       } = props;
-      const label = slots.label && slots.label();
-      const value = slots.value && slots.value({
+      const labelSlots = slots.label && slots.label();
+      const valueSlots = slots.value && slots.value({
         value: currentValue.value
       });
       const minSlots = slots.min && slots.min();
@@ -309,12 +317,12 @@ var MpSlider = (0, import_vue3.defineComponent)({
       return (0, import_vue2.createVNode)("div", rootAttrs.value, [(0, import_vue2.createVNode)("div", labelWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
         "size": "label"
       }, {
-        default: () => [label ? label : "Label"]
+        default: () => [labelSlots ? labelSlots : label]
       }), (0, import_vue2.createVNode)(import_pixel3_text.MpText, {
         "size": "label",
         "weight": "semiBold"
       }, {
-        default: () => [value ? value : valueText]
+        default: () => [valueSlots ? valueSlots : valueText]
       })]), (0, import_vue2.createVNode)("div", sliderWrapperAttrs.value, [(0, import_vue2.createVNode)("div", progressAttrs.value, [(0, import_vue2.createVNode)("div", sliderAttrs.value, null)]), (0, import_vue2.createVNode)("div", inputWrapperAttrs.value, [(0, import_vue2.createVNode)("input", inputMinAttrs.value, null), isRangeSlider.value && (0, import_vue2.createVNode)("input", inputMaxAttrs.value, null)])]), (0, import_vue2.createVNode)("div", legendWrapperAttrs.value, [(0, import_vue2.createVNode)(import_pixel3_text.MpText, {
         "size": "label-small",
         "color": isNextTheme.value ? "text.secondary" : "gray.600"

package/dist/slider.mjs

@@ -1,8 +1,8 @@
 import {
   MpSlider
-} from "./chunk-T52MRHGI.mjs";
-import "./chunk-NJDSOT4O.mjs";
-import "./chunk-AX2E5DRG.mjs";
+} from "./chunk-GTYGVZ3D.mjs";
+import "./chunk-44UPEK7T.mjs";
+import "./chunk-YR25ZNN4.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpSlider

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@mekari/pixel3-slider",
   "description": "Slider component for mekari pixel 3",
-  "version": "0.0.6",
+  "version": "0.0.7-dev.0",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@mekari/pixel3-text": "0.0.17",
-    "@mekari/pixel3-styled-system": "0.1.3",
-    "@mekari/pixel3-utils": "0.0.7"
+    "@mekari/pixel3-styled-system": "0.1.4-dev.0",
+    "@mekari/pixel3-utils": "0.0.7",
+    "@mekari/pixel3-text": "0.0.18-dev.0"
   },
   "peerDependencies": {
     "vue": "^3.4.9"