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

package/src/layout/WorkspaceActionsHeader.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+import { ContentContainer } from './ContentContainer';
+
+interface WorkspaceActionsHeaderProps {
+    children?: ReactNode;
+    leading?: ReactNode;
+}
+
+export function WorkspaceActionsHeader({ children, leading }: WorkspaceActionsHeaderProps) {
+    return (
+        <ContentContainer className="bg-base-50 z-40 flex h-14 shrink-0 items-center gap-2 sm:gap-3">
+            {leading ? <div className="flex min-w-0 flex-1 items-center gap-1">{leading}</div> : null}
+            {children ? <div className="ml-auto shrink-0">{children}</div> : null}
+        </ContentContainer>
+    );
+}

package/src/layout/index.ts

@@ -0,0 +1,18 @@
+export { AppShell } from './AppShell';
+export { AuthLayout } from './AuthLayout';
+export { type FlowSpace, Grid, Inline, Stack, type StackProps } from './Flow';
+export { PageLayout } from './PageLayout';
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea';
+export { Section } from './Section';
+export { SidebarNavigationItem } from './sidebar/SidebarNavigationItem';
+export { SidebarNavigationGroup, SidebarPane } from './sidebar/SidebarPane';
+export { TitleBar, TitleBarTrail, type TitleBarTrailItem } from './TitleBar';
+export { CommandPaletteTrigger } from './toolbar/CommandPaletteTrigger';
+export { ToolbarStatusGroup } from './toolbar/ToolbarStatusGroup';
+export { ToolbarStatusItem } from './toolbar/ToolbarStatusItem';
+export { WorkspaceActionsHeader } from './WorkspaceActionsHeader';
+export { Box } from '@ninna-ui/layout';
+export { Divider } from '@ninna-ui/primitives';
+export { ContentContainer } from './ContentContainer';
+export { Eyebrow, PageSection, SectionHeading } from './PageSection';
+export { SiteFooter, SiteHeader, type SiteLink, SiteShell } from './Site';

package/src/layout/sidebar/SidebarNavigationItem.tsx

@@ -0,0 +1,45 @@
+import { cloneElement, type ComponentPropsWithoutRef, isValidElement, useEffect, useRef } from 'react';
+
+import { StatusIndicator } from '../../feedback/StatusIndicator';
+import { tabbable } from '../../foundations/KeyboardFocus';
+
+type SidebarNavigationItemProps = Omit<ComponentPropsWithoutRef<'button'>, 'className' | 'style' | 'type'> & {
+    active?: boolean;
+    /** Styles its only child, such as a router link, instead of wrapping it in a second tab stop. */
+    asChild?: boolean;
+    notification?: string;
+};
+
+export function SidebarNavigationItem({
+    active = false,
+    asChild = false,
+    children,
+    notification,
+    ...props
+}: SidebarNavigationItemProps) {
+    const target = useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+        if (active) target.current?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+    }, [active]);
+
+    const item = {
+        ...tabbable,
+        'aria-current': active ? ('page' as const) : undefined,
+        'aria-description': notification,
+        className: `flex h-8 shrink-0 items-center gap-2 rounded-md px-2 text-sm transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary [&>svg]:size-4 ${active ? 'bg-base-200 font-medium text-base-content dark:bg-base-300 [&>svg]:text-base-content' : 'text-base-content/80 hover:bg-base-200/70 hover:text-base-content [&>svg]:text-base-700'}`,
+    };
+
+    const indicator = notification ? <StatusIndicator tone="warning" size="sm" className="ml-auto" /> : null;
+
+    if (asChild && isValidElement<ComponentPropsWithoutRef<'button'>>(children)) {
+        return cloneElement(children, item, children.props.children, indicator);
+    }
+
+    return (
+        <button ref={target} {...props} {...item} type="button">
+            {children}
+            {indicator}
+        </button>
+    );
+}

