@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/fab-menu.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import React, { useRef } from 'react';
+import { cn } from '@/lib/utils';
+import { Fab } from '@/components/ui/fab';
+import { Icon } from '@/components/ui/icon';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
+
+export interface FabAction {
+  label: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+}
+
+export interface FabMenuProps {
+  mainIcon?: React.ReactNode;
+  activeIcon?: React.ReactNode;
+  actions: FabAction[];
+  className?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  'aria-label'?: string;
+}
+
+export const FabMenu: React.FC<FabMenuProps> = ({
+  mainIcon = <Icon symbol="add" />,
+  activeIcon = <Icon symbol="close" />,
+  actions,
+  className,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  'aria-label': ariaLabel = 'Actions menu',
+}) => {
+  const [openState, setOpenState] = useControllableState<boolean>({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  const isOpen = openState ?? false;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useOverlayBehavior({
+    open: isOpen,
+    contentRef,
+    rootRef: containerRef,
+    triggerRef,
+    onDismiss: () => setOpenState(false),
+    modal: false,
+    dismissOnEscape: true,
+    dismissOnInteractOutside: true,
+    initialFocus: true,
+    restoreFocus: true,
+  });
+
+  const handleMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    const items = Array.from(
+      event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="menuitem"]'),
+    ).filter((item) => !item.disabled);
+    if (items.length === 0) return;
+    event.preventDefault();
+    const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+    const nextIndex =
+      event.key === 'Home'
+        ? 0
+        : event.key === 'End'
+          ? items.length - 1
+          : event.key === 'ArrowUp'
+            ? (currentIndex - 1 + items.length) % items.length
+            : (currentIndex + 1) % items.length;
+    items[nextIndex]?.focus();
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn('relative z-50 flex flex-col items-end gap-4', className)}
+    >
+      <div
+        ref={contentRef}
+        className={cn(
+          'duration-medium ease-emphasized flex flex-col items-end gap-3 transition-all',
+          isOpen
+            ? 'visible translate-y-0 opacity-100'
+            : 'pointer-events-none invisible translate-y-10 opacity-0',
+        )}
+        role="menu"
+        aria-label={ariaLabel}
+        aria-hidden={!isOpen}
+        onKeyDown={handleMenuKeyDown}
+      >
+        {actions.map((action, index) => (
+          <div key={index} className="group flex items-center gap-3" role="none">
+            <span
+              className="bg-inverse-surface text-inverse-on-surface text-label-small shadow-1 rounded-sm px-2 py-1 font-medium whitespace-nowrap opacity-0 transition-opacity group-hover:opacity-100"
+              aria-hidden="true"
+            >
+              {action.label}
+            </span>
+            <Fab
+              size="sm"
+              variant="secondary"
+              icon={action.icon}
+              onClick={(e) => {
+                e.stopPropagation();
+                action.onClick();
+                setOpenState(false);
+              }}
+              aria-label={action.label}
+              role="menuitem"
+              tabIndex={isOpen ? 0 : -1}
+            />
+          </div>
+        ))}
+      </div>
+
+      <Fab
+        ref={triggerRef}
+        variant={isOpen ? 'tertiary' : 'primary'}
+        size="md"
+        className={cn(
+          'duration-emphasized transition-transform',
+          isOpen ? 'rotate-90' : 'rotate-0',
+        )}
+        onClick={() => setOpenState(!isOpen)}
+        icon={isOpen ? activeIcon : mainIcon}
+        aria-label={isOpen ? 'Close menu' : ariaLabel}
+        aria-expanded={isOpen}
+        aria-haspopup="menu"
+      />
+    </div>
+  );
+};

package/registry/components/fab.tsx

