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

package/dist/File/File.css

@@ -1,222 +0,0 @@
-/* =============================================================================
-   File
-   Toont bestandsmeta (naam, type, grootte) en contextafhankelijke acties.
-   CSS grid met 3 kolommen: media-vlak | content | actions
-   ============================================================================= */
-
-/* File — root container */
-.dsn-file {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: var(--dsn-file-gap);
-  padding-block: var(--dsn-file-padding-block);
-  padding-inline: var(--dsn-file-padding-inline);
-  background-color: var(--dsn-file-background-color);
-  border: var(--dsn-file-border-width) solid var(--dsn-file-border-color);
-  border-radius: var(--dsn-file-border-radius);
-  box-shadow: var(--dsn-file-box-shadow);
-}
-
-/* Error state: rode randkleur signaleert de mislukking */
-.dsn-file--error {
-  border-color: var(--dsn-file-border-color-error);
-}
-
-/* =============================================================================
-   Interactieve variant — hover/active/focus via :has() op de stretched link
-   Zelfde techniek als Card, aangevuld met border-color
-   ============================================================================= */
-
-.dsn-file--interactive {
-  cursor: pointer;
-  transition:
-    background-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    border-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    box-shadow var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default);
-}
-
-/* Hover op de gehele container — ook actief wanneer de CTA-link gehoverd wordt */
-.dsn-file--interactive:hover {
-  background-color: var(--dsn-file-background-color-hover);
-  border-color: var(--dsn-file-border-color-hover);
-  box-shadow: var(--dsn-file-box-shadow-hover);
-}
-
-/* Active alleen via de stretched link — niet bij klik op de CTA-link */
-.dsn-file--interactive:has(.dsn-file__name--stretched:active) {
-  background-color: var(--dsn-file-background-color-active);
-  border-color: var(--dsn-file-border-color-active);
-}
-
-.dsn-file--interactive:has(.dsn-file__name--stretched:focus-visible) {
-  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
-    var(--dsn-focus-outline-color);
-  outline-offset: var(--dsn-focus-outline-offset);
-}
-
-/* =============================================================================
-   Media-vlak — icoon of afbeeldingspreview
-   ============================================================================= */
-
-.dsn-file__media {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  block-size: var(--dsn-file-media-size);
-  inline-size: var(--dsn-file-media-size);
-  border-radius: var(--dsn-file-media-border-radius);
-  background-color: var(--dsn-file-media-background-color);
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-/* Icoon in media-vlak */
-.dsn-file__media > .dsn-icon {
-  color: var(--dsn-file-media-icon-color);
-  width: var(--dsn-file-media-icon-size);
-  height: var(--dsn-file-media-icon-size);
-  flex-shrink: 0;
-}
-
-/* Preview-afbeelding vult het vaste media-vlak volledig */
-.dsn-file__preview {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-/* =============================================================================
-   Content — naam, meta en optionele ErrorMessage
-   ============================================================================= */
-
-.dsn-file__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsn-file-content-gap);
-  min-width: 0;
-}
-
-/* Bestandsnaam — bold, mag over meerdere regels lopen */
-.dsn-file__name {
-  font-weight: var(--dsn-file-name-font-weight);
-}
-
-/* Alleen als span: expliciete kleur (als link geeft dsn-link de kleur) */
-span.dsn-file__name {
-  color: var(--dsn-file-name-color);
-}
-
-/* Stretched link — ::before dekt de volledige component */
-.dsn-file__name--stretched::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-}
-
-/* Geen eigen focus-stijlen — de focus-ring zit op de gehele component */
-.dsn-file__name--stretched:focus-visible {
-  background-color: transparent;
-  color: inherit;
-  outline: none;
-  box-shadow: none;
-}
-
-/* Meta — type + grootte */
-.dsn-file__meta {
-  font-size: var(--dsn-file-meta-font-size);
-  color: var(--dsn-file-meta-color);
-}
-
-/* =============================================================================
-   Actions — inline-end area: Spinner, status-icoon, of Button/Link
-   ============================================================================= */
-
-.dsn-file__actions {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-/* Directe kinderen van actions staan boven de stretched link */
-.dsn-file__actions > * {
-  position: relative;
-  z-index: 2;
-}
-
-/* Status-icoon bij uploaded state — fadeIn bij verschijnen */
-.dsn-file__status-icon {
-  color: var(--dsn-file-status-icon-color);
-  width: var(--dsn-file-status-icon-size);
-  height: var(--dsn-file-status-icon-size);
-  flex-shrink: 0;
-  animation: dsn-file-action-in var(--dsn-transition-duration-normal)
-    var(--dsn-transition-easing-default);
-}
-
-/* Spinner, verwijder-knop — fadeIn bij verschijnen of terugkeer naar default */
-.dsn-file__actions > .dsn-spinner,
-.dsn-file__actions > .dsn-link-button {
-  animation: dsn-file-action-in var(--dsn-transition-duration-normal)
-    var(--dsn-transition-easing-default);
-}
-
-@keyframes dsn-file-action-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* =============================================================================
-   Forced colors (High Contrast mode)
-   ============================================================================= */
-
-@media (forced-colors: active) {
-  .dsn-file__media > .dsn-icon {
-    forced-color-adjust: auto;
-    color: CanvasText;
-  }
-
-  .dsn-file__status-icon {
-    forced-color-adjust: auto;
-    color: CanvasText;
-  }
-}
-
-/* =============================================================================
-   FileList — ul wrapper voor meerdere File items
-   ============================================================================= */
-
-.dsn-file-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsn-file-gap);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* =============================================================================
-   Reduced motion — animaties uitzetten voor gebruikers die dat prefereren
-   ============================================================================= */
-
-@media (prefers-reduced-motion: reduce) {
-  .dsn-file--interactive {
-    transition: none;
-  }
-
-  .dsn-file__status-icon,
-  .dsn-file__actions > .dsn-link-button {
-    animation: none;
-  }
-}
-

