@morscherlab/mld-sdk 0.6.0

package/dist/components/CollapsibleCard.vue.js

@@ -0,0 +1,175 @@
+import { defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, Fragment, renderList, toDisplayString, createCommentVNode, withKeys, withModifiers, createVNode, Transition, withCtx, withDirectives, renderSlot, vShow } from "vue";
+const _hoisted_1 = { class: "mld-collapsible-card" };
+const _hoisted_2 = ["disabled", "aria-expanded"];
+const _hoisted_3 = { class: "mld-collapsible-card__title-section" };
+const _hoisted_4 = ["d"];
+const _hoisted_5 = ["d"];
+const _hoisted_6 = { class: "mld-collapsible-card__titles" };
+const _hoisted_7 = { class: "mld-collapsible-card__title" };
+const _hoisted_8 = {
+  key: 0,
+  class: "mld-collapsible-card__subtitle"
+};
+const _hoisted_9 = { class: "mld-collapsible-card__actions" };
+const _hoisted_10 = ["aria-checked", "onKeydown"];
+const _hoisted_11 = { class: "mld-collapsible-card__body" };
+const _hoisted_12 = { class: "mld-collapsible-card__content" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CollapsibleCard",
+  props: {
+    title: {},
+    subtitle: {},
+    defaultOpen: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    icon: {},
+    iconColor: {},
+    iconBg: {},
+    showToggle: { type: Boolean, default: false },
+    toggleValue: { type: Boolean, default: false },
+    toggleColor: { default: "" }
+  },
+  emits: ["update:toggleValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isOpen = ref(props.defaultOpen);
+    const toggle = () => {
+      if (!props.disabled) {
+        isOpen.value = !isOpen.value;
+      }
+    };
+    const handleToggleClick = (event) => {
+      event.stopPropagation();
+      emit("update:toggleValue", !props.toggleValue);
+    };
+    const headerClasses = computed(() => [
+      "mld-collapsible-card__header",
+      props.disabled ? "mld-collapsible-card__header--disabled" : ""
+    ]);
+    const iconBgStyle = computed(() => ({
+      backgroundColor: props.iconBg || "var(--color-primary-soft)"
+    }));
+    const iconColorStyle = computed(() => ({
+      color: props.iconColor || "var(--color-primary)"
+    }));
+    const isSvgIcon = computed(() => {
+      if (!props.icon) return false;
+      return Array.isArray(props.icon) || props.icon.startsWith("M") || props.icon.startsWith("m");
+    });
+    const toggleTrackStyle = computed(() => {
+      if (!props.toggleValue || !props.toggleColor) return {};
+      return {
+        backgroundColor: props.toggleColor,
+        borderColor: props.toggleColor
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("button", {
+          type: "button",
+          class: normalizeClass(headerClasses.value),
+          disabled: __props.disabled,
+          "aria-expanded": isOpen.value,
+          onClick: toggle
+        }, [
+          createElementVNode("div", _hoisted_3, [
+            __props.icon ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "mld-collapsible-card__icon-badge",
+              style: normalizeStyle(iconBgStyle.value)
+            }, [
+              isSvgIcon.value ? (openBlock(), createElementBlock("svg", {
+                key: 0,
+                class: "mld-collapsible-card__icon",
+                style: normalizeStyle(iconColorStyle.value),
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [
+                Array.isArray(__props.icon) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.icon, (d, i) => {
+                  return openBlock(), createElementBlock("path", {
+                    key: i,
+                    d
+                  }, null, 8, _hoisted_4);
+                }), 128)) : (openBlock(), createElementBlock("path", {
+                  key: 1,
+                  d: __props.icon
+                }, null, 8, _hoisted_5))
+              ], 4)) : (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: "mld-collapsible-card__icon-text",
+                style: normalizeStyle(iconColorStyle.value)
+              }, toDisplayString(__props.icon), 5))
+            ], 4)) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("h3", _hoisted_7, toDisplayString(__props.title), 1),
+              __props.subtitle ? (openBlock(), createElementBlock("p", _hoisted_8, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)
+            ])
+          ]),
+          createElementVNode("div", _hoisted_9, [
+            __props.showToggle ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "mld-collapsible-card__toggle",
+              onClick: handleToggleClick
+            }, [
+              createElementVNode("div", {
+                role: "switch",
+                tabindex: "0",
+                "aria-checked": __props.toggleValue,
+                class: normalizeClass([
+                  "mld-collapsible-card__toggle-track",
+                  __props.toggleValue ? "mld-collapsible-card__toggle-track--on" : ""
+                ]),
+                style: normalizeStyle(toggleTrackStyle.value),
+                onKeydown: [
+                  withKeys(withModifiers(handleToggleClick, ["prevent"]), ["enter"]),
+                  withKeys(withModifiers(handleToggleClick, ["prevent"]), ["space"])
+                ]
+              }, [
+                createElementVNode("span", {
+                  class: normalizeClass([
+                    "mld-collapsible-card__toggle-knob",
+                    __props.toggleValue ? "mld-collapsible-card__toggle-knob--on" : ""
+                  ])
+                }, null, 2)
+              ], 46, _hoisted_10)
+            ])) : createCommentVNode("", true),
+            (openBlock(), createElementBlock("svg", {
+              class: normalizeClass([
+                "mld-collapsible-card__chevron",
+                isOpen.value ? "mld-collapsible-card__chevron--open" : ""
+              ]),
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              viewBox: "0 0 24 24"
+            }, [..._cache[0] || (_cache[0] = [
+              createElementVNode("path", { d: "m6 9 6 6 6-6" }, null, -1)
+            ])], 2))
+          ])
+        ], 10, _hoisted_2),
+        createVNode(Transition, { name: "collapse" }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", _hoisted_11, [
+              createElementVNode("div", _hoisted_12, [
+                renderSlot(_ctx.$slots, "default")
+              ])
+            ], 512), [
+              [vShow, isOpen.value]
+            ])
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=CollapsibleCard.vue.js.map

