@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/blocks/sprite.tsx

@@ -0,0 +1,231 @@
+'use client';
+
+import type { CSSProperties, ReactNode } from 'react';
+import { Skeleton } from '@terrafirmagreg-team/ui/components/ui/skeleton';
+import { formatCount } from '@terrafirmagreg-team/ui/lib/utils/format';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export const SPRITE_CHIP_CLASS =
+  'inline-flex shrink-0 items-center justify-center rounded-sm border border-border bg-secondary p-0.5 hover:bg-accent';
+
+export function SpriteFrame({
+  size,
+  chip = false,
+  badge,
+  badgeClassName,
+  className,
+  style,
+  children,
+}: {
+  size?: number;
+  chip?: boolean;
+  badge?: ReactNode;
+  badgeClassName?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+}) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center',
+        chip && SPRITE_CHIP_CLASS,
+        badge !== undefined && 'relative',
+        className,
+      )}
+      style={{ ...(size ? { width: size, height: size } : undefined), ...style }}
+    >
+      {children}
+      {badge !== undefined ? (
+        <span
+          className={cn(
+            'pointer-events-none absolute -right-0.5 -bottom-0.5 z-10',
+            badgeClassName,
+          )}
+        >
+          {badge}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+export function Sprite({
+  src,
+  rect,
+  page,
+  size,
+  tint,
+  alt = '',
+  className,
+  fallback,
+  onError,
+}: {
+  src?: string;
+
+  rect?: { x: number; y: number; w: number };
+
+  page?: { w: number; h: number };
+  size: number;
+  tint?: string;
+  alt?: string;
+  className?: string;
+  fallback?: ReactNode;
+  onError?: () => void;
+}) {
+  if (!src) {
+    return (
+      fallback ?? (
+        <Skeleton
+          className={cn('inline-block shrink-0', className)}
+          style={{ width: size, height: size }}
+        />
+      )
+    );
+  }
+  if (rect && page) {
+    const scale = size / Math.max(rect.w, 1);
+    const pos = `-${rect.x * scale}px -${rect.y * scale}px`;
+    const bgSize = `${page.w * scale}px ${page.h * scale}px`;
+    return (
+      <span
+        className={className ?? 'relative inline-block shrink-0'}
+        style={{
+          width: size,
+          height: size,
+          backgroundImage: `url(${src})`,
+          backgroundPosition: pos,
+          backgroundSize: bgSize,
+          imageRendering: 'pixelated',
+          ...(tint
+            ? {
+                backgroundColor: tint,
+                backgroundBlendMode: 'multiply',
+                WebkitMaskImage: `url(${src})`,
+                maskImage: `url(${src})`,
+                WebkitMaskPosition: pos,
+                maskPosition: pos,
+                WebkitMaskSize: bgSize,
+                maskSize: bgSize,
+                WebkitMaskRepeat: 'no-repeat',
+                maskRepeat: 'no-repeat',
+              }
+            : {}),
+        }}
+      />
+    );
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={alt}
+      width={size}
+      height={size}
+      className={cn('rounded-sm', className)}
+      style={{ width: size, height: size, imageRendering: 'pixelated' }}
+      loading="lazy"
+      decoding="async"
+      onError={onError}
+    />
+  );
+}
+
+export const SPRITE_CLUSTER_UNITS = 18;
+export const SPRITE_CLUSTER_INSET = 6;
+const CLUSTER_BLEED = 1.15;
+const CLUSTER_POSITIONS: readonly (readonly [number, number])[][] = [
+  [],
+  [[1.6, 1.6]],
+  [
+    [0.4, 0.8],
+    [2.8, 2.4],
+  ],
+  [
+    [-0.8, 0],
+    [1.6, 1.6],
+    [4.0, 3.2],
+  ],
+];
+
+export function SpriteCluster({
+  items,
+  size = 36,
+  chip = true,
+  inset = SPRITE_CLUSTER_INSET,
+  limit = 3,
+}: {
+  items: ReactNode[];
+  size?: number;
+  chip?: boolean;
+  inset?: number;
+  limit?: number;
+}) {
+  const inner = size - (chip ? inset : 0);
+  const scale = inner / SPRITE_CLUSTER_UNITS;
+  const shown = items.slice(0, Math.min(limit, CLUSTER_POSITIONS.length - 1));
+  const positions = CLUSTER_POSITIONS[shown.length];
+  return (
+    <SpriteFrame size={size} chip={chip}>
+      <span className="relative block" style={{ width: inner, height: inner }}>
+        {shown.map((node, i) => (
+          <span
+            key={i}
+            className="absolute"
+            style={{
+              left: positions[i][0] * CLUSTER_BLEED * scale,
+              top: positions[i][1] * CLUSTER_BLEED * scale,
+              zIndex: shown.length - i,
+            }}
+          >
+            {node}
+          </span>
+        ))}
+      </span>
+    </SpriteFrame>
+  );
+}
+
+export function SpriteCount({
+  count,
+  limit,
+  className,
+  style,
+}: {
+  count: number;
+  limit?: number;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  if (count < 1) return null;
+  return (
+    <span aria-hidden className={className} style={style}>
+      {formatCount(count, limit)}
+    </span>
+  );
+}
+
+export function SpriteList({
+  items,
+  variant = 'grid',
+  className,
+}: {
+  items: { key: React.Key; node: ReactNode }[];
+  variant?: 'grid' | 'row';
+  className?: string;
+}) {
+  return (
+    <ul
+      className={cn(
+        variant === 'grid'
+          ? 'grid grid-cols-[repeat(auto-fill,minmax(--spacing(9),1fr))] gap-1'
+          : 'flex flex-wrap items-center gap-3',
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <li key={item.key}>{item.node}</li>
+      ))}
+    </ul>
+  );
+}

package/src/components/blocks/text/format-text.tsx

@@ -0,0 +1,110 @@
+import { Fragment, type CSSProperties } from 'react';
+
+export type TextFormat = {
+  marker: string;
+  colors: Record<string, string>;
+  styles?: Record<string, CSSProperties>;
+  reset?: string;
+  hex?: string;
+  ignore?: readonly string[];
+};
+
+type Run = { text: string; style?: CSSProperties };
+
+export function FormatText({
+  text,
+  format,
+}: {
+  text: string;
+  format: TextFormat;
+}) {
+  const codes = new Set([
+    ...Object.keys(format.colors),
+    ...Object.keys(format.styles ?? {}),
+    ...(format.reset ? [format.reset] : []),
+    ...(format.ignore ?? []),
+  ]);
+  const runs: Run[] = [];
+  let style: CSSProperties | undefined;
+  let buf = '';
+  const flush = () => {
+    if (!buf) return;
+    runs.push(style ? { text: buf, style } : { text: buf });
+    buf = '';
+  };
+  for (let i = 0; i < text.length; i += 1) {
+    const ch = text[i];
+    if (ch !== format.marker) {
+      buf += ch;
+      continue;
+    }
+    const code = text[i + 1]?.toLowerCase();
+    if (format.hex && code === format.hex) {
+      let hex = '';
+      let j = i + 2;
+      while (
+        hex.length < 6 &&
+        text[j] === format.marker &&
+        /^[0-9a-f]$/.test(text[j + 1]?.toLowerCase() ?? '')
+      ) {
+        hex += (text[j + 1] ?? '').toLowerCase();
+        j += 2;
+      }
+      if (hex.length === 6) {
+        flush();
+        i = j - 1;
+        const next: CSSProperties = { ...(style ?? {}), color: `#${hex}` };
+        delete next.fontWeight;
+        delete next.fontStyle;
+        delete next.textDecoration;
+        style = next;
+        continue;
+      }
+      buf += ch;
+      continue;
+    }
+    if (code === undefined || !codes.has(code)) {
+      buf += ch;
+      continue;
+    }
+    flush();
+    i += 1;
+    if (code === format.reset) {
+      style = undefined;
+      continue;
+    }
+    const next: CSSProperties = { ...(style ?? {}) };
+    const color = format.colors[code];
+    if (color) {
+      next.color = color;
+      delete next.fontWeight;
+      delete next.fontStyle;
+      delete next.textDecoration;
+    }
+    const extra = format.styles?.[code];
+    if (extra) {
+      for (const [key, value] of Object.entries(extra)) {
+        if (key === 'textDecoration' && next.textDecoration) {
+          next.textDecoration = `${next.textDecoration} ${String(value)}`;
+        } else {
+          (next as Record<string, unknown>)[key] = value;
+        }
+      }
+    }
+    style = Object.keys(next).length ? next : undefined;
+  }
+  flush();
+  return (
+    <>
+      {runs.map((run, index) =>
+        run.style ? (
+          <span key={index} style={run.style}>
+            {run.text}
+          </span>
+        ) : (
+          <Fragment key={index}>{run.text}</Fragment>
+        ),
+      )}
+    </>
+  );
+}

package/src/components/blocks/theme/toggle.tsx

@@ -0,0 +1,75 @@
+'use client';
+import type { ComponentProps } from 'react';
+import { useSyncExternalStore } from 'react';
+import { flushSync } from 'react-dom';
+import { Airplay, Moon, Sun } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+
+const noop = () => () => {};
+
+const icons = { light: Sun, dark: Moon, system: Airplay } as const;
+export type ThemeToggleMode = keyof typeof icons;
+
+export function ThemeToggle({
+  value,
+  onValueChange,
+  modes = ['light', 'dark', 'system'],
+  labels,
+  className,
+  buttonClassName,
+  ...props
+}: ComponentProps<'div'> & {
+  value?: string;
+  onValueChange?: (mode: ThemeToggleMode) => void;
+  modes?: readonly ThemeToggleMode[];
+  labels?: Partial<Record<ThemeToggleMode, string>>;
+  buttonClassName?: string;
+}) {
+  const mounted = useSyncExternalStore(
+    noop,
+    () => true,
+    () => false,
+  );
+  const current = mounted ? value : undefined;
+  const select = (mode: ThemeToggleMode) => {
+    if (document?.startViewTransition) {
+      document.startViewTransition(() => flushSync(() => onValueChange?.(mode)));
+    } else {
+      onValueChange?.(mode);
+    }
+  };
+  return (
+    <div
+      data-theme-toggle
+      className={cn(
+        'inline-flex items-center rounded-full p-1 overflow-hidden *:rounded-full',
+        className,
+      )}
+      {...props}
+    >
+      {modes.map((mode) => {
+        const ModeIcon = icons[mode];
+        const active = current === mode;
+        return (
+          <Hint key={mode} label={labels?.[mode] ?? mode}>
+            <button
+              type="button"
+              aria-label={labels?.[mode] ?? mode}
+              aria-pressed={active}
+              className={cn(
+                'size-6.5 p-1.5 text-muted-foreground',
+                buttonClassName,
+                active && 'bg-accent text-accent-foreground',
+              )}
+              onClick={() => select(mode)}
+            >
+              <ModeIcon className="size-full" fill="currentColor" aria-hidden />
+            </button>
+          </Hint>
+        );
+      })}
+    </div>
+  );
+}
+

package/src/components/blocks/tooltip/hint.tsx

@@ -0,0 +1,28 @@
+'use client';
+import type { ComponentProps, ReactElement, ReactNode } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+
+export function Hint({
+  label,
+  children,
+  ...props
+}: {
+  label: ReactNode;
+  children: ReactElement;
+} & Pick<
+  ComponentProps<typeof TooltipContent>,
+  'side' | 'align' | 'sideOffset'
+>) {
+  if (label == null || label === '') return children;
+  return (
+    <Tooltip>
+      <TooltipTrigger render={children} />
+      <TooltipContent {...props}>{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+

package/src/components/blocks/tooltip/lazy.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useState, type DependencyList, type ReactElement, type ReactNode } from 'react';
+import { useAsyncValue } from '@terrafirmagreg-team/ui/hooks/use-async-value';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
+
+export function LazyTooltip<T>({
+  load,
+  deps = [],
+  children,
+  trigger,
+  contentClassName,
+  onOpenChange,
+}: {
+  load: () => Promise<T>;
+  deps?: DependencyList;
+  children: (value: T | undefined) => ReactNode;
+  trigger: ReactElement;
+  contentClassName?: string;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const value = useAsyncValue(open ? load : false, [open, ...deps]);
+  return (
+    <Tooltip
+      onOpenChange={(next) => {
+        setOpen(next);
+        onOpenChange?.(next);
+      }}
+    >
+      <TooltipTrigger render={trigger} delay={150} closeDelay={100} />
+      <TooltipContent className={contentClassName}>
+        {children(value)}
+      </TooltipContent>
+    </Tooltip>
+  );
+}