feat: added steps

README.md

@@ -144,7 +144,7 @@ Use tools like the official <a href="https://daisyui.com/theme-generator/">daisy
 - [X] Menu
 - [X] Navbar
 - [ ] Pagination
-- [ ] Steps
+- [X] Steps
 - [X] Tab
 </details>
 

src/Divider/Divider.tsx

@@ -9,7 +9,7 @@ export type DividerProps =
   & IComponentBaseProps
   & {
     children?: string
-    vertical?: Boolean
+    vertical?: boolean
 }
 
 const Divider = ({

src/Steps/Step.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+import {
+    IComponentBaseProps,
+    ComponentColor
+} from '../types'
+
+export type StepProps = 
+    & React.LiHTMLAttributes<HTMLLIElement>
+    & IComponentBaseProps
+    & {
+        value?: string
+        color?: ComponentColor
+    }
+
+const Step = ({
+    children,
+    value,
+    color,
+    dataTheme,
+    className,
+    ...props
+}: StepProps): JSX.Element => {
+    const classes = twMerge(
+        'step',
+        className,
+        clsx({
+            [`step-${color}`]: color,
+        })
+    )
+
+    return (
+        <li
+            {...props}
+            data-theme={dataTheme}
+            data-content={value}
+            className={classes}
+        >
+            {children}
+        </li>
+    )
+}
+
+export default Step

src/Steps/Steps.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import Steps, { StepsProps } from '.'
+
+export default {
+  title: 'Navigation/Steps',
+  component: Steps,
+} as Meta
+
+export const Default: Story<StepsProps> = (args) => {
+  return (
+    <Steps {...args}>
+      <Steps.Step color="info">Fly to moon</Steps.Step>
+      <Steps.Step color="info">Shrink the moon</Steps.Step>
+      <Steps.Step color="info">Grab the moon</Steps.Step>
+
+      <Steps.Step value="?" color="error">Sit on toilet</Steps.Step>
+    </Steps>
+  )
+}
+
+Default.args = {}

src/Steps/Steps.tsx

@@ -0,0 +1,43 @@
+import React, { LegacyRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+import { IComponentBaseProps } from '../types'
+
+import Step from './Step'
+
+export type StepsProps = 
+  & React.HTMLAttributes<HTMLUListElement>
+  & IComponentBaseProps 
+  & {
+    ref?: LegacyRef<HTMLUListElement>
+    vertical?: boolean
+    horizontal?: boolean
+  }
+
+const Steps = ({
+  children,
+  ref,
+  dataTheme,
+  className,
+  ...props
+}: StepsProps): JSX.Element => {
+  const classes = twMerge(
+    'steps',
+    className
+  )
+
+  return (
+    <ul
+      {...props}
+      ref={ref}
+      data-theme={dataTheme}
+      className={classes}
+    >
+      {children}
+    </ul>
+  )
+}
+
+Steps.Step = Step
+
+export default Steps

src/Steps/index.ts

@@ -0,0 +1,5 @@
+export * from './Steps';
+
+import Steps, { StepsProps as TStepsProps } from './Steps'
+export type StepsProps = TStepsProps
+export default Steps

src/index.ts

@@ -34,6 +34,7 @@ import Rating from './Rating'
 import Select from './Select'
 import Stack from './Stack'
 import Stats from './Stats'
+import Steps from './Steps'
 import Swap from './Swap'
 import Table from './Table'
 import Tabs from './Tabs'
@@ -77,6 +78,7 @@ export {
   Select,
   Stack,
   Stats,
+  Steps,
   Swap,
   Table,
   Tabs,