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

package/css.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Type-stub voor de CSS- en SCSS-exports van dit package.
+ *
+ * Een side-effect import zoals `import '@dsn-starter-kit/core/css'` moet voor
+ * TypeScript naar een module oplossen. Zonder deze stub faalt dat met TS2882
+ * ("Cannot find module or type declarations for side-effect import") zodra de
+ * consument `noUncheckedSideEffectImports` aanzet, en tonen editors een fout
+ * ook als `tsc` zwijgt.
+ *
+ * Elke CSS- en SCSS-entry in de `exports`-map van de package.json wijst met
+ * haar `types`-conditie naar dit bestand. Eén stub per package is genoeg; hij
+ * blijft bewust binnen het package, zodat het gepubliceerde artifact nooit naar
+ * een bestand buiten zijn eigen map wijst.
+ *
+ * Leeg met opzet: deze imports leveren geen waarde op, alleen stijl.
+ */
+export {};

package/dist/DateInputGroup/DateInputGroup2.mjs

@@ -1,4 +1,4 @@
-import { NumberInput } from "../NumberInput/NumberInput.mjs";
+import { NumberInput } from "../NumberInput/NumberInput2.mjs";
 /* empty css                */
 import React from "react";
 import { classNames } from "@dsn-starter-kit/core";

package/dist/EmailInput/{EmailInput.mjs → EmailInput2.mjs}

@@ -1,4 +1,4 @@
-/* empty css                      */
+/* empty css            */
 import React from "react";
 import { classNames } from "@dsn-starter-kit/core";
 import { jsx } from "react/jsx-runtime";
@@ -36,4 +36,4 @@ EmailInput.displayName = "EmailInput";
 //#endregion
 export { EmailInput };
 
-//# sourceMappingURL=EmailInput.mjs.map
+//# sourceMappingURL=EmailInput2.mjs.map

package/dist/EmailInput/EmailInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput2.mjs","names":[],"sources":["../../src/EmailInput/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './EmailInput.css';\n\nexport interface EmailInputProps 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 * Email Input component\n * Email input with appropriate inputmode and autocomplete\n *\n * @example\n * ```tsx\n * // Basic usage\n * <EmailInput placeholder=\"naam@voorbeeld.nl\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">E-mailadres</FormFieldLabel>\n * <EmailInput id=\"email\" />\n *\n * // Invalid state\n * <EmailInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(\n  ({ className, invalid, width, autoComplete, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"email\"\n        inputMode=\"email\"\n        className={classes}\n        autoComplete={autoComplete || 'email'}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nEmailInput.displayName = 'EmailInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,SAAS,OAAO,cAAc,GAAG,SAAS,QAAQ;CAC9D,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAU;EACV,WAAW;EACX,cAAc,gBAAgB;EAC9B,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,WAAW,cAAc"}

package/dist/NumberInput/{NumberInput.mjs → NumberInput2.mjs}

@@ -1,4 +1,4 @@
-/* empty css                      */
+/* empty css             */
 import React from "react";
 import { classNames } from "@dsn-starter-kit/core";
 import { jsx } from "react/jsx-runtime";
@@ -37,4 +37,4 @@ NumberInput.displayName = "NumberInput";
 //#endregion
 export { NumberInput };
 
-//# sourceMappingURL=NumberInput.mjs.map
+//# sourceMappingURL=NumberInput2.mjs.map

package/dist/NumberInput/NumberInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput2.mjs","names":[],"sources":["../../src/NumberInput/NumberInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './NumberInput.css';\n\nexport interface NumberInputProps 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   * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:\n   * inputmode=\"numeric\" + pattern=\"[0-9]*\" for a numeric-only keyboard.\n   * When true, uses inputmode=\"decimal\" without pattern restriction.\n   * @default false\n   */\n  allowDecimals?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Number Input component\n * Uses type=\"text\" with inputmode=\"decimal\" for better mobile UX (no spinner buttons)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <NumberInput placeholder=\"0,00\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"amount\">Bedrag</FormFieldLabel>\n * <NumberInput id=\"amount\" />\n *\n * // Invalid state\n * <NumberInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  ({ className, invalid, width, allowDecimals = false, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"text\"\n        inputMode={allowDecimals ? 'decimal' : 'numeric'}\n        pattern={allowDecimals ? undefined : '[0-9]*'}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        autoComplete=\"off\"\n        {...props}\n      />\n    );\n  }\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,SAAS,OAAO,gBAAgB,OAAO,GAAG,SAAS,QAAQ;CACvE,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW,gBAAgB,YAAY;EACvC,SAAS,gBAAgB,KAAA,IAAY;EACrC,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,cAAa;EACb,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAY,cAAc"}

package/dist/PasswordInput/{PasswordInput.mjs → PasswordInput2.mjs}

@@ -1,4 +1,4 @@
-/* empty css                      */
+/* empty css               */
 import React from "react";
 import { classNames } from "@dsn-starter-kit/core";
 import { jsx } from "react/jsx-runtime";
@@ -40,4 +40,4 @@ PasswordInput.displayName = "PasswordInput";
 //#endregion
 export { PasswordInput };
 
-//# sourceMappingURL=PasswordInput.mjs.map
+//# sourceMappingURL=PasswordInput2.mjs.map

package/dist/PasswordInput/PasswordInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput2.mjs","names":[],"sources":["../../src/PasswordInput/PasswordInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './PasswordInput.css';\n\nexport type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';\n\nexport interface PasswordInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Autocomplete hint for password managers\n   * - 'current-password': voor inlogformulieren (default)\n   * - 'new-password': voor registratie- en wachtwoord wijzigformulieren\n   * - 'off': autocomplete uitschakelen\n   * @default 'current-password'\n   */\n  passwordAutocomplete?: PasswordAutocomplete;\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 * Password Input component\n * Uses type=\"password\" for secure text entry.\n * Het tonen/verbergen van het wachtwoord is bewust niet ingebouwd in dit component —\n * dat patroon wordt separaat gedefinieerd via een Button naast het invoerveld.\n *\n * @example\n * ```tsx\n * // Login form (current password)\n * <PasswordInput placeholder=\"Wachtwoord\" />\n *\n * // Registration form (new password)\n * <PasswordInput passwordAutocomplete=\"new-password\" placeholder=\"Nieuw wachtwoord\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"password\">Wachtwoord</FormFieldLabel>\n * <PasswordInput id=\"password\" />\n *\n * // Invalid state\n * <PasswordInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const PasswordInput = React.forwardRef<\n  HTMLInputElement,\n  PasswordInputProps\n>(\n  (\n    {\n      passwordAutocomplete = 'current-password',\n      className,\n      invalid,\n      width,\n      autoComplete,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"password\"\n        className={classes}\n        autoComplete={autoComplete || passwordAutocomplete}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nPasswordInput.displayName = 'PasswordInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,MAAa,gBAAgB,MAAM,YAK/B,EACE,uBAAuB,oBACvB,WACA,SACA,OACA,cACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW;EACX,cAAc,gBAAgB;EAC9B,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,cAAc,cAAc"}

