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

package/dist/ProgressBar/ProgressBar.d.mts

@@ -0,0 +1,60 @@
+import React from "react";
+//#region src/ProgressBar/ProgressBar.d.ts
+interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.
+   * Altijd vereist — gekoppeld via `<label for>` aan het `<progress>`-element.
+   */
+  label: string;
+  /**
+   * Huidige voortgang (0 t/m max).
+   */
+  value: number;
+  /**
+   * Maximale waarde. Percentage wordt berekend als Math.round((value / max) * 100).
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Optionele beschrijvende tekst onder de balk.
+   */
+  description?: React.ReactNode;
+  /**
+   * ID voor het `<progress>`-element en de bijbehorende `<label>`.
+   * Automatisch gegenereerd via useId() indien weggelaten.
+   */
+  id?: string;
+  /**
+   * Verbergt het zichtbare percentage-getal. Gebruik dit voor decoratief gebruik
+   * in combinatie met aria-hidden="true" op de component.
+   */
+  hideValue?: boolean;
+}
+/**
+ * ProgressBar component
+ * Horizontale voortgangsbalk voor bepaalde wachttijden.
+ *
+ * Het native <progress>-element biedt impliciete role="progressbar" met
+ * aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen
+ * <label> koppelt de toegankelijke naam via for/id.
+ *
+ * @example
+ * ```tsx
+ * // Basis
+ * <ProgressBar label="Bestand uploaden" value={35} />
+ *
+ * // Met beschrijving
+ * <ProgressBar
+ *   label="Bestand uploaden"
+ *   value={35}
+ *   description="Bestand wordt geüpload, even geduld..."
+ * />
+ *
+ * // Stappen (stap 3 van 7)
+ * <ProgressBar label="Stap voortgang" value={3} max={7} />
+ * ```
+ */
+declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ProgressBar, ProgressBarProps };
+//# sourceMappingURL=ProgressBar.d.mts.map

package/dist/ProgressBar/ProgressBar.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.mts","names":[],"sources":["../../src/ProgressBar/ProgressBar.tsx"],"mappings":";;UAIiB,yBAAyB,MAAM,eAAe;;;;;EAK7D;;;;EAKA;;;;;EAMA;;;;EAKA,cAAc,MAAM;;;;;EAMpB;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;;;;;;cA2BW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/ProgressBar/ProgressBar2.mjs

@@ -0,0 +1,73 @@
+/* empty css             */
+import React, { useId } from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ProgressBar/ProgressBar.tsx
+/**
+* ProgressBar component
+* Horizontale voortgangsbalk voor bepaalde wachttijden.
+*
+* Het native <progress>-element biedt impliciete role="progressbar" met
+* aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen
+* <label> koppelt de toegankelijke naam via for/id.
+*
+* @example
+* ```tsx
+* // Basis
+* <ProgressBar label="Bestand uploaden" value={35} />
+*
+* // Met beschrijving
+* <ProgressBar
+*   label="Bestand uploaden"
+*   value={35}
+*   description="Bestand wordt geüpload, even geduld..."
+* />
+*
+* // Stappen (stap 3 van 7)
+* <ProgressBar label="Stap voortgang" value={3} max={7} />
+* ```
+*/
+const ProgressBar = React.forwardRef(({ className, label, value, max = 100, description, hideValue, id, ...props }, ref) => {
+	const generatedId = useId();
+	const progressId = id ?? generatedId;
+	const descriptionId = description ? `${progressId}-description` : void 0;
+	const percentage = Math.round(value / max * 100);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames("dsn-progress-bar", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				className: "dsn-visually-hidden",
+				htmlFor: progressId,
+				children: label
+			}),
+			!hideValue && /* @__PURE__ */ jsx("div", {
+				className: "dsn-progress-bar__header",
+				children: /* @__PURE__ */ jsxs("p", {
+					className: "dsn-paragraph dsn-progress-bar__percentage",
+					"aria-hidden": "true",
+					children: [percentage, "%"]
+				})
+			}),
+			/* @__PURE__ */ jsxs("progress", {
+				id: progressId,
+				className: "dsn-progress-bar__bar",
+				value,
+				max,
+				"aria-describedby": descriptionId,
+				children: [percentage, "%"]
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				id: descriptionId,
+				className: "dsn-paragraph dsn-progress-bar__description",
+				children: description
+			})
+		]
+	});
+});
+ProgressBar.displayName = "ProgressBar";
+//#endregion
+export { ProgressBar };
+
+//# sourceMappingURL=ProgressBar2.mjs.map

