@rotki/ui-library 2.27.0 → 3.0.0-beta.2

package/dist/components/buttons/button/button-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-1.5         + 1.25rem  icon = 2rem    (32px)   63%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium outline outline-1 outline-transparent outline-offset-[-1px]',\n      'flex items-center justify-center gap-x-2',\n      'px-4 py-1.5 rounded transition-all',\n      '[--rui-icon-size:1.125rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:!ring-2',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2' },\n      // The label's 18px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-none w-full justify-start text-left', label: 'w-full leading-[1.125rem]' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:1rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-grey-200 hover:bg-rui-grey-100 active:bg-rui-grey-50 text-rui-text ring-rui-grey-400 dark:bg-rui-grey-300 dark:text-rui-light-text dark:ring-rui-grey-600' },\n      primary: { root: 'bg-rui-primary hover:bg-rui-primary-darker active:bg-rui-primary-darker/90 text-rui-dark-text ring-rui-primary/40 dark:text-rui-text dark:ring-rui-primary/60' },\n      secondary: { root: 'bg-rui-secondary hover:bg-rui-secondary-darker active:bg-rui-secondary-darker/90 text-rui-dark-text ring-rui-secondary/40 dark:text-rui-text dark:ring-rui-secondary/60' },\n      error: { root: 'bg-rui-error hover:bg-rui-error-darker active:bg-rui-error-darker/90 text-rui-dark-text ring-rui-error/40 dark:text-rui-text dark:ring-rui-error/60' },\n      warning: { root: 'bg-rui-warning hover:bg-rui-warning-darker active:bg-rui-warning-darker/90 text-rui-dark-text ring-rui-warning/40 dark:text-rui-text dark:ring-rui-warning/60' },\n      info: { root: 'bg-rui-info hover:bg-rui-info-darker active:bg-rui-info-darker/90 text-rui-dark-text ring-rui-info/40 dark:text-rui-text dark:ring-rui-info/60' },\n      success: { root: 'bg-rui-success hover:bg-rui-success-darker active:bg-rui-success-darker/90 text-rui-dark-text ring-rui-success/40 dark:text-rui-text dark:ring-rui-success/60' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      // Only the round shape; the `icon + size` compounds below carry padding and icon sizing\n      true: { root: 'rounded-full' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress space-x-0 [&>*:not([data-spinner])]:opacity-0 [&>*:not([data-spinner])]:invisible' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!ring-0' },\n    },\n  },\n  compoundVariants: [\n    // Disabled appearance: the Material disabled palette, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-black/[.12] dark:disabled:!bg-white/[.12] disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:outline-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-grey-50' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-black/[.04] active:bg-black/10 dark:bg-transparent dark:active:bg-white/10 dark:hover:bg-white/[.04] dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-black/10 dark:bg-white/30' } },\n    // Material's 23% outline: at full strength a neutral edge reads as an error state next to the 50% context colours\n    { color: 'grey', variant: 'outlined', class: { root: 'outline-black/[0.23] dark:outline-white/[0.23]' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // Context colors: `dark:text-rui-<color>` beats the base variant's `dark:text-rui-text`, which is meant for filled buttons\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary-lighter/[.04] active:bg-rui-primary-lighter/10 text-rui-primary dark:text-rui-primary' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary-lighter/[.04] active:bg-rui-secondary-lighter/10 text-rui-secondary dark:text-rui-secondary' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error-lighter/[.04] active:bg-rui-error-lighter/10 text-rui-error dark:text-rui-error' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning-lighter/[.04] active:bg-rui-warning-lighter/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info-lighter/[.04] active:bg-rui-info-lighter/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success-lighter/[.04] active:bg-rui-success-lighter/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // === Context colors — active outlined/text ===\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary-lighter/30' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary-lighter/30' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error-lighter/30' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning-lighter/30' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info-lighter/30' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success-lighter/30' } },\n\n    // === Context colors — outlined border ===\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-1' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-1.5 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // Dark mode default variant text override for warning/success/info\n    { slots: ['root'], color: ['warning', 'success', 'info'], variant: 'default', class: 'dark:text-rui-light-text' },\n    // Dark mode active outlined/text override for primary/secondary\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary-darker/60 dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary-darker/60 dark:text-rui-secondary-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"button-styles.js","names":[],"sources":["../../../../src/components/buttons/button/button-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The button's classes.\n *\n * Three decisions the class lists cannot state themselves:\n *\n * `position: relative` is not in the base root: it is only a positioning\n * context for the loading spinner, so the `loading` variant applies it.\n * Basing it here would collide with consumers pinning the button with\n * `fixed`/`absolute`, since cascade order picks the later utility, usually\n * `relative`, and turns their `right-*`/`bottom-*` into relative offsets,\n * which misplaces FABs.\n *\n * Icon sizing flows through the `--rui-icon-size` custom property, seeded at\n * the md value in the base root and redefined per size variant with `!` so a\n * variant beats the baseline on the same element regardless of source order.\n * RuiIcon's own `size` prop stamps an inline style on the svg, which beats the\n * inherited value, so a consumer always wins. See rotki/ui-library#512.\n *\n * `disabled` on the element covers two states: actually disabled, and loading,\n * since RuiButton sets `disabled = disabled || loading`. Only the cursor is\n * shared between them; the grey disabled palette lives in the `loading: false`\n * compounds, so a loading button keeps its variant color behind the spinner.\n *\n * An icon-only button matches the height of the text button of the same size,\n * with a 60-70% glyph ratio, which is a larger glyph than the same size gives\n * a prepend/append icon so it does not look lost in the square. xs pads by an\n * arbitrary 0.1875rem because no Tailwind token holds the ratio at a 14px\n * glyph:\n *\n * ```\n * xs            p-[0.1875rem] + 0.875rem icon = 1.25rem (20px)   70%\n * sm            p-1           + 1.25rem  icon = 1.75rem (28px)   71%\n * md (default)  p-2           + 1.25rem  icon = 2.25rem (36px)   56%\n * lg            p-1.5         + 1.5rem   icon = 2.25rem (36px)   67%\n * xl            p-2           + 1.5rem   icon = 2.5rem  (40px)   60%\n * 2xl           p-2           + 1.75rem  icon = 2.75rem (44px)   64%\n * ```\n */\nexport const buttonStyles = tv({\n  slots: {\n    root: [\n      'text-sm leading-5 font-medium inset-ring inset-ring-transparent',\n      'flex items-center justify-center gap-x-2',\n      // md is 36px, the height of a text field or select, so a button lines up with them in a row\n      'px-4 py-2 rounded-rui-control transition-colors duration-150',\n      '[--rui-icon-size:1rem]',\n      'disabled:cursor-not-allowed',\n      'focus-visible:focus-ring',\n    ].join(' '),\n    label: 'inline-block text-nowrap',\n    // inline in the prepend icon's place; an icon-only button centers it over its hidden glyph instead\n    spinner: 'shrink-0',\n  },\n  variants: {\n    variant: {\n      default: {},\n      outlined: {},\n      text: { root: 'px-2' },\n      fab: { root: 'rounded-full py-2 shadow-rui-control disabled:shadow-none' },\n      // The label's 16px line-box matches the md icon box, so the two share an optical center (rotki/ui-library#515)\n      list: { root: 'p-3 px-3 rounded-rui-sm w-full justify-start text-left', label: 'w-full leading-4' },\n    },\n    size: {\n      'xs': { root: 'px-2 py-[0.125rem] text-[.75rem] leading-4 ![--rui-icon-size:0.75rem]' },\n      'sm': { root: 'px-2.5 py-1 text-[.8125rem] leading-5 ![--rui-icon-size:0.875rem]' },\n      'lg': { root: 'px-6 py-2 text-[1rem] leading-5 ![--rui-icon-size:1.25rem]' },\n      // 40px, to line up with RuiTextField / RuiMenuSelect in a toolbar; a 44px jumbo CTA is `2xl`\n      'xl': { root: 'px-6 py-2 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n      '2xl': { root: 'px-6 py-2.5 text-[1rem] leading-6 ![--rui-icon-size:1.375rem]' },\n    },\n    color: {\n      grey: { root: 'bg-rui-neutral-100 hover:bg-rui-neutral-200 active:bg-rui-neutral-300 text-rui-text dark:bg-rui-neutral-800 dark:hover:bg-rui-neutral-700 dark:active:bg-rui-neutral-600' },\n      // hover is a tint laid over the fill (see the filled compound below); pressed sinks to `darker`\n      primary: { root: 'bg-rui-primary active:bg-rui-primary-darker text-rui-dark-text dark:text-rui-text' },\n      secondary: { root: 'bg-rui-secondary active:bg-rui-secondary-darker text-rui-dark-text dark:text-rui-text' },\n      error: { root: 'bg-rui-error active:bg-rui-error-darker text-rui-dark-text dark:text-rui-text' },\n      warning: { root: 'bg-rui-warning active:bg-rui-warning-darker text-rui-dark-text dark:text-rui-text' },\n      info: { root: 'bg-rui-info active:bg-rui-info-darker text-rui-dark-text dark:text-rui-text' },\n      success: { root: 'bg-rui-success active:bg-rui-success-darker text-rui-dark-text dark:text-rui-text' },\n    },\n    rounded: {\n      true: { root: 'rounded-full' },\n    },\n    icon: {\n      /*\n       * Only the round shape; the `icon + size` compounds below carry padding and icon sizing. The\n       * label holds no text, so it lays out as a flex box: a line box would put a wrapped icon (a\n       * badge) on the text baseline and grow the button by the descender gap.\n       */\n      true: { root: 'rounded-full', label: 'inline-flex' },\n    },\n    active: {\n      true: {},\n      false: {},\n    },\n    loading: {\n      true: { root: 'relative !cursor-progress' },\n      false: {},\n    },\n    hideFocusIndicator: {\n      true: { root: 'focus-visible:!outline-hidden' },\n    },\n  },\n  compoundVariants: [\n    /*\n     * Filled hover: the pressed state layer (10% black in light, 12% white in dark) over the fill, a\n     * step of about a tenth rather than the jump to `darker`, which stays for the pressed state.\n     * `not-disabled:` keeps a disabled or loading button flat; an `<a>` is never `:disabled`.\n     */\n    { variant: ['default', 'fab'], color: ['primary', 'secondary', 'error', 'warning', 'info', 'success'], class: { root: 'not-disabled:hover:state-layer-pressed' } },\n    // An icon-only button has no label to keep, so its glyph goes transparent (still in the accessibility tree) under a centered spinner\n    { loading: true, icon: true, class: { root: '[&>*:not([data-spinner])]:opacity-0', spinner: 'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2' } },\n    // Disabled appearance: a flat neutral fill, skipped while loading so the variant color shows behind the spinner\n    { loading: false, class: { root: 'disabled:!bg-rui-neutral-100 dark:disabled:!bg-rui-neutral-800 disabled:!text-rui-text-disabled disabled:active:!text-rui-text-disabled' } },\n    { loading: false, variant: 'outlined', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent disabled:inset-ring-rui-text-disabled dark:disabled:inset-ring-rui-text-disabled' } },\n    { loading: false, variant: 'text', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n    { loading: false, variant: 'list', class: { root: 'disabled:!bg-transparent dark:disabled:!bg-transparent disabled:active:!bg-transparent' } },\n\n    // === Grey color variants ===\n    { color: 'grey', active: true, class: { root: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' } },\n    // the same hover and pressed tints as a highlighted menu option\n    { color: 'grey', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-hover active:bg-rui-pressed dark:bg-transparent dark:text-rui-text' } },\n    { color: 'grey', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-pressed dark:bg-rui-pressed' } },\n    // the shared control edge, 3:1 against the page like the 50% context colours beside it\n    { color: 'grey', variant: 'outlined', class: { root: 'inset-ring-rui-outline' } },\n    { color: 'grey', variant: 'text', class: { root: 'text-rui-text-secondary' } },\n\n    // `dark:text-rui-<color>` beats the filled buttons' `dark:text-rui-text`; primary, secondary and error use their lighter tone in dark for 4.5:1\n    { color: 'primary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-primary/6 active:bg-rui-primary/10 text-rui-primary dark:text-rui-primary-lighter' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-secondary/6 active:bg-rui-secondary/10 text-rui-secondary dark:text-rui-secondary-lighter' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-error/6 active:bg-rui-error/10 text-rui-error dark:text-rui-error-lighter' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-warning/6 active:bg-rui-warning/10 text-rui-warning dark:text-rui-warning' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-info/6 active:bg-rui-info/10 text-rui-info dark:text-rui-info' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], class: { root: 'bg-transparent hover:bg-rui-success/6 active:bg-rui-success/10 text-rui-success dark:text-rui-success' } },\n\n    // === Context colors — active default ===\n    { color: 'primary', active: true, class: { root: 'bg-rui-primary-darker' } },\n    { color: 'secondary', active: true, class: { root: 'bg-rui-secondary-darker' } },\n    { color: 'error', active: true, class: { root: 'bg-rui-error-darker' } },\n    { color: 'warning', active: true, class: { root: 'bg-rui-warning-darker' } },\n    { color: 'info', active: true, class: { root: 'bg-rui-info-darker' } },\n    { color: 'success', active: true, class: { root: 'bg-rui-success-darker' } },\n\n    // Active outlined/text: a quiet tint with the deeper tone as the label, which keeps 4.5:1 for every color\n    { color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-primary/[0.08] text-rui-primary-darker' } },\n    { color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-secondary/[0.08] text-rui-secondary-darker' } },\n    { color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-error/[0.08] text-rui-error-darker' } },\n    { color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-warning/[0.08] text-rui-warning-darker' } },\n    { color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-info/[0.08] text-rui-info-darker' } },\n    { color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: { root: 'bg-rui-success/[0.08] text-rui-success-darker' } },\n\n    // === Context colors: outlined border (dark draws primary and secondary solid; at 50% their deep fills sink into the page and look alike) ===\n    { color: 'primary', variant: 'outlined', class: { root: 'inset-ring-rui-primary/50 dark:inset-ring-rui-primary' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'inset-ring-rui-secondary/50 dark:inset-ring-rui-secondary' } },\n    { color: 'error', variant: 'outlined', class: { root: 'inset-ring-rui-error/50' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'inset-ring-rui-warning/50' } },\n    { color: 'info', variant: 'outlined', class: { root: 'inset-ring-rui-info/50' } },\n    { color: 'success', variant: 'outlined', class: { root: 'inset-ring-rui-success/50' } },\n\n    // === Size overrides per variant ===\n    { variant: 'text', size: 'xs', class: { root: 'px-1' } },\n    { variant: 'text', size: 'sm', class: { root: 'px-1.5' } },\n    { variant: 'text', size: 'lg', class: { root: 'px-2.5' } },\n    { variant: 'text', size: 'xl', class: { root: 'px-2.5' } },\n    { variant: 'text', size: '2xl', class: { root: 'px-2.5' } },\n    { variant: 'fab', size: 'xs', class: { root: 'py-1 px-1' } },\n    { variant: 'fab', size: 'sm', class: { root: 'py-1.5 px-2' } },\n    { variant: 'fab', size: 'lg', class: { root: 'py-3' } },\n    { variant: 'list', size: 'xs', class: { root: 'px-3 py-0.5' } },\n    // 32px: a dense select's option row, which `getOptionHeight` reserves in the virtual list\n    { variant: 'list', size: 'sm', class: { root: 'px-3 py-2' } },\n    // Icon-only sizing, per the padding and glyph table on buttonStyles above\n    { icon: true, class: { root: 'p-2 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'xs', class: { root: 'p-[0.1875rem] ![--rui-icon-size:0.875rem]' } },\n    { icon: true, size: 'sm', class: { root: 'p-1 ![--rui-icon-size:1.25rem]' } },\n    { icon: true, size: 'lg', class: { root: 'p-1.5 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: 'xl', class: { root: 'p-2 ![--rui-icon-size:1.5rem]' } },\n    { icon: true, size: '2xl', class: { root: 'p-2 ![--rui-icon-size:1.75rem]' } },\n    { variant: 'fab', icon: true, size: 'sm', class: { root: 'px-2 py-2' } },\n  ],\n  compoundSlots: [\n    // In dark a status color's `main` is a text tone, so a filled status button takes the deep `darker` fill\n    { slots: ['root'], color: 'error', variant: ['default', 'fab'], class: 'dark:bg-rui-error-darker dark:active:bg-rui-error-darker/75' },\n    { slots: ['root'], color: 'warning', variant: ['default', 'fab'], class: 'dark:bg-rui-warning-darker dark:active:bg-rui-warning-darker/75' },\n    { slots: ['root'], color: 'info', variant: ['default', 'fab'], class: 'dark:bg-rui-info-darker dark:active:bg-rui-info-darker/75' },\n    { slots: ['root'], color: 'success', variant: ['default', 'fab'], class: 'dark:bg-rui-success-darker dark:active:bg-rui-success-darker/75' },\n    // Dark mode active outlined/text: the same quiet tint, with the lighter tone as the label\n    { slots: ['root'], color: 'primary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-primary/[0.16] dark:text-rui-primary-lighter' },\n    { slots: ['root'], color: 'secondary', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-secondary/[0.16] dark:text-rui-secondary-lighter' },\n    { slots: ['root'], color: 'error', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-error/[0.16] dark:text-rui-error-lighter' },\n    { slots: ['root'], color: 'warning', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-warning/[0.16] dark:text-rui-warning-lighter' },\n    { slots: ['root'], color: 'info', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-info/[0.16] dark:text-rui-info-lighter' },\n    { slots: ['root'], color: 'success', variant: ['outlined', 'text', 'list'], active: true, class: 'dark:bg-rui-success/[0.16] dark:text-rui-success-lighter' },\n  ],\n  defaultVariants: {\n    variant: 'default',\n    color: 'grey',\n    active: false,\n  },\n});\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.js","names":[],"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 { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\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\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // Material's 23% neutral edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\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 * Applies the group's state to one of its buttons: which button is active,\n * the group's disabled flag and colour, and the group's size, that last one\n * only when the button did not set a size of its own, so a consumer can still\n * size a single button.\n *\n * @param child - the button's vnode, whose props are keyed in kebab-case\n * @param index - its place in the group, which stands in for a missing value\n * @param selectedValue - what the group's model currently holds\n * @returns the same vnode, with the group's props written onto it\n */\nfunction applyGroupProps(child: VNode, index: number, selectedValue: T | T[] | undefined): VNode {\n  const value = child.props?.['model-value'];\n  const active = isActive(value ?? index, selectedValue);\n  const resolvedColor = active && activeColor ? activeColor : color;\n  const childSize = child.props?.size;\n\n  child.props = {\n    ...child.props,\n    active,\n    ...(disabled && { disabled: true }),\n    ...(resolvedColor && { color: resolvedColor }),\n    ...(!childSize && size && { size }),\n  };\n\n  return child;\n}\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n\n  return flattenSlotContent(slotContent)\n    .map((child, index) => applyGroupProps(child, index, selectedValue));\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\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</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiButtonGroup.js","names":[],"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":""}

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

