@unisane/ui 0.1.0-next.b67ebfd0

package/registry/components/typography.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  typographyRoleClasses,
+  typographyRoleDefaultTags,
+  type TypographyRole,
+} from '@/lib/typography-roles';
+import { cn } from '@/lib/utils';
+
+const typographyVariants = cva('text-on-surface', {
+  variants: {
+    variant: {
+      displayLarge: 'text-display-large',
+      displayMedium: 'text-display-medium',
+      displaySmall: 'text-display-small',
+      headlineLarge: 'text-headline-large',
+      headlineMedium: 'text-headline-medium',
+      headlineSmall: 'text-headline-small',
+      titleLarge: 'text-title-large',
+      titleMedium: 'text-title-medium',
+      titleSmall: 'text-title-small',
+      bodyLarge: 'text-body-large',
+      bodyMedium: 'text-body-medium',
+      bodySmall: 'text-body-small',
+      labelLarge: 'text-label-large',
+      labelMedium: 'text-label-medium',
+      labelSmall: 'text-label-small',
+    },
+  },
+  defaultVariants: {
+    variant: 'bodyLarge',
+  },
+});
+
+export type TypographyScale = NonNullable<VariantProps<typeof typographyVariants>['variant']>;
+export type TypographyVariant = TypographyScale | TypographyRole;
+
+type BaseTypographyProps = React.HTMLAttributes<HTMLElement> & {
+  component?: React.ElementType;
+};
+
+export type TypographyProps = BaseTypographyProps & {
+  variant?: TypographyVariant;
+};
+
+const defaultTags: Record<TypographyScale, React.ElementType> = {
+  displayLarge: 'h1',
+  displayMedium: 'h2',
+  displaySmall: 'h3',
+  headlineLarge: 'h4',
+  headlineMedium: 'h5',
+  headlineSmall: 'h6',
+  titleLarge: 'p',
+  titleMedium: 'p',
+  titleSmall: 'p',
+  bodyLarge: 'p',
+  bodyMedium: 'p',
+  bodySmall: 'p',
+  labelLarge: 'span',
+  labelMedium: 'span',
+  labelSmall: 'span',
+};
+
+function isTypographyRole(variant: TypographyVariant): variant is TypographyRole {
+  return variant in typographyRoleClasses;
+}
+
+export const Typography: React.FC<TypographyProps> = ({
+  variant = 'bodyLarge',
+  component,
+  className,
+  children,
+  ...props
+}) => {
+  const role = isTypographyRole(variant) ? variant : undefined;
+  const scale: TypographyScale | undefined = role ? undefined : (variant as TypographyScale);
+  const Component =
+    component ||
+    (role ? typographyRoleDefaultTags[role] : defaultTags[scale ?? 'bodyLarge']) ||
+    'p';
+  return (
+    <Component
+      className={cn(
+        role ? 'text-on-surface' : typographyVariants({ variant: scale }),
+        role && typographyRoleClasses[role],
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export type { TypographyRole };

package/registry/hooks/use-scroll-lock.ts

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Hook to lock body scroll while preventing layout shift.
+ * Calculates scrollbar width and adds equivalent padding to compensate.
+ */
+export function useScrollLock(locked: boolean) {
+  const scrollbarWidthRef = useRef(0);
+
+  useEffect(() => {
+    if (locked) {
+      // Calculate scrollbar width before hiding it
+      scrollbarWidthRef.current = window.innerWidth - document.documentElement.clientWidth;
+
+      // Store original styles
+      const originalOverflow = document.body.style.overflow;
+      const originalPaddingRight = document.body.style.paddingRight;
+
+      // Apply scroll lock with compensation
+      document.body.style.overflow = 'hidden';
+      if (scrollbarWidthRef.current > 0) {
+        document.body.style.paddingRight = `${scrollbarWidthRef.current}px`;
+      }
+
+      return () => {
+        // Restore original styles
+        document.body.style.overflow = originalOverflow;
+        document.body.style.paddingRight = originalPaddingRight;
+      };
+    }
+  }, [locked]);
+
+  return scrollbarWidthRef.current;
+}

package/registry/layout/action-cluster.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface ActionClusterProps extends React.HTMLAttributes<HTMLDivElement> {
+  align?: 'start' | 'center' | 'end' | 'stretch';
+  collapse?: 'sm' | 'md' | 'never';
+}
+
+const alignClasses = {
+  start: 'items-start justify-start',
+  center: 'items-center justify-center',
+  end: 'items-end justify-end',
+  stretch: 'items-stretch justify-start',
+} as const;
+
+const collapseClasses = {
+  sm: 'flex-col sm:flex-row [&>*]:w-full sm:[&>*]:w-auto',
+  md: 'flex-col md:flex-row [&>*]:w-full md:[&>*]:w-auto',
+  never: 'flex-row flex-wrap',
+} as const;
+
+export const ActionCluster = React.forwardRef<HTMLDivElement, ActionClusterProps>(
+  ({ align = 'start', collapse = 'sm', className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'gap-layout-cluster-gap flex min-w-0',
+          alignClasses[align],
+          collapseClasses[collapse],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+ActionCluster.displayName = 'ActionCluster';

package/registry/layout/app-layout.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface AppLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  topBar?: React.ReactNode;
+  bottomBar?: React.ReactNode;
+  fab?: React.ReactNode;
+  navigation?: React.ReactNode;
+  secondaryNavigation?: React.ReactNode;
+  mobileNavigation?: React.ReactNode;
+  children: React.ReactNode;
+  mainRef?: React.RefObject<HTMLElement | null>;
+  disableScroll?: boolean;
+}
+
+export const AppLayout: React.FC<AppLayoutProps> = ({
+  topBar,
+  bottomBar,
+  fab,
+  navigation,
+  secondaryNavigation,
+  mobileNavigation,
+  children,
+  className,
+  mainRef,
+  disableScroll = false,
+  ...props
+}) => {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'bg-surface text-on-surface relative isolate flex h-screen min-h-0 w-full flex-col overflow-hidden',
+        className,
+      )}
+    >
+      {mobileNavigation}
+
+      {topBar && <div className="relative z-30 shrink-0">{topBar}</div>}
+
+      <div className="relative z-0 flex min-h-0 flex-1 overflow-hidden">
+        {navigation && (
+          <div className="medium:flex relative z-40 hidden shrink-0">{navigation}</div>
+        )}
+
+        {secondaryNavigation && (
+          <div className="expanded:block relative z-10 hidden shrink-0">{secondaryNavigation}</div>
+        )}
+
+        <main
+          ref={mainRef as React.RefObject<HTMLElement>}
+          className={cn(
+            'bg-surface relative z-0 flex min-h-0 min-w-0 flex-1 flex-col',
+            disableScroll ? 'overflow-hidden' : 'overflow-y-auto scroll-smooth',
+          )}
+        >
+          <div className={cn('flex-1', disableScroll ? 'flex flex-col overflow-hidden' : '')}>
+            {children}
+          </div>
+
+          {fab && (
+            <div
+              className={cn(
+                'pointer-events-auto z-40',
+                'large:bottom-6 large:right-6 fixed right-4 bottom-6',
+                disableScroll
+                  ? 'absolute'
+                  : 'medium:sticky medium:float-right medium:mr-6 medium:mb-6',
+              )}
+            >
+              {fab}
+            </div>
+          )}
+        </main>
+      </div>
+
+      {bottomBar && <div className="relative z-30 shrink-0">{bottomBar}</div>}
+    </div>
+  );
+};

package/registry/layout/appearance-provider.tsx

@@ -0,0 +1,367 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+export type AppearanceMode = 'light' | 'dark' | 'system';
+export type Density = 'compact' | 'standard' | 'comfortable' | 'dense';
+export type ContrastLevel = 'standard' | 'medium' | 'high';
+export type RadiusTheme = 'none' | 'minimal' | 'sharp' | 'standard' | 'soft';
+export type ActionShape = 'standard' | 'full';
+export type Elevation = 'flat' | 'subtle' | 'standard' | 'pronounced';
+
+export type AppearanceAxis =
+  | 'mode'
+  | 'density'
+  | 'contrast'
+  | 'radius'
+  | 'actionShape'
+  | 'elevation';
+
+export interface AppearancePreferences {
+  mode: AppearanceMode;
+  density: Density;
+  contrast: ContrastLevel;
+  radius: RadiusTheme;
+  actionShape: ActionShape;
+  elevation: Elevation;
+}
+
+export type AppearancePersistence = 'none' | 'localStorage' | 'cookie';
+
+const DEFAULT_PREFERENCES: AppearancePreferences = {
+  mode: 'system',
+  density: 'standard',
+  contrast: 'standard',
+  radius: 'standard',
+  actionShape: 'standard',
+  elevation: 'standard',
+};
+
+const VALUES: { [K in AppearanceAxis]: readonly AppearancePreferences[K][] } = {
+  mode: ['light', 'dark', 'system'],
+  density: ['compact', 'standard', 'comfortable', 'dense'],
+  contrast: ['standard', 'medium', 'high'],
+  radius: ['none', 'minimal', 'sharp', 'standard', 'soft'],
+  actionShape: ['standard', 'full'],
+  elevation: ['flat', 'subtle', 'standard', 'pronounced'],
+};
+
+const ATTRIBUTES: Record<AppearanceAxis, string> = {
+  mode: 'data-theme-mode',
+  density: 'data-density',
+  contrast: 'data-contrast',
+  radius: 'data-radius',
+  actionShape: 'data-action-shape',
+  elevation: 'data-elevation',
+};
+
+const DEFAULT_PERSISTENCE_KEY = 'unisane-appearance';
+
+function isValidPreference<K extends AppearanceAxis>(
+  axis: K,
+  value: unknown,
+): value is AppearancePreferences[K] {
+  return typeof value === 'string' && (VALUES[axis] as readonly string[]).includes(value);
+}
+
+function resolveMode(mode: AppearanceMode): 'light' | 'dark' {
+  if (mode === 'system') {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return mode;
+}
+
+function applyMode(mode: AppearanceMode): 'light' | 'dark' {
+  const resolved = resolveMode(mode);
+  const root = document.documentElement;
+  root.classList.toggle('dark', resolved === 'dark');
+  root.style.colorScheme = resolved;
+  root.setAttribute(ATTRIBUTES.mode, mode);
+  return resolved;
+}
+
+function applyPreference<K extends AppearanceAxis>(axis: K, value: AppearancePreferences[K]) {
+  if (axis === 'mode') {
+    return applyMode(value as AppearanceMode);
+  }
+  document.documentElement.setAttribute(ATTRIBUTES[axis], value);
+  return undefined;
+}
+
+function readCookie(name: string): string | null {
+  const prefix = `${encodeURIComponent(name)}=`;
+  for (const part of document.cookie.split(';')) {
+    const candidate = part.trim();
+    if (candidate.startsWith(prefix)) {
+      return decodeURIComponent(candidate.slice(prefix.length));
+    }
+  }
+  return null;
+}
+
+function readPersistedRaw(persistence: AppearancePersistence, key: string): string | null {
+  try {
+    if (persistence === 'localStorage') return localStorage.getItem(key);
+    if (persistence === 'cookie') return readCookie(key);
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+function parsePersistedPreferences(raw: string | null): Partial<AppearancePreferences> {
+  if (!raw) return {};
+  try {
+    const parsed: unknown = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return {};
+    const record = parsed as Record<string, unknown>;
+    const result: Partial<AppearancePreferences> = {};
+    for (const axis of Object.keys(VALUES) as AppearanceAxis[]) {
+      if (isValidPreference(axis, record[axis])) {
+        (result as Record<string, string>)[axis] = record[axis];
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+function writePersistedPreferences(
+  persistence: AppearancePersistence,
+  key: string,
+  values: Partial<AppearancePreferences>,
+  cookieMaxAge: number,
+) {
+  if (persistence === 'none') return;
+  const serialized = JSON.stringify(values);
+  try {
+    if (persistence === 'localStorage') {
+      localStorage.setItem(key, serialized);
+    } else {
+      document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(serialized)}; Path=/; Max-Age=${cookieMaxAge}; SameSite=Lax`;
+    }
+  } catch {
+    // Storage can be unavailable in privacy-restricted browser contexts.
+  }
+}
+
+function clearPersistedPreferences(persistence: AppearancePersistence, key: string) {
+  try {
+    if (persistence === 'localStorage') {
+      localStorage.removeItem(key);
+    } else if (persistence === 'cookie') {
+      document.cookie = `${encodeURIComponent(key)}=; Path=/; Max-Age=0; SameSite=Lax`;
+    }
+  } catch {
+    // Storage can be unavailable in privacy-restricted browser contexts.
+  }
+}
+
+export function clearStoredAppearance(
+  persistenceKey = DEFAULT_PERSISTENCE_KEY,
+  persistence: AppearancePersistence = 'localStorage',
+) {
+  if (typeof document === 'undefined') return;
+  clearPersistedPreferences(persistence, persistenceKey);
+}
+
+function readDomPreferences(enabledAxes: readonly AppearanceAxis[]) {
+  const result: Partial<AppearancePreferences> = {};
+  const root = document.documentElement;
+  for (const axis of enabledAxes) {
+    const value = root.getAttribute(ATTRIBUTES[axis]);
+    if (isValidPreference(axis, value)) {
+      (result as Record<string, string>)[axis] = value;
+    }
+  }
+  return result;
+}
+
+function selectEnabledPreferences(
+  source: Partial<AppearancePreferences>,
+  enabledAxes: readonly AppearanceAxis[],
+) {
+  const selected: Partial<AppearancePreferences> = {};
+  for (const axis of enabledAxes) {
+    const value = source[axis];
+    if (isValidPreference(axis, value)) {
+      (selected as Record<string, string>)[axis] = value;
+    }
+  }
+  return selected;
+}
+
+interface AppearanceContextValue {
+  enabledAxes: readonly AppearanceAxis[];
+  preferences: AppearancePreferences;
+  resolvedMode: 'light' | 'dark';
+  isEnabled: (axis: AppearanceAxis) => boolean;
+  setPreference: <K extends AppearanceAxis>(axis: K, value: AppearancePreferences[K]) => void;
+  resetPreferences: () => void;
+}
+
+const AppearanceContext = createContext<AppearanceContextValue | undefined>(undefined);
+
+export interface AppearanceProviderProps {
+  children: React.ReactNode;
+  enabledAxes: readonly AppearanceAxis[];
+  defaults?: Partial<AppearancePreferences>;
+  persistence?: AppearancePersistence;
+  persistenceKey?: string;
+  cookieMaxAge?: number;
+}
+
+export function AppearanceProvider({
+  children,
+  enabledAxes,
+  defaults,
+  persistence = 'none',
+  persistenceKey = DEFAULT_PERSISTENCE_KEY,
+  cookieMaxAge = 60 * 60 * 24 * 365,
+}: AppearanceProviderProps) {
+  const normalizedAxes = useMemo(() => Array.from(new Set(enabledAxes)), [enabledAxes]);
+  const configuredDefaults = useMemo(() => ({ ...DEFAULT_PREFERENCES, ...defaults }), [defaults]);
+  const [preferences, setPreferences] = useState<AppearancePreferences>(configuredDefaults);
+  const [resolvedMode, setResolvedMode] = useState<'light' | 'dark'>('light');
+
+  const isEnabled = useCallback(
+    (axis: AppearanceAxis) => normalizedAxes.includes(axis),
+    [normalizedAxes],
+  );
+
+  useEffect(() => {
+    const dom = readDomPreferences(normalizedAxes);
+    const stored = selectEnabledPreferences(
+      parsePersistedPreferences(readPersistedRaw(persistence, persistenceKey)),
+      normalizedAxes,
+    );
+    const next = { ...configuredDefaults, ...dom, ...stored };
+    setPreferences(next);
+
+    for (const axis of normalizedAxes) {
+      const resolved = applyPreference(axis, next[axis] as never);
+      if (axis === 'mode' && resolved) setResolvedMode(resolved);
+    }
+  }, [configuredDefaults, normalizedAxes, persistence, persistenceKey]);
+
+  const persistCurrent = useCallback(
+    (next: AppearancePreferences) => {
+      writePersistedPreferences(
+        persistence,
+        persistenceKey,
+        selectEnabledPreferences(next, normalizedAxes),
+        cookieMaxAge,
+      );
+    },
+    [cookieMaxAge, normalizedAxes, persistence, persistenceKey],
+  );
+
+  const setPreference = useCallback(
+    <K extends AppearanceAxis>(axis: K, value: AppearancePreferences[K]) => {
+      if (!isEnabled(axis)) {
+        console.warn(`Appearance axis "${axis}" is not enabled.`);
+        return;
+      }
+      if (!isValidPreference(axis, value)) {
+        console.warn(`Invalid ${axis} value "${String(value)}".`);
+        return;
+      }
+      setPreferences((current) => {
+        const next = { ...current, [axis]: value };
+        persistCurrent(next);
+        return next;
+      });
+      const resolved = applyPreference(axis, value);
+      if (axis === 'mode' && resolved) setResolvedMode(resolved);
+    },
+    [isEnabled, persistCurrent],
+  );
+
+  const resetPreferences = useCallback(() => {
+    clearPersistedPreferences(persistence, persistenceKey);
+    setPreferences(configuredDefaults);
+    for (const axis of normalizedAxes) {
+      const resolved = applyPreference(axis, configuredDefaults[axis] as never);
+      if (axis === 'mode' && resolved) setResolvedMode(resolved);
+    }
+  }, [configuredDefaults, normalizedAxes, persistence, persistenceKey]);
+
+  useEffect(() => {
+    if (!isEnabled('mode') || preferences.mode !== 'system') return;
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const onChange = () => setResolvedMode(applyMode('system'));
+    media.addEventListener('change', onChange);
+    return () => media.removeEventListener('change', onChange);
+  }, [isEnabled, preferences.mode]);
+
+  const value = useMemo<AppearanceContextValue>(
+    () => ({
+      enabledAxes: normalizedAxes,
+      preferences,
+      resolvedMode,
+      isEnabled,
+      setPreference,
+      resetPreferences,
+    }),
+    [isEnabled, normalizedAxes, preferences, resetPreferences, resolvedMode, setPreference],
+  );
+
+  return <AppearanceContext.Provider value={value}>{children}</AppearanceContext.Provider>;
+}
+
+export function useAppearance() {
+  const context = useContext(AppearanceContext);
+  if (!context) throw new Error('useAppearance must be used within an AppearanceProvider');
+  return context;
+}
+
+export function useAppearancePreference<K extends AppearanceAxis>(axis: K) {
+  const { preferences, setPreference, isEnabled } = useAppearance();
+  const setValue = useCallback(
+    (value: AppearancePreferences[K]) => setPreference(axis, value),
+    [axis, setPreference],
+  );
+  return { value: preferences[axis], setValue, enabled: isEnabled(axis) };
+}
+
+export function useMode() {
+  const { value, setValue, enabled } = useAppearancePreference('mode');
+  const { resolvedMode } = useAppearance();
+  return { mode: value, setMode: setValue, resolvedMode, enabled };
+}
+
+export function useDensity() {
+  const { value, setValue, enabled } = useAppearancePreference('density');
+  return { density: value, setDensity: setValue, enabled };
+}
+
+export interface AppearanceScriptProps {
+  enabledAxes: readonly AppearanceAxis[];
+  defaults?: Partial<AppearancePreferences>;
+  persistence?: AppearancePersistence;
+  persistenceKey?: string;
+  nonce?: string;
+}
+
+export function getAppearanceScript({
+  enabledAxes,
+  defaults,
+  persistence = 'none',
+  persistenceKey = DEFAULT_PERSISTENCE_KEY,
+}: Omit<AppearanceScriptProps, 'nonce'>) {
+  const config = JSON.stringify({
+    axes: Array.from(new Set(enabledAxes)),
+    defaults: { ...DEFAULT_PREFERENCES, ...defaults },
+    persistence,
+    key: persistenceKey,
+    values: VALUES,
+    attributes: ATTRIBUTES,
+  }).replaceAll('<', '\\u003c');
+
+  return `(()=>{try{const c=${config};let raw=null;if(c.persistence==='localStorage')raw=localStorage.getItem(c.key);else if(c.persistence==='cookie'){const p=encodeURIComponent(c.key)+'=';const v=document.cookie.split(';').map(x=>x.trim()).find(x=>x.startsWith(p));if(v)raw=decodeURIComponent(v.slice(p.length));}let stored={};if(raw){const parsed=JSON.parse(raw);if(parsed&&typeof parsed==='object'&&!Array.isArray(parsed))stored=parsed;}const root=document.documentElement;for(const axis of c.axes){const value=c.values[axis].includes(stored[axis])?stored[axis]:c.defaults[axis];if(axis==='mode'){const dark=value==='dark'||(value==='system'&&matchMedia('(prefers-color-scheme: dark)').matches);root.classList.toggle('dark',dark);root.style.colorScheme=dark?'dark':'light';}root.setAttribute(c.attributes[axis],value);}}catch{}})();`;
+}
+
+export function AppearanceScript({ nonce, ...config }: AppearanceScriptProps) {
+  return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: getAppearanceScript(config) }} />;
+}

package/registry/layout/card-grid.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface CardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  minItemWidth?: 'sm' | 'md' | 'lg';
+}
+
+const minItemWidthClasses = {
+  sm: '[grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))]',
+  md: '[grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]',
+  lg: '[grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))]',
+} as const;
+
+export const CardGrid = React.forwardRef<HTMLDivElement, CardGridProps>(
+  ({ minItemWidth = 'md', className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'gap-layout-grid-gap grid min-w-0',
+          minItemWidthClasses[minItemWidth],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+CardGrid.displayName = 'CardGrid';

package/registry/layout/container.tsx

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export function Container({ children, maxWidth = 'lg', className, ...props }: ContainerProps) {
+  const maxWidthClasses = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    full: 'max-w-full',
+  };
+
+  return (
+    <div
+      {...props}
+      className={cn('mx-auto px-[var(--layout-margin)]', maxWidthClasses[maxWidth], className)}
+    >
+      {children}
+    </div>
+  );
+}