FAB

export * from './tcn-fab';

import { booleanAttribute, computed, Directive, ElementRef, inject, input } from '@angular/core';
import { cn } from '@touchcn/core';
import { TcnButtonDirective } from '@touchcn/angular/button';
import { TcnRippleDirective } from '@touchcn/angular/ripple';

export type TcnFabSize = 'regular' | 'small';

const base =
  'tcn-fab inline-flex select-none items-center justify-center transition disabled:pointer-events-none disabled:opacity-40';

const sizeClass: Record<TcnFabSize, string> = {
  regular: 'tcn-fab-regular',
  small: 'tcn-fab-small',
};

/**
 * Floating action button. MD3 renders the primary-container tonal surface with
 * elevation and a ripple; iOS has no FAB idiom, so the cascade skins it as a
 * floating circular glass button (the shared chrome material) — pragmatic and
 * documented. `extended` widens it into an icon + label pill. Add the
 * `tcn-fab-fixed` helper class to dock it bottom-right above the tabbar
 * clearance, or drop it inline. The ripple attaches on both platforms and is
 * MD-only by cascade; disabled forwarding rides on the shared button directive.
 */
@Directive({
  selector: 'button[tcnFab]',
  hostDirectives: [{ directive: TcnButtonDirective, inputs: ['disabled'] }, TcnRippleDirective],
  host: { '[class]': 'classes()' },
})
export class TcnFab {
  private readonly authored = inject(ElementRef<HTMLElement>).nativeElement.getAttribute('class') ?? '';

  readonly size = input<TcnFabSize>('regular');
  readonly extended = input(false, { transform: booleanAttribute });

  protected readonly classes = computed(() =>
    cn(base, sizeClass[this.size()], this.extended() ? 'tcn-fab-extended' : '', this.authored),
  );
}

export * from './tcn-fab';

import { forwardRef, useCallback } from 'react';
import type { ComponentPropsWithoutRef, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cn } from '@touchcn/core';
import { mergeRefs, useRipple } from '@touchcn/react';

export type TcnFabSize = 'regular' | 'small';

const base =
  'tcn-fab inline-flex select-none items-center justify-center transition disabled:pointer-events-none disabled:opacity-40';

const sizeClass: Record<TcnFabSize, string> = {
  regular: 'tcn-fab-regular',
  small: 'tcn-fab-small',
};

export interface TcnFabProps extends ComponentPropsWithoutRef<'button'> {
  size?: TcnFabSize;
  /** Widen into an icon + label pill (MD3 extended FAB). */
  extended?: boolean;
  /** Render the child element instead of a `<button>` (e.g. an anchor). */
  asChild?: boolean;
}

/**
 * Floating action button. MD3 renders the primary-container tonal surface with
 * elevation and a ripple; iOS has no FAB idiom, so the cascade skins it as a
 * floating circular glass button (the shared chrome material) — pragmatic and
 * documented. `extended` widens it into an icon + label pill. Add the
 * `tcn-fab-fixed` helper class to dock it bottom-right above the tabbar
 * clearance, or drop it inline. Emits the same `tcn-fab` classes as the Angular
 * directive; the ripple attaches on both platforms and is MD-only by cascade.
 */
export const TcnFab = forwardRef<HTMLButtonElement, TcnFabProps>(function TcnFab(
  { size = 'regular', extended = false, asChild = false, className, type, disabled, onPointerDown, onPointerCancel, onClick, children, ...props },
  forwardedRef,
) {
  const { hostRef, hostClassName, rippleHandlers } = useRipple<HTMLButtonElement>();
  const Comp = asChild ? Slot : 'button';

  const handlePointerDown = useCallback(
    (event: ReactPointerEvent<HTMLButtonElement>) => {
      onPointerDown?.(event);
      if (!event.defaultPrevented) rippleHandlers.onPointerDown(event);
    },
    [onPointerDown, rippleHandlers],
  );
  const handlePointerCancel = useCallback(
    (event: ReactPointerEvent<HTMLButtonElement>) => {
      onPointerCancel?.(event);
      if (!event.defaultPrevented) rippleHandlers.onPointerCancel(event);
    },
    [onPointerCancel, rippleHandlers],
  );
  const handleClick = useCallback(
    (event: ReactMouseEvent<HTMLButtonElement>) => {
      onClick?.(event);
      if (!event.defaultPrevented) rippleHandlers.onClick(event);
    },
    [onClick, rippleHandlers],
  );

  return (
    <Comp
      ref={mergeRefs(forwardedRef, hostRef)}
      data-slot="fab"
      type={asChild ? type : (type ?? 'button')}
      disabled={disabled}
      aria-disabled={disabled || undefined}
      className={cn(base, sizeClass[size], extended ? 'tcn-fab-extended' : '', hostClassName, className)}
      onPointerDown={handlePointerDown}
      onPointerCancel={handlePointerCancel}
      onClick={handleClick}
      {...props}
    >
      {children}
    </Comp>
  );
});

<script lang="ts">
export type TcnFabSize = 'regular' | 'small';

const base =
  'tcn-fab inline-flex select-none items-center justify-center transition disabled:pointer-events-none disabled:opacity-40';

const sizeClass: Record<TcnFabSize, string> = {
  regular: 'tcn-fab-regular',
  small: 'tcn-fab-small',
};
</script>

<script setup lang="ts">
import { computed } from 'vue';
import { Primitive } from 'reka-ui';
import { cn } from '@touchcn/core';
import { useRipple } from '@touchcn/vue';

/**
 * Floating action button. MD3 renders the primary-container tonal surface with
 * elevation and a ripple; iOS has no FAB idiom, so the cascade skins it as a
 * floating circular glass button (the shared chrome material). `extended`
 * widens it into an icon + label pill. Add the `tcn-fab-fixed` helper class to
 * dock it bottom-right above the tabbar clearance, or drop it inline. Emits the
 * same `tcn-fab` classes as the Angular / React counterparts; the ripple
 * attaches on both platforms and is MD-only by cascade.
 */
const props = withDefaults(
  defineProps<{
    size?: TcnFabSize;
    /** Widen into an icon + label pill (MD3 extended FAB). */
    extended?: boolean;
    /** Render the slotted element instead of a `<button>` (e.g. an anchor). */
    asChild?: boolean;
    type?: 'button' | 'submit' | 'reset';
    disabled?: boolean;
  }>(),
  { size: 'regular', extended: false, asChild: false },
);

const { setHost, hostClassName, onPointerdown, onPointercancel, onClick } = useRipple();

const classes = computed(() =>
  cn(base, sizeClass[props.size], props.extended ? 'tcn-fab-extended' : '', hostClassName),
);
</script>

<template>
  <Primitive
    :ref="setHost"
    as="button"
    :as-child="asChild"
    data-slot="fab"
    :type="asChild ? type : (type ?? 'button')"
    :disabled="disabled"
    :aria-disabled="disabled || undefined"
    :class="classes"
    @pointerdown="onPointerdown"
    @pointercancel="onPointercancel"
    @click="onClick"
  >
    <slot />
  </Primitive>
</template>

export { default as TcnFab } from './TcnFab.vue';
export type { TcnFabSize } from './TcnFab.vue';