@leaflink/stash 53.4.1 → 53.4.3

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantButton must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"flex\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .root 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 > div:first-child label {\n      border-top-left-radius: var(--radius-sm);\n      border-bottom-left-radius: var(--radius-sm);\n    }\n\n    .root > div:last-child label {\n      border-top-right-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n    }\n\n    .root > div:not(:first-child) label {\n      margin-left: -1px;\n    }\n\n    .root > div:not(:last-child) label {\n      border-right-color: transparent;\n    }\n\n    .root input:disabled ~ label {\n      background-color: var(--color-ice-200);\n      color: var(--color-ice-500);\n      cursor: auto;\n    }\n\n    .root 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    .root 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 { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantChip must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"my-1.5 flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      padding: --spacing(1.5) --spacing(3);\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-normal);\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    .root input:disabled ~ label {\n      background-color: var(--color-ice-200);\n      color: var(--color-ice-500);\n      cursor: auto;\n    }\n\n    .root 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    .root input:not(:checked, :disabled) ~ label:hover {\n      border-color: var(--color-blue-500);\n    }\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantRadio must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --spacing(3);\n    }\n\n    .root input {\n      appearance: none;\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: 5px;\n    }\n\n    .root input:checked {\n      background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n    }\n\n    .root input:disabled {\n      background: #eef2f4;\n    }\n\n    .root input:disabled ~ label {\n      cursor: auto;\n    }\n\n    .root input:disabled:checked {\n      background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n    }\n\n    .root input:hover:not(:disabled) {\n      border-color: var(--color-blue-500);\n    }\n\n    .root input:hover:not(:disabled) ~ label {\n      color: var(--color-ice-900);\n    }\n\n    .root input:not(:disabled) ~ label:hover {\n      color: var(--color-ice-900);\n    }\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantTile must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"flex flex-wrap\" :class=\"classes.root\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      :class=\"[classes['tile-container'], { 'w-full': fullWidth }]\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"flex border\"\n        :class=\"[\n          classes['tile-header'],\n          {\n            'border-blue-500 bg-blue-100 text-ice-900': modelValue === option.value,\n            'border-ice-500 bg-ice-100 text-ice-700': modelValue !== option.value,\n          },\n        ]\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"sr-only\"\n          type=\"radio\"\n          :name=\"name\"\n          :value=\"option.value\"\n          :checked=\"modelValue === option.value\"\n          :disabled=\"disabled || option.disabled\"\n          @input=\"update\"\n        />\n        <div>\n          <span>\n            {{ option.text }}\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"border-x border-b\"\n        :class=\"[\n          classes['tile-body'],\n          {\n            'border-ice-500': modelValue !== option.value,\n            'border-blue-500': modelValue === option.value,\n          },\n        ]\"\n      >\n        <p class=\"m-0 text-ice-900\">{{ option.subTitle }}</p>\n        <p class=\"m-0 text-ice-700\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .root input:disabled ~ label {\n      cursor: auto;\n    }\n\n    .root input:hover:not(:disabled) ~ label {\n      color: var(--color-ice-900);\n    }\n\n    .root input:not(:disabled) ~ label:hover {\n      color: var(--color-ice-900);\n    }\n\n    .root label.tile-container {\n      border-radius: var(--radius-sm);\n      display: flex;\n      flex: 1;\n      flex-direction: column;\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 label.tile-container:hover .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    .tile-body {\n      border-radius: 0 0 var(--radius-sm) var(--radius-sm);\n      background-color: var(--color-white);\n      padding: --spacing(6);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .root label.tile-container:hover .tile-body {\n      border-color: var(--color-blue-500) !important;\n      transition: all 0.2s;\n    }\n\n    .root 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    }\n\n    .root input ~ div {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --spacing(3);\n    }\n\n    .root input:disabled {\n      background: #eef2f4;\n    }\n\n    .root input:checked {\n      background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n    }\n\n    .root label.tile-container input {\n      margin-left: --spacing(3);\n    }\n\n    .root input:disabled:checked {\n      background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n    }\n\n    @media screen and (width <= 640px) {\n      .root {\n        flex-direction: column;\n      }\n    }\n  }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/**\n * An individual radio `<input>` within a RadioGroup instance\n */\nexport interface RadioGroupOption {\n  /**\n   * Disables the RadioGroupOption if truthy\n   */\n  disabled?: boolean;\n\n  /**\n   * The unique identifier for the option\n   */\n  id: number | string;\n\n  /**\n   * The text to be displayed for the option\n   */\n  text: string;\n\n  /**\n   * The value of the option. Used for the modelValue of the RadioGroup.\n   */\n  value: string;\n\n  /**\n   * The subtitle for tile variant\n   */\n  subTitle?: string;\n\n  /**\n   * The subtext for tile variant\n   */\n  subText?: string;\n}\n\n/**\n * Properties and utilities provided to children of a RadioGroup instance\n */\nexport interface RadioGroupInjection {\n  /**\n   * This type should match RadioGroupProps['disabled']\n   */\n  disabled: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['fullWidth']\n   */\n  fullWidth: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['modelValue']\n   */\n  modelValue: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['name']\n   */\n  name: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['options']\n   */\n  options: ComputedRef<RadioGroupOption[] | undefined>;\n\n  /**\n   * Triggered when the user changes their selection; updates the v-model.\n   */\n  update: (e: Event) => void;\n\n  /**\n   * This type should match RadioGroupProps['variant']\n   * @default 'radio'\n   */\n  variant: ComputedRef<RadioGroupVariants | undefined>;\n\n  /**\n   * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n   *\n   * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n   */\n  orientation?: ComputedRef<'horizontal' | 'vertical'>;\n}\n","<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n  export * from './RadioGroup.keys';\n  export * from './RadioGroup.types';\n\n  export interface RadioGroupProps extends FieldProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n     */\n    name?: string;\n\n    /**\n     * Deprecated - Compose your radio group with the `Radio` component instead\n     * @deprecated\n     */\n    options?: RadioGroupOption[];\n\n    /**\n     * The value of the selected radio option. Use this prop with the `update:modelValue` event to create a controlled component.\n     */\n    modelValue?: RadioGroupOption['value'];\n\n    /**\n     * @defaultValue 'radio'\n     */\n    variant?: RadioGroupVariants;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n     *\n     * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n     *\n     * @defaultValue 'horizontal'\n     */\n    orientation?: 'horizontal' | 'vertical';\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onMounted, onUnmounted, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\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 { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n  const variantComponentsMap = {\n    [RadioGroupVariant.Button]: VariantButton,\n    [RadioGroupVariant.Chip]: VariantChip,\n    [RadioGroupVariant.Radio]: VariantRadio,\n    [RadioGroupVariant.Tile]: VariantTile,\n  };\n\n  const props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: 'radio',\n    fullWidth: false,\n    modelValue: undefined,\n    name: undefined,\n    options: undefined,\n    orientation: 'horizontal',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n     */\n    (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n  }>();\n\n  const classes = useCssModule();\n\n  function update(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n\n  const errorId = uniqueId('radio-group-field-error-');\n\n  provide(RADIO_GROUP_INJECTION.key, {\n    name: computed(() => props.name),\n    disabled: computed(() => props.isDisabled || props.disabled),\n    fullWidth: computed(() => props.fullWidth),\n    modelValue: computed(() => props.modelValue),\n    options: computed(() => props.options),\n    variant: computed(() => props.variant),\n    orientation: computed(() => internalOrientation.value),\n    update,\n  });\n\n  const internalOrientation = ref(props.orientation);\n\n  const defaultSlotClasses = computed(() => {\n    return {\n      'flex-wrap': props.variant !== 'button',\n      'gap-x-1.5 gap-y-3': props.variant === 'chip' && internalOrientation.value === 'horizontal',\n      'gap-6':\n        props.variant === 'radio' ||\n        props.variant === 'tile' ||\n        (props.variant === 'chip' && internalOrientation.value === 'vertical'),\n      'flex-col': internalOrientation.value === 'vertical',\n    };\n  });\n\n  const resizeObserver = ref<ResizeObserver | null>(null);\n  const radioGroupRef = useTemplateRef('radioGroup');\n  const radioGroupParent = computed(() => radioGroupRef.value?.$el.parentElement);\n  const radioGroupButtons = computed(() => {\n    if (props.variant !== 'button') {\n      return [];\n    }\n\n    return Array.from<HTMLElement>(radioGroupRef.value?.$el.querySelectorAll('[data-variant-button]')) || [];\n  });\n\n  function getButtonsWidth() {\n    return radioGroupButtons.value.reduce((acc, button) => {\n      const buttonWidth = button.getBoundingClientRect().width;\n      return acc + buttonWidth;\n    }, 0);\n  }\n\n  const initialTotalButtonsWidth = ref(0);\n\n  const handleResize = (entry: ResizeObserverEntry) => {\n    internalOrientation.value =\n      initialTotalButtonsWidth.value > entry.contentBoxSize[0].inlineSize ? 'vertical' : props.orientation;\n  };\n\n  onMounted(() => {\n    // If the width of the buttons is greater than the parent element,\n    // set orientation to vertical\n    if (props.variant === 'button' && !props.fullWidth) {\n      initialTotalButtonsWidth.value = getButtonsWidth();\n      resizeObserver.value = new ResizeObserver((entries) => handleResize(entries[0]));\n\n      resizeObserver.value.observe(radioGroupParent.value);\n    }\n  });\n\n  onUnmounted(() => {\n    if (props.variant === 'button' && resizeObserver.value) {\n      resizeObserver.value?.disconnect();\n    }\n  });\n\n  watchEffect(() => {\n    internalOrientation.value = props.orientation;\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    ref=\"radioGroup\"\n    class=\"stash-radio-group\"\n    :class=\"classes['stash-radio-group']\"\n    data-test=\"stash-radio-group\"\n    :aria-errormessage=\"errorId\"\n    :error-id=\"errorId\"\n    :aria-invalid=\"!!props.errorText\"\n    role=\"radiogroup\"\n    fieldset\n  >\n    <slot v-if=\"props.options\">\n      <component :is=\"variantComponentsMap[props.variant]\" />\n    </slot>\n    <div v-else class=\"flex\" data-test=\"stash-radio-group|default-slot\" :class=\"defaultSlotClasses\">\n      <slot></slot>\n    </div>\n  </Field>\n</template>\n\n<style module>\n  @layer utilities {\n    .stash-radio-group :global(.stash-field-hint),\n    .stash-radio-group :global(.stash-field-error) {\n      display: block;\n      width: 100%;\n    }\n\n    .stash-radio-group > :global(.stash-label) {\n      margin-bottom: 4px;\n    }\n  }\n</style>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","props","__props","emit","__emit","e","errorId","uniqueId","provide","computed","internalOrientation","ref","defaultSlotClasses","resizeObserver","radioGroupRef","useTemplateRef","radioGroupParent","_a","radioGroupButtons","getButtonsWidth","acc","button","buttonWidth","initialTotalButtonsWidth","handleResize","entry","onMounted","entries","onUnmounted","watchEffect"],"mappings":"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"}
+{"version":3,"file":"RadioGroup.js","sources":["../src/components/RadioGroup/components/VariantButton.vue","../src/components/RadioGroup/components/VariantChip.vue","../src/components/RadioGroup/components/VariantRadio.vue","../src/components/RadioGroup/components/VariantTile.vue","../src/components/RadioGroup/RadioGroup.types.ts","../src/components/RadioGroup/RadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantButton must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"flex\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .root 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 > div:first-child label {\n      border-top-left-radius: var(--radius-sm);\n      border-bottom-left-radius: var(--radius-sm);\n    }\n\n    .root > div:last-child label {\n      border-top-right-radius: var(--radius-sm);\n      border-bottom-right-radius: var(--radius-sm);\n    }\n\n    .root > div:not(:first-child) label {\n      margin-left: -1px;\n    }\n\n    .root > div:not(:last-child) label {\n      border-right-color: transparent;\n    }\n\n    .root input:disabled ~ label {\n      background-color: var(--color-ice-200);\n      color: var(--color-ice-500);\n      cursor: auto;\n    }\n\n    .root 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    .root 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 { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantChip must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"my-1.5 flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        class=\"sr-only\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      padding: --spacing(1.5) --spacing(3);\n      border: 1px solid var(--color-ice-500);\n      font-weight: var(--font-weight-normal);\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    .root input:disabled ~ label {\n      background-color: var(--color-ice-200);\n      color: var(--color-ice-500);\n      cursor: auto;\n    }\n\n    .root 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    .root input:not(:checked, :disabled) ~ label:hover {\n      border-color: var(--color-blue-500);\n    }\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantRadio must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"flex flex-wrap\" :class=\"classes.root\">\n    <div v-for=\"option in options\" :key=\"`${name}-${option.id}`\" :class=\"[{ 'w-full': fullWidth }]\">\n      <input\n        :id=\"`${name}-${option.id}`\"\n        type=\"radio\"\n        :name=\"name\"\n        :value=\"option.value\"\n        :checked=\"modelValue === option.value\"\n        :disabled=\"disabled || option.disabled\"\n        @input=\"update\"\n      />\n      <label :for=\"`${name}-${option.id}`\">\n        {{ option.text }}\n      </label>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --spacing(3);\n    }\n\n    .root input {\n      appearance: none;\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: 5px;\n    }\n\n    .root input:checked {\n      background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n    }\n\n    .root input:disabled {\n      background: #eef2f4;\n    }\n\n    .root input:disabled ~ label {\n      cursor: auto;\n    }\n\n    .root input:disabled:checked {\n      background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n    }\n\n    .root input:hover:not(:disabled) {\n      border-color: var(--color-blue-500);\n    }\n\n    .root input:hover:not(:disabled) ~ label {\n      color: var(--color-ice-900);\n    }\n\n    .root input:not(:disabled) ~ label:hover {\n      color: var(--color-ice-900);\n    }\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { inject, useCssModule } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup.keys';\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key);\n\n  if (!radioGroupInjection) {\n    throw new Error('VariantTile must be used with a RadioGroup instance.');\n  }\n\n  const { name, disabled, fullWidth, modelValue, options, update } = radioGroupInjection;\n  const classes = useCssModule();\n</script>\n\n<template>\n  <div class=\"flex flex-wrap\" :class=\"classes.root\">\n    <label\n      v-for=\"option in options\"\n      :key=\"`${name}-${option.id}`\"\n      :class=\"[classes['tile-container'], { 'w-full': fullWidth }]\"\n      :for=\"`${name}-${option.id}`\"\n    >\n      <div\n        class=\"flex border\"\n        :class=\"[\n          classes['tile-header'],\n          {\n            'border-blue-500 bg-blue-100 text-ice-900': modelValue === option.value,\n            'border-ice-500 bg-ice-100 text-ice-700': modelValue !== option.value,\n          },\n        ]\"\n      >\n        <input\n          :id=\"`${name}-${option.id}`\"\n          class=\"sr-only\"\n          type=\"radio\"\n          :name=\"name\"\n          :value=\"option.value\"\n          :checked=\"modelValue === option.value\"\n          :disabled=\"disabled || option.disabled\"\n          @input=\"update\"\n        />\n        <div>\n          <span>\n            {{ option.text }}\n          </span>\n        </div>\n      </div>\n      <div\n        class=\"border-x border-b\"\n        :class=\"[\n          classes['tile-body'],\n          {\n            'border-ice-500': modelValue !== option.value,\n            'border-blue-500': modelValue === option.value,\n          },\n        ]\"\n      >\n        <p class=\"m-0 text-ice-900\">{{ option.subTitle }}</p>\n        <p class=\"m-0 text-ice-700\">{{ option.subText }}</p>\n      </div>\n    </label>\n  </div>\n</template>\n\n<style module>\n  @reference \"../../../../styles/main.css\";\n\n  @layer utilities {\n    .root {\n      gap: --spacing(6);\n    }\n\n    .root label {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    .root input:disabled ~ label {\n      cursor: auto;\n    }\n\n    .root input:hover:not(:disabled) ~ label {\n      color: var(--color-ice-900);\n    }\n\n    .root input:not(:disabled) ~ label:hover {\n      color: var(--color-ice-900);\n    }\n\n    .root label.tile-container {\n      border-radius: var(--radius-sm);\n      display: flex;\n      flex: 1;\n      flex-direction: column;\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 label.tile-container:hover .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    .tile-body {\n      border-radius: 0 0 var(--radius-sm) var(--radius-sm);\n      background-color: var(--color-white);\n      padding: --spacing(6);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .root label.tile-container:hover .tile-body {\n      border-color: var(--color-blue-500) !important;\n      transition: all 0.2s;\n    }\n\n    .root 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    }\n\n    .root input ~ div {\n      font-weight: var(--font-weight-medium);\n      user-select: none;\n      cursor: pointer;\n      padding: 0 --spacing(3);\n    }\n\n    .root input:disabled {\n      background: #eef2f4;\n    }\n\n    .root input:checked {\n      background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n    }\n\n    .root label.tile-container input {\n      margin-left: --spacing(3);\n    }\n\n    .root input:disabled:checked {\n      background-image: radial-gradient(var(--color-ice-500) 50%, transparent 54%);\n    }\n\n    @media screen and (width <= 640px) {\n      .root {\n        flex-direction: column;\n      }\n    }\n  }\n</style>\n","import { ComputedRef } from 'vue';\n\nexport enum RadioGroupVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioGroupVariants = `${RadioGroupVariant}`;\n\n/**\n * An individual radio `<input>` within a RadioGroup instance\n */\nexport interface RadioGroupOption {\n  /**\n   * Disables the RadioGroupOption if truthy\n   */\n  disabled?: boolean;\n\n  /**\n   * The unique identifier for the option\n   */\n  id: number | string;\n\n  /**\n   * The text to be displayed for the option\n   */\n  text: string;\n\n  /**\n   * The value of the option. Used for the modelValue of the RadioGroup.\n   */\n  value: string;\n\n  /**\n   * The subtitle for tile variant\n   */\n  subTitle?: string;\n\n  /**\n   * The subtext for tile variant\n   */\n  subText?: string;\n}\n\n/**\n * Properties and utilities provided to children of a RadioGroup instance\n */\nexport interface RadioGroupInjection {\n  /**\n   * This type should match RadioGroupProps['disabled']\n   */\n  disabled: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['fullWidth']\n   */\n  fullWidth: ComputedRef<boolean | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['modelValue']\n   */\n  modelValue: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['name']\n   */\n  name: ComputedRef<string | undefined>;\n\n  /**\n   * This type should match RadioGroupProps['options']\n   */\n  options: ComputedRef<RadioGroupOption[] | undefined>;\n\n  /**\n   * Triggered when the user changes their selection; updates the v-model.\n   */\n  update: (e: Event) => void;\n\n  /**\n   * This type should match RadioGroupProps['variant']\n   * @default 'radio'\n   */\n  variant: ComputedRef<RadioGroupVariants | undefined>;\n\n  /**\n   * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n   *\n   * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n   */\n  orientation?: ComputedRef<'horizontal' | 'vertical'>;\n}\n","<script lang=\"ts\">\n  import { FieldProps } from '../Field/Field.types';\n  import Field from '../Field/Field.vue';\n  import { RadioGroupOption, RadioGroupVariant, RadioGroupVariants } from './RadioGroup.types';\n\n  export * from './RadioGroup.keys';\n  export * from './RadioGroup.types';\n\n  export interface RadioGroupProps extends FieldProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` elements within the RadioGroup.\n     */\n    name?: string;\n\n    /**\n     * Deprecated - Compose your radio group with the `Radio` component instead\n     * @deprecated\n     */\n    options?: RadioGroupOption[];\n\n    /**\n     * The value of the selected radio option. Use this prop with the `update:modelValue` event to create a controlled component.\n     */\n    modelValue?: RadioGroupOption['value'];\n\n    /**\n     * @defaultValue 'radio'\n     */\n    variant?: RadioGroupVariants;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Default orientation. If the variant is `button` and the group is wider than its parent it will be displayed in a column, and this prop will be ignored.\n     *\n     * Note: This does not work with the deprecated `options` prop. Update those instances to use the `RadioNew` component and default slot.\n     *\n     * @defaultValue 'horizontal'\n     */\n    orientation?: 'horizontal' | 'vertical';\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onMounted, onUnmounted, provide, ref, useCssModule, useTemplateRef, watchEffect } from 'vue';\n\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 { RADIO_GROUP_INJECTION } from './RadioGroup.keys';\n\n  const variantComponentsMap = {\n    [RadioGroupVariant.Button]: VariantButton,\n    [RadioGroupVariant.Chip]: VariantChip,\n    [RadioGroupVariant.Radio]: VariantRadio,\n    [RadioGroupVariant.Tile]: VariantTile,\n  };\n\n  const props = withDefaults(defineProps<RadioGroupProps>(), {\n    variant: 'radio',\n    fullWidth: false,\n    modelValue: undefined,\n    name: undefined,\n    options: undefined,\n    orientation: 'horizontal',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Occurs when the user selects a radio option. Also, it enables v-model usage on the component.\n     */\n    (e: 'update:modelValue', value: RadioGroupOption['value']): void;\n  }>();\n\n  const classes = useCssModule();\n\n  function update(e: Event) {\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n\n  const errorId = uniqueId('radio-group-field-error-');\n\n  provide(RADIO_GROUP_INJECTION.key, {\n    name: computed(() => props.name),\n    disabled: computed(() => props.isDisabled || props.disabled),\n    fullWidth: computed(() => props.fullWidth),\n    modelValue: computed(() => props.modelValue),\n    options: computed(() => props.options),\n    variant: computed(() => props.variant),\n    orientation: computed(() => internalOrientation.value),\n    update,\n  });\n\n  const internalOrientation = ref(props.orientation);\n\n  const defaultSlotClasses = computed(() => {\n    return {\n      'flex-wrap': props.variant !== 'button',\n      'gap-x-1.5 gap-y-3': props.variant === 'chip' && internalOrientation.value === 'horizontal',\n      'gap-6':\n        props.variant === 'radio' ||\n        props.variant === 'tile' ||\n        (props.variant === 'chip' && internalOrientation.value === 'vertical'),\n      'flex-col': internalOrientation.value === 'vertical',\n    };\n  });\n\n  const resizeObserver = ref<ResizeObserver | null>(null);\n  const radioGroupRef = useTemplateRef('radioGroup');\n  const radioGroupParent = computed(() => radioGroupRef.value?.$el.parentElement);\n  const radioGroupButtons = computed(() => {\n    if (props.variant !== 'button') {\n      return [];\n    }\n\n    return Array.from<HTMLElement>(radioGroupRef.value?.$el.querySelectorAll('[data-variant-button]')) || [];\n  });\n\n  function getButtonsWidth() {\n    return radioGroupButtons.value.reduce((acc, button) => {\n      const buttonWidth = button.getBoundingClientRect().width;\n      return acc + buttonWidth;\n    }, 0);\n  }\n\n  const initialTotalButtonsWidth = ref(0);\n\n  const handleResize = (entry: ResizeObserverEntry) => {\n    internalOrientation.value =\n      initialTotalButtonsWidth.value > entry.contentBoxSize[0].inlineSize ? 'vertical' : props.orientation;\n  };\n\n  onMounted(() => {\n    // If the width of the buttons is greater than the parent element,\n    // set orientation to vertical\n    if (props.variant === 'button' && !props.fullWidth) {\n      initialTotalButtonsWidth.value = getButtonsWidth();\n      resizeObserver.value = new ResizeObserver((entries) => handleResize(entries[0]));\n\n      resizeObserver.value.observe(radioGroupParent.value);\n    }\n  });\n\n  onUnmounted(() => {\n    if (props.variant === 'button' && resizeObserver.value) {\n      resizeObserver.value?.disconnect();\n    }\n  });\n\n  watchEffect(() => {\n    internalOrientation.value = props.orientation;\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    ref=\"radioGroup\"\n    class=\"stash-radio-group\"\n    :class=\"classes['stash-radio-group']\"\n    data-test=\"stash-radio-group\"\n    :aria-errormessage=\"errorId\"\n    :error-id=\"errorId\"\n    :aria-invalid=\"!!props.errorText\"\n    role=\"radiogroup\"\n    fieldset\n  >\n    <slot v-if=\"props.options\">\n      <component :is=\"variantComponentsMap[props.variant]\" />\n    </slot>\n    <div v-else class=\"flex\" data-test=\"stash-radio-group|default-slot\" :class=\"defaultSlotClasses\">\n      <slot></slot>\n    </div>\n  </Field>\n</template>\n\n<style module>\n  @layer utilities {\n    .stash-radio-group :global(.stash-field-hint),\n    .stash-radio-group :global(.stash-field-error) {\n      display: block;\n      width: 100%;\n    }\n\n    .stash-radio-group > :global(.stash-label) {\n      margin-bottom: 4px;\n    }\n  }\n</style>\n"],"names":["radioGroupInjection","inject","RADIO_GROUP_INJECTION","name","disabled","fullWidth","modelValue","options","update","classes","useCssModule","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","option","_createElementVNode","_cache","args","_toDisplayString","_hoisted_2","_hoisted_3","_hoisted_4","RadioGroupVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","props","__props","emit","__emit","e","errorId","uniqueId","provide","computed","internalOrientation","ref","defaultSlotClasses","resizeObserver","radioGroupRef","useTemplateRef","radioGroupParent","_a","radioGroupButtons","getButtonsWidth","acc","button","buttonWidth","initialTotalButtonsWidth","handleResize","entry","onMounted","entries","onUnmounted","watchEffect","_createBlock","Field","_mergeProps","_renderSlot","_ctx","_openBlock","_resolveDynamicComponent"],"mappings":"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"}

package/dist/RadioGroup.vue.d.ts

@@ -58,7 +58,7 @@ options: RadioGroupOption[];
 modelValue: string;
 variant: "button" | "radio" | "tile" | "chip";
 fullWidth: boolean;
-orientation: "vertical" | "horizontal";
+orientation: "horizontal" | "vertical";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

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        '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      <slot>{{ props.label }}</slot>\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;;;;;;;;;;;;;;;;;;;"}
+{"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      <slot>{{ props.label }}</slot>\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","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_cache","$event","_renderSlot","_ctx","_createTextVNode","_toDisplayString","_hoisted_2","_vShow","_hoisted_3","RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","derivedModelValue","computed","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

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 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;;;;;;;;;;;"}
+{"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","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_createVNode","Icon"],"mappings":";;;;;;;;AAKE,UAAMA,IAAQC,EAAA;AAId,QAAI,EAFa,CAAC,CAACD,EAAM,OAAO,CAAC,CAACA,EAAM;AAGtC,YAAM,IAAI,MAAM,0DAA0D;sBAK5EE,EAAA,GAAAC,EAOM,OAPNC,GAOM;AAAA,MALJC,EAAwBC,EAAA,QAAA,KAAA;AAAA,MAExBC,EAA6CC,GAAA;AAAA,QAAvC,MAAK;AAAA,QAAW,OAAM;AAAA,MAAA;MAE5BH,EAAwBC,EAAA,QAAA,KAAA;AAAA,IAAA;;;"}

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=\"{ '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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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","_createBlock","Input","$event","_normalizeClass","Button","_createVNode","Icon","_unref","_renderSlot","_ctx"],"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;2BAIAU,EAwCQC,GAAA;AAAA,eAvCF;AAAA,MAAJ,KAAIT;AAAA,kBACKF,EAAA;AAAA;+BAAAA,EAAU,QAAAY;AAAA,QAOEH;AAAA,MAAA;AAAA,MANrB,OAAKI,EAAA,CAAC,oBAAkB,CAAA,EAAA,2BAAA,CAAA,CACgBb,EAAA,MAAA,CAAU,CAAA,CAAA;AAAA,MACjD,OAAON,EAAM;AAAA,MACb,aAAaA,EAAM;AAAA,MACnB,aAAWA,EAAM;AAAA,MAClB,aAAU;AAAA,MAET,WAAaW,GAAQ,CAAA,OAAA,CAAA;AAAA,IAAA;MAEX,UACT,MAUS;AAAA,QATDL,EAAA,cADRU,EAUSI,GAAA;AAAA;UARP,OAAM;AAAA,UACL,UAAUpB,EAAM;AAAA,UACjB,aAAU;AAAA,UACT,SAAOY;AAAA,UACP,SAAK;AAAA,cAAQA,GAAe,CAAA,OAAA,CAAA;AAAA,cACfA,GAAe,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;qBAE7B,MAAqB;AAAA,YAArBS,EAAqBC,GAAA,EAAf,MAAK,SAAO;AAAA,UAAA;;;QAEpBD,EAUSD,GAAA;AAAA,UATN,UAAUX,EAAA;AAAA,UACX,aAAU;AAAA,UACT,UAAUT,EAAM;AAAA,UACjB,OAAM;AAAA,UACL,SAAOW;AAAA,UACP,SAAK;AAAA,cAAQA,GAAQ,CAAA,OAAA,CAAA;AAAA,cACRA,GAAQ,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA;qBAEtB,MAA0G;AAAA,YAA1GU,EAA0GC,GAAA;AAAA,cAAnG,OAAKH,EAAA,EAAA,gBAAoBnB,EAAM,WAAS;AAAA,cAAK,MAAMA,EAAM,YAAS,kBAAA;AAAA,YAAA;;;;;;;MAG7DuB,EAAAnB,CAAA,EAAM;cAAO;AAAA,cAE3B,MAAyB;AAAA,UAAzBoB,EAAyBC,EAAA,QAAA,QAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;;;;;;"}

