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

package/dist/TableOfContents/TableOfContents.css

@@ -1,75 +0,0 @@
-/**
- * TableOfContents component styles for React
- * Re-exports the base TableOfContents styles from components-html
- */
-
-/**
- * Table Of Contents Component
- * Inhoudsopgave met ankerlinks naar de secties op de huidige pagina.
- * Alleen H2-secties horen hierin opgenomen te worden.
- *
- * Twee appearances:
- * - Default ("framed"): accent-1 achtergrond + linkerborder, heading als heading-3.
- *   Bedoeld voor gebruik inline in de content-flow (bijv. onder de lead paragraph).
- * - `dsn-table-of-contents--plain`: geen kader, heading als heading-5.
- *   Bedoeld voor gebruik in een losstaande kolom naast de hoofdinhoud.
- *
- * Usage:
- * <!-- Framed (default) -->
- * <nav class="dsn-table-of-contents" aria-labelledby="toc-heading">
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-table-of-contents__heading" id="toc-heading">Op deze pagina</h2>
- *   <ul class="dsn-unordered-list">
- *     <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
- *   </ul>
- * </nav>
- *
- * <!-- Plain -->
- * <nav class="dsn-table-of-contents dsn-table-of-contents--plain" aria-labelledby="toc-heading-plain">
- *   <h2 class="dsn-heading dsn-heading--heading-5 dsn-table-of-contents__heading" id="toc-heading-plain">Op deze pagina</h2>
- *   <ul class="dsn-unordered-list">
- *     <li><a class="dsn-link" href="#sectie-1">Sectie 1</a></li>
- *   </ul>
- * </nav>
- */
-
-.dsn-table-of-contents {
-  border-inline-start: var(--dsn-table-of-contents-border-inline-start-width)
-    solid var(--dsn-table-of-contents-border-inline-start-color);
-  background-color: var(--dsn-table-of-contents-background-color);
-  padding-block: var(--dsn-table-of-contents-padding-block);
-  padding-inline-start: var(--dsn-table-of-contents-padding-inline-start);
-  padding-inline-end: var(--dsn-table-of-contents-padding-inline-end);
-}
-
-.dsn-table-of-contents__heading {
-  margin-block-end: var(--dsn-table-of-contents-heading-gap);
-}
-
-/* =============================================================================
-   Plain appearance — geen kader, voor gebruik in een losstaande kolom
-   ============================================================================= */
-
-.dsn-table-of-contents--plain {
-  border-inline-start: none;
-  background-color: transparent;
-  padding-block: var(--dsn-table-of-contents-plain-padding-block);
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-  /* Ankerlinks: omgekeerd onderstrepingsgedrag t.o.v. de standaard Link —
-     rust zonder onderstreping, hover mét, zodat de kolom rustiger oogt. */
-  --dsn-link-text-decoration-line: var(
-    --dsn-table-of-contents-plain-link-text-decoration-line
-  );
-  --dsn-link-hover-text-decoration-line: var(
-    --dsn-table-of-contents-plain-link-hover-text-decoration-line
-  );
-}
-
-.dsn-table-of-contents--plain .dsn-unordered-list > li {
-  margin-block-end: var(--dsn-table-of-contents-plain-list-gap);
-}
-
-.dsn-table-of-contents--plain .dsn-unordered-list > li:last-child {
-  margin-block-end: 0;
-}
-

package/dist/TableOfContents/TableOfContents.d.ts

@@ -1,61 +0,0 @@
-import React from 'react';
-import { type HeadingLevel } from '../Heading';
-import './TableOfContents.css';
-export type TableOfContentsAppearance = 'framed' | 'plain';
-export interface TableOfContentsItem {
-    /**
-     * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina
-     */
-    id: string;
-    /**
-     * Zichtbare linktekst
-     */
-    label: string;
-}
-export 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} />
- * ```
- */
-export declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=TableOfContents.d.ts.map

package/dist/TableOfContents/TableOfContents.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../src/TableOfContents/TableOfContents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,0FAgD3B,CAAC"}

package/dist/TableOfContents/TableOfContents.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId } from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import { Heading } from '../Heading';
-import { Link } from '../Link';
-import { UnorderedList } from '../UnorderedList';
-import './TableOfContents.css';
-/**
- * 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} />
- * ```
- */
-export 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 (_jsxs("nav", { ref: ref, className: classes, "aria-labelledby": headingId, ...props, children: [_jsx(Heading, { level: headingLevel, appearance: appearance === 'plain' ? 'heading-5' : 'heading-3', className: "dsn-table-of-contents__heading", id: headingId, children: heading }), _jsx(UnorderedList, { children: items.map((item) => (_jsx("li", { children: _jsx(Link, { href: `#${item.id}`, children: item.label }) }, item.id))) })] }));
-});
-TableOfContents.displayName = 'TableOfContents';
-//# sourceMappingURL=TableOfContents.js.map

package/dist/TableOfContents/TableOfContents.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TableOfContents.js","sourceRoot":"","sources":["../../src/TableOfContents/TableOfContents.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAqB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAgD/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAI7C,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,YAAY,GAAG,CAAC,EAChB,UAAU,GAAG,QAAQ,EACrB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,MAAM,OAAO,GAAG,UAAU,CACxB,uBAAuB,EACvB,UAAU,KAAK,OAAO,IAAI,8BAA8B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eACE,GAAG,EAAE,GAA6B,EAClC,SAAS,EAAE,OAAO,qBACD,SAAS,KACtB,KAAK,aAET,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC9D,SAAS,EAAC,gCAAgC,EAC1C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,EACV,KAAC,aAAa,cACX,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,uBACE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,YAAG,IAAI,CAAC,KAAK,GAAQ,IADvC,IAAI,CAAC,EAAE,CAEX,CACN,CAAC,GACY,IACZ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/TableOfContents/index.d.ts