package/dist/components/CollapsibleCard.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleCard.vue.js","sources":["../../src/components/CollapsibleCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\ninterface Props {\n  title: string\n  subtitle?: string\n  defaultOpen?: boolean\n  disabled?: boolean\n  icon?: string | string[]\n  iconColor?: string\n  iconBg?: string\n  showToggle?: boolean\n  toggleValue?: boolean\n  toggleColor?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  defaultOpen: false,\n  disabled: false,\n  showToggle: false,\n  toggleValue: false,\n  toggleColor: '',\n})\n\nconst emit = defineEmits<{\n  'update:toggleValue': [value: boolean]\n}>()\n\nconst isOpen = ref(props.defaultOpen)\n\nconst toggle = () => {\n  if (!props.disabled) {\n    isOpen.value = !isOpen.value\n  }\n}\n\nconst handleToggleClick = (event: Event) => {\n  event.stopPropagation()\n  emit('update:toggleValue', !props.toggleValue)\n}\n\nconst headerClasses = computed(() => [\n  'mld-collapsible-card__header',\n  props.disabled ? 'mld-collapsible-card__header--disabled' : '',\n])\n\nconst iconBgStyle = computed(() => ({\n  backgroundColor: props.iconBg || 'var(--color-primary-soft)',\n}))\n\nconst iconColorStyle = computed(() => ({\n  color: props.iconColor || 'var(--color-primary)',\n}))\n\nconst isSvgIcon = computed(() => {\n  if (!props.icon) return false\n  return Array.isArray(props.icon) || props.icon.startsWith('M') || props.icon.startsWith('m')\n})\n\nconst toggleTrackStyle = computed(() => {\n  if (!props.toggleValue || !props.toggleColor) return {}\n  return {\n    backgroundColor: props.toggleColor,\n    borderColor: props.toggleColor,\n  }\n})\n</script>\n\n<template>\n  <div class=\"mld-collapsible-card\">\n    <button\n      type=\"button\"\n      :class=\"headerClasses\"\n      :disabled=\"disabled\"\n      :aria-expanded=\"isOpen\"\n      @click=\"toggle\"\n    >\n      <div class=\"mld-collapsible-card__title-section\">\n        <!-- Icon badge -->\n        <div v-if=\"icon\" class=\"mld-collapsible-card__icon-badge\" :style=\"iconBgStyle\">\n          <svg\n            v-if=\"isSvgIcon\"\n            class=\"mld-collapsible-card__icon\"\n            :style=\"iconColorStyle\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <template v-if=\"Array.isArray(icon)\">\n              <path v-for=\"(d, i) in icon\" :key=\"i\" :d=\"d\" />\n            </template>\n            <path v-else :d=\"icon\" />\n          </svg>\n          <span v-else class=\"mld-collapsible-card__icon-text\" :style=\"iconColorStyle\">{{ icon }}</span>\n        </div>\n\n        <div class=\"mld-collapsible-card__titles\">\n          <h3 class=\"mld-collapsible-card__title\">{{ title }}</h3>\n          <p v-if=\"subtitle\" class=\"mld-collapsible-card__subtitle\">{{ subtitle }}</p>\n        </div>\n      </div>\n\n      <div class=\"mld-collapsible-card__actions\">\n        <!-- Toggle switch -->\n        <div\n          v-if=\"showToggle\"\n          class=\"mld-collapsible-card__toggle\"\n          @click=\"handleToggleClick\"\n        >\n          <div\n            role=\"switch\"\n            tabindex=\"0\"\n            :aria-checked=\"toggleValue\"\n            :class=\"[\n              'mld-collapsible-card__toggle-track',\n              toggleValue ? 'mld-collapsible-card__toggle-track--on' : '',\n            ]\"\n            :style=\"toggleTrackStyle\"\n            @keydown.enter.prevent=\"handleToggleClick\"\n            @keydown.space.prevent=\"handleToggleClick\"\n          >\n            <span\n              :class=\"[\n                'mld-collapsible-card__toggle-knob',\n                toggleValue ? 'mld-collapsible-card__toggle-knob--on' : '',\n              ]\"\n            />\n          </div>\n        </div>\n\n        <!-- Chevron -->\n        <svg\n          :class=\"[\n            'mld-collapsible-card__chevron',\n            isOpen ? 'mld-collapsible-card__chevron--open' : '',\n          ]\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          viewBox=\"0 0 24 24\"\n        >\n          <path d=\"m6 9 6 6 6-6\" />\n        </svg>\n      </div>\n    </button>\n\n    <Transition name=\"collapse\">\n      <div v-show=\"isOpen\" class=\"mld-collapsible-card__body\">\n        <div class=\"mld-collapsible-card__content\">\n          <slot />\n        </div>\n      </div>\n    </Transition>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/collapsible-card.css';\n</style>\n"],"names":["_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_toDisplayString","_normalizeClass","_createVNode","_Transition","_withDirectives","_renderSlot"],"mappings":"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"}

