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

package/dist/Drawer/Drawer.css

@@ -1,258 +0,0 @@
-/* ===== Drawer ===== */
-
-/*
- * dsn-drawer — Zijpaneel dat vanuit links of rechts de viewport inschuift
- *
- * Gebaseerd op het native <dialog> element.
- * Modaal (modal prop): openen via .showModal() — natieve focus-trap + ::backdrop.
- * Non-modaal:          openen via .show()      — achtergrond blijft interactief.
- *
- * HTML-structuur:
- *
- * <dialog class="dsn-drawer dsn-drawer--side-right" aria-labelledby="drawer-title">
- *   <div class="dsn-drawer__header">
- *     <h2 class="dsn-drawer-heading" id="drawer-title">Titel</h2>
- *     <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only">
- *       <svg class="dsn-icon" aria-hidden="true"><!-- x --></svg>
- *       <span class="dsn-button__label">Sluiten</span>
- *     </button>
- *   </div>
- *   <div class="dsn-drawer__body">
- *     <!-- inhoud -->
- *   </div>
- *   <div class="dsn-drawer__footer">
- *     <div class="dsn-action-group">
- *       <!-- knoppen -->
- *     </div>
- *   </div>
- * </dialog>
- */
-
-.dsn-drawer {
-  /* Reset native <dialog> styling */
-  border: none;
-  box-shadow: var(--dsn-drawer-box-shadow);
-  background: var(--dsn-drawer-background-color);
-  padding: 0;
-
-  /* Grootte */
-  inline-size: min(
-    var(--dsn-drawer-max-width),
-    calc(100svw - var(--dsn-drawer-min-gap))
-  );
-  block-size: 100svh;
-  max-block-size: 100svh;
-
-  /* Positionering — override UA's auto-centrering voor zowel modal als non-modal */
-  position: fixed;
-  inset-block: 0;
-  margin-block: 0;
-
-  /* Altijd flex-direction column, ook tijdens sluitanimatie */
-  flex-direction: column;
-
-  /* Animatietransitie (ook voor sluitanimatie) */
-  opacity: 1;
-  transform: translateX(0);
-  transition:
-    opacity var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    transform var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    display var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default) allow-discrete,
-    overlay var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default) allow-discrete;
-}
-
-/*
- * Flexbox layout alleen bij open staat.
- * Gebruik [open] zodat de UA-stylesheet's display:none van kracht blijft
- * wanneer de drawer gesloten is — anders overschrijft display:flex de UA.
- */
-.dsn-drawer[open] {
-  display: flex;
-}
-
-/* Animatie uitschakelen bij prefers-reduced-motion */
-@media (prefers-reduced-motion: reduce) {
-  .dsn-drawer {
-    transition: none;
-  }
-}
-
-/* ===== Side: Right (standaard) ===== */
-
-.dsn-drawer--side-right {
-  right: 0;
-  left: auto;
-
-  /* Alleen de rand aan de kant van de pagina (links) */
-  border-inline-start: var(--dsn-drawer-border-width) solid
-    var(--dsn-drawer-border-color);
-}
-
-/* Openingsanimatie rechts: start buiten beeld rechts */
-@starting-style {
-  .dsn-drawer--side-right[open] {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-/* Native backdrop (alleen bij .showModal()) */
-.dsn-drawer--side-right::backdrop {
-  background: var(--dsn-backdrop-background, rgba(0, 0, 0, 0.5));
-  backdrop-filter: var(--dsn-backdrop-blur, blur(2px));
-  opacity: 1;
-  transition:
-    opacity var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    display var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default) allow-discrete,
-    overlay var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default) allow-discrete;
-}
-
-@starting-style {
-  .dsn-drawer--side-right[open]::backdrop {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dsn-drawer--side-right::backdrop {
-    transition: none;
-  }
-}
-
-/* ===== Side: Left ===== */
-
-.dsn-drawer--side-left {
-  left: 0;
-  right: auto;
-
-  /* Alleen de rand aan de kant van de pagina (rechts) */
-  border-inline-end: var(--dsn-drawer-border-width) solid
-    var(--dsn-drawer-border-color);
-}
-
-/* Openingsanimatie links: start buiten beeld links */
-@starting-style {
-  .dsn-drawer--side-left[open] {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-/* Native backdrop (alleen bij .showModal()) */
-.dsn-drawer--side-left::backdrop {
-  background: var(--dsn-backdrop-background, rgba(0, 0, 0, 0.5));
-  backdrop-filter: var(--dsn-backdrop-blur, blur(2px));
-  opacity: 1;
-  transition:
-    opacity var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    display var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default) allow-discrete,
-    overlay var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default) allow-discrete;
-}
-
-@starting-style {
-  .dsn-drawer--side-left[open]::backdrop {
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dsn-drawer--side-left::backdrop {
-    transition: none;
-  }
-}
-
-/* ===== Header ===== */
-
-.dsn-drawer__header {
-  display: flex;
-  align-items: center;
-  gap: var(--dsn-space-inline-xl);
-  flex-shrink: 0;
-
-  padding-block-start: var(--dsn-drawer-header-padding-block-start);
-  padding-block-end: var(--dsn-drawer-header-padding-block-end);
-  padding-inline: var(--dsn-drawer-header-padding-inline);
-
-  /* Scheidingslijn onder de header */
-  border-block-end: var(--dsn-drawer-border-width) solid
-    var(--dsn-drawer-border-color);
-}
-
-/* ===== Heading ===== */
-
-.dsn-drawer-heading {
-  flex: 1;
-  margin: 0;
-
-  font-family: var(--dsn-drawer-heading-font-family);
-  font-weight: var(--dsn-drawer-heading-font-weight);
-  font-size: var(--dsn-drawer-heading-font-size);
-  line-height: var(--dsn-drawer-heading-line-height);
-  color: var(--dsn-drawer-heading-color);
-}
-
-/* ===== Body met scroll-affordance ===== */
-/*
- * Scroll-affordance schaduw (Lea Verou techniek — verticale variant):
- * - 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.
- * - Resultaat: schaduw is zichtbaar zodra er content is om naartoe te scrollen.
- *
- * ⚠️ Vereist dat de achtergrondkleur overeenkomt met de drawer-achtergrond.
- */
-
-.dsn-drawer__body {
-  --_bg: var(--dsn-drawer-background-color);
-  --_shadow: var(--dsn-color-shadow-scroll, rgba(0, 0, 0, 0.12));
-
-  flex: 1;
-  overflow-y: auto;
-
-  padding-block: var(--dsn-drawer-body-padding-block);
-  padding-inline: var(--dsn-drawer-body-padding-inline);
-
-  background-color: var(--_bg);
-  background-image:
-    /* Top-cover (local): verbergt de bovenschaduw als je helemaal boven bent */
-    linear-gradient(to bottom, var(--_bg) 0%, transparent 100%),
-    /* Onder-cover (local): verbergt de onderschaduw als je helemaal onder bent */
-    linear-gradient(to top, var(--_bg) 0%, transparent 100%),
-    /* Bovenschaduw (scroll): altijd aanwezig */
-    linear-gradient(to bottom, var(--_shadow) 0%, transparent 100%),
-    /* Onderschaduw (scroll): altijd aanwezig */
-    linear-gradient(to top, var(--_shadow) 0%, transparent 100%);
-  background-repeat: no-repeat;
-  background-size:
-    100% 4rem,
-    100% 4rem,
-    100% 2rem,
-    100% 2rem;
-  background-position: top, bottom, top, bottom;
-  background-attachment: local, local, scroll, scroll;
-}
-
-/* ===== Footer ===== */
-
-.dsn-drawer__footer {
-  flex-shrink: 0;
-
-  padding-block-start: var(--dsn-drawer-footer-padding-block-start);
-  padding-block-end: var(--dsn-drawer-footer-padding-block-end);
-  padding-inline: var(--dsn-drawer-footer-padding-inline);
-
-  /* Scheidingslijn boven de footer */
-  border-block-start: var(--dsn-drawer-border-width) solid
-    var(--dsn-drawer-border-color);
-}
-

package/dist/Drawer/Drawer.d.ts

@@ -1,109 +0,0 @@
-import React from 'react';
-import './Drawer.css';
-export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
-    /**
-     * Bepaalt of het zijpaneel getoond wordt.
-     */
-    isOpen: boolean;
-    /**
-     * Callback die wordt aangeroepen wanneer het zijpaneel sluit
-     * (sluitknop, Escape-toets).
-     */
-    onClose?: () => void;
-    /**
-     * Modaal of non-modaal gedrag.
-     * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,
-     *   natieve focus-trap, Escape sluit via `cancel`-event.
-     * - `false`: opent via `.show()` — achtergrond blijft interactief,
-     *   Escape sluit via `keydown`-listener.
-     * @default true
-     */
-    modal?: boolean;
-    /**
-     * De kant van de viewport vanwaar het zijpaneel inschuift.
-     * @default "right"
-     */
-    side?: 'right' | 'left';
-    /**
-     * De subcomponenten van het zijpaneel:
-     * `DrawerHeader`, `DrawerBody`, `DrawerFooter`
-     */
-    children?: React.ReactNode;
-}
-/**
- * Drawer component
- * Zijpaneel dat vanuit links of rechts de viewport inschuift.
- *
- * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond
- * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina
- * nodig heeft voor context.
- *
- * @example
- * ```tsx
- * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
- *   <DrawerHeader>
- *     <DrawerHeading>Filteropties</DrawerHeading>
- *   </DrawerHeader>
- *   <DrawerBody>
- *     <Paragraph>Inhoud van het zijpaneel</Paragraph>
- *   </DrawerBody>
- *   <DrawerFooter>
- *     <ActionGroup>
- *       <Button variant="strong" onClick={() => setIsOpen(false)}>Toepassen</Button>
- *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
- *     </ActionGroup>
- *   </DrawerFooter>
- * </Drawer>
- * ```
- */
-export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDialogElement>>;
-export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Inhoud van de header — doorgaans een `DrawerHeading`
-     */
-    children?: React.ReactNode;
-}
-/**
- * DrawerHeader
- * De headerstrook van het zijpaneel met heading en sluitknop.
- */
-export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    /**
-     * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.
-     * @default 2
-     */
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * De zichtbare heading-tekst
-     */
-    children?: React.ReactNode;
-}
-/**
- * DrawerHeading
- * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
- */
-export declare const DrawerHeading: React.ForwardRefExoticComponent<DrawerHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
-export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * De hoofdinhoud van het zijpaneel
-     */
-    children?: React.ReactNode;
-}
-/**
- * DrawerBody
- * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
- */
-export declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * De acties van het zijpaneel — doorgaans een `ActionGroup` met knoppen
-     */
-    children?: React.ReactNode;
-}
-/**
- * DrawerFooter
- * De voettekst van het zijpaneel met actieknoppen.
- */
-export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer/Drawer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,cAAc,CAAC;AAmBtB,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,UAAU,CACX;IACC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,uFA2ElB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,0FAuBxB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAClF;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,+FAiBxB,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,wFAYtB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,0FAYxB,CAAC"}

