ikoncomponents 1.5.5 → 1.5.7

package/package.json

@@ -1,29 +1,103 @@
 {
   "name": "ikoncomponents",
-  "version": "1.5.5",
-  "type": "module",
-  "bin": {
-    "ikoncomponents": "./bin.js"
-  },
-  "exports": {
-    ".": "./dist/index.js"
-  },
+  "version": "1.5.7",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "css": "dist/styles.css",
   "files": [
-    "dist",
-    "templates",
-    "bin.js"
+    "dist"
   ],
   "scripts": {
-    "build": "tsc",
+    "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",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "execa": "^9.6.0",
-    "fs-extra": "^11.3.0",
-    "kleur": "^4.1.5"
+    "@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"
   },
   "devDependencies": {
-    "@types/fs-extra": "^11.0.4",
-    "typescript": "^5.9.3"
+    "@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"
   }
 }

package/bin.js

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

package/dist/commands/init.js

@@ -1,63 +0,0 @@
-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/utlis/copyDir.js

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

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

@@ -1,19 +0,0 @@
-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/ikoncomponents/action-menu/index.tsx

@@ -1,108 +0,0 @@
-"use client";
-import * as React from "react";
-import { Button } from "../../shadcn/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "../../shadcn/dropdown-menu";
-import { MoreHorizontal } from "lucide-react";
-import type { ActionMenuProps, ExtraActionParams } from "./type";
-import { IconButtonWithTooltip } from "../buttons";
-
-export function ActionMenu({
-  actionMenus,
-  extraActionParams,
-}: {
-  actionMenus: ActionMenuProps[];
-  extraActionParams?: ExtraActionParams;
-}) {
-  const renderMenuItems = (items: ActionMenuProps[]) => {
-    items = items.filter((item) => {
-      // biome-ignore lint/complexity/useOptionalChain: <explanation>
-      return (item?.visibility === undefined || item.visibility === true || (item.visibility && item.visibility(...(extraActionParams?.arguments || []))))
-    })
-    if (items.length === 0) {
-      return <DropdownMenuItem className="text-center">No action available.</DropdownMenuItem>
-    }
-    return items.map((item, index) => {
-      if (item.type === "label") {
-        return <DropdownMenuLabel key={index}>{String(item.label)}</DropdownMenuLabel>;
-      }
-
-      if (item.type === "separator") {
-        return <DropdownMenuSeparator key={index} />;
-      }
-
-      if (item.type === "group" && item.items) {
-        return (
-          <DropdownMenuGroup key={index}>
-            {renderMenuItems(item.items)}
-          </DropdownMenuGroup>
-        );
-      }
-
-      if (item.items) {
-        return (
-          <DropdownMenuSub key={index}>
-            <DropdownMenuSubTrigger>{String(item.label)}</DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                {renderMenuItems(item.items)}
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-        );
-      }
-
-      let labelContent = "";
-      if (typeof item.label === "function") {
-        labelContent = item.label(...(extraActionParams?.arguments || []));
-      } else {
-        labelContent = item.label;
-      }
-      return (
-
-        <DropdownMenuItem
-          key={index}
-          disabled={item.disabled}
-          onClick={() =>
-            // biome-ignore lint/complexity/useOptionalChain: <explanation>
-            item.onClick &&
-            item.onClick(...(extraActionParams?.arguments || []))
-          }
-        >
-          {item.icon && <item.icon />}
-          {labelContent}
-          {/* {item.shortcut && <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>} */}
-        </DropdownMenuItem>
-      );
-    });
-  };
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <IconButtonWithTooltip
-          variant="ghost"
-          tooltipContent="Actions"
-          className="h-8 w-8 p-0 border-0 bg-transparent text-foreground keross:text-white elevation-0 shadow-none hover:bg-transparent"
-        >
-          <MoreHorizontal />
-        </IconButtonWithTooltip>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="end">
-        {renderMenuItems(actionMenus)}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/templates/default/ikoncomponents/action-menu/type.ts

@@ -1,18 +0,0 @@
-import type { LucideProps } from "lucide-react";
-import type { ForwardRefExoticComponent, RefAttributes } from "react";
-
-export interface ActionMenuProps {
-  items?: ActionMenuProps[];
-  type?: "sub" | "group" | "separator" | "label" | null;
-  label: ((...args: any) => string) | string;
-  icon?: ForwardRefExoticComponent<
-    Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
-  >;
-  disabled?: boolean;
-  visibility?: ((...args: any) => boolean) | boolean;
-  onClick?: (...args: any) => void;
-}
-
-export interface ExtraActionParams {
-  arguments?: any[];
-}

package/templates/default/ikoncomponents/activity-sheet/index.tsx

@@ -1,63 +0,0 @@
-"use client"
-import React from "react";
-import { AlignJustify } from "lucide-react";
-import { TabArray } from "../tabs/type";
-import {CustomTabs} from "../tabs";
-import {NoDataComponent} from "../no-data";
-import {UploadTab} from "../upload-tab";
-import { SheetComponent } from "../sheet";
-
-export type ActivityLogProps = {
-  id: string;
-  activity: string;
-  updatedBy: string;
-  updatedOn: string;
-  source: string;
-  parentId: string;
-};
-
-export function ActivitySheet({ activityLogs = [] }: { activityLogs?: ActivityLogProps[] }) {
-
-  const tabArray: TabArray[] = [
-    {
-      tabName: "Activity",
-      tabId: "tab-activity",
-      default: true,
-      tabContent: <div className="overflow-auto flex flex-col gap-2 h-full">
-        {activityLogs.length > 0 ? (
-          activityLogs.map((log: any) => (
-            <div key={log.id} className="border-b text-sm pb-2">
-              <p className="font-medium pb-1">{log.activity}</p>
-              <p className="text-gray-500 pb-1">
-                Updated On:{" "}
-                <span className="text-gray-700">
-                  {new Date(log.updatedOn).toLocaleString()}
-                </span>
-              </p>
-              <p className="text-gray-500 pb-1">
-                {/* Updated By: <span className="text-gray-700">{userMap[log.updatedBy]?.userName || "n/a"}</span> */}
-                Updated By: <span className="text-gray-700">{log.updatedBy}</span>
-              </p>
-            </div>
-          ))
-        ) : (
-          <NoDataComponent text="No Activity Logs Available" />
-        )}
-      </div>
-    }, {
-      tabName: "File Upload",
-      tabId: "tab-upload",
-      default: false,
-      tabContent: <UploadTab />
-    }
-  ]
-  return (
-    <SheetComponent
-      buttonText=""
-      buttonIcon={<AlignJustify />}
-      sheetTitle=""
-      sheetContent={<CustomTabs tabArray={tabArray} tabListClass='' />}
-      closeButton={true}
-    />
-  );
-}

package/templates/default/ikoncomponents/alert-dialog/dialog-context.tsx

@@ -1,65 +0,0 @@
-'use client'
-import { createContext, useContext, useState, ReactNode } from "react"
-import { CustomAlertDialog } from "../alert-dialog";
-
-interface DialogContextProps {
-    openDialog: (options: DialogOptions) => void;
-    closeDialog: () => void;
-}
-
-interface DialogOptions {
-    title: string;
-    description: string;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    onThird?: () => void;
-    confirmText?: string;
-    cancelText?: string;
-    thirdOptionText?: string;
-    fontSize?: string;
-}
-
-const DialogContext = createContext<DialogContextProps | undefined>(undefined);
-
-export const useDialog = () => {
-    const context = useContext(DialogContext);
-    if (!context) {
-        throw new Error("useDialog must be used within a DialogProvider");
-    }
-    return context;
-};
-
-export const DialogProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [dialogOptions, setDialogOptions] = useState<DialogOptions | null>(null);
-
-    const openDialog = (options: DialogOptions) => setDialogOptions(options);
-    const closeDialog = () => setDialogOptions(null);
-
-    return (
-        <DialogContext.Provider value={{ openDialog, closeDialog }}>
-            {children}
-            {dialogOptions && (
-                <CustomAlertDialog
-                    title={dialogOptions.title}
-                    description={dialogOptions.description}
-                    fontSize={dialogOptions.fontSize || "text-base"}
-                    cancelText={dialogOptions.cancelText || ""}
-                    confirmText={dialogOptions.confirmText || ""}
-                    thirdOptionText={dialogOptions.thirdOptionText || ""}
-                    onConfirm={() => {
-                        if (dialogOptions.onConfirm) dialogOptions.onConfirm();
-                        closeDialog();
-                    }}
-                    onCancel={() => {
-                        if (dialogOptions.onCancel) dialogOptions.onCancel();
-                        closeDialog();
-                    }}
-                    onThird={() => {
-                        if (dialogOptions.onThird) dialogOptions.onThird();
-                        closeDialog();
-                    }}
-                />
-            )}
-        </DialogContext.Provider>
-    );
-};