@@ -4,7 +4,11 @@ export interface Props {
     vertical?: boolean;
     color?: ContextColorsType;
     activeColor?: ContextColorsType;
-    variant?: 'default' | 'outlined' | 'text';
+    /**
+     * `segmented` draws the options as `RuiTabs variant="segmented"` does: a neutral track whose active
+     * option is a raised surface. It is neutral, so it ignores `color` and `activeColor`.
+     */
+    variant?: 'default' | 'outlined' | 'text' | 'segmented';
     size?: ButtonSize;
     gap?: 'sm' | 'md' | 'lg';
     required?: boolean;
@@ -20,7 +24,9 @@ declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typ
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
+    slots: {
+        default?: () => any;
+    };
     emit: (event: "update:modelValue", value: T | T[] | undefined) => 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,6 +1,7 @@
-import { tv } from "../../../utils/tv.js";
-import { Fragment, computed, createBlock, createElementBlock, defineComponent, isVNode, mergeModels, mergeProps, normalizeClass, openBlock, renderList, resolveDynamicComponent, unref, useModel, useSlots } from "vue";
-import { get, set } from "@vueuse/shared";
+import { get, set } from "../../../vendor/@vueuse/shared/dist/index.js";
+import { cn, tv } from "../../../utils/tv.js";
+import { ButtonGroupKey } from "./button-group-context.js";
+import { computed, createElementBlock, defineComponent, mergeModels, mergeProps, openBlock, provide, renderSlot, unref, useModel } 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",
@@ -31,39 +32,42 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const modelValue = useModel(__props, "modelValue");
-		const slots = useSlots();
 		const buttonGroupStyles = tv({
 			slots: {
-				root: "inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]",
-				button: "border-0 outline-0 focus:z-[1]"
+				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 divide-x-0 divide-y",
+						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" },
+					none: { button: "rounded-none!" },
 					sm: {
-						root: "divide-x-0 divide-y-0 outline-0 gap-2",
-						button: "outline-1"
+						root: "between:border-0 outline-0 gap-2",
+						button: "inset-ring"
 					},
 					md: {
-						root: "divide-x-0 divide-y-0 outline-0 gap-4",
-						button: "outline-1"
+						root: "between:border-0 outline-0 gap-4",
+						button: "inset-ring"
 					},
 					lg: {
-						root: "divide-x-0 divide-y-0 outline-0 gap-6",
-						button: "outline-1"
+						root: "between:border-0 outline-0 gap-6",
+						button: "inset-ring"
 					}
 				},
 				variant: {
 					default: {},
-					outlined: { root: "outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]" },
-					text: {}
+					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: {},
@@ -78,96 +82,85 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 				{
 					gap: "none",
 					vertical: false,
-					class: { button: "first:!rounded-l last:!rounded-r" }
+					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: "first:!rounded-t last:!rounded-b" }
-				},
-				{
-					color: "primary",
-					class: { root: "divide-rui-primary-darker" }
+					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!" }
 				},
 				{
-					color: "secondary",
-					class: { root: "divide-rui-secondary-darker" }
-				},
-				{
-					color: "error",
-					class: { root: "divide-rui-error-darker" }
-				},
-				{
-					color: "warning",
-					class: { root: "divide-rui-warning-darker" }
-				},
-				{
-					color: "info",
-					class: { root: "divide-rui-info-darker" }
+					gap: "none",
+					variant: [
+						"default",
+						"outlined",
+						"text"
+					],
+					class: { button: "focus-visible:ring-2 focus-visible:ring-rui-surface" }
 				},
 				{
-					color: "success",
-					class: { root: "divide-rui-success-darker" }
+					variant: "segmented",
+					class: { button: "rounded-rui-control!" }
 				},
 				{
 					color: "primary",
 					variant: ["outlined", "text"],
-					class: { root: "divide-rui-primary/[0.5]" }
+					class: { root: "between:border-rui-primary/50" }
 				},
 				{
 					color: "secondary",
 					variant: ["outlined", "text"],
-					class: { root: "divide-rui-secondary/[0.5]" }
+					class: { root: "between:border-rui-secondary/50" }
 				},
 				{
 					color: "error",
 					variant: ["outlined", "text"],
-					class: { root: "divide-rui-error/[0.5]" }
+					class: { root: "between:border-rui-error/50" }
 				},
 				{
 					color: "warning",
 					variant: ["outlined", "text"],
-					class: { root: "divide-rui-warning/[0.5]" }
+					class: { root: "between:border-rui-warning/50" }
 				},
 				{
 					color: "info",
 					variant: ["outlined", "text"],
-					class: { root: "divide-rui-info/[0.5]" }
+					class: { root: "between:border-rui-info/50" }
 				},
 				{
 					color: "success",
 					variant: ["outlined", "text"],
-					class: { root: "divide-rui-success/[0.5]" }
+					class: { root: "between:border-rui-success/50" }
 				},
 				{
 					color: "primary",
 					variant: "outlined",
-					class: { root: "outline-rui-primary/[0.5]" }
+					class: { root: "outline-rui-primary/50" }
 				},
 				{
 					color: "secondary",
 					variant: "outlined",
-					class: { root: "outline-rui-secondary/[0.5]" }
+					class: { root: "outline-rui-secondary/50" }
 				},
 				{
 					color: "error",
 					variant: "outlined",
-					class: { root: "outline-rui-error/[0.5]" }
+					class: { root: "outline-rui-error/50" }
 				},
 				{
 					color: "warning",
 					variant: "outlined",
-					class: { root: "outline-rui-warning/[0.5]" }
+					class: { root: "outline-rui-warning/50" }
 				},
 				{
 					color: "info",
 					variant: "outlined",
-					class: { root: "outline-rui-info/[0.5]" }
+					class: { root: "outline-rui-info/50" }
 				},
 				{
 					color: "success",
 					variant: "outlined",
-					class: { root: "outline-rui-success/[0.5]" }
+					class: { root: "outline-rui-success/50" }
 				}
 			],
 			defaultVariants: {
@@ -183,43 +176,15 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			color: __props.color
 		}));
 		/**
-		* Applies the group's state to one of its buttons: which button is active,
-		* the group's disabled flag and colour, and the group's size, that last one
-		* only when the button did not set a size of its own, so a consumer can still
-		* size a single button.
+		* The color a button takes: the pressed one's `activeColor` when set, otherwise the group's. The
+		* segmented variant is neutral, like the segmented tabs, so its buttons take none.
 		*
-		* @param child - the button's vnode, whose props are keyed in kebab-case
-		* @param index - its place in the group, which stands in for a missing value
-		* @param selectedValue - what the group's model currently holds
-		* @returns the same vnode, with the group's props written onto it
+		* @param active - whether the button is the pressed one
+		* @returns the color to set, or undefined to leave the button grey
 		*/
