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

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"}

package/dist/DateInputGroup/DateInputGroup.js

@@ -1,53 +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 { NumberInput } from '../NumberInput';
-import './DateInputGroup.css';
-/**
- * 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 const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {
-    const classes = classNames('dsn-date-input-group', className);
-    const handleChange = (field) => (e) => {
-        onChange?.({
-            day: value?.day ?? '',
-            month: value?.month ?? '',
-            year: value?.year ?? '',
-            [field]: e.target.value,
-        });
-    };
-    const dayId = id ? `${id}-dag` : undefined;
-    const monthId = id ? `${id}-maand` : undefined;
-    const yearId = id ? `${id}-jaar` : undefined;
-    return (_jsxs("div", { ref: ref, className: classes, ...props, children: [_jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: dayId, children: "Dag" }), _jsx(NumberInput, { id: dayId, width: "xs", value: value?.day ?? '', onChange: handleChange('day'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "DD", min: 1, max: 31 })] }), _jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: monthId, children: "Maand" }), _jsx(NumberInput, { id: monthId, width: "xs", value: value?.month ?? '', onChange: handleChange('month'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "MM", min: 1, max: 12 })] }), _jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: yearId, children: "Jaar" }), _jsx(NumberInput, { id: yearId, width: "sm", value: value?.year ?? '', onChange: handleChange('year'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "JJJJ", min: 1, max: 9999 })] })] }));
-});
-DateInputGroup.displayName = 'DateInputGroup';
-//# sourceMappingURL=DateInputGroup.js.map

package/dist/DateInputGroup/DateInputGroup.js.map

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

package/dist/DateInputGroup/index.d.ts

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

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

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

package/dist/DateInputGroup/index.js

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

package/dist/DateInputGroup/index.js.map

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

package/dist/Details/Details.css

@@ -1,148 +0,0 @@
-/**
- * Details component styles for React
- * Re-exports the base Details styles from components-html
- */
-
-/**
- * Details Component
- * Expandable disclosure widget based on the native <details>/<summary> element.
- *
- * Usage:
- * <!-- Default (closed) -->
- * <details class="dsn-details">
- *   <summary class="dsn-details__summary">
- *     <svg class="dsn-icon dsn-details__icon" aria-hidden="true"><!-- chevron-down --></svg>
- *     <span class="dsn-details__summary-label">Label</span>
- *   </summary>
- *   <div class="dsn-details__content">
- *     <p class="dsn-paragraph">Aanvullende informatie.</p>
- *   </div>
- * </details>
- *
- * <!-- Default open -->
- * <details class="dsn-details" open>
- *   <summary class="dsn-details__summary">
- *     <svg class="dsn-icon dsn-details__icon" aria-hidden="true"><!-- chevron-down --></svg>
- *     <span class="dsn-details__summary-label">Label</span>
- *   </summary>
- *   <div class="dsn-details__content">
- *     <p class="dsn-paragraph">Inhoud is standaard zichtbaar.</p>
- *   </div>
- * </details>
- */
-
-/* ===========================
-   Base layout
-   =========================== */
-.dsn-details {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--dsn-details-row-gap);
-}
-
-/* ===========================
-   Summary (toggle trigger)
-   =========================== */
-.dsn-details__summary {
-  display: flex;
-  align-items: center;
-  gap: var(--dsn-details-summary-gap);
-  width: fit-content;
-  list-style: none;
-  cursor: pointer;
-}
-
-/* Hide native browser disclosure marker (WebKit) */
-.dsn-details__summary::-webkit-details-marker {
-  display: none;
-}
-
-/* ===========================
-   Summary label
-   =========================== */
-.dsn-details__summary-label {
-  color: var(--dsn-details-summary-color);
-  text-decoration-line: var(--dsn-details-summary-text-decoration-line);
-  text-underline-offset: var(--dsn-details-summary-text-underline-offset);
-  text-decoration-thickness: var(
-    --dsn-details-summary-text-decoration-thickness
-  );
-}
-
-/* ===========================
-   Summary hover state
-   =========================== */
-.dsn-details__summary:hover .dsn-details__summary-label {
-  color: var(--dsn-details-summary-hover-color);
-  text-decoration-line: var(--dsn-details-summary-hover-text-decoration-line);
-}
-
-/* ===========================
-   Summary active state
-   =========================== */
-.dsn-details__summary:active .dsn-details__summary-label {
-  color: var(--dsn-details-summary-active-color);
-}
-
-/* ===========================
-   Summary focus state — consistent met Link component
-   =========================== */
-.dsn-details__summary:focus-visible {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  text-decoration: none;
-  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);
-  box-decoration-break: clone;
-}
-
-/* ===========================
-   Icon — rotates 180° when open
-   =========================== */
-.dsn-details__icon {
-  flex-shrink: 0;
-  width: var(--dsn-details-icon-size);
-  height: var(--dsn-details-icon-size);
-  color: var(--dsn-details-summary-color);
-  transition: transform var(--dsn-transition-duration-normal)
-    var(--dsn-transition-easing-default);
-}
-
-.dsn-details[open] .dsn-details__icon {
-  transform: rotate(180deg);
-}
-
-/* ===========================
-   Forced colors (High Contrast mode)
-   =========================== */
-@media (forced-colors: active) {
-  .dsn-details__icon {
-    forced-color-adjust: auto;
-    color: LinkText;
-  }
-
-  .dsn-details__summary:hover .dsn-details__icon {
-    color: LinkText;
-  }
-}
-
-/* ===========================
-   Content area
-   =========================== */
-.dsn-details__content {
-  margin-inline-start: calc(
-    var(--dsn-details-icon-size) / 2 -
-      var(--dsn-details-content-border-inline-start-width) / 2
-  );
-  background-color: var(--dsn-details-content-background-color);
-  border-inline-start: var(--dsn-details-content-border-inline-start-width)
-    solid var(--dsn-details-content-border-color);
-  padding-inline-start: var(--dsn-details-content-padding-inline-start);
-  padding-inline-end: var(--dsn-details-content-padding-inline-end);
-  padding-block: var(--dsn-details-content-padding-block);
-}
-

