@dsn-starter-kit/components-react 2.0.0 → 3.1.0

package/dist/Card/Card.d.mts

@@ -0,0 +1,107 @@
+import React from "react";
+//#region src/Card/Card.d.ts
+interface CardProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch
+   * via React context en wraps de heading-tekst in een `<a>`.
+   */
+  href?: string;
+  /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * Card component
+ * Configureerbare container voor gestructureerde content met header, body en footer.
+ * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
+ * Screenreaders lezen alleen de heading-tekst als linknaam.
+ *
+ * @example
+ * ```tsx
+ * <Card href="/artikel/slug">
+ *   <CardHeader>
+ *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *   </CardHeader>
+ *   <CardBody>
+ *     <CardHeading level={2}>Artikeltitel</CardHeading>
+ *     <Paragraph>Korte beschrijving.</Paragraph>
+ *   </CardBody>
+ *   <CardFooter>
+ *     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Afbeelding (`Image` component). Zonder children → toont placeholder
+   * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.
+   */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardHeader sub-component
+ * Zonder children → toont automatisch een afbeeldingsplaceholder.
+ */
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardBody sub-component
+ * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+ */
+declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Semantisch heading-niveau. Visuele appearance is altijd "card-heading".
+   * @default 2
+   */
+  level?: 2 | 3 | 4;
+  /** Heading-tekst */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardHeading sub-component
+ * Ontvangt `href` automatisch via React context van de parent `Card`.
+ * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+ * Het `::before` pseudo-element dekt de volledige card (stretched link).
+ */
+declare const CardHeading: React.ForwardRefExoticComponent<CardHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardFooter sub-component
+ * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
+ * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
+ * bestemming heeft als de card — vermijdt een dubbele tabstop.
+ */
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Semantisch container-element.
+   * Gebruik `div` wanneer cards geen lijst-context hebben.
+   * @default 'ul'
+   */
+  as?: 'ul' | 'div';
+  /** `Card` componenten */
+  children?: React.ReactNode;
+  className?: string;
+}
+/**
+ * CardGroup sub-component
+ * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
+ * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
+ */
+declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Card, CardBody, CardBodyProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardProps };
+//# sourceMappingURL=Card.d.mts.map

package/dist/Card/Card.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.mts","names":[],"sources":["../../src/Card/Card.tsx"],"mappings":";;UAkBiB,kBAAkB,MAAM,eAAe;;;;;EAKtD;;EAGA,WAAW,MAAM;EAEjB;;;;;;;;;;;;;;;;;;;;;;;;cAyBW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;UAsBA,wBAAwB,MAAM,eAAe;;;;;EAK5D,WAAW,MAAM;EAEjB;;;;;;cAOW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAwBN,sBAAsB,MAAM,eAAe;;EAE1D,WAAW,MAAM;EAEjB;;;;;;cAOW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA;UAoBJ,yBAAyB,MAAM,eAAe;;;;;EAK7D;;EAGA,WAAW,MAAM;EAEjB;;;;;;;;cASW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;UA8BP,wBAAwB,MAAM,eAAe;;EAE5D,WAAW,MAAM;EAEjB;;;;;;;;cASW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,uBAAuB,MAAM,eAAe;;;;;;EAM3D;;EAGA,WAAW,MAAM;EAEjB;;;;;;;cAQW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/Card/Card2.mjs

@@ -0,0 +1,125 @@
+/* empty css      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Card/Card.tsx
+const CardContext = React.createContext({});
+/**
+* Card component
+* Configureerbare container voor gestructureerde content met header, body en footer.
+* Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
+* Screenreaders lezen alleen de heading-tekst als linknaam.
+*
+* @example
+* ```tsx
+* <Card href="/artikel/slug">
+*   <CardHeader>
+*     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+*   </CardHeader>
+*   <CardBody>
+*     <CardHeading level={2}>Artikeltitel</CardHeading>
+*     <Paragraph>Korte beschrijving.</Paragraph>
+*   </CardBody>
+*   <CardFooter>
+*     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+*   </CardFooter>
+* </Card>
+* ```
+*/
+const Card = React.forwardRef(({ className, href, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: { href },
+		children: /* @__PURE__ */ jsx("article", {
+			ref,
+			className: classNames("dsn-card", className),
+			...props,
+			children
+		})
+	});
+});
+Card.displayName = "Card";
+/**
+* CardHeader sub-component
+* Zonder children → toont automatisch een afbeeldingsplaceholder.
+*/
+const CardHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-card__header", className),
+		...props,
+		children: children ? children : /* @__PURE__ */ jsx("div", {
+			className: "dsn-card__image-placeholder",
+			"aria-hidden": "true"
+		})
+	});
+});
+CardHeader.displayName = "CardHeader";
+/**
+* CardBody sub-component
+* Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+*/
+const CardBody = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-card__body", className),
+		...props,
+		children
+	});
+});
+CardBody.displayName = "CardBody";
+/**
+* CardHeading sub-component
+* Ontvangt `href` automatisch via React context van de parent `Card`.
+* Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+* Het `::before` pseudo-element dekt de volledige card (stretched link).
+*/
+const CardHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+	const { href } = React.useContext(CardContext);
+	const Tag = `h${level}`;
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		className: classNames("dsn-card-heading", className),
+		...props,
+		children: href ? /* @__PURE__ */ jsx("a", {
+			href,
+			className: "dsn-card-heading__link",
+			children
+		}) : children
+	});
+});
+CardHeading.displayName = "CardHeading";
+/**
+* CardFooter sub-component
+* Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
+* Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
+* bestemming heeft als de card — vermijdt een dubbele tabstop.
+*/
+const CardFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-card__footer", className),
+		...props,
+		children
+	});
+});
+CardFooter.displayName = "CardFooter";
+/**
+* CardGroup sub-component
+* Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
+* Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
+*/
+const CardGroup = React.forwardRef(({ className, as: Tag = "ul", children, ...props }, ref) => {
+	const roleProps = Tag === "ul" ? { role: "list" } : {};
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		className: classNames("dsn-card-group", className),
+		...roleProps,
+		...props,
+		children
+	});
+});
+CardGroup.displayName = "CardGroup";
+//#endregion
+export { Card, CardBody, CardFooter, CardGroup, CardHeader, CardHeading };
+
+//# sourceMappingURL=Card2.mjs.map

package/dist/Card/Card2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card2.mjs","names":[],"sources":["../../src/Card/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Card.css';\n\n// =============================================================================\n// Context — Card deelt href met CardHeading via React context\n// =============================================================================\n\ninterface CardContextValue {\n  href?: string;\n}\n\nconst CardContext = React.createContext<CardContextValue>({});\n\n// =============================================================================\n// Card — root container\n// =============================================================================\n\nexport interface CardProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch\n   * via React context en wraps de heading-tekst in een `<a>`.\n   */\n  href?: string;\n\n  /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * Card component\n * Configureerbare container voor gestructureerde content met header, body en footer.\n * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.\n * Screenreaders lezen alleen de heading-tekst als linknaam.\n *\n * @example\n * ```tsx\n * <Card href=\"/artikel/slug\">\n *   <CardHeader>\n *     <Image src=\"/foto.jpg\" alt=\"\" width={800} height={450} ratio=\"16:9\" />\n *   </CardHeader>\n *   <CardBody>\n *     <CardHeading level={2}>Artikeltitel</CardHeading>\n *     <Paragraph>Korte beschrijving.</Paragraph>\n *   </CardBody>\n *   <CardFooter>\n *     <Link href=\"/artikel/slug\" aria-hidden tabIndex={-1}>Lees meer</Link>\n *   </CardFooter>\n * </Card>\n * ```\n */\nexport const Card = React.forwardRef<HTMLElement, CardProps>(\n  ({ className, href, children, ...props }, ref) => {\n    return (\n      <CardContext.Provider value={{ href }}>\n        <article\n          ref={ref}\n          className={classNames('dsn-card', className)}\n          {...props}\n        >\n          {children}\n        </article>\n      </CardContext.Provider>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n// =============================================================================\n// CardHeader — optionele afbeeldingssectie\n// =============================================================================\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Afbeelding (`Image` component). Zonder children → toont placeholder\n   * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.\n   */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeader sub-component\n * Zonder children → toont automatisch een afbeeldingsplaceholder.\n */\nexport const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__header', className)}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <div className=\"dsn-card__image-placeholder\" aria-hidden=\"true\" />\n        )}\n      </div>\n    );\n  }\n);\n\nCardHeader.displayName = 'CardHeader';\n\n// =============================================================================\n// CardBody — inhoudssectie\n// =============================================================================\n\nexport interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardBody sub-component\n * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.\n */\nexport const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardBody.displayName = 'CardBody';\n\n// =============================================================================\n// CardHeading — heading met stretched link\n// =============================================================================\n\nexport interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Visuele appearance is altijd \"card-heading\".\n   * @default 2\n   */\n  level?: 2 | 3 | 4;\n\n  /** Heading-tekst */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardHeading sub-component\n * Ontvangt `href` automatisch via React context van de parent `Card`.\n * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class=\"dsn-card-heading__link\">`.\n * Het `::before` pseudo-element dekt de volledige card (stretched link).\n */\nexport const CardHeading = React.forwardRef<\n  HTMLHeadingElement,\n  CardHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { href } = React.useContext(CardContext);\n  const Tag = `h${level}` as 'h2' | 'h3' | 'h4';\n\n  return (\n    <Tag\n      ref={ref}\n      className={classNames('dsn-card-heading', className)}\n      {...props}\n    >\n      {href ? (\n        <a href={href} className=\"dsn-card-heading__link\">\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </Tag>\n  );\n});\n\nCardHeading.displayName = 'CardHeading';\n\n// =============================================================================\n// CardFooter — voettekst\n// =============================================================================\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardFooter sub-component\n * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.\n * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde\n * bestemming heeft als de card — vermijdt een dubbele tabstop.\n */\nexport const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-card__footer', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardFooter.displayName = 'CardFooter';\n\n// =============================================================================\n// CardGroup — layout wrapper\n// =============================================================================\n\nexport interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Semantisch container-element.\n   * Gebruik `div` wanneer cards geen lijst-context hebben.\n   * @default 'ul'\n   */\n  as?: 'ul' | 'div';\n\n  /** `Card` componenten */\n  children?: React.ReactNode;\n\n  className?: string;\n}\n\n/**\n * CardGroup sub-component\n * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.\n * Rendert `role=\"list\"` wanneer `as=\"ul\"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.\n */\nexport const CardGroup = React.forwardRef<HTMLElement, CardGroupProps>(\n  ({ className, as: Tag = 'ul', children, ...props }, ref) => {\n    const roleProps = Tag === 'ul' ? { role: 'list' as const } : {};\n\n    return (\n      <Tag\n        ref={ref as React.Ref<HTMLUListElement & HTMLDivElement>}\n        className={classNames('dsn-card-group', className)}\n        {...roleProps}\n        {...props}\n      >\n        {children}\n      </Tag>\n    );\n  }\n);\n\nCardGroup.displayName = 'CardGroup';\n"],"mappings":";;;;;AAYA,MAAM,cAAc,MAAM,cAAgC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAyC5D,MAAa,OAAO,MAAM,YACvB,EAAE,WAAW,MAAM,UAAU,GAAG,SAAS,QAAQ;CAChD,OACE,oBAAC,YAAY,UAAb;EAAsB,OAAO,EAAE,KAAK;EAClC,UAAA,oBAAC,WAAD;GACO;GACL,WAAW,WAAW,YAAY,SAAS;GAC3C,GAAI;GAEH;EACM,CAAA;CACW,CAAA;AAE1B,CACF;AAEA,KAAK,cAAc;;;;;AAoBnB,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH,UAAA,WACC,WAEA,oBAAC,OAAD;GAAK,WAAU;GAA8B,eAAY;EAAQ,CAAA;CAEhE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;AAiBzB,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc;;;;;;;AAyBvB,MAAa,cAAc,MAAM,YAG9B,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS,QAAQ;CACvD,MAAM,EAAE,SAAS,MAAM,WAAW,WAAW;CAC7C,MAAM,MAAM,IAAI;CAEhB,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH,UAAA,OACC,oBAAC,KAAD;GAAS;GAAM,WAAU;GACtB;EACA,CAAA,IAEH;CAEC,CAAA;AAET,CAAC;AAED,YAAY,cAAc;;;;;;;AAmB1B,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;;AAyBzB,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,IAAI,MAAM,MAAM,UAAU,GAAG,SAAS,QAAQ;CAC1D,MAAM,YAAY,QAAQ,OAAO,EAAE,MAAM,OAAgB,IAAI,CAAC;CAE9D,OACE,oBAAC,KAAD;EACO;EACL,WAAW,WAAW,kBAAkB,SAAS;EACjD,GAAI;EACJ,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/Card/index.d.mts

