@emporix/component-library 1.3.3 → 1.4.0

package/README.md

@@ -93,6 +93,86 @@ import { PrimaryButton } from '@emporix/component-library'
 | className   | string     | -       | Additional CSS class       |
 | data-testid | string     | -       | Test ID for testing        |
 
+### InputText
+
+A text input with optional label and tooltip. Hover and focus styles match the Dropdown component.
+
+```tsx
+import { InputText } from '@emporix/component-library'
+
+// With label and info tooltip
+<InputText
+  label="Id"
+  tooltip="Unique identifier for this record"
+  placeholder="Enter id"
+/>
+
+// Required field
+<InputText label="Name" required placeholder="Enter name" />
+
+// Disabled
+<InputText label="Id" placeholder="Enter id" disabled />
+```
+
+#### Props
+
+| Prop        | Type      | Default | Description                                  |
+| ----------- | --------- | ------- | -------------------------------------------- |
+| label       | ReactNode | -       | Label text above the input                   |
+| tooltip     | string    | -       | If set, shows info icon with this tooltip    |
+| required    | boolean   | false   | Shows asterisk on label                      |
+| inputId     | string    | -       | id for the input (for label association)     |
+| disabled    | boolean   | false   | Whether the input is disabled                |
+| className   | string    | -       | Additional CSS class for the root            |
+| data-testid | string    | -       | Test ID for root and input (suffix `-input`) |
+
+All standard HTML input attributes (placeholder, value, onChange, etc.) are supported.
+
+### SelectButton
+
+Choose single or multiple options using buttons. API inspired by [PrimeReact SelectButton](https://primereact.org/selectbutton/). Selected state uses project primary colors.
+
+```tsx
+import { SelectButton } from '@emporix/component-library'
+
+const options = [
+  { label: 'Off', value: 'off' },
+  { label: 'On', value: 'on' },
+]
+
+// Single selection
+<SelectButton
+  value={value}
+  onChange={(e) => setValue(e.value)}
+  options={options}
+/>
+
+// Multiple selection
+<SelectButton
+  value={selected}
+  onChange={(e) => setSelected(e.value)}
+  options={options}
+  multiple
+/>
+```
+
+#### Props
+
+| Prop           | Type                     | Default | Description                             |
+| -------------- | ------------------------ | ------- | --------------------------------------- |
+| value          | unknown                  | -       | Selected value (or array when multiple) |
+| onChange       | (e: ChangeEvent) => void | -       | Callback when selection changes         |
+| options        | T[]                      | -       | Array of options                        |
+| optionLabel    | string                   | "label" | Property name for option label          |
+| optionValue    | string                   | "value" | Property name for option value          |
+| optionDisabled | string                   | -       | Property name for disabled flag         |
+| multiple       | boolean                  | false   | Allow multiple selection                |
+| itemTemplate   | (option) => ReactNode    | -       | Custom render for each option           |
+| disabled       | boolean                  | false   | Disable the whole component             |
+| invalid        | boolean                  | false   | Validation invalid state                |
+| className      | string                   | -       | Additional CSS class                    |
+| data-testid    | string                   | -       | Test ID for root and option buttons     |
+
 ### Tabs
 
 A flexible tabs component for organizing content into multiple panels.
@@ -194,6 +274,14 @@ The component library provides a minimal set of CSS variables that are actually
 --color-border-light: #e9ecef;
 ```
 
+#### Focus Ring
+
+Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to change focus appearance globally.
+
+```css
+--focus-ring-box-shadow: 0 0 0 2px rgba(38, 101, 183, 0.35);
+```
+
 #### Spacing
 
 ```css
@@ -217,7 +305,7 @@ The component library provides a minimal set of CSS variables that are actually
 
 ```css
 --font-size-sm: 0.875rem; /* 14px */
---font-size-base: 1rem; /* 16px */
+--font-size-base: 0.875rem; /* 14px */
 --font-size-lg: 1.125rem; /* 18px */
 ```
 

package/dist/components/dropdown/Dropdown.d.ts

@@ -8,6 +8,13 @@ export interface DropdownChangeEvent {
     value: DropdownOption['value'] | null;
     originalEvent: React.SyntheticEvent;
 }
+export interface DropdownEditEndEvent {
+    /** Trimmed value that was in the input when Enter was pressed */
+    value: string;
+    /** Selected option value if a matching option was found and selected; null otherwise */
+    selectedValue: DropdownOption['value'] | null;
+    originalEvent: React.KeyboardEvent;
+}
 export interface DropdownProps<T = DropdownOption> {
     /**
      * Selected value (controlled). Must match optionValue of the selected option.
@@ -44,6 +51,17 @@ export interface DropdownProps<T = DropdownOption> {
      * Enable filter (search) in the overlay
      */
     filter?: boolean;
+    /**
+     * When true, the trigger is an editable input: user can type to filter options
+     * and select from the list. Matches PrimeReact Dropdown editable behavior.
+     * @see https://primereact.org/dropdown/#editable
+     */
+    editable?: boolean;
+    /**
+     * Called when the user ends editing by pressing Enter in the editable input.
+     * Fires with the trimmed input value and the selected option value (if a match was found).
+     */
+    onEditEnd?: (e: DropdownEditEndEvent) => void;
     /**
      * Whether the dropdown is disabled
      */
@@ -68,10 +86,22 @@ export interface DropdownProps<T = DropdownOption> {
      * Additional CSS class name for the overlay panel
      */
     panelClassName?: string;
+    /**
+     * Template for the selected value displayed in the trigger.
+     * Receives the selected option object or null when no value is selected.
+     * @see https://primereact.org/dropdown/#template
+     */
+    valueTemplate?: (option: T | null) => React.ReactNode;
+    /**
+     * Template for each option in the dropdown list.
+     * Receives the option object.
+     * @see https://primereact.org/dropdown/#template
+     */
+    itemTemplate?: (option: T) => React.ReactNode;
     /**
      * Test ID for testing
      */
     'data-testid'?: string;
 }
-export declare const Dropdown: <T extends Record<string, unknown>>({ value, onChange, options, optionLabel, optionValue, optionDisabled, placeholder, filter, disabled, required, label, inputId, className, panelClassName, "data-testid": testId, }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: <T extends Record<string, unknown>>({ value, onChange, onEditEnd, options, optionLabel, optionValue, optionDisabled, placeholder, filter, editable, disabled, required, label, inputId, className, panelClassName, valueTemplate, itemTemplate, "data-testid": testId, }: DropdownProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IACrC,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,cAAc;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,oLAgBzD,aAAa,CAAC,CAAC,CAAC,4CAyRlB,CAAA"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IACrC,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,oBAAoB;IACnC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,wFAAwF;IACxF,aAAa,EAAE,cAAc,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;IAC7C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAA;CACnC;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,cAAc;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IACrD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,sOAoBzD,aAAa,CAAC,CAAC,CAAC,4CAgYlB,CAAA"}

package/dist/components/input/InputText.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface InputTextProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
+    /**
+     * Label text displayed above the input
+     */
+    label?: React.ReactNode;
+    /**
+     * When set, an info icon is shown next to the label with this string as tooltip
+     */
+    tooltip?: string;
+    /**
+     * Whether the field is required (shows asterisk on label)
+     */
+    required?: boolean;
+    /**
+     * Input element id for label association
+     */
+    inputId?: string;
+    /**
+     * Additional CSS class name for the root
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+export declare const InputText: ({ label, tooltip, required, inputId: inputIdProp, className, "data-testid": testId, disabled, ...inputProps }: InputTextProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputText.d.ts.map

package/dist/components/input/InputText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputText.d.ts","sourceRoot":"","sources":["../../../src/components/input/InputText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,cACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,WAAW,CACrB;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,+GASvB,cAAc,4CA2DhB,CAAA"}

package/dist/components/selectbutton/SelectButton.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+export interface SelectButtonOption {
+    label?: string;
+    value?: string;
+    [key: string]: unknown;
+}
+export interface SelectButtonChangeEvent {
+    value: SelectButtonOption['value'] | SelectButtonOption['value'][] | null;
+    originalEvent: React.SyntheticEvent;
+}
+export interface SelectButtonProps<T = SelectButtonOption> {
+    /**
+     * Selected value (controlled). Single value or array when multiple.
+     */
+    value?: unknown;
+    /**
+     * Callback when selection changes
+     */
+    onChange?: (e: SelectButtonChangeEvent) => void;
+    /**
+     * Array of options
+     */
+    options: T[];
+    /**
+     * Property name for the option label (default: "label")
+     */
+    optionLabel?: keyof T | string;
+    /**
+     * Property name for the option value (default: "value")
+     */
+    optionValue?: keyof T | string;
+    /**
+     * Name of the property that indicates whether an option is disabled.
+     * @see https://primereact.org/selectbutton/
+     */
+    optionDisabled?: keyof T | string;
+    /**
+     * When true, allows multiple selection (value is an array).
+     */
+    multiple?: boolean;
+    /**
+     * Template for each option. Receives the option object.
+     */
+    itemTemplate?: (option: T) => React.ReactNode;
+    /**
+     * Whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Invalid state for validation styling
+     */
+    invalid?: boolean;
+    /**
+     * Additional CSS class name for the root
+     */
+    className?: string;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+export declare const SelectButton: <T extends Record<string, unknown>>({ value, onChange, options, optionLabel, optionValue, optionDisabled, multiple, itemTemplate, disabled, invalid, className, "data-testid": testId, }: SelectButtonProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectButton.d.ts.map

package/dist/components/selectbutton/SelectButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.d.ts","sourceRoot":"","sources":["../../../src/components/selectbutton/SelectButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,GAAG,kBAAkB,CAAC,OAAO,CAAC,EAAE,GAAG,IAAI,CAAA;IACzE,aAAa,EAAE,KAAK,CAAC,cAAc,CAAA;CACpC;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,GAAG,kBAAkB;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAC/C;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA4BD,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,sJAa7D,iBAAiB,CAAC,CAAC,CAAC,4CAyFtB,CAAA"}

package/dist/index.d.ts

@@ -15,5 +15,9 @@ export type { SecondaryButtonProps } from './components/buttons/SecondaryButton'
 export { Tabs } from './components/tabs/Tabs';
 export type { TabsProps, TabItem } from './components/tabs/Tabs';
 export { Dropdown } from './components/dropdown/Dropdown';
-export type { DropdownProps, DropdownOption, DropdownChangeEvent, } from './components/dropdown/Dropdown';
+export type { DropdownProps, DropdownOption, DropdownChangeEvent, DropdownEditEndEvent, } from './components/dropdown/Dropdown';
+export { InputText } from './components/input/InputText';
+export type { InputTextProps } from './components/input/InputText';
+export { SelectButton } from './components/selectbutton/SelectButton';
+export type { SelectButtonProps, SelectButtonOption, SelectButtonChangeEvent, } from './components/selectbutton/SelectButton';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,GACpB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAA;AAG/C,OAAO,qBAAqB,CAAA"}