linkedunion-design-kit 0.1.0 → 0.1.2

package/_test_/Color.test.js

@@ -25,7 +25,7 @@ describe("Color Component Stories", () => {
   it("renders the Warning color story correctly", () => {
     render(<Warning {...Warning.args}/>);
     const colorBox = screen.getByTestId("color-box");  
-    expect(colorBox).toHaveClass('bg-warning-500');
+    expect(colorBox).toHaveClass("bg-warning-500");
   });
 
   it("renders the Danger color story correctly", () => {

package/_test_/Size.test.js

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Size } from "../components/Size/Size";
+
+describe("Size Component", () => {
+  it("renders the Size component with the correct classes for all props", () => {
+    const props = {
+        size: 'lu-size-100',
+        color: 'bg-primary-500',
+    };
+
+    render(<Size {...props} />);
+
+    // Select the element
+    const sizeElement = screen.getByTestId("size-box");  
+
+    // Assert all classes
+    expect(sizeElement).toHaveClass(props.size);
+    expect(sizeElement).toHaveClass(props.color);
+  });
+});

package/_test_/Typography.test.js

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Typography } from "../components/Typography/Typography";
+
+describe("Typography Component", () => {
+  it("renders the Typography component with the correct classes for all props", () => {
+    const props = {
+      label: "Sample Text",
+      fontSize: "lu-base-font-size",
+      fontWeight: "lu-font-weight-thin",
+      lineHeight: "lu-line-height-sm",
+      textAlign: "lu-text-justify",
+      textTransform: "lu-text-lowercase",
+      textDecoration: "lu-text-decoration-none",
+      textWrap: "lu-text-wrap",
+    };
+
+    render(<Typography {...props} />);
+
+    // Select the element
+    const typographyElement = screen.getByTestId("basic-typography").firstChild;
+
+    // Assert all classes
+    expect(typographyElement).toHaveClass(props.fontSize);
+    expect(typographyElement).toHaveClass(props.fontWeight);
+    expect(typographyElement).toHaveClass(props.lineHeight);
+    expect(typographyElement).toHaveClass(props.textAlign);
+    expect(typographyElement).toHaveClass(props.textTransform);
+    expect(typographyElement).toHaveClass(props.textDecoration);
+    expect(typographyElement).toHaveClass(props.textWrap);
+  });
+});

package/app/globals.css

@@ -13,6 +13,22 @@
     --foreground-rgb: 255, 255, 255;
     --background-start-rgb: 0, 0, 0;
     --background-end-rgb: 0, 0, 0;
+    --lu-spacing-0: 0px;
+    --lu-spacing-050: 4px;
+    --lu-spacing-100: 8px;
+    --lu-spacing-150: 12px;
+    --lu-spacing-200: 16px;
+    --lu-spacing-250: 20px;
+    --lu-spacing-300: 24px;
+    --lu-spacing-400: 32px;
+    --lu-spacing-500: 40px;
+    --lu-spacing-600: 48px;
+    --lu-spacing-800: 64px;
+    --lu-spacing-1000: 80px;
+    --lu-spacing-1500: 120px;
+    --lu-spacing-2000: 160px;
+    --lu-spacing-2500: 200px;
+    --lu-spacing-3000: 240px;
   }
 }
 
@@ -25,3 +41,18 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+.pl-1x {
+  padding-left: var(--lu-spacing-100);
+}
+
+.pr-1x {
+  padding-right: var(--lu-spacing-100);
+}
+
+.mt-1x {
+  margin-top: var(--lu-spacing-100);
+}
+
+.mb-1x {
+  margin-bottom: var(--lu-spacing-100);
+}

package/components/Color/Color.stories.tsx

