pixelize-design-library 1.0.21 → 1.0.23

package/dist/index.d.ts

@@ -1,3 +1,24 @@
+import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
+import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
+import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
+import Button from "./Components/Button/Button";
+import Checkbox from "./Components/Checkbox/Checkbox";
+import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
+import TextInput from "./Components/Input/TextInput";
+import InputTextArea from "./Components/InputTextArea/InputTextArea";
 import Loading from "./Components/Loading/Loading";
+import Modal from "./Components/Modal/Modal";
+import NavigationBar from "./Components/NavigationBar/NavigationBar";
+import NumberInput from "./Components/NumberInput/NumberInput";
+import PinInput from "./Components/PinInput/PinInput";
+import ProfileCard from "./Components/ProfileCard/ProfileCard";
+import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
+import ProgressBar from "./Components/ProgressBar/ProgressBar";
+import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioButton";
+import Select from "./Components/Select/Select";
+import SideBar from "./Components/SideBar/SideBar";
+import Skeletons from "./Components/Skeletons/Skeletons";
+import Table from "./Components/Table/Table";
+import Toaster from "./Components/Toaster/Toaster";
 import ToolTip from "./Components/ToolTip/ToolTip";
-export { Loading, ToolTip };
+export { ApexBarChart, ApexPieChart, Breadcrumbs, Button, Checkbox, ButtonGroupIcon, TextInput, InputTextArea, Loading, Modal, NavigationBar, NumberInput, PinInput, ProfileCard, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Select, SideBar, Skeletons, Table, Toaster, ToolTip };

package/dist/index.js

@@ -1,34 +1,53 @@
 "use strict";
-// export * from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
-// export * from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
-// export * from "./Components/Breadcrumbs/Breadcrumbs";
-// export * from "./Components/Button/Button";
-// export * from "./Components/Checkbox/Checkbox";
-// export * from "./Components/ButtonGroupIcon/ButtonGroupIcon";
-// export * from "./Components/Input/TextInput";
-// export * from "./Components/InputTextArea/InputTextArea";
-// export * from "./Components/Loading/Loading";
-// export * from "./Components/Modal/Modal";
-// export * from "./Components/NavigationBar/NavigationBar";
-// export * from "./Components/NumberInput/NumberInput";
-// export * from "./Components/PinInput/PinInput";
-// export * from "./Components/ProfileCard/ProfileCard";
-// export * from "./Components/ProfilePhotoViewer/ProfilePhotoViewer";
-// export * from "./Components/ProgressBar/ProgressBar";
-// export * from "./Components/RadioButton/RadioButton";
-// export * from "./Components/Select/Select";
-// export * from "./Components/SideBar/SideBar";
-// export * from "./Components/Skeletons/Skeletons";
-// export * from "./Components/Table/Table";
-// export * from "./Components/Toaster/Toaster";
-// // export * from "./Components/ToolTip/ToolTip";
-// export * from "./Theme/index";
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTip = exports.Loading = void 0;
+exports.ToolTip = exports.Toaster = exports.Table = exports.Skeletons = exports.SideBar = exports.Select = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.NavigationBar = exports.Modal = exports.Loading = exports.InputTextArea = exports.TextInput = exports.ButtonGroupIcon = exports.Checkbox = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = void 0;
+var ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
+exports.ApexBarChart = ApexBarChart_1.default;
+var ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieChart/ApexPieChart"));
+exports.ApexPieChart = ApexPieChart_1.default;
+var Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
+exports.Breadcrumbs = Breadcrumbs_1.default;
+var Button_1 = __importDefault(require("./Components/Button/Button"));
+exports.Button = Button_1.default;
+var Checkbox_1 = __importDefault(require("./Components/Checkbox/Checkbox"));
+exports.Checkbox = Checkbox_1.default;
+var ButtonGroupIcon_1 = __importDefault(require("./Components/ButtonGroupIcon/ButtonGroupIcon"));
+exports.ButtonGroupIcon = ButtonGroupIcon_1.default;
+var TextInput_1 = __importDefault(require("./Components/Input/TextInput"));
+exports.TextInput = TextInput_1.default;
+var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
+exports.InputTextArea = InputTextArea_1.default;
 var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
 exports.Loading = Loading_1.default;
+var Modal_1 = __importDefault(require("./Components/Modal/Modal"));
+exports.Modal = Modal_1.default;
+var NavigationBar_1 = __importDefault(require("./Components/NavigationBar/NavigationBar"));
+exports.NavigationBar = NavigationBar_1.default;
+var NumberInput_1 = __importDefault(require("./Components/NumberInput/NumberInput"));
+exports.NumberInput = NumberInput_1.default;
+var PinInput_1 = __importDefault(require("./Components/PinInput/PinInput"));
+exports.PinInput = PinInput_1.default;
+var ProfileCard_1 = __importDefault(require("./Components/ProfileCard/ProfileCard"));
+exports.ProfileCard = ProfileCard_1.default;
+var ProfilePhotoViewer_1 = __importDefault(require("./Components/ProfilePhotoViewer/ProfilePhotoViewer"));
+exports.ProfilePhotoViewer = ProfilePhotoViewer_1.default;
+var ProgressBar_1 = __importDefault(require("./Components/ProgressBar/ProgressBar"));
+exports.ProgressBar = ProgressBar_1.default;
+var RadioButton_1 = require("./Components/RadioButton/RadioButton");
+Object.defineProperty(exports, "RadioButton", { enumerable: true, get: function () { return RadioButton_1.RadioButton; } });
+Object.defineProperty(exports, "RadioButtonGroup", { enumerable: true, get: function () { return RadioButton_1.RadioButtonGroup; } });
+var Select_1 = __importDefault(require("./Components/Select/Select"));
+exports.Select = Select_1.default;
+var SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
+exports.SideBar = SideBar_1.default;
+var Skeletons_1 = __importDefault(require("./Components/Skeletons/Skeletons"));
+exports.Skeletons = Skeletons_1.default;
+var Table_1 = __importDefault(require("./Components/Table/Table"));
+exports.Table = Table_1.default;
+var Toaster_1 = __importDefault(require("./Components/Toaster/Toaster"));
+exports.Toaster = Toaster_1.default;
 var ToolTip_1 = __importDefault(require("./Components/ToolTip/ToolTip"));
 exports.ToolTip = ToolTip_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-  <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-  <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
-  <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-  <title>React App</title>
-</head>
-
-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-  <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-</body>
-
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

package/src/App.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import Layout from './Layout';
-function App() {
-  return (
-    <div className="App">
-      <Layout />
-    </div >
-  );
-}
-export default App;

package/src/Components/Apexcharts/ApexBarChart/ApexBarChart.stories.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import ApexBarChart from './ApexBarChart';
-import { ApexBarChartProps } from './ApexBarChartProps';
-
-export default {
-    title: 'Components/ApexCharts/ApexBarChart',
-    component: ApexBarChart,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-} as Meta;
-
-const Template: StoryFn<ApexBarChartProps> = (args) => <ApexBarChart {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    data: [44, 55, 41, 64, 22, 43, 21],
-    Labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    title: 'Weekly Sales',
-    titlePosition: 'left',
-    height: 400,
-    width: 500,
-    barColor: ['#3182ce'],
-    xAxisStyle: {
-        color: '#ffffff',
-    },
-    yAxisStyle: {
-        color: '#ffffff',
-    },
-    titleStyle: {
-        color: '#3182ce',
-        fontSize: '16px',
-        fontWeight: 600,
-        fontFamily: 'Arial',
-    },
-};
-
-// You can add more variations of the component by adding more exports like the Primary example.

package/src/Components/Apexcharts/ApexBarChart/ApexBarChart.tsx

@@ -1,80 +0,0 @@
-import React from "react";
-import ReactApexChart from "react-apexcharts";
-import { ApexOptions } from "apexcharts";
-import { ApexBarChartProps } from "./ApexBarChartProps";
-
-export default function ApexBarChart({
-    data,
-    Labels,
-    title,
-    titlePosition,
-    height = 400,
-    width = 500,
-    barColor = ["#3182ce"],
-    xAxisStyle = {
-        color: "#ffffff",
-    },
-    yAxisStyle = {
-        color: "#ffffff",
-    },
-    titleStyle = {
-        color: "#3182ce",
-        fontSize: "16px",
-        fontWeight: 600,
-        fontFamily: "Arial",
-    },
-}: ApexBarChartProps) {
-    const options: ApexOptions = {
-        chart: {
-            type: "bar",
-            height: 350,
-        },
-        plotOptions: {
-            bar: {
-                borderRadius: 4,
-                horizontal: false,
-            },
-        },
-        dataLabels: {
-            enabled: false,
-            style: {
-                fontSize: "12px",
-                colors: ["#00E396"], //data label color
-            },
-        },
-        xaxis: {
-            categories: Labels,
-            labels: {
-                style: xAxisStyle,
-            },
-        },
-        yaxis: {
-            labels: {
-                style: yAxisStyle,
-            },
-        },
-        title: {
-            text: title,
-            align: titlePosition,
-            style: titleStyle,
-        },
-        colors: barColor, //bar color
-    };
-    const series = [
-        {
-            name: "Data",
-            data: data,
-        },
-    ];
-    return (
-        <div>
-            <ReactApexChart
-                options={options}
-                series={series}
-                type="bar"
-                height={height}
-                width={width}
-            />
-        </div>
-    );
-}

