@financedistrict/apps-ui 0.1.0

package/dist/input.d.ts

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Input styling — mirrors the Figma `BaseInput` component (node 4973:6816) and
+ * binds ONLY to the semantic `--input-*` token layer (never primitives, never
+ * arbitrary values). Theme switching is automatic via the `.dark` class, so no
+ * `dark:` variants are needed.
+ *
+ * This cva styles the FIELD wrapper (the row that holds the leading icon, the
+ * real `<input>`, and the trailing icon) — NOT the bare `<input>`, whose own
+ * classes live in <Input> so the token that colours typed text
+ * (`text-input-foreground-accent`) and the placeholder
+ * (`text-input-foreground-muted`) can sit on the element itself.
+ *
+ * The 7 Figma "states" (default / hover / focused&active / active&filled /
+ * filled …) are runtime DOM states of a real `<input>`, NOT a prop:
+ * - hover  → a text (I-beam) cursor affordance ONLY (`cursor-text` in the
+ *            base). Hover does NOT recolour the border/underline. This is a
+ *            deliberate, user-authorized deviation from the Figma (which draws
+ *            the accent border on hover): the team decided hover is a pointer
+ *            affordance, not a colour change.
+ * - focus  → `focus-within:` on the field wrapper recolours the border (field)
+ *            / bottom line (line) to `input-border-accent`. The input is the
+ *            focusable descendant; the visible treatment lives on its wrapper.
+ *            There is NO system outline ring on this control (see below).
+ * - filled → whether the input holds a value (no styling delta in this token
+ *            set beyond the typed-text colour, applied on the input directly).
+ * Only `disabled` and `error` are real props (handled below + in <Input>).
+ *
+ * Focus model — user-authorized exception to ADR-0010 #4 / ADR-0011:
+ * text inputs do NOT use the system `:focus-visible` outline ring. A keyboard
+ * user never triggers `:hover`, and (since hover no longer changes colour) the
+ * gray→accent border recolour on ANY focus is itself a clear, unambiguous
+ * WCAG 2.1 AA (2.4.7) focus indicator. Text inputs also hold focus while the
+ * user types, so `focus-within` (any focus, not just `:focus-visible`) is the
+ * correct trigger. The ring is intentionally omitted here; do NOT re-add it.
+ *
+ * Variant × size axes (both independent, 4 combinations):
+ * - variation `field`: bordered rounded box (`bg-input-background`, `border`,
+ *   `rounded-sm`, horizontal padding). Focus strengthens the border to
+ *   `input-border-accent` (hover does not change colour).
+ * - variation `line`: no box/background — a single bottom border only
+ *   (`border-b`), no horizontal padding. Focus strengthens the bottom line
+ *   (hover does not change colour).
+ *
+ * Sizes reuse the sibling sm/lg scale (Button = `h-8` / `h-10`):
+ * - lg: `h-10`, `gap-2`, `py-2`; field adds `px-3` (Figma field-lg = 12px).
+ * - sm: `h-8`, `gap-1`; line uses `py-2.5` (Figma line-sm = 10px), field uses
+ *   `py-2` (matches lg vertical rhythm inside the shorter box).
+ *
+ *   field-sm horizontal padding is DERIVED (Figma only draws field-lg): we use
+ *   `px-2` (8px = `spacing/2`), stepping down from field-lg's `px-3` (12px) and
+ *   matching field-sm's own `py-2` (8px) for a uniform `spacing/2` inset on all
+ *   sides. (This is a deliberate token-aligned choice; it does NOT match
+ *   Button's sm `px-2.5`.)
+ *
+ * Error is a prop, not an interaction state: it recolours the border/bottom
+ * line to the destructive accent and out-ranks focus (an errored field stays
+ * red when focused — it never flips to the purple accent), so its border
+ * utilities are declared with matching-but-later specificity via the `error`
+ * variant below (a plain destructive border for the resting state plus a
+ * `focus-within:` destructive form that out-ranks the variation's
+ * `focus-within:` accent by class order).
+ *
+ * `showBottomLine` (LINE ONLY) toggles the resting visibility of the bottom
+ * line without any layout shift. The `border-b` (1px width) is ALWAYS present;
+ * only the border COLOUR changes. When `false`, a compound variant recolours
+ * the resting bottom line to `border-transparent` (invisible), while focus
+ * (`focus-within:border-input-border-accent`) and error still win — so the
+ * line reappears on focus and on error. The compound is gated on `error:false`
+ * so an errored field's destructive rest border is NOT overridden by
+ * transparent (tailwind-merge last-wins would otherwise drop it). On the
+ * `field` variation `showBottomLine` has NO effect: the compound is scoped to
+ * `variation:line`, so `field`'s box border is untouched.
+ */
+declare const inputVariants: (props?: ({
+    variation?: "line" | "field" | null | undefined;
+    size?: "sm" | "lg" | null | undefined;
+    error?: boolean | null | undefined;
+    showBottomLine?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+
+interface InputProps extends Omit<React.ComponentProps<"input">, "size">, Omit<InputVariantsProps, "error"> {
+    /**
+     * Uppercase label shown above the field. When omitted the label row is not
+     * rendered. Always paired with the `<input>` via generated `id`/`htmlFor`
+     * (or your own `id`), so the control is properly named for assistive tech.
+     */
+    label?: React.ReactNode;
+    /**
+     * Marks the field as not required — renders an "Optional" tag on the right of
+     * the label row (Figma). Has no effect without a `label`.
+     */
+    optional?: boolean;
+    /**
+     * Helper text shown below the field, with a leading 16px icon (info by
+     * default, warning when `error`). Linked to the input via `aria-describedby`.
+     */
+    hint?: React.ReactNode;
+    /**
+     * Error state (a prop, not an interaction state): sets `aria-invalid`, turns
+     * the label, border/bottom-line, icons and hint to the destructive accent,
+     * and swaps the hint icon to a warning.
+     */
+    error?: boolean;
+    /** Leading adornment (usually a 16px Phosphor icon). Decorative — kept out of the a11y tree via `aria-hidden`. */
+    leftSlot?: React.ReactNode;
+    /**
+     * Trailing adornment. Usually a 16px Phosphor icon (decorative), but MAY be an
+     * interactive control (e.g. SearchBar's clear `<button>`). The wrapper is NOT
+     * `aria-hidden` (that would hide a focusable child from assistive tech — an
+     * ARIA violation); decorative bare `<svg>` icons are silent to AT on their own
+     * (no role, no accessible name), so they stay unannounced without it. An
+     * interactive control placed here must carry its own accessible name.
+     */
+    rightSlot?: React.ReactNode;
+    /** Class names for the outer wrapper (the vertical label/field/hint stack). */
+    wrapperClassName?: string;
+    /** Class names for the field row (border/background box), not the `<input>`. */
+    fieldClassName?: string;
+    /**
+     * Toggles the resting visibility of the bottom line on the **`line`**
+     * variation only. Default `true` (line visible at rest). When `false`, the
+     * bottom line is hidden at rest (recoloured to transparent) but still appears
+     * on focus (accent) and on error (destructive); the 1px `border-b` is kept in
+     * all cases so there is no layout shift — only the border colour changes.
+     *
+     * Has NO effect on the `field` variation (its box border is out of scope).
+     */
+    showBottomLine?: boolean;
+}
+/**
+ * Text input — the Figma `BaseInput` component (node 4973:6816), rendered as a
+ * real `<input>` wrapped in a field row with optional `leftSlot`/`rightSlot`
+ * icon slots, an optional uppercase label row, and an optional hint message.
+ *
+ * Follows the ADR-0010 form-control conventions: the native `<input>` is the
+ * single source of truth (uncontrolled `defaultValue` or controlled
+ * `value` + `onChange`); the component holds no React state. `ref` is a normal
+ * prop (React 19). Not `asChild` — the root must stay a void, platform-behaviour
+ * -bearing `<input>` (ADR-0010).
+ *
+ * Two independent axes (4 combinations): `variation` (`field` bordered box /
+ * `line` bottom-border-only) × `size` (`sm` / `lg`, reusing the sibling scale).
+ * The Figma "states" (hover/focus/filled) are runtime DOM states: hover is an
+ * I-beam cursor affordance only (no colour change), focus recolours the border
+ * via `focus-within:` (no system outline ring — a user-authorized exception to
+ * ADR-0010 #4 / ADR-0011, see `inputVariants.ts`), and filled shows the typed-
+ * text colour. Only `disabled` (native attribute) and `error` (prop) are real
+ * props.
+ */
+declare function Input({ className, fieldClassName, wrapperClassName, variation, size, error, showBottomLine, label, optional, hint, leftSlot, rightSlot, disabled, id: idProp, ref, ...props }: InputProps): React.JSX.Element;
+
+export { Input, type InputProps, type InputVariantsProps, inputVariants };

package/dist/input.js

@@ -0,0 +1,4 @@
+import './chunk-DGBXADSS.js';
+export { Input } from './chunk-AIQ4UOGK.js';
+export { inputVariants } from './chunk-IEVN3J2F.js';
+import './chunk-7EOSDFS3.js';

package/dist/panel.cjs

@@ -0,0 +1,185 @@
+'use strict';
+
+var React = require('react');
+var react = require('@phosphor-icons/react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/panel/Panel.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var panelVariants = classVarianceAuthority.cva([
+  "flex w-80 flex-col gap-4 rounded-md border border-card-border bg-card-background p-5"
+]);
+var panelHeaderVariants = classVarianceAuthority.cva(["flex items-start gap-4"]);
+var panelHeaderContentVariants = classVarianceAuthority.cva([
+  "flex min-w-0 flex-1 items-center gap-3"
+]);
+var panelHeaderIconVariants = classVarianceAuthority.cva([
+  "flex items-center text-card-foreground [&_svg]:size-6 [&_svg]:shrink-0"
+]);
+var panelHeaderTextVariants = classVarianceAuthority.cva(["flex min-w-0 flex-col"]);
+var panelCloseButtonVariants = classVarianceAuthority.cva([
+  "flex shrink-0 cursor-pointer items-center justify-center rounded-xs",
+  "text-card-foreground-muted transition-colors hover:text-card-foreground",
+  "[&_svg]:size-4 [&_svg]:shrink-0",
+  "outline-none focus-visible:text-card-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+]);
+var panelBodyVariants = classVarianceAuthority.cva(["text-card-foreground"]);
+var panelFooterVariants = classVarianceAuthority.cva(["flex items-start gap-2"]);
+var PanelContext = React__namespace.createContext(null);
+function usePanelContext() {
+  return React__namespace.useContext(PanelContext);
+}
+function PanelRoot({
+  className,
+  children,
+  ref,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}) {
+  const reactId = React__namespace.useId();
+  const titleId = `${reactId}-title`;
+  const [hasTitle, setHasTitle] = React__namespace.useState(false);
+  const labelledBy = hasTitle ? titleId : ariaLabelledby;
+  const hasName = Boolean(labelledBy || ariaLabel);
+  const value = { titleId, setHasTitle };
+  return /* @__PURE__ */ jsxRuntime.jsx(PanelContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: hasName ? "region" : void 0,
+      "aria-label": ariaLabel,
+      "aria-labelledby": labelledBy,
+      "data-slot": "panel",
+      className: cn(panelVariants(), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function PanelHeader({
+  icon,
+  title,
+  description,
+  showClose = true,
+  onClose,
+  className,
+  ref,
+  ...props
+}) {
+  const context = usePanelContext();
+  const titleId = context?.titleId;
+  const setHasTitle = context?.setHasTitle;
+  const hasDescription = description != null;
+  React__namespace.useEffect(() => {
+    if (!setHasTitle) return;
+    setHasTitle(true);
+    return () => setHasTitle(false);
+  }, [setHasTitle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-header",
+      className: cn(panelHeaderVariants(), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelHeaderContentVariants(), children: [
+          icon != null && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "panel-header-icon",
+              "aria-hidden": "true",
+              className: panelHeaderIconVariants(),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelHeaderTextVariants(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { id: titleId, className: "body-02-medium text-card-foreground", children: title }),
+            hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "body-03 text-card-foreground-muted", children: description })
+          ] })
+        ] }),
+        showClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "panel-header-close",
+            "aria-label": "Close",
+            className: panelCloseButtonVariants(),
+            onClick: () => onClose?.(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { weight: "regular" })
+          }
+        )
+      ]
+    }
+  );
+}
+function PanelBody({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-body",
+      className: cn(panelBodyVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+function PanelFooter({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "panel-footer",
+      className: cn(panelFooterVariants(), className),
+      ...props,
+      children
+    }
+  );
+}
+var Panel = {
+  Root: PanelRoot,
+  Header: PanelHeader,
+  Body: PanelBody,
+  Footer: PanelFooter
+};
+
+exports.Panel = Panel;
+exports.PanelBody = PanelBody;
+exports.PanelFooter = PanelFooter;
+exports.PanelHeader = PanelHeader;
+exports.PanelRoot = PanelRoot;
+exports.panelBodyVariants = panelBodyVariants;
+exports.panelCloseButtonVariants = panelCloseButtonVariants;
+exports.panelFooterVariants = panelFooterVariants;
+exports.panelHeaderContentVariants = panelHeaderContentVariants;
+exports.panelHeaderIconVariants = panelHeaderIconVariants;
+exports.panelHeaderTextVariants = panelHeaderTextVariants;
+exports.panelHeaderVariants = panelHeaderVariants;
+exports.panelVariants = panelVariants;

package/dist/panel.d.cts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface PanelRootProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The card container + context provider. A plain flow `<div>` (no overlay). It
+ * becomes a `region` landmark only when it has an accessible name: a `Panel.Header`
+ * title (auto-wired via context) or a consumer-supplied `aria-label`/
+ * `aria-labelledby`. Without a name it renders a plain `<div>` (an unnamed
+ * landmark is an a11y violation). Forwards `ref` to the card.
+ */
+declare function PanelRoot({ className, children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: PanelRootProps): React.JSX.Element;
+interface PanelHeaderProps extends Omit<React.ComponentProps<"div">, "title"> {
+    /**
+     * Decorative 24px icon (rendered `aria-hidden`), inline-left of the title.
+     * Hidden when omitted. Rendered as-is — the header does NOT force a weight
+     * (unlike Dialog's filled-icon slot), so the app controls the icon's weight
+     * (Phosphor's default is `regular`).
+     */
+    icon?: React.ReactNode;
+    /** Title — becomes the Panel's `aria-labelledby` target (`body-02-medium`). */
+    title: React.ReactNode;
+    /** Optional description (`body-03`, muted). Rendered only when provided. */
+    description?: React.ReactNode;
+    /** Show the inline close X. Default `true` (matches Figma). */
+    showClose?: boolean;
+    /** Called when the close X is activated. Optional — X is inert without it. */
+    onClose?: () => void;
+}
+/**
+ * Header row: an optional inline icon + the title (registers the
+ * `aria-labelledby` id via context) + an optional description, with an optional
+ * inline close X at the row's end. Unlike Dialog, the icon is inline-left and
+ * the close X sits in the row flow (not absolute against the card).
+ */
+declare function PanelHeader({ icon, title, description, showClose, onClose, className, ref, ...props }: PanelHeaderProps): React.JSX.Element;
+interface PanelBodyProps extends React.ComponentProps<"div"> {
+}
+/** Flexible content slot. Sizes to content (no fixed height). Forwards `ref`. */
+declare function PanelBody({ className, children, ref, ...props }: PanelBodyProps): React.JSX.Element;
+interface PanelFooterProps extends React.ComponentProps<"div"> {
+}
+/**
+ * Action-row slot: a left-aligned flex row (`gap-2`) of content-width children
+ * (Figma's footer layout — NOT stretched like `Dialog.Footer`). Forwards `ref`.
+ */
+declare function PanelFooter({ className, children, ref, ...props }: PanelFooterProps): React.JSX.Element;
+declare const Panel: {
+    Root: typeof PanelRoot;
+    Header: typeof PanelHeader;
+    Body: typeof PanelBody;
+    Footer: typeof PanelFooter;
+};
+
+/**
+ * Panel styling — the Figma `panel` card (node `5041:4303`). Binds ONLY to the
+ * `card-*` semantic token layer (never primitives, never mode plumbing); theme
+ * switching is automatic via `.dark`, so no `dark:` variants are needed.
+ *
+ * Panel is presentation-neutral: no `variation` prop (see ADR-0023). The basic
+ * vs branded looks come from the app-supplied header icon + footer `Button`
+ * variation, so these tables carry no variant axes.
+ */
+/**
+ * The card. `w-80` = 320px (Figma-exact default width; overridable via
+ * `className`). `p-5` = spacing/5 (20px), `gap-4` = spacing/4 (16px),
+ * `rounded-md` = radius/md (6px), `border` = border-width/1 (1px).
+ */
+declare const panelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Header row — a HORIZONTAL row (the key divergence from Dialog's vertical
+ * stack). `items-start` so the close button pins to the top of the row while
+ * the content block's icon+text center against each other. `gap-4` = 16px.
+ */
+declare const panelHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Header content block: inline icon + title/description column, vertically
+ * centered against each other (`items-center`), `gap-3` = 12px. `flex-1 min-w-0`
+ * takes the row's free space and lets long titles truncate rather than push the
+ * close button out.
+ */
+declare const panelHeaderContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Inline 24px decorative icon slot (`aria-hidden` on the element). */
+declare const panelHeaderIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Title + description column (stacked). `min-w-0` enables text truncation. */
+declare const panelHeaderTextVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The 16px muted close X — INLINE at the row's end (not absolute like Dialog).
+ * `shrink-0` keeps it from collapsing. Focus ring per ADR-0010 (TW4 needs
+ * `outline-solid`).
+ */
+declare const panelCloseButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Body slot: sizes to content (no fixed height — Figma's 160px is demo-only). */
+declare const panelBodyVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Footer action row: `gap-2` = 8px, buttons CONTENT-WIDTH and LEFT-ALIGNED
+ * (Figma `items-start`). Unlike `Dialog.Footer`, buttons are NOT stretched to
+ * equal width.
+ */
+declare const panelFooterVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Panel, PanelBody, type PanelBodyProps, PanelFooter, type PanelFooterProps, PanelHeader, type PanelHeaderProps, PanelRoot, type PanelRootProps, panelBodyVariants, panelCloseButtonVariants, panelFooterVariants, panelHeaderContentVariants, panelHeaderIconVariants, panelHeaderTextVariants, panelHeaderVariants, panelVariants };

package/dist/panel.d.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+interface PanelRootProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The card container + context provider. A plain flow `<div>` (no overlay). It
+ * becomes a `region` landmark only when it has an accessible name: a `Panel.Header`
+ * title (auto-wired via context) or a consumer-supplied `aria-label`/
+ * `aria-labelledby`. Without a name it renders a plain `<div>` (an unnamed
+ * landmark is an a11y violation). Forwards `ref` to the card.
+ */
+declare function PanelRoot({ className, children, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: PanelRootProps): React.JSX.Element;
+interface PanelHeaderProps extends Omit<React.ComponentProps<"div">, "title"> {
+    /**
+     * Decorative 24px icon (rendered `aria-hidden`), inline-left of the title.
+     * Hidden when omitted. Rendered as-is — the header does NOT force a weight
+     * (unlike Dialog's filled-icon slot), so the app controls the icon's weight
+     * (Phosphor's default is `regular`).
+     */
+    icon?: React.ReactNode;
+    /** Title — becomes the Panel's `aria-labelledby` target (`body-02-medium`). */
+    title: React.ReactNode;
+    /** Optional description (`body-03`, muted). Rendered only when provided. */
+    description?: React.ReactNode;
+    /** Show the inline close X. Default `true` (matches Figma). */
+    showClose?: boolean;
+    /** Called when the close X is activated. Optional — X is inert without it. */
+    onClose?: () => void;
+}
+/**
+ * Header row: an optional inline icon + the title (registers the
+ * `aria-labelledby` id via context) + an optional description, with an optional
+ * inline close X at the row's end. Unlike Dialog, the icon is inline-left and
+ * the close X sits in the row flow (not absolute against the card).
+ */
+declare function PanelHeader({ icon, title, description, showClose, onClose, className, ref, ...props }: PanelHeaderProps): React.JSX.Element;
+interface PanelBodyProps extends React.ComponentProps<"div"> {
+}
+/** Flexible content slot. Sizes to content (no fixed height). Forwards `ref`. */
+declare function PanelBody({ className, children, ref, ...props }: PanelBodyProps): React.JSX.Element;
+interface PanelFooterProps extends React.ComponentProps<"div"> {
+}
+/**
+ * Action-row slot: a left-aligned flex row (`gap-2`) of content-width children
+ * (Figma's footer layout — NOT stretched like `Dialog.Footer`). Forwards `ref`.
+ */
+declare function PanelFooter({ className, children, ref, ...props }: PanelFooterProps): React.JSX.Element;
+declare const Panel: {
+    Root: typeof PanelRoot;
+    Header: typeof PanelHeader;
+    Body: typeof PanelBody;
+    Footer: typeof PanelFooter;
+};
+
+/**
+ * Panel styling — the Figma `panel` card (node `5041:4303`). Binds ONLY to the
+ * `card-*` semantic token layer (never primitives, never mode plumbing); theme
+ * switching is automatic via `.dark`, so no `dark:` variants are needed.
+ *
+ * Panel is presentation-neutral: no `variation` prop (see ADR-0023). The basic
+ * vs branded looks come from the app-supplied header icon + footer `Button`
+ * variation, so these tables carry no variant axes.
+ */
+/**
+ * The card. `w-80` = 320px (Figma-exact default width; overridable via
+ * `className`). `p-5` = spacing/5 (20px), `gap-4` = spacing/4 (16px),
+ * `rounded-md` = radius/md (6px), `border` = border-width/1 (1px).
+ */
+declare const panelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Header row — a HORIZONTAL row (the key divergence from Dialog's vertical
+ * stack). `items-start` so the close button pins to the top of the row while
+ * the content block's icon+text center against each other. `gap-4` = 16px.
+ */
+declare const panelHeaderVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Header content block: inline icon + title/description column, vertically
+ * centered against each other (`items-center`), `gap-3` = 12px. `flex-1 min-w-0`
+ * takes the row's free space and lets long titles truncate rather than push the
+ * close button out.
+ */
+declare const panelHeaderContentVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Inline 24px decorative icon slot (`aria-hidden` on the element). */
+declare const panelHeaderIconVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Title + description column (stacked). `min-w-0` enables text truncation. */
+declare const panelHeaderTextVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * The 16px muted close X — INLINE at the row's end (not absolute like Dialog).
+ * `shrink-0` keeps it from collapsing. Focus ring per ADR-0010 (TW4 needs
+ * `outline-solid`).
+ */
+declare const panelCloseButtonVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/** Body slot: sizes to content (no fixed height — Figma's 160px is demo-only). */
+declare const panelBodyVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+/**
+ * Footer action row: `gap-2` = 8px, buttons CONTENT-WIDTH and LEFT-ALIGNED
+ * (Figma `items-start`). Unlike `Dialog.Footer`, buttons are NOT stretched to
+ * equal width.
+ */
+declare const panelFooterVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Panel, PanelBody, type PanelBodyProps, PanelFooter, type PanelFooterProps, PanelHeader, type PanelHeaderProps, PanelRoot, type PanelRootProps, panelBodyVariants, panelCloseButtonVariants, panelFooterVariants, panelHeaderContentVariants, panelHeaderIconVariants, panelHeaderTextVariants, panelHeaderVariants, panelVariants };

package/dist/panel.js

@@ -0,0 +1,2 @@
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelRoot, panelBodyVariants, panelCloseButtonVariants, panelFooterVariants, panelHeaderContentVariants, panelHeaderIconVariants, panelHeaderTextVariants, panelHeaderVariants, panelVariants } from './chunk-IYYHCQXG.js';
+import './chunk-7EOSDFS3.js';

package/dist/property-grid.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var propertyGridCellVariants = classVarianceAuthority.cva(
+  [
+    // Layout — 40px row, single line, slots on a horizontal axis.
+    "flex h-10 min-w-0 items-center gap-1 py-3",
+    // Type — Archivo 14/20.
+    "body-03"
+  ],
+  {
+    variants: {
+      variant: {
+        title: "justify-start text-card-foreground-muted",
+        content: "justify-end text-card-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "title"
+    }
+  }
+);
+var propertyGridItemVariants = classVarianceAuthority.cva(["grid grid-cols-2"], {
+  variants: {
+    last: {
+      false: "border-b border-card-border",
+      true: ""
+    }
+  },
+  defaultVariants: {
+    last: false
+  }
+});
+function PropertyGridItem({
+  className,
+  last = false,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "property-grid-item",
+      className: cn(propertyGridItemVariants({ last }), className),
+      ref,
+      ...props,
+      children
+    }
+  );
+}
+function PropertyGridCell({
+  variant,
+  className,
+  leading,
+  trailing,
+  children,
+  ref,
+  ...props
+}) {
+  const slotClass = "flex shrink-0 items-center text-card-foreground-muted [&_svg]:size-4";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": `property-grid-${variant}`,
+      className: cn(propertyGridCellVariants({ variant }), className),
+      ref,
+      ...props,
+      children: [
+        leading != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": `property-grid-${variant}-leading`,
+            className: slotClass,
+            children: leading
+          }
+        ),
+        children != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+        trailing != null && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": `property-grid-${variant}-trailing`,
+            className: slotClass,
+            children: trailing
+          }
+        )
+      ]
+    }
+  );
+}
+function PropertyGridTitle(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PropertyGridCell, { variant: "title", ...props });
+}
+function PropertyGridContent(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(PropertyGridCell, { variant: "content", ...props });
+}
+
+exports.PropertyGridContent = PropertyGridContent;
+exports.PropertyGridItem = PropertyGridItem;
+exports.PropertyGridTitle = PropertyGridTitle;
+exports.propertyGridCellVariants = propertyGridCellVariants;
+exports.propertyGridItemVariants = propertyGridItemVariants;