@assure-one/design-system 1.43.0 → 1.44.0

package/dist/suite/index.js

@@ -1,7 +1,7 @@
 "use client";
-export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, ClientSelect, ComingSoon, Grid, Logo, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QUESTION_TYPES, QUESTION_TYPE_CONTRACT_VERSION, Questions, SidebarBrandSwitcher, SidebarBrandSwitcherTile, brandLabel } from '../chunk-TYXT5C2B.js';
-export { DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentList, DocumentListSection, DocumentRow } from '../chunk-XJKCKBHI.js';
-import '../chunk-TBDTXAFH.js';
+export { AgreementPaneHeading, AgreementViewer, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, BRAND_PRODUCTS, ClientSelect, ComingSoon, Grid, Logo, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QUESTION_TYPES, QUESTION_TYPE_CONTRACT_VERSION, Questions, SidebarBrandSwitcher, SidebarBrandSwitcherTile, brandLabel } from '../chunk-4TXBY6P7.js';
+export { DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentList, DocumentListSection, DocumentRow } from '../chunk-Z7QPHPNV.js';
+import '../chunk-E2URQD5A.js';
 import '../chunk-EUHGZA6Q.js';
 import '../chunk-YRHRVOLV.js';
 //# sourceMappingURL=index.js.map

package/docs/components.md

