@dsn-starter-kit/components-react 1.0.0

package/dist/PageHeader/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;AAC/D,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,CAAC;AACrD,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;IAEpC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzC;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtC;;;OAGG;IACH,wBAAwB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3C;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;OAIG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAElC;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAI3B;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAEhC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,UAAU,qFA0UtB,CAAC"}

package/dist/PageHeader/PageHeader.js

@@ -0,0 +1,115 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { SearchInput } from '../SearchInput';
+import { Drawer, DrawerBody, DrawerHeader, DrawerHeading } from '../Drawer';
+import { Stack } from '../Stack';
+import './PageHeader.css';
+/**
+ * PageHeader component
+ * Primaire navigatieheader voor een pagina. Mobile-first implementatie.
+ *
+ * Op mobile toont de header drie elementen:
+ * - Menuknop (inline-start) — opent een `Drawer` met primaire en service-navigatie
+ * - Logo (gecentreerd, onafhankelijk van knopbreedte via CSS-grid 1fr auto 1fr)
+ * - Zoekknop (inline-end) — opent een zoekpaneel direct onder de header
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   logoSlot={
+ *     <a href="/">
+ *       <Logo aria-hidden={true} />
+ *       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ *     </a>
+ *   }
+ *   primaryNavigation={
+ *     <Menu orientation="vertical">
+ *       <MenuLink href="/home" level={1}>Home</MenuLink>
+ *       <MenuLink href="/over" level={1}>Over ons</MenuLink>
+ *     </Menu>
+ *   }
+ *   secondaryNavigation={
+ *     <Menu orientation="vertical">
+ *       <MenuLink href="/contact" level={1}>Contact</MenuLink>
+ *     </Menu>
+ *   }
+ * />
+ * ```
+ */
+export const PageHeader = React.forwardRef(({ className, logoSlot, sticky = 'none', layout = 'default', colorScheme = 'default', initialSearchOpen = false, primaryNavigation, primaryNavigationLarge, secondaryNavigation, secondaryNavigationLarge, searchSlot, menuButtonBadge, menuButtonBadgeLabel, onMenuOpen, onMenuClose, onSearchOpen, onSearchClose, menuButtonLabel = 'Menu', searchButtonLabel = 'Zoeken', closeButtonLabel = 'Sluiten', searchInputPlaceholder = 'Zoeken…', searchInputAriaLabel = 'Zoekopdracht', searchSubmitLabel = 'Zoeken', primaryNavAriaLabel = 'Hoofd-navigatie', secondaryNavAriaLabel = 'Service-navigatie', hideMenuButton = false, hideSearchButton = false, ...props }, ref) => {
+    const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+    const [isSearchOpen, setIsSearchOpen] = React.useState(initialSearchOpen);
+    const headerRef = React.useRef(null);
+    const combinedRef = ref ?? headerRef;
+    const menuButtonRef = React.useRef(null);
+    const searchButtonRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
+    const compactSearchButtonRef = React.useRef(null);
+    const compactSearchInputRef = React.useRef(null);
+    const searchPanelId = React.useId();
+    const compactSearchPanelId = React.useId();
+    // Auto-hide: detecteer scrollrichting en toggle data-hidden attribuut
+    React.useEffect(() => {
+        if (sticky !== 'auto-hide')
+            return;
+        let lastScrollY = window.scrollY;
+        const handleScroll = () => {
+            const currentScrollY = window.scrollY;
+            const isScrollingDown = currentScrollY > lastScrollY && currentScrollY > 100;
+            combinedRef.current?.setAttribute('data-hidden', String(isScrollingDown));
+            lastScrollY = currentScrollY;
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [sticky, combinedRef]);
+    // Drop-shadow: zet data-scrolled op "true" zodra de pagina gescrolled is.
+    // Werkt voor zowel sticky als auto-hide — ongeacht scrollrichting.
+    React.useEffect(() => {
+        if (sticky === 'none')
+            return;
+        const updateScrolled = () => {
+            combinedRef.current?.setAttribute('data-scrolled', String(window.scrollY > 0));
+        };
+        // Direct bij mount instellen (pagina kan al gescrolled zijn)
+        updateScrolled();
+        window.addEventListener('scroll', updateScrolled, { passive: true });
+        return () => window.removeEventListener('scroll', updateScrolled);
+    }, [sticky, combinedRef]);
+    // Focus management: bij openen zoekpaneel → focus naar input (klein of compact)
+    React.useEffect(() => {
+        if (isSearchOpen) {
+            searchInputRef.current?.focus();
+            compactSearchInputRef.current?.focus();
+        }
+    }, [isSearchOpen]);
+    const handleMenuOpen = () => {
+        setIsMenuOpen(true);
+        onMenuOpen?.();
+    };
+    const handleMenuClose = () => {
+        setIsMenuOpen(false);
+        onMenuClose?.();
+        // Focus terug naar menuknop
+        menuButtonRef.current?.focus();
+    };
+    const handleSearchToggle = () => {
+        const opening = !isSearchOpen;
+        setIsSearchOpen(opening);
+        if (opening) {
+            onSearchOpen?.();
+        }
+        else {
+            onSearchClose?.();
+            // Focus terug naar zoek/sluit-knop — afhankelijk van actieve layout
+            searchButtonRef.current?.focus();
+            compactSearchButtonRef.current?.focus();
+        }
+    };
+    const classes = classNames('dsn-page-header', sticky === 'sticky' && 'dsn-page-header--sticky', sticky === 'auto-hide' && 'dsn-page-header--auto-hide', layout === 'compact' && 'dsn-page-header--compact', colorScheme === 'inverse' && 'dsn-page-header--inverse', className);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { ref: combinedRef, className: classes, ...(sticky === 'auto-hide' ? { 'data-hidden': 'false' } : {}), ...props, children: [_jsxs("div", { className: "dsn-page-header__small-layout", children: [_jsxs("div", { className: "dsn-page-header__inner", children: [_jsx("div", { className: "dsn-page-header__start", children: !hideMenuButton && (_jsxs(Button, { ref: menuButtonRef, variant: "subtle", onClick: handleMenuOpen, iconStart: _jsx(Icon, { name: "menu", "aria-hidden": true }), children: [menuButtonLabel, menuButtonBadgeLabel && (_jsxs("span", { className: "dsn-visually-hidden", children: [", ", menuButtonBadgeLabel] })), menuButtonBadge] })) }), _jsx("div", { className: "dsn-page-header__logo", children: logoSlot }), _jsx("div", { className: "dsn-page-header__end", children: !hideSearchButton && (_jsx(Button, { ref: searchButtonRef, variant: "subtle", "aria-expanded": isSearchOpen, "aria-controls": searchPanelId, onClick: handleSearchToggle, iconStart: _jsx(Icon, { name: isSearchOpen ? 'x' : 'search', "aria-hidden": true }), children: isSearchOpen ? closeButtonLabel : searchButtonLabel })) })] }), _jsx("div", { id: searchPanelId, className: "dsn-page-header__search-panel", hidden: !isSearchOpen, children: _jsxs("div", { className: "dsn-page-header__search-inner", children: [_jsx(SearchInput, { ref: searchInputRef, placeholder: searchInputPlaceholder, "aria-label": searchInputAriaLabel }), _jsx(Button, { variant: "strong", children: searchSubmitLabel })] }) })] }), layout === 'default' && (_jsxs("div", { className: "dsn-page-header__large-layout", children: [_jsx("div", { className: "dsn-page-header__masthead", children: _jsxs("div", { className: "dsn-page-header__masthead-inner", children: [_jsx("div", { className: "dsn-page-header__logo", children: logoSlot }), _jsxs("div", { className: "dsn-page-header__secondary-nav", children: [(secondaryNavigationLarge ?? secondaryNavigation) && (_jsx("nav", { "aria-label": secondaryNavAriaLabel, children: secondaryNavigationLarge ?? secondaryNavigation })), searchSlot && (_jsx("div", { className: "dsn-page-header__searchbox", children: searchSlot }))] })] }) }), _jsx("div", { className: "dsn-page-header__navbar", children: _jsx("div", { className: "dsn-page-header__navbar-inner", children: (primaryNavigationLarge ?? primaryNavigation) && (_jsx("nav", { "aria-label": primaryNavAriaLabel, children: primaryNavigationLarge ?? primaryNavigation })) }) })] })), layout === 'compact' && (_jsxs("div", { className: "dsn-page-header__compact-layout", children: [_jsxs("div", { className: "dsn-page-header__compact-inner", children: [_jsx("div", { className: "dsn-page-header__logo", children: logoSlot }), _jsx("div", { className: "dsn-page-header__compact-primary-nav", children: (primaryNavigationLarge ?? primaryNavigation) && (_jsx("nav", { "aria-label": primaryNavAriaLabel, children: primaryNavigationLarge ?? primaryNavigation })) }), _jsxs("div", { className: "dsn-page-header__compact-secondary", children: [(secondaryNavigationLarge ?? secondaryNavigation) && (_jsx("nav", { "aria-label": secondaryNavAriaLabel, children: secondaryNavigationLarge ?? secondaryNavigation })), !hideSearchButton && (_jsx(Button, { ref: compactSearchButtonRef, variant: "subtle", iconOnly: true, "aria-expanded": isSearchOpen, "aria-controls": compactSearchPanelId, onClick: handleSearchToggle, iconStart: _jsx(Icon, { name: isSearchOpen ? 'x' : 'search', "aria-hidden": true }), children: isSearchOpen ? closeButtonLabel : searchButtonLabel }))] })] }), _jsx("div", { id: compactSearchPanelId, className: "dsn-page-header__search-panel", hidden: !isSearchOpen, children: _jsxs("div", { className: "dsn-page-header__search-inner", children: [_jsx(SearchInput, { ref: compactSearchInputRef, placeholder: searchInputPlaceholder, "aria-label": searchInputAriaLabel }), _jsx(Button, { variant: "strong", children: searchSubmitLabel })] }) })] }))] }), _jsxs(Drawer, { isOpen: isMenuOpen, onClose: handleMenuClose, side: "left", children: [_jsx(DrawerHeader, { children: _jsx(DrawerHeading, { children: menuButtonLabel }) }), _jsx(DrawerBody, { children: _jsxs(Stack, { space: "5xl", children: [primaryNavigation && (_jsx("nav", { "aria-label": primaryNavAriaLabel, children: primaryNavigation })), secondaryNavigation && (_jsx("nav", { "aria-label": secondaryNavAriaLabel, children: secondaryNavigation }))] }) })] })] }));
+});
+PageHeader.displayName = 'PageHeader';
+//# sourceMappingURL=PageHeader.js.map

