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

package/dist/Table/Table2.mjs

@@ -0,0 +1,54 @@
+/* empty css       */
+import React, { useId } from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Table/Table.tsx
+/**
+* Tabel component voor het weergeven van tweedimensionale tabeldata.
+*
+* Gebruik altijd `<th scope="col">` voor kolomkoppen en `<th scope="row">` voor rijkoppen.
+* Voeg `<tfoot>` toe via children voor een optionele totaal- of samenvattingsrij.
+*
+* @example
+* <Table caption="Productoverzicht">
+*   <thead>
+*     <tr>
+*       <th scope="col">Product</th>
+*       <th scope="col">Prijs</th>
+*     </tr>
+*   </thead>
+*   <tbody>
+*     <tr>
+*       <th scope="row">Laptop</th>
+*       <td>€999</td>
+*     </tr>
+*   </tbody>
+* </Table>
+*/
+const Table = React.forwardRef(({ caption, captionId: captionIdProp, scrollable = false, children, className, ...props }, ref) => {
+	const autoId = useId();
+	const captionId = captionIdProp ?? `dsn-table-caption-${autoId}`;
+	const table = /* @__PURE__ */ jsxs("table", {
+		ref,
+		className: classNames("dsn-table", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("caption", {
+			id: captionId,
+			className: "dsn-table__caption",
+			children: caption
+		}), children]
+	});
+	if (scrollable) return /* @__PURE__ */ jsx("div", {
+		className: "dsn-table-wrapper",
+		role: "region",
+		"aria-labelledby": captionId,
+		tabIndex: 0,
+		children: table
+	});
+	return table;
+});
+Table.displayName = "Table";
+//#endregion
+export { Table };
+
+//# sourceMappingURL=Table2.mjs.map

package/dist/Table/Table2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table2.mjs","names":[],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Table.css';\n\nexport type TableProps = React.HTMLAttributes<HTMLTableElement> & {\n  /**\n   * Zichtbaar bijschrift boven de tabel.\n   * Dient ook als toegankelijke naam van de tabel voor schermlezers.\n   */\n  caption: string;\n  /**\n   * Optionele ID voor de caption.\n   * Standaard auto-gegenereerd via `useId()`.\n   * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.\n   */\n  captionId?: string;\n  /**\n   * Wikkelt de tabel in een scroll-container (`role=\"region\"`, `tabIndex={0}`, `aria-labelledby`).\n   * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.\n   */\n  scrollable?: boolean;\n};\n\n/**\n * Tabel component voor het weergeven van tweedimensionale tabeldata.\n *\n * Gebruik altijd `<th scope=\"col\">` voor kolomkoppen en `<th scope=\"row\">` voor rijkoppen.\n * Voeg `<tfoot>` toe via children voor een optionele totaal- of samenvattingsrij.\n *\n * @example\n * <Table caption=\"Productoverzicht\">\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Product</th>\n *       <th scope=\"col\">Prijs</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <th scope=\"row\">Laptop</th>\n *       <td>€999</td>\n *     </tr>\n *   </tbody>\n * </Table>\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  (\n    {\n      caption,\n      captionId: captionIdProp,\n      scrollable = false,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const autoId = useId();\n    const captionId = captionIdProp ?? `dsn-table-caption-${autoId}`;\n\n    const table = (\n      <table\n        ref={ref}\n        className={classNames('dsn-table', className)}\n        {...props}\n      >\n        <caption id={captionId} className=\"dsn-table__caption\">\n          {caption}\n        </caption>\n        {children}\n      </table>\n    );\n\n    if (scrollable) {\n      return (\n        <div\n          className=\"dsn-table-wrapper\"\n          role=\"region\"\n          aria-labelledby={captionId}\n          tabIndex={0}\n        >\n          {table}\n        </div>\n      );\n    }\n\n    return table;\n  }\n);\n\nTable.displayName = 'Table';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,QAAQ,MAAM,YAEvB,EACE,SACA,WAAW,eACX,aAAa,OACb,UACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,SAAS,MAAM;CACrB,MAAM,YAAY,iBAAiB,qBAAqB;CAExD,MAAM,QACJ,qBAAC,SAAD;EACO;EACL,WAAW,WAAW,aAAa,SAAS;EAC5C,GAAI;EAHN,UAAA,CAKE,oBAAC,WAAD;GAAS,IAAI;GAAW,WAAU;GAC/B,UAAA;EACM,CAAA,GACR,QACI;;CAGT,IAAI,YACF,OACE,oBAAC,OAAD;EACE,WAAU;EACV,MAAK;EACL,mBAAiB;EACjB,UAAU;EAET,UAAA;CACE,CAAA;CAIT,OAAO;AACT,CACF;AAEA,MAAM,cAAc"}

