@unisane/ui 0.1.0-next.b67ebfd0

package/registry/lib/field-size.ts

@@ -0,0 +1,169 @@
+export type FieldSize = 'sm' | 'md' | 'lg';
+
+type FieldSizeStyles = {
+  actionInset: string;
+  actionSize: string;
+  chevronOffset: string;
+  containerHeight: string;
+  externalLabelText: string;
+  filledDisplayPadding: string;
+  filledDisplayFloatingLabel: string;
+  filledFloatingLabel: string;
+  filledInputPadding: string;
+  filledTextareaPadding: string;
+  helperMarginTop: string;
+  helperPaddingX: string;
+  horizontalPadding: string;
+  iconSize: string;
+  labelLeft: string;
+  leadingPadding: string;
+  multilineIconOffset: string;
+  multilineLabelTop: string;
+  multilinePaddingY: string;
+  optionHeight: string;
+  optionHeightPx: number;
+  optionPaddingX: string;
+  optionText: string;
+  passiveTrailingInset: string;
+  passiveTrailingSize: string;
+  searchInputPaddingLeft: string;
+  searchInputPaddingRightWithTrailing: string;
+  searchInputPaddingRightWithoutTrailing: string;
+  searchText: string;
+  searchTriggerPadding: string;
+  segmentText: string;
+  segmentWidth: string;
+  segmentYearWidth: string;
+  selectRestingLabelText: string;
+  textareaMinHeight: string;
+  textareaPaddingY: string;
+  trailingPadding: string;
+  valueText: string;
+};
+
+const FIELD_SIZE_STYLES: Record<FieldSize, FieldSizeStyles> = {
+  sm: {
+    actionInset: 'right-1',
+    actionSize: 'h-6 w-6',
+    chevronOffset: 'right-2.5',
+    containerHeight: 'h-8',
+    externalLabelText: 'text-label-medium',
+    filledDisplayPadding: 'pt-3 pb-0.5',
+    filledDisplayFloatingLabel: 'top-0.5 translate-y-0',
+    filledFloatingLabel: 'top-0.5 translate-y-0',
+    filledInputPadding: 'pt-3.5 pb-0',
+    filledTextareaPadding: 'pt-5 pb-1.5',
+    helperMarginTop: 'mt-1',
+    helperPaddingX: 'px-3',
+    horizontalPadding: 'px-3',
+    iconSize: 'size-icon-sm',
+    labelLeft: 'left-3',
+    leadingPadding: 'pl-3',
+    multilineIconOffset: 'mt-3',
+    multilineLabelTop: 'top-3',
+    multilinePaddingY: 'py-3',
+    optionHeight: 'h-8',
+    optionHeightPx: 32,
+    optionPaddingX: 'px-3',
+    optionText: 'text-label-medium',
+    passiveTrailingInset: 'right-2',
+    passiveTrailingSize: 'h-5 w-5',
+    searchInputPaddingLeft: 'pl-9',
+    searchInputPaddingRightWithTrailing: 'pr-9',
+    searchInputPaddingRightWithoutTrailing: 'pr-3',
+    searchText: 'text-body-small',
+    searchTriggerPadding: 'pl-3',
+    segmentText: 'text-label-medium',
+    segmentWidth: 'w-6',
+    segmentYearWidth: 'w-10',
+    selectRestingLabelText: 'text-label-medium',
+    textareaMinHeight: 'min-h-16',
+    textareaPaddingY: 'py-2.5',
+    trailingPadding: 'pr-3',
+    valueText: 'text-label-medium',
+  },
+  md: {
+    actionInset: 'right-1',
+    actionSize: 'h-7 w-7',
+    chevronOffset: 'right-3',
+    containerHeight: 'h-10',
+    externalLabelText: 'text-label-medium',
+    filledDisplayPadding: 'pt-4 pb-1',
+    filledDisplayFloatingLabel: 'top-0.5 translate-y-0',
+    filledFloatingLabel: 'top-1 translate-y-0',
+    filledInputPadding: 'pt-5 pb-0.5',
+    filledTextareaPadding: 'pt-6 pb-2',
+    helperMarginTop: 'mt-1.5',
+    helperPaddingX: 'px-4',
+    horizontalPadding: 'px-4',
+    iconSize: 'size-icon-sm',
+    labelLeft: 'left-4',
+    leadingPadding: 'pl-4',
+    multilineIconOffset: 'mt-4',
+    multilineLabelTop: 'top-4',
+    multilinePaddingY: 'py-4',
+    optionHeight: 'h-10',
+    optionHeightPx: 40,
+    optionPaddingX: 'px-4',
+    optionText: 'text-body-large',
+    passiveTrailingInset: 'right-2',
+    passiveTrailingSize: 'h-6 w-6',
+    searchInputPaddingLeft: 'pl-10',
+    searchInputPaddingRightWithTrailing: 'pr-11',
+    searchInputPaddingRightWithoutTrailing: 'pr-3',
+    searchText: 'text-body-medium',
+    searchTriggerPadding: 'pl-3',
+    segmentText: 'text-body-large',
+    segmentWidth: 'w-7',
+    segmentYearWidth: 'w-12',
+    selectRestingLabelText: 'text-body-medium',
+    textareaMinHeight: 'min-h-20',
+    textareaPaddingY: 'py-3',
+    trailingPadding: 'pr-4',
+    valueText: 'text-body-large',
+  },
+  lg: {
+    actionInset: 'right-2',
+    actionSize: 'h-8 w-8',
+    chevronOffset: 'right-4',
+    containerHeight: 'h-12',
+    externalLabelText: 'text-label-large',
+    filledDisplayPadding: 'pt-5 pb-1',
+    filledDisplayFloatingLabel: 'top-1 translate-y-0',
+    filledFloatingLabel: 'top-1.5 translate-y-0',
+    filledInputPadding: 'pt-6 pb-1',
+    filledTextareaPadding: 'pt-7 pb-3',
+    helperMarginTop: 'mt-2',
+    helperPaddingX: 'px-5',
+    horizontalPadding: 'px-5',
+    iconSize: 'size-icon-md',
+    labelLeft: 'left-5',
+    leadingPadding: 'pl-5',
+    multilineIconOffset: 'mt-5',
+    multilineLabelTop: 'top-5',
+    multilinePaddingY: 'py-5',
+    optionHeight: 'h-12',
+    optionHeightPx: 48,
+    optionPaddingX: 'px-5',
+    optionText: 'text-body-large',
+    passiveTrailingInset: 'right-3',
+    passiveTrailingSize: 'h-6 w-6',
+    searchInputPaddingLeft: 'pl-12',
+    searchInputPaddingRightWithTrailing: 'pr-12',
+    searchInputPaddingRightWithoutTrailing: 'pr-4',
+    searchText: 'text-body-large',
+    searchTriggerPadding: 'pl-4',
+    segmentText: 'text-body-large',
+    segmentWidth: 'w-8',
+    segmentYearWidth: 'w-14',
+    selectRestingLabelText: 'text-body-large',
+    textareaMinHeight: 'min-h-24',
+    textareaPaddingY: 'py-4',
+    trailingPadding: 'pr-5',
+    valueText: 'text-body-large',
+  },
+};
+
+export function getFieldSizeStyles(size: FieldSize = 'md'): FieldSizeStyles {
+  return FIELD_SIZE_STYLES[size];
+}

