@leaflink/stash 51.9.2 → 51.10.0

package/dist/RadioNew.js

@@ -1,7 +1,7 @@
-import { defineComponent as _, useCssModule as $, inject as B, createElementBlock as h, openBlock as b, normalizeClass as d, unref as a, createElementVNode as n, toDisplayString as y, withDirectives as M, vShow as x, renderSlot as k, computed as c, createBlock as g, resolveDynamicComponent as N, withCtx as D } from "vue";
-import { R as W } from "./RadioGroup.keys-CqfiKkNz.js";
-import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @__PURE__ */ _({
+import { defineComponent as _, useCssModule as v, inject as w, createElementBlock as f, openBlock as b, normalizeClass as s, unref as a, createElementVNode as n, toDisplayString as $, withDirectives as M, vShow as x, renderSlot as V, computed as c, createBlock as I, resolveDynamicComponent as g, withCtx as N } from "vue";
+import { R as B } from "./RadioGroup.keys-CqfiKkNz.js";
+import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const D = ["id", "name", "value", "checked", "disabled"], E = ["for"], R = /* @__PURE__ */ _({
   __name: "VariantButton",
   props: {
     disabled: { type: Boolean },
@@ -13,45 +13,42 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     value: {}
   },
   emits: ["input"],
-  setup(s, { emit: u }) {
-    const e = s, l = $(), t = B(W.key), r = u;
-    return (o, i) => {
-      var m, v;
-      return b(), h("div", {
-        "data-variant-button": "",
-        class: d([
-          a(l).root,
-          {
-            "tw-w-full": e.fullWidth,
-            [a(l)["radio-group-vertical-orientation"]]: ((v = (m = a(t)) == null ? void 0 : m.orientation) == null ? void 0 : v.value) === "vertical"
-          }
-        ])
-      }, [
-        n("input", {
-          id: `${e.name}-${e.id}`,
-          class: d(["tw-sr-only", a(l).input]),
-          type: "radio",
-          name: e.name,
-          value: e.value,
-          checked: e.modelValue === e.value,
-          disabled: e.disabled || e.disabled,
-          onInput: i[0] || (i[0] = (V) => r("input", V))
-        }, null, 42, E),
-        n("label", {
-          class: d(a(l).label),
-          for: `${e.name}-${e.id}`
-        }, y(e.label), 11, R)
-      ], 2);
-    };
+  setup(o, { emit: u }) {
+    const e = o, l = v(), t = w(B.key), r = u;
+    return (i, d) => (b(), f("div", {
+      "data-variant-button": "",
+      class: s([
+        a(l).root,
+        {
+          "tw-w-full": e.fullWidth,
+          [a(l)["radio-group-vertical-orientation"]]: a(t)?.orientation?.value === "vertical"
+        }
+      ])
+    }, [
+      n("input", {
+        id: `${e.name}-${e.id}`,
+        class: s(["tw-sr-only", a(l).input]),
+        type: "radio",
+        name: e.name,
+        value: e.value,
+        checked: e.modelValue === e.value,
+        disabled: e.disabled || e.disabled,
+        onInput: d[0] || (d[0] = (y) => r("input", y))
+      }, null, 42, D),
+      n("label", {
+        class: s(a(l).label),
+        for: `${e.name}-${e.id}`
+      }, $(e.label), 11, E)
+    ], 2));
   }
-}), q = "_label_6w0bq_2", O = "_root_6w0bq_14", S = "_input_6w0bq_36", z = {
-  label: q,
-  root: O,
+}), T = "_label_6w0bq_2", q = "_root_6w0bq_14", j = "_input_6w0bq_36", G = {
+  label: T,
+  root: q,
   "radio-group-vertical-orientation": "_radio-group-vertical-orientation_6w0bq_32",
-  input: S
-}, A = {
-  $style: z
-}, F = /* @__PURE__ */ w(T, [["__cssModules", A]]), J = ["id", "name", "value", "checked", "disabled"], P = ["for"], U = /* @__PURE__ */ _({
+  input: j
+}, O = {
+  $style: G
+}, S = /* @__PURE__ */ h(R, [["__cssModules", O]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ _({
   __name: "VariantChip",
   props: {
     disabled: { type: Boolean },
@@ -63,33 +60,33 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     value: {}
   },
   emits: ["input"],
-  setup(s, { emit: u }) {
-    const e = s, l = $(), t = u;
-    return (r, o) => (b(), h("div", {
-      class: d([a(l).root, { "tw-w-full": e.fullWidth }])
+  setup(o, { emit: u }) {
+    const e = o, l = v(), t = u;
+    return (r, i) => (b(), f("div", {
+      class: s([a(l).root, { "tw-w-full": e.fullWidth }])
     }, [
       n("input", {
         id: `${e.name}-${e.id}`,
-        class: d(["tw-sr-only", a(l).input]),
+        class: s(["tw-sr-only", a(l).input]),
         type: "radio",
         name: e.name,
         value: e.value,
         checked: e.modelValue === e.value,
         disabled: e.disabled || e.disabled,
-        onInput: o[0] || (o[0] = (i) => t("input", i))
-      }, null, 42, J),
+        onInput: i[0] || (i[0] = (d) => t("input", d))
+      }, null, 42, z),
       n("label", {
-        class: d(a(l).label),
+        class: s(a(l).label),
         for: `${e.name}-${e.id}`
-      }, y(e.label), 11, P)
+      }, $(e.label), 11, A)
     ], 2));
   }
-}), H = "_label_vdpts_2", K = "_input_vdpts_16", L = {
-  label: H,
-  input: K
-}, Q = {
-  $style: L
-}, X = /* @__PURE__ */ w(U, [["__cssModules", Q]]), Y = ["id", "name", "value", "checked", "disabled"], Z = ["for"], I = /* @__PURE__ */ _({
+}), J = "_label_vdpts_2", P = "_input_vdpts_16", U = {
+  label: J,
+  input: P
+}, H = {
+  $style: U
+}, K = /* @__PURE__ */ h(F, [["__cssModules", H]]), L = ["id", "name", "value", "checked", "disabled"], Q = ["for"], X = /* @__PURE__ */ _({
   __name: "VariantRadio",
   props: {
     disabled: { type: Boolean },
@@ -101,35 +98,35 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     value: {}
   },
   emits: ["input"],
-  setup(s, { emit: u }) {
-    const e = s, l = $(), t = u;
-    return (r, o) => (b(), h("div", {
-      class: d(["tw-flex", [a(l).root, { "tw-w-full": e.fullWidth }]])
+  setup(o, { emit: u }) {
+    const e = o, l = v(), t = u;
+    return (r, i) => (b(), f("div", {
+      class: s(["tw-flex", [a(l).root, { "tw-w-full": e.fullWidth }]])
     }, [
       n("input", {
         id: `${e.name}-${e.id}`,
-        class: d(a(l).input),
+        class: s(a(l).input),
         type: "radio",
         name: e.name,
         value: e.value,
         checked: e.modelValue === e.value,
         disabled: e.disabled,
-        onInput: o[0] || (o[0] = (i) => t("input", i))
-      }, null, 42, Y),
+        onInput: i[0] || (i[0] = (d) => t("input", d))
+      }, null, 42, L),
       M(n("label", {
-        class: d([a(l).label, { "tw-text-ice-500": e.disabled }]),
+        class: s([a(l).label, { "tw-text-ice-500": e.disabled }]),
         for: `${e.name}-${e.id}`
-      }, y(e.label), 11, Z), [
+      }, $(e.label), 11, Q), [
         [x, e.label]
       ])
     ], 2));
   }
-}), j = "_label_kw8hn_2", G = "_input_kw8hn_9", ee = {
-  label: j,
-  input: G
+}), Y = "_label_kw8hn_2", Z = "_input_kw8hn_9", ee = {
+  label: Y,
+  input: Z
 }, le = {
   $style: ee
-}, te = /* @__PURE__ */ w(I, [["__cssModules", le]]), ae = ["for"], se = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], de = ["id"], oe = /* @__PURE__ */ _({
+}, te = /* @__PURE__ */ h(X, [["__cssModules", le]]), ae = ["for"], oe = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], se = ["id"], ie = /* @__PURE__ */ _({
   __name: "VariantTile",
   props: {
     disabled: { type: Boolean },
@@ -141,14 +138,14 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     value: {}
   },
   emits: ["input"],
-  setup(s, { emit: u }) {
-    const e = s, l = $(), t = u;
-    return (r, o) => (b(), h("label", {
-      class: d([a(l).root, { "tw-w-full": e.fullWidth, [a(l)["root--disabled"]]: e.disabled }]),
+  setup(o, { emit: u }) {
+    const e = o, l = v(), t = u;
+    return (r, i) => (b(), f("label", {
+      class: s([a(l).root, { "tw-w-full": e.fullWidth, [a(l)["root--disabled"]]: e.disabled }]),
       for: `${e.name}-${e.id}`
     }, [
       n("div", {
-        class: d(["tw-flex tw-border", [
+        class: s(["tw-flex tw-border", [
           a(l)["tile-header"],
           {
             "tw-border-blue-500 tw-bg-blue-100": e.modelValue === e.value && !e.disabled,
@@ -159,21 +156,21 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
         n("input", {
           id: `${e.name}-${e.id}`,
           "aria-labelledby": `tile-label-${e.name}-${e.id}`,
-          class: d(["tw-sr-only", a(l).input]),
+          class: s(["tw-sr-only", a(l).input]),
           type: "radio",
           name: e.name,
           value: e.value,
           checked: e.modelValue === e.value,
           disabled: e.disabled,
-          onInput: o[0] || (o[0] = (i) => t("input", i))
-        }, null, 42, se),
+          onInput: i[0] || (i[0] = (d) => t("input", d))
+        }, null, 42, oe),
         n("div", {
           id: `tile-label-${e.name}-${e.id}`,
-          class: d([a(l).label, { "tw-text-ice-500": e.disabled }])
-        }, y(e.label), 11, de)
+          class: s([a(l).label, { "tw-text-ice-500": e.disabled }])
+        }, $(e.label), 11, se)
       ], 2),
       n("div", {
-        class: d([
+        class: s([
           a(l)["tile-body"],
           {
             "tw-border-ice-500": e.modelValue !== e.value || e.disabled,
@@ -181,12 +178,12 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
           }
         ])
       }, [
-        k(r.$slots, "default")
+        V(r.$slots, "default")
       ], 2)
     ], 10, ae));
   }
-}), ie = "_root_583pa_2", ne = "_label_583pa_32", ue = "_input_583pa_39", re = {
-  root: ie,
+}), de = "_root_583pa_2", ne = "_label_583pa_32", ue = "_input_583pa_39", re = {
+  root: de,
   "root--disabled": "_root--disabled_583pa_11",
   "tile-header": "_tile-header_583pa_15",
   "tile-body": "_tile-body_583pa_16",
@@ -194,8 +191,8 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
   input: ue
 }, ce = {
   $style: re
-}, pe = /* @__PURE__ */ w(oe, [["__cssModules", ce]]);
-var p = /* @__PURE__ */ ((s) => (s.Radio = "radio", s.Button = "button", s.Chip = "chip", s.Tile = "tile", s))(p || {});
+}, pe = /* @__PURE__ */ h(ie, [["__cssModules", ce]]);
+var p = /* @__PURE__ */ ((o) => (o.Radio = "radio", o.Button = "button", o.Chip = "chip", o.Tile = "tile", o))(p || {});
 const fe = /* @__PURE__ */ _({
   __name: "RadioNew",
   props: {
@@ -210,33 +207,33 @@ const fe = /* @__PURE__ */ _({
     value: {}
   },
   emits: ["update:modelValue"],
-  setup(s, { emit: u }) {
+  setup(o, { emit: u }) {
     const e = {
-      [p.Button]: F,
-      [p.Chip]: X,
+      [p.Button]: S,
+      [p.Chip]: K,
       [p.Radio]: te,
       [p.Tile]: pe
-    }, l = B(W.key, null), t = s, r = c(() => t.modelValue || (l == null ? void 0 : l.modelValue.value)), o = c(() => t.name || (l == null ? void 0 : l.name.value)), i = c(() => t.fullWidth || (l == null ? void 0 : l.fullWidth.value)), m = c(() => t.disabled || (l == null ? void 0 : l.disabled.value)), v = c(() => t.variant || (l == null ? void 0 : l.variant.value) || "radio"), V = u;
-    function C(f) {
-      if (l != null && l.update) {
-        l.update(f);
+    }, l = w(B.key, null), t = o, r = c(() => t.modelValue || l?.modelValue.value), i = c(() => t.name || l?.name.value), d = c(() => t.fullWidth || l?.fullWidth.value), y = c(() => t.disabled || l?.disabled.value), k = c(() => t.variant || l?.variant.value || "radio"), W = u;
+    function C(m) {
+      if (l?.update) {
+        l.update(m);
         return;
       }
-      V("update:modelValue", f.target.value);
+      W("update:modelValue", m.target.value);
     }
-    return (f, _e) => (b(), g(N(e[v.value]), {
+    return (m, _e) => (b(), I(g(e[k.value]), {
       id: t.id,
-      disabled: m.value,
+      disabled: y.value,
       "has-error": t.hasError,
-      "full-width": i.value,
+      "full-width": d.value,
       label: t.label,
       "model-value": r.value,
-      name: o.value,
+      name: i.value,
       value: t.value,
       onInput: C
     }, {
-      default: D(() => [
-        k(f.$slots, "default")
+      default: N(() => [
+        V(m.$slots, "default")
       ]),
       _: 3
     }, 40, ["id", "disabled", "has-error", "full-width", "label", "model-value", "name", "value"]));

package/dist/RadioNew.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioNew.js","sources":["../src/components/RadioNew/components/VariantButton.vue","../src/components/RadioNew/components/VariantChip.vue","../src/components/RadioNew/components/VariantRadio.vue","../src/components/RadioNew/components/VariantTile.vue","../src/components/RadioNew/Radio.types.ts","../src/components/RadioNew/RadioNew.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../../RadioGroup/RadioGroup.keys';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <div\n    data-variant-button\n    :class=\"[\n      classes.root,\n      {\n        'tw-w-full': props.fullWidth,\n        [classes['radio-group-vertical-orientation']]: radioGroupInjection?.orientation?.value === 'vertical',\n      },\n    ]\"\n  >\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"tw-sr-only\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled || props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label :class=\"classes.label\" :for=\"`${props.name}-${props.id}`\">\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.semibold');\n    color: var(--color-ice-700);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    display: block;\n    text-align: center;\n  }\n\n  .root:first-of-type .label {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root:last-of-type .label {\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root:not(:first-of-type) .label {\n    margin-left: -1px;\n  }\n\n  .root:not(:last-of-type) .label {\n    border-right-color: transparent;\n  }\n\n  .root.radio-group-vertical-orientation .label {\n    border-right-color: var(--color-ice-500);\n  }\n\n  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\n  }\n\n  .root.radio-group-vertical-orientation:first-of-type .label {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: 0;\n  }\n\n  .root.radio-group-vertical-orientation:last-of-type .label {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root.radio-group-vertical-orientation:not(:first-of-type) .label {\n    margin-left: 0;\n    margin-top: -1px;\n  }\n\n  .input:not(:checked, :disabled) ~ .label:hover {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    z-index: 1;\n    position: relative;\n  }\n\n  .input:checked:not(:disabled) ~ .label {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    background-color: var(--color-blue-100);\n    z-index: 1;\n    position: relative;\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <div :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"tw-sr-only\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled || props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label :class=\"classes.label\" :for=\"`${props.name}-${props.id}`\">\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    display: inline-block;\n    padding: theme('spacing.1') theme('spacing.3');\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.normal');\n    line-height: 1.375rem;\n    color: var(--color-ice-900);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    border-radius: 9999px;\n    white-space: nowrap;\n  }\n\n  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\n  }\n\n  .input:checked:not(:disabled) ~ .label {\n    border-color: var(--color-blue-500);\n    color: theme('colors.white');\n    background-color: var(--color-blue-500);\n    font-weight: theme('fontWeight.bold');\n  }\n\n  .input:not(:checked, :disabled) ~ .label:hover {\n    border-color: var(--color-blue-500);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <div class=\"tw-flex\" :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label\n      v-show=\"props.label\"\n      :class=\"[classes.label, { 'tw-text-ice-500': props.disabled }]\"\n      :for=\"`${props.name}-${props.id}`\"\n    >\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .input {\n    appearance: none;\n    border-radius: 50%;\n    min-width: 20px;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n  }\n\n  .input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .input:disabled {\n    background-image: radial-gradient(var(--color-ice-100) 100%, var(--color-ice-100) 100%);\n  }\n\n  .input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 50%, var(--color-ice-100) 54%);\n  }\n\n  .input:hover:not(:disabled) {\n    border-color: var(--color-blue-500);\n  }\n\n  .input:disabled ~ .label {\n    cursor: auto;\n  }\n\n  .input:hover:not(:disabled) ~ .label {\n    color: var(--color-ice-900);\n  }\n\n  .input:not(:disabled) ~ .label:hover {\n    color: var(--color-ice-900);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <label\n    :class=\"[classes.root, { 'tw-w-full': props.fullWidth, [classes['root--disabled']]: props.disabled }]\"\n    :for=\"`${props.name}-${props.id}`\"\n  >\n    <div\n      class=\"tw-flex tw-border\"\n      :class=\"[\n        classes['tile-header'],\n        {\n          'tw-border-blue-500 tw-bg-blue-100': props.modelValue === props.value && !props.disabled,\n          'tw-border-ice-500 tw-bg-ice-100': props.modelValue !== props.value || props.disabled,\n        },\n      ]\"\n    >\n      <input\n        :id=\"`${props.name}-${props.id}`\"\n        :aria-labelledby=\"`tile-label-${props.name}-${props.id}`\"\n        class=\"tw-sr-only\"\n        :class=\"classes.input\"\n        type=\"radio\"\n        :name=\"props.name\"\n        :value=\"props.value\"\n        :checked=\"props.modelValue === props.value\"\n        :disabled=\"props.disabled\"\n        @input=\"emit('input', $event)\"\n      />\n      <div :id=\"`tile-label-${props.name}-${props.id}`\" :class=\"[classes.label, { 'tw-text-ice-500': props.disabled }]\">\n        {{ props.label }}\n      </div>\n    </div>\n    <div\n      :class=\"[\n        classes['tile-body'],\n        {\n          'tw-border-ice-500': props.modelValue !== props.value || props.disabled,\n          'tw-border-blue-500': props.modelValue === props.value && !props.disabled,\n        },\n      ]\"\n    >\n      <slot></slot>\n    </div>\n  </label>\n</template>\n\n<style module>\n  .root {\n    border-radius: theme('borderRadius.DEFAULT');\n    cursor: pointer;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    user-select: none;\n  }\n\n  .root--disabled {\n    cursor: auto;\n  }\n\n  .tile-header,\n  .tile-body {\n    transition: all 0.2s;\n  }\n\n  .tile-header {\n    border-radius: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n    padding: theme('spacing.3') 0;\n  }\n\n  .root:hover:not(.root--disabled) .tile-header {\n    background-color: var(--color-blue-100) !important;\n    border-color: var(--color-blue-500) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .input {\n    appearance: none;\n    background-color: theme('colors.white');\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n    margin-left: theme('spacing.3');\n  }\n\n  .input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 50%, var(--color-ice-100) 54%);\n  }\n\n  .tile-body {\n    border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n    border-width: 0 1px 1px 1px;\n    background-color: theme('colors.white');\n    padding: theme('spacing.6');\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root:hover:not(.root--disabled) .tile-body {\n    border-color: var(--color-blue-500) !important;\n    transition: all 0.2s;\n  }\n</style>\n","export enum RadioVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioVariants = `${RadioVariant}`;\n","<script lang=\"ts\">\n  export * from './Radio.types';\n\n  export interface RadioProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Adds error styling\n     */\n    hasError?: boolean;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * the styling for the radio button @defaultValue 'radio'\n     */\n    variant?: RadioVariants;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup/RadioGroup.keys';\n  import VariantButton from './components/VariantButton.vue';\n  import VariantChip from './components/VariantChip.vue';\n  import VariantRadio from './components/VariantRadio.vue';\n  import VariantTile from './components/VariantTile.vue';\n  import { RadioVariant, RadioVariants } from './Radio.types';\n\n  const variantComponentsMap = {\n    [RadioVariant.Button]: VariantButton,\n    [RadioVariant.Chip]: VariantChip,\n    [RadioVariant.Radio]: VariantRadio,\n    [RadioVariant.Tile]: VariantTile,\n  };\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key, null);\n\n  const props = withDefaults(defineProps<RadioProps>(), {\n    disabled: false,\n    fullWidth: false,\n    hasError: false,\n    id: undefined,\n    label: '',\n    modelValue: undefined,\n    name: undefined,\n    variant: undefined,\n  });\n\n  /**\n   * use prop values but fallback to radio group context values if they are provided\n   */\n  const derivedModelValue = computed(() => props.modelValue || radioGroupInjection?.modelValue.value);\n  const derivedName = computed(() => props.name || radioGroupInjection?.name.value);\n  const derivedNameFullWidth = computed(() => props.fullWidth || radioGroupInjection?.fullWidth.value);\n  const derivedDisabled = computed(() => props.disabled || radioGroupInjection?.disabled.value);\n  const derivedVariant = computed<RadioVariants>(() => props.variant || radioGroupInjection?.variant.value || 'radio');\n\n  const emit = defineEmits<{\n    (e: 'update:modelValue', value: RadioProps['value']): void;\n  }>();\n\n  function onInput(e: Event) {\n    if (radioGroupInjection?.update) {\n      radioGroupInjection.update(e);\n\n      return;\n    }\n\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n</script>\n\n<template>\n  <component\n    :is=\"variantComponentsMap[derivedVariant]\"\n    :id=\"props.id\"\n    :disabled=\"derivedDisabled\"\n    :has-error=\"props.hasError\"\n    :full-width=\"derivedNameFullWidth\"\n    :label=\"props.label\"\n    :model-value=\"derivedModelValue\"\n    :name=\"derivedName\"\n    :value=\"props.value\"\n    @input=\"onInput\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["props","__props","classes","useCssModule","radioGroupInjection","inject","RADIO_GROUP_INJECTION","emit","__emit","RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","derivedModelValue","computed","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e"],"mappings":";;;;;;;;;;;;;;;;AA2CE,UAAMA,IAAQC,GACRC,IAAUC,EAAa,GACvBC,IAAsBC,EAAOC,EAAsB,GAAG,GAEtDC,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNb,UAAMR,IAAQC,GACRC,IAAUC,EAAa,GAEvBI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAMR,IAAQC,GACRC,IAAUC,EAAa,GAEvBI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAMR,IAAQC,GACRC,IAAUC,EAAa,GAEvBI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CH,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;AC8DV,UAAMC,IAAuB;AAAA,MAC3B,CAACD,EAAa,MAAM,GAAGE;AAAA,MACvB,CAACF,EAAa,IAAI,GAAGG;AAAA,MACrB,CAACH,EAAa,KAAK,GAAGI;AAAA,MACtB,CAACJ,EAAa,IAAI,GAAGK;AAAA,IACvB,GAEMV,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAE5DN,IAAQC,GAcRc,IAAoBC,EAAS,MAAMhB,EAAM,eAAcI,KAAA,gBAAAA,EAAqB,WAAW,MAAK,GAC5Fa,IAAcD,EAAS,MAAMhB,EAAM,SAAQI,KAAA,gBAAAA,EAAqB,KAAK,MAAK,GAC1Ec,IAAuBF,EAAS,MAAMhB,EAAM,cAAaI,KAAA,gBAAAA,EAAqB,UAAU,MAAK,GAC7Fe,IAAkBH,EAAS,MAAMhB,EAAM,aAAYI,KAAA,gBAAAA,EAAqB,SAAS,MAAK,GACtFgB,IAAiBJ,EAAwB,MAAMhB,EAAM,YAAWI,KAAA,gBAAAA,EAAqB,QAAQ,UAAS,OAAO,GAE7GG,IAAOC;AAIb,aAASa,EAAQC,GAAU;AACzB,UAAIlB,KAAA,QAAAA,EAAqB,QAAQ;AAC/B,QAAAA,EAAoB,OAAOkB,CAAC;AAE5B;AAAA,MAAA;AAGG,MAAAf,EAAA,qBAAsBe,EAAE,OAA4B,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioNew.js","sources":["../src/components/RadioNew/components/VariantButton.vue","../src/components/RadioNew/components/VariantChip.vue","../src/components/RadioNew/components/VariantRadio.vue","../src/components/RadioNew/components/VariantTile.vue","../src/components/RadioNew/Radio.types.ts","../src/components/RadioNew/RadioNew.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../../RadioGroup/RadioGroup.keys';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <div\n    data-variant-button\n    :class=\"[\n      classes.root,\n      {\n        'tw-w-full': props.fullWidth,\n        [classes['radio-group-vertical-orientation']]: radioGroupInjection?.orientation?.value === 'vertical',\n      },\n    ]\"\n  >\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"tw-sr-only\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled || props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label :class=\"classes.label\" :for=\"`${props.name}-${props.id}`\">\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.semibold');\n    color: var(--color-ice-700);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    display: block;\n    text-align: center;\n  }\n\n  .root:first-of-type .label {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root:last-of-type .label {\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root:not(:first-of-type) .label {\n    margin-left: -1px;\n  }\n\n  .root:not(:last-of-type) .label {\n    border-right-color: transparent;\n  }\n\n  .root.radio-group-vertical-orientation .label {\n    border-right-color: var(--color-ice-500);\n  }\n\n  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\n  }\n\n  .root.radio-group-vertical-orientation:first-of-type .label {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: 0;\n  }\n\n  .root.radio-group-vertical-orientation:last-of-type .label {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root.radio-group-vertical-orientation:not(:first-of-type) .label {\n    margin-left: 0;\n    margin-top: -1px;\n  }\n\n  .input:not(:checked, :disabled) ~ .label:hover {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    z-index: 1;\n    position: relative;\n  }\n\n  .input:checked:not(:disabled) ~ .label {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    background-color: var(--color-blue-100);\n    z-index: 1;\n    position: relative;\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <div :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"tw-sr-only\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled || props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label :class=\"classes.label\" :for=\"`${props.name}-${props.id}`\">\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    display: inline-block;\n    padding: theme('spacing.1') theme('spacing.3');\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.normal');\n    line-height: 1.375rem;\n    color: var(--color-ice-900);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    border-radius: 9999px;\n    white-space: nowrap;\n  }\n\n  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\n  }\n\n  .input:checked:not(:disabled) ~ .label {\n    border-color: var(--color-blue-500);\n    color: theme('colors.white');\n    background-color: var(--color-blue-500);\n    font-weight: theme('fontWeight.bold');\n  }\n\n  .input:not(:checked, :disabled) ~ .label:hover {\n    border-color: var(--color-blue-500);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <div class=\"tw-flex\" :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label\n      v-show=\"props.label\"\n      :class=\"[classes.label, { 'tw-text-ice-500': props.disabled }]\"\n      :for=\"`${props.name}-${props.id}`\"\n    >\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .input {\n    appearance: none;\n    border-radius: 50%;\n    min-width: 20px;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n  }\n\n  .input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .input:disabled {\n    background-image: radial-gradient(var(--color-ice-100) 100%, var(--color-ice-100) 100%);\n  }\n\n  .input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 50%, var(--color-ice-100) 54%);\n  }\n\n  .input:hover:not(:disabled) {\n    border-color: var(--color-blue-500);\n  }\n\n  .input:disabled ~ .label {\n    cursor: auto;\n  }\n\n  .input:hover:not(:disabled) ~ .label {\n    color: var(--color-ice-900);\n  }\n\n  .input:not(:disabled) ~ .label:hover {\n    color: var(--color-ice-900);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'input', event: Event): void;\n  }>();\n</script>\n\n<template>\n  <label\n    :class=\"[classes.root, { 'tw-w-full': props.fullWidth, [classes['root--disabled']]: props.disabled }]\"\n    :for=\"`${props.name}-${props.id}`\"\n  >\n    <div\n      class=\"tw-flex tw-border\"\n      :class=\"[\n        classes['tile-header'],\n        {\n          'tw-border-blue-500 tw-bg-blue-100': props.modelValue === props.value && !props.disabled,\n          'tw-border-ice-500 tw-bg-ice-100': props.modelValue !== props.value || props.disabled,\n        },\n      ]\"\n    >\n      <input\n        :id=\"`${props.name}-${props.id}`\"\n        :aria-labelledby=\"`tile-label-${props.name}-${props.id}`\"\n        class=\"tw-sr-only\"\n        :class=\"classes.input\"\n        type=\"radio\"\n        :name=\"props.name\"\n        :value=\"props.value\"\n        :checked=\"props.modelValue === props.value\"\n        :disabled=\"props.disabled\"\n        @input=\"emit('input', $event)\"\n      />\n      <div :id=\"`tile-label-${props.name}-${props.id}`\" :class=\"[classes.label, { 'tw-text-ice-500': props.disabled }]\">\n        {{ props.label }}\n      </div>\n    </div>\n    <div\n      :class=\"[\n        classes['tile-body'],\n        {\n          'tw-border-ice-500': props.modelValue !== props.value || props.disabled,\n          'tw-border-blue-500': props.modelValue === props.value && !props.disabled,\n        },\n      ]\"\n    >\n      <slot></slot>\n    </div>\n  </label>\n</template>\n\n<style module>\n  .root {\n    border-radius: theme('borderRadius.DEFAULT');\n    cursor: pointer;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    user-select: none;\n  }\n\n  .root--disabled {\n    cursor: auto;\n  }\n\n  .tile-header,\n  .tile-body {\n    transition: all 0.2s;\n  }\n\n  .tile-header {\n    border-radius: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n    padding: theme('spacing.3') 0;\n  }\n\n  .root:hover:not(.root--disabled) .tile-header {\n    background-color: var(--color-blue-100) !important;\n    border-color: var(--color-blue-500) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .input {\n    appearance: none;\n    background-color: theme('colors.white');\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n    margin-left: theme('spacing.3');\n  }\n\n  .input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 50%, var(--color-ice-100) 54%);\n  }\n\n  .tile-body {\n    border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n    border-width: 0 1px 1px 1px;\n    background-color: theme('colors.white');\n    padding: theme('spacing.6');\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root:hover:not(.root--disabled) .tile-body {\n    border-color: var(--color-blue-500) !important;\n    transition: all 0.2s;\n  }\n</style>\n","export enum RadioVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioVariants = `${RadioVariant}`;\n","<script lang=\"ts\">\n  export * from './Radio.types';\n\n  export interface RadioProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Adds error styling\n     */\n    hasError?: boolean;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * the styling for the radio button @defaultValue 'radio'\n     */\n    variant?: RadioVariants;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup/RadioGroup.keys';\n  import VariantButton from './components/VariantButton.vue';\n  import VariantChip from './components/VariantChip.vue';\n  import VariantRadio from './components/VariantRadio.vue';\n  import VariantTile from './components/VariantTile.vue';\n  import { RadioVariant, RadioVariants } from './Radio.types';\n\n  const variantComponentsMap = {\n    [RadioVariant.Button]: VariantButton,\n    [RadioVariant.Chip]: VariantChip,\n    [RadioVariant.Radio]: VariantRadio,\n    [RadioVariant.Tile]: VariantTile,\n  };\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key, null);\n\n  const props = withDefaults(defineProps<RadioProps>(), {\n    disabled: false,\n    fullWidth: false,\n    hasError: false,\n    id: undefined,\n    label: '',\n    modelValue: undefined,\n    name: undefined,\n    variant: undefined,\n  });\n\n  /**\n   * use prop values but fallback to radio group context values if they are provided\n   */\n  const derivedModelValue = computed(() => props.modelValue || radioGroupInjection?.modelValue.value);\n  const derivedName = computed(() => props.name || radioGroupInjection?.name.value);\n  const derivedNameFullWidth = computed(() => props.fullWidth || radioGroupInjection?.fullWidth.value);\n  const derivedDisabled = computed(() => props.disabled || radioGroupInjection?.disabled.value);\n  const derivedVariant = computed<RadioVariants>(() => props.variant || radioGroupInjection?.variant.value || 'radio');\n\n  const emit = defineEmits<{\n    (e: 'update:modelValue', value: RadioProps['value']): void;\n  }>();\n\n  function onInput(e: Event) {\n    if (radioGroupInjection?.update) {\n      radioGroupInjection.update(e);\n\n      return;\n    }\n\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n</script>\n\n<template>\n  <component\n    :is=\"variantComponentsMap[derivedVariant]\"\n    :id=\"props.id\"\n    :disabled=\"derivedDisabled\"\n    :has-error=\"props.hasError\"\n    :full-width=\"derivedNameFullWidth\"\n    :label=\"props.label\"\n    :model-value=\"derivedModelValue\"\n    :name=\"derivedName\"\n    :value=\"props.value\"\n    @input=\"onInput\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["props","__props","classes","useCssModule","radioGroupInjection","inject","RADIO_GROUP_INJECTION","emit","__emit","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_cache","$event","_toDisplayString","_hoisted_2","_vShow","_hoisted_3","_renderSlot","_ctx","RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","derivedModelValue","computed","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/dist/RadioNew.vue.d.ts

@@ -1,69 +1,28 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<RadioProps>, {
-disabled: boolean;
-fullWidth: boolean;
-hasError: boolean;
-id: undefined;
-label: string;
-modelValue: undefined;
-name: undefined;
-variant: undefined;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (value: string) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<RadioProps>, {
-disabled: boolean;
-fullWidth: boolean;
-hasError: boolean;
-id: undefined;
-label: string;
-modelValue: undefined;
-name: undefined;
-variant: undefined;
-}>>> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<RadioProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string) => any;
+}, string, PublicProps, Readonly<RadioProps> & Readonly<{
 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+id: string | number;
 name: string;
-disabled: boolean;
 label: string;
-id: string | number;
+disabled: boolean;
 hasError: boolean;
 modelValue: string;
-variant: "button" | "radio" | "tile" | "chip";
+variant: "chip" | "button" | "radio" | "tile";
 fullWidth: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement | HTMLLabelElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/RangeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.js","sources":["../src/components/RangeInput/RangeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  const slots = useSlots();\n\n  const hasSlots = !!slots.min && !!slots.max;\n\n  if (!hasSlots) {\n    throw new Error('RangeInput: please provide slots for min and max values.');\n  }\n</script>\n\n<template>\n  <div data-test=\"stash-range-input\" class=\"stash-range-input tw-flex tw-gap-3\">\n    <!-- @slot field for minimal value input -->\n    <slot name=\"min\"></slot>\n\n    <Icon name=\"transfer\" class=\"tw-mb-2 tw-mt-auto\" />\n    <!-- @slot Field for maximal value input -->\n    <slot name=\"max\"></slot>\n  </div>\n</template>\n"],"names":["slots","useSlots"],"mappings":";;;;;;;;AAKE,UAAMA,IAAQC,EAAS;AAIvB,QAAI,EAFa,CAAC,CAACD,EAAM,OAAO,CAAC,CAACA,EAAM;AAGhC,YAAA,IAAI,MAAM,0DAA0D;;;;;;;;;;;"}
+{"version":3,"file":"RangeInput.js","sources":["../src/components/RangeInput/RangeInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  const slots = useSlots();\n\n  const hasSlots = !!slots.min && !!slots.max;\n\n  if (!hasSlots) {\n    throw new Error('RangeInput: please provide slots for min and max values.');\n  }\n</script>\n\n<template>\n  <div data-test=\"stash-range-input\" class=\"stash-range-input tw-flex tw-gap-3\">\n    <!-- @slot field for minimal value input -->\n    <slot name=\"min\"></slot>\n\n    <Icon name=\"transfer\" class=\"tw-mb-2 tw-mt-auto\" />\n    <!-- @slot Field for maximal value input -->\n    <slot name=\"max\"></slot>\n  </div>\n</template>\n"],"names":["slots","useSlots","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_createVNode","Icon"],"mappings":";;;;;;;;AAKE,UAAMA,IAAQC,EAAA;AAId,QAAI,EAFa,CAAC,CAACD,EAAM,OAAO,CAAC,CAACA,EAAM;AAGtC,YAAM,IAAI,MAAM,0DAA0D;sBAK5EE,EAAA,GAAAC,EAOM,OAPNC,GAOM;AAAA,MALJC,EAAwBC,EAAA,QAAA,KAAA;AAAA,MAExBC,EAAmDC,GAAA;AAAA,QAA7C,MAAK;AAAA,QAAW,OAAM;AAAA,MAAA;MAE5BH,EAAwBC,EAAA,QAAA,KAAA;AAAA,IAAA;;;"}

package/dist/RangeInput.vue.d.ts

@@ -9,7 +9,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>, {
     min?(_: {}): any;
     max?(_: {}): any;
 }>;