@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/src/containers/page-header/page-header.tsx

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+
+export type PageHeaderProps = ComponentPropsWithoutRef<"header">;
+
+/**
+ * Page header. No required parts: compose an eyebrow / title / lede block in
+ * a plain `<div>` and, when the view has buttons, `PageHeaderActions` as the
+ * second child. Actions wrap under the title when the container is too narrow.
+ */
+export function PageHeader({ className, ...props }: PageHeaderProps) {
+  return (
+    <header
+      className={cn("flex flex-wrap items-end justify-between gap-x-6 gap-y-3.5", className)}
+      {...props}
+    />
+  );
+}
+
+export type PageHeaderEyebrowProps = ComponentPropsWithoutRef<"div">;
+
+export function PageHeaderEyebrow({ className, ...props }: PageHeaderEyebrowProps) {
+  return <div className={cn("mb-1 font-semibold text-[12px] text-ink-3", className)} {...props} />;
+}
+
+export type PageHeaderTitleProps = ComponentPropsWithoutRef<"h1">;
+
+/** Page title. Wrap a word in `<span className="text-accent-word">` to accent it. */
+export function PageHeaderTitle({ className, ...props }: PageHeaderTitleProps) {
+  return (
+    <h1
+      className={cn("m-0 break-words text-page-title [text-wrap:balance]", className)}
+      {...props}
+    />
+  );
+}
+
+export type PageHeaderLedeProps = ComponentPropsWithoutRef<"p">;
+
+export function PageHeaderLede({ className, ...props }: PageHeaderLedeProps) {
+  return (
+    <p
+      className={cn("mt-[5px] max-w-[68ch] break-words text-lede text-ink-2", className)}
+      {...props}
+    />
+  );
+}
+
+export type PageHeaderActionsProps = ComponentPropsWithoutRef<"div">;
+
+export function PageHeaderActions({ className, ...props }: PageHeaderActionsProps) {
+  return <div className={cn("flex flex-wrap items-center gap-2", className)} {...props} />;
+}

package/src/containers/resizable/index.ts

@@ -0,0 +1,9 @@
+export { keyboardDelta, normalizeSizes, type PanelConstraint, resizePair } from "./model.js";
+export {
+  ResizableHandle,
+  type ResizableHandleProps,
+  ResizablePanel,
+  ResizablePanelGroup,
+  type ResizablePanelGroupProps,
+  type ResizablePanelProps,
+} from "./resizable.js";

package/src/containers/resizable/model.ts

