@terrafirmagreg-team/ui 0.1.0 → 1.2.0

package/src/components/blocks/media/image.tsx

@@ -89,13 +89,13 @@ export function MediaImage({
     return (
       <div
         role="img"
-        aria-label={alt || t('ui.image_unavailable')}
+        aria-label={alt || t('Image unavailable', { note: 'ui.image_unavailable' })}
         className={cn(
           'flex min-h-24 w-full items-center justify-center rounded-md border border-border bg-secondary text-sm text-muted-foreground',
           className,
         )}
       >
-        {t('ui.image_unavailable')}
+        {t('Image unavailable', { note: 'ui.image_unavailable' })}
       </div>
     );
   }
@@ -133,3 +133,4 @@ export function MediaImage({
     </a>
   );
 }
+

package/src/components/blocks/media/slideshow.tsx

@@ -137,12 +137,12 @@ export function Slideshow({
             }
             expand={{ target: surfaceRef }}
             settings={{
-              label: t('ui.viewer.settings'),
+              label: t('Viewer settings', { note: 'ui.viewer.settings' }),
               sliders: multi
                 ? [
                     {
                       icon: <Timer />,
-                      label: t('ui.viewer.autoplay_speed'),
+                      label: t('Autoplay speed', { note: 'ui.viewer.autoplay_speed' }),
                       min: AUTOPLAY_SPEED_MIN,
                       max: AUTOPLAY_SPEED_MAX,
                       step: 0.5,
@@ -157,7 +157,7 @@ export function Slideshow({
                 ? [
                     {
                       icon: <Play />,
-                      label: t('ui.viewer.autoplay'),
+                      label: t('Autoplay', { note: 'ui.viewer.autoplay' }),
                       checked: autoplay,
                       onChange: setAutoplay,
                     },
@@ -175,3 +175,4 @@ export function Slideshow({
     </figure>
   );
 }
+

package/src/components/blocks/nav/breadcrumb.tsx

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

package/src/components/blocks/nav/copy-menu.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/context-menu';
+
+export function CopyMenu({
+  items,
+  extra,
+  children,
+}: {
+  items: { label: ReactNode; value: string; icon?: ReactNode }[];
+  extra?: ReactNode;
+  children: ReactNode;
+}) {
+  const copy = (value: string) => () => {
+    void navigator.clipboard.writeText(value);
+  };
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="contents">{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        {items.map((item, index) => (
+          <ContextMenuItem key={index} onClick={copy(item.value)}>
+            {item.icon}
+            {item.label}
+          </ContextMenuItem>
+        ))}
+        {extra}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/src/components/blocks/nav/link.tsx

@@ -83,3 +83,4 @@ export function LinkItem({
     </Link>
   );
 }
+

package/src/components/blocks/nav/site-menu.tsx

@@ -75,3 +75,4 @@ export function SiteMenu({
     </DropdownMenu>
   );
 }
+

package/src/components/blocks/nav/site-title.tsx

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

package/src/components/blocks/nav/switcher.tsx

@@ -203,3 +203,4 @@ function Marquee({
     </span>
   );
 }
+

package/src/components/blocks/page/empty-state.tsx

@@ -29,3 +29,4 @@ export function EmptyState({
     </Empty>
   );
 }
+

package/src/components/blocks/page/heading.tsx

@@ -44,10 +44,11 @@ export function Heading({
         {isChecked ? <CopyCheckIcon /> : <LinkIcon />}
         <span className="sr-only">
           {isChecked
-            ? t('ui.copied_anchor', )
-            : t('ui.copy_anchor', )}
+            ? t('Copied Anchor Link', { note: 'ui.copied_anchor' })
+            : t('Copy Anchor Link', { note: 'ui.copy_anchor' })}
         </span>
       </button>
     </As>
   );
 }
+

package/src/components/blocks/page/pager.tsx

@@ -1,15 +1,23 @@
 'use client';
 
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import type { MouseEvent, ReactNode } from 'react';
+import { useRef, useState, type MouseEvent, type ReactNode } from 'react';
 import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { SPRITE_CHIP_CLASS } from '@terrafirmagreg-team/ui/components/blocks/sprite';
 import {
   Pagination,
   PaginationContent,
   PaginationItem,
 } from '@terrafirmagreg-team/ui/components/ui/pagination';
 import { Progress } from '@terrafirmagreg-team/ui/components/ui/progress';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/tooltip';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useElementSize } from '@terrafirmagreg-team/ui/hooks/use-element-size';
+import { useSwipe } from '@terrafirmagreg-team/ui/hooks/use-swipe';
 import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 
 export function PagerArrow({
@@ -34,7 +42,12 @@ export function PagerArrow({
   const t = useTranslations();
   return (
     <IconButton
-      label={label ?? t(dir < 0 ? 'ui.prev_page' : 'ui.next_page')}
+      label={
+        label ??
+        (dir < 0
+          ? t('Previous Page', { note: 'ui.prev_page' })
+          : t('Next Page', { note: 'ui.next_page' }))
+      }
       tooltip={false}
       variant={variant}
       size={size}
@@ -110,3 +123,98 @@ export function Pager({
     </Pagination>
   );
 }
+
+type IconPagerOption<T extends string> = {
+  id: T;
+  icon: ReactNode;
+  help?: string;
+};
+
+const PAGER_CELL = 40;
+const PAGER_GAP = 4;
+const PAGER_ARROW = 36;
+
+export function IconPager<T extends string>({
+  value,
+  options,
+  onChange,
+  className,
+}: {
+  value?: T;
+  options: IconPagerOption<T>[];
+  onChange: (id: T) => void;
+  className?: string;
+}) {
+  const stripRef = useRef<HTMLDivElement | null>(null);
+  const { w } = useElementSize(stripRef);
+  const per = Math.max(
+    1,
+    Math.floor((w - 2 * (PAGER_ARROW + PAGER_GAP) + PAGER_GAP) / PAGER_CELL),
+  );
+  const pages = Math.max(1, Math.ceil(options.length / per));
+  const valueIndex = options.findIndex((option) => option.id === value);
+  const autoPage = Math.max(0, Math.floor(valueIndex / per));
+  const [manual, setManual] = useState<number | null>(null);
+  const [lastValue, setLastValue] = useState(value);
+  if (lastValue !== value) {
+    setLastValue(value);
+    setManual(null);
+  }
+  const page = Math.min(manual ?? autoPage, pages - 1);
+  const shown = options.slice(page * per, (page + 1) * per);
+
+  const go = (dir: number) => setManual((page + dir + pages) % pages);
+  const swipe = useSwipe((dir) => {
+    const next = valueIndex + dir;
+    if (next >= 0 && next < options.length) {
+      onChange(options[next]!.id);
+    } else {
+      go(dir);
+    }
+  });
+
+  return (
+    <div
+      ref={stripRef}
+      {...swipe}
+      onWheel={(event) => {
+        if (pages > 1) go(event.deltaY > 0 ? 1 : -1);
+      }}
+      className={cn('flex min-h-9 items-center gap-1', className)}
+    >
+      <PagerArrow dir={-1} disabled={pages <= 1} onClick={() => go(-1)} />
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center justify-center gap-1',
+          w === 0 && 'invisible',
+        )}
+      >
+        {shown.map((option) => (
+          <Tooltip key={option.id}>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={() => onChange(option.id)}
+                  aria-label={option.help ?? option.id}
+                  aria-pressed={option.id === value}
+                  className={cn(
+                    SPRITE_CHIP_CLASS,
+                    'size-9 rounded-sm p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-accent aria-pressed:text-foreground',
+                  )}
+                />
+              }
+            >
+              {option.icon}
+            </TooltipTrigger>
+            {option.help ? (
+              <TooltipContent>{option.help}</TooltipContent>
+            ) : null}
+          </Tooltip>
+        ))}
+      </div>
+      <PagerArrow dir={1} disabled={pages <= 1} onClick={() => go(1)} />
+    </div>
+  );
+}
+

package/src/components/blocks/readability/fields.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import { CircleHelp } from 'lucide-react';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from '@terrafirmagreg-team/ui/components/ui/field';
+import { Slider } from '@terrafirmagreg-team/ui/components/ui/slider';
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from '@terrafirmagreg-team/ui/components/ui/toggle-group';
+
+export function ReadabilityHelp({
+  title,
+  description,
+  items,
+}: {
+  title: string;
+  description?: string;
+  items?: { icon?: ReactNode; label: string; help: string }[];
+}) {
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1">
+        <p className="font-medium">{title}</p>
+        {description && <FieldDescription className="text-xs">{description}</FieldDescription>}
+      </div>
+      {items?.map((item) => (
+        <div key={item.label} className="space-y-1 rounded-lg bg-muted/60 p-2.5">
+          <p className="flex items-center gap-1.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0">
+            {item.icon}
+            {item.label}
+          </p>
+          <FieldDescription className="text-xs">{item.help}</FieldDescription>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ReadabilityField({
+  label,
+  icon,
+  help,
+  children,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  help?: ReactNode;
+  children: ReactNode;
+}) {
+  const [helpOpen, setHelpOpen] = useState(false);
+  return (
+    <Field className="gap-1.5">
+      <div className="flex items-center gap-1 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0">
+        {icon}
+        <FieldLabel className="flex-1 text-xs text-muted-foreground">{label}</FieldLabel>
+        {help && (
+          <Popover onOpenChange={setHelpOpen}>
+            <PopoverTrigger
+              render={
+                <IconButton
+                  variant="ghost"
+                  size="icon-xs"
+                  tooltip={false}
+                  label={typeof label === 'string' ? label : 'Help'}
+                >
+                  <CircleHelp />
+                </IconButton>
+              }
+            />
+            <PopoverContent className="w-56">{help}</PopoverContent>
+          </Popover>
+        )}
+      </div>
+      <FieldContent
+        className={cn(
+          'rounded-lg outline-2 outline-offset-4 outline-dashed outline-transparent transition-[outline-color] duration-200',
+          helpOpen && 'outline-primary',
+        )}
+      >
+        {children}
+      </FieldContent>
+    </Field>
+  );
+}
+
+export function ReadabilitySlider({
+  label,
+  icon,
+  help,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  format = String,
+  disabled,
+  live,
+}: {
+  label: ReactNode;
+  icon?: ReactNode;
+  help?: ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  format?: (value: number) => string;
+  disabled?: boolean;
+  live?: boolean;
+}) {
+  const [draft, setDraft] = useState<{ key: number; value: number }>({ key: value, value });
+  const shown = draft.key === value ? draft.value : value;
+  return (
+    <ReadabilityField label={label} icon={icon} help={help}>
+      <div className="flex items-center gap-3 rounded-lg bg-muted/70 px-3 py-2.5">
+        <Slider
+          min={min}
+          max={max}
+          step={step}
+          value={shown}
+          disabled={disabled}
+          className="flex-1 [&_[data-slot=slider-track]]:bg-muted-foreground/25"
+          onValueChange={(next) => {
+            if (live) onChange(next as number);
+            else setDraft({ key: value, value: next as number });
+          }}
+          onValueCommitted={() => {
+            if (!live && shown !== value) onChange(shown);
+          }}
+        />
+        <span className="w-9 shrink-0 text-end text-xs tabular-nums text-muted-foreground">
+          {format(shown)}
+        </span>
+      </div>
+    </ReadabilityField>
+  );
+}
+
+export function Segment<T extends string>({
+  options,
+  value,
+  onChange,
+  disabled,
+  itemContent,
+  itemLabel,
+  itemHelp,
+  itemClassName,
+}: {
+  options: readonly T[];
+  value: T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  itemContent: (id: T) => ReactNode;
+  itemLabel: (id: T) => string;
+  itemHelp: (id: T) => string;
+  itemClassName?: string;
+}) {
+  return (
+    <ToggleGroup
+      value={[value]}
+      onValueChange={(values) => {
+        const next = values.at(-1) as T | undefined;
+        if (next && next !== value) onChange(next);
+      }}
+      disabled={disabled}
+      size="sm"
+      spacing={1}
+      className="w-full rounded-lg bg-muted/70 p-1"
+    >
+      {options.map((id) => (
+        <Hint key={id} label={itemHelp(id)}>
+          <ToggleGroupItem
+            value={id}
+            aria-label={itemLabel(id)}
+            className={cn(
+              'flex-1 rounded-md text-muted-foreground hover:text-foreground aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-sm',
+              itemClassName,
+            )}
+          >
+            {itemContent(id)}
+          </ToggleGroupItem>
+        </Hint>
+      ))}
+    </ToggleGroup>
+  );
+}
+
+export function WidthField({
+  field,
+  icon,
+  value,
+  onChange,
+}: {
+  field: 'page_width' | 'content_width';
+  icon: ReactNode;
+  value: number;
+  onChange: (value: number) => void;
+}) {
+  const t = useTranslations();
+  const w = {
+    page_width: {
+      label: t('Page width', { note: 'ui.readability.page_width' }),
+      help: t('Adjust the maximum width of the page layout to fit different reading needs and screens', { note: 'ui.readability.page_width.help' }),
+      slider: t('Page width slider', { note: 'ui.readability.page_width.slider' }),
+      sliderHelp: t('A ranged slider to choose the maximum width of the page layout', { note: 'ui.readability.page_width.slider.help' }),
+    },
+    content_width: {
+      label: t('Content width', { note: 'ui.readability.content_width' }),
+      help: t('Adjust the maximum width of the text column to fit different reading needs and screens', { note: 'ui.readability.content_width.help' }),
+      slider: t('Content width slider', { note: 'ui.readability.content_width.slider' }),
+      sliderHelp: t('A ranged slider to choose the maximum width of the content column', { note: 'ui.readability.content_width.slider.help' }),
+    },
+  }[field];
+  return (
+    <ReadabilitySlider
+      live
+      label={w.label}
+      icon={icon}
+      help={
+        <ReadabilityHelp
+          title={w.label}
+          description={w.help}
+          items={[{ icon, label: w.slider, help: w.sliderHelp }]}
+        />
+      }
+      value={value}
+      onChange={onChange}
+      min={60}
+      max={100}
+      step={1}
+      format={(v) => `${v}%`}
+    />
+  );
+}
+