package/dist/Drawer/Drawer.js

@@ -1,115 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import { Button } from '../Button';
-import { Icon } from '../Icon';
-import './Drawer.css';
-const DrawerContext = React.createContext({
-    headingId: '',
-});
-/**
- * Drawer component
- * Zijpaneel dat vanuit links of rechts de viewport inschuift.
- *
- * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond
- * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina
- * nodig heeft voor context.
- *
- * @example
- * ```tsx
- * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
- *   <DrawerHeader>
- *     <DrawerHeading>Filteropties</DrawerHeading>
- *   </DrawerHeader>
- *   <DrawerBody>
- *     <Paragraph>Inhoud van het zijpaneel</Paragraph>
- *   </DrawerBody>
- *   <DrawerFooter>
- *     <ActionGroup>
- *       <Button variant="strong" onClick={() => setIsOpen(false)}>Toepassen</Button>
- *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
- *     </ActionGroup>
- *   </DrawerFooter>
- * </Drawer>
- * ```
- */
-export const Drawer = React.forwardRef(({ className, isOpen, onClose, modal = true, side = 'right', children, ...props }, ref) => {
-    const internalRef = React.useRef(null);
-    const dialogRef = ref ?? internalRef;
-    const headingId = React.useId();
-    React.useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog)
-            return;
-        if (isOpen && !dialog.open) {
-            if (modal) {
-                dialog.showModal();
-            }
-            else {
-                dialog.show();
-            }
-        }
-        else if (!isOpen && dialog.open) {
-            dialog.close();
-        }
-    }, [isOpen, modal, dialogRef]);
-    // Non-modaal: handmatige Escape-afhandeling via keydown
-    React.useEffect(() => {
-        if (modal)
-            return;
-        const dialog = dialogRef.current;
-        if (!dialog || !isOpen)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                onClose?.();
-            }
-        };
-        dialog.addEventListener('keydown', handleKeyDown);
-        return () => dialog.removeEventListener('keydown', handleKeyDown);
-    }, [modal, isOpen, onClose, dialogRef]);
-    // Modaal: native cancel-event (Escape via browser)
-    const handleCancel = (event) => {
-        event.preventDefault();
-        onClose?.();
-    };
-    const classes = classNames('dsn-drawer', side === 'left' ? 'dsn-drawer--side-left' : 'dsn-drawer--side-right', className);
-    return (_jsx(DrawerContext.Provider, { value: { headingId, onClose }, children: _jsx("dialog", { ref: dialogRef, className: classes, "aria-labelledby": headingId, onCancel: handleCancel, ...props, children: children }) }));
-});
-Drawer.displayName = 'Drawer';
-/**
- * DrawerHeader
- * De headerstrook van het zijpaneel met heading en sluitknop.
- */
-export const DrawerHeader = React.forwardRef(({ className, children, ...props }, ref) => {
-    const { onClose } = React.useContext(DrawerContext);
-    return (_jsxs("div", { ref: ref, className: classNames('dsn-drawer__header', className), ...props, children: [children, _jsx(Button, { variant: "subtle", size: "small", iconOnly: true, onClick: onClose, iconStart: _jsx(Icon, { name: "x", "aria-hidden": true }), children: "Sluiten" })] }));
-});
-DrawerHeader.displayName = 'DrawerHeader';
-/**
- * DrawerHeading
- * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
- */
-export const DrawerHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-    const { headingId } = React.useContext(DrawerContext);
-    const Tag = `h${level}`;
-    return (_jsx(Tag, { ref: ref, id: headingId, className: classNames('dsn-drawer-heading', className), ...props, children: children }));
-});
-DrawerHeading.displayName = 'DrawerHeading';
-/**
- * DrawerBody
- * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
- */
-export const DrawerBody = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: classNames('dsn-drawer__body', className), ...props, children: children }));
-});
-DrawerBody.displayName = 'DrawerBody';
-/**
- * DrawerFooter
- * De voettekst van het zijpaneel met actieknoppen.
- */
-export const DrawerFooter = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: classNames('dsn-drawer__footer', className), ...props, children: children }));
-});
-DrawerFooter.displayName = 'DrawerFooter';
-//# sourceMappingURL=Drawer.js.map

