@mitcsutt/kiln-ui 0.1.0

package/dist/components/overlays/Sheet/Sheet.module.js

@@ -0,0 +1,20 @@
+//#region src/components/overlays/Sheet/Sheet.module.css
+var e = "kiln-Sheet__overlay", t = "kiln-Sheet__content", n = "kiln-Sheet__handle", r = "kiln-Sheet__header", i = "kiln-Sheet__heading", a = "kiln-Sheet__title", o = "kiln-Sheet__description", s = "kiln-Sheet__body", c = "kiln-Sheet__footer", l = {
+	overlay: e,
+	"fade-in": "kiln-Sheet__fade-in",
+	"fade-out": "kiln-Sheet__fade-out",
+	content: t,
+	handle: n,
+	header: r,
+	"slide-in": "kiln-Sheet__slide-in",
+	"slide-out": "kiln-Sheet__slide-out",
+	heading: i,
+	title: a,
+	description: o,
+	body: s,
+	footer: c
+};
+//#endregion
+export { s as body, t as content, l as default, o as description, c as footer, n as handle, r as header, i as heading, e as overlay, a as title };
+
+//# sourceMappingURL=Sheet.module.js.map

package/dist/components/overlays/Sheet/Sheet.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.module.js","names":["overlay","content","handle","header","heading","title","description","body","footer","Sheet_module_default"],"sources":["../../../../src/components/overlays/Sheet/Sheet.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --sheet-radius    default var(--radius-surface)  (only the corners facing the page)\n *   --sheet-shadow    default var(--shadow-overlay)\n *   --sheet-border    default var(--color-line-strong)\n *   --sheet-surface   default var(--color-surface-raised)\n *\n * Slides in with --ease-out in every theme: a spring would overshoot past the screen edge.\n */\n\n.overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-overlay);\n  background: var(--color-scrim);\n}\n.overlay[data-state='open'] {\n  animation: fade-in var(--dur-3) var(--ease-out);\n}\n.overlay[data-state='closed'] {\n  animation: fade-out var(--dur-2) var(--ease-in-out);\n}\n\n.content {\n  --_radius: var(--sheet-radius, var(--radius-surface));\n  --_edge: var(--border-width) solid var(--sheet-border, var(--color-line-strong));\n\n  position: fixed;\n  z-index: var(--z-overlay);\n  display: flex;\n  flex-direction: column;\n  background: var(--sheet-surface, var(--color-surface-raised));\n  box-shadow: var(--sheet-shadow, var(--shadow-overlay));\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  font-size: var(--text-md);\n  line-height: var(--leading-body);\n}\n.content:focus {\n  outline: none;\n}\n\n/*\n * Sizes: side sheets read --_side-size (width), bottom sheets --_bottom-size (max height),\n * so a sheet that changes side per breakpoint keeps its size.\n */\n.content[data-size='sm'] {\n  --_side-size: calc(var(--width-narrow) * 0.75);\n  --_bottom-size: 50%;\n}\n.content[data-size='md'] {\n  --_side-size: var(--width-narrow);\n  --_bottom-size: 75%;\n}\n.content[data-size='lg'] {\n  --_side-size: var(--width-text);\n  --_bottom-size: calc(100% - var(--space-7));\n}\n\n/*\n * Sides. Every side rule sets the same full set of properties, so a later breakpoint\n * (`data-side-md`, `data-side-lg`, written only when `side` is responsive) cleanly\n * replaces an earlier one — including --_from, which drives the slide animation.\n *   right/left: full height, width by size, a gap of scrim always left to tap.\n *   bottom:     phone-width, capped to a readable column on large screens, grab handle.\n */\n.content[data-side='right'] {\n  inset-block: 0;\n  inset-inline: auto 0;\n  inline-size: min(var(--_side-size), calc(100% - var(--space-7)));\n  max-block-size: none;\n  margin-inline: 0;\n  border: 0;\n  border-inline-start: var(--_edge);\n  border-start-start-radius: var(--_radius);\n  border-end-start-radius: var(--_radius);\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n  --_from: 100% 0;\n}\n.content[data-side='right'] > .handle {\n  display: none;\n}\n.content[data-side='right'] > .header {\n  padding-block-start: var(--space-5);\n}\n.content[data-side='left'] {\n  inset-block: 0;\n  inset-inline: 0 auto;\n  inline-size: min(var(--_side-size), calc(100% - var(--space-7)));\n  max-block-size: none;\n  margin-inline: 0;\n  border: 0;\n  border-inline-end: var(--_edge);\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n  border-start-end-radius: var(--_radius);\n  border-end-end-radius: var(--_radius);\n  --_from: -100% 0;\n}\n.content[data-side='left'] > .handle {\n  display: none;\n}\n.content[data-side='left'] > .header {\n  padding-block-start: var(--space-5);\n}\n.content[data-side='bottom'] {\n  inset-block: auto 0;\n  inset-inline: 0;\n  inline-size: min(100%, var(--width-text));\n  max-block-size: var(--_bottom-size);\n  margin-inline: auto;\n  border: var(--_edge);\n  border-block-end: 0;\n  border-start-start-radius: var(--_radius);\n  border-start-end-radius: var(--_radius);\n  border-end-start-radius: 0;\n  border-end-end-radius: 0;\n  --_from: 0 100%;\n}\n.content[data-side='bottom'] > .handle {\n  display: block;\n}\n.content[data-side='bottom'] > .header {\n  padding-block-start: var(--space-3);\n}\n\n@media (min-width: 48em) {\n  .content[data-side-md='right'] {\n    inset-block: 0;\n    inset-inline: auto 0;\n    inline-size: min(var(--_side-size), calc(100% - var(--space-7)));\n    max-block-size: none;\n    margin-inline: 0;\n    border: 0;\n    border-inline-start: var(--_edge);\n    border-start-start-radius: var(--_radius);\n    border-end-start-radius: var(--_radius);\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n    --_from: 100% 0;\n  }\n  .content[data-side-md='right'] > .handle {\n    display: none;\n  }\n  .content[data-side-md='right'] > .header {\n    padding-block-start: var(--space-5);\n  }\n  .content[data-side-md='left'] {\n    inset-block: 0;\n    inset-inline: 0 auto;\n    inline-size: min(var(--_side-size), calc(100% - var(--space-7)));\n    max-block-size: none;\n    margin-inline: 0;\n    border: 0;\n    border-inline-end: var(--_edge);\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    border-start-end-radius: var(--_radius);\n    border-end-end-radius: var(--_radius);\n    --_from: -100% 0;\n  }\n  .content[data-side-md='left'] > .handle {\n    display: none;\n  }\n  .content[data-side-md='left'] > .header {\n    padding-block-start: var(--space-5);\n  }\n  .content[data-side-md='bottom'] {\n    inset-block: auto 0;\n    inset-inline: 0;\n    inline-size: min(100%, var(--width-text));\n    max-block-size: var(--_bottom-size);\n    margin-inline: auto;\n    border: var(--_edge);\n    border-block-end: 0;\n    border-start-start-radius: var(--_radius);\n    border-start-end-radius: var(--_radius);\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    --_from: 0 100%;\n  }\n  .content[data-side-md='bottom'] > .handle {\n    display: block;\n  }\n  .content[data-side-md='bottom'] > .header {\n    padding-block-start: var(--space-3);\n  }\n}\n\n@media (min-width: 64em) {\n  .content[data-side-lg='right'] {\n    inset-block: 0;\n    inset-inline: auto 0;\n    inline-size: min(var(--_side-size), calc(100% - var(--space-7)));\n    max-block-size: none;\n    margin-inline: 0;\n    border: 0;\n    border-inline-start: var(--_edge);\n    border-start-start-radius: var(--_radius);\n    border-end-start-radius: var(--_radius);\n    border-start-end-radius: 0;\n    border-end-end-radius: 0;\n    --_from: 100% 0;\n  }\n  .content[data-side-lg='right'] > .handle {\n    display: none;\n  }\n  .content[data-side-lg='right'] > .header {\n    padding-block-start: var(--space-5);\n  }\n  .content[data-side-lg='left'] {\n    inset-block: 0;\n    inset-inline: 0 auto;\n    inline-size: min(var(--_side-size), calc(100% - var(--space-7)));\n    max-block-size: none;\n    margin-inline: 0;\n    border: 0;\n    border-inline-end: var(--_edge);\n    border-start-start-radius: 0;\n    border-end-start-radius: 0;\n    border-start-end-radius: var(--_radius);\n    border-end-end-radius: var(--_radius);\n    --_from: -100% 0;\n  }\n  .content[data-side-lg='left'] > .handle {\n    display: none;\n  }\n  .content[data-side-lg='left'] > .header {\n    padding-block-start: var(--space-5);\n  }\n  .content[data-side-lg='bottom'] {\n    inset-block: auto 0;\n    inset-inline: 0;\n    inline-size: min(100%, var(--width-text));\n    max-block-size: var(--_bottom-size);\n    margin-inline: auto;\n    border: var(--_edge);\n    border-block-end: 0;\n    border-start-start-radius: var(--_radius);\n    border-start-end-radius: var(--_radius);\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    --_from: 0 100%;\n  }\n  .content[data-side-lg='bottom'] > .handle {\n    display: block;\n  }\n  .content[data-side-lg='bottom'] > .header {\n    padding-block-start: var(--space-3);\n  }\n}\n\n.content[data-state='open'] {\n  animation: slide-in var(--dur-3) var(--ease-out);\n}\n.content[data-state='closed'] {\n  animation: slide-out var(--dur-2) var(--ease-in-out);\n}\n\n.handle {\n  display: none;\n  flex: none;\n  align-self: center;\n  inline-size: var(--space-7);\n  block-size: var(--space-1);\n  margin-block-start: var(--space-3);\n  border-radius: var(--radius-chip);\n  background: var(--color-line-strong);\n}\n\n.header {\n  flex: none;\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-5) var(--space-5) var(--space-4);\n  border-block-end: 1px solid var(--color-line);\n}\n/* The close button's hit area sits inside the padding, optically aligned to the title. */\n.header > :last-child:not(.heading) {\n  margin-block-start: calc(-1 * var(--space-1));\n  margin-inline-end: calc(-1 * var(--space-2));\n}\n\n.heading {\n  display: grid;\n  gap: var(--space-1);\n  min-inline-size: 0;\n}\n\n.title {\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  font-size: var(--text-xl);\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n.description {\n  font-size: var(--text-sm);\n  color: var(--color-ink-muted);\n}\n\n.body {\n  --_pad: var(--space-5);\n\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-block-size: 0;\n  padding: var(--space-4) var(--_pad) var(--_pad);\n  overflow-y: auto;\n  overscroll-behavior: contain;\n}\n\n.footer {\n  --_pad: var(--space-5); /* matches .body padding */\n\n  position: sticky;\n  inset-block-end: calc(-1 * var(--_pad));\n  display: flex;\n  flex-wrap: wrap-reverse;\n  justify-content: flex-end;\n  gap: var(--space-3);\n  margin-block: auto calc(-1 * var(--_pad));\n  margin-inline: calc(-1 * var(--_pad));\n  padding: var(--space-4) var(--_pad) var(--_pad);\n  border-block-start: 1px solid var(--color-line);\n  background: var(--sheet-surface, var(--color-surface-raised));\n}\n\n@keyframes slide-in {\n  from {\n    translate: var(--_from);\n  }\n}\n@keyframes slide-out {\n  to {\n    translate: var(--_from);\n  }\n}\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n@keyframes fade-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .overlay[data-state],\n  .content[data-state] {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/overlays/Sheet/index.d.ts

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet.js';
+export type { SheetProps, SheetSide, SheetSize, SheetResponsiveSide, SheetTriggerProps, SheetContentProps, SheetFooterProps, SheetTitleProps, SheetDescriptionProps, SheetCloseProps, } from './Sheet.js';

package/dist/components/overlays/Tooltip/Tooltip.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from 'react';
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+export type TooltipProviderProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;
+/**
+ * Shares open/skip delays between tooltips, so moving along a toolbar shows each hint
+ * instantly after the first. Put one near the app root. Tooltips work without it.
+ */
+export declare function TooltipProvider({ delayDuration, skipDelayDuration, ...rest }: TooltipProviderProps): import("react").JSX.Element;
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, 'content' | 'side' | 'align' | 'children'> {
+    /** The hint. Short — a label or one sentence. It's announced as the trigger's description. */
+    content: ReactNode;
+    /**
+     * The trigger: a single focusable element (a button or link). It receives the ref and
+     * event handlers, so custom components must forward both.
+     */
+    children: ReactElement;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    /** Hover delay before opening, in ms. Keyboard focus opens immediately. */
+    delay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Portal target. Defaults to `document.body`; its theme scope is also used. */
+    container?: HTMLElement | null;
+}
+/**
+ * A small label that appears on hover and on keyboard focus. Portalled, so it's never
+ * clipped by an `overflow: hidden` card. Not for anything interactive — use `Popover`.
+ *
+ * <Tooltip content="Copy link"><IconButton … /></Tooltip>
+ */
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -0,0 +1,64 @@
+import { cx as e } from "../../../utils/cx.js";
+import { PortalAnchorContext as t, composeRefs as n, usePortalAnchorRef as r, usePortalTheme as i } from "../usePortalTheme.js";
+import a from "./Tooltip.module.js";
+import { createContext as o, forwardRef as s, useContext as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Tooltip as d } from "radix-ui";
+//#region src/components/overlays/Tooltip/Tooltip.tsx
+var f = o(!1);
+function p({ delayDuration: e = 500, skipDelayDuration: t = 300, ...n }) {
+	return /* @__PURE__ */ l(f.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ l(d.Provider, {
+			delayDuration: e,
+			skipDelayDuration: t,
+			...n
+		})
+	});
+}
+var m = s(function({ container: t, className: n, children: r, ...o }, s) {
+	let c = i(t);
+	return /* @__PURE__ */ u(d.Content, {
+		ref: s,
+		className: e(a.content, n),
+		collisionPadding: 8,
+		...c,
+		...o,
+		children: [r, /* @__PURE__ */ l(d.Arrow, {
+			className: a.arrow,
+			width: 10,
+			height: 5
+		})]
+	});
+}), h = s(function({ content: e, children: i, side: a = "top", align: o = "center", delay: s, open: h, defaultOpen: g, onOpenChange: _, container: v, sideOffset: y = 6, ...b }, x) {
+	let S = c(f), C = r(), w = /* @__PURE__ */ l(t.Provider, {
+		value: C,
+		children: /* @__PURE__ */ u(d.Root, {
+			delayDuration: s,
+			open: h,
+			defaultOpen: g,
+			onOpenChange: _,
+			children: [/* @__PURE__ */ l(d.Trigger, {
+				asChild: !0,
+				ref: n(C),
+				children: i
+			}), /* @__PURE__ */ l(d.Portal, {
+				container: v,
+				children: /* @__PURE__ */ l(m, {
+					ref: x,
+					container: v,
+					side: a,
+					align: o,
+					sideOffset: y,
+					...b,
+					children: e
+				})
+			})]
+		})
+	});
+	return S ? w : /* @__PURE__ */ l(p, { children: w });
+});
+//#endregion
+export { h as Tooltip, p as TooltipProvider };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/overlays/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":["TooltipPrimitive","styles","Tooltip","Tooltip_module_default","HasProvider","createContext","TooltipProvider","rest","Tooltip","ContentInner","forwardRef","theme","usePortalTheme","container","cx","className","children","Tooltip$1","hasProvider","useContext","anchor","usePortalAnchorRef","tooltip","PortalAnchorContext","delay","composeRefs","content"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react'\nimport { Tooltip as TooltipPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport {\n  PortalAnchorContext,\n  composeRefs,\n  usePortalAnchorRef,\n  usePortalTheme,\n} from '#components/overlays/usePortalTheme'\nimport styles from './Tooltip.module.css'\n\nconst HasProvider = createContext(false)\n\nexport type TooltipProviderProps = ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>\n\n/**\n * Shares open/skip delays between tooltips, so moving along a toolbar shows each hint\n * instantly after the first. Put one near the app root. Tooltips work without it.\n */\nexport function TooltipProvider({\n  delayDuration = 500,\n  skipDelayDuration = 300,\n  ...rest\n}: TooltipProviderProps) {\n  return (\n    <HasProvider.Provider value>\n      <TooltipPrimitive.Provider\n        delayDuration={delayDuration}\n        skipDelayDuration={skipDelayDuration}\n        {...rest}\n      />\n    </HasProvider.Provider>\n  )\n}\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left'\nexport type TooltipAlign = 'start' | 'center' | 'end'\n\nexport interface TooltipProps extends Omit<\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,\n  'content' | 'side' | 'align' | 'children'\n> {\n  /** The hint. Short — a label or one sentence. It's announced as the trigger's description. */\n  content: ReactNode\n  /**\n   * The trigger: a single focusable element (a button or link). It receives the ref and\n   * event handlers, so custom components must forward both.\n   */\n  children: ReactElement\n  side?: TooltipSide\n  align?: TooltipAlign\n  /** Hover delay before opening, in ms. Keyboard focus opens immediately. */\n  delay?: number\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Portal target. Defaults to `document.body`; its theme scope is also used. */\n  container?: HTMLElement | null\n}\n\nconst ContentInner = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { container?: HTMLElement | null }\n>(function ContentInner({ container, className, children, ...rest }, ref) {\n  const theme = usePortalTheme(container)\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      className={cx(styles.content, className)}\n      collisionPadding={8}\n      {...theme}\n      {...rest}\n    >\n      {children}\n      <TooltipPrimitive.Arrow className={styles.arrow} width={10} height={5} />\n    </TooltipPrimitive.Content>\n  )\n})\n\n/**\n * A small label that appears on hover and on keyboard focus. Portalled, so it's never\n * clipped by an `overflow: hidden` card. Not for anything interactive — use `Popover`.\n *\n * <Tooltip content=\"Copy link\"><IconButton … /></Tooltip>\n */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(\n  {\n    content,\n    children,\n    side = 'top',\n    align = 'center',\n    delay,\n    open,\n    defaultOpen,\n    onOpenChange,\n    container,\n    sideOffset = 6,\n    ...rest\n  },\n  ref,\n) {\n  const hasProvider = useContext(HasProvider)\n  const anchor = usePortalAnchorRef()\n  const tooltip = (\n    <PortalAnchorContext.Provider value={anchor}>\n      <TooltipPrimitive.Root\n        delayDuration={delay}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n      >\n        <TooltipPrimitive.Trigger asChild ref={composeRefs(anchor)}>\n          {children}\n        </TooltipPrimitive.Trigger>\n        <TooltipPrimitive.Portal container={container}>\n          <ContentInner\n            ref={ref}\n            container={container}\n            side={side}\n            align={align}\n            sideOffset={sideOffset}\n            {...rest}\n          >\n            {content}\n          </ContentInner>\n        </TooltipPrimitive.Portal>\n      </TooltipPrimitive.Root>\n    </PortalAnchorContext.Provider>\n  )\n  return hasProvider ? tooltip : <TooltipProvider>{tooltip}</TooltipProvider>\n})\n"],"mappings":";;;;;;;AAkBA,IAAMI,IAAcC,EAAc,EAAK;AAQvC,SAAgBC,EAAgB,EAC9B,mBAAgB,KAChB,uBAAoB,KACpB,GAAGC,KACoB;CACvB,OACE,kBAACH,EAAY,UAAb;EAAsB,OAAA;EACpB,UAAA,kBAACJ,EAAiB,UAAlB;GACiB;GACI;GACnB,GAAIO;EACL,CAAA;CACmB,CAAA;AAE1B;AA2BA,IAAME,IAAeC,EAGnB,SAAsB,EAAE,cAAW,cAAW,aAAU,GAAGH,KAAQ,GAAK;CACxE,IAAMI,IAAQC,EAAeC,CAAS;CACtC,OACE,kBAACb,EAAiB,SAAlB;EACO;EACL,WAAWc,EAAGb,EAAO,SAASc,CAAS;EACvC,kBAAkB;EAClB,GAAIJ;EACJ,GAAIJ;EALN,UAAA,CAOGS,GACD,kBAAChB,EAAiB,OAAlB;GAAwB,WAAWC,EAAO;GAAO,OAAO;GAAI,QAAQ;EAAI,CAAA,CAChD;;AAE9B,CAAC,GAQYC,IAAUQ,EAAyC,SAC9D,EACE,YACA,aACA,UAAO,OACP,WAAQ,UACR,UACA,SACA,gBACA,iBACA,cACA,gBAAa,GACb,GAAGH,KAEL,GACA;CACA,IAAMW,IAAcC,EAAWf,CAAW,GACpCgB,IAASC,EAAmB,GAC5BC,IACJ,kBAACC,EAAoB,UAArB;EAA8B,OAAOH;EACnC,UAAA,kBAACpB,EAAiB,MAAlB;GACE,eAAewB;GACT;GACO;GACC;GAJhB,UAAA,CAME,kBAACxB,EAAiB,SAAlB;IAA0B,SAAA;IAAQ,KAAKyB,EAAYL,CAAM;IACtD;GACuB,CAAA,GAC1B,kBAACpB,EAAiB,QAAlB;IAAoC;IAClC,UAAA,kBAACS,GAAD;KACO;KACM;KACL;KACC;KACK;KACZ,GAAIF;KAEH,UAAAmB;IACW,CAAA;GACS,CAAA,CACJ;;CACK,CAAA;CAEhC,OAAOR,IAAcI,IAAU,kBAAChB,GAAD,EAAA,UAAkBgB,EAAyB,CAAA;AAC5E,CAAC"}

