@nanisoft/prism-ui 0.5.0 → 0.6.0

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'react';
+type PaginationSize = 'default' | 'sm' | 'lg' | 'icon';
+/**
+ * The control that moves between pages of a paged collection.
+ *
+ * The root is a `<nav>` with an accessible name, so the page links are grouped
+ * as one navigation region.
+ */
+declare function Pagination({ className, ...props }: ComponentProps<'nav'>): import("react").JSX.Element;
+/** The list that holds the page links. */
+declare function PaginationContent({ className, ...props }: ComponentProps<'ul'>): import("react").JSX.Element;
+/** One slot in the list: a page link, a step control or an ellipsis. */
+declare function PaginationItem({ className, ...props }: ComponentProps<'li'>): import("react").JSX.Element;
+/**
+ * A link to one page.
+ *
+ * Renders a native `<a>`; set `isActive` on the current page so it is marked
+ * with `aria-current="page"`.
+ */
+declare function PaginationLink({ className, isActive, size, ...props }: ComponentProps<'a'> & {
+    isActive?: boolean;
+    size?: PaginationSize;
+}): import("react").JSX.Element;
+/** The step back to the previous page, with a hidden label on narrow layouts. */
+declare function PaginationPrevious({ className, text, ...props }: ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): import("react").JSX.Element;
+/** The step forward to the next page, with a hidden label on narrow layouts. */
+declare function PaginationNext({ className, text, ...props }: ComponentProps<typeof PaginationLink> & {
+    text?: string;
+}): import("react").JSX.Element;
+/**
+ * A held-back run of page numbers.
+ *
+ * It is hidden from assistive technology because the page links around it
+ * already name the range, and it is not focusable.
+ */
+declare function PaginationEllipsis({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,KAAK,cAAc,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAA;AAEtD;;;;;GAKG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BASjE;AAED,0CAA0C;AAC1C,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAQvE;AAED,wEAAwE;AACxE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,+BAEpE;AAED;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,GAAG,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,+BAoBrE;AAED,iFAAiF;AACjF,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3D;AAED,gFAAgF;AAChF,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAa,EACb,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAY3D;AAED;;;;;GAKG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,+BAW1E;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,CAAA"}

package/dist/components/ui/pagination.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { cn } from '../../lib/utils';
+/**
+ * The control that moves between pages of a paged collection.
+ *
+ * The root is a `<nav>` with an accessible name, so the page links are grouped
+ * as one navigation region.
+ */
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn('mx-auto flex w-full justify-center', className), ...props }));
+}
+/** The list that holds the page links. */
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn('flex flex-row items-center gap-1', className), ...props }));
+}
+/** One slot in the list: a page link, a step control or an ellipsis. */
+function PaginationItem({ className, ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", className: cn(className), ...props });
+}
+/**
+ * A link to one page.
+ *
+ * Renders a native `<a>`; set `isActive` on the current page so it is marked
+ * with `aria-current="page"`.
+ */
+function PaginationLink({ className, isActive, size = 'icon', ...props }) {
+    return (_jsx("a", { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive ? 'true' : undefined, className: cn('inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap outline-none transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50', size === 'default' && 'h-9 px-4 py-2', size === 'sm' && 'h-8 px-3', size === 'lg' && 'h-10 px-6', size === 'icon' && 'size-9', isActive
+            ? 'border-border bg-background text-foreground border'
+            : 'text-foreground hover:bg-accent hover:text-accent-foreground', className), ...props }));
+}
+/** The step back to the previous page, with a hidden label on narrow layouts. */
+function PaginationPrevious({ className, text = 'Previous', ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to the previous page", size: "default", className: cn('gap-1 px-2.5 sm:pl-2.5', className), ...props, children: [_jsx(ChevronLeft, {}), _jsx("span", { className: "hidden sm:block", children: text })] }));
+}
+/** The step forward to the next page, with a hidden label on narrow layouts. */
+function PaginationNext({ className, text = 'Next', ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to the next page", size: "default", className: cn('gap-1 px-2.5 sm:pr-2.5', className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: text }), _jsx(ChevronRight, {})] }));
+}
+/**
+ * A held-back run of page numbers.
+ *
+ * It is hidden from assistive technology because the page links around it
+ * already name the range, and it is not focusable.
+ */
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "pagination-ellipsis", "aria-hidden": "true", className: cn('flex size-9 items-center justify-center', className), ...props, children: _jsx(MoreHorizontal, { className: "size-4" }) }));
+}
+export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,56 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the Popover root forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface PopoverProps {
+    /** The controlled open state. */
+    open?: boolean;
+    /** The initially open state, for an uncontrolled popover. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the popover traps interaction while open. @defaultValue false */
+    modal?: boolean | 'trap-focus';
+    /** The trigger and content. */
+    children?: React.ReactNode;
+}
+/** The props PopoverTrigger forwards to Base UI. */
+export interface PopoverTriggerProps extends ComponentProps<'button'> {
+    /** Whether the trigger should also open the popover on hover. */
+    openOnHover?: boolean;
+}
+/**
+ * The props PopoverContent forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface PopoverContentProps extends ComponentProps<'div'> {
+    /** Which side of the trigger the popover is placed on. @defaultValue bottom */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** How the popover aligns against the trigger. @defaultValue center */
+    align?: 'start' | 'center' | 'end';
+    /** The distance in pixels between the trigger and the popover. @defaultValue 4 */
+    sideOffset?: number;
+    /** The offset in pixels along the alignment axis. @defaultValue 0 */
+    alignOffset?: number;
+}
+/**
+ * A floating surface opened by a trigger.
+ *
+ * Use a Popover for content that is richer than a tooltip but not a full
+ * screen: a settings form, a filter panel, a small detail view. It is
+ * dismissible with Escape and an outside press, and it returns focus to the
+ * trigger when it closes. Do not put a required step in a Popover, because an
+ * outside press can close it.
+ */
+declare function Popover({ ...props }: PopoverProps): import("react").JSX.Element;
+/** The element that opens the popover. */
+declare function PopoverTrigger({ className, ...props }: PopoverTriggerProps): import("react").JSX.Element;
+/** The floating popover surface. */
+declare function PopoverContent({ className, side, align, sideOffset, alignOffset, children, ...props }: PopoverContentProps): import("react").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent };
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/ui/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,oDAAoD;AACpD,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACnE,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAChE,+EAA+E;IAC/E,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;GAQG;AACH,iBAAS,OAAO,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,+BAE1C;AAED,0CAA0C;AAC1C,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAcnE;AAED,oCAAoC;AACpC,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAe,EACf,KAAgB,EAChB,UAAc,EACd,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,+BA0BrB;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/ui/popover.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import { cn } from '../../lib/utils';
+/**
+ * A floating surface opened by a trigger.
+ *
+ * Use a Popover for content that is richer than a tooltip but not a full
+ * screen: a settings form, a filter panel, a small detail view. It is
+ * dismissible with Escape and an outside press, and it returns focus to the
+ * trigger when it closes. Do not put a required step in a Popover, because an
+ * outside press can close it.
+ */
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { ...props });
+}
+/** The element that opens the popover. */
+function PopoverTrigger({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', className), ...props }));
+}
+/** The floating popover surface. */
+function PopoverContent({ className, side = 'bottom', align = 'center', sideOffset = 4, alignOffset = 0, children, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, align: align, sideOffset: sideOffset, alignOffset: alignOffset, className: "z-50", children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn('bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none', 'transition-[opacity,transform] duration-fast ease-out', 'data-[starting-style]:scale-95 data-[starting-style]:opacity-0', 'data-[ending-style]:scale-95 data-[ending-style]:opacity-0', className), ...props, children: children }) }) }));
+}
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/ui/product-mark.d.ts

