@unisane/ui 0.1.0-next.b67ebfd0

package/registry/lib/use-overlay-behavior.ts

@@ -0,0 +1,324 @@
+'use client';
+
+import { useEffect, useRef, type RefObject } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+type InertState = {
+  count: number;
+  inert: boolean;
+  ariaHidden: string | null;
+};
+
+type ActiveLayer = {
+  content: HTMLElement;
+  root: HTMLElement;
+  anchor: HTMLElement | null;
+  sequence: number;
+};
+
+const inertStates = new Map<HTMLElement, InertState>();
+const activeLayers: ActiveLayer[] = [];
+let nextLayerSequence = 0;
+
+export interface UseOverlayBehaviorOptions {
+  open: boolean;
+  contentRef: RefObject<HTMLElement | null>;
+  rootRef?: RefObject<HTMLElement | null>;
+  modalBoundaryRef?: RefObject<HTMLElement | null>;
+  triggerRef?: RefObject<HTMLElement | null>;
+  onDismiss: () => void;
+  modal?: boolean;
+  dismissOnEscape?: boolean;
+  dismissOnInteractOutside?: boolean;
+  initialFocus?: boolean;
+  restoreFocus?: boolean;
+  isInteractionOutside?: (target: Node) => boolean;
+}
+
+function getFocusableElements(root: HTMLElement | null) {
+  if (!root) {
+    return [];
+  }
+
+  return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+    (element) =>
+      !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true',
+  );
+}
+
+function getLayerDepth(layer: ActiveLayer) {
+  return activeLayers.filter(
+    (candidate) =>
+      candidate !== layer && layer.anchor !== null && candidate.content.contains(layer.anchor),
+  ).length;
+}
+
+function isTopmostLayer(layer: ActiveLayer) {
+  return (
+    activeLayers.reduce<ActiveLayer | undefined>((topmost, candidate) => {
+      if (!topmost) {
+        return candidate;
+      }
+
+      const candidateDepth = getLayerDepth(candidate);
+      const topmostDepth = getLayerDepth(topmost);
+      if (candidateDepth !== topmostDepth) {
+        return candidateDepth > topmostDepth ? candidate : topmost;
+      }
+      return candidate.sequence > topmost.sequence ? candidate : topmost;
+    }, undefined) === layer
+  );
+}
+
+function registerLayer(content: HTMLElement, root: HTMLElement, anchor: HTMLElement | null) {
+  const layer: ActiveLayer = {
+    content,
+    root,
+    anchor,
+    sequence: nextLayerSequence++,
+  };
+  activeLayers.push(layer);
+  return layer;
+}
+
+function unregisterLayer(layer: ActiveLayer) {
+  const index = activeLayers.indexOf(layer);
+  if (index !== -1) {
+    activeLayers.splice(index, 1);
+  }
+}
+
+function acquireInert(element: HTMLElement) {
+  const current = inertStates.get(element);
+  if (current) {
+    current.count += 1;
+    return;
+  }
+
+  inertStates.set(element, {
+    count: 1,
+    inert: element.inert,
+    ariaHidden: element.getAttribute('aria-hidden'),
+  });
+  element.inert = true;
+  element.setAttribute('inert', '');
+  element.setAttribute('aria-hidden', 'true');
+}
+
+function releaseInert(element: HTMLElement) {
+  const current = inertStates.get(element);
+  if (!current) {
+    return;
+  }
+
+  current.count -= 1;
+  if (current.count > 0) {
+    return;
+  }
+
+  element.inert = current.inert;
+  if (current.inert) {
+    element.setAttribute('inert', '');
+  } else {
+    element.removeAttribute('inert');
+  }
+  if (current.ariaHidden === null) {
+    element.removeAttribute('aria-hidden');
+  } else {
+    element.setAttribute('aria-hidden', current.ariaHidden);
+  }
+  inertStates.delete(element);
+}
+
+function inertOutside(layer: ActiveLayer) {
+  const currentDepth = getLayerDepth(layer);
+  const elements = Array.from(document.body.children).filter((element): element is HTMLElement => {
+    if (
+      !(element instanceof HTMLElement) ||
+      element === layer.root ||
+      element.contains(layer.root) ||
+      layer.root.contains(element) ||
+      ['SCRIPT', 'STYLE', 'LINK'].includes(element.tagName)
+    ) {
+      return false;
+    }
+
+    return !activeLayers.some(
+      (candidate) =>
+        candidate !== layer &&
+        (element === candidate.root || element.contains(candidate.root)) &&
+        getLayerDepth(candidate) > currentDepth,
+    );
+  });
+
+  elements.forEach(acquireInert);
+  return () => elements.forEach(releaseInert);
+}
+
+function inertWithinBoundary(layer: ActiveLayer, boundary: HTMLElement | null) {
+  if (!boundary) return undefined;
+  const elements = Array.from(boundary.children).filter(
+    (element): element is HTMLElement =>
+      element instanceof HTMLElement &&
+      element !== layer.root &&
+      !element.contains(layer.root) &&
+      !layer.root.contains(element),
+  );
+  elements.forEach(acquireInert);
+  return () => elements.forEach(releaseInert);
+}
+
+export function useOverlayBehavior({
+  open,
+  contentRef,
+  rootRef,
+  modalBoundaryRef,
+  triggerRef,
+  onDismiss,
+  modal = false,
+  dismissOnEscape = true,
+  dismissOnInteractOutside = false,
+  initialFocus = modal,
+  restoreFocus = true,
+  isInteractionOutside,
+}: UseOverlayBehaviorOptions) {
+  const onDismissRef = useRef(onDismiss);
+  const isInteractionOutsideRef = useRef(isInteractionOutside);
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+
+  useEffect(() => {
+    isInteractionOutsideRef.current = isInteractionOutside;
+  }, [isInteractionOutside]);
+
+  useEffect(() => {
+    if (!open || typeof document === 'undefined') {
+      return;
+    }
+
+    const content = contentRef.current;
+    if (!content) {
+      return;
+    }
+
+    const previouslyFocused =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const layer = registerLayer(
+      content,
+      rootRef?.current ?? content,
+      triggerRef?.current ?? previouslyFocused,
+    );
+    const releaseDocumentBackground = modal ? inertOutside(layer) : undefined;
+    const releaseBoundary = modal
+      ? inertWithinBoundary(layer, modalBoundaryRef?.current ?? null)
+      : undefined;
+    const focusTimer = initialFocus
+      ? window.setTimeout(() => {
+          const focusableElements = getFocusableElements(content);
+          (focusableElements[0] ?? content).focus();
+        }, 0)
+      : undefined;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isTopmostLayer(layer)) {
+        return;
+      }
+
+      if (event.key === 'Escape' && dismissOnEscape) {
+        event.preventDefault();
+        onDismissRef.current();
+        return;
+      }
+
+      if (!modal || event.key !== 'Tab') {
+        return;
+      }
+
+      const focusableElements = getFocusableElements(content);
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        content.focus();
+        return;
+      }
+
+      const first = focusableElements[0];
+      const last = focusableElements[focusableElements.length - 1];
+      const activeElement = document.activeElement;
+      if (!first || !last) {
+        return;
+      }
+
+      if (event.shiftKey && (activeElement === first || activeElement === content)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    const handleMouseDown = (event: MouseEvent) => {
+      if (!dismissOnInteractOutside || !isTopmostLayer(layer)) {
+        return;
+      }
+
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (
+        content.contains(target) ||
+        triggerRef?.current?.contains(target) ||
+        rootRef?.current?.contains(target)
+      ) {
+        return;
+      }
+      if (isInteractionOutsideRef.current && !isInteractionOutsideRef.current(target)) {
+        return;
+      }
+      onDismissRef.current();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    if (dismissOnInteractOutside) {
+      document.addEventListener('mousedown', handleMouseDown);
+    }
+    const focusReturnTarget = triggerRef?.current ?? previouslyFocused;
+
+    return () => {
+      if (focusTimer !== undefined) {
+        window.clearTimeout(focusTimer);
+      }
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handleMouseDown);
+      releaseBoundary?.();
+      releaseDocumentBackground?.();
+      unregisterLayer(layer);
+      if (restoreFocus) {
+        focusReturnTarget?.focus();
+      }
+    };
+  }, [
+    contentRef,
+    dismissOnEscape,
+    dismissOnInteractOutside,
+    initialFocus,
+    modal,
+    modalBoundaryRef,
+    open,
+    restoreFocus,
+    rootRef,
+    triggerRef,
+  ]);
+}