package/dist/Table/index.d.mts

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

package/dist/TableOfContents/TableOfContents.d.mts

@@ -0,0 +1,64 @@
+import { HeadingLevel } from "../Heading/Heading.mjs";
+import "../Heading/index.mjs";
+import React from "react";
+//#region src/TableOfContents/TableOfContents.d.ts
+type TableOfContentsAppearance = 'framed' | 'plain';
+interface TableOfContentsItem {
+  /**
+   * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina
+   */
+  id: string;
+  /**
+   * Zichtbare linktekst
+   */
+  label: string;
+}
+interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Zichtbare heading-tekst
+   * @default 'Op deze pagina'
+   */
+  heading?: string;
+  /**
+   * Semantisch heading-niveau
+   * @default 2
+   */
+  headingLevel?: HeadingLevel;
+  /**
+   * Visuele weergave:
+   * - `'framed'` — accent-1 achtergrond + linkerborder, heading als heading-3 (voor gebruik inline in de content-flow)
+   * - `'plain'` — geen kader, heading als heading-5 (voor gebruik in een losstaande kolom)
+   * @default 'framed'
+   */
+  appearance?: TableOfContentsAppearance;
+  /**
+   * Secties waarnaar gelinkt wordt — alleen H2's horen hierin opgenomen te worden
+   */
+  items: TableOfContentsItem[];
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * TableOfContents component
+ * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
+ *
+ * @example
+ * ```tsx
+ * // Framed (default) — inline in de content-flow
+ * <TableOfContents
+ *   items={[
+ *     { id: 'sectie-1', label: 'Sectie 1' },
+ *     { id: 'sectie-2', label: 'Sectie 2' },
+ *   ]}
+ * />
+ *
+ * // Plain — in een losstaande kolom naast de hoofdinhoud
+ * <TableOfContents appearance="plain" items={items} />
+ * ```
+ */
+declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { TableOfContents, TableOfContentsAppearance, TableOfContentsItem, TableOfContentsProps };
+//# sourceMappingURL=TableOfContents.d.mts.map

package/dist/TableOfContents/TableOfContents.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.d.mts","names":[],"sources":["../../src/TableOfContents/TableOfContents.tsx"],"mappings":";;;;KAOY;UAEK;;;;EAIf;;;;EAKA;;UAGe,6BAA6B,MAAM,eAAe;;;;;EAKjE;;;;;EAMA,eAAe;;;;;;;EAQf,aAAa;;;;EAKb,OAAO;;;;EAKP;;;;;;;;;;;;;;;;;;;;cAqBW,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}

package/dist/TableOfContents/TableOfContents2.mjs

@@ -0,0 +1,51 @@
+import { Heading } from "../Heading/Heading2.mjs";
+import { Link } from "../Link/Link2.mjs";
+import { UnorderedList } from "../UnorderedList/UnorderedList2.mjs";
+/* empty css                 */
+import React, { useId } from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/TableOfContents/TableOfContents.tsx
+/**
+* TableOfContents component
+* Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
+*
+* @example
+* ```tsx
+* // Framed (default) — inline in de content-flow
+* <TableOfContents
+*   items={[
+*     { id: 'sectie-1', label: 'Sectie 1' },
+*     { id: 'sectie-2', label: 'Sectie 2' },
+*   ]}
+* />
+*
+* // Plain — in een losstaande kolom naast de hoofdinhoud
+* <TableOfContents appearance="plain" items={items} />
+* ```
+*/
+const TableOfContents = React.forwardRef(({ heading = "Op deze pagina", headingLevel = 2, appearance = "framed", items, className, ...props }, ref) => {
+	const headingId = useId();
+	const classes = classNames("dsn-table-of-contents", appearance === "plain" && "dsn-table-of-contents--plain", className);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		className: classes,
+		"aria-labelledby": headingId,
+		...props,
+		children: [/* @__PURE__ */ jsx(Heading, {
+			level: headingLevel,
+			appearance: appearance === "plain" ? "heading-5" : "heading-3",
+			className: "dsn-table-of-contents__heading",
+			id: headingId,
+			children: heading
+		}), /* @__PURE__ */ jsx(UnorderedList, { children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, {
+			href: `#${item.id}`,
+			children: item.label
+		}) }, item.id)) })]
+	});
+});
+TableOfContents.displayName = "TableOfContents";
+//#endregion
+export { TableOfContents };
+
+//# sourceMappingURL=TableOfContents2.mjs.map

