@leaflink/stash 44.0.0-beta.5 → 44.0.0-beta.7

package/dist/RadioNew.js

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

package/dist/RadioNew.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioNew.js","sources":["../src/components/RadioNew/Radio.types.ts","../src/components/RadioNew/RadioNew.vue"],"sourcesContent":["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 =\n    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":["RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","radioGroupInjection","inject","RADIO_GROUP_INJECTION","derivedModelValue","computed","props","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;iBC8DJC,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,GAGjBC,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAgB5DC,IAAoBC,EAAS,MAAMC,EAAM,eAAcL,KAAA,gBAAAA,EAAqB,WAAW,MAAK,GAC5FM,IAAcF,EAAS,MAAMC,EAAM,SAAQL,KAAA,gBAAAA,EAAqB,KAAK,MAAK,GAC1EO,IAAuBH,EAAS,MAAMC,EAAM,cAAaL,KAAA,gBAAAA,EAAqB,UAAU,MAAK,GAC7FQ,IAAkBJ,EAAS,MAAMC,EAAM,aAAYL,KAAA,gBAAAA,EAAqB,SAAS,MAAK,GACtFS,IAAiBL,EAAwB,MAAMC,EAAM,YAAWL,KAAA,gBAAAA,EAAqB,QAAQ,UAAS,OAAO;AAOnH,aAASU,EAAQC,GAAU;AACzB,UAAIX,KAAA,QAAAA,EAAqB,QAAQ;AAC/B,QAAAA,EAAoB,OAAOW,CAAC;AAE5B;AAAA,MACF;AAEK,MAAAC,EAAA,qBAAsBD,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 { 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 =\n    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 =\n    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 =\n    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 =\n    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 =\n    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":["classes","useCssModule","RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","radioGroupInjection","inject","RADIO_GROUP_INJECTION","derivedModelValue","computed","props","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e","emit"],"mappings":";;;;;;;;;;;;;;;;iBA0CQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCAVD,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCAVD,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCAVD,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1CN,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;iBC8DJC,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,GAGjBC,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAgB5DC,IAAoBC,EAAS,MAAMC,EAAM,eAAcL,KAAA,gBAAAA,EAAqB,WAAW,MAAK,GAC5FM,IAAcF,EAAS,MAAMC,EAAM,SAAQL,KAAA,gBAAAA,EAAqB,KAAK,MAAK,GAC1EO,IAAuBH,EAAS,MAAMC,EAAM,cAAaL,KAAA,gBAAAA,EAAqB,UAAU,MAAK,GAC7FQ,IAAkBJ,EAAS,MAAMC,EAAM,aAAYL,KAAA,gBAAAA,EAAqB,SAAS,MAAK,GACtFS,IAAiBL,EAAwB,MAAMC,EAAM,YAAWL,KAAA,gBAAAA,EAAqB,QAAQ,UAAS,OAAO;AAOnH,aAASU,EAAQC,GAAU;AACzB,UAAIX,KAAA,QAAAA,EAAqB,QAAQ;AAC/B,QAAAA,EAAoB,OAAOW,CAAC;AAE5B;AAAA,MACF;AAEK,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;;;;;;;;;;;;;;;;;;;"}

package/dist/Select.js

@@ -956,7 +956,7 @@ function Rn(e, n, t) {
     update: E
   };
 }
-const On = (e) => (Mt("data-v-fa811e90"), e = e(), Dt(), e), kn = ["id", "aria-errormessage", "aria-invalid", "disabled", "multiple", "name"], Tn = ["selected", "value"], Bn = /* @__PURE__ */ On(() => /* @__PURE__ */ z("option", { value: "" }, null, -1)), An = ["aria-controls", "aria-expanded", "aria-label", "aria-disabled", "onKeyup"], Ln = ["id"], Mn = ["onKeypress", "onMousedown"], Dn = {
+const On = (e) => (Mt("data-v-35aedb3d"), e = e(), Dt(), e), kn = ["id", "aria-errormessage", "aria-invalid", "disabled", "multiple", "name"], Tn = ["selected", "value"], Bn = /* @__PURE__ */ On(() => /* @__PURE__ */ z("option", { value: "" }, null, -1)), An = ["aria-controls", "aria-expanded", "aria-label", "aria-disabled", "onKeyup"], Ln = ["id"], Mn = ["onKeypress", "onMousedown"], Dn = {
   key: 0,
   class: "stash-select__total"
 }, Fn = {
@@ -1145,8 +1145,8 @@ const On = (e) => (Mt("data-v-fa811e90"), e = e(), Dt(), e), kn = ["id", "aria-e
       },
       // @deprecated
       {
-        "is-highlighted": v.value === m,
-        "is-selected": ne(a)
+        "tw-bg-ice-200": v.value === m,
+        "tw-bg-blue-100 tw-text-ice-700": ne(a)
       }
     ], ne = (a) => a == null ? !1 : f.value.some((m) => (m == null ? void 0 : m[t.trackBy]) === a[t.trackBy]);
     function Ue(a) {
@@ -1190,7 +1190,7 @@ const On = (e) => (Mt("data-v-fa811e90"), e = e(), Dt(), e), kn = ["id", "aria-e
           id: S,
           "aria-errormessage": A,
           "aria-invalid": L,
-          class: "sr-only",
+          class: "tw-sr-only",
           disabled: t.disabled,
           multiple: !t.single,
           name: t.name,
@@ -1317,7 +1317,7 @@ const On = (e) => (Mt("data-v-fa811e90"), e = e(), Dt(), e), kn = ["id", "aria-e
                   de(z("div", {
                     ref_key: "optionsWrapperRef",
                     ref: u,
-                    class: "stash-select__border-selector tw-border-selector tw-w-full tw-shadow",
+                    class: "stash-select__border-selector tw-w-full tw-shadow",
                     style: At(F(C)),
                     onClick: m[3] || (m[3] = he(() => {
                     }, ["stop"]))
@@ -1401,7 +1401,7 @@ const On = (e) => (Mt("data-v-fa811e90"), e = e(), Dt(), e), kn = ["id", "aria-e
     ]), 1032, ["id", "add-bottom-space", "class", "error-text", "hint-text", "label", "show-optional-in-label"]));
   }
 });
-const ho = /* @__PURE__ */ Ut(Hn, [["__scopeId", "data-v-fa811e90"]]);
+const ho = /* @__PURE__ */ Ut(Hn, [["__scopeId", "data-v-35aedb3d"]]);
 export {
   ho as default
 };