@k8slens/lds-form 0.52.0 → 0.53.0

package/README.md

@@ -1,29 +1,88 @@
-# Lens Design System – React Form components
+# @k8slens/lds-form
 
-## Documentation
-Browse the documentation at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/form).
+Form components for the Lens Design System – structured form fields with built-in validation.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-form @k8slens/lds @k8slens/lds-tokens
+```
+
+## Setup
+
+```tsx
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
+import "@k8slens/lds/lib/es/index.css";
+import "@k8slens/lds/lib/es/typography.css";
+import "@k8slens/lds-form/lib/es/index.css";
+```
+
+## Usage
+
+### FormInput (with built-in validation)
 
-## What is included?
+`FormInput` is a complete form field that includes label, input, and error message handling:
 
-### ES Modules
-- `./lib/es/index.js` - Main ES module
-- `./lib/es/ComponentName/ComponentName.js` - Individual ES modules
+```tsx
+import { FormInput } from "@k8slens/lds-form";
+
+export const MyForm = () => {
+  const [email, setEmail] = useState("");
+
+  return (
+    <FormInput
+      name="email"
+      type="email"
+      label="Email Address"
+      value={email}
+      onChange={setEmail}
+      required
+    />
+  );
+};
+```
 
-### CommonJS modules
-- `./lib/cjs/index.js` - Main CommonJS module
-- `./lib/cjs/ComponentName/ComponentName.js` - Individual CommonJS modules
+### Building Custom Fields
 
-## Usage with React apps
-- run `npm i -s @k8slens/lds @k8slens/lds-tokens`
-- import `@k8slens/lds-tokens/lib/web/font-imports.css` in your React app to include fonts
-- import `@k8slens/lds/index.css` in your React app to include core styles
-- import `@k8slens/lds-form/index.css` in your React app to include form styles
-- Use in a component:
+For custom layouts, compose with individual components:
 
-```jsx
-import { FormErrorComponent } from "@k8slens/lds-form";
+```tsx
+import { FormField, FormLabel, FormInput, FormErrorMessage } from "@k8slens/lds-form";
 
-export const Component = () => (
-  <FormErrorComponent label="My Button" />
+export const CustomField = () => (
+  <FormField>
+    <FormLabel>Username</FormLabel>
+    <FormInput name="username" type="text" />
+    <FormErrorMessage>Username is required</FormErrorMessage>
+  </FormField>
 );
 ```