-		function applyGroupProps(child, index, selectedValue) {
-			const value = child.props?.["model-value"];
-			const active = isActive(value ?? index, selectedValue);
-			const resolvedColor = active && __props.activeColor ? __props.activeColor : __props.color;
-			const childSize = child.props?.size;
-			child.props = {
-				...child.props,
-				active,
-				...__props.disabled && { disabled: true },
-				...resolvedColor && { color: resolvedColor },
-				...!childSize && __props.size && { size: __props.size }
-			};
-			return child;
-		}
-		const children = computed(() => {
-			const selectedValue = get(modelValue);
-			return flattenSlotContent(slots.default?.() ?? []).map((child, index) => applyGroupProps(child, index, selectedValue));
-		});
-		/**
-		* Flattens slot content by unwrapping Fragments (created by v-for).
-		* Returns only actual VNode children.
-		*/
-		function flattenSlotContent(nodes) {
-			return nodes.flatMap((node) => {
-				if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0) return flattenSlotContent(node.children.filter(isVNode));
-				return [node];
-			});
+		function buttonColor(active) {
+			if (__props.variant === "segmented") return void 0;
+			return active && __props.activeColor ? __props.activeColor : __props.color;
 		}
 		function isActive(id, selected) {
 			if (Array.isArray(selected)) return selected.includes(id);
@@ -236,19 +201,23 @@ var RuiButtonGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			} else if (__props.required) set(modelValue, id);
 			else set(modelValue, isActive(id, selected) ? void 0 : id);
 		}
+		provide(ButtonGroupKey, {
+			variant: () => __props.variant === "segmented" ? "text" : __props.variant,
+			size: () => __props.size,
+			disabled: () => __props.disabled,
+			color: buttonColor,
+			itemClass: () => get(ui).button(),
+			isActive: (value) => isActive(value, get(modelValue)),
+			toggle: onClick
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ class: unref(ui).root() }, _ctx.$attrs), [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(children), (child, i) => {
-				return openBlock(), createBlock(resolveDynamicComponent(child), {
-					key: i,
-					class: normalizeClass(unref(ui).button()),
-					variant: __props.variant,
-					"onUpdate:modelValue": ($event) => onClick($event ?? i)
-				}, null, 8, [
-					"class",
-					"variant",
-					"onUpdate:modelValue"
-				]);
-			}), 128))], 16);
+			return openBlock(), createElementBlock("div", mergeProps({
+				class: unref(ui).root({ class: unref(cn)(_ctx.$attrs.class) }),
+				"data-button-group": ""
+			}, {
+				..._ctx.$attrs,
+				class: void 0
+			}), [renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}
 });

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"],"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 { Fragment, isVNode } from 'vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\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\nconst slots = useSlots();\n\nconst buttonGroupStyles = tv({\n  slots: {\n    root: 'inline-flex rounded divide-x divide-rui-grey-400 outline outline-1 outline-transparent outline-offset-[-1px]',\n    button: 'border-0 outline-0 focus:z-[1]',\n  },\n  variants: {\n    vertical: {\n      true: {\n        root: 'flex-col items-start divide-x-0 divide-y',\n        button: 'w-full',\n      },\n      false: {},\n    },\n    gap: {\n      none: {\n        button: '!rounded-none',\n      },\n      sm: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-2',\n        button: 'outline-1',\n      },\n      md: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-4',\n        button: 'outline-1',\n      },\n      lg: {\n        root: 'divide-x-0 divide-y-0 outline-0 gap-6',\n        button: 'outline-1',\n      },\n    },\n    variant: {\n      default: {},\n      outlined: {\n        // Material's 23% neutral edge, matching RuiButton's colourless outlined treatment\n        root: 'outline-black/[0.23] divide-black/[0.23] dark:outline-white/[0.23] dark:divide-white/[0.23]',\n      },\n      text: {},\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    // First/last child rounding when not separated (! needed to override RuiButton's CSS module border-radius)\n    { gap: 'none', vertical: false, class: { button: 'first:!rounded-l last:!rounded-r' } },\n    { gap: 'none', vertical: true, class: { button: 'first:!rounded-t last:!rounded-b' } },\n\n    // Color dividers (default variant)\n    { color: 'primary', class: { root: 'divide-rui-primary-darker' } },\n    { color: 'secondary', class: { root: 'divide-rui-secondary-darker' } },\n    { color: 'error', class: { root: 'divide-rui-error-darker' } },\n    { color: 'warning', class: { root: 'divide-rui-warning-darker' } },\n    { color: 'info', class: { root: 'divide-rui-info-darker' } },\n    { color: 'success', class: { root: 'divide-rui-success-darker' } },\n\n    // Color dividers for outlined/text (overrides darker dividers above)\n    { color: 'primary', variant: ['outlined', 'text'], class: { root: 'divide-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: ['outlined', 'text'], class: { root: 'divide-rui-secondary/[0.5]' } },\n    { color: 'error', variant: ['outlined', 'text'], class: { root: 'divide-rui-error/[0.5]' } },\n    { color: 'warning', variant: ['outlined', 'text'], class: { root: 'divide-rui-warning/[0.5]' } },\n    { color: 'info', variant: ['outlined', 'text'], class: { root: 'divide-rui-info/[0.5]' } },\n    { color: 'success', variant: ['outlined', 'text'], class: { root: 'divide-rui-success/[0.5]' } },\n\n    // Color outline for outlined variant\n    { color: 'primary', variant: 'outlined', class: { root: 'outline-rui-primary/[0.5]' } },\n    { color: 'secondary', variant: 'outlined', class: { root: 'outline-rui-secondary/[0.5]' } },\n    { color: 'error', variant: 'outlined', class: { root: 'outline-rui-error/[0.5]' } },\n    { color: 'warning', variant: 'outlined', class: { root: 'outline-rui-warning/[0.5]' } },\n    { color: 'info', variant: 'outlined', class: { root: 'outline-rui-info/[0.5]' } },\n    { color: 'success', variant: 'outlined', class: { root: 'outline-rui-success/[0.5]' } },\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 * Applies the group's state to one of its buttons: which button is active,\n * the group's disabled flag and colour, and the group's size, that last one\n * only when the button did not set a size of its own, so a consumer can still\n * size a single button.\n *\n * @param child - the button's vnode, whose props are keyed in kebab-case\n * @param index - its place in the group, which stands in for a missing value\n * @param selectedValue - what the group's model currently holds\n * @returns the same vnode, with the group's props written onto it\n */\nfunction applyGroupProps(child: VNode, index: number, selectedValue: T | T[] | undefined): VNode {\n  const value = child.props?.['model-value'];\n  const active = isActive(value ?? index, selectedValue);\n  const resolvedColor = active && activeColor ? activeColor : color;\n  const childSize = child.props?.size;\n\n  child.props = {\n    ...child.props,\n    active,\n    ...(disabled && { disabled: true }),\n    ...(resolvedColor && { color: resolvedColor }),\n    ...(!childSize && size && { size }),\n  };\n\n  return child;\n}\n\nconst children = computed<VNode[]>(() => {\n  const selectedValue: T | T[] | undefined = get(modelValue);\n  const slotContent = slots.default?.() ?? [];\n\n  return flattenSlotContent(slotContent)\n    .map((child, index) => applyGroupProps(child, index, selectedValue));\n});\n\n/**\n * Flattens slot content by unwrapping Fragments (created by v-for).\n * Returns only actual VNode children.\n */\nfunction flattenSlotContent(nodes: VNode[]): VNode[] {\n  return nodes.flatMap((node) => {\n    if (node.type === Fragment && Array.isArray(node.children) && node.children.length > 0)\n      return flattenSlotContent(node.children.filter(isVNode));\n\n    return [node];\n  });\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</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"ui.button()\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiButtonGroup.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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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"}

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

