@lar-works/design-system 0.0.0-stage → 0.1.1

package/src/display/ResourceCard.tsx

@@ -0,0 +1,201 @@
+import type { ReactNode } from 'react';
+
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+import { Stack } from '../layout/Flow';
+import { Text } from '../typography/Typography';
+
+interface ResourceCardProps {
+    presentation?: 'default' | 'overview' | 'scan';
+    metrics?: readonly { label: ReactNode; value: ReactNode }[];
+    metricsLabel?: string;
+    actions: ReactNode;
+    compact?: boolean;
+    details: ReactNode;
+    leading?: ReactNode;
+    panel?: ReactNode;
+    status: ReactNode;
+    trailing?: ReactNode;
+}
+
+export function ResourceCard({
+    actions,
+    compact = false,
+    presentation = 'default',
+    metrics,
+    metricsLabel,
+    details,
+    leading,
+    panel,
+    status,
+    trailing,
+}: ResourceCardProps) {
+    if (presentation === 'scan')
+        return (
+            <article className="border-base-300 @container border-b last:border-0">
+                <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1 px-3 py-1 @min-[40rem]:grid-cols-[minmax(5rem,7rem)_minmax(0,1fr)_auto]">
+                    <div className="flex min-w-0 items-center gap-2 pt-1 @min-[40rem]:pt-0">
+                        <span aria-hidden="true" className="text-base-700 shrink-0 [&_svg]:size-4">
+                            {leading}
+                        </span>
+                        <div className="min-w-0 flex-1">{details}</div>
+                    </div>
+                    <div className="col-span-full row-start-3 min-w-0 @min-[28rem]:col-span-1 @min-[28rem]:row-start-2 @min-[40rem]:col-start-2 @min-[40rem]:row-start-1">
+                        {status}
+                    </div>
+                    <div className="col-span-full row-start-2 flex flex-wrap items-center gap-2 @min-[28rem]:col-span-1 @min-[28rem]:col-start-2 @min-[28rem]:row-span-2 @min-[28rem]:row-start-1 @min-[40rem]:col-start-3">
+                        {actions}
+                    </div>
+                </div>
+            </article>
+        );
+
+    if (presentation === 'overview') {
+        return (
+            <article className="group border-base-300 from-base-100/70 to-base-50 hover:border-primary/30 flex min-w-0 flex-col overflow-hidden rounded-xl border bg-linear-to-br shadow-xs/5 transition-colors">
+                <div className="flex min-w-0 items-center gap-3 p-3 pb-2">
+                    {leading ? (
+                        <span
+                            aria-hidden="true"
+                            className="text-base-500 flex shrink-0 self-start pt-0.5 [&_svg]:size-5"
+                        >
+                            {leading}
+                        </span>
+                    ) : null}
+                    <div className="min-h-10 min-w-0 flex-1 [&_a]:block [&_a]:truncate">{details}</div>
+                    <div className="shrink-0 self-start [&>[data-slot=skeleton]]:size-8">{actions}</div>
+                </div>
+                <dl aria-label={metricsLabel} className="flex flex-1 flex-wrap gap-x-5 gap-y-1 px-3 pb-2">
+                    {metrics?.map((metric, index) => (
+                        <div key={index} className="flex min-w-16 items-center gap-1.5">
+                            <dt className="min-h-4 min-w-10">
+                                <Text as="span" variant="caption" tone="muted" className="block">
+                                    {metric.label}
+                                </Text>
+                            </dt>
+                            <dd className="order-first min-h-8 min-w-6">
+                                <Text as="span" variant="metric" className="block tabular-nums">
+                                    {metric.value}
+                                </Text>
+                            </dd>
+                        </div>
+                    ))}
+                </dl>
+                <div className="border-base-300 bg-base-100/40 flex min-h-8 min-w-0 items-center border-t px-3 py-1">
+                    {status}
+                </div>
+            </article>
+        );
+    }
+
+    if (compact) {
+        return (
+            <article className="@container">
+                <div
+                    className={`grid min-w-0 items-center gap-3 px-3 sm:px-4 ${trailing ? 'min-h-18 py-3' : 'min-h-12 py-2'} ${
+                        trailing
+                            ? leading
+                                ? 'grid-cols-1 @min-[36rem]:grid-cols-[auto_minmax(0,1fr)_auto]'
+                                : 'grid-cols-1 @min-[36rem]:grid-cols-[minmax(0,1fr)_auto]'
+                            : leading
+                              ? 'grid-cols-[auto_minmax(0,1fr)_auto]'
+                              : 'grid-cols-[minmax(0,1fr)_auto]'
+                    }`}
+                >
+                    {leading ? (
+                        <span
+                            aria-hidden="true"
+                            className={`${trailing ? 'hidden @min-[36rem]:flex' : 'flex'} text-base-500 size-8 items-center justify-center [&_svg]:size-5 [&>[data-slot=skeleton]]:size-full`}
+                        >
+                            {leading}
+                        </span>
+                    ) : null}
+                    {trailing ? (
+                        <Stack space="tight" className="min-w-0">
+                            <div className="min-w-0 truncate">{details}</div>
+                            <div className="flex min-w-0">{status}</div>
+                        </Stack>
+                    ) : (
+                        <div className="grid min-w-0 items-center gap-x-4 gap-y-1 @min-[40rem]:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+                            <div className="min-w-0 [&_a]:max-w-full [&_a]:min-w-0 [&_a]:truncate">{details}</div>
+                            <div className="flex min-w-0 @min-[40rem]:justify-end">{status}</div>
+                        </div>
+                    )}
+                    <div
+                        className={`flex min-w-0 shrink-0 flex-wrap items-center gap-2 ${
+                            trailing
+                                ? 'border-base-300 bg-base-100/40 col-span-full -mx-3 -mb-3 justify-between border-t px-3 py-2 sm:-mx-4 sm:px-4 @min-[36rem]:col-span-1 @min-[36rem]:m-0 @min-[36rem]:justify-end @min-[36rem]:border-0 @min-[36rem]:bg-transparent @min-[36rem]:p-0 [&>button]:min-h-10 @min-[36rem]:[&>button]:min-h-8 [&>label]:min-h-10 @min-[36rem]:[&>label]:min-h-8'
+                                : ''
+                        }`}
+                    >
+                        {actions}
+                        {trailing}
+                    </div>
+                </div>
+                {panel ? <div className="border-base-300 bg-base-100/40 border-t p-4 sm:p-5">{panel}</div> : null}
+            </article>
+        );
+    }
+
+    return (
+        <article className="border-base-300 bg-base-100 hover:border-base-300 overflow-hidden rounded-xl border shadow-xs/5 transition-colors">
+            <div className="grid min-w-0 gap-4 p-4 sm:p-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-start">
+                <div className="flex min-w-0 items-start gap-3">
+                    {leading ? (
+                        <div
+                            aria-hidden="true"
+                            className="bg-base-100 text-base-600 flex size-9 shrink-0 items-center justify-center rounded-lg [&_svg]:size-5"
+                        >
+                            {leading}
+                        </div>
+                    ) : null}
+                    <div className="min-w-0 flex-1">{details}</div>
+                </div>
+                <div className="flex min-h-11 min-w-0 flex-col items-start gap-1 md:max-w-72 md:items-end md:text-right">
+                    {status}
+                </div>
+            </div>
+            <div className="border-base-300 bg-base-100/60 flex flex-col gap-3 border-t px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4">
+                <div className="-ml-1 flex min-w-0 flex-wrap items-center gap-1">{actions}</div>
+                <div className="flex min-w-0 flex-wrap items-center gap-3 sm:justify-end">{trailing}</div>
+            </div>
+            {panel ? <div className="border-base-300 bg-base-100 border-t">{panel}</div> : null}
+        </article>
+    );
+}
+
+export function ResourceCardSkeleton({ presentation = 'default' }: Pick<ResourceCardProps, 'presentation'>) {
+    if (presentation === 'overview')
+        return (
+            <ResourceCard
+                presentation="overview"
+                details={
+                    <Stack space="tight">
+                        <SkeletonLoader.Shape presentation="heading" width="wide" />
+                        <SkeletonLoader.Shape width="short" />
+                    </Stack>
+                }
+                actions={<SkeletonLoader.Shape presentation="circle" />}
+                metrics={[0, 1].map(() => ({
+                    value: <SkeletonLoader.Shape presentation="metric" />,
+                    label: <SkeletonLoader.Shape />,
+                }))}
+                status={<SkeletonLoader.Shape width="wide" />}
+            />
+        );
+
+    return (
+        <ResourceCard
+            compact
+            actions={null}
+            leading={<SkeletonLoader.Shape presentation="circle" />}
+            details={<SkeletonLoader.Shape width="medium" />}
+            status={<SkeletonLoader.Shape width="short" />}
+            trailing={
+                <div className="flex w-56 max-w-full items-center gap-3 py-1">
+                    <SkeletonLoader.Shape presentation="control" width="medium" />
+                    <SkeletonLoader.Shape presentation="control" width="medium" />
+                </div>
+            }
+        />
+    );
+}

