add size for separotor component

src/components/ui/Separator/Separator.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
+import { useComposeAttributes, useCreateDataAttribute } from '~/core/hooks/createDataAttribute';
 const COMPONENT_NAME = 'Separator';
 
 export type SeparatorProps = {
     orientation?: 'horizontal' | 'vertical';
     className?: string;
     customRootClass?: string;
     color?: string;
+    size?: string;
     props?: any;
 } & React.ComponentProps<'div'>;
 
-const Separator = ({ orientation = 'horizontal', className, customRootClass, color = '', ...props } : SeparatorProps) => {
+const Separator = ({ orientation = 'horizontal', className, customRootClass, color = '', size = '', ...props } : SeparatorProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const orientationClass = orientation === 'vertical' ? `${rootClass}-vertical` : `${rootClass}-horizontal`;
-    const data_attributes: Record<string, string> = {};
-
-    if (color) {
-        data_attributes['data-accent-color'] = color;
-    }
-    return <div className={clsx(rootClass, orientationClass, className)} {...props} {...data_attributes}></div>;
+    const dataAttributes = useCreateDataAttribute('separator', { size });
+    const accentAttributes = useCreateDataAttribute('accent', { color });
+    const composedAttributes = useComposeAttributes(dataAttributes(), accentAttributes())
+    return <div className={clsx(rootClass, orientationClass, className)} {...composedAttributes()} {...props} ></div>;
 };
 
 Separator.displayName = COMPONENT_NAME;

src/components/ui/Separator/stories/Separator.stories.tsx

@@ -3,6 +3,8 @@ import Separator, { SeparatorProps } from '../Separator';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
 
 const textClasses = 'text-gray-950 text-sm font-light';
+const Sizes = ['small', 'medium', 'large', 'x-large'];
+
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
     title: 'Components/Separator',
@@ -34,3 +36,56 @@ export const Color = {
         color: 'blue'
     }
 };
+
+export const Size = () => {
+    return <SandboxEditor>
+        <div className='mt-4 mb-2'>
+            <p className='text-gray-950'>Separator Size</p>
+        </div>
+        <div>
+            <div className='flex flex-col'>
+                {Sizes.map((size, index) => {
+                    return <div className='w-full'>
+                          <Separator key={index} size={size} />
+                          </div>
+                })}
+            </div>
+       </div>
+    </SandboxEditor>;
+};
+
+const HorizontalTemplate = () => {
+      return (
+        <SandboxEditor>
+            <div>
+            <p className='text-gray-950 my-3'>Horizontal Separator</p>
+                <div className={textClasses}>Step 1</div>
+                <Separator/>
+                <div className={textClasses}>Step 2</div>
+                <Separator />
+                <div className={textClasses}>Step 3</div>
+            </div>
+        </SandboxEditor>
+      )
+}
+
+export const Horizontal = HorizontalTemplate.bind({})
+
+const VerticalTemplate = () => {
+    return (
+      <SandboxEditor>
+          <div>
+          <p className='text-gray-950 my-3'>Vertical Separator</p>
+          <div className='flex items-center'>
+                <div className={textClasses}>Home</div>
+                <Separator orientation='vertical'/>
+                <div className={textClasses}>About</div>
+                <Separator orientation='vertical'/>
+                <div className={textClasses}>Contact</div>
+            </div>
+          </div>
+      </SandboxEditor>
+    )
+}
+
+export const Vertical = VerticalTemplate.bind({})

styles/themes/components/separator.scss

@@ -2,6 +2,22 @@
 .rad-ui-separator {
     background-color: var(--rad-ui-color-gray-600);
     align-self: stretch;
+
+    &[data-separator-size="small"]{
+       max-width: 24rem;
+    }
+
+    &[data-separator-size="medium"]{
+        max-width: 28rem;
+    }
+
+    &[data-separator-size="large"]{
+        max-width: 32rem;
+    }
+
+    &[data-separator-size="x-large"]{
+        max-width: 36rem;
+    }
 }
 
 .rad-ui-separator[data-accent-color] {