@leaflink/stash 52.0.2 → 53.0.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 p, useCssModule as h, inject as B, createElementBlock as $, openBlock as m, normalizeClass as d, unref as t, createElementVNode as n, toDisplayString as y, withDirectives as C, vShow as M, renderSlot as w, computed as c, createBlock as g, resolveDynamicComponent as N, withCtx as D } from "vue";
+import { R as x } from "./RadioGroup.keys-CqfiKkNz.js";
+import { _ as V } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @__PURE__ */ p({
   __name: "VariantButton",
   props: {
     disabled: { type: Boolean },
@@ -14,44 +14,44 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
   },
   emits: ["input"],
   setup(s, { emit: u }) {
-    const e = s, l = $(), t = B(W.key), r = u;
+    const e = s, l = h(), a = B(x.key), r = u;
     return (o, i) => {
-      var m, v;
-      return b(), h("div", {
+      var b, v;
+      return m(), $("div", {
         "data-variant-button": "",
         class: d([
-          a(l).root,
+          t(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"
+            "w-full": e.fullWidth,
+            [t(l)["radio-group-vertical-orientation"]]: ((v = (b = t(a)) == null ? void 0 : b.orientation) == null ? void 0 : v.value) === "vertical"
           }
         ])
       }, [
         n("input", {
           id: `${e.name}-${e.id}`,
-          class: d(["tw-sr-only", a(l).input]),
+          class: d(["sr-only", t(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))
+          onInput: i[0] || (i[0] = (k) => r("input", k))
         }, null, 42, E),
         n("label", {
-          class: d(a(l).label),
+          class: d(t(l).label),
           for: `${e.name}-${e.id}`
         }, y(e.label), 11, R)
       ], 2);
     };
   }
-}), 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__ */ _({
+}), O = "_label_1upd7_3", S = "_root_1upd7_15", z = "_input_1upd7_37", A = {
+  label: O,
+  root: S,
+  "radio-group-vertical-orientation": "_radio-group-vertical-orientation_1upd7_33",
+  input: z
+}, F = {
+  $style: A
+}, J = /* @__PURE__ */ V(T, [["__cssModules", F]]), P = ["id", "name", "value", "checked", "disabled"], U = ["for"], q = /* @__PURE__ */ p({
   __name: "VariantChip",
   props: {
     disabled: { type: Boolean },
@@ -64,32 +64,32 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
   },
   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 }])
+    const e = s, l = h(), a = u;
+    return (r, o) => (m(), $("div", {
+      class: d([t(l).root, { "w-full": e.fullWidth }])
     }, [
       n("input", {
         id: `${e.name}-${e.id}`,
-        class: d(["tw-sr-only", a(l).input]),
+        class: d(["sr-only", t(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: o[0] || (o[0] = (i) => a("input", i))
+      }, null, 42, P),
       n("label", {
-        class: d(a(l).label),
+        class: d(t(l).label),
         for: `${e.name}-${e.id}`
-      }, y(e.label), 11, P)
+      }, y(e.label), 11, U)
     ], 2));
   }
-}), H = "_label_vdpts_2", K = "_input_vdpts_16", L = {
+}), H = "_label_17vp0_5", K = "_input_17vp0_19", L = {
   label: H,
   input: K
 }, Q = {
   $style: L
-}, X = /* @__PURE__ */ w(U, [["__cssModules", Q]]), Y = ["id", "name", "value", "checked", "disabled"], Z = ["for"], I = /* @__PURE__ */ _({
+}, X = /* @__PURE__ */ V(q, [["__cssModules", Q]]), Y = ["id", "name", "value", "checked", "disabled"], Z = ["for"], I = /* @__PURE__ */ p({
   __name: "VariantRadio",
   props: {
     disabled: { type: Boolean },
@@ -102,34 +102,34 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
   },
   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 }]])