package/dist/File/File.d.ts

@@ -1,116 +0,0 @@
-import React from 'react';
-import './File.css';
-export type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';
-export type FileCtaVariant = 'view' | 'download';
-export type FileMediaType = 'document' | 'image';
-export interface FileProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Bestandsnaam inclusief extensie (vereist). Extensie wordt visueel afgekapt. */
-    fileName: string;
-    /** Bestandstype als afkorting: "PDF", "JPG". Getoond in dsn-file__meta. */
-    fileType?: string;
-    /** Bestandsgrootte als geformatteerde string: "1,2 MB". */
-    fileSize?: string;
-    /**
-     * State van het bestand.
-     * Bij 'uploaded' keert het component na 2 seconden automatisch terug naar 'default'.
-     * @default 'default'
-     */
-    status?: FileStatus;
-    /** Foutmelding, getoond bij status="error". */
-    errorMessage?: string;
-    /** URL naar het bestand. Maakt de naam een <a> en schakelt de interactieve variant in. */
-    href?: string;
-    /** Callback voor de verwijderactie. Toont de "Verwijder"-knop. */
-    onDelete?: () => void;
-    /**
-     * Zichtbare tekst op de verwijder-knop.
-     * @default "Verwijder"
-     */
-    deleteLabel?: string;
-    /**
-     * CTA-type in de interactieve variant.
-     * 'view' toont geen aparte CTA; de bestandsnaam opent als stretched link in een nieuw tabblad.
-     * 'download' toont een aparte download-knop; de bestandsnaam opent in een nieuw tabblad.
-     * @default 'view'
-     */
-    ctaVariant?: FileCtaVariant;
-    /**
-     * Overschrijft het standaard CTA-label voor de download-variant.
-     * Standaard: "Download".
-     */
-    ctaLabel?: string;
-    /**
-     * Bepaalt het icoon: file-description.svg of photo.svg.
-     * Genegeerd wanneer previewSrc aanwezig is.
-     * @default 'document'
-     */
-    mediaType?: FileMediaType;
-    /** URL van de afbeeldingspreview. Vervangt het icoon in het media-vlak. */
-    previewSrc?: string;
-    /**
-     * Visueel verborgen label voor de Spinner.
-     * @default "Bezig met uploaden"
-     */
-    loadingLabel?: string;
-    /**
-     * Tekst voor de aria-live regio bij de uploaded state.
-     * @default "{fileName} succesvol geüpload"
-     */
-    uploadedLabel?: string;
-}
-/**
- * File component
- * Toont meta-informatie over een bestand (naam, type, grootte) samen met acties.
- * Ondersteunt vier upload-states (default, loading, uploaded, error) en een
- * interactieve variant voor controle- of detailpagina's.
- *
- * @example
- * ```tsx
- * // Default — eerder geüpload bestand, met verwijder-optie
- * <File
- *   fileName="document.pdf"
- *   fileType="PDF"
- *   fileSize="1,2 MB"
- *   href="/bestanden/document.pdf"
- *   onDelete={() => handleDelete()}
- * />
- *
- * // Interactief — bestandsnaam als link (nieuw tabblad)
- * <File
- *   fileName="rapport-2024.pdf"
- *   fileType="PDF"
- *   fileSize="2,1 MB"
- *   href="/bestanden/rapport-2024.pdf"
- * />
- *
- * // Interactief — download CTA
- * <File
- *   fileName="rapport-2024.pdf"
- *   fileType="PDF"
- *   fileSize="2,1 MB"
- *   href="/bestanden/rapport-2024.pdf"
- *   ctaVariant="download"
- * />
- * ```
- */
-export declare const File: React.ForwardRefExoticComponent<FileProps & React.RefAttributes<HTMLDivElement>>;
-export interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {
-    /** File componenten */
-    children?: React.ReactNode;
-    className?: string;
-}
-/**
- * FileList component
- * Wrapper voor meerdere File componenten.
- * Rendert een <ul role="list"> met <li> wrappers — nodig omdat CSS-resets lijstsemantiek verwijderen.
- *
- * @example
- * ```tsx
- * <FileList>
- *   <File fileName="document.pdf" fileType="PDF" fileSize="1,2 MB" href="..." onDelete={() => {}} />
- *   <File fileName="foto.jpg" fileType="JPG" fileSize="3,4 MB" href="..." onDelete={() => {}} />
- * </FileList>
- * ```
- */
-export declare const FileList: React.ForwardRefExoticComponent<FileListProps & React.RefAttributes<HTMLUListElement>>;
-//# sourceMappingURL=File.d.ts.map

