@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/token-field.tsx

@@ -0,0 +1,438 @@
+'use client';
+
+import React, {
+  type ClipboardEvent,
+  type FocusEvent,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Chip } from '@/components/ui/chip';
+import { cn } from '@/lib/utils';
+import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
+import {
+  fieldContainerVariants,
+  getFieldAffixClasses,
+  getFieldHelperTextClasses,
+  getFieldLabelClasses,
+  type FieldShellVariant,
+} from '@/lib/field-shell';
+import { useFieldState } from '@/lib/use-field-state';
+
+type TokenFieldInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'defaultValue' | 'value' | 'onChange' | 'size'
+>;
+
+export type TokenFieldProps = TokenFieldInputProps & {
+  value?: readonly string[];
+  defaultValue?: readonly string[];
+  onValueChange?: (value: string[]) => void;
+  label: string;
+  variant?: FieldShellVariant;
+  size?: FieldSize;
+  error?: boolean;
+  helperText?: string;
+  leadingIcon?: React.ReactNode;
+  trailingIcon?: React.ReactNode;
+  maxTokens?: number;
+  allowDuplicates?: boolean;
+  separators?: readonly string[];
+  validateToken?: (token: string, values: readonly string[]) => string | null | undefined;
+  normalizeToken?: (token: string) => string;
+  labelClassName?: string;
+  labelBg?: string;
+  inputClassName?: string;
+};
+
+const DEFAULT_SEPARATORS = ['Enter', ',', ';'] as const;
+
+export const TokenField = React.forwardRef<HTMLDivElement, TokenFieldProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      label,
+      variant = 'outlined',
+      size = 'md',
+      error,
+      helperText,
+      leadingIcon,
+      trailingIcon,
+      maxTokens,
+      allowDuplicates = false,
+      separators = DEFAULT_SEPARATORS,
+      validateToken,
+      normalizeToken = normalizeTokenFieldToken,
+      labelClassName,
+      labelBg,
+      inputClassName,
+      className,
+      id,
+      disabled,
+      placeholder,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onPaste,
+      ...props
+    },
+    ref,
+  ) => {
+    const rootRef = useRef<HTMLDivElement | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const tokenRefs = useRef<Array<HTMLDivElement | HTMLButtonElement | null>>([]);
+    const fieldSize = getFieldSizeStyles(size);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState<string[]>(() => [
+      ...(defaultValue ?? []),
+    ]);
+    const tokens = [...(isControlled ? value : uncontrolledValue)];
+    const [draft, setDraft] = useState('');
+    const [activeTokenIndex, setActiveTokenIndex] = useState<number | null>(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const [validationMessage, setValidationMessage] = useState<string | null>(null);
+    const atTokenLimit = maxTokens !== undefined && tokens.length >= maxTokens;
+    const effectiveError = Boolean(error || validationMessage);
+    const effectiveHelperText = validationMessage ?? helperText;
+    const hasValue = tokens.length > 0 || draft.length > 0;
+    const { fieldId, helperId, isFloating } = useFieldState({
+      id,
+      idPrefix: 'tokenfield',
+      helperText: effectiveHelperText,
+      active: isFocused,
+      hasValue,
+    });
+
+    useEffect(() => {
+      if (isControlled) return;
+      setUncontrolledValue([...(defaultValue ?? [])]);
+    }, [defaultValue, isControlled]);
+
+    const commitTokens = (nextTokens: string[]) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextTokens);
+      }
+      onValueChange?.(nextTokens);
+    };
+
+    const addTokens = (rawTokens: readonly string[]) => {
+      setValidationMessage(null);
+      const nextTokens = [...tokens];
+
+      for (const rawToken of rawTokens) {
+        const token = normalizeToken(rawToken);
+        if (!token) continue;
+
+        if (maxTokens !== undefined && nextTokens.length >= maxTokens) {
+          setValidationMessage(`Add up to ${maxTokens} ${maxTokens === 1 ? 'item' : 'items'}.`);
+          break;
+        }
+
+        if (!allowDuplicates && includesToken(nextTokens, token)) {
+          continue;
+        }
+
+        const tokenError = validateToken?.(token, nextTokens);
+        if (tokenError) {
+          setValidationMessage(tokenError);
+          continue;
+        }
+
+        nextTokens.push(token);
+      }
+
+      if (!arraysEqual(tokens, nextTokens)) {
+        commitTokens(nextTokens);
+      }
+    };
+
+    const commitDraft = () => {
+      if (!draft.trim()) return;
+      addTokens(splitTokenFieldInput(draft));
+      setDraft('');
+    };
+
+    const setRootRef = (node: HTMLDivElement | null) => {
+      rootRef.current = node;
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    };
+
+    const focusInput = () => {
+      setActiveTokenIndex(null);
+      if (!disabled) inputRef.current?.focus();
+    };
+
+    const focusToken = (index: number) => {
+      if (disabled || tokens.length === 0) return;
+      const boundedIndex = Math.max(0, Math.min(index, tokens.length - 1));
+      setActiveTokenIndex(boundedIndex);
+      window.requestAnimationFrame(() => tokenRefs.current[boundedIndex]?.focus());
+    };
+
+    const removeToken = (index: number, nextFocus: 'input' | 'previous' = 'input') => {
+      setValidationMessage(null);
+      const nextTokens = tokens.filter((_, tokenIndex) => tokenIndex !== index);
+      commitTokens(nextTokens);
+
+      if (nextFocus === 'previous' && nextTokens.length > 0) {
+        const nextIndex = Math.min(index, nextTokens.length - 1);
+        setActiveTokenIndex(nextIndex);
+        window.requestAnimationFrame(() => tokenRefs.current[nextIndex]?.focus());
+        return;
+      }
+
+      window.requestAnimationFrame(focusInput);
+    };
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+
+      if (separators.includes(event.key)) {
+        event.preventDefault();
+        commitDraft();
+        return;
+      }
+
+      if (event.key === 'Backspace' && draft.length === 0 && tokens.length > 0) {
+        event.preventDefault();
+        removeToken(tokens.length - 1);
+        return;
+      }
+
+      if (event.key === 'ArrowLeft' && draft.length === 0 && tokens.length > 0) {
+        event.preventDefault();
+        focusToken(tokens.length - 1);
+      }
+    };
+
+    const handleTokenKeyDown = (event: KeyboardEvent<HTMLElement>, index: number) => {
+      onKeyDown?.(event as KeyboardEvent<HTMLInputElement>);
+      if (event.defaultPrevented) return;
+
+      if (event.key === 'Backspace' || event.key === 'Delete') {
+        event.preventDefault();
+        removeToken(index, 'previous');
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        focusToken(index - 1);
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        if (index >= tokens.length - 1) {
+          focusInput();
+          return;
+        }
+        focusToken(index + 1);
+        return;
+      }
+
+      if (event.key === 'Home') {
+        event.preventDefault();
+        focusToken(0);
+        return;
+      }
+
+      if (event.key === 'End' || event.key === 'Escape') {
+        event.preventDefault();
+        focusInput();
+      }
+    };
+
+    const handleRootBlur = (event: FocusEvent<HTMLDivElement>) => {
+      if (!rootRef.current?.contains(event.relatedTarget as Node | null)) {
+        setActiveTokenIndex(null);
+      }
+    };
+
+    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+      onPaste?.(event);
+      if (event.defaultPrevented) return;
+
+      const pastedText = event.clipboardData.getData('text');
+      const pastedTokens = splitTokenFieldInput(pastedText);
+      if (pastedTokens.length <= 1) return;
+
+      event.preventDefault();
+      addTokens(pastedTokens);
+      setDraft('');
+    };
+
+    return (
+      <div
+        ref={setRootRef}
+        className={cn('relative inline-flex w-full flex-col', className)}
+        onBlur={handleRootBlur}
+      >
+        <div
+          className={cn(
+            fieldContainerVariants({ variant, error: effectiveError, disabled }),
+            'min-h-10 items-start py-0',
+            size === 'sm' && 'min-h-8',
+            size === 'lg' && 'min-h-12',
+          )}
+          onClick={focusInput}
+        >
+          {leadingIcon && (
+            <span
+              className={getFieldAffixClasses({
+                size,
+                error: effectiveError,
+                active: isFocused,
+                multiline: true,
+                side: 'leading',
+              })}
+            >
+              <div className={cn(fieldSize.iconSize, 'flex items-center justify-center')}>
+                {leadingIcon}
+              </div>
+            </span>
+          )}
+          <div className="relative min-h-full min-w-0 flex-1">
+            <div
+              className={cn(
+                'flex min-h-full w-full flex-wrap items-center gap-1.5',
+                fieldSize.horizontalPadding,
+                getTokenFieldContentPadding(size, variant),
+              )}
+            >
+              {tokens.length ? (
+                <span className="contents" role="list" aria-label={`${label} values`}>
+                  {tokens.map((token, index) => (
+                    <span key={`${token}:${index}`} role="listitem">
+                      <Chip
+                        ref={(node) => {
+                          tokenRefs.current[index] = node;
+                        }}
+                        aria-label={`${token}. Press Delete to remove.`}
+                        deleteButtonTabIndex={-1}
+                        disabled={disabled}
+                        label={token}
+                        tabIndex={activeTokenIndex === index ? 0 : -1}
+                        variant="input"
+                        onDelete={() => removeToken(index)}
+                        onFocus={() => setActiveTokenIndex(index)}
+                        onKeyDown={(event) => handleTokenKeyDown(event, index)}
+                      />
+                    </span>
+                  ))}
+                </span>
+              ) : null}
+              <input
+                ref={inputRef}
+                id={fieldId}
+                value={draft}
+                disabled={disabled || atTokenLimit}
+                placeholder={isFloating ? placeholder : ' '}
+                aria-describedby={helperId}
+                aria-invalid={effectiveError || undefined}
+                className={cn(
+                  'unisane-text-field-control text-on-surface caret-primary placeholder:text-on-surface-variant min-w-24 flex-1 border-none bg-transparent outline-none focus:ring-0 disabled:cursor-not-allowed',
+                  fieldSize.valueText,
+                  inputClassName,
+                )}
+                onFocus={(event) => {
+                  setIsFocused(true);
+                  onFocus?.(event);
+                }}
+                onBlur={(event) => {
+                  setIsFocused(false);
+                  commitDraft();
+                  onBlur?.(event);
+                }}
+                onChange={(event) => {
+                  setValidationMessage(null);
+                  setDraft(event.currentTarget.value);
+                }}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                {...props}
+              />
+            </div>
+            <label
+              htmlFor={fieldId}
+              className={getFieldLabelClasses({
+                size,
+                variant,
+                floating: isFloating,
+                error: effectiveError,
+                active: isFocused,
+                multiline: true,
+                labelBg,
+                labelClassName,
+              })}
+            >
+              {label}
+            </label>
+          </div>
+          {trailingIcon && (
+            <span
+              className={getFieldAffixClasses({
+                size,
+                error: effectiveError,
+                multiline: true,
+                side: 'trailing',
+              })}
+            >
+              <div className={cn(fieldSize.iconSize, 'flex items-center justify-center')}>
+                {trailingIcon}
+              </div>
+            </span>
+          )}
+        </div>
+        {effectiveHelperText && (
+          <span id={helperId} className={getFieldHelperTextClasses(size, effectiveError)}>
+            {effectiveHelperText}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+TokenField.displayName = 'TokenField';
+
+export function normalizeTokenFieldToken(token: string) {
+  return token.trim().replace(/\s+/g, ' ');
+}
+
+export function splitTokenFieldInput(value: string) {
+  return value
+    .split(/[\n,;]+/)
+    .map(normalizeTokenFieldToken)
+    .filter(Boolean);
+}
+
+function includesToken(tokens: readonly string[], token: string) {
+  const normalized = token.toLocaleLowerCase();
+  return tokens.some((item) => item.toLocaleLowerCase() === normalized);
+}
+
+function arraysEqual(left: readonly string[], right: readonly string[]) {
+  return left.length === right.length && left.every((item, index) => item === right[index]);
+}
+
+function getTokenFieldContentPadding(size: FieldSize, variant: FieldShellVariant) {
+  if (variant === 'filled') {
+    if (size === 'sm') return 'pt-5 pb-1.5';
+    if (size === 'lg') return 'pt-7 pb-3';
+    return 'pt-6 pb-2';
+  }
+
+  if (size === 'sm') return 'py-0';
+  if (size === 'lg') return 'py-2';
+  return 'py-1';
+}

package/registry/components/tooltip.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import React, {
+  Fragment,
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@/lib/utils';
+
+export interface TooltipProps {
+  label: string;
+  subhead?: string;
+  children: React.ReactNode;
+  variant?: 'plain' | 'rich';
+  className?: string;
+  triggerClassName?: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const VIEWPORT_MARGIN = 8;
+const TOOLTIP_GAP = 8;
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  label,
+  subhead,
+  children,
+  variant = 'plain',
+  className,
+  triggerClassName,
+  side = 'top',
+}) => {
+  const tooltipId = useId();
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const updatePosition = useCallback(() => {
+    if (typeof window === 'undefined') return;
+    const trigger = triggerRef.current;
+    const tooltip = tooltipRef.current;
+    if (!trigger || !tooltip) return;
+
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const width = tooltipRect.width;
+    const height = tooltipRect.height;
+    let top = triggerRect.top - height - TOOLTIP_GAP;
+    let left = triggerRect.left + triggerRect.width / 2 - width / 2;
+
+    if (side === 'bottom') {
+      top = triggerRect.bottom + TOOLTIP_GAP;
+    } else if (side === 'left') {
+      top = triggerRect.top + triggerRect.height / 2 - height / 2;
+      left = triggerRect.left - width - TOOLTIP_GAP;
+    } else if (side === 'right') {
+      top = triggerRect.top + triggerRect.height / 2 - height / 2;
+      left = triggerRect.right + TOOLTIP_GAP;
+    }
+
+    setPosition({
+      top: Math.max(VIEWPORT_MARGIN, Math.min(top, window.innerHeight - height - VIEWPORT_MARGIN)),
+      left: Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - width - VIEWPORT_MARGIN)),
+    });
+  }, [side]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!mounted) return;
+    updatePosition();
+  }, [mounted, label, subhead, side, variant, updatePosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, { capture: true, passive: true });
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, { capture: true });
+    };
+  }, [open, updatePosition]);
+
+  const trigger =
+    isValidElement<{ 'aria-describedby'?: string }>(children) && children.type !== Fragment ? (
+      cloneElement(children, {
+        'aria-describedby': [children.props['aria-describedby'], tooltipId]
+          .filter(Boolean)
+          .join(' '),
+      })
+    ) : (
+      <span aria-describedby={tooltipId}>{children}</span>
+    );
+
+  const tooltip = (
+    <div
+      ref={tooltipRef}
+      id={tooltipId}
+      role="tooltip"
+      data-side={side}
+      className={cn(
+        'duration-snappy ease-emphasized pointer-events-none fixed z-[var(--z-popover,2000)] max-w-[min(22rem,calc(100vw-1rem))] scale-95 opacity-0 transition-all',
+        open && 'scale-100 opacity-100',
+        variant === 'plain'
+          ? 'bg-inverse-surface text-inverse-on-surface text-label-medium shadow-2 rounded-sm px-2 py-1.5 font-medium whitespace-normal'
+          : 'bg-surface-container text-on-surface shadow-2 border-outline-soft flex min-w-50 flex-col gap-1 rounded-sm border p-4 whitespace-normal',
+        className,
+      )}
+      style={{
+        top: position.top,
+        left: position.left,
+      }}
+    >
+      {variant === 'rich' && subhead && (
+        <span className="text-primary text-label-small font-medium opacity-70">{subhead}</span>
+      )}
+      <span className={cn(variant === 'rich' ? 'text-body-small font-medium' : '')}>{label}</span>
+    </div>
+  );
+
+  return (
+    <div
+      ref={triggerRef}
+      className={cn('relative inline-flex', triggerClassName)}
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onFocus={() => setOpen(true)}
+      onBlur={(event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        setOpen(false);
+      }}
+    >
+      {trigger}
+      {mounted ? createPortal(tooltip, document.body) : null}
+    </div>
+  );
+};