package/dist/ProgressBar/ProgressBar2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar2.mjs","names":[],"sources":["../../src/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './ProgressBar.css';\n\nexport interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.\n   * Altijd vereist — gekoppeld via `<label for>` aan het `<progress>`-element.\n   */\n  label: string;\n\n  /**\n   * Huidige voortgang (0 t/m max).\n   */\n  value: number;\n\n  /**\n   * Maximale waarde. Percentage wordt berekend als Math.round((value / max) * 100).\n   * @default 100\n   */\n  max?: number;\n\n  /**\n   * Optionele beschrijvende tekst onder de balk.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * ID voor het `<progress>`-element en de bijbehorende `<label>`.\n   * Automatisch gegenereerd via useId() indien weggelaten.\n   */\n  id?: string;\n\n  /**\n   * Verbergt het zichtbare percentage-getal. Gebruik dit voor decoratief gebruik\n   * in combinatie met aria-hidden=\"true\" op de component.\n   */\n  hideValue?: boolean;\n}\n\n/**\n * ProgressBar component\n * Horizontale voortgangsbalk voor bepaalde wachttijden.\n *\n * Het native <progress>-element biedt impliciete role=\"progressbar\" met\n * aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen\n * <label> koppelt de toegankelijke naam via for/id.\n *\n * @example\n * ```tsx\n * // Basis\n * <ProgressBar label=\"Bestand uploaden\" value={35} />\n *\n * // Met beschrijving\n * <ProgressBar\n *   label=\"Bestand uploaden\"\n *   value={35}\n *   description=\"Bestand wordt geüpload, even geduld...\"\n * />\n *\n * // Stappen (stap 3 van 7)\n * <ProgressBar label=\"Stap voortgang\" value={3} max={7} />\n * ```\n */\nexport const ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      className,\n      label,\n      value,\n      max = 100,\n      description,\n      hideValue,\n      id,\n      ...props\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const progressId = id ?? generatedId;\n    const descriptionId = description ? `${progressId}-description` : undefined;\n    const percentage = Math.round((value / max) * 100);\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-progress-bar', className)}\n        {...props}\n      >\n        <label className=\"dsn-visually-hidden\" htmlFor={progressId}>\n          {label}\n        </label>\n        {!hideValue && (\n          <div className=\"dsn-progress-bar__header\">\n            <p\n              className=\"dsn-paragraph dsn-progress-bar__percentage\"\n              aria-hidden=\"true\"\n            >\n              {percentage}%\n            </p>\n          </div>\n        )}\n        <progress\n          id={progressId}\n          className=\"dsn-progress-bar__bar\"\n          value={value}\n          max={max}\n          aria-describedby={descriptionId}\n        >\n          {percentage}%\n        </progress>\n        {description && (\n          <p\n            id={descriptionId}\n            className=\"dsn-paragraph dsn-progress-bar__description\"\n          >\n            {description}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAa,cAAc,MAAM,YAE7B,EACE,WACA,OACA,OACA,MAAM,KACN,aACA,WACA,IACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,gBAAgB,cAAc,GAAG,WAAW,gBAAgB,KAAA;CAClE,MAAM,aAAa,KAAK,MAAO,QAAQ,MAAO,GAAG;CAEjD,OACE,qBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAHN,UAAA;GAKE,oBAAC,SAAD;IAAO,WAAU;IAAsB,SAAS;IAC7C,UAAA;GACI,CAAA;GACN,CAAC,aACA,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,qBAAC,KAAD;KACE,WAAU;KACV,eAAY;KAFd,UAAA,CAIG,YAAW,GACX;;GACA,CAAA;GAEP,qBAAC,YAAD;IACE,IAAI;IACJ,WAAU;IACH;IACF;IACL,oBAAkB;IALpB,UAAA,CAOG,YAAW,GACJ;;GACT,eACC,oBAAC,KAAD;IACE,IAAI;IACJ,WAAU;IAET,UAAA;GACA,CAAA;EAEF;;AAET,CACF;AAEA,YAAY,cAAc"}