@@ -0,0 +1,185 @@
+import {
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+  type ReactElement,
+  type Ref,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn, Slot } from '@/lib/utils';
+import { fabSizeClasses } from '@/lib/action-size';
+import { Ripple } from '@/components/ui/ripple';
+import {
+  ActionSpinner,
+  ActionStateLayer,
+  actionInteractiveClass,
+  getActionAsChildAttributes,
+  getActionDisabledState,
+  getActionStateAttributes,
+} from '@/lib/action-control';
+
+const fabVariants = cva(
+  `relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-fab transition-all duration-medium ease-emphasized z-30 ${actionInteractiveClass}`,
+  {
+    variants: {
+      variant: {
+        primary: 'bg-primary-container text-on-primary-container',
+        surface: 'bg-surface text-primary border border-outline-soft',
+        secondary: 'bg-secondary-container text-on-secondary-container',
+        tertiary: 'bg-tertiary-container text-on-tertiary-container',
+      },
+      elevation: {
+        raised: '',
+        flat: 'shadow-none hover:shadow-none [box-shadow:none] hover:[box-shadow:none]',
+      },
+      size: {
+        sm: fabSizeClasses.sm,
+        md: fabSizeClasses.md,
+        lg: fabSizeClasses.lg,
+        extended: fabSizeClasses.extended,
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'surface',
+        elevation: 'raised',
+        className: 'shadow-1 hover:shadow-2',
+      },
+      {
+        variant: 'primary',
+        elevation: 'raised',
+        className: 'shadow-3 hover:shadow-4',
+      },
+      {
+        variant: 'secondary',
+        elevation: 'raised',
+        className: 'shadow-3 hover:shadow-4',
+      },
+      {
+        variant: 'tertiary',
+        elevation: 'raised',
+        className: 'shadow-3 hover:shadow-4',
+      },
+    ],
+    defaultVariants: {
+      variant: 'primary',
+      elevation: 'raised',
+      size: 'md',
+    },
+  },
+);
+
+export type FabProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof fabVariants> & {
+    icon?: ReactNode;
+    label?: string;
+    loading?: boolean;
+    asChild?: boolean;
+  };
+
+export const Fab = forwardRef<HTMLButtonElement, FabProps>(
+  (
+    {
+      variant,
+      elevation,
+      size,
+      className,
+      icon,
+      label,
+      loading = false,
+      asChild = false,
+      children,
+      disabled = false,
+      type = 'button',
+      ...props
+    },
+    ref,
+  ) => {
+    const isDisabled = getActionDisabledState(disabled, loading);
+    const canRenderAsChild = asChild && isValidElement(children);
+    const finalSize = label && (size === 'md' || size === undefined) ? 'extended' : (size ?? 'md');
+    const iconSizeClasses = {
+      sm: 'size-icon-sm',
+      md: 'size-icon-md',
+      lg: 'size-icon-lg',
+      extended: 'size-icon-md',
+    } as const;
+    const renderContent = (labelContent: ReactNode, extraContent?: ReactNode) => (
+      <>
+        <ActionStateLayer className="duration-medium ease-emphasized" />
+        <Ripple disabled={isDisabled} />
+        <div className="pointer-events-none relative z-10 flex items-center justify-center gap-3">
+          {loading ? (
+            <ActionSpinner className={iconSizeClasses[finalSize]} />
+          ) : (
+            <>
+              {icon ? (
+                <span
+                  className={cn(
+                    'flex items-center justify-center transition-transform',
+                    iconSizeClasses[finalSize],
+                  )}
+                >
+                  {icon}
+                </span>
+              ) : null}
+              {labelContent ? (
+                <span className="text-label-large leading-none font-medium">{labelContent}</span>
+              ) : null}
+              {extraContent}
+            </>
+          )}
+        </div>
+      </>
+    );
+
+    if (canRenderAsChild) {
+      const childElement = children as ReactElement<Record<string, unknown>>;
+      const childProps = childElement.props as {
+        children?: ReactNode;
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+        tabIndex?: number;
+      };
+      const forwardedChildProps = getActionAsChildAttributes(
+        isDisabled,
+        loading,
+        props as Record<string, unknown> & {
+          onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+          tabIndex?: number | undefined;
+        },
+        childProps,
+      );
+
+      return (
+        <Slot
+          ref={ref as Ref<HTMLElement>}
+          className={cn(fabVariants({ variant, elevation, size: finalSize }), className)}
+        >
+          {cloneElement(
+            childElement,
+            forwardedChildProps,
+            renderContent(label ?? childProps.children, label ? childProps.children : null),
+          )}
+        </Slot>
+      );
+    }
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(fabVariants({ variant, elevation, size: finalSize }), className)}
+        disabled={isDisabled}
+        {...getActionStateAttributes(isDisabled, loading)}
+        {...props}
+      >
+        {renderContent(label, children)}
+      </button>
+    );
+  },
+);
+
+Fab.displayName = 'Fab';