package/src/layout/sidebar/SidebarPane.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { Text } from '../../typography/Typography';
+
+interface SidebarPaneProps {
+    children: ReactNode;
+    label: string;
+}
+
+export function SidebarPane({ children, label }: SidebarPaneProps) {
+    return (
+        <aside className="border-base-300 bg-base-100/40 w-full border-y md:h-full md:border-y-0 md:border-r dark:bg-black/20">
+            <nav
+                aria-label={label}
+                className="flex items-center gap-1 overflow-x-auto overscroll-contain p-3 md:h-full md:flex-col md:items-stretch md:gap-1 md:overflow-y-auto md:px-3 md:py-4"
+            >
+                {children}
+            </nav>
+        </aside>
+    );
+}
+
+interface SidebarNavigationGroupProps {
+    children: ReactNode;
+    label: string;
+}
+
+export function SidebarNavigationGroup({ children, label }: SidebarNavigationGroupProps) {
+    return (
+        <div role="group" aria-label={label} className="flex shrink-0 gap-1 md:mb-4 md:flex-col md:last:mb-0">
+            <Text as="span" className="hidden h-7 px-2 leading-7 font-medium md:block" variant="caption" tone="muted">
+                {label}
+            </Text>
+            {children}
+        </div>
+    );
+}

package/src/layout/toolbar/CommandPaletteTrigger.tsx

