{"_id":"@ai-inkfinity/ui","name":"@ai-inkfinity/ui","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@ai-inkfinity/ui","version":"1.1.0","description":"InkFinity Design System — React 18 + TypeScript + Tailwind + Framer Motion. Spec-compliant, shadcn-compatible, i18n-first.","license":"MIT","type":"module","repository":{"type":"git","url":"git+https://github.com/aiinkfinity/inkfinity.git","directory":"packages/ui"},"homepage":"https://github.com/aiinkfinity/inkfinity#readme","bugs":{"url":"https://github.com/aiinkfinity/inkfinity/issues"},"keywords":["inkfinity","design-system","react","typescript","tailwindcss","framer-motion","i18n","a11y","wcag","bilingual","next-intl"],"author":{"name":"InkFinity","email":"dev@inkfinity.local"},"main":"src/index.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens.css":"./src/globals.css","./tokens.json":"./src/tokens/tokens.json","./i18n":"./src/i18n/index.ts"},"sideEffects":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"peerDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","tailwindcss":"^3.4.0","framer-motion":"^11.0.0","next-intl":"^3.0.0"},"dependencies":{"@radix-ui/react-dialog":"^1.1.0","@radix-ui/react-slot":"^1.1.0","@radix-ui/react-tooltip":"^1.1.0","@radix-ui/react-toggle":"^1.1.0","clsx":"^2.1.0","tailwind-merge":"^2.2.0"},"devDependencies":{"@changesets/cli":"^2.27.0","@changesets/changelog-github":"^0.5.0","@eslint/js":"^9.0.0","@storybook/addon-essentials":"^8.0.0","@storybook/addon-a11y":"^8.0.0","@storybook/addon-themes":"^8.0.0","@storybook/addon-interactions":"^8.0.0","@storybook/test-runner":"^0.19.0","@storybook/react":"^8.0.0","@storybook/react-vite":"^8.0.0","@testing-library/jest-dom":"^6.4.0","@testing-library/react":"^16.0.0","@testing-library/user-event":"^14.5.0","@types/node":"^20.11.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@vitejs/plugin-react":"^4.0.0","autoprefixer":"^10.4.0","chromatic":"^11.0.0","eslint":"^9.0.0","eslint-config-prettier":"^9.1.0","eslint-plugin-jsx-a11y":"^6.8.0","eslint-plugin-react-hooks":"^5.0.0","eslint-plugin-tailwindcss":"^3.15.0","globals":"^15.0.0","happy-dom":"^14.0.0","jsdom":"^24.0.0","@vitest/coverage-v8":"^1.6.0","@vitest/ui":"^1.6.0","postcss":"^8.4.0","prettier":"^3.2.0","prettier-plugin-tailwindcss":"^0.5.0","react":"^18.2.0","react-dom":"^18.2.0","storybook":"^8.0.0","tailwindcss":"^3.4.0","typescript":"^5.4.0","typescript-eslint":"^8.0.0","vite":"^5.0.0","vitest":"^1.6.0"},"engines":{"node":">=20.0.0","pnpm":">=9.0.0"},"scripts":{"dev":"pnpm storybook","storybook":"storybook dev -p 6006","storybook:build":"storybook build -o storybook-static --stats-json","build":"vite build","build:lib":"vite build --mode lib","test":"vitest","test:run":"vitest run","test:cov":"vitest run --coverage","test:watch":"vitest","test:ui":"vitest --ui","chromatic":"chromatic --project-token=$CHROMATIC_PROJECT_TOKEN --build-script-name=storybook:build --storybook-build-dir=storybook-static","lint":"eslint src","lint:fix":"eslint src --fix","format":"prettier --write \"src/**/*.{ts,tsx,css,md,json}\"","format:check":"prettier --check \"src/**/*.{ts,tsx,css,md,json}\"","typecheck":"tsc --noEmit","changeset":"changeset","changeset:status":"changeset status","changeset:publish":"pnpm build:lib && changeset publish"},"_id":"@ai-inkfinity/ui@1.1.0","_integrity":"sha512-tTx+PyvnS/KZTbo7w282m7Oi5cum3urJ6Bpb3AUSll3peAwwodAmcOuV7+hQ6gcMSS1CVkCm472XcFxSTQstaQ==","_resolved":"/tmp/2aca9fce9a91470809a807305ec5dcee/ai-inkfinity-ui-1.1.0.tgz","_from":"file:ai-inkfinity-ui-1.1.0.tgz","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-tTx+PyvnS/KZTbo7w282m7Oi5cum3urJ6Bpb3AUSll3peAwwodAmcOuV7+hQ6gcMSS1CVkCm472XcFxSTQstaQ==","shasum":"b7fb41abe02c9de23e62a3b176111d975ea3b257","tarball":"https://registry.npmjs.org/@ai-inkfinity/ui/-/ui-1.1.0.tgz","fileCount":55,"unpackedSize":458067,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAc+5FfHLF1urabstMve+BWudJTBxejxFgxOgWfU30AgAiEA+ClpwUivaTcpsj0FrTgeTDDxgS7rqiENzPVfldiRvP8="}]},"_npmUser":{"name":"ai-inkfinity","email":"ai.inkfinity@gmail.com"},"directories":{},"maintainers":[{"name":"ai-inkfinity","email":"ai.inkfinity@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_1.1.0_1783144791653_0.202105654724819"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-04T05:59:51.457Z","1.1.0":"2026-07-04T05:59:51.789Z","modified":"2026-07-04T05:59:51.986Z"},"maintainers":[{"name":"ai-inkfinity","email":"ai.inkfinity@gmail.com"}],"description":"InkFinity Design System — React 18 + TypeScript + Tailwind + Framer Motion. Spec-compliant, shadcn-compatible, i18n-first.","homepage":"https://github.com/aiinkfinity/inkfinity#readme","keywords":["inkfinity","design-system","react","typescript","tailwindcss","framer-motion","i18n","a11y","wcag","bilingual","next-intl"],"repository":{"type":"git","url":"git+https://github.com/aiinkfinity/inkfinity.git","directory":"packages/ui"},"author":{"name":"InkFinity","email":"dev@inkfinity.local"},"bugs":{"url":"https://github.com/aiinkfinity/inkfinity/issues"},"license":"MIT","readme":"# InkFinity Design System · `@ai-inkfinity/ui`\n\nReact 18 + TypeScript component library. Implements the **Warm AI Companion** design direction (v1.0) from the InkFinity Visual Design Specification.\n\n## Stack\n\n| Layer | Choice | Why |\n|---|---|---|\n| Framework | **React 18** + TypeScript | Matches Architecture v1.0 §2.1 (Next.js 14 App Router) |\n| Styling | **Tailwind CSS** + CSS variables | Aligns with `shadcn/ui` philosophy, no runtime cost |\n| Motion | **Framer Motion** | Orchestrated sequences + AnimatePresence; reduced-motion aware |\n| Icons | Lucide / Phosphor (consumer choice) | — |\n| i18n | **`next-intl`** + standalone bundle | BR-I18N-01: en + fr-CA coverage |\n| Testing | **Vitest** + Testing Library | Component unit tests |\n| Catalog | **Storybook 8** + a11y addon | Visual review + WCAG checks per story |\n| Build | **Vite** (Storybook) + tsc (declarations) | Fast dev, tree-shaken prod |\n\n## Quick start\n\n```bash\npnpm i @ai-inkfinity/ui\n# or with npm\nnpm install @ai-inkfinity/ui\n```\n\n### 1. Install peer dependencies\n\n```bash\npnpm i react@18 react-dom@18 framer-motion tailwindcss next-intl\n```\n\n### 2. Add tokens to your app\n\nCopy `src/globals.css` into your app's root stylesheet (or import from the package), and configure Tailwind:\n\n```js\n// tailwind.config.ts\nimport inkfinityPreset from '@ai-inkfinity/ui/tailwind.preset';\nexport default { presets: [inkfinityPreset], content: ['./app/**/*.{ts,tsx}'] };\n```\n\n### 3. Wrap with `<NextIntlClientProvider>` for translations\n\n```tsx\nimport { NextIntlClientProvider } from 'next-intl';\nimport { ChatBubble, ChatAvatar } from '@ai-inkfinity/ui';\n\nexport default function Page({ messages, locale }) {\n  return (\n    <NextIntlClientProvider messages={messages} locale={locale}>\n      <ChatBubble role=\"user\">Hello!</ChatBubble>\n    </NextIntlClientProvider>\n  );\n}\n```\n\n## Components\n\n| Component | Description | a11y |\n|---|---|---|\n| `<Button>` | Primary / secondary / ghost / danger / google / github. 4 sizes. Loading + disabled. | `aria-busy`, focus ring |\n| `<Input>` | Label + input + hint/error. Sized for mobile touch. | `aria-invalid`, `aria-describedby` |\n| `<Card>` | 4 padding tiers, 3 elevations, optional interactive hover. | `role` friendly |\n| `<Modal>` | Scale + fade enter. Esc closes. Focus trap. | `role=\"dialog\"`, focus management |\n| `<Toast>` | Slide up + fade. Auto-dismiss. `aria-live=\"polite\"`. | Screen-reader announced |\n| `<Tag>` | 6 variants (brand, neutral, success, warning, error, info). | — |\n| `<Toggle>` | iOS-style switch with label/description. | `role=\"switch\"`, `aria-checked` |\n| `<Avatar>` | User initials or AI gradient. 3 sizes. | — |\n| `<Dropzone>` | Drag-over detection + click-to-browse. Mobile shows alt sources. | `<input type=\"file\">` inside |\n| `<ChatBubble>` | **Brand signature** — terracotta user / surface assistant. | `role=\"article\"` |\n| `<PlanCard>` | Animated staggered step reveal. | — |\n| `<ToolBlock>` | Inline AI tool-use reveal with status icon. | — |\n| `<TokenMeter>` | Usage quota with 90% warning state. | `role=\"progressbar\"` |\n| `<AppShell>` | Canonical 240/1fr/280 layout, responsive collapse. | `role` per region |\n\n## Stories\n\nEach component has multiple stories covering: default, variants, sizes, states (hover/focus/disabled/loading/error), and mobile breakpoint.\n\n```bash\npnpm dev          # Storybook at http://localhost:6006\npnpm test         # Vitest unit tests\npnpm typecheck    # tsc --noEmit\n```\n\n## i18n\n\nAll user-visible strings are translation keys. Two locales bundled:\n\n- `en` (default)\n- `fr-CA` (Quebec / Acadian register; NOT European French)\n\n```tsx\nimport { t } from '@ai-inkfinity/ui';\nconst label = t('auth.signIn', 'fr-CA');  // → 'Se connecter'\nconst withVars = t('errors.fileTooLarge', 'en', { limit: '5 MB' });\n// → 'File too large — exceeds the 5 MB limit'\n```\n\n`next-intl` is the recommended provider for Next.js apps. The standalone `t()` function works inside Storybook and any non-Next context.\n\n## Reduced motion\n\nAll components respect `prefers-reduced-motion: reduce` (per Motion Spec §10). Animations reduce to ≤50ms or disappear entirely. Streaming AI text reveals in 50ms batches instead of 12ms chunks.\n\n## Accessibility\n\nWCAG 2.1 AA target. Storybook includes `@storybook/addon-a11y` to run automated checks per story. Manual checklist:\n\n- All interactive elements have a visible focus ring (3px outer + 2px inner in `--border-focus`)\n- Touch targets ≥44px on mobile\n- Color is never the only signal — every status has an icon or text label\n- Streaming AI text gets one `aria-live=\"polite\"` announcement at completion, not per token\n\n## Tokens\n\nSingle source of truth: `src/tokens/tokens.json`. Read by:\n- Tailwind config (colors, radii, spacing, motion timings)\n- Component props (TypeScript types)\n- Globals CSS (CSS variables)\n\nAdding a new token: edit `tokens.json` → run `pnpm typecheck`. Done.\n\n## Versioning\n\nMajor = Breaking change to tokens OR component API. Minor = New component OR new variant. Patch = Bug fix.\n\nCurrent: `1.0.0`\n\n---\n\nBuilt per InkFinity Design Spec v1.0 · July 2026\n\n---\n\n## CI/CD\n\nThis package ships with full GitHub Actions CI/CD:\n\n- **`ci.yml`** — On every PR: ESLint, Prettier, TypeScript check, Vitest with coverage, build library, build Storybook.\n- **`chromatic.yml`** — On every PR: publish a visual snapshot to Chromatic. Auto-accept changes on `main`. PR comment with review link.\n- **`release.yml`** — On push to `main`: changesets aggregates pending `.changeset/*.md` entries, opens a \"version packages\" PR, publishes to npm + GitHub Releases on merge.\n- **`label.yml`** — On every PR: auto-applies size + area labels, welcomes first-time contributors.\n\n### Branch protection (recommended)\n\nIn GitHub → Settings → Branches → Branch protection rules on `main`:\n\n- ✅ Require a pull request before merging\n- ✅ Require approvals: 1 (CODEOWNERS will auto-add reviewers)\n- ✅ Require status checks to pass before merging: `Lint & Format Check`, `TypeScript Type Check`, `Unit Tests (Vitest)`, `Build (Library + Storybook)`, `Chromatic`\n- ✅ Require linear history (rebase only)\n- ✅ Do not allow bypassing the above settings\n\n### Secrets to configure\n\n| Secret | Where to get it | Used by |\n|---|---|---|\n| `CHROMATIC_PROJECT_TOKEN` | <https://www.chromatic.com/manage?appId=...&branch=main> → Setup | `chromatic.yml` |\n| `NPM_TOKEN` | <https://www.npmjs.com/settings/ai-inkfinity/tokens> → Generate (Automation + bypass 2FA + Read+Publish on `@ai-inkfinity` scope) | `release.yml` |\n| `GITHUB_TOKEN` | Auto-provided by GitHub Actions | `release.yml`, `label.yml` |\n\n### npm publish\n\nThe `release.yml` workflow uses `NPM_TOKEN` to publish. To rotate:\n\n1. Generate a new Automation token at <https://www.npmjs.com/settings/ai-inkfinity/tokens>\n2. Update the `NPM_TOKEN` secret in repo Settings → Secrets → Actions\n\nTo upgrade to OIDC trusted publishing (no token required), bump to `changesets/action@v2` and follow <https://docs.npmjs.com/generating-provenance-statements>.\n\nSee `CICD.md` for the complete onboarding checklist and pipeline diagram.\n","readmeFilename":"README.md","_rev":"1-0d7b7a9f0e98269752947b0b43a72898"}