ikoncomponents 1.4.8 → 1.5.0

package/bin.js

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

package/dist/commands/init.js

@@ -0,0 +1,57 @@
+import path from "path";
+import process from "process";
+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"));
+    // 1️⃣ COPY templates/default → user src/
+    await copyDir(new URL("../../../templates/default", import.meta.url).pathname, 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,3 @@
-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, RenderSidebarNav, AddSidebarNav } 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";
+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.4.8",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./styles.css": "./dist/styles.css"
-  },
+  "version": "1.5.0",
+  "type": "module",
+  "bin": {
+   "ikoncomponents": "./bin.js"
+},
+
+
   "files": [
-    "dist"
-  ],
+  "dist",
+  "templates",
+  "bin.js"
+],
+
   "scripts": {
-    "build": "npm run clean && 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",
-    "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",
-    "framer-motion": "^12.23.22",
-    "input-otp": "^1.4.2",
-    "jwt-decode": "^4.0.0",
-    "lucide-react": "^0.552.0",
-    "motion": "^12.23.22",
-    "react-big-calendar": "^1.19.4",
-    "react-cropper": "^2.3.3",
-    "react-day-picker": "^9.9.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": {
-    "@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",
-    "baseline-browser-mapping": "^2.9.14",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.0",
-    "postcss": "^8.5.6",
-    "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.1",
-    "rimraf": "^6.0.1",
-    "tailwindcss": "^4",
-    "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",
-    "tailwindcss": "^4.0.0"
+    "@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/ikonShade/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/ikonShade/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,
+}

package/templates/default/ikonShade/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card dark:bg-background text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/templates/default/ikonShade/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+    ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+    return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }