@dsn-starter-kit/components-react 1.0.0

package/dist/SummaryList/index.js

@@ -0,0 +1,2 @@
+export { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions, } from './SummaryList';
+//# sourceMappingURL=index.js.map

package/dist/SummaryList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/Table/Table.css

@@ -0,0 +1,243 @@
+/* ===== Scroll-wrapper ===== */
+/*
+ * Scroll-affordance schaduw (Lea Verou techniek):
+ * - Dekkende overlagen (background-attachment: local) scrollen mee met de content
+ *   en verbergen de schaduwen wanneer je aan het begin of einde bent.
+ * - Schaduw-overlagen (background-attachment: scroll) blijven gefixeerd aan de viewport
+ *   van de wrapper en zijn altijd aanwezig.
+ * - Resultaat: schaduw is zichtbaar zodra er content is om naartoe te scrollen,
+ *   en verdwijnt automatisch als je de rand bereikt.
+ *
+ * ⚠️ Vereist dat --dsn-table-wrapper-background-color overeenkomt met de omringende
+ * pagina-achtergrond. Overschrijf dit token als de tabel op een gekleurde achtergrond staat.
+ * Overschrijf --dsn-table-wrapper-scroll-shadow-color als je een andere schaduwkleur wilt.
+ */
+
+.dsn-table-wrapper {
+  /* Lokale variabelen zodat de waarden maar één keer herhaald hoeven te worden. */
+  --_bg: var(
+    --dsn-table-wrapper-background-color,
+    var(--dsn-color-neutral-bg-document)
+  );
+  --_shadow: var(
+    --dsn-table-wrapper-scroll-shadow-color,
+    var(--dsn-color-shadow-scroll)
+  );
+
+  overflow-x: auto;
+  background-color: var(--_bg);
+  background-image:
+    /* Start-cover (local): verbergt de startschaduw als je helemaal links bent */
+    linear-gradient(to right, var(--_bg) 0%, transparent 100%),
+    /* Einde-cover (local): verbergt de eindschaduw als je helemaal rechts bent */
+    linear-gradient(to left, var(--_bg) 0%, transparent 100%),
+    /* Startschaduw (scroll): altijd aanwezig, gedekt door de start-cover zolang je links bent */
+    linear-gradient(to right, var(--_shadow) 0%, transparent 100%),
+    /* Eindschaduw (scroll): altijd aanwezig, gedekt door de einde-cover zolang je rechts bent */
+    linear-gradient(to left, var(--_shadow) 0%, transparent 100%);
+  background-repeat: no-repeat;
+  /* Cover (4rem) is breder dan de schaduw (2rem) zodat hij volledig dekt bij rust */
+  background-size:
+    4rem 100%,
+    4rem 100%,
+    2rem 100%,
+    2rem 100%;
+  background-position: left, right, left, right;
+  background-attachment: local, local, scroll, scroll;
+}
+
+/* ===== Tabel basis ===== */
+
+.dsn-table {
+  border-collapse: collapse;
+  inline-size: 100%;
+  font-size: inherit;
+}
+
+/* ===== Caption ===== */
+
+.dsn-table__caption {
+  caption-side: top;
+  text-align: start;
+  padding-block-end: var(--dsn-table-cell-padding-block-end);
+  color: var(--dsn-table-caption-color);
+  font-family: var(--dsn-table-caption-font-family);
+  font-size: var(--dsn-table-caption-font-size);
+  font-weight: var(--dsn-table-caption-font-weight);
+  line-height: var(--dsn-table-caption-line-height);
+}
+
+/* ===== Header (thead) ===== */
+
+.dsn-table thead {
+  background-color: var(--dsn-table-header-background-color);
+  color: var(--dsn-table-header-color);
+}
+
+.dsn-table thead tr {
+  border-block-end: var(--dsn-table-header-border-block-end-width) solid
+    var(--dsn-table-header-border-block-end-color);
+}
+
+.dsn-table thead th {
+  padding-block-start: var(--dsn-table-cell-padding-block-start);
+  padding-block-end: var(--dsn-table-cell-padding-block-end);
+  padding-inline-start: var(--dsn-table-cell-padding-inline-start);
+  padding-inline-end: var(--dsn-table-cell-padding-inline-end);
+  font-weight: var(--dsn-table-header-cell-font-weight);
+  text-align: start;
+  /* middle i.p.v. bottom: zorgt voor consistente uitlijning tussen
+   * kolomkoppen met én zonder sorteerknop */
+  vertical-align: middle;
+}
+
+/* ===== Body (tbody) ===== */
+
+.dsn-table tbody tr {
+  border-block-end: var(--dsn-table-row-border-block-end-width) solid
+    var(--dsn-table-row-border-block-end-color);
+}
+
+.dsn-table tbody td,
+.dsn-table tbody th {
+  padding-block-start: var(--dsn-table-cell-padding-block-start);
+  padding-block-end: var(--dsn-table-cell-padding-block-end);
+  padding-inline-start: var(--dsn-table-cell-padding-inline-start);
+  padding-inline-end: var(--dsn-table-cell-padding-inline-end);
+  text-align: start;
+  vertical-align: middle;
+}
+
+/* Rijkoppen (th scope="row") krijgen hetzelfde gewicht als kolomkoppen */
+.dsn-table tbody th {
+  font-weight: var(--dsn-table-header-cell-font-weight);
+}
+
+/* ===== Footer (tfoot) ===== */
+
+.dsn-table tfoot {
+  background-color: var(--dsn-table-footer-background-color);
+  color: var(--dsn-table-footer-color);
+}
+
+.dsn-table tfoot tr {
+  border-block-start: var(--dsn-table-footer-border-block-start-width) solid
+    var(--dsn-table-footer-border-block-start-color);
+}
+
+.dsn-table tfoot td,
+.dsn-table tfoot th {
+  padding-block-start: var(--dsn-table-cell-padding-block-start);
+  padding-block-end: var(--dsn-table-cell-padding-block-end);
+  padding-inline-start: var(--dsn-table-cell-padding-inline-start);
+  padding-inline-end: var(--dsn-table-cell-padding-inline-end);
+  font-weight: var(--dsn-table-footer-font-weight);
+  text-align: start;
+  vertical-align: middle;
+}
+
+/* ===== Kolomhoofd-inhoud (sorteerbaar) ===== */
+/*
+ * Flexbox-wrapper binnenin een sorteerbare <th>.
+ * Plaatst de kolomtekst links en de icon-only sorteerknop rechts naast elkaar.
+ *
+ * HTML-patroon:
+ * <th scope="col" aria-sort="ascending">
+ *   <span class="dsn-table__header-content">
+ *     Naam
+ *     <button
+ *       class="dsn-button dsn-button--size-small dsn-button--subtle dsn-button--icon-only dsn-table__sort-button"
+ *       type="button"
+ *       aria-label="Sorteer op Naam"
+ *     >
+ *       <svg class="dsn-icon dsn-table__sort-icon--none" aria-hidden="true">...</svg>
+ *       <svg class="dsn-icon dsn-table__sort-icon--ascending" aria-hidden="true">...</svg>
+ *       <svg class="dsn-icon dsn-table__sort-icon--descending" aria-hidden="true">...</svg>
+ *     </button>
+ *   </span>
+ * </th>
+ */
+
+.dsn-table__header-content {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-space-inline-sm);
+}
+
+/* In numerieke kolommen de hele header-content rechts uitlijnen,
+ * zodat de kolomtitel en het sorteerknopje uitlijnen met de data eronder. */
+.dsn-table .dsn-table__cell--numeric .dsn-table__header-content {
+  justify-content: flex-end;
+}
+
+/* ===== Sorteerknop ===== */
+/*
+ * Aanvullende klasse op dsn-button dsn-button--size-small dsn-button--subtle dsn-button--icon-only.
+ * Voorkomt dat de knop inkrimpt in smalle kolommen.
+ */
+
+.dsn-table__sort-button {
+  flex-shrink: 0;
+}
+
+/* ===== Sorteericoon — drie staten via aria-sort op de th ===== */
+
+.dsn-table__sort-icon--none,
+.dsn-table__sort-icon--ascending,
+.dsn-table__sort-icon--descending {
+  display: none;
+}
+
+[aria-sort='none'] .dsn-table__sort-icon--none {
+  display: inline-flex;
+}
+
+[aria-sort='ascending'] .dsn-table__sort-icon--ascending {
+  display: inline-flex;
+}
+
+[aria-sort='descending'] .dsn-table__sort-icon--descending {
+  display: inline-flex;
+}
+
+/* ===== Numerieke cellen ===== */
+/*
+ * Gebruik op <th> en <td> voor kolommen met cijfers of geldbedragen.
+ * Tabular-nums zorgt voor consistente cijferbreedte zodat komma's en
+ * decimalen netjes uitlijnen bij vergelijking.
+ *
+ * ⚠️ Dubbele klasse-selector (.dsn-table .dsn-table__cell--numeric) is nodig
+ * om de text-align: start op .dsn-table tbody td (specificiteit 0,1,2) te
+ * overwinnen. Deze selector heeft specificiteit 0,2,0 en wint daarmee.
+ */
+
+.dsn-table .dsn-table__cell--numeric {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ===== Inline-componenten in tabelcellen ===== */
+/*
+ * Inline-flex elementen (zoals .dsn-checkbox) gebruiken baseline-uitlijning
+ * binnen de inline formatting context van een tabelcel. Dit veroorzaakt een
+ * kleine verticale offset ondanks vertical-align: middle op de <td>/<th>.
+ * Door vertical-align: middle ook op het element zelf te zetten, wordt het
+ * uitgelijnd op de helft van de x-hoogte van de cel — wat visueel klopt.
+ */
+
+.dsn-table td .dsn-checkbox,
+.dsn-table th .dsn-checkbox {
+  vertical-align: middle;
+}
+
+/* ===== Selecteerbare rijen ===== */
+/*
+ * Zet aria-selected="true" op <tr> om een rij als geselecteerd te markeren.
+ * Gebruik in combinatie met een checkbox in de eerste kolom.
+ */
+
+.dsn-table tbody tr[aria-selected='true'] {
+  background-color: var(--dsn-color-neutral-bg-active);
+  color: var(--dsn-color-neutral-color-active);
+}
+

package/dist/Table/Table.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import './Table.css';
+export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
+    /**
+     * Zichtbaar bijschrift boven de tabel.
+     * Dient ook als toegankelijke naam van de tabel voor schermlezers.
+     */
+    caption: string;
+    /**
+     * Optionele ID voor de caption.
+     * Standaard auto-gegenereerd via `useId()`.
+     * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.
+     */
+    captionId?: string;
+    /**
+     * Wikkelt de tabel in een scroll-container (`role="region"`, `tabIndex={0}`, `aria-labelledby`).
+     * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.
+     */
+    scrollable?: boolean;
+};
+/**
+ * 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>
+ */
+export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    /**
+     * Zichtbaar bijschrift boven de tabel.
+     * Dient ook als toegankelijke naam van de tabel voor schermlezers.
+     */
+    caption: string;
+    /**
+     * Optionele ID voor de caption.
+     * Standaard auto-gegenereerd via `useId()`.
+     * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.
+     */
+    captionId?: string;
+    /**
+     * Wikkelt de tabel in een scroll-container (`role="region"`, `tabIndex={0}`, `aria-labelledby`).
+     * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.
+     */
+    scrollable?: boolean;
+} & React.RefAttributes<HTMLTableElement>>;
+//# sourceMappingURL=Table.d.ts.map