@@ -0,0 +1,2 @@
+import { Card, CardBody, CardBodyProps, CardFooter, CardFooterProps, CardGroup, CardGroupProps, CardHeader, CardHeaderProps, CardHeading, CardHeadingProps, CardProps } from "./Card.mjs";
+export { Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardGroup, type CardGroupProps, CardHeader, type CardHeaderProps, CardHeading, type CardHeadingProps, type CardProps };

package/dist/Checkbox/Checkbox.d.mts

@@ -0,0 +1,20 @@
+import React from "react";
+//#region src/Checkbox/Checkbox.d.ts
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Whether the checkbox is in an invalid state
+   */
+  invalid?: boolean;
+  /**
+   * Whether the checkbox is in an indeterminate state
+   */
+  indeterminate?: boolean;
+}
+/**
+ * Checkbox component for boolean selection (without label)
+ * Use CheckboxOption component to combine with a label
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Checkbox, CheckboxProps };
+//# sourceMappingURL=Checkbox.d.mts.map

package/dist/Checkbox/Checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.mts","names":[],"sources":["../../src/Checkbox/Checkbox.tsx"],"mappings":";;UAKiB,sBAAsB,KACrC,MAAM,oBAAoB;;;;EAM1B;;;;EAIA;;;;;;cAOW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/Checkbox/Checkbox2.mjs

@@ -0,0 +1,43 @@
+import { Icon } from "../Icon/Icon2.mjs";
+/* empty css          */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Checkbox/Checkbox.tsx
+/**
+* Checkbox component for boolean selection (without label)
+* Use CheckboxOption component to combine with a label
+*/
+const Checkbox = React.forwardRef(({ invalid, indeterminate, className, ...props }, ref) => {
+	const inputRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => inputRef.current);
+	React.useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = indeterminate || false;
+	}, [indeterminate]);
+	const inputClasses = classNames("dsn-checkbox__input", invalid && "dsn-checkbox__input--invalid", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dsn-checkbox",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: inputRef,
+			type: "checkbox",
+			className: inputClasses,
+			"aria-invalid": invalid ? "true" : void 0,
+			...props
+		}), /* @__PURE__ */ jsx("span", {
+			className: "dsn-checkbox__control",
+			"aria-hidden": "true",
+			children: indeterminate ? /* @__PURE__ */ jsx(Icon, {
+				name: "minus",
+				className: "dsn-checkbox__icon"
+			}) : /* @__PURE__ */ jsx(Icon, {
+				name: "check",
+				className: "dsn-checkbox__icon"
+			})
+		})]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox2.mjs.map