package/dist/TableOfContents/TableOfContents2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents2.mjs","names":[],"sources":["../../src/TableOfContents/TableOfContents.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Heading, type HeadingLevel } from '../Heading';\nimport { Link } from '../Link';\nimport { UnorderedList } from '../UnorderedList';\nimport './TableOfContents.css';\n\nexport type TableOfContentsAppearance = 'framed' | 'plain';\n\nexport interface TableOfContentsItem {\n  /**\n   * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina\n   */\n  id: string;\n\n  /**\n   * Zichtbare linktekst\n   */\n  label: string;\n}\n\nexport interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Zichtbare heading-tekst\n   * @default 'Op deze pagina'\n   */\n  heading?: string;\n\n  /**\n   * Semantisch heading-niveau\n   * @default 2\n   */\n  headingLevel?: HeadingLevel;\n\n  /**\n   * Visuele weergave:\n   * - `'framed'` — accent-1 achtergrond + linkerborder, heading als heading-3 (voor gebruik inline in de content-flow)\n   * - `'plain'` — geen kader, heading als heading-5 (voor gebruik in een losstaande kolom)\n   * @default 'framed'\n   */\n  appearance?: TableOfContentsAppearance;\n\n  /**\n   * Secties waarnaar gelinkt wordt — alleen H2's horen hierin opgenomen te worden\n   */\n  items: TableOfContentsItem[];\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * TableOfContents component\n * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.\n *\n * @example\n * ```tsx\n * // Framed (default) — inline in de content-flow\n * <TableOfContents\n *   items={[\n *     { id: 'sectie-1', label: 'Sectie 1' },\n *     { id: 'sectie-2', label: 'Sectie 2' },\n *   ]}\n * />\n *\n * // Plain — in een losstaande kolom naast de hoofdinhoud\n * <TableOfContents appearance=\"plain\" items={items} />\n * ```\n */\nexport const TableOfContents = React.forwardRef<\n  HTMLElement,\n  TableOfContentsProps\n>(\n  (\n    {\n      heading = 'Op deze pagina',\n      headingLevel = 2,\n      appearance = 'framed',\n      items,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const headingId = useId();\n\n    const classes = classNames(\n      'dsn-table-of-contents',\n      appearance === 'plain' && 'dsn-table-of-contents--plain',\n      className\n    );\n\n    return (\n      <nav\n        ref={ref as React.Ref<HTMLElement>}\n        className={classes}\n        aria-labelledby={headingId}\n        {...props}\n      >\n        <Heading\n          level={headingLevel}\n          appearance={appearance === 'plain' ? 'heading-5' : 'heading-3'}\n          className=\"dsn-table-of-contents__heading\"\n          id={headingId}\n        >\n          {heading}\n        </Heading>\n        <UnorderedList>\n          {items.map((item) => (\n            <li key={item.id}>\n              <Link href={`#${item.id}`}>{item.label}</Link>\n            </li>\n          ))}\n        </UnorderedList>\n      </nav>\n    );\n  }\n);\n\nTableOfContents.displayName = 'TableOfContents';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,MAAa,kBAAkB,MAAM,YAKjC,EACE,UAAU,kBACV,eAAe,GACf,aAAa,UACb,OACA,WACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CAExB,MAAM,UAAU,WACd,yBACA,eAAe,WAAW,gCAC1B,SACF;CAEA,OACE,qBAAC,OAAD;EACO;EACL,WAAW;EACX,mBAAiB;EACjB,GAAI;EAJN,UAAA,CAME,oBAAC,SAAD;GACE,OAAO;GACP,YAAY,eAAe,UAAU,cAAc;GACnD,WAAU;GACV,IAAI;GAEH,UAAA;EACM,CAAA,GACT,oBAAC,eAAD,EAAA,UACG,MAAM,KAAK,SACV,oBAAC,MAAD,EAAA,UACE,oBAAC,MAAD;GAAM,MAAM,IAAI,KAAK;GAAO,UAAA,KAAK;EAAY,CAAA,EAC3C,GAFK,KAAK,EAEV,CACL,EACY,CAAA,CACZ;;AAET,CACF;AAEA,gBAAgB,cAAc"}

package/dist/TableOfContents/index.d.mts

@@ -0,0 +1,2 @@
+import { TableOfContents, TableOfContentsAppearance, TableOfContentsItem, TableOfContentsProps } from "./TableOfContents.mjs";
+export { TableOfContents, type TableOfContentsAppearance, type TableOfContentsItem, type TableOfContentsProps };

package/dist/TelephoneInput/TelephoneInput.d.mts

@@ -0,0 +1,40 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/TelephoneInput/TelephoneInput.d.ts
+interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the input
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * Telephone Input component
+ * Telephone input with appropriate inputmode and autocomplete
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TelephoneInput placeholder="06 12345678" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="phone">Telefoonnummer</FormFieldLabel>
+ * <TelephoneInput id="phone" />
+ *
+ * // Invalid state
+ * <TelephoneInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+declare const TelephoneInput: React.ForwardRefExoticComponent<TelephoneInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TelephoneInput, TelephoneInputProps };
+//# sourceMappingURL=TelephoneInput.d.mts.map

package/dist/TelephoneInput/TelephoneInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelephoneInput.d.mts","names":[],"sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"mappings":";;;UAIiB,4BAA4B,KAC3C,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;cAoBW,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/TelephoneInput/TelephoneInput.mjs

@@ -0,0 +1,39 @@
+/* empty css                      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/TelephoneInput/TelephoneInput.tsx
+/**
+* Telephone Input component
+* Telephone input with appropriate inputmode and autocomplete
+*
+* @example
+* ```tsx
+* // Basic usage
+* <TelephoneInput placeholder="06 12345678" />
+*
+* // With label
+* <FormFieldLabel htmlFor="phone">Telefoonnummer</FormFieldLabel>
+* <TelephoneInput id="phone" />
+*
+* // Invalid state
+* <TelephoneInput invalid aria-invalid="true" aria-describedby="error" />
+* ```
+*/
+const TelephoneInput = React.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
+	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "tel",
+		inputMode: "tel",
+		className: classes,
+		autoComplete: autoComplete || "tel",
+		"aria-invalid": invalid || void 0,
+		...props
+	});
+});
+TelephoneInput.displayName = "TelephoneInput";
+//#endregion
+export { TelephoneInput };
+
+//# sourceMappingURL=TelephoneInput.mjs.map

