@kanso-labs/kanso-ui 0.2.0 → 0.4.1

package/dist/assets/stylex.css

@@ -123,6 +123,10 @@
     padding-block: var(--x6borv4);
   }
 
+  .xmqoko8 {
+    padding-block: var(--xbmbo34);
+  }
+
   .x1cmllll {
     padding-block: var(--xod9tvo);
   }
@@ -135,6 +139,10 @@
     padding-inline: var(--x196ey9q);
   }
 
+  .xdomwbk {
+    padding-inline: var(--x1ug6acx);
+  }
+
   .x790zyz {
     padding-inline: var(--x3km7fe);
   }
@@ -301,6 +309,10 @@
     box-shadow: var(--xt04dnm);
   }
 
+  .x1hyvwdk {
+    clip-path: inset(50%);
+  }
+
   .x1xj74d8 {
     color: color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),var(--x1dzgr7y));
   }
@@ -373,6 +385,10 @@
     display: flex;
   }
 
+  .x1rg5ohu {
+    display: inline-block;
+  }
+
   .x3nfvp2 {
     display: inline-flex;
   }
@@ -453,6 +469,14 @@
     font-family: var(--xyhb918);
   }
 
+  .xuegzgz {
+    font-size: .8125em;
+  }
+
+  .x1s8wshw {
+    font-size: .875em;
+  }
+
   .xwsyq91 {
     font-size: 20px;
   }
@@ -677,6 +701,10 @@
     letter-spacing: var(--xw822is);
   }
 
+  .x37zpob {
+    line-height: 1.4;
+  }
+
   .xv61bfh {
     line-height: var(--x1j54qr5);
   }
@@ -769,6 +797,10 @@
     outline-width: 2px;
   }
 
+  .xj0a0fe {
+    overflow-wrap: anywhere;
+  }
+
   .x47corl {
     pointer-events: none;
   }

package/dist/cjs/assets/stylex.css

@@ -123,6 +123,10 @@
     padding-block: var(--x6borv4);
   }
 
+  .xmqoko8 {
+    padding-block: var(--xbmbo34);
+  }
+
   .x1cmllll {
     padding-block: var(--xod9tvo);
   }
@@ -135,6 +139,10 @@
     padding-inline: var(--x196ey9q);
   }
 
+  .xdomwbk {
+    padding-inline: var(--x1ug6acx);
+  }
+
   .x790zyz {
     padding-inline: var(--x3km7fe);
   }
@@ -301,6 +309,10 @@
     box-shadow: var(--xt04dnm);
   }
 
+  .x1hyvwdk {
+    clip-path: inset(50%);
+  }
+
   .x1xj74d8 {
     color: color-mix(in srgb,var(--xn0syi6) calc(var(--xu361ij) * 100%),var(--x1dzgr7y));
   }
@@ -373,6 +385,10 @@
     display: flex;
   }
 
+  .x1rg5ohu {
+    display: inline-block;
+  }
+
   .x3nfvp2 {
     display: inline-flex;
   }
@@ -453,6 +469,14 @@
     font-family: var(--xyhb918);
   }
 
+  .xuegzgz {
+    font-size: .8125em;
+  }
+
+  .x1s8wshw {
+    font-size: .875em;
+  }
+
   .xwsyq91 {
     font-size: 20px;
   }
@@ -677,6 +701,10 @@
     letter-spacing: var(--xw822is);
   }
 
+  .x37zpob {
+    line-height: 1.4;
+  }
+
   .xv61bfh {
     line-height: var(--x1j54qr5);
   }
@@ -769,6 +797,10 @@
     outline-width: 2px;
   }
 
+  .xj0a0fe {
+    overflow-wrap: anywhere;
+  }
+
   .x47corl {
     pointer-events: none;
   }

package/dist/cjs/components/code/index.cjs

@@ -0,0 +1,51 @@
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let react_compiler_runtime = require("react/compiler-runtime");
+//#region src/components/code/index.tsx
+/**
+* A fragment of code, a path, or an identifier set in the mono face. It
+* renders a `<code>` and takes its scale from the text around it.
+*/
+function Code(t0) {
+	const $ = (0, react_compiler_runtime.c)(9);
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = render;
+	} else {
+		props = $[1];
+		render = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { className: "x139gbkf xbppi91 x1s8wshw xj0a0fe" };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props) {
+		t2 = {
+			...props,
+			...t1
+		};
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== render || $[7] !== t2) {
+		t3 = {
+			defaultTagName: "code",
+			props: t2,
+			render
+		};
+		$[6] = render;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return (0, _base_ui_react_use_render.useRender)(t3);
+}
+//#endregion
+exports.default = Code;
+
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/code/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/code/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...{\n        className: \"x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;AAsBA,SAAA,KAAA,IAAA;CAAA,MAAA,KAAA,GAAA,uBAAA,EAAA,CAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,CAAA,CAAA,WAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQH,KAAA,EAAA,WACU,oCACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,QAAA,GATM,0BAAA,UAAA,CAAU,EAShB;AAAC"}