@@ -18,7 +18,7 @@ const Template: StoryFn<ColorProps> = (args) => <Color {...args} />;
 export const Primary = Template.bind({});
 Primary.args = {
   label: "Primary",
-  color: "bg-primary-600", // Default color
+  color: "bg-primary-500", // Default color
 };
 Primary.argTypes = {
   color: {

package/components/Color/Color.tsx

@@ -1,12 +1,12 @@
 import { ColorProps } from "@/types/interface";
 import React from "react";
-export const Color: React.FC<ColorProps> = ({ label, color }) => {  
+export const Color =  ({ label, color }: ColorProps) => {  
   return (
-    <div data-testid="color-box">
+    <div>
       <h2 className="text-lg font-bold mb-4">{label}</h2>
       <div className="flex items-center gap-4">
         {/* Color box */}
-        <div className={`w-10 h-10 rounded ${color}`}/>
+        <div className={`w-10 h-10 rounded ${color}`} data-testid="color-box"/>
         {/* Color label */}
         <div>
           <p className="font-semibold">{color?.replace('bg-', '')}</p>

package/components/Size/Resizable.stories.tsx

@@ -0,0 +1,30 @@
+
+
+import { Meta, StoryFn } from "@storybook/react";
+import { ResizableBar } from "@/components/Size/Resizable";
+import { ResizableBarProps } from "@/types/interface";
+import { heights, widths } from "@/utils";
+
+export default {
+  title: "Components/Size",
+  component: ResizableBar,
+} as Meta;
+
+const Template: StoryFn<ResizableBarProps> = (args) => <ResizableBar {...args} />;
+
+export const Bar = Template.bind({});
+Bar.args = {
+    width: 'lu-width-25',
+    height: 'lu-height-25',
+};
+Bar.argTypes = {
+  width: {
+   control: { type: "select", labels: Object.fromEntries(widths.map(size => [size.key, size.label]))},
+    options: widths.map((size) => size.key),
+  },
+  height: {
+    control: { type: "select", labels: Object.fromEntries(heights.map(size => [size.key, size.label]))},
+    options: heights.map((size) => size.key),
+  }
+};
+

package/components/Size/Resizable.tsx

@@ -0,0 +1,10 @@
+import { ResizableBarProps } from "@/types/interface";
+
+export const ResizableBar = ({ width, height }: ResizableBarProps) => {
+  return (<>
+    <div className="bg-gray-200 lu-width-50 lu-height-25 relative rounded p-lu-space-200">
+      <div className={`absolute right-0 top-0 bg-blue-500 ${width} ${height} rounded`}></div>
+    </div>
+  </>);
+};
+

package/components/Size/Size.stories.tsx

@@ -0,0 +1,30 @@
+
+
+import { Meta, StoryFn } from "@storybook/react";
+import { Size } from "@/components/Size/Size";
+import { SizeProps } from "@/types/interface";
+import { colorGroups, sizes } from "@/utils";
+
+export default {
+  title: "Components/Size",
+  component: Size,
+} as Meta;
+
+const Template: StoryFn<SizeProps> = (args) => <Size {...args} />;
+
+export const SizeStory = Template.bind({});
+SizeStory.args = {
+    size: 'lu-size-400',
+    color: 'bg-primary-500',
+};
+SizeStory.argTypes = {
+  size: {
+   control: { type: "select", labels: Object.fromEntries(sizes.map(size => [size.key, size.label]))},
+    options: sizes.map((size) => size.key),
+  },
+  color: {
+    control: { type: "select" },
+    options: colorGroups.primary,
+  },
+};
+

package/components/Size/Size.tsx

@@ -0,0 +1,8 @@
+import { SizeProps } from "@/types/interface";
+
+export const Size =  ({ size, color }: SizeProps) => {    
+  return (<>
+        <div className={`${size} rounded ${color}`} data-testid="size-box"/>
+    </>);
+};
+

package/components/Typography/Typography.tsx

@@ -1,8 +1,10 @@
 import { TypographyProps } from "@/types/interface";
-import React from "react";
-export const Typography: React.FC<TypographyProps> = ({label, className='', fontSize, fontWeight, lineHeight, textAlign, textTransform, textDecoration, textWrap }) => {    
+
+export const Typography = ({label, className='', fontSize, fontWeight, lineHeight, textAlign, textTransform, textDecoration, textWrap }: TypographyProps) => {    
   return (<>
+  <div data-testid="basic-typography">
     <p className={`${className} ${fontSize} ${fontWeight} ${lineHeight} ${textAlign} ${textTransform} ${textDecoration} ${textWrap}`}>{label}</p>
+   </div>
   </>);
 };
 

package/dist/index.js

@@ -1,3 +1,5 @@
 export { Color } from './components/Color/Color';
 export { Typography } from './components/Typography/Typography';
+export { Size } from './components/Size/Size';
+export { ResizableBar } from './components/Size/Resizable';
 import './global.css';

package/index.ts

@@ -1,3 +1,5 @@
 export {Color} from './components/Color/Color';
 export {Typography} from './components/Typography/Typography';
+export {Size} from './components/Size/Size';
+export {ResizableBar} from './components/Size/Resizable';
 import './global.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/tailwind.config.ts

@@ -1,7 +1,9 @@
 import type { Config } from 'tailwindcss'
-import { colorGroups, customAspectRatio, customBorderRadius, customBorderWidth, customBoxShadow, customColors, customFontSize, customFontWeight, customHeight, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customSpacing, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, lineHeights, textAlignment, textDecorations, textTransform, textWraps } from './utils'
+import { colorGroups, customAspectRatio, customBorderRadius, customBorderWidth, customBoxShadow, customColors, customFontSize, customFontWeight, customHeight, customLineHeight, customLogoSize, customMinHeight, customMinWidth, customOpacity, customSize, customSpacing, customTextAlignment, customTextDecoration, customTextTransform, customTextWrap, customWidth, fontSizes, fontWeights, heights, lineHeights, sizes, spacings, textAlignment, textDecorations, textTransform, textWraps, widths } from './utils'
 import generateUtilities from './utils';
 
+
+
 const plugin = require('tailwindcss/plugin');
 
 const config: Config = {
@@ -24,6 +26,10 @@ const config: Config = {
     ...textTransform.map(textTrans => ({ pattern: new RegExp(textTrans.key) })),
     ...textDecorations.map(textDec => ({ pattern: new RegExp(textDec.key) })),
     ...textWraps.map(textWrap => ({ pattern: new RegExp(textWrap.key) })),
+    ...sizes.map(size => ({ pattern: new RegExp(size.key) })),
+    ...widths.map(width => ({ pattern: new RegExp(width.key) })),
+    ...heights.map(height => ({ pattern: new RegExp(height.key) })),
+    ...spacings.map(spacing => ({ pattern: new RegExp(spacing.key) })),
   ],
   theme: {
     extend: {
@@ -83,6 +89,38 @@ const config: Config = {
       //Text Wrap plugin
       const textWrapUtilities = generateUtilities('textWrap', theme);
       addUtilities(textWrapUtilities, ['responsive'])
+
+      //Size plugin
+      const sizeUtilities = Object.entries(customSize).reduce((acc: Record<string, { width: string, height: string }>, [key, value]) => {
+        acc[`.${key}`] = {
+          width: value,
+          height: value,
+        };
+        return acc;
+      }, {});
+      addUtilities(sizeUtilities, ['responsive']);
+
+      //width plugin
+      const widthUtilities = Object.entries(customWidth).reduce((acc: Record<string, { width: string }>, [key, value]) => {
+        acc[`.${key}`] = {
+          width: value,
+        };
+        return acc;
+      }, {});
+      addUtilities(widthUtilities, ['responsive'])
+
+      //height plugin
+      const heightUtilities = Object.entries(customHeight).reduce((acc: Record<string, { height: string }>, [key, value]) => {
+        acc[`.${key}`] = {
+          height: value,
+        };
+        return acc;
+      }, {});
+      addUtilities(heightUtilities, ['responsive'])
+
+      //Spacing Plugin
+      const spacingUtilities = generateUtilities('spacing', theme);
+      addUtilities(spacingUtilities, ['responsive'])
     }),
   ],
 }

package/tsconfig.json

@@ -42,7 +42,7 @@
     "index.ts",
     "jest.setup.js",
     "jest.config.js"
-  ],
+, "_test_/Typography.test.js"  ],
   "exclude": [
     "node_modules",
     "./dist"

package/types/interface.d.ts

@@ -15,4 +15,13 @@ interface TypographyProps {
   textWrap?: string
   className?: string
 }
-  
+
+interface SizeProps {
+  size?: string
+  color?: string
+}
+
+interface ResizableBarProps {
+  width?: string
+  height?: string
+}

package/utils/index.ts

@@ -140,6 +140,55 @@ export const textWraps = [
   {key: 'lu-text-nowrap', label: 'lu-text-nowrap: nowrap'},
 ]
 
+export const sizes = [
+  {key: 'lu-size-050', label: 'lu-size-050: 4px'},
+  {key: 'lu-size-100', label: 'lu-size-100: 8px'},
+  {key: 'lu-size-200', label: 'lu-size-200: 16px'},
+  {key: 'lu-size-300', label: 'lu-size-300: 24px'},
+  {key: 'lu-size-400', label: 'lu-size-400: 32px'},
+  {key: 'lu-size-500', label: 'lu-size-500: 40px'},
+  {key: 'lu-size-600', label: 'lu-size-600: 48px'},
+  {key: 'lu-size-800', label: 'lu-size-800: 64px'},
+  {key: 'lu-size-1000', label: 'lu-size-1000: 80px'},
+  {key: 'lu-size-1500', label: 'lu-size-1500: 120px'},
+  {key: 'lu-size-2000', label: 'lu-size-2000: 160px'},
+  {key: 'lu-size-2500', label: 'lu-size-2500: 200px'}
+]
+
+export const widths = [
+  {key: 'lu-width-10', label: 'lu-width-10: 10%'},
+  {key: 'lu-width-25', label: 'lu-width-25: 25%'},
+  {key: 'lu-width-50', label: 'lu-width-50: 50%'},
+  {key: 'lu-width-75', label: 'lu-width-75: 75%'},
+  {key: 'lu-width-100', label: 'lu-width-100: 100%'}
+]
+
+export const heights = [
+  {key: 'lu-height-10', label: 'lu-height-10: 10%'},
+  {key: 'lu-height-25', label: 'lu-height-25: 25%'},
+  {key: 'lu-height-50', label: 'lu-height-50: 50%'},
+  {key: 'lu-height-75', label: 'lu-height-75: 75%'},
+  {key: 'lu-height-100', label: 'lu-height-100: 100%'}
+]
+
+export const spacings = [
+  {key: 'lu-space-0', label: 'lu-space-0: 0px'},
+  {key: 'lu-space-050', label: 'lu-space-050: 4px'},
+  {key: 'lu-space-100', label: 'lu-space-100: 8px'},
+  {key: 'lu-space-150', label: 'lu-space-150: 12px'},
+  {key: 'lu-space-200', label: 'lu-space-200: 16px'},
+  {key: 'lu-space-250', label: 'lu-space-250: 20px'},
+  {key: 'lu-space-300', label: 'lu-space-300: 24px'},
+  {key: 'lu-space-400', label: 'lu-space-400: 32px'},
+  {key: 'lu-space-500', label: 'lu-space-500: 40px'},
+  {key: 'lu-space-600', label: 'lu-space-600: 48px'},
+  {key: 'lu-space-800', label: 'lu-space-800: 64px'},
+  {key: 'lu-space-1000', label: 'lu-space-1000: 80px'},
+  {key: 'lu-space-1500', label: 'lu-space-1500: 120px'},
+  {key: 'lu-space-2000', label: 'lu-space-2000: 160px'},
+  {key: 'lu-space-2500', label: 'lu-space-2500: 200px'},
+  {key: 'lu-space-3000', label: 'lu-space-3000: 240px'}
+]
 
 //Plugin for generating utilities (Used in tailwind.config.js)
 export default function generateUtilities(property: string, theme: (property: string) => Record<string, string>) {

package/dist/app/layout.d.ts

@@ -1,6 +0,0 @@
-import type { Metadata } from 'next';
-import './globals.css';
-export declare const metadata: Metadata;
-export default function RootLayout({ children, }: {
-    children: React.ReactNode;
-}): import("react").JSX.Element;

package/dist/app/layout.jsx

@@ -1,13 +0,0 @@
-import { Inter } from 'next/font/google';
-import './globals.css';
-var inter = Inter({ subsets: ['latin'] });
-export var metadata = {
-    title: 'Create Next App',
-    description: 'Generated by create next app',
-};
-export default function RootLayout(_a) {
-    var children = _a.children;
-    return (<html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>);
-}

package/dist/app/page.d.ts

@@ -1 +0,0 @@
-export default function Home(): import("react").JSX.Element;

package/dist/app/page.jsx

@@ -1,71 +0,0 @@
-import Image from 'next/image';
-export default function Home() {
-    return (<main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0" href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer">
-            By{' '}
-            <Image src="/vercel.svg" alt="Vercel Logo" className="dark:invert" width={100} height={24} priority/>
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" src="/next.svg" alt="Next.js Logo" width={180} height={37} priority/>
-      </div>
-
-      <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app" className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30" target="_blank" rel="noopener noreferrer">
-          <h2 className={"mb-3 text-2xl font-semibold"}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={"m-0 max-w-[30ch] text-sm opacity-50"}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>);
-}

package/dist/components/Color/Color.d.ts

@@ -1,3 +0,0 @@
-import { ColorProps } from "@/types/interface";
-import React from "react";
-export declare const Color: React.FC<ColorProps>;

package/dist/components/Color/Color.jsx

@@ -1,16 +0,0 @@
-import React from "react";
-export var Color = function (_a) {
-    var label = _a.label, color = _a.color;
-    return (<div data-testid="color-box">
-      <h2 className="text-lg font-bold mb-4">{label}</h2>
-      <div className="flex items-center gap-4">
-        {/* Color box */}
-        <div className={"w-10 h-10 rounded ".concat(color)}/>
-        {/* Color label */}
-        <div>
-          <p className="font-semibold">{color === null || color === void 0 ? void 0 : color.replace('bg-', '')}</p>
-          <code className="text-sm">{color}</code>
-        </div>
-      </div>
-    </div>);
-};

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

@@ -1,10 +0,0 @@
-import { Meta } from "@storybook/react";
-import { ColorProps } from "@/types/interface";
-declare const _default: Meta;
-export default _default;
-export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Gray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Success: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Warning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Danger: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Info: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;

package/dist/components/Color/Color.stories.jsx

@@ -1,76 +0,0 @@
-import { Color } from "../../components/Color/Color";
-import { colorGroups } from "../../utils";
-export default {
-    title: "Components/Color",
-    component: Color,
-    argTypes: {
-        label: { control: "text" },
-    },
-};
-var Template = function (args) { return <Color {...args}/>; };
-export var Primary = Template.bind({});
-Primary.args = {
-    label: "Primary",
-    color: "bg-primary-600", // Default color
-};
-Primary.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: colorGroups.primary,
-    },
-};
-export var Gray = Template.bind({});
-Gray.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: colorGroups.gray,
-    },
-};
-Gray.args = {
-    label: "Gray",
-    color: "bg-gray-500",
-};
-export var Success = Template.bind({});
-Success.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: colorGroups.success,
-    },
-};
-Success.args = {
-    label: "Success",
-    color: "bg-success-500",
-};
-export var Warning = Template.bind({});
-Warning.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: colorGroups.warning,
-    },
-};
-Warning.args = {
-    label: "Warning",
-    color: "bg-warning-500",
-};
-export var Danger = Template.bind({});
-Danger.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: colorGroups.danger,
-    },
-};
-Danger.args = {
-    label: "Danger",
-    color: "bg-danger-500",
-};
-export var Info = Template.bind({});
-Info.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: colorGroups.info,
-    },
-};
-Info.args = {
-    label: "Info",
-    color: "bg-info-500",
-};

package/dist/components/Typography/Typography.d.ts

@@ -1,3 +0,0 @@
-import { TypographyProps } from "@/types/interface";
-import React from "react";
-export declare const Typography: React.FC<TypographyProps>;

package/dist/components/Typography/Typography.jsx

@@ -1,7 +0,0 @@
-import React from "react";
-export var Typography = function (_a) {
-    var label = _a.label, _b = _a.className, className = _b === void 0 ? '' : _b, fontSize = _a.fontSize, fontWeight = _a.fontWeight, lineHeight = _a.lineHeight, textAlign = _a.textAlign, textTransform = _a.textTransform, textDecoration = _a.textDecoration, textWrap = _a.textWrap;
-    return (<>
-    <p className={"".concat(className, " ").concat(fontSize, " ").concat(fontWeight, " ").concat(lineHeight, " ").concat(textAlign, " ").concat(textTransform, " ").concat(textDecoration, " ").concat(textWrap)}>{label}</p>
-  </>);
-};

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

@@ -1,5 +0,0 @@
-import { Meta } from "@storybook/react";
-import { TypographyProps } from "@/types/interface";
-declare const _default: Meta;
-export default _default;
-export declare const BasicTypography: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TypographyProps>;