package/dist/Table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG;IAChE;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK;IAxChB;;;OAGG;aACM,MAAM;IACf;;;;OAIG;gBACS,MAAM;IAClB;;;OAGG;iBACU,OAAO;0CAoErB,CAAC"}

package/dist/Table/Table.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Table.css';
+/**
+ * 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>
+ */
+export 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 = (_jsxs("table", { ref: ref, className: classNames('dsn-table', className), ...props, children: [_jsx("caption", { id: captionId, className: "dsn-table__caption", children: caption }), children] }));
+    if (scrollable) {
+        return (_jsx("div", { className: "dsn-table-wrapper", role: "region", "aria-labelledby": captionId, tabIndex: 0, children: table }));
+    }
+    return table;
+});
+Table.displayName = 'Table';
+//# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,aAAa,CAAC;AAqBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,SAAS,GAAG,aAAa,IAAI,qBAAqB,MAAM,EAAE,CAAC;IAEjE,MAAM,KAAK,GAAG,CACZ,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,KACzC,KAAK,aAET,kBAAS,EAAE,EAAE,SAAS,EAAE,SAAS,EAAC,oBAAoB,YACnD,OAAO,GACA,EACT,QAAQ,IACH,CACT,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,cACE,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,QAAQ,qBACI,SAAS,EAC1B,QAAQ,EAAE,CAAC,YAEV,KAAK,GACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Table/index.d.ts

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

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

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

