creating Multistep component

packages/docs/src/stories/Multistep.stories.tsx

@@ -0,0 +1,23 @@
+import { Box, Multistep, MultistepProps } from '@ignite-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types';
+
+export default {
+  title: 'Form/Multistep',
+  component: Multistep,
+  args: {
+    size: 4,
+    currentStep: 2,
+  },
+  decorators: [
+    (Story: () => StoryFnReactReturnType) => {
+      return (
+        <Box css={{ display: 'flex', flexDirection: 'column', gap: '$2' }}>
+          {Story()}
+        </Box>
+      );
+    },
+  ],
+} as Meta<MultistepProps>;
+
+export const Primary: StoryObj<MultistepProps> = {};

packages/react/src/components/Multistep/index.tsx

@@ -0,0 +1,23 @@
+import { MultistepContainer, MultistepLabel, Steps, Step } from './styles';
+
+export type MultistepProps = {
+  size: number;
+  currentStep?: number;
+};
+
+export function Multistep({ size, currentStep = 0 }: MultistepProps) {
+  const steps = Array.from({ length: size }, (_, index) => index + 1);
+
+  return (
+    <MultistepContainer>
+      <MultistepLabel>
+        Step {currentStep} of {size}
+      </MultistepLabel>
+      <Steps css={{ '--steps-size': size }}>
+        {steps.map((step) => {
+          return <Step key={step} active={currentStep >= step} />;
+        })}
+      </Steps>
+    </MultistepContainer>
+  );
+}

packages/react/src/components/Multistep/styles.ts

@@ -0,0 +1,32 @@
+import { styled } from '../../styles';
+import { Text } from '../Text';
+
+export const MultistepContainer = styled('div', {});
+
+export const MultistepLabel = styled(Text, {
+  color: '$gray200',
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+export const Steps = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(var(--steps-size),1fr)',
+  gap: '$2',
+  marginTop: '$1',
+});
+
+export const Step = styled('div', {
+  height: '$1',
+  borderRadius: '$px',
+  backgroundColor: '$gray600',
+
+  variants: {
+    active: {
+      true: {
+        backgroundColor: '$gray100',
+      },
+    },
+  },
+});

packages/react/src/index.tsx

@@ -6,3 +6,4 @@ export * from './components/Button';
 export * from './components/TextInput';
 export * from './components/TextArea';
 export * from './components/Checkbox';
+export * from './components/Multistep';