@dsn-starter-kit/components-react 1.0.0

package/dist/Checkbox/Checkbox.css

@@ -0,0 +1,239 @@
+/**
+ * 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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

package/dist/Checkbox/index.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,10 @@
+/**
+ * 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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

package/dist/CheckboxGroup/index.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+/**
+ * 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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

package/dist/CheckboxOption/index.js.map

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,48 @@
+/**
+ * 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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

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

package/dist/Container/index.js.map

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