package/dist/components/overlays/Tooltip/Tooltip.module.js

@@ -0,0 +1,11 @@
+//#region src/components/overlays/Tooltip/Tooltip.module.css
+var e = "kiln-Tooltip__content", t = "kiln-Tooltip__arrow", n = {
+	content: e,
+	"tip-in": "kiln-Tooltip__tip-in",
+	"tip-out": "kiln-Tooltip__tip-out",
+	arrow: t
+};
+//#endregion
+export { t as arrow, e as content, n as default };
+
+//# sourceMappingURL=Tooltip.module.js.map

package/dist/components/overlays/Tooltip/Tooltip.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.module.js","names":["content","arrow","Tooltip_module_default"],"sources":["../../../../src/components/overlays/Tooltip/Tooltip.module.css"],"sourcesContent":["/*\n * An inverse chip: the one place the theme's ink becomes the surface.\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --tooltip-radius    default min(var(--radius-field), var(--radius-chip))\n *   --tooltip-surface   default var(--color-surface-inverse)\n *   --tooltip-ink       default var(--color-ink-inverse)\n */\n.content {\n  --_surface: var(--tooltip-surface, var(--color-surface-inverse));\n\n  z-index: var(--z-popover);\n  max-inline-size: min(\n    calc(var(--width-narrow) * 0.5),\n    var(--radix-tooltip-content-available-width, 100vw)\n  );\n  padding: calc(var(--space-1) * 1.5) var(--space-2);\n  border-radius: var(--tooltip-radius, min(var(--radius-field), var(--radius-chip)));\n  background: var(--_surface);\n  color: var(--tooltip-ink, var(--color-ink-inverse));\n  font-family: var(--font-text);\n  font-size: var(--text-xs);\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  text-wrap: pretty;\n  transform-origin: var(--radix-tooltip-content-transform-origin);\n  user-select: none;\n}\n\n.content[data-state='delayed-open'],\n.content[data-state='instant-open'] {\n  animation: tip-in var(--dur-1) var(--ease-out);\n}\n.content[data-state='closed'] {\n  animation: tip-out var(--dur-1) var(--ease-out);\n}\n/* Nudge in from the trigger's direction. */\n.content {\n  --_from: 0 0;\n}\n.content[data-side='top'] {\n  --_from: 0 calc(var(--space-1) * 0.5);\n}\n.content[data-side='bottom'] {\n  --_from: 0 calc(var(--space-1) * -0.5);\n}\n.content[data-side='left'] {\n  --_from: calc(var(--space-1) * 0.5) 0;\n}\n.content[data-side='right'] {\n  --_from: calc(var(--space-1) * -0.5) 0;\n}\n\n.arrow {\n  fill: var(--tooltip-surface, var(--color-surface-inverse));\n}\n\n@keyframes tip-in {\n  from {\n    opacity: 0;\n    translate: var(--_from);\n  }\n}\n@keyframes tip-out {\n  to {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .content[data-state] {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/overlays/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider } from './Tooltip.js';
+export type { TooltipProps, TooltipProviderProps, TooltipSide, TooltipAlign } from './Tooltip.js';

package/dist/components/overlays/usePortalTheme.d.ts

@@ -0,0 +1,44 @@
+import { type RefObject, type Ref } from 'react';
+/**
+ * Portal theming.
+ *
+ * Radix portals render into `document.body`, outside any nested `<ThemeScope>`. Themes
+ * are plain CSS scoped to `[data-theme]`, so portalled content would otherwise fall back
+ * to the document's theme — a Fiesta dialog opened from a Fiesta card on a Monograph page
+ * would render in Monograph.
+ *
+ * The fix: each overlay's portalled element copies the theme axes (`data-theme`,
+ * `data-mode`, `data-density`) of the place it was opened from. Tokens then resolve on
+ * the portalled element exactly as they would have in place.
+ *
+ * Source element, in order: an explicit `container` → the overlay's trigger (registered
+ * through `PortalAnchorContext`) → the element focused when the overlay opened (covers
+ * controlled dialogs with no trigger) → `<html>`.
+ */
+export declare const PORTAL_THEME_ATTRIBUTES: readonly ["data-theme", "data-mode", "data-density"];
+export interface PortalThemeAttributes {
+    'data-theme'?: string;
+    'data-mode'?: string;
+    'data-density'?: string;
+}
+type AnchorRef = RefObject<HTMLElement | null>;
+/** Set by each overlay Root; its Trigger registers itself as the theme source. */
+export declare const PortalAnchorContext: import("react").Context<AnchorRef | null>;
+/** Creates the anchor ref an overlay Root provides via `PortalAnchorContext`. */
+export declare function usePortalAnchorRef(): AnchorRef;
+/** The nearest overlay Root's anchor ref, or `null` outside one. */
+export declare function usePortalAnchor(): AnchorRef | null;
+/** Merge refs (forwarded + internal) into one callback ref. */
+export declare function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void;
+/** Reads the theme axes that apply at `source` (nearest ancestor per axis, then `<html>`). */
+export declare function readPortalTheme(source: Element | null | undefined): PortalThemeAttributes;
+/**
+ * Returns the `data-theme` / `data-mode` / `data-density` attributes to spread on a
+ * portalled overlay element. Call it in a component that mounts when the overlay opens
+ * (inside the Radix Portal), so the source is read at open time.
+ *
+ * Stays in sync while open: if any theme axis changes in the document (a mode toggle,
+ * a Storybook global) the attributes are re-read.
+ */
+export declare function usePortalTheme(container?: Element | null): PortalThemeAttributes;
+export {};

package/dist/components/overlays/usePortalTheme.js

@@ -0,0 +1,62 @@
+import { createContext as e, useContext as t, useEffect as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+//#region src/components/overlays/usePortalTheme.ts
+var o = [
+	"data-theme",
+	"data-mode",
+	"data-density"
+], s = e(null);
+function c() {
+	return i(null);
+}
+function l() {
+	return t(s);
+}
+function u(...e) {
+	return (t) => {
+		for (let n of e) typeof n == "function" ? n(t) : n && (n.current = t);
+	};
+}
+function d(e) {
+	let t = e?.ownerDocument ?? (typeof document > "u" ? void 0 : document);
+	if (!t) return {};
+	let n = {};
+	for (let r of o) {
+		let i = (e?.closest(`[${r}]`) ?? t.documentElement).getAttribute(r);
+		i !== null && (n[r] = i);
+	}
+	return n;
+}
+function f(e, t) {
+	if (t) return t;
+	if (e?.current?.isConnected) return e.current;
+	if (typeof document > "u") return null;
+	let n = document.activeElement;
+	return n && n !== document.body ? n : document.documentElement;
+}
+function p(e, t) {
+	return o.every((n) => e[n] === t[n]);
+}
+var m = typeof document > "u" ? n : r;
+function h(e) {
+	let t = l(), [n, r] = a(() => typeof document > "u" ? {} : d(f(t, e))), s = i(null);
+	return m(() => {
+		s.current = f(t, e);
+		let n = () => {
+			let e = d(s.current);
+			r((t) => p(t, e) ? t : e);
+		};
+		if (n(), typeof MutationObserver > "u") return;
+		let i = new MutationObserver(n);
+		return i.observe(document.documentElement, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [...o]
+		}), () => {
+			i.disconnect();
+		};
+	}, [t, e]), n;
+}
+//#endregion
+export { o as PORTAL_THEME_ATTRIBUTES, s as PortalAnchorContext, u as composeRefs, d as readPortalTheme, l as usePortalAnchor, c as usePortalAnchorRef, h as usePortalTheme };
+
+//# sourceMappingURL=usePortalTheme.js.map

package/dist/components/overlays/usePortalTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortalTheme.js","names":["PORTAL_THEME_ATTRIBUTES","PortalAnchorContext","createContext","usePortalAnchorRef","useRef","usePortalAnchor","useContext","composeRefs","refs","ref","node","readPortalTheme","doc","source","attrs","name","value","resolveSource","container","anchor","active","sameAttributes","a","b","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","usePortalTheme","setAttrs","useState","sourceRef","update","next","prev","observer"],"sources":["../../../src/components/overlays/usePortalTheme.ts"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type RefObject,\n  type Ref,\n} from 'react'\n\n/**\n * Portal theming.\n *\n * Radix portals render into `document.body`, outside any nested `<ThemeScope>`. Themes\n * are plain CSS scoped to `[data-theme]`, so portalled content would otherwise fall back\n * to the document's theme — a Fiesta dialog opened from a Fiesta card on a Monograph page\n * would render in Monograph.\n *\n * The fix: each overlay's portalled element copies the theme axes (`data-theme`,\n * `data-mode`, `data-density`) of the place it was opened from. Tokens then resolve on\n * the portalled element exactly as they would have in place.\n *\n * Source element, in order: an explicit `container` → the overlay's trigger (registered\n * through `PortalAnchorContext`) → the element focused when the overlay opened (covers\n * controlled dialogs with no trigger) → `<html>`.\n */\n\nexport const PORTAL_THEME_ATTRIBUTES = ['data-theme', 'data-mode', 'data-density'] as const\n\nexport interface PortalThemeAttributes {\n  'data-theme'?: string\n  'data-mode'?: string\n  'data-density'?: string\n}\n\ntype AnchorRef = RefObject<HTMLElement | null>\n\n/** Set by each overlay Root; its Trigger registers itself as the theme source. */\nexport const PortalAnchorContext = createContext<AnchorRef | null>(null)\n\n/** Creates the anchor ref an overlay Root provides via `PortalAnchorContext`. */\nexport function usePortalAnchorRef(): AnchorRef {\n  return useRef<HTMLElement | null>(null)\n}\n\n/** The nearest overlay Root's anchor ref, or `null` outside one. */\nexport function usePortalAnchor(): AnchorRef | null {\n  return useContext(PortalAnchorContext)\n}\n\n/** Merge refs (forwarded + internal) into one callback ref. */\nexport function composeRefs<T>(...refs: (Ref<T> | undefined)[]): (node: T | null) => void {\n  return (node) => {\n    for (const ref of refs) {\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    }\n  }\n}\n\n/** Reads the theme axes that apply at `source` (nearest ancestor per axis, then `<html>`). */\nexport function readPortalTheme(source: Element | null | undefined): PortalThemeAttributes {\n  const doc = source?.ownerDocument ?? (typeof document === 'undefined' ? undefined : document)\n  if (!doc) return {}\n  const attrs: PortalThemeAttributes = {}\n  for (const name of PORTAL_THEME_ATTRIBUTES) {\n    const scope = source?.closest(`[${name}]`) ?? doc.documentElement\n    const value = scope.getAttribute(name)\n    if (value !== null) attrs[name] = value\n  }\n  return attrs\n}\n\nfunction resolveSource(\n  anchor: AnchorRef | null | undefined,\n  container: Element | null | undefined,\n): Element | null {\n  if (container) return container\n  if (anchor?.current?.isConnected) return anchor.current\n  if (typeof document === 'undefined') return null\n  const active = document.activeElement\n  return active && active !== document.body ? active : document.documentElement\n}\n\nfunction sameAttributes(a: PortalThemeAttributes, b: PortalThemeAttributes): boolean {\n  return PORTAL_THEME_ATTRIBUTES.every((name) => a[name] === b[name])\n}\n\nconst useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect\n\n/**\n * Returns the `data-theme` / `data-mode` / `data-density` attributes to spread on a\n * portalled overlay element. Call it in a component that mounts when the overlay opens\n * (inside the Radix Portal), so the source is read at open time.\n *\n * Stays in sync while open: if any theme axis changes in the document (a mode toggle,\n * a Storybook global) the attributes are re-read.\n */\nexport function usePortalTheme(container?: Element | null): PortalThemeAttributes {\n  const anchor = usePortalAnchor()\n  // Portalled content never renders on the server, but guard anyway: no DOM, no attributes.\n  const [attrs, setAttrs] = useState<PortalThemeAttributes>(() =>\n    typeof document === 'undefined' ? {} : readPortalTheme(resolveSource(anchor, container)),\n  )\n  // Remember the source chosen at open time; focus moves into the overlay afterwards.\n  const sourceRef = useRef<Element | null>(null)\n\n  useIsomorphicLayoutEffect(() => {\n    sourceRef.current = resolveSource(anchor, container)\n    const update = () => {\n      const next = readPortalTheme(sourceRef.current)\n      setAttrs((prev) => (sameAttributes(prev, next) ? prev : next))\n    }\n    update()\n    if (typeof MutationObserver === 'undefined') return\n    const observer = new MutationObserver(update)\n    observer.observe(document.documentElement, {\n      subtree: true,\n      attributes: true,\n      attributeFilter: [...PORTAL_THEME_ATTRIBUTES],\n    })\n    return () => {\n      observer.disconnect()\n    }\n  }, [anchor, container])\n\n  return attrs\n}\n"],"mappings":";;AA4BA,IAAaA,IAA0B;CAAC;CAAc;CAAa;AAAc,GAWpEC,IAAsBC,EAAgC,IAAI;AAGvE,SAAgBC,IAAgC;CAC9C,OAAOC,EAA2B,IAAI;AACxC;AAGA,SAAgBC,IAAoC;CAClD,OAAOC,EAAWL,CAAmB;AACvC;AAGA,SAAgBM,EAAe,GAAGC,GAAwD;CACxF,QAAQ,MAAS;EACf,KAAK,IAAMC,KAAOD,GAChB,AAAI,OAAOC,KAAQ,aAAYA,EAAIC,CAAI,IAC9BD,MAAK,EAAI,UAAUC;CAEhC;AACF;AAGA,SAAgBC,EAAgB,GAA2D;CACzF,IAAMC,IAAMC,GAAQ,kBAAkB,OAAO,WAAa,MAAc,KAAA,IAAY;CACpF,IAAI,CAACD,GAAK,OAAO,CAAC;CAClB,IAAME,IAA+B,CAAC;CACtC,KAAK,IAAMC,KAAQf,GAAyB;EAE1C,IAAMgB,KADQH,GAAQ,QAAQ,IAAIE,EAAK,EAAE,KAAKH,EAAI,gBAAA,CAC9B,aAAaG,CAAI;EACrC,AAAIC,MAAU,SAAM,EAAMD,KAAQC;CACpC;CACA,OAAOF;AACT;AAEA,SAASG,EACP,GACA,GACgB;CAChB,IAAIC,GAAW,OAAOA;CACtB,IAAIC,GAAQ,SAAS,aAAa,OAAOA,EAAO;CAChD,IAAI,OAAO,WAAa,KAAa,OAAO;CAC5C,IAAMC,IAAS,SAAS;CACxB,OAAOA,KAAUA,MAAW,SAAS,OAAOA,IAAS,SAAS;AAChE;AAEA,SAASC,EAAe,GAA0B,GAAmC;CACnF,OAAOrB,EAAwB,OAAO,MAASsB,EAAEP,OAAUQ,EAAER,EAAK;AACpE;AAEA,IAAMS,IAA4B,OAAO,WAAa,MAAcC,IAAYC;AAUhF,SAAgBC,EAAe,GAAmD;CAChF,IAAMR,IAASd,EAAgB,GAEzB,CAACS,GAAOc,KAAYC,QACxB,OAAO,WAAa,MAAc,CAAC,IAAIlB,EAAgBM,EAAcE,GAAQD,CAAS,CAAC,CACzF,GAEMY,IAAY1B,EAAuB,IAAI;CAqB7C,OAnBAoB,QAAgC;EAC9B,EAAU,UAAUP,EAAcE,GAAQD,CAAS;EACnD,IAAMa,UAAe;GACnB,IAAMC,IAAOrB,EAAgBmB,EAAU,OAAO;GAC9C,GAAU,MAAUT,EAAeY,GAAMD,CAAI,IAAIC,IAAOD,CAAK;EAC/D;EAEA,IADAD,EAAO,GACH,OAAO,mBAAqB,KAAa;EAC7C,IAAMG,IAAW,IAAI,iBAAiBH,CAAM;EAM5C,OALAG,EAAS,QAAQ,SAAS,iBAAiB;GACzC,SAAS;GACT,YAAY;GACZ,iBAAiB,CAAC,GAAGlC,CAAuB;EAC9C,CAAC,SACY;GACX,EAAS,WAAW;EACtB;CACF,GAAG,CAACmB,GAAQD,CAAS,CAAC,GAEfJ;AACT"}

