@dsn-starter-kit/components-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jeffrey Lauwers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,181 @@
+# @dsn-starter-kit/components-react
+
+React components for the Design System Starter Kit.
+
+## Installation
+
+```bash
+pnpm add @dsn-starter-kit/components-react
+```
+
+## Usage
+
+### Importing Components
+
+The package provides a convenient barrel export for importing multiple components:
+
+```tsx
+// ✅ Recommended: Import multiple components at once
+import {
+  Button,
+  TextInput,
+  Heading,
+  FormField,
+  Icon,
+} from '@dsn-starter-kit/components-react';
+
+// Also supported: Import individually
+import { Button } from '@dsn-starter-kit/components-react/Button';
+```
+
+### Example
+
+```tsx
+import { Button, Icon } from '@dsn-starter-kit/components-react';
+
+function App() {
+  return (
+    <Button variant="strong" size="default">
+      <Icon name="check" size="sm" />
+      Save Changes
+    </Button>
+  );
+}
+```
+
+## Available Components
+
+### Layout Components
+
+- **Container** - Visueel kader voor het groeperen van gerelateerde content (achtergrond, border, padding, optionele schaduw)
+- **Grid** - 12-koloms CSS Grid container met gutter, outer margin en optionele max-width
+- **GridItem** - Grid child met colSpan (1–12), responsive varianten en fullBleed prop
+- **Stack** - Verticale stapeling met consistente ruimte via flexbox + gap (9 space-varianten)
+
+### Content Components
+
+- **Button** - Primary action component with variants and sizes
+- **ButtonLink** - Semantisch `<a>`, visueel als Button (navigatie met hoge attentiewaarde)
+- **Heading** - Semantic heading component (h1-h6)
+- **Icon** - SVG icon component with 45+ icons
+- **Link** - Anchor element with external link support
+- **LinkButton** - Semantisch `<button>`, visueel als Link (JS-acties met lage attentiewaarde)
+- **OrderedList** - Numbered list component
+- **Paragraph** - Text paragraph component
+- **UnorderedList** - Bulleted list component
+
+### Display & Feedback Components
+
+- **Alert** - Belangrijk bericht met `role="alert"` (4 varianten: info, positive, negative, warning)
+- **Note** - Passieve notitie zonder live region (5 varianten incl. neutral)
+- **StatusBadge** - Compact inline label met signaalkleur (5 varianten)
+
+### Form Components
+
+- **TextInput** - Single-line text input
+- **EmailInput** - Email input with validation
+- **PasswordInput** - Password input with toggle visibility
+- **NumberInput** - Numeric input
+- **TelephoneInput** - Phone number input
+- **SearchInput** - Search field
+- **TimeInput** - Time picker
+- **TextArea** - Multi-line text input
+- **Checkbox** - Checkbox input
+- **CheckboxGroup** - Group of checkboxes with fieldset
+- **CheckboxOption** - Checkbox with label (convenience component)
+- **Radio** - Radio button input
+- **RadioGroup** - Group of radio buttons with fieldset
+- **RadioOption** - Radio button with label (convenience component)
+- **OptionLabel** - Label for checkboxes and radio buttons
+
+### Form Field Components
+
+- **FormField** - Complete form field wrapper (label + description + input + error)
+- **FormFieldLabel** - Label for form fields
+- **FormFieldDescription** - Help text for form fields
+- **FormFieldErrorMessage** - Error message display
+- **FormFieldStatus** - Status indicator for form fields
+
+## Features
+
+- **TypeScript Support** - All components are fully typed
+- **JSDoc Documentation** - Comprehensive documentation with usage examples
+- **ForwardRef** - All components support ref forwarding
+- **Accessibility** - WCAG 2.1 Level AA compliant
+- **Composable** - Components are designed to work together
+- **Themeable** - Uses design tokens for easy customization
+
+## Component Composition
+
+```tsx
+import {
+  FormField,
+  EmailInput,
+  Button,
+  Icon,
+} from '@dsn-starter-kit/components-react';
+
+function LoginForm() {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  return (
+    <form>
+      <FormField
+        label="Email address"
+        htmlFor="email"
+        description="We'll never share your email"
+        error={error}
+      >
+        <EmailInput
+          id="email"
+          invalid={!!error}
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+      </FormField>
+
+      <Button variant="strong" type="submit">
+        <Icon name="login" size="sm" />
+        Sign In
+      </Button>
+    </form>
+  );
+}
+```
+
+## Build
+
+The package build includes:
+
+1. **Icon Generation** - Automatically generates icon registry from SVG files
+2. **TypeScript Compilation** - Compiles to JavaScript with type declarations
+
+```bash
+# Build the package
+pnpm build
+
+# Generate icons only
+pnpm generate:icons
+
+# Type check
+pnpm type-check
+
+# Watch mode
+pnpm watch
+```
+
+## CSS
+
+CSS styles are imported from `@dsn-starter-kit/components-html` for each component. The CSS is not bundled with the JavaScript - you need to import it separately in your application.
+
+## Dependencies
+
+- `@dsn-starter-kit/core` - Core utilities and styles
+- `@dsn-starter-kit/design-tokens` - Design tokens
+- `react` (peer dependency) - React 18+
+- `react-dom` (peer dependency) - React DOM 18+
+
+## License
+
+MIT - Jeffrey Lauwers