package/dist/TelephoneInput/TelephoneInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelephoneInput.mjs","names":[],"sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport interface TelephoneInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Telephone Input component\n * Telephone input with appropriate inputmode and autocomplete\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TelephoneInput placeholder=\"06 12345678\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"phone\">Telefoonnummer</FormFieldLabel>\n * <TelephoneInput id=\"phone\" />\n *\n * // Invalid state\n * <TelephoneInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TelephoneInput = React.forwardRef<\n  HTMLInputElement,\n  TelephoneInputProps\n>(({ className, invalid, width, autoComplete, ...props }, ref) => {\n  const classes = classNames(\n    'dsn-text-input',\n    width && `dsn-text-input--width-${width}`,\n    className\n  );\n\n  return (\n    <input\n      ref={ref}\n      type=\"tel\"\n      inputMode=\"tel\"\n      className={classes}\n      autoComplete={autoComplete || 'tel'}\n      aria-invalid={invalid || undefined}\n      {...props}\n    />\n  );\n});\n\nTelephoneInput.displayName = 'TelephoneInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,SAAS,OAAO,cAAc,GAAG,SAAS,QAAQ;CAChE,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAU;EACV,WAAW;EACX,cAAc,gBAAgB;EAC9B,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CAAC;AAED,eAAe,cAAc"}

package/dist/TelephoneInput/index.d.mts

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

package/dist/TextArea/TextArea.d.mts

