@festo-ui/react 10.1.0 → 10.1.1-dev.918

package/llm-doc/forms.md

@@ -0,0 +1,333 @@
+# Form Components
+
+## TextInput
+
+Text field with label, hint, error display, and icon.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | Label text |
+| `value` | `string` | Controlled |
+| `defaultValue` | `string` | Initial value |
+| `onChange` | `(value: string, event) => void` | Callback |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `icon` | `ReactNode` | Icon on the right |
+| `readonly` | `boolean` | Read-only |
+
+### Example
+```tsx
+<TextInput label="Username" defaultValue="max" hint="Hint" placeholder="Enter..." />
+```
+
+### Controlled
+```tsx
+const [value, setValue] = useState('');
+<TextInput label="Name" value={value} onChange={setValue} />
+```
+
+### Validation
+```tsx
+<TextInput label="Name" defaultValue="" minLength={5} required />
+<TextInput label="Error" aria-invalid error="Required field" icon={<IconClose className="fwe-color-red" />} />
+```
+
+---
+
+## TextArea
+
+Multi-line text field.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | **Required.** Label |
+| `value` | `string` | Controlled |
+| `defaultValue` | `string` | Initial value |
+| `onChange` | `(value: string, event) => void` | Callback |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `rows` | `number` | Rows (0 = auto-grow) |
+| `maxLength` | `number` | Max character count |
+
+### Example
+```tsx
+<TextArea label="Description" rows={3} hint="Hint" maxLength={200} />
+```
+
+---
+
+## Select
+
+Dropdown selection.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `SelectOption<T>[]` | **Required.** Array with `{ data: T, label: string \| ReactNode }` |
+| `value` | `T` | Controlled |
+| `defaultValue` | `T` | Initial value |
+| `onChange` | `(value: T) => void` | Callback |
+| `label` | `string` | Label |
+| `name` | `string` | FormData name |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `placeholder` | `string` | Placeholder |
+| `disabled` | `boolean` | Disabled |
+| `required` | `boolean` | Required |
+
+### Example
+```tsx
+const options = [
+  { data: 1, label: 'Option A' },
+  { data: 2, label: 'Option B' },
+  { data: 3, label: 'Option C' },
+];
+
+<Select label="Selection" options={options} defaultValue={1} />
+```
+
+### Controlled
+```tsx
+const [value, setValue] = useState(1);
+<Select label="Selection" options={options} value={value} onChange={setValue} />
+```
+
+---
+
+## ComboBox
+
+Searchable dropdown (Select with text input).
+
+### Props
+Same as `Select`, plus:
+| Prop | Type | Description |
+|------|------|-------------|
+| `onInputChange` | `(value: string) => void` | Callback on text input |
+| `emptyMessage` | `string` | Text when no results |
+
+### Example
+```tsx
+<ComboBox label="Search" options={options} defaultValue={2} />
+```
+
+---
+
+## MultiSelect
+
+Multi-selection dropdown.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `options` | `SelectOption<T>[]` | Options |
+| `value` | `T[]` | Controlled: selected values |
+| `defaultValue` | `T[]` | Initial values |
+| `onChange` | `(value: T[]) => void` | Callback |
+| `label` | `string` | Label |
+| `name` | `string` | FormData name |
+| `hint` | `string` | Hint text |
+| `error` | `string` | Error text |
+| `placeholder` | `string` | Placeholder |
+| `disabled` | `boolean` | Disabled |
+
+### Example
+```tsx
+<MultiSelect
+  label="Categories"
+  options={options}
+  defaultValue={[1, 3]}
+  placeholder="Select..."
+/>
+```
+
+---
+
+## Checkbox
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `checked` | `boolean` | — | Controlled |
+| `defaultChecked` | `boolean` | — | Initial value |
+| `onChange` | `(value: boolean, event) => void` | — | Callback |
+| `large` | `boolean` | `false` | Large |
+| `valid` | `boolean` | `true` | Validation status |
+| `labelPosition` | `"after" \| "before"` | `"after"` | Label position |
+| `indeterminate` | `boolean` | `false` | Indeterminate state |
+
+### Example
+```tsx
+<Checkbox id="terms" name="acceptTerms">Accept terms</Checkbox>
+<Checkbox id="large" large>Large checkbox</Checkbox>
+<Checkbox valid={false}>Invalid</Checkbox>
+<Checkbox indeterminate>Partial</Checkbox>
+```
+
+---
+
+## RadioGroup / RadioButton
+
+### RadioGroup Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | — | Controlled |
+| `defaultValue` | `string` | — | Initial value |
+| `onValueChange` | `(value: string) => void` | — | Callback |
+| `name` | `string` | — | FormData name |
+| `large` | `boolean` | `false` | Large |
+| `labelPosition` | `"after" \| "before" \| "below"` | `"after"` | Label position |
+| `disabled` | `boolean` | `false` | Disabled |
+| `required` | `boolean` | `false` | Required |
+
+### RadioButton Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | **Required.** Value |
+| `disabled` | `boolean` | Individually disabled |
+
+### Example
+```tsx
+<RadioGroup name="color" defaultValue="blue">
+  <RadioButton value="red">Red</RadioButton>
+  <RadioButton value="blue">Blue</RadioButton>
+  <RadioButton value="green">Green</RadioButton>
+</RadioGroup>
+```
+
+### Controlled
+```tsx
+const [value, setValue] = useState('blue');
+<RadioGroup value={value} onValueChange={setValue}>
+  <RadioButton value="red">Red</RadioButton>
+  <RadioButton value="blue">Blue</RadioButton>
+</RadioGroup>
+```
+
+---
+
+## Segment / SegmentControl
+
+Segmented control (toggle button group).
+
+### Segment Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `legend` | `string` | **Required.** Description |
+| `config` | `SegmentConfiguration` | `{ outline?: boolean, iconOnly?: boolean }` |
+| `value` | `any` | Controlled |
+| `onChange` | `(value, event) => void` | Callback |
+
+### SegmentControl Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `string` | **Required.** Label |
+| `value` | `any` | **Required.** Value |
+| `icon` | `ReactNode` | Icon |
+| `checked` | `boolean` | Selected |
+| `iconOnly` | `boolean` | Show icon only |
+
+### Example
+```tsx
+<Segment legend="Choose view">
+  <SegmentControl name="view" label="List" value="list" />
+  <SegmentControl name="view" label="Tiles" value="grid" />
+  <SegmentControl name="view" label="Table" value="table" />
+</Segment>
+```
+
+---
+
+## Switch
+
+Toggle switch.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | — | **Required.** Label (also for accessibility) |
+| `value` | `boolean` | — | Controlled |
+| `defaultValue` | `boolean` | — | Initial value |
+| `onChange` | `(value: boolean, event) => void` | — | Callback |
+| `labelPosition` | `"after" \| "before" \| "below"` | `"after"` | Label position |
+| `large` | `boolean` | `false` | Large |
+
+### Example
+```tsx
+<Switch title="Notifications" defaultValue={true} />
+<Switch title="Large" large labelPosition="before" />
+```
+
+---
+
+## Slider
+
+Range slider.
+
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `min` | `number` | — | **Required.** Minimum |
+| `max` | `number` | — | **Required.** Maximum |
+| `value` | `number` | — | **Required.** Value |
+| `step` | `number` | — | Step size |
+| `onChange` | `(value: number, event) => void` | — | Callback on change |
+| `onChangeCommitted` | `(value: number) => void` | — | Callback on release |
+| `label` | `string` | — | Label |
+| `showValue` | `boolean` | `true` | Show value |
+
+### Example
+```tsx
+const [value, setValue] = useState(50);
+<Slider min={0} max={100} value={value} onChange={setValue} label="Volume" />
+```
+
+---
+
+## TimePicker
+
+Time selection.
+
+### Props
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `Date` | Controlled |
+| `defaultValue` | `Date` | Initial value |
+| `name` | `string` | FormData name |
+| `onChange` | `(date: Date) => void` | Callback |
+| `options` | `TimePickerOptions` | Configuration |
+| `formatDate` | `(date: Date) => string` | Formatting |
+| `disabled` | `boolean` | Disabled |
+| `required` | `boolean` | Required |
+| `error` | `string` | Error text |
+| `hint` | `string` | Hint text |
+
+### TimePickerOptions
+```ts
+{
+  timeFormat?: '12' | '24',
+  showSeconds?: boolean,
+  minuteStepSize?: number,
+  range?: { minValue: Date, maxValue: Date },
+}
+```
+
+### Example
+```tsx
+<TimePicker defaultValue={new Date()} style={{ width: 330 }}>
+  Time
+</TimePicker>
+```
+
+### 12h format with seconds
+```tsx
+<TimePicker
+  value={date}
+  onChange={setDate}
+  options={{ timeFormat: '12', showSeconds: true }}
+  formatDate={Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: 'numeric', second: 'numeric' }).format}
+>
+  Time AM/PM
+</TimePicker>
+```

