{"_id":"@edux-design/alerts","_rev":"4-7551e7c0637bab71fa956802c6222b24","name":"@edux-design/alerts","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@edux-design/alerts","version":"0.0.1","_id":"@edux-design/alerts@0.0.1","maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"dist":{"shasum":"f8a6dd04267c336b5c53f3c938dd1a5ceeb1611b","tarball":"https://registry.npmjs.org/@edux-design/alerts/-/alerts-0.0.1.tgz","fileCount":9,"integrity":"sha512-QPJU8eHCX4L3I/Zlyz2z1VJWA4WZrto61pxhsiR42/y+0XUhRjd+KZtA0pbNqRlxZPkEDRp3H4O6w7BFCDHXhw==","signatures":[{"sig":"MEUCIATjBss0HCFSTNUXjpd8OJ4dcQszCEZFafm6KS9xO7e2AiEApH+Iz07i9eKdwZGJoOS+zTpORH4sh9IYqv4gIlHYg3g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21020},"types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"26932a88611ffd5189729f9c35a765ac08475482","private":false,"scripts":{"dev":"tsup src/index.js --watch --format esm,cjs --dts","lint":"eslint . --max-warnings 0","build":"tsup src/index.js --format esm,cjs --dts","check-types":"tsc --noEmit","generate:component":"turbo gen react-component"},"_npmUser":{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"},"_npmVersion":"10.9.2","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.14.0","dependencies":{"react":"^19.1.0","react-dom":"^19.1.0","@edux-design/icons":"*","@edux-design/utils":"*"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","postcss":"^8.5.6","typescript":"^5.9.2","tailwindcss":"^4.1.12","@tailwindcss/cli":"^4.1.12","@tailwindcss/postcss":"^4.1.12"},"_npmOperationalInternal":{"tmp":"tmp/alerts_0.0.1_1758187680794_0.04601203562357914","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@edux-design/alerts","version":"0.0.2","_id":"@edux-design/alerts@0.0.2","maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"dist":{"shasum":"90a68cd27dcafd61122891a6473a13fa1e98c0da","tarball":"https://registry.npmjs.org/@edux-design/alerts/-/alerts-0.0.2.tgz","fileCount":10,"integrity":"sha512-ZQivSFXla36co8BHelyq1LyKAWmB+t/RpBe8Hkeue2RBBM6olJ5hCl92AhFKvvKoixRBZnZMYLhzdOQi0i4l6w==","signatures":[{"sig":"MEUCIQCHpi9eWwzwoDHsVAtVM1RweLBljoflaDVfAXbt/T4PWwIgcKpFTTE2riU6sWrb3S65zOVYe7RnuxGXPmQXBR/Ucz8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23300},"types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"1d1e9251ba93aadddbd3a43f29bcb0342844c470","private":false,"scripts":{"dev":"tsup src/index.js --watch --format esm,cjs --dts","lint":"eslint . --max-warnings 0","build":"tsup src/index.js --format esm,cjs --dts","check-types":"tsc --noEmit","generate:component":"turbo gen react-component"},"_npmUser":{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"},"_npmVersion":"10.9.2","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.14.0","dependencies":{"react":"^19.1.0","react-dom":"^19.1.0","@edux-design/icons":"*","@edux-design/utils":"*"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","postcss":"^8.5.6","typescript":"^5.9.2","tailwindcss":"^4.1.12","@tailwindcss/cli":"^4.1.12","@tailwindcss/postcss":"^4.1.12"},"_npmOperationalInternal":{"tmp":"tmp/alerts_0.0.2_1758931060288_0.6200287127564141","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@edux-design/alerts","version":"0.0.3","_id":"@edux-design/alerts@0.0.3","maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"dist":{"shasum":"dc5eec0d956d519cda7f013d2a874cb740b21c16","tarball":"https://registry.npmjs.org/@edux-design/alerts/-/alerts-0.0.3.tgz","fileCount":11,"integrity":"sha512-eI6j9f1her9jrc1YHyB1JUDQcnj9d16gCRosraRoEzfYr4Q7bHxw8IBgK9+xft4cyqYsAQA0FYhpH4fJ7vicEg==","signatures":[{"sig":"MEQCIDg7nW2mJlE+ay4SER1lul26igttBz8JeWCpcQN7nyQEAiBVYq+UqQ8MJayq0GUrXAjin5z3XPi6XmV1HTLuv4lG1A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":28279},"types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"gitHead":"f5cbe7e930f10ef501a97afc6c5cdcb4edd29812","private":false,"scripts":{"dev":"tsup src/index.js --watch --format esm,cjs --dts","lint":"eslint . --max-warnings 0","build":"tsup src/index.js --format esm,cjs --dts","check-types":"tsc --noEmit","generate:component":"turbo gen react-component"},"_npmUser":{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"},"_npmVersion":"10.9.2","description":"Composable alert primitives for the Edux design system. The package exports a slotted `` container plus ``, ``, and `` helpers so you can describe feedback layouts declaratively while the component handles stru","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"22.14.0","dependencies":{"react":"^19.1.0","react-dom":"^19.1.0","@edux-design/icons":"*","@edux-design/utils":"*"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","postcss":"^8.5.6","typescript":"^5.9.2","tailwindcss":"^4.1.12","@tailwindcss/cli":"^4.1.12","@tailwindcss/postcss":"^4.1.12"},"_npmOperationalInternal":{"tmp":"tmp/alerts_0.0.3_1765248137164_0.7419438286022471","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@edux-design/alerts","version":"0.1.0","private":false,"sideEffects":["**/*.css"],"types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"lint":"eslint . --max-warnings 0","build":"tsup src/index.js --format esm,cjs --dts","dev":"tsup src/index.js --watch --format esm,cjs --dts","generate:component":"turbo gen react-component","check-types":"tsc --noEmit"},"devDependencies":{"typescript":"^5.9.2","tailwindcss":"^4.1.12","postcss":"^8.5.6","tsup":"^8.5.0","@tailwindcss/cli":"^4.1.12","@tailwindcss/postcss":"^4.1.12"},"dependencies":{"@edux-design/utils":"*","@edux-design/icons":"*"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.1.0"},"_id":"@edux-design/alerts@0.1.0","gitHead":"7250cb811a32db15e58b04e1b9865d3876905b5f","description":"Composable alert primitives for the Edux design system. The package exports a slotted `` container plus ``, ``, and `` helpers so you can describe feedback layouts declaratively while the component handles stru","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gDainYls+g3Nx7CGs2P6PvEJuQjRjCOkneIudPHDPz9CfeycwliF8KjFzQcqw49NRbYeGKZkqBCpk6Wm0szZKg==","shasum":"c52d95a2e9117dce1812f02cdc09eb449bd6031d","tarball":"https://registry.npmjs.org/@edux-design/alerts/-/alerts-0.1.0.tgz","fileCount":11,"unpackedSize":28471,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGWjDWi8aFjJeri7KC/WxIffAkxHqlY5Izzo9atHo+VhAiEAsXg+zBz1OnSE9zuKzjyi0iABEOaju5GKdsfO7vCatdU="}]},"_npmUser":{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"},"directories":{},"maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/alerts_0.1.0_1767265774843_0.37467728623687124"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-18T09:28:00.708Z","modified":"2026-01-01T11:09:35.243Z","0.0.1":"2025-09-18T09:28:00.969Z","0.0.2":"2025-09-26T23:57:40.495Z","0.0.3":"2025-12-09T02:42:17.299Z","0.1.0":"2026-01-01T11:09:34.998Z"},"description":"Composable alert primitives for the Edux design system. The package exports a slotted `` container plus ``, ``, and `` helpers so you can describe feedback layouts declaratively while the component handles stru","maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"readme":"# @edux-design/alerts\n\nComposable alert primitives for the Edux design system. The package exports a slotted `` container plus ``, ``, and `` helpers so you can describe feedback layouts declaratively while the component handles structure, focus styling, and tone-based theming.\n\n- **Tone aware** – pass `type=\"info\" | \"success\" | \"warning\" | \"error\" | \"corrective\" | \"neutral\"` to switch borders, backgrounds, and the indicator chip.\n- **Size variants** – choose between the standard layout or `size=\"small\"` for compact surfaces.\n- **Slots instead of props** – compose Title/Body/Close in any order; the Alert finds them by `displayName` and places them where they belong.\n- **Focusable dismissal** – the provided close button includes the shared `focus:shadow-focus` treatment and an accessible label (`aria-label=\"Dismiss\"`).\n\n---\n\n## Installation\n\n```bash\npnpm add @edux-design/alerts @edux-design/utils @edux-design/icons\n# or\nnpm install @edux-design/alerts @edux-design/utils @edux-design/icons\n```\n\nPeer dependencies: `react@^19.1.0`, `react-dom@^19.1.0`.\n\n---\n\n## Quick Start\n\n```jsx\nimport { Alert } from \"@edux-design/alerts\";\n\nexport function InviteBanner({ onDismiss }) {\n return (\n \n Invite sent\n \n We’ve emailed the invite to your teammate. They have 7 days to accept.\n \n \n \n );\n}\n```\n\n> **Note:** `Alert.Close` renders a positioned button by default. If you need a custom dismiss action, you can supply your own button inside the children tree—`Alert` will simply render it where you place it.\n\n---\n\n## API\n\n### ``\n\n| Prop | Type / Values | Description |\n| ----------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------ |\n| `type` | `\"neutral\"` _(default)_, `\"info\"`, `\"success\"`, `\"warning\"`, `\"error\"`, `\"corrective\"` | Controls the border, background, and indicator accent. |\n| `size` | `\"default\"` _(min-height 56px)_, `\"small\"` _(min-height 47px)_ | Adjusts padding/height for compact alerts. |\n| `className` | `string` | Additional Tailwind/utility classes merged via `cx`. |\n| `...rest` | Any native `
` props | Passed through to the root container. |\n\n`Alert` searches its `children` for the slotted subcomponents:\n\n- `Alert.Title` – renders typography for the heading (defaults to `\"Alert\"` if omitted).\n- `Alert.Body` – renders supporting copy (defaults to `\"Body\"` if omitted).\n- `Alert.Close` – renders the default dismiss button. You may include more than one close button; the component does not enforce positioning beyond the provided slot area.\n\n### `` / ``\n\nPlain wrappers that set `displayName` so the parent can detect them. They accept any children (text or nested elements) and return them as-is.\n\n### ``\n\nProps:\n\n| Prop | Type | Description |\n| ----------- | ------------ | ------------------------------------------------------------ |\n| `className` | `string` | Additional classes merged with the circular icon-button skin |\n| `...rest` | button props | Useful for adding custom `onClick`, analytics, etc. |\n\n---\n\n## Stories\n\nSee `src/demos/Alerts.stories.jsx` for examples that cover:\n\n- Every semantic tone\n- The `small` size variant\n- Alerts with or without titles\n- Longer, multi-line content scenarios\n\nYou can copy these stories into your local Storybook (or docs site) to preview new token changes quickly.\n\n---\n\n## Development Notes\n\n- Build with `pnpm --filter @edux-design/alerts build` (tsup emits ESM/CJS bundles plus types under `dist/`).\n- Run `pnpm --filter @edux-design/alerts lint` and `pnpm --filter @edux-design/alerts check-types` before publishing.\n- The helper `filterChildrenByDisplayName` currently lives inside `Alert.jsx`. If other packages need the same behavior, extract it into `@edux-design/utils`.\n- TODOs in the component call out future enhancements (shared icon button, escape-key handling, assertive live regions). Keep them in mind when extending functionality.\n\n---\n\nNeed adjustments or new alert variants (toast, inline banners, etc.)? Open an issue or PR so we can expand this package consistently with the rest of the system.\n","readmeFilename":"README.md"}