@lar-works/design-system 0.2.1 → 0.3.0

package/dist/overlays/Drawer.js

@@ -3,8 +3,8 @@ import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
 import { Heading, Text } from "../typography/Typography.js";
 import { useModalAutoFocus } from "./useModalAutoFocus.js";
 import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@ninna-ui/overlays";
 // src/overlays/Drawer.tsx
 function DrawerRoot(props) {

package/dist/overlays/DropdownMenu.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { DropdownMenu, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps } from "@ninna-ui/overlays";
 interface DropdownMenuContentPolicyProps extends Omit<DropdownMenuContentProps, 'className'> {
   width?: 'sm' | 'md';
@@ -16,6 +16,11 @@ interface DropdownMenuRadioGroupPolicyProps extends Omit<DropdownMenuRadioGroupP
 interface DropdownMenuRadioItemPolicyProps extends Omit<DropdownMenuRadioItemProps, 'className'> {
   presentation?: 'default' | 'segmented';
 }
+/** An entry's label, truncating to the menu's width, with an optional smaller `detail` line under it. */
+declare function DropdownMenuItemText({ children, detail }: {
+  children: ReactNode;
+  detail?: ReactNode;
+}): import("react").JSX.Element;
 declare function DropdownMenuRoot(props: ComponentProps<typeof DropdownMenu>): import("react").JSX.Element;
 declare const DropdownMenu$1: typeof DropdownMenuRoot & {
   ({ children, open, defaultOpen, onOpenChange, modal, dir }: import("@ninna-ui/overlays").DropdownMenuProps): import("react").JSX.Element;
@@ -42,6 +47,7 @@ declare const DropdownMenu$1: typeof DropdownMenuRoot & {
   Label: import("react").ForwardRefExoticComponent<DropdownMenuLabelPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
   RadioGroup: import("react").ForwardRefExoticComponent<DropdownMenuRadioGroupPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
   RadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemPolicyProps & import("react").RefAttributes<HTMLDivElement>>;
+  ItemText: typeof DropdownMenuItemText;
 };
 export { DropdownMenu$1 as DropdownMenu };
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/overlays/DropdownMenu.js

@@ -1,5 +1,5 @@
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { DropdownMenu } from "@ninna-ui/overlays";
 // src/overlays/DropdownMenu.tsx
 const contentWidthClasses = {
@@ -43,6 +43,16 @@ const DropdownMenuRadioItem = forwardRef(({ onSelect, presentation = "default",
 	className: presentation === "segmented" ? "text-base-600 focus:bg-base-300 focus:text-base-content data-[state=checked]:bg-base-100 data-[state=checked]:text-base-content size-7 justify-center rounded-md p-0 data-[state=checked]:shadow-sm [&>span]:hidden [&>svg]:size-4" : "max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0"
 }));
 DropdownMenuRadioItem.displayName = "DropdownMenu.RadioItem";
+/** An entry's label, truncating to the menu's width, with an optional smaller `detail` line under it. */
+function DropdownMenuItemText({ children, detail }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "min-w-0 flex-1 truncate",
+		children: [children, detail && /* @__PURE__ */ jsx("span", {
+			className: "block truncate text-xs",
+			children: detail
+		})]
+	});
+}
 function DropdownMenuRoot(props) {
 	return /* @__PURE__ */ jsx(DropdownMenu, { ...props });
 }
@@ -51,7 +61,8 @@ const DropdownMenu$1 = Object.assign(DropdownMenuRoot, DropdownMenu, {
 	Item: DropdownMenuItem,
 	Label: DropdownMenuLabel,
 	RadioGroup: DropdownMenuRadioGroup,
-	RadioItem: DropdownMenuRadioItem
+	RadioItem: DropdownMenuRadioItem,
+	ItemText: DropdownMenuItemText
 });
 export { DropdownMenu$1 as DropdownMenu };
 

package/dist/overlays/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":["NinnaDropdownMenu","DropdownMenu"],"sources":["../../src/overlays/DropdownMenu.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through DropdownMenu. */\n\nimport {\n    DropdownMenu as NinnaDropdownMenu,\n    type DropdownMenuContentProps,\n    type DropdownMenuItemProps,\n    type DropdownMenuLabelProps,\n    type DropdownMenuRadioGroupProps,\n    type DropdownMenuRadioItemProps,\n} from '@ninna-ui/overlays';\nimport { type ComponentProps, forwardRef } from 'react';\n\ninterface DropdownMenuContentPolicyProps extends Omit<DropdownMenuContentProps, 'className'> {\n    width?: 'sm' | 'md';\n}\n\nconst contentWidthClasses: Record<NonNullable<DropdownMenuContentPolicyProps['width']>, string> = {\n    sm: 'w-60',\n    md: 'w-64',\n};\n\nconst DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentPolicyProps>(\n    ({ side = 'bottom', sideOffset = 8, width = 'sm', ...props }, ref) => (\n        <NinnaDropdownMenu.Content\n            ref={ref}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n            className={`${contentWidthClasses[width]} max-h-(--radix-dropdown-menu-content-available-height) max-w-[calc(100vw-2rem)] overflow-y-auto`}\n        />\n    ),\n);\n\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ninterface DropdownMenuLabelPolicyProps extends Omit<DropdownMenuLabelProps, 'className'> {\n    presentation?: 'section' | 'identity';\n}\n\nconst DropdownMenuLabel = forwardRef<HTMLDivElement, DropdownMenuLabelPolicyProps>(\n    ({ presentation = 'section', ...props }, ref) => (\n        <NinnaDropdownMenu.Label\n            ref={ref}\n            {...props}\n            className={presentation === 'identity' ? 'tracking-normal normal-case' : undefined}\n        />\n    ),\n);\n\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ninterface DropdownMenuItemPolicyProps extends Omit<DropdownMenuItemProps, 'className'> {\n    /** Forward the underlying menu item's behavior to a link without a second tab stop. */\n    asChild?: boolean;\n}\n\nconst DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemPolicyProps>((props, ref) => (\n    <NinnaDropdownMenu.Item\n        ref={ref}\n        {...props}\n        className=\"aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0\"\n    />\n));\n\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ninterface DropdownMenuRadioGroupPolicyProps extends Omit<DropdownMenuRadioGroupProps, 'className'> {\n    presentation?: 'default' | 'segmented';\n}\n\nconst DropdownMenuRadioGroup = forwardRef<HTMLDivElement, DropdownMenuRadioGroupPolicyProps>(\n    ({ presentation = 'default', ...props }, ref) => (\n        <NinnaDropdownMenu.RadioGroup\n            ref={ref}\n            {...props}\n            className={presentation === 'segmented' ? 'bg-base-200/70 flex gap-0.5 rounded-lg p-0.5' : undefined}\n        />\n    ),\n);\n\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ninterface DropdownMenuRadioItemPolicyProps extends Omit<DropdownMenuRadioItemProps, 'className'> {\n    presentation?: 'default' | 'segmented';\n}\n\nconst DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemPolicyProps>(\n    ({ onSelect, presentation = 'default', ...props }, ref) => (\n        <NinnaDropdownMenu.RadioItem\n            ref={ref}\n            {...props}\n            data-presentation={presentation}\n            onSelect={\n                presentation === 'segmented'\n                    ? (event) => {\n                          event.preventDefault();\n                          onSelect?.(event);\n                      }\n                    : onSelect\n            }\n            className={\n                presentation === 'segmented'\n                    ? 'text-base-600 focus:bg-base-300 focus:text-base-content data-[state=checked]:bg-base-100 data-[state=checked]:text-base-content size-7 justify-center rounded-md p-0 data-[state=checked]:shadow-sm [&>span]:hidden [&>svg]:size-4'\n                    : 'max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0'\n            }\n        />\n    ),\n);\n\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\nfunction DropdownMenuRoot(props: ComponentProps<typeof NinnaDropdownMenu>) {\n    return <NinnaDropdownMenu {...props} />;\n}\n\nexport const DropdownMenu = Object.assign(DropdownMenuRoot, NinnaDropdownMenu, {\n    Content: DropdownMenuContent,\n    Item: DropdownMenuItem,\n    Label: DropdownMenuLabel,\n    RadioGroup: DropdownMenuRadioGroup,\n    RadioItem: DropdownMenuRadioItem,\n});\n"],"mappings":";;;;AAgBA,MAAM,sBAA4F;CAC9F,IAAI;CACJ,IAAI;AACR;AAEA,MAAM,sBAAsB,YACvB,EAAE,OAAO,UAAU,aAAa,GAAG,QAAQ,MAAM,GAAG,SAAS,QAC1D,oBAACA,aAAkB,SAAnB;CACS;CACC;CACM;CACZ,GAAI;CACJ,WAAW,GAAG,oBAAoB,OAAO;AAC5C,CAAA,CAET;AAEA,oBAAoB,cAAc;AAMlC,MAAM,oBAAoB,YACrB,EAAE,eAAe,WAAW,GAAG,SAAS,QACrC,oBAACA,aAAkB,OAAnB;CACS;CACL,GAAI;CACJ,WAAW,iBAAiB,aAAa,gCAAgC,KAAA;AAC5E,CAAA,CAET;AAEA,kBAAkB,cAAc;AAOhC,MAAM,mBAAmB,YAAyD,OAAO,QACrF,oBAACA,aAAkB,MAAnB;CACS;CACL,GAAI;CACJ,WAAU;AACb,CAAA,CACJ;AAED,iBAAiB,cAAc;AAM/B,MAAM,yBAAyB,YAC1B,EAAE,eAAe,WAAW,GAAG,SAAS,QACrC,oBAACA,aAAkB,YAAnB;CACS;CACL,GAAI;CACJ,WAAW,iBAAiB,cAAc,iDAAiD,KAAA;AAC9F,CAAA,CAET;AAEA,uBAAuB,cAAc;AAMrC,MAAM,wBAAwB,YACzB,EAAE,UAAU,eAAe,WAAW,GAAG,SAAS,QAC/C,oBAACA,aAAkB,WAAnB;CACS;CACL,GAAI;CACJ,qBAAmB;CACnB,UACI,iBAAiB,eACV,UAAU;EACP,MAAM,eAAe;EACrB,WAAW,KAAK;CACpB,IACA;CAEV,WACI,iBAAiB,cACX,uOACA;AAEb,CAAA,CAET;AAEA,sBAAsB,cAAc;AAEpC,SAAS,iBAAiB,OAAiD;CACvE,OAAO,oBAACA,cAAD,EAAmB,GAAI,MAAQ,CAAA;AAC1C;AAEA,MAAaC,iBAAe,OAAO,OAAO,kBAAkBD,cAAmB;CAC3E,SAAS;CACT,MAAM;CACN,OAAO;CACP,YAAY;CACZ,WAAW;AACf,CAAC"}
+{"version":3,"file":"DropdownMenu.js","names":["NinnaDropdownMenu","DropdownMenu"],"sources":["../../src/overlays/DropdownMenu.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through DropdownMenu. */\n\nimport {\n    DropdownMenu as NinnaDropdownMenu,\n    type DropdownMenuContentProps,\n    type DropdownMenuItemProps,\n    type DropdownMenuLabelProps,\n    type DropdownMenuRadioGroupProps,\n    type DropdownMenuRadioItemProps,\n} from '@ninna-ui/overlays';\nimport { type ComponentProps, forwardRef, type ReactNode } from 'react';\n\ninterface DropdownMenuContentPolicyProps extends Omit<DropdownMenuContentProps, 'className'> {\n    width?: 'sm' | 'md';\n}\n\nconst contentWidthClasses: Record<NonNullable<DropdownMenuContentPolicyProps['width']>, string> = {\n    sm: 'w-60',\n    md: 'w-64',\n};\n\nconst DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentPolicyProps>(\n    ({ side = 'bottom', sideOffset = 8, width = 'sm', ...props }, ref) => (\n        <NinnaDropdownMenu.Content\n            ref={ref}\n            side={side}\n            sideOffset={sideOffset}\n            {...props}\n            className={`${contentWidthClasses[width]} max-h-(--radix-dropdown-menu-content-available-height) max-w-[calc(100vw-2rem)] overflow-y-auto`}\n        />\n    ),\n);\n\nDropdownMenuContent.displayName = 'DropdownMenu.Content';\n\ninterface DropdownMenuLabelPolicyProps extends Omit<DropdownMenuLabelProps, 'className'> {\n    presentation?: 'section' | 'identity';\n}\n\nconst DropdownMenuLabel = forwardRef<HTMLDivElement, DropdownMenuLabelPolicyProps>(\n    ({ presentation = 'section', ...props }, ref) => (\n        <NinnaDropdownMenu.Label\n            ref={ref}\n            {...props}\n            className={presentation === 'identity' ? 'tracking-normal normal-case' : undefined}\n        />\n    ),\n);\n\nDropdownMenuLabel.displayName = 'DropdownMenu.Label';\n\ninterface DropdownMenuItemPolicyProps extends Omit<DropdownMenuItemProps, 'className'> {\n    /** Forward the underlying menu item's behavior to a link without a second tab stop. */\n    asChild?: boolean;\n}\n\nconst DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemPolicyProps>((props, ref) => (\n    <NinnaDropdownMenu.Item\n        ref={ref}\n        {...props}\n        className=\"aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0\"\n    />\n));\n\nDropdownMenuItem.displayName = 'DropdownMenu.Item';\n\ninterface DropdownMenuRadioGroupPolicyProps extends Omit<DropdownMenuRadioGroupProps, 'className'> {\n    presentation?: 'default' | 'segmented';\n}\n\nconst DropdownMenuRadioGroup = forwardRef<HTMLDivElement, DropdownMenuRadioGroupPolicyProps>(\n    ({ presentation = 'default', ...props }, ref) => (\n        <NinnaDropdownMenu.RadioGroup\n            ref={ref}\n            {...props}\n            className={presentation === 'segmented' ? 'bg-base-200/70 flex gap-0.5 rounded-lg p-0.5' : undefined}\n        />\n    ),\n);\n\nDropdownMenuRadioGroup.displayName = 'DropdownMenu.RadioGroup';\n\ninterface DropdownMenuRadioItemPolicyProps extends Omit<DropdownMenuRadioItemProps, 'className'> {\n    presentation?: 'default' | 'segmented';\n}\n\nconst DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemPolicyProps>(\n    ({ onSelect, presentation = 'default', ...props }, ref) => (\n        <NinnaDropdownMenu.RadioItem\n            ref={ref}\n            {...props}\n            data-presentation={presentation}\n            onSelect={\n                presentation === 'segmented'\n                    ? (event) => {\n                          event.preventDefault();\n                          onSelect?.(event);\n                      }\n                    : onSelect\n            }\n            className={\n                presentation === 'segmented'\n                    ? 'text-base-600 focus:bg-base-300 focus:text-base-content data-[state=checked]:bg-base-100 data-[state=checked]:text-base-content size-7 justify-center rounded-md p-0 data-[state=checked]:shadow-sm [&>span]:hidden [&>svg]:size-4'\n                    : 'max-lg:min-h-11 pointer-coarse:min-h-11 [&>svg]:size-4 [&>svg]:shrink-0'\n            }\n        />\n    ),\n);\n\nDropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';\n\n/** An entry's label, truncating to the menu's width, with an optional smaller `detail` line under it. */\nfunction DropdownMenuItemText({ children, detail }: { children: ReactNode; detail?: ReactNode }) {\n    return (\n        <span className=\"min-w-0 flex-1 truncate\">\n            {children}\n            {detail && <span className=\"block truncate text-xs\">{detail}</span>}\n        </span>\n    );\n}\n\nfunction DropdownMenuRoot(props: ComponentProps<typeof NinnaDropdownMenu>) {\n    return <NinnaDropdownMenu {...props} />;\n}\n\nexport const DropdownMenu = Object.assign(DropdownMenuRoot, NinnaDropdownMenu, {\n    Content: DropdownMenuContent,\n    Item: DropdownMenuItem,\n    Label: DropdownMenuLabel,\n    RadioGroup: DropdownMenuRadioGroup,\n    RadioItem: DropdownMenuRadioItem,\n    ItemText: DropdownMenuItemText,\n});\n"],"mappings":";;;;AAgBA,MAAM,sBAA4F;CAC9F,IAAI;CACJ,IAAI;AACR;AAEA,MAAM,sBAAsB,YACvB,EAAE,OAAO,UAAU,aAAa,GAAG,QAAQ,MAAM,GAAG,SAAS,QAC1D,oBAACA,aAAkB,SAAnB;CACS;CACC;CACM;CACZ,GAAI;CACJ,WAAW,GAAG,oBAAoB,OAAO;AAC5C,CAAA,CAET;AAEA,oBAAoB,cAAc;AAMlC,MAAM,oBAAoB,YACrB,EAAE,eAAe,WAAW,GAAG,SAAS,QACrC,oBAACA,aAAkB,OAAnB;CACS;CACL,GAAI;CACJ,WAAW,iBAAiB,aAAa,gCAAgC,KAAA;AAC5E,CAAA,CAET;AAEA,kBAAkB,cAAc;AAOhC,MAAM,mBAAmB,YAAyD,OAAO,QACrF,oBAACA,aAAkB,MAAnB;CACS;CACL,GAAI;CACJ,WAAU;AACb,CAAA,CACJ;AAED,iBAAiB,cAAc;AAM/B,MAAM,yBAAyB,YAC1B,EAAE,eAAe,WAAW,GAAG,SAAS,QACrC,oBAACA,aAAkB,YAAnB;CACS;CACL,GAAI;CACJ,WAAW,iBAAiB,cAAc,iDAAiD,KAAA;AAC9F,CAAA,CAET;AAEA,uBAAuB,cAAc;AAMrC,MAAM,wBAAwB,YACzB,EAAE,UAAU,eAAe,WAAW,GAAG,SAAS,QAC/C,oBAACA,aAAkB,WAAnB;CACS;CACL,GAAI;CACJ,qBAAmB;CACnB,UACI,iBAAiB,eACV,UAAU;EACP,MAAM,eAAe;EACrB,WAAW,KAAK;CACpB,IACA;CAEV,WACI,iBAAiB,cACX,uOACA;AAEb,CAAA,CAET;AAEA,sBAAsB,cAAc;;AAGpC,SAAS,qBAAqB,EAAE,UAAU,UAAuD;CAC7F,OACI,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACK,UACA,UAAU,oBAAC,QAAD;GAAM,WAAU;GAA0B,UAAA;EAAa,CAAA,CAChE;;AAEd;AAEA,SAAS,iBAAiB,OAAiD;CACvE,OAAO,oBAACA,cAAD,EAAmB,GAAI,MAAQ,CAAA;AAC1C;AAEA,MAAaC,iBAAe,OAAO,OAAO,kBAAkBD,cAAmB;CAC3E,SAAS;CACT,MAAM;CACN,OAAO;CACP,YAAY;CACZ,WAAW;CACX,UAAU;AACd,CAAC"}

package/dist/overlays/HelpTip.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+/** A small help button after a setting's name that opens what the setting does in a popover. `label` is what it
+ *  explains; the button reads "About {label}". */
+export declare function HelpTip({ label, children }: {
+  label: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HelpTip.d.ts.map

package/dist/overlays/HelpTip.js

@@ -0,0 +1,29 @@
+import { tabbable } from "../foundations/KeyboardFocus.js";
+import { Popover } from "./Popover.js";
+import { CircleHelpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/overlays/HelpTip.tsx
+/** A small help button after a setting's name that opens what the setting does in a popover. `label` is what it
+*  explains; the button reads "About {label}". */
+function HelpTip({ label, children }) {
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx("button", {
+			...tabbable,
+			type: "button",
+			"aria-label": `About ${label}`,
+			className: "text-base-700 hover:text-base-content inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full",
+			children: /* @__PURE__ */ jsx(CircleHelpIcon, { className: "size-3.5" })
+		})
+	}), /* @__PURE__ */ jsx(Popover.Content, {
+		width: "sm",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-w-full text-xs leading-5 wrap-anywhere",
+			"data-help-text": true,
+			children
+		})
+	})] });
+}
+export { HelpTip };
+
+//# sourceMappingURL=HelpTip.js.map