@@ -0,0 +1,94 @@
+export interface PanelConstraint {
+  /** Percent of the group. */
+  min: number;
+  max: number;
+}
+
+const EPSILON = 1e-9;
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+/**
+ * Initial layout in percent summing to 100. Panels without a default share what the others
+ * leave; then every panel is clamped to its constraint and the difference is spread over the
+ * panels that still have room.
+ */
+export function normalizeSizes(
+  defaults: Array<number | undefined>,
+  constraints: PanelConstraint[],
+): number[] {
+  const count = defaults.length;
+  if (count === 0) return [];
+  const defined = defaults.reduce<number>((sum, size) => sum + (size ?? 0), 0);
+  const open = defaults.filter((size) => size === undefined).length;
+  const share = open > 0 ? Math.max(0, 100 - defined) / open : 0;
+  const raw = defaults.map((size) => size ?? share);
+  const total = raw.reduce((sum, size) => sum + size, 0) || 1;
+  const sizes = raw.map((size, i) => {
+    const c = constraints[i] ?? { min: 0, max: 100 };
+    return clamp((size / total) * 100, c.min, c.max);
+  });
+
+  for (let pass = 0; pass < count; pass += 1) {
+    const diff = 100 - sizes.reduce((sum, size) => sum + size, 0);
+    if (Math.abs(diff) < EPSILON) break;
+    const room = sizes.map((size, i) => {
+      const c = constraints[i] ?? { min: 0, max: 100 };
+      return diff > 0 ? c.max - size : size - c.min;
+    });
+    const roomSum = room.reduce((sum, r) => sum + Math.max(0, r), 0);
+    if (roomSum < EPSILON) break;
+    const apply = Math.min(Math.abs(diff), roomSum);
+    for (let i = 0; i < count; i += 1) {
+      const portion = (Math.max(0, room[i] ?? 0) / roomSum) * apply;
+      sizes[i] = (sizes[i] ?? 0) + (diff > 0 ? portion : -portion);
+    }
+  }
+  return sizes;
+}
+
+/**
+ * Moves the boundary between panel `index` and `index + 1` by `delta` percent. The pair keeps
+ * its combined size and both panels stay inside their min/max; other panels are untouched.
+ */
+export function resizePair(
+  sizes: number[],
+  constraints: PanelConstraint[],
+  index: number,
+  delta: number,
+): number[] {
+  const a = sizes[index];
+  const b = sizes[index + 1];
+  const ca = constraints[index];
+  const cb = constraints[index + 1];
+  if (a === undefined || b === undefined || !ca || !cb) return sizes;
+
+  const total = a + b;
+  const low = Math.max(ca.min, total - cb.max);
+  const high = Math.min(ca.max, total - cb.min);
+  if (low > high) return sizes;
+
+  const nextA = clamp(a + delta, low, high);
+  if (Math.abs(nextA - a) < EPSILON) return sizes;
+  const next = sizes.slice();
+  next[index] = nextA;
+  next[index + 1] = total - nextA;
+  return next;
+}
+
+/** Keyboard step in percent for a separator key, or null when the key is not handled. */
+export function keyboardDelta(
+  key: string,
+  orientation: "horizontal" | "vertical",
+  shift = false,
+  step = 5,
+): number | null {
+  const amount = shift ? step * 2 : step;
+  const [less, more] =
+    orientation === "horizontal" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+  if (key === less) return -amount;
+  if (key === more) return amount;
+  return null;
+}