package/dist/Checkbox/Checkbox2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox2.mjs","names":[],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Checkbox.css';\n\nexport interface CheckboxProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the checkbox is in an invalid state\n   */\n  invalid?: boolean;\n  /**\n   * Whether the checkbox is in an indeterminate state\n   */\n  indeterminate?: boolean;\n}\n\n/**\n * Checkbox component for boolean selection (without label)\n * Use CheckboxOption component to combine with a label\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ invalid, indeterminate, className, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n    // Combine refs\n    React.useImperativeHandle(ref, () => inputRef.current!);\n\n    // Set indeterminate property (not available as HTML attribute)\n    React.useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = indeterminate || false;\n      }\n    }, [indeterminate]);\n\n    const inputClasses = classNames(\n      'dsn-checkbox__input',\n      invalid && 'dsn-checkbox__input--invalid',\n      className\n    );\n\n    return (\n      <div className=\"dsn-checkbox\">\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className={inputClasses}\n          aria-invalid={invalid ? 'true' : undefined}\n          {...props}\n        />\n        <span className=\"dsn-checkbox__control\" aria-hidden=\"true\">\n          {indeterminate ? (\n            <Icon name=\"minus\" className=\"dsn-checkbox__icon\" />\n          ) : (\n            <Icon name=\"check\" className=\"dsn-checkbox__icon\" />\n          )}\n        </span>\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";;;;;;;;;;AAuBA,MAAa,WAAW,MAAM,YAC3B,EAAE,SAAS,eAAe,WAAW,GAAG,SAAS,QAAQ;CACxD,MAAM,WAAW,MAAM,OAAgC,IAAI;CAG3D,MAAM,oBAAoB,WAAW,SAAS,OAAQ;CAGtD,MAAM,gBAAgB;EACpB,IAAI,SAAS,SACX,SAAS,QAAQ,gBAAgB,iBAAiB;CAEtD,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,eAAe,WACnB,uBACA,WAAW,gCACX,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,UAAU,SAAS,KAAA;GACjC,GAAI;EACL,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;GAAwB,eAAY;GACjD,UAAA,gBACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAsB,CAAA,IAEnD,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAsB,CAAA;EAEjD,CAAA,CACH;;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/Checkbox/index.d.mts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.mjs";
+export { Checkbox, type CheckboxProps };

