@dybo-ai/design 1.0.1 → 1.2.0

package/CLAUDE.md

@@ -12,15 +12,17 @@ This `CLAUDE.md` is itself shipped to consumers (it's in `package.json`'s `files
 
 `tokens.json` is canonical (values + original Figma variable names). Every other token surface is a **manually maintained mirror** of it — there is no code generation:
 
-| File | Mirrors tokens.json as... |
-|---|---|
-| `tokens.mjs` | ESM flat exports (`color`, `space`, `radius`, etc.) |
-| `tokens.cjs` | CommonJS mirror of `tokens.mjs` |
-| `theme.css` | CSS custom properties + `.dybo-*` helper classes (`.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`) |
-| `tailwind-preset.cjs` | Tailwind theme extension (`dybo-*` utilities) |
-| `react/index.jsx` | Thin React wrappers (`Button`, `Card`, `Input`, `Badge`) over the `theme.css` classes — requires the consumer to import `theme.css` separately |
+| File                  | Mirrors tokens.json as...                                                                                                                      |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tokens.mjs`          | ESM flat exports (`color`, `space`, `radius`, etc.)                                                                                            |
+| `tokens.cjs`          | CommonJS mirror of `tokens.mjs`                                                                                                                |
+| `theme.css`           | CSS custom properties + `.dybo-*` helper classes (`.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`)                                    |
+| `portal-tokens.css`   | HSL shadcn drop-in for client portal / ticket prototype (`--background`, `--primary`, etc.) — mirrors `portal` namespace in `tokens.json`         |
+| `src/index.tsx`       | React components over `theme.css` classes — requires the consumer to import `theme.css` separately                                             |
 
-**When changing a token value or adding a new one, update all five in the same change.** There's no automated check that catches drift between them (a Style Dictionary generation pipeline is proposed but not implemented — see `docs/SETUP.md` Part E).
+**When changing a token value or adding a new one, update all mirrors in the same change** (`tokens.json`, `tokens.mjs`, `tokens.cjs`, `theme.css`, and `portal-tokens.css` when portal HSL vars are affected). There's no automated check that catches drift between them (a Style Dictionary generation pipeline is proposed but not implemented — see `docs/SETUP.md` Part E).
+
+`portal` namespace in `tokens.json` holds ticket-management / client-portal values (priority badges, ChatWoot statuses, operator background). See `docs/portal-token-mapping.md` for the full ticket ↔ dybo mapping.
 
 `assets/` holds static brand image files (currently the logo) — it's shipped via `package.json`'s `files` list and importable as `@dybo-ai/design/assets/<file>`, but it's not part of the token-mirror sync described above.
 
@@ -31,11 +33,13 @@ This `CLAUDE.md` is itself shipped to consumers (it's in `package.json`'s `files
 There is no build, lint, or test tooling in this repo — don't invent npm scripts that don't exist (`package.json` has no `scripts` field).
 
 Publishing (manual, no CI):
+
 ```bash
 npm version patch   # or minor / major — see docs/SETUP.md Part D for the semver rule
 npm publish
 git push --follow-tags
 ```
+
 `npm publish --dry-run` is useful to confirm the packed file list matches `package.json`'s `files` array before actually publishing. Publishing requires a `.npmrc` (git-ignored, copy from `.npmrc.example`) with a `GITHUB_TOKEN` that has `write:packages`.
 
 ## Design system rules for consuming apps
@@ -49,9 +53,11 @@ When building UI in a DYBO app, use `@dybo-ai/design`. Do not hard-code hex valu
 - **Radius:** 12 (buttons/inputs), 20 (cards), 999 (pills).
 
 How to consume (pick per app):
-- Tailwind app → `presets: [require("@dybo-ai/design/tailwind")]`, use `dybo-*` utilities.
+
+- Tailwind app → `@import "@dybo-ai/design/theme.css"` in CSS, use `dybo-*` utilities.
 - Non-Tailwind → `import "@dybo-ai/design/theme.css"` and use `.dybo-glass`, `.dybo-btn`, `.dybo-input`, `.dybo-badge`.
-- React → `import { Button, Card, Input, Badge } from "@dybo-ai/design/react"` (also import the CSS).
-- Programmatic values → `import { color, space, radius } from "@dybo-ai/design"`.
+- Client portal / Tickets (shadcn HSL) → `@import "@dybo-ai/design/portal-tokens.css"` as drop-in for prototype `tokens.css`.
+- React → `import { Button, Card, IconRail, ScopeTabs, PriorityBadge, TicketStatusBadge } from "@dybo-ai/design"` (also import the CSS).
+- Programmatic values → `import { color, portal, space, radius } from "@dybo-ai/design/tokens"`.
 
 Reference `tokens.json` for the full token list and `docs/design-system.md` for rationale. Semantic "danger" is red `#a21a17` — ignore Figma's mislabeled orange "Feedback/Error".

package/README.md

@@ -55,7 +55,7 @@ import "@dybo-ai/design/theme.css";
 
 ```tsx
 import "@dybo-ai/design/theme.css";
-import { Button, Card, Input, Badge } from "@dybo-ai/design/react";
+import { Button, Card, Input, Badge } from "@dybo-ai/design";
 ```
 
 All components are TypeScript with `I`-prefixed interfaces.
@@ -87,7 +87,7 @@ import {
   TopBar,
   NavItem,
   NavSection,
-} from "@dybo-ai/design/react";
+} from "@dybo-ai/design";
 
 function MyApp() {
   return (
@@ -116,7 +116,7 @@ function MyApp() {
 ### Glassmorphism card
 
 ```tsx
-import { Card, Button, Input } from "@dybo-ai/design/react";
+import { Card, Button, Input } from "@dybo-ai/design";
 
 <Card>
   <Input label="Name" placeholder="Enter your name" />
@@ -129,8 +129,8 @@ import { Card, Button, Input } from "@dybo-ai/design/react";
 ### DataTable
 
 ```tsx
-import { DataTable } from "@dybo-ai/design/react";
-import type { IColumn } from "@dybo-ai/design/react";
+import { DataTable } from "@dybo-ai/design";
+import type { IColumn } from "@dybo-ai/design";
 
 interface IUser {
   id: number;
@@ -161,7 +161,7 @@ const columns: IColumn<IUser>[] = [
 
 ```tsx
 import { useState } from "react";
-import { Tabs } from "@dybo-ai/design/react";
+import { Tabs } from "@dybo-ai/design";
 
 const TABS = [
   { key: "federal", label: "Federal (IRS)" },
@@ -185,7 +185,7 @@ function ProjectDetail() {
 ### Overview grid
 
 ```tsx
-import { OverviewGrid } from "@dybo-ai/design/react";
+import { OverviewGrid } from "@dybo-ai/design";
 
 <OverviewGrid
   fields={[
@@ -200,7 +200,7 @@ import { OverviewGrid } from "@dybo-ai/design/react";
 ### Alert
 
 ```tsx
-import { Alert } from "@dybo-ai/design/react";
+import { Alert } from "@dybo-ai/design";
 
 <Alert variant="danger" onClose={() => setError(null)}>
   Failed to save. Please check the data and try again.
@@ -211,7 +211,7 @@ import { Alert } from "@dybo-ai/design/react";
 
 ```tsx
 import { useState } from "react";
-import { Modal, Button } from "@dybo-ai/design/react";
+import { Modal, Button } from "@dybo-ai/design";
 
 function ConfirmDelete() {
   const [open, setOpen] = useState(false);
@@ -245,7 +245,7 @@ function ConfirmDelete() {
 ### Login card
 
 ```tsx
-import { LoginCard, Input, Button } from "@dybo-ai/design/react";
+import { LoginCard, Input, Button } from "@dybo-ai/design";
 
 <LoginCard
   logo={<img src="/logo.png" alt="DYBO" height={44} />}
@@ -273,7 +273,7 @@ import { LoginCard, Input, Button } from "@dybo-ai/design/react";
 ### Select
 
 ```tsx
-import { Select } from "@dybo-ai/design/react";
+import { Select } from "@dybo-ai/design";
 
 <Select
   label="State"
@@ -292,7 +292,7 @@ import { Select } from "@dybo-ai/design/react";
 ## Tokens in JS/TS
 
 ```ts
-import { color, space, radius } from "@dybo-ai/design";
+import { color, space, radius } from "@dybo-ai/design/tokens";
 
 color.brand.blue; // "#5878a7"
 color.semantic.danger.solid; // "#a21a17"

package/dist/index.cjs

@@ -112,13 +112,122 @@ function Badge({ status = "brand", className, ...props }) {
   );
 }
 var cx5 = (...c) => c.filter(Boolean).join(" ");
+function IconRailItem({
+  active = false,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      className: cx5(
+        "dybo-icon-rail__item",
+        active ? "dybo-icon-rail__item--active" : void 0,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function IconRail({ brand, children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cx5("dybo-icon-rail", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-icon-rail__brand", children: brand }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-icon-rail__nav", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-icon-rail__pill", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "dybo-icon-rail__items", children }) }) })
+  ] });
+}
+var cx6 = (...c) => c.filter(Boolean).join(" ");
+function NavTabs({ tabs, active, onChange, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx6("dybo-navtabs", className), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": tab.key === active,
+      disabled: tab.disabled,
+      className: cx6(
+        "dybo-navtab",
+        tab.key === active ? "dybo-navtab--active" : void 0
+      ),
+      onClick: () => !tab.disabled && onChange(tab.key),
+      children: tab.label
+    },
+    tab.key
+  )) });
+}
+var cx7 = (...c) => c.filter(Boolean).join(" ");
+function ScopeTabs({ tabs, active, onChange, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx7("dybo-scope", className), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": tab.key === active,
+      disabled: tab.disabled,
+      className: cx7(
+        "dybo-scope-tab",
+        tab.key === active ? "dybo-scope-tab--active" : void 0
+      ),
+      onClick: () => !tab.disabled && onChange(tab.key),
+      children: [
+        tab.label,
+        tab.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dybo-scope-count", children: tab.count })
+      ]
+    },
+    tab.key
+  )) });
+}
+var cx8 = (...c) => c.filter(Boolean).join(" ");
+function PriorityBadge({
+  priority,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cx8("dybo-priority", `dybo-priority--${priority}`, className),
+      ...props,
+      children: children ?? priority
+    }
+  );
+}
+var cx9 = (...c) => c.filter(Boolean).join(" ");
+var defaultLabels = {
+  open: "Open",
+  pending: "Pending",
+  snoozed: "Snoozed",
+  resolved: "Resolved"
+};
+function TicketStatusBadge({
+  status,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cx9(
+        "dybo-ticket-status",
+        `dybo-ticket-status--${status}`,
+        className
+      ),
+      ...props,
+      children: children ?? defaultLabels[status]
+    }
+  );
+}
+var cx10 = (...c) => c.filter(Boolean).join(" ");
 function AppShell({
   sidebar,
   topBar,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx5("dybo-app-shell", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx10("dybo-app-shell", className), children: [
     sidebar,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dybo-main", children: [
       topBar,
@@ -126,7 +235,7 @@ function AppShell({
     ] })
   ] });
 }
-var cx6 = (...c) => c.filter(Boolean).join(" ");
+var cx11 = (...c) => c.filter(Boolean).join(" ");
 function Sidebar({
   brand,
   children,
@@ -135,7 +244,7 @@ function Sidebar({
   onLogout,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cx6("dybo-sidebar", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: cx11("dybo-sidebar", className), children: [
     brand && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-sidebar__brand", children: brand }),
     /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "dybo-sidebar__nav", children }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dybo-sidebar__footer", children: [
@@ -176,14 +285,14 @@ function Sidebar({
     ] })
   ] });
 }
-var cx7 = (...c) => c.filter(Boolean).join(" ");
+var cx12 = (...c) => c.filter(Boolean).join(" ");
 function TopBar({ title, children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cx7("dybo-topbar", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cx12("dybo-topbar", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dybo-topbar__title", children: title }),
     children
   ] });
 }
-var cx8 = (...c) => c.filter(Boolean).join(" ");
+var cx13 = (...c) => c.filter(Boolean).join(" ");
 function NavItem({
   label,
   href,
@@ -192,7 +301,7 @@ function NavItem({
   onClick,
   className
 }) {
-  const baseClass = cx8(
+  const baseClass = cx13(
     "dybo-nav-item",
     active ? "dybo-nav-item--active" : void 0,
     className
@@ -209,7 +318,7 @@ function NavItem({
 function NavSection({ label }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-sidebar__section", children: label });
 }
-var cx9 = (...c) => c.filter(Boolean).join(" ");
+var cx14 = (...c) => c.filter(Boolean).join(" ");
 function DataTable({
   columns,
   rows,
@@ -223,11 +332,11 @@ function DataTable({
     if (typeof rowKey === "function") return rowKey(row, index);
     return row[rowKey];
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx9("dybo-table-wrap", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "dybo-table", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx14("dybo-table-wrap", className), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "dybo-table", children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
       "th",
       {
-        className: cx9(
+        className: cx14(
           col.align === "left" ? "left" : void 0,
           col.className
         ),
@@ -249,7 +358,7 @@ function DataTable({
     ) }) : rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "tr",
       {
-        className: cx9(
+        className: cx14(
           onRowClick ? "dybo-table__row--clickable" : void 0
         ),
         onClick: onRowClick ? () => onRowClick(row) : void 0,
@@ -258,7 +367,7 @@ function DataTable({
           return /* @__PURE__ */ jsxRuntime.jsx(
             "td",
             {
-              className: cx9(
+              className: cx14(
                 col.align === "left" ? "left" : void 0,
                 col.className
               ),
@@ -272,16 +381,16 @@ function DataTable({
     )) })
   ] }) });
 }
-var cx10 = (...c) => c.filter(Boolean).join(" ");
+var cx15 = (...c) => c.filter(Boolean).join(" ");
 function Tabs({ tabs, active, onChange, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx10("dybo-tabs", className), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx15("dybo-tabs", className), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
       role: "tab",
       "aria-selected": tab.key === active,
       disabled: tab.disabled,
-      className: cx10(
+      className: cx15(
         "dybo-tab",
         tab.key === active ? "dybo-tab--active" : void 0
       ),
@@ -291,22 +400,22 @@ function Tabs({ tabs, active, onChange, className }) {
     tab.key
   )) });
 }
-var cx11 = (...c) => c.filter(Boolean).join(" ");
+var cx16 = (...c) => c.filter(Boolean).join(" ");
 function OverviewField({
   label,
   value,
   className,
   style
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx11("dybo-overview-field", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx16("dybo-overview-field", className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dybo-overview-field__label", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dybo-overview-field__value", children: value })
   ] });
 }
 function OverviewGrid({ fields, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx11("dybo-overview-grid", className), children: fields.map((field, i) => /* @__PURE__ */ jsxRuntime.jsx(OverviewField, { ...field }, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx16("dybo-overview-grid", className), children: fields.map((field, i) => /* @__PURE__ */ jsxRuntime.jsx(OverviewField, { ...field }, i)) });
 }
-var cx12 = (...c) => c.filter(Boolean).join(" ");
+var cx17 = (...c) => c.filter(Boolean).join(" ");
 function Select({
   label,
   error,
@@ -334,7 +443,7 @@ function Select({
       "select",
       {
         id: selectId,
-        className: cx12("dybo-select", className),
+        className: cx17("dybo-select", className),
         style: error ? {
           borderColor: "var(--dybo-danger)",
           boxShadow: "0 0 0 3px rgba(162,26,23,0.12)"
@@ -365,7 +474,7 @@ var icons = {
   danger: "\u2715",
   info: "\u2139"
 };
-var cx13 = (...c) => c.filter(Boolean).join(" ");
+var cx18 = (...c) => c.filter(Boolean).join(" ");
 function Alert({
   variant = "info",
   children,
@@ -375,7 +484,7 @@ function Alert({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cx13("dybo-alert", `dybo-alert--${variant}`, className),
+      className: cx18("dybo-alert", `dybo-alert--${variant}`, className),
       role: "alert",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flexShrink: 0, fontWeight: 700 }, children: icons[variant] }),
@@ -470,14 +579,14 @@ function Modal({
     document.body
   );
 }
-var cx14 = (...c) => c.filter(Boolean).join(" ");
+var cx19 = (...c) => c.filter(Boolean).join(" ");
 function LoginCard({
   logo,
   subtitle,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-login-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx14("dybo-login-card", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dybo-login-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx19("dybo-login-card", className), children: [
     logo && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -500,16 +609,22 @@ exports.Badge = Badge;
 exports.Button = Button;
 exports.Card = Card;
 exports.DataTable = DataTable;
+exports.IconRail = IconRail;
+exports.IconRailItem = IconRailItem;
 exports.Input = Input;
 exports.LoginCard = LoginCard;
 exports.Modal = Modal;
 exports.NavItem = NavItem;
 exports.NavSection = NavSection;
+exports.NavTabs = NavTabs;
 exports.OverviewField = OverviewField;
 exports.OverviewGrid = OverviewGrid;
+exports.PriorityBadge = PriorityBadge;
+exports.ScopeTabs = ScopeTabs;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.Tabs = Tabs;
+exports.TicketStatusBadge = TicketStatusBadge;
 exports.TopBar = TopBar;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map