package/src/containers/resizable/resizable.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import {
+  Children,
+  type ComponentPropsWithoutRef,
+  createContext,
+  isValidElement,
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useContext,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../../utils/cn.js";
+import { keyboardDelta, normalizeSizes, type PanelConstraint, resizePair } from "./model.js";
+
+type Direction = "horizontal" | "vertical";
+
+interface GroupContextValue {
+  direction: Direction;
+  sizes: number[];
+  constraints: PanelConstraint[];
+  baseId: string;
+  startDrag: (event: ReactPointerEvent<HTMLElement>, index: number) => void;
+  nudge: (index: number, delta: number) => void;
+  toEdge: (index: number, edge: "min" | "max") => void;
+}
+
+const GroupContext = createContext<GroupContextValue | null>(null);
+const IndexContext = createContext(0);
+
+function useGroup(): GroupContextValue {
+  const value = useContext(GroupContext);
+  if (!value)
+    throw new Error("ResizablePanel and ResizableHandle must be inside ResizablePanelGroup");
+  return value;
+}
+
+export interface ResizablePanelProps extends Omit<ComponentPropsWithoutRef<"div">, "id"> {
+  /** Initial size in percent. Panels without one share what is left. */
+  defaultSize?: number;
+  /** Percent, default 0. */
+  minSize?: number;
+  /** Percent, default 100. */
+  maxSize?: number;
+}
+
+/** A panel of a ResizablePanelGroup. Sizes are percentages of the group. */
+export function ResizablePanel({
+  defaultSize: _d,
+  minSize: _min,
+  maxSize: _max,
+  className,
+  style,
+  ...props
+}: ResizablePanelProps) {
+  const group = useGroup();
+  const index = useContext(IndexContext);
+  const size = group.sizes[index] ?? 0;
+  return (
+    <div
+      id={`${group.baseId}-panel-${index}`}
+      data-panel=""
+      className={cn("min-h-0 min-w-0 overflow-auto", className)}
+      style={{ flex: `${size} 1 0%`, ...style }}
+      {...props}
+    />
+  );
+}
+
+export interface ResizableHandleProps extends Omit<ComponentPropsWithoutRef<"div">, "role"> {
+  /** Accessible name; the default describes the two neighbouring panels. */
+  label?: string;
+}
+
+/** Draggable and keyboard-resizable separator between two panels. */
+export function ResizableHandle({ label, className, ...props }: ResizableHandleProps) {
+  const group = useGroup();
+  const index = useContext(IndexContext);
+  const { direction, sizes, constraints } = group;
+  const a = sizes[index];
+  const b = sizes[index + 1];
+  const ca = constraints[index];
+  const cb = constraints[index + 1];
+  const total = (a ?? 0) + (b ?? 0);
+  const low = ca && cb ? Math.max(ca.min, total - cb.max) : 0;
+  const high = ca && cb ? Math.min(ca.max, total - cb.min) : 100;
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const delta = keyboardDelta(event.key, direction, event.shiftKey);
+    if (delta !== null) {
+      event.preventDefault();
+      group.nudge(index, delta);
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      group.toEdge(index, event.key === "Home" ? "min" : "max");
+    }
+  };
+
+  const vertical = direction === "horizontal";
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a focusable, resizable separator is not an <hr>
+    <div
+      role="separator"
+      tabIndex={0}
+      data-resizable-handle=""
+      aria-label={label ?? "Redimensionar paneles"}
+      aria-orientation={vertical ? "vertical" : "horizontal"}
+      aria-controls={`${group.baseId}-panel-${index}`}
+      aria-valuenow={Math.round(a ?? 0)}
+      aria-valuemin={Math.round(low)}
+      aria-valuemax={Math.round(high)}
+      onKeyDown={onKeyDown}
+      onPointerDown={(event) => group.startDrag(event, index)}
+      className={cn(
+        "group relative flex shrink-0 touch-none select-none items-center justify-center outline-none",
+        vertical ? "w-2 cursor-col-resize" : "h-2 cursor-row-resize",
+        "focus-visible:focus-ring",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "rounded-badge bg-divider transition-colors duration-(--motion-duration) ease-style group-hover:bg-accent group-focus-visible:bg-accent group-data-[dragging]:bg-accent",
+          vertical ? "h-full w-px" : "h-px w-full",
+        )}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute rounded-badge border-control bg-surface-control",
+          vertical ? "h-6 w-1.5" : "h-1.5 w-6",
+        )}
+      />
+    </div>
+  );
+}
+
+export interface ResizablePanelGroupProps extends ComponentPropsWithoutRef<"div"> {
+  direction?: Direction;
+  /** Called with the layout in percent after every change. */
+  onLayout?: (sizes: number[]) => void;
+  children: ReactNode;
+}
+
+function isPanel(child: ReactNode): child is ReactElement<ResizablePanelProps> {
+  return isValidElement(child) && child.type === ResizablePanel;
+}
+
+/** Row or column of resizable panels. Put a ResizableHandle between every two panels. */
+export function ResizablePanelGroup({
+  direction = "horizontal",
+  onLayout,
+  className,
+  children,
+  ...props
+}: ResizablePanelGroupProps) {
+  const baseId = useId();
+  const ref = useRef<HTMLDivElement>(null);
+  const nodes = Children.toArray(children);
+  const panels = nodes.filter(isPanel);
+  const constraints = panels.map((p) => ({
+    min: p.props.minSize ?? 0,
+    max: p.props.maxSize ?? 100,
+  }));
+
+  const [sizes, setSizes] = useState(() =>
+    normalizeSizes(
+      panels.map((p) => p.props.defaultSize),
+      constraints,
+    ),
+  );
+  // Panels added or removed: start over from the declared defaults.
+  const [count, setCount] = useState(panels.length);
+  let current = sizes;
+  if (count !== panels.length) {
+    current = normalizeSizes(
+      panels.map((p) => p.props.defaultSize),
+      constraints,
+    );
+    setCount(panels.length);
+    setSizes(current);
+  }
+
+  const constraintsRef = useRef(constraints);
+  constraintsRef.current = constraints;
+  const sizesRef = useRef(current);
+  sizesRef.current = current;
+
+  const apply = (next: number[]) => {
+    if (next === sizesRef.current) return;
+    sizesRef.current = next;
+    setSizes(next);
+    onLayout?.(next);
+  };
+
+  const context: GroupContextValue = {
+    direction,
+    sizes: current,
+    constraints,
+    baseId,
+    nudge: (index, delta) =>
+      apply(resizePair(sizesRef.current, constraintsRef.current, index, delta)),
+    toEdge: (index, edge) => {
+      const cs = constraintsRef.current;
+      const now = sizesRef.current;
+      const ca = cs[index];
+      const cb = cs[index + 1];
+      const a = now[index];
+      const b = now[index + 1];
+      if (!ca || !cb || a === undefined || b === undefined) return;
+      const total = a + b;
+      const target =
+        edge === "min" ? Math.max(ca.min, total - cb.max) : Math.min(ca.max, total - cb.min);
+      apply(resizePair(now, cs, index, target - a));
+    },
+    startDrag: (event, index) => {
+      if (event.button !== 0) return;
+      const group = ref.current;
+      if (!group) return;
+      event.preventDefault();
+      const handle = event.currentTarget;
+      const horizontal = direction === "horizontal";
+      const rect = group.getBoundingClientRect();
+      const handleSpace = Array.from(
+        group.querySelectorAll<HTMLElement>("[data-resizable-handle]"),
+      ).reduce((sum, el) => {
+        const r = el.getBoundingClientRect();
+        return sum + (horizontal ? r.width : r.height);
+      }, 0);
+      const available = Math.max(1, (horizontal ? rect.width : rect.height) - handleSpace);
+      const start = horizontal ? event.clientX : event.clientY;
+      const startSizes = sizesRef.current;
+      handle.setAttribute("data-dragging", "");
+      const onMove = (e: PointerEvent) => {
+        const delta = (((horizontal ? e.clientX : e.clientY) - start) / available) * 100;
+        apply(resizePair(startSizes, constraintsRef.current, index, delta));
+      };
+      const onUp = () => {
+        handle.removeAttribute("data-dragging");
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    },
+  };
+
+  let panelIndex = -1;
+  return (
+    <GroupContext.Provider value={context}>
+      <div
+        ref={ref}
+        data-direction={direction}
+        className={cn(
+          "@container/resizable flex h-full min-h-0 w-full min-w-0 overflow-hidden rounded-card border-card surface-card",
+          direction === "horizontal" ? "flex-row" : "flex-col",
+          className,
+        )}
+        {...props}
+      >
+        {nodes.map((node, i) => {
+          if (isPanel(node)) panelIndex += 1;
+          const key = isValidElement(node) && node.key !== null ? node.key : i;
+          return (
+            <IndexContext.Provider key={key} value={Math.max(0, panelIndex)}>
+              {node}
+            </IndexContext.Provider>
+          );
+        })}
+      </div>
+    </GroupContext.Provider>
+  );
+}

package/src/containers/scrolly/index.ts

@@ -0,0 +1,8 @@
+export {
+  Scrolly,
+  type ScrollyGraphicState,
+  type ScrollyProps,
+  ScrollyStep,
+  type ScrollyStepProps,
+} from "./scrolly.js";
+export * from "./scrolly-logic.js";

package/src/containers/scrolly/scrolly-logic.ts

@@ -0,0 +1,41 @@
+// Framework-free step picking of the scrollytelling container.
+
+export interface StepRect {
+  top: number;
+  bottom: number;
+}
+
+/**
+ * The step a reader is on: the one that contains the trigger `line` (a y coordinate). In a gap
+ * between steps the previous one stays active; above the first step it is the first, below the
+ * last one it is the last. `-1` only when there are no steps.
+ */
+export function pickActiveStep(rects: readonly StepRect[], line: number): number {
+  if (rects.length === 0) return -1;
+  let active = 0;
+  for (let i = 0; i < rects.length; i += 1) {
+    const rect = rects[i] as StepRect;
+    if (rect.top <= line) active = i;
+    if (line >= rect.top && line < rect.bottom) return i;
+  }
+  return active;
+}
+
+/** Viewport coordinate of the trigger line: `offset` is its fraction (0 top, 1 bottom) of the scroll area. */
+export function triggerLine(areaTop: number, areaHeight: number, offset: number): number {
+  return areaTop + areaHeight * Math.min(1, Math.max(0, offset));
+}
+
+/** Scroll progress through a step, 0 when its top meets the line and 1 when its bottom does. */
+export function stepProgress(rect: StepRect, line: number): number {
+  const height = rect.bottom - rect.top;
+  if (height <= 0) return line >= rect.top ? 1 : 0;
+  return Math.min(1, Math.max(0, (line - rect.top) / height));
+}
+
+/** The `rootMargin` that shrinks the observed area to a thin band at `offset`, to wake up when a step crosses the line. */
+export function lineRootMargin(offset: number): string {
+  const clamped = Math.min(1, Math.max(0, offset));
+  const top = Math.round(clamped * 100);
+  return `-${top}% 0px -${100 - top}% 0px`;
+}

package/src/containers/scrolly/scrolly.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import {
+  Children,
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import { lineRootMargin, pickActiveStep, triggerLine } from "./scrolly-logic.js";
+
+interface StepContext {
+  index: number;
+  active: boolean;
+  register: (index: number, element: HTMLElement | null) => void;
+}
+
+const Step = createContext<StepContext | null>(null);
+
+export interface ScrollyGraphicState {
+  /** Index of the step the reader is on. */
+  step: number;
+  /** The step before it (the same at first), to animate from. */
+  previous: number;
+  /** True when the user asked for reduced motion: swap instead of animating. */
+  reducedMotion: boolean;
+}
+
+export interface ScrollyProps {
+  /** The sticky graphic: receives the active step, e.g. to change the data of a chart. */
+  graphic: (state: ScrollyGraphicState) => ReactNode;
+  /** `ScrollyStep` elements, in reading order. */
+  children: ReactNode;
+  /** Where the trigger line sits in the scroll area: 0 top, 0.5 middle (default), 1 bottom. */
+  offset?: number;
+  /** Scroll container the steps move in; the page by default. */
+  root?: HTMLElement | null;
+  /** Height of the sticky graphic, any CSS length. */
+  graphicHeight?: string;
+  /** Which side the graphic takes when the container is wide. */
+  graphicSide?: "start" | "end";
+  /** Controlled step; the scroll position decides when omitted. */
+  step?: number;
+  onStepChange?: (step: number) => void;
+  /** Accessible name of the narrative. */
+  "aria-label"?: string;
+  className?: string;
+}
+
+/**
+ * Scrollytelling: text steps scroll past while a graphic stays in view and follows the active
+ * step. The active step is the one crossing a trigger line, found with an IntersectionObserver.
+ * Wide containers put the graphic beside the steps, narrow ones pin it above them (container
+ * queries, so it works inside a card or a dialog too). The text is real content in reading
+ * order, so it works with a screen reader and without scrolling effects.
+ */
+export function Scrolly({
+  graphic,
+  children,
+  offset = 0.5,
+  root = null,
+  graphicHeight = "min(55svh, 26rem)",
+  graphicSide = "end",
+  step: controlled,
+  onStepChange,
+  "aria-label": label,
+  className,
+}: ScrollyProps) {
+  const reduced = usePrefersReducedMotion();
+  const elements = useRef(new Map<number, HTMLElement>());
+  const [observed, setObserved] = useState(0);
+  const [previous, setPrevious] = useState(0);
+  const step = controlled ?? observed;
+  const stepRef = useRef(step);
+  stepRef.current = step;
+  const items = Children.toArray(children);
+  const count = items.length;
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  const measure = useCallback(() => {
+    const list = [...elements.current.entries()].sort(([a], [b]) => a - b);
+    if (list.length === 0) return;
+    const area = root?.getBoundingClientRect();
+    const top = area?.top ?? 0;
+    const height = area?.height ?? window.innerHeight;
+    const line = triggerLine(top, height, offset);
+    const next = pickActiveStep(
+      list.map(([, element]) => element.getBoundingClientRect()),
+      line,
+    );
+    if (next >= 0 && next !== stepRef.current) {
+      setPrevious(stepRef.current);
+      setObserved(next);
+      onStepChange?.(next);
+    }
+  }, [root, offset, onStepChange]);
+
+  const register = useCallback((index: number, element: HTMLElement | null) => {
+    const current = elements.current.get(index);
+    if (current && current !== element) observer.current?.unobserve(current);
+    if (element) {
+      elements.current.set(index, element);
+      observer.current?.observe(element);
+    } else elements.current.delete(index);
+  }, []);
+
+  useEffect(() => {
+    if (typeof IntersectionObserver === "undefined") return;
+    const io = new IntersectionObserver(measure, { root, rootMargin: lineRootMargin(offset) });
+    observer.current = io;
+    for (const element of elements.current.values()) io.observe(element);
+    measure();
+    return () => {
+      io.disconnect();
+      observer.current = null;
+    };
+  }, [measure, root, offset]);
+
+  const contexts = useMemo(
+    () =>
+      items.map((_, index) => ({ index, active: index === step, register }) satisfies StepContext),
+    [items, step, register],
+  );
+
+  return (
+    <section
+      aria-label={label}
+      className={cn(
+        "@container/scrolly grid w-full min-w-0 grid-cols-1 gap-x-[var(--scrolly-gap,2rem)]",
+        "@3xl/scrolly:grid-cols-2",
+        className,
+      )}
+    >
+      <div
+        data-scrolly-graphic=""
+        className={cn(
+          "sticky top-0 z-10 min-w-0 self-start bg-bg pb-2",
+          "@3xl/scrolly:top-4 @3xl/scrolly:row-start-1 @3xl/scrolly:pb-0",
+          graphicSide === "end" ? "@3xl/scrolly:col-start-2" : "@3xl/scrolly:col-start-1",
+        )}
+        style={{ height: graphicHeight }}
+      >
+        {graphic({
+          step: Math.min(step, Math.max(0, count - 1)),
+          previous,
+          reducedMotion: reduced,
+        })}
+      </div>
+      <div
+        className={cn(
+          "flex min-w-0 flex-col @3xl/scrolly:row-start-1",
+          graphicSide === "end" ? "@3xl/scrolly:col-start-1" : "@3xl/scrolly:col-start-2",
+        )}
+      >
+        {items.map((child, index) => (
+          <Step.Provider
+            // biome-ignore lint/suspicious/noArrayIndexKey: steps are positional by definition.
+            key={index}
+            value={contexts[index] as StepContext}
+          >
+            {child}
+          </Step.Provider>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export interface ScrollyStepProps {
+  children: ReactNode;
+  /** Minimum height of the step, any CSS length; a tall step gives the reader time with the graphic. */
+  minHeight?: string;
+  className?: string;
+}
+
+/** One block of the narrative. Marked `aria-current="step"` and `data-active` while it is the active one. */
+export function ScrollyStep({ children, minHeight = "70svh", className }: ScrollyStepProps) {
+  const context = useContext(Step);
+  if (!context) throw new Error("ScrollyStep must be a direct child of Scrolly");
+  const { index, active, register } = context;
+  const ref = useCallback(
+    (element: HTMLElement | null) => register(index, element),
+    [register, index],
+  );
+  return (
+    <article
+      ref={ref}
+      data-active={active || undefined}
+      aria-current={active ? "step" : undefined}
+      className={cn(
+        "flex min-w-0 flex-col justify-center py-6 text-ink",
+        "opacity-60 motion-safe:transition-opacity motion-safe:duration-300 data-[active]:opacity-100",
+        className,
+      )}
+      style={{ minHeight }}
+    >
+      {children}
+    </article>
+  );
+}

package/src/containers/settings-layout/index.ts

@@ -0,0 +1 @@
+export * from "./settings-layout.js";