package/registry/components/field.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import { Label } from '@/primitives/label';
+import { cn } from '@/lib/utils';
+
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  invalid?: boolean;
+}
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  ({ className, invalid = false, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('relative inline-flex w-full flex-col', className)}
+      data-invalid={invalid || undefined}
+      {...props}
+    />
+  ),
+);
+Field.displayName = 'Field';
+
+export type FieldLabelProps = React.ComponentPropsWithoutRef<typeof Label>;
+
+export const FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(
+  ({ className, ...props }, ref) => (
+    <Label ref={ref} className={cn('text-on-surface', className)} {...props} />
+  ),
+);
+FieldLabel.displayName = 'FieldLabel';
+
+export type FieldDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+export const FieldDescription = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-label-small text-on-surface-variant', className)} {...props} />
+  ),
+);
+FieldDescription.displayName = 'FieldDescription';
+
+export type FieldErrorProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+export const FieldError = React.forwardRef<HTMLParagraphElement, FieldErrorProps>(
+  ({ className, role = 'alert', ...props }, ref) => (
+    <p ref={ref} role={role} className={cn('text-label-small text-error', className)} {...props} />
+  ),
+);
+FieldError.displayName = 'FieldError';

package/registry/components/icon-button.tsx

@@ -0,0 +1,209 @@
+import {
+  type ButtonHTMLAttributes,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Ripple } from '@/components/ui/ripple';
+import { cn, Slot } from '@/lib/utils';
+import { getIconFrameSizeClass, iconButtonSizeClasses } from '@/lib/action-size';
+import { Icon, type IconProps } from '@/components/ui/icon';
+import {
+  ActionSpinner,
+  ActionStateLayer,
+  actionInteractiveClass,
+  getActionAsChildAttributes,
+  getActionDisabledState,
+  getActionStateAttributes,
+} from '@/lib/action-control';
+
+function isIconElement(node: ReactNode): node is ReactElement<IconProps> {
+  return isValidElement(node) && node.type === Icon;
+}
+
+function normalizeIconNode(node: ReactNode, size: NonNullable<IconProps['size']>): ReactNode {
+  if (!isIconElement(node) || node.props.size !== undefined) {
+    return node;
+  }
+  return cloneElement(node, { size });
+}
+
+function shouldOpticallyAlignIcon(node: ReactNode): boolean {
+  return (
+    isIconElement(node) &&
+    (node.props.symbol !== undefined || typeof node.props.children === 'string')
+  );
+}
+
+const iconButtonVariants = cva(
+  `relative inline-flex items-center justify-center rounded-icon-button transition-all duration-snappy ease-emphasized ${actionInteractiveClass}`,
+  {
+    variants: {
+      variant: {
+        filled: 'bg-primary text-on-primary',
+        tonal: 'bg-secondary-container text-on-secondary-container',
+        outlined: 'bg-transparent border border-outline-subtle text-on-surface-variant',
+        standard: 'bg-transparent text-on-surface-variant',
+      },
+      size: {
+        sm: iconButtonSizeClasses.sm,
+        md: iconButtonSizeClasses.md,
+        lg: iconButtonSizeClasses.lg,
+      },
+      selected: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        variant: 'tonal',
+        selected: true,
+        className: 'bg-secondary-container text-on-secondary-container',
+      },
+      {
+        variant: 'outlined',
+        selected: true,
+        className: 'bg-state-selected border-primary text-primary',
+      },
+      { variant: 'standard', selected: true, className: 'text-primary' },
+    ],
+    defaultVariants: {
+      variant: 'standard',
+      size: 'md',
+      selected: false,
+    },
+  },
+);
+
+type IconButtonBaseProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'aria-label' | 'children'
+> &
+  VariantProps<typeof iconButtonVariants> & {
+    'aria-label': string;
+    loading?: boolean;
+    iconSize?: NonNullable<IconProps['size']>;
+  };
+
+type NativeIconButtonProps = IconButtonBaseProps & {
+  asChild?: false;
+  icon: ReactNode;
+  children?: never;
+};
+
+type SlottedIconButtonProps = IconButtonBaseProps & {
+  asChild: true;
+  children: ReactElement;
+  icon?: ReactNode;
+};
+
+export type IconButtonProps = NativeIconButtonProps | SlottedIconButtonProps;
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      icon,
+      children,
+      variant = 'standard',
+      size = 'md',
+      selected,
+      disabled = false,
+      loading = false,
+      iconSize,
+      asChild = false,
+      'aria-label': ariaLabel,
+      className = '',
+      type = 'button',
+      ...props
+    },
+    ref,
+  ) => {
+    const isSelected = selected ?? false;
+    const isDisabled = getActionDisabledState(disabled, loading);
+    const canRenderAsChild = asChild && isValidElement(children);
+    const resolvedIconSize: NonNullable<IconProps['size']> =
+      iconSize ?? (size === 'sm' ? 'sm' : 'md');
+    const resolvedContent = normalizeIconNode(icon, resolvedIconSize);
+    const renderContent = (content: ReactNode) => {
+      const sizeClass = getIconFrameSizeClass(resolvedIconSize);
+      const normalizedContent = normalizeIconNode(content, resolvedIconSize);
+      const iconOpticalClass = shouldOpticallyAlignIcon(normalizedContent) ? '-translate-y-px' : '';
+
+      return (
+        <>
+          <ActionStateLayer className="z-0" />
+          <Ripple center disabled={isDisabled} />
+          {loading ? (
+            <ActionSpinner className={cn('relative z-10', sizeClass)} />
+          ) : (
+            <span
+              className={cn(
+                'relative z-10 flex items-center justify-center',
+                sizeClass,
+                iconOpticalClass,
+              )}
+            >
+              {normalizedContent}
+            </span>
+          )}
+        </>
+      );
+    };
+
+    if (canRenderAsChild) {
+      const childElement = children as ReactElement<Record<string, unknown>>;
+      const childProps = childElement.props as {
+        children?: ReactNode;
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+        tabIndex?: number;
+      };
+      const forwardedChildProps = getActionAsChildAttributes(
+        isDisabled,
+        loading,
+        props as Record<string, unknown> & {
+          onClick?: ((event: MouseEvent<HTMLElement>) => void) | undefined;
+          tabIndex?: number | undefined;
+        },
+        childProps,
+      );
+
+      return (
+        <Slot
+          ref={ref as Ref<HTMLElement>}
+          className={cn(iconButtonVariants({ variant, size, selected: isSelected }), className)}
+          aria-label={ariaLabel}
+          aria-pressed={selected === undefined ? undefined : isSelected}
+        >
+          {cloneElement(
+            childElement,
+            forwardedChildProps,
+            renderContent(childProps.children ?? icon),
+          )}
+        </Slot>
+      );
+    }
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(iconButtonVariants({ variant, size, selected: isSelected }), className)}
+        disabled={isDisabled}
+        aria-label={ariaLabel}
+        aria-pressed={selected === undefined ? undefined : isSelected}
+        {...getActionStateAttributes(isDisabled, loading)}
+        {...props}
+      >
+        {renderContent(resolvedContent)}
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = 'IconButton';

