@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/avatars/avatar-styles.js

@@ -0,0 +1,43 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/avatars/avatar-styles.ts
+var avatarStyles = tv({
+	slots: {
+		root: "relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle",
+		image: "w-full h-full object-cover",
+		fallback: "w-full h-full flex items-center justify-center",
+		initials: "uppercase leading-none"
+	},
+	variants: {
+		variant: {
+			circular: { root: "rounded-full" },
+			rounded: { root: "rounded-rui-control" },
+			square: { root: "rounded-none" }
+		},
+		color: {
+			default: { root: "bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700" },
+			primary: { root: "bg-rui-primary-fill text-rui-primary-foreground" },
+			secondary: { root: "bg-rui-secondary-fill text-rui-secondary-foreground" },
+			error: { root: "bg-rui-error-fill text-rui-error-foreground" },
+			warning: { root: "bg-rui-warning-fill text-rui-warning-foreground" },
+			info: { root: "bg-rui-info-fill text-rui-info-foreground" },
+			success: { root: "bg-rui-success-fill text-rui-success-foreground" }
+		},
+		size: {
+			"xs": { root: "text-[0.625rem]" },
+			"sm": { root: "text-[0.6875rem]" },
+			"md": { root: "text-sm" },
+			"lg": { root: "text-base" },
+			"xl": { root: "text-lg" },
+			"2xl": { root: "text-xl" }
+		}
+	},
+	defaultVariants: {
+		variant: "circular",
+		color: "default",
+		size: "md"
+	}
+});
+//#endregion
+export { avatarStyles };
+
+//# sourceMappingURL=avatar-styles.js.map

package/dist/components/avatars/avatar-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-styles.js","names":[],"sources":["../../../src/components/avatars/avatar-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n"],"mappings":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EACL,MAAM;EACN,OAAO;EACP,UAAU;EACV,UAAU;CACZ;CACA,UAAU;EACR,SAAS;GACP,UAAU,EAAE,MAAM,eAAe;GACjC,SAAS,EAAE,MAAM,sBAAsB;GACvC,QAAQ,EAAE,MAAM,eAAe;EACjC;EAEA,OAAO;GACL,SAAS,EAAE,MAAM,2DAA2D;GAC5E,SAAS,EAAE,MAAM,kDAAkD;GACnE,WAAW,EAAE,MAAM,sDAAsD;GACzE,OAAO,EAAE,MAAM,8CAA8C;GAC7D,SAAS,EAAE,MAAM,kDAAkD;GACnE,MAAM,EAAE,MAAM,4CAA4C;GAC1D,SAAS,EAAE,MAAM,kDAAkD;EACrE;EAEA,MAAM;GACJ,MAAM,EAAE,MAAM,kBAAkB;GAChC,MAAM,EAAE,MAAM,mBAAmB;GACjC,MAAM,EAAE,MAAM,UAAU;GACxB,MAAM,EAAE,MAAM,YAAY;GAC1B,MAAM,EAAE,MAAM,UAAU;GACxB,OAAO,EAAE,MAAM,UAAU;EAC3B;CACF;CACA,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,MAAM;CACR;AACF,CAAC"}

package/dist/components/buttons/button/RuiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n  /**\n   * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,\n   * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`\n   * or `append` icon. Ignored on an `icon` button.\n   */\n  collapseBelow?: ButtonCollapseBreakpoint;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n  collapseBelow = undefined,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n  collapseBelow: icon ? undefined : collapseBelow,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButton.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n  /**\n   * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,\n   * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`\n   * or `append` icon. Ignored on an `icon` button.\n   */\n  collapseBelow?: ButtonCollapseBreakpoint;\n}\n\n/**\n * What the rendered element takes through `$attrs`: a `<button>`, or an `<a>` when `tag` is `a`.\n */\ntype ButtonAttributes = ButtonHTMLAttributes & Pick<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'download'>;\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n  collapseBelow = undefined,\n} = defineProps<Props<T> & /* @vue-ignore */ Omit<ButtonAttributes, keyof Props<T>>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n  collapseBelow: icon ? undefined : collapseBelow,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </component>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button/RuiButton.vue.d.ts