package/dist/Drawer/Drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/Drawer/index.d.ts

@@ -1,3 +0,0 @@
-export { Drawer, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, } from './Drawer';
-export type { DrawerProps, DrawerHeaderProps, DrawerHeadingProps, DrawerBodyProps, DrawerFooterProps, } from './Drawer';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAClB,MAAM,UAAU,CAAC"}

package/dist/Drawer/index.js

@@ -1,2 +0,0 @@
-export { Drawer, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, } from './Drawer';
-//# sourceMappingURL=index.js.map

package/dist/Drawer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAC"}

package/dist/EmailInput/EmailInput.css

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

package/dist/EmailInput/EmailInput.d.ts

@@ -1,38 +0,0 @@
-import React from 'react';
-import { FormControlWidth } from '@dsn-starter-kit/core';
-import '../TextInput/TextInput.css';
-export interface EmailInputProps 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;
-}
-/**
- * Email Input component
- * Email input with appropriate inputmode and autocomplete
- *
- * @example
- * ```tsx
- * // Basic usage
- * <EmailInput placeholder="naam@voorbeeld.nl" />
- *
- * // With label
- * <FormFieldLabel htmlFor="email">E-mailadres</FormFieldLabel>
- * <EmailInput id="email" />
- *
- * // Invalid state
- * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
- * ```
- */
-export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=EmailInput.d.ts.map