@@ -2,7 +2,7 @@
 
 <!-- Generated by `pnpm docs:catalogue` from api/*.api.md and docs/components.registry.json. Do not edit by hand; edit the registry and regenerate. -->
 
-Every public component of `@assure-one/design-system`, in one place: **496 component exports** — 183 component families with 228 compound parts, and 168 icons — plus the hooks, utilities, tokens and testing helpers the package exports. The list is derived from the API reports, so a public component cannot be missing from this page (`pnpm docs:catalogue --check` runs in `pnpm test:contracts`).
+Every public component of `@assure-one/design-system`, in one place: **522 component exports** — 183 component families with 228 compound parts, and 194 icons — plus the hooks, utilities, tokens and testing helpers the package exports. The list is derived from the API reports, so a public component cannot be missing from this page (`pnpm docs:catalogue --check` runs in `pnpm test:contracts`).
 
 **How to use this page.** Start from the ["Pick a component"](#pick-a-component) table with the UI need you have, or from ["Never hand-roll"](#never-hand-roll) with the raw element you were about to write; links land on the category section that holds the row. Every row links to the story that shows the states. The short rulebook for agents and new contributors is [`docs/for-ai-agents.md`](./for-ai-agents.md).
 
@@ -346,14 +346,14 @@ Every glyph comes from the catalogue; never inline an `<svg>` or add `lucide-rea
 
 ### Icons (experimental)
 
-The UI glyph catalogue: Lucide glyphs on the 24-unit grid, `currentColor` strokes at 2, `aria-hidden` unless titled. Import from `@assure-one/design-system/icons` (server-safe) or the root. 166 exports, plus `createIcon`.
+The UI glyph catalogue and the only UI icon source: Lucide glyphs on the 24-unit grid, `currentColor` strokes at 2, `aria-hidden` unless titled. Import from `@assure-one/design-system/icons` (server-safe) or the root. `iconToSvg` / `iconCursor` give the same Lucide glyph as an SVG string or a CSS cursor where React cannot render. 192 exports, plus `createIcon`, `iconCursor`, `iconToSvg`.
 
-**Use when:** Any glyph in a control, a list row, a status, an empty state; `createIcon` to register a one-off glyph in the same contract.  
+**Use when:** Any glyph in a control, a list row, a status, an empty state; `iconToSvg` in a non-React shell, `iconCursor` for a tool-mode cursor. Products never draw their own icons (`createIcon` is the catalogue's builder).  
 **Don't use when:** You need a product mark (brand icon family or `Logo`), a state-driven glyph (`StatusIcon`, `PriorityIcon`) or an illustration.  
-**Replaces:** `<svg>`, `lucide-react`  
+**Replaces:** `<svg>`, `lucide-react`, `icon characters (✓ ✕ → ↗)`, `SVG data-URL icons`  
 **Story:** [src/primitives/icons.stories.tsx](https://github.com/Assure-One/design-system/blob/main/src/primitives/icons.stories.tsx)  
 
-`AlertCircleIcon` · `AlertTriangleIcon` · `AlertTriangleSolidIcon` · `ArchiveIcon` · `ArrowDownIcon` · `ArrowLeftIcon` · `ArrowRightIcon` · `ArrowUpIcon` · `ArrowUpRightIcon` · `AtSignIcon` · `BanIcon` · `BarChartIcon` · `BellIcon` · `BoldIcon` · `BrainIcon` · `BriefcaseIcon` · `Building2Icon` · `BuildingIcon` · `CalculatorIcon` · `CalendarIcon` · `CameraIcon` · `ChatBubbleIcon` · `CheckCheckIcon` · `CheckCircle2Icon` · `CheckCircleSolidIcon` · `CheckIcon` · `ChevronDownIcon` · `ChevronLeftIcon` · `ChevronRightIcon` · `ChevronsDownUpIcon` · `ChevronsLeftIcon` · `ChevronsRightIcon` · `ChevronsUpDownIcon` · `ChevronUpIcon` · `CircleDotIcon` · `CircleIcon` · `ClipboardCheckIcon` · `ClockIcon` · `CommandIcon` · `CopyIcon` · `CornerDownLeftIcon` · `CreditCardIcon` · `DocumentIcon` · `DollarSignIcon` · `DownloadIcon` · `ExternalLinkIcon` · `ExtractIcon` · `EyeIcon` · `EyeOffIcon` · `FileChartColumnIcon` · `FileIcon` · `FileReturnIcon` · `FileTextIcon` · `FilterIcon` · `FlagIcon` · `FolderClosedIcon` · `FolderDownIcon` · `FolderOpenIcon` · `FolderPlusIcon` · `FolderUpIcon` · `GlobeIcon` · `GraduationCapIcon` · `GripHorizontalIcon` · `GripVerticalIcon` · `HelpCircleIcon` · `HistoryIcon` · `HomeIcon` · `InboxIcon` · `InfoCircleSolidIcon` · `InfoIcon` · `ItalicIcon` · `KanbanIcon` · `KeyIcon` · `LandmarkIcon` · `LayersIcon` · `LayoutDashboardIcon` · `LayoutGridIcon` · `LayoutListIcon` · `LightningIcon` · `Link2Icon` · `LinkIcon` · `ListChecksIcon` · `ListIcon` · `ListOrderedIcon` · `LoaderIcon` · `LockIcon` · `LockKeyholeIcon` · `LockOpenIcon` · `LogOutIcon` · `MailIcon` · `MapPinIcon` · `MaximizeIcon` · `MenuIcon` · `MessageCircleIcon` · `MessageCircleMoreIcon` · `MessageCircleWarningIcon` · `MicIcon` · `MinimizeIcon` · `MinusIcon` · `MonitorIcon` · `MoonIcon` · `MoreHorizontalIcon` · `MoreVerticalIcon` · `MousePointer2Icon` · `MoveIcon` · `PaletteIcon` · `PanelLeftCloseIcon` · `PanelLeftIcon` · `PanelRightCloseIcon` · `PanelRightIcon` · `PaperclipIcon` · `PauseIcon` · `PencilIcon` · `PenSignIcon` · `PenToolIcon` · `PhoneIcon` · `PlayIcon` · `PlusIcon` · `ReceiptIcon` · `RefreshCwIcon` · `ReplyIcon` · `RotateCcwIcon` · `Rows4Icon` · `RowsIcon` · `SaveIcon` · `SearchIcon` · `SendIcon` · `SettingsIcon` · `ShieldIcon` · `SigmaIcon` · `SlashIcon` · `SmartphoneIcon` · `SparkleIcon` · `SparklesIcon` · `SquarePlayIcon` · `StarIcon` · `StopIcon` · `StrikethroughIcon` · `SunIcon` · `TableIcon` · `TagIcon` · `TeamIcon` · `ThumbsDownIcon` · `ThumbsUpIcon` · `TimerIcon` · `Trash2Icon` · `TrashIcon` · `TrashSolidIcon` · `TrendingDownIcon` · `TrendingUpIcon` · `TypeIcon` · `UnderlineIcon` · `UploadIcon` · `UserCircleIcon` · `UserIcon` · `UsersIcon` · `VideoIcon` · `Volume2Icon` · `VolumeXIcon` · `WorkflowIcon` · `XCircleSolidIcon` · `XIcon` · `ZoomInIcon` · `ZoomOutIcon`
+`AlertCircleIcon` · `AlertTriangleIcon` · `AlertTriangleSolidIcon` · `AlignCenterIcon` · `AlignLeftIcon` · `AlignRightIcon` · `AppWindowIcon` · `ArchiveIcon` · `ArrowDownIcon` · `ArrowLeftIcon` · `ArrowRightIcon` · `ArrowUpIcon` · `ArrowUpRightIcon` · `AtSignIcon` · `BanIcon` · `BarChartIcon` · `BellIcon` · `BellRingIcon` · `BoldIcon` · `BookTextIcon` · `BrainIcon` · `BriefcaseIcon` · `Building2Icon` · `BuildingIcon` · `CalculatorIcon` · `CalendarIcon` · `CameraIcon` · `ChartNoAxesColumnIncreasingIcon` · `ChatBubbleIcon` · `CheckCheckIcon` · `CheckCircle2Icon` · `CheckCircleSolidIcon` · `CheckIcon` · `ChevronDownIcon` · `ChevronLeftIcon` · `ChevronRightIcon` · `ChevronsDownUpIcon` · `ChevronsLeftIcon` · `ChevronsRightIcon` · `ChevronsUpDownIcon` · `ChevronUpIcon` · `CircleDashedIcon` · `CircleDotIcon` · `CircleIcon` · `ClipboardCheckIcon` · `ClockAlertIcon` · `ClockIcon` · `CommandIcon` · `CopyIcon` · `CornerDownLeftIcon` · `CreditCardIcon` · `DecimalsArrowLeftIcon` · `DecimalsArrowRightIcon` · `DocumentIcon` · `DollarSignIcon` · `DownloadIcon` · `ExternalLinkIcon` · `ExtractIcon` · `EyeIcon` · `EyeOffIcon` · `FileChartColumnIcon` · `FileIcon` · `FilePlusIcon` · `FileReturnIcon` · `FileTextIcon` · `FilterIcon` · `FlagIcon` · `FolderClosedIcon` · `FolderDownIcon` · `FolderOpenIcon` · `FolderPlusIcon` · `FolderUpIcon` · `GlobeIcon` · `GraduationCapIcon` · `Grid2x2Icon` · `GripHorizontalIcon` · `GripVerticalIcon` · `HelpCircleIcon` · `HighlighterIcon` · `HistoryIcon` · `HomeIcon` · `InboxIcon` · `InfoCircleSolidIcon` · `InfoIcon` · `ItalicIcon` · `KanbanIcon` · `KeyIcon` · `LandmarkIcon` · `LayersIcon` · `LayoutDashboardIcon` · `LayoutGridIcon` · `LayoutListIcon` · `LightningIcon` · `Link2Icon` · `LinkIcon` · `ListChecksIcon` · `ListIcon` · `ListOrderedIcon` · `LoaderIcon` · `LockIcon` · `LockKeyholeIcon` · `LockOpenIcon` · `LogOutIcon` · `MailIcon` · `MapPinIcon` · `MaximizeIcon` · `MenuIcon` · `MessageCircleIcon` · `MessageCircleMoreIcon` · `MessageCircleWarningIcon` · `MicIcon` · `MinimizeIcon` · `MinusIcon` · `MonitorIcon` · `MoonIcon` · `MoreHorizontalIcon` · `MoreVerticalIcon` · `MousePointer2Icon` · `MoveIcon` · `PaletteIcon` · `PanelLeftCloseIcon` · `PanelLeftIcon` · `PanelRightCloseIcon` · `PanelRightIcon` · `PaperclipIcon` · `PauseIcon` · `PencilIcon` · `PenSignIcon` · `PenToolIcon` · `PercentIcon` · `PhoneIcon` · `PinIcon` · `PinOffIcon` · `PlayIcon` · `PlusIcon` · `ReceiptIcon` · `RefreshCwIcon` · `RepeatIcon` · `ReplyIcon` · `RotateCcwIcon` · `Rows4Icon` · `RowsIcon` · `SaveIcon` · `SearchCheckIcon` · `SearchIcon` · `SendIcon` · `SettingsIcon` · `ShieldIcon` · `SigmaIcon` · `SlashIcon` · `SmartphoneIcon` · `SparkleIcon` · `SparklesIcon` · `SquareExclamationPointIcon` · `SquareFunctionIcon` · `SquareIcon` · `SquarePlayIcon` · `SquareSquareIcon` · `StampIcon` · `StarIcon` · `StopIcon` · `StrikethroughIcon` · `SunIcon` · `TableIcon` · `TagIcon` · `TeamIcon` · `ThumbsDownIcon` · `ThumbsUpIcon` · `TimerIcon` · `Trash2Icon` · `TrashIcon` · `TrashSolidIcon` · `TrendingDownIcon` · `TrendingUpIcon` · `TypeIcon` · `UnderlineIcon` · `Undo2Icon` · `UploadIcon` · `UserCircleIcon` · `UserIcon` · `UsersIcon` · `VideoIcon` · `Volume2Icon` · `VolumeXIcon` · `WorkflowIcon` · `XCircleIcon` · `XCircleSolidIcon` · `XIcon` · `ZoomInIcon` · `ZoomOutIcon`
 
 Deprecated aliases (same drawing under an older name): `ArrowRightSmallIcon`, `CloseIcon`.
 
@@ -532,6 +532,7 @@ The raw element or pattern on the left already has a design-system component. Wr
 | `hand-rolled toast portal` | [ToastProvider](#feedback) |
 | `hand-rolled toolbar + <table> + pager around per-table useState` | [DataTable (compound)](#data-display) |
 | `hard-coded top-[56px] sticky offsets` | [StickyStack](#layout) |
+| `icon characters (✓ ✕ → ↗)` | [Icons](#icons) |
 | `lucide-react` | [Icons](#icons) |
 | `navigator.clipboard.writeText + useState` | [CopyButton](#actions) |
 | `nested div with width:%` | [ProgressBar](#feedback) |
@@ -542,6 +543,7 @@ The raw element or pattern on the left already has a design-system component. Wr
 | `section with a border, a heading row and a padded body` | [SectionCard](#layout) |
 | `six <input maxlength="1">` | [OTPInput](#forms) |
 | `stack of <details>` | [Accordion](#layout) |
+| `SVG data-URL icons` | [Icons](#icons) |
 | `title="…"` | [Tooltip](#overlays) |
 | `two <input type="date">` | [DateRangePicker](#forms) |
 | `two-column label/value divs` | [MetadataGrid](#data-display) |

package/docs/components.registry.json

@@ -455,14 +455,18 @@
       "pattern": "Icon$",
       "exclude": "BrandIcon$",
       "helpers": [
-        "createIcon"
+        "createIcon",
+        "iconCursor",
+        "iconToSvg"
       ],
-      "description": "The UI glyph catalogue: Lucide glyphs on the 24-unit grid, `currentColor` strokes at 2, `aria-hidden` unless titled. Import from `@assure-one/design-system/icons` (server-safe) or the root.",
-      "useWhen": "Any glyph in a control, a list row, a status, an empty state; `createIcon` to register a one-off glyph in the same contract.",
+      "description": "The UI glyph catalogue and the only UI icon source: Lucide glyphs on the 24-unit grid, `currentColor` strokes at 2, `aria-hidden` unless titled. Import from `@assure-one/design-system/icons` (server-safe) or the root. `iconToSvg` / `iconCursor` give the same Lucide glyph as an SVG string or a CSS cursor where React cannot render.",
+      "useWhen": "Any glyph in a control, a list row, a status, an empty state; `iconToSvg` in a non-React shell, `iconCursor` for a tool-mode cursor. Products never draw their own icons (`createIcon` is the catalogue's builder).",
       "dontUseWhen": "You need a product mark (brand icon family or `Logo`), a state-driven glyph (`StatusIcon`, `PriorityIcon`) or an illustration.",
       "replacesRawHtml": [
         "<svg>",
-        "lucide-react"
+        "lucide-react",
+        "icon characters (✓ ✕ → ↗)",
+        "SVG data-URL icons"
       ],
       "story": "src/primitives/icons.stories.tsx",
       "status": "experimental"

package/docs/for-ai-agents.md

@@ -57,7 +57,7 @@ If a UI element exists in the design system, use it. Do not write `<button>`, `<
 | `<table>`                                             | `Table`, `DataTable`, `DataTableView`                                                                                                     |
 | `<h1>`–`<h6>`, `<p>`, `<code>`, `<kbd>`               | `Heading`, `Text`, `Code`, `Kbd`                                                                                                          |
 | `<hr>`                                                | `Separator`                                                                                                                               |
-| `<svg>`, `lucide-react`                               | the icon catalogue (`/icons`)                                                                                                             |
+| `<svg>`, `lucide`/`lucide-react` or any icon package, `✓ ✕ → ↗` as icons | the Lucide icon catalogue (`/icons`); `iconToSvg`/`iconCursor` outside React |
 | `flex gap-*` wrappers                                 | `Stack`, `Inline`; `Surface` / `Card` for boxes                                                                                           |
 | `title="…"`, `window.confirm()`, `alert()`            | `Tooltip`, `ConfirmActionButton` / `AlertDialog`, `useToast`                                                                              |
 

package/eslint-config/index.mjs

@@ -179,6 +179,243 @@ const noDsTokenRedefinition = {
   },
 };
 
+/* ─── Icons: Lucide, through the design system only ───────────────────── */
+
+/**
+ * Icon packages a product must not import: every UI icon is a Lucide glyph
+ * from `@assure-one/design-system/icons`, and the design system alone owns
+ * the Lucide dependency. Includes flag sets (a symbol library by another name).
+ */
+const ICON_PACKAGES = [
+  /^lucide(?:-react|-static|-vue|-svelte|-preact)?(?:\/|$)/,
+  /^@lucide\//,
+  /^react-icons(?:\/|$)/,
+  /^@?heroicons(?:\/|$)/,
+  /^@radix-ui\/react-icons$/,
+  /^@tabler\/icons/,
+  /^@phosphor-icons\//,
+  /^phosphor-react$/,
+  /^@fortawesome\//,
+  /^(?:react-)?feather(?:-icons)?$/,
+  /^@mui\/icons-material/,
+  /^iconoir/,
+  /^@iconify\//,
+  /^remixicon/,
+  /^@primer\/octicons/,
+  /^bootstrap-icons/,
+  /^ionicons/,
+  /^@ant-design\/icons/,
+  /^@carbon\/icons/,
+  /^simple-icons/,
+  /^country-flag-icons(?:\/|$)/,
+  /^react-country-flag$/,
+  /^flag-icons/,
+];
+/** An SVG file imported as a module (svgr `?react`, a URL import, a component import). */
+const SVG_MODULE = /\.svg(?:\?.*)?$/;
+
+/** @type {import("eslint").Rule.RuleModule} */
+const noIconLibraries = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Import icons from @assure-one/design-system/icons — never from Lucide or another icon package, and never an .svg module.",
+    },
+    schema: [],
+    messages: {
+      library:
+        '"{{ source }}" is an icon source outside the design system. UI icons are Lucide glyphs from "@assure-one/design-system/icons"; a missing glyph is a design-system PR.',
+      svgModule:
+        '"{{ source }}" imports an SVG file as an icon. Use a named icon from "@assure-one/design-system/icons" (a brand mark is a DS *BrandIcon or a static <img> asset).',
+    },
+  },
+  create(context) {
+    return importVisitors((node, source) => {
+      if (!source) return;
+      if (ICON_PACKAGES.some((re) => re.test(source))) {
+        context.report({ node, messageId: "library", data: { source } });
+      } else if (SVG_MODULE.test(source)) {
+        context.report({ node, messageId: "svgModule", data: { source } });
+      }
+    });
+  },
+};
+
+/**
+ * `ds-svg-content: <kind> — <why>` in a comment declares that a file draws
+ * SVG that is not a UI icon. Kinds: a chart or data mark, an illustration or
+ * preview, a document/annotation drawing, a decorative pattern, or a brand
+ * mark that is still waiting on a decision (tracked, never a UI icon).
+ */
+const SVG_CONTENT_DIRECTIVE =
+  /ds-svg-content:\s*(chart|illustration|document|pattern|brand)\b\s*(?:—|-|–|:)\s*\S/;
+/** Box sizes (px or Tailwind steps) that make an `<svg>` an icon, whatever the file says. */
+const ICON_STEP = String.raw`(?:2|2\.5|3|3\.5|4|4\.5|5|5\.5|6|7|8)(?:\s|$)`;
+const iconBoxClass = (axis) => new RegExp(String.raw`(?:^|\s)(?:[a-z0-9-]+:)*${axis}-${ICON_STEP}`);
+const MAX_ICON_PX = 32;
+
+function jsxAttribute(opening, name) {
+  return opening.attributes.find((a) => a.type === "JSXAttribute" && a.name?.name === name);
+}
+
+function staticValue(attribute) {
+  const value = attribute?.value;
+  if (!value) return undefined;
+  if (value.type === "Literal") return value.value;
+  if (value.type === "JSXExpressionContainer") {
+    const e = value.expression;
+    if (e.type === "Literal") return e.value;
+    if (e.type === "TemplateLiteral" && e.expressions.length === 0) return e.quasis[0].value.cooked;
+  }
+  return undefined;
+}
+
+function isIconSized(opening) {
+  const px = ["width", "height"]
+    .map((name) => Number.parseFloat(String(staticValue(jsxAttribute(opening, name)) ?? "")))
+    .filter((n) => Number.isFinite(n));
+  if (px.length > 0 && px.every((n) => n <= MAX_ICON_PX)) return true;
+  const className = staticValue(jsxAttribute(opening, "className"));
+  if (typeof className !== "string") return false;
+  return (
+    iconBoxClass("size").test(className) ||
+    (iconBoxClass("h").test(className) && iconBoxClass("w").test(className))
+  );
+}
+
+/** @type {import("eslint").Rule.RuleModule} */
+const noAuthoredSvg = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "No authored SVG icons in a product: draw icons with the design system's Lucide catalogue; SVG content (charts, illustrations, document drawings, patterns) declares itself with `ds-svg-content:`.",
+    },
+    schema: [],
+    messages: {
+      undeclared:
+        "Inline <svg> in a product. A UI icon is a named icon from \"@assure-one/design-system/icons\". If this SVG is content — a chart, an illustration, a document drawing or a pattern — say so in a `ds-svg-content: <kind> — <why>` comment in this file.",
+      iconSized:
+        "This <svg> is icon-sized, and an icon is a named icon from \"@assure-one/design-system/icons\" even in a file that draws SVG content. Brand marks declare `ds-svg-content: brand`.",
+      createIcon:
+        "createIcon() builds a custom icon. Products use the Lucide catalogue from \"@assure-one/design-system/icons\"; a missing glyph is a design-system PR.",
+      markup:
+        "SVG markup in a string is an authored icon source. Use a named icon (or iconToSvg/iconCursor) from \"@assure-one/design-system/icons\".",
+    },
+  },
+  create(context) {
+    const source = context.sourceCode ?? context.getSourceCode();
+    const declared = source
+      .getAllComments()
+      .map((c) => c.value.match(SVG_CONTENT_DIRECTIVE)?.[1])
+      .find(Boolean);
+    return {
+      JSXOpeningElement(node) {
+        if (node.name?.type !== "JSXIdentifier" || node.name.name !== "svg") return;
+        if (!declared) {
+          context.report({ node, messageId: "undeclared" });
+        } else if (declared !== "brand" && isIconSized(node)) {
+          context.report({ node, messageId: "iconSized" });
+        }
+      },
+      CallExpression(node) {
+        if (node.callee.type === "Identifier" && node.callee.name === "createIcon") {
+          context.report({ node, messageId: "createIcon" });
+        }
+      },
+      Literal(node) {
+        if (declared || typeof node.value !== "string") return;
+        if (/<svg[\s>]|data:image\/svg\+xml/i.test(node.value)) context.report({ node, messageId: "markup" });
+      },
+      TemplateElement(node) {
+        if (declared) return;
+        if (/<svg[\s>]|data:image\/svg\+xml/i.test(node.value.cooked ?? "")) {
+          context.report({ node, messageId: "markup" });
+        }
+      },
+    };
+  },
+};
+
+/**
+ * Characters that products have used as stand-in icons: arrows, ticks,
+ * crosses, stars, eyes, clocks. `×` is left out on purpose — it is the
+ * multiplication and dimension sign far more often than a close button.
+ */
+const GLYPH = "[✓✔✗✘✕✖▾▴▸◂▼▲►◄▶◀⏵⏷↑↓←→↗↘↙↖⇅⇄↩↪⋯⋮⚠ℹ★☆◉◎✎✏⟳↻↺⏱⌄⌃⨯⬆⬇➔➜➝➞]";
+const ONLY_GLYPHS = new RegExp(`^(?:${GLYPH}|\\p{Extended_Pictographic}|\\uFE0F|\\s)+$`, "u");
+const EDGE_GLYPH = new RegExp(`^${GLYPH}\\s|\\s${GLYPH}$`, "u");
+/** Elements whose text is a keyboard legend, where ↵ ⌘ ↑ are the key names. */
+const KEY_ELEMENTS = new Set(["Kbd", "KbdHint", "kbd", "Shortcut"]);
+const ICON_KEYS = new Set(["icon", "glyph", "symbol"]);
+
+function insideKeyLegend(node) {
+  for (let n = node.parent; n; n = n.parent) {
+    if (n.type === "JSXElement") {
+      const name = n.openingElement.name;
+      if (name?.type === "JSXIdentifier" && KEY_ELEMENTS.has(name.name)) return true;
+    }
+  }
+  return false;
+}
+
+function glyphText(text) {
+  const trimmed = text.trim();
+  if (!trimmed) return false;
+  return ONLY_GLYPHS.test(trimmed) || EDGE_GLYPH.test(trimmed);
+}
+
+/** A string that reaches JSX children directly (maybe through `?:` / `&&` / `||`). */
+function rendersAsChild(node) {
+  let n = node.parent;
+  while (n && (n.type === "ConditionalExpression" || n.type === "LogicalExpression")) n = n.parent;
+  return n?.type === "JSXExpressionContainer" && n.parent?.type === "JSXElement";
+}
+
+/** @type {import("eslint").Rule.RuleModule} */
+const noGlyphIcons = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Render icons, not characters: ✓ ✕ ↗ → ★ ⏱ standing in for an icon become a Lucide icon from the design system.",
+    },
+    schema: [],
+    messages: {
+      glyph:
+        '"{{ text }}" uses a character as an icon. Render the matching icon from "@assure-one/design-system/icons" (e.g. CheckIcon, XIcon, ArrowRightIcon, ArrowUpRightIcon) — keep the text and give the icon aria-hidden, or an accessible name if it stands alone. Keyboard legends belong in <Kbd>.',
+    },
+  },
+  create(context) {
+    const report = (node, text) =>
+      context.report({ node, messageId: "glyph", data: { text: text.trim().slice(0, 40) } });
+    return {
+      JSXText(node) {
+        if (glyphText(node.value) && !insideKeyLegend(node)) report(node, node.value);
+      },
+      Literal(node) {
+        if (typeof node.value !== "string" || !glyphText(node.value)) return;
+        const parent = node.parent;
+        const iconProperty =
+          parent?.type === "Property" &&
+          parent.value === node &&
+          ICON_KEYS.has(parent.key?.name ?? parent.key?.value) &&
+          ONLY_GLYPHS.test(node.value.trim());
+        if (iconProperty || (rendersAsChild(node) && !insideKeyLegend(node))) report(node, node.value);
+      },
+      TemplateLiteral(node) {
+        if (!rendersAsChild(node) || insideKeyLegend(node)) return;
+        const first = node.quasis[0].value.cooked ?? "";
+        const last = node.quasis[node.quasis.length - 1].value.cooked ?? "";
+        if (new RegExp(`^${GLYPH}\\s`, "u").test(first) || new RegExp(`\\s${GLYPH}$`, "u").test(last)) {
+          report(node, `${first}…${last}`);
+        }
+      },
+    };
+  },
+};
+
 /** The `ds` plugin: the rules alone, for a config that wires them itself. */
 export const plugin = {
   meta: { name: "@assure-one/design-system/eslint-config" },
@@ -187,6 +424,9 @@ export const plugin = {
     "no-radix-imports": noRadixImports,
     "no-deep-imports": noDeepImports,
     "no-ds-token-redefinition": noDsTokenRedefinition,
+    "no-icon-libraries": noIconLibraries,
+    "no-authored-svg": noAuthoredSvg,
+    "no-glyph-icons": noGlyphIcons,
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@assure-one/design-system",
-  "version": "1.43.0",
+  "version": "1.44.0",
   "description": "Assure One design system — tokens, primitives, and patterns for the Assure Suite.",
   "license": "UNLICENSED",
   "private": false,