package/dist/PageHeader/PageHeader.js.map

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

package/dist/PageHeader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageHeader';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageHeader/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/PageHeader/index.js

@@ -0,0 +1,2 @@
+export * from './PageHeader';
+//# sourceMappingURL=index.js.map

package/dist/PageHeader/index.js.map

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

package/dist/PageLayout/PageLayout.css

@@ -0,0 +1,6 @@
+.dsn-page-layout {
+  display: flex;
+  flex-direction: column;
+  min-block-size: 100dvh;
+}
+

package/dist/PageLayout/PageLayout.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import './PageLayout.css';
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Paginainhoud: doorgaans `PageHeader`, `PageBody` en `PageFooter`.
+     */
+    children: React.ReactNode;
+    /**
+     * Extra CSS-klassen
+     */
+    className?: string;
+}
+/**
+ * PageLayout component
+ * Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal
+ * stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport
+ * vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat
+ * zodra `PageBody` `flex: 1` heeft.
+ *
+ * `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische
+ * landmarks komen van de children (`<header>`, `<main>`, `<footer>`).
+ *
+ * @example
+ * ```tsx
+ * <SkipLink href="#main-content" />
+ * <PageLayout>
+ *   <PageHeader logoSlot={<Logo />} />
+ *   <PageBody>
+ *     <main id="main-content" tabIndex={-1}>
+ *       <Container>...</Container>
+ *     </main>
+ *   </PageBody>
+ *   <PageFooter slot1={<Logo />} />
+ * </PageLayout>
+ * ```
+ */
+export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PageLayout.d.ts.map