@@ -0,0 +1,28 @@
+import type { ButtonSize, ButtonVariant } from '../button/button-props.js';
+import type { ContextColorsType } from '../../../consts/colors.js';
+import { type InjectionKey } from 'vue';
+/**
+ * What a RuiButtonGroup shares with the RuiButtons inside it, at any depth, so a button wrapped in a
+ * tooltip or a menu activator joins the group like a direct child.
+ */
+export interface ButtonGroupContext<TValue> {
+    variant: () => ButtonVariant;
+    size: () => ButtonSize | undefined;
+    disabled: () => boolean;
+    color: (active: boolean) => ContextColorsType | undefined;
+    itemClass: () => string;
+    isActive: (value: TValue) => boolean;
+    toggle: (value: TValue) => void;
+}
+/**
+ * A button's value type and its group's are separate generics that only the template ties together,
+ * so the key carries `any` for the value.
+ */
+export declare const ButtonGroupKey: InjectionKey<ButtonGroupContext<any> | undefined>;
+/**
+ * Ends a surrounding group's reach. Overlays wrap their teleported content in it, so the buttons of a
+ * split button's menu stay plain buttons.
+ */
+export declare const ButtonGroupBoundary: import("vue").DefineComponent<{}, () => globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/buttons/button-group/button-group-context.js

