@axzydev/axzy_ui_system 1.2.0 → 1.2.2

package/src/App.tsx

@@ -0,0 +1,354 @@
+import React, { useMemo, useState } from "react";
+import {
+  FaCreditCard,
+  FaHome,
+  FaKeyboard,
+  FaRegBell,
+  FaSearch,
+  FaSlidersH,
+  FaTable,
+} from "react-icons/fa";
+import { ITLayout, ITThemeProvider } from "./index";
+import "./index.css";
+
+// Import Showcases
+import { HomeShowcase } from "./showcases/HomeShowcase";
+import {
+  CardShowcase,
+  LayoutShowcase,
+  TextShowcase,
+} from "./showcases/StructureShowcases";
+import {
+  StackShowcase,
+  FlexShowcase,
+  GridShowcase,
+  ScreenDashboardShowcase,
+  ScreenFormShowcase,
+  ScreenCardGridShowcase,
+} from "./showcases/LayoutPrimitivesShowcases";
+import {
+  PageHeaderShowcase,
+  PageShowcase,
+} from "./showcases/PageShowcases";
+import {
+  ButtonShowcase,
+  InputShowcase,
+  SelectShowcase,
+  SearchSelectShowcase,
+  DatePickerShowcase,
+  TimePickerShowcase,
+  CalendarShowcase,
+  SlideToggleShowcase,
+  DropfileShowcase,
+  FormBuilderShowcase,
+} from "./showcases/FormShowcases";
+import {
+  TableShowcase,
+  DataTableShowcase,
+  BadgetShowcase,
+  ImageShowcase,
+} from "./showcases/DataShowcases";
+import {
+  TabsShowcase,
+  StepperShowcase,
+  PaginationShowcase,
+  TripleFilterShowcase,
+} from "./showcases/NavigationShowcases";
+import {
+  DialogShowcase,
+  ToastShowcase,
+  LoaderShowcase,
+  ThemeProviderShowcase,
+} from "./showcases/FeedbackShowcases";
+
+function App() {
+  const [activeComponentId, setActiveComponentId] = useState("home");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [subitemConnector, setSubitemConnector] = useState<
+    "dot" | "|" | "none"
+  >("dot");
+
+  // Group definitions for the sidebar
+  const categories = [
+    {
+      id: "general",
+      label: "General",
+      icon: <FaHome />,
+    },
+    {
+      id: "struc",
+      label: "Estructura & Layout",
+      icon: <FaCreditCard />,
+      subitems: [
+        { id: "layout", label: "ITLayout & ITNavbar" },
+        { id: "stack", label: "ITStack" },
+        { id: "flex", label: "ITFlex" },
+        { id: "grid", label: "ITGrid" },
+        { id: "card", label: "ITCard" },
+        { id: "text", label: "ITText" },
+        { id: "pageheader", label: "ITPageHeader" },
+        { id: "page", label: "ITPage" },
+        { id: "screen-dashboard", label: "Dashboard Ejemplo" },
+        { id: "screen-form", label: "Formulario Ejemplo" },
+        { id: "screen-cardgrid", label: "Grid Tarjetas Ejemplo" },
+      ],
+    },
+    {
+      id: "forms",
+      label: "Formularios & Inputs",
+      icon: <FaKeyboard />,
+      subitems: [
+        { id: "button", label: "ITButton" },
+        { id: "input", label: "ITInput" },
+        { id: "select", label: "ITSelect" },
+        { id: "searchselect", label: "ITSearchSelect" },
+        { id: "datepicker", label: "ITDatePicker" },
+        { id: "timepicker", label: "ITTimePicker" },
+        { id: "calendar", label: "ITCalendar" },
+        { id: "slidetoggle", label: "ITSlideToggle" },
+        { id: "dropfile", label: "ITDropfile" },
+        { id: "formbuilder", label: "ITFormBuilder" },
+      ],
+    },
+    {
+      id: "data",
+      label: "Visualización Datos",
+      icon: <FaTable />,
+      subitems: [
+        { id: "table", label: "ITTable" },
+        { id: "datatable", label: "ITDataTable" },
+        { id: "badget", label: "ITBadget" },
+        { id: "image", label: "ITImage" },
+      ],
+    },
+    {
+      id: "nav",
+      label: "Navegación & Control",
+      icon: <FaSlidersH />,
+      subitems: [
+        { id: "tabs", label: "ITTabs" },
+        { id: "stepper", label: "ITStepper" },
+        { id: "pagination", label: "ITPagination" },
+        { id: "triplefilter", label: "ITTripleFilter" },
+      ],
+    },
+    {
+      id: "feed",
+      label: "Feedback & Sistema",
+      icon: <FaRegBell />,
+      subitems: [
+        { id: "dialog", label: "ITDialog" },
+        { id: "toast", label: "ITToast" },
+        { id: "loader", label: "ITLoader" },
+        { id: "themeprovider", label: "ITThemeProvider" },
+      ],
+    },
+  ];
+
+  // Filter sidebar navigation items based on search term
+  const filteredNavigationItems = useMemo(() => {
+    return categories
+      .map((cat) => {
+        if (!cat.subitems) {
+          const matches =
+            cat.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            cat.id.toLowerCase().includes(searchTerm.toLowerCase());
+          if (matches) {
+            return {
+              ...cat,
+              isActive: activeComponentId === cat.id,
+              action: () => setActiveComponentId(cat.id),
+            };
+          }
+          return null;
+        }
+
+        const matchingSubitems = cat.subitems.filter(
+          (sub) =>
+            sub.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+            sub.id.toLowerCase().includes(searchTerm.toLowerCase()),
+        );
+
+        const mappedSubitems = matchingSubitems.map((sub) => ({
+          id: sub.id,
+          label: sub.label,
+          isActive: activeComponentId === sub.id,
+          action: () => setActiveComponentId(sub.id),
+        }));
+
+        const isAnySubitemActive = mappedSubitems.some((sub) => sub.isActive);
+
+        return {
+          ...cat,
+          isActive: isAnySubitemActive,
+          subitems: mappedSubitems,
+        };
+      })
+      .filter((cat): cat is Exclude<typeof cat, null> => {
+        if (!cat) return false;
+        if (cat.subitems) return cat.subitems.length > 0;
+        return true;
+      });
+  }, [searchTerm, activeComponentId]);
+
+  const sidebarProps = {
+    navigationItems: filteredNavigationItems,
+    subitemConnector,
+  };
+
+  const topBarProps = {
+    logoText: "AXZY Showroom",
+    userMenu: {
+      userName: "Alex Dev",
+      userEmail: "alex@axzy.dev",
+      menuItems: [
+        {
+          label: "Resetear Demo",
+          onClick: () => {
+            setActiveComponentId("home");
+            setSearchTerm("");
+          },
+        },
+      ],
+    },
+  };
+
+  // Render correct component based on active navigation
+  const renderShowcase = () => {
+    switch (activeComponentId) {
+      case "home":
+        return <HomeShowcase />;
+      // Structure
+      case "layout":
+        return <LayoutShowcase />;
+      case "stack":
+        return <StackShowcase />;
+      case "flex":
+        return <FlexShowcase />;
+      case "grid":
+        return <GridShowcase />;
+      case "card":
+        return <CardShowcase />;
+      case "text":
+        return <TextShowcase />;
+      case "pageheader":
+        return <PageHeaderShowcase />;
+      case "page":
+        return <PageShowcase />;
+      case "screen-dashboard":
+        return <ScreenDashboardShowcase />;
+      case "screen-form":
+        return <ScreenFormShowcase />;
+      case "screen-cardgrid":
+        return <ScreenCardGridShowcase />;
+      // Forms
+      case "button":
+        return <ButtonShowcase />;
+      case "input":
+        return <InputShowcase />;
+      case "select":
+        return <SelectShowcase />;
+      case "searchselect":
+        return <SearchSelectShowcase />;
+      case "datepicker":
+        return <DatePickerShowcase />;
+      case "timepicker":
+        return <TimePickerShowcase />;
+      case "calendar":
+        return <CalendarShowcase />;
+      case "slidetoggle":
+        return <SlideToggleShowcase />;
+      case "dropfile":
+        return <DropfileShowcase />;
+      case "formbuilder":
+        return <FormBuilderShowcase />;
+      // Data
+      case "table":
+        return <TableShowcase />;
+      case "datatable":
+        return <DataTableShowcase />;
+      case "badget":
+        return <BadgetShowcase />;
+      case "image":
+        return <ImageShowcase />;
+      // Navigation
+      case "tabs":
+        return <TabsShowcase />;
+      case "stepper":
+        return <StepperShowcase />;
+      case "pagination":
+        return <PaginationShowcase />;
+      case "triplefilter":
+        return <TripleFilterShowcase />;
+      // Feedback
+      case "dialog":
+        return <DialogShowcase />;
+      case "toast":
+        return <ToastShowcase />;
+      case "loader":
+        return <LoaderShowcase />;
+      case "themeprovider":
+        return <ThemeProviderShowcase />;
+      default:
+        return <HomeShowcase />;
+    }
+  };
+
+  return (
+    <ITThemeProvider showFab={true}>
+      <ITLayout sidebar={sidebarProps} topBar={topBarProps}>
+        <div className="max-w-7xl mx-auto space-y-6">
+          {/* Glassmorphic Search Bar Header */}
+          <div className="relative p-6 rounded-2xl bg-white/70 dark:bg-slate-900/60 border border-slate-100 dark:border-slate-800 backdrop-blur-md shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div>
+              <h2 className="text-xl font-bold text-slate-800 dark:text-white">
+                Explorador de Componentes
+              </h2>
+              <p className="text-xs text-slate-500">
+                Selecciona o filtra en la lista lateral para inspeccionar e
+                interactuar.
+              </p>
+            </div>
+            <div className="flex flex-wrap items-center gap-3">
+              {/* Connector selection */}
+              <div className="flex items-center gap-1 bg-slate-100/80 dark:bg-slate-950/40 p-1 rounded-xl border border-slate-200/50 dark:border-slate-800/80">
+                {(["dot", "|", "none"] as const).map((style) => (
+                  <button
+                    key={style}
+                    onClick={() => setSubitemConnector(style)}
+                    className={`px-3 py-1 text-xs font-semibold rounded-lg transition-all ${
+                      subitemConnector === style
+                        ? "bg-white dark:bg-slate-800 text-indigo-600 dark:text-indigo-400 shadow-sm border border-slate-100 dark:border-slate-700/50"
+                        : "text-slate-500 hover:text-slate-800 dark:hover:text-slate-200"
+                    }`}
+                  >
+                    {style === "dot" ? "Punto" : style === "|" ? "Vertical" : "Normal"}
+                  </button>
+                ))}
+              </div>
+
+              <div className="relative w-full md:w-80">
+                <input
+                  type="text"
+                  placeholder="Buscar componente..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full bg-slate-100/80 dark:bg-slate-950/40 text-slate-800 dark:text-white pl-10 pr-4 py-2 text-sm rounded-xl outline-none focus:ring-2 focus:ring-primary-500 border border-transparent focus:border-transparent transition-all"
+                />
+                <FaSearch
+                  className="absolute left-3 top-3 text-slate-400"
+                  size={14}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="bg-white/50 dark:bg-slate-950/10 border border-slate-100 dark:border-slate-900 rounded-3xl p-6 md:p-8 backdrop-blur-sm min-h-[500px]">
+            {renderShowcase()}
+          </div>
+        </div>
+      </ITLayout>
+    </ITThemeProvider>
+  );
+}
+
+export default App;

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/components/alert/alert.props.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+export interface ITAlertProps {
+  variant?: AlertVariant;
+  title?: string;
+  children?: ReactNode;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: ReactNode;
+  className?: string;
+}

