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

package/dist/Checkbox/Checkbox.js

@@ -1,24 +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 './Checkbox.css';
-/**
- * Checkbox component for boolean selection (without label)
- * Use CheckboxOption component to combine with a label
- */
-export const Checkbox = React.forwardRef(({ invalid, indeterminate, className, ...props }, ref) => {
-    const inputRef = React.useRef(null);
-    // Combine refs
-    React.useImperativeHandle(ref, () => inputRef.current);
-    // Set indeterminate property (not available as HTML attribute)
-    React.useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.indeterminate = indeterminate || false;
-        }
-    }, [indeterminate]);
-    const inputClasses = classNames('dsn-checkbox__input', invalid && 'dsn-checkbox__input--invalid', className);
-    return (_jsxs("div", { className: "dsn-checkbox", children: [_jsx("input", { ref: inputRef, type: "checkbox", className: inputClasses, "aria-invalid": invalid ? 'true' : undefined, ...props }), _jsx("span", { className: "dsn-checkbox__control", "aria-hidden": "true", children: indeterminate ? (_jsx(Icon, { name: "minus", className: "dsn-checkbox__icon" })) : (_jsx(Icon, { name: "check", className: "dsn-checkbox__icon" })) })] }));
-});
-Checkbox.displayName = 'Checkbox';
-//# sourceMappingURL=Checkbox.js.map

package/dist/Checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,gBAAgB,CAAC;AAgBxB;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACvD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE7D,eAAe;IACf,KAAK,CAAC,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAQ,CAAC,CAAC;IAExD,+DAA+D;IAC/D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,IAAI,KAAK,CAAC;QAC1D,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,YAAY,GAAG,UAAU,CAC7B,qBAAqB,EACrB,OAAO,IAAI,8BAA8B,EACzC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,aAC3B,gBACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,YAAY,kBACT,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACtC,KAAK,GACT,EACF,eAAM,SAAS,EAAC,uBAAuB,iBAAa,MAAM,YACvD,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,oBAAoB,GAAG,CACrD,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,oBAAoB,GAAG,CACrD,GACI,IACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/Checkbox/index.d.ts

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

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

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

package/dist/Checkbox/index.js

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

package/dist/Checkbox/index.js.map

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

package/dist/CheckboxGroup/CheckboxGroup.css

@@ -1,10 +0,0 @@
-/**
- * CheckboxGroup Component Styles
- * Container for multiple CheckboxOption components
- */
-
-.dsn-checkbox-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsn-checkbox-group-gap);
-}

package/dist/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import './CheckboxGroup.css';
-export interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Checkbox options to display in the group
-     */
-    children: React.ReactNode;
-}
-/**
- * Checkbox Group component
- * Container for multiple CheckboxOption components
- *
- * Note: This is just a list container. For a complete form field with label,
- * wrap this in a FormFieldset component.
- *
- * @example
- * ```tsx
- * // Basic usage (list only)
- * <CheckboxGroup>
- *   <CheckboxOption label="Sport" value="sport" />
- *   <CheckboxOption label="Muziek" value="music" />
- *   <CheckboxOption label="Reizen" value="travel" />
- * </CheckboxGroup>
- *
- * // Complete form field (with FormFieldset and FormFieldLegend)
- * <FormFieldset>
- *   <FormFieldLegend>Interesses</FormFieldLegend>
- *   <CheckboxGroup>
- *     <CheckboxOption label="Sport" value="sport" />
- *     <CheckboxOption label="Muziek" value="music" />
- *     <CheckboxOption label="Reizen" value="travel" />
- *   </CheckboxGroup>
- * </FormFieldset>
- * ```
- */
-export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,qBAAqB,CAAC;AAE7B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,aAAa,2FAWxB,CAAC"}

