@dsn-starter-kit/components-react 3.5.0 → 4.1.0

package/dist/Select/Select2.mjs

@@ -27,15 +27,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
 *   </Select>
 * </FormField>
 *
-* // Width variant
-* <Select width="lg">...</Select>
+* // Inline-size variant
+* <Select inlineSize="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 Select = React.forwardRef(({ className, invalid, inlineSize, disabled, children, ...props }, ref) => {
+	const wrapperClasses = classNames("dsn-select-wrapper", inlineSize && `dsn-select-wrapper--inline-size-${inlineSize}`);
 	const selectClasses = classNames("dsn-text-input", "dsn-select", className);
 	return /* @__PURE__ */ jsxs("div", {
 		className: wrapperClasses,

package/dist/Select/Select2.mjs.map

@@ -1 +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 './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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,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"}
+{"version":3,"file":"Select2.mjs","names":[],"sources":["../../src/Select/Select.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\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   * Inline-size variant for the select\n   * @default undefined (uses default max-inline-size from form-control)\n   */\n  inlineSize?: FormControlInlineSize;\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 * // Inline-size variant\n * <Select inlineSize=\"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, inlineSize, disabled, children, ...props }, ref) => {\n    const wrapperClasses = classNames(\n      'dsn-select-wrapper',\n      inlineSize && `dsn-select-wrapper--inline-size-${inlineSize}`\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,SAAS,MAAM,YACzB,EAAE,WAAW,SAAS,YAAY,UAAU,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,iBAAiB,WACrB,sBACA,cAAc,mCAAmC,YACnD;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/TelephoneInput/TelephoneInput.d.mts

@@ -1,6 +1,11 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/TelephoneInput/TelephoneInput.d.ts
+/**
+ * Inline-size variants offered by TelephoneInput. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type TelephoneInputInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
   /**
    * Whether the input is in an invalid state
@@ -8,10 +13,10 @@ interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
    */
   invalid?: boolean;
   /**
-   * Width variant for the input
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the input (md, lg, xl or full)
+   * @default 'md'
    */
-  width?: FormControlWidth;
+  inlineSize?: TelephoneInputInlineSize;
   /**
    * Additional CSS class names
    */
@@ -36,5 +41,5 @@ interface TelephoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEl
  */
 declare const TelephoneInput: React.ForwardRefExoticComponent<TelephoneInputProps & React.RefAttributes<HTMLInputElement>>;
 //#endregion
-export { TelephoneInput, TelephoneInputProps };
+export { TelephoneInput, TelephoneInputInlineSize, TelephoneInputProps };
 //# sourceMappingURL=TelephoneInput.d.mts.map

package/dist/TelephoneInput/TelephoneInput.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TelephoneInput.d.mts","names":[],"sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"mappings":";;;UAIiB,4BAA4B,KAC3C,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;cAoBW,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}
+{"version":3,"file":"TelephoneInput.d.mts","names":[],"sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"mappings":";;;;;;;KAQY,2BAA2B,QACrC;UAIe,4BAA4B,KAC3C,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,aAAa;;;;EAKb;;;;;;;;;;;;;;;;;;;cAoBW,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/TelephoneInput/TelephoneInput2.mjs

@@ -20,8 +20,8 @@ import { jsx } from "react/jsx-runtime";
 * <TelephoneInput invalid aria-invalid="true" aria-describedby="error" />
 * ```
 */
-const TelephoneInput = React.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
-	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TelephoneInput = React.forwardRef(({ className, invalid, inlineSize = "md", autoComplete, ...props }, ref) => {
+	const classes = classNames("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ jsx("input", {
 		ref,
 		type: "tel",

package/dist/TelephoneInput/TelephoneInput2.mjs.map

@@ -1 +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"}
+{"version":3,"file":"TelephoneInput2.mjs","names":[],"sources":["../../src/TelephoneInput/TelephoneInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport './TelephoneInput.css';\n\n/**\n * Inline-size variants offered by TelephoneInput. xs and sm are left out: they\n * are too narrow for the content this field is meant for.\n */\nexport type TelephoneInputInlineSize = Exclude<\n  FormControlInlineSize,\n  'xs' | 'sm'\n>;\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   * Inline-size variant for the input (md, lg, xl or full)\n   * @default 'md'\n   */\n  inlineSize?: TelephoneInputInlineSize;\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, inlineSize = 'md', autoComplete, ...props }, ref) => {\n  const classes = classNames(\n    'dsn-text-input',\n    inlineSize && `dsn-text-input--inline-size-${inlineSize}`,\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":";;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,SAAS,aAAa,MAAM,cAAc,GAAG,SAAS,QAAQ;CAC5E,MAAM,UAAU,WACd,kBACA,cAAc,+BAA+B,cAC7C,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"}

package/dist/TextArea/TextArea.d.mts

@@ -1,6 +1,11 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/TextArea/TextArea.d.ts
+/**
+ * Inline-size variants offered by TextArea. xs and sm are left out: they
+ * are too narrow for the content this field is meant for.
+ */
+type TextAreaInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;
 interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * Additional CSS class names
@@ -12,10 +17,10 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
    */
   invalid?: boolean;
   /**
-   * Width variant for the textarea
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the textarea (md, lg, xl or full)
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: TextAreaInlineSize;
 }
 /**
  * Text Area component
@@ -42,5 +47,5 @@ interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
  */
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 //#endregion
-export { TextArea, TextAreaProps };
+export { TextArea, TextAreaInlineSize, TextAreaProps };
 //# sourceMappingURL=TextArea.d.mts.map

package/dist/TextArea/TextArea.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.mts","names":[],"sources":["../../src/TextArea/TextArea.tsx"],"mappings":";;;UAIiB,sBAAsB,MAAM,uBAAuB;;;;EAIlE;;;;;EAMA;;;;;EAMA,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;cA0BG,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}
+{"version":3,"file":"TextArea.d.mts","names":[],"sources":["../../src/TextArea/TextArea.tsx"],"mappings":";;;;;;;KAQY,qBAAqB,QAAQ;UAExB,sBAAsB,MAAM,uBAAuB;;;;EAIlE;;;;;EAMA;;;;;EAMA,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cA0BF,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/TextArea/TextArea2.mjs

@@ -26,8 +26,8 @@ import { jsx } from "react/jsx-runtime";
 * <TextArea readOnly value="View only" rows={3} />
 * ```
 */
-const TextArea = React.forwardRef(({ className, invalid, width, rows = 4, ...props }, ref) => {
-	const classes = classNames("dsn-text-area", width && `dsn-text-area--width-${width}`, className);
+const TextArea = React.forwardRef(({ className, invalid, inlineSize, rows = 4, ...props }, ref) => {
+	const classes = classNames("dsn-text-area", inlineSize && `dsn-text-area--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ jsx("textarea", {
 		ref,
 		className: classes,

package/dist/TextArea/TextArea2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea2.mjs","names":[],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextArea.css';\n\nexport interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the textarea is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the textarea\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n}\n\n/**\n * Text Area component\n * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your bio\" rows={4} />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"bio\">Biography</FormFieldLabel>\n * <TextArea id=\"bio\" rows={6} />\n *\n * // Disabled\n * <TextArea disabled value=\"Cannot edit\" rows={3} />\n *\n * // Invalid\n * <TextArea invalid aria-invalid=\"true\" aria-describedby=\"error\" rows={4} />\n *\n * // Read-only\n * <TextArea readOnly value=\"View only\" rows={3} />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, invalid, width, rows = 4, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-area',\n      width && `dsn-text-area--width-${width}`,\n      className\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        className={classes}\n        rows={rows}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,SAAS,OAAO,OAAO,GAAG,GAAG,SAAS,QAAQ;CAC1D,MAAM,UAAU,WACd,iBACA,SAAS,wBAAwB,SACjC,SACF;CAEA,OACE,oBAAC,YAAD;EACO;EACL,WAAW;EACL;EACN,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"TextArea2.mjs","names":[],"sources":["../../src/TextArea/TextArea.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport './TextArea.css';\n\n/**\n * Inline-size variants offered by TextArea. xs and sm are left out: they\n * are too narrow for the content this field is meant for.\n */\nexport type TextAreaInlineSize = Exclude<FormControlInlineSize, 'xs' | 'sm'>;\n\nexport interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the textarea is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Inline-size variant for the textarea (md, lg, xl or full)\n   * @default undefined (uses default max-inline-size from form-control)\n   */\n  inlineSize?: TextAreaInlineSize;\n}\n\n/**\n * Text Area component\n * Multi-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your bio\" rows={4} />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"bio\">Biography</FormFieldLabel>\n * <TextArea id=\"bio\" rows={6} />\n *\n * // Disabled\n * <TextArea disabled value=\"Cannot edit\" rows={3} />\n *\n * // Invalid\n * <TextArea invalid aria-invalid=\"true\" aria-describedby=\"error\" rows={4} />\n *\n * // Read-only\n * <TextArea readOnly value=\"View only\" rows={3} />\n * ```\n */\nexport const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, invalid, inlineSize, rows = 4, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-area',\n      inlineSize && `dsn-text-area--inline-size-${inlineSize}`,\n      className\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        className={classes}\n        rows={rows}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,SAAS,YAAY,OAAO,GAAG,GAAG,SAAS,QAAQ;CAC/D,MAAM,UAAU,WACd,iBACA,cAAc,8BAA8B,cAC5C,SACF;CAEA,OACE,oBAAC,YAAD;EACO;EACL,WAAW;EACL;EACN,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

package/dist/TextInput/TextInput.d.mts

@@ -1,5 +1,5 @@
 import React from "react";
-import { FormControlWidth } from "@dsn-starter-kit/core";
+import { FormControlInlineSize } from "@dsn-starter-kit/core";
 //#region src/TextInput/TextInput.d.ts
 interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   /**
@@ -12,10 +12,10 @@ interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    */
   invalid?: boolean;
   /**
-   * Width variant for the input
-   * @default undefined (uses default max-width from form-control)
+   * Inline-size variant for the input
+   * @default undefined (uses default max-inline-size from form-control)
    */
-  width?: FormControlWidth;
+  inlineSize?: FormControlInlineSize;
 }
 /**
  * Text Input component

package/dist/TextInput/TextInput.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.mts","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"mappings":";;;UAIiB,uBAAuB,MAAM,oBAAoB;;;;EAIhE;;;;;EAMA;;;;;EAMA,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;cA0BG,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}
+{"version":3,"file":"TextInput.d.mts","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"mappings":";;;UAIiB,uBAAuB,MAAM,oBAAoB;;;;EAIhE;;;;;EAMA;;;;;EAMA,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cA0BF,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/TextInput/TextInput2.mjs

@@ -26,8 +26,8 @@ import { jsx } from "react/jsx-runtime";
 * <TextInput readOnly value="Cannot edit this" />
 * ```
 */
-const TextInput = React.forwardRef(({ className, invalid, width, type = "text", ...props }, ref) => {
-	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+const TextInput = React.forwardRef(({ className, invalid, inlineSize, type = "text", ...props }, ref) => {
+	const classes = classNames("dsn-text-input", inlineSize && `dsn-text-input--inline-size-${inlineSize}`, className);
 	return /* @__PURE__ */ jsx("input", {
 		ref,
 		type,

package/dist/TextInput/TextInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput2.mjs","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport './TextInput.css';\n\nexport interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\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/**\n * Text Input component\n * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextInput placeholder=\"Enter your name\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">Email</FormFieldLabel>\n * <TextInput id=\"email\" type=\"email\" />\n *\n * // Disabled\n * <TextInput disabled value=\"Read only value\" />\n *\n * // Invalid\n * <TextInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n *\n * // Read-only\n * <TextInput readOnly value=\"Cannot edit this\" />\n * ```\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, invalid, width, type = 'text', ...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={type}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextInput.displayName = 'TextInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,OAAO,OAAO,QAAQ,GAAG,SAAS,QAAQ;CAC/D,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACC;EACN,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"TextInput2.mjs","names":[],"sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlInlineSize } from '@dsn-starter-kit/core';\nimport './TextInput.css';\n\nexport interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Inline-size variant for the input\n   * @default undefined (uses default max-inline-size from form-control)\n   */\n  inlineSize?: FormControlInlineSize;\n}\n\n/**\n * Text Input component\n * Single-line text input with support for various states (hover, focus, disabled, invalid, read-only)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextInput placeholder=\"Enter your name\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">Email</FormFieldLabel>\n * <TextInput id=\"email\" type=\"email\" />\n *\n * // Disabled\n * <TextInput disabled value=\"Read only value\" />\n *\n * // Invalid\n * <TextInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n *\n * // Read-only\n * <TextInput readOnly value=\"Cannot edit this\" />\n * ```\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  ({ className, invalid, inlineSize, type = 'text', ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      inlineSize && `dsn-text-input--inline-size-${inlineSize}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type={type}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nTextInput.displayName = 'TextInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,YAAY,OAAO,QAAQ,GAAG,SAAS,QAAQ;CACpE,MAAM,UAAU,WACd,kBACA,cAAc,+BAA+B,cAC7C,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACC;EACN,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/TimeInput/TimeInput.d.mts

@@ -14,7 +14,7 @@ interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 /**
  * Time Input component
  * Time input with an interactive clock button at inline-end that opens the native time picker.
- * Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+ * Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
  *
  * @example
  * ```tsx

package/dist/TimeInput/TimeInput2.mjs

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Time Input component
 * Time input with an interactive clock button at inline-end that opens the native time picker.
-* Fixed width (sm) — not configurable, as time inputs have a predictable content width.
+* Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.
 *
 * @example
 * ```tsx

package/dist/TimeInput/TimeInput2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './TimeInput.css';\n\nexport interface TimeInputProps 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   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed width (sm) — not configurable, as time inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}
+{"version":3,"file":"TimeInput2.mjs","names":[],"sources":["../../src/TimeInput/TimeInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './TimeInput.css';\n\nexport interface TimeInputProps 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   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Time Input component\n * Time input with an interactive clock button at inline-end that opens the native time picker.\n * Fixed inline-size (sm): not configurable, as time inputs have a predictable content length.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TimeInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"time\">Tijd</FormFieldLabel>\n * <TimeInput id=\"time\" />\n *\n * // With default value\n * <TimeInput defaultValue=\"14:30\" />\n *\n * // Invalid state\n * <TimeInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-time-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-time-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"time\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"clock\" aria-hidden />}\n            className=\"dsn-time-input__button\"\n            onClick={handleButtonClick}\n          >\n            Tijdkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nTimeInput.displayName = 'TimeInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAQ,eAAA;GAAa,CAAA;GAC3C,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}