@@ -0,0 +1,22 @@
+import { defineComponent, provide } from "vue";
+//#region src/components/buttons/button-group/button-group-context.ts
+/**
+* A button's value type and its group's are separate generics that only the template ties together,
+* so the key carries `any` for the value.
+*/
+var ButtonGroupKey = Symbol("RuiButtonGroup");
+/**
+* Ends a surrounding group's reach. Overlays wrap their teleported content in it, so the buttons of a
+* split button's menu stay plain buttons.
+*/
+var ButtonGroupBoundary = defineComponent({
+	name: "ButtonGroupBoundary",
+	setup(_, { slots }) {
+		provide(ButtonGroupKey, void 0);
+		return () => slots.default?.();
+	}
+});
+//#endregion
+export { ButtonGroupBoundary, ButtonGroupKey };
+
+//# sourceMappingURL=button-group-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-context.js","names":[],"sources":["../../../../src/components/buttons/button-group/button-group-context.ts"],"sourcesContent":["import type { ButtonSize, ButtonVariant } from '@/components/buttons/button/button-props';\nimport type { ContextColorsType } from '@/consts/colors';\nimport { defineComponent, type InjectionKey, provide } from 'vue';\n\n/**\n * What a RuiButtonGroup shares with the RuiButtons inside it, at any depth, so a button wrapped in a\n * tooltip or a menu activator joins the group like a direct child.\n */\nexport interface ButtonGroupContext<TValue> {\n  variant: () => ButtonVariant;\n  size: () => ButtonSize | undefined;\n  disabled: () => boolean;\n  color: (active: boolean) => ContextColorsType | undefined;\n  itemClass: () => string;\n  isActive: (value: TValue) => boolean;\n  toggle: (value: TValue) => void;\n}\n\n/**\n * A button's value type and its group's are separate generics that only the template ties together,\n * so the key carries `any` for the value.\n */\nexport const ButtonGroupKey: InjectionKey<ButtonGroupContext<any> | undefined> = Symbol('RuiButtonGroup');\n\n/**\n * Ends a surrounding group's reach. Overlays wrap their teleported content in it, so the buttons of a\n * split button's menu stay plain buttons.\n */\nexport const ButtonGroupBoundary = defineComponent({\n  name: 'ButtonGroupBoundary',\n  setup(_, { slots }) {\n    provide(ButtonGroupKey, undefined);\n    return () => slots.default?.();\n  },\n});\n"],"mappings":";;;;;;AAsBA,IAAa,iBAAoE,OAAO,gBAAgB;;;;;AAMxG,IAAa,sBAAsB,gBAAgB;CACjD,MAAM;CACN,MAAM,GAAG,EAAE,SAAS;EAClB,QAAQ,gBAAgB,KAAA,CAAS;EACjC,aAAa,MAAM,UAAU;CAC/B;AACF,CAAC"}