package/dist/CheckboxGroup/CheckboxGroup.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './CheckboxGroup.css';
-/**
- * Checkbox Group component
- * Container for multiple CheckboxOption components
- *
- * Note: This is just a list container. For a complete form field with label,
- * wrap this in a FormFieldset component.
- *
- * @example
- * ```tsx
- * // Basic usage (list only)
- * <CheckboxGroup>
- *   <CheckboxOption label="Sport" value="sport" />
- *   <CheckboxOption label="Muziek" value="music" />
- *   <CheckboxOption label="Reizen" value="travel" />
- * </CheckboxGroup>
- *
- * // Complete form field (with FormFieldset and FormFieldLegend)
- * <FormFieldset>
- *   <FormFieldLegend>Interesses</FormFieldLegend>
- *   <CheckboxGroup>
- *     <CheckboxOption label="Sport" value="sport" />
- *     <CheckboxOption label="Muziek" value="music" />
- *     <CheckboxOption label="Reizen" value="travel" />
- *   </CheckboxGroup>
- * </FormFieldset>
- * ```
- */
-export const CheckboxGroup = React.forwardRef(({ className, children, ...props }, ref) => {
-    const classes = classNames('dsn-checkbox-group', className);
-    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
-});
-CheckboxGroup.displayName = 'CheckboxGroup';
-//# sourceMappingURL=CheckboxGroup.js.map

package/dist/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,qBAAqB,CAAC;AAS7B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC"}

package/dist/CheckboxGroup/index.d.ts

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

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

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

package/dist/CheckboxGroup/index.js

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

package/dist/CheckboxGroup/index.js.map

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

package/dist/CheckboxOption/CheckboxOption.css

@@ -1,17 +0,0 @@
-/**
- * CheckboxOption Component Styles
- * Checkbox with label - combines Checkbox and OptionLabel
- */
-
-.dsn-checkbox-option {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--dsn-checkbox-option-gap);
-  padding-block: var(--dsn-checkbox-option-padding-block);
-  cursor: pointer;
-  width: fit-content;
-}
-
-.dsn-checkbox-option:has(input:disabled) {
-  cursor: not-allowed;
-}

package/dist/CheckboxOption/CheckboxOption.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { CheckboxProps } from '../Checkbox';
-import './CheckboxOption.css';
-export interface CheckboxOptionProps extends CheckboxProps {
-    /**
-     * Label text for the checkbox
-     */
-    label: string;
-}
-/**
- * Checkbox with label - combines Checkbox and OptionLabel
- */
-export declare const CheckboxOption: React.ForwardRefExoticComponent<CheckboxOptionProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=CheckboxOption.d.ts.map

package/dist/CheckboxOption/CheckboxOption.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxOption.d.ts","sourceRoot":"","sources":["../../src/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,aAAa,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,8FAYzB,CAAC"}

package/dist/CheckboxOption/CheckboxOption.js

@@ -1,15 +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 { Checkbox } from '../Checkbox';
-import { OptionLabel } from '../OptionLabel';
-import './CheckboxOption.css';
-/**
- * Checkbox with label - combines Checkbox and OptionLabel
- */
-export const CheckboxOption = React.forwardRef(({ label, disabled, className, ...checkboxProps }, ref) => {
-    const wrapperClasses = classNames('dsn-checkbox-option', className);
-    return (_jsxs("label", { className: wrapperClasses, children: [_jsx(Checkbox, { ref: ref, disabled: disabled, ...checkboxProps }), _jsx(OptionLabel, { disabled: disabled, children: label })] }));
-});
-CheckboxOption.displayName = 'CheckboxOption';
-//# sourceMappingURL=CheckboxOption.js.map

package/dist/CheckboxOption/CheckboxOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../src/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAiB,MAAM,aAAa,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,sBAAsB,CAAC;AAS9B;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1D,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAEpE,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,aAC9B,KAAC,QAAQ,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,KAAM,aAAa,GAAI,EAC7D,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,YAAG,KAAK,GAAe,IAChD,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/CheckboxOption/index.d.ts

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

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

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

package/dist/CheckboxOption/index.js

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

package/dist/CheckboxOption/index.js.map

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

package/dist/Container/Container.css

