@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/popover.tsx

@@ -0,0 +1,395 @@
+'use client';
+
+import React, { useRef, useId, useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { getPortalLayerStyle } from '@/lib/portal-layer';
+import { cn, focusRing, Slot } from '@/lib/utils';
+import { useControllableState } from '@/lib/use-controllable-state';
+import { useOverlayBehavior } from '@/lib/use-overlay-behavior';
+
+type PopoverAlign = 'start' | 'center' | 'end';
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+
+export interface PopoverProps {
+  trigger: React.ReactNode;
+  content: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  align?: PopoverAlign;
+  side?: PopoverSide;
+  sideOffset?: number;
+  alignOffset?: number;
+  avoidCollisions?: boolean;
+  collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
+  portal?: boolean;
+  className?: string;
+}
+
+export const Popover: React.FC<PopoverProps> = ({
+  trigger,
+  content,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  align = 'center',
+  side = 'bottom',
+  sideOffset = 8,
+  alignOffset = 0,
+  avoidCollisions = true,
+  collisionPadding = 8,
+  portal = true,
+  className,
+}) => {
+  const [isOpen = false, setIsOpen] = useControllableState<boolean>({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [computedPlacement, setComputedPlacement] = useState({ side, align });
+  const [isPositioned, setIsPositioned] = useState(!portal);
+  const popoverId = useId();
+
+  const normalizedPadding = useMemo(() => {
+    if (typeof collisionPadding === 'number') {
+      return {
+        top: collisionPadding,
+        right: collisionPadding,
+        bottom: collisionPadding,
+        left: collisionPadding,
+      };
+    }
+    return {
+      top: collisionPadding.top ?? 8,
+      right: collisionPadding.right ?? 8,
+      bottom: collisionPadding.bottom ?? 8,
+      left: collisionPadding.left ?? 8,
+    };
+  }, [collisionPadding]);
+
+  const handleOpenChange = useCallback(
+    (newOpen: boolean) => {
+      setIsOpen(newOpen);
+    },
+    [setIsOpen],
+  );
+
+  useOverlayBehavior({
+    open: isOpen,
+    contentRef,
+    triggerRef,
+    onDismiss: () => handleOpenChange(false),
+    dismissOnInteractOutside: true,
+  });
+
+  useLayoutEffect(() => {
+    if (!isOpen) {
+      setIsPositioned(!portal);
+      return;
+    }
+
+    if (!triggerRef.current) return;
+
+    const updatePosition = () => {
+      if (!triggerRef.current) return;
+
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const contentWidth = contentRef.current?.offsetWidth || 200;
+      const contentHeight = contentRef.current?.offsetHeight || 160;
+
+      const result = computePopoverPosition(
+        triggerRect,
+        { width: contentWidth, height: contentHeight },
+        {
+          side,
+          align,
+          sideOffset,
+          alignOffset,
+          avoidCollisions,
+          collisionPadding: normalizedPadding,
+        },
+      );
+
+      setPosition({ top: result.top, left: result.left });
+      setComputedPlacement({ side: result.actualSide, align: result.actualAlign });
+      setIsPositioned(true);
+    };
+
+    if (portal) {
+      setIsPositioned(false);
+    }
+
+    updatePosition();
+
+    if (!portal) return;
+
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [align, alignOffset, avoidCollisions, isOpen, normalizedPadding, portal, side, sideOffset]);
+
+  const handleTriggerKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleOpenChange(!isOpen);
+    } else if (e.key === 'ArrowDown' && !isOpen) {
+      e.preventDefault();
+      handleOpenChange(true);
+    }
+  };
+
+  const triggerProps = {
+    'aria-expanded': isOpen,
+    'aria-haspopup': 'dialog' as const,
+    'aria-controls': isOpen ? popoverId : undefined,
+  };
+  const triggerNode = React.isValidElement(trigger) ? (
+    <Slot ref={triggerRef} {...triggerProps}>
+      {React.cloneElement(
+        trigger as React.ReactElement<{
+          onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+          onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+        }>,
+        {
+          onClick: (event) => {
+            const child = trigger as React.ReactElement<{
+              onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+            }>;
+            child.props.onClick?.(event);
+            if (!event.defaultPrevented) handleOpenChange(!isOpen);
+          },
+          onKeyDown: (event) => {
+            const child = trigger as React.ReactElement<{
+              onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
+            }>;
+            child.props.onKeyDown?.(event);
+            if (!event.defaultPrevented) handleTriggerKeyDown(event);
+          },
+        },
+      )}
+    </Slot>
+  ) : (
+    <button
+      ref={triggerRef as React.Ref<HTMLButtonElement>}
+      type="button"
+      onClick={() => handleOpenChange(!isOpen)}
+      onKeyDown={handleTriggerKeyDown}
+      className={cn('inline-flex', focusRing)}
+      {...triggerProps}
+    >
+      {trigger}
+    </button>
+  );
+
+  return (
+    <div className="relative inline-block" ref={containerRef}>
+      {triggerNode}
+
+      {isOpen
+        ? renderPopoverContent({
+            align,
+            className,
+            computedPlacement,
+            content,
+            contentRef,
+            id: popoverId,
+            isPositioned,
+            portal,
+            position,
+            side,
+            trigger: triggerRef.current,
+          })
+        : null}
+    </div>
+  );
+};
+
+function renderPopoverContent({
+  align,
+  className,
+  computedPlacement,
+  content,
+  contentRef,
+  id,
+  isPositioned,
+  portal,
+  position,
+  side,
+  trigger,
+}: {
+  align: PopoverAlign;
+  className?: string;
+  computedPlacement: { side: PopoverSide; align: PopoverAlign };
+  content: React.ReactNode;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  id: string;
+  isPositioned: boolean;
+  portal: boolean;
+  position: { top: number; left: number };
+  side: PopoverSide;
+  trigger: HTMLElement | null;
+}) {
+  const wrapperClassName = portal
+    ? 'fixed z-[var(--z-popover,2000)]'
+    : cn(
+        'absolute z-[var(--z-popover,2000)]',
+        side === 'bottom' && 'top-[calc(100%+var(--spacing-2))]',
+        side === 'top' && 'bottom-[calc(100%+var(--spacing-2))]',
+        side === 'left' && 'right-[calc(100%+var(--spacing-2))]',
+        side === 'right' && 'left-[calc(100%+var(--spacing-2))]',
+        (side === 'top' || side === 'bottom') && align === 'center' && 'left-1/2 -translate-x-1/2',
+        (side === 'top' || side === 'bottom') && align === 'start' && 'left-0',
+        (side === 'top' || side === 'bottom') && align === 'end' && 'right-0',
+        (side === 'left' || side === 'right') && align === 'center' && 'top-1/2 -translate-y-1/2',
+        (side === 'left' || side === 'right') && align === 'start' && 'top-0',
+        (side === 'left' || side === 'right') && align === 'end' && 'bottom-0',
+      );
+
+  const popover = (
+    <div
+      ref={contentRef}
+      id={id}
+      role="dialog"
+      data-side={computedPlacement.side}
+      data-align={computedPlacement.align}
+      className={wrapperClassName}
+      style={
+        portal
+          ? {
+              top: position.top,
+              left: position.left,
+              visibility: isPositioned ? 'visible' : 'hidden',
+              ...getPortalLayerStyle(trigger),
+            }
+          : undefined
+      }
+    >
+      <div
+        className={cn(
+          'animate-surface-enter bg-surface shadow-2 border-outline-soft min-w-40 rounded-sm border py-1',
+          className,
+        )}
+      >
+        {content}
+      </div>
+    </div>
+  );
+
+  if (portal && typeof document !== 'undefined') {
+    return createPortal(popover, document.body);
+  }
+
+  return popover;
+}
+
+function computePopoverPosition(
+  triggerRect: DOMRect,
+  contentRect: { width: number; height: number },
+  options: {
+    side: PopoverSide;
+    align: PopoverAlign;
+    sideOffset: number;
+    alignOffset: number;
+    avoidCollisions: boolean;
+    collisionPadding: { top: number; right: number; bottom: number; left: number };
+  },
+): { top: number; left: number; actualSide: PopoverSide; actualAlign: PopoverAlign } {
+  const { side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding } = options;
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+  const space = {
+    top: triggerRect.top - collisionPadding.top,
+    bottom: viewport.height - triggerRect.bottom - collisionPadding.bottom,
+    left: triggerRect.left - collisionPadding.left,
+    right: viewport.width - triggerRect.right - collisionPadding.right,
+  };
+
+  let actualSide = side;
+  const neededSpace = {
+    top: contentRect.height + sideOffset,
+    bottom: contentRect.height + sideOffset,
+    left: contentRect.width + sideOffset,
+    right: contentRect.width + sideOffset,
+  };
+
+  if (avoidCollisions && space[side] < neededSpace[side]) {
+    const oppositeSide: Record<PopoverSide, PopoverSide> = {
+      top: 'bottom',
+      bottom: 'top',
+      left: 'right',
+      right: 'left',
+    };
+    const opposite = oppositeSide[side];
+    if (space[opposite] > space[side]) {
+      actualSide = opposite;
+    }
+  }
+
+  let top = 0;
+  let left = 0;
+
+  if (actualSide === 'top') {
+    top = triggerRect.top - contentRect.height - sideOffset;
+  } else if (actualSide === 'bottom') {
+    top = triggerRect.bottom + sideOffset;
+  } else if (actualSide === 'left') {
+    left = triggerRect.left - contentRect.width - sideOffset;
+  } else {
+    left = triggerRect.right + sideOffset;
+  }
+
+  let actualAlign = align;
+  if (actualSide === 'top' || actualSide === 'bottom') {
+    if (align === 'start') {
+      left = triggerRect.left + alignOffset;
+    } else if (align === 'center') {
+      left = triggerRect.left + (triggerRect.width - contentRect.width) / 2 + alignOffset;
+    } else {
+      left = triggerRect.right - contentRect.width - alignOffset;
+    }
+
+    if (avoidCollisions) {
+      const minLeft = collisionPadding.left;
+      const maxLeft = viewport.width - contentRect.width - collisionPadding.right;
+      if (left < minLeft) {
+        left = minLeft;
+        actualAlign = 'start';
+      } else if (left > maxLeft) {
+        left = maxLeft;
+        actualAlign = 'end';
+      }
+    }
+  } else {
+    if (align === 'start') {
+      top = triggerRect.top + alignOffset;
+    } else if (align === 'center') {
+      top = triggerRect.top + (triggerRect.height - contentRect.height) / 2 + alignOffset;
+    } else {
+      top = triggerRect.bottom - contentRect.height - alignOffset;
+    }
+
+    if (avoidCollisions) {
+      const minTop = collisionPadding.top;
+      const maxTop = viewport.height - contentRect.height - collisionPadding.bottom;
+      if (top < minTop) {
+        top = minTop;
+        actualAlign = 'start';
+      } else if (top > maxTop) {
+        top = maxTop;
+        actualAlign = 'end';
+      }
+    }
+  }
+
+  return { top, left, actualSide, actualAlign };
+}

package/registry/components/progress.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const progressVariants = cva(
+  'relative w-full overflow-hidden rounded-sm bg-surface-container-highest',
+  {
+    variants: {
+      variant: {
+        linear: 'h-1',
+        circular: 'w-16 h-16',
+      },
+      indeterminate: {
+        true: '',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'linear',
+      indeterminate: false,
+    },
+  },
+);
+
+export type ProgressProps = VariantProps<typeof progressVariants> & {
+  value?: number;
+  variant?: 'linear' | 'circular';
+  indeterminate?: boolean;
+  className?: string;
+};
+
+export const Progress: React.FC<ProgressProps> = ({
+  value = 0,
+  variant = 'linear',
+  indeterminate = false,
+  className,
+}) => {
+  const clampedValue = Math.max(0, Math.min(100, value));
+
+  if (variant === 'circular') {
+    const circumference = 2 * Math.PI * 30;
+    const strokeDashoffset = indeterminate
+      ? undefined
+      : circumference - (clampedValue / 100) * circumference;
+
+    return (
+      <div
+        className={cn('relative h-16 w-16', className)}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={indeterminate ? undefined : clampedValue}
+      >
+        <svg className="h-full w-full" viewBox="0 0 64 64">
+          <circle
+            className="text-surface-container-highest"
+            stroke="currentColor"
+            strokeWidth="4"
+            fill="none"
+            r="30"
+            cx="32"
+            cy="32"
+          />
+          <circle
+            className={cn(
+              'text-primary duration-emphasized transition-all',
+              indeterminate && 'animate-spin',
+            )}
+            stroke="currentColor"
+            strokeWidth="4"
+            fill="none"
+            r="30"
+            cx="32"
+            cy="32"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            style={{
+              transform: 'rotate(-90deg)',
+              transformOrigin: '50% 50%',
+              animation: indeterminate ? 'spin 1s linear infinite' : undefined,
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(progressVariants({ variant, indeterminate, className }))}
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={indeterminate ? undefined : clampedValue}
+    >
+      <div
+        className={cn(
+          'bg-primary duration-emphasized h-full transition-all',
+          indeterminate && 'animate-pulse',
+        )}
+        style={{
+          width: indeterminate ? '100%' : `${clampedValue}%`,
+        }}
+      >
+        {indeterminate && (
+          <div className="bg-primary h-full w-1/3 animate-[progress-indeterminate_1.5s_ease-in-out_infinite]" />
+        )}
+      </div>
+    </div>
+  );
+};

package/registry/components/radio.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import {
+  type SelectionControlSize,
+  selectionControlSizeClasses,
+} from '@/lib/selection-control-size';
+import { Ripple } from '@/components/ui/ripple';
+
+export interface RadioProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size' | 'type'
+> {
+  invalid?: boolean;
+  label?: React.ReactNode;
+  size?: SelectionControlSize;
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      'aria-invalid': ariaInvalid,
+      className,
+      disabled = false,
+      id: providedId,
+      invalid = false,
+      label,
+      size = 'md',
+      ...inputProps
+    },
+    forwardedRef,
+  ) => {
+    const generatedId = React.useId();
+    const id = providedId ?? generatedId;
+    const sizeClasses = selectionControlSizeClasses[size];
+    const resolvedInvalid = invalid || ariaInvalid === true || ariaInvalid === 'true';
+
+    return (
+      <label
+        htmlFor={id}
+        className={cn(
+          'group relative inline-flex cursor-pointer items-center gap-3 select-none',
+          disabled && 'cursor-not-allowed opacity-38',
+          className,
+        )}
+      >
+        <span
+          className={cn('relative flex shrink-0 items-center justify-center', sizeClasses.frame)}
+        >
+          <span
+            aria-hidden="true"
+            className={cn(
+              'absolute inset-0 z-0 overflow-hidden rounded-full transition-colors',
+              'group-hover:bg-state-hover',
+              resolvedInvalid && 'group-hover:bg-state-error',
+            )}
+          >
+            <Ripple
+              center
+              disabled={disabled}
+              className={resolvedInvalid ? 'text-error' : 'text-primary'}
+            />
+          </span>
+
+          <input
+            {...inputProps}
+            ref={forwardedRef}
+            id={id}
+            type="radio"
+            disabled={disabled}
+            aria-invalid={resolvedInvalid || undefined}
+            className="peer sr-only"
+          />
+
+          <span
+            aria-hidden="true"
+            className={cn(
+              'bg-surface relative z-10 flex items-center justify-center rounded-full border-2',
+              sizeClasses.control,
+              'duration-snappy ease-emphasized transition-colors',
+              resolvedInvalid
+                ? 'border-error peer-checked:border-error'
+                : 'border-control-outline group-hover:border-on-surface peer-checked:border-primary',
+              'peer-focus-visible:ring-focus-ring peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2',
+              "after:duration-snappy after:ease-emphasized after:block after:scale-0 after:rounded-full after:transition-transform after:content-['']",
+              sizeClasses.radioDot,
+              resolvedInvalid
+                ? 'after:bg-error peer-checked:after:scale-100'
+                : 'after:bg-primary peer-checked:after:scale-100',
+            )}
+          />
+        </span>
+
+        {label !== undefined && label !== null ? (
+          <span className="text-body-medium text-on-surface leading-none font-medium">{label}</span>
+        ) : null}
+      </label>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';