package/templates/default/ikoncomponents/alert-dialog/index.tsx

@@ -1,80 +0,0 @@
-import * as React from "react";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "../../shadcn/alert-dialog";
-
-interface CustomAlertDialogProps {
-  title: string;
-  description?: string;
-  fontSize?: string; // Tailwind font size class, e.g., "text-sm", "text-lg"
-  cancelText?: string; // Custom text for the cancel button
-  confirmText?: string; // Custom text for the confirm button
-  thirdOptionText?: string; // Custom text for the third button
-  onCancel?: () => void; // Callback function for cancel action
-  onConfirm?: () => void; // Callback function for confirm action
-  onThird?: () => void;
-}
-
-export const CustomAlertDialog: React.FC<CustomAlertDialogProps> = ({
-  title,
-  description,
-  fontSize = "text-base",
-  cancelText = "", // Default cancel button text
-  confirmText = "", // Default confirm button text
-  thirdOptionText = "", // Default third button text
-  onCancel, // Optional callback for cancel action
-  onConfirm, // Optional callback for confirm action
-  onThird, // Optional callback for third action
-}) => {
-  return (
-    <AlertDialog open={true}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle className={fontSize}>{title}</AlertDialogTitle>
-          <AlertDialogDescription className={fontSize}>
-            {description}
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          {cancelText != "" && (
-            <AlertDialogCancel
-              onClick={() => {
-                if (onCancel) onCancel(); // Execute cancel callback if provided
-              }}
-            >
-              {cancelText}
-            </AlertDialogCancel>
-          )}
-          {thirdOptionText != "" && (
-            <AlertDialogAction
-              className="bg-blue-500"
-              color="black"
-              onClick={() => {
-                if (onThird) onThird(); // Execute confirm callback if provided
-              }}
-            >
-              {thirdOptionText}
-            </AlertDialogAction>
-          )}
-          {confirmText != "" && (
-            <AlertDialogAction
-              onClick={() => {
-                if (onConfirm) onConfirm(); // Execute confirm callback if provided
-              }}
-            >
-              {confirmText}
-            </AlertDialogAction>
-          )}
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
-  );
-};
-