@@ -1,48 +0,0 @@
-/**
- * Container component styles for React
- * Re-exports the base Container styles from components-html
- */
-
-/**
- * Container Component
- * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.
- *
- * Usage:
- * <!-- Standaard -->
- * <div class="dsn-container">
- *   <p class="dsn-paragraph">Inhoud</p>
- * </div>
- *
- * <!-- Elevated (kaart-achtig, met schaduw) -->
- * <div class="dsn-container dsn-container--elevated">
- *   <p class="dsn-paragraph">Inhoud</p>
- * </div>
- *
- * <!-- Semantisch element -->
- * <section class="dsn-container">
- *   <h2 class="dsn-heading dsn-heading--2">Sectietitel</h2>
- *   <p class="dsn-paragraph">Inhoud</p>
- * </section>
- */
-
-/* ===========================
-   Base
-   =========================== */
-.dsn-container {
-  background-color: var(--dsn-container-background-color);
-  border: var(--dsn-container-border-width) solid
-    var(--dsn-container-border-color);
-  border-radius: var(--dsn-container-border-radius);
-  box-shadow: var(--dsn-container-box-shadow);
-  color: var(--dsn-container-color);
-  padding-block: var(--dsn-container-padding-block);
-  padding-inline: var(--dsn-container-padding-inline);
-}
-
-/* ===========================
-   Elevated modifier — kaart-achtige schaduw
-   =========================== */
-.dsn-container--elevated {
-  box-shadow: var(--dsn-container-elevated-box-shadow);
-}
-

package/dist/Container/Container.d.ts

@@ -1,41 +0,0 @@
-import React from 'react';
-import './Container.css';
-export type ContainerAs = 'div' | 'section' | 'article' | 'aside';
-export interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * HTML-element — ontkoppelt semantiek van visuele stijl
-     * @default 'div'
-     */
-    as?: ContainerAs;
-    /**
-     * Voegt een lichte schaduw toe voor een zwevend, kaart-achtig effect
-     * @default false
-     */
-    elevated?: boolean;
-    children?: React.ReactNode;
-}
-/**
- * Container component
- * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.
- *
- * @example
- * ```tsx
- * // Standaard
- * <Container>
- *   <Paragraph>Inhoud</Paragraph>
- * </Container>
- *
- * // Elevated (kaart-achtig)
- * <Container elevated>
- *   <Paragraph>Inhoud</Paragraph>
- * </Container>
- *
- * // Semantisch element
- * <Container as="section">
- *   <Heading level={2}>Sectietitel</Heading>
- *   <Paragraph>Inhoud</Paragraph>
- * </Container>
- * ```
- */
-export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=Container.d.ts.map

package/dist/Container/Container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvE;;;OAGG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;IAEjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,oFAiBrB,CAAC"}

package/dist/Container/Container.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 './Container.css';
-/**
- * Container component
- * Visuele groepering van gerelateerde content met achtergrond, border en optionele schaduw.
- *
- * @example
- * ```tsx
- * // Standaard
- * <Container>
- *   <Paragraph>Inhoud</Paragraph>
- * </Container>
- *
- * // Elevated (kaart-achtig)
- * <Container elevated>
- *   <Paragraph>Inhoud</Paragraph>
- * </Container>
- *
- * // Semantisch element
- * <Container as="section">
- *   <Heading level={2}>Sectietitel</Heading>
- *   <Paragraph>Inhoud</Paragraph>
- * </Container>
- * ```
- */
-export const Container = React.forwardRef(({ as: As = 'div', className, elevated = false, children, ...props }, ref) => {
-    const classes = classNames('dsn-container', elevated && 'dsn-container--elevated', className);
-    return (_jsx(As, { ref: ref, className: classes, ...props, children: children }));
-});
-Container.displayName = 'Container';
-//# sourceMappingURL=Container.js.map

package/dist/Container/Container.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/Container/Container.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,iBAAiB,CAAC;AAoBzB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,QAAQ,IAAI,yBAAyB,EACrC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,KAAC,EAAE,IAAC,GAAG,EAAE,GAAgC,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACrE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/Container/index.d.ts

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

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

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