package/registry/lib/utils.ts

@@ -0,0 +1,205 @@
+import React, { cloneElement, isValidElement } from 'react';
+import { clsx, type ClassValue } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+export { useOverlayBehavior, type UseOverlayBehaviorOptions } from '@/lib/use-overlay-behavior';
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      rounded: [
+        {
+          rounded: ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],
+        },
+      ],
+      'font-size': [
+        {
+          text: [
+            'display-large',
+            'display-medium',
+            'display-small',
+            'headline-large',
+            'headline-medium',
+            'headline-small',
+            'title-large',
+            'title-medium',
+            'title-small',
+            'body-large',
+            'body-medium',
+            'body-small',
+            'label-large',
+            'label-medium',
+            'label-small',
+            'role-hero-title',
+            'role-page-title',
+            'role-section-title',
+            'role-section-lead',
+            'role-panel-title',
+            'role-card-title',
+            'role-eyebrow',
+          ],
+        },
+      ],
+      'text-color': [
+        {
+          text: [
+            'primary',
+            'on-primary',
+            'primary-container',
+            'on-primary-container',
+            'secondary',
+            'on-secondary',
+            'secondary-container',
+            'on-secondary-container',
+            'tertiary',
+            'on-tertiary',
+            'tertiary-container',
+            'on-tertiary-container',
+            'surface',
+            'on-surface',
+            'surface-variant',
+            'on-surface-variant',
+            'surface-container',
+            'surface-container-high',
+            'surface-container-highest',
+            'surface-container-low',
+            'surface-container-lowest',
+            'background',
+            'on-background',
+            'outline',
+            'outline-variant',
+            'outline-weak',
+            'outline-soft',
+            'outline-muted',
+            'outline-subtle',
+            'outline-medium',
+            'outline-strong',
+            'error',
+            'on-error',
+            'error-container',
+            'on-error-container',
+            'success',
+            'on-success',
+            'success-container',
+            'on-success-container',
+            'warning',
+            'on-warning',
+            'warning-container',
+            'on-warning-container',
+            'info',
+            'on-info',
+            'info-container',
+            'on-info-container',
+            'inverse-surface',
+            'inverse-on-surface',
+            'inverse-primary',
+          ],
+        },
+      ],
+    },
+  },
+});
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export const focusRing =
+  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring';
+
+export const focusRingInset =
+  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-focus-ring';
+
+export const stateLayer = {
+  primary: 'hover:bg-primary/[0.08] active:bg-primary/[0.12]',
+  onPrimary: 'hover:bg-on-primary/[0.08] active:bg-on-primary/[0.12]',
+  secondary: 'hover:bg-secondary/[0.08] active:bg-secondary/[0.12]',
+  onSecondary: 'hover:bg-on-secondary/[0.08] active:bg-on-secondary/[0.12]',
+  surface: 'hover:bg-on-surface/[0.08] active:bg-on-surface/[0.12]',
+  surfaceVariant: 'hover:bg-on-surface-variant/[0.08] active:bg-on-surface-variant/[0.12]',
+  error: 'hover:bg-error/[0.08] active:bg-error/[0.12]',
+} as const;
+
+export type StateLayerColor = keyof typeof stateLayer;
+
+export const duration = {
+  short: 'duration-short',
+  medium: 'duration-medium',
+  long: 'duration-long',
+} as const;
+
+export const easing = {
+  standard: 'ease-standard',
+  emphasized: 'ease-emphasized',
+  decelerate: 'ease-decelerate',
+  accelerate: 'ease-accelerate',
+} as const;
+
+export const transition = {
+  fade: 'transition-opacity',
+  scale: 'transition-transform',
+  slide: 'transition-transform',
+  all: 'transition-all',
+  colors: 'transition-colors',
+} as const;
+
+export const animation = {
+  fadeIn: 'animate-fade-in',
+  slideUp: 'animate-slide-up',
+  contentEnter: 'animate-content-enter',
+  stagger: 'animate-stagger',
+  ripple: 'animate-ripple',
+} as const;
+
+// Slot component for asChild pattern - merges props onto child element
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+export const Slot = React.forwardRef<HTMLElement, SlotProps>(({ children, ...props }, ref) => {
+  if (isValidElement(children)) {
+    const childProps = children.props as Record<string, unknown>;
+    return cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+      ...props,
+      ...childProps,
+      ref,
+      className: cn(props.className, childProps.className as string | undefined),
+    });
+  }
+
+  // Development warning for invalid children
+  if (process.env.NODE_ENV !== 'production') {
+    const childType =
+      children === null
+        ? 'null'
+        : children === undefined
+          ? 'undefined'
+          : Array.isArray(children)
+            ? 'array'
+            : typeof children;
+    console.warn(
+      `[Slot] Expected a single React element child for asChild pattern, but received: ${childType}. ` +
+        `The Slot will render nothing. Ensure you pass a single element (e.g., <a>, <Link>) as the child.`,
+    );
+  }
+
+  return null;
+});
+Slot.displayName = 'Slot';
+
+export function composeAsChildClickHandler<E extends HTMLElement>(
+  isDisabled: boolean,
+  ...handlers: Array<((event: React.MouseEvent<E>) => void) | undefined>
+) {
+  return (event: React.MouseEvent<E>) => {
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+
+    handlers.forEach((handler) => {
+      handler?.(event);
+    });
+  };
+}