package/dist/overlays/HelpTip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HelpTip.js","names":[],"sources":["../../src/overlays/HelpTip.tsx"],"sourcesContent":["import { CircleHelpIcon } from 'lucide-react';\nimport type { ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\nimport { Popover } from './Popover';\n\n/** A small help button after a setting's name that opens what the setting does in a popover. `label` is what it\n *  explains; the button reads \"About {label}\". */\nexport function HelpTip({ label, children }: { label: string; children: ReactNode }) {\n    return (\n        <Popover>\n            <Popover.Trigger asChild>\n                <button\n                    {...tabbable}\n                    type=\"button\"\n                    aria-label={`About ${label}`}\n                    className=\"text-base-700 hover:text-base-content inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full\"\n                >\n                    <CircleHelpIcon className=\"size-3.5\" />\n                </button>\n            </Popover.Trigger>\n            <Popover.Content width=\"sm\">\n                <div className=\"max-w-full text-xs leading-5 wrap-anywhere\" data-help-text>\n                    {children}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,QAAQ,EAAE,OAAO,YAAoD;CACjF,OACI,qBAAC,SAAD,EAAA,UAAA,CACI,oBAAC,QAAQ,SAAT;EAAiB,SAAA;EACb,UAAA,oBAAC,UAAD;GACI,GAAI;GACJ,MAAK;GACL,cAAY,SAAS;GACrB,WAAU;GAEV,UAAA,oBAAC,gBAAD,EAAgB,WAAU,WAAY,CAAA;EAClC,CAAA;CACK,CAAA,GACjB,oBAAC,QAAQ,SAAT;EAAiB,OAAM;EACnB,UAAA,oBAAC,OAAD;GAAK,WAAU;GAA6C,kBAAA;GACvD;EACA,CAAA;CACQ,CAAA,CACZ,EAAA,CAAA;AAEjB"}

package/dist/overlays/ImageViewer.js

@@ -3,9 +3,9 @@ import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
 import { Text } from "../typography/Typography.js";
 import { useModalAutoFocus } from "./useModalAutoFocus.js";
 import { useId, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { XIcon } from "lucide-react";
 import { Loading } from "@ninna-ui/feedback";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Modal } from "@ninna-ui/overlays";
 // src/overlays/ImageViewer.tsx
 /**

package/dist/overlays/Modal.d.ts

@@ -8,6 +8,11 @@ interface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' |
   sidebar?: ReactNode;
   /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */
   presentation?: 'default' | 'paned' | 'workspace';
+  /** Grows the dialog to the window, less a small margin, under a 52px title bar; see ModalExpandButton. */
+  expanded?: boolean;
+  /** A paned dialog that keeps its width but takes its content's height, such as a short pane; a long list in it
+   *  scrolls inside. Expanding wins. */
+  fitsContent?: boolean;
   title: string;
 }
 declare function ModalForm(props: Omit<ComponentProps<'form'>, 'className'>): import("react").JSX.Element;

package/dist/overlays/Modal.js

@@ -4,18 +4,33 @@ import { Heading, Text } from "../typography/Typography.js";
 import { useModalAutoFocus } from "./useModalAutoFocus.js";
 import { useScrollFade } from "./useScrollFade.js";
 import { createContext, forwardRef, useCallback, useContext } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Modal } from "@ninna-ui/overlays";
 // src/overlays/Modal.tsx
 const ModalLoadingContext = createContext(false);