package/src/display/RowList.tsx

@@ -0,0 +1,110 @@
+import { ChevronRightIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import type { StatusTone } from '../feedback/StatusIndicator';
+import { LinkBox, LinkOverlay } from '../typography/Link';
+import { Text } from '../typography/Typography';
+import { toneTileClasses } from './ToneTile';
+
+/** Rows of one list inside a single bordered panel, separated by rules; or ruled rows in two columns on wide screens. */
+export function RowList({
+    children,
+    label,
+    layout = 'panel',
+}: {
+    children: ReactNode;
+    label: string;
+    layout?: 'panel' | 'columns';
+}) {
+    return (
+        <ul
+            aria-label={label}
+            className={
+                layout === 'columns'
+                    ? '[&>li]:border-base-300 grid gap-x-8 md:grid-cols-2 [&>li]:border-b'
+                    : 'divide-base-300 border-base-300 bg-base-100 divide-y overflow-hidden rounded-lg border'
+            }
+        >
+            {children}
+        </ul>
+    );
+}
+
+interface RowListItemProps {
+    /** Independent controls at the end of the row. */
+    actions?: ReactNode;
+    /** Short labels such as "lar can fix", shown before the actions or chevron. */
+    badges?: ReactNode;
+    detail?: string;
+    icon: ReactNode;
+    /** A round portrait instead of the tinted square tile. */
+    avatar?: boolean;
+    /** Makes the whole row a link, with actions remaining independently usable. */
+    href?: string;
+    onNavigate?: (href: string) => void;
+    subtitle?: string;
+    title: string;
+    tone?: StatusTone;
+}
+
+/** One row: a tinted icon, what the user recognises, one line about it, and muted facts. */
+export function RowListItem({
+    actions,
+    badges,
+    detail,
+    icon,
+    avatar = false,
+    href,
+    onNavigate,
+    subtitle,
+    title,
+    tone = 'neutral',
+}: RowListItemProps) {
+    const content = (
+        <>
+            <span
+                aria-hidden="true"
+                className={`flex shrink-0 items-center justify-center [&>div]:w-full [&>svg]:size-5 ${avatar ? 'size-10 overflow-hidden rounded-full' : 'size-9 rounded-lg'} ${toneTileClasses[tone]}`}
+            >
+                {icon}
+            </span>
+            <span className="flex min-w-0 flex-1 flex-col">
+                <Text as="span" variant="label" truncate title={title}>
+                    {href ? (
+                        <LinkOverlay href={href} onNavigate={onNavigate}>
+                            {title}
+                        </LinkOverlay>
+                    ) : (
+                        title
+                    )}
+                </Text>
+                {subtitle ? (
+                    <Text as="span" truncate title={subtitle}>
+                        {subtitle}
+                    </Text>
+                ) : null}
+                {detail ? (
+                    <Text as="span" variant="caption" tone="muted" truncate title={detail}>
+                        {detail}
+                    </Text>
+                ) : null}
+            </span>
+            {badges ? <span className="hidden shrink-0 items-center gap-2 sm:flex">{badges}</span> : null}
+        </>
+    );
+    const row = 'flex w-full min-w-0 items-center gap-3 px-4 py-3';
+
+    return (
+        <li>
+            <LinkBox className={`${row} ${href ? 'hover:bg-base-100 focus-within:bg-base-100 transition-colors' : ''}`}>
+                {content}
+                {actions ? <span className="flex shrink-0 items-center gap-1">{actions}</span> : null}
+                {href ? (
+                    <span aria-hidden="true" className="text-base-500 flex shrink-0 [&>svg]:size-4">
+                        <ChevronRightIcon />
+                    </span>
+                ) : null}
+            </LinkBox>
+        </li>
+    );
+}

package/src/display/StackedMeter.tsx

@@ -0,0 +1,72 @@
+import { Text } from '../typography/Typography';
+
+export type MeterTone = 'primary' | 'info' | 'success' | 'warning';
+
+const toneClasses: Record<MeterTone, string> = {
+    primary: 'bg-primary',
+    info: 'bg-info',
+    success: 'bg-success',
+    warning: 'bg-warning',
+};
+
+export interface MeterSegment {
+    id: string;
+    /** Shown on hover, for example "Playback 50%". */
+    label: string;
+    tone: MeterTone;
+    /** The share of the whole meter, from 0 to 1. */
+    value: number;
+}
+
+interface StackedMeterProps {
+    /** Summarizes the meter for assistive technology. */
+    label: string;
+    /** A dashed line at a share of the whole, for example a limit. */
+    marker?: { label: string; value: number };
+    segments: readonly MeterSegment[];
+}
+
+/** One bar split into toned segments, with an optional dashed marker. */
+export function StackedMeter({ label, marker, segments }: StackedMeterProps) {
+    return (
+        <div
+            role="img"
+            aria-label={label}
+            className="bg-base-200 relative flex h-4 w-full overflow-hidden rounded-full"
+        >
+            {segments
+                .filter((segment) => segment.value > 0)
+                .map((segment) => (
+                    <span
+                        key={segment.id}
+                        title={segment.label}
+                        className={`border-base-50 h-full border-r last:border-r-0 ${toneClasses[segment.tone]}`}
+                        style={{ width: `${Math.min(segment.value, 1) * 100}%` }}
+                    />
+                ))}
+            {marker ? (
+                <span
+                    title={marker.label}
+                    className="border-base-content absolute inset-y-0 border-l-2 border-dashed"
+                    style={{ left: `${Math.min(Math.max(marker.value, 0), 1) * 100}%` }}
+                />
+            ) : null}
+        </div>
+    );
+}
+
+/** The key to the tones of one or more stacked meters. */
+export function MeterLegend({ items, label }: { items: readonly Omit<MeterSegment, 'value'>[]; label: string }) {
+    return (
+        <ul aria-label={label} className="flex flex-wrap gap-x-4 gap-y-1">
+            {items.map((item) => (
+                <li key={item.id} className="flex items-center gap-1.5">
+                    <span aria-hidden="true" className={`size-2 shrink-0 rounded-full ${toneClasses[item.tone]}`} />
+                    <Text as="span" variant="caption" tone="muted">
+                        {item.label}
+                    </Text>
+                </li>
+            ))}
+        </ul>
+    );
+}

package/src/display/StatTile.tsx

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+import { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Inline } from '../layout/Flow';
+import { Text } from '../typography/Typography';
+
+interface StatTileProps {
+    label: string;
+    onClick: () => void;
+    selected: boolean;
+    tone: StatusTone;
+    value: ReactNode;
+}
+
+/** A count with a label that doubles as a toggle filter. */
+export function StatTile({ label, onClick, selected, tone, value }: StatTileProps) {
+    return (
+        <button
+            {...tabbable}
+            type="button"
+            aria-pressed={selected}
+            className={`focus-visible:outline-primary flex flex-col items-start gap-2 rounded-lg border p-4 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 ${
+                selected ? 'border-primary bg-primary/5' : 'border-base-300 bg-base-100/60 hover:border-base-300'
+            }`}
+            onClick={onClick}
+        >
+            <Inline align="center" space="related">
+                <StatusIndicator size="sm" tone={tone} />
+                <Text as="span" variant="label">
+                    {label}
+                </Text>
+            </Inline>
+            <Text as="span" variant="metric">
+                {value}
+            </Text>
+        </button>
+    );
+}

package/src/display/StepList.tsx

@@ -0,0 +1,10 @@
+/** Numbered instructions in reading order. */
+export function StepList({ steps }: { steps: readonly string[] }) {
+    return (
+        <ol className="text-base-800 list-decimal space-y-1 pl-5 text-sm">
+            {steps.map((step) => (
+                <li key={step}>{step}</li>
+            ))}
+        </ol>
+    );
+}

package/src/display/TextPreview.tsx

@@ -0,0 +1,66 @@
+import { type ReactNode, useState } from 'react';
+
+import { Button } from '../actions/Button';
+import { Stack } from '../layout/Flow';
+import { Modal } from '../overlays/Modal';
+import { Text } from '../typography/Typography';
+
+type TextPreviewProps =
+    | { loading: true }
+    | {
+          loading?: false;
+          children?: ReactNode;
+          value: string;
+          moreLabel: string;
+          language?: string;
+          title: string;
+      };
+
+export function TextPreview(props: TextPreviewProps) {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <>
+            <div className="flex max-w-3xl min-w-0 items-center gap-3">
+                <Text
+                    lang={props.loading ? undefined : props.language}
+                    tone="muted"
+                    className={`min-w-0 truncate leading-6 ${props.loading ? 'flex-1' : ''}`}
+                    loading={props.loading}
+                >
+                    {!props.loading && props.value}
+                </Text>
+                {props.loading ? (
+                    <Text className="w-20 shrink-0 leading-6" loading />
+                ) : (
+                    <Button
+                        className="h-auto shrink-0 px-0 py-0 text-sm leading-6 before:-inset-y-2.5"
+                        aria-haspopup="dialog"
+                        onClick={() => setOpen(true)}
+                        variant="quiet"
+                    >
+                        {props.moreLabel}
+                    </Button>
+                )}
+            </div>
+            {!props.loading && open ? (
+                <Modal onClose={() => setOpen(false)}>
+                    <Modal.Content title={props.title}>
+                        <Modal.Body>
+                            <Stack space="section">
+                                {props.children}
+                                <Text
+                                    lang={props.language}
+                                    className="leading-7 text-pretty wrap-break-word whitespace-pre-line"
+                                    variant="description"
+                                >
+                                    {props.value}
+                                </Text>
+                            </Stack>
+                        </Modal.Body>
+                    </Modal.Content>
+                </Modal>
+            ) : null}
+        </>
+    );
+}