package/dist/CheckboxGroup/CheckboxGroup.d.mts

@@ -0,0 +1,39 @@
+import React from "react";
+//#region src/CheckboxGroup/CheckboxGroup.d.ts
+interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Checkbox options to display in the group
+   */
+  children: React.ReactNode;
+}
+/**
+ * Checkbox Group component
+ * Container for multiple CheckboxOption components
+ *
+ * Note: This is just a list container. For a complete form field with label,
+ * wrap this in a FormFieldset component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (list only)
+ * <CheckboxGroup>
+ *   <CheckboxOption label="Sport" value="sport" />
+ *   <CheckboxOption label="Muziek" value="music" />
+ *   <CheckboxOption label="Reizen" value="travel" />
+ * </CheckboxGroup>
+ *
+ * // Complete form field (with FormFieldset and FormFieldLegend)
+ * <FormFieldset>
+ *   <FormFieldLegend>Interesses</FormFieldLegend>
+ *   <CheckboxGroup>
+ *     <CheckboxOption label="Sport" value="sport" />
+ *     <CheckboxOption label="Muziek" value="music" />
+ *     <CheckboxOption label="Reizen" value="travel" />
+ *   </CheckboxGroup>
+ * </FormFieldset>
+ * ```
+ */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CheckboxGroup, CheckboxGroupProps };
+//# sourceMappingURL=CheckboxGroup.d.mts.map