package/dist/PageLayout/PageLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/PageLayout/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,UAAU,wFAYtB,CAAC"}

package/dist/PageLayout/PageLayout.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './PageLayout.css';
+/**
+ * PageLayout component
+ * Structurele wrapper die `PageHeader`, `PageBody` en `PageFooter` verticaal
+ * stapelt via flexbox. Garandeert dat de pagina altijd de volledige viewport
+ * vult (`min-block-size: 100dvh`) en dat `PageFooter` altijd onderaan staat
+ * zodra `PageBody` `flex: 1` heeft.
+ *
+ * `PageLayout` is een neutrale `<div>` zonder semantische rol. De semantische
+ * landmarks komen van de children (`<header>`, `<main>`, `<footer>`).
+ *
+ * @example
+ * ```tsx
+ * <SkipLink href="#main-content" />
+ * <PageLayout>
+ *   <PageHeader logoSlot={<Logo />} />
+ *   <PageBody>
+ *     <main id="main-content" tabIndex={-1}>
+ *       <Container>...</Container>
+ *     </main>
+ *   </PageBody>
+ *   <PageFooter slot1={<Logo />} />
+ * </PageLayout>
+ * ```
+ */
+export const PageLayout = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-page-layout', className), ...props, children: children }));
+});
+PageLayout.displayName = 'PageLayout';
+//# sourceMappingURL=PageLayout.js.map