package/dist/ProgressBar/index.d.mts

@@ -0,0 +1,2 @@
+import { ProgressBar, ProgressBarProps } from "./ProgressBar.mjs";
+export { ProgressBar, ProgressBarProps };

package/dist/Radio/Radio.d.mts

@@ -0,0 +1,16 @@
+import React from "react";
+//#region src/Radio/Radio.d.ts
+interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Whether the radio button is in an invalid state
+   */
+  invalid?: boolean;
+}
+/**
+ * Radio button component for single selection (without label)
+ * Use RadioOption component to combine with a label
+ */
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { Radio, RadioProps };
+//# sourceMappingURL=Radio.d.mts.map

package/dist/Radio/Radio.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../src/Radio/Radio.tsx"],"mappings":";;UAIiB,mBAAmB,KAClC,MAAM,oBAAoB;;;;EAM1B;;;;;;cAOW,OAAK,MAAA,0BAAA,aAAA,MAAA,cAAA"}

package/dist/Radio/Radio2.mjs

@@ -0,0 +1,31 @@
+/* empty css       */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Radio/Radio.tsx
+/**
+* Radio button component for single selection (without label)
+* Use RadioOption component to combine with a label
+*/
+const Radio = React.forwardRef(({ invalid, className, ...props }, ref) => {
+	const inputClasses = classNames("dsn-radio__input", invalid && "dsn-radio__input--invalid", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dsn-radio",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type: "radio",
+			className: inputClasses,
+			"aria-invalid": invalid ? "true" : void 0,
+			...props
+		}), /* @__PURE__ */ jsx("span", {
+			className: "dsn-radio__control",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("span", { className: "dsn-radio__inner-circle" })
+		})]
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+export { Radio };
+
+//# sourceMappingURL=Radio2.mjs.map

package/dist/Radio/Radio2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio2.mjs","names":[],"sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Radio.css';\n\nexport interface RadioProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the radio button is in an invalid state\n   */\n  invalid?: boolean;\n}\n\n/**\n * Radio button component for single selection (without label)\n * Use RadioOption component to combine with a label\n */\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  ({ invalid, className, ...props }, ref) => {\n    const inputClasses = classNames(\n      'dsn-radio__input',\n      invalid && 'dsn-radio__input--invalid',\n      className\n    );\n\n    return (\n      <div className=\"dsn-radio\">\n        <input\n          ref={ref}\n          type=\"radio\"\n          className={inputClasses}\n          aria-invalid={invalid ? 'true' : undefined}\n          {...props}\n        />\n        <span className=\"dsn-radio__control\" aria-hidden=\"true\">\n          <span className=\"dsn-radio__inner-circle\"></span>\n        </span>\n      </div>\n    );\n  }\n);\n\nRadio.displayName = 'Radio';\n"],"mappings":";;;;;;;;;AAkBA,MAAa,QAAQ,MAAM,YACxB,EAAE,SAAS,WAAW,GAAG,SAAS,QAAQ;CACzC,MAAM,eAAe,WACnB,oBACA,WAAW,6BACX,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,gBAAc,UAAU,SAAS,KAAA;GACjC,GAAI;EACL,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;GAAqB,eAAY;GAC/C,UAAA,oBAAC,QAAD,EAAM,WAAU,0BAAgC,CAAA;EAC5C,CAAA,CACH;;AAET,CACF;AAEA,MAAM,cAAc"}

package/dist/Radio/index.d.mts

@@ -0,0 +1,2 @@
+import { Radio, RadioProps } from "./Radio.mjs";
+export { Radio, type RadioProps };

package/dist/RadioGroup/RadioGroup.d.mts

