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

package/README.md

@@ -1,3 +1,25 @@
-# Temporary Holding Version
+# @lar-works/design-system
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Lar's design system: tokens, base styles and every visual component the Lar web apps use, built on React 19,
+Tailwind CSS 4 and ninna-ui, with lucide icons. Browse it in [Storybook](https://maddec01.github.io/lar-web/).
+
+```sh
+pnpm add @lar-works/design-system
+```
+
+```css
+/* the app's CSS entry */
+@import '@lar-works/design-system/styles.css';
+```
+
+```tsx
+import { Button, DesignSystemProvider } from '@lar-works/design-system';
+import { PlusIcon } from '@lar-works/design-system/icons';
+
+<DesignSystemProvider labels={translatedLabels}>
+    <Button leftIcon={<PlusIcon />}>Add library</Button>
+</DesignSystemProvider>;
+```
+
+Apps compose these components and never style anything themselves; `@lar-works/config`'s lint rules enforce it.
+`@lar-works/design-system/testing` has helpers for apps' jsdom test setup.

package/dist/actions/Button.d.ts

@@ -0,0 +1,25 @@
+import { ButtonProps } from "@ninna-ui/primitives";
+declare const recipes: {
+  readonly primary: 'border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]';
+  readonly secondary: "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
+  readonly quiet: "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700";
+  readonly row: "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700 h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100";
+  readonly subtle: 'border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400';
+  readonly destructive: 'border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none';
+  readonly 'destructive-quiet': 'border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current';
+  readonly choice: "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
+  readonly context: "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700 h-11 min-w-0 gap-1.5 px-2 lg:max-w-48 lg:pointer-fine:h-8";
+  readonly summary: "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700 h-7 min-w-0 px-1.5 sm:h-7";
+  readonly avatar: 'size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7';
+  readonly status: 'h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0';
+};
+type ButtonProps$1 = Omit<ButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
+  variant?: keyof typeof recipes;
+  selected?: boolean;
+};
+declare const Button$1: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "color" | "radius" | "size" | "variant"> & {
+  variant?: keyof typeof recipes;
+  selected?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export { Button$1 as Button, ButtonProps$1 as ButtonProps };
+//# sourceMappingURL=Button.d.ts.map

package/dist/actions/Button.js

@@ -0,0 +1,55 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Button } from "@ninna-ui/primitives";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/actions/Button.tsx
+/** T3 Code's button (coss ui): an 8px-radius control, 36px on touch and 32px with a pointer, that dips to
+*  97% while pressed. Every recipe sets its own colours, so ninna-ui only supplies behaviour. */
+const base = "h-9 gap-2 rounded-md border px-[11px] text-sm font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 sm:h-8 [&_[data-slot=icon]>svg]:size-4";
+const outline = "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700";
+const ghost = "border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700";
+const recipes = {
+	primary: "border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]",
+	secondary: outline,
+	quiet: ghost,
+	row: `${ghost} h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100`,
+	subtle: "border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400",
+	destructive: "border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none",
+	"destructive-quiet": "border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current",
+	choice: outline,
+	context: `${ghost} h-11 min-w-0 gap-1.5 px-2 lg:max-w-48 lg:pointer-fine:h-8`,
+	summary: `${ghost} h-7 min-w-0 px-1.5 sm:h-7`,
+	avatar: "size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7",
+	status: "h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0"
+};
+const selectedChoice = "border-primary/60 bg-primary/8 text-base-content ring-1 ring-inset ring-primary/40 hover:bg-primary/12 dark:border-primary/60 dark:bg-primary/16 dark:hover:bg-primary/20";
+const Button$1 = forwardRef(({ variant = "primary", selected, className = "", children, leftIcon, rightIcon, ...props }, ref) => {
+	const context = variant === "context";
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		...tabbable,
+		...props,
+		size: "sm",
+		radius: "lg",
+		variant: "ghost",
+		color: "neutral",
+		"aria-pressed": selected ?? props["aria-pressed"],
+		className: `${base} ${variant === "choice" && selected ? selectedChoice : recipes[variant]} ${selected && variant !== "choice" ? "bg-base-200" : ""} ${className}`,
+		leftIcon: context ? /* @__PURE__ */ jsx("span", {
+			className: "text-(--color-header-icon) [&>svg]:size-4",
+			children: leftIcon
+		}) : leftIcon,
+		rightIcon: context ? /* @__PURE__ */ jsx("span", {
+			className: "text-base-700 [&>svg]:size-3.5",
+			children: rightIcon
+		}) : rightIcon,
+		children: context ? /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children
+		}) : children
+	});
+});
+Button$1.displayName = "Button";
+export { Button$1 as Button };
+
+//# sourceMappingURL=Button.js.map

