@emporix/cockpit-component-library 0.0.3 → 0.0.5

package/README.md

@@ -100,6 +100,59 @@ import { PrimaryButton } from '@emporix/cockpit-component-library'
 | className   | string              | -       | Additional CSS class                           |
 | data-testid | string              | -       | Test ID for testing                            |
 
+### Card
+
+A simple surface container for grouping content. Renders `children` inside a bordered, padded panel. Styling uses existing theme variables (`--color-bg-primary`, `--color-border-light`, `--border-radius-lg`, `--spacing-lg`).
+
+```tsx
+import { Card } from '@emporix/cockpit-component-library'
+
+// Basic usage
+<Card>
+  <h3>Title</h3>
+  <p>Description or nested components go here.</p>
+</Card>
+
+// With custom class and test id
+<Card className="my-card" data-testid="details-card">
+  <p>Content</p>
+</Card>
+```
+
+#### Props
+
+| Prop        | Type      | Default | Description                                  |
+| ----------- | --------- | ------- | -------------------------------------------- |
+| children    | ReactNode | -       | Content displayed inside the card (required) |
+| className   | string    | -       | Additional CSS class on the root element     |
+| data-testid | string    | -       | Test ID for the root element                 |
+
+All standard HTML `div` attributes (e.g. `id`, `role`, `aria-*`, `onClick`) are forwarded to the root element via `CardProps`.
+
+### Chip
+
+A compact, pill-shaped label for statuses (e.g. draft, submitted). Four variants use a light tinted background with darker text: **success** (green), **warning** (orange), **info** (blue), **error** (red). Colors are driven by CSS variables (see [Theming with CSS Variables](#theming-with-css-variables)).
+
+```tsx
+import { Chip } from '@emporix/cockpit-component-library'
+
+<Chip variant="success">submitted</Chip>
+<Chip variant="warning">draft</Chip>
+<Chip variant="info">processed</Chip>
+<Chip variant="error">1 issue</Chip>
+```
+
+#### Props
+
+| Prop        | Type                                          | Default | Description                              |
+| ----------- | --------------------------------------------- | ------- | ---------------------------------------- |
+| variant     | `'success' \| 'warning' \| 'info' \| 'error'` | `info`  | Visual style / semantic color            |
+| children    | ReactNode                                     | -       | Content inside the chip (required)       |
+| className   | string                                        | -       | Additional CSS class on the root element |
+| data-testid | string                                        | -       | Test ID for the root element             |
+
+The root element is a `<span>`. Standard HTML span attributes are forwarded via `ChipProps`.
+
 ### InputText
 
 A text input with optional label and tooltip. Hover and focus styles match the Dropdown component.
@@ -299,6 +352,21 @@ Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to cha
 --focus-ring-box-shadow: 0 0 0 2px rgba(38, 101, 183, 0.35);
 ```
 
+#### Chip (status badge)
+
+Background and text colors per variant for the `Chip` component.
+
+```css
+--color-chip-success-bg: #e6f4ea;
+--color-chip-success-text: #1e4620;
+--color-chip-warning-bg: #fff8e6;
+--color-chip-warning-text: #b45309;
+--color-chip-info-bg: #e8f4fc;
+--color-chip-info-text: #0b5c8a;
+--color-chip-error-bg: #fdecea;
+--color-chip-error-text: #b42318;
+```
+
 #### Spacing
 
 ```css
@@ -461,6 +529,12 @@ The build output includes:
 - TypeScript declarations (`index.d.ts`)
 - CSS styles (`styles.css`)
 
+To publish a new version, run:
+
+```bash
+npm run publish
+```
+
 ## Code Formatting
 
 This project uses Prettier for consistent code formatting. The configuration is defined in `.prettierrc`.

package/dist/components/buttons/PrimaryButton.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 export interface PrimaryButtonProps {
     /**
-     * The content of the button
+     * Text label displayed inside the button
      */
-    children: React.ReactNode;
+    label?: string;
     /**
      * Whether the button is disabled
      */
@@ -12,6 +12,14 @@ export interface PrimaryButtonProps {
      * Whether the button is loading
      */
     loading?: boolean;
+    /**
+     * Optional icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon position relative to the label
+     */
+    iconPos?: 'left' | 'right';
     /**
      * Click handler
      */
@@ -25,5 +33,5 @@ export interface PrimaryButtonProps {
      */
     'data-testid'?: string;
 }
-export declare const PrimaryButton: ({ children, disabled, loading, onClick, className, "data-testid": testId, ...props }: PrimaryButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PrimaryButton: ({ label, disabled, loading, icon, iconPos, onClick, className, "data-testid": testId, ...props }: PrimaryButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/components/buttons/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,sFAQ3B,kBAAkB,4CAsBpB,CAAA"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,aAAa,GAAI,kGAU3B,kBAAkB,4CAuCpB,CAAA"}

package/dist/components/buttons/SecondaryButton.d.ts

@@ -1,13 +1,21 @@
 import { default as React } from 'react';
 export interface SecondaryButtonProps {
     /**
-     * The content of the button
+     * Text label displayed inside the button
      */
-    children: React.ReactNode;
+    label?: string;
     /**
      * Whether the button is disabled
      */
     disabled?: boolean;
+    /**
+     * Optional icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Icon position relative to the label
+     */
+    iconPos?: 'left' | 'right';
     /**
      * Click handler
      */
@@ -21,5 +29,5 @@ export interface SecondaryButtonProps {
      */
     'data-testid'?: string;
 }
-export declare const SecondaryButton: ({ children, disabled, onClick, className, "data-testid": testId, ...props }: SecondaryButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryButton: ({ label, disabled, icon, iconPos, onClick, className, "data-testid": testId, ...props }: SecondaryButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SecondaryButton.d.ts.map

package/dist/components/buttons/SecondaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,eAAe,GAAI,6EAO7B,oBAAoB,4CAqBtB,CAAA"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../src/components/buttons/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,eAAO,MAAM,eAAe,GAAI,yFAS7B,oBAAoB,4CAmCtB,CAAA"}

package/dist/components/card/Card.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card content.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Simple card container component used to display nested content.
+ */
+export declare const Card: ({ children, className, "data-testid": testId, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,0DAKlB,SAAS,4CAQX,CAAA"}

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export type ChipVariant = 'error' | 'info' | 'success' | 'warning';
+export interface ChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Visual style: success (green), warning (orange), info (blue), error (red).
+     */
+    variant?: ChipVariant;
+    /**
+     * Label or content inside the chip.
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Test ID for testing.
+     */
+    'data-testid'?: string;
+}
+/**
+ * Compact pill-shaped status label with semantic color variants.
+ */
+export declare const Chip: ({ variant, children, className, "data-testid": testId, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;AAElE,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AASD;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,mEAMlB,SAAS,4CAUX,CAAA"}

package/dist/index.d.ts

@@ -4,9 +4,9 @@
  * For components to render with correct layout and styles in your app,
  * import the library styles once (e.g. in your root entry or App):
  *
- *   import '@emporix/component-library/styles'
+ *   import '@emporix/cockpit-component-library/styles'
  *
- * Or in CSS: @import '@emporix/component-library/styles';
+ * Or in CSS: @import '@emporix/cockpit-component-library/styles';
  */
 export { PrimaryButton } from './components/buttons/PrimaryButton';
 export type { PrimaryButtonProps } from './components/buttons/PrimaryButton';
@@ -20,4 +20,8 @@ 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';
+export { Card } from './components/card/Card';
+export type { CardProps } from './components/card/Card';
+export { Chip } from './components/chip/Chip';
+export type { ChipProps, ChipVariant } from './components/chip/Chip';
 //# 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,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"}
+{"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;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAEvD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGpE,OAAO,qBAAqB,CAAA"}