@leaflink/stash 50.14.0 → 50.16.0

package/dist/RadioNew.js

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

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 { 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    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  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\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","emit","__emit","RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","radioGroupInjection","inject","RADIO_GROUP_INJECTION","derivedModelValue","computed","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e"],"mappings":";;;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GACRC,IAAUC,EAAa,GAEvBC,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAML,IAAQC,GACRC,IAAUC,EAAa,GAEvBC,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAML,IAAQC,GACRC,IAAUC,EAAa,GAEvBC,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAML,IAAQC,GACRC,IAAUC,EAAa,GAEvBC,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,GAEMC,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAE5Dd,IAAQC,GAcRc,IAAoBC,EAAS,MAAMhB,EAAM,eAAcY,KAAA,gBAAAA,EAAqB,WAAW,MAAK,GAC5FK,IAAcD,EAAS,MAAMhB,EAAM,SAAQY,KAAA,gBAAAA,EAAqB,KAAK,MAAK,GAC1EM,IAAuBF,EAAS,MAAMhB,EAAM,cAAaY,KAAA,gBAAAA,EAAqB,UAAU,MAAK,GAC7FO,IAAkBH,EAAS,MAAMhB,EAAM,aAAYY,KAAA,gBAAAA,EAAqB,SAAS,MAAK,GACtFQ,IAAiBJ,EAAwB,MAAMhB,EAAM,YAAWY,KAAA,gBAAAA,EAAqB,QAAQ,UAAS,OAAO,GAE7GR,IAAOC;AAIb,aAASgB,EAAQC,GAAU;AACzB,UAAIV,KAAA,QAAAA,EAAqB,QAAQ;AAC/B,QAAAA,EAAoB,OAAOU,CAAC;AAE5B;AAAA,MAAA;AAGG,MAAAlB,EAAA,qBAAsBkB,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","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;;;;;;;;;;;;;;;;;;;"}

package/dist/Stepper.vue.d.ts

@@ -62,9 +62,9 @@ useResponsiveNav: boolean;
 }>, {
 step: number;
 theme: StepperTheme;
+orientation: "vertical" | "horizontal";
 substep: number;
 linear: boolean;
-orientation: "vertical" | "horizontal";
 useResponsiveNav: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;