package/dist/File/File.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../src/File/File.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AACtE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IAEjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI,kFA6JhB,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC3E,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,wFAepB,CAAC"}

package/dist/File/File.js

@@ -1,100 +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 { Icon } from '../Icon';
-import { Spinner } from '../Spinner';
-import { FormFieldErrorMessage } from '../FormFieldErrorMessage';
-import './File.css';
-/**
- * File component
- * Toont meta-informatie over een bestand (naam, type, grootte) samen met acties.
- * Ondersteunt vier upload-states (default, loading, uploaded, error) en een
- * interactieve variant voor controle- of detailpagina's.
- *
- * @example
- * ```tsx
- * // Default — eerder geüpload bestand, met verwijder-optie
- * <File
- *   fileName="document.pdf"
- *   fileType="PDF"
- *   fileSize="1,2 MB"
- *   href="/bestanden/document.pdf"
- *   onDelete={() => handleDelete()}
- * />
- *
- * // Interactief — bestandsnaam als link (nieuw tabblad)
- * <File
- *   fileName="rapport-2024.pdf"
- *   fileType="PDF"
- *   fileSize="2,1 MB"
- *   href="/bestanden/rapport-2024.pdf"
- * />
- *
- * // Interactief — download CTA
- * <File
- *   fileName="rapport-2024.pdf"
- *   fileType="PDF"
- *   fileSize="2,1 MB"
- *   href="/bestanden/rapport-2024.pdf"
- *   ctaVariant="download"
- * />
- * ```
- */
-export const File = React.forwardRef(({ className, fileName, fileType, fileSize, status = 'default', errorMessage, href, onDelete, deleteLabel = 'Verwijder', ctaVariant = 'view', ctaLabel, mediaType = 'document', previewSrc, loadingLabel = 'Bezig met uploaden', uploadedLabel, ...props }, ref) => {
-    const [currentStatus, setCurrentStatus] = React.useState(status);
-    const [liveText, setLiveText] = React.useState('');
-    // Synchroniseer externe status-prop met interne state
-    React.useEffect(() => {
-        setCurrentStatus(status);
-    }, [status]);
-    // Bij uploaded: vul aria-live regio en keer na 2s terug naar default
-    React.useEffect(() => {
-        if (currentStatus !== 'uploaded')
-            return;
-        const resolvedUploadedLabel = uploadedLabel ?? `${fileName} succesvol geüpload`;
-        setLiveText(resolvedUploadedLabel);
-        const timer = setTimeout(() => {
-            setCurrentStatus('default');
-            setLiveText('');
-        }, 2000);
-        return () => clearTimeout(timer);
-    }, [currentStatus, fileName, uploadedLabel]);
-    // Bestandsnaam zonder extensie voor visuele weergave
-    const fileNameWithoutExt = React.useMemo(() => {
-        const lastDot = fileName.lastIndexOf('.');
-        return lastDot > 0 ? fileName.slice(0, lastDot) : fileName;
-    }, [fileName]);
-    // Meta-tekst: "PDF · 1,2 MB" of alleen type of grootte
-    const metaParts = [fileType, fileSize].filter(Boolean);
-    const metaText = metaParts.join(' · ');
-    // Interactieve modus: href aanwezig en geen onDelete
-    const isInteractive = Boolean(href) && !onDelete;
-    // Stretched link: interactief zonder aparte download-CTA
-    const isStretchedLink = isInteractive && ctaVariant !== 'download';
-    const rootClasses = classNames('dsn-file', currentStatus === 'loading' && 'dsn-file--loading', currentStatus === 'uploaded' && 'dsn-file--uploaded', currentStatus === 'error' && 'dsn-file--error', isStretchedLink && 'dsn-file--interactive', className);
-    const nameClasses = classNames('dsn-file__name', href && 'dsn-link', isStretchedLink && 'dsn-file__name--stretched');
-    const iconName = mediaType === 'image' ? 'photo' : 'file-description';
-    const resolvedCtaLabel = ctaLabel ?? 'Download';
-    return (_jsxs("div", { ref: ref, className: rootClasses, ...props, children: [_jsx("div", { className: "dsn-file__media", "aria-hidden": "true", children: previewSrc ? (_jsx("img", { className: "dsn-file__preview", src: previewSrc, alt: "" })) : (_jsx(Icon, { name: iconName, "aria-hidden": true })) }), _jsxs("div", { className: "dsn-file__content", children: [href ? (_jsx("a", { className: nameClasses, href: href, target: "_blank", rel: "noopener noreferrer", children: fileNameWithoutExt })) : (_jsx("span", { className: nameClasses, children: fileNameWithoutExt })), metaText && _jsx("span", { className: "dsn-file__meta", children: metaText }), currentStatus === 'error' && errorMessage && (_jsx(FormFieldErrorMessage, { children: errorMessage }))] }), _jsxs("div", { className: "dsn-file__actions", children: [!isInteractive && currentStatus === 'loading' && (_jsx(Spinner, { label: loadingLabel, hideLabel: true })), !isInteractive && currentStatus === 'uploaded' && (_jsx(Icon, { className: "dsn-file__status-icon", name: "check", "aria-hidden": true })), !isInteractive &&
-                        (currentStatus === 'default' || currentStatus === 'error') &&
-                        onDelete && (_jsxs("button", { type: "button", className: "dsn-link dsn-link-button dsn-link--size-default", onClick: onDelete, children: [_jsx(Icon, { name: "trash", "aria-hidden": true }), deleteLabel, _jsxs("span", { className: "dsn-visually-hidden", children: [" ", fileName] })] })), isInteractive && ctaVariant === 'download' && (_jsxs("a", { className: "dsn-link", href: href, "aria-hidden": "true", tabIndex: -1, download: true, children: [_jsx(Icon, { name: "download", "aria-hidden": true }), resolvedCtaLabel] }))] }), _jsx("span", { className: "dsn-visually-hidden", "aria-live": "polite", "aria-atomic": "true", children: liveText })] }));
-});
-File.displayName = 'File';
-/**
- * FileList component
- * Wrapper voor meerdere File componenten.
- * Rendert een <ul role="list"> met <li> wrappers — nodig omdat CSS-resets lijstsemantiek verwijderen.
- *
- * @example
- * ```tsx
- * <FileList>
- *   <File fileName="document.pdf" fileType="PDF" fileSize="1,2 MB" href="..." onDelete={() => {}} />
- *   <File fileName="foto.jpg" fileType="JPG" fileSize="3,4 MB" href="..." onDelete={() => {}} />
- * </FileList>
- * ```
- */
-export const FileList = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("ul", { ref: ref, className: classNames('dsn-file-list', className), role: "list", ...props, children: React.Children.map(children, (child, index) => (_jsx("li", { children: child }, index))) }));
-});
-FileList.displayName = 'FileList';
-//# sourceMappingURL=File.js.map

