ikoncomponents 1.5.7 → 1.5.8

package/README.md

@@ -1,36 +1,36 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/bin.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import "./dist/index.js";

package/dist/commands/init.js

@@ -0,0 +1,63 @@
+import path from "path";
+import process from "process";
+import { fileURLToPath } from "url";
+import { execa } from "execa";
+import kleur from "kleur";
+import { copyDir } from "../utlis/copyDir.js";
+export async function init() {
+    const cwd = process.cwd();
+    console.log(kleur.cyan("\n🚀 Installing ikoncomponents...\n"));
+    // ✅ FIX FOR WINDOWS + ESM
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    // templates/default inside the package
+    const templateDir = path.resolve(__dirname, "../../templates/default");
+    // 1️⃣ COPY templates/default → user src/
+    await copyDir(templateDir, path.join(cwd, "src"));
+    console.log(kleur.green("✔ Components copied"));
+    // 2️⃣ INSTALL ALL DEPENDENCIES
+    const dependencies = [
+        // radix
+        "@radix-ui/react-accordion",
+        "@radix-ui/react-alert-dialog",
+        "@radix-ui/react-avatar",
+        "@radix-ui/react-checkbox",
+        "@radix-ui/react-dialog",
+        "@radix-ui/react-dropdown-menu",
+        "@radix-ui/react-hover-card",
+        "@radix-ui/react-icons",
+        "@radix-ui/react-label",
+        "@radix-ui/react-navigation-menu",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-progress",
+        "@radix-ui/react-radio-group",
+        "@radix-ui/react-scroll-area",
+        "@radix-ui/react-select",
+        "@radix-ui/react-separator",
+        "@radix-ui/react-slider",
+        "@radix-ui/react-slot",
+        "@radix-ui/react-switch",
+        "@radix-ui/react-tabs",
+        "@radix-ui/react-toggle",
+        "@radix-ui/react-toggle-group",
+        "@radix-ui/react-tooltip",
+        // utils
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge",
+        "lucide-react",
+        "framer-motion",
+        "sonner",
+        "vaul",
+        "cmdk",
+        "uuid",
+        "date-fns",
+        "axios"
+    ];
+    console.log(kleur.yellow("\n📦 Installing dependencies...\n"));
+    await execa("npm", ["install", ...dependencies], {
+        cwd,
+        stdio: "inherit"
+    });
+    console.log(kleur.green("\n✔ ikoncomponents installed successfully\n"));
+}

package/dist/index.js

@@ -1,116 +1,14 @@
-import "./styles.css"; // just imports, no processing
-export * from "./shadcn/accordion";
-export * from "./shadcn/alert-dialog";
-export * from "./shadcn/alert";
-export * from "./shadcn/avatar";
-export * from "./shadcn/badge";
-export * from "./shadcn/button";
-export * from "./shadcn/calendar";
-export * from "./shadcn/card";
-export * from "./shadcn/checkbox";
-export * from "./shadcn/command";
-export * from "./shadcn/date-input";
-export * from "./shadcn/date-range-picker";
-export * from "./shadcn/dialog";
-export * from "./shadcn/dropdown-menu";
-export * from "./shadcn/hover-card";
-export * from "./shadcn/input";
-export * from "./shadcn/label";
-export * from "./shadcn/navigation-menu";
-export * from "./shadcn/popover";
-export * from "./shadcn/progress";
-export * from "./shadcn/radio-group";
-export * from "./shadcn/scroll-area";
-export * from "./shadcn/select";
-export * from "./shadcn/separator";
-export * from "./shadcn/sheet";
-export * from "./shadcn/sidebar";
-export * from "./shadcn/skeleton";
-export * from "./shadcn/slider";
-export * from "./shadcn/sonner";
-export * from "./shadcn/switch";
-export * from "./shadcn/table";
-export * from "./shadcn/tabs";
-export * from "./shadcn/textarea";
-export * from "./shadcn/tooltip";
-export * from "./shadcn/workflow";
-export * from "./shadcn/aspect-ratio";
-export * from "./shadcn/breadcrumb";
-export * from "./shadcn/collapsible";
-export * from "./shadcn/drawer";
-export * from "./shadcn/form";
-export * from "./shadcn/input-otp";
-export * from "./shadcn/toggle-group";
-export * from "./shadcn/toggle";
-export { ActionMenu } from "./ikoncomponents/action-menu";
-export { CustomAlertDialog } from "./ikoncomponents/alert-dialog";
-export { useDialog, DialogProvider, } from "./ikoncomponents/alert-dialog/dialog-context";
-export { TextButton, TextButtonWithTooltip, IconTextButton, IconTextButtonWithTooltip, IconButton, IconButtonWithTooltip, } from "./ikoncomponents/buttons";
-export { ComboboxInput } from "./ikoncomponents/combobox-input";
-export { DataTableColumnFilter } from "./ikoncomponents/data-table/datatable-column-filter";
-export { DataTableFacetedFilter } from "./ikoncomponents/data-table/datatable-faceted-filter";
-export { DataTableFilterMenu } from "./ikoncomponents/data-table/datatable-filter-menu";
-export { convertFileToObject, FileUploader, getImageFromObject, } from "./ikoncomponents/fileUpload";
-export { DataTablePagination } from "./ikoncomponents/data-table/datatable-pagination";
-export { DataTableToolbar } from "./ikoncomponents/data-table/datatable-toolbar";
-export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
-export { DataTable } from "./ikoncomponents/data-table";
-export { EChart } from "./ikoncomponents/e-chart";
-export { FileInput } from "./ikoncomponents/file-input";
-export { GlowingEffect } from "./ikoncomponents/glowing-effect";
-export { Icon } from "./ikoncomponents/icon";
-export { LoadingSpinner } from "./ikoncomponents/loading-spinner";
-export { MultiCombobox } from "./ikoncomponents/multi-combobox";
-export { NoDataComponent } from "./ikoncomponents/no-data";
-export { PageWrapper } from "./ikoncomponents/page-wrapper";
-export { PasswordStrengthMeter } from "./ikoncomponents/password-strength-meter";
-export { PhoneInput } from "./ikoncomponents/phone-input";
-export { SearchInput } from "./ikoncomponents/search-input";
-export { SheetComponent } from "./ikoncomponents/sheet";
-export { SimpleWidget } from "./ikoncomponents/simple-widget";
-export { CustomTabs } from "./ikoncomponents/tabs";
-export { ThemeToggleBtn } from "./ikoncomponents/theme-toggle-btn";
-export { TitleProgress } from "./ikoncomponents/title-progress";
-export { TooltipComponent } from "./ikoncomponents/tooltip";
-export { FrameworkItemDropdown } from "./ikoncomponents/twolevel-dropdown";
-export { Widgets } from "./ikoncomponents/widgets";
-export { BigCalendar } from "./ikoncomponents/big-calendar";
-export { BreadcrumbProvider, useBreadcrumb, } from "./ikoncomponents/app-breadcrumb/BreadcrumbProvider";
-export { AppBreadcrumb, RenderAppBreadcrumb, } from "./ikoncomponents/app-breadcrumb";
-export { FormComboboxInput } from "./ikoncomponents/form-fields/combobox-input";
-export { FormComboboxInputWithValue } from "./ikoncomponents/form-fields/combobox-input-value";
-export { FormDateInput } from "./ikoncomponents/form-fields/date-input";
-export { FormFileInput } from "./ikoncomponents/form-fields/file-input";
-export { FormInput } from "./ikoncomponents/form-fields/input";
-export { FormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
-export { FormOtpInput } from "./ikoncomponents/form-fields/otp-input";
-export { FormPhoneInput } from "./ikoncomponents/form-fields/phone-input";
-export { FormTextarea } from "./ikoncomponents/form-fields/textarea";
-export { GradeTableLoader } from "./ikoncomponents/skeleton-loader/skeleton-table";
-export { SkeletonWidget } from "./ikoncomponents/skeleton-loader/skeleton-widget";
-export { UploadTab } from "./ikoncomponents/upload-tab";
-export { AppSidebar } from "./ikoncomponents/main-layout/app-sidebar";
-export { Footer } from "./ikoncomponents/main-layout/footer";
-export { Header } from "./ikoncomponents/main-layout/header";
-export { MainSidebar } from "./ikoncomponents/main-layout/main-sidebar";
-export { NavMain } from "./ikoncomponents/main-layout/nav-main";
-export { SidebarNavProvider, useSidebarNav, } from "./ikoncomponents/main-layout/SidebarNavContext";
-export { MainLayout } from "./ikoncomponents/main-layout";
-export { ProviderWrapper } from "./ikoncomponents/provider-wrapper";
-export { ActivitySheet } from "./ikoncomponents/activity-sheet";
-export { ImageCropperProvider, useImageCropper, } from "./ikoncomponents/image-cropper-upload";
-export { ImageCropper } from "./ikoncomponents/image-cropper-upload/image-cropper";
-export { CropperFormWithModal } from "./ikoncomponents/image-cropper-upload/cropper-form-with-modal";
-export { CropperForm } from "./ikoncomponents/image-cropper-upload/cropper-form";
-export { NewCropperImg } from "./ikoncomponents/image-cropper-upload/components/newCropper";
-export { NewImageForm } from "./ikoncomponents/image-cropper-upload/components/newImageUploadForm";
-export { WorkInProgress } from "./ikoncomponents/work-in-progress";
-export { CustomComboboxInput } from "./ikoncomponents/custom-combo-dropdown";
-export { ThemeProvider } from "./utils/theme-provider";
-export { RadiusProvider, useRadius } from "./utils/border-radius-provider";
-export { FontProvider, useFont } from "./utils/font-provider";
-export { cn } from "./utils/cn";
-export { setCookieSession, getCookieSession, clearCookieSession, clearAllCookieSession, } from "./utils/session/cookieSession";
-export { getValidAccessToken, refreshAccessToken, decodeAccessToken, logOut } from "./utils/token-management";
-export { useIsMobile } from "./hooks/use-mobile";
-export { useRefresh } from "./ikoncomponents/main-layout/RefreshContext";
+#!/usr/bin/env node
+import { init } from "./commands/init.js";
+const args = process.argv.slice(2);
+if (args[0] === "init") {
+    init();
+}
+else {
+    console.log(`
+ikoncomponents CLI
+
+Usage:
+  npx ikoncomponents init
+`);
+}

package/dist/utlis/copyDir.js

@@ -0,0 +1,7 @@
+import fs from "fs-extra";
+export async function copyDir(from, to) {
+    await fs.copy(from, to, {
+        overwrite: false,
+        errorOnExist: false
+    });
+}

package/package.json

@@ -1,103 +1,29 @@
 {
   "name": "ikoncomponents",
-  "version": "1.5.7",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "css": "dist/styles.css",
+  "version": "1.5.8",
+  "type": "module",
+  "bin": {
+    "ikoncomponents": "./bin.js"
+  },
+  "exports": {
+    ".": "./dist/index.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "templates",
+    "bin.js"
   ],
   "scripts": {
-    "build": "npm run build:js && npm run build:css",
-    "build:js": "tsc -p tsconfig.json",
-    "build:css": "postcss src/styles.css -o dist/styles.css --config postcss.config.mjs --minify",
-    "clean": "rimraf dist",
+    "build": "tsc",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/react-table": "^8.21.3",
-    "axios": "^1.13.1",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "countries-list": "^3.1.1",
-    "country-flag-icons": "^1.5.21",
-    "crypto-js": "^4.2.0",
-    "date-fns": "^4.1.0",
-    "echarts": "^6.0.0",
-    "eslint": "^9",
-    "framer-motion": "^12.23.22",
-    "input-otp": "^1.4.2",
-    "jwt-decode": "^4.0.0",
-    "lucide-react": "^0.552.0",
-    "motion": "^12.23.22",
-    "next": "16.0.0",
-    "next-themes": "^0.4.6",
-    "react": "^18.2.0",
-    "react-big-calendar": "^1.19.4",
-    "react-cropper": "^2.3.3",
-    "react-day-picker": "^9.9.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.64.0",
-    "shadcn": "^3.5.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
-    "uuid": "^13.0.0",
-    "vaul": "^1.1.2",
-    "zxcvbn": "^4.4.2"
+    "execa": "^9.6.0",
+    "fs-extra": "^11.3.0",
+    "kleur": "^4.1.5"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/crypto-js": "^4.2.2",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-big-calendar": "^1.16.3",
-    "@types/react-dom": "^19",
-    "@types/zxcvbn": "^4.4.5",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.0",
-    "next": "^14.0.0",
-    "postcss": "^8.5.6",
-    "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.1",
-    "postcss-preset-env": "^10.4.0",
-    "rimraf": "^6.0.1",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
-  },
-  "peerDependencies": {
-    "clsx": "^2.1.1",
-    "next": "16.0.0",
-    "next-themes": "^0.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwind-merge": "^3.3.1"
+    "@types/fs-extra": "^11.0.4",
+    "typescript": "^5.9.3"
   }
 }

package/templates/default/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/templates/default/ikonS/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/templates/default/ikonS/alert-dialog.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import { cn } from "../utils/cn"
+import { buttonVariants } from "./button"
+
+// ✅ Root (NO ref here!)
+const AlertDialog = (
+  props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>
+) => <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+AlertDialog.displayName = "AlertDialog"
+
+// ✅ Trigger
+const AlertDialogTrigger = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>
+>((props, ref) => (
+  <AlertDialogPrimitive.Trigger
+    data-slot="alert-dialog-trigger"
+    ref={ref}
+    {...props}
+  />
+))
+AlertDialogTrigger.displayName = "AlertDialogTrigger"
+
+// ✅ Portal (NO ref here!)
+const AlertDialogPortal = (
+  props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>
+) => <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+AlertDialogPortal.displayName = "AlertDialogPortal"
+
+// ✅ Overlay
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    ref={ref}
+    data-slot="alert-dialog-overlay"
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out " +
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
+      "fixed inset-0 z-50 bg-black/50",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogOverlay.displayName = "AlertDialogOverlay"
+
+// ✅ Content
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      data-slot="alert-dialog-content"
+      className={cn(
+        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out " +
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " +
+        "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " +
+        "translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 " +
+        "shadow-lg duration-200 sm:max-w-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = "AlertDialogContent"
+
+// ✅ Header
+const AlertDialogHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="alert-dialog-header"
+    className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+    {...props}
+  />
+))
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+// ✅ Footer
+const AlertDialogFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="alert-dialog-footer"
+    className={cn(
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+// ✅ Title
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    data-slot="alert-dialog-title"
+    className={cn("text-lg font-semibold bg-background", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = "AlertDialogTitle"
+
+// ✅ Description
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    data-slot="alert-dialog-description"
+    className={cn("text-muted-foreground text-sm bg-background", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName = "AlertDialogDescription"
+
+// ✅ Action
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = "AlertDialogAction"
+
+// ✅ Cancel
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "bg-background",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = "AlertDialogCancel"
+
+// ✅ Exports
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}