package/registry/lib/navigation-action.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import React, { useCallback } from 'react';
+import { useControllableState } from '@/lib/use-controllable-state';
+import type {
+  NavigationItem,
+  NavigationLinkRenderer,
+  NavigationPresentationProps,
+} from '@/types/navigation';
+
+interface NavigationActionProps {
+  item: NavigationItem;
+  active: boolean;
+  className: string;
+  children: React.ReactNode;
+  renderLink?: NavigationLinkRenderer;
+  onActivate: (item: NavigationItem) => void;
+  ariaLabel?: string;
+  title?: string;
+  onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+}
+
+export function NavigationAction({
+  item,
+  active,
+  className,
+  children,
+  renderLink,
+  onActivate,
+  ariaLabel,
+  title,
+  onMouseEnter,
+}: NavigationActionProps) {
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (item.disabled) {
+      event.preventDefault();
+      return;
+    }
+    onActivate(item);
+  };
+
+  const commonProps = {
+    className,
+    onClick: handleClick,
+    'aria-current': active ? ('page' as const) : undefined,
+    'aria-disabled': item.disabled || undefined,
+    'aria-label': ariaLabel,
+    title,
+    onMouseEnter,
+  };
+
+  if (item.href && !item.disabled && renderLink) {
+    return renderLink(item, {
+      ...commonProps,
+      href: item.href,
+      target: item.external ? '_blank' : undefined,
+      rel: item.external ? 'noopener noreferrer' : undefined,
+      children,
+    });
+  }
+
+  if (item.href) {
+    return (
+      <a
+        {...commonProps}
+        href={item.disabled ? undefined : item.href}
+        target={item.external ? '_blank' : undefined}
+        rel={item.external ? 'noopener noreferrer' : undefined}
+        tabIndex={item.disabled ? -1 : undefined}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button {...commonProps} type="button" disabled={item.disabled}>
+      {children}
+    </button>
+  );
+}
+
+export function useNavigationSelection({
+  value,
+  defaultValue = null,
+  onValueChange,
+  onItemSelect,
+}: Pick<NavigationPresentationProps, 'value' | 'defaultValue' | 'onValueChange' | 'onItemSelect'>) {
+  const [currentValue, setCurrentValue] = useControllableState<string | null>({
+    value,
+    defaultValue,
+    onChange: onValueChange,
+  });
+
+  const selectItem = useCallback(
+    (item: NavigationItem) => {
+      if (item.disabled) return;
+      setCurrentValue(item.id);
+      onItemSelect?.(item);
+    },
+    [onItemSelect, setCurrentValue],
+  );
+
+  return { currentValue, selectItem };
+}
+
+export function getVisibleNavigationItems(items: NavigationItem[]) {
+  return items.filter((item) => !item.hidden);
+}