package/dist/CheckboxGroup/CheckboxGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.mts","names":[],"sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"mappings":";;UAIiB,2BAA2B,MAAM,eAAe;;;;EAI/D,UAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8BL,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA"}

package/dist/CheckboxGroup/CheckboxGroup2.mjs

@@ -0,0 +1,46 @@
+/* empty css               */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/CheckboxGroup/CheckboxGroup.tsx
+/**
+* Checkbox Group component
+* Container for multiple CheckboxOption components
+*
+* Note: This is just a list container. For a complete form field with label,
+* wrap this in a FormFieldset component.
+*
+* @example
+* ```tsx
+* // Basic usage (list only)
+* <CheckboxGroup>
+*   <CheckboxOption label="Sport" value="sport" />
+*   <CheckboxOption label="Muziek" value="music" />
+*   <CheckboxOption label="Reizen" value="travel" />
+* </CheckboxGroup>
+*
+* // Complete form field (with FormFieldset and FormFieldLegend)
+* <FormFieldset>
+*   <FormFieldLegend>Interesses</FormFieldLegend>
+*   <CheckboxGroup>
+*     <CheckboxOption label="Sport" value="sport" />
+*     <CheckboxOption label="Muziek" value="music" />
+*     <CheckboxOption label="Reizen" value="travel" />
+*   </CheckboxGroup>
+* </FormFieldset>
+* ```
+*/
+const CheckboxGroup = React.forwardRef(({ className, children, ...props }, ref) => {
+	const classes = classNames("dsn-checkbox-group", className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+//#endregion
+export { CheckboxGroup };
+
+//# sourceMappingURL=CheckboxGroup2.mjs.map

package/dist/CheckboxGroup/CheckboxGroup2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup2.mjs","names":[],"sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './CheckboxGroup.css';\n\nexport interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Checkbox options to display in the group\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Checkbox Group component\n * Container for multiple CheckboxOption components\n *\n * Note: This is just a list container. For a complete form field with label,\n * wrap this in a FormFieldset component.\n *\n * @example\n * ```tsx\n * // Basic usage (list only)\n * <CheckboxGroup>\n *   <CheckboxOption label=\"Sport\" value=\"sport\" />\n *   <CheckboxOption label=\"Muziek\" value=\"music\" />\n *   <CheckboxOption label=\"Reizen\" value=\"travel\" />\n * </CheckboxGroup>\n *\n * // Complete form field (with FormFieldset and FormFieldLegend)\n * <FormFieldset>\n *   <FormFieldLegend>Interesses</FormFieldLegend>\n *   <CheckboxGroup>\n *     <CheckboxOption label=\"Sport\" value=\"sport\" />\n *     <CheckboxOption label=\"Muziek\" value=\"music\" />\n *     <CheckboxOption label=\"Reizen\" value=\"travel\" />\n *   </CheckboxGroup>\n * </FormFieldset>\n * ```\n */\nexport const CheckboxGroup = React.forwardRef<\n  HTMLDivElement,\n  CheckboxGroupProps\n>(({ className, children, ...props }, ref) => {\n  const classes = classNames('dsn-checkbox-group', className);\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      {children}\n    </div>\n  );\n});\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,gBAAgB,MAAM,YAGhC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,UAAU,WAAW,sBAAsB,SAAS;CAE1D,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EACpC;CACE,CAAA;AAET,CAAC;AAED,cAAc,cAAc"}

package/dist/CheckboxGroup/index.d.mts

@@ -0,0 +1,2 @@
+import { CheckboxGroup, CheckboxGroupProps } from "./CheckboxGroup.mjs";
+export { CheckboxGroup, type CheckboxGroupProps };

package/dist/CheckboxOption/CheckboxOption.d.mts

@@ -0,0 +1,17 @@
+import { CheckboxProps } from "../Checkbox/Checkbox.mjs";
+import "../Checkbox/index.mjs";
+import React from "react";
+//#region src/CheckboxOption/CheckboxOption.d.ts
+interface CheckboxOptionProps extends CheckboxProps {
+  /**
+   * Label text for the checkbox
+   */
+  label: string;
+}
+/**
+ * Checkbox with label - combines Checkbox and OptionLabel
+ */
+declare const CheckboxOption: React.ForwardRefExoticComponent<CheckboxOptionProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { CheckboxOption, CheckboxOptionProps };
+//# sourceMappingURL=CheckboxOption.d.mts.map

package/dist/CheckboxOption/CheckboxOption.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.d.mts","names":[],"sources":["../../src/CheckboxOption/CheckboxOption.tsx"],"mappings":";;;;UAMiB,4BAA4B;;;;EAI3C;;;;;cAMW,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/CheckboxOption/CheckboxOption2.mjs

@@ -0,0 +1,29 @@
+import { Checkbox } from "../Checkbox/Checkbox2.mjs";
+import { OptionLabel } from "../OptionLabel/OptionLabel2.mjs";
+/* empty css                */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/CheckboxOption/CheckboxOption.tsx
+/**
+* Checkbox with label - combines Checkbox and OptionLabel
+*/
+const CheckboxOption = React.forwardRef(({ label, disabled, className, ...checkboxProps }, ref) => {
+	const wrapperClasses = classNames("dsn-checkbox-option", className);
+	return /* @__PURE__ */ jsxs("label", {
+		className: wrapperClasses,
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			ref,
+			disabled,
+			...checkboxProps
+		}), /* @__PURE__ */ jsx(OptionLabel, {
+			disabled,
+			children: label
+		})]
+	});
+});
+CheckboxOption.displayName = "CheckboxOption";
+//#endregion
+export { CheckboxOption };
+
+//# sourceMappingURL=CheckboxOption2.mjs.map