package/dist/Table/index.js

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

package/dist/Table/index.js.map

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

package/dist/TelephoneInput/TelephoneInput.css

@@ -0,0 +1,4 @@
+/**
+ * TelephoneInput Component Styles
+ * Uses dsn-text-input styles from TextInput.css — no additional styles needed
+ */

package/dist/TelephoneInput/TelephoneInput.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+export 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" />
+ * ```
+ */
+export declare const TelephoneInput: React.ForwardRefExoticComponent<TelephoneInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TelephoneInput.d.ts.map

package/dist/TelephoneInput/TelephoneInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelephoneInput.d.ts","sourceRoot":"","sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,8FAqBzB,CAAC"}

package/dist/TelephoneInput/TelephoneInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+/**
+ * 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" />
+ * ```
+ */
+export const TelephoneInput = React.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
+    const classes = classNames('dsn-text-input', width && `dsn-text-input--width-${width}`, className);
+    return (_jsx("input", { ref: ref, type: "tel", inputMode: "tel", className: classes, autoComplete: autoComplete || 'tel', "aria-invalid": invalid || undefined, ...props }));
+});
+TelephoneInput.displayName = 'TelephoneInput';
+//# sourceMappingURL=TelephoneInput.js.map

package/dist/TelephoneInput/TelephoneInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelephoneInput.js","sourceRoot":"","sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAwBpC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,OAAO,GAAG,UAAU,CACxB,gBAAgB,EAChB,KAAK,IAAI,yBAAyB,KAAK,EAAE,EACzC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,SAAS,EAAC,KAAK,EACf,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,YAAY,IAAI,KAAK,kBACrB,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/TelephoneInput/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TelephoneInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/TelephoneInput/index.js

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

