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

package/dist/Checkbox/Checkbox.css

@@ -1,239 +0,0 @@
-/**
- * Checkbox Component Styles
- * Custom checkbox with visual indicator using check.svg icon
- */
-
-.dsn-checkbox {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--dsn-checkbox-size);
-  height: var(--dsn-checkbox-size);
-  flex-shrink: 0;
-}
-
-/* Native checkbox input (visually hidden but accessible) */
-.dsn-checkbox__input {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.dsn-checkbox__input:disabled {
-  cursor: not-allowed;
-}
-
-/* Custom visual control */
-.dsn-checkbox__control {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--dsn-checkbox-border-width) solid
-    var(--dsn-checkbox-border-color);
-  border-radius: var(--dsn-checkbox-border-radius);
-  background-color: var(--dsn-checkbox-background-color);
-  transition:
-    border-color 0.2s ease,
-    background-color 0.2s ease;
-  pointer-events: none;
-}
-
-/* Check icon */
-.dsn-checkbox__icon {
-  width: var(--dsn-checkbox-icon-size);
-  height: var(--dsn-checkbox-icon-size);
-  color: transparent;
-  opacity: 0;
-  transform: scale(0.8);
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease,
-    color 0.2s ease;
-}
-
-/* ========================================================================
-   STATES
-   ======================================================================== */
-
-/* Hover state */
-.dsn-checkbox__input:not(:disabled):hover + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-hover-border-width);
-  border-color: var(--dsn-checkbox-hover-border-color);
-  background-color: var(--dsn-checkbox-hover-background-color);
-}
-
-/* Active state */
-.dsn-checkbox__input:not(:disabled):active + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-active-border-width);
-  border-color: var(--dsn-checkbox-active-border-color);
-  background-color: var(--dsn-checkbox-active-background-color);
-}
-
-/* Focus state */
-.dsn-checkbox__input:focus-visible + .dsn-checkbox__control {
-  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
-    var(--dsn-focus-outline-color);
-  outline-offset: var(--dsn-focus-outline-offset);
-  border-width: var(--dsn-checkbox-focus-border-width);
-  border-color: var(--dsn-checkbox-focus-border-color);
-  background-color: var(--dsn-checkbox-focus-background-color);
-}
-
-/* Checked state */
-.dsn-checkbox__input:checked + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-checked-border-width);
-  border-color: var(--dsn-checkbox-checked-border-color);
-  background-color: var(--dsn-checkbox-checked-background-color);
-}
-
-.dsn-checkbox__input:checked + .dsn-checkbox__control .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-checked-color);
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Checked + Hover */
-.dsn-checkbox__input:checked:not(:disabled):hover + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-checked-hover-border-width);
-  border-color: var(--dsn-checkbox-checked-hover-border-color);
-  background-color: var(--dsn-checkbox-checked-hover-background-color);
-}
-
-.dsn-checkbox__input:checked:not(:disabled):hover
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-checked-hover-color);
-}
-
-/* Checked + Active */
-.dsn-checkbox__input:checked:not(:disabled):active + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-checked-active-border-width);
-  border-color: var(--dsn-checkbox-checked-active-border-color);
-  background-color: var(--dsn-checkbox-checked-active-background-color);
-}
-
-.dsn-checkbox__input:checked:not(:disabled):active
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-checked-active-color);
-}
-
-/* Checked + Focus */
-.dsn-checkbox__input:checked:focus-visible + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-checked-focus-border-width);
-  border-color: var(--dsn-checkbox-checked-focus-border-color);
-  background-color: var(--dsn-checkbox-checked-focus-background-color);
-}
-
-.dsn-checkbox__input:checked:focus-visible
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-checked-focus-color);
-}
-
-/* Indeterminate state */
-.dsn-checkbox__input:indeterminate + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-indeterminate-border-width);
-  border-color: var(--dsn-checkbox-indeterminate-border-color);
-  background-color: var(--dsn-checkbox-indeterminate-background-color);
-}
-
-.dsn-checkbox__input:indeterminate
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-indeterminate-color);
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Indeterminate + Hover */
-.dsn-checkbox__input:indeterminate:not(:disabled):hover
-  + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-indeterminate-hover-border-width);
-  border-color: var(--dsn-checkbox-indeterminate-hover-border-color);
-  background-color: var(--dsn-checkbox-indeterminate-hover-background-color);
-}
-
-.dsn-checkbox__input:indeterminate:not(:disabled):hover
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-indeterminate-hover-color);
-}
-
-/* Indeterminate + Active */
-.dsn-checkbox__input:indeterminate:not(:disabled):active
-  + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-indeterminate-active-border-width);
-  border-color: var(--dsn-checkbox-indeterminate-active-border-color);
-  background-color: var(--dsn-checkbox-indeterminate-active-background-color);
-}
-
-.dsn-checkbox__input:indeterminate:not(:disabled):active
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-indeterminate-active-color);
-}
-
-/* Indeterminate + Focus */
-.dsn-checkbox__input:indeterminate:focus-visible + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-indeterminate-focus-border-width);
-  border-color: var(--dsn-checkbox-indeterminate-focus-border-color);
-  background-color: var(--dsn-checkbox-indeterminate-focus-background-color);
-}
-
-.dsn-checkbox__input:indeterminate:focus-visible
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-indeterminate-focus-color);
-}
-
-/* Disabled state */
-.dsn-checkbox__input:disabled + .dsn-checkbox__control {
-  border-color: var(--dsn-checkbox-disabled-border-color);
-  background-color: var(--dsn-checkbox-disabled-background-color);
-}
-
-/* Checked + Disabled */
-.dsn-checkbox__input:checked:disabled + .dsn-checkbox__control {
-  border-color: var(--dsn-checkbox-checked-disabled-border-color);
-  background-color: var(--dsn-checkbox-checked-disabled-background-color);
-}
-
-.dsn-checkbox__input:checked:disabled
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-checked-disabled-color);
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Indeterminate + Disabled */
-.dsn-checkbox__input:indeterminate:disabled + .dsn-checkbox__control {
-  border-color: var(--dsn-checkbox-indeterminate-disabled-border-color);
-  background-color: var(--dsn-checkbox-indeterminate-disabled-background-color);
-}
-
-.dsn-checkbox__input:indeterminate:disabled
-  + .dsn-checkbox__control
-  .dsn-checkbox__icon {
-  color: var(--dsn-checkbox-indeterminate-disabled-color);
-  opacity: 1;
-  transform: scale(1);
-}
-
-/* Invalid state */
-.dsn-checkbox__input--invalid + .dsn-checkbox__control {
-  border-width: var(--dsn-checkbox-invalid-border-width);
-  border-color: var(--dsn-checkbox-invalid-border-color);
-  background-color: var(--dsn-checkbox-invalid-background-color);
-}
-
-.dsn-checkbox__input--invalid:focus-visible + .dsn-checkbox__control {
-  outline-color: var(--dsn-checkbox-invalid-border-color);
-}

package/dist/Checkbox/Checkbox.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import './Checkbox.css';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /**
-     * Whether the checkbox is in an invalid state
-     */
-    invalid?: boolean;
-    /**
-     * Whether the checkbox is in an indeterminate state
-     */
-    indeterminate?: boolean;
-}
-/**
- * Checkbox component for boolean selection (without label)
- * Use CheckboxOption component to combine with a label
- */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,wFAuCpB,CAAC"}

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