{"_id":"@cofcoai/ui","_rev":"4-c5ee4cbcbfbd52f148faf39878a7fba8","name":"@cofcoai/ui","dist-tags":{"latest":"0.3.3"},"versions":{"0.3.0":{"name":"@cofcoai/ui","version":"0.3.0","keywords":["cofco","design-system","react","tailwind","components","scaffold"],"license":"UNLICENSED","_id":"@cofcoai/ui@0.3.0","maintainers":[{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"}],"bin":{"ui":"scripts/setup.mjs","cofco-ui":"scripts/setup.mjs"},"dist":{"shasum":"151fe38b4f4e3be5157c15b29d0ce504348755dc","tarball":"https://registry.npmjs.org/@cofcoai/ui/-/ui-0.3.0.tgz","fileCount":49,"integrity":"sha512-mK+r7HbxBG2Uirneu8X3M2d6SNhGkjUa1qtRgtCbZGlvWpiCvXf+MyVrL1gjsfqyv3MaVZjiN6YfWmDRplLjFA==","signatures":[{"sig":"MEQCIHrHN0qpm6Fw6gN6jz3xacUbZZDyqWRx/F5tEkCRUC2lAiAjnFjAu07GuvlRZ7G2QJLSJA5OsscwBWD/GFwI+fqZAg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":144715},"type":"module","scripts":{"typecheck":"tsc --noEmit"},"_npmUser":{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"},"_npmVersion":"11.6.1","description":"COFCO design-system scaffold. `npx @cofcoai/ui` copies the React + Tailwind components, the design skill, and the rules straight into your project — no dependency, no build.","directories":{},"_nodeVersion":"24.10.0","dependencies":{"@clack/prompts":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.3.0_1782405353370_0.09607126697673096","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@cofcoai/ui","version":"0.3.1","keywords":["cofco","design-system","react","tailwind","components","scaffold"],"license":"UNLICENSED","_id":"@cofcoai/ui@0.3.1","maintainers":[{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"}],"bin":{"ui":"scripts/setup.mjs","cofco-ui":"scripts/setup.mjs"},"dist":{"shasum":"f01282342db0e45d069a28f377483b9b0f790c19","tarball":"https://registry.npmjs.org/@cofcoai/ui/-/ui-0.3.1.tgz","fileCount":49,"integrity":"sha512-d4b8ckGvfO0lzfD0kCjtNLuri9vSlN16M6yWHdZ3TKVpfbLVexjrAVZyIGh82reEi+rkgM3ZNo11gnVrUmGxnA==","signatures":[{"sig":"MEYCIQDFX7FB2v8xSsiWBEhmER2GSAV3S+4CmxbdFiHpC1TIeQIhAMvZBBtIXI/IJlKN7JmmSQcq8M/c+lamltDefDGG8bnI","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":146129},"type":"module","scripts":{"typecheck":"tsc --noEmit"},"_npmUser":{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"},"_npmVersion":"11.6.1","description":"COFCO design-system scaffold. `npx @cofcoai/ui` copies the React + Tailwind components, the design skill, and the rules straight into your project — no dependency, no build.","directories":{},"_nodeVersion":"24.10.0","dependencies":{"@clack/prompts":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.3.1_1782406371941_0.3130753869225582","host":"s3://npm-registry-packages-npm-production"}},"0.3.2":{"name":"@cofcoai/ui","version":"0.3.2","keywords":["cofco","design-system","react","tailwind","components","scaffold"],"license":"UNLICENSED","_id":"@cofcoai/ui@0.3.2","maintainers":[{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"}],"bin":{"ui":"scripts/setup.mjs","cofco-ui":"scripts/setup.mjs"},"dist":{"shasum":"7e4cd73f03dc5febc708908d811ee8de6d7f4bee","tarball":"https://registry.npmjs.org/@cofcoai/ui/-/ui-0.3.2.tgz","fileCount":49,"integrity":"sha512-Fhr4NIEBI0savvyDT0kwd312+g8RHQQPIYOa201yElmxBOngWp4uqByWRhgZqYngnXCcKPSIbuzDM6S7tdWJAg==","signatures":[{"sig":"MEYCIQC6Kawf10xyCRKJnlnEwpEC0uUhyC6FExVdppYdnYdbHQIhAOOmJFKPnICMxhvd2AC/AOTZJ9vKFqhQdQcS/Q71w+sZ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":146129},"type":"module","scripts":{"typecheck":"tsc --noEmit"},"_npmUser":{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"},"_npmVersion":"11.6.1","description":"COFCO design-system scaffold. `npx @cofcoai/ui` copies the React + Tailwind components, the design skill, and the rules straight into your project — no dependency, no build.","directories":{},"_nodeVersion":"24.10.0","dependencies":{"@clack/prompts":"^0.7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.3.2_1782406623272_0.6718454506884834","host":"s3://npm-registry-packages-npm-production"}},"0.3.3":{"name":"@cofcoai/ui","version":"0.3.3","description":"COFCO design-system scaffold. `npx @cofcoai/ui` copies the React + Tailwind components, the design skill, and the rules straight into your project — no dependency, no build.","type":"module","bin":{"ui":"scripts/setup.mjs","cofco-ui":"scripts/setup.mjs"},"publishConfig":{"access":"public"},"scripts":{"typecheck":"tsc --noEmit"},"keywords":["cofco","design-system","react","tailwind","components","scaffold"],"license":"UNLICENSED","dependencies":{"@clack/prompts":"^0.7.0"},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript":"^5.4.0"},"_id":"@cofcoai/ui@0.3.3","_nodeVersion":"24.10.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-o0gTTVifGiKEHN/dO36MHX+/CL2W9E3maoSDo6Z5bL6IgtyZjCMrOXJQVneJUzo4CIW28aQJdwq3d0ehjg3a2g==","shasum":"608946a2d011eb28f57f9bfead79409dacaee19c","tarball":"https://registry.npmjs.org/@cofcoai/ui/-/ui-0.3.3.tgz","fileCount":49,"unpackedSize":146485,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCafzsEz8icf1LkDtaIoTJhe0iZxuoAVM247qo1RAs2hQIhAOwUkF8FFGcxNORcv33CjJl1pUcaULDl045+WiWdnylb"}]},"_npmUser":{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"},"directories":{},"maintainers":[{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.3.3_1782406835873_0.48772560374706253"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-25T16:35:53.144Z","modified":"2026-06-25T17:00:36.183Z","0.3.0":"2026-06-25T16:35:53.506Z","0.3.1":"2026-06-25T16:52:52.086Z","0.3.2":"2026-06-25T16:57:03.432Z","0.3.3":"2026-06-25T17:00:36.035Z"},"license":"UNLICENSED","keywords":["cofco","design-system","react","tailwind","components","scaffold"],"description":"COFCO design-system scaffold. `npx @cofcoai/ui` copies the React + Tailwind components, the design skill, and the rules straight into your project — no dependency, no build.","maintainers":[{"name":"cofcoai","email":"joaquimcosta@cofcointernational.com"}],"readme":"# COFCO Global / Generic Components — `@cofcoai/ui`\r\n\r\nReusable **React + TypeScript + Tailwind** components extracted from the Figma\r\nfile [Global / Generic Components](https://www.figma.com/design/WK0C1ib2E1kJwJe0x6mFLw/Global---Generic-Components).\r\n\r\nPlain React + Tailwind utility classes; design tokens are defined in\r\n[`src/cofco-theme.css`](src/cofco-theme.css) via a Tailwind v4 `@theme` block and\r\nexposed as semantic Tailwind classes (`bg-primary`, `shadow-04dp`, …), and icons\r\nare inline SVG — **no PNG / raster assets**, so you can drop these into any\r\nproject.\r\n\r\n## Install\r\n\r\n`@cofcoai/ui` is a **scaffold**, not a dependency — one command copies the\r\ncomponent source, the design skill, and the rules into your repo:\r\n\r\n```bash\r\nnpx @cofcoai/ui@latest   # prompts for target folder + AI agent, then copies files in & wires Tailwind\r\n```\r\n\r\nRuns cold (no prior install, no login). Re-run with `--force` to update. See\r\n[`SETUP.md`](SETUP.md) for the full walkthrough and [`INTEGRATION.md`](INTEGRATION.md)\r\nfor requirements.\r\n\r\n## For AI coding agents\r\n\r\n`npx @cofcoai/ui` installs the rules so an agent reproduces the COFCO\r\nlook-and-feel automatically:\r\n\r\n- [`SKILL.md`](SKILL.md) — the design-system skill and rules entry: the loading\r\n  convention (load only what the task needs) and the \"tokens are classes\" rule.\r\n  It is placed in `.claude/skills/cofco-design/` and/or `.github/skills/…`.\r\n- [`docs/ui/`](docs/ui/README.md) — modular rules (copied to your repo's\r\n  `docs/ui/`). **Always** load\r\n  [`cofco-branding-and-design-rules.md`](docs/ui/cofco-branding-and-design-rules.md),\r\n  **plus** the scope file for what you're building (e.g.\r\n  [`buttons.md`](docs/ui/buttons.md)) — so building a grid doesn't drag in the\r\n  button rules.\r\n- [`INTEGRATION.md`](INTEGRATION.md) — scaffold + Tailwind setup details.\r\n\r\n## Package layout\r\n\r\n```\r\nscripts/setup.mjs          The `npx @cofcoai/ui` bin (copies files in, wires Tailwind)\r\nsrc/                       Component source — the copy-in payload (shipped)\r\n  cofco-theme.css          Tailwind v4 @theme — token source of truth\r\n  tokens.ts · icons/ · components/ · index.ts\r\nSKILL.md                   Design-system skill (installed into the consumer repo)\r\nCLAUDE.md / INTEGRATION.md Agent entry + integration guide\r\ndocs/ui/                   Modular design rules (installed into the consumer repo)\r\n```\r\n\r\n## Requirements\r\n\r\n- React 18+ / react-dom 18+.\r\n- **Tailwind CSS v4** in the consuming project. The scaffold imports the copied\r\n  `cofco-theme.css` after `@import \"tailwindcss\";` in your main stylesheet (see\r\n  [`INTEGRATION.md`](INTEGRATION.md)); Tailwind is not bundled here.\r\n- Roboto font available (the design uses Roboto).\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport { Header, SideNav, NavItem, Button, Card, Select, Dialog } from \"@/components/cofco\";\r\n\r\n<Header legalEntity=\"COFCO International Italy\" title=\"Master Data\" language=\"EN\" />\r\n\r\n<Button variant=\"contained\">Save</Button>\r\n<Button variant=\"outlined\">Cancel</Button>\r\n\r\n<Select\r\n  label=\"Legal entity\"\r\n  value={value}\r\n  onChange={setValue}\r\n  options={[{ value: \"it\", label: \"COFCO International Italy\" }]}\r\n/>\r\n```\r\n\r\n## Components\r\n\r\n| Component | Figma source | Status |\r\n| --- | --- | --- |\r\n| `Header` | Header › `1. Top / A. Regular / b. Raised` | ✅ |\r\n| `CofcoLogo` | `COFCO Logo` | ✅ (text placeholder) |\r\n| `Button` | Actions \\| Buttons (Contained/Outlined/Text, sizes, all states) | ✅ · [rules](docs/ui/buttons.md) |\r\n| `SideNav` / `NavItem` / `NavSubItem` | Nav Bar › Vega Navigation / Vega Menu | ✅ |\r\n| `Menu` / `MenuItem` | Legal Entity Selection › Dropdown / Line item | ✅ |\r\n| `TextField` | Input Fields › `1. Filled` | ✅ |\r\n| `Select` | Input Fields › `2. Exposed Dropdown` | ✅ |\r\n| `Card` | Nav Cards › Features Card | ✅ |\r\n| `Dialog` | Pop ups › Dialogs | ✅ |\r\n| `Checkbox` | `1. Checkboxes` | ✅ |\r\n| `IconButton` | `1. Text / B. Text + Icon` | ✅ |\r\n| `Fab` | `3. Mini` | ✅ |\r\n| `SearchField` | Generic Search Criteria (filled + `search`) | ✅ |\r\n| `Segment` | Nav Bar › `Building Blocks / Segment` (rail toggle) | ✅ |\r\n| `Divider` | `➖Divider` | ✅ |\r\n| `Tooltip` | `Tooltip` | ✅ |\r\n| `DateField` / `Calendar` | Input Fields › Date picker | ✅ · [rules](docs/ui/forms.md) |\r\n| `Switch` | Fiori Guidelines › `3. Switch` | ✅ |\r\n| `ErrorPage` | Error Page (404/403/500/…) | ✅ · [rules](docs/ui/error-page.md) |\r\n| `Spinner` / `LoadingScreen` | Loading Screens › `2. Circular` | ✅ · [rules](docs/ui/loading.md) |\r\n| `FileUpload` | Archive docs in EA › Upload Document/Attachment | ✅ · [rules](docs/ui/ea-documents.md) |\r\n\r\n> Full-file scan tracked in [docs/scan/PROGRESS.md](docs/scan/PROGRESS.md);\r\n> modular agent rules in [docs/ui/](docs/ui/README.md).\r\n\r\n## Not converted (and why)\r\n\r\nThese Figma pages are **full-screen mock-ups, layout examples, or docs** — they\r\nare compositions of the components above, not new reusable atoms:\r\n\r\n- **Category Blocks**, **Generic Search Criteria** — example pages built from\r\n  `Select` + `Button` + `TextField` / `SearchField` grouped into titled sections.\r\n  (The reusable `SearchField` atom from these pages **is** included above.)\r\n- **Error Page**, **Loading Screens**, **Grid Behaviour**, **Grid Bulk Editing**,\r\n  **Archive / Search Document in EA** — whole screens / behaviors.\r\n- **Vega Guidelines**, **Fiori Guidelines** — documentation.\r\n- **Iconography** — a sheet of Material Symbols. Rather than hand-port hundreds\r\n  of icons, use a package such as `@mui/icons-material` or\r\n  `material-symbols`, or copy individual SVGs into [`src/icons`](src/icons)\r\n  following the existing pattern.\r\n\r\n**Not found in the design** (so not built): Radio, Tabs, Chips,\r\nSnackbar/Toast — no master components for these exist on the pages swept (only\r\n`radio_button` *glyphs* on the Iconography sheet). If you know where they live,\r\npoint me at the frame.\r\n\r\n> The Figma file is a hand-off, not a packaged code library, so it can't be\r\n> exported wholesale — each component was rebuilt from its design. To add more,\r\n> point at a frame and it can be converted the same way.\r\n\r\n## Design tokens (key values)\r\n\r\n| Token | Value |\r\n| --- | --- |\r\n| Primary / Brand | `#005DAA` |\r\n| Top Bar (navy) | `#354A5F` |\r\n| Primary Overlay (card tint) | `#E9F2FF` |\r\n| On-primary text | `#FFFFFF` |\r\n| Outline | `rgba(0,0,0,0.12)` |\r\n| Type | Roboto |\r\n","readmeFilename":"README.md"}