package/src/Components/Apexcharts/ApexBarChart/ApexBarChartProps.tsx

@@ -1,20 +0,0 @@
-import { ApexOptions } from "apexcharts";
-export type ApexBarChartProps = {
-    data: number[];
-    Labels: string[];
-    title?: string;
-    titlePosition?: 'left' | 'center' | 'right';
-    height?: number;
-    width?: number;
-    barColor?: string[];
-    xAxisStyle?: StyleProps;
-    yAxisStyle?: StyleProps;
-    titleStyle?: StyleProps;
-};
-
-type StyleProps = {
-    fontSize?: string
-    fontFamily?: string
-    fontWeight?: string | number
-    color?: string
-}

package/src/Components/Apexcharts/ApexPieChart/ApexPieChart.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-import ApexPieChart from './ApexPieChart';
-import { ApexPieChartProps } from './ApexPieChartProps';
-
-export default {
-    title: 'Components/ApexCharts/ApexPieChart',
-    component: ApexPieChart,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-} as Meta;
-
-const Template: StoryFn<ApexPieChartProps> = (args) => <ApexPieChart {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-    data: [44, 55, 41, 64, 22, 43, 21],
-    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    title: 'Weekly Sales',
-    titlePosition: 'left',
-    height: 400,
-    width: 500,
-    chartColor: ['#3182ce', '#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#ff6384', '#36a2eb'],
-    titleStyle: {
-        color: '#3182ce',
-        fontSize: '16px',
-        fontWeight: 600,
-        fontFamily: 'Arial',
-    },
-};
-
-// You can add more variations of the component by adding more exports like the Primary example.

package/src/Components/Apexcharts/ApexPieChart/ApexPieChart.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { ApexOptions } from "apexcharts";
-import ReactApexChart from "react-apexcharts";
-import { ApexPieChartProps } from "./ApexPieChartProps";
-
-export default function ApexPieChart({
-    data,
-    labels,
-    title,
-    titlePosition,
-    height = 400,
-    width = 500,
-    chartColor,
-    titleStyle = {
-        color: "#3182ce",
-    },
-}: ApexPieChartProps) {
-    const options: ApexOptions = {
-        chart: {
-            type: "pie",
-            height: 350,
-        },
-        labels: labels,
-        title: {
-            text: title,
-            align: titlePosition,
-            style: titleStyle,
-        },
-        colors: chartColor,
-    };
-    const series = data;
-    return (
-        <div>
-            <ReactApexChart
-                options={options}
-                series={series}
-                type="pie"
-                height={height}
-                width={width}
-            />
-        </div>
-    );
-}

package/src/Components/Apexcharts/ApexPieChart/ApexPieChartProps.tsx

@@ -1,17 +0,0 @@
-export type ApexPieChartProps = {
-    data: number[];
-    labels: string[];
-    title?: string;
-    titlePosition?: 'left' | 'center' | 'right';
-    height?: number;
-    width?: number;
-    chartColor?: string[];
-    titleStyle?: StyleProps;
-}
-
-type StyleProps = {
-    fontSize?: string
-    fontFamily?: string
-    fontWeight?: string | number
-    color?: string
-}

package/src/Components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react/types-6-0';
-import Breadcrumbs from './Breadcrumbs';
-import { BreadcrumbsProps } from './BreadcrumbsProps';
-
-export default {
-    title: 'Components/Breadcrumbs/Breadcrumb',
-    component: Breadcrumbs,
-} as Meta;
-
-const Template: StoryFn<BreadcrumbsProps> = (args) => <Breadcrumbs {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-    spacing: "8px",
-    separator: "/",
-    fontWeight: "normal",
-    fontSize: "1rem",
-    isCurrentPage: true,
-    handleClick: (path) => console.log(`Clicked: ${path}`),
-    items: [
-        { path: '/home', label: 'Home' },
-        { path: '/about', label: 'About' },
-        { path: '/contact', label: 'Contact' },
-    ],
-};

package/src/Components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, ChakraProvider } from "@chakra-ui/react";
-import { BreadcrumbsProps } from "./BreadcrumbsProps";
-
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items }: BreadcrumbsProps) {
-    return (
-        <ChakraProvider>
-            <Breadcrumb spacing={spacing} separator={separator} fontWeight={fontWeight} fontSize={fontSize}>
-                {items.map((item, index) => (
-                    <BreadcrumbItem key={index} isCurrentPage={isCurrentPage && index === items.length - 1}>
-                        <BreadcrumbLink
-                            href={item.path}
-                            sx={{ '&:hover, &:active': { textDecoration: 'none' } }}
-                            onClick={(event) => {
-                                event.preventDefault();
-                                handleClick(item.path);
-                            }}
-                        >
-                            {item.label}
-                        </BreadcrumbLink>
-                    </BreadcrumbItem>
-                ))}
-            </Breadcrumb>
-        </ChakraProvider>
-    );
-}