package/dist/components/CollapsibleCard.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./CollapsibleCard.vue.js";
+/* empty css                     */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=CollapsibleCard.vue3.js.map

package/dist/components/CollapsibleCard.vue3.js.map

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

package/dist/components/ColorSlider.vue.d.ts

@@ -0,0 +1,34 @@
+interface ColorStop {
+    value: number;
+    color: string;
+}
+interface Props {
+    modelValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    showLabels?: boolean;
+    minLabel?: string;
+    maxLabel?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Color stops for the gradient. Default: green (low) → yellow (mid) → red (high) */
+    colorStops?: ColorStop[];
+    /** Thresholds for value badge color. Default: green ≤ threshold1, yellow ≤ threshold2, red above */
+    thresholds?: [number, number];
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: "sm" | "md" | "lg";
+    min: number;
+    max: number;
+    step: number;
+    showValue: boolean;
+    showLabels: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/ColorSlider.vue.js

@@ -0,0 +1,131 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, createCommentVNode } from "vue";
+const _hoisted_1 = { class: "mld-color-slider__row" };
+const _hoisted_2 = { class: "mld-color-slider__track" };
+const _hoisted_3 = ["value", "min", "max", "step", "disabled", "aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColorSlider",
+  props: {
+    modelValue: {},
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    disabled: { type: Boolean, default: false },
+    showValue: { type: Boolean, default: true },
+    showLabels: { type: Boolean, default: false },
+    minLabel: {},
+    maxLabel: {},
+    size: { default: "md" },
+    colorStops: {},
+    thresholds: {}
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const defaultColorStops = [
+      { value: 0, color: "#22c55e" },
+      { value: 30, color: "#eab308" },
+      { value: 100, color: "#ef4444" }
+    ];
+    const defaultThresholds = [10, 30];
+    const colorStops = computed(() => props.colorStops ?? defaultColorStops);
+    const thresholds = computed(() => props.thresholds ?? defaultThresholds);
+    const sizeConfig = computed(() => {
+      switch (props.size) {
+        case "sm":
+          return { thumb: 16, badgeSize: "24px", fontSize: "11px", labelFontSize: "0.625rem" };
+        case "lg":
+          return { thumb: 22, badgeSize: "32px", fontSize: "14px", labelFontSize: "0.75rem" };
+        default:
+          return { thumb: 18, badgeSize: "28px", fontSize: "12px", labelFontSize: "0.625rem" };
+      }
+    });
+    const currentValue = computed(() => props.modelValue ?? props.min);
+    const percentage = computed(() => {
+      const range = props.max - props.min;
+      if (range === 0) return 0;
+      return (currentValue.value - props.min) / range * 100;
+    });
+    const gradientStyle = computed(() => {
+      const stops = colorStops.value.map((stop) => `${stop.color} ${stop.value}%`).join(", ");
+      return `linear-gradient(to right, ${stops})`;
+    });
+    const valueBadgeStyle = computed(() => {
+      const pct = percentage.value;
+      const [t1, t2] = thresholds.value;
+      if (pct <= t1) {
+        return {
+          backgroundColor: "rgba(34, 197, 94, 0.15)",
+          color: "#22c55e",
+          border: "1px solid rgba(34, 197, 94, 0.3)"
+        };
+      }
+      if (pct <= t2) {
+        return {
+          backgroundColor: "rgba(234, 179, 8, 0.15)",
+          color: "#eab308",
+          border: "1px solid rgba(234, 179, 8, 0.3)"
+        };
+      }
+      return {
+        backgroundColor: "rgba(239, 68, 68, 0.15)",
+        color: "#ef4444",
+        border: "1px solid rgba(239, 68, 68, 0.3)"
+      };
+    });
+    function handleInput(event) {
+      const target = event.target;
+      emit("update:modelValue", Number(target.value));
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["mld-color-slider", { "mld-color-slider--disabled": __props.disabled }])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_2, [
+            createElementVNode("input", {
+              type: "range",
+              value: currentValue.value,
+              min: __props.min,
+              max: __props.max,
+              step: __props.step,
+              disabled: __props.disabled,
+              "aria-label": `Value: ${currentValue.value}`,
+              "aria-valuemin": __props.min,
+              "aria-valuemax": __props.max,
+              "aria-valuenow": currentValue.value,
+              class: "color-slider mld-color-slider__input",
+              style: normalizeStyle({
+                "--slider-gradient": gradientStyle.value,
+                "--thumb-size": `${sizeConfig.value.thumb}px`
+              }),
+              onInput: handleInput
+            }, null, 44, _hoisted_3)
+          ]),
+          __props.showValue ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "mld-color-slider__badge",
+            style: normalizeStyle({
+              ...valueBadgeStyle.value,
+              minWidth: sizeConfig.value.badgeSize,
+              height: sizeConfig.value.badgeSize,
+              fontSize: sizeConfig.value.fontSize
+            })
+          }, toDisplayString(currentValue.value), 5)) : createCommentVNode("", true)
+        ]),
+        __props.showLabels ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "mld-color-slider__labels",
+          style: normalizeStyle({ fontSize: sizeConfig.value.labelFontSize })
+        }, [
+          createElementVNode("span", null, toDisplayString(__props.minLabel ?? __props.min), 1),
+          createElementVNode("span", null, toDisplayString(__props.maxLabel ?? __props.max), 1)
+        ], 4)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ColorSlider.vue.js.map