package/src/components/alert/alert.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import ITAlert from "./alert";
+
+const meta: Meta<typeof ITAlert> = {
+  title: "Components/Feedback/ITAlert",
+  component: ITAlert,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITAlert>;
+
+export const Info: Story = {
+  args: { variant: "info", title: "Información", children: "Esto es un mensaje informativo." },
+};
+
+export const Success: Story = {
+  args: { variant: "success", title: "Operación exitosa", children: "Los cambios se guardaron correctamente." },
+};
+
+export const Warning: Story = {
+  args: { variant: "warning", title: "Advertencia", children: "Esta acción no se puede deshacer." },
+};
+
+export const Error: Story = {
+  args: { variant: "error", title: "Error", children: "Ocurrió un error inesperado." },
+};
+
+export const Dismissible: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+    return visible ? (
+      <ITAlert variant="info" title="Cerrar" dismissible onDismiss={() => setVisible(false)}>
+        Puedes cerrar esta alerta.
+      </ITAlert>
+    ) : (
+      <p className="text-xs text-slate-400">Alerta cerrada.</p>
+    );
+  },
+};

package/src/components/alert/alert.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { ITAlertProps, AlertVariant } from "./alert.props";
+import { FaInfoCircle, FaCheckCircle, FaExclamationTriangle, FaTimesCircle, FaTimes } from "react-icons/fa";
+import { theme } from "@/theme/theme";
+import ITText from "@/components/text/text";
+
+const config: Record<AlertVariant, { icon: React.ReactNode; classes: string }> = {
+  info: {
+    icon: <FaInfoCircle size={16} />,
+    classes: "bg-info-50 border-info-200 text-info-800 dark:bg-info-950/20 dark:border-info-800 dark:text-info-300",
+  },
+  success: {
+    icon: <FaCheckCircle size={16} />,
+    classes: "bg-success-50 border-success-200 text-success-800 dark:bg-success-950/20 dark:border-success-800 dark:text-success-300",
+  },
+  warning: {
+    icon: <FaExclamationTriangle size={16} />,
+    classes: "bg-warning-50 border-warning-200 text-warning-800 dark:bg-warning-950/20 dark:border-warning-800 dark:text-warning-300",
+  },
+  error: {
+    icon: <FaTimesCircle size={16} />,
+    classes: "bg-danger-50 border-danger-200 text-danger-800 dark:bg-danger-950/20 dark:border-danger-800 dark:text-danger-300",
+  },
+};
+
+export default function ITAlert({
+  variant = "info",
+  title,
+  children,
+  dismissible,
+  onDismiss,
+  icon,
+  className,
+}: ITAlertProps) {
+  const cfg = config[variant];
+  return (
+    <div
+      className={clsx("flex items-start gap-3 rounded-xl border p-4", cfg.classes, className)}
+      role="alert"
+    >
+      <span className="mt-0.5 flex-shrink-0">{icon || cfg.icon}</span>
+      <div className="flex-1 min-w-0">
+        {title && <ITText as="p" className="text-sm font-bold mb-0.5">{title}</ITText>}
+        {children && <ITText as="div" className="text-sm opacity-90">{children}</ITText>}
+      </div>
+      {dismissible && onDismiss && (
+        <button onClick={onDismiss} className="flex-shrink-0 opacity-60 hover:opacity-100 transition-opacity">
+          <FaTimes size={12} />
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/avatar/avatar.props.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ITAvatarProps {
+  src?: string;
+  alt?: string;
+  initials?: string;
+  size?: AvatarSize;
+  color?: string;
+  className?: string;
+  badge?: ReactNode;
+  onClick?: () => void;
+}

package/src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ITAvatar from "./avatar";
+import { FaCircle } from "react-icons/fa";
+
+const meta: Meta<typeof ITAvatar> = {
+  title: "Components/Data Display/ITAvatar",
+  component: ITAvatar,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ITAvatar>;
+
+export const WithImage: Story = {
+  args: {
+    src: "https://i.pravatar.cc/150?u=test",
+    alt: "User",
+    size: "md",
+  },
+};
+
+export const WithInitials: Story = {
+  args: {
+    initials: "JD",
+    size: "md",
+    color: "bg-primary-500",
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    initials: "AG",
+    size: "lg",
+    badge: <FaCircle className="text-emerald-500 text-[10px]" />,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-4">
+      {(["xs", "sm", "md", "lg", "xl"] as const).map((s) => (
+        <ITAvatar key={s} initials="A" size={s} />
+      ))}
+    </div>
+  ),
+};

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,53 @@
+import clsx from "clsx";
+import { ITAvatarProps, AvatarSize } from "./avatar.props";
+import ITText from "@/components/text/text";
+
+const sizeMap: Record<AvatarSize, { container: string; text: string }> = {
+  xs: { container: "w-6 h-6", text: "text-[10px]" },
+  sm: { container: "w-8 h-8", text: "text-xs" },
+  md: { container: "w-10 h-10", text: "text-sm" },
+  lg: { container: "w-12 h-12", text: "text-base" },
+  xl: { container: "w-16 h-16", text: "text-xl" },
+};
+
+export default function ITAvatar({
+  src,
+  alt = "",
+  initials,
+  size = "md",
+  color = "bg-primary-500",
+  className,
+  badge,
+  onClick,
+}: ITAvatarProps) {
+  const { container, text } = sizeMap[size];
+
+  return (
+    <div
+      className={clsx("relative inline-flex items-center justify-center rounded-full flex-shrink-0", container, className)}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {src ? (
+        <img
+          src={src}
+          alt={alt}
+          className="w-full h-full rounded-full object-cover"
+          onError={(e) => {
+            e.currentTarget.style.display = "none";
+          }}
+        />
+      ) : (
+        <div className={clsx("w-full h-full rounded-full flex items-center justify-center text-white font-semibold", text, color)}>
+          <ITText as="span">{initials || alt.charAt(0).toUpperCase() || "?"}</ITText>
+        </div>
+      )}
+      {badge && (
+        <div className="absolute -bottom-0.5 -right-0.5">
+          {badge}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/badget/badget.props.ts

@@ -0,0 +1,12 @@
+import { badgeVariants } from "@/types/badget.types";
+import { ColorsTypes } from "@/types/colors.types";
+import { SizesTypes } from "@/types/sizes.types";
+
+export interface ITBadgetProps {
+  label?: string;
+  children?: React.ReactNode;
+  color?: ColorsTypes;
+  size?: SizesTypes;
+  variant?: keyof typeof badgeVariants;
+  className?: string;
+}

package/src/components/badget/badget.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ITBadget from './badget';
+
+const meta = {
+  title: 'Components/Data Display/ITBadge',
+  component: ITBadget,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'],
+    },
+    variant: {
+        control: 'select',
+        options: ['filled', 'outlined'],
+    },
+    size: {
+        control: 'select',
+        options: ['small', 'medium', 'large'],
+    },
+  },
+} satisfies Meta<typeof ITBadget>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 1. Filled (Default)
+export const Filled: Story = {
+  args: {
+    label: 'Filled Badge',
+    color: 'primary',
+    variant: 'filled',
+  },
+};
+
+// 2. Outlined
+export const Outlined: Story = {
+  args: {
+    label: 'Outlined Badge',
+    color: 'primary',
+    variant: 'outlined',
+  },
+};
+
+// 3. All Combinations (Matrix)
+export const AllCombinations: Story = {
+  render: (args) => {
+    const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'purple', 'info'];
+    const variants = ['filled', 'outlined'];
+
+    return (
+      <div className="flex flex-col gap-8">
+        {variants.map((variant) => (
+          <div key={variant} className="flex flex-col gap-2">
+            <h3 className="text-sm font-bold uppercase text-gray-400">{variant}</h3>
+            <div className="flex flex-wrap gap-4 items-center">
+              {colors.map((color) => (
+                <ITBadget
+                  key={`${variant}-${color}`}
+                  {...args}
+                  color={color as any}
+                  variant={variant as any}
+                  label={color.charAt(0).toUpperCase() + color.slice(1)}
+                />
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+  args: {},
+};