@hoardodile/ui 0.1.7 → 0.1.8

package/dist/components/icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/merge-config.ts","../../src/lib/utils.ts","../../src/components/icon.tsx"],"names":[],"mappings":";;;;;AAQO,IAAM,UAAA,GAAa;AAAA,EACzB,MAAM,CAAC,MAAA,EAAQ,MAAM,KAAA,EAAO,WAAA,EAAa,eAAe,OAAO,CAAA;AAAA,EAC/D,SAAS,CAAC,MAAA,EAAQ,SAAA,EAAW,KAAA,EAAO,WAAW,OAAO,CAAA;AAAA,EACtD,QAAA,EAAU,CAAC,OAAO,CAAA;AAAA,EAClB,MAAA,EAAQ,CAAC,MAAA,EAAQ,QAAQ,CAAA;AAAA,EACzB,SAAA,EAAW,CAAC,SAAA,EAAW,QAAA,EAAU,SAAS,CAAA;AAAA,EAC1C,IAAA,EAAM,CAAC,KAAA,EAAO,SAAS,CAAA;AAAA,EACvB,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,EACjB,OAAA,EAAS,CAAC,MAAA,EAAQ,KAAK;AACxB,CAAA;AAEO,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAC1C,MAAA,EAAQ,EAAE,KAAA,EAAO,UAAA;AAClB,CAAC,CAAA;;;AClBM,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACQA,IAAM,WAAA,GAAc;AAAA,EACnB,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACL,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACpB,IAAA,EAAM,aAAA;AAAA,EACN,IAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAS6B;AAC5B,EAAA,uBACC,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACA,IAAA,EAAM,IAAA,KAAS,QAAA,KAAa,IAAA,GAAO,MAAA,GAAS,MAAA,CAAA;AAAA,MAC5C,WAAW,EAAA,CAAG,SAAA,EAAW,WAAA,CAAY,IAAI,GAAG,SAAS,CAAA;AAAA,MACpD,GAAG;AAAA;AAAA,GACL;AAEF","file":"icon.js","sourcesContent":["import { extendTailwindMerge } from \"tailwind-merge\"\n\n// The app's `@theme inline` tokens (theme.css) generate utility names\n// tailwind-merge doesn't know, so it misclassifies them — e.g. `text-ui` is\n// parsed as a text color and dropped next to any `text-*` color. The default\n// class groups are theme-backed, so extending the theme (keys mirror the v4\n// token namespaces one-to-one) registers every custom utility with correct\n// conflict semantics. merge-config.test.ts pins this list against theme.css.\nexport const mergeTheme = {\n\ttext: [\"tiny\", \"ui\", \"doc\", \"doc-title\", \"doc-heading\", \"quote\"],\n\tspacing: [\"chip\", \"control\", \"nav\", \"sidebar\", \"panel\"],\n\ttracking: [\"label\"],\n\tshadow: [\"card\", \"dialog\"],\n\tcontainer: [\"reading\", \"medium\", \"content\"],\n\tfont: [\"doc\", \"heading\"],\n\tease: [\"standard\"],\n\tanimate: [\"skel\", \"pop\"],\n} as const\n\nexport const twMerge = extendTailwindMerge({\n\textend: { theme: mergeTheme },\n})\n","import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"./merge-config\"\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs))\n}\n","import type { ComponentType } from \"react\"\nimport { cn } from \"../lib/utils.ts\"\nimport type { IconMode } from \"../icons/icon-style.ts\"\n\n/** Anything renderable through `Icon`: a Solar icon (imported from the\n    central registry on the web side) or a local utility mark (marks.tsx) —\n    both take `className`; registry icons take `mode` (marks ignore it). */\nexport type IconType = ComponentType<{ className?: string; mode?: IconMode }>\n\n/** The three sanctioned icon sizes: `sm` 12 inside pills and meta lines,\n    `md` 16 by default, `lg` 20 for primary toolbar actions. */\nexport type IconSize = \"sm\" | \"md\" | \"lg\"\n\nconst sizeClasses = {\n\tsm: \"size-3\",\n\tmd: \"size-4\",\n\tlg: \"size-5\",\n} as const satisfies Record<IconSize, string>\n\n/**\n * Solar icons with the design system's defaults baked in: callers pass\n * the registry icon — by default it renders the boldDuotone weight,\n * whose second tone takes the palette's `--icon-tone` hue (theme.css\n * recolors the duotone accent via `--solar-secondary-color` under the\n * `hd-icon` hook), so colored palettes feel alive while mono stays\n * neutral.\n *\n * Mode is one channel: `mode` picks the weight directly; `selected` maps\n * to `\"bold\"` (the filled, single-color weight — the only sanctioned use\n * of Bold); otherwise the active icon style preference decides.\n *\n * Sizing is class-based, three tiers only — `sm`/`md`/`lg` map to\n * `size-3/4/5` (12/16/20). Escape the tiers with\n * `className=\"size-[18px]\"` — twMerge lets the later class win.\n *\n * ✓/×/+ semantics never use Solar's Circle/Square composites — the\n * container is full-bleed while the informative mark is barely a third\n * of the box, so it goes muddy at small sizes. The plain marks (Check,\n * Cross, Plus from marks.tsx) cover these at every size; `sm` otherwise\n * belongs to simple single-stroke glyphs (arrows, dots, grips).\n */\nexport function Icon({\n\ticon: IconComponent,\n\tmode,\n\tsize = \"md\",\n\tselected,\n\tclassName,\n\t...rest\n}: {\n\ticon: IconType\n\t/** Explicit weight override; `selected` and the style preference lose\n\t    to it. */\n\tmode?: IconMode\n\tsize?: IconSize\n\t/** Selected state — renders the icon's `\"bold\"` weight. */\n\tselected?: boolean\n\tclassName?: string\n} & Record<string, unknown>) {\n\treturn (\n\t\t<IconComponent\n\t\t\tmode={mode ?? (selected === true ? \"bold\" : undefined)}\n\t\t\tclassName={cn(\"hd-icon\", sizeClasses[size], className)}\n\t\t\t{...rest}\n\t\t/>\n\t)\n}\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"icon.js"}