package/dist/TelephoneInput/index.js.map

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

package/dist/TextArea/TextArea.css

@@ -0,0 +1,126 @@
+/**
+ * TextArea Component Styles for React
+ * Re-exports the base TextArea styles from components-html
+ */
+
+/**
+ * Text Area Component
+ * Multi-line text input with support for various states
+ *
+ * Usage:
+ * <textarea class="dsn-text-area" rows="4"></textarea>
+ */
+
+.dsn-text-area {
+  /* Typography */
+  font-family: var(--dsn-text-area-font-family);
+  font-size: var(--dsn-text-area-font-size);
+  font-weight: var(--dsn-text-area-font-weight);
+  line-height: var(--dsn-text-area-line-height);
+
+  /* Colors */
+  color: var(--dsn-text-area-color);
+  background-color: var(--dsn-text-area-background-color);
+
+  /* Border */
+  border: var(--dsn-text-area-border-width) solid
+    var(--dsn-text-area-border-color);
+  border-radius: var(--dsn-text-area-border-radius);
+
+  /* Spacing */
+  padding-block-start: var(--dsn-text-area-padding-block-start);
+  padding-block-end: var(--dsn-text-area-padding-block-end);
+  padding-inline-start: var(--dsn-text-area-padding-inline-start);
+  padding-inline-end: var(--dsn-text-area-padding-inline-end);
+
+  /* Sizing */
+  min-block-size: var(--dsn-text-area-min-block-size);
+  min-inline-size: var(--dsn-text-area-min-inline-size);
+  inline-size: 100%;
+  max-inline-size: var(--dsn-form-control-max-inline-size);
+
+  /* Display */
+  display: block;
+  box-sizing: border-box;
+
+  /* Resize behavior */
+  resize: var(--dsn-text-area-resize);
+
+  /* Transitions */
+  transition-property: border-color, box-shadow, background-color;
+  transition-duration: var(--dsn-transition-duration-normal);
+  transition-timing-function: var(--dsn-transition-easing-default);
+}
+
+/* Placeholder */
+.dsn-text-area::placeholder {
+  color: var(--dsn-text-area-placeholder-color);
+  opacity: 1;
+}
+
+/* Hover state */
+.dsn-text-area:hover:not(:disabled):not(:read-only) {
+  box-shadow: inset 0 0 0 var(--dsn-text-area-hover-box-shadow-spread)
+    var(--dsn-text-area-hover-box-shadow-color);
+}
+
+/* Focus state */
+.dsn-text-area:focus {
+  outline: none;
+  background-color: var(--dsn-text-area-focus-background-color);
+  border-color: var(--dsn-text-area-focus-border-color);
+  box-shadow: inset 0 0 0 var(--dsn-text-area-focus-box-shadow-spread)
+    var(--dsn-text-area-focus-box-shadow-color);
+}
+
+/* Disabled state */
+.dsn-text-area:disabled {
+  color: var(--dsn-text-area-disabled-color);
+  background-color: var(--dsn-text-area-disabled-background-color);
+  border-color: var(--dsn-text-area-disabled-border-color);
+  cursor: not-allowed;
+  resize: none;
+}
+
+/* Read-only state */
+.dsn-text-area:read-only {
+  color: var(--dsn-text-area-read-only-color);
+  background-color: var(--dsn-text-area-read-only-background-color);
+  border-color: var(--dsn-text-area-read-only-border-color);
+  cursor: default;
+}
+
+/* Invalid state (using aria-invalid or :invalid) */
+.dsn-text-area:invalid,
+.dsn-text-area[aria-invalid='true'] {
+  background-color: var(--dsn-text-area-invalid-background-color);
+  border-color: var(--dsn-text-area-invalid-border-color);
+  box-shadow: inset 0 0 0 var(--dsn-text-area-invalid-box-shadow-spread)
+    var(--dsn-text-area-invalid-box-shadow-color);
+}
+
+/* Width variants */
+.dsn-text-area--width-xs {
+  max-inline-size: var(--dsn-form-control-width-xs);
+}
+
+.dsn-text-area--width-sm {
+  max-inline-size: var(--dsn-form-control-width-sm);
+}
+
+.dsn-text-area--width-md {
+  max-inline-size: var(--dsn-form-control-width-md);
+}
+
+.dsn-text-area--width-lg {
+  max-inline-size: var(--dsn-form-control-width-lg);
+}
+
+.dsn-text-area--width-xl {
+  max-inline-size: var(--dsn-form-control-width-xl);
+}
+
+.dsn-text-area--width-full {
+  max-inline-size: var(--dsn-form-control-width-full);
+}
+

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import './TextArea.css';
+export 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} />
+ * ```
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/TextArea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACtF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,QAAQ,2FAkBpB,CAAC"}