@@ -1,3 +1,4 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../../consts/colors.js';
 import { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant } from './button-props.js';
 export interface Props<T = undefined> {
@@ -21,7 +22,7 @@ export interface Props<T = undefined> {
     collapseBelow?: ButtonCollapseBreakpoint;
 }
 declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & Omit<ButtonHTMLAttributes & Pick<AnchorHTMLAttributes, "target" | "href" | "rel" | "download">, keyof Props<T>>) & {
         "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;

package/dist/components/buttons/button/RuiButton.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","RuiProgress","_normalizeClass","_createCommentVNode","_renderSlot","_createElementBlock"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n  /**\n   * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,\n   * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`\n   * or `append` icon. Ignored on an `icon` button.\n   */\n  collapseBelow?: ButtonCollapseBreakpoint;\n}\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n  collapseBelow = undefined,\n} = defineProps<Props<T>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n  collapseBelow: icon ? undefined : collapseBelow,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <Component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </Component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkDA,MAAM,OAAO;EAIb,MAAM,QAAQC,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;GACjB,eAAe,QAAA,OAAO,KAAA,IAAY,QAAA;EACpC,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAAC,UAAA,GAAAC,YAqCYC,wBApCL,QAAA,GAAG,GADVC,WAqCY;IAnCT,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAEA,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIN,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAUM,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAcA,MAAA,eAAA;IACd,aAAWA,MAAA,YAAA,KAAY;IACvB,cAAYA,MAAA,aAAA;IACZ,eAAaA,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVN,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAGf,SAAAO,cASE;KARM,QAAA,WADRL,UAAA,GAAAC,YASEK,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAMA,MAAA,WAAA;;KAIA,CAAA,QAAA,WAAW,QAAA,OADpBK,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KAEM,MAAM,WADdT,UAAA,GAAAU,mBAMO,QAAA;;MAJJ,OAAKH,eAAEH,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAERK,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEVA,WAAsB,KAAA,QAAA,QAAA"}
+{"version":3,"file":"RuiButton.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","_withCtx","RuiProgress","_normalizeClass","_createCommentVNode","_renderSlot","_createElementBlock"],"sources":["../../../../src/components/buttons/button/RuiButton.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ButtonCollapseBreakpoint, type ButtonSize, ButtonVariant, getButtonSpinnerSize } from '@/components/buttons/button/button-props';\nimport { buttonStyles } from '@/components/buttons/button/button-styles';\nimport RuiProgress from '@/components/progress/RuiProgress.vue';\nimport { cn } from '@/utils/tv';\n\nexport interface Props<T = undefined> {\n  disabled?: boolean;\n  loading?: boolean;\n  color?: ContextColorsType;\n  rounded?: boolean;\n  variant?: ButtonVariant;\n  icon?: boolean;\n  active?: boolean;\n  size?: ButtonSize;\n  tag?: 'button' | 'a';\n  type?: 'button' | 'submit';\n  modelValue?: T;\n  hideFocusIndicator?: boolean;\n  /**\n   * Below this breakpoint the button shows only its icons: the label becomes screen-reader text,\n   * so it still names the button, and the button takes its icon-only padding. Give it a `prepend`\n   * or `append` icon. Ignored on an `icon` button.\n   */\n  collapseBelow?: ButtonCollapseBreakpoint;\n}\n\n/**\n * What the rendered element takes through `$attrs`: a `<button>`, or an `<a>` when `tag` is `a`.\n */\ntype ButtonAttributes = ButtonHTMLAttributes & Pick<AnchorHTMLAttributes, 'href' | 'target' | 'rel' | 'download'>;\n\ndefineOptions({\n  name: 'RuiButton',\n  inheritAttrs: false,\n});\n\nconst {\n  disabled = false,\n  loading = false,\n  color = undefined,\n  rounded = false,\n  variant = ButtonVariant.default,\n  icon = false,\n  active = false,\n  size = undefined,\n  tag = 'button',\n  type = 'button',\n  modelValue = undefined,\n  hideFocusIndicator = false,\n  collapseBelow = undefined,\n} = defineProps<Props<T> & /* @vue-ignore */ Omit<ButtonAttributes, keyof Props<T>>>();\n\nconst emit = defineEmits<{\n  'update:model-value': [value?: T];\n}>();\n\nconst slots = defineSlots<{\n  prepend?: () => any;\n  append?: () => any;\n  default?: () => any;\n}>();\n\n// a RuiButtonGroup anywhere above, unless an overlay's content sits in between\nconst group = inject(ButtonGroupKey, undefined);\n\nconst btnValue = computed<T | undefined>(() => modelValue);\n\nconst resolvedVariant = computed<ButtonVariant>(() => group?.variant() ?? variant);\n\nconst resolvedSize = computed<ButtonSize | undefined>(() => size ?? group?.size());\n\nconst resolvedDisabled = computed<boolean>(() => disabled || (group?.disabled() ?? false));\n\n// a grouped button is pressed when the group's model holds its value; it needs one to take part\nconst resolvedActive = computed<boolean>(() => active || (!!group && modelValue !== undefined && group.isActive(modelValue)));\n\nconst resolvedColor = computed<ContextColorsType | undefined>(() => group?.color(get(resolvedActive)) ?? color);\n\nconst spinnerSize = computed<number>(() => getButtonSpinnerSize(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof buttonStyles>>(() => buttonStyles({\n  variant: get(resolvedVariant),\n  color: get(resolvedColor) ?? 'grey',\n  size: get(resolvedSize),\n  rounded,\n  icon,\n  active: get(resolvedActive),\n  loading,\n  hideFocusIndicator,\n  collapseBelow: icon ? undefined : collapseBelow,\n}));\n\nfunction onClick(): void {\n  emit('update:model-value', get(btnValue));\n  if (group && modelValue !== undefined)\n    group.toggle(modelValue);\n}\n</script>\n\n<template>\n  <component\n    :is=\"tag\"\n    :class=\"ui.root({ class: cn([group?.itemClass(), $attrs.class]) })\"\n    :disabled=\"resolvedDisabled || loading\"\n    :type=\"tag === 'button' ? type : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-size=\"resolvedSize ?? 'md'\"\n    :data-color=\"resolvedColor\"\n    :data-active=\"resolvedActive || undefined\"\n    :aria-busy=\"loading || undefined\"\n    v-bind=\"{ ...$attrs, class: undefined }\"\n    @click=\"onClick()\"\n  >\n    <!-- the button's aria-busy announces the wait, so the spinner stays out of the accessibility tree -->\n    <RuiProgress\n      v-if=\"loading\"\n      circular\n      data-spinner\n      aria-hidden=\"true\"\n      :class=\"ui.spinner()\"\n      variant=\"indeterminate\"\n      thickness=\"2\"\n      :size=\"spinnerSize\"\n    />\n    <!-- while loading, the spinner stands in for the prepend icon; the label stays -->\n    <slot\n      v-if=\"!loading || icon\"\n      name=\"prepend\"\n    />\n    <span\n      v-if=\"slots.default\"\n      :class=\"ui.label()\"\n      data-id=\"btn-label\"\n    >\n      <slot />\n    </span>\n    <slot name=\"append\" />\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,OAAO;EAIb,MAAM,QAAQC,SAAA;EAOd,MAAM,QAAQ,OAAO,gBAAgB,KAAA,CAAS;EAE9C,MAAM,WAAW,eAA8B,QAAA,UAAU;EAEzD,MAAM,kBAAkB,eAA8B,OAAO,QAAQ,KAAK,QAAA,OAAO;EAEjF,MAAM,eAAe,eAAuC,QAAA,QAAQ,OAAO,KAAK,CAAC;EAEjF,MAAM,mBAAmB,eAAwB,QAAA,aAAa,OAAO,SAAS,KAAK,MAAM;EAGzF,MAAM,iBAAiB,eAAwB,QAAA,UAAW,CAAC,CAAC,SAAS,QAAA,eAAe,KAAA,KAAa,MAAM,SAAS,QAAA,UAAU,CAAE;EAE5H,MAAM,gBAAgB,eAA8C,OAAO,MAAM,IAAI,cAAc,CAAC,KAAK,QAAA,KAAK;EAE9G,MAAM,cAAc,eAAuB,qBAAqB,IAAI,YAAY,CAAC,CAAC;EAElF,MAAM,KAAK,eAAgD,aAAa;GACtE,SAAS,IAAI,eAAe;GAC5B,OAAO,IAAI,aAAa,KAAK;GAC7B,MAAM,IAAI,YAAY;GACtB,SAAM,QAAA;GACN,MAAG,QAAA;GACH,QAAQ,IAAI,cAAc;GAC1B,SAAM,QAAA;GACN,oBAAiB,QAAA;GACjB,eAAe,QAAA,OAAO,KAAA,IAAY,QAAA;EACpC,CAAC,CAAC;EAEF,SAAS,UAAgB;GACvB,KAAK,sBAAsB,IAAI,QAAQ,CAAC;GACxC,IAAI,SAAS,QAAA,eAAe,KAAA,GAC1B,MAAM,OAAO,QAAA,UAAU;EAC3B;;GAIE,OAAAC,UAAA,GAAAC,YAqCYC,wBApCL,QAAA,GAAG,GADVC,WAqCY;IAnCT,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAAA,CAAEA,MAAA,KAAA,CAAK,EAAE,UAAS,GAAIN,KAAAA,OAAO,KAAK,CAAA,EAAA,CAAA;IAC5D,UAAUM,MAAA,gBAAA,KAAoB,QAAA;IAC9B,MAAM,QAAA,QAAG,WAAgB,QAAA,OAAO,KAAA;IAChC,gBAAcA,MAAA,eAAA;IACd,aAAWA,MAAA,YAAA,KAAY;IACvB,cAAYA,MAAA,aAAA;IACZ,eAAaA,MAAA,cAAA,KAAkB,KAAA;IAC/B,aAAW,QAAA,WAAW,KAAA;GACVN,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,GAAA,EACpC,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAO,GAAA,CAAA,GAAA;IAGf,SAAAO,cASE;KARM,QAAA,WADRL,UAAA,GAAAC,YASEK,qBAAA;;MAPA,UAAA;MACA,gBAAA;MACA,eAAY;MACX,OAAKC,eAAEH,MAAA,EAAA,CAAE,CAAC,QAAO,CAAA;MAClB,SAAQ;MACR,WAAU;MACT,MAAMA,MAAA,WAAA;;KAIA,CAAA,QAAA,WAAW,QAAA,OADpBK,WAGE,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,KAAA,GAAA,CAAA,IAAA,mBAAA,IAAA,IAAA;KAEM,MAAM,WADdT,UAAA,GAAAU,mBAMO,QAAA;;MAJJ,OAAKH,eAAEH,MAAA,EAAA,CAAE,CAAC,MAAK,CAAA;MAChB,WAAQ;KAERK,GAAAA,CAAAA,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAEVA,WAAsB,KAAA,QAAA,QAAA"}

