{"_id":"@a2ui-bridge/react-shadcn","name":"@a2ui-bridge/react-shadcn","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@a2ui-bridge/react-shadcn","version":"0.1.0","description":"ShadCN/Tailwind UI components for A2UI React applications","author":{"name":"tpitre"},"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"dependencies":{"clsx":"^2.1.1","tailwind-merge":"^2.6.0","@a2ui-bridge/react":"0.1.0","@a2ui-bridge/core":"0.1.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","tailwindcss":"^3.4.0"},"devDependencies":{"@types/react":"^18.3.0","react":"^18.3.0","tailwindcss":"^3.4.0","typescript":"^5.7.2"},"repository":{"type":"git","url":"git+https://github.com/southleft/a2ui-bridge.git","directory":"packages/react-shadcn"},"keywords":["a2ui","react","shadcn","tailwind","ui-components"],"scripts":{"build":"tsc","dev":"tsc --watch","clean":"rm -rf dist *.tsbuildinfo","lint":"eslint src"},"_id":"@a2ui-bridge/react-shadcn@0.1.0","bugs":{"url":"https://github.com/southleft/a2ui-bridge/issues"},"homepage":"https://github.com/southleft/a2ui-bridge#readme","_integrity":"sha512-esgX5wvIf/ZtYnPYFroaGeF54cUWLihjoaWm2YJMSithI/3F+WsBzmhx5QS6qAFmJLsN0W0rUZ58kZnl92/jSA==","_resolved":"/private/var/folders/dx/kt5qryjx605f2md58m5cg3n80000gn/T/172b938b299bcb8404a742e20a62060e/a2ui-bridge-react-shadcn-0.1.0.tgz","_from":"file:a2ui-bridge-react-shadcn-0.1.0.tgz","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-esgX5wvIf/ZtYnPYFroaGeF54cUWLihjoaWm2YJMSithI/3F+WsBzmhx5QS6qAFmJLsN0W0rUZ58kZnl92/jSA==","shasum":"e6fae38536967f4e8af860525581b841ea87ade4","tarball":"https://registry.npmjs.org/@a2ui-bridge/react-shadcn/-/react-shadcn-0.1.0.tgz","fileCount":267,"unpackedSize":276364,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDBu9FNQrpRH64mBF2F/BAxudZbPD3s1gqzSMwbQGhhtgIgX7wR6WuSXdUJy96EqEtldRZ0j2Ci1dXEoORHANI0+Ag="}]},"_npmUser":{"name":"tpitre","email":"tpitre@southleft.com"},"directories":{},"maintainers":[{"name":"tpitre","email":"tpitre@southleft.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-shadcn_0.1.0_1769112014705_0.7652176157984412"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-22T20:00:14.617Z","0.1.0":"2026-01-22T20:00:14.848Z","modified":"2026-01-22T20:00:15.047Z"},"maintainers":[{"name":"tpitre","email":"tpitre@southleft.com"}],"description":"ShadCN/Tailwind UI components for A2UI React applications","homepage":"https://github.com/southleft/a2ui-bridge#readme","keywords":["a2ui","react","shadcn","tailwind","ui-components"],"repository":{"type":"git","url":"git+https://github.com/southleft/a2ui-bridge.git","directory":"packages/react-shadcn"},"author":{"name":"tpitre"},"bugs":{"url":"https://github.com/southleft/a2ui-bridge/issues"},"license":"MIT","readme":"# @a2ui-bridge/react-shadcn\n\nShadCN/Tailwind component implementations for A2UI Bridge.\n\n## Installation\n\n```bash\nnpm install @a2ui-bridge/core @a2ui-bridge/react @a2ui-bridge/react-shadcn\n```\n\n### Setup Tailwind CSS\n\nAdd the package to your Tailwind content paths:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: [\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/@a2ui-bridge/react-shadcn/dist/**/*.js',\n  ],\n  // ...\n}\n```\n\n### Add CSS Variables\n\nAdd ShadCN-style CSS variables to your stylesheet:\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n    --radius: 0.5rem;\n  }\n\n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n  }\n}\n```\n\n## Usage\n\n```tsx\nimport { Surface, useA2uiProcessor } from '@a2ui-bridge/react';\nimport { shadcnComponents } from '@a2ui-bridge/react-shadcn';\n\nfunction App() {\n  const processor = useA2uiProcessor();\n\n  return (\n    <Surface\n      processor={processor}\n      components={shadcnComponents}\n      onAction={(action) => console.log('Action:', action)}\n    />\n  );\n}\n```\n\n## Components\n\n### Text\nRenders text with various styles based on `usageHint`:\n\n| usageHint | Style |\n|-----------|-------|\n| `h1` | Large heading |\n| `h2` | Medium heading |\n| `h3` | Small heading |\n| `body` | Body text |\n| `caption` | Small, muted text |\n| `label` | Form label |\n\n### Button\nInteractive button with action support:\n\n```json\n{\n  \"componentType\": \"Button\",\n  \"properties\": {\n    \"child\": \"button-text\",\n    \"action\": { \"name\": \"submit\" }\n  }\n}\n```\n\n### Card\nElevated container with rounded corners:\n\n```json\n{\n  \"componentType\": \"Card\",\n  \"properties\": {\n    \"children\": [\"card-content\"]\n  }\n}\n```\n\n### Row\nHorizontal flex layout:\n\n```json\n{\n  \"componentType\": \"Row\",\n  \"properties\": {\n    \"alignment\": \"center\",\n    \"children\": [\"item1\", \"item2\"]\n  }\n}\n```\n\n### Column\nVertical flex layout:\n\n```json\n{\n  \"componentType\": \"Column\",\n  \"properties\": {\n    \"children\": [\"item1\", \"item2\"]\n  }\n}\n```\n\n### TextField\nText input with data binding:\n\n```json\n{\n  \"componentType\": \"TextField\",\n  \"properties\": {\n    \"label\": { \"literalString\": \"Email\" },\n    \"text\": { \"path\": \"form.email\" },\n    \"type\": \"shortText\"\n  }\n}\n```\n\n### Badge\nSmall status indicator:\n\n```json\n{\n  \"componentType\": \"Badge\",\n  \"properties\": {\n    \"text\": { \"literalString\": \"Active\" }\n  }\n}\n```\n\n### Divider\nVisual separator line.\n\n### List\nContainer for list items:\n\n```json\n{\n  \"componentType\": \"List\",\n  \"properties\": {\n    \"direction\": \"vertical\",\n    \"children\": [\"item1\", \"item2\"]\n  }\n}\n```\n\n### Image\nImage display with usage hints:\n\n```json\n{\n  \"componentType\": \"Image\",\n  \"properties\": {\n    \"url\": { \"literalString\": \"https://example.com/image.jpg\" },\n    \"usageHint\": \"avatar\"\n  }\n}\n```\n\n## Theming\n\nComponents use Tailwind CSS with CSS variables for theming. Override variables in your CSS to customize:\n\n```css\n:root {\n  --primary: 220 90% 56%;  /* Custom primary color */\n  --radius: 0.75rem;       /* Larger border radius */\n}\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-8aff74c4cd3cc8a663cb3ec20ee76930"}