package/dist/components/ColorSlider.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.vue.js","sources":["../../src/components/ColorSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\ninterface ColorStop {\n  value: number\n  color: string\n}\n\ninterface Props {\n  modelValue?: number\n  min?: number\n  max?: number\n  step?: number\n  disabled?: boolean\n  showValue?: boolean\n  showLabels?: boolean\n  minLabel?: string\n  maxLabel?: string\n  size?: 'sm' | 'md' | 'lg'\n  /** Color stops for the gradient. Default: green (low) → yellow (mid) → red (high) */\n  colorStops?: ColorStop[]\n  /** Thresholds for value badge color. Default: green ≤ threshold1, yellow ≤ threshold2, red above */\n  thresholds?: [number, number]\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  min: 0,\n  max: 100,\n  step: 1,\n  disabled: false,\n  showValue: true,\n  showLabels: false,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: number]\n}>()\n\n// Default color stops: green at start, yellow at 30%, red at end\nconst defaultColorStops: ColorStop[] = [\n  { value: 0, color: '#22c55e' },\n  { value: 30, color: '#eab308' },\n  { value: 100, color: '#ef4444' },\n]\n\n// Default thresholds: green ≤ 10%, yellow ≤ 30%, red above\nconst defaultThresholds: [number, number] = [10, 30]\n\nconst colorStops = computed(() => props.colorStops ?? defaultColorStops)\nconst thresholds = computed(() => props.thresholds ?? defaultThresholds)\n\nconst sizeConfig = computed(() => {\n  switch (props.size) {\n    case 'sm': return { thumb: 16, badgeSize: '24px', fontSize: '11px', labelFontSize: '0.625rem' }\n    case 'lg': return { thumb: 22, badgeSize: '32px', fontSize: '14px', labelFontSize: '0.75rem' }\n    default: return { thumb: 18, badgeSize: '28px', fontSize: '12px', labelFontSize: '0.625rem' }\n  }\n})\n\nconst currentValue = computed(() => props.modelValue ?? props.min)\n\nconst percentage = computed(() => {\n  const range = props.max - props.min\n  if (range === 0) return 0\n  return ((currentValue.value - props.min) / range) * 100\n})\n\n// Generate CSS gradient from color stops\nconst gradientStyle = computed(() => {\n  const stops = colorStops.value\n    .map(stop => `${stop.color} ${stop.value}%`)\n    .join(', ')\n  return `linear-gradient(to right, ${stops})`\n})\n\n// Value badge style based on thresholds\nconst valueBadgeStyle = computed(() => {\n  const pct = percentage.value\n  const [t1, t2] = thresholds.value\n\n  if (pct <= t1) {\n    return {\n      backgroundColor: 'rgba(34, 197, 94, 0.15)',\n      color: '#22c55e',\n      border: '1px solid rgba(34, 197, 94, 0.3)'\n    }\n  }\n  if (pct <= t2) {\n    return {\n      backgroundColor: 'rgba(234, 179, 8, 0.15)',\n      color: '#eab308',\n      border: '1px solid rgba(234, 179, 8, 0.3)'\n    }\n  }\n  return {\n    backgroundColor: 'rgba(239, 68, 68, 0.15)',\n    color: '#ef4444',\n    border: '1px solid rgba(239, 68, 68, 0.3)'\n  }\n})\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLInputElement\n  emit('update:modelValue', Number(target.value))\n}\n</script>\n\n<template>\n  <div :class=\"['mld-color-slider', { 'mld-color-slider--disabled': disabled }]\">\n    <div class=\"mld-color-slider__row\">\n      <!-- Slider track with gradient -->\n      <div class=\"mld-color-slider__track\">\n        <input\n          type=\"range\"\n          :value=\"currentValue\"\n          :min=\"min\"\n          :max=\"max\"\n          :step=\"step\"\n          :disabled=\"disabled\"\n          :aria-label=\"`Value: ${currentValue}`\"\n          :aria-valuemin=\"min\"\n          :aria-valuemax=\"max\"\n          :aria-valuenow=\"currentValue\"\n          class=\"color-slider mld-color-slider__input\"\n          :style=\"{\n            '--slider-gradient': gradientStyle,\n            '--thumb-size': `${sizeConfig.thumb}px`,\n          }\"\n          @input=\"handleInput\"\n        />\n      </div>\n\n      <!-- Value badge -->\n      <div\n        v-if=\"showValue\"\n        class=\"mld-color-slider__badge\"\n        :style=\"{\n          ...valueBadgeStyle,\n          minWidth: sizeConfig.badgeSize,\n          height: sizeConfig.badgeSize,\n          fontSize: sizeConfig.fontSize,\n        }\"\n      >\n        {{ currentValue }}\n      </div>\n    </div>\n\n    <!-- Min/Max labels -->\n    <div\n      v-if=\"showLabels\"\n      class=\"mld-color-slider__labels\"\n      :style=\"{ fontSize: sizeConfig.labelFontSize }\"\n    >\n      <span>{{ minLabel ?? min }}</span>\n      <span>{{ maxLabel ?? max }}</span>\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/color-slider.css';\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeStyle","_toDisplayString"],"mappings":"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"}