package/registry/primitives/input.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { getFieldSizeStyles, type FieldSize } from '@/lib/field-size';
+
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+  size?: FieldSize;
+};
+
+/**
+ * Input primitive - a basic styled input element.
+ *
+ * For most cases, use TextField which includes the canonical label and validation contract.
+ * Use this Input primitive when you need lower-level control or custom compositions.
+ */
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, size = 'md', ...props }, ref) => {
+    const fieldSize = getFieldSizeStyles(size);
+
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-control-outline bg-surface text-on-surface ring-offset-surface file:text-body-small file:text-on-surface placeholder:text-on-surface-variant focus-visible:ring-focus-ring flex w-full rounded-sm border file:border-0 file:bg-transparent file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-38',
+          fieldSize.containerHeight,
+          fieldSize.horizontalPadding,
+          fieldSize.valueText,
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';

package/registry/primitives/label.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+  required?: boolean;
+};
+
+/**
+ * Label component for form accessibility.
+ *
+ * For most cases, use TextField which includes a built-in label.
+ * Use this Label component when you need standalone label functionality.
+ */
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, required, children, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-label-large text-on-surface leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-38',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {required && (
+        <span aria-hidden="true" className="text-error ml-1">
+          *
+        </span>
+      )}
+    </label>
+  ),
+);
+Label.displayName = 'Label';