package/templates/default/ikoncomponents/app-breadcrumb/BreadcrumbProvider.tsx

@@ -1,68 +0,0 @@
-"use client"
-import { createContext, useContext, useState, ReactNode } from 'react';
-
-// Define the type for a breadcrumb item
-export interface BreadcrumbItemProps {
-  title: string;
-  href?: string;
-  level: number;
-}
-
-// Define the type for the context state
-interface BreadcrumbContextType {
-  breadcrumbItems: BreadcrumbItemProps[];
-  addBreadcrumb: (item: BreadcrumbItemProps) => void;
-  backBreadcrumb: (item: BreadcrumbItemProps) => void;
-  addBreadcrumbItems: (items: BreadcrumbItemProps[], isReplace?: boolean) => void;
-  clearBreadcrumb: () => void;
-}
-
-// Create the context with a default value
-const BreadcrumbContext = createContext<BreadcrumbContextType | undefined>(undefined);
-
-// Create a provider component
-export function BreadcrumbProvider({ children }: { children: ReactNode }) {
-  const [breadcrumbItems, setBreadcrumbItems] = useState<BreadcrumbItemProps[]>([]);
-  // Function to add a breadcrumb item
-  const addBreadcrumb = (item: BreadcrumbItemProps) => {
-    setBreadcrumbItems((prevItems) => {
-      const filterState = prevItems.filter((e) => e.level < item.level);
-      return [...filterState, item];
-    });
-  };
-
-  const addBreadcrumbItems = (items: BreadcrumbItemProps[], isReplace?: boolean) => {
-    if (isReplace) {
-      setBreadcrumbItems(items);
-    } else {
-      setBreadcrumbItems((prevItems) => [...prevItems, ...items]);
-    }
-  };
-
-  // Function to go back in the breadcrumb
-  const backBreadcrumb = (item: BreadcrumbItemProps) => {
-    setBreadcrumbItems((prevItems) => {
-      const filterState = prevItems.filter((e) => e.level <= item.level);
-      return [...filterState];
-    });
-  };
-
-  const clearBreadcrumb = () => {
-    setBreadcrumbItems([]);
-  };
-
-  return (
-    <BreadcrumbContext.Provider value={{ breadcrumbItems, addBreadcrumb, backBreadcrumb, addBreadcrumbItems, clearBreadcrumb }}>
-      {children}
-    </BreadcrumbContext.Provider>
-  );
-}
-
-// Custom hook to use the BreadcrumbContext
-export function useBreadcrumb() {
-  const context = useContext(BreadcrumbContext);
-  if (!context) {
-    throw new Error('useBreadcrumb must be used within a BreadcrumbProvider');
-  }
-  return context;
-}