greenole-design-system 1.1.65 → 1.1.67

package/README.md

@@ -1,147 +1,147 @@
-# Greenole Design System
-
-[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
-
-The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
-The library is constantly evolving, with new components and improvements being added over time.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Development](#development)
-- [Build & Publication](#build--publication)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Introduction
-
-**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
-It helps teams maintain design and usability standards across their React projects.
-
-> **Note:**  
-> This library is in constant evolution. Existing components may be updated and new ones added over time.
-
-## Installation
-
-To install the library in your React project, run:
-
-```bash
-npm install greenole-design-system
-```
-
-> **Note:**  
-> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
-
-## Usage
-
-After installation, you need to import both the CSS styles and the components:
-
-### 1. Import the CSS styles
-
-First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
-
-```jsx
-import 'greenole-design-system/dist/greenole.css';
-```
-
-### 2. Import and use components
-
-Then you can import and use the library's components:
-
-```jsx
-import React from 'react';
-import { Typography } from 'greenole-design-system';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">
-        The quick brown fox jumps over the lazy dog.
-      </Typography>
-      {/* Additional components will be added in the future */}
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Development
-
-To contribute to or test the library locally:
-
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/your-username/greenole-design-system.git
-   cd greenole-design-system
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development environment using Vite:
-   ```bash
-   npm run dev
-   ```
-4. To view the documentation and components, we use **Storybook**:
-   ```bash
-   npm run storybook
-   ```
-   Storybook serves as the documentation and demo environment for the library's components.
-
-## Build & Publication
-
-To generate the library bundle:
-
-1. Run the build command:
-
-   ```bash
-   npm run build
-   ```
-
-   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
-
-2. To test locally in another project, use `npm link`:
-   ```bash
-   cd greenole-design-system
-   npm link
-   cd ../your-consumer-project
-   npm link greenole-design-system
-   ```
-3. When ready to publish:
-
-   ```bash
-   npm login
-   npm publish --access public
-   ```
-
-## Publishing Storybook to GitHub Pages
-
-1. Build the Storybook:
-
-   ```bash
-   npm run build-storybook
-   ```
-
-   This generates the static files for your Storybook.
-
-2. Deploy to GitHub Pages:
-
-   ```bash
-   npm run deploy-storybook
-   ```
-
-   This will automatically push the built files to the configured branch (`gh-pages`).
-
-   After that, you can access the updated Storybook at: [Design System](https://greenole-iot.github.io/greenole-design-system)
-
-## Contributing
-
-Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
-
-1. Fork the repository.
-2. Create a branch for your feature (`git checkout -b my-feature`).
-3. Commit your changes.
-4. Open a pull request for review.
+# Greenole Design System
+
+[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
+
+The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
+The library is constantly evolving, with new components and improvements being added over time.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [Build & Publication](#build--publication)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Introduction
+
+**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
+It helps teams maintain design and usability standards across their React projects.
+
+> **Note:**  
+> This library is in constant evolution. Existing components may be updated and new ones added over time.
+
+## Installation
+
+To install the library in your React project, run:
+
+```bash
+npm install greenole-design-system
+```
+
+> **Note:**  
+> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
+
+## Usage
+
+After installation, you need to import both the CSS styles and the components:
+
+### 1. Import the CSS styles
+
+First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
+
+```jsx
+import 'greenole-design-system/dist/greenole.css';
+```
+
+### 2. Import and use components
+
+Then you can import and use the library's components:
+
+```jsx
+import React from 'react';
+import { Typography } from 'greenole-design-system';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">
+        The quick brown fox jumps over the lazy dog.
+      </Typography>
+      {/* Additional components will be added in the future */}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Development
+
+To contribute to or test the library locally:
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/greenole-design-system.git
+   cd greenole-design-system
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development environment using Vite:
+   ```bash
+   npm run dev
+   ```
+4. To view the documentation and components, we use **Storybook**:
+   ```bash
+   npm run storybook
+   ```
+   Storybook serves as the documentation and demo environment for the library's components.
+
+## Build & Publication
+
+To generate the library bundle:
+
+1. Run the build command:
+
+   ```bash
+   npm run build
+   ```
+
+   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
+
+2. To test locally in another project, use `npm link`:
+   ```bash
+   cd greenole-design-system
+   npm link
+   cd ../your-consumer-project
+   npm link greenole-design-system
+   ```
+3. When ready to publish:
+
+   ```bash
+   npm login
+   npm publish --access public
+   ```
+
+## Publishing Storybook to GitHub Pages
+
+1. Build the Storybook:
+
+   ```bash
+   npm run build-storybook
+   ```
+
+   This generates the static files for your Storybook.
+
+2. Deploy to GitHub Pages:
+
+   ```bash
+   npm run deploy-storybook
+   ```
+
+   This will automatically push the built files to the configured branch (`gh-pages`).
+
+   After that, you can access the updated Storybook at: [Design System](https://greenole-iot.github.io/greenole-design-system)
+
+## Contributing
+
+Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
+
+1. Fork the repository.
+2. Create a branch for your feature (`git checkout -b my-feature`).
+3. Commit your changes.
+4. Open a pull request for review.

package/dist/base-components/Dropdown/Dropdown.types.d.ts

@@ -25,6 +25,7 @@ export interface DropdownTypes {
     className?: string;
     isRequired?: boolean;
     showClearButton?: boolean;
+    showSelectAll?: boolean;
     container?: HTMLElement;
     showTags?: boolean;
     t?: THookTypes;

package/dist/components/Drawer/Drawer.stories.d.ts

@@ -8,3 +8,4 @@ export declare const ShowOverlay: import('@storybook/core/csf').AnnotatedStoryFn
 export declare const HeaderAndFooterWithout: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
 export declare const HeaderWithout: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
 export declare const FooterWithout: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;
+export declare const WithSteps: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DrawerProps>;

package/dist/components/Drawer/Drawer.styles.d.ts

@@ -10,6 +10,7 @@ export declare const DrawerContainer: import('styled-components/dist/types').ISt
 export declare const Header: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $direction: "left" | "right";
 }>> & string;
+export declare const HeaderSteps: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const Title: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const Subtitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const Body: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {

package/dist/components/Drawer/Drawer.types.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { LinearStepperStep } from '../Timeline/Timeline.types';
 export interface DrawerProps {
     show: boolean;
     title?: string | ReactNode;
@@ -12,6 +13,8 @@ export interface DrawerProps {
     direction?: 'left' | 'right';
     cancelButton?: ReactNode;
     confirmButton?: ReactNode;
+    steps?: LinearStepperStep[];
+    onStepChange?: (step: number) => void;
     onCancel?: () => void;
     onConfirm?: () => void;
     onClose?: () => void;

package/dist/components/Filter/Filter.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { FilterProps } from './Filter.types';
+declare const Filter: React.FC<FilterProps>;
+export default Filter;

package/dist/components/Filter/Filter.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Filter } from './Filter';
+declare const meta: Meta<typeof Filter>;
+export default meta;
+type Story = StoryObj<typeof Filter>;
+export declare const Default: Story;
+export declare const WithCheckboxes: Story;
+export declare const MixedFilters: Story;
+export declare const WithInitialValues: Story;
+export declare const CompleteExample: Story;
+export declare const CustomLabel: Story;
+export declare const WithMultipleSelect: Story;

package/dist/components/Filter/Filter.styles.d.ts

@@ -0,0 +1,23 @@
+export declare const FilterContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isOpen: boolean;
+}>> & string;
+export declare const FilterButtonLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const FilterPanel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterSections: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isLast?: boolean;
+}>> & string;
+export declare const FilterSectionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const FilterSectionContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterDropdownWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterCheckboxWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterCheckboxItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export declare const FilterResetButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const FilterActions: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FilterActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $variant: "reset" | "apply";
+}>> & string;
+export declare const CaretIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
+    $open: boolean;
+}>> & string;

package/dist/components/Filter/Filter.types.d.ts

@@ -0,0 +1,27 @@
+import { THookTypes } from '../../utils/i18n/types';
+export interface FilterItemOption {
+    label: string;
+    value: string;
+}
+export interface FilterItem {
+    label?: string;
+    key: string;
+    value: string | string[];
+    options: FilterItemOption[];
+    multiple?: boolean;
+}
+export interface FilterSelectedValues {
+    [key: string]: string | string[];
+}
+export interface FilterOutput {
+    selectedFilters: FilterSelectedValues;
+    queryString: string;
+}
+export interface FilterProps {
+    items: FilterItem[];
+    initialValues?: FilterSelectedValues;
+    label?: string;
+    className?: string;
+    t?: THookTypes;
+    onChange?: (output: FilterOutput) => void;
+}

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

@@ -0,0 +1,2 @@
+export { default as Filter } from './Filter';
+export type { FilterProps, FilterItem, FilterItemOption, FilterSelectedValues, FilterOutput, } from './Filter.types';

package/dist/components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { TableProps } from './Table.types';
-declare const Table: <T extends Record<string, any>>({ columns, data, currentPage, totalItems, headerExtra, actions, isMobile, itemsPerPage, loading, striped, showSearch, showManageColumns, tableKey, fetchData, onPageChange, onItemsPerPageChange, t: tProp, }: Readonly<TableProps<T>>) => React.JSX.Element;
+declare const Table: <T extends Record<string, any>>({ columns, data, currentPage, totalItems, headerExtra, actions, isMobile, itemsPerPage, loading, striped, showSearch, showManageColumns, tableKey, fetchData, onPageChange, onItemsPerPageChange, filterConfig, onFilterChange, t: tProp, }: Readonly<TableProps<T>>) => React.JSX.Element;
 export default Table;

package/dist/components/Table/Table.stories.d.ts

@@ -12,3 +12,5 @@ export declare const WithHeaderExtra: Story;
 export declare const WithActionsAndHeaderExtra: Story;
 export declare const ColumnFiltersLocalData: Story;
 export declare const ColumnFiltersFetchData: Story;
+export declare const WithFilter: Story;
+export declare const WithFilterAndFetchData: Story;

package/dist/components/Table/Table.styles.d.ts

@@ -41,3 +41,4 @@ export declare const TableColumnManagerItemDrag: import('styled-components/dist/
 }>> & string;
 export declare const TableColumnManagerButtons: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const TableButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const TableFilterWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Table/Table.types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { THookTypes } from '../../utils/i18n/types';
+import { FilterItem, FilterSelectedValues, FilterOutput } from '../Filter';
 export interface TableColumn<T = any> {
     label: string;
     key: keyof T | string;
@@ -34,6 +35,12 @@ interface BaseTableProps<T = any> {
     headerExtra?: ReactNode;
     actions?: ReactNode;
     t?: THookTypes;
+    filterConfig?: {
+        items: FilterItem[];
+        initialValues?: FilterSelectedValues;
+        label?: string;
+    };
+    onFilterChange?: (output: FilterOutput) => void;
 }
 interface TableWithoutColumnManagement<T = any> extends BaseTableProps<T> {
     showManageColumns?: false;

package/dist/components/Timeline/Timeline.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TimelineProps } from './Timeline.types';
+export declare const Timeline: React.FC<TimelineProps>;
+export default Timeline;

package/dist/components/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Timeline } from './Timeline';
+declare const meta: Meta<typeof Timeline>;
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const Default: Story;
+export declare const TimelineTemplate: Story;
+export declare const WithMessage: Story;
+export declare const WithWarningMessage: Story;
+export declare const ErrorMessage: Story;

package/dist/components/Timeline/Timeline.styles.d.ts

@@ -0,0 +1,27 @@
+export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StepsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isMobile?: boolean;
+    $isTimeline?: boolean;
+}>> & string;
+export declare const LineWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Line: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isTimeline?: boolean;
+}>> & string;
+export declare const LineFill: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<Omit<import('framer-motion').HTMLMotionProps<"span">, "ref"> & import('react').RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import('framer-motion').ForwardRefComponent<HTMLSpanElement, import('framer-motion').HTMLMotionProps<"span">>, keyof import('react').Component<any, {}, any>>;
+export declare const StepButtonAndLabelWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isTimeline?: boolean;
+}>> & string;
+export declare const StepButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $clickable?: boolean;
+}>> & string;
+export declare const Circle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<Omit<import('framer-motion').HTMLMotionProps<"div">, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import('framer-motion').ForwardRefComponent<HTMLDivElement, import('framer-motion').HTMLMotionProps<"div">>, keyof import('react').Component<any, {}, any>>;
+export declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    $isTimeline?: boolean;
+    $isFirst?: boolean;
+    $isLast?: boolean;
+}>> & string;
+export declare const MessageWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Timeline/Timeline.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type LinearStepperStepMessage = {
+    label?: string;
+    text?: string;
+    icon?: ReactNode;
+    isWarning?: boolean;
+    isError?: boolean;
+};
+export type LinearStepperStep = {
+    id?: string;
+    label?: string;
+    message?: LinearStepperStepMessage;
+};
+export type TimelineProps = {
+    steps: LinearStepperStep[];
+    activeStep: number;
+    title?: string;
+    template?: 'timeline' | 'step';
+    className?: string;
+    isMobile?: boolean;
+    disableStepAnimation?: boolean;
+    onStepClick?: (stepIndex: number, stepId?: string) => void;
+};

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

@@ -0,0 +1 @@
+export { default as Timeline } from './Timeline';