package/registry/lib/navigation-visuals.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { Icon, type IconProps } from '@/components/ui/icon';
+
+export interface NavigationIconProps {
+  icon: React.ReactNode | string;
+  active?: boolean;
+  size?: NonNullable<IconProps['size']>;
+  className?: string;
+}
+
+export function NavigationIcon({
+  icon,
+  active = false,
+  size = 'sm',
+  className,
+}: NavigationIconProps) {
+  if (typeof icon === 'string') {
+    return <Icon symbol={icon} filled={active} size={size} className={className} />;
+  }
+
+  return <>{icon}</>;
+}
+
+export function getNavigationRailItemClasses(disabled?: boolean, className?: string) {
+  return cn(
+    'relative flex min-h-12 w-full cursor-pointer flex-col items-center gap-0.5 rounded-button py-1 outline-none select-none',
+    'focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2',
+    disabled && 'pointer-events-none cursor-not-allowed opacity-38',
+    className,
+  );
+}
+
+interface NavigationRailItemContentProps {
+  icon: React.ReactNode | string;
+  activeIcon?: React.ReactNode | string;
+  badge?: string | number;
+  label: string;
+  showLabel?: boolean;
+  active: boolean;
+  disabled?: boolean;
+  ripple?: React.ReactNode;
+}
+
+export function NavigationRailItemContent({
+  icon,
+  activeIcon,
+  badge,
+  label,
+  showLabel = true,
+  active,
+  disabled,
+  ripple,
+}: NavigationRailItemContentProps) {
+  return (
+    <>
+      <div
+        className="relative flex items-center justify-center"
+        data-disabled={disabled ? 'true' : undefined}
+      >
+        <div
+          className={cn(
+            'rounded-button duration-medium ease-emphasized relative flex h-8 w-14 items-center justify-center overflow-hidden transition-all',
+            active
+              ? 'bg-state-selected text-on-surface'
+              : 'text-on-surface-variant hover:bg-state-hover bg-transparent',
+          )}
+        >
+          {ripple}
+          <span className="relative z-10 flex items-center justify-center">
+            <NavigationIcon
+              icon={active && activeIcon ? activeIcon : icon}
+              active={active}
+              size="md"
+            />
+          </span>
+        </div>
+
+        {badge !== undefined && (
+          <span
+            className={cn(
+              'bg-error text-on-error ring-surface text-label-small pointer-events-none absolute -top-0.5 -right-0.5 z-20 flex h-3 min-w-3 items-center justify-center rounded-full px-0.5 leading-none font-medium ring-1',
+              typeof badge === 'number' && badge < 10 && 'h-2 min-w-2 p-0.5',
+            )}
+            role="status"
+            aria-label={typeof badge === 'number' ? `${badge} notifications` : String(badge)}
+          >
+            {badge}
+          </span>
+        )}
+      </div>
+
+      {showLabel ? (
+        <span
+          className={cn(
+            'text-label-small duration-short max-w-full px-0.5 text-center transition-colors',
+            active ? 'text-on-surface font-bold' : 'text-on-surface-variant font-medium',
+          )}
+        >
+          {label}
+        </span>
+      ) : null}
+    </>
+  );
+}
+
+export function getNavigationDrawerItemClasses(args: {
+  active?: boolean;
+  disabled?: boolean;
+  className?: string;
+}) {
+  const { active, disabled, className } = args;
+
+  return cn(
+    'relative flex w-full min-h-10 items-center justify-start gap-3 rounded-button px-4 py-2',
+    'text-body-medium text-left transition-colors duration-short select-none overflow-hidden outline-none',
+    'focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset',
+    active
+      ? 'bg-state-selected text-on-surface font-medium'
+      : 'text-on-surface-variant font-medium hover:bg-state-hover hover:text-on-surface',
+    disabled && 'opacity-38 cursor-not-allowed pointer-events-none',
+    className,
+  );
+}
+
+interface NavigationDrawerItemContentProps {
+  icon?: React.ReactNode | string;
+  activeIcon?: React.ReactNode | string;
+  badge?: React.ReactNode | string | number;
+  active?: boolean;
+  disabled?: boolean;
+  children: React.ReactNode;
+  ripple?: React.ReactNode;
+}
+
+export function NavigationDrawerItemContent({
+  icon,
+  activeIcon,
+  badge,
+  active,
+  children,
+  ripple,
+}: NavigationDrawerItemContentProps) {
+  return (
+    <>
+      {ripple}
+
+      {icon && (
+        <span className="size-icon-sm relative z-10 flex shrink-0 items-center justify-center">
+          <NavigationIcon
+            icon={active && activeIcon ? activeIcon : icon}
+            active={!!active}
+            size="sm"
+          />
+        </span>
+      )}
+
+      <span className="relative z-10 flex-1 truncate text-left">{children}</span>
+
+      {badge && (
+        <span className="relative z-10 ml-auto">
+          {typeof badge === 'string' || typeof badge === 'number' ? (
+            <span className="text-label-small text-on-surface-variant inline-block min-w-5 px-1.5 py-0.5 text-center font-medium">
+              {badge}
+            </span>
+          ) : (
+            badge
+          )}
+        </span>
+      )}
+    </>
+  );
+}