package/dist/File/File.js.map

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

package/dist/File/index.d.ts

@@ -1,3 +0,0 @@
-export { File, FileList } from './File';
-export type { FileProps, FileListProps, FileStatus, FileCtaVariant, FileMediaType, } from './File';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/File/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EACV,SAAS,EACT,aAAa,EACb,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,QAAQ,CAAC"}

package/dist/File/index.js

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

package/dist/File/index.js.map

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

package/dist/FileInput/FileInput.css

@@ -1,112 +0,0 @@
-/**
- * File Input Component
- * Unstyled container + styled ::file-selector-button (as dsn-button--default).
- * No outer border or background: the browser renders button + filename text.
- *
- * Usage:
- * <input type="file" class="dsn-file-input" />
- */
-
-.dsn-file-input {
-  /* Typography */
-  font-family: var(--dsn-file-input-font-family);
-  font-size: var(--dsn-file-input-font-size);
-  font-weight: var(--dsn-file-input-font-weight);
-  line-height: var(--dsn-file-input-line-height);
-
-  /* Subtle color for the "No file chosen" / filename text */
-  color: var(--dsn-file-input-color);
-  background-color: transparent;
-  border: none;
-
-  /* Sizing */
-  min-block-size: var(--dsn-file-input-min-block-size);
-  min-inline-size: var(--dsn-file-input-min-inline-size);
-
-  /* Display */
-  display: block;
-  box-sizing: border-box;
-
-  /* Vertical space so the ::file-selector-button focus ring is not clipped */
-  padding-block: calc(
-    var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width)
-  );
-  padding-inline: 0;
-}
-
-/* Remove browser default focus outline — handled via ::file-selector-button below */
-.dsn-file-input:focus {
-  outline: none;
-}
-
-/* File selector button — styled like dsn-button--default */
-.dsn-file-input::file-selector-button {
-  /* Typography */
-  font-family: var(--dsn-button-font-family);
-  font-size: var(--dsn-button-size-default-font-size);
-  font-weight: var(--dsn-button-font-weight);
-  line-height: var(--dsn-button-line-height);
-
-  /* Colors */
-  background-color: var(--dsn-button-default-background-color);
-  color: var(--dsn-button-default-color);
-
-  /* Border — full radius on all sides */
-  border: var(--dsn-button-border-width) solid
-    var(--dsn-button-default-border-color);
-  border-radius: var(--dsn-button-border-radius);
-
-  /* Spacing */
-  padding-block: var(--dsn-button-size-default-padding-block);
-  padding-inline: var(--dsn-button-size-default-padding-inline);
-  margin-inline-end: var(--dsn-file-input-column-gap);
-
-  /* Sizing */
-  min-block-size: var(--dsn-button-min-block-size);
-
-  /* Interaction */
-  cursor: pointer;
-
-  /* Transitions */
-  transition:
-    background-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    border-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default);
-}
-
-/* Hover — button gets default hover styling */
-.dsn-file-input:hover:not(:disabled)::file-selector-button {
-  background-color: var(--dsn-button-default-hover-background-color);
-  color: var(--dsn-button-default-hover-color);
-  border-color: var(--dsn-button-default-hover-border-color);
-}
-
-/* Focus — button shows the design system focus ring */
-.dsn-file-input:focus-visible::file-selector-button {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  border-color: var(--dsn-focus-background-color);
-  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
-    var(--dsn-focus-outline-color);
-  outline-offset: var(--dsn-focus-outline-offset);
-  box-shadow: 0 0 0
-    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
-    var(--dsn-focus-inverse-outline-color);
-}
-
-/* Disabled — button uses the same tokens as dsn-button:disabled; text is muted */
-.dsn-file-input:disabled {
-  color: var(--dsn-file-input-disabled-color);
-  cursor: not-allowed;
-}
-
-.dsn-file-input:disabled::file-selector-button {
-  background-color: var(--dsn-button-disabled-background-color);
-  color: var(--dsn-button-disabled-color);
-  border-color: var(--dsn-button-disabled-border-color);
-  cursor: not-allowed;
-}
-

