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

package/src/overlays/Modal.tsx

@@ -0,0 +1,234 @@
+/* oxlint-disable react/only-export-components -- Compound members are exported through Modal. */
+
+import {
+    Modal as NinnaModal,
+    type ModalBodyProps,
+    type ModalContentProps,
+    type ModalFooterProps,
+} from '@ninna-ui/overlays';
+import { XIcon } from 'lucide-react';
+import {
+    type ComponentProps,
+    createContext,
+    forwardRef,
+    type ReactNode,
+    type Ref,
+    useCallback,
+    useContext,
+} from 'react';
+
+import { IconButton } from '../actions/IconButton';
+import { useDesignSystemLabels } from '../foundations/DesignSystemProvider';
+import { Heading, Text } from '../typography/Typography';
+import { useModalAutoFocus } from './useModalAutoFocus';
+import { useScrollFade } from './useScrollFade';
+
+const ModalLoadingContext = createContext(false);
+
+interface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' | 'size' | 'title'> {
+    accessibleTitle?: string;
+    /** Whether opening focuses the first editable field; off while the caller focuses something else. */
+    focusFirstField?: boolean;
+    headerActions?: ReactNode;
+    sidebar?: ReactNode;
+    /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */
+    presentation?: 'default' | 'paned' | 'workspace';
+    title: string;
+}
+
+const ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(
+    (
+        {
+            accessibleTitle,
+            children,
+            closeOnEscape,
+            closeOnOverlayClick,
+            description,
+            focusFirstField,
+            headerActions,
+            onPointerDownOutside,
+            sidebar,
+            presentation = sidebar ? 'paned' : 'default',
+            title,
+            ...props
+        },
+        ref,
+    ) => {
+        const loading = useContext(ModalLoadingContext);
+        const focusProps = useModalAutoFocus(focusFirstField);
+
+        return (
+            <NinnaModal.Content
+                ref={ref}
+                {...props}
+                {...focusProps}
+                title={accessibleTitle ?? title}
+                description={description}
+                closeOnEscape={loading ? false : closeOnEscape}
+                closeOnOverlayClick={loading ? false : closeOnOverlayClick}
+                onPointerDownOutside={(event) => {
+                    if (event.target instanceof Element && event.target.closest('[data-slot="toaster"]')) {
+                        event.preventDefault();
+                    }
+
+                    onPointerDownOutside?.(event);
+                }}
+                size={presentation === 'workspace' ? 'full' : undefined}
+                className={`flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] flex-col overflow-hidden sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] ${
+                    sidebar ? 'md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:grid-rows-[auto_minmax(0,1fr)]' : ''
+                } ${
+                    presentation === 'workspace'
+                        ? 'h-[calc(100dvh-1rem)] max-w-6xl sm:h-[calc(100dvh-2rem)] sm:max-w-6xl'
+                        : presentation === 'paned'
+                          ? // Paned dialogs keep one height across panes; the body scrolls instead of the dialog resizing.
+                            'h-[calc(100dvh-1rem)] max-w-4xl sm:h-[min(44rem,calc(100dvh-2rem))] sm:max-w-4xl'
+                          : 'max-w-160 sm:max-w-160'
+                }`}
+            >
+                <header
+                    data-slot="modal-header"
+                    className={`@container min-w-0 shrink-0 px-5 pt-5 sm:px-6 sm:pt-6 ${
+                        description ? (sidebar ? 'pb-4 md:pb-0' : '') : 'pb-4'
+                    } ${sidebar ? 'md:col-start-2 md:row-start-1' : ''}`}
+                >
+                    <div className="flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3">
+                        <Heading as="h2" className="min-w-0 flex-1 wrap-break-word" variant="section">
+                            {title}
+                        </Heading>
+                        {headerActions ? (
+                            <div className="order-3 flex basis-full items-center justify-end gap-2 @min-[32rem]:order-0 @min-[32rem]:ml-auto @min-[32rem]:basis-auto">
+                                {headerActions}
+                            </div>
+                        ) : null}
+                        <div className="shrink-0">
+                            <ModalClose />
+                        </div>
+                    </div>
+                </header>
+                {sidebar ? (
+                    <div className="min-h-0 min-w-0 shrink-0 md:col-start-1 md:row-span-2 md:row-start-1">
+                        {sidebar}
+                    </div>
+                ) : null}
+                <div
+                    className={`flex min-h-0 min-w-0 flex-1 flex-col ${sidebar ? 'md:col-start-2 md:row-start-2' : ''}`}
+                >
+                    {description ? (
+                        <Text
+                            className={`shrink-0 px-5 pb-4 sm:px-6 ${sidebar ? 'pt-4 md:pt-2' : 'pt-2'}`}
+                            tone="muted"
+                        >
+                            {description}
+                        </Text>
+                    ) : null}
+                    {children}
+                </div>
+            </NinnaModal.Content>
+        );
+    },
+);
+
+ModalContent.displayName = 'Modal.Content';
+
+const ModalBody = forwardRef<HTMLDivElement, Omit<ModalBodyProps, 'className'> & { layout?: 'scroll' | 'fill' }>(
+    ({ layout = 'scroll', children, ...props }, ref: Ref<HTMLDivElement>) => {
+        const { setViewport, setContent, className } = useScrollFade();
+        const bodyRef = useCallback(
+            (element: HTMLDivElement) => {
+                setViewport(element);
+
+                const cleanup = typeof ref === 'function' ? ref(element) : undefined;
+
+                if (ref && typeof ref !== 'function') ref.current = element;
+
+                return () => {
+                    setViewport(null);
+
+                    if (typeof cleanup === 'function') cleanup();
+                    else if (typeof ref === 'function') ref(null);
+                    else if (ref) ref.current = null;
+                };
+            },
+            [ref, setViewport],
+        );
+
+        return (
+            <NinnaModal.Body
+                ref={bodyRef}
+                {...props}
+                className={`min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-6 sm:px-6 ${layout === 'fill' ? 'flex flex-col' : ''} ${className}`}
+            >
+                <div
+                    ref={setContent}
+                    className={layout === 'fill' ? 'flex min-h-0 flex-1 flex-col gap-3' : 'flow-root'}
+                >
+                    {children}
+                </div>
+            </NinnaModal.Body>
+        );
+    },
+);
+
+ModalBody.displayName = 'Modal.Body';
+
+function ModalForm(props: Omit<ComponentProps<'form'>, 'className'>) {
+    return <form {...props} className="flex min-h-0 flex-1 flex-col" />;
+}
+
+function ModalPane({ active, children }: { active: boolean; children: ReactNode }) {
+    return (
+        <div hidden={!active} className={active ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>
+            {children}
+        </div>
+    );
+}
+
+const ModalFooter = forwardRef<HTMLDivElement, Omit<ModalFooterProps, 'className'> & { leading?: ReactNode }>(
+    ({ leading, children, ...props }, ref) => (
+        <NinnaModal.Footer
+            ref={ref}
+            {...props}
+            className="border-base-300 bg-base-50/60 shrink-0 border-t px-5 py-4 sm:px-6 sm:pb-4"
+        >
+            {leading ? <div className="mr-auto min-w-0 basis-full pb-2 sm:basis-auto sm:pb-0">{leading}</div> : null}
+            {children}
+        </NinnaModal.Footer>
+    ),
+);
+
+ModalFooter.displayName = 'Modal.Footer';
+
+function ModalClose() {
+    const labels = useDesignSystemLabels();
+    const loading = useContext(ModalLoadingContext);
+
+    return (
+        <NinnaModal.Close asChild>
+            <IconButton aria-label={labels.close} disabled={loading} icon={<XIcon />} variant="header" />
+        </NinnaModal.Close>
+    );
+}
+
+interface ModalRootPolicyProps {
+    children: ReactNode;
+    loading?: boolean;
+    onClose: () => void;
+}
+
+function ModalRoot({ children, loading = false, onClose }: ModalRootPolicyProps) {
+    return (
+        <ModalLoadingContext.Provider value={loading}>
+            <NinnaModal open onOpenChange={(open) => !open && !loading && onClose()}>
+                {children}
+            </NinnaModal>
+        </ModalLoadingContext.Provider>
+    );
+}
+
+export const Modal = Object.assign(ModalRoot, {
+    Body: ModalBody,
+    Form: ModalForm,
+    Pane: ModalPane,
+    Content: ModalContent,
+    Footer: ModalFooter,
+});

package/src/overlays/Popover.tsx

@@ -0,0 +1,40 @@
+/* oxlint-disable react/only-export-components -- Compound members are exported through Popover. */
+
+import { Popover as NinnaPopover, type PopoverContentProps } from '@ninna-ui/overlays';
+import { type ComponentProps, forwardRef } from 'react';
+
+interface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className'> {
+    layout?: 'fill' | 'scroll';
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+    presentation?: 'default' | 'menu';
+    width?: 'content' | 'sm' | 'trigger';
+}
+
+const popoverWidthClasses: Record<NonNullable<PopoverContentPolicyProps['width']>, string | undefined> = {
+    content: undefined,
+    sm: 'w-64',
+    trigger: 'w-(--radix-popover-trigger-width)',
+};
+
+const PopoverContent = forwardRef<HTMLDivElement, PopoverContentPolicyProps>(
+    ({ layout = 'scroll', presentation = 'default', width = 'content', ...props }, ref) => (
+        <NinnaPopover.Content
+            ref={ref}
+            {...props}
+            data-layout={layout}
+            className={`${popoverWidthClasses[width] ?? ''} ${presentation === 'menu' ? 'p-1' : ''}`}
+        />
+    ),
+);
+
+PopoverContent.displayName = 'Popover.Content';
+
+function PopoverRoot(props: ComponentProps<typeof NinnaPopover>) {
+    return <NinnaPopover {...props} />;
+}
+
+export const Popover = Object.assign(PopoverRoot, {
+    ...NinnaPopover,
+    Content: PopoverContent,
+});