+
+### FormSwitchGroup
+
+```tsx
+import { FormSwitchGroup } from "@k8slens/lds-form";
+
+<FormSwitchGroup
+  options={[
+    { id: "email", label: "Email notifications" },
+    { id: "sms", label: "SMS notifications" },
+  ]}
+  value={selected}
+  onChange={setSelected}
+/>;
+```
+
+## Documentation
+
+Browse components at [lens-design-system.k8slens.dev](https://lens-design-system.k8slens.dev/?path=/docs/form).
+
+## AI Assistance
+
+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.
+
+Always use LDS form components and tokens. Search llms.txt before creating custom form fields.
+```

package/lib/cjs/FormInput/FormInput.d.ts

@@ -20,9 +20,13 @@ export interface NumberFormInputProps<CustomError extends string> extends FormFi
 }
 export declare type FormInputProps<CustomError extends string> = NumberFormInputProps<CustomError> | TextFormInputProps<CustomError>;
 /**
- * Input wrapped in Form Field
+ * Input with label, validation, and error handling. Wraps core Input in FormField.
  *
- * Handles validation and errors with accessible label and error notifications.
+ * Usage: `import { FormInput } from "@k8slens/lds-form"`
+ *
+ * ```tsx
+ * <FormInput name="email" type="email" label="Email" value={email} onChange={setEmail} />
+ * ```
  */
 declare function FormInput<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorParser, errorProps: errorComponentProps, value, onChange, type, ...inputProps }: PropsWithChildren<NumberFormInputProps<CustomError> | TextFormInputProps<CustomError>>): React.JSX.Element;
 export default FormInput;

package/lib/cjs/FormSwitchGroup/FormSwitchGroup.d.ts

@@ -16,9 +16,13 @@ export interface FormSwitchGroupProps<CustomError extends string> extends Omit<F
     errors?: Array<string>;
 }
 /**
- * Group of switches wrapped in a Form Field
+ * Multiple toggle switches with shared label and error handling.
  *
- * Displays errors with accessible label and error notifications.
+ * Usage: `import { FormSwitchGroup } from "@k8slens/lds-form"`
+ *
+ * ```tsx
+ * <FormSwitchGroup label="Notifications" values={options} onChange={setOptions} />
+ * ```
  */
 declare function FormSwitchGroup<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorProps: errorComponentProps, values, onChange, type, errors, disabled: allDisabled, ...switchProps }: PropsWithChildren<FormSwitchGroupProps<CustomError>>): React.JSX.Element;
 export default FormSwitchGroup;

package/lib/es/FormInput/FormInput.d.ts

@@ -20,9 +20,13 @@ export interface NumberFormInputProps<CustomError extends string> extends FormFi
 }
 export declare type FormInputProps<CustomError extends string> = NumberFormInputProps<CustomError> | TextFormInputProps<CustomError>;
 /**
- * Input wrapped in Form Field
+ * Input with label, validation, and error handling. Wraps core Input in FormField.
  *
- * Handles validation and errors with accessible label and error notifications.
+ * Usage: `import { FormInput } from "@k8slens/lds-form"`
+ *
+ * ```tsx
+ * <FormInput name="email" type="email" label="Email" value={email} onChange={setEmail} />
+ * ```
  */
 declare function FormInput<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorParser, errorProps: errorComponentProps, value, onChange, type, ...inputProps }: PropsWithChildren<NumberFormInputProps<CustomError> | TextFormInputProps<CustomError>>): React.JSX.Element;
 export default FormInput;

package/lib/es/FormSwitchGroup/FormSwitchGroup.d.ts

@@ -16,9 +16,13 @@ export interface FormSwitchGroupProps<CustomError extends string> extends Omit<F
     errors?: Array<string>;
 }
 /**
- * Group of switches wrapped in a Form Field
+ * Multiple toggle switches with shared label and error handling.
  *
- * Displays errors with accessible label and error notifications.
+ * Usage: `import { FormSwitchGroup } from "@k8slens/lds-form"`
+ *
+ * ```tsx
+ * <FormSwitchGroup label="Notifications" values={options} onChange={setOptions} />
+ * ```
  */
 declare function FormSwitchGroup<CustomError extends string>({ id: _id, label, wrapperProps, labelProps, validate, errorProps: errorComponentProps, values, onChange, type, errors, disabled: allDisabled, ...switchProps }: PropsWithChildren<FormSwitchGroupProps<CustomError>>): React.JSX.Element;
 export default FormSwitchGroup;

package/llms.txt

@@ -0,0 +1,98 @@
+# @k8slens/lds-form
+
+> Form components for the Lens Design System - structured form fields with validation support.
+
+## Installation
+
+```bash
+npm install @k8slens/lds-form @k8slens/lds @k8slens/lds-tokens
+```
+
+### Peer Dependencies
+
+```bash
+npm install react react-dom clsx lodash
+```
+
+## Setup
+
+Import required styles in your app entry point:
+
+```tsx
+import "@k8slens/lds-tokens/lib/electron/font-face.css";
+import "@k8slens/lds/lib/es/index.css";
+import "@k8slens/lds/lib/es/typography.css";
+import "@k8slens/lds-form/lib/es/index.css";
+```
+
+## Components
+
+### FormField
+
+Wrapper component that groups label, input, and error message.
+
+```tsx
+import { FormField, FormLabel, FormInput, FormErrorMessage } from "@k8slens/lds-form";
+
+<FormField>
+  <FormLabel>Email</FormLabel>
+  <FormInput type="email" />
+  <FormErrorMessage>Please enter a valid email</FormErrorMessage>
+</FormField>
+```
+
+### FormInput
+
+Input with label, validation, and error handling. Wraps core Input in FormField.
+
+```tsx
+import { FormInput } from "@k8slens/lds-form";
+
+<FormInput name="email" type="email" label="Email" value={email} onChange={setEmail} />
+```
+
+### FormLabel
+
+Label component for form fields.
+
+### FormErrorMessage
+
+Displays validation error messages.
+
+### FormSwitchGroup
+
+Multiple toggle switches with shared label and error handling.
+
+```tsx
+import { FormSwitchGroup } from "@k8slens/lds-form";
+
+<FormSwitchGroup label="Notifications" values={options} onChange={setOptions} />
+```
+
+## Hooks
+
+Available via `common` export:
+
+```tsx
+import { common } from "@k8slens/lds-form";
+
+const { useFieldIds, useInputErrorProps, useFormComponentData, usePrevious, defaultErrorParser } = common;
+```
+
+- `useFieldIds` - Generate consistent IDs for form fields
+- `useInputErrorProps` - Handle error state props
+- `useFormComponentData` - Form state management
+- `usePrevious` - Track previous values
+- `defaultErrorParser` - Parse validation errors
+
+## Dependencies
+
+This package depends on `@k8slens/lds` core components.
+
+## Documentation
+
+- [Lens Design System](https://lens-design-system.k8slens.dev/)
+
+## Optional
+
+- [npm Package](https://www.npmjs.com/package/@k8slens/lds-form)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-form",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Lens Design System – React Form components",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -15,7 +15,8 @@
   "types": "./lib/es/index.d.ts",
   "type": "module",
   "files": [
-    "lib/"
+    "lib/",
+    "llms.txt"
   ],
   "scripts": {
     "start": "npm run rollup-watch",
@@ -24,14 +25,14 @@
     "rollup": "rollup -c",
     "clean": "rimraf lib",
     "test": "jest",
-    "lint": "eslint .",
-    "format": "eslint --fix ."
+    "lint": "oxlint .",
+    "format": "oxlint --fix . && prettier --write ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.57.0"
+    "@k8slens/lds": "^0.58.0"
   },
   "devDependencies": {
-    "@k8slens/lds-tokens": "^0.58.0",
+    "@k8slens/lds-tokens": "^0.59.0",
     "@rollup/plugin-node-resolve": "15.0.2",
     "@storybook/react": "6.5.16",
     "@testing-library/react": "14.0.0",
@@ -55,5 +56,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "dc375594fe63bf08745b6cfa09c4dc8437a4dc03"
+  "gitHead": "e41693e45edd36a94e34ab286d4ededba24f5daf"
 }