package/dist/actions/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["Button","NinnaButton"],"sources":["../../src/actions/Button.tsx"],"sourcesContent":["import { Button as NinnaButton, type ButtonProps as NinnaButtonProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\n/** T3 Code's button (coss ui): an 8px-radius control, 36px on touch and 32px with a pointer, that dips to\n *  97% while pressed. Every recipe sets its own colours, so ninna-ui only supplies behaviour. */\nconst base =\n    'h-9 gap-2 rounded-md border px-[11px] text-sm font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 active:scale-[0.97] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary focus-visible:ring-offset-0 disabled:opacity-64 sm:h-8 [&_[data-slot=icon]>svg]:size-4';\n\nconst outline =\n    'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-400/30 dark:hover:bg-base-400/60 [&_[data-slot=icon]]:text-base-700';\nconst ghost =\n    'border-transparent text-base-content hover:bg-base-200 data-[state=open]:bg-base-200 [&_[data-slot=icon]]:text-base-700';\n\nconst recipes = {\n    primary:\n        'border-primary bg-primary text-primary-content shadow-xs shadow-primary/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-primary/90 active:shadow-none active:inset-shadow-[0_1px_rgb(0_0_0/8%)]',\n    secondary: outline,\n    quiet: ghost,\n    row: `${ghost} h-auto min-h-8 min-w-0 max-w-full justify-start whitespace-normal px-0 py-1 text-left text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-auto active:scale-100`,\n    subtle: 'border-transparent bg-base-200 text-base-content hover:bg-base-300/70 dark:bg-base-300 dark:hover:bg-base-400',\n    destructive:\n        'border-danger bg-danger text-white shadow-xs shadow-danger/24 inset-shadow-[0_1px_rgb(255_255_255/16%)] hover:bg-danger/90 active:shadow-none',\n    'destructive-quiet':\n        'border-transparent text-(--lar-danger-text) hover:bg-danger/8 dark:hover:bg-danger/16 [&_[data-slot=icon]]:text-current',\n    choice: outline,\n    context: `${ghost} h-11 min-w-0 gap-1.5 px-2 lg:max-w-48 lg:pointer-fine:h-8`,\n    summary: `${ghost} h-7 min-w-0 px-1.5 sm:h-7`,\n    avatar: 'size-7 rounded-full border-transparent p-0 hover:bg-transparent sm:h-7 [&>*]:size-7',\n    status: 'h-4 min-w-0 max-w-full justify-start gap-1.5 rounded-sm border-transparent px-0 text-xs font-normal text-base-700 hover:bg-transparent hover:text-base-content sm:h-4 active:scale-100 [&>svg]:size-3 [&>svg]:shrink-0',\n} as const;\n\nconst selectedChoice =\n    'border-primary/60 bg-primary/8 text-base-content ring-1 ring-inset ring-primary/40 hover:bg-primary/12 dark:border-primary/60 dark:bg-primary/16 dark:hover:bg-primary/20';\n\nexport type ButtonProps = Omit<NinnaButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {\n    variant?: keyof typeof recipes;\n    selected?: boolean;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n    ({ variant = 'primary', selected, className = '', children, leftIcon, rightIcon, ...props }, ref) => {\n        const context = variant === 'context';\n\n        return (\n            <NinnaButton\n                ref={ref}\n                {...tabbable}\n                {...props}\n                size=\"sm\"\n                radius=\"lg\"\n                variant=\"ghost\"\n                color=\"neutral\"\n                aria-pressed={selected ?? props['aria-pressed']}\n                className={`${base} ${variant === 'choice' && selected ? selectedChoice : recipes[variant]} ${selected && variant !== 'choice' ? 'bg-base-200' : ''} ${className}`}\n                leftIcon={\n                    context ? <span className=\"text-(--color-header-icon) [&>svg]:size-4\">{leftIcon}</span> : leftIcon\n                }\n                rightIcon={context ? <span className=\"text-base-700 [&>svg]:size-3.5\">{rightIcon}</span> : rightIcon}\n            >\n                {context ? <span className=\"truncate\">{children}</span> : children}\n            </NinnaButton>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;AAOA,MAAM,OACF;AAEJ,MAAM,UACF;AACJ,MAAM,QACF;AAEJ,MAAM,UAAU;CACZ,SACI;CACJ,WAAW;CACX,OAAO;CACP,KAAK,GAAG,MAAM;CACd,QAAQ;CACR,aACI;CACJ,qBACI;CACJ,QAAQ;CACR,SAAS,GAAG,MAAM;CAClB,SAAS,GAAG,MAAM;CAClB,QAAQ;CACR,QAAQ;AACZ;AAEA,MAAM,iBACF;AAOJ,MAAaA,WAAS,YACjB,EAAE,UAAU,WAAW,UAAU,YAAY,IAAI,UAAU,UAAU,WAAW,GAAG,SAAS,QAAQ;CACjG,MAAM,UAAU,YAAY;CAE5B,OACI,oBAACC,QAAD;EACS;EACL,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,QAAO;EACP,SAAQ;EACR,OAAM;EACN,gBAAc,YAAY,MAAM;EAChC,WAAW,GAAG,KAAK,GAAG,YAAY,YAAY,WAAW,iBAAiB,QAAQ,SAAS,GAAG,YAAY,YAAY,WAAW,gBAAgB,GAAG,GAAG;EACvJ,UACI,UAAU,oBAAC,QAAD;GAAM,WAAU;GAA6C,UAAA;EAAe,CAAA,IAAI;EAE9F,WAAW,UAAU,oBAAC,QAAD;GAAM,WAAU;GAAkC,UAAA;EAAgB,CAAA,IAAI;EAE1F,UAAA,UAAU,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,IAAI;CACjD,CAAA;AAErB,CACJ;AAEA,SAAO,cAAc"}

package/dist/actions/ButtonLink.d.ts

