Feat/#249 chip component

apps/storybook/.storybook/preview.ts

@@ -12,7 +12,7 @@ const preview: Preview = {
         { name: "dark", class: "dark", color: "#333333" },
       ],
     },
-    actions: { argTypesRegex: "^on[A-Z].*" },
+
     controls: {
       matchers: {
         color: /(background|color)$/i,

apps/storybook/src/stories/chip.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Chip } from "@repo/ui/components/chip";
+import { CheckCircle, XCircle } from "lucide-react";
+
+const chipData = [
+  {
+    label: "Default",
+    variants: ["primary", "warning", "danger", "success", "info", "secendery"],
+    sizes: ["sm", "md", "lg"],
+    disabled: false,
+  },
+  {
+    label: "Disabled",
+    variants: ["primary", "warning", "danger", "success", "info", "secendery"],
+    sizes: ["sm", "md", "lg"],
+    disabled: true,
+  },
+];
+
+const meta: Meta<typeof Chip> = {
+  title: "Components/Chip",
+  component: Chip,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["primary", "warning", "danger", "success", "info", "secendery"],
+    },
+    size: { control: "radio", options: ["sm", "md", "lg"] },
+    disabled: { control: "boolean" },
+    iconLeft: { control: false },
+    iconRight: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: "Primary Chip",
+    variant: "primary",
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    children: "Warning Chip",
+    variant: "warning",
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    children: "Danger Chip",
+    variant: "danger",
+  },
+};
+
+export const Success: Story = {
+  args: {
+    children: "Success Chip",
+    variant: "success",
+  },
+};
+
+export const Info: Story = {
+  args: {
+    children: "Info Chip",
+    variant: "info",
+  },
+};
+
+export const Sizes: Story = {
+  args: {
+    children: "Chip Size",
+    variant: "primary",
+    size: "md",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Demonstrates different chip sizes.",
+      },
+    },
+  },
+  render: (args) => (
+    <div className="flex gap-4">
+      <Chip {...args} size="sm">
+        Small
+      </Chip>
+      <Chip {...args} size="md">
+        Medium
+      </Chip>
+      <Chip {...args} size="lg">
+        Large
+      </Chip>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  args: {
+    children: "Chip with Icons",
+    variant: "primary",
+    iconLeft: <CheckCircle size={16} />,
+    iconRight: <XCircle size={16} />,
+  },
+};
+
+export const DisabledState: Story = {
+  args: {
+    children: "Disabled Chip",
+    variant: "primary",
+    disabled: true,
+  },
+};
+
+export const AllChips: Story = {
+  render: () => (
+    <div className="flex-col p-6 px-8 rounded flex gap-10">
+      {chipData.map((group, groupIndex) => (
+        <div key={groupIndex} className="flex items-center gap-4">
+          <div className="w-32 text-right font-medium text-sm">
+            {group.label}
+          </div>
+          {group.variants.map((variant) =>
+            group.sizes.map((size) => (
+              <Chip
+                key={`${groupIndex}-${variant}-${size}`}
+                variant={variant as any}
+                size={size as any}
+                disabled={group.disabled}
+                iconLeft={<CheckCircle size={16} />}
+                iconRight={<XCircle size={16} />}
+              >
+                Chip
+              </Chip>
+            )),
+          )}
+        </div>
+      ))}
+    </div>
+  ),
+};

packages/icons/package.json

@@ -60,6 +60,7 @@
     "./IllustrationIcon": "./src/components/IllustrationIcon.tsx",
     "./cinema4D": "./src/components/cinema4D.tsx",
     "./Asset3dIcon": "./src/components/3dAsset.tsx,",
+    "./curveX": "./src/components/curveX.tsx",
     "./x": "./src/components/x.tsx",
     "./menu-2": "./src/components/menu-2.tsx",
     "./serach": "./src/components/serach.tsx",

packages/icons/src/components/curveX.tsx

@@ -0,0 +1,32 @@
+import { IconProps } from "../types/types";
+const CurveXicon = (props: IconProps) => {
+  const { size = 24, color = "currentColor", ...resProps } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      {...resProps}
+    >
+      <path
+        d="M6.66699 6.66675L9.33366 9.33341M9.33366 6.66675L6.66699 9.33341"
+        stroke="#FAFAFA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 2C12.8 2 14 3.2 14 8C14 12.8 12.8 14 8 14C3.2 14 2 12.8 2 8C2 3.2 3.2 2 8 2Z"
+        stroke="#FAFAFA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default CurveXicon;

packages/ui/src/components/atoms/chip.tsx

@@ -0,0 +1,68 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+const chipVariants = cva(
+  "inline-flex gap-2 items-center justify-center disabled:bg-ring disabled:text-gray-400 whitespace-nowrap text-foreground rounded-lg bg-primary px-3 py-2 text-sm font-medium transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary hover:bg-purple-600 ",
+        warning: "bg-warning hover:bg-amber-700    ",
+        danger: "bg-rose-500 hover:bg-rose-700   ",
+        success: "bg-success hover:bg-emerald-700   ",
+        info: "bg-sky-500 hover:bg-sky-700   ",
+        secendery: "bg-secondary hover:bg-zinc-900    ",
+      },
+      size: {
+        sm: "h-9 text-sm",
+        md: "h-[52px]",
+        lg: "h-14 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "sm",
+    },
+  },
+);
+export interface ChipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof chipVariants> {
+  asChild?: boolean;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+}
+
+const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      asChild,
+      iconLeft: IconLeft,
+      iconRight: IconRight,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={chipVariants({ variant, size, className })}
+        ref={ref}
+        {...props}
+        disabled={props.disabled}
+      >
+        {IconLeft && <span>{IconLeft}</span>}
+        <span>{children}</span>
+        {IconRight && <span> {IconRight}</span>}
+      </Comp>
+    );
+  },
+);
+Chip.displayName = "Chip";
+
+export { Chip, chipVariants };