package/dist/Details/Details.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import './Details.css';
-export interface DetailsProps extends Omit<React.HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
-    /**
-     * Zichtbare labeltekst in de `<summary>`
-     */
-    summary: string;
-    /**
-     * Standaard open bij eerste render (ongecontroleerde staat)
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt
-     */
-    onToggle?: (open: boolean) => void;
-    /**
-     * De verborgen inhoud
-     */
-    children?: React.ReactNode;
-}
-/**
- * Details component
- * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
- * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
- *
- * @example
- * ```tsx
- * // Standaard gesloten
- * <Details summary="Meer informatie">
- *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
- * </Details>
- *
- * // Standaard open
- * <Details summary="Meer informatie" defaultOpen>
- *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
- * </Details>
- *
- * // Met toggle callback
- * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
- *   <Paragraph>Inhoud.</Paragraph>
- * </Details>
- * ```
- */
-export declare const Details: React.ForwardRefExoticComponent<DetailsProps & React.RefAttributes<HTMLDetailsElement>>;
-//# sourceMappingURL=Details.d.ts.map

package/dist/Details/Details.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EACxC,UAAU,CACX;IACC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,yFA2BnB,CAAC"}

package/dist/Details/Details.js

@@ -1,37 +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 './Details.css';
-/**
- * Details component
- * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
- * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
- *
- * @example
- * ```tsx
- * // Standaard gesloten
- * <Details summary="Meer informatie">
- *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
- * </Details>
- *
- * // Standaard open
- * <Details summary="Meer informatie" defaultOpen>
- *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
- * </Details>
- *
- * // Met toggle callback
- * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
- *   <Paragraph>Inhoud.</Paragraph>
- * </Details>
- * ```
- */
-export const Details = React.forwardRef(({ className, summary, defaultOpen = false, onToggle, children, ...props }, ref) => {
-    const classes = classNames('dsn-details', className);
-    const handleToggle = (event) => {
-        onToggle?.(event.currentTarget.open);
-    };
-    return (_jsxs("details", { ref: ref, className: classes, open: defaultOpen || undefined, onToggle: handleToggle, ...props, children: [_jsxs("summary", { className: "dsn-details__summary", children: [_jsx(Icon, { name: "chevron-down", className: "dsn-details__icon", "aria-hidden": true }), _jsx("span", { className: "dsn-details__summary-label", children: summary })] }), _jsx("div", { className: "dsn-details__content", children: children })] }));
-});
-Details.displayName = 'Details';
-//# sourceMappingURL=Details.js.map

package/dist/Details/Details.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../src/Details/Details.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,eAAe,CAAC;AA4BvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAErD,MAAM,YAAY,GAAG,CAAC,KAA+C,EAAE,EAAE;QACvE,QAAQ,EAAE,CAAE,KAAK,CAAC,aAAoC,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,WAAW,IAAI,SAAS,EAC9B,QAAQ,EAAE,YAAY,KAClB,KAAK,aAET,mBAAS,SAAS,EAAC,sBAAsB,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,mBAAmB,wBAAe,EACtE,eAAM,SAAS,EAAC,4BAA4B,YAAE,OAAO,GAAQ,IACrD,EACV,cAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,IAC9C,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Details/index.d.ts

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

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

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

package/dist/Details/index.js

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

package/dist/Details/index.js.map

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