Button Group

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

import { mergeProps, useRender } from '@base-ui/react';
import { Separator as SeparatorComponent } from '@/components/caprice-ui/separator';
import { cn, cva, type VariantProps } from '@/lib/utils';

const buttonGroupVariants = cva({
  base: "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
  variants: {
    orientation: {
      horizontal:
        '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
      vertical:
        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
});

/**
 * A group of buttons that allows users to select one or more options.
 * Renders a `<fieldset>` element.
 *
 * Documentation: [Caprice UI Button Group](https://caprice-ui.com/docs/components/button-group)
 */
export namespace Root {
  export type Props = useRender.ComponentProps<'fieldset'> &
    VariantProps<typeof buttonGroupVariants>;
}

export function Root({ className, render, orientation, ...props }: Root.Props) {
  const defaultProps: useRender.ElementProps<'fieldset'> & { 'data-slot'?: string } = {
    'data-slot': 'button-group',
    className: buttonGroupVariants({ orientation, className }),
  };

  return useRender({
    render,
    state: { orientation },
    defaultTagName: 'fieldset',
    stateAttributesMapping: {
      orientation: (value) => (value ? { 'data-orientation': value } : null),
    },
    props: mergeProps<'fieldset'>(defaultProps, props),
  });
}

/**
 * Displays text within a button group
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Button Group](https://caprice-ui.com/docs/components/button-group)
 */
export namespace Text {
  export type Props = useRender.ComponentProps<'div'>;
}

export function Text({ className, render, ...props }: Text.Props) {
  const defaultProps: useRender.ElementProps<'div'> & { 'data-slot'?: string } = {
    'data-slot': 'button-group-text',
    className: cn(
      "flex items-center gap-2 rounded-md border bg-muted px-4 font-medium text-sm shadow-xs [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
      className
    ),
  };

  return useRender({
    render,
    defaultTagName: 'div',
    props: mergeProps<'div'>(defaultProps, props),
  });
}

/**
 * A separator that visually separates buttons in a button group.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Button Group](https://caprice-ui.com/docs/components/button-group)
 */
export namespace Separator {
  export interface State extends SeparatorComponent.State {}
  export interface Props extends React.ComponentProps<typeof SeparatorComponent> {}
}

export function Separator({ className, orientation = 'vertical', ...props }: Separator.Props) {
  return (
    <SeparatorComponent
      className={cn(
        'relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto',
        className
      )}
      data-slot="button-group-separator"
      orientation={orientation}
      {...props}
    />
  );
}