package/dist/TelephoneInput/{TelephoneInput.mjs → TelephoneInput2.mjs}

@@ -1,4 +1,4 @@
-/* empty css                      */
+/* empty css                */
 import React from "react";
 import { classNames } from "@dsn-starter-kit/core";
 import { jsx } from "react/jsx-runtime";
@@ -36,4 +36,4 @@ TelephoneInput.displayName = "TelephoneInput";
 //#endregion
 export { TelephoneInput };
 
-//# sourceMappingURL=TelephoneInput.mjs.map
+//# sourceMappingURL=TelephoneInput2.mjs.map

package/dist/TelephoneInput/TelephoneInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TelephoneInput2.mjs","names":[],"sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TelephoneInput.css';\n\nexport interface TelephoneInputProps 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 * Telephone Input component\n * Telephone input with appropriate inputmode and autocomplete\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TelephoneInput placeholder=\"06 12345678\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"phone\">Telefoonnummer</FormFieldLabel>\n * <TelephoneInput id=\"phone\" />\n *\n * // Invalid state\n * <TelephoneInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TelephoneInput = React.forwardRef<\n  HTMLInputElement,\n  TelephoneInputProps\n>(({ className, invalid, width, autoComplete, ...props }, ref) => {\n  const classes = classNames(\n    'dsn-text-input',\n    width && `dsn-text-input--width-${width}`,\n    className\n  );\n\n  return (\n    <input\n      ref={ref}\n      type=\"tel\"\n      inputMode=\"tel\"\n      className={classes}\n      autoComplete={autoComplete || 'tel'}\n      aria-invalid={invalid || undefined}\n      {...props}\n    />\n  );\n});\n\nTelephoneInput.displayName = 'TelephoneInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,SAAS,OAAO,cAAc,GAAG,SAAS,QAAQ;CAChE,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAU;EACV,WAAW;EACX,cAAc,gBAAgB;EAC9B,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CAAC;AAED,eAAe,cAAc"}