package/dist/components/typography/Amount/Amount.d.ts

@@ -0,0 +1,27 @@
+import { type NumeralProps } from '../Numeral/index.js';
+export interface AmountProps extends Omit<NumeralProps, 'format' | 'signDisplay'> {
+    /** ISO 4217 code. Default `AUD`. */
+    currency?: string;
+    /** Fraction digits. Default 2 (0 for compact unless set). */
+    precision?: number;
+    /** Show `+` on positive amounts (and `−` on negatives, as always). */
+    showSign?: boolean;
+    /**
+     * Accounting style: negatives in parentheses and in the critical tone. Non-negative
+     * amounts reserve the width of the ")" (invisibly), so decimals line up with the
+     * bracketed negatives in a right-aligned column.
+     */
+    accounting?: boolean;
+    /** Short form for big figures: `$1.2M`. */
+    compact?: boolean;
+    /** Extra `Intl.NumberFormat` options (e.g. `currencyDisplay: 'code'`). Applied last. */
+    format?: Intl.NumberFormatOptions;
+}
+/**
+ * Money. Built on <Numeral>: tabular figures in the theme's numeric face, a true minus,
+ * en-AU / AUD by default. A currency the locale has no symbol for shows its narrow symbol
+ * when that is unambiguous (GBP → £ in en-AU) and its ISO code otherwise (USD in en-AU).
+ *
+ * <Amount value={-1234.5} accounting />  →  ($1,234.50) in the critical tone
+ */
+export declare const Amount: import("react").ForwardRefExoticComponent<AmountProps & import("react").RefAttributes<HTMLDataElement>>;