package/dist/FileInput/FileInput.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import './FileInput.css';
-export interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Whether the input is in an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-}
-/**
- * File Input component
- * Styled wrapper around native <input type="file"> with support for
- * disabled and invalid states and multiple file selection.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <FileInput />
- *
- * // With label
- * <FormFieldLabel htmlFor="attachment">Bijlage</FormFieldLabel>
- * <FileInput id="attachment" accept=".pdf,.docx" />
- *
- * // Multiple files
- * <FileInput multiple />
- *
- * // Invalid
- * <FileInput invalid aria-describedby="error" />
- * ```
- */
-export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=FileInput.d.ts.map

package/dist/FileInput/FileInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,yFAcrB,CAAC"}

package/dist/FileInput/FileInput.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './FileInput.css';
-/**
- * File Input component
- * Styled wrapper around native <input type="file"> with support for
- * disabled and invalid states and multiple file selection.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <FileInput />
- *
- * // With label
- * <FormFieldLabel htmlFor="attachment">Bijlage</FormFieldLabel>
- * <FileInput id="attachment" accept=".pdf,.docx" />
- *
- * // Multiple files
- * <FileInput multiple />
- *
- * // Invalid
- * <FileInput invalid aria-describedby="error" />
- * ```
- */
-export const FileInput = React.forwardRef(({ className, invalid, ...props }, ref) => {
-    const classes = classNames('dsn-file-input', className);
-    return (_jsx("input", { ref: ref, type: "file", className: classes, "aria-invalid": invalid || undefined, ...props }));
-});
-FileInput.displayName = 'FileInput';
-//# sourceMappingURL=FileInput.js.map

package/dist/FileInput/FileInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,iBAAiB,CAAC;AAkBzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxC,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,OAAO,kBACJ,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/FileInput/index.d.ts

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

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

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

package/dist/FileInput/index.js

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