-const ModalContent = forwardRef(({ accessibleTitle, children, closeOnEscape, closeOnOverlayClick, description, focusFirstField, headerActions, onPointerDownOutside, sidebar, presentation = sidebar ? "paned" : "default", title, ...props }, ref) => {
+/** The expanded dialog's size, inline so it wins over every presentation's size classes. */
+const expandedStyle = {
+	width: "calc(100vw - 2rem)",
+	maxWidth: "none",
+	height: "calc(100dvh - (52px + 1rem))",
+	maxHeight: "none",
+	top: "52px",
+	translate: "-50% 0"
+};
+/** A dialog that takes its content's height, inline so it wins over the paned size classes. */
+const fitsContentStyle = { height: "auto" };
+const ModalContent = forwardRef(({ accessibleTitle, children, closeOnEscape, closeOnOverlayClick, description, focusFirstField, headerActions, onPointerDownOutside, sidebar, presentation = sidebar ? "paned" : "default", expanded = false, fitsContent = false, title, ...props }, ref) => {
 	const loading = useContext(ModalLoadingContext);
 	const focusProps = useModalAutoFocus(focusFirstField);
 	return /* @__PURE__ */ jsxs(Modal.Content, {
 		ref,
 		...props,
 		...focusProps,
+		...expanded ? {
+			"data-expanded": true,
+			style: expandedStyle
+		} : fitsContent && { style: fitsContentStyle },
 		title: accessibleTitle ?? title,
 		description,
 		closeOnEscape: loading ? false : closeOnEscape,

package/dist/overlays/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["NinnaModal","Modal"],"sources":["../../src/overlays/Modal.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Modal. */\n\nimport {\n    Modal as NinnaModal,\n    type ModalBodyProps,\n    type ModalContentProps,\n    type ModalFooterProps,\n} from '@ninna-ui/overlays';\nimport { XIcon } from 'lucide-react';\nimport {\n    type ComponentProps,\n    createContext,\n    forwardRef,\n    type ReactNode,\n    type Ref,\n    useCallback,\n    useContext,\n} from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Heading, Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\nimport { useScrollFade } from './useScrollFade';\n\nconst ModalLoadingContext = createContext(false);\n\ninterface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' | 'size' | 'title'> {\n    accessibleTitle?: string;\n    /** Whether opening focuses the first editable field; off while the caller focuses something else. */\n    focusFirstField?: boolean;\n    headerActions?: ReactNode;\n    sidebar?: ReactNode;\n    /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */\n    presentation?: 'default' | 'paned' | 'workspace';\n    title: string;\n}\n\nconst ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(\n    (\n        {\n            accessibleTitle,\n            children,\n            closeOnEscape,\n            closeOnOverlayClick,\n            description,\n            focusFirstField,\n            headerActions,\n            onPointerDownOutside,\n            sidebar,\n            presentation = sidebar ? 'paned' : 'default',\n            title,\n            ...props\n        },\n        ref,\n    ) => {\n        const loading = useContext(ModalLoadingContext);\n        const focusProps = useModalAutoFocus(focusFirstField);\n\n        return (\n            <NinnaModal.Content\n                ref={ref}\n                {...props}\n                {...focusProps}\n                title={accessibleTitle ?? title}\n                description={description}\n                closeOnEscape={loading ? false : closeOnEscape}\n                closeOnOverlayClick={loading ? false : closeOnOverlayClick}\n                onPointerDownOutside={(event) => {\n                    if (event.target instanceof Element && event.target.closest('[data-slot=\"toaster\"]')) {\n                        event.preventDefault();\n                    }\n\n                    onPointerDownOutside?.(event);\n                }}\n                size={presentation === 'workspace' ? 'full' : undefined}\n                className={`flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] flex-col overflow-hidden sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] ${\n                    sidebar ? 'md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:grid-rows-[auto_minmax(0,1fr)]' : ''\n                } ${\n                    presentation === 'workspace'\n                        ? 'h-[calc(100dvh-1rem)] max-w-6xl sm:h-[calc(100dvh-2rem)] sm:max-w-6xl'\n                        : presentation === 'paned'\n                          ? // Paned dialogs keep one height across panes; the body scrolls instead of the dialog resizing.\n                            'h-[calc(100dvh-1rem)] max-w-4xl sm:h-[min(44rem,calc(100dvh-2rem))] sm:max-w-4xl'\n                          : 'max-w-160 sm:max-w-160'\n                }`}\n            >\n                <header\n                    data-slot=\"modal-header\"\n                    className={`@container min-w-0 shrink-0 px-5 pt-5 sm:px-6 sm:pt-6 ${\n                        description ? (sidebar ? 'pb-4 md:pb-0' : '') : 'pb-4'\n                    } ${sidebar ? 'md:col-start-2 md:row-start-1' : ''}`}\n                >\n                    <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3\">\n                        <Heading as=\"h2\" className=\"min-w-0 flex-1 wrap-break-word\" variant=\"section\">\n                            {title}\n                        </Heading>\n                        {headerActions ? (\n                            <div className=\"order-3 flex basis-full items-center justify-end gap-2 @min-[32rem]:order-0 @min-[32rem]:ml-auto @min-[32rem]:basis-auto\">\n                                {headerActions}\n                            </div>\n                        ) : null}\n                        <div className=\"shrink-0\">\n                            <ModalClose />\n                        </div>\n                    </div>\n                </header>\n                {sidebar ? (\n                    <div className=\"min-h-0 min-w-0 shrink-0 md:col-start-1 md:row-span-2 md:row-start-1\">\n                        {sidebar}\n                    </div>\n                ) : null}\n                <div\n                    className={`flex min-h-0 min-w-0 flex-1 flex-col ${sidebar ? 'md:col-start-2 md:row-start-2' : ''}`}\n                >\n                    {description ? (\n                        <Text\n                            className={`shrink-0 px-5 pb-4 sm:px-6 ${sidebar ? 'pt-4 md:pt-2' : 'pt-2'}`}\n                            tone=\"muted\"\n                        >\n                            {description}\n                        </Text>\n                    ) : null}\n                    {children}\n                </div>\n            </NinnaModal.Content>\n        );\n    },\n);\n\nModalContent.displayName = 'Modal.Content';\n\nconst ModalBody = forwardRef<HTMLDivElement, Omit<ModalBodyProps, 'className'> & { layout?: 'scroll' | 'fill' }>(\n    ({ layout = 'scroll', children, ...props }, ref: Ref<HTMLDivElement>) => {\n        const { setViewport, setContent, className } = useScrollFade();\n        const bodyRef = useCallback(\n            (element: HTMLDivElement) => {\n                setViewport(element);\n\n                const cleanup = typeof ref === 'function' ? ref(element) : undefined;\n\n                if (ref && typeof ref !== 'function') ref.current = element;\n\n                return () => {\n                    setViewport(null);\n\n                    if (typeof cleanup === 'function') cleanup();\n                    else if (typeof ref === 'function') ref(null);\n                    else if (ref) ref.current = null;\n                };\n            },\n            [ref, setViewport],\n        );\n\n        return (\n            <NinnaModal.Body\n                ref={bodyRef}\n                {...props}\n                className={`min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-6 sm:px-6 ${layout === 'fill' ? 'flex flex-col' : ''} ${className}`}\n            >\n                <div\n                    ref={setContent}\n                    className={layout === 'fill' ? 'flex min-h-0 flex-1 flex-col gap-3' : 'flow-root'}\n                >\n                    {children}\n                </div>\n            </NinnaModal.Body>\n        );\n    },\n);\n\nModalBody.displayName = 'Modal.Body';\n\nfunction ModalForm(props: Omit<ComponentProps<'form'>, 'className'>) {\n    return <form {...props} className=\"flex min-h-0 flex-1 flex-col\" />;\n}\n\nfunction ModalPane({ active, children }: { active: boolean; children: ReactNode }) {\n    return (\n        <div hidden={!active} className={active ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>\n            {children}\n        </div>\n    );\n}\n\nconst ModalFooter = forwardRef<HTMLDivElement, Omit<ModalFooterProps, 'className'> & { leading?: ReactNode }>(\n    ({ leading, children, ...props }, ref) => (\n        <NinnaModal.Footer\n            ref={ref}\n            {...props}\n            className=\"border-base-300 bg-base-50/60 shrink-0 border-t px-5 py-4 sm:px-6 sm:pb-4\"\n        >\n            {leading ? <div className=\"mr-auto min-w-0 basis-full pb-2 sm:basis-auto sm:pb-0\">{leading}</div> : null}\n            {children}\n        </NinnaModal.Footer>\n    ),\n);\n\nModalFooter.displayName = 'Modal.Footer';\n\nfunction ModalClose() {\n    const labels = useDesignSystemLabels();\n    const loading = useContext(ModalLoadingContext);\n\n    return (\n        <NinnaModal.Close asChild>\n            <IconButton aria-label={labels.close} disabled={loading} icon={<XIcon />} variant=\"header\" />\n        </NinnaModal.Close>\n    );\n}\n\ninterface ModalRootPolicyProps {\n    children: ReactNode;\n    loading?: boolean;\n    onClose: () => void;\n}\n\nfunction ModalRoot({ children, loading = false, onClose }: ModalRootPolicyProps) {\n    return (\n        <ModalLoadingContext.Provider value={loading}>\n            <NinnaModal open onOpenChange={(open) => !open && !loading && onClose()}>\n                {children}\n            </NinnaModal>\n        </ModalLoadingContext.Provider>\n    );\n}\n\nexport const Modal = Object.assign(ModalRoot, {\n    Body: ModalBody,\n    Form: ModalForm,\n    Pane: ModalPane,\n    Content: ModalContent,\n    Footer: ModalFooter,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["NinnaModal","Modal"],"sources":["../../src/overlays/Modal.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Modal. */\n\nimport {\n    Modal as NinnaModal,\n    type ModalBodyProps,\n    type ModalContentProps,\n    type ModalFooterProps,\n} from '@ninna-ui/overlays';\nimport { XIcon } from 'lucide-react';\nimport {\n    type ComponentProps,\n    createContext,\n    forwardRef,\n    type ReactNode,\n    type Ref,\n    useCallback,\n    useContext,\n} from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Heading, Text } from '../typography/Typography';\nimport { useModalAutoFocus } from './useModalAutoFocus';\nimport { useScrollFade } from './useScrollFade';\n\nconst ModalLoadingContext = createContext(false);\n\ninterface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' | 'size' | 'title'> {\n    accessibleTitle?: string;\n    /** Whether opening focuses the first editable field; off while the caller focuses something else. */\n    focusFirstField?: boolean;\n    headerActions?: ReactNode;\n    sidebar?: ReactNode;\n    /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */\n    presentation?: 'default' | 'paned' | 'workspace';\n    /** Grows the dialog to the window, less a small margin, under a 52px title bar; see ModalExpandButton. */\n    expanded?: boolean;\n    /** A paned dialog that keeps its width but takes its content's height, such as a short pane; a long list in it\n     *  scrolls inside. Expanding wins. */\n    fitsContent?: boolean;\n    title: string;\n}\n\n/** The expanded dialog's size, inline so it wins over every presentation's size classes. */\nconst expandedStyle = {\n    width: 'calc(100vw - 2rem)',\n    maxWidth: 'none',\n    height: 'calc(100dvh - (52px + 1rem))',\n    maxHeight: 'none',\n    top: '52px',\n    translate: '-50% 0',\n} as const;\n\n/** A dialog that takes its content's height, inline so it wins over the paned size classes. */\nconst fitsContentStyle = { height: 'auto' } as const;\n\nconst ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(\n    (\n        {\n            accessibleTitle,\n            children,\n            closeOnEscape,\n            closeOnOverlayClick,\n            description,\n            focusFirstField,\n            headerActions,\n            onPointerDownOutside,\n            sidebar,\n            presentation = sidebar ? 'paned' : 'default',\n            expanded = false,\n            fitsContent = false,\n            title,\n            ...props\n        },\n        ref,\n    ) => {\n        const loading = useContext(ModalLoadingContext);\n        const focusProps = useModalAutoFocus(focusFirstField);\n\n        return (\n            <NinnaModal.Content\n                ref={ref}\n                {...props}\n                {...focusProps}\n                {...(expanded\n                    ? { 'data-expanded': true, style: expandedStyle }\n                    : fitsContent && { style: fitsContentStyle })}\n                title={accessibleTitle ?? title}\n                description={description}\n                closeOnEscape={loading ? false : closeOnEscape}\n                closeOnOverlayClick={loading ? false : closeOnOverlayClick}\n                onPointerDownOutside={(event) => {\n                    if (event.target instanceof Element && event.target.closest('[data-slot=\"toaster\"]')) {\n                        event.preventDefault();\n                    }\n\n                    onPointerDownOutside?.(event);\n                }}\n                size={presentation === 'workspace' ? 'full' : undefined}\n                className={`flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] flex-col overflow-hidden sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)] ${\n                    sidebar ? 'md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:grid-rows-[auto_minmax(0,1fr)]' : ''\n                } ${\n                    presentation === 'workspace'\n                        ? 'h-[calc(100dvh-1rem)] max-w-6xl sm:h-[calc(100dvh-2rem)] sm:max-w-6xl'\n                        : presentation === 'paned'\n                          ? // Paned dialogs keep one height across panes; the body scrolls instead of the dialog resizing.\n                            'h-[calc(100dvh-1rem)] max-w-4xl sm:h-[min(44rem,calc(100dvh-2rem))] sm:max-w-4xl'\n                          : 'max-w-160 sm:max-w-160'\n                }`}\n            >\n                <header\n                    data-slot=\"modal-header\"\n                    className={`@container min-w-0 shrink-0 px-5 pt-5 sm:px-6 sm:pt-6 ${\n                        description ? (sidebar ? 'pb-4 md:pb-0' : '') : 'pb-4'\n                    } ${sidebar ? 'md:col-start-2 md:row-start-1' : ''}`}\n                >\n                    <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-3\">\n                        <Heading as=\"h2\" className=\"min-w-0 flex-1 wrap-break-word\" variant=\"section\">\n                            {title}\n                        </Heading>\n                        {headerActions ? (\n                            <div className=\"order-3 flex basis-full items-center justify-end gap-2 @min-[32rem]:order-0 @min-[32rem]:ml-auto @min-[32rem]:basis-auto\">\n                                {headerActions}\n                            </div>\n                        ) : null}\n                        <div className=\"shrink-0\">\n                            <ModalClose />\n                        </div>\n                    </div>\n                </header>\n                {sidebar ? (\n                    <div className=\"min-h-0 min-w-0 shrink-0 md:col-start-1 md:row-span-2 md:row-start-1\">\n                        {sidebar}\n                    </div>\n                ) : null}\n                <div\n                    className={`flex min-h-0 min-w-0 flex-1 flex-col ${sidebar ? 'md:col-start-2 md:row-start-2' : ''}`}\n                >\n                    {description ? (\n                        <Text\n                            className={`shrink-0 px-5 pb-4 sm:px-6 ${sidebar ? 'pt-4 md:pt-2' : 'pt-2'}`}\n                            tone=\"muted\"\n                        >\n                            {description}\n                        </Text>\n                    ) : null}\n                    {children}\n                </div>\n            </NinnaModal.Content>\n        );\n    },\n);\n\nModalContent.displayName = 'Modal.Content';\n\nconst ModalBody = forwardRef<HTMLDivElement, Omit<ModalBodyProps, 'className'> & { layout?: 'scroll' | 'fill' }>(\n    ({ layout = 'scroll', children, ...props }, ref: Ref<HTMLDivElement>) => {\n        const { setViewport, setContent, className } = useScrollFade();\n        const bodyRef = useCallback(\n            (element: HTMLDivElement) => {\n                setViewport(element);\n\n                const cleanup = typeof ref === 'function' ? ref(element) : undefined;\n\n                if (ref && typeof ref !== 'function') ref.current = element;\n\n                return () => {\n                    setViewport(null);\n\n                    if (typeof cleanup === 'function') cleanup();\n                    else if (typeof ref === 'function') ref(null);\n                    else if (ref) ref.current = null;\n                };\n            },\n            [ref, setViewport],\n        );\n\n        return (\n            <NinnaModal.Body\n                ref={bodyRef}\n                {...props}\n                className={`min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 pt-2 pb-6 sm:px-6 ${layout === 'fill' ? 'flex flex-col' : ''} ${className}`}\n            >\n                <div\n                    ref={setContent}\n                    className={layout === 'fill' ? 'flex min-h-0 flex-1 flex-col gap-3' : 'flow-root'}\n                >\n                    {children}\n                </div>\n            </NinnaModal.Body>\n        );\n    },\n);\n\nModalBody.displayName = 'Modal.Body';\n\nfunction ModalForm(props: Omit<ComponentProps<'form'>, 'className'>) {\n    return <form {...props} className=\"flex min-h-0 flex-1 flex-col\" />;\n}\n\nfunction ModalPane({ active, children }: { active: boolean; children: ReactNode }) {\n    return (\n        <div hidden={!active} className={active ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>\n            {children}\n        </div>\n    );\n}\n\nconst ModalFooter = forwardRef<HTMLDivElement, Omit<ModalFooterProps, 'className'> & { leading?: ReactNode }>(\n    ({ leading, children, ...props }, ref) => (\n        <NinnaModal.Footer\n            ref={ref}\n            {...props}\n            className=\"border-base-300 bg-base-50/60 shrink-0 border-t px-5 py-4 sm:px-6 sm:pb-4\"\n        >\n            {leading ? <div className=\"mr-auto min-w-0 basis-full pb-2 sm:basis-auto sm:pb-0\">{leading}</div> : null}\n            {children}\n        </NinnaModal.Footer>\n    ),\n);\n\nModalFooter.displayName = 'Modal.Footer';\n\nfunction ModalClose() {\n    const labels = useDesignSystemLabels();\n    const loading = useContext(ModalLoadingContext);\n\n    return (\n        <NinnaModal.Close asChild>\n            <IconButton aria-label={labels.close} disabled={loading} icon={<XIcon />} variant=\"header\" />\n        </NinnaModal.Close>\n    );\n}\n\ninterface ModalRootPolicyProps {\n    children: ReactNode;\n    loading?: boolean;\n    onClose: () => void;\n}\n\nfunction ModalRoot({ children, loading = false, onClose }: ModalRootPolicyProps) {\n    return (\n        <ModalLoadingContext.Provider value={loading}>\n            <NinnaModal open onOpenChange={(open) => !open && !loading && onClose()}>\n                {children}\n            </NinnaModal>\n        </ModalLoadingContext.Provider>\n    );\n}\n\nexport const Modal = Object.assign(ModalRoot, {\n    Body: ModalBody,\n    Form: ModalForm,\n    Pane: ModalPane,\n    Content: ModalContent,\n    Footer: ModalFooter,\n});\n"],"mappings":"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"}

package/dist/overlays/ModalExpandButton.d.ts

@@ -0,0 +1,18 @@
+interface ModalExpandButtonProps {
+  expanded: boolean;
+  onToggle: () => void;
+  /** The shortcut that toggles it too, as shown (⌘⇧E) and as `aria-keyshortcuts` reads it (Meta+Shift+E). */
+  shortcut?: {
+    label: string;
+    keys: string;
+  };
+}
+/**
+ * The control a dialog's header shows (in Modal.Content's `headerActions`) to grow the dialog to the window and back,
+ * with its shortcut in a tooltip. The tooltip opens on hover only: a dialog that opens with no field focuses this
+ * button, and a tooltip opened by that focus would take the dialog's first Escape. `aria-keyshortcuts` still tells
+ * assistive tech the shortcut.
+ */
+export declare function ModalExpandButton({ expanded, onToggle, shortcut }: ModalExpandButtonProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ModalExpandButton.d.ts.map

package/dist/overlays/ModalExpandButton.js

@@ -0,0 +1,43 @@
+import { IconButton } from "../actions/IconButton.js";
+import { useDesignSystemLabels } from "../foundations/DesignSystemProvider.js";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "./Tooltip.js";
+import { useState } from "react";
+import { Maximize2Icon, Minimize2Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/overlays/ModalExpandButton.tsx
+/**
+* The control a dialog's header shows (in Modal.Content's `headerActions`) to grow the dialog to the window and back,
+* with its shortcut in a tooltip. The tooltip opens on hover only: a dialog that opens with no field focuses this
+* button, and a tooltip opened by that focus would take the dialog's first Escape. `aria-keyshortcuts` still tells
+* assistive tech the shortcut.
+*/
+function ModalExpandButton({ expanded, onToggle, shortcut }) {
+	const labels = useDesignSystemLabels().dialog;
+	const label = expanded ? labels.restoreSize : labels.expand;
+	const [hint, setHint] = useState(false);
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		open: hint,
+		onOpenChange: (open) => setHint(open && document.querySelector("button[data-expand]:hover") !== null),
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				"data-expand": true,
+				variant: "header",
+				"aria-label": label,
+				"aria-pressed": expanded,
+				"aria-keyshortcuts": shortcut?.keys,
+				icon: expanded ? /* @__PURE__ */ jsx(Minimize2Icon, {}) : /* @__PURE__ */ jsx(Maximize2Icon, {}),
+				onClick: onToggle
+			})
+		}), /* @__PURE__ */ jsxs(TooltipPopup, {
+			side: "bottom",
+			children: [label, shortcut ? /* @__PURE__ */ jsx("span", {
+				className: "text-base-500 ms-2",
+				children: shortcut.label
+			}) : null]
+		})]
+	});
+}
+export { ModalExpandButton };
+
+//# sourceMappingURL=ModalExpandButton.js.map

package/dist/overlays/ModalExpandButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalExpandButton.js","names":[],"sources":["../../src/overlays/ModalExpandButton.tsx"],"sourcesContent":["import { Maximize2Icon, Minimize2Icon } from 'lucide-react';\nimport { useState } from 'react';\n\nimport { IconButton } from '../actions/IconButton';\nimport { useDesignSystemLabels } from '../foundations/DesignSystemProvider';\nimport { Tooltip, TooltipPopup, TooltipTrigger } from './Tooltip';\n\ninterface ModalExpandButtonProps {\n    expanded: boolean;\n    onToggle: () => void;\n    /** The shortcut that toggles it too, as shown (⌘⇧E) and as `aria-keyshortcuts` reads it (Meta+Shift+E). */\n    shortcut?: { label: string; keys: string };\n}\n\n/**\n * The control a dialog's header shows (in Modal.Content's `headerActions`) to grow the dialog to the window and back,\n * with its shortcut in a tooltip. The tooltip opens on hover only: a dialog that opens with no field focuses this\n * button, and a tooltip opened by that focus would take the dialog's first Escape. `aria-keyshortcuts` still tells\n * assistive tech the shortcut.\n */\nexport function ModalExpandButton({ expanded, onToggle, shortcut }: ModalExpandButtonProps) {\n    const labels = useDesignSystemLabels().dialog;\n    const label = expanded ? labels.restoreSize : labels.expand;\n    const [hint, setHint] = useState(false);\n\n    return (\n        <Tooltip\n            open={hint}\n            onOpenChange={(open) => setHint(open && document.querySelector('button[data-expand]:hover') !== null)}\n        >\n            <TooltipTrigger asChild>\n                <IconButton\n                    data-expand\n                    variant=\"header\"\n                    aria-label={label}\n                    aria-pressed={expanded}\n                    aria-keyshortcuts={shortcut?.keys}\n                    icon={expanded ? <Minimize2Icon /> : <Maximize2Icon />}\n                    onClick={onToggle}\n                />\n            </TooltipTrigger>\n            <TooltipPopup side=\"bottom\">\n                {label}\n                {shortcut ? <span className=\"text-base-500 ms-2\">{shortcut.label}</span> : null}\n            </TooltipPopup>\n        </Tooltip>\n    );\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,SAAgB,kBAAkB,EAAE,UAAU,UAAU,YAAoC;CACxF,MAAM,SAAS,sBAAsB,CAAC,CAAC;CACvC,MAAM,QAAQ,WAAW,OAAO,cAAc,OAAO;CACrD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,OACI,qBAAC,SAAD;EACI,MAAM;EACN,eAAe,SAAS,QAAQ,QAAQ,SAAS,cAAc,2BAA2B,MAAM,IAAI;EAFxG,UAAA,CAII,oBAAC,gBAAD;GAAgB,SAAA;GACZ,UAAA,oBAAC,YAAD;IACI,eAAA;IACA,SAAQ;IACR,cAAY;IACZ,gBAAc;IACd,qBAAmB,UAAU;IAC7B,MAAM,WAAW,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,eAAD,CAAgB,CAAA;IACrD,SAAS;GACZ,CAAA;EACW,CAAA,GAChB,qBAAC,cAAD;GAAc,MAAK;GAAnB,UAAA,CACK,OACA,WAAW,oBAAC,QAAD;IAAM,WAAU;IAAsB,UAAA,SAAS;GAAY,CAAA,IAAI,IACjE;EACT,CAAA,CAAA;;AAEjB"}

package/dist/overlays/Popover.d.ts

@@ -5,7 +5,8 @@ interface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className
   onOpenAutoFocus?: (event: Event) => void;
   onCloseAutoFocus?: (event: Event) => void;
   presentation?: 'default' | 'menu';
-  width?: 'content' | 'sm' | 'trigger';
+  /** `sm` is 16rem and `md` 22rem, such as a chooser with a list; either stays inside the window. */
+  width?: 'content' | 'sm' | 'md' | 'trigger';
 }
 declare function PopoverRoot(props: ComponentProps<typeof Popover>): import("react").JSX.Element;
 declare const Popover$1: typeof PopoverRoot & {

package/dist/overlays/Popover.js

@@ -5,6 +5,7 @@ import { Popover } from "@ninna-ui/overlays";
 const popoverWidthClasses = {
 	content: void 0,
 	sm: "w-64",
+	md: "w-88",
 	trigger: "w-(--radix-popover-trigger-width)"
 };
 const PopoverContent = forwardRef(({ layout = "scroll", presentation = "default", width = "content", ...props }, ref) => /* @__PURE__ */ jsx(Popover.Content, {

package/dist/overlays/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["NinnaPopover","Popover"],"sources":["../../src/overlays/Popover.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Popover. */\n\nimport { Popover as NinnaPopover, type PopoverContentProps } from '@ninna-ui/overlays';\nimport { type ComponentProps, forwardRef } from 'react';\n\ninterface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className'> {\n    layout?: 'fill' | 'scroll';\n    onOpenAutoFocus?: (event: Event) => void;\n    onCloseAutoFocus?: (event: Event) => void;\n    presentation?: 'default' | 'menu';\n    width?: 'content' | 'sm' | 'trigger';\n}\n\nconst popoverWidthClasses: Record<NonNullable<PopoverContentPolicyProps['width']>, string | undefined> = {\n    content: undefined,\n    sm: 'w-64',\n    trigger: 'w-(--radix-popover-trigger-width)',\n};\n\nconst PopoverContent = forwardRef<HTMLDivElement, PopoverContentPolicyProps>(\n    ({ layout = 'scroll', presentation = 'default', width = 'content', ...props }, ref) => (\n        <NinnaPopover.Content\n            ref={ref}\n            {...props}\n            data-layout={layout}\n            className={`${popoverWidthClasses[width] ?? ''} ${presentation === 'menu' ? 'p-1' : ''}`}\n        />\n    ),\n);\n\nPopoverContent.displayName = 'Popover.Content';\n\nfunction PopoverRoot(props: ComponentProps<typeof NinnaPopover>) {\n    return <NinnaPopover {...props} />;\n}\n\nexport const Popover = Object.assign(PopoverRoot, {\n    ...NinnaPopover,\n    Content: PopoverContent,\n});\n"],"mappings":";;;;AAaA,MAAM,sBAAmG;CACrG,SAAS,KAAA;CACT,IAAI;CACJ,SAAS;AACb;AAEA,MAAM,iBAAiB,YAClB,EAAE,SAAS,UAAU,eAAe,WAAW,QAAQ,WAAW,GAAG,SAAS,QAC3E,oBAACA,QAAa,SAAd;CACS;CACL,GAAI;CACJ,eAAa;CACb,WAAW,GAAG,oBAAoB,UAAU,GAAG,GAAG,iBAAiB,SAAS,QAAQ;AACvF,CAAA,CAET;AAEA,eAAe,cAAc;AAE7B,SAAS,YAAY,OAA4C;CAC7D,OAAO,oBAACA,SAAD,EAAc,GAAI,MAAQ,CAAA;AACrC;AAEA,MAAaC,YAAU,OAAO,OAAO,aAAa;CAC9C,GAAGD;CACH,SAAS;AACb,CAAC"}
+{"version":3,"file":"Popover.js","names":["NinnaPopover","Popover"],"sources":["../../src/overlays/Popover.tsx"],"sourcesContent":["/* oxlint-disable react/only-export-components -- Compound members are exported through Popover. */\n\nimport { Popover as NinnaPopover, type PopoverContentProps } from '@ninna-ui/overlays';\nimport { type ComponentProps, forwardRef } from 'react';\n\ninterface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className'> {\n    layout?: 'fill' | 'scroll';\n    onOpenAutoFocus?: (event: Event) => void;\n    onCloseAutoFocus?: (event: Event) => void;\n    presentation?: 'default' | 'menu';\n    /** `sm` is 16rem and `md` 22rem, such as a chooser with a list; either stays inside the window. */\n    width?: 'content' | 'sm' | 'md' | 'trigger';\n}\n\nconst popoverWidthClasses: Record<NonNullable<PopoverContentPolicyProps['width']>, string | undefined> = {\n    content: undefined,\n    sm: 'w-64',\n    md: 'w-88',\n    trigger: 'w-(--radix-popover-trigger-width)',\n};\n\nconst PopoverContent = forwardRef<HTMLDivElement, PopoverContentPolicyProps>(\n    ({ layout = 'scroll', presentation = 'default', width = 'content', ...props }, ref) => (\n        <NinnaPopover.Content\n            ref={ref}\n            {...props}\n            data-layout={layout}\n            className={`${popoverWidthClasses[width] ?? ''} ${presentation === 'menu' ? 'p-1' : ''}`}\n        />\n    ),\n);\n\nPopoverContent.displayName = 'Popover.Content';\n\nfunction PopoverRoot(props: ComponentProps<typeof NinnaPopover>) {\n    return <NinnaPopover {...props} />;\n}\n\nexport const Popover = Object.assign(PopoverRoot, {\n    ...NinnaPopover,\n    Content: PopoverContent,\n});\n"],"mappings":";;;;AAcA,MAAM,sBAAmG;CACrG,SAAS,KAAA;CACT,IAAI;CACJ,IAAI;CACJ,SAAS;AACb;AAEA,MAAM,iBAAiB,YAClB,EAAE,SAAS,UAAU,eAAe,WAAW,QAAQ,WAAW,GAAG,SAAS,QAC3E,oBAACA,QAAa,SAAd;CACS;CACL,GAAI;CACJ,eAAa;CACb,WAAW,GAAG,oBAAoB,UAAU,GAAG,GAAG,iBAAiB,SAAS,QAAQ;AACvF,CAAA,CAET;AAEA,eAAe,cAAc;AAE7B,SAAS,YAAY,OAA4C;CAC7D,OAAO,oBAACA,SAAD,EAAc,GAAI,MAAQ,CAAA;AACrC;AAEA,MAAaC,YAAU,OAAO,OAAO,aAAa;CAC9C,GAAGD;CACH,SAAS;AACb,CAAC"}

package/dist/overlays/index.d.ts

@@ -1,9 +1,11 @@
 import { ActionModal } from "./ActionModal.js";
-import { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from "./CommandPalette.js";
+import { CommandPalette, CommandPaletteGroup, CommandPaletteOption, CommandPaletteToken, useCommandPaletteOption } from "./CommandPalette.js";
 import { Drawer } from "./Drawer.js";
 import { DropdownMenu } from "./DropdownMenu.js";
+import { HelpTip } from "./HelpTip.js";
 import { ImageViewer } from "./ImageViewer.js";
 import { Modal } from "./Modal.js";
+import { ModalExpandButton } from "./ModalExpandButton.js";
 import { Popover } from "./Popover.js";
 import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./Tooltip.js";
-export { ActionModal, CommandPalette, CommandPaletteGroup, Drawer, DropdownMenu, ImageViewer, Modal, Popover, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, useCommandPaletteOption };
+export { ActionModal, CommandPalette, CommandPaletteGroup, CommandPaletteOption, type CommandPaletteToken, Drawer, DropdownMenu, HelpTip, ImageViewer, Modal, ModalExpandButton, Popover, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, useCommandPaletteOption };

package/dist/showcase/Cards.js

@@ -1,7 +1,7 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { Heading, Text } from "../typography/Typography.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/showcase/Cards.tsx
 /** A product on the home page: its name and promise above a screenshot that runs off the card's edge. */
 function ProductCard({ hue, icon, name, status, title, description, linkLabel, href, onNavigate, media }) {

package/dist/showcase/FeatureRow.js

@@ -1,8 +1,8 @@
 import { Eyebrow } from "../layout/PageSection.js";
 import { Heading, Text } from "../typography/Typography.js";
 import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/showcase/FeatureRow.tsx
 /** A feature told in copy on one side and shown on a device on the other. */
 function FeatureRow({ eyebrow, title, children, points, media, reverse, wide, badge, mediaWidth = "measure", largeMedia }) {

package/dist/showcase/PhotoSearchConcept.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/showcase/PhotoSearchConcept.tsx
 /** An illustration, not a screenshot: a search over your own photo library, with the matches lit. Its label says
 *  it is a concept. */

package/dist/showcase/ProductBand.js

@@ -1,8 +1,8 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
 import { Heading, Text } from "../typography/Typography.js";
 import { useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/showcase/ProductBand.tsx
 /** The family of products under a hero, one compact entry each, wrapping as the family grows. */
 function ProductIndex({ products, label, onNavigate }) {

package/dist/showcase/Status.js

@@ -1,6 +1,6 @@
 import { tabbable } from "../foundations/KeyboardFocus.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/showcase/Status.tsx
 const readinessClasses = {
 	available: {

package/dist/typography/Code.d.ts

@@ -0,0 +1,18 @@
+import { CodeProps } from "@ninna-ui/primitives";
+declare const wrapping: {
+  readonly anywhere: 'break-all';
+  readonly never: 'whitespace-nowrap';
+};
+type CodeProps$1 = CodeProps & {
+  /** A path or command inside a sentence, in the page's plain inline code with no chip: a path may break `anywhere`,
+   *  a command `never`. Without it, the code chip. */
+  wrap?: keyof typeof wrapping;
+};
+/** Inline code: ninna-ui's code chip, or with `wrap`, plain inline code that breaks anywhere or never. */
+declare const Code$1: import("react").ForwardRefExoticComponent<CodeProps & {
+  /** A path or command inside a sentence, in the page's plain inline code with no chip: a path may break `anywhere`,
+   *  a command `never`. Without it, the code chip. */
+  wrap?: keyof typeof wrapping;
+} & import("react").RefAttributes<HTMLElement>>;
+export { Code$1 as Code, CodeProps$1 as CodeProps };
+//# sourceMappingURL=Code.d.ts.map

package/dist/typography/Code.js

@@ -0,0 +1,24 @@
+import { Code } from "@ninna-ui/primitives";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/typography/Code.tsx
+const wrapping = {
+	anywhere: "break-all",
+	never: "whitespace-nowrap"
+};
+/** Inline code: ninna-ui's code chip, or with `wrap`, plain inline code that breaks anywhere or never. */
+const Code$1 = forwardRef(({ wrap, ...props }, ref) => {
+	if (wrap) return /* @__PURE__ */ jsx("code", {
+		ref,
+		className: wrapping[wrap],
+		children: props.children
+	});
+	return /* @__PURE__ */ jsx(Code, {
+		ref,
+		...props
+	});
+});
+Code$1.displayName = "Code";
+export { Code$1 as Code };
+
+//# sourceMappingURL=Code.js.map

package/dist/typography/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","names":["Code","NinnaCode"],"sources":["../../src/typography/Code.tsx"],"sourcesContent":["import { Code as NinnaCode, type CodeProps as NinnaCodeProps } from '@ninna-ui/primitives';\nimport { forwardRef } from 'react';\n\nconst wrapping = { anywhere: 'break-all', never: 'whitespace-nowrap' } as const;\n\nexport type CodeProps = NinnaCodeProps & {\n    /** A path or command inside a sentence, in the page's plain inline code with no chip: a path may break `anywhere`,\n     *  a command `never`. Without it, the code chip. */\n    wrap?: keyof typeof wrapping;\n};\n\n/** Inline code: ninna-ui's code chip, or with `wrap`, plain inline code that breaks anywhere or never. */\nexport const Code = forwardRef<HTMLElement, CodeProps>(({ wrap, ...props }, ref) => {\n    if (wrap)\n        return (\n            <code ref={ref} className={wrapping[wrap]}>\n                {props.children}\n            </code>\n        );\n\n    return <NinnaCode ref={ref} {...props} />;\n});\n\nCode.displayName = 'Code';\n"],"mappings":";;;;AAGA,MAAM,WAAW;CAAE,UAAU;CAAa,OAAO;AAAoB;;AASrE,MAAaA,SAAO,YAAoC,EAAE,MAAM,GAAG,SAAS,QAAQ;CAChF,IAAI,MACA,OACI,oBAAC,QAAD;EAAW;EAAK,WAAW,SAAS;EAC/B,UAAA,MAAM;CACL,CAAA;CAGd,OAAO,oBAACC,MAAD;EAAgB;EAAK,GAAI;CAAQ,CAAA;AAC5C,CAAC;AAED,OAAK,cAAc"}

package/dist/typography/Link.d.ts

@@ -12,10 +12,15 @@ declare const Link$1: import("react").ForwardRefExoticComponent<Omit<LinkProps,
   variant?: 'body' | 'caption';
   onNavigate?: (href: string) => void;
 } & import("react").RefAttributes<HTMLAnchorElement>>;
-/** A link inside running text or a note: the surrounding size and colour, underlined. */
-export declare function InlineLink({ href, children }: {
+/** A link inside running text or a note: the surrounding size and colour, underlined. With `onClick` in place of
+ *  `href` it is a button with the same look, such as "Change" after what was kept, and can be `disabled`. */
+export declare function InlineLink(props: {
   href: string;
   children?: ReactNode;
+} | {
+  onClick: () => void;
+  disabled?: boolean | undefined;
+  children?: ReactNode;
 }): import("react").JSX.Element;
 export { Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay, LinkOverlayProps$1 as LinkOverlayProps, LinkProps$1 as LinkProps };
 //# sourceMappingURL=Link.d.ts.map

package/dist/typography/Link.js

@@ -44,15 +44,25 @@ function navigationClick({ href, onNavigate, onClick, external, target, download
 		onNavigate(href);
 	};
 }
-/** A link inside running text or a note: the surrounding size and colour, underlined. */
-function InlineLink({ href, children }) {
+const inline = "focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2";
+/** A link inside running text or a note: the surrounding size and colour, underlined. With `onClick` in place of
+*  `href` it is a button with the same look, such as "Change" after what was kept, and can be `disabled`. */
+function InlineLink(props) {
+	if ("onClick" in props) return /* @__PURE__ */ jsx("button", {
+		...tabbable,
+		type: "button",
+		disabled: props.disabled,
+		onClick: props.onClick,
+		className: inline,
+		children: props.children
+	});
 	return /* @__PURE__ */ jsx("a", {
 		...tabbable,
-		href,
+		href: props.href,
 		target: "_blank",
 		rel: "noreferrer",
-		className: "focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2",
-		children
+		className: inline,
+		children: props.children
 	});
 }
 export { InlineLink, Link$1 as Link, LinkBox$1 as LinkBox, LinkOverlay$1 as LinkOverlay };

package/dist/typography/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["LinkBox","NinnaLinkBox","LinkOverlay","NinnaLinkOverlay","Link","NinnaLink"],"sources":["../../src/typography/Link.tsx"],"sourcesContent":["import {\n    Link as NinnaLink,\n    LinkBox as NinnaLinkBox,\n    type LinkBoxProps,\n    LinkOverlay as NinnaLinkOverlay,\n    type LinkOverlayProps as NinnaLinkOverlayProps,\n    type LinkProps as NinnaLinkProps,\n} from '@ninna-ui/primitives';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type LinkProps = Omit<NinnaLinkProps, 'size' | 'color'> & {\n    variant?: 'body' | 'caption';\n    onNavigate?: (href: string) => void;\n};\n\nexport type LinkOverlayProps = NinnaLinkOverlayProps & Pick<LinkProps, 'onNavigate'>;\n\n/** Keep secondary links and buttons above the stretched primary link or action. */\nexport function LinkBox({ className = '', ...props }: LinkBoxProps) {\n    return (\n        <NinnaLinkBox\n            {...props}\n            className={`isolate [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:relative [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:z-10 ${className}`}\n        />\n    );\n}\n\nexport const LinkOverlay = forwardRef<HTMLAnchorElement, LinkOverlayProps>(\n    ({ onNavigate, onClick, className = '', ...props }, ref) => (\n        <NinnaLinkOverlay\n            {...tabbable}\n            {...props}\n            ref={ref}\n            className={`focus-visible:before:outline-primary before:z-1 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:-outline-offset-2 ${className}`}\n            onClick={navigationClick({ ...props, onClick, onNavigate })}\n        />\n    ),\n);\n\nLinkOverlay.displayName = 'LinkOverlay';\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n    ({ variant = 'body', onNavigate, onClick, ...props }, ref) => (\n        <NinnaLink\n            {...tabbable}\n            {...props}\n            ref={ref}\n            size={variant === 'caption' ? 'xs' : 'sm'}\n            underline=\"hover\"\n            onClick={navigationClick({ ...props, onClick, onNavigate })}\n        />\n    ),\n);\n\nLink.displayName = 'Link';\n\nfunction navigationClick({\n    href,\n    onNavigate,\n    onClick,\n    external,\n    target,\n    download,\n}: LinkOverlayProps): LinkProps['onClick'] {\n    return (event) => {\n        if (onNavigate) event.stopPropagation();\n\n        onClick?.(event);\n\n        if (\n            !onNavigate ||\n            !href ||\n            event.defaultPrevented ||\n            event.button !== 0 ||\n            event.metaKey ||\n            event.ctrlKey ||\n            event.shiftKey ||\n            event.altKey ||\n            external ||\n            (target && target !== '_self') ||\n            (download !== undefined && download !== false)\n        )\n            return;\n\n        event.preventDefault();\n        onNavigate(href);\n    };\n}\n\n/** A link inside running text or a note: the surrounding size and colour, underlined. */\nexport function InlineLink({ href, children }: { href: string; children?: ReactNode }) {\n    return (\n        <a\n            {...tabbable}\n            href={href}\n            target=\"_blank\"\n            rel=\"noreferrer\"\n            className=\"focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2\"\n        >\n            {children}\n        </a>\n    );\n}\n"],"mappings":";;;;;;AAoBA,SAAgBA,UAAQ,EAAE,YAAY,IAAI,GAAG,SAAuB;CAChE,OACI,oBAACC,SAAD;EACI,GAAI;EACJ,WAAW,yLAAyL;CACvM,CAAA;AAET;AAEA,MAAaC,gBAAc,YACtB,EAAE,YAAY,SAAS,YAAY,IAAI,GAAG,SAAS,QAChD,oBAACC,aAAD;CACI,GAAI;CACJ,GAAI;CACC;CACL,WAAW,6KAA6K;CACxL,SAAS,gBAAgB;EAAE,GAAG;EAAO;EAAS;CAAW,CAAC;AAC7D,CAAA,CAET;AAEA,cAAY,cAAc;AAE1B,MAAaC,SAAO,YACf,EAAE,UAAU,QAAQ,YAAY,SAAS,GAAG,SAAS,QAClD,oBAACC,MAAD;CACI,GAAI;CACJ,GAAI;CACC;CACL,MAAM,YAAY,YAAY,OAAO;CACrC,WAAU;CACV,SAAS,gBAAgB;EAAE,GAAG;EAAO;EAAS;CAAW,CAAC;AAC7D,CAAA,CAET;AAEA,OAAK,cAAc;AAEnB,SAAS,gBAAgB,EACrB,MACA,YACA,SACA,UACA,QACA,YACuC;CACvC,QAAQ,UAAU;EACd,IAAI,YAAY,MAAM,gBAAgB;EAEtC,UAAU,KAAK;EAEf,IACI,CAAC,cACD,CAAC,QACD,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,UACN,YACC,UAAU,WAAW,WACrB,aAAa,KAAA,KAAa,aAAa,OAExC;EAEJ,MAAM,eAAe;EACrB,WAAW,IAAI;CACnB;AACJ;;AAGA,SAAgB,WAAW,EAAE,MAAM,YAAoD;CACnF,OACI,oBAAC,KAAD;EACI,GAAI;EACE;EACN,QAAO;EACP,KAAI;EACJ,WAAU;EAET;CACF,CAAA;AAEX"}
+{"version":3,"file":"Link.js","names":["LinkBox","NinnaLinkBox","LinkOverlay","NinnaLinkOverlay","Link","NinnaLink"],"sources":["../../src/typography/Link.tsx"],"sourcesContent":["import {\n    Link as NinnaLink,\n    LinkBox as NinnaLinkBox,\n    type LinkBoxProps,\n    LinkOverlay as NinnaLinkOverlay,\n    type LinkOverlayProps as NinnaLinkOverlayProps,\n    type LinkProps as NinnaLinkProps,\n} from '@ninna-ui/primitives';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { tabbable } from '../foundations/KeyboardFocus';\n\nexport type LinkProps = Omit<NinnaLinkProps, 'size' | 'color'> & {\n    variant?: 'body' | 'caption';\n    onNavigate?: (href: string) => void;\n};\n\nexport type LinkOverlayProps = NinnaLinkOverlayProps & Pick<LinkProps, 'onNavigate'>;\n\n/** Keep secondary links and buttons above the stretched primary link or action. */\nexport function LinkBox({ className = '', ...props }: LinkBoxProps) {\n    return (\n        <NinnaLinkBox\n            {...props}\n            className={`isolate [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:relative [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:z-10 ${className}`}\n        />\n    );\n}\n\nexport const LinkOverlay = forwardRef<HTMLAnchorElement, LinkOverlayProps>(\n    ({ onNavigate, onClick, className = '', ...props }, ref) => (\n        <NinnaLinkOverlay\n            {...tabbable}\n            {...props}\n            ref={ref}\n            className={`focus-visible:before:outline-primary before:z-1 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:-outline-offset-2 ${className}`}\n            onClick={navigationClick({ ...props, onClick, onNavigate })}\n        />\n    ),\n);\n\nLinkOverlay.displayName = 'LinkOverlay';\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>(\n    ({ variant = 'body', onNavigate, onClick, ...props }, ref) => (\n        <NinnaLink\n            {...tabbable}\n            {...props}\n            ref={ref}\n            size={variant === 'caption' ? 'xs' : 'sm'}\n            underline=\"hover\"\n            onClick={navigationClick({ ...props, onClick, onNavigate })}\n        />\n    ),\n);\n\nLink.displayName = 'Link';\n\nfunction navigationClick({\n    href,\n    onNavigate,\n    onClick,\n    external,\n    target,\n    download,\n}: LinkOverlayProps): LinkProps['onClick'] {\n    return (event) => {\n        if (onNavigate) event.stopPropagation();\n\n        onClick?.(event);\n\n        if (\n            !onNavigate ||\n            !href ||\n            event.defaultPrevented ||\n            event.button !== 0 ||\n            event.metaKey ||\n            event.ctrlKey ||\n            event.shiftKey ||\n            event.altKey ||\n            external ||\n            (target && target !== '_self') ||\n            (download !== undefined && download !== false)\n        )\n            return;\n\n        event.preventDefault();\n        onNavigate(href);\n    };\n}\n\nconst inline =\n    'focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2';\n\n/** A link inside running text or a note: the surrounding size and colour, underlined. With `onClick` in place of\n *  `href` it is a button with the same look, such as \"Change\" after what was kept, and can be `disabled`. */\nexport function InlineLink(\n    props:\n        | { href: string; children?: ReactNode }\n        | { onClick: () => void; disabled?: boolean | undefined; children?: ReactNode },\n) {\n    if ('onClick' in props)\n        return (\n            <button {...tabbable} type=\"button\" disabled={props.disabled} onClick={props.onClick} className={inline}>\n                {props.children}\n            </button>\n        );\n\n    return (\n        <a {...tabbable} href={props.href} target=\"_blank\" rel=\"noreferrer\" className={inline}>\n            {props.children}\n        </a>\n    );\n}\n"],"mappings":";;;;;;AAoBA,SAAgBA,UAAQ,EAAE,YAAY,IAAI,GAAG,SAAuB;CAChE,OACI,oBAACC,SAAD;EACI,GAAI;EACJ,WAAW,yLAAyL;CACvM,CAAA;AAET;AAEA,MAAaC,gBAAc,YACtB,EAAE,YAAY,SAAS,YAAY,IAAI,GAAG,SAAS,QAChD,oBAACC,aAAD;CACI,GAAI;CACJ,GAAI;CACC;CACL,WAAW,6KAA6K;CACxL,SAAS,gBAAgB;EAAE,GAAG;EAAO;EAAS;CAAW,CAAC;AAC7D,CAAA,CAET;AAEA,cAAY,cAAc;AAE1B,MAAaC,SAAO,YACf,EAAE,UAAU,QAAQ,YAAY,SAAS,GAAG,SAAS,QAClD,oBAACC,MAAD;CACI,GAAI;CACJ,GAAI;CACC;CACL,MAAM,YAAY,YAAY,OAAO;CACrC,WAAU;CACV,SAAS,gBAAgB;EAAE,GAAG;EAAO;EAAS;CAAW,CAAC;AAC7D,CAAA,CAET;AAEA,OAAK,cAAc;AAEnB,SAAS,gBAAgB,EACrB,MACA,YACA,SACA,UACA,QACA,YACuC;CACvC,QAAQ,UAAU;EACd,IAAI,YAAY,MAAM,gBAAgB;EAEtC,UAAU,KAAK;EAEf,IACI,CAAC,cACD,CAAC,QACD,MAAM,oBACN,MAAM,WAAW,KACjB,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,UACN,YACC,UAAU,WAAW,WACrB,aAAa,KAAA,KAAa,aAAa,OAExC;EAEJ,MAAM,eAAe;EACrB,WAAW,IAAI;CACnB;AACJ;AAEA,MAAM,SACF;;;AAIJ,SAAgB,WACZ,OAGF;CACE,IAAI,aAAa,OACb,OACI,oBAAC,UAAD;EAAQ,GAAI;EAAU,MAAK;EAAS,UAAU,MAAM;EAAU,SAAS,MAAM;EAAS,WAAW;EAC5F,UAAA,MAAM;CACH,CAAA;CAGhB,OACI,oBAAC,KAAD;EAAG,GAAI;EAAU,MAAM,MAAM;EAAM,QAAO;EAAS,KAAI;EAAa,WAAW;EAC1E,UAAA,MAAM;CACR,CAAA;AAEX"}