package/dist/components/typography/Amount/Amount.js

@@ -0,0 +1,67 @@
+import { cx as e } from "../../../utils/cx.js";
+import { signOf as t } from "../Numeral/format.js";
+import { Numeral as n } from "../Numeral/Numeral.js";
+import r from "./Amount.module.js";
+import { forwardRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/typography/Amount/Amount.tsx
+var c = /* @__PURE__ */ new Set([
+	"$",
+	"¥",
+	"kr",
+	"Kr",
+	"₩",
+	"₱",
+	"Rs"
+]);
+function l(e, t) {
+	try {
+		let n = (n) => new Intl.NumberFormat(e, {
+			style: "currency",
+			currency: t,
+			currencyDisplay: n
+		}).formatToParts(1).find((e) => e.type === "currency")?.value;
+		if (n("symbol") !== t.toUpperCase()) return "symbol";
+		let r = n("narrowSymbol");
+		return r !== void 0 && !c.has(r) ? "narrowSymbol" : "symbol";
+	} catch {
+		return "symbol";
+	}
+}
+var u = i(function({ value: i, currency: c = "AUD", locale: u = "en-AU", precision: d, showSign: f = !1, accounting: p = !1, compact: m = !1, format: h, tone: g, suffix: _, className: v, ...y }, b) {
+	let x = d ?? (m ? void 0 : 2), S = {
+		style: "currency",
+		currency: c,
+		currencyDisplay: l(u, c),
+		...x === void 0 ? {} : {
+			minimumFractionDigits: x,
+			maximumFractionDigits: x
+		},
+		...m ? {
+			notation: "compact",
+			...x === void 0 ? { maximumFractionDigits: 1 } : {}
+		} : {},
+		...p ? { currencySign: "accounting" } : {},
+		...f ? { signDisplay: "exceptZero" } : {},
+		...h
+	}, C = p && t(i) !== "negative", w = p && t(i) === "negative" && (g === void 0 || g === "default") ? "critical" : g;
+	return /* @__PURE__ */ o(n, {
+		ref: b,
+		locale: u,
+		className: e(r.amount, v),
+		value: i,
+		format: S,
+		tone: w,
+		suffix: C ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", {
+			className: r.pad,
+			"data-accounting-pad": "",
+			"aria-hidden": "true"
+		}), _] }) : _,
+		"data-accounting": p || void 0,
+		...y
+	});
+});
+//#endregion
+export { u as Amount };
+
+//# sourceMappingURL=Amount.js.map