@@ -0,0 +1,21 @@
+import { AnchorHTMLAttributes, ReactNode } from "react";
+/** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */
+declare const recipes: {
+  readonly primary: 'border-primary bg-primary text-primary-content shadow-sm shadow-primary/30 inset-shadow-[0_1px_rgb(255_255_255/18%)] hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,white)] active:shadow-none';
+  readonly secondary: 'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-300/40 dark:hover:bg-base-400/50';
+  readonly inverse: 'border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]';
+  readonly quiet: 'border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]';
+};
+export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {
+  href: string;
+  variant?: keyof typeof recipes;
+  size?: 'md' | 'lg';
+  icon?: ReactNode;
+  /** Shows an arrow that nudges forward on hover. */
+  arrow?: boolean;
+  external?: boolean;
+  onNavigate?: (href: string) => void;
+}
+export declare function ButtonLink({ variant, size, icon, arrow, external, onNavigate, onClick, children, href, ...props }: ButtonLinkProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ButtonLink.d.ts.map

package/dist/actions/ButtonLink.js

@@ -0,0 +1,40 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "lucide-react";
+// src/actions/ButtonLink.tsx
+/** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */
+const recipes = {
+	primary: "border-primary bg-primary text-primary-content shadow-sm shadow-primary/30 inset-shadow-[0_1px_rgb(255_255_255/18%)] hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,white)] active:shadow-none",
+	secondary: "border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-300/40 dark:hover:bg-base-400/50",
+	inverse: "border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]",
+	quiet: "border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]"
+};
+function ButtonLink({ variant = "primary", size = "lg", icon, arrow, external, onNavigate, onClick, children, href, ...props }) {
+	return /* @__PURE__ */ jsxs("a", {
+		...tabbable,
+		...props,
+		href,
+		...external ? {
+			target: "_blank",
+			rel: "noreferrer"
+		} : {},
+		onClick: (event) => {
+			onClick?.(event);
+			if (!onNavigate || external || event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+			event.preventDefault();
+			onNavigate(href);
+		},
+		className: `group/button focus-visible:outline-primary inline-flex shrink-0 items-center justify-center gap-2 rounded-[0.625rem] border font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] [&_svg]:size-4 [&_svg]:shrink-0 ${size === "lg" ? "h-11 text-[15px]" : "h-9 text-sm"} ${variant === "quiet" ? "px-0" : size === "lg" ? "px-[1.125rem]" : "px-3.5"} ${recipes[variant]}`,
+		children: [
+			icon,
+			children,
+			arrow ? /* @__PURE__ */ jsx("span", {
+				className: "-mr-0.5 inline-flex transition-transform duration-200 group-hover/button:translate-x-0.5",
+				children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
+			}) : null
+		]
+	});
+}
+export { ButtonLink };
+
+//# sourceMappingURL=ButtonLink.js.map

package/dist/actions/ButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.js","names":[],"sources":["../../src/actions/ButtonLink.tsx"],"sourcesContent":["import { ArrowRightIcon } from 'lucide-react';\nimport type { AnchorHTMLAttributes, ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\n/** The marketing pages' calls to action: the Button recipes at a roomier 44px, as links. */\nconst recipes = {\n    primary:\n        'border-primary bg-primary text-primary-content shadow-sm shadow-primary/30 inset-shadow-[0_1px_rgb(255_255_255/18%)] hover:bg-[color-mix(in_srgb,var(--color-primary)_88%,white)] active:shadow-none',\n    secondary:\n        'border-base-400/90 bg-base-100 text-base-content shadow-xs/5 hover:bg-base-200/70 dark:border-base-400 dark:bg-base-300/40 dark:hover:bg-base-400/50',\n    inverse:\n        'border-transparent bg-base-content text-base-50 shadow-sm hover:bg-[color-mix(in_srgb,var(--color-base-content)_86%,transparent)]',\n    quiet: 'border-transparent text-base-content hover:text-primary dark:hover:text-[color-mix(in_srgb,var(--color-primary)_45%,white)]',\n} as const;\n\nexport interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'style'> {\n    href: string;\n    variant?: keyof typeof recipes;\n    size?: 'md' | 'lg';\n    icon?: ReactNode;\n    /** Shows an arrow that nudges forward on hover. */\n    arrow?: boolean;\n    external?: boolean;\n    onNavigate?: (href: string) => void;\n}\n\nexport function ButtonLink({\n    variant = 'primary',\n    size = 'lg',\n    icon,\n    arrow,\n    external,\n    onNavigate,\n    onClick,\n    children,\n    href,\n    ...props\n}: ButtonLinkProps) {\n    return (\n        <a\n            {...tabbable}\n            {...props}\n            href={href}\n            {...(external ? { target: '_blank', rel: 'noreferrer' } : {})}\n            onClick={(event) => {\n                onClick?.(event);\n\n                if (\n                    !onNavigate ||\n                    external ||\n                    event.defaultPrevented ||\n                    event.button !== 0 ||\n                    event.metaKey ||\n                    event.ctrlKey ||\n                    event.shiftKey ||\n                    event.altKey\n                )\n                    return;\n\n                event.preventDefault();\n                onNavigate(href);\n            }}\n            className={`group/button focus-visible:outline-primary inline-flex shrink-0 items-center justify-center gap-2 rounded-[0.625rem] border font-medium whitespace-nowrap transition-[background-color,box-shadow,scale,color] duration-150 select-none focus-visible:outline-2 focus-visible:outline-offset-2 active:scale-[0.97] [&_svg]:size-4 [&_svg]:shrink-0 ${size === 'lg' ? 'h-11 text-[15px]' : 'h-9 text-sm'} ${variant === 'quiet' ? 'px-0' : size === 'lg' ? 'px-[1.125rem]' : 'px-3.5'} ${recipes[variant]}`}\n        >\n            {icon}\n            {children}\n            {arrow ? (\n                <span className=\"-mr-0.5 inline-flex transition-transform duration-200 group-hover/button:translate-x-0.5\">\n                    <ArrowRightIcon />\n                </span>\n            ) : null}\n        </a>\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,UAAU;CACZ,SACI;CACJ,WACI;CACJ,SACI;CACJ,OAAO;AACX;AAaA,SAAgB,WAAW,EACvB,UAAU,WACV,OAAO,MACP,MACA,OACA,UACA,YACA,SACA,UACA,MACA,GAAG,SACa;CAChB,OACI,qBAAC,KAAD;EACI,GAAI;EACJ,GAAI;EACE;EACN,GAAK,WAAW;GAAE,QAAQ;GAAU,KAAK;EAAa,IAAI,CAAC;EAC3D,UAAU,UAAU;GAChB,UAAU,KAAK;GAEf,IACI,CAAC,cACD,YACA,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QAEN;GAEJ,MAAM,eAAe;GACrB,WAAW,IAAI;EACnB;EACA,WAAW,sVAAsV,SAAS,OAAO,qBAAqB,cAAc,GAAG,YAAY,UAAU,SAAS,SAAS,OAAO,kBAAkB,SAAS,GAAG,QAAQ;EAvBhf,UAAA;GAyBK;GACA;GACA,QACG,oBAAC,QAAD;IAAM,WAAU;IACZ,UAAA,oBAAC,gBAAD,CAAiB,CAAA;GACf,CAAA,IACN;EACL;;AAEX"}

package/dist/actions/IconButton.d.ts

@@ -0,0 +1,14 @@
+import { StatusTone } from "../feedback/StatusIndicator.js";
+import { IconButtonProps } from "@ninna-ui/primitives";
+type IconButtonProps$1 = Omit<IconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {
+  variant?: 'header' | 'quiet' | 'title-bar';
+  tone?: StatusTone | 'accent';
+  notification?: string;
+};
+declare const IconButton$1: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "color" | "radius" | "size" | "variant"> & {
+  variant?: 'header' | 'quiet' | 'title-bar';
+  tone?: StatusTone | 'accent';
+  notification?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export { IconButton$1 as IconButton, IconButtonProps$1 as IconButtonProps };
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/actions/IconButton.js

@@ -0,0 +1,29 @@
+import { StatusIndicator } from "../feedback/StatusIndicator.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { IconButton } from "@ninna-ui/primitives";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/actions/IconButton.tsx
+const IconButton$1 = forwardRef(({ variant = "quiet", tone = "neutral", className = "", notification, icon, ...props }, ref) => /* @__PURE__ */ jsx(IconButton, {
+	ref,
+	...tabbable,
+	"aria-description": notification,
+	...props,
+	icon: notification ? /* @__PURE__ */ jsxs("span", {
+		className: "relative block size-full",
+		children: [icon, /* @__PURE__ */ jsx(StatusIndicator, {
+			tone: "warning",
+			size: "sm",
+			className: "ring-base-100 absolute -top-0.5 -right-0.5 ring-2"
+		})]
+	}) : icon,
+	variant: "ghost",
+	color: tone === "accent" ? "primary" : tone,
+	size: "sm",
+	radius: "lg",
+	className: (variant === "header" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] " : variant === "title-bar" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 " : tone === "neutral" ? "text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md " : "rounded-md ") + "transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full " + className
+}));
+IconButton$1.displayName = "IconButton";
+export { IconButton$1 as IconButton };
+
+//# sourceMappingURL=IconButton.js.map

package/dist/actions/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","names":["IconButton","NinnaIconButton"],"sources":["../../src/actions/IconButton.tsx"],"sourcesContent":["import { IconButton as NinnaIconButton, type IconButtonProps as NinnaIconButtonProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nimport { StatusIndicator, type StatusTone } from '../feedback/StatusIndicator';\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type IconButtonProps = Omit<NinnaIconButtonProps, 'color' | 'radius' | 'size' | 'variant'> & {\n    variant?: 'header' | 'quiet' | 'title-bar';\n    tone?: StatusTone | 'accent';\n    notification?: string;\n};\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n    ({ variant = 'quiet', tone = 'neutral', className = '', notification, icon, ...props }, ref) => (\n        <NinnaIconButton\n            ref={ref}\n            {...tabbable}\n            aria-description={notification}\n            {...props}\n            icon={\n                notification ? (\n                    <span className=\"relative block size-full\">\n                        {icon}\n                        <StatusIndicator\n                            tone=\"warning\"\n                            size=\"sm\"\n                            className=\"ring-base-100 absolute -top-0.5 -right-0.5 ring-2\"\n                        />\n                    </span>\n                ) : (\n                    icon\n                )\n            }\n            variant=\"ghost\"\n            color={tone === 'accent' ? 'primary' : tone}\n            size=\"sm\"\n            radius=\"lg\"\n            className={\n                // T3 Code's ghost icon button: muted until hovered, on an accent fill.\n                (variant === 'header'\n                    ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-8 rounded-md p-0 before:-inset-1 **:data-[slot=icon]:size-[18px] '\n                    : variant === 'title-bar'\n                      ? // The title bar's 28px row of controls, with 16px icons.\n                        'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 data-[state=open]:text-base-content size-7 rounded-md p-0 before:-inset-1.5 **:data-[slot=icon]:size-4 '\n                      : tone === 'neutral'\n                        ? 'text-base-700 hover:bg-base-200 hover:text-base-content data-[state=open]:bg-base-200 rounded-md '\n                        : 'rounded-md ') +\n                'transition-[background-color,color,scale] active:scale-[0.94] [&_svg]:size-full ' +\n                className\n            }\n        />\n    ),\n);\n\nIconButton.displayName = 'IconButton';\n"],"mappings":";;;;;;AAYA,MAAaA,eAAa,YACrB,EAAE,UAAU,SAAS,OAAO,WAAW,YAAY,IAAI,cAAc,MAAM,GAAG,SAAS,QACpF,oBAACC,YAAD;CACS;CACL,GAAI;CACJ,oBAAkB;CAClB,GAAI;CACJ,MACI,eACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACK,MACD,oBAAC,iBAAD;GACI,MAAK;GACL,MAAK;GACL,WAAU;EACb,CAAA,CACC;CAEN,CAAA,IAAA;CAGR,SAAQ;CACR,OAAO,SAAS,WAAW,YAAY;CACvC,MAAK;CACL,QAAO;CACP,YAEK,YAAY,WACP,qMACA,YAAY,cAEV,kMACA,SAAS,YACP,sGACA,iBACV,qFACA;AAEP,CAAA,CAET;AAEA,aAAW,cAAc"}

package/dist/actions/ThemeSwitch.d.ts

@@ -0,0 +1,7 @@
+import { ThemePreference } from "../foundations/Theme.js";
+/** Three small segments for the colour scheme: follow the system, light or dark. */
+export declare function ThemeSwitch({ value, onChange }: {
+  value: ThemePreference;
+  onChange: (value: ThemePreference) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ThemeSwitch.d.ts.map

package/dist/actions/ThemeSwitch.js

@@ -0,0 +1,42 @@
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { jsx } from "react/jsx-runtime";
+import { MonitorIcon, MoonIcon, SunIcon } from "lucide-react";
+// src/actions/ThemeSwitch.tsx
+const choices = [
+	{
+		value: "system",
+		Icon: MonitorIcon
+	},
+	{
+		value: "light",
+		Icon: SunIcon
+	},
+	{
+		value: "dark",
+		Icon: MoonIcon
+	}
+];
+/** Three small segments for the colour scheme: follow the system, light or dark. */
+function ThemeSwitch({ value, onChange }) {
+	const labels = useDesignSystemLabels().theme;
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": labels.label,
+		className: "border-base-300 bg-base-100/70 dark:bg-base-200/60 inline-flex h-8 items-center gap-0.5 rounded-full border p-0.5",
+		children: choices.map(({ value: choice, Icon }) => /* @__PURE__ */ jsx("button", {
+			...tabbable,
+			type: "button",
+			role: "radio",
+			"aria-checked": value === choice,
+			"aria-label": labels[choice],
+			title: labels[choice],
+			onClick: () => onChange(choice),
+			className: "text-base-600 hover:text-base-content aria-checked:bg-base-200 aria-checked:text-base-content focus-visible:outline-primary dark:aria-checked:bg-base-400/70 inline-flex size-7 items-center justify-center rounded-full transition-colors focus-visible:outline-2 aria-checked:shadow-xs/10 [&_svg]:size-[15px]",
+			children: /* @__PURE__ */ jsx(Icon, {})
+		}, choice))
+	});
+}
+export { ThemeSwitch };
+
+//# sourceMappingURL=ThemeSwitch.js.map

package/dist/actions/ThemeSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSwitch.js","names":[],"sources":["../../src/actions/ThemeSwitch.tsx"],"sourcesContent":["import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\n\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport type { ThemePreference } from '../foundations/Theme';\n\nconst choices = [\n    { value: 'system', Icon: MonitorIcon },\n    { value: 'light', Icon: SunIcon },\n    { value: 'dark', Icon: MoonIcon },\n] as const;\n\n/** Three small segments for the colour scheme: follow the system, light or dark. */\nexport function ThemeSwitch({\n    value,\n    onChange,\n}: {\n    value: ThemePreference;\n    onChange: (value: ThemePreference) => void;\n}) {\n    const labels = useDesignSystemLabels().theme;\n\n    return (\n        <div\n            role=\"radiogroup\"\n            aria-label={labels.label}\n            className=\"border-base-300 bg-base-100/70 dark:bg-base-200/60 inline-flex h-8 items-center gap-0.5 rounded-full border p-0.5\"\n        >\n            {choices.map(({ value: choice, Icon }) => (\n                <button\n                    key={choice}\n                    {...tabbable}\n                    type=\"button\"\n                    role=\"radio\"\n                    aria-checked={value === choice}\n                    aria-label={labels[choice]}\n                    title={labels[choice]}\n                    onClick={() => onChange(choice)}\n                    className=\"text-base-600 hover:text-base-content aria-checked:bg-base-200 aria-checked:text-base-content focus-visible:outline-primary dark:aria-checked:bg-base-400/70 inline-flex size-7 items-center justify-center rounded-full transition-colors focus-visible:outline-2 aria-checked:shadow-xs/10 [&_svg]:size-[15px]\"\n                >\n                    <Icon />\n                </button>\n            ))}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,UAAU;CACZ;EAAE,OAAO;EAAU,MAAM;CAAY;CACrC;EAAE,OAAO;EAAS,MAAM;CAAQ;CAChC;EAAE,OAAO;EAAQ,MAAM;CAAS;AACpC;;AAGA,SAAgB,YAAY,EACxB,OACA,YAID;CACC,MAAM,SAAS,sBAAsB,CAAC,CAAC;CAEvC,OACI,oBAAC,OAAD;EACI,MAAK;EACL,cAAY,OAAO;EACnB,WAAU;EAET,UAAA,QAAQ,KAAK,EAAE,OAAO,QAAQ,WAC3B,oBAAC,UAAD;GAEI,GAAI;GACJ,MAAK;GACL,MAAK;GACL,gBAAc,UAAU;GACxB,cAAY,OAAO;GACnB,OAAO,OAAO;GACd,eAAe,SAAS,MAAM;GAC9B,WAAU;GAEV,UAAA,oBAAC,MAAD,CAAO,CAAA;EACH,GAXC,MAWD,CACX;CACA,CAAA;AAEb"}

package/dist/actions/index.d.ts

@@ -0,0 +1,5 @@
+import { Button, ButtonProps } from "./Button.js";
+import { IconButton, IconButtonProps } from "./IconButton.js";
+import { ButtonLink, ButtonLinkProps } from "./ButtonLink.js";
+import { ThemeSwitch } from "./ThemeSwitch.js";
+export { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton, type IconButtonProps, ThemeSwitch };

package/dist/collections/CollectionSectionHeader.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export declare function CollectionSectionHeader({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=CollectionSectionHeader.d.ts.map

package/dist/collections/CollectionSectionHeader.js

@@ -0,0 +1,18 @@
+import { Text } from "../typography/Typography.js";
+import { jsx } from "react/jsx-runtime";
+// src/collections/CollectionSectionHeader.tsx
+function CollectionSectionHeader({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-base-300 bg-base-100/65 flex h-10 items-center border-b px-3",
+		role: "presentation",
+		children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			className: "shrink-0 tracking-[0.12em]",
+			variant: "overline",
+			children
+		})
+	});
+}
+export { CollectionSectionHeader };
+
+//# sourceMappingURL=CollectionSectionHeader.js.map

package/dist/collections/CollectionSectionHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionSectionHeader.js","names":[],"sources":["../../src/collections/CollectionSectionHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Text } from '../typography/Typography';\n\nexport function CollectionSectionHeader({ children }: { children: ReactNode }) {\n    return (\n        <div className=\"border-base-300 bg-base-100/65 flex h-10 items-center border-b px-3\" role=\"presentation\">\n            <Text as=\"span\" className=\"shrink-0 tracking-[0.12em]\" variant=\"overline\">\n                {children}\n            </Text>\n        </div>\n    );\n}\n"],"mappings":";;;AAIA,SAAgB,wBAAwB,EAAE,YAAqC;CAC3E,OACI,oBAAC,OAAD;EAAK,WAAU;EAAsE,MAAK;EACtF,UAAA,oBAAC,MAAD;GAAM,IAAG;GAAO,WAAU;GAA6B,SAAQ;GAC1D;EACC,CAAA;CACL,CAAA;AAEb"}

package/dist/collections/CollectionState.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+declare const variants: {
+  readonly page: {
+    readonly layout: 'max-w-lg px-6 py-16';
+    readonly icon: '[&>svg]:size-8';
+    readonly space: 'group';
+  };
+  /** A placeholder outlining the content that will fill the region. */
+  readonly framed: {
+    readonly layout: 'max-w-lg px-6 py-16';
+    readonly icon: '[&>svg]:size-8';
+    readonly space: 'group';
+  };
+  /** Fits inside a panel or popover instead of owning a page region. */
+  readonly compact: {
+    readonly layout: 'max-w-64 px-3 py-6';
+    readonly icon: '[&>svg]:size-6';
+    readonly space: 'related';
+  };
+  /** A quiet empty state with the same surface as dashboard content. */
+  readonly panel: {
+    readonly layout: 'max-w-md px-4 py-5';
+    readonly icon: '[&>svg]:size-6';
+    readonly space: 'related';
+  };
+};
+interface CollectionStateProps {
+  actionLabel?: string;
+  description: string;
+  icon?: ReactNode;
+  onAction?: () => void;
+  title: string;
+  variant?: keyof typeof variants;
+}
+export declare function CollectionState({ actionLabel, description, icon, onAction, title, variant }: CollectionStateProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=CollectionState.d.ts.map

package/dist/collections/CollectionState.js

@@ -0,0 +1,69 @@
+import { Button } from "../actions/Button.js";
+import { Stack } from "../layout/Flow.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/collections/CollectionState.tsx
+const page = {
+	layout: "max-w-lg px-6 py-16",
+	icon: "[&>svg]:size-8",
+	space: "group"
+};
+const variants = {
+	page,
+	/** A placeholder outlining the content that will fill the region. */
+	framed: page,
+	/** Fits inside a panel or popover instead of owning a page region. */
+	compact: {
+		layout: "max-w-64 px-3 py-6",
+		icon: "[&>svg]:size-6",
+		space: "related"
+	},
+	/** A quiet empty state with the same surface as dashboard content. */
+	panel: {
+		layout: "max-w-md px-4 py-5",
+		icon: "[&>svg]:size-6",
+		space: "related"
+	}
+};
+function CollectionState({ actionLabel, description, icon, onAction, title, variant = "page" }) {
+	const compact = variant === "compact" || variant === "panel";
+	const state = /* @__PURE__ */ jsxs(Stack, {
+		align: "center",
+		space: variants[variant].space,
+		className: `mx-auto text-center ${variants[variant].layout}`,
+		children: [
+			icon ? /* @__PURE__ */ jsx("span", {
+				className: `text-base-500 ${variants[variant].icon}`,
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsxs(Stack, {
+				space: "tight",
+				children: [compact ? /* @__PURE__ */ jsx(Text, {
+					variant: "label",
+					children: title
+				}) : /* @__PURE__ */ jsx(Heading, {
+					as: "h2",
+					variant: "subsection",
+					children: title
+				}), /* @__PURE__ */ jsx(Text, {
+					variant: compact ? "caption" : "description",
+					tone: "muted",
+					children: description
+				})]
+			}),
+			actionLabel && onAction ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				onClick: onAction,
+				variant: "secondary",
+				children: actionLabel
+			}) : null
+		]
+	});
+	return variant === "framed" || variant === "panel" ? /* @__PURE__ */ jsx("div", {
+		className: variant === "panel" ? "border-base-300 bg-base-100 rounded-xl border" : "border-base-300 rounded-xl border border-dashed",
+		children: state
+	}) : state;
+}
+export { CollectionState };
+
+//# sourceMappingURL=CollectionState.js.map

package/dist/collections/CollectionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionState.js","names":[],"sources":["../../src/collections/CollectionState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Button } from '../actions/Button';\nimport { Stack } from '../layout/Flow';\nimport { Heading, Text } from '../typography/Typography';\n\nconst page = { layout: 'max-w-lg px-6 py-16', icon: '[&>svg]:size-8', space: 'group' } as const;\nconst variants = {\n    page,\n    /** A placeholder outlining the content that will fill the region. */\n    framed: page,\n    /** Fits inside a panel or popover instead of owning a page region. */\n    compact: { layout: 'max-w-64 px-3 py-6', icon: '[&>svg]:size-6', space: 'related' },\n    /** A quiet empty state with the same surface as dashboard content. */\n    panel: { layout: 'max-w-md px-4 py-5', icon: '[&>svg]:size-6', space: 'related' },\n} as const;\n\ninterface CollectionStateProps {\n    actionLabel?: string;\n    description: string;\n    icon?: ReactNode;\n    onAction?: () => void;\n    title: string;\n    variant?: keyof typeof variants;\n}\n\nexport function CollectionState({\n    actionLabel,\n    description,\n    icon,\n    onAction,\n    title,\n    variant = 'page',\n}: CollectionStateProps) {\n    const compact = variant === 'compact' || variant === 'panel';\n    const state = (\n        <Stack\n            align=\"center\"\n            space={variants[variant].space}\n            className={`mx-auto text-center ${variants[variant].layout}`}\n        >\n            {icon ? <span className={`text-base-500 ${variants[variant].icon}`}>{icon}</span> : null}\n            <Stack space=\"tight\">\n                {compact ? (\n                    <Text variant=\"label\">{title}</Text>\n                ) : (\n                    <Heading as=\"h2\" variant=\"subsection\">\n                        {title}\n                    </Heading>\n                )}\n                <Text variant={compact ? 'caption' : 'description'} tone=\"muted\">\n                    {description}\n                </Text>\n            </Stack>\n            {actionLabel && onAction ? (\n                <Button type=\"button\" onClick={onAction} variant=\"secondary\">\n                    {actionLabel}\n                </Button>\n            ) : null}\n        </Stack>\n    );\n\n    return variant === 'framed' || variant === 'panel' ? (\n        <div\n            className={\n                variant === 'panel'\n                    ? 'border-base-300 bg-base-100 rounded-xl border'\n                    : 'border-base-300 rounded-xl border border-dashed'\n            }\n        >\n            {state}\n        </div>\n    ) : (\n        state\n    );\n}\n"],"mappings":";;;;;AAMA,MAAM,OAAO;CAAE,QAAQ;CAAuB,MAAM;CAAkB,OAAO;AAAQ;AACrF,MAAM,WAAW;CACb;;CAEA,QAAQ;;CAER,SAAS;EAAE,QAAQ;EAAsB,MAAM;EAAkB,OAAO;CAAU;;CAElF,OAAO;EAAE,QAAQ;EAAsB,MAAM;EAAkB,OAAO;CAAU;AACpF;AAWA,SAAgB,gBAAgB,EAC5B,aACA,aACA,MACA,UACA,OACA,UAAU,UACW;CACrB,MAAM,UAAU,YAAY,aAAa,YAAY;CACrD,MAAM,QACF,qBAAC,OAAD;EACI,OAAM;EACN,OAAO,SAAS,QAAQ,CAAC;EACzB,WAAW,uBAAuB,SAAS,QAAQ,CAAC;EAHxD,UAAA;GAKK,OAAO,oBAAC,QAAD;IAAM,WAAW,iBAAiB,SAAS,QAAQ,CAAC;IAAS,UAAA;GAAW,CAAA,IAAI;GACpF,qBAAC,OAAD;IAAO,OAAM;IAAb,UAAA,CACK,UACG,oBAAC,MAAD;KAAM,SAAQ;KAAS,UAAA;IAAY,CAAA,IAEnC,oBAAC,SAAD;KAAS,IAAG;KAAK,SAAQ;KACpB,UAAA;IACI,CAAA,GAEb,oBAAC,MAAD;KAAM,SAAS,UAAU,YAAY;KAAe,MAAK;KACpD,UAAA;IACC,CAAA,CACH;;GACN,eAAe,WACZ,oBAAC,QAAD;IAAQ,MAAK;IAAS,SAAS;IAAU,SAAQ;IAC5C,UAAA;GACG,CAAA,IACR;EACD;;CAGX,OAAO,YAAY,YAAY,YAAY,UACvC,oBAAC,OAAD;EACI,WACI,YAAY,UACN,kDACA;EAGT,UAAA;CACA,CAAA,IAEL;AAER"}

package/dist/collections/CollectionTokens.d.ts

@@ -0,0 +1,16 @@
+export declare const columnWidths: {
+  readonly primary: 'minmax(0, 2.5fr)';
+  readonly secondary: 'minmax(0, 1.5fr)';
+  readonly value: 'minmax(0, 1fr)';
+  readonly compact: '4rem';
+  readonly numeric: '5rem';
+  readonly index: '2.5rem';
+  readonly action: '1.5rem';
+  readonly wide: '14rem';
+};
+export declare const columnBreakpoints: {
+  readonly primary: 0;
+  readonly secondary: 640;
+  readonly tertiary: 900;
+};
+//# sourceMappingURL=CollectionTokens.d.ts.map

package/dist/collections/CollectionTokens.js

@@ -0,0 +1,19 @@
+// src/collections/CollectionTokens.ts
+const columnWidths = {
+	primary: "minmax(0, 2.5fr)",
+	secondary: "minmax(0, 1.5fr)",
+	value: "minmax(0, 1fr)",
+	compact: "4rem",
+	numeric: "5rem",
+	index: "2.5rem",
+	action: "1.5rem",
+	wide: "14rem"
+};
+const columnBreakpoints = {
+	primary: 0,
+	secondary: 640,
+	tertiary: 900
+};
+export { columnBreakpoints, columnWidths };
+
+//# sourceMappingURL=CollectionTokens.js.map

package/dist/collections/CollectionTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionTokens.js","names":[],"sources":["../../src/collections/CollectionTokens.ts"],"sourcesContent":["export const columnWidths = {\n    primary: 'minmax(0, 2.5fr)',\n    secondary: 'minmax(0, 1.5fr)',\n    value: 'minmax(0, 1fr)',\n    compact: '4rem',\n    numeric: '5rem',\n    index: '2.5rem',\n    action: '1.5rem',\n    wide: '14rem',\n} as const;\n\nexport const columnBreakpoints = { primary: 0, secondary: 640, tertiary: 900 } as const;\n"],"mappings":";AAAA,MAAa,eAAe;CACxB,SAAS;CACT,WAAW;CACX,OAAO;CACP,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,MAAM;AACV;AAEA,MAAa,oBAAoB;CAAE,SAAS;CAAG,WAAW;CAAK,UAAU;AAAI"}

package/dist/collections/CollectionViewport.js

@@ -0,0 +1,36 @@
+import { useLayoutEffect, useState } from "react";
+// src/collections/CollectionViewport.ts
+function useCollectionViewport() {
+	const [collectionElement, setCollectionElement] = useState(null);
+	const [geometry, setGeometry] = useState({
+		scrollMargin: 0,
+		width: 0
+	});
+	useLayoutEffect(() => {
+		if (!collectionElement) return;
+		const measure = () => {
+			const collection = collectionElement.getBoundingClientRect();
+			const next = {
+				scrollMargin: collection.top + window.scrollY,
+				width: collection.width
+			};
+			setGeometry((current) => current.width === next.width && current.scrollMargin === next.scrollMargin ? current : next);
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(collectionElement);
+		for (let ancestor = collectionElement.parentElement; ancestor; ancestor = ancestor.parentElement) observer.observe(ancestor);
+		window.addEventListener("resize", measure);
+		measure();
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", measure);
+		};
+	}, [collectionElement]);
+	return {
+		...geometry,
+		setCollectionElement
+	};
+}
+export { useCollectionViewport };
+
+//# sourceMappingURL=CollectionViewport.js.map

package/dist/collections/CollectionViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollectionViewport.js","names":[],"sources":["../../src/collections/CollectionViewport.ts"],"sourcesContent":["import { useLayoutEffect, useState } from 'react';\n\nexport function useCollectionViewport() {\n    const [collectionElement, setCollectionElement] = useState<HTMLDivElement | null>(null);\n    const [geometry, setGeometry] = useState({ scrollMargin: 0, width: 0 });\n\n    useLayoutEffect(() => {\n        if (!collectionElement) return;\n\n        const measure = () => {\n            const collection = collectionElement.getBoundingClientRect();\n            const next = {\n                scrollMargin: collection.top + window.scrollY,\n                width: collection.width,\n            };\n\n            setGeometry((current) =>\n                current.width === next.width && current.scrollMargin === next.scrollMargin ? current : next,\n            );\n        };\n        const observer = new ResizeObserver(measure);\n\n        observer.observe(collectionElement);\n\n        // Ancestor sizes can move the collection without changing its own size.\n        for (let ancestor = collectionElement.parentElement; ancestor; ancestor = ancestor.parentElement) {\n            observer.observe(ancestor);\n        }\n\n        window.addEventListener('resize', measure);\n        measure();\n\n        return () => {\n            observer.disconnect();\n            window.removeEventListener('resize', measure);\n        };\n    }, [collectionElement]);\n\n    return { ...geometry, setCollectionElement };\n}\n"],"mappings":";;AAEA,SAAgB,wBAAwB;CACpC,MAAM,CAAC,mBAAmB,wBAAwB,SAAgC,IAAI;CACtF,MAAM,CAAC,UAAU,eAAe,SAAS;EAAE,cAAc;EAAG,OAAO;CAAE,CAAC;CAEtE,sBAAsB;EAClB,IAAI,CAAC,mBAAmB;EAExB,MAAM,gBAAgB;GAClB,MAAM,aAAa,kBAAkB,sBAAsB;GAC3D,MAAM,OAAO;IACT,cAAc,WAAW,MAAM,OAAO;IACtC,OAAO,WAAW;GACtB;GAEA,aAAa,YACT,QAAQ,UAAU,KAAK,SAAS,QAAQ,iBAAiB,KAAK,eAAe,UAAU,IAC3F;EACJ;EACA,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,SAAS,QAAQ,iBAAiB;EAGlC,KAAK,IAAI,WAAW,kBAAkB,eAAe,UAAU,WAAW,SAAS,eAC/E,SAAS,QAAQ,QAAQ;EAG7B,OAAO,iBAAiB,UAAU,OAAO;EACzC,QAAQ;EAER,aAAa;GACT,SAAS,WAAW;GACpB,OAAO,oBAAoB,UAAU,OAAO;EAChD;CACJ,GAAG,CAAC,iBAAiB,CAAC;CAEtB,OAAO;EAAE,GAAG;EAAU;CAAqB;AAC/C"}

package/dist/collections/DataRow.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+declare function DataRowRoot({ children, interactive, rowIndex }: {
+  children: ReactNode;
+  interactive?: boolean;
+  rowIndex: number;
+}): import("react").JSX.Element;
+type DataRowPrimaryProps = {
+  artwork?: ReactNode;
+  detail?: ReactNode;
+  loading?: false;
+  subtitle?: ReactNode;
+  title: string;
+} | {
+  artwork?: boolean;
+  loading: true;
+  subtitle?: boolean;
+};
+declare function DataRowPrimary(props: DataRowPrimaryProps): import("react").JSX.Element;
+export declare const DataRow: typeof DataRowRoot & {
+  Primary: typeof DataRowPrimary;
+};
+export {};
+//# sourceMappingURL=DataRow.d.ts.map