package/dist/SearchBar.vue.d.ts

@@ -54,9 +54,9 @@ onSearch?: ((searchTerm: string) => any) | undefined;
 "onUpdate:model-value"?: ((searchTerm: string) => any) | undefined;
 }>, {
 label: string;
+placeholder: string;
 isLoading: boolean;
 hintText: string;
-placeholder: string;
 modelValue: string;
 isWorking: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {

package/dist/SectionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.js","sources":["../src/components/SectionHeader/SectionHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  interface SectionHeaderProps {\n    /**\n     * The text label for the action button\n     */\n    actionLabel?: string;\n    /**\n     * The icon name for the action button\n     */\n    actionIcon?: IconName;\n    /**\n     * If the action button should be a router link, this is where it will link to.\n     */\n    to?: RouteLocationRaw;\n  }\n\n  const props = withDefaults(defineProps<SectionHeaderProps>(), {\n    actionLabel: 'View All',\n    actionIcon: 'arrow-right',\n    to: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the action button is clicked. Not emitted if the action button is a router link.\n     */\n    actionEvent: [];\n  }>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    return 'button';\n  });\n  const actionRootAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n    return {};\n  });\n</script>\n<template>\n  <div class=\"stash-section-header\">\n    <div\n      class=\"stash-section-header__content flex-wrap items-center justify-between px-6 py-3 md:flex\"\n      data-test=\"stash-section-header|content\"\n    >\n      <div data-test=\"stash-section-header|title\">\n        <h2>\n          <!-- @slot Header content -->\n          <slot></slot>\n        </h2>\n      </div>\n      <component\n        :is=\"is\"\n        v-bind=\"actionRootAttrs\"\n        data-test=\"stash-section-header|action\"\n        class=\"stash-section-header__action flex items-center gap-3 max-md:pt-3\"\n        @click=\"\n          () => {\n            if (!props.to) {\n              emit('actionEvent');\n            }\n          }\n        \"\n      >\n        <span class=\"stash-section-header__action-label m-0 text-ice-900\">\n          {{ props.actionLabel }}\n        </span>\n\n        <span\n          class=\"stash-section-header__action-icon size-6 items-center rounded-full bg-ice-200 p-[2px] text-ice-900\"\n        >\n          <Icon :name=\"props.actionIcon\" size=\"dense\" />\n        </span>\n      </component>\n    </div>\n    <div class=\"stash-section-header__divider h-px bg-ice-200\" />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","is","computed","actionRootAttrs"],"mappings":";;;;;;;;;;;;;;AAsBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGF,QACR,GACKM,IAAkBD,EAAS,MAC3BL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAGP,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SectionHeader.js","sources":["../src/components/SectionHeader/SectionHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  interface SectionHeaderProps {\n    /**\n     * The text label for the action button\n     */\n    actionLabel?: string;\n    /**\n     * The icon name for the action button\n     */\n    actionIcon?: IconName;\n    /**\n     * If the action button should be a router link, this is where it will link to.\n     */\n    to?: RouteLocationRaw;\n  }\n\n  const props = withDefaults(defineProps<SectionHeaderProps>(), {\n    actionLabel: 'View All',\n    actionIcon: 'arrow-right',\n    to: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the action button is clicked. Not emitted if the action button is a router link.\n     */\n    actionEvent: [];\n  }>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    return 'button';\n  });\n  const actionRootAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n    return {};\n  });\n</script>\n<template>\n  <div class=\"stash-section-header\">\n    <div\n      class=\"stash-section-header__content flex-wrap items-center justify-between px-6 py-3 md:flex\"\n      data-test=\"stash-section-header|content\"\n    >\n      <div data-test=\"stash-section-header|title\">\n        <h2>\n          <!-- @slot Header content -->\n          <slot></slot>\n        </h2>\n      </div>\n      <component\n        :is=\"is\"\n        v-bind=\"actionRootAttrs\"\n        data-test=\"stash-section-header|action\"\n        class=\"stash-section-header__action flex items-center gap-3 max-md:pt-3\"\n        @click=\"\n          () => {\n            if (!props.to) {\n              emit('actionEvent');\n            }\n          }\n        \"\n      >\n        <span class=\"stash-section-header__action-label m-0 text-ice-900\">\n          {{ props.actionLabel }}\n        </span>\n\n        <span\n          class=\"stash-section-header__action-icon size-6 items-center rounded-full bg-ice-200 p-[2px] text-ice-900\"\n        >\n          <Icon :name=\"props.actionIcon\" size=\"dense\" />\n        </span>\n      </component>\n    </div>\n    <div class=\"stash-section-header__divider h-px bg-ice-200\" />\n  </div>\n</template>\n"],"names":["props","__props","emit","__emit","is","computed","actionRootAttrs","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_renderSlot","_ctx","_createBlock","_resolveDynamicComponent","_mergeProps","_cache","_hoisted_4","_toDisplayString","_hoisted_5","_createVNode","Icon"],"mappings":";;;;;;;;;;;;;;AAsBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAKC,EAAS,MACdL,EAAM,KACD,gBAGF,QACR,GACKM,IAAkBD,EAAS,MAC3BL,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAGP,CAAA,CACR;sBAGDO,EAAA,GAAAC,EAoCM,OApCNC,GAoCM;AAAA,MAnCJC,EAiCM,OAjCNC,GAiCM;AAAA,QA7BJD,EAKM,OALNE,GAKM;AAAA,UAJJF,EAGK,MAAA,MAAA;AAAA,YADHG,EAAaC,EAAA,QAAA,SAAA;AAAA,UAAA;;SAGjBP,EAAA,GAAAQ,EAsBYC,EArBLZ,EAAA,KAAE,GADTa,EAEUX,EAoBE,OApBa;AAAA,UACvB,aAAU;AAAA,UACV,OAAM;AAAA,UACL,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA;AAAsC,YAAAlB,EAAM,MAAoBE,EAAI,aAAA;AAAA;;qBAQ1E,MAEO;AAAA,YAFPQ,EAEO,QAFPS,GAEOC,EADFpB,EAAM,WAAW,GAAA,CAAA;AAAA,YAGtBU,EAIO,QAJPW,GAIO;AAAA,cADLC,EAA8CC,GAAA;AAAA,gBAAvC,MAAMvB,EAAM;AAAA,gBAAY,MAAK;AAAA,cAAA;;;;;;sBAI1CU,EAA6D,OAAA,EAAxD,OAAM,mDAA+C,MAAA,EAAA;AAAA,IAAA;;;"}

