@nibapp/ui 0.0.0-stage → 0.1.0

package/dist/components/dialog.d.ts

@@ -0,0 +1,80 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import { type VariantProps } from "../lib/cn.js";
+/** Dimmed, lightly blurred scrim. */
+export declare const dialogBackdropClass = "fixed inset-0 z-(--z-overlay) min-h-dvh bg-scrim backdrop-blur-[2px] backdrop-motion supports-[-webkit-touch-callout:none]:absolute";
+/** Full-screen layer; the popup centers with `my-auto` so tall dialogs scroll instead of clipping. */
+export declare const dialogViewportClass = "fixed inset-0 z-(--z-overlay) flex justify-center overflow-y-auto overscroll-contain p-4 outline-none sm:p-6";
+export declare const dialogPopupStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "max-w-[400px]";
+        md: "max-w-[520px]";
+        lg: "max-w-[680px]";
+        xl: "max-w-[880px]";
+        /** A page of its own in a dialog (Settings): wide, and as tall as the window allows up to 760 px. */
+        window: "h-[min(760px,100%)] max-w-[1040px]";
+    };
+}, undefined, string[], {
+    size: {
+        sm: "max-w-[400px]";
+        md: "max-w-[520px]";
+        lg: "max-w-[680px]";
+        xl: "max-w-[880px]";
+        /** A page of its own in a dialog (Settings): wide, and as tall as the window allows up to 760 px. */
+        window: "h-[min(760px,100%)] max-w-[1040px]";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "max-w-[400px]";
+        md: "max-w-[520px]";
+        lg: "max-w-[680px]";
+        xl: "max-w-[880px]";
+        /** A page of its own in a dialog (Settings): wide, and as tall as the window allows up to 760 px. */
+        window: "h-[min(760px,100%)] max-w-[1040px]";
+    };
+}, undefined>>;
+export type DialogPopupVariants = VariantProps<typeof dialogPopupStyles>;
+export declare const dialogTitleClass = "text-md font-semibold leading-tight tracking-tight text-fg";
+export declare const dialogDescriptionClass = "text-base text-fg-muted";
+export declare const dialogHeaderClass = "flex flex-col gap-1.5 px-6 pt-6 pb-4";
+export declare const dialogBodyClass = "px-6 pb-4";
+export declare const dialogFooterClass = "flex flex-col-reverse gap-2 px-6 pt-2 pb-6 sm:flex-row sm:items-center sm:justify-end";
+export declare const DialogRoot: <Payload>(props: BaseDialog.Root.Props<Payload>) => React.JSX.Element;
+export declare const DialogTrigger: BaseDialog.Trigger;
+export declare const DialogPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/** The unstyled popup, for full-screen surfaces that bring their own look (the account gate). */
+export declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function DialogBackdrop({ className, ...props }: ComponentProps<typeof BaseDialog.Backdrop>): import("react").JSX.Element;
+export interface DialogContentProps extends ComponentProps<typeof BaseDialog.Popup>, DialogPopupVariants {
+    /** Render the corner close button. */
+    closable?: boolean;
+    /** Extra classes for the centering viewport (e.g. vertical alignment). */
+    viewportClassName?: string;
+}
+/** Portal + backdrop + viewport + popup. */
+export declare function DialogContent({ size, closable, viewportClassName, className, children, ...props }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogHeader({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DialogBody({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DialogFooter({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function DialogTitle({ className, ...props }: ComponentProps<typeof BaseDialog.Title>): import("react").JSX.Element;
+export declare function DialogDescription({ className, ...props }: ComponentProps<typeof BaseDialog.Description>): import("react").JSX.Element;
+/** Icon-only close pinned to the top-right corner. */
+export declare function DialogCloseButton({ className, "aria-label": ariaLabel, ...props }: ComponentProps<typeof BaseDialog.Close>): import("react").JSX.Element;
+export interface DialogProps extends DialogPopupVariants {
+    /** Optional trigger element; must accept a ref and DOM props (e.g. <Button>). */
+    trigger?: ReactElement;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Body content. */
+    children?: ReactNode;
+    /** Footer actions (buttons). Wrap a cancel button in `<DialogClose render={<Button/>}/>`. */
+    footer?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: ComponentProps<typeof BaseDialog.Root>["onOpenChange"];
+    closable?: boolean;
+    className?: string;
+}
+/** Convenience wrapper with a standard header/body/footer layout. */
+export declare function Dialog({ trigger, title, description, children, footer, size, open, defaultOpen, onOpenChange, closable, className, }: DialogProps): import("react").JSX.Element;

package/dist/components/dialog.js

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import { useUiStrings } from "../i18n/provider.js";
+import { cn, tv, withBase } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { iconButtonStyles } from "./button.js";
+/* ------------------------------------------------------------------------------------------ */
+/* Shared modal styles — also used by AlertDialog, Sheet and CommandPalette.                  */
+/* ------------------------------------------------------------------------------------------ */
+/** Dimmed, lightly blurred scrim. */
+export const dialogBackdropClass = "fixed inset-0 z-(--z-overlay) min-h-dvh bg-scrim backdrop-blur-[2px] backdrop-motion supports-[-webkit-touch-callout:none]:absolute";
+/** Full-screen layer; the popup centers with `my-auto` so tall dialogs scroll instead of clipping. */
+export const dialogViewportClass = "fixed inset-0 z-(--z-overlay) flex justify-center overflow-y-auto overscroll-contain p-4 outline-none sm:p-6";
+export const dialogPopupStyles = tv({
+    base: [
+        "relative my-auto flex w-full flex-col rounded-2xl border border-border-subtle bg-surface-overlay text-fg outline-none",
+        "[box-shadow:var(--shadow-xl),var(--shadow-inset-edge)]",
+        // 180 ms scale-in from slightly below, no blur; quick ease-in fade out.
+        "origin-top transition-[opacity,scale,translate] duration-(--duration-base) ease-(--ease-out)",
+        "data-starting-style:translate-y-2 data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+        "data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-(--duration-fast) data-ending-style:ease-(--ease-in)",
+        "motion-reduce:data-starting-style:translate-y-0 motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100",
+        // Nested dialogs: recede the parent a touch.
+        "data-nested-dialog-open:scale-[0.98] data-nested-dialog-open:opacity-80",
+    ],
+    variants: {
+        size: {
+            sm: "max-w-[400px]",
+            md: "max-w-[520px]",
+            lg: "max-w-[680px]",
+            xl: "max-w-[880px]",
+            /** A page of its own in a dialog (Settings): wide, and as tall as the window allows up to 760 px. */
+            window: "h-[min(760px,100%)] max-w-[1040px]",
+        },
+    },
+    defaultVariants: { size: "md" },
+});
+export const dialogTitleClass = "text-md font-semibold leading-tight tracking-tight text-fg";
+export const dialogDescriptionClass = "text-base text-fg-muted";
+export const dialogHeaderClass = "flex flex-col gap-1.5 px-6 pt-6 pb-4";
+export const dialogBodyClass = "px-6 pb-4";
+export const dialogFooterClass = "flex flex-col-reverse gap-2 px-6 pt-2 pb-6 sm:flex-row sm:items-center sm:justify-end";
+/* ------------------------------------------------------------------------------------------ */
+/* Dialog                                                                                     */
+/* ------------------------------------------------------------------------------------------ */
+export const DialogRoot = BaseDialog.Root;
+export const DialogTrigger = BaseDialog.Trigger;
+export const DialogPortal = BaseDialog.Portal;
+export const DialogClose = BaseDialog.Close;
+/** The unstyled popup, for full-screen surfaces that bring their own look (the account gate). */
+export const DialogPopup = BaseDialog.Popup;
+export function DialogBackdrop({ className, ...props }) {
+    return (_jsx(BaseDialog.Backdrop, { "data-slot": "dialog-backdrop", className: withBase(dialogBackdropClass, className), ...props }));
+}
+/** Portal + backdrop + viewport + popup. */
+export function DialogContent({ size, closable = true, viewportClassName, className, children, ...props }) {
+    const container = usePortalContainer();
+    return (_jsxs(BaseDialog.Portal, { container: container, children: [_jsx(DialogBackdrop, {}), _jsx(BaseDialog.Viewport, { "data-slot": "dialog-viewport", className: cn(dialogViewportClass, viewportClassName), children: _jsxs(BaseDialog.Popup, { "data-slot": "dialog", className: withBase(dialogPopupStyles({ size }), className), ...props, children: [children, closable && _jsx(DialogCloseButton, {})] }) })] }));
+}
+export function DialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-header", className: cn(dialogHeaderClass, "pe-12", className), ...props });
+}
+export function DialogBody({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-body", className: cn(dialogBodyClass, className), ...props });
+}
+export function DialogFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-footer", className: cn(dialogFooterClass, className), ...props });
+}
+export function DialogTitle({ className, ...props }) {
+    return (_jsx(BaseDialog.Title, { "data-slot": "dialog-title", className: withBase(dialogTitleClass, className), ...props }));
+}
+export function DialogDescription({ className, ...props }) {
+    return (_jsx(BaseDialog.Description, { "data-slot": "dialog-description", className: withBase(dialogDescriptionClass, className), ...props }));
+}
+/** Icon-only close pinned to the top-right corner. */
+export function DialogCloseButton({ className, "aria-label": ariaLabel, ...props }) {
+    const t = useUiStrings().primitives;
+    return (_jsx(BaseDialog.Close, { "data-slot": "dialog-close", "aria-label": ariaLabel ?? t.close, className: withBase(cn(iconButtonStyles({ variant: "ghost", size: "sm" }), "absolute top-4 end-4"), className), ...props, children: _jsx(X, { "aria-hidden": true }) }));
+}
+/** Convenience wrapper with a standard header/body/footer layout. */
+export function Dialog({ trigger, title, description, children, footer, size, open, defaultOpen, onOpenChange, closable, className, }) {
+    return (_jsxs(BaseDialog.Root, { ...(open !== undefined && { open }), ...(defaultOpen !== undefined && { defaultOpen }), ...(onOpenChange && { onOpenChange }), children: [trigger && _jsx(BaseDialog.Trigger, { render: trigger }), _jsxs(DialogContent, { size: size, ...(closable !== undefined && { closable }), className: className, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description !== undefined && _jsx(DialogDescription, { children: description })] }), children !== undefined && _jsx(DialogBody, { children: children }), footer !== undefined && _jsx(DialogFooter, { children: footer })] })] }));
+}

package/dist/components/diff-lines.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+/** One line of a small diff: added, removed or unchanged context. */
+export interface DiffLine {
+    readonly kind: "add" | "remove" | "context";
+    /**
+     * The line's text. A span inside it can mark a changed word: `bg-diff-add-word` (or `-remove-`) in
+     * ink (`text-fg`), since the line's green or red on the word band falls under 4.5:1.
+     */
+    readonly text: ReactNode;
+    /** Unique among the lines (the text, when it is a string and unique). */
+    readonly key: string;
+}
+/**
+ * A few lines of a change on the diff tokens, each with its sign: a preview or a demo, where the
+ * full `DiffView` (files, hunks, highlighting) is more than the place needs.
+ */
+export declare function DiffLines({ lines, className, }: {
+    readonly lines: readonly DiffLine[];
+    readonly className?: string;
+}): import("react").JSX.Element;

package/dist/components/diff-lines.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const SIGN = { add: "+", remove: "−", context: " " };
+/**
+ * A few lines of a change on the diff tokens, each with its sign: a preview or a demo, where the
+ * full `DiffView` (files, hunks, highlighting) is more than the place needs.
+ */
+export function DiffLines({ lines, className, }) {
+    return (_jsx("div", { "data-slot": "diff-lines", className: cn("overflow-hidden rounded-lg border border-border-subtle bg-bg-inset font-mono text-xs leading-5", className), children: lines.map((line) => (_jsxs("p", { className: cn("flex gap-2 truncate px-3", line.kind === "add" && "bg-diff-add-bg text-diff-add-fg", line.kind === "remove" && "bg-diff-remove-bg text-diff-remove-fg", line.kind === "context" && "text-fg-subtle"), children: [_jsx("span", { "aria-hidden": true, className: "w-2 shrink-0 select-none", children: SIGN[line.kind] }), _jsx("span", { className: "truncate", children: line.text })] }, line.key))) }));
+}

package/dist/components/diff-view.d.ts

@@ -0,0 +1,128 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type DiffStats } from "../lib/patch.js";
+export interface DiffHighlighterProviderProps {
+    /**
+     * Creates one @pierre/diffs highlight worker. The bundler has to see the worker entry, so the host
+     * supplies it (Vite, webpack, Rspack): `() => new Worker(new URL(
+     * "@pierre/diffs/worker/worker-portable.js", import.meta.url), { type: "module" })`. Read once, on
+     * mount.
+     *
+     * The portable entry, not `worker.js`: in @pierre/diffs 1.6.0 `worker.js` is also the chunk its own
+     * lazily loaded highlighter chunks import back (`./worker.js`). A dev server that loads a worker
+     * entry under another URL (Vite's `?worker_file`) then runs it twice in each worker. The second
+     * copy never gets `initialize`, keeps the library's default themes, and fails every request with
+     * `Theme "pierre-dark" has not been resolved`. The portable entry is one self-contained file.
+     */
+    workerFactory: () => Worker;
+    children: ReactNode;
+}
+/**
+ * Moves every descendant <DiffView>'s syntax highlighting into @pierre/diffs' worker pool: a diff
+ * first paints as plain text (same rows, same height), then swaps in its highlighted lines when
+ * the worker answers, and a content-keyed LRU makes remounts (a virtualized row scrolling back
+ * into view) highlighted on their first paint. Without this provider diffs highlight on the main
+ * thread while mounting. Mount it once, near the root; it owns the pool's lifetime. The workers
+ * start when the first diff mounts, so pages without diffs never download the highlighter.
+ */
+export declare function DiffHighlighterProvider({ workerFactory, children }: DiffHighlighterProviderProps): import("react").JSX.Element;
+/**
+ * Content-derived `cacheKey` (two 53-bit hashes + length) for the pool's highlight cache, so equal
+ * diffs share one highlight across mounts and changed content never reuses a stale one.
+ */
+export declare function diffCacheKey(...parts: ReadonlyArray<string | undefined>): string;
+export interface DiffFile {
+    /** Path shown in the header; its extension picks the grammar. */
+    name: string;
+    contents: string;
+    /** Override the inferred language. */
+    lang?: string;
+}
+export type DiffMode = "split" | "unified";
+type DiffSource = {
+    oldFile: DiffFile | null;
+    newFile: DiffFile | null;
+    patch?: never;
+} | {
+    patch: string;
+    oldFile?: never;
+    newFile?: never;
+};
+/** A review comment pinned to one line of one side of the diff. */
+export interface DiffComment {
+    id: string;
+    /** `old` = the left / deleted side, `new` = the right / added side. */
+    side: "old" | "new";
+    line: number;
+    text: string;
+    /** Shown with an avatar initial; defaults to `diffView.comment.you` ("You"). */
+    author?: string;
+}
+/**
+ * Host-rendered content pinned under one line (e.g. a review finding marker). Rendered above that
+ * line's comments, inside the same width-pinned annotation row.
+ */
+export interface DiffLineNote {
+    id: string;
+    /** `old` = the left / deleted side, `new` = the right / added side. */
+    side: "old" | "new";
+    line: number;
+    content: ReactNode;
+}
+/** What `onAddComment` receives; the host assigns the id. */
+export type NewDiffComment = Pick<DiffComment, "side" | "line" | "text">;
+/** Outcome of a per-hunk action, shown in that hunk's toolbar. */
+export type HunkState = "accepted" | "reverted";
+/**
+ * `+12 −3`: lines added and removed, in the diff's colours with glyphs (never colour alone), the
+ * figures in the reader's digits, spoken as words so they are never read as arithmetic.
+ */
+export declare function DiffStat({ additions, deletions, className }: DiffStats & {
+    className?: string;
+}): import("react").JSX.Element;
+export type DiffViewProps = DiffSource & Omit<ComponentProps<"div">, "children"> & {
+    /** Controlled layout. */
+    mode?: DiffMode;
+    defaultMode?: DiffMode;
+    onModeChange?: (mode: DiffMode) => void;
+    /**
+     * Below this container width (px) an uncontrolled split view shows unified instead, until the
+     * user picks a layout with the toggle. Default 900; 0 disables the fallback.
+     */
+    splitMinWidth?: number;
+    /** Controlled collapse. */
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Header path; defaults to the new (or old) file name, or the patch's. */
+    filename?: string;
+    /** Soft-wrap long lines (controlled). */
+    wrap?: boolean;
+    defaultWrap?: boolean;
+    onWrapChange?: (wrap: boolean) => void;
+    /** Show the soft-wrap toggle (default true). */
+    showWrapToggle?: boolean;
+    /** Scroll the body beyond this height. */
+    maxHeight?: number | string;
+    /** Show the split/unified toggle (default true). */
+    showModeToggle?: boolean;
+    /** Extra header controls (e.g. accept / reject), rendered before the built-ins. */
+    actions?: ReactNode;
+    /** Per-hunk toolbar actions; each receives the hunk's index in the parsed diff. */
+    onAcceptHunk?: (hunkIndex: number) => void;
+    onRevertHunk?: (hunkIndex: number) => void;
+    /** "Ask about this hunk"; also receives the hunk as unified-diff text to quote. */
+    onAskAboutHunk?: (hunkIndex: number, excerpt: string) => void;
+    /** Settled hunks by index: labelled in their toolbar, with the matching action disabled. */
+    hunkStates?: Readonly<Partial<Record<number, HunkState>>>;
+    /** Comments rendered inline under their line. */
+    comments?: readonly DiffComment[];
+    /** Enables commenting: click a line number (or the gutter "+") to open an inline comment field. */
+    onAddComment?: (comment: NewDiffComment) => void;
+    onRemoveComment?: (id: string) => void;
+    /** The inline comment field's placeholder, when the host says where comments go; "Leave a comment…" by default. */
+    commentPlaceholder?: string | undefined;
+    /** Host content pinned under specific lines (review finding markers, lint notes…). */
+    lineNotes?: readonly DiffLineNote[];
+};
+export declare function DiffView(props: DiffViewProps): import("react").JSX.Element;
+export {};