package/dist/cjs/components/code/index.d.cts

@@ -0,0 +1,11 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/code/index.d.ts
+type CodeProps = useRender.ComponentProps<'code'>;
+/**
+ * A fragment of code, a path, or an identifier set in the mono face. It
+ * renders a `<code>` and takes its scale from the text around it.
+ */
+declare function Code({ render, ...props }: CodeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type CodeProps, Code as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/components/copy-field/index.cjs

@@ -0,0 +1,59 @@
+const require_index = require("../button/index.cjs");
+const require_index$1 = require("../code/index.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/components/copy-field/index.tsx
+const COPIED_RESET_MS = 2e3;
+/**
+* A value to be read and taken away — a repository URL, a token, a command.
+* It shows the value in the mono face and copies it on request, confirming
+* on the button itself.
+*/
+function CopyField({ copiedLabel = "Copied", copyLabel = "Copy", onCopied, value, ...props }) {
+	const [copied, setCopied] = (0, react.useState)(false);
+	const timer = (0, react.useRef)(void 0);
+	(0, react.useEffect)(() => () => {
+		clearTimeout(timer.current);
+	}, []);
+	const handleCopy = (0, react.useCallback)(() => {
+		const write = async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+			} catch {
+				setCopied(false);
+				return;
+			}
+			setCopied(true);
+			onCopied?.(value);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopied(false);
+			}, COPIED_RESET_MS);
+		};
+		write();
+	}, [onCopied, value]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...props,
+		className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x78zum5 x126z3so xmqoko8 x18fpw6u",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "x1iyjqo2 x1b35g6e xeuugli",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, { children: value })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+				onClick: handleCopy,
+				size: "xs",
+				variant: "text",
+				children: copied ? copiedLabel : copyLabel
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("output", {
+				className: "xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft",
+				children: copied ? copiedLabel : ""
+			})
+		]
+	});
+}
+//#endregion
+exports.default = CopyField;
+
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/copy-field/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Code from '../code';\n\n// How long the confirmation stands before the control returns to offering the\n// copy again. Not a motion token: those are transition durations, measured in\n// hundreds of milliseconds, and this is a dwell — long enough to be read\n// without being long enough to leave the button lying about what it will do.\nconst COPIED_RESET_MS = 2000;\ntype CopyFieldProps = {\n  /**\n   * What the button says once the value has been copied. It reverts to\n   * `copyLabel` on its own after a couple of seconds.\n   * @default 'Copied'\n   */\n  copiedLabel?: string;\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  copyLabel?: string;\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   *\n   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which\n   * already has an `onCopy` of its own — React's handler for the native copy\n   * event, fired when the reader presses the copy shortcut inside the element.\n   * The two are different moments, and a prop that quietly shadowed the\n   * built-in would be a trap rather than a convenience.\n   */\n  onCopied?: (value: string) => void;\n  /** The text shown, and the text copied. */\n  value: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\n/**\n * A value to be read and taken away — a repository URL, a token, a command.\n * It shows the value in the mono face and copies it on request, confirming\n * on the button itself.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  onCopied,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // setState for a tree that is gone.\n  useEffect(() => () => {\n    clearTimeout(timer.current);\n  }, []);\n  const handleCopy = useCallback(() => {\n    const write = async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        // A clipboard write is refused outside a secure context and wherever\n        // the permission is denied, and neither is something the call site can\n        // fix. Staying at rest is the honest report: the value is not on the\n        // clipboard, so the control must not claim it is.\n        setCopied(false);\n        return;\n      }\n      setCopied(true);\n      onCopied?.(value);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopied(false);\n      }, COPIED_RESET_MS);\n    };\n    void write();\n  }, [onCopied, value]);\n  return <div {...props} className=\"x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x78zum5 x126z3so xmqoko8 x18fpw6u\">\n      <span className=\"x1iyjqo2 x1b35g6e xeuugli\">\n        <Code>{value}</Code>\n      </span>\n      <Button onClick={handleCopy} size=\"xs\" variant=\"text\">\n        {copied ? copiedLabel : copyLabel}\n      </Button>\n      {/* The button's own label changes, but a label changing under a screen\n          reader is not reliably announced. This is. `<output>` carries an\n          implicit role of status, so it needs no role attribute of its own. */}\n      <output className=\"xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft\">\n        {copied ? copiedLabel : ''}\n      </output>\n    </div>;\n}\nexport type { CopyFieldProps };\nexport default CopyField;"],"mappings":";;;;;AAYA,MAAM,kBAAkB;;;;;;AAgCxB,SAAS,UAAU,EACjB,cAAc,UACd,YAAY,QACZ,UACA,OACA,GAAG,SACc;CACjB,MAAM,CAAC,QAAQ,cAAA,GAAa,MAAA,SAAA,CAAS,KAAK;CAC1C,MAAM,SAAA,GAAQ,MAAA,OAAA,CAAkD,KAAA,CAAS;CAIzE,CAAA,GAAA,MAAA,UAAA,aAAsB;EACpB,aAAa,MAAM,OAAO;CAC5B,GAAG,CAAA,CAAE;CACL,MAAM,cAAA,GAAa,MAAA,YAAA,OAAkB;EACnC,MAAM,QAAQ,YAAY;GACxB,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;GAC3C,QAAQ;IAKN,UAAU,KAAK;IACf;GACF;GACA,UAAU,IAAI;GACd,WAAW,KAAK;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB;IAC/B,UAAU,KAAK;GACjB,GAAG,eAAe;EACpB;EACA,MAAW;CACb,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,OAAO,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,GAAI;EAAO,WAAU;EAA1B,UAAA;GACH,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IACd,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAA,SAAD,EAAA,UAAO,MAAY,CAAA;GACf,CAAA;GACN,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAA,SAAD;IAAQ,SAAS;IAAY,MAAK;IAAK,SAAQ;IAC5C,UAAA,SAAS,cAAc;GAClB,CAAA;GAIR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,WAAU;IACf,UAAA,SAAS,cAAc;GAClB,CAAA;EACL;;AACT"}