@@ -1,3 +0,0 @@
-export { TableOfContents } from './TableOfContents';
-export type { TableOfContentsProps, TableOfContentsAppearance, TableOfContentsItem, } from './TableOfContents';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TableOfContents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC"}

package/dist/TableOfContents/index.js

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

package/dist/TableOfContents/index.js.map

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

package/dist/TelephoneInput/TelephoneInput.css

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

package/dist/TelephoneInput/TelephoneInput.d.ts

@@ -1,38 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,27 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/TelephoneInput/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,126 +0,0 @@
-/**
- * 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

@@ -1,44 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}

package/dist/TextArea/TextArea.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './TextArea.css';
-/**
- * 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 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 (_jsx("textarea", { ref: ref, className: classes, rows: rows, "aria-invalid": invalid || undefined, ...props }));
-});
-TextArea.displayName = 'TextArea';
-//# sourceMappingURL=TextArea.js.map

package/dist/TextArea/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,gBAAgB,CAAC;AAqBxB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzD,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,KAAK,IAAI,wBAAwB,KAAK,EAAE,EACxC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,IAAI,kBACI,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/TextArea/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/TextArea/index.js

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

package/dist/TextArea/index.js.map

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

package/dist/TextInput/TextInput.css

@@ -1,122 +0,0 @@
-/**
- * TextInput Component Styles for React
- * Re-exports the base TextInput styles from components-html
- */
-
-/**
- * Text Input Component
- * Single-line text input with support for various states
- *
- * Usage:
- * <input type="text" class="dsn-text-input" />
- */
-
-.dsn-text-input {
-  /* Typography */
-  font-family: var(--dsn-text-input-font-family);
-  font-size: var(--dsn-text-input-font-size);
-  font-weight: var(--dsn-text-input-font-weight);
-  line-height: var(--dsn-text-input-line-height);
-
-  /* Colors */
-  color: var(--dsn-text-input-color);
-  background-color: var(--dsn-text-input-background-color);
-
-  /* Border */
-  border: var(--dsn-text-input-border-width) solid
-    var(--dsn-text-input-border-color);
-  border-radius: var(--dsn-text-input-border-radius);
-
-  /* Spacing */
-  padding-block-start: var(--dsn-text-input-padding-block-start);
-  padding-block-end: var(--dsn-text-input-padding-block-end);
-  padding-inline-start: var(--dsn-text-input-padding-inline-start);
-  padding-inline-end: var(--dsn-text-input-padding-inline-end);
-
-  /* Sizing */
-  min-block-size: var(--dsn-text-input-min-block-size);
-  min-inline-size: var(--dsn-text-input-min-inline-size);
-  inline-size: 100%;
-  max-inline-size: var(--dsn-form-control-max-inline-size);
-
-  /* Display */
-  display: block;
-  box-sizing: border-box;
-
-  /* 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-input::placeholder {
-  color: var(--dsn-text-input-placeholder-color);
-  opacity: 1;
-}
-
-/* Hover state */
-.dsn-text-input:hover:not(:disabled):not(:read-only) {
-  box-shadow: inset 0 0 0 var(--dsn-text-input-hover-box-shadow-spread)
-    var(--dsn-text-input-hover-box-shadow-color);
-}
-
-/* Focus state */
-.dsn-text-input:focus {
-  outline: none;
-  background-color: var(--dsn-text-input-focus-background-color);
-  border-color: var(--dsn-text-input-focus-border-color);
-  box-shadow: inset 0 0 0 var(--dsn-text-input-focus-box-shadow-spread)
-    var(--dsn-text-input-focus-box-shadow-color);
-}
-
-/* Disabled state */
-.dsn-text-input:disabled {
-  color: var(--dsn-text-input-disabled-color);
-  background-color: var(--dsn-text-input-disabled-background-color);
-  border-color: var(--dsn-text-input-disabled-border-color);
-  cursor: not-allowed;
-}
-
-/* Read-only state */
-.dsn-text-input:read-only {
-  color: var(--dsn-text-input-read-only-color);
-  background-color: var(--dsn-text-input-read-only-background-color);
-  border-color: var(--dsn-text-input-read-only-border-color);
-  cursor: default;
-}
-
-/* Invalid state (using aria-invalid or :invalid) */
-.dsn-text-input:invalid,
-.dsn-text-input[aria-invalid='true'] {
-  background-color: var(--dsn-text-input-invalid-background-color);
-  border-color: var(--dsn-text-input-invalid-border-color);
-  box-shadow: inset 0 0 0 var(--dsn-text-input-invalid-box-shadow-spread)
-    var(--dsn-text-input-invalid-box-shadow-color);
-}
-
-/* Width variants */
-.dsn-text-input--width-xs {
-  max-inline-size: var(--dsn-form-control-width-xs);
-}
-
-.dsn-text-input--width-sm {
-  max-inline-size: var(--dsn-form-control-width-sm);
-}
-
-.dsn-text-input--width-md {
-  max-inline-size: var(--dsn-form-control-width-md);
-}
-
-.dsn-text-input--width-lg {
-  max-inline-size: var(--dsn-form-control-width-lg);
-}
-
-.dsn-text-input--width-xl {
-  max-inline-size: var(--dsn-form-control-width-xl);
-}
-
-.dsn-text-input--width-full {
-  max-inline-size: var(--dsn-form-control-width-full);
-}
-