package/dist/CheckboxOption/CheckboxOption2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption2.mjs","names":[],"sources":["../../src/CheckboxOption/CheckboxOption.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Checkbox, CheckboxProps } from '../Checkbox';\nimport { OptionLabel } from '../OptionLabel';\nimport './CheckboxOption.css';\n\nexport interface CheckboxOptionProps extends CheckboxProps {\n  /**\n   * Label text for the checkbox\n   */\n  label: string;\n}\n\n/**\n * Checkbox with label - combines Checkbox and OptionLabel\n */\nexport const CheckboxOption = React.forwardRef<\n  HTMLInputElement,\n  CheckboxOptionProps\n>(({ label, disabled, className, ...checkboxProps }, ref) => {\n  const wrapperClasses = classNames('dsn-checkbox-option', className);\n\n  return (\n    <label className={wrapperClasses}>\n      <Checkbox ref={ref} disabled={disabled} {...checkboxProps} />\n      <OptionLabel disabled={disabled}>{label}</OptionLabel>\n    </label>\n  );\n});\n\nCheckboxOption.displayName = 'CheckboxOption';\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,OAAO,UAAU,WAAW,GAAG,iBAAiB,QAAQ;CAC3D,MAAM,iBAAiB,WAAW,uBAAuB,SAAS;CAElE,OACE,qBAAC,SAAD;EAAO,WAAW;EAAlB,UAAA,CACE,oBAAC,UAAD;GAAe;GAAe;GAAU,GAAI;EAAgB,CAAA,GAC5D,oBAAC,aAAD;GAAuB;GAAW,UAAA;EAAmB,CAAA,CAChD;;AAEX,CAAC;AAED,eAAe,cAAc"}

