{"_id":"@daivymoralesofi/ofiui","_rev":"2-6decf1d7e92c2df79645532f0278cf37","name":"@daivymoralesofi/ofiui","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@daivymoralesofi/ofiui","version":"0.0.1","_id":"@daivymoralesofi/ofiui@0.0.1","maintainers":[{"name":"daivymoralesofi","email":"d.morales@ofiservices.com"}],"dist":{"shasum":"b5ca0b17d179a197637e46a7f225ae43a76f3a35","tarball":"https://registry.npmjs.org/@daivymoralesofi/ofiui/-/ofiui-0.0.1.tgz","fileCount":361,"integrity":"sha512-wb7iZS1VpmabltVjFxhGJtvXibTbj5qgV5ic2aUZSbv/S5O5aINC0sM4IqT7eO3aUJD0A6o210Gnl07NijCxcQ==","signatures":[{"sig":"MEUCICSE1ubWdJQ1krkbBM98Tx0tSRYSEHiTyMoZr7UiYGNuAiEA8bn+gdvo7MIrILu+zBdj5spp2X8sJzpUhiuWpi+nlwg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":939967},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json","./tailwind.preset":"./tailwind.preset.js"},"gitHead":"351c0ea71f56b5e81108db6a7d9b0b2721b5b437","scripts":{"dev":"vite","build":"tsc -b && vite build","preview":"vite preview","build:css":"tailwindcss -i ./src/index.css -o ./dist/styles.css --postcss","build:lib":"vite build --config vite.lib.config.ts && npm run build:css","prepublishOnly":"npm run build:lib"},"_npmUser":{"name":"daivymoralesofi","email":"d.morales@ofiservices.com"},"_npmVersion":"11.11.1","description":"OFI Design System — React + Tailwind components for Ofi Services AI Agents.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"25.8.2","dependencies":{"zod":"^4.3.6","clsx":"^2.1.1","cmdk":"^1.1.1","vaul":"^1.1.2","sonner":"^2.0.7","date-fns":"^4.1.0","recharts":"^2.13.3","input-otp":"^1.4.2","lucide-react":"^0.460.0","tailwind-merge":"^2.5.4","react-hook-form":"^7.72.1","react-day-picker":"^9.14.0","@hookform/resolvers":"^5.2.2","tailwindcss-animate":"^1.0.7","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-label":"^2.1.8","@radix-ui/react-avatar":"^1.1.1","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-toggle":"^1.1.10","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-tooltip":"^1.2.8","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-progress":"^1.1.0","class-variance-authority":"^0.7.0","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-hover-card":"^1.1.15","@radix-ui/react-collapsible":"^1.1.12","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-alert-dialog":"^1.1.15","@radix-ui/react-aspect-ratio":"^1.1.8","@radix-ui/react-toggle-group":"^1.1.11","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-navigation-menu":"^1.2.14"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.10","react":"^18.3.1","postcss":"^8.4.49","react-dom":"^18.3.1","typescript":"^5.6.3","tailwindcss":"^3.4.19","@types/react":"^18.3.12","autoprefixer":"^10.4.20","vite-plugin-dts":"^5.0.0","@types/react-dom":"^18.3.1","vite-tsconfig-paths":"^5.1.0","@vitejs/plugin-react":"^4.3.3"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ofiui_0.0.1_1777593778911_0.4327068939624943","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@daivymoralesofi/ofiui","version":"0.1.0","description":"OFI Design System — React + Tailwind components for Ofi Services AI Agents. Inspired by the Supabase Design System.","type":"module","sideEffects":["**/*.css"],"main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./tailwind.preset":"./tailwind.preset.js","./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc -b && vite build","build:lib":"vite build --config vite.lib.config.ts && npm run build:css","build:css":"tailwindcss -i ./src/index.css -o ./dist/styles.css --postcss","preview":"vite preview","prepublishOnly":"npm run build:lib"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"dependencies":{"@hookform/resolvers":"^5.2.2","@radix-ui/react-accordion":"^1.2.12","@radix-ui/react-alert-dialog":"^1.1.15","@radix-ui/react-aspect-ratio":"^1.1.8","@radix-ui/react-avatar":"^1.1.1","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-collapsible":"^1.1.12","@radix-ui/react-context-menu":"^2.2.16","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-dropdown-menu":"^2.1.16","@radix-ui/react-hover-card":"^1.1.15","@radix-ui/react-label":"^2.1.8","@radix-ui/react-menubar":"^1.1.16","@radix-ui/react-navigation-menu":"^1.2.14","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-progress":"^1.1.0","@radix-ui/react-radio-group":"^1.3.8","@radix-ui/react-scroll-area":"^1.2.10","@radix-ui/react-select":"^2.2.6","@radix-ui/react-separator":"^1.1.8","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-toggle":"^1.1.10","@radix-ui/react-toggle-group":"^1.1.11","@radix-ui/react-tooltip":"^1.2.8","class-variance-authority":"^0.7.0","clsx":"^2.1.1","cmdk":"^1.1.1","date-fns":"^4.1.0","embla-carousel-react":"^8.6.0","input-otp":"^1.4.2","lucide-react":"^0.460.0","react-day-picker":"^9.14.0","react-hook-form":"^7.72.1","react-resizable-panels":"^2.1.9","recharts":"^2.13.3","sonner":"^2.0.7","tailwind-merge":"^2.5.4","tailwindcss-animate":"^1.0.7","vaul":"^1.1.2","zod":"^4.3.6"},"devDependencies":{"@types/react":"^18.3.12","@types/react-dom":"^18.3.1","@vitejs/plugin-react":"^4.3.3","autoprefixer":"^10.4.20","postcss":"^8.4.49","react":"^18.3.1","react-dom":"^18.3.1","tailwindcss":"^3.4.19","typescript":"^5.6.3","vite":"^5.4.10","vite-plugin-dts":"^5.0.0","vite-tsconfig-paths":"^5.1.0"},"gitHead":"c393e3df766fe259107f9289abc1c3f51685f21e","_id":"@daivymoralesofi/ofiui@0.1.0","_nodeVersion":"25.9.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-PDVTCH32h9tRb0Y3t8beaXPiaMbz9YKWrCoKXLWTqhUmyAMVrTVXTQyZsgrvggG1U5890BXGpaGePwXVstS9Cw==","shasum":"8466f1c329dfa1d17445f405af87c6c68fee76ff","tarball":"https://registry.npmjs.org/@daivymoralesofi/ofiui/-/ofiui-0.1.0.tgz","fileCount":372,"unpackedSize":1528069,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA3md9vytTTMWxIWcZQ17OyP28jETTYxhCAcvTnTL/xbAiBKJv22to+4p3EAb+cDAvE0ygx18HgMi+psXpbtu1Sbpg=="}]},"_npmUser":{"name":"daivymoralesofi","email":"d.morales@ofiservices.com"},"directories":{},"maintainers":[{"name":"daivymoralesofi","email":"d.morales@ofiservices.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ofiui_0.1.0_1777829939153_0.5678406830037777"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-01T00:02:58.796Z","modified":"2026-05-03T17:38:59.514Z","0.0.1":"2026-05-01T00:02:59.152Z","0.1.0":"2026-05-03T17:38:59.399Z"},"description":"OFI Design System — React + Tailwind components for Ofi Services AI Agents. Inspired by the Supabase Design System.","maintainers":[{"name":"daivymoralesofi","email":"d.morales@ofiservices.com"}],"readme":"
\n \n
\n\n# OfiUI\n\nA React component library for [Ofi Services](https://ofiservices.com) — built on [shadcn/ui](https://ui.shadcn.com), [Radix UI](https://www.radix-ui.com), and [Tailwind CSS](https://tailwindcss.com). Gives every Ofi AI agent builder a consistent, premium frontend without writing bespoke UI code.\n\n[](https://www.npmjs.com/package/@daivymoralesofi/ofiui)\n\n---\n\n## Installation\n\n```bash\nnpm install @daivymoralesofi/ofiui\n# or\npnpm add @daivymoralesofi/ofiui\n# or\nyarn add @daivymoralesofi/ofiui\n```\n\n`react` and `react-dom` are peer dependencies (`^18` or `^19`).\n\n---\n\n## Setup\n\n### 1 — Tailwind CSS\n\nOfiUI requires Tailwind CSS. If your project doesn't have it yet:\n\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n### 2 — Tailwind preset\n\nOfiUI ships a preset that contains the design tokens, color scales, and plugins the components rely on. Extend your `tailwind.config.js`:\n\n```js\n// tailwind.config.js\nimport ofiuiPreset from \"@daivymoralesofi/ofiui/tailwind.preset\"\n\nexport default {\n presets: [ofiuiPreset],\n darkMode: [\"class\"],\n content: [\n \"./index.html\",\n \"./src/**/*.{ts,tsx}\",\n // Required — prevents Tailwind from purging OfiUI's class names\n \"./node_modules/@daivymoralesofi/ofiui/dist/**/*.{js,mjs}\",\n ],\n}\n```\n\n### 3 — Stylesheet\n\nImport the prebuilt stylesheet once at your app entry point (`main.tsx`, `_app.tsx`, `layout.tsx`, etc.) **before** your own global styles:\n\n```ts\nimport \"@daivymoralesofi/ofiui/styles.css\"\n```\n\nThis file contains the CSS-variable theme tokens (`--background`, `--foreground`, `--primary`, `--radius`, …) for both light and dark mode.\n\n### 4 — Dark mode (optional)\n\nDark mode is class-based. Add the `dark` class to `` or any ancestor:\n\n```html\n\n```\n\nOr toggle it dynamically:\n\n```ts\ndocument.documentElement.classList.toggle(\"dark\")\n```\n\n---\n\n## Usage\n\n```tsx\nimport { Button } from \"@daivymoralesofi/ofiui\"\nimport { Plus } from \"lucide-react\"\n\nexport function CreateButton() {\n return (\n }>\n Create agent\n \n )\n}\n```\n\nAll primitives, patterns, and icons are exported from the package root. Use autocomplete from `@daivymoralesofi/ofiui` to discover what's available.\n\nThe `cn()` class-merging helper is also exported:\n\n```ts\nimport { cn } from \"@daivymoralesofi/ofiui\"\n\n\n```\n\n---\n\n## What's included\n\n### Primitives (`ui/`)\n\nVendored shadcn/ui components built on Radix UI — Avatar, Badge, Button, Calendar, Card, Checkbox, Input, Label, Popover, Progress, Radio Group, Select, Separator, Sheet, Switch, Table, Textarea, and more.\n\n### Patterns (`ui-patterns/`)\n\nHigher-level compositions:\n\n- **Charts** — compound-component chart toolkit on top of Recharts (`ChartCard`, `ChartLine`, `ChartBar`, `ChartMetric`, `LogsBarChart`, …)\n- **Forms** — React Hook Form + Zod field arrays and item layouts\n- **Admonition** — callout/banner with semantic variants\n- **Multi-select** — Radix Popover + Command-style multi-selector\n- **Metric card** — stat display with trend indicators\n- **Data inputs** — higher-order form inputs\n\n### Icons (`icons/`)\n\nCustom SVG icons via the `createIcon` factory, plus `lucide-react` for generic glyphs.\n\n---\n\n## Button API\n\n`Button` is the most expressive component in the system.\n\n| Prop | Values | Default |\n|---------|--------|---------|\n| `type` | `primary` `default` `secondary` `outline` `dashed` `link` `text` `danger` `warning` | `primary` |\n| `size` | `tiny` `small` `default` `medium` `large` `huge` | `default` |\n| `block` | `true` / `false` | `false` |\n\nAdditional props: `icon`, `iconRight`, `loading`, `loadingCentered`, `asChild`, `htmlType`.\n\n```tsx\n}>Create\n\n\n```\n\n---\n\n## Troubleshooting\n\n**Components render without styles** — make sure you imported `@daivymoralesofi/ofiui/styles.css` and added `./node_modules/@daivymoralesofi/ofiui/dist/**/*.{js,mjs}` to your Tailwind `content` array.\n\n**Dark colors don't apply** — confirm the `dark` class is on `` and that `tailwind.config.js` has `darkMode: [\"class\"]`.\n\n**TypeScript can't find the module** — ensure `moduleResolution` is `\"bundler\"` or `\"node16\"` in `tsconfig.json` so it resolves the package `exports` map.\n\n---\n\n## Local development\n\n### Prerequisites\n\n- Node.js 18+\n- npm\n\n### Install\n\n```bash\nnpm install\n```\n\n### Scripts\n\n| Command | What it does |\n|---------|-------------|\n| `npm run dev` | Starts the Vite dev server with HMR |\n| `npm run build` | Type-checks and builds the docs site |\n| `npm run build:lib` | Builds the publishable library bundle to `dist/` |\n| `npm run preview` | Serves the production build locally |\n\n### Publish\n\n`prepublishOnly` runs `build:lib` automatically. The published files are `dist/`, `tailwind.preset.js`, and `README.md`.\n\n### Project structure\n\n```text\nsrc/\n├── components/\n│ ├── ui/ # Primitives (vendored shadcn/ui)\n│ ├── ui-patterns/ # Compositions\n│ └── icons/ # Custom SVG icons\n├── docs/ # Living docs app (dev reference)\n├── lib/\n│ ├── utils.ts # cn() helper\n│ └── format.ts\n├── App.tsx # Docs app entry\n├── LandingPage.tsx # Marketing page\n└── index.css # Tailwind layers + CSS-variable tokens\n```\n\nPath alias `@/*` → `src/*`. Always import via `@/...`.\n\n### Adding a new component\n\n1. Pick the layer: primitive (`ui/`), composition (`ui-patterns/`), or icon (`icons/`).\n2. For shadcn primitives: `npx shadcn@latest add `, then align with system conventions.\n3. Use CVA for variant-driven styling; reference colors via CSS-variable utilities (`bg-primary`, `text-foreground`).\n4. Forward `ref`, set `displayName`, spread `className` last through `cn()`.\n5. Add a usage example to the docs app and run `npm run build:lib` to confirm.\n\n---\n\n## License\n\nPrivate — Ofi Services internal use.\n","readmeFilename":"README.md"}
![\"OfiUI\"](\"./public/ofi-design-system.svg\")
\n