package/llm-doc/installation.md

@@ -0,0 +1,75 @@
+# Installation & Setup
+
+## Installation
+
+```bash
+npm install @festo-ui/react
+```
+
+## Including CSS
+
+The library requires its CSS stylesheet. Import it once at the root of your application:
+
+```tsx
+import '@festo-ui/react/index.css';
+```
+
+## Imports
+
+All components are exported as named exports from the main package:
+
+```tsx
+import { Button, TextInput, Select, Modal, Accordion } from '@festo-ui/react';
+```
+
+### Complete Export List
+
+**Components:**
+- `Accordion`, `AccordionHeader`, `AccordionItem`, `AccordionItemBody`, `AccordionItemHeader`
+- `BottomSheet`
+- `Breadcrumb`
+- `Button`
+- `Card`, `CardBody`, `CardHeader`, `CardNotification`
+- `Chip`, `ChipContainer`, `ChipType`
+- `LoadingIndicator`
+- `MobileFlyout`, `MobileFlyoutItem`, `MobileFlyoutPage`
+- `AlertModal`, `ConfirmModal`, `CustomModal`, `Prompt`
+- `ImageGallery`, `ImageGalleryContent`, `ImageGallerySwiper`, `ImageGalleryThumbsSwiper`
+- `Pagination`
+- `Popover`, `PopoverMenu`, `PopoverMenuItem`, `PopoverMenuContext`, `Tooltip`, `Legend`
+- `Progress`
+- `SearchInput`, `SearchInputOption`, `SearchResult`
+- `Snackbar`, `SnackbarProvider`, `addSnackbar`, `useSnackbar`
+- `StepperVertical`, `StepVertical`, `StepperHorizontal`, `StepHorizontal`
+- `Tabs`, `TabPane`
+- `TableHeaderCell`
+
+**Forms:**
+- `Checkbox`
+- `ComboBox`
+- `MultiSelect`
+- `RadioGroup`, `RadioButton`
+- `Segment`, `SegmentControl`
+- `Select`
+- `Slider`
+- `Switch`
+- `TextArea`
+- `TextInput`
+- `TimePicker`
+
+**Types (TypeScript):**
+All components export their props types, e.g. `ButtonProps`, `TextInputProps`, `SelectProps`, etc.
+
+## CSS Utility Classes
+
+The library uses CSS classes with the prefix `fwe-`. Commonly used:
+
+- Layout: `fwe-grid`, `fwe-col-{n}`, `fwe-container`, `fwe-d-flex`
+- Spacing: `fwe-m-{size}`, `fwe-p-{size}`, `fwe-mt-{size}`, `fwe-mb-{size}`, `fwe-mr-{size}`, `fwe-ml-{size}`, `fwe-my-{size}`, `fwe-mx-{size}`
+  - Sizes: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
+- Buttons: `fwe-btn`, `fwe-btn-hero`, `fwe-btn-icon`, `fwe-btn-link`, `fwe-btn-lg`, `fwe-btn-block`
+- Colors: `fwe-bg-white`, `fwe-bg-background`, `fwe-bg-black`, `fwe-bg-gray-300`, `fwe-color-red`
+- Flex: `fwe-align-items-center`, `fwe-mr-auto`, `fwe-ml-auto`
+- Table: `fwe-table`, `fwe-tr-sm`, `fwe-tr-md`, `fwe-tr-lg`
+- Text: `fwe-font-size-small`
+- Other: `fwe-dark`, `fwe-b`

