@k8slens/lds-form 0.52.2 → 0.53.1

package/README.md

@@ -79,7 +79,7 @@ Browse components at [lens-design-system.k8slens.dev](https://lens-design-system
 
 ## AI Assistance
 
-This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `CLAUDE.md`):
+This package includes an `llms.txt` file with API documentation optimized for LLMs. Add to your project's AI configuration (e.g., `AGENTS.md` or `CLAUDE.md`):
 
 ```markdown
 Read node_modules/@k8slens/lds-form/llms.txt for form components reference.

package/lib/cjs/FormTextarea/FormTextarea.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { type TextareaProps } from "@k8slens/lds/lib/es/Textarea/Textarea.d";
+import { type FormFieldProps } from "../FormField/FormField";
+export interface FormTextareaProps extends Omit<TextareaProps, "name">, Pick<FormFieldProps, "label" | "labelProps" | "errorProps"> {
+    /** Field name, used for form submission. */
+    name: string;
+    /** Optional field ID. Auto-generated if not provided. */
+    id?: string;
+    /** Error messages to display below the field. */
+    errors?: string[];
+    /** Whether the field is required. */
+    required?: boolean;
+}
+/**
+ * Textarea wrapped in a form field with label and optional error display.
+ *
+ * Usage: `import { FormTextarea } from "@k8slens/lds-form"`
+ *
+ * ```tsx
+ * <FormTextarea name="description" label="Description" maxLength={500} />
+ * ```
+ */
+export default function FormTextarea({ id: _id, label, labelProps, errorProps, errors, required, ...textareaProps }: FormTextareaProps): React.JSX.Element;

package/lib/cjs/FormTextarea/FormTextarea.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),l=require("../common/useFieldIds.js"),a=require("../FormField/FormField.js"),i=require("../node_modules/@k8slens/lds/lib/es/Textarea/Textarea.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=d(r);module.exports=function(r){var d=r.id,o=r.label,t=r.labelProps,u=r.errorProps,n=r.errors,b=r.required,c=e.__rest(r,["id","label","labelProps","errorProps","errors","required"]),m=l.useFieldIds(d),p=m.id,q=m.labelId,f=m.errorId;return s.default.createElement(a,{id:p,label:o,labelId:q,errorId:f,errors:n,required:b,labelProps:t,errorProps:u},s.default.createElement(i,e.__assign({id:p,"aria-labelledby":q},(null==n?void 0:n.length)?{"aria-invalid":!0,"aria-describedby":f}:{},c)))};

package/lib/cjs/components.d.ts

@@ -3,3 +3,4 @@ export { default as FormErrorMessage } from "./FormErrorMessage/FormErrorMessage
 export { default as FormLabel } from "./FormLabel/FormLabel";
 export { default as FormInput } from "./FormInput/FormInput";
 export { default as FormSwitchGroup } from "./FormSwitchGroup/FormSwitchGroup";
+export { default as FormTextarea } from "./FormTextarea/FormTextarea";

package/lib/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("./common/useFieldIds.js"),e=require("./common/useInputErrorProps.js"),o=require("./common/useFormComponentData.js"),s=require("./common/usePrevious.js"),u=require("./FormField/FormField.js"),m=require("./FormErrorMessage/FormErrorMessage.js"),t=require("./FormLabel/FormLabel.js"),F=require("./FormInput/FormInput.js"),i=require("./FormSwitchGroup/FormSwitchGroup.js"),p={useFieldIds:r.useFieldIds,useInputErrorProps:e.useInputErrorProps,useFormComponentData:o.useFormComponentData,usePrevious:s.usePrevious,defaultErrorParser:o.defaultErrorParser};exports.FormField=u,exports.FormErrorMessage=m,exports.FormLabel=t,exports.FormInput=F,exports.FormSwitchGroup=i,exports.common=p;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("./common/useFieldIds.js"),e=require("./common/useInputErrorProps.js"),o=require("./common/useFormComponentData.js"),s=require("./common/usePrevious.js"),u=require("./FormField/FormField.js"),m=require("./FormErrorMessage/FormErrorMessage.js"),t=require("./FormLabel/FormLabel.js"),F=require("./FormInput/FormInput.js"),a=require("./FormSwitchGroup/FormSwitchGroup.js"),i=require("./FormTextarea/FormTextarea.js"),p={useFieldIds:r.useFieldIds,useInputErrorProps:e.useInputErrorProps,useFormComponentData:o.useFormComponentData,usePrevious:s.usePrevious,defaultErrorParser:o.defaultErrorParser};exports.FormField=u,exports.FormErrorMessage=m,exports.FormLabel=t,exports.FormInput=F,exports.FormSwitchGroup=a,exports.FormTextarea=i,exports.common=p;

package/lib/cjs/node_modules/@k8slens/lds/lib/es/Textarea/Textarea.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),a=require("clsx"),l=require("./Textarea.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(t),r=n(a),s=t.forwardRef((function(a,n){var s,c,i=a.icon,o=a.autoResize,f=void 0!==o&&o,g=a.wrapperProps,d=a.maxLength,p=a.className,h=a.onChange,m=a.value,v=a.defaultValue,x=e.__rest(a,["icon","autoResize","wrapperProps","maxLength","className","onChange","value","defaultValue"]),_=t.useRef(null),y=t.useState((function(){return"string"==typeof m?m.length:"string"==typeof v?v.length:0})),N=y[0],C=y[1],E=t.useCallback((function(e){_.current=e,"function"==typeof n?n(e):n&&(n.current=e)}),[n]),b=t.useCallback((function(){var e=_.current;e&&f&&(e.style.height="auto",e.style.height="".concat(e.scrollHeight,"px"))}),[f]);t.useEffect((function(){b()}),[m,b]),t.useEffect((function(){"string"==typeof m&&null!=d&&C(m.length)}),[m,d]);var w=t.useCallback((function(e){null!=d&&C(e.target.value.length),b(),null==h||h(e)}),[h,b,d]);return u.default.createElement("div",e.__assign({},g,{className:r.default(l.wrapper,null==g?void 0:g.className,(s={},s[l.withIcon]=i,s))}),u.default.createElement("textarea",e.__assign({ref:E},x,{value:m,defaultValue:v,maxLength:d,onChange:w,className:r.default(l.textarea,p,(c={},c[l.autoResize]=f,c))})),i&&u.default.createElement(i,{className:l.icon}),null!=d&&u.default.createElement("span",{className:l.counter,"aria-live":"polite"},N,"/",d))}));module.exports=s;

package/lib/cjs/node_modules/@k8slens/lds/lib/es/Textarea/Textarea.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={wrapper:"lds-textarea--wrapper",textarea:"lds-textarea",autoResize:"lds-textarea--auto-resize",withIcon:"lds-textarea--with-icon",icon:"lds-textarea--icon",counter:"lds-textarea--counter"};

package/lib/es/FormTextarea/FormTextarea.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { type TextareaProps } from "@k8slens/lds/lib/es/Textarea/Textarea.d";
+import { type FormFieldProps } from "../FormField/FormField";
+export interface FormTextareaProps extends Omit<TextareaProps, "name">, Pick<FormFieldProps, "label" | "labelProps" | "errorProps"> {
+    /** Field name, used for form submission. */
+    name: string;
+    /** Optional field ID. Auto-generated if not provided. */
+    id?: string;
+    /** Error messages to display below the field. */
+    errors?: string[];
+    /** Whether the field is required. */
+    required?: boolean;
+}
+/**
+ * Textarea wrapped in a form field with label and optional error display.
+ *
+ * Usage: `import { FormTextarea } from "@k8slens/lds-form"`
+ *
+ * ```tsx
+ * <FormTextarea name="description" label="Description" maxLength={500} />
+ * ```
+ */
+export default function FormTextarea({ id: _id, label, labelProps, errorProps, errors, required, ...textareaProps }: FormTextareaProps): React.JSX.Element;

package/lib/es/FormTextarea/FormTextarea.js

@@ -0,0 +1 @@
+import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import l from"react";import{useFieldIds as o}from"../common/useFieldIds.js";import a from"../FormField/FormField.js";import i from"../node_modules/@k8slens/lds/lib/es/Textarea/Textarea.js";function d(d){var s=d.id,t=d.label,m=d.labelProps,b=d.errorProps,p=d.errors,n=d.required,u=r(d,["id","label","labelProps","errorProps","errors","required"]),f=o(s),c=f.id,P=f.labelId,F=f.errorId;return l.createElement(a,{id:c,label:t,labelId:P,errorId:F,errors:p,required:n,labelProps:m,errorProps:b},l.createElement(i,e({id:c,"aria-labelledby":P},(null==p?void 0:p.length)?{"aria-invalid":!0,"aria-describedby":F}:{},u)))}export{d as default};

package/lib/es/components.d.ts

@@ -3,3 +3,4 @@ export { default as FormErrorMessage } from "./FormErrorMessage/FormErrorMessage
 export { default as FormLabel } from "./FormLabel/FormLabel";
 export { default as FormInput } from "./FormInput/FormInput";
 export { default as FormSwitchGroup } from "./FormSwitchGroup/FormSwitchGroup";
+export { default as FormTextarea } from "./FormTextarea/FormTextarea";

package/lib/es/index.js

@@ -1 +1 @@
-import{useFieldIds as r}from"./common/useFieldIds.js";import{useInputErrorProps as o}from"./common/useInputErrorProps.js";import{useFormComponentData as m,defaultErrorParser as e}from"./common/useFormComponentData.js";import{usePrevious as s}from"./common/usePrevious.js";export{default as FormField}from"./FormField/FormField.js";export{default as FormErrorMessage}from"./FormErrorMessage/FormErrorMessage.js";export{default as FormLabel}from"./FormLabel/FormLabel.js";export{default as FormInput}from"./FormInput/FormInput.js";export{default as FormSwitchGroup}from"./FormSwitchGroup/FormSwitchGroup.js";var t={useFieldIds:r,useInputErrorProps:o,useFormComponentData:m,usePrevious:s,defaultErrorParser:e};export{t as common};
+import{useFieldIds as r}from"./common/useFieldIds.js";import{useInputErrorProps as o}from"./common/useInputErrorProps.js";import{useFormComponentData as e,defaultErrorParser as m}from"./common/useFormComponentData.js";import{usePrevious as s}from"./common/usePrevious.js";export{default as FormField}from"./FormField/FormField.js";export{default as FormErrorMessage}from"./FormErrorMessage/FormErrorMessage.js";export{default as FormLabel}from"./FormLabel/FormLabel.js";export{default as FormInput}from"./FormInput/FormInput.js";export{default as FormSwitchGroup}from"./FormSwitchGroup/FormSwitchGroup.js";export{default as FormTextarea}from"./FormTextarea/FormTextarea.js";var t={useFieldIds:r,useInputErrorProps:o,useFormComponentData:e,usePrevious:s,defaultErrorParser:m};export{t as common};

package/lib/es/node_modules/@k8slens/lds/lib/es/Textarea/Textarea.js

@@ -0,0 +1 @@
+import{__rest as e,__assign as t}from"../_virtual/_tslib.js";import a,{forwardRef as n,useRef as r,useState as l,useCallback as o,useEffect as s}from"react";import u from"clsx";import i from"./Textarea.module.css.js";var c=n((function(n,c){var m,f,p=n.icon,g=n.autoResize,h=void 0!==g&&g,v=n.wrapperProps,x=n.maxLength,d=n.className,N=n.onChange,y=n.value,_=n.defaultValue,w=e(n,["icon","autoResize","wrapperProps","maxLength","className","onChange","value","defaultValue"]),E=r(null),z=l((function(){return"string"==typeof y?y.length:"string"==typeof _?_.length:0})),C=z[0],L=z[1],R=o((function(e){E.current=e,"function"==typeof c?c(e):c&&(c.current=e)}),[c]),V=o((function(){var e=E.current;e&&h&&(e.style.height="auto",e.style.height="".concat(e.scrollHeight,"px"))}),[h]);s((function(){V()}),[y,V]),s((function(){"string"==typeof y&&null!=x&&L(y.length)}),[y,x]);var j=o((function(e){null!=x&&L(e.target.value.length),V(),null==N||N(e)}),[N,V,x]);return a.createElement("div",t({},v,{className:u(i.wrapper,null==v?void 0:v.className,(m={},m[i.withIcon]=p,m))}),a.createElement("textarea",t({ref:R},w,{value:y,defaultValue:_,maxLength:x,onChange:j,className:u(i.textarea,d,(f={},f[i.autoResize]=h,f))})),p&&a.createElement(p,{className:i.icon}),null!=x&&a.createElement("span",{className:i.counter,"aria-live":"polite"},C,"/",x))}));export{c as default};

package/lib/es/node_modules/@k8slens/lds/lib/es/Textarea/Textarea.module.css.js

@@ -0,0 +1 @@
+var e={wrapper:"lds-textarea--wrapper",textarea:"lds-textarea",autoResize:"lds-textarea--auto-resize",withIcon:"lds-textarea--with-icon",icon:"lds-textarea--icon",counter:"lds-textarea--counter"};export{e as default};

package/llms.txt

@@ -69,6 +69,34 @@ import { FormSwitchGroup } from "@k8slens/lds-form";
 <FormSwitchGroup label="Notifications" values={options} onChange={setOptions} />
 ```
 
