ikoncomponents 1.5.8 → 1.5.9

package/package.json

@@ -1,29 +1,103 @@
 {
   "name": "ikoncomponents",
-  "version": "1.5.8",
-  "type": "module",
-  "bin": {
-    "ikoncomponents": "./bin.js"
-  },
-  "exports": {
-    ".": "./dist/index.js"
-  },
+  "version": "1.5.9",
+  "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/ikonS/accordion.tsx

@@ -1,66 +0,0 @@
-"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

@@ -1,179 +0,0 @@
-"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/ikonS/alert.tsx

@@ -1,66 +0,0 @@
-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/ikonS/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"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 }

package/templates/default/ikonS/avatar.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-
-import { cn } from "../utils/cn"
-
-function Avatar({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-foreground text-background flex size-full items-center justify-center rounded-full",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Avatar, AvatarImage, AvatarFallback }

package/templates/default/ikonS/badge.tsx

@@ -1,49 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../utils/cn"
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive",
-        outline:
-          "text-foreground bg-[var(--background)] [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        verified:
-          "border-transparent bg-[#15803D] text-white [a&]:hover:bg-[#1F9145] focus-visible:ring-[#15803D]/20 dark:focus-visible:ring-[#15803D]/40",
-
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }