@atelier-ui/react 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,30 @@
1
+ ## 0.0.21 (2026-04-23)
2
+
3
+ ### 🚀 Features
4
+
5
+ - **a11y:** add invalid-state glyph to LlmInput (WCAG 1.4.1) ([a79064d](https://github.com/DominikPieper/atelier-ui/commit/a79064d))
6
+ - **a11y:** add invalid-state glyph to LlmTextarea (WCAG 1.4.1) ([60b6657](https://github.com/DominikPieper/atelier-ui/commit/60b6657))
7
+
8
+ ### 🩹 Fixes
9
+
10
+ - **tokens:** align dark-mode --ui-color-on-primary with @media value (AA) ([#0](https://github.com/DominikPieper/atelier-ui/issues/0), [#00](https://github.com/DominikPieper/atelier-ui/issues/00))
11
+
12
+ ### ❤️ Thank You
13
+
14
+ - Claude Opus 4.7 (1M context)
15
+ - Dominik Pieper @DominikPieper
16
+
17
+ ## 0.0.20 (2026-04-23)
18
+
19
+ ### 🚀 Features
20
+
21
+ - **a11y:** add Unicode indicator glyphs to Badge + Alert semantic variants ([05104c8](https://github.com/DominikPieper/atelier-ui/commit/05104c8))
22
+
23
+ ### ❤️ Thank You
24
+
25
+ - Claude Opus 4.7 (1M context)
26
+ - Dominik Pieper @DominikPieper
27
+
1
28
  ## 0.0.19 (2026-04-23)
2
29
 
3
30
  ### 🩹 Fixes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atelier-ui/react",
3
- "version": "0.0.19",
3
+ "version": "0.0.21",
4
4
  "description": "Atelier UI component library for React — LLM-optimised, accessible, design-token-driven",
5
5
  "keywords": [
6
6
  "react",
@@ -1 +1 @@
1
- {"version":3,"file":"llm-input.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/llm-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,EACtE,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,aAAa,2CAgDf"}
1
+ {"version":3,"file":"llm-input.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/llm-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,iBAAiB,CAAC;AAEzB;;GAEG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,EACtE,YAAY;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;IAChE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAa,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,aAAa,2CAkDf"}
@@ -20,6 +20,6 @@ export function LlmInput({ type = 'text', value, onChange, onValueChange, invali
20
20
  onValueChange?.(e.target.value);
21
21
  };
22
22
  const errorId = inputId ? `${inputId}-errors` : undefined;
23
- return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("input", { id: inputId, type: type, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
23
+ return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("div", { className: "input-field", children: _jsx("input", { id: inputId, type: type, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }) }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
24
24
  }
25
25
  //# sourceMappingURL=llm-input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"llm-input.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/llm-input.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAsCzB;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACO;IACd,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,OAAO,GACX,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG;QACd,WAAW;QACX,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;QACd,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,gBAAO,OAAO,EAAE,OAAO,YAAG,KAAK,GAAS,EAClD,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KACrD,IAAI,GACR,EACD,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes } from 'react';\nimport type { LlmInputSpec } from '../spec';\nimport './llm-input.css';\n\n/**\n * Properties for the LlmInput component.\n */\nexport interface LlmInputProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'>,\n LlmInputSpec {\n /**\n * The type of input to render.\n */\n type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n /**\n * The current value of the input.\n */\n value?: string;\n /**\n * Callback triggered when the value changes.\n */\n onValueChange?: (value: string) => void;\n /**\n * Whether the input is in an invalid state.\n */\n invalid?: boolean;\n /**\n * Array of error messages to display.\n */\n errors?: string[];\n /**\n * The label for the input.\n */\n label?: string;\n /**\n * Whether the input is read-only.\n */\n readOnly?: boolean;\n}\n\n/**\n * A versatile input component for text entry.\n */\nexport function LlmInput({\n type = 'text',\n value,\n onChange,\n onValueChange,\n invalid = false,\n errors = [],\n disabled = false,\n readOnly: reactReadOnly,\n readonly: specReadOnly,\n required = false,\n label,\n className,\n id,\n ...rest\n}: LlmInputProps) {\n const readOnly = reactReadOnly ?? specReadOnly ?? false;\n const inputId =\n id || (label ? `input-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n const classes = [\n 'llm-input',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n readOnly && 'is-readonly',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n };\n\n const errorId = inputId ? `${inputId}-errors` : undefined;\n\n return (\n <div className={classes}>\n {label && <label htmlFor={inputId}>{label}</label>}\n <input\n id={inputId}\n type={type}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n {...rest}\n />\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"llm-input.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/input/llm-input.tsx"],"names":[],"mappings":";AAEA,OAAO,iBAAiB,CAAC;AAsCzB;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,GAAG,MAAM,EACb,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACO;IACd,MAAM,QAAQ,GAAG,aAAa,IAAI,YAAY,IAAI,KAAK,CAAC;IACxD,MAAM,OAAO,GACX,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG;QACd,WAAW;QACX,OAAO,IAAI,YAAY;QACvB,QAAQ,IAAI,aAAa;QACzB,QAAQ,IAAI,aAAa;QACzB,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;QACd,aAAa,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACpB,KAAK,IAAI,gBAAO,OAAO,EAAE,OAAO,YAAG,KAAK,GAAS,EAClD,cAAK,SAAS,EAAC,aAAa,YAC1B,gBACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,kBACJ,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,sBAClB,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,KACrD,IAAI,GACR,GACE,EACL,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,CACpB,cAAK,SAAS,EAAC,QAAQ,EAAC,EAAE,EAAE,OAAO,eAAY,QAAQ,YACpD,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,YAAW,SAAS,EAAC,eAAe,YACjC,GAAG,IADE,CAAC,CAEL,CACL,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { InputHTMLAttributes } from 'react';\nimport type { LlmInputSpec } from '../spec';\nimport './llm-input.css';\n\n/**\n * Properties for the LlmInput component.\n */\nexport interface LlmInputProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'readOnly'>,\n LlmInputSpec {\n /**\n * The type of input to render.\n */\n type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';\n /**\n * The current value of the input.\n */\n value?: string;\n /**\n * Callback triggered when the value changes.\n */\n onValueChange?: (value: string) => void;\n /**\n * Whether the input is in an invalid state.\n */\n invalid?: boolean;\n /**\n * Array of error messages to display.\n */\n errors?: string[];\n /**\n * The label for the input.\n */\n label?: string;\n /**\n * Whether the input is read-only.\n */\n readOnly?: boolean;\n}\n\n/**\n * A versatile input component for text entry.\n */\nexport function LlmInput({\n type = 'text',\n value,\n onChange,\n onValueChange,\n invalid = false,\n errors = [],\n disabled = false,\n readOnly: reactReadOnly,\n readonly: specReadOnly,\n required = false,\n label,\n className,\n id,\n ...rest\n}: LlmInputProps) {\n const readOnly = reactReadOnly ?? specReadOnly ?? false;\n const inputId =\n id || (label ? `input-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n const classes = [\n 'llm-input',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n readOnly && 'is-readonly',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n };\n\n const errorId = inputId ? `${inputId}-errors` : undefined;\n\n return (\n <div className={classes}>\n {label && <label htmlFor={inputId}>{label}</label>}\n <div className=\"input-field\">\n <input\n id={inputId}\n type={type}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n {...rest}\n />\n </div>\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"llm-textarea.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/llm-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACnE,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,UAAkB,EAClB,IAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,2CA+DlB"}
1
+ {"version":3,"file":"llm-textarea.d.ts","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/llm-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAqB,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,oBAAoB,CAAC;AAE5B;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC,EACnE,eAAe;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,aAAa,EACb,OAAe,EACf,MAAW,EACX,QAAgB,EAChB,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,QAAgB,EAChB,KAAK,EACL,UAAkB,EAClB,IAAQ,EACR,SAAS,EACT,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,2CAiElB"}
@@ -34,6 +34,6 @@ export function LlmTextarea({ value, onChange, onValueChange, invalid = false, e
34
34
  }
35
35
  };
36
36
  const errorId = inputId ? `${inputId}-errors` : undefined;
37
- return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("textarea", { ref: textareaRef, id: inputId, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, rows: rows, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
37
+ return (_jsxs("div", { className: classes, children: [label && _jsx("label", { htmlFor: inputId, children: label }), _jsx("div", { className: "textarea-field", children: _jsx("textarea", { ref: textareaRef, id: inputId, value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, required: required, rows: rows, "aria-invalid": invalid || undefined, "aria-required": required || undefined, "aria-describedby": errors.length > 0 ? errorId : undefined, ...rest }) }), errors.length > 0 && (_jsx("div", { className: "errors", id: errorId, "aria-live": "polite", children: errors.map((err, i) => (_jsx("p", { className: "error-message", children: err }, i))) }))] }));
38
38
  }
39
39
  //# sourceMappingURL=llm-textarea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"llm-textarea.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/llm-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextareaHTMLAttributes, useRef, useEffect } from 'react';\nimport type { LlmTextareaSpec } from '../spec';\nimport './llm-textarea.css';\n\n/**\n * Properties for the LlmTextarea component.\n */\nexport interface LlmTextareaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>,\n LlmTextareaSpec {\n /**\n * Current value of the textarea.\n */\n value?: string;\n /**\n * Whether the textarea is read-only.\n */\n readOnly?: boolean;\n /**\n * Callback fired when the value changes.\n */\n onValueChange?: (value: string) => void;\n /**\n * List of error messages to display.\n */\n errors?: string[];\n /**\n * Label text for the textarea.\n */\n label?: string;\n}\n\n/**\n * A multi-line text input component that supports automatic resizing and validation states.\n */\nexport function LlmTextarea({\n value,\n onChange,\n onValueChange,\n invalid = false,\n errors = [],\n disabled = false,\n readOnly: reactReadOnly,\n readonly: specReadOnly,\n required = false,\n label,\n autoResize = false,\n rows = 3,\n className,\n id,\n ...rest\n}: LlmTextareaProps) {\n const readOnly = reactReadOnly ?? specReadOnly ?? false;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const inputId =\n id || (label ? `textarea-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n const classes = [\n 'llm-textarea',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n readOnly && 'is-readonly',\n autoResize && 'is-auto-resize',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n useEffect(() => {\n if (autoResize && textareaRef.current) {\n const el = textareaRef.current;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }\n }, [value, autoResize]);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n if (autoResize && textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n };\n\n const errorId = inputId ? `${inputId}-errors` : undefined;\n\n return (\n <div className={classes}>\n {label && <label htmlFor={inputId}>{label}</label>}\n <textarea\n ref={textareaRef}\n id={inputId}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={rows}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n {...rest}\n />\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
1
+ {"version":3,"file":"llm-textarea.js","sourceRoot":"","sources":["../../../../../../libs/react/src/lib/textarea/llm-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { TextareaHTMLAttributes, useRef, useEffect } from 'react';\nimport type { LlmTextareaSpec } from '../spec';\nimport './llm-textarea.css';\n\n/**\n * Properties for the LlmTextarea component.\n */\nexport interface LlmTextareaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly'>,\n LlmTextareaSpec {\n /**\n * Current value of the textarea.\n */\n value?: string;\n /**\n * Whether the textarea is read-only.\n */\n readOnly?: boolean;\n /**\n * Callback fired when the value changes.\n */\n onValueChange?: (value: string) => void;\n /**\n * List of error messages to display.\n */\n errors?: string[];\n /**\n * Label text for the textarea.\n */\n label?: string;\n}\n\n/**\n * A multi-line text input component that supports automatic resizing and validation states.\n */\nexport function LlmTextarea({\n value,\n onChange,\n onValueChange,\n invalid = false,\n errors = [],\n disabled = false,\n readOnly: reactReadOnly,\n readonly: specReadOnly,\n required = false,\n label,\n autoResize = false,\n rows = 3,\n className,\n id,\n ...rest\n}: LlmTextareaProps) {\n const readOnly = reactReadOnly ?? specReadOnly ?? false;\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const inputId =\n id || (label ? `textarea-${label.toLowerCase().replace(/\\s+/g, '-')}` : undefined);\n const classes = [\n 'llm-textarea',\n invalid && 'is-invalid',\n disabled && 'is-disabled',\n readOnly && 'is-readonly',\n autoResize && 'is-auto-resize',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n useEffect(() => {\n if (autoResize && textareaRef.current) {\n const el = textareaRef.current;\n el.style.height = 'auto';\n el.style.height = `${el.scrollHeight}px`;\n }\n }, [value, autoResize]);\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n onValueChange?.(e.target.value);\n if (autoResize && textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }\n };\n\n const errorId = inputId ? `${inputId}-errors` : undefined;\n\n return (\n <div className={classes}>\n {label && <label htmlFor={inputId}>{label}</label>}\n <div className=\"textarea-field\">\n <textarea\n ref={textareaRef}\n id={inputId}\n value={value}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n rows={rows}\n aria-invalid={invalid || undefined}\n aria-required={required || undefined}\n aria-describedby={errors.length > 0 ? errorId : undefined}\n {...rest}\n />\n </div>\n {errors.length > 0 && (\n <div className=\"errors\" id={errorId} aria-live=\"polite\">\n {errors.map((err, i) => (\n <p key={i} className=\"error-message\">\n {err}\n </p>\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}