package/registry/lib/portal-layer.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+
+const MODAL_LAYER_SELECTOR = '[role="dialog"][aria-modal="true"]';
+
+export function getPortalLayerStyle(anchor: HTMLElement | null): React.CSSProperties | undefined {
+  if (!anchor) {
+    return undefined;
+  }
+
+  if (anchor.closest(MODAL_LAYER_SELECTOR)) {
+    return {
+      zIndex: 'calc(var(--z-modal, 3000) + 10)',
+    };
+  }
+
+  return undefined;
+}

package/registry/lib/selection-control-size.ts

@@ -0,0 +1,24 @@
+export type SelectionControlSize = 'sm' | 'md';
+
+export const selectionControlSizeClasses: Record<
+  SelectionControlSize,
+  {
+    control: string;
+    frame: string;
+    icon: string;
+    radioDot: string;
+  }
+> = {
+  sm: {
+    control: 'h-[18px] w-[18px]',
+    frame: 'h-7 w-7',
+    icon: 'h-[18px] w-[18px] p-[3px]',
+    radioDot: 'after:h-2 after:w-2',
+  },
+  md: {
+    control: 'size-icon-sm',
+    frame: 'h-10 w-10',
+    icon: 'size-icon-sm p-0.5',
+    radioDot: 'after:h-2.5 after:w-2.5',
+  },
+};

package/registry/lib/typography-roles.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+
+export const typographyRoleClasses = {
+  heroTitle: 'text-role-hero-title',
+  pageTitle: 'text-role-page-title',
+  sectionTitle: 'text-role-section-title',
+  sectionLead: 'text-role-section-lead',
+  panelTitle: 'text-role-panel-title',
+  cardTitle: 'text-role-card-title',
+  eyebrow: 'text-role-eyebrow',
+} as const;
+
+export type TypographyRole = keyof typeof typographyRoleClasses;
+
+export const typographyRoleDefaultTags = {
+  heroTitle: 'h1',
+  pageTitle: 'h1',
+  sectionTitle: 'h2',
+  sectionLead: 'p',
+  panelTitle: 'h3',
+  cardTitle: 'h3',
+  eyebrow: 'p',
+} as const satisfies Record<TypographyRole, React.ElementType>;