package/registry/components/top-app-bar.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Text } from '@/primitives/text';
+
+const topAppBarVariants = cva(
+  'relative z-20 flex w-full items-center border-b border-outline-weak bg-surface px-4 text-on-surface transition-all duration-medium ease-standard',
+  {
+    variants: {
+      variant: {
+        center: 'h-16 justify-between',
+        small: 'h-16 justify-between',
+        medium: 'h-28 flex-col items-start justify-end pb-6',
+        large: 'h-38 flex-col items-start justify-end pb-8',
+      },
+      scrolled: {
+        true: 'bg-surface-container shadow-1',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'small',
+      scrolled: false,
+    },
+  },
+);
+
+export type TopAppBarProps = VariantProps<typeof topAppBarVariants> & {
+  title: React.ReactNode;
+  titleVariant?: React.ComponentProps<typeof Text>['variant'];
+  titleClassName?: string;
+  navigationIcon?: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+} & Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'>;
+
+export const TopAppBar = forwardRef<HTMLElement, TopAppBarProps>(
+  (
+    {
+      variant,
+      scrolled,
+      title,
+      titleVariant,
+      titleClassName,
+      navigationIcon,
+      actions,
+      className,
+      ['aria-label']: ariaLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const isTall = variant === 'medium' || variant === 'large';
+    const isCenter = variant === 'center';
+    const titleString = typeof title === 'string' ? title : undefined;
+
+    return (
+      <header
+        ref={ref}
+        {...props}
+        className={cn(topAppBarVariants({ variant, scrolled, className }))}
+        aria-label={ariaLabel || titleString}
+      >
+        <div
+          className={cn(
+            'flex w-full items-center',
+            isTall ? 'mb-auto h-16' : 'h-full',
+            isCenter ? 'relative justify-center' : 'justify-between',
+          )}
+        >
+          {navigationIcon && (
+            <div className={cn('text-on-surface z-10 mr-4', isCenter ? 'absolute left-0' : '')}>
+              {navigationIcon}
+            </div>
+          )}
+
+          {!isTall && (
+            <div
+              className={cn('truncate', isCenter ? 'w-full px-12 text-center' : 'flex-1 text-left')}
+            >
+              <Text
+                variant={titleVariant ?? 'titleLarge'}
+                className={cn('text-primary truncate', titleClassName)}
+              >
+                {title}
+              </Text>
+            </div>
+          )}
+
+          <div
+            className={cn(
+              'text-on-surface-variant z-10 flex items-center gap-2',
+              isCenter && 'absolute right-0',
+            )}
+          >
+            {actions}
+          </div>
+        </div>
+
+        {isTall && (
+          <div
+            className={cn(
+              'duration-short w-full px-4 transition-opacity',
+              scrolled ? 'h-0 overflow-hidden opacity-0' : 'opacity-100',
+            )}
+          >
+            <Text
+              variant={titleVariant ?? (variant === 'large' ? 'headlineMedium' : 'headlineSmall')}
+              className={cn('truncate', titleClassName)}
+            >
+              {title}
+            </Text>
+          </div>
+        )}
+      </header>
+    );
+  },
+);
+
+TopAppBar.displayName = 'TopAppBar';