package/dist/EmailInput/EmailInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmailInput.d.ts","sourceRoot":"","sources":["../../src/EmailInput/EmailInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,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,UAAU,0FAoBtB,CAAC"}

package/dist/EmailInput/EmailInput.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';
-/**
- * Email Input component
- * Email input with appropriate inputmode and autocomplete
- *
- * @example
- * ```tsx
- * // Basic usage
- * <EmailInput placeholder="naam@voorbeeld.nl" />
- *
- * // With label
- * <FormFieldLabel htmlFor="email">E-mailadres</FormFieldLabel>
- * <EmailInput id="email" />
- *
- * // Invalid state
- * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
- * ```
- */
-export const EmailInput = 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: "email", inputMode: "email", className: classes, autoComplete: autoComplete || 'email', "aria-invalid": invalid || undefined, ...props }));
-});
-EmailInput.displayName = 'EmailInput';
-//# sourceMappingURL=EmailInput.js.map

package/dist/EmailInput/EmailInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmailInput.js","sourceRoot":"","sources":["../../src/EmailInput/EmailInput.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,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7D,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,OAAO,EACZ,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,YAAY,IAAI,OAAO,kBACvB,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/EmailInput/index.d.ts

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

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

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

package/dist/EmailInput/index.js

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

package/dist/EmailInput/index.js.map

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