package/dist/PageLayout/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","sourceRoot":"","sources":["../../src/PageLayout/PageLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAc1B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAC/C,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/PageLayout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageLayout';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/PageLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/PageLayout/index.js

@@ -0,0 +1,2 @@
+export * from './PageLayout';
+//# sourceMappingURL=index.js.map

package/dist/PageLayout/index.js.map

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

package/dist/Paragraph/Paragraph.css

@@ -0,0 +1,38 @@
+/**
+ * Paragraph Component Styles for React
+ * Re-exports the base Paragraph styles from components-html
+ */
+
+/**
+ * Paragraph Component
+ * Uses component tokens for consistent styling
+ *
+ * Base class includes the default variant styles — class="dsn-paragraph" is sufficient
+ * for the most common case. Variant modifiers (lead, small-print) override what differs.
+ */
+
+.dsn-paragraph {
+  font-family: var(--dsn-paragraph-font-family);
+  font-weight: var(--dsn-paragraph-font-weight);
+  color: var(--dsn-paragraph-color);
+  max-inline-size: var(--dsn-paragraph-max-inline-size);
+  margin-block-start: 0;
+  font-size: var(--dsn-paragraph-default-font-size);
+  line-height: var(--dsn-paragraph-default-line-height);
+  margin-block-end: var(--dsn-paragraph-default-margin-block-end);
+}
+
+/* Lead Variant */
+.dsn-paragraph--lead {
+  font-size: var(--dsn-paragraph-lead-font-size);
+  line-height: var(--dsn-paragraph-lead-line-height);
+  margin-block-end: var(--dsn-paragraph-lead-margin-block-end);
+}
+
+/* Small Print Variant */
+.dsn-paragraph--small-print {
+  font-size: var(--dsn-paragraph-small-print-font-size);
+  line-height: var(--dsn-paragraph-small-print-line-height);
+  margin-block-end: var(--dsn-paragraph-small-print-margin-block-end);
+}
+