package/dist/components/ColorSlider.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./ColorSlider.vue.js";
+/* empty css                 */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ColorSlider.vue3.js.map

package/dist/components/ColorSlider.vue3.js.map

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

package/dist/components/ConcentrationInput.vue.d.ts

@@ -0,0 +1,25 @@
+import { ConcentrationValue, ConcentrationUnit } from '../composables/useConcentrationUnits';
+interface Props {
+    modelValue?: ConcentrationValue;
+    allowedUnits?: ConcentrationUnit[];
+    showConversion?: boolean;
+    molecularWeight?: number;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    placeholder?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: ConcentrationValue | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: ConcentrationValue | undefined) => any) | undefined;
+}>, {
+    error: boolean;
+    disabled: boolean;
+    size: "sm" | "md" | "lg";
+    placeholder: string;
+    showConversion: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/ConcentrationInput.vue.js

@@ -0,0 +1,161 @@
+import { defineComponent, computed, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, toDisplayString, createCommentVNode } from "vue";
+import { useConcentrationUnits } from "../composables/useConcentrationUnits.js";
+const _hoisted_1 = { class: "mld-concentration-input__controls" };
+const _hoisted_2 = ["value", "min", "max", "disabled", "placeholder"];
+const _hoisted_3 = { class: "mld-concentration-input__unit" };
+const _hoisted_4 = ["value", "disabled"];
+const _hoisted_5 = ["label"];
+const _hoisted_6 = ["value"];
+const _hoisted_7 = ["value"];
+const _hoisted_8 = {
+  key: 0,
+  class: "mld-concentration-input__conversion"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConcentrationInput",
+  props: {
+    modelValue: {},
+    allowedUnits: {},
+    showConversion: { type: Boolean, default: true },
+    molecularWeight: {},
+    min: {},
+    max: {},
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false },
+    size: { default: "md" },
+    placeholder: { default: "Enter value" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { unitCategories, getConversionHint } = useConcentrationUnits();
+    const filteredCategories = computed(() => {
+      if (!props.allowedUnits || props.allowedUnits.length === 0) {
+        return unitCategories.value;
+      }
+      return unitCategories.value.map((cat) => ({
+        label: cat.label,
+        units: cat.units.filter((u) => props.allowedUnits.includes(u))
+      })).filter((cat) => cat.units.length > 0);
+    });
+    const availableUnits = computed(() => {
+      return filteredCategories.value.flatMap((cat) => cat.units);
+    });
+    const currentValue = computed(() => {
+      var _a;
+      return (_a = props.modelValue) == null ? void 0 : _a.value;
+    });
+    const currentUnit = computed(() => {
+      var _a;
+      return ((_a = props.modelValue) == null ? void 0 : _a.unit) || availableUnits.value[0] || "µM";
+    });
+    const conversionHint = computed(() => {
+      if (!props.showConversion || !props.modelValue) return null;
+      return getConversionHint(props.modelValue);
+    });
+    function handleValueInput(event) {
+      const target = event.target;
+      const value = target.value === "" ? void 0 : Number(target.value);
+      if (value === void 0 || isNaN(value)) {
+        emit("update:modelValue", void 0);
+        return;
+      }
+      let clampedValue = value;
+      if (props.min !== void 0 && clampedValue < props.min) {
+        clampedValue = props.min;
+      }
+      if (props.max !== void 0 && clampedValue > props.max) {
+        clampedValue = props.max;
+      }
+      emit("update:modelValue", {
+        value: clampedValue,
+        unit: currentUnit.value
+      });
+    }
+    function handleUnitChange(event) {
+      const target = event.target;
+      const unit = target.value;
+      emit("update:modelValue", {
+        value: currentValue.value ?? 0,
+        unit
+      });
+    }
+    watch(availableUnits, (units) => {
+      if (props.modelValue && !units.includes(props.modelValue.unit)) {
+        emit("update:modelValue", {
+          value: props.modelValue.value,
+          unit: units[0] || "µM"
+        });
+      }
+    }, { immediate: true });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "mld-concentration-input",
+          __props.error ? "mld-concentration-input--error" : "",
+          __props.disabled ? "mld-concentration-input--disabled" : ""
+        ])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("input", {
+            type: "number",
+            value: currentValue.value,
+            min: __props.min,
+            max: __props.max,
+            disabled: __props.disabled,
+            placeholder: __props.placeholder,
+            class: normalizeClass([
+              "mld-concentration-input__value",
+              `mld-concentration-input__value--${__props.size}`,
+              __props.disabled ? "mld-concentration-input__value--disabled" : ""
+            ]),
+            "aria-label": "Concentration value",
+            onInput: handleValueInput
+          }, null, 42, _hoisted_2),
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("select", {
+              value: currentUnit.value,
+              disabled: __props.disabled,
+              class: normalizeClass([
+                "mld-concentration-input__unit-select",
+                `mld-concentration-input__unit-select--${__props.size}`
+              ]),
+              "aria-label": "Concentration unit",
+              onChange: handleUnitChange
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredCategories.value, (category) => {
+                return openBlock(), createElementBlock(Fragment, {
+                  key: category.label
+                }, [
+                  filteredCategories.value.length > 1 ? (openBlock(), createElementBlock("optgroup", {
+                    key: 0,
+                    label: category.label,
+                    class: "mld-concentration-input__unit-group"
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(category.units, (unit) => {
+                      return openBlock(), createElementBlock("option", {
+                        key: unit,
+                        value: unit
+                      }, toDisplayString(unit), 9, _hoisted_6);
+                    }), 128))
+                  ], 8, _hoisted_5)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(category.units, (unit) => {
+                    return openBlock(), createElementBlock("option", {
+                      key: unit,
+                      value: unit
+                    }, toDisplayString(unit), 9, _hoisted_7);
+                  }), 128))
+                ], 64);
+              }), 128))
+            ], 42, _hoisted_4)
+          ])
+        ]),
+        __props.showConversion && conversionHint.value ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(conversionHint.value), 1)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ConcentrationInput.vue.js.map