package/dist/components/typography/Amount/Amount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Amount.js","names":["styles","_Fragment","Amount_module_default","Fragment$1","SHARED_NARROW_SYMBOLS","defaultCurrencyDisplay","symbolOf","locale","display","part","currency","narrow","Amount","forwardRef","rest","digits","precision","compact","options","accounting","showSign","format","pad","signOf","value","resolvedTone","tone","Numeral","cx","className","suffix"],"sources":["../../../../src/components/typography/Amount/Amount.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { cx } from '#utils/cx'\nimport { Numeral, signOf, type NumeralProps } from '#components/typography/Numeral'\nimport styles from './Amount.module.css'\n\n/** Narrow symbols several common currencies share: showing one alone would misstate the currency. */\nconst SHARED_NARROW_SYMBOLS = new Set(['$', '¥', 'kr', 'Kr', '₩', '₱', 'Rs'])\n\n/**\n * `symbol` when the locale has a symbol for the currency (AUD in en-AU → \"$\", GBP in en-GB\n * → \"£\"); otherwise `narrowSymbol` (GBP in en-AU → \"£\", not \"GBP\"), unless that narrow\n * symbol is shared (USD in en-AU stays \"USD\", never a bare \"$\" that reads as AUD).\n */\nfunction defaultCurrencyDisplay(\n  locale: string,\n  currency: string,\n): Intl.NumberFormatOptions['currencyDisplay'] {\n  try {\n    const symbolOf = (display: 'symbol' | 'narrowSymbol') =>\n      new Intl.NumberFormat(locale, { style: 'currency', currency, currencyDisplay: display })\n        .formatToParts(1)\n        .find((part) => part.type === 'currency')?.value\n    if (symbolOf('symbol') !== currency.toUpperCase()) return 'symbol'\n    const narrow = symbolOf('narrowSymbol')\n    return narrow !== undefined && !SHARED_NARROW_SYMBOLS.has(narrow) ? 'narrowSymbol' : 'symbol'\n  } catch {\n    return 'symbol'\n  }\n}\n\nexport interface AmountProps extends Omit<NumeralProps, 'format' | 'signDisplay'> {\n  /** ISO 4217 code. Default `AUD`. */\n  currency?: string\n  /** Fraction digits. Default 2 (0 for compact unless set). */\n  precision?: number\n  /** Show `+` on positive amounts (and `−` on negatives, as always). */\n  showSign?: boolean\n  /**\n   * Accounting style: negatives in parentheses and in the critical tone. Non-negative\n   * amounts reserve the width of the \")\" (invisibly), so decimals line up with the\n   * bracketed negatives in a right-aligned column.\n   */\n  accounting?: boolean\n  /** Short form for big figures: `$1.2M`. */\n  compact?: boolean\n  /** Extra `Intl.NumberFormat` options (e.g. `currencyDisplay: 'code'`). Applied last. */\n  format?: Intl.NumberFormatOptions\n}\n\n/**\n * Money. Built on <Numeral>: tabular figures in the theme's numeric face, a true minus,\n * en-AU / AUD by default. A currency the locale has no symbol for shows its narrow symbol\n * when that is unambiguous (GBP → £ in en-AU) and its ISO code otherwise (USD in en-AU).\n *\n * <Amount value={-1234.5} accounting />  →  ($1,234.50) in the critical tone\n */\nexport const Amount = forwardRef<HTMLDataElement, AmountProps>(function Amount(\n  {\n    value,\n    currency = 'AUD',\n    locale = 'en-AU',\n    precision,\n    showSign = false,\n    accounting = false,\n    compact = false,\n    format,\n    tone,\n    suffix,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const digits = precision ?? (compact ? undefined : 2)\n  const options: Intl.NumberFormatOptions = {\n    style: 'currency',\n    currency,\n    currencyDisplay: defaultCurrencyDisplay(locale, currency),\n    ...(digits !== undefined\n      ? { minimumFractionDigits: digits, maximumFractionDigits: digits }\n      : {}),\n    ...(compact\n      ? { notation: 'compact', ...(digits === undefined ? { maximumFractionDigits: 1 } : {}) }\n      : {}),\n    ...(accounting ? { currencySign: 'accounting' } : {}),\n    ...(showSign ? { signDisplay: 'exceptZero' } : {}),\n    ...format,\n  }\n  // Reserve the \")\" of a negative so right-aligned decimals line up. An empty span whose\n  // ::after draws a hidden \")\": it takes the width but never reaches copy/paste or AT.\n  const pad = accounting && signOf(value) !== 'negative'\n  const resolvedTone =\n    accounting && signOf(value) === 'negative' && (tone === undefined || tone === 'default')\n      ? 'critical'\n      : tone\n  return (\n    <Numeral\n      ref={ref}\n      locale={locale}\n      className={cx(styles.amount, className)}\n      value={value}\n      format={options}\n      tone={resolvedTone}\n      suffix={\n        pad ? (\n          <>\n            <span className={styles.pad} data-accounting-pad=\"\" aria-hidden=\"true\" />\n            {suffix}\n          </>\n        ) : (\n          suffix\n        )\n      }\n      data-accounting={accounting || undefined}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;AAMA,IAAMI,oBAAwB,IAAI,IAAI;CAAC;CAAK;CAAK;CAAM;CAAM;CAAK;CAAK;AAAI,CAAC;AAO5E,SAASC,EACP,GACA,GAC6C;CAC7C,IAAI;EACF,IAAMC,KAAY,MAChB,IAAI,KAAK,aAAaC,GAAQ;GAAE,OAAO;GAAY;GAAU,iBAAiBC;EAAQ,CAAC,CAAC,CACrF,cAAc,CAAC,CAAC,CAChB,MAAM,MAASC,EAAK,SAAS,UAAU,CAAC,EAAE;EAC/C,IAAIH,EAAS,QAAQ,MAAMI,EAAS,YAAY,GAAG,OAAO;EAC1D,IAAMC,IAASL,EAAS,cAAc;EACtC,OAAOK,MAAW,KAAA,KAAa,CAACP,EAAsB,IAAIO,CAAM,IAAI,iBAAiB;CACvF,QAAQ;EACN,OAAO;CACT;AACF;AA4BA,IAAaC,IAASC,EAAyC,SAC7D,EACE,UACA,cAAW,OACX,YAAS,SACT,cACA,cAAW,IACX,gBAAa,IACb,aAAU,IACV,WACA,SACA,WACA,cACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAASC,MAAcC,IAAU,KAAA,IAAY,IAC7CC,IAAoC;EACxC,OAAO;EACP;EACA,iBAAiBb,EAAuBE,GAAQG,CAAQ;EACxD,GAAIK,MAAW,KAAA,IAEX,CAAC,IADD;GAAE,uBAAuBA;GAAQ,uBAAuBA;EAAO;EAEnE,GAAIE,IACA;GAAE,UAAU;GAAW,GAAIF,MAAW,KAAA,IAAY,EAAE,uBAAuB,EAAE,IAAI,CAAC;EAAG,IACrF,CAAC;EACL,GAAII,IAAa,EAAE,cAAc,aAAa,IAAI,CAAC;EACnD,GAAIC,IAAW,EAAE,aAAa,aAAa,IAAI,CAAC;EAChD,GAAGC;CACL,GAGMC,IAAMH,KAAcI,EAAOC,CAAK,MAAM,YACtCC,IACJN,KAAcI,EAAOC,CAAK,MAAM,eAAeE,MAAS,KAAA,KAAaA,MAAS,aAC1E,aACAA;CACN,OACE,kBAACC,GAAD;EACO;EACG;EACR,WAAWC,EAAG5B,EAAO,QAAQ6B,CAAS;EAC/B;EACP,QAAQX;EACR,MAAMO;EACN,QACEH,IACE,kBAAArB,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAWD,EAAO;GAAK,uBAAoB;GAAG,eAAY;EAAQ,CAAA,GACvE8B,CACD,EAAA,CAAA,IAEFA;EAGJ,mBAAiBX,KAAc,KAAA;EAC/B,GAAIL;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Amount/Amount.module.js

@@ -0,0 +1,6 @@
+//#region src/components/typography/Amount/Amount.module.css
+var e = "kiln-Amount__pad", t = { pad: e };
+//#endregion
+export { t as default, e as pad };
+
+//# sourceMappingURL=Amount.module.js.map

package/dist/components/typography/Amount/Amount.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Amount.module.js","names":["pad","Amount_module_default"],"sources":["../../../../src/components/typography/Amount/Amount.module.css"],"sourcesContent":["/*\n * Accounting columns: non-negative amounts end in an invisible \")\" (drawn by the pad's\n * ::after, so it never enters the text content) that keeps their decimals aligned with the\n * parenthesised negatives when right-aligned in a table. The pad sits inside Numeral's\n * proportional suffix run, the same setting as the real \")\".\n */\n.pad::after {\n  content: ')';\n  visibility: hidden;\n}\n"],"mappings":""}

package/dist/components/typography/Amount/index.d.ts

@@ -0,0 +1,2 @@
+export { Amount } from './Amount.js';
+export type { AmountProps } from './Amount.js';

package/dist/components/typography/Code/Code.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes } from 'react';
+export type CodeTone = 'neutral' | 'accent';
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+    /** `accent` only when the snippet is the thing being talked about. Default `neutral`. */
+    tone?: CodeTone;
+}
+/**
+ * Inline code: a token, a command, a file name. Sized relative to the surrounding
+ * text so it sits on the same line in a heading or a caption. For blocks, use CodeBlock.
+ *
+ * Run <Code>pnpm --filter @mitcsutt/kiln-ui test</Code> before pushing.
+ */
+export declare const Code: import("react").ForwardRefExoticComponent<CodeProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/typography/Code/Code.js

@@ -0,0 +1,18 @@
+import { cx as e } from "../../../utils/cx.js";
+import t from "./Code.module.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/typography/Code/Code.tsx
+var i = n(function({ tone: n = "neutral", className: i, ...a }, o) {
+	return /* @__PURE__ */ r("code", {
+		ref: o,
+		className: e(t.code, i),
+		"data-kiln-component": "",
+		"data-tone": n,
+		...a
+	});
+});
+//#endregion
+export { i as Code };
+
+//# sourceMappingURL=Code.js.map

package/dist/components/typography/Code/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","names":["styles","Code_module_default","Code","forwardRef","rest","cx","className","tone"],"sources":["../../../../src/components/typography/Code/Code.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport styles from './Code.module.css'\n\nexport type CodeTone = 'neutral' | 'accent'\n\nexport interface CodeProps extends HTMLAttributes<HTMLElement> {\n  /** `accent` only when the snippet is the thing being talked about. Default `neutral`. */\n  tone?: CodeTone\n}\n\n/**\n * Inline code: a token, a command, a file name. Sized relative to the surrounding\n * text so it sits on the same line in a heading or a caption. For blocks, use CodeBlock.\n *\n * Run <Code>pnpm --filter @mitcsutt/kiln-ui test</Code> before pushing.\n */\nexport const Code = forwardRef<HTMLElement, CodeProps>(function Code(\n  { tone = 'neutral', className, ...rest },\n  ref,\n) {\n  return (\n    <code\n      ref={ref}\n      className={cx(styles.code, className)}\n      data-kiln-component=\"\"\n      data-tone={tone}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;AAiBA,IAAaE,IAAOC,EAAmC,SACrD,EAAE,UAAO,WAAW,cAAW,GAAGC,KAClC,GACA;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWC,EAAGL,EAAO,MAAMM,CAAS;EACpC,uBAAoB;EACpB,aAAWC;EACX,GAAIH;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Code/Code.module.js

@@ -0,0 +1,6 @@
+//#region src/components/typography/Code/Code.module.css
+var e = "kiln-Code__code", t = { code: e };
+//#endregion
+export { e as code, t as default };
+
+//# sourceMappingURL=Code.module.js.map

package/dist/components/typography/Code/Code.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.module.js","names":["code","Code_module_default"],"sources":["../../../../src/components/typography/Code/Code.module.css"],"sourcesContent":["/*\n * Component tokens:\n *   --code-radius   default half of --radius-field\n *   --code-bg       default var(--color-surface-sunken)\n */\n.code {\n  --_bg: var(--code-bg, var(--color-surface-sunken));\n  --_ink: var(--color-ink);\n\n  padding: 0.12em 0.36em;\n  border-radius: var(--code-radius, calc(var(--radius-field) / 2));\n  background: var(--_bg);\n  color: var(--_ink);\n  font-family: var(--font-mono);\n  font-size: 0.84em;\n  font-stretch: var(--mono-stretch);\n  font-weight: 400;\n  font-variant-ligatures: none;\n  letter-spacing: 0;\n  text-transform: none;\n  overflow-wrap: anywhere;\n  box-decoration-break: clone;\n  -webkit-box-decoration-break: clone;\n}\n\n.code[data-tone='accent'] {\n  --_bg: var(--color-accent-soft);\n  --_ink: var(--color-accent-text);\n}\n"],"mappings":""}

package/dist/components/typography/Code/index.d.ts

@@ -0,0 +1,2 @@
+export { Code } from './Code.js';
+export type { CodeProps, CodeTone } from './Code.js';

package/dist/components/typography/Heading/Heading.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes } from 'react';
+import { type Responsive } from '../../../utils/responsive.js';
+import type { HeadingLevel, HeadingSize } from './sizes.js';
+export type { HeadingLevel, HeadingSize };
+export type HeadingTone = 'default' | 'muted' | 'accent';
+/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */
+export type HeadingMeasure = 'narrow' | 'text' | 'content';
+export type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'legend';
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Document outline level. Picks the element (`h1`–`h6`) and the default size. */
+    level?: HeadingLevel;
+    /**
+     * Visual size, independent of `level`. `display-*` steps use the theme's display role
+     * (Newsreader in Monograph, condensed caps in Fiesta, tight grotesk in Ledger); the rest
+     * use the heading role. Responsive.
+     */
+    size?: Responsive<HeadingSize>;
+    tone?: HeadingTone;
+    /** `text-wrap: balance` — even line lengths. Default `true`. */
+    balance?: boolean;
+    /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */
+    measure?: HeadingMeasure;
+    /**
+     * Render a different element. When it isn't `h1`–`h6` the heading semantics are kept
+     * with `role="heading"` + `aria-level`.
+     */
+    as?: HeadingElement;
+}
+/**
+ * A heading. `level` is the outline, `size` is the look — keep them independent.
+ *
+ * <Heading level={2} size={{ base: '2xl', md: 'display-sm' }}>Recent releases</Heading>
+ */
+export declare const Heading: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/components/typography/Heading/Heading.js

@@ -0,0 +1,46 @@
+import { cx as e } from "../../../utils/cx.js";
+import { BREAKPOINTS as t, baseValue as n, mergeStyles as r, responsiveVars as i } from "../../../utils/responsive.js";
+import { DEFAULT_HEADING_SIZE as a } from "./sizes.js";
+import o from "./Heading.module.js";
+import { headingTag as s } from "../../../utils/heading.js";
+import { forwardRef as c } from "react";
+import { jsx as l } from "react/jsx-runtime";
+//#region src/components/typography/Heading/Heading.tsx
+var u = (e) => e.startsWith("display"), d = (e) => u(e) ? "display" : "heading", f = /* @__PURE__ */ new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6"
+]);
+function p(e) {
+	if (typeof e == "string") return {};
+	let n = {}, r;
+	for (let i of t) {
+		let t = e[i];
+		t !== void 0 && (r = d(t)), i !== "base" && r !== void 0 && (n[`data-role-${i}`] = r);
+	}
+	return n;
+}
+var m = c(function({ level: t = 2, size: c, tone: u = "default", balance: m = !0, measure: h, as: g, className: _, style: v, ...y }, b) {
+	let x = c ?? a[t], S = n(x) ?? a[t], C = g ?? s(t), w = !f.has(C);
+	return /* @__PURE__ */ l(C, {
+		ref: b,
+		className: e(o.heading, _),
+		"data-size": S,
+		"data-role": d(S),
+		"data-tone": u,
+		"data-balance": m ? void 0 : "false",
+		"data-measure": h,
+		role: w ? "heading" : void 0,
+		"aria-level": w ? t : void 0,
+		...p(x),
+		style: r(typeof x == "string" ? void 0 : i("heading-size", x, (e) => `var(--text-${e})`), v),
+		...y
+	});
+});
+//#endregion
+export { m as Heading };
+
+//# sourceMappingURL=Heading.js.map