package/dist/cjs/components/copy-field/index.d.cts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react";
+//#region src/components/copy-field/index.d.ts
+type CopyFieldProps = {
+  /**
+   * What the button says once the value has been copied. It reverts to
+   * `copyLabel` on its own after a couple of seconds.
+   * @default 'Copied'
+   */
+  copiedLabel?: string;
+  /**
+   * What the button says at rest.
+   * @default 'Copy'
+   */
+  copyLabel?: string;
+  /**
+   * Called with the value after it reaches the clipboard, never before.
+   *
+   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which
+   * already has an `onCopy` of its own — React's handler for the native copy
+   * event, fired when the reader presses the copy shortcut inside the element.
+   * The two are different moments, and a prop that quietly shadowed the
+   * built-in would be a trap rather than a convenience.
+   */
+  onCopied?: (value: string) => void;
+  /** The text shown, and the text copied. */
+  value: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * A value to be read and taken away — a repository URL, a token, a command.
+ * It shows the value in the mono face and copies it on request, confirming
+ * on the button itself.
+ */
+declare function CopyField({ copiedLabel, copyLabel, onCopied, value, ...props }: CopyFieldProps): import("react").JSX.Element;
+//#endregion
+export { type CopyFieldProps, CopyField as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/components/index.d.cts

@@ -3,8 +3,11 @@ import Badge, { BadgeProps } from "./badge/index.cjs";
 import Button, { ButtonProps } from "./button/index.cjs";
 import Card, { CardProps } from "./card/index.cjs";
 import Chip, { ChipProps } from "./chip/index.cjs";
+import Code, { CodeProps } from "./code/index.cjs";
+import CopyField, { CopyFieldProps } from "./copy-field/index.cjs";
 import Currency, { CurrencyProps } from "./currency/index.cjs";
 import IconButton, { IconButtonProps } from "./icon-button/index.cjs";
+import Keycap, { KeycapProps } from "./keycap/index.cjs";
 import Link, { LinkProps } from "./link/index.cjs";
 import ListItem, { ListItemProps } from "./list-item/index.cjs";
 import Separator, { SeparatorProps } from "./separator/index.cjs";
@@ -12,4 +15,4 @@ import Sheet, { SheetProps } from "./sheet/index.cjs";
 import Tabs, { TabsProps } from "./tabs/index.cjs";
 import Text, { TextProps } from "./text/index.cjs";
 import TextField, { TextFieldProps } from "./text-field/index.cjs";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/cjs/components/keycap/index.cjs

@@ -0,0 +1,52 @@
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let react_compiler_runtime = require("react/compiler-runtime");
+//#region src/components/keycap/index.tsx
+/**
+* A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
+* `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A
+* chord is several of these, combined at the call site.
+*/
+function Keycap(t0) {
+	const $ = (0, react_compiler_runtime.c)(9);
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = render;
+	} else {
+		props = $[1];
+		render = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { className: "xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft" };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props) {
+		t2 = {
+			...props,
+			...t1
+		};
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== render || $[7] !== t2) {
+		t3 = {
+			defaultTagName: "kbd",
+			props: t2,
+			render
+		};
+		$[6] = render;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return (0, _base_ui_react_use_render.useRender)(t3);
+}
+//#endregion
+exports.default = Keycap;
+
+//# sourceMappingURL=index.cjs.map

package/dist/cjs/components/keycap/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../../src/components/keycap/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...{\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;AA2BA,SAAA,OAAA,IAAA;CAAA,MAAA,KAAA,GAAA,uBAAA,EAAA,CAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,CAAA,CAAA,WAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQL,KAAA,EAAA,WACU,8GACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,QAAA,GATM,0BAAA,UAAA,CAAU,EAShB;AAAC"}

package/dist/cjs/components/keycap/index.d.cts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/keycap/index.d.ts
+type KeycapProps = useRender.ComponentProps<'kbd'>;
+/**
+ * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
+ * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A
+ * chord is several of these, combined at the call site.
+ */
+declare function Keycap({ render, ...props }: KeycapProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type KeycapProps, Keycap as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/cjs/index.cjs

@@ -4,26 +4,32 @@ const require_index$1 = require("./components/badge/index.cjs");
 const require_index$2 = require("./components/button/index.cjs");
 const require_index$3 = require("./components/card/index.cjs");
 const require_index$4 = require("./components/chip/index.cjs");
-const require_index$5 = require("./components/currency/index.cjs");
-const require_index$6 = require("./components/icon-button/index.cjs");
-const require_index$7 = require("./components/link/index.cjs");
-const require_index$8 = require("./components/list-item/index.cjs");
-const require_index$9 = require("./components/separator/index.cjs");
-const require_index$10 = require("./components/sheet/index.cjs");
-const require_index$11 = require("./components/tabs/index.cjs");
-const require_index$12 = require("./components/text/index.cjs");
-const require_index$13 = require("./components/text-field/index.cjs");
+const require_index$5 = require("./components/code/index.cjs");
+const require_index$6 = require("./components/copy-field/index.cjs");
+const require_index$7 = require("./components/currency/index.cjs");
+const require_index$8 = require("./components/icon-button/index.cjs");
+const require_index$9 = require("./components/keycap/index.cjs");
+const require_index$10 = require("./components/link/index.cjs");
+const require_index$11 = require("./components/list-item/index.cjs");
+const require_index$12 = require("./components/separator/index.cjs");
+const require_index$13 = require("./components/sheet/index.cjs");
+const require_index$14 = require("./components/tabs/index.cjs");
+const require_index$15 = require("./components/text/index.cjs");
+const require_index$16 = require("./components/text-field/index.cjs");
 exports.Avatar = require_index.default;
 exports.Badge = require_index$1.default;
 exports.Button = require_index$2.default;
 exports.Card = require_index$3.default;
 exports.Chip = require_index$4.default;
-exports.Currency = require_index$5.default;
-exports.IconButton = require_index$6.default;
-exports.Link = require_index$7.default;
-exports.ListItem = require_index$8.default;
-exports.Separator = require_index$9.default;
-exports.Sheet = require_index$10.default;
-exports.Tabs = require_index$11.default;
-exports.Text = require_index$12.default;
-exports.TextField = require_index$13.default;
+exports.Code = require_index$5.default;
+exports.CopyField = require_index$6.default;
+exports.Currency = require_index$7.default;
+exports.IconButton = require_index$8.default;
+exports.Keycap = require_index$9.default;
+exports.Link = require_index$10.default;
+exports.ListItem = require_index$11.default;
+exports.Separator = require_index$12.default;
+exports.Sheet = require_index$13.default;
+exports.Tabs = require_index$14.default;
+exports.Text = require_index$15.default;
+exports.TextField = require_index$16.default;

package/dist/cjs/index.d.cts

@@ -3,8 +3,11 @@ import Badge, { BadgeProps } from "./components/badge/index.cjs";
 import Button, { ButtonProps } from "./components/button/index.cjs";
 import Card, { CardProps } from "./components/card/index.cjs";
 import Chip, { ChipProps } from "./components/chip/index.cjs";
+import Code, { CodeProps } from "./components/code/index.cjs";
+import CopyField, { CopyFieldProps } from "./components/copy-field/index.cjs";
 import Currency, { CurrencyProps } from "./components/currency/index.cjs";
 import IconButton, { IconButtonProps } from "./components/icon-button/index.cjs";
+import Keycap, { KeycapProps } from "./components/keycap/index.cjs";
 import Link, { LinkProps } from "./components/link/index.cjs";
 import ListItem, { ListItemProps } from "./components/list-item/index.cjs";
 import Separator, { SeparatorProps } from "./components/separator/index.cjs";
@@ -13,4 +16,4 @@ import Tabs, { TabsProps } from "./components/tabs/index.cjs";
 import Text, { TextProps } from "./components/text/index.cjs";
 import TextField, { TextFieldProps } from "./components/text-field/index.cjs";
 import "./components/index.cjs";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/components/code/index.d.ts

@@ -0,0 +1,11 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/code/index.d.ts
+type CodeProps = useRender.ComponentProps<'code'>;
+/**
+ * A fragment of code, a path, or an identifier set in the mono face. It
+ * renders a `<code>` and takes its scale from the text around it.
+ */
+declare function Code({ render, ...props }: CodeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type CodeProps, Code as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/code/index.js

@@ -0,0 +1,51 @@
+import { useRender } from "@base-ui/react/use-render";
+import { c } from "react/compiler-runtime";
+//#region src/components/code/index.tsx
+/**
+* A fragment of code, a path, or an identifier set in the mono face. It
+* renders a `<code>` and takes its scale from the text around it.
+*/
+function Code(t0) {
+	const $ = c(9);
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = render;
+	} else {
+		props = $[1];
+		render = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { className: "x139gbkf xbppi91 x1s8wshw xj0a0fe" };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props) {
+		t2 = {
+			...props,
+			...t1
+		};
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== render || $[7] !== t2) {
+		t3 = {
+			defaultTagName: "code",
+			props: t2,
+			render
+		};
+		$[6] = render;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return useRender(t3);
+}
+//#endregion
+export { Code as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/code/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/code/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// Sized in em rather than px, so a fragment of code takes the scale of\n// whatever it interrupts. A mono face at the same nominal size as the prose\n// around it reads a little larger — its glyphs are wider and its x-height\n// taller — so 0.875em is what makes the two look level rather than what makes\n// them measure the same.\n//\n// No background. The mono face against the serif and sans faces the rest of\n// the system uses is already an unmistakable signal, and a tint here would\n// introduce a second surface inside Card and Sheet, competing with the\n// hierarchy those already establish. A call site wanting one can wrap this.\n\ntype CodeProps = useRender.ComponentProps<'code'>;\n\n/**\n * A fragment of code, a path, or an identifier set in the mono face. It\n * renders a `<code>` and takes its scale from the text around it.\n */\nfunction Code({\n  render,\n  ...props\n}: CodeProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'code',\n    props: {\n      ...props,\n      ...{\n        className: \"x139gbkf xbppi91 x1s8wshw xj0a0fe\"\n      }\n    },\n    render\n  });\n}\nexport type { CodeProps };\nexport default Code;"],"mappings":";;;;;;;AAsBA,SAAA,KAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAc,CAAA,CAAA,WAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQH,KAAA,EAAA,WACU,oCACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAM,OACf;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}

package/dist/components/copy-field/index.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes } from "react";
+//#region src/components/copy-field/index.d.ts
+type CopyFieldProps = {
+  /**
+   * What the button says once the value has been copied. It reverts to
+   * `copyLabel` on its own after a couple of seconds.
+   * @default 'Copied'
+   */
+  copiedLabel?: string;
+  /**
+   * What the button says at rest.
+   * @default 'Copy'
+   */
+  copyLabel?: string;
+  /**
+   * Called with the value after it reaches the clipboard, never before.
+   *
+   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which
+   * already has an `onCopy` of its own — React's handler for the native copy
+   * event, fired when the reader presses the copy shortcut inside the element.
+   * The two are different moments, and a prop that quietly shadowed the
+   * built-in would be a trap rather than a convenience.
+   */
+  onCopied?: (value: string) => void;
+  /** The text shown, and the text copied. */
+  value: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+/**
+ * A value to be read and taken away — a repository URL, a token, a command.
+ * It shows the value in the mono face and copies it on request, confirming
+ * on the button itself.
+ */
+declare function CopyField({ copiedLabel, copyLabel, onCopied, value, ...props }: CopyFieldProps): import("react").JSX.Element;
+//#endregion
+export { type CopyFieldProps, CopyField as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/copy-field/index.js

@@ -0,0 +1,59 @@
+import Button from "../button/index.js";
+import Code from "../code/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/copy-field/index.tsx
+const COPIED_RESET_MS = 2e3;
+/**
+* A value to be read and taken away — a repository URL, a token, a command.
+* It shows the value in the mono face and copies it on request, confirming
+* on the button itself.
+*/
+function CopyField({ copiedLabel = "Copied", copyLabel = "Copy", onCopied, value, ...props }) {
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => {
+		clearTimeout(timer.current);
+	}, []);
+	const handleCopy = useCallback(() => {
+		const write = async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+			} catch {
+				setCopied(false);
+				return;
+			}
+			setCopied(true);
+			onCopied?.(value);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => {
+				setCopied(false);
+			}, COPIED_RESET_MS);
+		};
+		write();
+	}, [onCopied, value]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: "x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x78zum5 x126z3so xmqoko8 x18fpw6u",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "x1iyjqo2 x1b35g6e xeuugli",
+				children: /* @__PURE__ */ jsx(Code, { children: value })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onClick: handleCopy,
+				size: "xs",
+				variant: "text",
+				children: copied ? copiedLabel : copyLabel
+			}),
+			/* @__PURE__ */ jsx("output", {
+				className: "xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft",
+				children: copied ? copiedLabel : ""
+			})
+		]
+	});
+}
+//#endregion
+export { CopyField as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/copy-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/copy-field/index.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Button from '../button';\nimport Code from '../code';\n\n// How long the confirmation stands before the control returns to offering the\n// copy again. Not a motion token: those are transition durations, measured in\n// hundreds of milliseconds, and this is a dwell — long enough to be read\n// without being long enough to leave the button lying about what it will do.\nconst COPIED_RESET_MS = 2000;\ntype CopyFieldProps = {\n  /**\n   * What the button says once the value has been copied. It reverts to\n   * `copyLabel` on its own after a couple of seconds.\n   * @default 'Copied'\n   */\n  copiedLabel?: string;\n  /**\n   * What the button says at rest.\n   * @default 'Copy'\n   */\n  copyLabel?: string;\n  /**\n   * Called with the value after it reaches the clipboard, never before.\n   *\n   * Named `onCopied` rather than `onCopy` because the root is a `<div>`, which\n   * already has an `onCopy` of its own — React's handler for the native copy\n   * event, fired when the reader presses the copy shortcut inside the element.\n   * The two are different moments, and a prop that quietly shadowed the\n   * built-in would be a trap rather than a convenience.\n   */\n  onCopied?: (value: string) => void;\n  /** The text shown, and the text copied. */\n  value: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;\n\n/**\n * A value to be read and taken away — a repository URL, a token, a command.\n * It shows the value in the mono face and copies it on request, confirming\n * on the button itself.\n */\nfunction CopyField({\n  copiedLabel = 'Copied',\n  copyLabel = 'Copy',\n  onCopied,\n  value,\n  ...props\n}: CopyFieldProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  // Without this, a field unmounted inside the dwell leaves a timer holding a\n  // setState for a tree that is gone.\n  useEffect(() => () => {\n    clearTimeout(timer.current);\n  }, []);\n  const handleCopy = useCallback(() => {\n    const write = async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n      } catch {\n        // A clipboard write is refused outside a secure context and wherever\n        // the permission is denied, and neither is something the call site can\n        // fix. Staying at rest is the honest report: the value is not on the\n        // clipboard, so the control must not claim it is.\n        setCopied(false);\n        return;\n      }\n      setCopied(true);\n      onCopied?.(value);\n      clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setCopied(false);\n      }, COPIED_RESET_MS);\n    };\n    void write();\n  }, [onCopied, value]);\n  return <div {...props} className=\"x6s0dn4 x14s9m32 x1fwvt7v x1xdvaa9 x1y0btm7 xmkeg23 x78zum5 x126z3so xmqoko8 x18fpw6u\">\n      <span className=\"x1iyjqo2 x1b35g6e xeuugli\">\n        <Code>{value}</Code>\n      </span>\n      <Button onClick={handleCopy} size=\"xs\" variant=\"text\">\n        {copied ? copiedLabel : copyLabel}\n      </Button>\n      {/* The button's own label changes, but a label changing under a screen\n          reader is not reliably announced. This is. `<output>` carries an\n          implicit role of status, so it needs no role attribute of its own. */}\n      <output className=\"xjm9jq1 x1hyvwdk x1i1rx1s xb3r6kr x10l6tqk xuxw1ft\">\n        {copied ? copiedLabel : ''}\n      </output>\n    </div>;\n}\nexport type { CopyFieldProps };\nexport default CopyField;"],"mappings":";;;;;AAYA,MAAM,kBAAkB;;;;;;AAgCxB,SAAS,UAAU,EACjB,cAAc,UACd,YAAY,QACZ,UACA,OACA,GAAG,SACc;CACjB,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,QAAQ,OAAkD,KAAA,CAAS;CAIzE,sBAAsB;EACpB,aAAa,MAAM,OAAO;CAC5B,GAAG,CAAA,CAAE;CACL,MAAM,aAAa,kBAAkB;EACnC,MAAM,QAAQ,YAAY;GACxB,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;GAC3C,QAAQ;IAKN,UAAU,KAAK;IACf;GACF;GACA,UAAU,IAAI;GACd,WAAW,KAAK;GAChB,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB;IAC/B,UAAU,KAAK;GACjB,GAAG,eAAe;EACpB;EACA,MAAW;CACb,GAAG,CAAC,UAAU,KAAK,CAAC;CACpB,OAAO,qBAAC,OAAD;EAAK,GAAI;EAAO,WAAU;EAA1B,UAAA;GACH,oBAAC,QAAD;IAAM,WAAU;IACd,UAAA,oBAAC,MAAD,EAAA,UAAO,MAAY,CAAA;GACf,CAAA;GACN,oBAAC,QAAD;IAAQ,SAAS;IAAY,MAAK;IAAK,SAAQ;IAC5C,UAAA,SAAS,cAAc;GAClB,CAAA;GAIR,oBAAC,UAAD;IAAQ,WAAU;IACf,UAAA,SAAS,cAAc;GAClB,CAAA;EACL;;AACT"}

package/dist/components/index.d.ts

@@ -3,8 +3,11 @@ import Badge, { BadgeProps } from "./badge/index.js";
 import Button, { ButtonProps } from "./button/index.js";
 import Card, { CardProps } from "./card/index.js";
 import Chip, { ChipProps } from "./chip/index.js";
+import Code, { CodeProps } from "./code/index.js";
+import CopyField, { CopyFieldProps } from "./copy-field/index.js";
 import Currency, { CurrencyProps } from "./currency/index.js";
 import IconButton, { IconButtonProps } from "./icon-button/index.js";
+import Keycap, { KeycapProps } from "./keycap/index.js";
 import Link, { LinkProps } from "./link/index.js";
 import ListItem, { ListItemProps } from "./list-item/index.js";
 import Separator, { SeparatorProps } from "./separator/index.js";
@@ -12,4 +15,4 @@ import Sheet, { SheetProps } from "./sheet/index.js";
 import Tabs, { TabsProps } from "./tabs/index.js";
 import Text, { TextProps } from "./text/index.js";
 import TextField, { TextFieldProps } from "./text-field/index.js";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/components/keycap/index.d.ts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/keycap/index.d.ts
+type KeycapProps = useRender.ComponentProps<'kbd'>;
+/**
+ * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
+ * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A
+ * chord is several of these, combined at the call site.
+ */
+declare function Keycap({ render, ...props }: KeycapProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { type KeycapProps, Keycap as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/keycap/index.js

@@ -0,0 +1,52 @@
+import { useRender } from "@base-ui/react/use-render";
+import { c } from "react/compiler-runtime";
+//#region src/components/keycap/index.tsx
+/**
+* A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,
+* `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A
+* chord is several of these, combined at the call site.
+*/
+function Keycap(t0) {
+	const $ = c(9);
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = render;
+	} else {
+		props = $[1];
+		render = $[2];
+	}
+	let t1;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { className: "xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft" };
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props) {
+		t2 = {
+			...props,
+			...t1
+		};
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== render || $[7] !== t2) {
+		t3 = {
+			defaultTagName: "kbd",
+			props: t2,
+			render
+		};
+		$[6] = render;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return useRender(t3);
+}
+//#endregion
+export { Keycap as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/keycap/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render';\nimport * as stylex from '@stylexjs/stylex';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n\ntype KeycapProps = useRender.ComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  // stylex.props() spreads after `props` for the same reason Text and Currency\n  // do it: it wins over a consumer-supplied className rather than merging with\n  // one, so which of the two applies is not left to stylesheet order.\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...{\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;AA2BA,SAAA,OAAA,IAAA;CAAA,MAAA,IAAA,EAAA,CAAA;CAAA,IAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EAAgB,CAAA,CAAA,WAAA,SAAA;EAGF,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA;EAAA,QAAA,EAAA;EAAA,SAAA,EAAA;CAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA,IAAA,2BAAA,GAAA;EAQL,KAAA,EAAA,WACU,8GACb;EAAC,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAJI,KAAA;GAAA,GACF;GAAK,GACL;EAGL;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,UAAA,EAAA,OAAA,IAAA;EAPc,KAAA;GAAA,gBACC;GAAK,OACd;GAKN;EAEH;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATM,UAAU,EAShB;AAAC"}

package/dist/index.d.ts

@@ -3,8 +3,11 @@ import Badge, { BadgeProps } from "./components/badge/index.js";
 import Button, { ButtonProps } from "./components/button/index.js";
 import Card, { CardProps } from "./components/card/index.js";
 import Chip, { ChipProps } from "./components/chip/index.js";
+import Code, { CodeProps } from "./components/code/index.js";
+import CopyField, { CopyFieldProps } from "./components/copy-field/index.js";
 import Currency, { CurrencyProps } from "./components/currency/index.js";
 import IconButton, { IconButtonProps } from "./components/icon-button/index.js";
+import Keycap, { KeycapProps } from "./components/keycap/index.js";
 import Link, { LinkProps } from "./components/link/index.js";
 import ListItem, { ListItemProps } from "./components/list-item/index.js";
 import Separator, { SeparatorProps } from "./components/separator/index.js";
@@ -13,4 +16,4 @@ import Tabs, { TabsProps } from "./components/tabs/index.js";
 import Text, { TextProps } from "./components/text/index.js";
 import TextField, { TextFieldProps } from "./components/text-field/index.js";
 import "./components/index.js";
-export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };
+export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Code, type CodeProps, CopyField, type CopyFieldProps, Currency, type CurrencyProps, IconButton, type IconButtonProps, Keycap, type KeycapProps, Link, type LinkProps, ListItem, type ListItemProps, Separator, type SeparatorProps, Sheet, type SheetProps, Tabs, type TabsProps, Text, TextField, type TextFieldProps, type TextProps };

package/dist/index.js

@@ -3,8 +3,11 @@ import Badge from "./components/badge/index.js";
 import Button from "./components/button/index.js";
 import Card from "./components/card/index.js";
 import Chip from "./components/chip/index.js";
+import Code from "./components/code/index.js";
+import CopyField from "./components/copy-field/index.js";
 import Currency from "./components/currency/index.js";
 import IconButton from "./components/icon-button/index.js";
+import Keycap from "./components/keycap/index.js";
 import Link from "./components/link/index.js";
 import ListItem from "./components/list-item/index.js";
 import Separator from "./components/separator/index.js";
@@ -12,4 +15,4 @@ import Sheet from "./components/sheet/index.js";
 import Tabs from "./components/tabs/index.js";
 import Text from "./components/text/index.js";
 import TextField from "./components/text-field/index.js";
-export { Avatar, Badge, Button, Card, Chip, Currency, IconButton, Link, ListItem, Separator, Sheet, Tabs, Text, TextField };
+export { Avatar, Badge, Button, Card, Chip, Code, CopyField, Currency, IconButton, Keycap, Link, ListItem, Separator, Sheet, Tabs, Text, TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "description": "A React component library built on Base UI primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -63,7 +63,7 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.2.1",
+    "@kanso-labs/unplugin-style-dictionary": "0.2.2",
     "@rolldown/plugin-babel": "0.2.3",
     "@storybook/addon-a11y": "10.5.10",
     "@storybook/addon-docs": "10.5.10",