{"_id":"@airgen/ui","name":"@airgen/ui","dist-tags":{"next":"0.1.0-dev.1","latest":"0.1.0-dev.1"},"versions":{"0.1.0-dev.1":{"name":"@airgen/ui","version":"0.1.0-dev.1","description":"Airtable-native React components for Airtable extensions, powered by airgen metadata.","license":"MIT","author":{"name":"Pedro Botsaris","email":"pedro@antfood.com"},"repository":{"type":"git","url":"git+https://github.com/pbotsaris/airgen.git","directory":"packages/ui"},"homepage":"https://github.com/pbotsaris/airgen/tree/main/packages/ui#readme","bugs":{"url":"https://github.com/pbotsaris/airgen/issues"},"publishConfig":{"access":"public"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./styles.css":"./dist/styles.css"},"scripts":{"build":"tsc -p tsconfig.json && tailwindcss -c tailwind.config.cjs -i src/styles.css -o dist/styles.css --minify","test":"vitest run","check:react17":"tsc -p tsconfig.react17.json","gen:colors":"node scripts/gen-colors.mjs","prepack":"npm run build","prepublishOnly":"npm test && npm run check:react17"},"peerDependencies":{"react":">=17","react-dom":">=17"},"devDependencies":{"@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^7.0.0","@testing-library/react":"^16.3.2","@testing-library/user-event":"^14.6.1","@types/node":"^26.1.2","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","axe-core":"^4.12.1","jsdom":"^29.1.1","react":"^19.2.8","react-dom":"^19.2.8","tailwindcss":"^3.4.19","tailwindcss-animate":"^1.0.7","types-react-17":"npm:@types/react@^17.0.93","types-react-dom-17":"npm:@types/react-dom@^17.0.26","typescript":"^5.9.3","vitest":"^4.1.10"},"dependencies":{"fuse.js":"^7.5.0","lucide-react":"^1.28.0"},"gitHead":"72b7b95a15d8471ea71a9bb708a409d34895a450","_id":"@airgen/ui@0.1.0-dev.1","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-eD7DZ7w1+xkVaGa4Hjz5NfosJFUOnNwC0e8Fn/SNAnlDKWCzBNNN+Kw1vzB859fj+Mlhj1NCbul5JEcui21pTg==","shasum":"2446f8d270943bf7872892f71cf22b8fd2e51328","tarball":"https://registry.npmjs.org/@airgen/ui/-/ui-0.1.0-dev.1.tgz","fileCount":67,"unpackedSize":170911,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBP3PW6sZeSITCsnozyAtJaIzMW6ev4I660LLoMuERbCAiEAj14y0oakT3t9iiYCz0UaJmfWPNOSwuVL4bdB5fxtmhY="}]},"_npmUser":{"name":"pbotsaris","email":"pedro@antfood.com"},"directories":{},"maintainers":[{"name":"pbotsaris","email":"pedro@antfood.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.0-dev.1_1785790861604_0.22936286621785928"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-03T21:01:01.402Z","0.1.0-dev.1":"2026-08-03T21:01:01.773Z","modified":"2026-08-03T21:01:02.018Z"},"maintainers":[{"name":"pbotsaris","email":"pedro@antfood.com"}],"description":"Airtable-native React components for Airtable extensions, powered by airgen metadata.","homepage":"https://github.com/pbotsaris/airgen/tree/main/packages/ui#readme","repository":{"type":"git","url":"git+https://github.com/pbotsaris/airgen.git","directory":"packages/ui"},"author":{"name":"Pedro Botsaris","email":"pedro@antfood.com"},"bugs":{"url":"https://github.com/pbotsaris/airgen/issues"},"license":"MIT","readme":"# @airgen/ui\n\nAirtable-native React components for Airtable extensions, built to pair with\n[airgen](../../README.md)'s generated schema metadata.\n\n> **Status: pre-release (0.x).** The SDK-bound half (flavor entries,\n> `RecordSelect`, typed field controls) is still being built, and the API may\n> change between minor versions until 1.0.\n\nComponents speak Airtable's language directly: select options carry Airtable\ncolor names (resolved through a vendored palette — **no `@airtable/blocks`\nimport anywhere in this package**, pinned by a test), selects render\nsingle-select-style pills, and the Tailwind theme matches the interface\nextension scaffold's scale (13 px base text, same radii/shadows/control\nheights), so components sit visually flush with the host SDK UI.\n\n## What's in the box\n\n- **Primitives** — `Button`, `Input`, `Toggle`, `Badge`, `Text`, `Label`,\n  `Icon`, `Spinner`/`LoadingOverlay`, `Caret`, `CaretButton`, `ButtonToggle`,\n  `Circle`, `Divide`, `Portal`.\n- **Selection** — `Select` (single and `multiple`, keyboard navigation,\n  typeahead, optional fuzzy search, grouped options, Airtable-colored pills,\n  custom renderers) and `PillOption`.\n- **Overlays** — `Popover`, `Tooltip`, `Dialog`, `Sheet` (focus trap and\n  restore, scroll lock, exit animations, `asChild` triggers).\n- **Feedback** — `ToastProvider`/`useToast` and `SheetProvider`/`useSheet`\n  for imperative toasts and side panels.\n- **Helpers** — `airtableColorToHex`, `shouldUseLightText`, size class\n  helpers, `SelectOption`/`SelectGroup` types.\n\n## Usage\n\n```tsx\nimport {Button, Select, ToastProvider, useToast} from '@airgen/ui';\nimport '@airgen/ui/styles.css'; // precompiled — no Tailwind setup required\n\nfunction Picker() {\n  const {info} = useToast();\n  return (\n    <Select\n      pill\n      options={[\n        {value: 'todo', label: 'Todo', color: 'yellowBright'},\n        {value: 'done', label: 'Done', color: 'greenBright'},\n      ]}\n      onChange={value => info(`moved to ${value}`)}\n    />\n  );\n}\n\nexport function App() {\n  return (\n    <ToastProvider>\n      <Picker />\n    </ToastProvider>\n  );\n}\n```\n\n`color` on options and `Button` accepts an Airtable color name\n(`\"blueBright\"`) or any CSS hex. The CSS ships precompiled with the\npackage's own tokens; your project needs no Tailwind config (and if it has\none, it never scans this package).\n\nUntil the package is published, install it from a tarball:\n\n```sh\ncd packages/ui && npm run build && npm pack\n# then, in your extension:\nnpm install /path/to/airgen-ui-<version>.tgz\n```\n\n## Requirements\n\n- `react` / `react-dom` `>= 17` (peer dependencies). Runtime development\n  targets React 19 (what interface extensions scaffold); a types-only\n  compile leg keeps the code on React 17 APIs for the stable SDK.\n\n## Development\n\n```sh\nnpm test --workspace @airgen/ui             # Vitest + Testing Library suite\nnpm run build --workspace @airgen/ui        # tsc + Tailwind → dist/\nnpm run check:react17 --workspace @airgen/ui  # React 17 compatibility typecheck\n```\n\nFrom the repo root, `npx vitest` also picks up this package's suite. See\n[`CHANGELOG.md`](CHANGELOG.md) for what's landed and\n[`../../plan/AIRGEN_UI_PLAN.md`](../../plan/AIRGEN_UI_PLAN.md) for the\nroadmap.\n","readmeFilename":"README.md","_rev":"1-cc9d8bfef6a6e37935e09672c03ab9c7"}