+    const e = s, l = h(), a = u;
+    return (r, o) => (m(), $("div", {
+      class: d(["flex", [t(l).root, { "w-full": e.fullWidth }]])
     }, [
       n("input", {
         id: `${e.name}-${e.id}`,
-        class: d(a(l).input),
+        class: d(t(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))
+        onInput: o[0] || (o[0] = (i) => a("input", i))
       }, null, 42, Y),
-      M(n("label", {
-        class: d([a(l).label, { "tw-text-ice-500": e.disabled }]),
+      C(n("label", {
+        class: d([t(l).label, { "text-ice-500": e.disabled }]),
         for: `${e.name}-${e.id}`
       }, y(e.label), 11, Z), [
-        [x, e.label]
+        [M, e.label]
       ])
     ], 2));
   }
-}), j = "_label_kw8hn_2", G = "_input_kw8hn_9", ee = {
+}), j = "_label_l6dx6_5", G = "_input_l6dx6_12", ee = {
   label: j,
   input: G
 }, le = {
   $style: ee
-}, te = /* @__PURE__ */ w(I, [["__cssModules", le]]), ae = ["for"], se = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], de = ["id"], oe = /* @__PURE__ */ _({
+}, ae = /* @__PURE__ */ V(I, [["__cssModules", le]]), te = ["for"], se = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], de = ["id"], oe = /* @__PURE__ */ p({
   __name: "VariantTile",
   props: {
     disabled: { type: Boolean },
@@ -142,67 +142,67 @@ const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
   },
   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 }]),
+    const e = s, l = h(), a = u;
+    return (r, o) => (m(), $("label", {
+      class: d([t(l).root, { "w-full": e.fullWidth, [t(l)["root--disabled"]]: e.disabled }]),
       for: `${e.name}-${e.id}`
     }, [
       n("div", {
-        class: d(["tw-flex tw-border", [
-          a(l)["tile-header"],
+        class: d(["flex border", [
+          t(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
+            "border-blue-500 bg-blue-100": e.modelValue === e.value && !e.disabled,
+            "border-ice-500 bg-ice-100": e.modelValue !== e.value || e.disabled
           }
         ]])
       }, [
         n("input", {
           id: `${e.name}-${e.id}`,
           "aria-labelledby": `tile-label-${e.name}-${e.id}`,
-          class: d(["tw-sr-only", a(l).input]),
+          class: d(["sr-only", t(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))
+          onInput: o[0] || (o[0] = (i) => a("input", i))
         }, null, 42, se),
         n("div", {
           id: `tile-label-${e.name}-${e.id}`,
-          class: d([a(l).label, { "tw-text-ice-500": e.disabled }])
+          class: d([t(l).label, { "text-ice-500": e.disabled }])
         }, y(e.label), 11, de)
       ], 2),
       n("div", {
         class: d([
-          a(l)["tile-body"],
+          t(l)["tile-body"],
           {
-            "tw-border-ice-500": e.modelValue !== e.value || e.disabled,
-            "tw-border-blue-500": e.modelValue === e.value && !e.disabled
+            "border-ice-500": e.modelValue !== e.value || e.disabled,
+            "border-blue-500": e.modelValue === e.value && !e.disabled
           }
         ])
       }, [
-        k(r.$slots, "default")
+        w(r.$slots, "default")
       ], 2)
-    ], 10, ae));
+    ], 10, te));
   }
-}), ie = "_root_583pa_2", ne = "_label_583pa_32", ue = "_input_583pa_39", re = {
+}), ie = "_root_1hkcw_5", ne = "_label_1hkcw_35", ue = "_input_1hkcw_42", re = {
   root: ie,
-  "root--disabled": "_root--disabled_583pa_11",
-  "tile-header": "_tile-header_583pa_15",
-  "tile-body": "_tile-body_583pa_16",
+  "root--disabled": "_root--disabled_1hkcw_14",
+  "tile-header": "_tile-header_1hkcw_18",
+  "tile-body": "_tile-body_1hkcw_19",
   label: ne,
   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 || {});
