{"_id":"@atari-engine/react","name":"@atari-engine/react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@atari-engine/react","version":"0.1.0","description":"React components for building and editing Atari rule groups","author":{"name":"JammyTheDreamer"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/jammythedreamer/atari-engine.git"},"homepage":"https://github.com/jammythedreamer/atari-engine","bugs":{"url":"https://github.com/jammythedreamer/atari-engine/issues"},"keywords":["rules","react","rule-builder","atari-engine","conditions"],"private":false,"type":"module","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"},"sideEffects":["**/*.css"],"scripts":{"build":"tsup && postcss src/styles.css -o dist/styles.css","test":"vitest run","prepublishOnly":"pnpm run build && pnpm run test"},"dependencies":{"@atari-engine/core":"0.1.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@biomejs/biome":"^1.9.4","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^16.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","jsdom":"^25.0.0","postcss":"^8.5.6","postcss-cli":"^11.0.1","postcss-import":"^16.1.1","tsup":"^8.3.5","typescript":"^5.7.2","vitest":"^2.1.6"},"engines":{"node":">=18"},"publishConfig":{"access":"public"},"peerDependenciesMeta":{"react-dom":{"optional":true}},"_id":"@atari-engine/react@0.1.0","gitHead":"52eb8b3cba215e5e023155d112dfc5b49a554b2e","_nodeVersion":"24.8.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-LYCsPA5Jjr5zwsiQ6610YgJ+ayjvV3jbzrSc27CYHYyNQV251v3sXSkAgj49RFUjk5uIGuqMT/g+glxxu6yUrw==","shasum":"2141f329ec541880f3aaa239cf212a3bccac0bea","tarball":"https://registry.npmjs.org/@atari-engine/react/-/react-0.1.0.tgz","fileCount":8,"unpackedSize":67411,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCecGyPu+NA1phimATBeLjoK5mcmygUrMx8PzI+IDZNDgIhANsrGAtfW6EjaeFEgGoHXUF7E31oszUPKXdUkazBv/bL"}]},"_npmUser":{"name":"jammythedreamer","email":"jammythedreamer@gmail.com"},"directories":{},"maintainers":[{"name":"jammythedreamer","email":"jammythedreamer@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react_0.1.0_1771918628774_0.5728746453402911"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-24T07:37:08.336Z","0.1.0":"2026-02-24T07:37:08.928Z","modified":"2026-02-24T07:37:09.158Z"},"maintainers":[{"name":"jammythedreamer","email":"jammythedreamer@gmail.com"}],"description":"React components for building and editing Atari rule groups","homepage":"https://github.com/jammythedreamer/atari-engine","keywords":["rules","react","rule-builder","atari-engine","conditions"],"repository":{"type":"git","url":"git+https://github.com/jammythedreamer/atari-engine.git"},"author":{"name":"JammyTheDreamer"},"bugs":{"url":"https://github.com/jammythedreamer/atari-engine/issues"},"license":"MIT","readme":"# @atari-engine/react\n\nReact components for building and editing Atari rule groups. Part of the [atari-engine](https://github.com/jammythedreamer/atari-engine) monorepo.\n\n## Installation\n\n```bash\npnpm add @atari-engine/react @atari-engine/core react react-dom\n```\n\nOr with npm:\n\n```bash\nnpm install @atari-engine/react @atari-engine/core react react-dom\n```\n\n## Peer dependencies\n\n- `react` >= 18.0.0\n- `react-dom` >= 18.0.0 (optional in non-DOM environments)\n\n## Usage\n\n1. Import the component and styles in your app:\n\n```tsx\nimport { RuleBuilder, createEmptyRuleGroup } from \"@atari-engine/react\";\nimport \"@atari-engine/react/styles.css\";\n\nfunction App() {\n  const [value, setValue] = useState(() => createEmptyRuleGroup(\"AND\"));\n\n  return (\n    <RuleBuilder\n      value={value}\n      onChange={setValue}\n      fields={[\n        { name: \"age\", type: \"number\", label: \"Age\" },\n        { name: \"country\", type: \"string\", label: \"Country\" },\n      ]}\n      showValidation\n    />\n  );\n}\n```\n\n2. Optional: use `data-theme=\"dark\"` on the wrapper for dark mode, or rely on `prefers-color-scheme: dark`:\n\n```tsx\n<div className=\"atari-ruleBuilder\" data-theme=\"dark\">\n  <RuleBuilder value={value} onChange={setValue} />\n</div>\n```\n\n## Props (RuleBuilderProps)\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `RuleGroup` | required | Current rule group tree (controlled). |\n| `onChange` | `(value: RuleGroup) => void` | required | Called when the user changes the tree. |\n| `fields` | `FieldDefinition[]` | `undefined` | Field definitions for dropdown selection; if omitted, users type field names and pick a type. |\n| `labels` | `Partial<RuleBuilderLabels>` | `{}` | Override default button/label text. |\n| `showValidation` | `boolean` | `false` | When true, validation errors from `@atari-engine/core` are shown per rule. |\n| `maxDepth` | `number` | `0` | Max nesting depth for groups; `0` = unlimited. |\n| `className` | `string` | `undefined` | Extra class name for the root wrapper. |\n\n## Exports\n\n- **Components:** `RuleBuilder`, `RuleGroupEditor`, `RuleEditor`, `FieldSelector`, `OperatorSelector`, `ValueEditor`, `ActionBar`\n- **Hooks:** `useRuleBuilderContext`, `useRuleGroupActions`\n- **Utilities:** `createEmptyRuleGroup`, `createDefaultRule`, `mergeLabels`, `getConditionKey`, `getOperatorsForFieldType`, `DEFAULT_LABELS`, `OPERATORS`\n- **Types:** `RuleGroup`, `Rule`, `FieldType`, `Operator`, `LogicalOperator`, `RuleValue`, `FieldDefinition`, `RuleBuilderLabels`, `RuleBuilderProps`, `RuleBuilderContextValue`, `GroupPath`, and component prop types (`RuleGroupEditorProps`, `RuleEditorProps`, etc.)\n\n## Styling\n\nImport the default styles:\n\n```tsx\nimport \"@atari-engine/react/styles.css\";\n```\n\nThemes are controlled via CSS custom properties on `.atari-ruleBuilder` (e.g. `--atari-bg`, `--atari-primary`, `--atari-focus-ring`). Light and dark values are set in the bundle; dark mode applies automatically with `prefers-color-scheme: dark` or when `data-theme=\"dark\"` is set on the root.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-2d92e41d8aeb9f10abbef987c23d4dcc"}