@@ -0,0 +1,115 @@
+import type { PackId } from '../../theming';
+/**
+ * The three sizes a product mark is drawn at: the mark's diameter and the name
+ * beside it, taken together so the two parts of the mark stay in proportion.
+ *
+ * The mark is one of a fixed set rather than something a caller sizes through
+ * `className`, because `className` is layout only and a mark sized by a layout
+ * class is a mark the layout owns. A product set shows its marks in a switcher,
+ * in a row and on a page header, and those three are the sizes a set needs.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly mark: "size-4";
+        readonly name: "text-xs";
+    };
+    readonly md: {
+        readonly mark: "size-5";
+        readonly name: "text-sm";
+    };
+    readonly lg: {
+        readonly mark: "size-6";
+        readonly name: "text-base";
+    };
+};
+/**
+ * The three sizes a product mark is drawn at.
+ *
+ * @defaultValue 'md'
+ */
+export type ProductMarkSize = keyof typeof SIZES;
+/**
+ * The props a ProductMark takes.
+ *
+ * There is no product directory in this package. A product's identity is the
+ * consumer's data, so the Component takes the three facts the mark is drawn
+ * from and owns none of them: `id` for the markup, `name` for the second part,
+ * and `pack` for the hue. Where the set of products is published is the
+ * consumer's decision, and Prism ships the mark rather than a list of products.
+ */
+export type ProductMarkProps = {
+    /**
+     * The product's key within the set it is distinguished in. It is carried on
+     * the markup as `data-product` so a test can name one mark rather than the
+     * first one, and so two marks in one document are individually addressable.
+     */
+    id: string;
+    /**
+     * The product's name, which is the mark's second part and the word that
+     * carries the identity. The mark sets it in `brand-ink` rather than in
+     * `foreground`, which is DESIGN.md's Brand Ink Rule: a name that has to read
+     * as the brand reads `brand-ink`, and `foreground` is a tinted neutral with
+     * almost no chroma by design.
+     */
+    name: string;
+    /**
+     * The product's pack, which is the mark's hue. Omit it, or pass `null`, for
+     * the one entry in a set that has no pack of its own: that entry is drawn as
+     * the full spectrum rather than as a colourless mark. See `SPECTRUM` above.
+     *
+     * `default` is a real answer and not the same as the empty one. The base pack
+     * is a pack a product can wear, and it is the absence of a `data-pack`
+     * attribute, so a product whose pack is `default` carries no attribute and its
+     * core resolves the base pack's `primary` from the page.
+     */
+    pack?: PackId | null;
+    /**
+     * Which of the three drawn sizes to use. @defaultValue 'md'
+     */
+    size?: ProductMarkSize;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited, and this Component spreads no other prop,
+     * so there is no second route to its ink.
+     */
+    className?: string;
+};
+/**
+ * A product's two-part colour mark: a hairline ring in the brand ink around a
+ * core in the pack's own fill, beside the product's name in the brand ink.
+ *
+ * Two parts, and both colours come from tokens, which is the whole reason this
+ * is promoted out of the two hand-written copies it replaces. The ring is
+ * `brand-ink`, the pack's brand hue as a stroke; the core is `primary`, the
+ * pack's brand value as a fill. That split is not a preference. DESIGN.md's Fill,
+ * Not the Ink Rule says a pastel brand value is a fill and never text, so the
+ * core may be `primary` and the name may not, and the Brand Ink Rule says the
+ * name reads `brand-ink` rather than `foreground` or `primary-foreground`. A
+ * hand-written copy gets one of those two wrong and nothing in the rendered
+ * result says which.
+ *
+ * Uniqueness across the set comes from the pack: each product wears its own
+ * pack's hue, and the one entry with no pack wears the spectrum, so no two marks
+ * in a set resolve to the same pair of colours. The set is the consumer's data.
+ * This Component draws one member of it, and it is the same member wherever it is
+ * drawn from.
+ *
+ * The mark carries its own `data-pack` boundary on its root, so a product's hue
+ * follows from the pack the caller passed rather than from whichever pack the
+ * page happens to be wearing, and a boundary lands on the mark rather than on
+ * whatever encloses it. The boundary is on a span carrying no radius utility,
+ * which is one of the two placements DESIGN.md's pack-boundary law allows, and
+ * the disc itself is fully rounded. Nothing about the mark's shape moves when a
+ * pack boundary lands above it, which is the half of that law a consumer
+ * implementing only the colour half gets wrong.
+ *
+ * It is a server Component: no hook, no mode, no context, no client code and no
+ * `'use client'` line. A consumer renders it from a server file and needs
+ * nothing from the provider mounted.
+ *
+ * The disc is `aria-hidden` and the name is not, so the mark adds a shape beside
+ * the word rather than a second reading of it.
+ */
+declare function ProductMark({ id, name, pack, size, className }: ProductMarkProps): import("react").JSX.Element;
+export { ProductMark };
+//# sourceMappingURL=product-mark.d.ts.map