package/dist/Container/index.js

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

package/dist/Container/index.js.map

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

package/dist/DateInput/DateInput.css

@@ -1,37 +0,0 @@
-/**
- * DateInput Component Styles
- * Fixed-width wrapper positions the Button (subtle, small, icon-only) at inline-end inside the input.
- * The input uses dsn-text-input base styles with extra padding-inline-end
- * to prevent typed text from overlapping the button.
- * Button hover/focus/color states come from the Button component itself.
- */
-
-/* Wrapper — fixed md width (20ch), positions calendar button absolutely inside the input */
-.dsn-date-input-wrapper {
-  position: relative;
-  display: block;
-  inline-size: 100%;
-  max-inline-size: var(--dsn-form-control-width-md);
-}
-
-/* Calendar button — centered vertically, positioned at inline-end with reduced margin */
-.dsn-date-input__button {
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-end: var(--dsn-date-input-button-inset-inline-end);
-  transform: translateY(-50%);
-}
-
-/* Input — extra padding-inline-end to make room for the calendar button */
-/* Hide the native browser calendar/date picker indicator */
-.dsn-date-input {
-  padding-inline-end: var(--dsn-date-input-padding-inline-end-with-icon);
-}
-
-.dsn-date-input::-webkit-calendar-picker-indicator {
-  display: none;
-}
-
-.dsn-date-input::-webkit-inner-spin-button {
-  display: none;
-}

package/dist/DateInput/DateInput.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import '../TextInput/TextInput.css';
-import './DateInput.css';
-export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /**
-     * Whether the input is in an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-/**
- * Date Input component
- * Date input with an interactive calendar button at inline-end that opens the native date picker.
- * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DateInput />
- *
- * // With label
- * <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
- * <DateInput id="date" />
- *
- * // With default value
- * <DateInput defaultValue="2025-03-15" />
- *
- * // Invalid state
- * <DateInput invalid aria-invalid="true" aria-describedby="error" />
- * ```
- */
-export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=DateInput.d.ts.map

package/dist/DateInput/DateInput.d.ts.map

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

package/dist/DateInput/DateInput.js

@@ -1,52 +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 '../TextInput/TextInput.css';
-import './DateInput.css';
-/**
- * Date Input component
- * Date input with an interactive calendar button at inline-end that opens the native date picker.
- * Fixed width (sm) — not configurable, as date inputs have a predictable content width.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DateInput />
- *
- * // With label
- * <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
- * <DateInput id="date" />
- *
- * // With default value
- * <DateInput defaultValue="2025-03-15" />
- *
- * // Invalid state
- * <DateInput invalid aria-invalid="true" aria-describedby="error" />
- * ```
- */
-export const DateInput = React.forwardRef(({ className, invalid, disabled, readOnly, ...props }, ref) => {
-    const inputRef = React.useRef(null);
-    // Merge external ref with internal ref
-    const handleRef = React.useCallback((node) => {
-        inputRef.current =
-            node;
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current =
-                node;
-        }
-    }, [ref]);
-    const handleButtonClick = () => {
-        if (inputRef.current && 'showPicker' in inputRef.current) {
-            inputRef.current.showPicker();
-        }
-    };
-    const inputClasses = classNames('dsn-text-input', 'dsn-date-input', className);
-    return (_jsxs("div", { className: "dsn-date-input-wrapper", children: [_jsx("input", { ref: handleRef, type: "date", className: inputClasses, "aria-invalid": invalid || undefined, disabled: disabled, readOnly: readOnly, ...props }), !disabled && !readOnly && (_jsx(Button, { variant: "subtle", size: "small", iconOnly: true, iconStart: _jsx(Icon, { name: "calendar-event", "aria-hidden": true }), className: "dsn-date-input__button", onClick: handleButtonClick, children: "Datumkiezer openen" }))] }));
-});
-DateInput.displayName = 'DateInput';
-//# sourceMappingURL=DateInput.js.map