@@ -0,0 +1,46 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/TextArea/TextArea.d.ts
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the textarea is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the textarea
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+}
+/**
+ * Text Area component
+ * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextArea placeholder="Enter your bio" rows={4} />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="bio">Biography</FormFieldLabel>
+ * <TextArea id="bio" rows={6} />
+ *
+ * // Disabled
+ * <TextArea disabled value="Cannot edit" rows={3} />
+ *
+ * // Invalid
+ * <TextArea invalid aria-invalid="true" aria-describedby="error" rows={4} />
+ *
+ * // Read-only
+ * <TextArea readOnly value="View only" rows={3} />
+ * ```
+ */
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { TextArea, TextAreaProps };
+//# sourceMappingURL=TextArea.d.mts.map

package/dist/TextArea/TextArea.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.mts","names":[],"sources":["../../src/TextArea/TextArea.tsx"],"mappings":";;;UAIiB,sBAAsB,MAAM,uBAAuB;;;;EAIlE;;;;;EAMA;;;;;EAMA,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;cA0BG,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/TextArea/TextArea2.mjs

@@ -0,0 +1,43 @@
+/* empty css          */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/TextArea/TextArea.tsx
+/**
+* Text Area component
+* Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+*
+* @example
+* ```tsx
+* // Basic usage
+* <TextArea placeholder="Enter your bio" rows={4} />
+*
+* // With label
+* <FormFieldLabel htmlFor="bio">Biography</FormFieldLabel>
+* <TextArea id="bio" rows={6} />
+*
+* // Disabled
+* <TextArea disabled value="Cannot edit" rows={3} />
+*
+* // Invalid
+* <TextArea invalid aria-invalid="true" aria-describedby="error" rows={4} />
+*
+* // Read-only
+* <TextArea readOnly value="View only" rows={3} />
+* ```
+*/
+const TextArea = React.forwardRef(({ className, invalid, width, rows = 4, ...props }, ref) => {
+	const classes = classNames("dsn-text-area", width && `dsn-text-area--width-${width}`, className);
+	return /* @__PURE__ */ jsx("textarea", {
+		ref,
+		className: classes,
+		rows,
+		"aria-invalid": invalid || void 0,
+		...props
+	});
+});
+TextArea.displayName = "TextArea";
+//#endregion
+export { TextArea };
+
+//# sourceMappingURL=TextArea2.mjs.map

package/dist/TextArea/TextArea2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea2.mjs","names":[],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextArea.css';\n\nexport interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the textarea is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the textarea\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n}\n\n/**\n * Text Area component\n * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your bio\" rows={4} />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"bio\">Biography</FormFieldLabel>\n * <TextArea id=\"bio\" rows={6} />\n *\n * // Disabled\n * <TextArea disabled value=\"Cannot edit\" rows={3} />\n *\n * // Invalid\n * <TextArea invalid aria-invalid=\"true\" aria-describedby=\"error\" rows={4} />\n *\n * // Read-only\n * <TextArea readOnly value=\"View only\" rows={3} />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, invalid, width, rows = 4, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-area',\n      width && `dsn-text-area--width-${width}`,\n      className\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        className={classes}\n        rows={rows}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,SAAS,OAAO,OAAO,GAAG,GAAG,SAAS,QAAQ;CAC1D,MAAM,UAAU,WACd,iBACA,SAAS,wBAAwB,SACjC,SACF;CAEA,OACE,oBAAC,YAAD;EACO;EACL,WAAW;EACL;EACN,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

package/dist/TextArea/index.d.mts

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

package/dist/TextInput/TextInput.d.mts

@@ -0,0 +1,46 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/TextInput/TextInput.d.ts
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the input
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+}
+/**
+ * Text Input component
+ * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextInput placeholder="Enter your name" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="email">Email</FormFieldLabel>
+ * <TextInput id="email" type="email" />
+ *
+ * // Disabled
+ * <TextInput disabled value="Read only value" />
+ *
+ * // Invalid
+ * <TextInput invalid aria-invalid="true" aria-describedby="error" />
+ *
+ * // Read-only
+ * <TextInput readOnly value="Cannot edit this" />
+ * ```
+ */
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TextInput, TextInputProps };
+//# sourceMappingURL=TextInput.d.mts.map