package/llm-doc/patterns.md

@@ -0,0 +1,179 @@
+# Patterns & Best Practices
+
+## Controlled vs. Uncontrolled
+
+All form components support both modes:
+
+### Uncontrolled (simpler)
+State is managed internally. Use `defaultValue` / `defaultChecked`:
+```tsx
+<TextInput label="Name" defaultValue="Max" />
+<Checkbox defaultChecked>Option</Checkbox>
+<Select defaultValue={1} options={options} />
+<RadioGroup defaultValue="a"><RadioButton value="a">A</RadioButton></RadioGroup>
+```
+
+### Controlled (full control)
+State is managed externally. Use `value` + `onChange`:
+```tsx
+const [value, setValue] = useState('');
+<TextInput label="Name" value={value} onChange={setValue} />
+```
+
+**Note:** The `onChange` signature varies by component:
+- `TextInput`, `TextArea`: `(value: string, event) => void`
+- `Select`, `ComboBox`: `(value: T) => void`
+- `MultiSelect`: `(value: T[]) => void`
+- `Checkbox`: `(value: boolean, event) => void`
+- `Switch`: `(value: boolean, event) => void`
+- `RadioGroup`: `onValueChange: (value: string) => void`
+- `Slider`: `(value: number, event) => void`
+- `TimePicker`: `(date: Date) => void`
+
+---
+
+## FormData Integration
+
+All form components support native FormData via the `name` prop:
+
+```tsx
+function handleSubmit(event) {
+  event.preventDefault();
+  const formData = new FormData(event.currentTarget);
+  const value = formData.get('fieldName');
+}
+
+<form onSubmit={handleSubmit}>
+  <TextInput name="username" label="Username" />
+  <Select name="role" label="Role" options={roleOptions} />
+  <Checkbox name="acceptTerms">Accept terms</Checkbox>
+  <Switch name="notifications" title="Notifications" />
+  <RadioGroup name="color">
+    <RadioButton value="red">Red</RadioButton>
+    <RadioButton value="blue">Blue</RadioButton>
+  </RadioGroup>
+  <MultiSelect name="categories" label="Categories" options={catOptions} />
+  <TimePicker name="meetingTime">Time</TimePicker>
+  <Slider name="volume" min={0} max={100} value={50} label="Volume" />
+  <button className="fwe-btn fwe-btn-hero" type="submit">Submit</button>
+</form>
+```
+
+---
+
+## Validation
+
+### Error display
+Most form components have an `error` prop:
+```tsx
+<TextInput label="Email" error="Invalid email address" />
+<Select label="Selection" error="Please select" options={options} />
+<TextArea label="Text" error="Required field" />
+```
+
+### HTML5 validation
+```tsx
+<TextInput label="Name" required minLength={3} />
+<TextArea label="Text" required maxLength={500} />
+```
+
+### Checkbox validation
+```tsx
+<Checkbox valid={false}>Invalid option</Checkbox>
+```
+
+---
+
+## Hint Texts
+
+Many components support `hint` for help text:
+```tsx
+<TextInput label="Email" hint="e.g. max@example.com" />
+<Select label="Role" hint="Choose your primary role" options={options} />
+<TimePicker hint="Please select a time">Time</TimePicker>
+```
+
+---
+
+## CSS Classes for Layout
+
+### Grid System
+```tsx
+<div className="fwe-grid">
+  <div className="fwe-col-4">1/3 width</div>
+  <div className="fwe-col-8">2/3 width</div>
+</div>
+```
+
+### Container
+```tsx
+<div className="fwe-container">Centered container</div>
+```
+
+### Buttons with CSS classes (alternative to Button component)
+```tsx
+<button className="fwe-btn">Default</button>
+<button className="fwe-btn fwe-btn-hero">Primary</button>
+<button className="fwe-btn fwe-btn-lg">Large</button>
+<button className="fwe-btn fwe-btn-block">Full width</button>
+<button className="fwe-btn fwe-btn-icon"><Icon /></button>
+<button className="fwe-btn fwe-btn-link fwe-dark">Link</button>
+```
+
+### Spacing
+Prefix `fwe-m-` (margin) and `fwe-p-` (padding), suffixes:
+- Direction: `t` (top), `b` (bottom), `l` (left), `r` (right), `x` (horizontal), `y` (vertical)
+- Sizes: `xxxs`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`
+
+```tsx
+<div className="fwe-mt-m fwe-mb-s fwe-px-l">Content with spacing</div>
+```
+
+---
+
+## Navbar Structure
+
+```tsx
+<header className="fwe-fixed-header">
+  <nav className="fwe-navbar">
+    <div className="fwe-container">
+      <MobileFlyout className="fwe-mr-auto">...</MobileFlyout>
+      <div className="fwe-logo-container">
+        <div className="fwe-festo-logo" />
+      </div>
+    </div>
+  </nav>
+</header>
+<div className="fwe-navbar-spacer" />
+```
+
+---
+
+## Tables
+
+```tsx
+<table className="fwe-table">
+  <thead>
+    <tr>
+      <TableHeaderCell ascending={ascending} active={orderBy === 'name'} onClick={...}>
+        Name
+      </TableHeaderCell>
+    </tr>
+  </thead>
+  <tbody>
+    <tr className="fwe-tr-md"><td>Content</td></tr>
+    <tr className="fwe-tr-lg"><td>Content</td></tr>
+    <tr className="fwe-tr-sm"><td>Content</td></tr>
+  </tbody>
+</table>
+```
+
+---
+
+## Important Notes
+
+1. **Import CSS:** Always include `import '@festo-ui/react/index.css'`
+2. **Icons:** Icons are provided separately (e.g. `IconCoreRangeProduct`, `IconSettings`, `IconMore`, `IconDownload`, `IconDelete`, `IconInfo`, `IconWarning`, `IconClose`, `IconCheckSmall`, `IconWorksheet`, `IconMessage`, `IconGridView`, `IconListView`)
+3. **Snackbar:** Requires `<SnackbarProvider>` as wrapper
+4. **Modals:** All modals are controlled via `isOpen` + `onClose`
+5. **All components** accept standard HTML attributes like `className`, `style`, `data-testid`, etc.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "10.1.0",
+  "version": "10.1.1-dev.918",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -16,7 +16,8 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "llm-doc"
   ],
   "sideEffects": [
     "**/*.css"
@@ -44,6 +45,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.3.2",
     "@chromatic-com/storybook": "^5.0.0",
+    "@festo-ui/web-essentials": "*",
     "@rsbuild/core": "~1.6.2",
     "@rsbuild/plugin-react": "^1.4.1",
     "@rsbuild/plugin-sass": "^1.4.0",
@@ -52,6 +54,7 @@
     "@rstest/core": "^0.6.5",
     "@rstest/coverage-istanbul": "^0.0.5",
     "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-mcp": "^0.6.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",

package/dist/components/search-input/ClearButton.d.ts

@@ -1 +0,0 @@
-export declare const ClearButton: (props: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/search-input/ClearButton.js

@@ -1,11 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const ClearButton = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("button", {
-        type: "button",
-        className: "fwe-clear-icon fr-search-input-clear-button",
-        "aria-label": "Clear",
-        ref: ref,
-        ...props
-    }));
-ClearButton.displayName = 'ClearButton';
-export { ClearButton };

package/dist/components/search-input/SearchSuggestion.d.ts

@@ -1,17 +0,0 @@
-export declare class SearchSuggestion {
-    /**
-     * a html-string. e.g.: '<b> hello </b>'
-     */
-    template: string;
-    /**
-     * This Value will be used as new query when the user selects the suggestion.
-     */
-    value: string;
-    /**
-     * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
-     * @param suggestionString The suggested string (should contain the whole query)
-     * @param query The current query. This string will be highlighted.
-     * @returns a html-string.
-     */
-    static basicSuggestion(suggestionString: string, query: string): SearchSuggestion;
-}

package/dist/components/search-input/SearchSuggestion.js

@@ -1,21 +0,0 @@
-class SearchSuggestion {
-    template;
-    value;
-    static basicSuggestion(suggestionString, query) {
-        const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
-        let template = suggestionString;
-        if (-1 !== i) {
-            const boldStart = i;
-            const boldEnd = i + query.length;
-            const part1 = suggestionString.substring(0, boldStart);
-            const part2 = suggestionString.substring(boldStart, boldEnd);
-            const part3 = suggestionString.substring(boldEnd, suggestionString.length);
-            template = `${part1}<strong>${part2}</strong>${part3}`;
-        }
-        return {
-            value: suggestionString,
-            template
-        };
-    }
-}
-export { SearchSuggestion };

package/dist/components/search-input/useSearchInput.d.ts

@@ -1,13 +0,0 @@
-import type React from 'react';
-import type { SearchSuggestion } from './SearchSuggestion';
-export declare function useSearchInput(inputRef: React.RefObject<HTMLInputElement | null>, cappedSuggestions: SearchSuggestion[], value?: string, defaultValue?: string, onChange?: (value: string) => void, onSearch?: (value: string) => void, onKeyboardNavigate?: (value: string) => void): {
-    innerValue: string | undefined;
-    hideSuggestionList: boolean;
-    selectedSuggestionIndex: number;
-    handleClearQuery: () => void;
-    handleFocus: () => void;
-    handleInput: (event: any) => void;
-    handleSuggestionClick: (suggestion: SearchSuggestion) => void;
-    handleOutsideClick: () => void;
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-};