package/dist/components/buttons/button-group/RuiButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    /*\n     * `w-fit`: a flex column stretches its children, inline-flex or not, which drew an outlined\n     * group's frame across the whole row. A consumer's own width still wins through the class merge.\n     * Between filled buttons a separator only needs to part the fills, so it takes the light divider.\n     */\n    root: 'inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1',\n    button: 'border-0 inset-ring-0 focus:z-1',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: 'rounded-none!',\n      },\n      sm: {\n        root: 'between:border-0 outline-0 gap-2',\n        button: 'inset-ring',\n      },\n      md: {\n        root: 'between:border-0 outline-0 gap-4',\n        button: 'inset-ring',\n      },\n      lg: {\n        root: 'between:border-0 outline-0 gap-6',\n        button: 'inset-ring',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // the control edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-rui-outline between:border-rui-outline',\n      },\n      text: {},\n      // the segmented tabs' track and pill; the 32px options make a 36px control, a field's height\n      segmented: {\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800',\n        button: [\n          'h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2',\n          'data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700',\n        ].join(' '),\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    /*\n     * The outer corners go to the button that is, or sits inside, the group's first or last item, so a\n     * button wrapped in a tooltip or a menu activator rounds like a direct child.\n     */\n    { gap: 'none', vertical: false, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!' } },\n    { gap: 'none', vertical: true, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!' } },\n    /*\n     * In a joined group the focus outline's sides fall on the neighbours, and on a primary neighbour a\n     * primary outline vanishes. A surface ring fills the outline's offset, so the raised segment's\n     * ring is parted from its neighbours on every side.\n     */\n    { gap: 'none', variant: ['default', 'outlined', 'text'], class: { button: 'focus-visible:ring-2 focus-visible:ring-rui-surface' } },\n    // each segment is its own rounded pill inside the track, not a slice of one joined bar\n    { variant: 'segmented', class: { button: 'rounded-rui-control!' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-primary/50' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-secondary/50' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'between:border-rui-error/50' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'between:border-rui-warning/50' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'between:border-rui-info/50' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'between:border-rui-success/50' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/50' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/50' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/50' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: T) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<T>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButtonGroup.js","names":["_sfc_main"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { HTMLAttributes, Ref } from 'vue';\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ModelValueEmits, usePropModel } from '@/composables/prop-model';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n  modelValue: modelValueProp,\n} = defineProps<Props & {\n  /**\n   * The pressed button's value, or the pressed values in an array for a multiple select. `T` is the\n   * bound value's type, so a `Ref<number[]>` takes the update as is. A single select that is not\n   * `required` sets it to `undefined` when its button is pressed again: bind a type that allows it.\n   */\n  modelValue?: T;\n} & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineEmits<ModelValueEmits<T>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n/*\n * A prop and an event rather than `defineModel`, so the update is typed without `undefined` in the\n * modes that never send it. The buttons' values are their own generic, so the group handles the\n * model as values of unknown type.\n */\nconst modelValue: Ref<unknown> = usePropModel('modelValue', () => modelValueProp);\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: unknown, selected: unknown): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: unknown): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: unknown) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<unknown>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/buttons/button-group/RuiButtonGroup.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ButtonSize } from '../button/button-props.js';
 import type { ContextColorsType } from '../../../consts/colors.js';
 export interface Props {
@@ -16,9 +17,14 @@ export interface Props {
 }
 declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props & {
-        modelValue?: T | T[];
-    }) & {
-        "onUpdate:modelValue"?: ((value: T | T[] | undefined) => any) | undefined;
+        /**
+         * The pressed button's value, or the pressed values in an array for a multiple select. `T` is the
+         * bound value's type, so a `Ref<number[]>` takes the update as is. A single select that is not
+         * `required` sets it to `undefined` when its button is pressed again: bind a type that allows it.
+         */
+        modelValue?: T;
+    } & Omit<HTMLAttributes, keyof Props>) & {
+        "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -27,7 +33,7 @@ declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typ
     slots: {
         default?: () => any;
     };
-    emit: (event: "update:modelValue", value: T | T[] | undefined) => void;
+    emit: (evt: "update:modelValue", value: T) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,15 @@
 import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../../utils/tv.js";
+import { cn } from "../../../utils/tv.js";
+import { usePropModel } from "../../../composables/prop-model.js";
 import { ButtonGroupKey } from "./button-group-context.js";
-import { computed, createElementBlock, defineComponent, mergeModels, mergeProps, openBlock, provide, renderSlot, unref, useModel } from "vue";
+import { buttonGroupStyles } from "./button-group-styles.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, provide, renderSlot, unref } from "vue";
 //#region src/components/buttons/button-group/RuiButtonGroup.vue?vue&type=script&setup=true&lang.ts
 var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiButtonGroup",
 	inheritAttrs: false,
 	__name: "RuiButtonGroup",
-	props: /*@__PURE__*/ mergeModels({
+	props: {
 		vertical: {
 			type: Boolean,
 			default: false
@@ -24,151 +26,12 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		disabled: {
 			type: Boolean,
 			default: false
-		}
-	}, {
-		"modelValue": {},
-		"modelModifiers": {}
-	}),
+		},
+		modelValue: {}
+	},
 	emits: ["update:modelValue"],
 	setup(__props) {
-		const modelValue = useModel(__props, "modelValue");
-		const buttonGroupStyles = tv({
-			slots: {
-				root: "inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1",
-				button: "border-0 inset-ring-0 focus:z-1"
-			},
-			variants: {
-				vertical: {
-					true: {
-						root: "flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full",
-						button: "w-full"
-					},
-					false: {}
-				},
-				gap: {
-					none: { button: "rounded-none!" },
-					sm: {
-						root: "between:border-0 outline-0 gap-2",
-						button: "inset-ring"
-					},
-					md: {
-						root: "between:border-0 outline-0 gap-4",
-						button: "inset-ring"
-					},
-					lg: {
-						root: "between:border-0 outline-0 gap-6",
-						button: "inset-ring"
-					}
-				},
-				variant: {
-					default: {},
-					outlined: { root: "outline-rui-outline between:border-rui-outline" },
-					text: {},
-					segmented: {
-						root: "rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800",
-						button: ["h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2", "data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700"].join(" ")
-					}
-				},
-				color: {
-					primary: {},
-					secondary: {},
-					error: {},
-					warning: {},
-					info: {},
-					success: {}
-				}
-			},
-			compoundVariants: [
-				{
-					gap: "none",
-					vertical: false,
-					class: { button: "[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!" }
-				},
-				{
-					gap: "none",
-					vertical: true,
-					class: { button: "[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!" }
-				},
-				{
-					gap: "none",
-					variant: [
-						"default",
-						"outlined",
-						"text"
-					],
-					class: { button: "focus-visible:ring-2 focus-visible:ring-rui-surface" }
-				},
-				{
-					variant: "segmented",
-					class: { button: "rounded-rui-control!" }
-				},
-				{
-					color: "primary",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-primary/50" }
-				},
-				{
-					color: "secondary",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-secondary/50" }
-				},
-				{
-					color: "error",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-error/50" }
-				},
-				{
-					color: "warning",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-warning/50" }
-				},
-				{
-					color: "info",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-info/50" }
-				},
-				{
-					color: "success",
-					variant: ["outlined", "text"],
-					class: { root: "between:border-rui-success/50" }
-				},
-				{
-					color: "primary",
-					variant: "outlined",
-					class: { root: "outline-rui-primary/50" }
-				},
-				{
-					color: "secondary",
-					variant: "outlined",
-					class: { root: "outline-rui-secondary/50" }
-				},
-				{
-					color: "error",
-					variant: "outlined",
-					class: { root: "outline-rui-error/50" }
-				},
-				{
-					color: "warning",
-					variant: "outlined",
-					class: { root: "outline-rui-warning/50" }
-				},
-				{
-					color: "info",
-					variant: "outlined",
-					class: { root: "outline-rui-info/50" }
-				},
-				{
-					color: "success",
-					variant: "outlined",
-					class: { root: "outline-rui-success/50" }
-				}
-			],
-			defaultVariants: {
-				vertical: false,
-				gap: "none",
-				variant: "default"
-			}
-		});
+		const modelValue = usePropModel("modelValue", () => __props.modelValue);
 		const ui = computed(() => buttonGroupStyles({
 			vertical: __props.vertical,
 			gap: __props.gap ?? "none",

package/dist/components/buttons/button-group/RuiButtonGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useModel","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    /*\n     * `w-fit`: a flex column stretches its children, inline-flex or not, which drew an outlined\n     * group's frame across the whole row. A consumer's own width still wins through the class merge.\n     * Between filled buttons a separator only needs to part the fills, so it takes the light divider.\n     */\n    root: 'inline-flex w-fit max-w-full rounded-rui-control between:border-l between:border-r-0 between:border-rui-divider outline-solid outline-1 outline-transparent -outline-offset-1',\n    button: 'border-0 inset-ring-0 focus:z-1',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start between:border-l-0 between:border-t between:border-b-0 *:w-full',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: 'rounded-none!',\n      },\n      sm: {\n        root: 'between:border-0 outline-0 gap-2',\n        button: 'inset-ring',\n      },\n      md: {\n        root: 'between:border-0 outline-0 gap-4',\n        button: 'inset-ring',\n      },\n      lg: {\n        root: 'between:border-0 outline-0 gap-6',\n        button: 'inset-ring',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // the control edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-rui-outline between:border-rui-outline',\n      },\n      text: {},\n      // the segmented tabs' track and pill; the 32px options make a 36px control, a field's height\n      segmented: {\n        root: 'rounded-rui-panel bg-rui-neutral-200 p-0.5 gap-0.5 outline-0 between:border-0 dark:bg-rui-neutral-800',\n        button: [\n          'h-8 px-3 text-rui-text-secondary transition-colors hover:text-rui-text focus-visible:-outline-offset-2',\n          'data-[active]:bg-rui-surface data-[active]:text-rui-text data-[active]:shadow-rui-control dark:data-[active]:bg-rui-neutral-700',\n        ].join(' '),\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    /*\n     * The outer corners go to the button that is, or sits inside, the group's first or last item, so a\n     * button wrapped in a tooltip or a menu activator rounds like a direct child.\n     */\n    { gap: 'none', vertical: false, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-l-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-r-rui-control!' } },\n    { gap: 'none', vertical: true, class: { button: '[&:is([data-button-group]>:first-child,[data-button-group]>:first-child_*)]:rounded-t-rui-control! [&:is([data-button-group]>:last-child,[data-button-group]>:last-child_*)]:rounded-b-rui-control!' } },\n    /*\n     * In a joined group the focus outline's sides fall on the neighbours, and on a primary neighbour a\n     * primary outline vanishes. A surface ring fills the outline's offset, so the raised segment's\n     * ring is parted from its neighbours on every side.\n     */\n    { gap: 'none', variant: ['default', 'outlined', 'text'], class: { button: 'focus-visible:ring-2 focus-visible:ring-rui-surface' } },\n    // each segment is its own rounded pill inside the track, not a slice of one joined bar\n    { variant: 'segmented', class: { button: 'rounded-rui-control!' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-primary/50' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'between:border-rui-secondary/50' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'between:border-rui-error/50' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'between:border-rui-warning/50' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'between:border-rui-info/50' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'between:border-rui-success/50' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/50' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/50' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/50' } },\n  ],\n  defaultVariants: {\n    vertical: false,\n    gap: 'none',\n    variant: 'default',\n  },\n});\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: T) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<T>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_renderSlot"],"sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { HTMLAttributes, Ref } from 'vue';\nimport type { ButtonSize } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { type ButtonGroupContext, ButtonGroupKey } from '@/components/buttons/button-group/button-group-context';\nimport { type ModelValueEmits, usePropModel } from '@/composables/prop-model';\nimport { cn } from '@/utils/tv';\nimport { buttonGroupStyles } from './button-group-styles';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  /**\n   * `segmented` draws the options as `RuiTabs variant=\"segmented\"` does: a neutral track whose active\n   * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.\n   */\n  variant?: 'default' | 'outlined' | 'text' | 'segmented';\n  size?: ButtonSize;\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n  modelValue: modelValueProp,\n} = defineProps<Props & {\n  /**\n   * The pressed button's value, or the pressed values in an array for a multiple select. `T` is the\n   * bound value's type, so a `Ref<number[]>` takes the update as is. A single select that is not\n   * `required` sets it to `undefined` when its button is pressed again: bind a type that allows it.\n   */\n  modelValue?: T;\n} & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\ndefineEmits<ModelValueEmits<T>>();\n\ndefineSlots<{\n  default?: () => any;\n}>();\n\n/*\n * A prop and an event rather than `defineModel`, so the update is typed without `undefined` in the\n * modes that never send it. The buttons' values are their own generic, so the group handles the\n * model as values of unknown type.\n */\nconst modelValue: Ref<unknown> = usePropModel('modelValue', () => modelValueProp);\n\nconst ui = computed<ReturnType<typeof buttonGroupStyles>>(() => buttonGroupStyles({\n  vertical,\n  gap: gap ?? 'none',\n  variant,\n  color,\n}));\n\n/**\n * The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The\n * segmented variant is neutral, like the segmented tabs, so its buttons take none.\n *\n * @param active - whether the button is the pressed one\n * @returns the color to set, or undefined to leave the button grey\n */\nfunction buttonColor(active: boolean): ContextColorsType | undefined {\n  if (variant === 'segmented')\n    return undefined;\n  return active && activeColor ? activeColor : color;\n}\n\nfunction isActive(id: unknown, selected: unknown): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: unknown): void {\n  const selected = get(modelValue);\n\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (required && selected.length === 1)\n        return;\n\n      set(modelValue, selected.filter((_, i) => i !== index));\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (required) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, isActive(id, selected) ? undefined : id);\n  }\n}\n\n// a button that sets its own size keeps it; the rest take the group's\nprovide(ButtonGroupKey, {\n  variant: () => variant === 'segmented' ? 'text' : variant,\n  size: () => size,\n  disabled: () => disabled,\n  color: buttonColor,\n  itemClass: () => get(ui).button(),\n  isActive: (value: unknown) => isActive(value, get(modelValue)),\n  toggle: onClick,\n} satisfies ButtonGroupContext<unknown>);\n</script>\n\n<template>\n  <div\n    :class=\"ui.root({ class: cn($attrs.class) })\"\n    data-button-group\n    v-bind=\"{ ...$attrs, class: undefined }\"\n  >\n    <slot />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DA,MAAM,aAA2B,aAAa,oBAAoB,QAAA,UAAc;EAEhF,MAAM,KAAK,eAAqD,kBAAkB;GAChF,UAAO,QAAA;GACP,KAAK,QAAA,OAAO;GACZ,SAAM,QAAA;GACN,OAAI,QAAA;EACN,CAAC,CAAC;;;;;;;;EASF,SAAS,YAAY,QAAgD;GACnE,IAAI,QAAA,YAAY,aACd,OAAO,KAAA;GACT,OAAO,UAAU,QAAA,cAAc,QAAA,cAAc,QAAA;EAC/C;EAEA,SAAS,SAAS,IAAa,UAA4B;GACzD,IAAI,MAAM,QAAQ,QAAQ,GACxB,OAAO,SAAS,SAAS,EAAE;GAE7B,OAAO,aAAa;EACtB;EAEA,SAAS,QAAQ,IAAmB;GAClC,MAAM,WAAW,IAAI,UAAU;GAE/B,IAAI,MAAM,QAAQ,QAAQ,GAAG;IAC3B,MAAM,QAAQ,SAAS,QAAQ,EAAE;IACjC,IAAI,SAAS,GAAG;KACd,IAAI,QAAA,YAAY,SAAS,WAAW,GAClC;KAEF,IAAI,YAAY,SAAS,QAAQ,GAAG,MAAM,MAAM,KAAK,CAAC;IACxD,OAEE,IAAI,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;GAErC,OACK,IAAI,QAAA,UACP,IAAI,YAAY,EAAE;QAGlB,IAAI,YAAY,SAAS,IAAI,QAAQ,IAAI,KAAA,IAAY,EAAE;EAE3D;EAGA,QAAQ,gBAAgB;GACtB,eAAe,QAAA,YAAY,cAAc,SAAS,QAAA;GAClD,YAAY,QAAA;GACZ,gBAAgB,QAAA;GAChB,OAAO;GACP,iBAAiB,IAAI,EAAE,CAAC,CAAC,OAAO;GAChC,WAAW,UAAmB,SAAS,OAAO,IAAI,UAAU,CAAC;GAC7D,QAAQ;EACV,CAAuC;;GAIrC,OAAAC,UAAA,GAAAC,mBAMM,OANNC,WAMM;IALH,OAAOC,MAAA,EAAA,CAAE,CAAC,KAAI,EAAA,OAAUA,MAAA,EAAA,CAAE,CAACJ,KAAAA,OAAO,KAAK,EAAA,CAAA;IACxC,qBAAA;GACaA,GAAAA;IAAAA,GAAAA,KAAAA;IAAM,OAAS,KAAA;GAAS,CAAA,GAAA,CAErCK,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,EAAA"}

package/dist/components/buttons/button-group/button-group-styles.d.ts

@@ -0,0 +1,142 @@
+export declare const buttonGroupStyles: import("tailwind-variants").TVReturnType<{
+    vertical: {
+        true: {
+            root: string;
+            button: string;
+        };
+        false: {};
+    };
+    gap: {
+        none: {
+            button: string;
+        };
+        sm: {
+            root: string;
+            button: string;
+        };
+        md: {
+            root: string;
+            button: string;
+        };
+        lg: {
+            root: string;
+            button: string;
+        };
+    };
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {};
+        segmented: {
+            root: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    button: string;
+}, undefined, {
+    vertical: {
+        true: {
+            root: string;
+            button: string;
+        };
+        false: {};
+    };
+    gap: {
+        none: {
+            button: string;
+        };
+        sm: {
+            root: string;
+            button: string;
+        };
+        md: {
+            root: string;
+            button: string;
+        };
+        lg: {
+            root: string;
+            button: string;
+        };
+    };
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {};
+        segmented: {
+            root: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    button: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    vertical: {
+        true: {
+            root: string;
+            button: string;
+        };
+        false: {};
+    };
+    gap: {
+        none: {
+            button: string;
+        };
+        sm: {
+            root: string;
+            button: string;
+        };
+        md: {
+            root: string;
+            button: string;
+        };
+        lg: {
+            root: string;
+            button: string;
+        };
+    };
+    variant: {
+        default: {};
+        outlined: {
+            root: string;
+        };
+        text: {};
+        segmented: {
+            root: string;
+            button: string;
+        };
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        error: {};
+        warning: {};
+        info: {};
+        success: {};
+    };
+}, {
+    root: string;
+    button: string;
+}>>;