@@ -0,0 +1,53 @@
+import { SearchIcon } from 'lucide-react';
+import { useEffect, useEffectEvent, useRef } from 'react';
+
+import { Kbd } from '../../display/Kbd';
+import { tabbable } from '../../foundations/KeyboardFocus';
+import { applePlatform, isShortcut } from '../../foundations/KeyboardShortcut';
+
+interface CommandPaletteTriggerProps {
+    label: string;
+    onOpen: () => void;
+    /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */
+    shortcut: string;
+}
+
+/** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its
+ *  icon when the title bar is narrow. */
+export function CommandPaletteTrigger({ label, onOpen, shortcut }: CommandPaletteTriggerProps) {
+    const button = useRef<HTMLButtonElement>(null);
+    const openFromShortcut = useEffectEvent((event: KeyboardEvent) => {
+        // An open dialog hides the page behind it, the trigger included.
+        if (!isShortcut(event, shortcut) || button.current?.closest('[aria-hidden="true"]')) return;
+
+        event.preventDefault();
+        onOpen();
+    });
+
+    useEffect(() => {
+        const listener = (event: KeyboardEvent) => openFromShortcut(event);
+
+        document.addEventListener('keydown', listener);
+
+        return () => document.removeEventListener('keydown', listener);
+    }, []);
+
+    return (
+        <button
+            {...tabbable}
+            ref={button}
+            type="button"
+            aria-label={label}
+            aria-haspopup="dialog"
+            aria-keyshortcuts={`${applePlatform ? 'Meta' : 'Control'}+${shortcut.toUpperCase()}`}
+            onClick={onOpen}
+            className="text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0"
+        >
+            <SearchIcon />
+            <span className="hidden flex-1 text-left @2xl:inline">{label}</span>
+            <span className="hidden pointer-fine:@2xl:inline">
+                <Kbd>{applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`}</Kbd>
+            </span>
+        </button>
+    );
+}

package/src/layout/toolbar/ToolbarStatusGroup.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+
+import { Inline } from '../Flow';
+
+type ToolbarStatusGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+
+export function ToolbarStatusGroup(props: ToolbarStatusGroupProps) {
+    return <Inline align="center" justify="start" {...props} className="h-8 shrink-0 gap-0 sm:gap-2 sm:px-1" />;
+}

package/src/layout/toolbar/ToolbarStatusItem.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@ninna-ui/layout';
+import type { ReactNode } from 'react';
+
+import { StatusIndicator, type StatusTone } from '../../feedback/StatusIndicator';
+
+interface ToolbarStatusItemProps {
+    icon: ReactNode;
+    tone: StatusTone;
+}
+
+export function ToolbarStatusItem({ icon, tone }: ToolbarStatusItemProps) {
+    return (
+        <Box aria-hidden="true" className="relative size-4 shrink-0 text-(--color-header-icon) [&>svg]:size-full">
+            {icon}
+            <StatusIndicator tone={tone} size="sm" className="absolute -right-0.5 -bottom-0.5" />
+        </Box>
+    );
+}

package/src/navigation/ArtworkTabs.tsx

@@ -0,0 +1,107 @@
+import { type ReactNode, useEffect, useRef } from 'react';
+
+import { revealInRow } from '../collections/useScrollRow';
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+import { Stack } from '../layout/Flow';
+import { Text } from '../typography/Typography';
+import { moveTabSelection } from './TabKeys';
+
+export interface ArtworkTabsItem<T extends string> {
+    value: T;
+    label: string;
+    caption?: string;
+    /** Small poster artwork, about 3rem wide. */
+    artwork: ReactNode;
+}
+
+const row = '-mx-1 flex gap-3 overflow-x-auto px-1 pt-1 pb-2';
+
+/** One sideways-scrolling row of tabs with small artwork, such as a show's seasons. */
+export function ArtworkTabs<T extends string>({
+    items,
+    label,
+    value,
+    onChange,
+    loading = false,
+    loadingLabel = label,
+}: {
+    items: readonly ArtworkTabsItem<T>[];
+    label: string;
+    value: T | undefined;
+    onChange: (value: T) => void;
+    loading?: boolean;
+    loadingLabel?: string;
+}) {
+    const tabs = useRef<HTMLDivElement>(null);
+
+    // The selected tab stays in view however it was chosen, such as by an episode crossing into the next season.
+    useEffect(() => {
+        if (tabs.current && value !== undefined)
+            revealInRow(tabs.current, tabs.current.querySelector(`[data-value="${value}"]`));
+    }, [value, loading]);
+
+    if (loading)
+        return (
+            <SkeletonLoader label={loadingLabel}>
+                <div className={row}>
+                    {Array.from({ length: 4 }, (_, index) => (
+                        <div key={index} className="flex w-56 shrink-0 items-center gap-3 p-1.5">
+                            <span className="w-12 shrink-0">
+                                <SkeletonLoader.Shape presentation="poster" />
+                            </span>
+                            <SkeletonLoader.Shape width="wide" />
+                        </div>
+                    ))}
+                </div>
+            </SkeletonLoader>
+        );
+
+    return (
+        <div
+            ref={tabs}
+            role="tablist"
+            aria-label={label}
+            className={row}
+            onKeyDown={(event) => {
+                if (value !== undefined)
+                    moveTabSelection(
+                        event,
+                        items.map((item) => item.value),
+                        value,
+                        onChange,
+                    );
+            }}
+        >
+            {items.map((item) => {
+                const selected = item.value === value;
+
+                return (
+                    <button
+                        key={item.value}
+                        type="button"
+                        role="tab"
+                        aria-selected={selected}
+                        tabIndex={selected ? 0 : -1}
+                        data-value={item.value}
+                        className="group hover:bg-base-200 focus-visible:outline-primary aria-selected:bg-base-200 aria-selected:ring-base-300 flex w-56 shrink-0 items-center gap-3 rounded-lg p-1.5 pr-3 text-left transition-colors focus-visible:outline-2 aria-selected:ring-1"
+                        onClick={() => onChange(item.value)}
+                    >
+                        <span className="ring-base-900/10 w-12 shrink-0 overflow-hidden rounded-md ring-1 transition-opacity group-hover:opacity-100 group-aria-[selected=false]:opacity-70">
+                            {item.artwork}
+                        </span>
+                        <Stack space="none" className="min-w-0">
+                            <Text as="span" variant="label" truncate>
+                                {item.label}
+                            </Text>
+                            {item.caption ? (
+                                <Text as="span" variant="caption" tone="muted" truncate>
+                                    {item.caption}
+                                </Text>
+                            ) : null}
+                        </Stack>
+                    </button>
+                );
+            })}
+        </div>
+    );
+}

package/src/navigation/Breadcrumbs.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+import { Link } from '../typography/Link';
+import { Text } from '../typography/Typography';
+
+interface BreadcrumbsProps {
+    label: string;
+    items: readonly { href: string; label: ReactNode }[];
+    current?: ReactNode;
+    onNavigate: (href: string) => void;
+}
+
+export function Breadcrumbs({ label, items, current, onNavigate }: BreadcrumbsProps) {
+    return (
+        <nav aria-label={label} className="min-w-0 overflow-x-auto">
+            <ol className="flex w-max min-w-full items-center gap-2 whitespace-nowrap">
+                {items.map((item) => (
+                    <li key={item.href} className="flex items-center gap-2">
+                        <Link href={item.href} onNavigate={onNavigate}>
+                            {item.label}
+                        </Link>
+                        <Text as="span" aria-hidden="true" tone="muted">
+                            /
+                        </Text>
+                    </li>
+                ))}
+                {current ? <li aria-current="page">{current}</li> : null}
+            </ol>
+        </nav>
+    );
+}

package/src/navigation/CollectionBrowseSelector.tsx

@@ -0,0 +1,90 @@
+import { ChevronDownIcon } from 'lucide-react';
+import { type ComponentPropsWithoutRef, forwardRef, type ReactNode } from 'react';
+
+import { Button } from '../actions/Button';
+import { Badge } from '../display/Badge';
+import { DropdownMenu } from '../overlays/DropdownMenu';
+
+interface CollectionBrowseSelectorProps extends Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'> {
+    children: ReactNode;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+}
+
+interface CollectionBrowseTriggerProps extends Omit<ComponentPropsWithoutRef<'button'>, 'children' | 'className'> {
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+}
+
+export const CollectionBrowseTrigger = forwardRef<HTMLButtonElement, CollectionBrowseTriggerProps>(
+    ({ label, icon, active = false, ...props }, ref) => (
+        <Button
+            ref={ref}
+            {...props}
+            aria-label={props['aria-label'] ?? label}
+            title={label}
+            className="data-[state=open]:bg-base-200 max-w-full min-w-0 gap-1.5 px-2 [&>svg]:size-3.5 [&>svg]:shrink-0"
+            selected={active}
+            variant="quiet"
+        >
+            {icon ? (
+                <span aria-hidden="true" className="size-4 shrink-0 [&>svg]:size-full">
+                    {icon}
+                </span>
+            ) : null}
+            <span className={icon ? 'hidden truncate sm:block' : 'truncate'}>{label}</span>
+            {icon ? (
+                <span aria-hidden="true" className="hidden size-3.5 shrink-0 sm:block [&>svg]:size-full">
+                    <ChevronDownIcon />
+                </span>
+            ) : (
+                <ChevronDownIcon />
+            )}
+            {active ? (
+                <span
+                    aria-hidden="true"
+                    className="bg-primary absolute top-1 right-1 size-1.5 rounded-full sm:hidden"
+                />
+            ) : null}
+        </Button>
+    ),
+);
+
+CollectionBrowseTrigger.displayName = 'CollectionBrowseTrigger';
+
+export function CollectionBrowseSelector({ children, ...trigger }: CollectionBrowseSelectorProps) {
+    return (
+        <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+                <CollectionBrowseTrigger {...trigger} />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="start">{children}</DropdownMenu.Content>
+        </DropdownMenu>
+    );
+}
+
+export function CollectionBrowseControls({
+    children,
+    count,
+    countLabel,
+    filters,
+}: {
+    children: ReactNode;
+    count: ReactNode;
+    countLabel: string;
+    filters?: ReactNode;
+}) {
+    return (
+        <div className="flex min-w-0 flex-1 items-center justify-between gap-2">
+            <div className="flex min-w-0 items-center gap-1">
+                {children}
+                <Badge aria-label={countLabel} tone="neutral" radius="md" className="max-w-20 shrink-0 tabular-nums">
+                    <span className="truncate">{count}</span>
+                </Badge>
+            </div>
+            {filters ? <div className="flex min-w-0 items-center gap-1 [&>button]:max-w-48">{filters}</div> : null}
+        </div>
+    );
+}

package/src/navigation/CollectionViewToggle.tsx

@@ -0,0 +1,52 @@
+import { LayoutGridIcon, TableIcon } from 'lucide-react';
+
+import { IconButton } from '../actions/IconButton';
+
+export type CollectionView = 'grid' | 'table';
+
+interface CollectionViewToggleProps {
+    disabledViews?: readonly CollectionView[];
+    gridLabel: string;
+    label: string;
+    onChange: (view: CollectionView) => void;
+    tableLabel: string;
+    value: CollectionView;
+}
+
+export function CollectionViewToggle({
+    disabledViews = [],
+    gridLabel,
+    label,
+    onChange,
+    tableLabel,
+    value,
+}: CollectionViewToggleProps) {
+    return (
+        <div role="group" aria-label={label} className="bg-base-200/70 flex gap-0.5 rounded-lg p-0.5">
+            <IconButton
+                aria-label={gridLabel}
+                aria-pressed={value === 'grid'}
+                disabled={disabledViews.includes('grid')}
+                icon={<LayoutGridIcon />}
+                title={gridLabel}
+                className={buttonClasses(value === 'grid')}
+                onClick={() => onChange('grid')}
+                tone="neutral"
+            />
+            <IconButton
+                aria-label={tableLabel}
+                aria-pressed={value === 'table'}
+                disabled={disabledViews.includes('table')}
+                icon={<TableIcon />}
+                title={tableLabel}
+                className={buttonClasses(value === 'table')}
+                onClick={() => onChange('table')}
+                tone="neutral"
+            />
+        </div>
+    );
+}
+
+function buttonClasses(active: boolean): string {
+    return `size-8 p-0 ${active ? 'bg-base-100 text-base-content shadow-sm' : 'text-base-600'}`;
+}