package/dist/ActionGroup/ActionGroup.css

@@ -0,0 +1,55 @@
+/**
+ * ActionGroup Component
+ * Groups related actions (Buttons and Links) and manages their layout.
+ *
+ * Usage:
+ * <!-- Horizontal (default) — wraps automatically when viewport is too narrow -->
+ * <div class="dsn-action-group">
+ *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
+ *     <span class="dsn-button__label">Opslaan</span>
+ *   </button>
+ *   <button class="dsn-button dsn-button--subtle dsn-button--size-default">
+ *     <span class="dsn-button__label">Annuleren</span>
+ *   </button>
+ * </div>
+ *
+ * <!-- Horizontal with Link as soft exit -->
+ * <div class="dsn-action-group">
+ *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
+ *     <span class="dsn-button__label">Volgende stap</span>
+ *   </button>
+ *   <a class="dsn-link" href="/">Terug naar overzicht</a>
+ * </div>
+ *
+ * <!-- Vertical -->
+ * <div class="dsn-action-group dsn-action-group--vertical">
+ *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
+ *     <span class="dsn-button__label">Primaire actie</span>
+ *   </button>
+ *   <button class="dsn-button dsn-button--subtle dsn-button--size-default">
+ *     <span class="dsn-button__label">Secundaire actie</span>
+ *   </button>
+ * </div>
+ */
+
+/* ===========================
+   Base layout — horizontal (default)
+   =========================== */
+.dsn-action-group {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--dsn-action-group-column-gap);
+  row-gap: var(--dsn-action-group-row-gap);
+}
+
+/* ===========================
+   Vertical modifier
+   =========================== */
+.dsn-action-group--vertical {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+

package/dist/ActionGroup/ActionGroup.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import './ActionGroup.css';
+export interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Richting van de groep — horizontale rij met wrapping of verticale kolom
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * `Button`- en/of `Link`-componenten
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ActionGroup component
+ * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
+ * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
+ *
+ * @example
+ * ```tsx
+ * // Horizontaal (default)
+ * <ActionGroup>
+ *   <Button variant="strong">Opslaan</Button>
+ *   <Button variant="subtle">Annuleren</Button>
+ * </ActionGroup>
+ *
+ * // Horizontaal met Link
+ * <ActionGroup>
+ *   <Button variant="strong">Volgende stap</Button>
+ *   <Link href="/">Terug naar overzicht</Link>
+ * </ActionGroup>
+ *
+ * // Verticaal
+ * <ActionGroup direction="vertical">
+ *   <Button variant="strong">Primaire actie</Button>
+ *   <Button variant="subtle">Secundaire actie</Button>
+ * </ActionGroup>
+ * ```
+ */
+export declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ActionGroup.d.ts.map

package/dist/ActionGroup/ActionGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,yFAcvB,CAAC"}

package/dist/ActionGroup/ActionGroup.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './ActionGroup.css';
+/**
+ * ActionGroup component
+ * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
+ * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
+ *
+ * @example
+ * ```tsx
+ * // Horizontaal (default)
+ * <ActionGroup>
+ *   <Button variant="strong">Opslaan</Button>
+ *   <Button variant="subtle">Annuleren</Button>
+ * </ActionGroup>
+ *
+ * // Horizontaal met Link
+ * <ActionGroup>
+ *   <Button variant="strong">Volgende stap</Button>
+ *   <Link href="/">Terug naar overzicht</Link>
+ * </ActionGroup>
+ *
+ * // Verticaal
+ * <ActionGroup direction="vertical">
+ *   <Button variant="strong">Primaire actie</Button>
+ *   <Button variant="subtle">Secundaire actie</Button>
+ * </ActionGroup>
+ * ```
+ */
+export const ActionGroup = React.forwardRef(({ className, direction = 'horizontal', children, ...props }, ref) => {
+    const classes = classNames('dsn-action-group', direction === 'vertical' && 'dsn-action-group--vertical', className);
+    return (_jsx("div", { ref: ref, className: classes, role: "group", ...props, children: children }));
+});
+ActionGroup.displayName = 'ActionGroup';
+//# sourceMappingURL=ActionGroup.js.map

package/dist/ActionGroup/ActionGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAe3B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,SAAS,KAAK,UAAU,IAAI,4BAA4B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,YACtD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/ActionGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { ActionGroup } from './ActionGroup';
+export type { ActionGroupProps } from './ActionGroup';
+//# sourceMappingURL=index.d.ts.map

package/dist/ActionGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/ActionGroup/index.js

@@ -0,0 +1,2 @@
+export { ActionGroup } from './ActionGroup';
+//# sourceMappingURL=index.js.map

package/dist/ActionGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ActionGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/Alert/Alert.css

@@ -0,0 +1,145 @@
+/**
+ * Alert Component Styles for React
+ * Re-exports the base Alert styles from components-html
+ */
+
+/**
+ * Alert Component
+ * Important message that informs the user about the current activity or state.
+ *
+ * Usage:
+ * <!-- Info variant (default), with icon -->
+ * <div class="dsn-alert" role="alert">
+ *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- info-circle --></svg>
+ *   <strong class="dsn-alert__heading">Heading</strong>
+ *   <div class="dsn-alert__content">
+ *     <p>Body text or any content.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- Positive variant -->
+ * <div class="dsn-alert dsn-alert--positive" role="alert">
+ *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- circle-check --></svg>
+ *   <strong class="dsn-alert__heading">Gelukt</strong>
+ *   <div class="dsn-alert__content">
+ *     <p>Uw aanvraag is succesvol ingediend.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- Negative variant -->
+ * <div class="dsn-alert dsn-alert--negative" role="alert">
+ *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- exclamation-circle --></svg>
+ *   <strong class="dsn-alert__heading">Er is een fout opgetreden</strong>
+ *   <div class="dsn-alert__content">
+ *     <p>Controleer uw gegevens en probeer het opnieuw.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- Warning variant -->
+ * <div class="dsn-alert dsn-alert--warning" role="alert">
+ *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- alert-triangle --></svg>
+ *   <strong class="dsn-alert__heading">Let op</strong>
+ *   <div class="dsn-alert__content">
+ *     <p>Uw sessie verloopt binnenkort.</p>
+ *   </div>
+ * </div>
+ *
+ * <!-- Without icon -->
+ * <div class="dsn-alert dsn-alert--no-icon" role="alert">
+ *   <strong class="dsn-alert__heading">Heading</strong>
+ *   <div class="dsn-alert__content">
+ *     <p>Body text without an icon.</p>
+ *   </div>
+ * </div>
+ */
+
+/* ===========================
+   Local color tokens (info = default)
+   =========================== */
+.dsn-alert {
+  --dsn-alert-icon-color: var(--dsn-alert-info-icon-color);
+  --dsn-alert-color: var(--dsn-alert-info-color);
+  --dsn-alert-background-color: var(--dsn-alert-info-background-color);
+  --dsn-alert-border-color: var(--dsn-alert-info-border-color);
+}
+
+.dsn-alert--positive {
+  --dsn-alert-icon-color: var(--dsn-alert-positive-icon-color);
+  --dsn-alert-color: var(--dsn-alert-positive-color);
+  --dsn-alert-background-color: var(--dsn-alert-positive-background-color);
+  --dsn-alert-border-color: var(--dsn-alert-positive-border-color);
+}
+
+.dsn-alert--negative {
+  --dsn-alert-icon-color: var(--dsn-alert-negative-icon-color);
+  --dsn-alert-color: var(--dsn-alert-negative-color);
+  --dsn-alert-background-color: var(--dsn-alert-negative-background-color);
+  --dsn-alert-border-color: var(--dsn-alert-negative-border-color);
+}
+
+.dsn-alert--warning {
+  --dsn-alert-icon-color: var(--dsn-alert-warning-icon-color);
+  --dsn-alert-color: var(--dsn-alert-warning-color);
+  --dsn-alert-background-color: var(--dsn-alert-warning-background-color);
+  --dsn-alert-border-color: var(--dsn-alert-warning-border-color);
+}
+
+/* ===========================
+   Base layout
+   =========================== */
+.dsn-alert {
+  display: grid;
+  grid-template-columns: var(--dsn-alert-icon-size) 1fr;
+  column-gap: var(--dsn-alert-column-gap);
+  row-gap: var(--dsn-alert-row-gap);
+  padding-block: var(--dsn-alert-padding-block);
+  padding-inline: var(--dsn-alert-padding-inline);
+  border-radius: var(--dsn-alert-border-radius);
+  border: var(--dsn-alert-border-width) solid var(--dsn-alert-border-color);
+  background-color: var(--dsn-alert-background-color);
+  color: var(--dsn-alert-color);
+}
+
+/* ===========================
+   Icon
+   =========================== */
+.dsn-alert__icon {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  flex-shrink: 0;
+  width: var(--dsn-alert-icon-size);
+  height: var(--dsn-alert-icon-size);
+  color: var(--dsn-alert-icon-color);
+}
+
+/* ===========================
+   Heading
+   =========================== */
+.dsn-alert__heading {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: center;
+  margin-block-end: 0;
+}
+
+/* ===========================
+   Content
+   =========================== */
+.dsn-alert__content {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+/* ===========================
+   No-icon modifier
+   =========================== */
+.dsn-alert--no-icon {
+  grid-template-columns: 1fr;
+}
+
+.dsn-alert--no-icon .dsn-alert__heading,
+.dsn-alert--no-icon .dsn-alert__content {
+  grid-column: 1;
+}
+

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,69 @@
+import React from 'react';
+import './Alert.css';
+export type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Semantische variant die de signaalkleur bepaalt
+     * @default 'info'
+     */
+    variant?: AlertVariant;
+    /**
+     * Koptekst van het bericht (verplicht)
+     */
+    heading: string;
+    /**
+     * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
+     * @default 2
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Icoon vóór de heading.
+     * - `undefined` (default) — aanbevolen icoon per variant
+     * - `null` — geen icoon
+     * - `ReactNode` — aangepast icoon
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Optionele body content (tekst, lijst, links, etc.)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Alert component
+ * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
+ *
+ * @example
+ * ```tsx
+ * // Info (default)
+ * <Alert heading="Uw aanvraag wordt verwerkt">
+ *   Dit kan enkele minuten duren.
+ * </Alert>
+ *
+ * // Positive
+ * <Alert variant="positive" heading="Gelukt">
+ *   Uw gegevens zijn opgeslagen.
+ * </Alert>
+ *
+ * // Negative
+ * <Alert variant="negative" heading="Er is een fout opgetreden">
+ *   Controleer uw gegevens en probeer het opnieuw.
+ * </Alert>
+ *
+ * // Warning
+ * <Alert variant="warning" heading="Let op">
+ *   Uw sessie verloopt over 5 minuten.
+ * </Alert>
+ *
+ * // Zonder icoon
+ * <Alert variant="info" heading="Opmerking" iconStart={null}>
+ *   Aanvullende informatie.
+ * </Alert>
+ *
+ * // Met aangepast icoon
+ * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
+ *   Gebruik de zoekfunctie om snel te navigeren.
+ * </Alert>
+ * ```
+ */
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AASxE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,mFAmDjB,CAAC"}

package/dist/Alert/Alert.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Icon } from '../Icon';
+import { Heading } from '../Heading';
+import './Alert.css';
+const PREFERRED_ICONS = {
+    info: 'info-circle',
+    positive: 'circle-check',
+    negative: 'exclamation-circle',
+    warning: 'alert-triangle',
+};
+/**
+ * Alert component
+ * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
+ *
+ * @example
+ * ```tsx
+ * // Info (default)
+ * <Alert heading="Uw aanvraag wordt verwerkt">
+ *   Dit kan enkele minuten duren.
+ * </Alert>
+ *
+ * // Positive
+ * <Alert variant="positive" heading="Gelukt">
+ *   Uw gegevens zijn opgeslagen.
+ * </Alert>
+ *
+ * // Negative
+ * <Alert variant="negative" heading="Er is een fout opgetreden">
+ *   Controleer uw gegevens en probeer het opnieuw.
+ * </Alert>
+ *
+ * // Warning
+ * <Alert variant="warning" heading="Let op">
+ *   Uw sessie verloopt over 5 minuten.
+ * </Alert>
+ *
+ * // Zonder icoon
+ * <Alert variant="info" heading="Opmerking" iconStart={null}>
+ *   Aanvullende informatie.
+ * </Alert>
+ *
+ * // Met aangepast icoon
+ * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
+ *   Gebruik de zoekfunctie om snel te navigeren.
+ * </Alert>
+ * ```
+ */
+export const Alert = React.forwardRef(({ className, variant = 'info', heading, headingLevel = 2, iconStart, children, ...props }, ref) => {
+    const noIcon = iconStart === null;
+    const resolvedIcon = iconStart === undefined ? (_jsx(Icon, { name: PREFERRED_ICONS[variant], size: "xl", "aria-hidden": true })) : (iconStart);
+    const classes = classNames('dsn-alert', variant !== 'info' && `dsn-alert--${variant}`, noIcon && 'dsn-alert--no-icon', className);
+    return (_jsxs("div", { ref: ref, className: classes, role: "alert", ...props, children: [!noIcon && (_jsx("span", { className: "dsn-alert__icon", "aria-hidden": true, children: resolvedIcon })), _jsx(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-alert__heading", children: heading }), children && _jsx("div", { className: "dsn-alert__content", children: children })] }));
+});
+Alert.displayName = 'Alert';
+//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,aAAa,CAAC;AAIrB,MAAM,eAAe,GAAiC;IACpD,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAkCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAElC,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,OAAO,KAAK,MAAM,IAAI,cAAc,OAAO,EAAE,EAC7C,MAAM,IAAI,oBAAoB,EAC9B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,aACtD,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,iBAAiB,iCAC9B,YAAY,GACR,CACR,EACD,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,oBAAoB,YAE7B,OAAO,GACA,EACT,QAAQ,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Alert/index.d.ts

@@ -0,0 +1,3 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertVariant } from './Alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/Alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/Alert/index.js

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+//# sourceMappingURL=index.js.map

package/dist/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}