package/dist/components/ui/product-mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-mark.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AA2B3C;;;;;;;;GAQG;AACH,QAAA,MAAM,KAAK;;;;;;;;;;;;;CAID,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,KAAK,CAAA;AAEhD;;;;;;;;GAQG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,iBAAS,WAAW,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA2BhF;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/product-mark.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+/**
+ * The full spectrum, as the five series tokens and nothing else.
+ *
+ * A product with no pack of its own is the one entry in a product set that has
+ * no single hue, and the standing decision is that it wears the spectrum rather
+ * than a colourless mark: a colourless dot reads as a product with no identity,
+ * which is the one thing such an entry is not. This line is that decision
+ * translated into the current contract.
+ *
+ * The stops are `chart-1` through `chart-5` because they are the only five-way
+ * colour set the token contract publishes, and because `chart-1` starts at the
+ * page's own pack hue, so a sweep drawn under a scoped boundary begins in that
+ * pack and moves out of it. `chart-1` closes the wheel so the sweep has no seam
+ * at 0 degrees.
+ *
+ * It is the one gradient in the shipped surface. The geometry is Tailwind's and
+ * the colour stops are semantic, which is the only gradient DESIGN.md allows,
+ * and the element it paints is `aria-hidden`: a gradient is never the carrier of
+ * a name, and this one is not.
+ */
+const SPECTRUM = 'bg-[conic-gradient(var(--chart-1),var(--chart-2),var(--chart-3),var(--chart-4),var(--chart-5),var(--chart-1))]';
+/**
+ * The three sizes a product mark is drawn at: the mark's diameter and the name
+ * beside it, taken together so the two parts of the mark stay in proportion.
+ *
+ * The mark is one of a fixed set rather than something a caller sizes through
+ * `className`, because `className` is layout only and a mark sized by a layout
+ * class is a mark the layout owns. A product set shows its marks in a switcher,
+ * in a row and on a page header, and those three are the sizes a set needs.
+ */
+const SIZES = {
+    sm: { mark: 'size-4', name: 'text-xs' },
+    md: { mark: 'size-5', name: 'text-sm' },
+    lg: { mark: 'size-6', name: 'text-base' },
+};
+/**
+ * A product's two-part colour mark: a hairline ring in the brand ink around a
+ * core in the pack's own fill, beside the product's name in the brand ink.
+ *
+ * Two parts, and both colours come from tokens, which is the whole reason this
+ * is promoted out of the two hand-written copies it replaces. The ring is
+ * `brand-ink`, the pack's brand hue as a stroke; the core is `primary`, the
+ * pack's brand value as a fill. That split is not a preference. DESIGN.md's Fill,
+ * Not the Ink Rule says a pastel brand value is a fill and never text, so the
+ * core may be `primary` and the name may not, and the Brand Ink Rule says the
+ * name reads `brand-ink` rather than `foreground` or `primary-foreground`. A
+ * hand-written copy gets one of those two wrong and nothing in the rendered
+ * result says which.
+ *
+ * Uniqueness across the set comes from the pack: each product wears its own
+ * pack's hue, and the one entry with no pack wears the spectrum, so no two marks
+ * in a set resolve to the same pair of colours. The set is the consumer's data.
+ * This Component draws one member of it, and it is the same member wherever it is
+ * drawn from.
+ *
+ * The mark carries its own `data-pack` boundary on its root, so a product's hue
+ * follows from the pack the caller passed rather than from whichever pack the
+ * page happens to be wearing, and a boundary lands on the mark rather than on
+ * whatever encloses it. The boundary is on a span carrying no radius utility,
+ * which is one of the two placements DESIGN.md's pack-boundary law allows, and
+ * the disc itself is fully rounded. Nothing about the mark's shape moves when a
+ * pack boundary lands above it, which is the half of that law a consumer
+ * implementing only the colour half gets wrong.
+ *
+ * It is a server Component: no hook, no mode, no context, no client code and no
+ * `'use client'` line. A consumer renders it from a server file and needs
+ * nothing from the provider mounted.
+ *
+ * The disc is `aria-hidden` and the name is not, so the mark adds a shape beside
+ * the word rather than a second reading of it.
+ */
+function ProductMark({ id, name, pack, size = 'md', className }) {
+    const drawn = SIZES[size];
+    // `default` is the absence of a pack id, spelled the way the token build
+    // spells it, so a base-pack product resolves `primary` from the page rather
+    // than from an attribute that matches no emitted rule.
+    const boundary = pack && pack !== 'default' ? pack : undefined;
+    return (_jsxs("span", { "data-slot": "product-mark", "data-pack": boundary, className: cn('inline-flex items-center gap-2', className), children: [_jsx("span", { "data-slot": "product-mark-disc", "data-product": id, "aria-hidden": true, className: cn('inline-block shrink-0 rounded-full border border-brand-ink', drawn.mark, pack ? 'bg-primary' : SPECTRUM) }), _jsx("span", { "data-slot": "product-mark-name", className: cn('font-medium text-brand-ink', drawn.name), children: name })] }));
+}
+export { ProductMark };