-const fe = /* @__PURE__ */ _({
+}, _e = /* @__PURE__ */ V(oe, [["__cssModules", ce]]);
+var _ = /* @__PURE__ */ ((s) => (s.Radio = "radio", s.Button = "button", s.Chip = "chip", s.Tile = "tile", s))(_ || {});
+const fe = /* @__PURE__ */ p({
   __name: "RadioNew",
   props: {
     name: { default: void 0 },
     disabled: { type: Boolean, default: !1 },
     fullWidth: { type: Boolean, default: !1 },
-    id: { default: void 0 },
+    id: {},
     modelValue: { default: void 0 },
     hasError: { type: Boolean, default: !1 },
     label: { default: "" },
@@ -212,38 +212,38 @@ const fe = /* @__PURE__ */ _({
   emits: ["update:modelValue"],
   setup(s, { emit: u }) {
     const e = {
-      [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) {
+      [_.Button]: J,
+      [_.Chip]: X,
+      [_.Radio]: ae,
+      [_.Tile]: _e
+    }, l = B(x.key, null), a = s, r = c(() => a.modelValue || (l == null ? void 0 : l.modelValue.value)), o = c(() => a.name || (l == null ? void 0 : l.name.value)), i = c(() => a.fullWidth || (l == null ? void 0 : l.fullWidth.value)), b = c(() => a.disabled || (l == null ? void 0 : l.disabled.value)), v = c(() => a.variant || (l == null ? void 0 : l.variant.value) || "radio"), k = u;
+    function W(f) {
       if (l != null && l.update) {
         l.update(f);
         return;
       }
-      V("update:modelValue", f.target.value);
+      k("update:modelValue", f.target.value);
     }
-    return (f, _e) => (b(), g(N(e[v.value]), {
-      id: t.id,
-      disabled: m.value,
-      "has-error": t.hasError,
+    return (f, pe) => (m(), g(N(e[v.value]), {
+      id: a.id,
+      disabled: b.value,
+      "has-error": a.hasError,
       "full-width": i.value,
-      label: t.label,
+      label: a.label,
       "model-value": r.value,
       name: o.value,
-      value: t.value,
-      onInput: C
+      value: a.value,
+      onInput: W
     }, {
       default: D(() => [
-        k(f.$slots, "default")
+        w(f.$slots, "default")
       ]),
       _: 3
     }, 40, ["id", "disabled", "has-error", "full-width", "label", "model-value", "name", "value"]));
   }
 });
 export {
-  p as RadioVariant,
+  _ 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 { 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,GACVC,IAAsBC,EAAOC,EAAsB,GAAG,GAEtDC,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNb,UAAMR,IAAQC,GACRC,IAAUC,EAAA,GAEVI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAMR,IAAQC,GACRC,IAAUC,EAAA,GAEVI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAMR,IAAQC,GACRC,IAAUC,EAAA,GAEVI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CR,IAAKC,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,IAAA,GAGjBV,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,MACF;AAEA,MAAAf,EAAK,qBAAsBe,EAAE,OAA4B,KAAK;AAAA,IAChE;;;;;;;;;;;;;;;;;;;"}
+{"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        '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=\"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  @layer utilities {\n    .label {\n      padding: 8px 30px;\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-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: var(--radius-sm);\n      border-bottom-left-radius: var(--radius-sm);\n    }\n\n    .root:last-of-type .label {\n      border-top-right-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\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: var(--radius-sm);\n      border-top-right-radius: var(--radius-sm);\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: var(--radius-sm);\n      border-bottom-left-radius: var(--radius-sm);\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  }\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, { 'w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .label {\n      display: inline-block;\n      padding: --spacing(1) --spacing(3);\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-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: var(--color-white);\n      background-color: var(--color-blue-500);\n      font-weight: var(--font-weight-bold);\n    }\n\n    .input:not(:checked, :disabled) ~ .label:hover {\n      border-color: var(--color-blue-500);\n    }\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=\"flex\" :class=\"[classes.root, { '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, { '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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .label {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --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  }\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, { 'w-full': props.fullWidth, [classes['root--disabled']]: props.disabled }]\"\n    :for=\"`${props.name}-${props.id}`\"\n  >\n    <div\n      class=\"flex border\"\n      :class=\"[\n        classes['tile-header'],\n        {\n          'border-blue-500 bg-blue-100': props.modelValue === props.value && !props.disabled,\n          'border-ice-500 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=\"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, { 'text-ice-500': props.disabled }]\">\n        {{ props.label }}\n      </div>\n    </div>\n    <div\n      :class=\"[\n        classes['tile-body'],\n        {\n          'border-ice-500': props.modelValue !== props.value || props.disabled,\n          '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  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      border-radius: var(--radius-sm);\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: var(--radius-sm) var(--radius-sm) 0 0;\n      padding: --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: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --spacing(3);\n    }\n\n    .input {\n      appearance: none;\n      background-color: var(--color-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: --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 var(--radius-sm) var(--radius-sm);\n      border-width: 0 1px 1px 1px;\n      background-color: var(--color-white);\n      padding: --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  }\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    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,GACVC,IAAsBC,EAAOC,EAAsB,GAAG,GAEtDC,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACNb,UAAMR,IAAQC,GACRC,IAAUC,EAAA,GAEVI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAMR,IAAQC,GACRC,IAAUC,EAAA,GAEVI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACHb,UAAMR,IAAQC,GACRC,IAAUC,EAAA,GAEVI,IAAOC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5CR,IAAKC,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,IAAA,GAGjBV,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAE5DN,IAAQC,GAaRc,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,MACF;AAEA,MAAAf,EAAK,qBAAsBe,EAAE,OAA4B,KAAK;AAAA,IAChE;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioNew.vue.d.ts

@@ -36,7 +36,6 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes
 disabled: boolean;
 fullWidth: boolean;
 hasError: boolean;
-id: undefined;
 label: string;
 modelValue: undefined;
 name: undefined;
@@ -47,7 +46,6 @@ variant: undefined;
 disabled: boolean;
 fullWidth: boolean;
 hasError: boolean;
-id: undefined;
 label: string;
 modelValue: undefined;
 name: undefined;
@@ -58,7 +56,6 @@ variant: undefined;
 name: string;
 disabled: boolean;
 label: string;
-id: string | number;
 hasError: boolean;
 modelValue: string;
 variant: "button" | "radio" | "tile" | "chip";

package/dist/RangeInput.js

@@ -2,7 +2,7 @@ import { defineComponent as o, useSlots as n, createElementBlock as a, openBlock
 import m from "./Icon.js";
 const p = {
   "data-test": "stash-range-input",
-  class: "stash-range-input tw-flex tw-gap-3"
+  class: "stash-range-input flex gap-3"
 }, _ = /* @__PURE__ */ o({
   __name: "RangeInput",
   setup(c) {
@@ -13,7 +13,7 @@ const p = {
       s(e.$slots, "min"),
       l(m, {
         name: "transfer",
-        class: "tw-mb-2 tw-mt-auto"
+        class: "mb-2 mt-auto"
       }),
       s(e.$slots, "max")
     ]));

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,EAAA;AAId,QAAI,EAFa,CAAC,CAACD,EAAM,OAAO,CAAC,CAACA,EAAM;AAGtC,YAAM,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 flex gap-3\">\n    <!-- @slot field for minimal value input -->\n    <slot name=\"min\"></slot>\n\n    <Icon name=\"transfer\" class=\"mb-2 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,EAAA;AAId,QAAI,EAFa,CAAC,CAACD,EAAM,OAAO,CAAC,CAACA,EAAM;AAGtC,YAAM,IAAI,MAAM,0DAA0D;;;;;;;;;;;"}

package/dist/SearchBar.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, useSlots as S, ref as i, computed as V, createBlock as h, openBlock as p, withKeys as s, normalizeClass as m, createSlots as I, withCtx as n, createCommentVNode as T, createVNode as u, unref as K, renderSlot as L } from "vue";
+import { defineComponent as C, useSlots as S, ref as i, computed as V, createBlock as h, openBlock as p, withKeys as s, normalizeClass as m, createSlots as I, withCtx as n, createCommentVNode as T, createVNode as d, unref as K, renderSlot as L } from "vue";
 import { t as f } from "./locale.js";
 import b from "./Button.js";
 import v from "./Icon.js";
@@ -17,20 +17,20 @@ const N = /* @__PURE__ */ C({
   },
   emits: ["search", "update:model-value"],
   setup(_, { emit: k }) {
-    const e = _, l = k, g = S(), a = i(e.modelValue), d = i(), x = V(() => a.value ? 0 : -1);
+    const e = _, l = k, g = S(), a = i(e.modelValue), u = i(), x = V(() => a.value ? 0 : -1);
     function o() {
       e.isLoading || e.isWorking || l("search", a.value);
     }
     function c() {
       var r, t;
-      a.value = "", l("search", ""), l("update:model-value", ""), (t = (r = d.value) == null ? void 0 : r.inputEl) == null || t.focus();
+      a.value = "", l("search", ""), l("update:model-value", ""), (t = (r = u.value) == null ? void 0 : r.inputEl) == null || t.focus();
     }
     function y() {
       l("update:model-value", a.value);
     }
     return (r, t) => (p(), h(W, {
       ref_key: "stashInputRef",
-      ref: d,
+      ref: u,
       modelValue: a.value,
       "onUpdate:modelValue": [
         t[0] || (t[0] = (B) => a.value = B),
@@ -56,11 +56,11 @@ const N = /* @__PURE__ */ C({
           ]
         }, {
           default: n(() => [
-            u(v, { name: "close" })
+            d(v, { name: "close" })
           ]),
           _: 1
         }, 8, ["disabled"])) : T("", !0),
-        u(b, {
+        d(b, {
           tabindex: x.value,
           "data-test": "stash-search-bar|search-button",
           disabled: e.isLoading,
@@ -72,8 +72,8 @@ const N = /* @__PURE__ */ C({
           ]
         }, {
           default: n(() => [
-            u(v, {
-              class: m({ "tw-animate-spin": e.isWorking }),
+            d(v, {
+              class: m({ "animate-spin": e.isWorking }),
               name: e.isWorking ? "loading-empty" : "search"
             }, null, 8, ["class", "name"])
           ]),
@@ -91,7 +91,7 @@ const N = /* @__PURE__ */ C({
       } : void 0
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
-}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-005a7e1b"]]);
+}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-fb06db50"]]);
 export {
   q as default
 };

package/dist/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when searching or clearing the search input\n     */\n    (e: 'search', searchTerm: string): void;\n\n    /**\n     * Emitted when the search term changes\n     */\n    (e: 'update:model-value', searchTerm: string): void;\n  }>();\n\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'tw-animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style scoped>\n  .stash-search-bar :deep(input) {\n    text-overflow: ellipsis;\n  }\n\n  .stash-search-bar--value :deep(input) {\n    padding-right: 72px;\n  }\n\n  .stash-search-bar :deep(input):hover {\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .stash-search-bar :deep(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n    overflow: visible;\n  }\n\n  .stash-search-bar__clear-button {\n    color: var(--color-ice-700);\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    background: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: none;\n\n      & svg {\n        border-radius: theme(borderRadius.DEFAULT);\n\n        @apply tw-ring-4 tw-ring-blue-500 tw-ring-opacity-15;\n      }\n    }\n  }\n\n  .stash-search-bar__clear-button:disabled {\n    color: var(--color-ice-500);\n    cursor: default;\n  }\n\n  .stash-search-bar__search-button {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:disabled {\n      border-color: var(--color-ice-500);\n    }\n\n    &:hover {\n      background-color: var(--color-blue-600);\n    }\n\n    &:active {\n      background-color: var(--color-blue-700);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border: 1px solid var(--color-blue-900);\n      /* Simulating a bigger border so the design does not break */\n      box-shadow:\n        inset 0 0 0 1px var(--color-blue-900),\n        0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAA,GACRC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAA,GAEhBE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AAClB,MAAIX,EAAM,aAAaA,EAAM,aAG7BE,EAAK,UAAUI,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAE7BW,KAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,YAArB,QAAAD,EAA8B;AAAA,IAChC;AAEA,aAASE,IAAe;AACtB,MAAAb,EAAK,sBAAsBI,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when searching or clearing the search input\n     */\n    (e: 'search', searchTerm: string): void;\n\n    /**\n     * Emitted when the search term changes\n     */\n    (e: 'update:model-value', searchTerm: string): void;\n  }>();\n\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style scoped>\n  @reference \"../../../styles/main.css\";\n\n  @layer utilities {\n    .stash-search-bar :deep(input) {\n      text-overflow: ellipsis;\n    }\n\n    .stash-search-bar--value :deep(input) {\n      padding-right: 72px;\n    }\n\n    .stash-search-bar :deep(input):hover {\n      border: 1px solid var(--color-blue-500);\n    }\n\n    .stash-search-bar :deep(.stash-input-append) {\n      display: flex;\n      justify-content: flex-end;\n      width: 72px; /* double the the default width of 36px */\n      overflow: visible;\n    }\n\n    .stash-search-bar__clear-button {\n      color: var(--color-ice-700);\n      height: --spacing(9);\n      min-width: --spacing(9);\n      width: --spacing(9);\n      background: none;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: none;\n\n        & svg {\n          border-radius: var(--radius-sm);\n\n          @apply ring-4 ring-blue-500/15;\n        }\n      }\n    }\n\n    .stash-search-bar__clear-button:disabled {\n      color: var(--color-ice-500);\n      cursor: default;\n    }\n\n    .stash-search-bar__search-button {\n      border-bottom-left-radius: 0;\n      border-top-left-radius: 0;\n      height: --spacing(9);\n      min-width: --spacing(9);\n      width: --spacing(9);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:focus {\n        box-shadow: none;\n      }\n\n      &:disabled {\n        border-color: var(--color-ice-500);\n      }\n\n      &:hover {\n        background-color: var(--color-blue-600);\n      }\n\n      &:active {\n        background-color: var(--color-blue-700);\n      }\n\n      &:focus-visible {\n        outline: none;\n        border: 1px solid var(--color-blue-900);\n        /* Simulating a bigger border so the design does not break */\n        box-shadow:\n          inset 0 0 0 1px var(--color-blue-900),\n          0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAA,GACRC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAA,GAEhBE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AAClB,MAAIX,EAAM,aAAaA,EAAM,aAG7BE,EAAK,UAAUI,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAE7BW,KAAAC,IAAAN,EAAc,UAAd,gBAAAM,EAAqB,YAArB,QAAAD,EAA8B;AAAA,IAChC;AAEA,aAASE,IAAe;AACtB,MAAAb,EAAK,sBAAsBI,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/SectionHeader.js

@@ -1,9 +1,9 @@
-import { defineComponent as m, computed as s, createElementBlock as w, openBlock as n, createElementVNode as e, createBlock as h, renderSlot as p, resolveDynamicComponent as u, mergeProps as _, withCtx as f, toDisplayString as v, createVNode as x } from "vue";
-import b from "./Icon.js";
-const g = { class: "stash-section-header" }, k = {
-  class: "stash-section-header__content tw-flex-wrap tw-items-center tw-justify-between tw-px-6 tw-py-3 md:tw-flex",
+import { defineComponent as m, computed as s, createElementBlock as h, openBlock as n, createElementVNode as e, createBlock as p, renderSlot as u, resolveDynamicComponent as _, mergeProps as f, withCtx as v, toDisplayString as x, createVNode as b } from "vue";
+import g from "./Icon.js";
+const k = { class: "stash-section-header" }, w = {
+  class: "stash-section-header__content flex-wrap items-center justify-between px-6 py-3 md:flex",
   "data-test": "stash-section-header|content"
-}, y = { "data-test": "stash-section-header|title" }, C = { class: "stash-section-header__action-label tw-m-0 tw-text-ice-900" }, E = { class: "stash-section-header__action-icon tw-size-6 tw-items-center tw-rounded-full tw-bg-ice-200 tw-p-[2px] tw-text-ice-900" }, S = /* @__PURE__ */ m({
+}, y = { "data-test": "stash-section-header|title" }, C = { class: "stash-section-header__action-label m-0 text-ice-900" }, E = { class: "stash-section-header__action-icon size-6 items-center rounded-full bg-ice-200 p-[2px] text-ice-900" }, S = /* @__PURE__ */ m({
   __name: "SectionHeader",
   props: {
     actionLabel: { default: "View All" },
@@ -15,24 +15,24 @@ const g = { class: "stash-section-header" }, k = {
     const t = a, c = i, r = s(() => t.to ? "router-link" : "button"), l = s(() => t.to ? {
       to: t.to
     } : {});
-    return (d, o) => (n(), w("div", g, [
-      e("div", k, [
+    return (d, o) => (n(), h("div", k, [
+      e("div", w, [
         e("div", y, [
           e("h2", null, [
-            p(d.$slots, "default")
+            u(d.$slots, "default")
           ])
         ]),
-        (n(), h(u(r.value), _(l.value, {
+        (n(), p(_(r.value), f(l.value, {
           "data-test": "stash-section-header|action",
-          class: "stash-section-header__action tw-flex tw-items-center tw-gap-3 max-md:tw-pt-3",
+          class: "stash-section-header__action flex items-center gap-3 max-md:pt-3",
           onClick: o[0] || (o[0] = () => {
             t.to || c("actionEvent");
           })
         }), {
-          default: f(() => [
-            e("span", C, v(t.actionLabel), 1),
+          default: v(() => [
+            e("span", C, x(t.actionLabel), 1),
             e("span", E, [
-              x(b, {
+              b(g, {
                 name: t.actionIcon,
                 size: "dense"
               }, null, 8, ["name"])
@@ -41,7 +41,7 @@ const g = { class: "stash-section-header" }, k = {
           _: 1
         }, 16))
       ]),
-      o[1] || (o[1] = e("div", { class: "stash-section-header__divider tw-h-px tw-bg-ice-200" }, null, -1))
+      o[1] || (o[1] = e("div", { class: "stash-section-header__divider h-px bg-ice-200" }, null, -1))
     ]));
   }
 });