package/registry/components/icon.tsx

@@ -0,0 +1,118 @@
+import React, { forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface IconProps extends React.HTMLAttributes<HTMLElement> {
+  size?: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  filled?: boolean;
+  symbol?: string;
+  viewBox?: string;
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: string | number;
+  strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+  strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
+}
+
+export const Icon = forwardRef<HTMLElement, IconProps>(
+  (
+    {
+      size = 'md',
+      filled = false,
+      symbol,
+      className,
+      children,
+      style,
+      viewBox = '0 0 24 24',
+      ...props
+    },
+    ref,
+  ) => {
+    const isScale = typeof size === 'string' && ['xs', 'sm', 'md', 'lg', 'xl'].includes(size);
+    const hasExplicitAccessibility =
+      props['aria-hidden'] !== undefined ||
+      props['aria-label'] !== undefined ||
+      props.role !== undefined;
+    const accessibilityProps = hasExplicitAccessibility ? {} : { 'aria-hidden': 'true' as const };
+
+    const isSymbol =
+      symbol ||
+      (typeof children === 'string' && children.trim().length > 0 && !children.includes('<'));
+
+    const iconSize = isScale ? size : undefined;
+    const sizeClasses = iconSize
+      ? {
+          xs: 'size-icon-xs text-[var(--icon-xs)]',
+          sm: 'size-icon-sm text-[var(--icon-sm)]',
+          md: 'size-icon-md text-[var(--icon-md)]',
+          lg: 'size-icon-lg text-[var(--icon-lg)]',
+          xl: 'size-icon-xl text-[var(--icon-xl)]',
+        }[iconSize]
+      : '';
+    const opticalSize = iconSize
+      ? {
+          xs: 20,
+          sm: 20,
+          md: 24,
+          lg: 32,
+          xl: 48,
+        }[iconSize]
+      : 24;
+    const resolvedFontSize = isScale ? `var(--icon-${iconSize})` : size;
+
+    if (isSymbol) {
+      const iconName = symbol || children;
+      return (
+        <span
+          ref={ref as React.Ref<HTMLSpanElement>}
+          className={cn(
+            'material-symbols-outlined inline-flex shrink-0 items-center justify-center align-middle leading-none select-none',
+            isScale && sizeClasses,
+            className,
+          )}
+          style={{
+            fontSize: resolvedFontSize,
+            lineHeight: 1,
+            width: !isScale ? size : undefined,
+            height: !isScale ? size : undefined,
+            fontVariationSettings: `'FILL' ${filled ? 1 : 0}, 'wght' 400, 'GRAD' 0, 'opsz' ${opticalSize}`,
+            ...style,
+          }}
+          {...accessibilityProps}
+          {...props}
+        >
+          {iconName}
+        </span>
+      );
+    }
+
+    return (
+      <svg
+        ref={ref as React.Ref<SVGSVGElement>}
+        xmlns="http://www.w3.org/2000/svg"
+        width={!isScale ? size : undefined}
+        height={!isScale ? size : undefined}
+        viewBox={viewBox}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className={cn('inline-block shrink-0', isScale && sizeClasses, className)}
+        style={style}
+        {...accessibilityProps}
+        {...(props as React.SVGProps<SVGSVGElement>)}
+      >
+        {children}
+      </svg>
+    );
+  },
+);
+
+Icon.displayName = 'Icon';
+
+export const CheckIcon = (props: Omit<IconProps, 'symbol'>) => <Icon symbol="check" {...props} />;
+export const ChevronRightIcon = (props: Omit<IconProps, 'symbol'>) => (
+  <Icon symbol="chevron_right" {...props} />
+);
+export const CloseIcon = (props: Omit<IconProps, 'symbol'>) => <Icon symbol="close" {...props} />;
+export const MenuIcon = (props: Omit<IconProps, 'symbol'>) => <Icon symbol="menu" {...props} />;