{"_id":"@a2ui-bridge/react-mantine","name":"@a2ui-bridge/react-mantine","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@a2ui-bridge/react-mantine","version":"0.1.0","description":"Mantine 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":{"@a2ui-bridge/core":"0.1.0","@a2ui-bridge/react":"0.1.0"},"peerDependencies":{"@mantine/core":"^8.0.0","@mantine/hooks":"^8.0.0","@tabler/icons-react":"^3.0.0","react":"^18.0.0 || ^19.0.0"},"devDependencies":{"@mantine/core":"^8.3.10","@mantine/hooks":"^8.3.10","@tabler/icons-react":"^3.31.0","@types/react":"^18.3.0","react":"^18.3.0","typescript":"^5.7.2"},"repository":{"type":"git","url":"git+https://github.com/southleft/a2ui-bridge.git","directory":"packages/react-mantine"},"keywords":["a2ui","react","mantine","ui-components"],"scripts":{"build":"tsc","dev":"tsc --watch","clean":"rm -rf dist *.tsbuildinfo","lint":"eslint src"},"_id":"@a2ui-bridge/react-mantine@0.1.0","bugs":{"url":"https://github.com/southleft/a2ui-bridge/issues"},"homepage":"https://github.com/southleft/a2ui-bridge#readme","_integrity":"sha512-3OK6AnN+1jnCFw5mmcplBPiUvP2tjsCAg2wfAKwMqDZ3OBsWHZ49qK5gkXryBJJ3t7+FnkYObrdj/ovncmg+tg==","_resolved":"/private/var/folders/dx/kt5qryjx605f2md58m5cg3n80000gn/T/cd4d558c4daac5e27bfe7ff72e97a886/a2ui-bridge-react-mantine-0.1.0.tgz","_from":"file:a2ui-bridge-react-mantine-0.1.0.tgz","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-3OK6AnN+1jnCFw5mmcplBPiUvP2tjsCAg2wfAKwMqDZ3OBsWHZ49qK5gkXryBJJ3t7+FnkYObrdj/ovncmg+tg==","shasum":"19be1c96439c6624b5cb92ed6339e2064cccd881","tarball":"https://registry.npmjs.org/@a2ui-bridge/react-mantine/-/react-mantine-0.1.0.tgz","fileCount":19,"unpackedSize":201104,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIATgMGO6WZOifQ5jEy1BR+zC+3QQ2rupPogzi6mIuB2JAiBW+4eZwGKgePN/FleS464mY5/yZuVL+zZshNqfNvbJjw=="}]},"_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-mantine_0.1.0_1769112011668_0.18872306229685387"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-22T20:00:11.609Z","0.1.0":"2026-01-22T20:00:11.830Z","modified":"2026-01-22T20:00:12.008Z"},"maintainers":[{"name":"tpitre","email":"tpitre@southleft.com"}],"description":"Mantine UI components for A2UI React applications","homepage":"https://github.com/southleft/a2ui-bridge#readme","keywords":["a2ui","react","mantine","ui-components"],"repository":{"type":"git","url":"git+https://github.com/southleft/a2ui-bridge.git","directory":"packages/react-mantine"},"author":{"name":"tpitre"},"bugs":{"url":"https://github.com/southleft/a2ui-bridge/issues"},"license":"MIT","readme":"# @a2ui-bridge/react-mantine\n\nMantine UI component implementations for A2UI Bridge. This package provides 70+ beautifully designed components with built-in dark mode support.\n\n## Installation\n\n```bash\nnpm install @a2ui-bridge/core @a2ui-bridge/react @a2ui-bridge/react-mantine @mantine/core @mantine/hooks\n```\n\n### Setup MantineProvider\n\nWrap your app with MantineProvider:\n\n```tsx\nimport { MantineProvider } from '@mantine/core';\nimport '@mantine/core/styles.css';\n\nfunction App() {\n  return (\n    <MantineProvider>\n      {/* Your app */}\n    </MantineProvider>\n  );\n}\n```\n\n## Usage\n\n```tsx\nimport { Surface, useA2uiProcessor } from '@a2ui-bridge/react';\nimport { mantineComponents } from '@a2ui-bridge/react-mantine';\n\nfunction App() {\n  const processor = useA2uiProcessor();\n\n  return (\n    <Surface\n      processor={processor}\n      components={mantineComponents}\n      onAction={(action) => console.log('Action:', action)}\n    />\n  );\n}\n```\n\n## Components\n\n### Layout\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Row` | `Group`, `HStack` | Horizontal flex layout |\n| `Column` | `Stack`, `VStack` | Vertical flex layout |\n| `Flex` | - | Flexible box layout |\n| `Grid` | `SimpleGrid` | Grid layout system |\n| `Center` | - | Centers content |\n| `Box` | - | Generic container |\n| `Container` | - | Responsive container |\n| `Space` | - | Adds spacing |\n\n### Surfaces\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Card` | - | Elevated container |\n| `Paper` | `Section`, `Panel` | Flat surface |\n| `Divider` | `Separator` | Visual separator |\n| `ScrollArea` | - | Scrollable container |\n| `Fieldset` | - | Grouped form fields |\n\n### Typography\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Text` | `Paragraph`, `Label` | Body text with variants |\n| `Title` | `Heading`, `H1`-`H6` | Headings |\n| `Code` | - | Code snippets |\n| `Blockquote` | - | Quoted text |\n| `Highlight` | - | Highlighted text |\n\nText supports `usageHint` for styling:\n\n| usageHint | Style |\n|-----------|-------|\n| `h1` | Extra large heading |\n| `h2` | Large heading |\n| `h3` | Medium heading |\n| `body` | Body text |\n| `caption` | Small, muted text |\n| `label` | Form label |\n\n### Inputs\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `TextField` | `TextInput` | Single-line text input |\n| `TextArea` | `Textarea` | Multi-line text input |\n| `NumberInput` | `Number` | Numeric input |\n| `PasswordInput` | `Password` | Password field |\n| `DateTimeInput` | `DatePicker`, `DateInput` | Date/time picker |\n| `ColorInput` | `Color` | Color picker |\n| `FileInput` | `File` | File upload |\n| `PinInput` | `OTP`, `PIN` | PIN/OTP entry |\n\n### Selection\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Checkbox` | `CheckBox` | Single checkbox |\n| `Switch` | `Toggle` | Toggle switch |\n| `RadioGroup` | `Radio` | Radio button group |\n| `Select` | `Dropdown`, `ComboBox` | Single select dropdown |\n| `MultiSelect` | `MultiDropdown` | Multi-select dropdown |\n| `SegmentedControl` | `ButtonGroup` | Segmented buttons |\n| `Chip` | - | Selectable chip |\n\n### Feedback\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Alert` | `Message`, `Banner` | Alert messages |\n| `Notification` | `Toast` | Notifications |\n| `Progress` | `ProgressBar` | Linear progress |\n| `RingProgress` | `CircularProgress` | Circular progress |\n| `Spinner` | `Loader`, `Loading` | Loading spinner |\n| `Skeleton` | - | Loading placeholder |\n\n### Overlays\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Modal` | `Dialog` | Modal dialog |\n| `Drawer` | `Sidebar` | Slide-out panel |\n| `Tooltip` | - | Hover tooltip |\n| `Popover` | `Popup` | Click popover |\n| `Menu` | - | Dropdown menu |\n\n### Navigation\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `TabsNav` | `Tabs` | Tab navigation |\n| `Breadcrumb` | `Breadcrumbs` | Breadcrumb trail |\n| `Pagination` | `Pager` | Page navigation |\n| `Stepper` | `Steps`, `Wizard` | Step indicator |\n| `NavLink` | `NavigationLink` | Navigation link |\n\n### Data Display\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `List` | - | A2UI list container |\n| `Table` | `DataTable` | Data table |\n| `Timeline` | - | Event timeline |\n| `Badge` | `Tag`, `Status` | Status badge |\n| `Avatar` | `ProfileImage` | User avatar |\n| `Image` | `Img` | Image display |\n\n### Buttons\n\n| Component | Aliases | Description |\n|-----------|---------|-------------|\n| `Button` | `Btn` | Action button |\n| `ActionIcon` | `IconButton` | Icon-only button |\n\n## Component Examples\n\n### Button with Action\n\n```json\n{\n  \"componentType\": \"Button\",\n  \"properties\": {\n    \"child\": \"button-text\",\n    \"action\": { \"name\": \"submit\" },\n    \"variant\": { \"literalString\": \"filled\" }\n  }\n}\n```\n\n### Card with Content\n\n```json\n{\n  \"componentType\": \"Card\",\n  \"properties\": {\n    \"children\": [\"card-header\", \"card-body\"],\n    \"padding\": { \"literalString\": \"md\" },\n    \"shadow\": { \"literalString\": \"sm\" }\n  }\n}\n```\n\n### TextField with Data Binding\n\n```json\n{\n  \"componentType\": \"TextField\",\n  \"properties\": {\n    \"label\": { \"literalString\": \"Email Address\" },\n    \"text\": { \"path\": \"form.email\" },\n    \"placeholder\": { \"literalString\": \"you@example.com\" }\n  }\n}\n```\n\n### Select Dropdown\n\n```json\n{\n  \"componentType\": \"Select\",\n  \"properties\": {\n    \"label\": { \"literalString\": \"Country\" },\n    \"options\": [\n      { \"value\": \"us\", \"label\": \"United States\" },\n      { \"value\": \"uk\", \"label\": \"United Kingdom\" },\n      { \"value\": \"ca\", \"label\": \"Canada\" }\n    ],\n    \"selected\": { \"path\": \"form.country\" }\n  }\n}\n```\n\n## Theming\n\nMantine components automatically use your MantineProvider theme. Customize colors, fonts, and spacing:\n\n```tsx\nimport { MantineProvider, createTheme } from '@mantine/core';\n\nconst theme = createTheme({\n  primaryColor: 'blue',\n  fontFamily: 'Inter, sans-serif',\n  radius: {\n    md: '0.5rem',\n  },\n});\n\nfunction App() {\n  return (\n    <MantineProvider theme={theme}>\n      {/* Your app */}\n    </MantineProvider>\n  );\n}\n```\n\n### Dark Mode\n\nToggle dark mode with Mantine's color scheme:\n\n```tsx\nimport { MantineProvider } from '@mantine/core';\n\n<MantineProvider defaultColorScheme=\"dark\">\n  {/* Dark mode by default */}\n</MantineProvider>\n```\n\n## Custom Mappings\n\nCreate custom component mappings with a subset of adapters:\n\n```tsx\nimport { createComponentMapping } from '@a2ui-bridge/react';\nimport { adapters } from '@a2ui-bridge/react-mantine';\n\nconst customComponents = createComponentMapping({\n  // Only include what you need\n  Button: adapters.Button,\n  Card: adapters.Card,\n  Text: adapters.Text,\n  TextField: adapters.TextField,\n});\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-8e307ca421927286a83b6b83d2eb4999"}