@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/chunk-DPLRHEJZ.js

@@ -0,0 +1,78 @@
+"use client";
+import { cn } from '@arbidocs/react/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/ToneBadge.tsx
+
+// src/components/tones.ts
+var TONE_SURFACE = {
+  neutral: "bg-gray-bg text-gray-text",
+  info: "bg-blue-bg text-blue-text",
+  success: "bg-green-bg text-green-text",
+  warning: "bg-yellow-bg text-yellow-text",
+  danger: "bg-red-bg text-red-text",
+  accent: "bg-purple-bg text-purple-text",
+  ai: "bg-ai-soft text-ai-ink"
+};
+var TONE_BORDER = {
+  neutral: "border-gray-border",
+  info: "border-blue-border",
+  success: "border-green-border",
+  warning: "border-yellow-border",
+  danger: "border-red-border",
+  accent: "border-purple-border",
+  ai: "border-transparent"
+};
+var TONE_DOT = {
+  neutral: "bg-gray-text",
+  info: "bg-blue-solid",
+  success: "bg-green-solid",
+  warning: "bg-yellow-solid",
+  danger: "bg-red-solid",
+  accent: "bg-purple-solid",
+  ai: "bg-ai-ink"
+};
+function ToneBadge({
+  tone = "neutral",
+  icon,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "data-slot": "tone-badge",
+      "data-tone": tone,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+        TONE_SURFACE[tone],
+        TONE_BORDER[tone],
+        className
+      ),
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+function Dot({ tone = "neutral", label, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      "data-slot": "dot",
+      "data-tone": tone,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      className: cn("inline-block size-2 shrink-0 rounded-full", TONE_DOT[tone], className)
+    }
+  );
+}
+
+export { Dot, TONE_BORDER, TONE_SURFACE, ToneBadge };
+//# sourceMappingURL=chunk-DPLRHEJZ.js.map
+//# sourceMappingURL=chunk-DPLRHEJZ.js.map

