@leaflink/stash 51.11.0 → 51.12.0

package/dist/Badge.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface BadgeProps {
+export declare interface BadgeProps {
     /**
      * If true, the badge will animate when the content changes
      */
@@ -55,20 +78,46 @@ declare interface BadgeProps {
     variant?: 'dot' | 'standard';
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<BadgeProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
-color: "blue" | "red";
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
+animate: boolean;
+color: string;
+content: undefined;
+isDisabled: boolean;
+max: number;
+position: string;
+offset: () => {
+top: undefined;
+right: undefined;
+};
+showZero: boolean;
+variant: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
+animate: boolean;
+color: string;
+content: undefined;
+isDisabled: boolean;
+max: number;
+position: string;
+offset: () => {
+top: undefined;
+right: undefined;
+};
+showZero: boolean;
+variant: string;
+}>>> & Readonly<{}>, {
 max: string | number;
-content: string | number;
-position: "inline" | "top-right";
 animate: boolean;
+color: "blue" | "red";
 offset: {
 top?: number | undefined;
 right?: number | undefined;
 };
+content: string | number;
 isDisabled: boolean;
+position: "inline" | "top-right";
 variant: "standard" | "dot";
 showZero: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Box.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface BoxProps {
+export declare interface BoxProps {
     /**
      * Remove the padding around the entire Box.
      */
@@ -28,12 +51,22 @@ declare interface BoxProps {
     radius?: 'none' | 'rounded';
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<BoxProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<BoxProps> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
+disablePadding: boolean;
+disableGutters: boolean;
+disableElevation: boolean;
+radius: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BoxProps>, {
+disablePadding: boolean;
+disableGutters: boolean;
+disableElevation: boolean;
+radius: string;
+}>>> & Readonly<{}>, {
 radius: "none" | "rounded";
 disablePadding: boolean;
 disableGutters: boolean;
 disableElevation: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box tw-bg-white\"\n    :class=\"{\n      'tw-rounded': props.radius === 'rounded',\n      'tw-p-gutter': !props.disablePadding && !props.disableGutters,\n      'tw-py-gutter': props.disableGutters,\n      'tw-shadow': !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props","_createElementBlock","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;2BASdC,EAYU,WAAA;AAAA,MAXR,UAAM,yBAAuB;AAAA,QACC,cAAAF,EAAM,WAAM;AAAA,QAAsC,eAAA,CAAAA,EAAM,kBAAc,CAAKA,EAAM;AAAA,QAAsC,gBAAAA,EAAM;AAAA,QAAoC,aAAA,CAAAA,EAAM;AAAA,MAAA;MAMrM,aAAU;AAAA,IAAA;MAGVG,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;"}
+{"version":3,"file":"Box.vue_vue_type_script_setup_true_lang-rFnvwLVY.js","sources":["../src/components/Box/Box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  defineOptions({\n    name: 'll-box',\n  });\n\n  export interface BoxProps {\n    /**\n     * Remove the padding around the entire Box.\n     */\n    disablePadding?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableGutters?: boolean;\n\n    /**\n     * Remove the padding on the left and right of the Box.\n     */\n    disableElevation?: boolean;\n\n    /**\n     * Border radius style. Defaults to `rounded`.\n     */\n    radius?: 'none' | 'rounded';\n  }\n\n  const props = withDefaults(defineProps<BoxProps>(), {\n    disablePadding: false,\n    disableGutters: false,\n    disableElevation: false,\n    radius: 'rounded',\n  });\n</script>\n\n<template>\n  <section\n    class=\"stash-box tw-bg-white\"\n    :class=\"{\n      'tw-rounded': props.radius === 'rounded',\n      'tw-p-gutter': !props.disablePadding && !props.disableGutters,\n      'tw-py-gutter': props.disableGutters,\n      'tw-shadow': !props.disableElevation,\n    }\"\n    data-test=\"stash-box\"\n  >\n    <!-- @slot default -->\n    <slot></slot>\n  </section>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;AA2BE,UAAMA,IAAQC;;;;;;;;;;;;;;"}

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Displays a spinning loading icon in place of the button text and disables the button\n     */\n    isLoading?: boolean;\n\n    /**\n     * Disables the button\n     */\n    disabled?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n    isLoading: false,\n    disabled: undefined,\n  });\n  const classes = useCssModule();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  const buttonAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    :disabled=\"props.isLoading || props.disabled ? true : undefined\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      {\n        [`stash-button--${props.color}`]: props.color,\n        [classes[`button--${props.color}`]]: props.color,\n        'stash-button--is-loading': props.isLoading,\n      },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <Icon v-if=\"props.isLoading\" name=\"loading-empty\" class=\"tw-animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('lg') {\n    /* `focus` and `hover` should be added only for large screens */\n    .button:focus {\n      box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n      outline: none;\n    }\n\n    .button:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Solid treatment */\n  .button--solid {\n    background-color: var(--button-color);\n    border-color: transparent;\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--solid:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--solid:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--solid[disabled]:not(:global(.stash-button--is-loading)) {\n    --button-color: var(--color-ice-500) !important;\n  }\n\n  /* Ghost treatment */\n  .button--ghost {\n    background-color: rgb(0 0 0 / 0%);\n    border-color: var(--button-color);\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--ghost:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--ghost:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--ghost[disabled]:not(:global(.stash-button--is-loading)) {\n    --button-color: var(--color-ice-500) !important;\n    --text-color: var(--color-ice-500) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue-500);\n    --button-hover-color: var(--color-blue-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--secondary {\n    composes: button--ghost;\n    --button-color: var(--color-ice-500);\n    --button-hover-color: var(--color-ice-700-hover);\n    --text-color: var(--color-ice-700);\n  }\n\n  .button--tertiary {\n    composes: button--ghost;\n    --button-color: var(--color-white);\n    --button-hover-color: var(--color-white-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--icon,\n  .button--iconLabel {\n    /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n    border: 0;\n    border-radius: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--icon:hover,\n    .button--iconLabel:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button--icon svg,\n  .button--iconLabel svg {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .button--icon[disabled]:not(:global(.stash-button--is-loading)) svg,\n  .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)),\n  .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)) svg {\n    color: var(--color-ice-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\n    font-weight: theme('fontWeight.medium');\n    line-height: 1.5;\n    min-width: 0;\n    padding: 0;\n  }\n\n  .button--inline:hover {\n    text-decoration: underline;\n  }\n\n  .button--inline[disabled] {\n    color: var(--color-ice-500);\n  }\n\n  /* Colors */\n  .button--blue.button--primary,\n  .button--blue.button--secondary {\n    --button-color: var(--color-blue-500);\n  }\n\n  .button--blue.button--primary {\n    --button-hover-color: var(--color-blue-hover);\n  }\n\n  .button--blue.button--secondary {\n    --text-color: var(--color-blue-500);\n    --button-hover-color: var(--button-secondary-blue-hover);\n  }\n\n  .button--red.button--primary,\n  .button--red.button--secondary {\n    --button-color: var(--color-red-500);\n  }\n\n  .button--red.button--primary {\n    --button-hover-color: var(--color-red-hover);\n  }\n\n  .button--red.button--secondary {\n    --text-color: var(--color-red-500);\n    --button-hover-color: var(--button-secondary-red-hover);\n  }\n\n  /**\n   * Button Grid\n   * TODO: Move into separate component\n   * https://leaflink.atlassian.net/browse/STASH-230\n   * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n   */\n  :global(.button-grid) > .button,\n  :global(.header-button-grid) > .button {\n    width: 50%;\n  }\n\n  :global(.button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","Icon","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC,EAAA;AAEhB,QAAKC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IAAA,GANPA,MAAAA,IAAA,CAAA,EAAA;AAWL,UAAMC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AAC1C,YAAIJ,EAAMO,CAAI;AACZ,iBAAOA;AAIX,aAAO;AAAA,IACT,CAAC,GAEKC,IAAKF,EAAS,MACdN,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKS,IAAcH,EAAS,MACvBN,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;2BAIDU,EAoBYC,EAnBLH,EAAA,KAAE,GADTI,EAoBY;AAAA,MAlBT,UAAUZ,EAAM,aAAaA,EAAM,WAAQ,KAAU;AAAA,IAAA,GAC9CS,EAAA,OAAW;AAAA,MACnB,QAAM,gBAAc;AAAA,QACJI,EAAAX,CAAA,EAAQ;AAAA,yBAA+BG,EAAA,KAAU;AAAA,QAAUQ,EAAAX,CAAA,aAAmBG,EAAA,KAAU,EAAA;AAAA;UAAuC,CAAA,iBAAAL,EAAM,KAAK,EAAA,GAAKA,EAAM;AAAA,UAAgB,CAAAa,EAAAX,CAAA,aAAmBF,EAAM,KAAK,EAAA,CAAA,GAAMA,EAAM;AAAA,UAA2C,4BAAAA,EAAM;AAAA,QAAA;AAAA;MAUhR,aAAU;AAAA,IAAA;iBAEV,MAA4E;AAAA,QAAhEA,EAAM,kBAAlBU,EAA4EI,GAAA;AAAA;UAA/C,MAAK;AAAA,UAAgB,OAAM;AAAA,QAAA,MAExDC,EAAoBC,EAAA,QAAA,WAAA,EAAA,KAAA,EAAA,CAAA;AAAA,MAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/components/Button/Button.vue"],"sourcesContent":["<script lang=\"ts\">\n  export interface ButtonProps {\n    /**\n     * Renders the secondary variant\n     */\n    secondary?: boolean;\n\n    /**\n     * Renders the button as a container for an Icon\n     */\n    icon?: boolean;\n\n    /**\n     * Renders the button as a container for an IconLabel\n     */\n    iconLabel?: boolean;\n\n    /**\n     * Renders the tertiary variant\n     */\n    tertiary?: boolean;\n\n    /**\n     * Renders the component inline\n     */\n    inline?: boolean;\n\n    /**\n     * Renders a color variant\n     */\n    color?: 'blue' | 'red';\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component. If defined, the button will render as a `<router-link />`.\n     */\n    to?: RouteLocationRaw;\n\n    /**\n     * Button link. If defined, the button will render as an `<a />` tag.\n     */\n    href?: string;\n\n    /**\n     * Displays a spinning loading icon in place of the button text and disables the button\n     */\n    isLoading?: boolean;\n\n    /**\n     * Disables the button\n     */\n    disabled?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n  import { RouteLocationRaw } from 'vue-router';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-button',\n  });\n\n  const props = withDefaults(defineProps<ButtonProps>(), {\n    secondary: false,\n    icon: false,\n    iconLabel: false,\n    tertiary: false,\n    inline: false,\n    color: undefined,\n    href: '',\n    to: undefined,\n    isLoading: false,\n    disabled: undefined,\n  });\n  const classes = useCssModule();\n\n  enum ButtonTypes {\n    Icon = 'icon',\n    IconLabel = 'iconLabel',\n    Secondary = 'secondary',\n    Tertiary = 'tertiary',\n    Inline = 'inline',\n    Primary = 'primary',\n  }\n\n  type ButtonType = `${ButtonTypes}`;\n\n  const buttonType = computed<ButtonType>(() => {\n    for (const type of Object.values(ButtonTypes)) {\n      if (props[type]) {\n        return type;\n      }\n    }\n\n    return ButtonTypes.Primary;\n  });\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'button';\n  });\n\n  const buttonAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href,\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    :disabled=\"props.isLoading || props.disabled ? true : undefined\"\n    v-bind=\"buttonAttrs\"\n    class=\"stash-button\"\n    :class=\"[\n      classes.button,\n      `stash-button--${buttonType}`,\n      classes[`button--${buttonType}`],\n      {\n        [`stash-button--${props.color}`]: props.color,\n        [classes[`button--${props.color}`]]: props.color,\n        'stash-button--is-loading': props.isLoading,\n      },\n    ]\"\n    data-test=\"ll-button\"\n  >\n    <Icon v-if=\"props.isLoading\" name=\"loading-empty\" class=\"tw-animate-spin\" />\n    <!-- @slot default -->\n    <slot v-else></slot>\n  </component>\n</template>\n\n<style module>\n  .button {\n    border-radius: theme('borderRadius.DEFAULT');\n    border-width: 1px;\n    display: inline-block;\n    font-size: 0.875rem;\n    font-weight: theme('fontWeight.semibold');\n    line-height: 2.125rem;\n    margin: 0;\n    min-width: 144px;\n    padding: 0 theme('spacing.3');\n    text-align: center;\n    text-decoration: none;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  @media screen('lg') {\n    /* `focus` and `hover` should be added only for large screens */\n    .button:focus {\n      box-shadow: 0 0 0 3px rgb(0 123 255 / 14%);\n      outline: none;\n    }\n\n    .button:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button[disabled] {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  /* Solid treatment */\n  .button--solid {\n    background-color: var(--button-color);\n    border-color: transparent;\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--solid:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--solid:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--solid[disabled]:not(:global(.stash-button--is-loading)) {\n    --button-color: var(--color-ice-500) !important;\n  }\n\n  /* Ghost treatment */\n  .button--ghost {\n    background-color: rgb(0 0 0 / 0%);\n    border-color: var(--button-color);\n    color: var(--text-color);\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--ghost:hover {\n      background-color: var(--button-hover-color);\n    }\n  }\n\n  .button--ghost:active {\n    background-color: var(--button-hover-color);\n  }\n\n  .button--ghost[disabled]:not(:global(.stash-button--is-loading)) {\n    --button-color: var(--color-ice-500) !important;\n    --text-color: var(--color-ice-500) !important;\n  }\n\n  /* Types */\n  .button--primary {\n    composes: button--solid;\n    --button-color: var(--color-blue-500);\n    --button-hover-color: var(--color-blue-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--secondary {\n    composes: button--ghost;\n    --button-color: var(--color-ice-500);\n    --button-hover-color: var(--color-ice-700-hover);\n    --text-color: var(--color-ice-700);\n  }\n\n  .button--tertiary {\n    composes: button--ghost;\n    --button-color: var(--color-white);\n    --button-hover-color: var(--color-white-hover);\n    --text-color: var(--color-white);\n  }\n\n  .button--icon,\n  .button--iconLabel {\n    /* https://developers.google.com/web/fundamentals/accessibility/accessible-styles */\n    border: 0;\n    border-radius: theme('borderRadius.DEFAULT');\n    height: theme('spacing.12');\n    min-width: theme('spacing.12');\n    text-decoration: none;\n  }\n\n  .button--icon {\n    padding: theme('spacing.3');\n    width: theme('spacing.12');\n  }\n\n  .button--iconLabel {\n    padding: 0;\n    width: unset;\n  }\n\n  @media screen('lg') {\n    /* `hover` should be added only for large screens */\n    .button--icon:hover,\n    .button--iconLabel:hover {\n      text-decoration: none;\n    }\n  }\n\n  .button--icon svg,\n  .button--iconLabel svg {\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .button--icon[disabled]:not(:global(.stash-button--is-loading)) svg,\n  .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)),\n  .button--iconLabel[disabled]:not(:global(.stash-button--is-loading)) svg {\n    color: var(--color-ice-500);\n  }\n\n  .button--inline {\n    border: 0;\n    color: var(--color-blue-500);\n    font-weight: theme('fontWeight.medium');\n    line-height: 1.5;\n    min-width: 0;\n    padding: 0;\n  }\n\n  .button--inline:hover {\n    text-decoration: underline;\n  }\n\n  .button--inline[disabled] {\n    color: var(--color-ice-500);\n  }\n\n  /* Colors */\n  .button--blue.button--primary,\n  .button--blue.button--secondary {\n    --button-color: var(--color-blue-500);\n  }\n\n  .button--blue.button--primary {\n    --button-hover-color: var(--color-blue-hover);\n  }\n\n  .button--blue.button--secondary {\n    --text-color: var(--color-blue-500);\n    --button-hover-color: var(--button-secondary-blue-hover);\n  }\n\n  .button--red.button--primary,\n  .button--red.button--secondary {\n    --button-color: var(--color-red-500);\n  }\n\n  .button--red.button--primary {\n    --button-hover-color: var(--color-red-hover);\n  }\n\n  .button--red.button--secondary {\n    --text-color: var(--color-red-500);\n    --button-hover-color: var(--button-secondary-red-hover);\n  }\n\n  /**\n   * Button Grid\n   * TODO: Move into separate component\n   * https://leaflink.atlassian.net/browse/STASH-230\n   * See `styles/elements/_buttons.scss` for button-grid (parent element) specific styles.\n   */\n  :global(.button-grid) > .button,\n  :global(.header-button-grid) > .button {\n    width: 50%;\n  }\n\n  :global(.button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('md') {\n    :global(.button-grid) > .button {\n      width: auto;\n    }\n  }\n\n  :global(.header-button-grid) > .button + .button {\n    margin-left: theme('spacing.6');\n  }\n\n  @media screen('lg') {\n    :global(.header-button-grid) > .button {\n      width: auto;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","ButtonTypes","buttonType","computed","type","is","buttonAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;AAgEE,UAAMA,IAAQC,GAYRC,IAAUC,EAAA;AAEhB,QAAKC;AAAL,KAAA,CAAKA,MAAL;AACEA,MAAAA,EAAA,OAAO,QACPA,EAAA,YAAY,aACZA,EAAA,YAAY,aACZA,EAAA,WAAW,YACXA,EAAA,SAAS,UACTA,EAAA,UAAU;AAAA,IAAA,GANPA,MAAAA,IAAA,CAAA,EAAA;AAWL,UAAMC,IAAaC,EAAqB,MAAM;AAC5C,iBAAWC,KAAQ,OAAO,OAAOH,CAAW;AAC1C,YAAIJ,EAAMO,CAAI;AACZ,iBAAOA;AAIX,aAAO;AAAA,IACT,CAAC,GAEKC,IAAKF,EAAS,MACdN,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,QACR,GAEKS,IAAcH,EAAS,MACvBN,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Button.vue.d.ts

@@ -1,18 +1,41 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 import { RouteLocationAsPathGeneric } from 'vue-router';
 import { RouteLocationAsRelativeGeneric } from 'vue-router';
 import { RouteLocationRaw } from 'vue-router';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface ButtonProps {
+export declare interface ButtonProps {
     /**
      * Renders the secondary variant
      */
@@ -55,18 +78,40 @@ declare interface ButtonProps {
     disabled?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
-color: "blue" | "red";
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+secondary: boolean;
 icon: boolean;
+iconLabel: boolean;
+tertiary: boolean;
+inline: boolean;
+color: undefined;
 href: string;
+to: undefined;
+isLoading: boolean;
+disabled: undefined;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
 secondary: boolean;
+icon: boolean;
 iconLabel: boolean;
 tertiary: boolean;
 inline: boolean;
-to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
+color: undefined;
+href: string;
+to: undefined;
 isLoading: boolean;
+disabled: undefined;
+}>>> & Readonly<{}>, {
+to: string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric;
 disabled: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+icon: boolean;
+href: string;
+secondary: boolean;
+iconLabel: boolean;
+tertiary: boolean;
+inline: boolean;
+color: "blue" | "red";
+isLoading: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/ButtonGroup.js

@@ -1,53 +1,57 @@
-import { defineComponent as _, computed as i, ref as f, createElementBlock as o, openBlock as l, normalizeClass as c, Fragment as b, renderList as m, withModifiers as g, toDisplayString as $ } from "vue";
-import y from "lodash-es/uniqueId";
-import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const h = ["data-test"], w = ["data-test", "disabled", "onClick"], z = {
+import { defineComponent as m, computed as r, ref as g, createElementBlock as l, openBlock as s, normalizeClass as p, Fragment as $, renderList as y, withModifiers as B, toDisplayString as h } from "vue";
+import w from "lodash-es/uniqueId";
+import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const k = ["data-test"], C = ["data-test", "disabled", "onClick"], G = {
   name: "ll-button-group"
-}, k = /* @__PURE__ */ _({
-  ...z,
+}, D = /* @__PURE__ */ m({
+  ...G,
   props: {
-    groupName: { default: y() },
+    groupName: { default: w() },
     options: {},
     fullWidth: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     allowDeactivate: { type: Boolean, default: !1 }
   },
   emits: ["input"],
-  setup(d, { emit: r }) {
-    const e = d, p = r, s = i(() => e.options.length === 1), u = i(() => e.allowDeactivate || s.value), n = f(e.options.find((t) => t.active) || null);
-    function v(t) {
-      u.value && n.value?.id === t.id ? n.value = null : n.value = t, p("input", n.value);
+  setup(v, { emit: _ }) {
+    const e = v, f = _, u = r(() => e.options.length === 1), i = r(() => e.allowDeactivate || u.value), n = g(e.options.find((t) => t.active) || null);
+    function b(t) {
+      var o;
+      i.value && ((o = n.value) == null ? void 0 : o.id) === t.id ? n.value = null : n.value = t, f("input", n.value);
     }
-    return (t, W) => (l(), o("div", {
-      class: c([
+    return (t, o) => (s(), l("div", {
+      class: p([
         "tw-flex",
         t.$style.buttonGroup,
         { "tw-w-full": e.fullWidth },
-        { [t.$style.single]: s.value },
-        { [t.$style["can-deactivate"]]: u.value }
+        { [t.$style.single]: u.value },
+        { [t.$style["can-deactivate"]]: i.value }
       ]),
       "data-test": `button-group-${t.$props.groupName}`
     }, [
-      (l(!0), o(b, null, m(e.options, (a) => (l(), o("button", {
-        key: `${e.groupName}-${a.id}`,
-        class: c([t.$style.button, { [t.$style.active]: n.value?.id === a.id }]),
-        "data-test": `${e.groupName}-button-${n.value?.id === a.id ? "active" : "inactive"}`,
-        tabindex: 0,
-        disabled: e.disabled,
-        onClick: g((q) => v(a), ["prevent"])
-      }, $(a.text), 11, w))), 128))
-    ], 10, h));
+      (s(!0), l($, null, y(e.options, (a) => {
+        var c, d;
+        return s(), l("button", {
+          key: `${e.groupName}-${a.id}`,
+          class: p([t.$style.button, { [t.$style.active]: ((c = n.value) == null ? void 0 : c.id) === a.id }]),
+          "data-test": `${e.groupName}-button-${((d = n.value) == null ? void 0 : d.id) === a.id ? "active" : "inactive"}`,
+          tabindex: 0,
+          disabled: e.disabled,
+          onClick: B((F) => b(a), ["prevent"])
+        }, h(a.text), 11, C);
+      }), 128))
+    ], 10, k));
   }
-}), C = "_buttonGroup_1bnlz_3", G = "_button_1bnlz_3", D = "_single_1bnlz_17", N = "_active_1bnlz_29", M = {
-  buttonGroup: C,
-  button: G,
-  single: D,
-  active: N,
+}), N = "_buttonGroup_1bnlz_3", M = "_button_1bnlz_3", S = "_single_1bnlz_17", W = "_active_1bnlz_29", q = {
+  buttonGroup: N,
+  button: M,
+  single: S,
+  active: W,
   "can-deactivate": "_can-deactivate_1bnlz_42"
-}, S = {
-  $style: M
-}, L = /* @__PURE__ */ B(k, [["__cssModules", S]]);
+}, E = {
+  $style: q
+}, x = /* @__PURE__ */ z(D, [["__cssModules", E]]);
 export {
-  L as default
+  x as default
 };
 //# sourceMappingURL=ButtonGroup.js.map

package/dist/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'input', activeButton: ButtonGroupOption | null): void;\n  }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  /* full width buttons */\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.body');\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_createElementBlock","_normalizeClass","$style","$props","_openBlock","_Fragment","_renderList","option","_withModifiers","$event","_toDisplayString","_hoisted_2"],"mappings":";;;mEAMEA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMC,IAAQC,GAORC,IAAOC,GAIPC,IAAiBC,EAAS,MAAML,EAAM,QAAQ,WAAW,CAAC,GAE1DM,IAAgBD,EAAS,MAAML,EAAM,mBAAmBI,EAAe,KAAK,GAE5EG,IAAeC,EAAIR,EAAM,QAAQ,KAAK,CAACS,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;AACjD,MAAIL,EAAc,SAASC,EAAa,OAAO,OAAOI,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGvBT,EAAK,SAASK,EAAa,KAAK;AAAA,IAClC;2BAIAK,EAqBM,OAAA;AAAA,MApBH,OAAKC,EAAA;AAAA;QAA2BC,EAAAA,OAAO;AAAA,QAAkC,EAAA,aAAAd,EAAM,UAAA;AAAA,WAAsBc,EAAAA,OAAO,MAAM,GAAGV,EAAA,MAAA;AAAA,QAA2BU,EAAAA,CAAAA,EAAAA,2BAA2BR,EAAA,MAAA;AAAA,MAAa;MAOxL,aAAS,gBAAkBS,EAAAA,OAAO,SAAS;AAAA,IAAA;OAE5CC,EAAA,EAAA,GAAAJ,EAUSK,GAAA,MAAAC,EATUlB,EAAM,UAAhBmB,YADTP,EAUS,UAAA;AAAA,QARN,QAAQZ,EAAM,SAAS,IAAImB,EAAO,EAAE;AAAA,QACpC,OAAKN,EAAA,CAAGC,EAAAA,OAAO,WAAWA,EAAAA,OAAO,MAAM,GAAGP,SAAc,OAAOY,EAAO,GAAA,CAAE,CAAA;AAAA,QACxE,aAAS,GAAKnB,EAAM,SAAS,WAAWO,EAAA,OAAc,OAAOY,EAAO,KAAE,WAAA,UAAA;AAAA,QACtE,UAAU;AAAA,QACV,UAAUnB,EAAM;AAAA,QAChB,SAAKoB,EAAA,CAAAC,MAAUX,EAAQS,CAAM,GAAA,CAAA,SAAA,CAAA;AAAA,MAAA,GAE3BG,EAAAH,EAAO,IAAI,GAAA,IAAAI,CAAA;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/components/ButtonGroup/ButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\">\n  /**\n   * @deprecated use RadioGroup instead with `variant=\"button\"`.\n   * RadioGroup uses pretty much the same API as the ButtonGroup,\n   * but every button is a radio element which makes more sense semantically.\n   */\n  export default {\n    name: 'll-button-group',\n  };\n</script>\n\n<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, ref } from 'vue';\n\n  export interface ButtonGroupOption {\n    id: string;\n    active?: boolean;\n    text: string;\n  }\n\n  export interface ButtonGroupProps {\n    /**\n     * A name for the group, useful when multiple ButtonGroups exist on the page\n     */\n    groupName?: string;\n\n    /**\n     * The list of buttons to render\n     */\n    options: ButtonGroupOption[];\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the active button can be deactivated\n     */\n    allowDeactivate?: boolean;\n  }\n\n  const props = withDefaults(defineProps<ButtonGroupProps>(), {\n    groupName: uniqueId(),\n    fullWidth: false,\n    disabled: false,\n    allowDeactivate: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'input', activeButton: ButtonGroupOption | null): void;\n  }>();\n\n  const isSingleButton = computed(() => props.options.length === 1);\n\n  const canDeactivate = computed(() => props.allowDeactivate || isSingleButton.value);\n\n  const activeButton = ref(props.options.find((o) => o.active) || null);\n\n  function onClick(clickedOption: ButtonGroupOption) {\n    if (canDeactivate.value && activeButton.value?.id === clickedOption.id) {\n      activeButton.value = null;\n    } else {\n      activeButton.value = clickedOption;\n    }\n\n    emit('input', activeButton.value);\n  }\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'tw-flex',\n      $style.buttonGroup,\n      { 'tw-w-full': props.fullWidth },\n      { [$style.single]: isSingleButton },\n      { [$style['can-deactivate']]: canDeactivate },\n    ]\"\n    :data-test=\"`button-group-${$props.groupName}`\"\n  >\n    <button\n      v-for=\"option in props.options\"\n      :key=\"`${props.groupName}-${option.id}`\"\n      :class=\"[$style.button, { [$style.active]: activeButton?.id === option.id }]\"\n      :data-test=\"`${props.groupName}-button-${activeButton?.id === option.id ? 'active' : 'inactive'}`\"\n      :tabindex=\"0\"\n      :disabled=\"props.disabled\"\n      @click.prevent=\"onClick(option)\"\n    >\n      {{ option.text }}\n    </button>\n  </div>\n</template>\n\n<style module>\n  /* full width buttons */\n  .buttonGroup:global(.w-full) > button {\n    flex: 1 1 50%;\n    max-width: 100%;\n  }\n\n  .button {\n    border: 1px solid var(--color-ice-500);\n    border-radius: 0;\n    font-weight: theme('fontWeight.semibold');\n    line-height: theme('lineHeight.body');\n    min-width: 100px;\n    padding: 7px 8px;\n  }\n\n  .single .button {\n    border: 1px solid var(--color-ice-700);\n    color: var(--color-ice-700);\n  }\n\n  .button:focus,\n  .button:hover {\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    z-index: 1;\n  }\n\n  .button.active {\n    background-color: var(--color-blue-100);\n    border: 1px solid var(--color-blue-500) !important;\n    color: var(--color-blue-500);\n    cursor: default;\n    z-index: 1;\n  }\n\n  .button.active + button {\n    border-left: 1px solid transparent;\n  }\n\n  .single .button.active,\n  .can-deactivate .button.active {\n    cursor: pointer;\n  }\n\n  .button[disabled] {\n    color: var(--color-ice-500);\n    cursor: default;\n    pointer-events: none;\n  }\n\n  .button:focus {\n    box-shadow: none;\n    outline: 0;\n  }\n\n  .button:not(:first-child) {\n    margin-left: -1px;\n  }\n\n  .button:not(:last-child) {\n    border-right: 1px solid transparent;\n  }\n\n  .button:first-child {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .button:last-child {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n  }\n</style>\n"],"names":["__default__","props","__props","emit","__emit","isSingleButton","computed","canDeactivate","activeButton","ref","o","onClick","clickedOption","_a"],"mappings":";;;mEAMEA,IAAe;AAAA,EACb,MAAM;AACR;;;;;;;;;;;AAwCA,UAAMC,IAAQC,GAORC,IAAOC,GAIPC,IAAiBC,EAAS,MAAML,EAAM,QAAQ,WAAW,CAAC,GAE1DM,IAAgBD,EAAS,MAAML,EAAM,mBAAmBI,EAAe,KAAK,GAE5EG,IAAeC,EAAIR,EAAM,QAAQ,KAAK,CAACS,MAAMA,EAAE,MAAM,KAAK,IAAI;AAEpE,aAASC,EAAQC,GAAkC;;AACjD,MAAIL,EAAc,WAASM,IAAAL,EAAa,UAAb,gBAAAK,EAAoB,QAAOD,EAAc,KAClEJ,EAAa,QAAQ,OAErBA,EAAa,QAAQI,GAGvBT,EAAK,SAASK,EAAa,KAAK;AAAA,IAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ButtonGroup.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare interface ButtonGroupOption {
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+export declare interface ButtonGroupOption {
     id: string;
     active?: boolean;
     text: string;
 }
 
-declare interface ButtonGroupProps {
+export declare interface ButtonGroupProps {
     /**
      * A name for the group, useful when multiple ButtonGroups exist on the page
      */
@@ -37,16 +60,26 @@ declare interface ButtonGroupProps {
  * RadioGroup uses pretty much the same API as the ButtonGroup,
  * but every button is a radio element which makes more sense semantically.
  */
-declare const _default: DefineComponent<ButtonGroupProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-input: (activeButton: ButtonGroupOption | null) => any;
-}, string, PublicProps, Readonly<ButtonGroupProps> & Readonly<{
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
+groupName: string;
+fullWidth: boolean;
+disabled: boolean;
+allowDeactivate: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+input: (activeButton: ButtonGroupOption | null) => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonGroupProps>, {
+groupName: string;
+fullWidth: boolean;
+disabled: boolean;
+allowDeactivate: boolean;
+}>>> & Readonly<{
 onInput?: ((activeButton: ButtonGroupOption | null) => any) | undefined;
 }>, {
 disabled: boolean;
 groupName: string;
 fullWidth: boolean;
 allowDeactivate: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 export { }

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["props","__props","slots","useSlots","_openBlock","_createElementBlock","_hoisted_1","_unref","_normalizeClass","_createElementVNode","_renderSlot","_ctx"],"mappings":";;;;;;;;;;AAWE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA;sBAIdC,EAAA,GAAAC,EAwBU,WAxBVC,GAwBU;AAAA,MAnBAC,EAAAL,CAAA,iBAAqBK,EAAAL,CAAA,EAAK,WAAA,UADlCG,EAcM,OAAA;AAAA;QAZJ,aAAU;AAAA,QACT,OAAKG,EAAA,CAAA,EAAA,kCAAsCR,EAAM,cAAA,GAC5C,+DAA+D,CAAA;AAAA,MAAA;QAErES,EAGM,OAAA,MAAA;AAAA,UADJC,EAA6BC,EAAA,QAAA,UAAA;AAAA,QAAA;QAE/BF,EAGM,OAAA,MAAA;AAAA,UADJC,EAA8BC,EAAA,QAAA,WAAA;AAAA,QAAA;;MAIlCF,EAGM,OAAA;AAAA,QAHA,+DAA6DF,EAAAL,CAAA,EAAK,QAAA,CAAA;AAAA,MAAA;QAEtEQ,EAAaC,EAAA,QAAA,SAAA;AAAA,MAAA;;;;"}
+{"version":3,"file":"Card.js","sources":["../src/components/Card/Card.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useSlots } from 'vue';\n\n  export interface CardProps {\n    /**\n     * Detach the actions from the top of the card, making them absolute-positioned.\n     * @default false\n     */\n    detachActions?: boolean;\n  }\n\n  const props = withDefaults(defineProps<CardProps>(), {\n    detachActions: false,\n  });\n\n  const slots = useSlots();\n</script>\n\n<template>\n  <article\n    class=\"stash-card tw-relative tw-inline-block tw-rounded tw-border tw-bg-white tw-shadow-md\"\n    data-test=\"stash-card\"\n  >\n    <div\n      v-if=\"slots['top-left'] || slots['top-right']\"\n      data-test=\"card-actions\"\n      :class=\"{ 'tw-absolute tw-top-0 tw-w-full': props.detachActions }\"\n      class=\"tw-flex tw-flex-wrap tw-items-start tw-justify-between tw-p-6\"\n    >\n      <div>\n        <!-- @slot Top left actions slot, for rendering content on the card top-left -->\n        <slot name=\"top-left\"></slot>\n      </div>\n      <div>\n        <!-- @slot Top right actions slot, for rendering content on the card top-right -->\n        <slot name=\"top-right\"></slot>\n      </div>\n    </div>\n\n    <div :class=\"{ 'tw-mb-6 tw-flex tw-h-full tw-flex-col tw-gap-y-6': slots['default'] }\">\n      <!-- @slot Default slot, for rendering card subcomponents -->\n      <slot></slot>\n    </div>\n  </article>\n</template>\n"],"names":["props","__props","slots","useSlots"],"mappings":";;;;;;;;;;AAWE,UAAMA,IAAQC,GAIRC,IAAQC,EAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Card.vue.d.ts

@@ -1,15 +1,38 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare interface CardProps {
+export declare interface CardProps {
     /**
      * Detach the actions from the top of the card, making them absolute-positioned.
      * @default false
@@ -17,11 +40,15 @@ declare interface CardProps {
     detachActions?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<CardProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CardProps> & Readonly<{}>, {
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
+detachActions: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CardProps>, {
+detachActions: boolean;
+}>>> & Readonly<{}>, {
 detachActions: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>, {
-    'top-left'?(_: {}): any;
-    'top-right'?(_: {}): any;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    "top-left"?(_: {}): any;
+    "top-right"?(_: {}): any;
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/CardContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardContent.js","sources":["../src/components/CardContent/CardContent.vue"],"sourcesContent":["<template>\n  <div class=\"stash-card-content tw-px-6\" data-test=\"stash-card-content\">\n    <!-- @slot Default slot, for rendering any card content -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx"],"mappings":";;;EACO,OAAM;AAAA,EAA6B,aAAU;;;AAAlD,SAAAA,EAAA,GAAAC,EAGM,OAHNC,GAGM;AAAA,IADJC,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}
+{"version":3,"file":"CardContent.js","sources":["../src/components/CardContent/CardContent.vue"],"sourcesContent":["<template>\n  <div class=\"stash-card-content tw-px-6\" data-test=\"stash-card-content\">\n    <!-- @slot Default slot, for rendering any card content -->\n    <slot></slot>\n  </div>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACOA,IAAM;AAAA,EAA6B,OAAA;AAAA;;AAAxC,SAAAC,EAAAC,GAAAC,GAAA;SAEEC,EAAa,GAAAC,EAAA,OAAAL,GAAA;AAAA;;;;"}

package/dist/CardContent.vue.d.ts

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

package/dist/CardFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardFooter.js","sources":["../src/components/CardFooter/CardFooter.vue"],"sourcesContent":["<template>\n  <footer class=\"stash-card-footer tw-px-6\" data-test=\"stash-card-footer\">\n    <!-- @slot Default slot, for rendering any card footer content -->\n    <slot></slot>\n  </footer>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx"],"mappings":";;;EACU,OAAM;AAAA,EAA4B,aAAU;;;AAApD,SAAAA,EAAA,GAAAC,EAGS,UAHTC,GAGS;AAAA,IADPC,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}
+{"version":3,"file":"CardFooter.js","sources":["../src/components/CardFooter/CardFooter.vue"],"sourcesContent":["<template>\n  <footer class=\"stash-card-footer tw-px-6\" data-test=\"stash-card-footer\">\n    <!-- @slot Default slot, for rendering any card footer content -->\n    <slot></slot>\n  </footer>\n</template>\n"],"names":["_hoisted_1","_sfc_render","_ctx","_cache","_openBlock","_createElementBlock"],"mappings":";;cACUA,IAAM;AAAA,EAA4B,OAAA;AAAA;;AAA1C,SAAAC,EAAAC,GAAAC,GAAA;SAEEC,EAAa,GAAAC,EAAA,UAAAL,GAAA;AAAA;;;;"}

package/dist/CardFooter.vue.d.ts

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

package/dist/CardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardHeader.js","sources":["../src/components/CardHeader/CardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  export interface CardHeaderProps {\n    /**\n     * Title to be displayed\n     */\n    title: string;\n    /**\n     * Subtitle to be displayed\n     */\n    subtitle?: string;\n    /**\n     * Additional text to be displayed\n     */\n    text?: string;\n  }\n\n  const props = defineProps<CardHeaderProps>();\n</script>\n\n<template>\n  <header class=\"stash-card-header tw-px-6 tw-font-medium tw-text-ice-900\" data-test=\"stash-card-header\">\n    <h4 class=\"tw-text-base\">\n      {{ props.title }}\n    </h4>\n    <p v-if=\"props.subtitle\" class=\"tw-mb-0 tw-mt-1.5\">\n      {{ props.subtitle }}\n    </p>\n    <span v-if=\"props.text\" class=\"tw-mt-1.5 tw-text-ice-700\">\n      {{ props.text }}\n    </span>\n  </header>\n</template>\n"],"names":["props","__props","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_toDisplayString","_hoisted_3","_hoisted_4"],"mappings":";;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC;sBAIdC,EAAA,GAAAC,EAUS,UAVTC,GAUS;AAAA,MATPC,EAEK,MAFLC,GAEKC,EADAP,EAAM,KAAK,GAAA,CAAA;AAAA,MAEPA,EAAM,YAAfE,EAAA,GAAAC,EAEI,KAFJK,GAEID,EADCP,EAAM,QAAQ,GAAA,CAAA;MAEPA,EAAM,QAAlBE,EAAA,GAAAC,EAEO,QAFPM,GAEOF,EADFP,EAAM,IAAI,GAAA,CAAA;;;;"}
+{"version":3,"file":"CardHeader.js","sources":["../src/components/CardHeader/CardHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  export interface CardHeaderProps {\n    /**\n     * Title to be displayed\n     */\n    title: string;\n    /**\n     * Subtitle to be displayed\n     */\n    subtitle?: string;\n    /**\n     * Additional text to be displayed\n     */\n    text?: string;\n  }\n\n  const props = defineProps<CardHeaderProps>();\n</script>\n\n<template>\n  <header class=\"stash-card-header tw-px-6 tw-font-medium tw-text-ice-900\" data-test=\"stash-card-header\">\n    <h4 class=\"tw-text-base\">\n      {{ props.title }}\n    </h4>\n    <p v-if=\"props.subtitle\" class=\"tw-mb-0 tw-mt-1.5\">\n      {{ props.subtitle }}\n    </p>\n    <span v-if=\"props.text\" class=\"tw-mt-1.5 tw-text-ice-700\">\n      {{ props.text }}\n    </span>\n  </header>\n</template>\n"],"names":["props","__props"],"mappings":";;;;;;;;;;;;;;;;;;AAgBE,UAAMA,IAAQC;;;;;;;;"}