package/dist/Paragraph/Paragraph.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import './Paragraph.css';
+export type ParagraphVariant = 'default' | 'lead' | 'small-print';
+export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Paragraph visual style
+     * @default 'default'
+     */
+    variant?: ParagraphVariant;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Paragraph content
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Paragraph component with multiple variants
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Paragraph>Body text content</Paragraph>
+ *
+ * // Lead paragraph
+ * <Paragraph variant="lead">Introductory text</Paragraph>
+ *
+ * // Small print
+ * <Paragraph variant="small-print">Terms and conditions apply.</Paragraph>
+ * ```
+ */
+export declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=Paragraph.d.ts.map

package/dist/Paragraph/Paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../src/Paragraph/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,CAAC;AAElE,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS,6FAcrB,CAAC"}

package/dist/Paragraph/Paragraph.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Paragraph.css';
+/**
+ * Paragraph component with multiple variants
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Paragraph>Body text content</Paragraph>
+ *
+ * // Lead paragraph
+ * <Paragraph variant="lead">Introductory text</Paragraph>
+ *
+ * // Small print
+ * <Paragraph variant="small-print">Terms and conditions apply.</Paragraph>
+ * ```
+ */
+export const Paragraph = React.forwardRef(({ variant = 'default', className, children, ...props }, ref) => {
+    const classes = classNames('dsn-paragraph', variant !== 'default' && `dsn-paragraph--${variant}`, className);
+    return (_jsx("p", { ref: ref, className: classes, ...props, children: children }));
+});
+Paragraph.displayName = 'Paragraph';
+//# sourceMappingURL=Paragraph.js.map

package/dist/Paragraph/Paragraph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../src/Paragraph/Paragraph.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,iBAAiB,CAAC;AAsBzB;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,OAAO,KAAK,SAAS,IAAI,kBAAkB,OAAO,EAAE,EACpD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,YAAG,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACvC,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/Paragraph/index.d.ts

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

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

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

package/dist/Paragraph/index.js

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

package/dist/Paragraph/index.js.map

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

package/dist/PasswordInput/PasswordInput.css

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

package/dist/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+export type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';
+export interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Autocomplete hint for password managers
+     * - 'current-password': voor inlogformulieren (default)
+     * - 'new-password': voor registratie- en wachtwoord wijzigformulieren
+     * - 'off': autocomplete uitschakelen
+     * @default 'current-password'
+     */
+    passwordAutocomplete?: PasswordAutocomplete;
+    /**
+     * 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;
+}
+/**
+ * Password Input component
+ * Uses type="password" for secure text entry.
+ * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —
+ * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.
+ *
+ * @example
+ * ```tsx
+ * // Login form (current password)
+ * <PasswordInput placeholder="Wachtwoord" />
+ *
+ * // Registration form (new password)
+ * <PasswordInput passwordAutocomplete="new-password" placeholder="Nieuw wachtwoord" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="password">Wachtwoord</FormFieldLabel>
+ * <PasswordInput id="password" />
+ *
+ * // Invalid state
+ * <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=PasswordInput.d.ts.map

package/dist/PasswordInput/PasswordInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.ts","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAEpC,MAAM,MAAM,oBAAoB,GAAG,kBAAkB,GAAG,cAAc,GAAG,KAAK,CAAC;AAE/E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAC9C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;IAE5C;;;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;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,aAAa,6FAgCzB,CAAC"}

package/dist/PasswordInput/PasswordInput.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+/**
+ * Password Input component
+ * Uses type="password" for secure text entry.
+ * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —
+ * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.
+ *
+ * @example
+ * ```tsx
+ * // Login form (current password)
+ * <PasswordInput placeholder="Wachtwoord" />
+ *
+ * // Registration form (new password)
+ * <PasswordInput passwordAutocomplete="new-password" placeholder="Nieuw wachtwoord" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="password">Wachtwoord</FormFieldLabel>
+ * <PasswordInput id="password" />
+ *
+ * // Invalid state
+ * <PasswordInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export const PasswordInput = React.forwardRef(({ passwordAutocomplete = 'current-password', 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: "password", className: classes, autoComplete: autoComplete || passwordAutocomplete, "aria-invalid": invalid || undefined, ...props }));
+});
+PasswordInput.displayName = 'PasswordInput';
+//# sourceMappingURL=PasswordInput.js.map

package/dist/PasswordInput/PasswordInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.js","sourceRoot":"","sources":["../../src/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAmCpC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAI3C,CACE,EACE,oBAAoB,GAAG,kBAAkB,EACzC,SAAS,EACT,OAAO,EACP,KAAK,EACL,YAAY,EACZ,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,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,UAAU,EACf,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,YAAY,IAAI,oBAAoB,kBACpC,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/PasswordInput/index.d.ts

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

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

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

package/dist/PasswordInput/index.js

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

package/dist/PasswordInput/index.js.map

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