Bubble

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

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

import { type BubbleVariants, bubbleVariants } from '.';

export interface BubbleProps {
  variant?: BubbleVariants['variant'];
  align?: BubbleVariants['align'];
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<BubbleProps>(), {
  variant: 'muted',
});
</script>

<template>
  <div
    data-slot="bubble"
    :data-variant="variant"
    :data-align="align"
    :class="cn(bubbleVariants({ variant, align }), props.class)"
  >
    <slot />
  </div>
</template>

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

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

export interface BubbleContentProps extends PrimitiveProps {
  /**
   * Renders the child element instead, such as `p`, `a` or `button`.
   * An actionable child gets the focus ring and pointer cursor.
   */
  asChild?: boolean;
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<BubbleContentProps>(), {
  as: 'div',
  asChild: false,
});
</script>

<template>
  <Primitive
    data-slot="bubble-content"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'nx:m-0 nx:block nx:min-w-0 nx:rounded-[inherit] nx:border-0 nx:bg-transparent nx:px-4 nx:py-3 nx:[font:inherit] nx:text-inherit nx:no-underline nx:text-start nx:wrap-break-word nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default nx:[&:is(a[href],button:not(:disabled)):not([aria-disabled=true])]:cursor-pointer nx:[&:is(a[href]),&_:where(a[href])]:underline nx:[&_:where(a[href])]:text-inherit nx:[&:is(a[href]),&_:where(a[href])]:underline-offset-4 nx:[&_:where(pre)]:whitespace-pre-wrap nx:[&_:where(pre)]:wrap-break-word',
        props.class
      )
    "
  >
    <slot />
  </Primitive>
</template>

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

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

export interface BubbleGroupProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BubbleGroupProps>();
</script>

<template>
  <div
    data-slot="bubble-group"
    :class="cn('nx:flex nx:w-full nx:flex-col nx:gap-4', props.class)"
  >
    <slot />
  </div>
</template>

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

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

import { type BubbleReactionsVariants, bubbleReactionsVariants } from '.';

export interface BubbleReactionsProps {
  side?: BubbleReactionsVariants['side'];
  align?: BubbleReactionsVariants['align'];
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<BubbleReactionsProps>(), {
  side: 'bottom',
  align: 'end',
});
</script>

<template>
  <div
    data-slot="bubble-reactions"
    data-bubble-part="reactions"
    :data-side="side"
    :data-align="align"
    :class="cn(bubbleReactionsVariants({ side, align }), props.class)"
  >
    <slot />
  </div>
</template>

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

export { default as Bubble, type BubbleProps } from './Bubble.vue';
export {
  default as BubbleContent,
  type BubbleContentProps,
} from './BubbleContent.vue';
export {
  default as BubbleGroup,
  type BubbleGroupProps,
} from './BubbleGroup.vue';
export {
  default as BubbleReactions,
  type BubbleReactionsProps,
} from './BubbleReactions.vue';

export const bubbleVariants = cva(
  [
    'nx:relative nx:w-fit nx:max-w-[min(80%,45rem)] nx:rounded-xl nx:border-default nx:border-transparent nx:typography-body-default',
    'nx:has-[>[data-bubble-part=reactions][data-side=top]]:mt-3 nx:has-[>[data-bubble-part=reactions][data-side=bottom]]:mb-3',
  ],
  {
    variants: {
      variant: {
        primary: 'nx:bg-primary-background nx:text-primary-foreground',
        muted: 'nx:bg-muted nx:text-foreground',
        outline: 'nx:border-border-default nx:text-foreground',
        ghost: 'nx:text-foreground',
        destructive: 'nx:bg-error-subtle nx:text-error-subtle-foreground',
      },
      align: {
        start: 'nx:me-auto',
        end: 'nx:ms-auto',
      },
    },
    defaultVariants: {
      variant: 'muted',
    },
  }
);

export const bubbleReactionsVariants = cva(
  'nx:absolute nx:flex nx:w-fit nx:items-center nx:gap-1 nx:rounded-full nx:border-default nx:border-border-default nx:bg-popover nx:px-2 nx:py-0.5 nx:typography-label-small nx:text-popover-foreground nx:shadow-sm',
  {
    variants: {
      side: {
        top: 'nx:-top-3',
        bottom: 'nx:-bottom-3',
      },
      align: {
        start: 'nx:start-3',
        end: 'nx:end-3',
      },
    },
    defaultVariants: {
      side: 'bottom',
      align: 'end',
    },
  }
);

export type BubbleVariants = VariantProps<typeof bubbleVariants>;
export type BubbleReactionsVariants = VariantProps<
  typeof bubbleReactionsVariants
>;