package/src/overlays/Tooltip.tsx

@@ -0,0 +1,56 @@
+import { Tooltip as NinnaTooltip, type TooltipContentProps, type TooltipTriggerProps } from '@ninna-ui/overlays';
+import { Slot, TooltipEngine } from '@ninna-ui/react-internal';
+import { type ComponentProps, forwardRef, isValidElement } from 'react';
+
+/** Shares one open delay across the tooltips inside it. */
+export function TooltipProvider(props: ComponentProps<typeof TooltipEngine.Provider>) {
+    return <TooltipEngine.Provider {...props} />;
+}
+
+export function Tooltip({ disabled, ...props }: ComponentProps<typeof TooltipEngine.Root> & { disabled?: boolean }) {
+    return <TooltipEngine.Root {...props} open={disabled ? false : props.open} />;
+}
+
+export const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(
+    ({ asChild, children, ...props }, ref) => {
+        const childProps = asChild && isValidElement<TooltipTriggerProps>(children) ? children.props : undefined;
+
+        if (props.disabled || childProps?.disabled) {
+            const Trigger = asChild ? Slot : 'button';
+
+            return (
+                <NinnaTooltip.Trigger asChild>
+                    <span
+                        tabIndex={0}
+                        role="button"
+                        aria-disabled="true"
+                        aria-label={props['aria-label'] ?? childProps?.['aria-label']}
+                        aria-labelledby={props['aria-labelledby'] ?? childProps?.['aria-labelledby']}
+                        className="inline-flex [&>*]:pointer-events-none"
+                    >
+                        <Trigger type="button" {...props} ref={ref}>
+                            {children}
+                        </Trigger>
+                    </span>
+                </NinnaTooltip.Trigger>
+            );
+        }
+
+        return (
+            <NinnaTooltip.Trigger {...props} ref={ref} asChild={asChild}>
+                {children}
+            </NinnaTooltip.Trigger>
+        );
+    },
+);
+
+TooltipTrigger.displayName = 'TooltipTrigger';
+
+export const TooltipPopup = forwardRef<HTMLDivElement, Omit<TooltipContentProps, 'color' | 'hasArrow'>>(
+    (props, ref) => (
+        // Radix supplies the tooltip role on its visually hidden accessible description.
+        <NinnaTooltip.Content {...props} ref={ref} role={undefined} />
+    ),
+);
+
+TooltipPopup.displayName = 'TooltipPopup';