package/dist/components/ui/product-switcher.d.ts

@@ -0,0 +1,108 @@
+import type { ComponentProps } from 'react';
+import { type ProductMarkProps, type ProductMarkSize } from './product-mark';
+/**
+ * One product in the set a switcher moves between.
+ *
+ * The three facts the mark is drawn from, and no directory. Which products exist
+ * is the consumer's decision: Prism ships the mark and the switch that reads it,
+ * not a list of NaniSoft's products, so a consumer composing a set of its own
+ * does not have to name them here to be able to switch between them.
+ */
+export type SwitcherProduct = {
+    /**
+     * The product's key within the set. It is carried on the markup as
+     * `data-product` through `ProductMark`, so a test can name one member rather
+     * than the first one, and two members in one document are addressable.
+     */
+    id: string;
+    /** The product's own name, which is the second part of its mark. */
+    name: string;
+    /**
+     * The product's pack, which is the hue of its mark. Omit it, or pass `null`, for
+     * the one member of a set that has no pack of its own: that member is drawn as
+     * the full spectrum rather than as a colourless mark.
+     */
+    pack?: ProductMarkProps['pack'];
+    /**
+     * Where the member goes. Required, because a switcher whose members do not go
+     * anywhere is a list of labels.
+     */
+    href: string;
+};
+/**
+ * The props a ProductSwitcher takes.
+ *
+ * There is no `current` requirement: a switcher marks the member the reader is on
+ * with `aria-current="page"`, and the caller's own router is what knows that. The
+ * member is passed as `currentId` and the switcher marks it; nothing here is a
+ * router and nothing here decides where a link goes.
+ */
+export type ProductSwitcherProps = Omit<ComponentProps<'nav'>, 'children'> & {
+    /**
+     * The set to move between, in the order a reader should meet it. Order is the
+     * caller's because it is a claim about which product matters first.
+     */
+    products: readonly SwitcherProduct[];
+    /**
+     * The `id` of the member the reader is on. Marked `aria-current="page"`, which
+     * is how a reader and a screen reader both know where they are. Omit it when
+     * the switcher is rendered on a page that is not one of the members.
+     */
+    currentId?: string;
+    /**
+     * The drawn size of every mark, so a set shows one size rather than a mix. See
+     * `ProductMarkSize`.
+     *
+     * @defaultValue 'sm'
+     */
+    size?: ProductMarkSize;
+    /**
+     * A heading for the set, for a switcher that is not inside a landmark the
+     * reader can already name. Rendered as the navigation's accessible name and as
+     * no visible text, because the marks beside it are the labels.
+     */
+    label?: string;
+    /**
+     * Layout only, exactly as on every Component. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * A switch between the members of a set of products.
+ *
+ * One job: let a reader who is in one product move to another, and say which one
+ * they are in. All four NaniSoft sites need it and each one wrote it: the
+ * company's own site moves between its products from a row of coloured dots, and
+ * each product site names its siblings in its header. The mark is `ProductMark`,
+ * so the two parts of a member's identity - the ring in the brand ink and the
+ * core in its own pack fill - are the same two colours wherever the member is
+ * drawn, in a switcher, in a row or on a page header.
+ *
+ * It is a Component rather than a Block because a switcher is not a region of a
+ * page: it is a control that appears in one, it fetches nothing, and every
+ * member of the set is a prop. The header that carries it is a Block, and it
+ * composes this.
+ *
+ * **The current member is marked, not styled.** A switcher that only colours the
+ * current member is a switcher a colourblind reader cannot use and a screen
+ * reader cannot read at all, so the current member carries `aria-current="page"`
+ * and Prism's focus ring comes from the browser's own link behaviour. There is
+ * no `variant` for the current member and no way to override the marking, which
+ * is the whole reason this is a Component rather than a list of anchors the
+ * caller writes.
+ *
+ * The set is a `nav` with an accessible name rather than a bare list of links,
+ * because a set of links that move between sections of one product is a
+ * navigation region and a screen reader should say so. `label` names it; the
+ * default name is `Products`, and a consumer whose set is not products passes
+ * its own word rather than accepting a claim about what its set is.
+ *
+ * It is a server Component: no hook, no context, no state and no client code,
+ * so a switcher in a static page costs no JavaScript at all. A consumer that
+ * wants a menu rather than a row of marks composes `DropdownMenu` with the marks
+ * and does not use this.
+ */
+declare function ProductSwitcher({ products, currentId, size, label, className, ...props }: ProductSwitcherProps): import("react").JSX.Element | null;
+export { ProductSwitcher };
+//# sourceMappingURL=product-switcher.d.ts.map

package/dist/components/ui/product-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-switcher.d.ts","sourceRoot":"","sources":["../../../src/components/ui/product-switcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAe,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAGzF;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E;;;OAGG;IACH,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAA;IACpC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,eAAe,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAkB,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,sCA+BtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/ui/product-switcher.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProductMark } from './product-mark';
+import { cn } from '../../lib/utils';
+/**
+ * A switch between the members of a set of products.
+ *
+ * One job: let a reader who is in one product move to another, and say which one
+ * they are in. All four NaniSoft sites need it and each one wrote it: the
+ * company's own site moves between its products from a row of coloured dots, and
+ * each product site names its siblings in its header. The mark is `ProductMark`,
+ * so the two parts of a member's identity - the ring in the brand ink and the
+ * core in its own pack fill - are the same two colours wherever the member is
+ * drawn, in a switcher, in a row or on a page header.
+ *
+ * It is a Component rather than a Block because a switcher is not a region of a
+ * page: it is a control that appears in one, it fetches nothing, and every
+ * member of the set is a prop. The header that carries it is a Block, and it
+ * composes this.
+ *
+ * **The current member is marked, not styled.** A switcher that only colours the
+ * current member is a switcher a colourblind reader cannot use and a screen
+ * reader cannot read at all, so the current member carries `aria-current="page"`
+ * and Prism's focus ring comes from the browser's own link behaviour. There is
+ * no `variant` for the current member and no way to override the marking, which
+ * is the whole reason this is a Component rather than a list of anchors the
+ * caller writes.
+ *
+ * The set is a `nav` with an accessible name rather than a bare list of links,
+ * because a set of links that move between sections of one product is a
+ * navigation region and a screen reader should say so. `label` names it; the
+ * default name is `Products`, and a consumer whose set is not products passes
+ * its own word rather than accepting a claim about what its set is.
+ *
+ * It is a server Component: no hook, no context, no state and no client code,
+ * so a switcher in a static page costs no JavaScript at all. A consumer that
+ * wants a menu rather than a row of marks composes `DropdownMenu` with the marks
+ * and does not use this.
+ */
+function ProductSwitcher({ products, currentId, size = 'sm', label = 'Products', className, ...props }) {
+    if (products.length === 0)
+        return null;
+    return (_jsx("nav", { "data-slot": "product-switcher", "aria-label": label, className: cn('flex flex-wrap items-center gap-x-4 gap-y-2', className), ...props, children: products.map((product) => {
+            const current = product.id === currentId;
+            return (_jsx("a", { href: product.href, "aria-current": current ? 'page' : undefined, "data-current": current ? 'true' : undefined, className: "rounded-sm transition-opacity duration-fast ease-out hover:opacity-80", children: _jsx(ProductMark, { id: product.id, name: product.name, pack: product.pack, size: size }) }, product.id));
+        }) }));
+}
+export { ProductSwitcher };

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,38 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the Progress forwards to its Base UI root.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface ProgressProps extends ComponentProps<'div'> {
+    /**
+     * The current value. Pass `null` for an indeterminate task.
+     *
+     * There is no default: a progress bar without a value is a claim, so the
+     * consumer states where the task is.
+     */
+    value: number | null;
+    /** The maximum value. @defaultValue 100 */
+    max?: number;
+    /** The minimum value. @defaultValue 0 */
+    min?: number;
+    /** Options passed to `Intl.NumberFormat` when the value is rendered. */
+    format?: Intl.NumberFormatOptions;
+    /** The locale used when formatting the value. */
+    locale?: Intl.LocalesArgument;
+    /** Returns the text alternative announced for a value. */
+    getAriaValueText?: (formattedValue: string, value: number | null) => string;
+}
+/**
+ * A bar that reports how far a task has progressed.
+ *
+ * The bar exposes its value, minimum and maximum through ARIA, so a screen
+ * reader announces the position rather than the pixels. It is a status, not a
+ * control: the reader watches it, and an interrupting task uses an Alert
+ * instead. Pass `value={null}` for a task of unknown length, where the bar is
+ * announced as indeterminate.
+ */
+declare function Progress({ className, ...props }: ProgressProps): import("react").JSX.Element;
+export { Progress };
+//# sourceMappingURL=progress.d.ts.map

package/dist/components/ui/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC1D;;;;;OAKG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,wEAAwE;IACxE,MAAM,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAA;IACjC,iDAAiD;IACjD,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,CAAA;IAC7B,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAA;CAC5E;AAED;;;;;;;;GAQG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BAkBvD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/progress.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+import { cn } from '../../lib/utils';
+/**
+ * A bar that reports how far a task has progressed.
+ *
+ * The bar exposes its value, minimum and maximum through ARIA, so a screen
+ * reader announces the position rather than the pixels. It is a status, not a
+ * control: the reader watches it, and an interrupting task uses an Alert
+ * instead. Pass `value={null}` for a task of unknown length, where the bar is
+ * announced as indeterminate.
+ */
+function Progress({ className, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn('flex w-full flex-col gap-2', className), ...props, children: _jsx(ProgressPrimitive.Track, { "data-slot": "progress-track", className: "bg-muted relative h-2 w-full overflow-hidden rounded-full", children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full rounded-full transition-[width] duration-base ease-out" }) }) }));
+}
+export { Progress };