package/dist/CheckboxOption/index.d.mts

@@ -0,0 +1,2 @@
+import { CheckboxOption, CheckboxOptionProps } from "./CheckboxOption.mjs";
+export { CheckboxOption, type CheckboxOptionProps };

package/dist/Container/Container.d.mts

@@ -0,0 +1,43 @@
+import React from "react";
+//#region src/Container/Container.d.ts
+type ContainerAs = 'div' | 'section' | 'article' | 'aside';
+interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * HTML-element — ontkoppelt semantiek van visuele stijl
+   * @default 'div'
+   */
+  as?: ContainerAs;
+  /**
+   * Voegt een lichte schaduw toe voor een zwevend, kaart-achtig effect
+   * @default false
+   */
+  elevated?: boolean;
+  children?: React.ReactNode;
+}
+/**
+ * Container component
+ * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.
+ *
+ * @example
+ * ```tsx
+ * // Standaard
+ * <Container>
+ *   <Paragraph>Inhoud</Paragraph>
+ * </Container>
+ *
+ * // Elevated (kaart-achtig)
+ * <Container elevated>
+ *   <Paragraph>Inhoud</Paragraph>
+ * </Container>
+ *
+ * // Semantisch element
+ * <Container as="section">
+ *   <Heading level={2}>Sectietitel</Heading>
+ *   <Paragraph>Inhoud</Paragraph>
+ * </Container>
+ * ```
+ */
+declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Container, ContainerAs, ContainerProps };
+//# sourceMappingURL=Container.d.mts.map