package/src/overlays/index.ts

@@ -0,0 +1,8 @@
+export { ActionModal } from './ActionModal';
+export { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from './CommandPalette';
+export { Drawer } from './Drawer';
+export { DropdownMenu } from './DropdownMenu';
+export { ImageViewer } from './ImageViewer';
+export { Modal } from './Modal';
+export { Popover } from './Popover';
+export { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from './Tooltip';

package/src/overlays/useModalAutoFocus.ts

@@ -0,0 +1,119 @@
+import { useEffect, useRef } from 'react';
+
+/** Focuses a dialog's first editable field when it opens, or once one appears, unless `focusFirstField` is
+ *  false, such as while the caller focuses something else; turning it off stops a pending wait. */
+export function useModalAutoFocus(focusFirstField = true) {
+    const cleanup = useRef<(() => void) | undefined>(undefined);
+    const returnFocus = useRef<HTMLElement | null>(null);
+
+    useEffect(() => () => cleanup.current?.(), []);
+    useEffect(() => {
+        if (!focusFirstField) cleanup.current?.();
+    }, [focusFirstField]);
+
+    const onOpenAutoFocus = (event: Event) => {
+        cleanup.current?.();
+
+        const dialog = event.target;
+
+        if (!(dialog instanceof HTMLElement)) return;
+
+        returnFocus.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+
+        if (!focusFirstField) return;
+
+        if (focusFirstEditable(dialog)) {
+            event.preventDefault();
+
+            return;
+        }
+
+        const observer = new MutationObserver(() => {
+            if (focusFirstEditable(dialog)) stop();
+        });
+
+        const stop = () => {
+            observer.disconnect();
+            dialog.removeEventListener('pointerdown', stop, true);
+            dialog.removeEventListener('keydown', stop, true);
+            cleanup.current = undefined;
+        };
+
+        cleanup.current = stop;
+        observer.observe(dialog, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: [
+                'disabled',
+                'readonly',
+                'hidden',
+                'inert',
+                'class',
+                'style',
+                'aria-disabled',
+                'aria-readonly',
+                'aria-hidden',
+            ],
+        });
+        dialog.addEventListener('pointerdown', stop, true);
+        dialog.addEventListener('keydown', stop, true);
+    };
+
+    const onCloseAutoFocus = (event: Event) => {
+        cleanup.current?.();
+
+        if (returnFocus.current?.isConnected) {
+            event.preventDefault();
+            returnFocus.current.focus({ preventScroll: true });
+        }
+    };
+
+    return { onOpenAutoFocus, onCloseAutoFocus };
+}
+
+function focusFirstEditable(dialog: HTMLElement): boolean {
+    const candidates = dialog.querySelectorAll<HTMLElement>(
+        'input, textarea, select, [role="combobox"], [role="switch"], [role="checkbox"], [role="radio"], [contenteditable="true"], [data-slot="field"] button[aria-haspopup="dialog"]',
+    );
+
+    for (const field of candidates) {
+        if (
+            field.tabIndex < 0 ||
+            field.matches(
+                ':disabled, [readonly], [aria-disabled="true"], [aria-readonly="true"], input[type="hidden"], input[type="button"], input[type="submit"], input[type="reset"], input[type="image"]',
+            ) ||
+            field.closest('[hidden], [inert], [aria-hidden="true"], details:not([open])') ||
+            field.closest('[role="dialog"]') !== dialog ||
+            !isVisible(field, dialog)
+        )
+            continue;
+
+        field.focus({ preventScroll: true });
+
+        if (document.activeElement !== field) continue;
+
+        if (
+            field instanceof HTMLTextAreaElement ||
+            (field instanceof HTMLInputElement && field.selectionStart !== null)
+        ) {
+            field.select();
+        }
+
+        return true;
+    }
+
+    return false;
+}
+
+function isVisible(field: HTMLElement, dialog: HTMLElement): boolean {
+    if (getComputedStyle(field).visibility !== 'visible') return false;
+
+    for (let element: HTMLElement | null = field; element; element = element.parentElement) {
+        if (getComputedStyle(element).display === 'none') return false;
+
+        if (element === dialog) return true;
+    }
+
+    return false;
+}

package/src/overlays/useScrollFade.ts

@@ -0,0 +1,49 @@
+import { useLayoutEffect, useState } from 'react';
+
+/** Attach to the scroll owner and its content so async content and viewport changes update the mask. */
+export function useScrollFade() {
+    const [viewport, setViewport] = useState<HTMLDivElement | null>(null);
+    const [content, setContent] = useState<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+        if (!viewport || !content) return;
+
+        const measure = () => {
+            const { scrollTop, scrollHeight, clientHeight } = viewport;
+
+            viewport.style.setProperty('--scroll-fade-top', `${Math.max(0, scrollTop)}px`);
+            viewport.style.setProperty(
+                '--scroll-fade-bottom',
+                `${Math.max(0, scrollHeight - clientHeight - scrollTop)}px`,
+            );
+        };
+        const observer = new ResizeObserver(measure);
+
+        const observeContent = () => {
+            observer.disconnect();
+            observer.observe(viewport);
+            observer.observe(content);
+            // Fill layouts can keep ancestors fixed while descendants change the scroll extent.
+            content.querySelectorAll('*').forEach((element) => observer.observe(element));
+            measure();
+        };
+        const mutations = new MutationObserver(observeContent);
+
+        mutations.observe(content, { childList: true, subtree: true });
+        viewport.addEventListener('scroll', measure, { passive: true });
+        observeContent();
+
+        return () => {
+            mutations.disconnect();
+            observer.disconnect();
+            viewport.removeEventListener('scroll', measure);
+        };
+    }, [viewport, content]);
+
+    return {
+        setViewport,
+        setContent,
+        className:
+            '[mask-image:linear-gradient(to_bottom,transparent,black_min(1.5rem,var(--scroll-fade-top,0px)),black_calc(100%_-_min(1.5rem,var(--scroll-fade-bottom,0px))),transparent)] focus-visible:[mask-image:none] has-[:focus-visible]:[mask-image:none]',
+    };
+}

