@emporix/cockpit-component-library 1.0.0 → 1.0.1

package/README.md

@@ -64,6 +64,37 @@ If the above methods don't work, copy the CSS file from `node_modules/@emporix/c
 
 ## Components
 
+Current exported components:
+
+- `PrimaryButton`
+- `SecondaryButton`
+- `TertiaryButton`
+- `ContrastButton`
+- `Tabs`
+- `RichTextEditor`
+- `Spinner`
+- `Breadcrumb`
+- `Dropdown`
+- `MultiSelect`
+- `InputText`
+- `SelectButton`
+- `Card`
+- `IconCard`
+- `FileUploadDropzone`
+- `Chip`
+- `AlertBox`
+- `SideMenu`
+- `TopNav`
+- `Toast` (plus `ToastProvider` and `useToast`)
+- `Modal`
+- `ConfirmDialog`
+- `ProductTable`
+- `ProductTableIconAddButton`
+- `OrderTable`
+- `OrderStatusTag`
+- `Wizard`
+- `Timeline`
+
 ### PrimaryButton
 
 A simple, focused button component for primary actions.
@@ -325,6 +356,224 @@ const tabs: TabItem[] = [
 | label   | string    | Display label for the tab      |
 | content | ReactNode | Content to display when active |
 
+### SecondaryButton
+
+Secondary action button variant with API similar to `PrimaryButton`.
+
+```tsx
+import { SecondaryButton } from '@emporix/cockpit-component-library'
+
+<SecondaryButton label="Cancel" />
+```
+
+### TertiaryButton
+
+Low-emphasis button for tertiary actions.
+
+```tsx
+import { TertiaryButton } from '@emporix/cockpit-component-library'
+
+<TertiaryButton label="Learn more" />
+```
+
+### ContrastButton
+
+Button variant designed for high-contrast contexts.
+
+```tsx
+import { ContrastButton } from '@emporix/cockpit-component-library'
+
+<ContrastButton label="Open" />
+```
+
+### Dropdown
+
+Single-select dropdown component with optional filtering, editable mode, and templating.
+
+```tsx
+import { Dropdown } from '@emporix/cockpit-component-library'
+
+<Dropdown options={options} value={value} onChange={(e) => setValue(e.value)} />
+```
+
+### MultiSelect
+
+Multi-value selection component for choosing multiple options from a list.
+
+```tsx
+import { MultiSelect } from '@emporix/cockpit-component-library'
+
+<MultiSelect options={options} value={value} onChange={(e) => setValue(e.value)} />
+```
+
+### RichTextEditor
+
+Rich text input component for formatted content editing.
+
+```tsx
+import { RichTextEditor } from '@emporix/cockpit-component-library'
+
+<RichTextEditor value={value} onChange={setValue} />
+```
+
+### Spinner
+
+Loading indicator component with configurable size.
+
+```tsx
+import { Spinner } from '@emporix/cockpit-component-library'
+
+<Spinner size="md" />
+```
+
+### Breadcrumb
+
+Navigation breadcrumb for representing hierarchical page location.
+
+```tsx
+import { Breadcrumb } from '@emporix/cockpit-component-library'
+
+<Breadcrumb items={items} />
+```
+
+### IconCard
+
+Card-like container with a prominent icon/content layout.
+
+```tsx
+import { IconCard } from '@emporix/cockpit-component-library'
+
+<IconCard title="Title" description="Description" icon={<span />} />
+```
+
+### FileUploadDropzone
+
+Dropzone component for drag-and-drop file uploads with type constraints.
+
+```tsx
+import { FileUploadDropzone } from '@emporix/cockpit-component-library'
+
+<FileUploadDropzone acceptedTypes={['image']} onFilesSelected={handleFiles} />
+```
+
+### AlertBox
+
+Inline alert component for success, info, warning, and error messages.
+
+```tsx
+import { AlertBox } from '@emporix/cockpit-component-library'
+
+<AlertBox variant="info" title="Heads up" />
+```
+
+### SideMenu
+
+Composable side navigation menu with brand, nav items, and footer slots.
+
+```tsx
+import { SideMenu } from '@emporix/cockpit-component-library'
+
+<SideMenu>{/* ... */}</SideMenu>
+```
+
+### TopNav
+
+Top navigation/header component for page-level actions and context.
+
+```tsx
+import { TopNav } from '@emporix/cockpit-component-library'
+
+<TopNav title="Dashboard" />
+```
+
+### Toast
+
+Toast notification primitives: `Toast`, `ToastProvider`, and `useToast`.
+
+```tsx
+import { ToastProvider, useToast } from '@emporix/cockpit-component-library'
+```
+
+### Modal
+
+Dialog modal component for focused workflows and confirmations.
+
+```tsx
+import { Modal } from '@emporix/cockpit-component-library'
+
+<Modal isOpen={open} onClose={onClose} title="Edit item" />
+```
+
+### ConfirmDialog
+
+Preset confirmation dialog for destructive or high-impact actions.
+
+```tsx
+import { ConfirmDialog } from '@emporix/cockpit-component-library'
+
+<ConfirmDialog open={open} onConfirm={onConfirm} onCancel={onCancel} />
+```
+
+### ProductTable
+
+Data table component focused on product records and common actions.
+
+```tsx
+import { ProductTable } from '@emporix/cockpit-component-library'
+
+<ProductTable items={items} columns={columns} />
+```
+
+### ProductTableIconAddButton
+
+Compact icon button variant used with `ProductTable` add flows.
+
+```tsx
+import { ProductTableIconAddButton } from '@emporix/cockpit-component-library'
+
+<ProductTableIconAddButton onClick={onAdd} />
+```
+
+### OrderTable
+
+Data table for order rows and order-oriented workflows.
+
+```tsx
+import { OrderTable } from '@emporix/cockpit-component-library'
+
+<OrderTable rows={rows} />
+```
+
+### OrderStatusTag
+
+Status badge component for order state presentation.
+
+```tsx
+import { OrderStatusTag } from '@emporix/cockpit-component-library'
+
+<OrderStatusTag status="submitted" />
+```
+
+### Wizard
+
+Step-based workflow component for multi-stage forms and processes.
+
+```tsx
+import { Wizard } from '@emporix/cockpit-component-library'
+
+<Wizard steps={steps} />
+```
+
+### Timeline
+
+Chronological event list component for activity/history views.
+
+```tsx
+import { Timeline } from '@emporix/cockpit-component-library'
+
+<Timeline events={events} />
+```
+
 ## Theming with CSS Variables
 
 The component library uses CSS variables for easy theming. You can customize the appearance by overriding these variables:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emporix/cockpit-component-library",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A React component library for cockipt projects",
   "type": "module",
   "main": "./dist/index.umd.js",