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

package/src/display/DetailHero.tsx

@@ -0,0 +1,191 @@
+import type { ReactNode } from 'react';
+
+import { Button } from '../actions/Button';
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+import { Popover } from '../overlays/Popover';
+import { Heading, Text } from '../typography/Typography';
+import { Badge } from './Badge';
+import { TextPreview } from './TextPreview';
+
+type DetailHeroProps =
+    | { loading: true; loadingLabel: string; summary?: boolean; description?: boolean; details?: number }
+    | {
+          loading?: false;
+          actions?: ReactNode;
+          artwork: ReactNode;
+          backgroundSrc?: string;
+          children: ReactNode;
+          label: string;
+          subtitle?: ReactNode;
+          summary?: ReactNode;
+          title: string;
+          titleLevel?: 'h1' | 'h2';
+          titleLogoSrc?: string;
+      };
+
+export function DetailHero(props: DetailHeroProps) {
+    const loading = props.loading === true;
+    const background = !props.loading && props.backgroundSrc;
+
+    return (
+        <SkeletonLoader loading={loading} label={props.loading ? props.loadingLabel : ''}>
+            <section className="relative isolate min-w-0 pb-4">
+                {background ? (
+                    <div
+                        aria-hidden="true"
+                        className="pointer-events-none absolute inset-x-0 -top-2 bottom-0 -z-10 overflow-hidden rounded-2xl [mask-image:linear-gradient(to_bottom,black_55%,transparent)]"
+                    >
+                        <img src={background} alt="" className="size-full object-cover opacity-35" />
+                        <div className="from-base-50 via-base-50/60 to-base-50/20 absolute inset-0 bg-linear-to-t" />
+                    </div>
+                ) : null}
+                <div
+                    className={`grid gap-6 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-center md:grid-cols-[14rem_minmax(0,1fr)] md:gap-8 ${background ? 'p-4 sm:p-5' : ''}`}
+                >
+                    <div className="ring-base-900/10 w-40 self-start overflow-hidden rounded-lg shadow-md ring-1 md:w-full">
+                        {props.loading ? <SkeletonLoader.Shape presentation="artwork" /> : props.artwork}
+                    </div>
+                    <div className="flex min-w-0 flex-col gap-5 md:gap-6">
+                        <div className="min-w-0">
+                            <Text
+                                variant="overline"
+                                tone="muted"
+                                className={`mb-2 ${loading ? 'max-w-32' : ''}`}
+                                loading={loading}
+                            >
+                                {!props.loading && props.label}
+                            </Text>
+                            <div className="flex min-h-8 min-w-0 flex-wrap items-center gap-5">
+                                <Heading
+                                    as={props.loading ? 'h2' : (props.titleLevel ?? 'h2')}
+                                    variant="hero"
+                                    className={`min-w-0 wrap-break-word ${loading ? 'w-3/4 max-w-xl' : ''}`}
+                                    loading={loading}
+                                >
+                                    {!props.loading &&
+                                        (props.titleLogoSrc ? (
+                                            <img
+                                                src={props.titleLogoSrc}
+                                                alt={props.title}
+                                                className="max-h-28 w-auto max-w-full object-contain object-left sm:max-w-sm"
+                                            />
+                                        ) : (
+                                            props.title
+                                        ))}
+                                </Heading>
+                                {!props.loading && props.actions ? (
+                                    <div className="flex max-w-full shrink-0 flex-wrap items-center gap-3">
+                                        {props.actions}
+                                    </div>
+                                ) : null}
+                            </div>
+                            {props.loading || props.subtitle ? (
+                                <Text
+                                    variant="description"
+                                    tone="muted"
+                                    className={`mt-2 wrap-break-word ${loading ? 'max-w-sm' : ''}`}
+                                    loading={loading}
+                                >
+                                    {!props.loading && props.subtitle}
+                                </Text>
+                            ) : null}
+                        </div>
+                        {props.summary ? (
+                            <Text tone="muted" className="max-w-xl" loading={loading}>
+                                {!props.loading && props.summary}
+                            </Text>
+                        ) : null}
+                        {props.loading ? (
+                            <>
+                                <DetailHeroDetails>
+                                    {Array.from({ length: props.details ?? 3 }, (_, index) => (
+                                        <DetailHeroDetail key={index} loading />
+                                    ))}
+                                </DetailHeroDetails>
+                                {props.description ? <TextPreview loading /> : null}
+                            </>
+                        ) : (
+                            props.children
+                        )}
+                    </div>
+                </div>
+            </section>
+        </SkeletonLoader>
+    );
+}
+
+export function DetailHeroDetails({ children }: { children: ReactNode }) {
+    return <dl className="grid grid-cols-2 gap-x-8 gap-y-4 sm:flex sm:flex-wrap">{children}</dl>;
+}
+
+type DetailProps = { loading: true } | { loading?: false; label: string; value: ReactNode };
+
+export function DetailHeroDetail(props: DetailProps) {
+    return (
+        <div className={props.loading ? 'w-24' : 'max-w-full min-w-0'}>
+            <dt>
+                <Text as="span" variant="caption" tone="muted" loading={props.loading}>
+                    {!props.loading && props.label}
+                </Text>
+            </dt>
+            <dd className="mt-1 min-h-6 wrap-break-word">
+                <Text as="div" variant="label" loading={props.loading}>
+                    {!props.loading && props.value}
+                </Text>
+            </dd>
+        </div>
+    );
+}
+
+export function DetailHeroTags({
+    label,
+    moreLabel,
+    values,
+}: {
+    label: string;
+    moreLabel: string;
+    values: readonly string[];
+}) {
+    if (!values.length) return null;
+
+    return (
+        <DetailHeroDetail
+            label={label}
+            value={
+                <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+                    <span>{values[0]}</span>
+                    {values.length > 1 ? (
+                        <Popover>
+                            <Popover.Trigger asChild>
+                                {/* One line of the label's height at every width, so the row matches the others;
+                                    the hit area extends past it instead. */}
+                                <Button
+                                    className="h-5 px-1.5 py-0 text-xs leading-5 before:-inset-y-3 sm:h-5"
+                                    aria-label={`${label}: ${moreLabel}`}
+                                    variant="quiet"
+                                >
+                                    {moreLabel}
+                                </Button>
+                            </Popover.Trigger>
+                            <Popover.Content align="start" width="sm" aria-label={label}>
+                                <Text variant="label">{label}</Text>
+                                <ul className="mt-3 flex flex-wrap gap-2">
+                                    {values.map((value) => (
+                                        <li key={value} className="max-w-full min-w-0">
+                                            <Badge
+                                                tone="neutral"
+                                                className="max-w-full wrap-break-word whitespace-normal"
+                                            >
+                                                {value}
+                                            </Badge>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </Popover.Content>
+                        </Popover>
+                    ) : null}
+                </div>
+            }
+        />
+    );
+}

package/src/display/DetailList.tsx

@@ -0,0 +1,74 @@
+import { Box } from '@ninna-ui/layout';
+import { Code } from '@ninna-ui/primitives';
+import type { ReactNode } from 'react';
+
+import { Stack } from '../layout/Flow';
+import { Text } from '../typography/Typography';
+
+interface DetailListItem {
+    actions?: ReactNode;
+    key?: string;
+    label: string;
+    value: string;
+}
+
+interface DetailListProps {
+    compact?: boolean;
+    items: readonly DetailListItem[];
+    title: string;
+}
+
+export function DetailList({ compact = false, items, title }: DetailListProps) {
+    return (
+        <Box className={compact ? 'min-w-0' : 'border-base-300 mt-1 border-t px-2 pt-3 pb-1'}>
+            {!compact ? (
+                <Text as="span" variant="overline" tone="muted">
+                    {title}
+                </Text>
+            ) : null}
+            <Stack
+                as="dl"
+                aria-label={title}
+                space={compact ? 'none' : 'related'}
+                className={compact ? 'min-w-0' : 'mt-2'}
+            >
+                {items.map((item) => (
+                    <div
+                        key={item.key ?? item.label}
+                        className={
+                            compact
+                                ? 'grid min-w-0 grid-cols-[minmax(0,5rem)_minmax(0,1fr)] items-center gap-2'
+                                : 'flex min-w-0 items-center justify-between gap-3'
+                        }
+                    >
+                        <dt className={compact ? 'min-w-0' : 'shrink-0'}>
+                            <Text
+                                as="span"
+                                className={compact ? 'block' : undefined}
+                                variant="caption"
+                                tone="muted"
+                                truncate={compact}
+                                title={item.label}
+                            >
+                                {item.label}
+                            </Text>
+                        </dt>
+                        <dd className="min-w-0">
+                            <div className="flex min-w-0 items-center gap-1">
+                                <Code
+                                    title={item.value}
+                                    className="block max-w-full min-w-0 flex-1 truncate px-1.5 py-0.5 text-xs"
+                                >
+                                    {item.value}
+                                </Code>
+                                {item.actions ? (
+                                    <span className="flex shrink-0 items-center">{item.actions}</span>
+                                ) : null}
+                            </div>
+                        </dd>
+                    </div>
+                ))}
+            </Stack>
+        </Box>
+    );
+}

package/src/display/DeviceCard.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+
+import { Inline, Stack } from '../layout/Flow';
+import { Text } from '../typography/Typography';
+
+interface DeviceCardProps {
+    /** A control in the top corner, for example a limit select. */
+    action?: ReactNode;
+    /** Beside the name, for example a status badge. */
+    badge?: ReactNode;
+    children: ReactNode;
+    detail?: string;
+    /** Below the content, past a divider, for example the device's encoder. */
+    footer?: ReactNode;
+    /** Dashed, for a device that is detected but cannot be used. */
+    unavailable?: boolean;
+    name: string;
+}
+
+/** One piece of hardware: its name and detail, a corner control and its content. */
+export function DeviceCard({ action, badge, children, detail, footer, name, unavailable = false }: DeviceCardProps) {
+    return (
+        <article
+            aria-label={name}
+            className={`flex min-w-0 flex-col gap-4 rounded-lg p-4 ${
+                unavailable ? 'border-base-300 border border-dashed' : 'border-base-300 bg-base-100 border shadow-xs'
+            }`}
+        >
+            <div className="flex min-w-0 items-start justify-between gap-3">
+                <Stack space="none" className="min-w-0">
+                    <Inline align="center" space="related" className="min-w-0">
+                        <Text as="span" variant="label" truncate title={name}>
+                            {name}
+                        </Text>
+                        {badge}
+                    </Inline>
+                    {detail ? (
+                        <Text as="span" variant="caption" tone="muted">
+                            {detail}
+                        </Text>
+                    ) : null}
+                </Stack>
+                {action ? <div className="w-28 shrink-0">{action}</div> : null}
+            </div>
+            {children}
+            {footer ? <div className="border-base-300 border-t pt-3">{footer}</div> : null}
+        </article>
+    );
+}

package/src/display/Identity.tsx

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+
+import { Stack } from '../layout/Flow';
+import { Heading, Text } from '../typography/Typography';
+import { Badge } from './Badge';
+
+interface IdentityProps {
+    artwork: ReactNode;
+    detail?: string;
+    tag?: string;
+    title?: ReactNode;
+    presentation?: 'square' | 'poster';
+    /** Heads its page: a larger poster, an overline naming what it belongs to, and the title as the page's h1. */
+    overline?: string;
+}
+
+/** A compact "what is this" strip: small framed artwork beside a title, one line of facts, and an optional tag. */
+export function Identity({ artwork, detail, tag, title, overline, presentation = 'square' }: IdentityProps) {
+    const heading = overline !== undefined;
+
+    return (
+        <div className={`flex min-w-0 items-center ${heading ? 'gap-6' : 'gap-4'}`}>
+            <div
+                className={`${presentation === 'poster' ? `${heading ? 'w-24' : 'w-16'} aspect-[2/3]` : 'size-16'} ring-base-900/10 shrink-0 overflow-hidden rounded-lg shadow-sm ring-1`}
+            >
+                {artwork}
+            </div>
+            <Stack space="tight" className="min-w-0 flex-1">
+                {heading ? (
+                    <Text variant="overline" tone="muted" truncate>
+                        {overline}
+                    </Text>
+                ) : null}
+                {title && heading ? (
+                    <Heading as="h1" variant="page">
+                        {title}
+                    </Heading>
+                ) : title ? (
+                    <Text as="span" truncate variant="label">
+                        {title}
+                    </Text>
+                ) : null}
+                {detail ? (
+                    <Text as="span" truncate title={detail} tone="muted">
+                        {detail}
+                    </Text>
+                ) : null}
+                {tag ? (
+                    <div className="mt-1 flex">
+                        <Badge tone="neutral">{tag}</Badge>
+                    </div>
+                ) : null}
+            </Stack>
+        </div>
+    );
+}

package/src/display/ImageCard.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react';
+
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Stack } from '../layout/Flow';
+import { LinkBox, LinkOverlay } from '../typography/Link';
+import { Text } from '../typography/Typography';
+
+type ImageCardProps =
+    | { loading: true; textRows?: 1 | 2 | 3; aspect?: 'square' | 'poster' }
+    | {
+          loading?: false;
+          artwork: ReactNode;
+          onClick?: () => void;
+          href?: string;
+          onNavigate?: (href: string) => void;
+          subtitle?: ReactNode;
+          label?: string;
+          detail?: string;
+          title: string;
+          presentation?: 'person' | 'poster';
+          /** A short qualifier shown muted after the title on the same line, such as an edition. */
+          titleDetail?: string;
+      };
+
+export function ImageCard(props: ImageCardProps) {
+    const lines = props.loading
+        ? Array.from<unknown, ReactNode>({ length: props.textRows ?? 2 }, () => undefined)
+        : [
+              props.titleDetail ? (
+                  <>
+                      {props.title}
+                      <span className="text-base-700 font-normal"> · {props.titleDetail}</span>
+                  </>
+              ) : (
+                  props.title
+              ),
+              ...(props.subtitle || props.detail ? [props.subtitle || '\u00a0'] : []),
+              ...(props.detail ? [props.detail] : []),
+          ];
+    const label = props.loading
+        ? undefined
+        : (props.label ??
+          [
+              props.title,
+              props.titleDetail,
+              typeof props.subtitle === 'string' ? props.subtitle : undefined,
+              props.detail,
+          ]
+              .filter(Boolean)
+              .join(', '));
+    const content = (
+        <Stack space="related" className="min-w-0 text-left">
+            {props.loading ? (
+                <SkeletonLoader.Shape presentation={props.aspect === 'poster' ? 'poster' : 'artwork'} />
+            ) : props.presentation === 'person' ? (
+                <span className="block size-16 overflow-hidden rounded-full [&>div]:size-full">{props.artwork}</span>
+            ) : (
+                props.artwork
+            )}
+            <Stack space="none" className="min-w-0">
+                {lines.map((line, index) => (
+                    <Text
+                        key={index}
+                        as="span"
+                        variant={index === 0 ? 'label' : 'caption'}
+                        tone={index === 0 ? 'default' : 'muted'}
+                        truncate={props.loading || !props.presentation}
+                        className={!props.loading && props.presentation ? 'wrap-anywhere' : undefined}
+                        loading={props.loading}
+                    >
+                        {!props.loading && props.href && index === 0 ? (
+                            <LinkOverlay href={props.href} onNavigate={props.onNavigate} aria-label={label}>
+                                {line}
+                            </LinkOverlay>
+                        ) : (
+                            line
+                        )}
+                    </Text>
+                ))}
+            </Stack>
+        </Stack>
+    );
+
+    if (props.loading || (!props.href && !props.onClick)) return content;
+
+    return (
+        <LinkBox className="group/media-item rounded-lg">
+            {content}
+            {!props.href && props.onClick ? (
+                <button
+                    {...tabbable}
+                    type="button"
+                    data-slot="action-overlay"
+                    aria-label={label}
+                    className="focus-visible:outline-primary absolute inset-0 z-1 w-full cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2"
+                    onClick={props.onClick}
+                />
+            ) : null}
+        </LinkBox>
+    );
+}

package/src/display/ImagePicker.tsx

@@ -0,0 +1,149 @@
+import { CheckIcon, Disc3Icon } from 'lucide-react';
+import { type ReactNode, useRef, useState } from 'react';
+
+import { Button } from '../actions/Button';
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Artwork } from './Artwork';
+
+export function ImagePicker({ label, header, children }: { label: string; header: ReactNode; children: ReactNode }) {
+    return (
+        <section aria-label={label} className="flex min-h-0 flex-1 flex-col gap-3">
+            <div className="shrink-0">{header}</div>
+            <div className="-mx-1 min-h-0 flex-1 overflow-y-auto overscroll-contain p-1">{children}</div>
+        </section>
+    );
+}
+
+export function ImagePickerGrid({ children, label }: { children: ReactNode; label: string }) {
+    return (
+        <div
+            role="group"
+            aria-label={label}
+            className="grid grid-cols-2 gap-3 sm:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]"
+        >
+            {children}
+        </div>
+    );
+}
+
+export function ImagePickerOption({
+    src,
+    pending,
+    error,
+    label,
+    detail,
+    errorLabel,
+    selected,
+    disabled,
+    landscape = false,
+    aspect,
+    onSelect,
+}: {
+    src?: string;
+    pending?: boolean;
+    error?: boolean;
+    label: string;
+    detail?: string;
+    errorLabel: string;
+    selected: boolean;
+    disabled?: boolean;
+    landscape?: boolean;
+    aspect?: 'square' | 'video' | 'poster' | 'logo';
+    onSelect: () => void;
+}) {
+    return (
+        <button
+            {...tabbable}
+            type="button"
+            aria-label={label}
+            aria-pressed={selected}
+            disabled={disabled}
+            onClick={onSelect}
+            className={`group bg-base-100 focus-visible:outline-primary relative overflow-hidden rounded-lg border text-left transition-all focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50 ${selected ? 'border-primary ring-primary/20 ring-2' : 'border-base-300 hover:border-primary/50 hover:shadow-md'}`}
+        >
+            <Artwork
+                alt=""
+                aspect={aspect ?? (landscape ? 'video' : 'square')}
+                error={error}
+                errorLabel={errorLabel}
+                fallback={<Disc3Icon />}
+                pending={pending}
+                referrerPolicy="no-referrer"
+                showLoadingIndicator={false}
+                src={src}
+            />
+            {selected ? (
+                <span
+                    aria-hidden="true"
+                    className="bg-primary text-primary-content absolute top-2 right-2 rounded-full p-1 shadow [&>svg]:size-4"
+                >
+                    <CheckIcon />
+                </span>
+            ) : null}
+            <span className="block truncate px-3 pt-2 text-xs font-medium">{label}</span>
+            <span className="text-base-600 block truncate px-3 pb-2 text-xs">{detail ?? '\u00a0'}</span>
+        </button>
+    );
+}
+
+export function ImageUpload({
+    label,
+    hint,
+    disabled,
+    onFile,
+}: {
+    label: string;
+    hint: string;
+    disabled?: boolean;
+    onFile: (file: File) => void;
+}) {
+    const [dragging, setDragging] = useState(false);
+    const input = useRef<HTMLInputElement>(null);
+
+    return (
+        <span
+            className={`inline-flex shrink-0 rounded-md whitespace-nowrap ${dragging ? 'ring-primary ring-2' : ''}`}
+            onDragOver={(event) => {
+                event.preventDefault();
+
+                if (!disabled) setDragging(true);
+            }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={(event) => {
+                event.preventDefault();
+                setDragging(false);
+
+                const file = event.dataTransfer.files[0];
+
+                if (file && !disabled) onFile(file);
+            }}
+        >
+            <input
+                ref={input}
+                type="file"
+                hidden
+                accept="image/jpeg,image/png,image/webp,image/gif"
+                aria-label={label}
+                disabled={disabled}
+                onChange={(event) => {
+                    const file = event.target.files?.[0];
+
+                    if (file) onFile(file);
+
+                    event.target.value = '';
+                }}
+            />
+            <Button
+                type="button"
+                disabled={disabled}
+                title={hint}
+                aria-description={hint}
+                leftIcon={<Disc3Icon />}
+                onClick={() => input.current?.click()}
+                variant="secondary"
+            >
+                {label}
+            </Button>
+        </span>
+    );
+}

package/src/display/InfoBox.tsx

@@ -0,0 +1,48 @@
+import { Alert } from '@ninna-ui/feedback';
+import { ChevronRightIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import { Heading, Text } from '../typography/Typography';
+
+interface InfoBoxProps {
+    description: string;
+    icon: ReactNode;
+    onClick: () => void;
+    title: string;
+}
+
+/**
+ * A prominent, actionable introduction that opens optional guidance.
+ * Use for a short teaser leading to a guide or other explanatory surface. Use Alert for current
+ * status, NoticeCard for content that needs examination or a decision, and InsetPanel for grouping.
+ */
+export function InfoBox({ description, icon, onClick, title }: InfoBoxProps) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className="group border-primary/40 border-l-primary bg-primary/10 hover:bg-primary/15 focus-visible:outline-primary relative w-full cursor-pointer rounded-lg border border-l-4 text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 motion-reduce:transition-none"
+        >
+            <Alert
+                role="presentation"
+                aria-live="off"
+                color="primary"
+                size="md"
+                icon={icon}
+                title={
+                    <Heading as="h3" variant="label">
+                        {title}
+                    </Heading>
+                }
+                description={<Text tone="muted">{description}</Text>}
+                className="text-primary [&_[data-slot=icon]]:bg-primary/15 bg-transparent pr-12 [&_[data-slot=icon]]:mt-0 [&_[data-slot=icon]]:flex [&_[data-slot=icon]]:size-9 [&_[data-slot=icon]]:items-center [&_[data-slot=icon]]:justify-center [&_[data-slot=icon]]:rounded-lg [&_[data-slot=icon]>svg]:size-5"
+            />
+            <span
+                aria-hidden="true"
+                className="text-primary absolute inset-y-0 right-4 flex items-center transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none [&>svg]:size-5"
+            >
+                <ChevronRightIcon />
+            </span>
+        </button>
+    );
+}