package/src/showcase/CallToAction.tsx

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+
+import { Heading, Text } from '../typography/Typography';
+
+const MARK_L = 'M0 0H27.52V72.48H100V100H3a3 3 0 0 1-3-3z';
+const MARK_S =
+    'M50.68 0H91.97a8.03 8.03 0 0 1 8.03 8.03V49.32a8.03 8.03 0 0 1-8.03 8.03H50.68a8.03 8.03 0 0 1-8.03-8.03V8.03a8.03 8.03 0 0 1 8.03-8.03z';
+
+interface CallToActionProps {
+    title: ReactNode;
+    lead: ReactNode;
+    actions: ReactNode;
+    note?: ReactNode;
+}
+
+/** The closing panel of a page: the Lar mark drawn large and faint behind one last invitation. */
+export function CallToAction({ title, lead, actions, note }: CallToActionProps) {
+    return (
+        <div className="border-base-300 bg-base-100 dark:bg-base-100/70 relative isolate overflow-hidden rounded-[1.75rem] border px-6 py-16 text-center sm:px-12 sm:py-20">
+            <div
+                aria-hidden="true"
+                className="absolute inset-0 -z-10 bg-[radial-gradient(60%_80%_at_50%_0%,var(--lar-glow),transparent_70%)]"
+            />
+            <div className="mx-auto flex max-w-[640px] flex-col items-center gap-5">
+                <svg aria-hidden="true" viewBox="0 0 100 100" className="mb-1 size-9 text-(--color-brand-ink)">
+                    <path d={MARK_L} fill="currentColor" />
+                    <path d={MARK_S} fill="#355292" />
+                </svg>
+                <Heading as="h2" variant="headline">
+                    {title}
+                </Heading>
+                <Text variant="lead" tone="muted">
+                    {lead}
+                </Text>
+                <div className="mt-3 flex w-full flex-col items-center justify-center gap-3 sm:w-auto sm:flex-row sm:flex-wrap max-sm:[&>a]:w-full max-sm:[&>a]:max-w-[320px]">
+                    {actions}
+                </div>
+                {note ? (
+                    <Text variant="caption" tone="muted" className="text-balance dark:text-[#96969f]">
+                        {note}
+                    </Text>
+                ) : null}
+            </div>
+        </div>
+    );
+}