package/dist/components/calendar/RuiCalendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendar.js","names":[],"sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst calendarStyles = tv({\n  base: 'w-[18.75rem] bg-white dark:bg-rui-grey-900 overflow-hidden',\n  variants: {\n    bordered: {\n      true: 'rounded-md shadow-sm border border-rui-grey-200 dark:border-rui-grey-800',\n    },\n  },\n});\n\nconst ui = computed<string>(() => calendarStyles({ bordered: !borderless }));\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\n// The grid's keyboard navigation also turns the view, so the title follows the view itself\nwatch(monthTitle, (title) => {\n  emit('update:pages', [{ title }]);\n});\n\nfunction moveMonth(delta: number): void {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n}\n\nfunction move(date: Date | number): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch(selectedDate, (date) => {\n  if (!date && !allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div :class=\"ui\">\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiCalendar.js","names":[],"sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport { tv } from '@/utils/tv';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst calendarStyles = tv({\n  base: 'w-75 overflow-hidden',\n  variants: {\n    // standalone it sits on the card surface; borderless it lives inside a menu\n    bordered: {\n      true: 'bg-rui-surface rounded-rui-panel border border-rui-divider',\n      false: 'bg-rui-menu',\n    },\n  },\n});\n\nconst ui = computed<string>(() => calendarStyles({ bordered: !borderless }));\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\n// The grid's keyboard navigation also turns the view, so the title follows the view itself\nwatch(monthTitle, (title) => {\n  emit('update:pages', [{ title }]);\n});\n\nfunction moveMonth(delta: number): void {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n}\n\nfunction move(date: Date | number): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch(selectedDate, (date) => {\n  if (!date && !allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div :class=\"ui\">\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n"],"mappings":""}