package/dist/Select.js

@@ -11,7 +11,7 @@ import { DEBOUNCE as lt, KEY_CODES as C } from "./constants.js";
 import st from "./directives/clickoutside.js";
 import { D as at } from "./MenusPlugin-Bk6UW6o9.js";
 import he from "./Chip.js";
-import { _ as nt } from "./Field.vue_vue_type_script_setup_true_lang-dAGKfjf5.js";
+import { _ as nt } from "./Field.vue_vue_type_script_setup_true_lang-D2I8xDEW.js";
 import U from "./Icon.js";
 import { _ as ot } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const rt = { class: "flex h-input items-center text-sm" }, it = ["id", "aria-labelledby"], ct = ["id", "aria-errormessage", "aria-invalid", "disabled", "multiple", "name"], ut = ["selected", "value", "disabled"], dt = ["aria-controls", "aria-expanded", "aria-label", "aria-disabled"], ft = ["id"], pt = ["onKeypress", "onMousedown"], ht = {
@@ -466,7 +466,7 @@ const rt = { class: "flex h-input items-center text-sm" }, it = ["id", "aria-lab
                           ]),
                           z(f("li", Bt, [
                             N(e.$slots, "no-options", {}, () => [
-                              l[6] || (l[6] = A(" No options "))
+                              l[6] || (l[6] = A(" No options ", -1))
                             ], !0)
                           ], 512), [
                             [ee, !t.loading && !re.value && !M.value.length]