@@ -0,0 +1,39 @@
+import React from "react";
+//#region src/RadioGroup/RadioGroup.d.ts
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Radio options to display in the group
+   */
+  children: React.ReactNode;
+}
+/**
+ * Radio Group component
+ * Container for multiple RadioOption 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)
+ * <RadioGroup>
+ *   <RadioOption name="gender" label="Man" value="male" />
+ *   <RadioOption name="gender" label="Vrouw" value="female" />
+ *   <RadioOption name="gender" label="Anders" value="other" />
+ * </RadioGroup>
+ *
+ * // Complete form field (with FormFieldset and FormFieldLegend)
+ * <FormFieldset>
+ *   <FormFieldLegend>Geslacht</FormFieldLegend>
+ *   <RadioGroup>
+ *     <RadioOption name="gender" label="Man" value="male" />
+ *     <RadioOption name="gender" label="Vrouw" value="female" />
+ *     <RadioOption name="gender" label="Anders" value="other" />
+ *   </RadioGroup>
+ * </FormFieldset>
+ * ```
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { RadioGroup, RadioGroupProps };
+//# sourceMappingURL=RadioGroup.d.mts.map

package/dist/RadioGroup/RadioGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.mts","names":[],"sources":["../../src/RadioGroup/RadioGroup.tsx"],"mappings":";;UAIiB,wBAAwB,MAAM,eAAe;;;;EAI5D,UAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8BL,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/RadioGroup/RadioGroup2.mjs

@@ -0,0 +1,46 @@
+/* empty css            */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/RadioGroup/RadioGroup.tsx
+/**
+* Radio Group component
+* Container for multiple RadioOption 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)
+* <RadioGroup>
+*   <RadioOption name="gender" label="Man" value="male" />
+*   <RadioOption name="gender" label="Vrouw" value="female" />
+*   <RadioOption name="gender" label="Anders" value="other" />
+* </RadioGroup>
+*
+* // Complete form field (with FormFieldset and FormFieldLegend)
+* <FormFieldset>
+*   <FormFieldLegend>Geslacht</FormFieldLegend>
+*   <RadioGroup>
+*     <RadioOption name="gender" label="Man" value="male" />
+*     <RadioOption name="gender" label="Vrouw" value="female" />
+*     <RadioOption name="gender" label="Anders" value="other" />
+*   </RadioGroup>
+* </FormFieldset>
+* ```
+*/
+const RadioGroup = React.forwardRef(({ className, children, ...props }, ref) => {
+	const classes = classNames("dsn-radio-group", className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+RadioGroup.displayName = "RadioGroup";
+//#endregion
+export { RadioGroup };
+
+//# sourceMappingURL=RadioGroup2.mjs.map

package/dist/RadioGroup/RadioGroup2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup2.mjs","names":[],"sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './RadioGroup.css';\n\nexport interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Radio options to display in the group\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Radio Group component\n * Container for multiple RadioOption components\n *\n * Note: This is just a list container. For a complete form field with label,\n * wrap this in a FormFieldset component.\n *\n * @example\n * ```tsx\n * // Basic usage (list only)\n * <RadioGroup>\n *   <RadioOption name=\"gender\" label=\"Man\" value=\"male\" />\n *   <RadioOption name=\"gender\" label=\"Vrouw\" value=\"female\" />\n *   <RadioOption name=\"gender\" label=\"Anders\" value=\"other\" />\n * </RadioGroup>\n *\n * // Complete form field (with FormFieldset and FormFieldLegend)\n * <FormFieldset>\n *   <FormFieldLegend>Geslacht</FormFieldLegend>\n *   <RadioGroup>\n *     <RadioOption name=\"gender\" label=\"Man\" value=\"male\" />\n *     <RadioOption name=\"gender\" label=\"Vrouw\" value=\"female\" />\n *     <RadioOption name=\"gender\" label=\"Anders\" value=\"other\" />\n *   </RadioGroup>\n * </FormFieldset>\n * ```\n */\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  ({ className, children, ...props }, ref) => {\n    const classes = classNames('dsn-radio-group', className);\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nRadioGroup.displayName = 'RadioGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,UAAU,WAAW,mBAAmB,SAAS;CAEvD,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EACpC;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc"}

package/dist/RadioGroup/index.d.mts

@@ -0,0 +1,2 @@
+import { RadioGroup, RadioGroupProps } from "./RadioGroup.mjs";
+export { RadioGroup, type RadioGroupProps };

package/dist/RadioOption/RadioOption.d.mts

@@ -0,0 +1,17 @@
+import { RadioProps } from "../Radio/Radio.mjs";
+import "../Radio/index.mjs";
+import React from "react";
+//#region src/RadioOption/RadioOption.d.ts
+interface RadioOptionProps extends RadioProps {
+  /**
+   * Label text for the radio button
+   */
+  label: string;
+}
+/**
+ * Radio button with label - combines Radio and OptionLabel
+ */
+declare const RadioOption: React.ForwardRefExoticComponent<RadioOptionProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { RadioOption, RadioOptionProps };
+//# sourceMappingURL=RadioOption.d.mts.map

package/dist/RadioOption/RadioOption.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.d.mts","names":[],"sources":["../../src/RadioOption/RadioOption.tsx"],"mappings":";;;;UAMiB,yBAAyB;;;;EAIxC;;;;;cAMW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/RadioOption/RadioOption2.mjs

@@ -0,0 +1,29 @@
+import { OptionLabel } from "../OptionLabel/OptionLabel2.mjs";
+import { Radio } from "../Radio/Radio2.mjs";
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/RadioOption/RadioOption.tsx
+/**
+* Radio button with label - combines Radio and OptionLabel
+*/
+const RadioOption = React.forwardRef(({ label, disabled, className, ...radioProps }, ref) => {
+	const wrapperClasses = classNames("dsn-radio-option", className);
+	return /* @__PURE__ */ jsxs("label", {
+		className: wrapperClasses,
+		children: [/* @__PURE__ */ jsx(Radio, {
+			ref,
+			disabled,
+			...radioProps
+		}), /* @__PURE__ */ jsx(OptionLabel, {
+			disabled,
+			children: label
+		})]
+	});
+});
+RadioOption.displayName = "RadioOption";
+//#endregion
+export { RadioOption };
+
+//# sourceMappingURL=RadioOption2.mjs.map

package/dist/RadioOption/RadioOption2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption2.mjs","names":[],"sources":["../../src/RadioOption/RadioOption.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Radio, RadioProps } from '../Radio';\nimport { OptionLabel } from '../OptionLabel';\nimport './RadioOption.css';\n\nexport interface RadioOptionProps extends RadioProps {\n  /**\n   * Label text for the radio button\n   */\n  label: string;\n}\n\n/**\n * Radio button with label - combines Radio and OptionLabel\n */\nexport const RadioOption = React.forwardRef<HTMLInputElement, RadioOptionProps>(\n  ({ label, disabled, className, ...radioProps }, ref) => {\n    const wrapperClasses = classNames('dsn-radio-option', className);\n\n    return (\n      <label className={wrapperClasses}>\n        <Radio ref={ref} disabled={disabled} {...radioProps} />\n        <OptionLabel disabled={disabled}>{label}</OptionLabel>\n      </label>\n    );\n  }\n);\n\nRadioOption.displayName = 'RadioOption';\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,cAAc,MAAM,YAC9B,EAAE,OAAO,UAAU,WAAW,GAAG,cAAc,QAAQ;CACtD,MAAM,iBAAiB,WAAW,oBAAoB,SAAS;CAE/D,OACE,qBAAC,SAAD;EAAO,WAAW;EAAlB,UAAA,CACE,oBAAC,OAAD;GAAY;GAAe;GAAU,GAAI;EAAa,CAAA,GACtD,oBAAC,aAAD;GAAuB;GAAW,UAAA;EAAmB,CAAA,CAChD;;AAEX,CACF;AAEA,YAAY,cAAc"}

package/dist/RadioOption/index.d.mts

@@ -0,0 +1,2 @@
+import { RadioOption, RadioOptionProps } from "./RadioOption.mjs";
+export { RadioOption, type RadioOptionProps };

package/dist/SearchInput/SearchInput.d.mts

@@ -0,0 +1,41 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/SearchInput/SearchInput.d.ts
+interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the input
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * Search Input component
+ * Search input with a non-interactive search icon positioned at inline-start.
+ * The icon has the same color as the input text (dsn-text-input-color).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SearchInput placeholder="Zoeken..." />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="search">Zoeken</FormFieldLabel>
+ * <SearchInput id="search" />
+ *
+ * // Invalid state
+ * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { SearchInput, SearchInputProps };
+//# sourceMappingURL=SearchInput.d.mts.map

package/dist/SearchInput/SearchInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.mts","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"mappings":";;;UAMiB,yBAAyB,KACxC,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;;cAqBW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/SearchInput/SearchInput2.mjs

@@ -0,0 +1,48 @@
+import { Icon } from "../Icon/Icon2.mjs";
+/* empty css                      */
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/SearchInput/SearchInput.tsx
+/**
+* Search Input component
+* Search input with a non-interactive search icon positioned at inline-start.
+* The icon has the same color as the input text (dsn-text-input-color).
+*
+* @example
+* ```tsx
+* // Basic usage
+* <SearchInput placeholder="Zoeken..." />
+*
+* // With label
+* <FormFieldLabel htmlFor="search">Zoeken</FormFieldLabel>
+* <SearchInput id="search" />
+*
+* // Invalid state
+* <SearchInput invalid aria-invalid="true" aria-describedby="error" />
+* ```
+*/
+const SearchInput = React.forwardRef(({ className, invalid, width, ...props }, ref) => {
+	const wrapperClasses = classNames("dsn-search-input-wrapper", width && `dsn-search-input-wrapper--width-${width}`);
+	const inputClasses = classNames("dsn-text-input", "dsn-search-input", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClasses,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "search",
+			className: "dsn-search-input__icon",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("input", {
+			ref,
+			type: "search",
+			className: inputClasses,
+			"aria-invalid": invalid || void 0,
+			...props
+		})]
+	});
+});
+SearchInput.displayName = "SearchInput";
+//#endregion
+export { SearchInput };
+
+//# sourceMappingURL=SearchInput2.mjs.map

package/dist/SearchInput/SearchInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput2.mjs","names":[],"sources":["../../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './SearchInput.css';\n\nexport interface SearchInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Search Input component\n * Search input with a non-interactive search icon positioned at inline-start.\n * The icon has the same color as the input text (dsn-text-input-color).\n *\n * @example\n * ```tsx\n * // Basic usage\n * <SearchInput placeholder=\"Zoeken...\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"search\">Zoeken</FormFieldLabel>\n * <SearchInput id=\"search\" />\n *\n * // Invalid state\n * <SearchInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n  ({ className, invalid, width, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-search-input-wrapper',\n      width && `dsn-search-input-wrapper--width-${width}`\n    );\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-search-input',\n      className\n    );\n\n    return (\n      <div className={wrapperClasses}>\n        <Icon name=\"search\" className=\"dsn-search-input__icon\" aria-hidden />\n        <input\n          ref={ref}\n          type=\"search\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\n\nSearchInput.displayName = 'SearchInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,SAAS,OAAO,GAAG,SAAS,QAAQ;CAChD,MAAM,iBAAiB,WACrB,4BACA,SAAS,mCAAmC,OAC9C;CACA,MAAM,eAAe,WACnB,kBACA,oBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,MAAD;GAAM,MAAK;GAAS,WAAU;GAAyB,eAAA;EAAa,CAAA,GACpE,oBAAC,SAAD;GACO;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACzB,GAAI;EACL,CAAA,CACE;;AAET,CACF;AAEA,YAAY,cAAc"}

package/dist/SearchInput/index.d.mts

@@ -0,0 +1,2 @@
+import { SearchInput, SearchInputProps } from "./SearchInput.mjs";
+export { SearchInput, type SearchInputProps };

package/dist/Select/Select.d.mts

@@ -0,0 +1,53 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/Select/Select.d.ts
+interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * Whether the select is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the select
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * Select component
+ * Dropdown select with a custom chevron-down icon at inline-end.
+ * The native select arrow is hidden; the custom icon is decorative and non-interactive.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select>
+ *   <option value="">Kies een optie</option>
+ *   <option value="1">Optie 1</option>
+ *   <option value="2">Optie 2</option>
+ * </Select>
+ *
+ * // With label
+ * <FormField label="Land" htmlFor="land">
+ *   <Select id="land">
+ *     <option value="">Kies een land</option>
+ *     <option value="nl">Nederland</option>
+ *     <option value="be">België</option>
+ *   </Select>
+ * </FormField>
+ *
+ * // Width variant
+ * <Select width="lg">...</Select>
+ *
+ * // Invalid state
+ * <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
+ * ```
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//#endregion
+export { Select, SelectProps };
+//# sourceMappingURL=Select.d.mts.map

package/dist/Select/Select.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.mts","names":[],"sources":["../../src/Select/Select.tsx"],"mappings":";;;UAMiB,oBAAoB,MAAM,qBAAqB;;;;;EAK9D;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCW,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA"}

package/dist/Select/Select2.mjs

@@ -0,0 +1,61 @@
+import { Icon } from "../Icon/Icon2.mjs";
+/* empty css                      */
+/* empty css        */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Select/Select.tsx
+/**
+* Select component
+* Dropdown select with a custom chevron-down icon at inline-end.
+* The native select arrow is hidden; the custom icon is decorative and non-interactive.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <Select>
+*   <option value="">Kies een optie</option>
+*   <option value="1">Optie 1</option>
+*   <option value="2">Optie 2</option>
+* </Select>
+*
+* // With label
+* <FormField label="Land" htmlFor="land">
+*   <Select id="land">
+*     <option value="">Kies een land</option>
+*     <option value="nl">Nederland</option>
+*     <option value="be">België</option>
+*   </Select>
+* </FormField>
+*
+* // Width variant
+* <Select width="lg">...</Select>
+*
+* // Invalid state
+* <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
+* ```
+*/
+const Select = React.forwardRef(({ className, invalid, width, disabled, children, ...props }, ref) => {
+	const wrapperClasses = classNames("dsn-select-wrapper", width && `dsn-select-wrapper--width-${width}`);
+	const selectClasses = classNames("dsn-text-input", "dsn-select", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: wrapperClasses,
+		children: [/* @__PURE__ */ jsx("select", {
+			ref,
+			className: selectClasses,
+			"aria-invalid": invalid || void 0,
+			disabled,
+			...props,
+			children
+		}), !disabled && /* @__PURE__ */ jsx(Icon, {
+			name: "chevron-down",
+			className: "dsn-select__icon",
+			"aria-hidden": true
+		})]
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };
+
+//# sourceMappingURL=Select2.mjs.map

package/dist/Select/Select2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select2.mjs","names":[],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './Select.css';\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n  /**\n   * Whether the select is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the select\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Select component\n * Dropdown select with a custom chevron-down icon at inline-end.\n * The native select arrow is hidden; the custom icon is decorative and non-interactive.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Select>\n *   <option value=\"\">Kies een optie</option>\n *   <option value=\"1\">Optie 1</option>\n *   <option value=\"2\">Optie 2</option>\n * </Select>\n *\n * // With label\n * <FormField label=\"Land\" htmlFor=\"land\">\n *   <Select id=\"land\">\n *     <option value=\"\">Kies een land</option>\n *     <option value=\"nl\">Nederland</option>\n *     <option value=\"be\">België</option>\n *   </Select>\n * </FormField>\n *\n * // Width variant\n * <Select width=\"lg\">...</Select>\n *\n * // Invalid state\n * <Select invalid aria-invalid=\"true\" aria-describedby=\"error\">...</Select>\n * ```\n */\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  ({ className, invalid, width, disabled, children, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-select-wrapper',\n      width && `dsn-select-wrapper--width-${width}`\n    );\n\n    const selectClasses = classNames('dsn-text-input', 'dsn-select', className);\n\n    return (\n      <div className={wrapperClasses}>\n        <select\n          ref={ref}\n          className={selectClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          {...props}\n        >\n          {children}\n        </select>\n        {!disabled && (\n          <Icon name=\"chevron-down\" className=\"dsn-select__icon\" aria-hidden />\n        )}\n      </div>\n    );\n  }\n);\n\nSelect.displayName = 'Select';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,SAAS,MAAM,YACzB,EAAE,WAAW,SAAS,OAAO,UAAU,UAAU,GAAG,SAAS,QAAQ;CACpE,MAAM,iBAAiB,WACrB,sBACA,SAAS,6BAA6B,OACxC;CAEA,MAAM,gBAAgB,WAAW,kBAAkB,cAAc,SAAS;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAW;EAAhB,UAAA,CACE,oBAAC,UAAD;GACO;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACV,GAAI;GAEH;EACK,CAAA,GACP,CAAC,YACA,oBAAC,MAAD;GAAM,MAAK;GAAe,WAAU;GAAmB,eAAA;EAAa,CAAA,CAEnE;;AAET,CACF;AAEA,OAAO,cAAc"}

package/dist/Select/index.d.mts

@@ -0,0 +1,2 @@
+import { Select, SelectProps } from "./Select.mjs";
+export { Select, type SelectProps };