@emporix/component-library 2.4.2 → 2.5.0

package/README.md

@@ -2,6 +2,8 @@
 
 A modern React component library built with TypeScript, Vite, and SCSS modules.
 
+🔗 [Live demo](https://emporix.github.io/component-library/) · [Storybook](https://emporix.github.io/component-library/storybook/)
+
 ## Features
 
 - 🚀 **Modern Stack**: Built with Vite, TypeScript, and React 18
@@ -307,6 +309,46 @@ const [selectedRole, setSelectedRole] = useState<string | null>(null)
 
 Standard HTML input attributes (`aria-label`, `aria-labelledby`, `tabIndex`, etc.) are supported on the native input.
 
+### InputSwitch
+
+A binary on/off toggle for boolean fields, built on a native `input type="checkbox"` with `role="switch"`. API inspired by [PrimeReact InputSwitch](https://primereact.org/inputswitch/) — the change event carries `{ value, originalEvent, target }`, so a `react-hook-form` `field.onChange` can be passed straight through.
+
+```tsx
+import { useState } from 'react'
+import { InputSwitch } from '@emporix/component-library'
+
+// Controlled
+const [received, setReceived] = useState(false)
+<InputSwitch checked={received} onChange={e => setReceived(e.value)} />
+
+// With label (associate via inputId + htmlFor)
+<InputSwitch inputId="received" checked={received} onChange={e => setReceived(e.value)} />
+<label htmlFor="received">Received</label>
+
+// With react-hook-form
+<Controller
+  control={control}
+  name="received"
+  render={({ field }) => (
+    <InputSwitch checked={field.value} onChange={field.onChange} />
+  )}
+/>
+```
+
+#### Props
+
+| Prop        | Type                                | Default | Description                                     |
+| ----------- | ----------------------------------- | ------- | ----------------------------------------------- |
+| checked     | boolean                             | false   | Whether the switch is on (controlled)           |
+| onChange    | (e: InputSwitchChangeEvent) => void | -       | Fired when the checked state changes            |
+| inputId     | string                              | -       | id for the native input (for label association) |
+| disabled    | boolean                             | false   | Whether the switch is disabled                  |
+| invalid     | boolean                             | false   | Invalid state for validation styling            |
+| name        | string                              | -       | Name attribute for form submission              |
+| readOnly    | boolean                             | false   | Prevents user interaction                       |
+| className   | string                              | -       | Additional CSS class for the root               |
+| data-testid | string                              | -       | Test ID for root and input (suffix `-input`)    |
+
 ### Dialog
 
 A modal dialog built on [PrimeReact Dialog](https://primereact.org/dialog/). Use for focused tasks that need a decision or confirmation. Wraps PrimeReact internally with scoped Emporix styles.
@@ -457,6 +499,59 @@ import { DateValue } from '@emporix/component-library'
 | className   | string                        | -              | Additional CSS class on the root                |
 | data-testid | string                        | -              | Test ID on the root                             |
 
+### MoneyValue
+
+Locale-aware currency display helper for order, quote, and return totals. Context-free like `DateValue` — the app passes the locale in.
+
+```tsx
+import { MoneyValue } from '@emporix/component-library'
+
+<MoneyValue value={1234.5} currency='EUR' locale='en-GB' />
+<MoneyValue value={1234.5} currency='EUR' locale='de-DE' />
+<MoneyValue value={undefined} currency={undefined} nullText='No amount' />
+```
+
+Always renders exactly two fraction digits. `0` formats as a real amount; only `undefined`/`NaN` values, a missing currency, or an invalid currency code fall back to `nullText`.
+
+#### Props
+
+| Prop        | Type                  | Default | Description                                        |
+| ----------- | --------------------- | ------- | -------------------------------------------------- |
+| value       | `number \| undefined` | -       | Numeric amount to format                           |
+| currency    | `string \| undefined` | -       | ISO 4217 currency code (e.g. `EUR`)                |
+| locale      | string                | `en`    | Locale used for number formatting                  |
+| nullText    | string                | `--`    | Fallback when value/currency is missing or invalid |
+| className   | string                | -       | Additional CSS class on the root                   |
+| data-testid | string                | -       | Test ID on the root                                |
+
+### StatusBadge
+
+Outlined status pill for table cells and detail headers. The `color` prop drives both the border and the text, so callers map their own status enum to colours.
+
+```tsx
+import { StatusBadge } from '@emporix/component-library'
+
+<StatusBadge status='pending' />
+<StatusBadge status='approved' color='#1ea97c' />
+<StatusBadge
+  status={item.approvalStatus}
+  color={ReturnStatusColor[item.approvalStatus]}
+  icon={<i className='pi pi-check' />}
+/>
+```
+
+The status text is rendered upper-cased. When `color` is omitted the badge uses the neutral `--color-border-medium` token.
+
+#### Props
+
+| Prop        | Type      | Default | Description                                    |
+| ----------- | --------- | ------- | ---------------------------------------------- |
+| status      | string    | -       | Status text, rendered upper-cased              |
+| color       | string    | -       | Border and text colour (hex or `var(--token)`) |
+| icon        | ReactNode | -       | Optional icon rendered before the status text  |
+| className   | string    | -       | Additional CSS class on the root               |
+| data-testid | string    | -       | Test ID on the root                            |
+
 ### DataTable
 
 Encapsulated data table built on [PrimeReact DataTable](https://primereact.org/datatable/). Styles are scoped via CSS modules. Pass `columns`, optional controlled `pagination`, selection, `rowActions`, and an `emptyTemplate` for empty results.
@@ -778,25 +873,42 @@ const tabs: TabItem[] = [
   className="custom-tabs"
   data-testid="my-tabs"
 />
+
+// Wizard: gate later steps and keep panel state across switches
+<Tabs
+  tabs={[
+    { id: 'customer', label: 'Customer', content: <CustomerStep /> },
+    { id: 'orders', label: 'Orders', content: <OrdersStep /> },
+    { id: 'review', label: 'Review', content: <ReviewStep />, disabled: !isValid },
+  ]}
+  activeTabId={activeTabId}
+  onTabChange={setActiveTabId}
+  keepMounted
+/>
 ```
 
 #### Props
 
-| Prop        | Type                    | Default | Description                    |
-| ----------- | ----------------------- | ------- | ------------------------------ |
-| tabs        | TabItem[]               | -       | Array of tab items             |
-| activeTabId | string                  | -       | ID of the currently active tab |
-| onTabChange | (tabId: string) => void | -       | Callback when tab is changed   |
-| className   | string                  | -       | Additional CSS class           |
-| data-testid | string                  | -       | Test ID for testing            |
+| Prop        | Type                    | Default | Description                                                                                                                   |
+| ----------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| tabs        | TabItem[]               | -       | Array of tab items                                                                                                            |
+| activeTabId | string                  | -       | ID of the currently active tab                                                                                                |
+| onTabChange | (tabId: string) => void | -       | Callback when tab is changed. Not fired for disabled tabs                                                                     |
+| keepMounted | boolean                 | false   | Keep all panels mounted and hide inactive ones, so panel state survives switches (like PrimeReact `renderActiveOnly={false}`) |
+| fullWidth   | boolean                 | false   | Stretch tabs to evenly fill the available width                                                                               |
+| className   | string                  | -       | Additional CSS class                                                                                                          |
+| data-testid | string                  | -       | Test ID for testing                                                                                                           |
+
+With `keepMounted`, each panel also gets a `{data-testid}-panel-{tabId}` test ID.
 
 #### TabItem Interface
 
-| Prop    | Type      | Description                    |
-| ------- | --------- | ------------------------------ |
-| id      | string    | Unique identifier for the tab  |
-| label   | string    | Display label for the tab      |
-| content | ReactNode | Content to display when active |
+| Prop     | Type      | Description                                       |
+| -------- | --------- | ------------------------------------------------- |
+| id       | string    | Unique identifier for the tab                     |
+| label    | string    | Display label for the tab                         |
+| content  | ReactNode | Content to display when active                    |
+| disabled | boolean   | Dims the tab and ignores clicks (default `false`) |
 
 ### Menu
 

package/dist/components/inputswitch/InputSwitch.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+export interface InputSwitchChangeEvent {
+    /**
+     * React change event from the native checkbox input backing the switch
+     */
+    originalEvent: React.ChangeEvent<HTMLInputElement>;
+    /**
+     * Checked state after the change
+     */
+    value: boolean;
+    /**
+     * PrimeReact-compatible target shape, so `react-hook-form` `field.onChange`
+     * can be passed straight through and store the boolean.
+     */
+    target: {
+        name?: string;
+        id: string;
+        value: boolean;
+    };
+}
+export interface InputSwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'checked' | 'className' | 'type' | 'value'> {
+    /**
+     * Whether the switch is on (controlled)
+     * @see https://primereact.org/inputswitch/
+     */
+    checked?: boolean;
+    /**
+     * Callback when the checked state changes. Receives `{ value, originalEvent, target }`.
+     */
+    onChange?: (e: InputSwitchChangeEvent) => void;
+    /**
+     * Id for the native input (for label association via htmlFor)
+     */
+    inputId?: string;
+    /**
+     * 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 InputSwitch: ({ checked, onChange, inputId: inputIdProp, disabled, invalid, className, name, readOnly, required, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-testid": testId, ...rest }: InputSwitchProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InputSwitch.d.ts.map

package/dist/components/inputswitch/InputSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSwitch.d.ts","sourceRoot":"","sources":["../../../src/components/inputswitch/InputSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAA;AAGpC,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAA;IAClD;;OAEG;IACH,KAAK,EAAE,OAAO,CAAA;IACd;;;OAGG;IACH,MAAM,EAAE;QACN,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,OAAO,CAAA;KACf,CAAA;CACF;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CACxD;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,sBAAsB,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,WAAW,GAAI,2MAezB,gBAAgB,4CAgElB,CAAA"}

package/dist/components/inputswitch/index.d.ts

@@ -0,0 +1,3 @@
+export { InputSwitch } from './InputSwitch';
+export type { InputSwitchProps, InputSwitchChangeEvent } from './InputSwitch';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputswitch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/inputswitch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/moneyvalue/MoneyValue.d.ts

@@ -0,0 +1,30 @@
+export interface MoneyValueProps {
+    /**
+     * Numeric amount to format.
+     */
+    value: number | undefined;
+    /**
+     * ISO 4217 currency code (e.g. `EUR`, `USD`).
+     */
+    currency: string | undefined;
+    /**
+     * Locale used for number formatting.
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * Fallback text shown when `value` or `currency` is missing or invalid.
+     * @default '--'
+     */
+    nullText?: string;
+    /**
+     * Additional CSS class name for the root.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+export declare const MoneyValue: ({ value, currency, locale, nullText, className, "data-testid": testId, }: MoneyValueProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MoneyValue.d.ts.map

package/dist/components/moneyvalue/MoneyValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoneyValue.d.ts","sourceRoot":"","sources":["../../../src/components/moneyvalue/MoneyValue.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA0BD,eAAO,MAAM,UAAU,GAAI,0EAOxB,eAAe,4CAcjB,CAAA"}

package/dist/components/moneyvalue/index.d.ts

@@ -0,0 +1,3 @@
+export { MoneyValue } from './MoneyValue';
+export type { MoneyValueProps } from './MoneyValue';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/moneyvalue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/moneyvalue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/statusbadge/StatusBadge.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export interface StatusBadgeProps {
+    /**
+     * Status text. Rendered upper-cased.
+     */
+    status: string;
+    /**
+     * Border and text colour. Any CSS colour value (hex or `var(--token)`).
+     * Falls back to the neutral border colour when omitted.
+     */
+    color?: string;
+    /**
+     * Optional icon rendered before the status text.
+     */
+    icon?: ReactNode;
+    /**
+     * Additional CSS class name for the root.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+export declare const StatusBadge: ({ status, color, icon, className, "data-testid": testId, }: StatusBadgeProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/statusbadge/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,WAAW,GAAI,4DAMzB,gBAAgB,4CAiBlB,CAAA"}

package/dist/components/statusbadge/index.d.ts

@@ -0,0 +1,3 @@
+export { StatusBadge } from './StatusBadge';
+export type { StatusBadgeProps } from './StatusBadge';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/statusbadge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/statusbadge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/dist/components/tabs/Tabs.d.ts

@@ -12,6 +12,11 @@ export interface TabItem {
      * Content to display when tab is active
      */
     content: ReactNode;
+    /**
+     * Whether the tab can be selected. Disabled tabs are dimmed and ignore clicks.
+     * @default false
+     */
+    disabled?: boolean;
 }
 export interface TabsProps {
     /**
@@ -23,9 +28,16 @@ export interface TabsProps {
      */
     activeTabId: string;
     /**
-     * Callback function when tab is changed
+     * Callback function when tab is changed. Not fired for disabled tabs.
      */
     onTabChange: (tabId: string) => void;
+    /**
+     * Keep every tab panel mounted and hide the inactive ones with CSS, so panel
+     * state (form inputs, scroll position, in-flight requests) survives tab
+     * switches. Equivalent to PrimeReact's `renderActiveOnly={false}`.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * Additional CSS class name
      */
@@ -39,5 +51,5 @@ export interface TabsProps {
      */
     'data-testid'?: string;
 }
-export declare const Tabs: ({ tabs, activeTabId, onTabChange, className, fullWidth, "data-testid": testId, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ tabs, activeTabId, onTabChange, keepMounted, className, fullWidth, "data-testid": testId, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,IAAI,GAAI,2FAQlB,SAAS,4CA2CX,CAAA"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,OAAO;IACtB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,EAAE,CAAA;IACf;;OAEG;IACH,WAAW,EAAE,MAAM,CAAA;IACnB;;OAEG;IACH,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,IAAI,GAAI,wGASlB,SAAS,4CAiEX,CAAA"}