ButtonGroup

<script setup lang="ts">
import { type HTMLAttributes, provide } from 'vue';

import { cn } from '../../lib/utils';

import { ButtonGroupKey, type ButtonGroupSize } from './button-group-context';

import { type ButtonGroupVariants, buttonGroupVariants } from '.';

export interface ButtonGroupProps {
  orientation?: ButtonGroupVariants['orientation'];
  /**
   * Size for ButtonGroupText and any Button without its own `size`. It also reaches a Button inside a trigger wrapper, as in a split button.
   */
  size?: ButtonGroupSize;
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<ButtonGroupProps>(), {
  orientation: 'horizontal',
  size: 'default',
});

provide(ButtonGroupKey, props);
</script>

<template>
  <div
    role="group"
    data-slot="button-group"
    :data-orientation="orientation"
    :data-size="size"
    :class="cn(buttonGroupVariants({ orientation }), props.class)"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import { reactiveOmit } from '@vueuse/core';
import type { SeparatorProps as RekaSeparatorProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';
import { Separator } from '../separator';

export interface ButtonGroupSeparatorProps extends RekaSeparatorProps {
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<ButtonGroupSeparatorProps>(), {
  orientation: 'vertical',
  decorative: true,
});

const delegated = reactiveOmit(props, 'class');
</script>

<template>
  <Separator
    v-bind="delegated"
    data-slot="button-group-separator"
    :class="
      cn(
        'nx:relative nx:self-stretch nx:data-[orientation=vertical]:h-auto',
        props.class
      )
    "
  />
</template>

<script setup lang="ts">
import { Primitive, type PrimitiveProps } from 'reka-ui';
import { computed, type HTMLAttributes, inject } from 'vue';

import { cn } from '../../lib/utils';

import { ButtonGroupKey, type ButtonGroupSize } from './button-group-context';

import { buttonGroupTextVariants } from '.';

export interface ButtonGroupTextProps extends PrimitiveProps {
  /**
   * Addon size. Inherits from ButtonGroup when omitted, or `"default"` outside one.
   */
  size?: ButtonGroupSize;
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<ButtonGroupTextProps>(), {
  as: 'div',
});

const group = inject(ButtonGroupKey, undefined);
const size = computed(() => props.size ?? group?.size ?? 'default');
</script>

<template>
  <Primitive
    :as="as"
    :as-child="asChild"
    data-slot="button-group-text"
    :data-size="size"
    :class="
      cn(
        buttonGroupTextVariants({ size }),
        asChild &&
          'nx:cursor-pointer nx:hover:bg-container-hover nx:active:bg-container-active',
        props.class
      )
    "
  >
    <slot />
  </Primitive>
</template>

import type { InjectionKey } from 'vue';

/** Size shared from a ButtonGroup to its members. */
export type ButtonGroupSize = 'sm' | 'default' | 'lg';

/**
 * A ButtonGroup provides its `size` through this key; `Button` and
 * `ButtonGroupText` inject it. Injection (not a walk over direct children) is
 * what lets a grouped Button inherit the group size even when it is nested
 * inside a trigger wrapper the group cannot reach directly. An explicit `size`
 * on the child wins over the group's.
 */
export const ButtonGroupKey: InjectionKey<{ size: ButtonGroupSize }> =
  Symbol('button-group');

import { cva, type VariantProps } from 'class-variance-authority';

export type { ButtonGroupSize } from './button-group-context';
export {
  default as ButtonGroup,
  type ButtonGroupProps,
} from './ButtonGroup.vue';
export {
  default as ButtonGroupSeparator,
  type ButtonGroupSeparatorProps,
} from './ButtonGroupSeparator.vue';
export {
  default as ButtonGroupText,
  type ButtonGroupTextProps,
} from './ButtonGroupText.vue';

export const buttonGroupVariants = cva(
  'nx:flex nx:w-fit nx:items-stretch nx:*:focus-visible:relative nx:*:focus-visible:z-10',
  {
    variants: {
      orientation: {
        horizontal:
          'nx:[&>*:not(:first-child)]:rounded-l-none nx:[&>*:not(:first-child)]:border-l-0 nx:[&>*:not(:last-child)]:rounded-r-none',
        vertical:
          'nx:flex-col nx:[&>*:not(:first-child)]:rounded-t-none nx:[&>*:not(:first-child)]:border-t-0 nx:[&>*:not(:last-child)]:rounded-b-none',
      },
    },
    defaultVariants: {
      orientation: 'horizontal',
    },
  }
);

export const buttonGroupTextVariants = cva(
  'nx:text-inherit nx:no-underline nx:flex nx:items-center nx:gap-2 nx:rounded-md nx:border-default nx:border-border-default nx:bg-control-background nx:shadow-xs nx:transition-control nx:duration-fast nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default nx:[&_svg]:pointer-events-none nx:[&_svg]:size-4',
  {
    variants: {
      size: {
        sm: 'nx:h-8 nx:px-2.5 nx:typography-label-default',
        default: 'nx:h-10 nx:px-3 nx:typography-label-default',
        lg: 'nx:h-12 nx:px-3.5 nx:typography-label-default',
      },
    },
    defaultVariants: {
      size: 'default',
    },
  }
);

export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;