package/src/Components/Breadcrumbs/BreadcrumbsProps.tsx

@@ -1,12 +0,0 @@
-import { BreadcrumbProps } from "@chakra-ui/react";
-
-export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
-    isCurrentPage?: boolean;
-    isLastChild?: boolean;
-    handleClick: (path: string) => void;
-    items: BreadcrumbItem[];
-};
-export type BreadcrumbItem = {
-    path: string;
-    label: string;
-};

package/src/Components/Button/Button.stories.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
-import { fn } from '@storybook/test';
-
-const meta: Meta<typeof Button> = {
-    title: 'Components/Button/Button',
-    component: Button,
-
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs']
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-    args: {
-        label: 'Button',
-        width: '',
-        color: 'blue',
-        variant: 'solid',
-        size: 'md',
-        isDisabled: false,
-        isLoading: false,
-        loadingText: 'Loading',
-        type: 'button',
-        onClick: fn()
-    },
-};

package/src/Components/Button/Button.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { Button as ChakraButton, ChakraProvider, } from '@chakra-ui/react';
-import { ButtonProps } from './ButtonProps';
-
-export default function Button({
-    label,
-    width = "120px",
-    onClick,
-    color,
-    variant,
-    leftIcon,
-    rightIcon,
-    size,
-    isDisabled = false,
-    isLoading = false,
-    loadingText = "Loading",
-    type
-}: ButtonProps) {
-    return (
-        <ChakraProvider>
-            <ChakraButton type={type} onClick={onClick} width={width} colorScheme={color} variant={variant} size={size} isLoading={isLoading} isDisabled={isDisabled} loadingText={loadingText} leftIcon={leftIcon} rightIcon={rightIcon} >
-                {label}
-            </ChakraButton>
-        </ChakraProvider>
-    );
-}

package/src/Components/Button/ButtonProps.tsx

@@ -1,10 +0,0 @@
-import { ButtonProps as ChakraButtonProps } from "@chakra-ui/react";
-
-export type ButtonProps = Pick<ChakraButtonProps, "onClick" | "leftIcon" | "rightIcon" | "isDisabled" | "isLoading" | "loadingText" | "colorScheme" | "spinner"> & {
-    label?: string,
-    width?: string | number,
-    size?: "lg" | "md" | "sm" | "xs",
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled",
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha",
-    type?: "button" | "submit" | "reset",
-}

package/src/Components/ButtonGroupIcon/ButtonGoupIconProps.tsx

@@ -1,14 +0,0 @@
-import { ReactElement } from "react";
-
-export type ButtonGroupIconProps = {
-    leftIcon?: ReactElement,
-    rightIcon?: ReactElement,
-    onLeftIconClick?: () => void;
-    onRightIconClick?: () => void;
-    buttonText: string,
-    onButtonClick?: () => void,
-    onButtongroupClick?: () => void,
-    size?: "lg" | "md" | "sm" | "xs",
-    variant?: "solid" | "outline" | "ghost" | "link" | "unstyled",
-    color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha",
-}

package/src/Components/ButtonGroupIcon/ButtonGroupIcon.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Meta, StoryFn } from '@storybook/react';
-import ButtonGroupIcon  from './ButtonGroupIcon'; // Adjust the import path and component type if needed
-import {ButtonGroupIconProps} from './ButtonGoupIconProps';
-import { FiHome } from 'react-icons/fi';
-
-export default {
-  title: 'Components/ButtonGroupIcon/ButtonGroupIcon',
-  component: ButtonGroupIcon,
-  argTypes: {
-    size: { control: { type: 'select', options: ['sm', 'md', 'lg'] } },
-    variant: {
-        control: { type: 'select', options: ["solid","outline","ghost","link"] },
-        defaultValue: 'solid' 
-      },
-      color: {
-        control: { type: 'select', options: ["gray" ,"red" ,"orange" ,"yellow" ,"green" ,"teal" ,"blue" ,"cyan" ,"purple" ,"pink" ,"whiteAlpha" ,"blackAlpha"] },
-        defaultValue: 'blue' 
-      },
-  },
-} as Meta;
-
-const Template: StoryFn<ButtonGroupIconProps> = (args) => <ButtonGroupIcon {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  leftIcon: <FiHome/>, 
-  rightIcon: <FiHome />, 
-  onLeftIconClick: () => console.log('Left icon clicked'), 
-  onRightIconClick: () => console.log('Right icon clicked'), 
-  buttonText: 'Button Text', 
-  onButtonClick: () => console.log('Button clicked'), 
-  onButtongroupClick: () => console.log('Button group clicked'), 
-  size: 'md',
-  variant: 'solid', 
-  color: 'blue',
-};