package/dist/components/typography/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","names":["styles","Heading_module_default","isDisplay","s","roleOf","HEADING_TAGS","roleAttrs","size","attrs","current","bp","BREAKPOINTS","v","Heading","forwardRef","rest","resolved","DEFAULT_HEADING_SIZE","level","base","baseValue","Comp","as","headingTag","needsRole","cx","className","tone","balance","measure","mergeStyles","responsiveVars","style"],"sources":["../../../../src/components/typography/Heading/Heading.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport {\n  BREAKPOINTS,\n  baseValue,\n  mergeStyles,\n  responsiveVars,\n  type Responsive,\n} from '#utils/responsive'\nimport { DEFAULT_HEADING_SIZE } from './sizes'\nimport styles from './Heading.module.css'\nimport type { HeadingLevel, HeadingSize } from './sizes'\nimport { headingTag } from '#utils/heading'\n\nexport type { HeadingLevel, HeadingSize }\nexport type HeadingTone = 'default' | 'muted' | 'accent'\n/** Line-length cap from the width tokens: `narrow` 32rem · `text` 42rem · `content` 68rem. */\nexport type HeadingMeasure = 'narrow' | 'text' | 'content'\nexport type HeadingElement =\n  'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span' | 'legend'\n\nexport interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** Document outline level. Picks the element (`h1`–`h6`) and the default size. */\n  level?: HeadingLevel\n  /**\n   * Visual size, independent of `level`. `display-*` steps use the theme's display role\n   * (Newsreader in Monograph, condensed caps in Fiesta, tight grotesk in Ledger); the rest\n   * use the heading role. Responsive.\n   */\n  size?: Responsive<HeadingSize>\n  tone?: HeadingTone\n  /** `text-wrap: balance` — even line lengths. Default `true`. */\n  balance?: boolean\n  /** Cap the line length with a `--width-*` token (`max-inline-size`). Default: none. */\n  measure?: HeadingMeasure\n  /**\n   * Render a different element. When it isn't `h1`–`h6` the heading semantics are kept\n   * with `role=\"heading\"` + `aria-level`.\n   */\n  as?: HeadingElement\n}\n\nconst isDisplay = (s: HeadingSize) => s.startsWith('display')\nconst roleOf = (s: HeadingSize) => (isDisplay(s) ? 'display' : 'heading')\nconst HEADING_TAGS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'])\n\n/**\n * Per-breakpoint role attributes (`data-role-md=\"display\"`), cascaded upward like\n * `responsiveVars`, so CSS can switch family/weight/tracking at each breakpoint.\n */\nfunction roleAttrs(size: Responsive<HeadingSize>): Record<string, string> {\n  if (typeof size === 'string') return {}\n  const attrs: Record<string, string> = {}\n  let current: string | undefined\n  for (const bp of BREAKPOINTS) {\n    const v = size[bp]\n    if (v !== undefined) current = roleOf(v)\n    if (bp !== 'base' && current !== undefined) attrs[`data-role-${bp}`] = current\n  }\n  return attrs\n}\n\n/**\n * A heading. `level` is the outline, `size` is the look — keep them independent.\n *\n * <Heading level={2} size={{ base: '2xl', md: 'display-sm' }}>Recent releases</Heading>\n */\nexport const Heading = forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(\n  { level = 2, size, tone = 'default', balance = true, measure, as, className, style, ...rest },\n  ref,\n) {\n  const resolved = size ?? DEFAULT_HEADING_SIZE[level]\n  const base = baseValue(resolved) ?? DEFAULT_HEADING_SIZE[level]\n  const Comp = as ?? headingTag(level)\n  const needsRole = !HEADING_TAGS.has(Comp)\n  return (\n    <Comp\n      // @ts-expect-error — polymorphic ref across a union of intrinsic elements is safe here\n      ref={ref}\n      className={cx(styles.heading, className)}\n      data-size={base}\n      data-role={roleOf(base)}\n      data-tone={tone}\n      data-balance={balance ? undefined : 'false'}\n      data-measure={measure}\n      role={needsRole ? 'heading' : undefined}\n      aria-level={needsRole ? level : undefined}\n      {...roleAttrs(resolved)}\n      style={mergeStyles(\n        typeof resolved === 'string'\n          ? undefined\n          : responsiveVars('heading-size', resolved, (s) => `var(--text-${s})`),\n        style,\n      )}\n      {...rest}\n    />\n  )\n})\n"],"mappings":";;;;;;;;AA0CA,IAAME,KAAa,MAAmBC,EAAE,WAAW,SAAS,GACtDC,KAAU,MAAoBF,EAAUC,CAAC,IAAI,YAAY,WACzDE,oBAAe,IAAI,IAAI;CAAC;CAAM;CAAM;CAAM;CAAM;CAAM;AAAI,CAAC;AAMjE,SAASC,EAAU,GAAuD;CACxE,IAAI,OAAOC,KAAS,UAAU,OAAO,CAAC;CACtC,IAAMC,IAAgC,CAAC,GACnCC;CACJ,KAAK,IAAMC,KAAMC,GAAa;EAC5B,IAAMC,IAAIL,EAAKG;EAEf,AADIE,MAAM,KAAA,MAAW,IAAUR,EAAOQ,CAAC,IACnCF,MAAO,UAAUD,MAAY,KAAA,MAAW,EAAM,aAAaC,OAAQD;CACzE;CACA,OAAOD;AACT;AAOA,IAAaK,IAAUC,EAA6C,SAClE,EAAE,WAAQ,GAAG,SAAM,UAAO,WAAW,aAAU,IAAM,YAAS,OAAI,cAAW,UAAO,GAAGC,KACvF,GACA;CACA,IAAMC,IAAWT,KAAQU,EAAqBC,IACxCC,IAAOC,EAAUJ,CAAQ,KAAKC,EAAqBC,IACnDG,IAAOC,KAAMC,EAAWL,CAAK,GAC7BM,IAAY,CAACnB,EAAa,IAAIgB,CAAI;CACxC,OACE,kBAACA,GAAD;EAEO;EACL,WAAWI,EAAGzB,EAAO,SAAS0B,CAAS;EACvC,aAAWP;EACX,aAAWf,EAAOe,CAAI;EACtB,aAAWQ;EACX,gBAAcC,IAAU,KAAA,IAAY;EACpC,gBAAcC;EACd,MAAML,IAAY,YAAY,KAAA;EAC9B,cAAYA,IAAYN,IAAQ,KAAA;EAChC,GAAIZ,EAAUU,CAAQ;EACtB,OAAOc,EACL,OAAOd,KAAa,WAChB,KAAA,IACAe,EAAe,gBAAgBf,IAAW,MAAM,cAAcb,EAAE,EAAE,GACtE6B,CACF;EACA,GAAIjB;CACL,CAAA;AAEL,CAAC"}

package/dist/components/typography/Heading/Heading.module.js

@@ -0,0 +1,6 @@
+//#region src/components/typography/Heading/Heading.module.css
+var e = "kiln-Heading__heading", t = { heading: e };
+//#endregion
+export { t as default, e as heading };
+
+//# sourceMappingURL=Heading.module.js.map