package/dist/Container/Container.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.mts","names":[],"sources":["../../src/Container/Container.tsx"],"mappings":";;KAIY;UAEK,uBAAuB,MAAM,eAAe;;;;;EAK3D,KAAK;;;;;EAML;EAEA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;cA0BN,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/Container/Container2.mjs

@@ -0,0 +1,42 @@
+/* empty css           */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Container/Container.tsx
+/**
+* Container component
+* Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.
+*
+* @example
+* ```tsx
+* // Standaard
+* <Container>
+*   <Paragraph>Inhoud</Paragraph>
+* </Container>
+*
+* // Elevated (kaart-achtig)
+* <Container elevated>
+*   <Paragraph>Inhoud</Paragraph>
+* </Container>
+*
+* // Semantisch element
+* <Container as="section">
+*   <Heading level={2}>Sectietitel</Heading>
+*   <Paragraph>Inhoud</Paragraph>
+* </Container>
+* ```
+*/
+const Container = React.forwardRef(({ as: As = "div", className, elevated = false, children, ...props }, ref) => {
+	const classes = classNames("dsn-container", elevated && "dsn-container--elevated", className);
+	return /* @__PURE__ */ jsx(As, {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+Container.displayName = "Container";
+//#endregion
+export { Container };
+
+//# sourceMappingURL=Container2.mjs.map

package/dist/Container/Container2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container2.mjs","names":[],"sources":["../../src/Container/Container.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Container.css';\n\nexport type ContainerAs = 'div' | 'section' | 'article' | 'aside';\n\nexport interface ContainerProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML-element — ontkoppelt semantiek van visuele stijl\n   * @default 'div'\n   */\n  as?: ContainerAs;\n\n  /**\n   * Voegt een lichte schaduw toe voor een zwevend, kaart-achtig effect\n   * @default false\n   */\n  elevated?: boolean;\n\n  children?: React.ReactNode;\n}\n\n/**\n * Container component\n * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.\n *\n * @example\n * ```tsx\n * // Standaard\n * <Container>\n *   <Paragraph>Inhoud</Paragraph>\n * </Container>\n *\n * // Elevated (kaart-achtig)\n * <Container elevated>\n *   <Paragraph>Inhoud</Paragraph>\n * </Container>\n *\n * // Semantisch element\n * <Container as=\"section\">\n *   <Heading level={2}>Sectietitel</Heading>\n *   <Paragraph>Inhoud</Paragraph>\n * </Container>\n * ```\n */\nexport const Container = React.forwardRef<HTMLElement, ContainerProps>(\n  (\n    { as: As = 'div', className, elevated = false, children, ...props },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-container',\n      elevated && 'dsn-container--elevated',\n      className\n    );\n\n    return (\n      <As ref={ref as React.Ref<HTMLDivElement>} className={classes} {...props}>\n        {children}\n      </As>\n    );\n  }\n);\n\nContainer.displayName = 'Container';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,YAAY,MAAM,YAE3B,EAAE,IAAI,KAAK,OAAO,WAAW,WAAW,OAAO,UAAU,GAAG,SAC5D,QACG;CACH,MAAM,UAAU,WACd,iBACA,YAAY,2BACZ,SACF;CAEA,OACE,oBAAC,IAAD;EAAS;EAAkC,WAAW;EAAS,GAAI;EAChE;CACC,CAAA;AAER,CACF;AAEA,UAAU,cAAc"}

package/dist/Container/index.d.mts

@@ -0,0 +1,2 @@
+import { Container, ContainerAs, ContainerProps } from "./Container.mjs";
+export { Container, type ContainerAs, type ContainerProps };

package/dist/DateInput/DateInput.d.mts

@@ -0,0 +1,38 @@
+import React from "react";
+//#region src/DateInput/DateInput.d.ts
+interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * Date Input component
+ * Date input with an interactive calendar button at inline-end that opens the native date picker.
+ * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInput />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
+ * <DateInput id="date" />
+ *
+ * // With default value
+ * <DateInput defaultValue="2025-03-15" />
+ *
+ * // Invalid state
+ * <DateInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { DateInput, DateInputProps };
+//# sourceMappingURL=DateInput.d.mts.map