+### FormTextarea
+
+Textarea wrapped in a FormField with label and error handling. Combines FormField + Textarea from @k8slens/lds.
+
+```tsx
+import { FormTextarea } from "@k8slens/lds-form";
+
+<FormTextarea
+  name="description"
+  label="Description"
+  maxLength={500}
+  autoResize
+  errors={errors}
+  required
+/>
+```
+
+**FormTextarea Props:**
+- Extends `TextareaProps` from @k8slens/lds Textarea component
+- `name` (required) - Field name for form submission
+- `label` - Field label text
+- `labelProps` - Props passed to FormLabel
+- `errorProps` - Props passed to FormErrorMessage
+- `errors` - Array of error messages to display
+- `required` (default: false) - Whether the field is required
+- `id` - Optional field ID (auto-generated if not provided)
+- All Textarea props: `maxLength`, `autoResize`, `icon`, `placeholder`, etc.
+
 ## Hooks
 
 Available via `common` export:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-form",
-  "version": "0.52.2",
+  "version": "0.53.1",
   "description": "Lens Design System – React Form components",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -29,10 +29,10 @@
     "format": "oxlint --fix . && prettier --write ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.57.2"
+    "@k8slens/lds": "^0.58.1"
   },
   "devDependencies": {
-    "@k8slens/lds-tokens": "^0.58.2",
+    "@k8slens/lds-tokens": "^0.59.1",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0",
@@ -56,5 +56,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "1edf9b6761a700920be41adb01f3de528320f639"
+  "gitHead": "5eda1efad729aad60ce149aeca5e9dbd7f92ec3a"
 }