package/dist/chunk-DPLRHEJZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tones.ts","../src/components/ToneBadge.tsx"],"names":[],"mappings":";;;;;;AAWO,IAAM,YAAA,GAAqC;AAAA,EAChD,OAAA,EAAS,2BAAA;AAAA,EACT,IAAA,EAAM,2BAAA;AAAA,EACN,OAAA,EAAS,6BAAA;AAAA,EACT,OAAA,EAAS,+BAAA;AAAA,EACT,MAAA,EAAQ,yBAAA;AAAA,EACR,MAAA,EAAQ,+BAAA;AAAA,EACR,EAAA,EAAI;AACN;AAGO,IAAM,WAAA,GAAoC;AAAA,EAC/C,OAAA,EAAS,oBAAA;AAAA,EACT,IAAA,EAAM,oBAAA;AAAA,EACN,OAAA,EAAS,qBAAA;AAAA,EACT,OAAA,EAAS,sBAAA;AAAA,EACT,MAAA,EAAQ,mBAAA;AAAA,EACR,MAAA,EAAQ,sBAAA;AAAA,EACR,EAAA,EAAI;AACN;AAGO,IAAM,QAAA,GAAiC;AAAA,EAC5C,OAAA,EAAS,cAAA;AAAA,EACT,IAAA,EAAM,eAAA;AAAA,EACN,OAAA,EAAS,gBAAA;AAAA,EACT,OAAA,EAAS,iBAAA;AAAA,EACT,MAAA,EAAQ,cAAA;AAAA,EACR,MAAA,EAAQ,iBAAA;AAAA,EACR,EAAA,EAAI;AACN,CAAA;AC3BO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA,GAAO,SAAA;AAAA,EACP,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,oFAAA;AAAA,QACA,aAAa,IAAI,CAAA;AAAA,QACjB,YAAY,IAAI,CAAA;AAAA,QAChB;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,QACA;AAAA;AAAA;AAAA,GACH;AAEJ;AASO,SAAS,GAAA,CAAI,EAAE,IAAA,GAAO,SAAA,EAAW,OAAO,SAAA,EAAW,GAAG,MAAK,EAAa;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAU,KAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA;AAAA,MACtB,YAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAa,QAAQ,MAAA,GAAY,IAAA;AAAA,MACjC,WAAW,EAAA,CAAG,2CAAA,EAA6C,QAAA,CAAS,IAAI,GAAG,SAAS;AAAA;AAAA,GACtF;AAEJ","file":"chunk-DPLRHEJZ.js","sourcesContent":["/**\n * The ONE status/tone vocabulary of the blocks. `StatusPill`, `ToneBadge`, `Dot` and the plan,\n * connection and tag chips all read these maps, so a tone looks the same wherever it appears and\n * a new tone is added in one place. Every pair is a token pair checked by\n * `tokens.contrast.test.ts` (`--{hue}-text` on `--{hue}-bg`).\n */\n\n/** Semantic tones, mapped to the token palette (`--{hue}-bg|text|border`, `--ai-*`). */\nexport type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'accent' | 'ai'\n\n/** Background + text of a tinted chip. */\nexport const TONE_SURFACE: Record<Tone, string> = {\n  neutral: 'bg-gray-bg text-gray-text',\n  info: 'bg-blue-bg text-blue-text',\n  success: 'bg-green-bg text-green-text',\n  warning: 'bg-yellow-bg text-yellow-text',\n  danger: 'bg-red-bg text-red-text',\n  accent: 'bg-purple-bg text-purple-text',\n  ai: 'bg-ai-soft text-ai-ink',\n}\n\n/** Border of a tinted chip (the AI tint has none). */\nexport const TONE_BORDER: Record<Tone, string> = {\n  neutral: 'border-gray-border',\n  info: 'border-blue-border',\n  success: 'border-green-border',\n  warning: 'border-yellow-border',\n  danger: 'border-red-border',\n  accent: 'border-purple-border',\n  ai: 'border-transparent',\n}\n\n/** Solid fill of a status dot. */\nexport const TONE_DOT: Record<Tone, string> = {\n  neutral: 'bg-gray-text',\n  info: 'bg-blue-solid',\n  success: 'bg-green-solid',\n  warning: 'bg-yellow-solid',\n  danger: 'bg-red-solid',\n  accent: 'bg-purple-solid',\n  ai: 'bg-ai-ink',\n}\n","import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '@arbidocs/react/ui'\nimport { TONE_BORDER, TONE_DOT, TONE_SURFACE, type Tone } from './tones'\n\nexport type { Tone }\n\nexport interface ToneBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone\n  /** Leading glyph or dot. */\n  icon?: ReactNode\n  children: ReactNode\n}\n\n/** A small tinted label. The host decides the tone and the words (status, level, priority...). */\nexport function ToneBadge({\n  tone = 'neutral',\n  icon,\n  children,\n  className,\n  ...rest\n}: ToneBadgeProps) {\n  return (\n    <span\n      {...rest}\n      data-slot=\"tone-badge\"\n      data-tone={tone}\n      className={cn(\n        'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium',\n        TONE_SURFACE[tone],\n        TONE_BORDER[tone],\n        className\n      )}\n    >\n      {icon}\n      {children}\n    </span>\n  )\n}\n\nexport interface DotProps extends HTMLAttributes<HTMLSpanElement> {\n  tone?: Tone\n  /** Accessible name; without it the dot is decorative (`aria-hidden`). */\n  label?: string\n}\n\n/** A solid status dot in a tone. */\nexport function Dot({ tone = 'neutral', label, className, ...rest }: DotProps) {\n  return (\n    <span\n      {...rest}\n      data-slot=\"dot\"\n      data-tone={tone}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      className={cn('inline-block size-2 shrink-0 rounded-full', TONE_DOT[tone], className)}\n    />\n  )\n}\n"]}