package/dist/DateInput/DateInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,iBAAiB,CAAC;AAkBzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEtD,uCAAuC;IACvC,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CACjC,CAAC,IAA6B,EAAE,EAAE;QAC/B,QAA4D,CAAC,OAAO;YACnE,IAAI,CAAC;QACP,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;YAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;QACZ,CAAC;aAAM,IAAI,GAAG,EAAE,CAAC;YACd,GAAuD,CAAC,OAAO;gBAC9D,IAAI,CAAC;QACT,CAAC;IACH,CAAC,EACD,CAAC,GAAG,CAAC,CACN,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,QAAQ,CAAC,OAAO,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACzD,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,gBAAgB,EAChB,gBAAgB,EAChB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,gBACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,YAAY,kBACT,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,KACd,KAAK,GACT,EACD,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CACzB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,wBAAe,EACrD,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,iBAAiB,mCAGnB,CACV,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/DateInput/index.d.ts

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

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

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

package/dist/DateInput/index.js

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

package/dist/DateInput/index.js.map

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

package/dist/DateInputGroup/DateInputGroup.css

@@ -1,30 +0,0 @@
-/**
- * DateInputGroup Component Styles
- * Three inputs (dag, maand, jaar) in a horizontal flex row — GOV.UK date input pattern.
- * Each field has a label above its input.
- */
-
-/* Outer wrapper — flex row with gap between the three fields */
-.dsn-date-input-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--dsn-date-input-group-gap);
-  align-items: flex-end;
-}
-
-/* Each field — label + input stacked vertically */
-.dsn-date-input-group__field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsn-date-input-group-label-gap);
-}
-
-/* Field label — uses form field label styling tokens */
-.dsn-date-input-group__label {
-  font-family: var(--dsn-form-field-label-font-family);
-  font-size: var(--dsn-form-field-label-font-size);
-  font-weight: var(--dsn-form-field-label-font-weight);
-  line-height: var(--dsn-form-field-label-line-height);
-  color: var(--dsn-form-field-label-color);
-}

package/dist/DateInputGroup/DateInputGroup.d.ts

@@ -1,65 +0,0 @@
-import React from 'react';
-import './DateInputGroup.css';
-export interface DateInputGroupValue {
-    day: string;
-    month: string;
-    year: string;
-}
-export interface DateInputGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    /**
-     * The current value of the date group
-     */
-    value?: DateInputGroupValue;
-    /**
-     * Called when any field changes, with the full updated value object
-     */
-    onChange?: (value: DateInputGroupValue) => void;
-    /**
-     * Whether all fields are in an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Whether all fields are disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * id prefix used to generate unique ids for each field (dag, maand, jaar)
-     * E.g. id="geboortedatum" → "geboortedatum-dag", "geboortedatum-maand", "geboortedatum-jaar"
-     */
-    id?: string;
-}
-/**
- * Date Input Group component
- * Three separate inputs for day, month and year.
- * More accessible than a native date picker: works consistently across all browsers and
- * devices, and allows partial input (e.g. year only).
- *
- * Wrap in a FormFieldset for a complete form field with legend and error message.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DateInputGroup
- *   value={{ day: '', month: '', year: '' }}
- *   onChange={(val) => setValue(val)}
- * />
- *
- * // Complete form field
- * <FormFieldset>
- *   <FormFieldLegend>Geboortedatum</FormFieldLegend>
- *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
- *   <DateInputGroup
- *     id="geboortedatum"
- *     value={value}
- *     onChange={setValue}
- *   />
- * </FormFieldset>
- *
- * // Invalid state
- * <DateInputGroup invalid value={value} onChange={setValue} />
- * ```
- */
-export declare const DateInputGroup: React.ForwardRefExoticComponent<DateInputGroupProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=DateInputGroup.d.ts.map

package/dist/DateInputGroup/DateInputGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInputGroup.d.ts","sourceRoot":"","sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAEhD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,cAAc,4FA4EzB,CAAC"}