package/registry/lib/use-anchored-overlay-position.ts

@@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+
+export type AnchoredOverlaySide = 'top' | 'bottom';
+
+export interface UseAnchoredOverlayPositionOptions {
+  open: boolean;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLElement | null>;
+  portal?: boolean;
+  minimumWidth?: number;
+  estimatedHeight?: number;
+  sideOffset?: number;
+  collisionPadding?: number;
+}
+
+export interface AnchoredOverlayPosition {
+  top: number;
+  left: number;
+  width: number;
+  side: AnchoredOverlaySide;
+  positioned: boolean;
+}
+
+export function useAnchoredOverlayPosition({
+  open,
+  anchorRef,
+  contentRef,
+  portal = true,
+  minimumWidth = 320,
+  estimatedHeight = 360,
+  sideOffset = 8,
+  collisionPadding = 8,
+}: UseAnchoredOverlayPositionOptions): AnchoredOverlayPosition {
+  const [position, setPosition] = React.useState<AnchoredOverlayPosition>({
+    top: 0,
+    left: 0,
+    width: minimumWidth,
+    side: 'bottom',
+    positioned: !portal,
+  });
+
+  const updatePosition = React.useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor || typeof window === 'undefined') return;
+
+    const rect = anchor.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const availableWidth = Math.max(0, viewportWidth - collisionPadding * 2);
+    const width = Math.min(Math.max(rect.width, minimumWidth), availableWidth);
+    const left = Math.min(
+      Math.max(collisionPadding, rect.left),
+      Math.max(collisionPadding, viewportWidth - width - collisionPadding),
+    );
+    const contentHeight = contentRef.current?.offsetHeight || estimatedHeight;
+    const spaceBelow = viewportHeight - rect.bottom - collisionPadding;
+    const spaceAbove = rect.top - collisionPadding;
+    const side: AnchoredOverlaySide =
+      spaceBelow < contentHeight + sideOffset && spaceAbove > spaceBelow ? 'top' : 'bottom';
+    const preferredTop =
+      side === 'top' ? rect.top - contentHeight - sideOffset : rect.bottom + sideOffset;
+    const top = Math.min(
+      Math.max(collisionPadding, preferredTop),
+      Math.max(collisionPadding, viewportHeight - contentHeight - collisionPadding),
+    );
+
+    setPosition({ top, left, width, side, positioned: true });
+  }, [anchorRef, collisionPadding, contentRef, estimatedHeight, minimumWidth, sideOffset]);
+
+  React.useLayoutEffect(() => {
+    if (!portal) {
+      setPosition((current) => ({ ...current, positioned: true }));
+      return;
+    }
+    if (!open) {
+      setPosition((current) => ({ ...current, positioned: false }));
+      return;
+    }
+
+    updatePosition();
+    const frame = window.requestAnimationFrame(updatePosition);
+    window.addEventListener('resize', updatePosition);
+    window.addEventListener('scroll', updatePosition, true);
+
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener('scroll', updatePosition, true);
+    };
+  }, [open, portal, updatePosition]);
+
+  return position;
+}

package/registry/lib/use-controllable-state.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+
+type UseControllableStateProps<T> = {
+  value?: T;
+  defaultValue?: T;
+  onChange?: (value: T) => void;
+};
+
+export function useControllableState<T>({
+  value,
+  defaultValue,
+  onChange,
+}: UseControllableStateProps<T>) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<T | undefined>(defaultValue);
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? value : uncontrolledValue;
+
+  const setValue = React.useCallback(
+    (nextValue: T) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange],
+  );
+
+  return [currentValue, setValue] as const;
+}

package/registry/lib/use-field-state.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { useId, type ReactNode } from 'react';
+
+type UseFieldStateOptions = {
+  id?: string;
+  idPrefix: string;
+  helperText?: ReactNode;
+  active?: boolean;
+  hasValue?: boolean;
+  forceFloating?: boolean;
+};
+
+export function useFieldState({
+  id,
+  idPrefix,
+  helperText,
+  active = false,
+  hasValue = false,
+  forceFloating = false,
+}: UseFieldStateOptions) {
+  const generatedId = useId();
+  const fieldId = id ?? `${idPrefix}-${generatedId}`;
+  const helperId = helperText ? `${fieldId}-helper` : undefined;
+  const isFloating = forceFloating || active || hasValue;
+
+  return {
+    fieldId,
+    helperId,
+    isFloating,
+  };
+}