package/dist/TextInput/TextInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.mts","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"mappings":";;;UAIiB,uBAAuB,MAAM,oBAAoB;;;;EAIhE;;;;;EAMA;;;;;EAMA,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;cA0BG,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/TextInput/TextInput2.mjs

@@ -0,0 +1,43 @@
+/* empty css           */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/TextInput/TextInput.tsx
+/**
+* Text Input component
+* Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)
+*
+* @example
+* ```tsx
+* // Basic usage
+* <TextInput placeholder="Enter your name" />
+*
+* // With label
+* <FormFieldLabel htmlFor="email">Email</FormFieldLabel>
+* <TextInput id="email" type="email" />
+*
+* // Disabled
+* <TextInput disabled value="Read only value" />
+*
+* // Invalid
+* <TextInput invalid aria-invalid="true" aria-describedby="error" />
+*
+* // Read-only
+* <TextInput readOnly value="Cannot edit this" />
+* ```
+*/
+const TextInput = React.forwardRef(({ className, invalid, width, type = "text", ...props }, ref) => {
+	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type,
+		className: classes,
+		"aria-invalid": invalid || void 0,
+		...props
+	});
+});
+TextInput.displayName = "TextInput";
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=TextInput2.mjs.map

package/dist/TextInput/TextInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput2.mjs","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextInput.css';\n\nexport interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n}\n\n/**\n * Text Input component\n * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextInput placeholder=\"Enter your name\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">Email</FormFieldLabel>\n * <TextInput id=\"email\" type=\"email\" />\n *\n * // Disabled\n * <TextInput disabled value=\"Read only value\" />\n *\n * // Invalid\n * <TextInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n *\n * // Read-only\n * <TextInput readOnly value=\"Cannot edit this\" />\n * ```\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, invalid, width, type = 'text', ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type={type}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextInput.displayName = 'TextInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,OAAO,OAAO,QAAQ,GAAG,SAAS,QAAQ;CAC/D,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACC;EACN,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/TextInput/index.d.mts

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

package/dist/TimeInput/TimeInput.d.mts

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

package/dist/TimeInput/TimeInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput.d.mts","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"mappings":";;UAOiB,uBAAuB,KACtC,MAAM,oBAAoB;;;;;EAO1B;;;;EAKA;;;;;;;;;;;;;;;;;;;;;;;cAwBW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/TimeInput/TimeInput2.mjs

@@ -0,0 +1,69 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import { Button } from "../Button/Button2.mjs";
+/* empty css                      */
+/* empty css           */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/TimeInput/TimeInput.tsx
+/**
+* Time Input component
+* Time input with an interactive clock button at inline-end that opens the native time picker.
+* Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <TimeInput />
+*
+* // With label
+* <FormFieldLabel htmlFor="time">Tijd</FormFieldLabel>
+* <TimeInput id="time" />
+*
+* // With default value
+* <TimeInput defaultValue="14:30" />
+*
+* // Invalid state
+* <TimeInput invalid aria-invalid="true" aria-describedby="error" />
+* ```
+*/
+const TimeInput = React.forwardRef(({ className, invalid, disabled, readOnly, ...props }, ref) => {
+	const inputRef = React.useRef(null);
+	const handleRef = React.useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const handleButtonClick = () => {
+		if (inputRef.current && "showPicker" in inputRef.current) inputRef.current.showPicker();
+	};
+	const inputClasses = classNames("dsn-text-input", "dsn-time-input", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dsn-time-input-wrapper",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: handleRef,
+			type: "time",
+			className: inputClasses,
+			"aria-invalid": invalid || void 0,
+			disabled,
+			readOnly,
+			...props
+		}), !disabled && !readOnly && /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			size: "small",
+			iconOnly: true,
+			iconStart: /* @__PURE__ */ jsx(Icon, {
+				name: "clock",
+				"aria-hidden": true
+			}),
+			className: "dsn-time-input__button",
+			onClick: handleButtonClick,
+			children: "Tijdkiezer openen"
+		})]
+	});
+});
+TimeInput.displayName = "TimeInput";
+//#endregion
+export { TimeInput };
+
+//# sourceMappingURL=TimeInput2.mjs.map

package/dist/TimeInput/TimeInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './TimeInput.css';\n\nexport interface TimeInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/TimeInput/index.d.mts

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