@terrafirmagreg-team/ui 0.1.0 → 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

@@ -17,12 +17,14 @@ export function ThemeToggle({
   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,
@@ -57,6 +59,7 @@ export function ThemeToggle({
               aria-pressed={active}
               className={cn(
                 'size-6.5 p-1.5 text-muted-foreground',
+                buttonClassName,
                 active && 'bg-accent text-accent-foreground',
               )}
               onClick={() => select(mode)}
@@ -69,3 +72,4 @@ export function ThemeToggle({
     </div>
   );
 }
+

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

@@ -25,3 +25,4 @@ export function Hint({
     </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>
+  );
+}

package/src/components/blocks/viewer/controls.tsx

@@ -55,16 +55,16 @@ export function ViewerZoomControls({
   const t = useTranslations();
   return (
     <>
-      <IconButton overlay label={t('ui.canvas.zoom_in')} onClick={onZoomIn}>
+      <IconButton overlay label={t('Zoom in', { note: 'ui.canvas.zoom_in' })} onClick={onZoomIn}>
         <ZoomIn className="size-3.5" />
       </IconButton>
-      <IconButton overlay label={t('ui.canvas.zoom_out')} onClick={onZoomOut}>
+      <IconButton overlay label={t('Zoom out', { note: 'ui.canvas.zoom_out' })} onClick={onZoomOut}>
         <ZoomOut className="size-3.5" />
       </IconButton>
       {onFit ? (
         <IconButton
           overlay
-          label={fitLabel ?? t('ui.canvas.fit')}
+          label={fitLabel ?? t('Fit view', { note: 'ui.canvas.fit' })}
           onClick={onFit}
         >
           <Maximize2 className="size-3.5" />
@@ -85,7 +85,7 @@ export function ViewerPagerControls({
     <>
       <IconButton
         overlay
-        label={t('ui.canvas.prev')}
+        label={t('Previous', { note: 'ui.canvas.prev' })}
         disabled={index === 0}
         onClick={() => onSelect(index - 1)}
       >
@@ -102,7 +102,7 @@ export function ViewerPagerControls({
       </ButtonGroupText>
       <IconButton
         overlay
-        label={t('ui.canvas.next')}
+        label={t('Next', { note: 'ui.canvas.next' })}
         disabled={index === count - 1}
         onClick={() => onSelect(index + 1)}
       >
@@ -146,7 +146,11 @@ export function ViewerExpandButton({ target }: ExpandButtonProps) {
     <IconButton
       overlay
       aria-expanded={expanded}
-      label={t(expanded ? 'ui.canvas.exit_fullscreen' : 'ui.canvas.fullscreen')}
+      label={
+        expanded
+          ? t('Exit fullscreen', { note: 'ui.canvas.exit_fullscreen' })
+          : t('Fullscreen', { note: 'ui.canvas.fullscreen' })
+      }
       onClick={() => {
         const el = target.current;
         if (fallback) {
@@ -277,3 +281,4 @@ export function ViewerControls({
     </>
   );
 }
+

package/src/components/blocks/viewer/float-bar.tsx

@@ -48,3 +48,4 @@ export function FloatBarItem({
     </span>
   );
 }
+

package/src/components/layouts/layout.tsx

@@ -9,7 +9,7 @@ import type * as PageTree from '@terrafirmagreg-team/translate/types/tree';
 import Link from '@terrafirmagreg-team/ui/components/blocks/nav/link';
 import { SidebarIcon } from 'lucide-react';
 
-import { LayoutContext, useLayout } from '@terrafirmagreg-team/ui/hooks/layout';
+import { LayoutContext, useLayout } from '@terrafirmagreg-team/ui/hooks/use-layout';
 import { TreeContextProvider } from '@terrafirmagreg-team/ui/components/layouts/tree-context';
 import {
   SidebarProvider,
@@ -91,3 +91,4 @@ export function LayoutHeader({ className, ...props }: ComponentProps<'header'>)
     </header>
   );
 }
+

package/src/components/layouts/left-sidebar/content.tsx

@@ -60,3 +60,4 @@ export function LeftSidebarContent({
     </ScrollArea.Root>
   );
 }
+

package/src/components/layouts/left-sidebar/context.tsx

@@ -52,3 +52,4 @@ export function LeftSidebarPortalTarget() {
   const ctx = use(LeftSidebarPortalContext);
   return <div data-slot="left-sidebar-portal" ref={ctx?.setTarget} />;
 }
+

package/src/components/layouts/left-sidebar/expand.tsx

@@ -2,7 +2,7 @@
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
 import { SidebarIcon } from 'lucide-react';
-import { useSidebar } from '@terrafirmagreg-team/ui/hooks/sidebar';
+import { useSidebar } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
 import { SidebarCollapseTrigger } from '@terrafirmagreg-team/ui/components/blocks/sidebar';
 
 export function LeftSidebarExpand() {
@@ -20,3 +20,4 @@ export function LeftSidebarExpand() {
     </SidebarCollapseTrigger>
   );
 }
+

package/src/components/layouts/left-sidebar/footer.tsx

@@ -36,7 +36,7 @@ export function LeftSidebarLanguage() {
       locales={locales}
       selected={locale}
       onSelect={(value) => onLocaleChange?.(value)}
-      label={t('ui.choose_language')}
+      label={t('Choose a language', { note: 'ui.choose_language' })}
     />
   );
 }
@@ -67,12 +67,12 @@ export function LeftSidebarPlate({
     >
       {children}
       {(tools != null || theme != null) && (
-        <div className="ms-auto flex items-center">
+        <div className="ms-auto flex items-center gap-0.5">
           {tools}
           {tools != null && theme != null && (
             <Separator
               orientation="vertical"
-              className="mx-1.5 h-5 self-center! bg-muted-foreground/30"
+              className="mx-1 h-5 self-center! bg-muted-foreground/30"
               aria-hidden
             />
           )}
@@ -97,9 +97,15 @@ export function LeftSidebarActions({
     <LeftSidebarPlate
       ref={plateRef}
       tools={SettingsMenu ? <SettingsMenu anchor={plateRef} /> : undefined}
-      theme={{ value: theme, onValueChange: setTheme }}
+      theme={{
+        value: theme,
+        onValueChange: setTheme,
+        className: 'p-0',
+        buttonClassName: 'size-7',
+      }}
     >
       {children}
     </LeftSidebarPlate>
   );
 }
+

package/src/components/layouts/left-sidebar/index.ts

@@ -26,3 +26,4 @@ export {
   LeftSidebarLabel,
 } from './items';
 export { LeftSidebarTree, LeftSidebarTreeItem } from './tree';
+

package/src/components/layouts/left-sidebar/items.tsx

@@ -1,6 +1,6 @@
 'use client';
 import type { ComponentProps } from 'react';
-import { useFolderDepth, useSidebar } from '@terrafirmagreg-team/ui/hooks/sidebar';
+import { useFolderDepth, useSidebar } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
 import { SidebarFolder, SidebarFolderContent as BaseFolderContent, SidebarFolderLink as BaseFolderLink, SidebarFolderTrigger as BaseFolderTrigger, SidebarItem as BaseItem } from '@terrafirmagreg-team/ui/components/blocks/sidebar';
 import { Separator } from '@terrafirmagreg-team/ui/components/ui/separator';
 
@@ -100,3 +100,4 @@ export function LeftSidebarLabel({
     />
   );
 }
+

package/src/components/layouts/left-sidebar/search.tsx

@@ -2,7 +2,7 @@
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import type { ComponentProps, ReactNode } from 'react';
 import { Search } from 'lucide-react';
-import { useSearchContext } from '@terrafirmagreg-team/ui/hooks/search/provider';
+import { useSearchContext } from '@terrafirmagreg-team/ui/hooks/search/use-provider';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
 
@@ -55,7 +55,7 @@ export function LeftSidebarSearch({
   if (variant === 'icon')
     return (
       <IconButton
-        label={t('ui.search_trigger')}
+        label={t('Search', { note: 'ui.search_trigger' })}
         variant="ghost"
         size="icon-sm"
         tooltip={false}
@@ -66,9 +66,10 @@ export function LeftSidebarSearch({
     );
   return (
     <LeftSidebarSearchTrigger
-      label={t('ui.search_trigger')}
+      label={t('Search', { note: 'ui.search_trigger' })}
       onClick={() => setOpenSearch(true)}
       keys={hotKey?.map((k) => k.display)}
     />
   );
 }
+

package/src/components/layouts/left-sidebar/sidebar.tsx

@@ -3,9 +3,9 @@ import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
 import type { ComponentProps, ReactNode } from 'react';
 import { SidebarIcon } from 'lucide-react';
-import { useSidebar } from '@terrafirmagreg-team/ui/hooks/sidebar';
+import { useSidebar } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
 import { SidebarCollapseTrigger, SidebarDrawerContent, SidebarDrawerOverlay, SidebarTrigger } from '@terrafirmagreg-team/ui/components/blocks/sidebar';
-import { useLayout } from '@terrafirmagreg-team/ui/hooks/layout';
+import { useLayout } from '@terrafirmagreg-team/ui/hooks/use-layout';
 import { LeftSidebarContent } from './content';
 import { LeftSidebarFooter } from './footer';
 import type { LeftSidebarParts } from './context';
@@ -186,3 +186,4 @@ function LeftSidebarRegions({
     </>
   );
 }
+

package/src/components/layouts/left-sidebar/tree.tsx

@@ -154,3 +154,4 @@ export function LeftSidebarTreeItem({ node }: { node: PageTree.Node }) {
     </LeftSidebarItem>
   );
 }
+

package/src/components/layouts/right-sidebar.tsx

@@ -93,3 +93,4 @@ export function RightSidebarPanelBody({ className, ...props }: ComponentProps<'d
     />
   );
 }
+

package/src/components/layouts/tree-context.tsx

@@ -39,3 +39,4 @@ export function TreeContextProvider({
     </TreeContext>
   );
 }
+

package/src/components/mdx/accordion.tsx

@@ -176,9 +176,10 @@ function CopyButton({ id }: { id: string }) {
       {checked ? <Check className="size-3.5" /> : <LinkIcon className="size-3.5" />}
       <span className="sr-only">
         {checked
-          ? t('ui.copied_link', { note: 'aria-label' })
-          : t('ui.copy_link', { note: 'aria-label' })}
+          ? t('Copied Link', { note: 'ui.copied_link' })
+          : t('Copy Link', { note: 'ui.copy_link' })}
       </span>
     </button>
   );
 }
+