package/dist/components/ConcentrationInput.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConcentrationInput.vue.js","sources":["../../src/components/ConcentrationInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from 'vue'\nimport {\n  useConcentrationUnits,\n  type ConcentrationValue,\n  type ConcentrationUnit,\n} from '../composables/useConcentrationUnits'\n\ninterface Props {\n  modelValue?: ConcentrationValue\n  allowedUnits?: ConcentrationUnit[]\n  showConversion?: boolean\n  molecularWeight?: number\n  min?: number\n  max?: number\n  disabled?: boolean\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  placeholder?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  showConversion: true,\n  disabled: false,\n  error: false,\n  size: 'md',\n  placeholder: 'Enter value',\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: ConcentrationValue | undefined]\n}>()\n\nconst { unitCategories, getConversionHint } = useConcentrationUnits()\n\n// Filter categories based on allowedUnits\nconst filteredCategories = computed(() => {\n  if (!props.allowedUnits || props.allowedUnits.length === 0) {\n    return unitCategories.value\n  }\n  return unitCategories.value\n    .map(cat => ({\n      label: cat.label,\n      units: cat.units.filter(u => props.allowedUnits!.includes(u)),\n    }))\n    .filter(cat => cat.units.length > 0)\n})\n\n// Flatten all available units\nconst availableUnits = computed(() => {\n  return filteredCategories.value.flatMap(cat => cat.units)\n})\n\n// Current value and unit\nconst currentValue = computed(() => props.modelValue?.value)\nconst currentUnit = computed(() => props.modelValue?.unit || availableUnits.value[0] || 'µM')\n\n// Conversion hint\nconst conversionHint = computed(() => {\n  if (!props.showConversion || !props.modelValue) return null\n  return getConversionHint(props.modelValue)\n})\n\nfunction handleValueInput(event: Event) {\n  const target = event.target as HTMLInputElement\n  const value = target.value === '' ? undefined : Number(target.value)\n\n  if (value === undefined || isNaN(value)) {\n    emit('update:modelValue', undefined)\n    return\n  }\n\n  // Apply min/max constraints\n  let clampedValue = value\n  if (props.min !== undefined && clampedValue < props.min) {\n    clampedValue = props.min\n  }\n  if (props.max !== undefined && clampedValue > props.max) {\n    clampedValue = props.max\n  }\n\n  emit('update:modelValue', {\n    value: clampedValue,\n    unit: currentUnit.value,\n  })\n}\n\nfunction handleUnitChange(event: Event) {\n  const target = event.target as HTMLSelectElement\n  const unit = target.value as ConcentrationUnit\n\n  emit('update:modelValue', {\n    value: currentValue.value ?? 0,\n    unit,\n  })\n}\n\n// Ensure modelValue always has a valid unit\nwatch(availableUnits, (units) => {\n  if (props.modelValue && !units.includes(props.modelValue.unit)) {\n    emit('update:modelValue', {\n      value: props.modelValue.value,\n      unit: units[0] || 'µM',\n    })\n  }\n}, { immediate: true })\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'mld-concentration-input',\n      error ? 'mld-concentration-input--error' : '',\n      disabled ? 'mld-concentration-input--disabled' : '',\n    ]\"\n  >\n    <div class=\"mld-concentration-input__controls\">\n      <input\n        type=\"number\"\n        :value=\"currentValue\"\n        :min=\"min\"\n        :max=\"max\"\n        :disabled=\"disabled\"\n        :placeholder=\"placeholder\"\n        :class=\"[\n          'mld-concentration-input__value',\n          `mld-concentration-input__value--${size}`,\n          disabled ? 'mld-concentration-input__value--disabled' : '',\n        ]\"\n        aria-label=\"Concentration value\"\n        @input=\"handleValueInput\"\n      />\n\n      <div class=\"mld-concentration-input__unit\">\n        <select\n          :value=\"currentUnit\"\n          :disabled=\"disabled\"\n          :class=\"[\n            'mld-concentration-input__unit-select',\n            `mld-concentration-input__unit-select--${size}`,\n          ]\"\n          aria-label=\"Concentration unit\"\n          @change=\"handleUnitChange\"\n        >\n          <template v-for=\"category in filteredCategories\" :key=\"category.label\">\n            <optgroup\n              v-if=\"filteredCategories.length > 1\"\n              :label=\"category.label\"\n              class=\"mld-concentration-input__unit-group\"\n            >\n              <option\n                v-for=\"unit in category.units\"\n                :key=\"unit\"\n                :value=\"unit\"\n              >\n                {{ unit }}\n              </option>\n            </optgroup>\n            <template v-else>\n              <option\n                v-for=\"unit in category.units\"\n                :key=\"unit\"\n                :value=\"unit\"\n              >\n                {{ unit }}\n              </option>\n            </template>\n          </template>\n        </select>\n      </div>\n    </div>\n\n    <div\n      v-if=\"showConversion && conversionHint\"\n      class=\"mld-concentration-input__conversion\"\n    >\n      {{ conversionHint }}\n    </div>\n  </div>\n</template>\n\n<style>\n@import '../styles/components/concentration-input.css';\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_Fragment","_renderList","_openBlock","_toDisplayString"],"mappings":"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"}

package/dist/components/ConcentrationInput.vue3.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./ConcentrationInput.vue.js";
+/* empty css                        */
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ConcentrationInput.vue3.js.map

package/dist/components/ConcentrationInput.vue3.js.map

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