ikoncomponents 1.4.8 → 1.5.0

package/templates/default/ikoncomponents/form-fields/otp-input/index.tsx

@@ -0,0 +1,39 @@
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../ikonShade/form'
+import React from 'react'
+import { FormInputProps } from '../types'
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot,
+} from "../../../ikonShade/input-otp"
+
+export function FormOtpInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps) {
+    return (
+        <>
+            <FormField
+                control={formControl}
+                name={name}
+                render={({ field }) => (
+                    <FormItem>
+                        {label && <FormLabel>{label}</FormLabel>}
+                        <FormControl>
+                            <InputOTP maxLength={4} {...field} >
+                                <InputOTPGroup>
+                                    <InputOTPSlot index={0} />
+                                    <InputOTPSlot index={1} />
+                                    <InputOTPSlot index={2} />
+                                    <InputOTPSlot index={3} />
+                                    {/* <InputOTPSlot index={4} />
+                                    <InputOTPSlot index={5} /> */}
+                                </InputOTPGroup>
+                            </InputOTP>
+                        </FormControl>
+                        {extraFormComponent && extraFormComponent(field.value)}
+                        {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}

package/templates/default/ikoncomponents/form-fields/password-input/index.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../ikonShade/form'
+import { Input } from '../../../ikonShade/input'
+import { Button } from '../../../ikonShade/button'
+import { Eye, EyeOff } from 'lucide-react'
+import { FormInputProps } from '../types'
+
+
+export function FormPasswordInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps) {
+    const [showPassword, setShowPassword] = React.useState(false)
+    const toggleVisibility = () => setShowPassword(!showPassword)
+
+    return (
+        <>
+            <FormField
+                control={formControl}
+                name={name}
+                render={({ field }) => (
+                    <FormItem>
+                        {label && <FormLabel>{label}</FormLabel>}
+                        <div className="relative">
+                            <FormControl>
+                                <Input
+                                    type={showPassword ? 'text' : 'password'}
+                                    {...field}
+                                    {...inputProps}
+                                    className={`${inputProps.className || ''} pr-10`}
+                                />
+                            </FormControl>
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="absolute right-0 top-0 h-full px-3 py-2 text-muted-foreground hover:bg-transparent!"
+                                onClick={toggleVisibility}
+                            >
+                                {showPassword ? (
+                                    <EyeOff className="h-4 w-4" />
+                                ) : (
+                                    <Eye className="h-4 w-4" />
+                                )}
+                            </Button>
+                        </div>
+                        {extraFormComponent && extraFormComponent(field.value)}
+                        {formDescription && <FormDescription>{formDescription}</FormDescription>}
+                        <FormMessage />
+                    </FormItem>
+                )}
+            />
+        </>
+    )
+}

package/templates/default/ikoncomponents/form-fields/phone-input/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export function FormPhoneInput() {
+    return (
+        <div>FormPhoneInput</div>
+    )
+}

package/templates/default/ikoncomponents/form-fields/textarea/index.tsx

@@ -0,0 +1,28 @@
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../ikonShade/form'
+
+import React from 'react'
+import { FormTextareaProps } from '../types'
+import { Textarea } from '../../../ikonShade/textarea'
+
+
+
+export function FormTextarea({ formControl, name, label, formItemClass, formDescription, ...textAreaProps }: FormTextareaProps) {
+  return (
+    <>
+      <FormField
+        control={formControl}
+        name={name}
+        render={({ field }) => (
+          <FormItem className={formItemClass}>
+            {label && <FormLabel>{label}</FormLabel>}
+            <FormControl>
+              <Textarea {...field}  {...textAreaProps} />
+            </FormControl>
+            {formDescription && <FormDescription>{formDescription}</FormDescription>}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  )
+}

package/templates/default/ikoncomponents/form-fields/types/index.ts

@@ -0,0 +1,46 @@
+import { Command } from "cmdk";
+import { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
+import { Matcher } from "react-day-picker";
+
+export interface FormFieldProps {
+  formControl: any;
+  label?: string;
+  formItemClass?: string;
+  formDescription?: string;
+  extraFormComponent?: (value: string) => ReactNode;
+}
+
+export interface FormInputProps
+  extends FormFieldProps,
+  InputHTMLAttributes<HTMLInputElement> {
+  name: string;
+}
+
+export interface FormTextareaProps
+  extends FormFieldProps,
+  TextareaHTMLAttributes<HTMLTextAreaElement> {
+  name: string;
+}
+
+export interface FormDateInputProps extends FormFieldProps {
+  name: string;
+  placeholder?: string;
+  dateFormat?: string;
+  calendarDateDisabled?: Matcher;
+  disabled?: boolean;
+}
+
+export interface FormComboboxInputProps extends FormFieldProps {
+  name: string;
+  placeholder?: string;
+  items: FormComboboxItemProps[];
+  onSelect?: (value: string | string[]) => void;
+  defaultValue?: []
+  disabled?: ((...args: any) => boolean) | boolean;
+}
+export interface FormComboboxItemProps {
+  value: string;
+  label?: string | undefined;
+  extra?: any;
+  disabled?: ((...args: any) => boolean) | boolean;
+}

package/templates/default/ikoncomponents/glowing-effect/index.tsx

@@ -0,0 +1,171 @@
+"use client";
+
+import React, { memo, useCallback, useEffect, useRef } from "react";
+import { animate } from "motion/react";
+import { cn } from "../../utils/cn";
+
+interface GlowingEffectProps {
+  blur?: number;
+  inactiveZone?: number;
+  proximity?: number;
+  spread?: number;
+  variant?: "default" | "white";
+  glow?: boolean;
+  className?: string;
+  disabled?: boolean;
+  movementDuration?: number;
+  borderWidth?: number;
+}
+export const GlowingEffect = (
+  ({
+    blur = 0,
+    inactiveZone = 0.7,
+    proximity = 0,
+    spread = 20,
+    variant = "default",
+    glow = false,
+    className,
+    movementDuration = 2,
+    borderWidth = 1,
+    disabled = true,
+  }: GlowingEffectProps) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const lastPosition = useRef({ x: 0, y: 0 });
+    const animationFrameRef = useRef<number>(0);
+
+    const handleMove = useCallback(
+      (e?: MouseEvent | { x: number; y: number }) => {
+        if (!containerRef.current) return;
+
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+
+        animationFrameRef.current = requestAnimationFrame(() => {
+          const element = containerRef.current;
+          if (!element) return;
+
+          const { left, top, width, height } = element.getBoundingClientRect();
+          const mouseX = e?.x ?? lastPosition.current.x;
+          const mouseY = e?.y ?? lastPosition.current.y;
+
+          if (e) {
+            lastPosition.current = { x: mouseX, y: mouseY };
+          }
+
+          const center = [left + width * 0.5, top + height * 0.5];
+          const distanceFromCenter = Math.hypot(
+            mouseX - center[0],
+            mouseY - center[1]
+          );
+          const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
+
+          if (distanceFromCenter < inactiveRadius) {
+            element.style.setProperty("--active", "0");
+            return;
+          }
+
+          const isActive =
+            mouseX > left - proximity &&
+            mouseX < left + width + proximity &&
+            mouseY > top - proximity &&
+            mouseY < top + height + proximity;
+
+          element.style.setProperty("--active", isActive ? "1" : "0");
+
+          if (!isActive) return;
+
+          const currentAngle =
+            parseFloat(element.style.getPropertyValue("--start")) || 0;
+          const targetAngle =
+            (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
+            Math.PI +
+            90;
+
+          const angleDiff = ((targetAngle - currentAngle + 180) % 360) - 180;
+          const newAngle = currentAngle + angleDiff;
+
+          animate(currentAngle, newAngle, {
+            duration: movementDuration,
+            ease: [0.16, 1, 0.3, 1],
+            onUpdate: (value) => {
+              element.style.setProperty("--start", String(value));
+            },
+          });
+        });
+      },
+      [inactiveZone, proximity, movementDuration]
+    );
+
+    useEffect(() => {
+      if (disabled) return;
+
+      const handleScroll = () => handleMove();
+      const handlePointerMove = (e: PointerEvent) => handleMove(e);
+
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      document.body.addEventListener("pointermove", handlePointerMove, {
+        passive: true,
+      });
+
+      return () => {
+        if (animationFrameRef.current) {
+          cancelAnimationFrame(animationFrameRef.current);
+        }
+        window.removeEventListener("scroll", handleScroll);
+        document.body.removeEventListener("pointermove", handlePointerMove);
+      };
+    }, [handleMove, disabled]);
+
+    return (
+      <>
+        <div
+          className={cn(
+            "pointer-events-none absolute -inset-px hidden rounded-[inherit] border opacity-0 transition-opacity",
+            glow && "opacity-100",
+            variant === "white" && "border-white",
+            disabled && "!block"
+          )}
+        />
+        <div
+          ref={containerRef}
+          style={
+            {
+              "--blur": `${blur}px`,
+              "--spread": spread,
+              "--start": "0",
+              "--active": "0",
+              "--glowingeffect-border-width": `${borderWidth}px`,
+              "--repeating-conic-gradient-times": "5",
+              "--gradient":
+                variant === "white"
+                  ? `repeating-conic-gradient(from 236.84deg at 50% 50%,var(--black),var(--black) calc(25% / var(--repeating-conic-gradient-times)))`
+                  : `linear-gradient(54.29deg, #00A5E9 22.93%, #A020F0 32.97%, #55C8FF 52.28%, #A020F0 73.13%, #071182 88.57%)`,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "pointer-events-none absolute inset-0 rounded-[inherit] opacity-100 transition-opacity",
+            glow && "opacity-100",
+            blur > 0 && "blur-[var(--blur)] ",
+            className,
+            disabled && "!hidden"
+          )}
+        >
+          <div
+            className={cn(
+              "glow",
+              "rounded-[inherit]",
+              'after:content-[""] after:rounded-[inherit] after:absolute after:inset-[calc(-1*var(--glowingeffect-border-width))]',
+              "after:[border:var(--glowingeffect-border-width)_solid_transparent]",
+              "after:[background:var(--gradient)] after:[background-attachment:fixed]",
+              "after:opacity-[var(--active)] after:transition-opacity after:duration-300",
+              "after:[mask-clip:padding-box,border-box]",
+              "after:[mask-composite:intersect]",
+              "after:[mask-image:linear-gradient(#0000,#0000),conic-gradient(from_calc((var(--start)-var(--spread))*1deg),#00000000_0deg,#fff,#00000000_calc(var(--spread)*2deg))]"
+            )}
+          />
+        </div>
+      </>
+    );
+  }
+);

package/templates/default/ikoncomponents/icon/index.tsx

@@ -0,0 +1,22 @@
+"use client"
+import * as React from 'react'
+import * as LucideIcons from 'lucide-react'
+
+export interface IconProps {
+    name: string
+    size?: number | string
+    color?: string
+    className?: string
+    strokeWidth?: number
+}
+
+export function Icon({ name, ...props }: IconProps) {
+    const IconComponent = (LucideIcons as any)[name]
+
+    if (!IconComponent) {
+        console.warn(`Icon "${name}" not found in lucide-react`)
+        return null
+    }
+
+    return <IconComponent {...props} />
+}

package/templates/default/ikoncomponents/image-cropper-upload/components/cropperImg.css

@@ -0,0 +1,19 @@
+.box {
+    display: inline-block;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+  .img-preview {
+    overflow: hidden;
+  }
+  
+  .cropper-crop-box,
+  .cropper-view-box {
+    border-radius: 50%;
+  }
+  
+  .cropper-view-box {
+    box-shadow: 0 0 0 1px #39f;
+    outline: 0;
+  }
+  

package/{dist/ikoncomponents/image-cropper-upload/components/newCropper.js → templates/default/ikoncomponents/image-cropper-upload/components/newCropper.tsx}

@@ -1,85 +1,117 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import Cropper from "react-cropper";
-import "cropperjs/dist/cropper.css";
-export const NewCropperImg = ({ imageSrc, onCroppedImage, aspectRatio, rotationAngle, zoomLevel, moveDirection, currentState }) => {
-    const cropperRef = useRef(null);
-    const onCrop = () => {
-        var _a;
-        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
-        if (cropper) {
-            cropper.setDragMode('move');
-            const croppedCanvas = cropper.getCroppedCanvas();
-            const croppedImageUrl = croppedCanvas.toDataURL(); // Data URL for preview
-            onCroppedImage(croppedImageUrl);
-        }
-        else {
-            console.log("Cropper instance is not available.");
-        }
-    };
-    useEffect(() => {
-        var _a;
-        // Rotate the image whenever the rotation angle changes
-        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
-        if (cropper) {
-            cropper.rotate(rotationAngle); // Apply the rotation to the image
-        }
-    }, [rotationAngle]); // Effect will run whenever rotationAngle changes
-    useEffect(() => {
-        var _a;
-        // Zoom the image whenever the zoom level changes
-        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
-        if (cropper) {
-            const cropBoxData = cropper.getCropBoxData();
-            if (cropBoxData.width) {
-                console.log('Inside cropper scale');
-                cropper.scale(zoomLevel); // Apply the zoom level
-            }
-            // Apply zoom directly without using getZoom method
-        }
-    }, [zoomLevel]); // Effect will run whenever zoomLevel changes
-    // Move the image based on the moveDirection prop
-    useEffect(() => {
-        var _a;
-        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
-        if (cropper) {
-            // Make sure moveDirection is available before calling move
-            const cropBoxData = cropper.getCropBoxData();
-            if (cropBoxData.width) {
-                const { x, y } = moveDirection;
-                if (typeof x === "number" && typeof y === "number") {
-                    cropper.move(x, y); // Move the image
-                }
-            }
-        }
-    }, [moveDirection]); // This effect runs whenever moveDirection changes
-    useEffect(() => {
-        var _a;
-        const cropper = (_a = cropperRef.current) === null || _a === void 0 ? void 0 : _a.cropper;
-        if (cropper) {
-            cropper.setAspectRatio(aspectRatio); // Dynamically set the aspect ratio
-            if (aspectRatio === 1) {
-                // Get the displayed (canvas) dimensions of the image
-                const canvasData = cropper.getCanvasData();
-                const canvasWidth = canvasData.width; // Displayed width of the image
-                const canvasHeight = canvasData.height; // Displayed height of the image
-                const canvasLeft = canvasData.left; // Left offset of the image within the container
-                const canvasTop = canvasData.top; // Top offset of the image within the container
-                // Define the desired crop box dimensions
-                const cropBoxWidth = 200; // Desired crop box width
-                const cropBoxHeight = 100; // Desired crop box height
-                // Calculate the center position for the crop box
-                const left = canvasLeft + (canvasWidth - cropBoxWidth) / 2;
-                const top = canvasTop + (canvasHeight - cropBoxHeight) / 2;
-                // Set the crop box data
-                cropper.setCropBoxData({
-                    left: left,
-                    top: top,
-                    width: cropBoxWidth,
-                    height: cropBoxHeight,
-                });
-            }
-        }
-    }, [aspectRatio]); // Trigger this effect whenever aspectRatio changes
-    return (_jsx(Cropper, { src: imageSrc, style: { height: "100%", width: "100%", objectFit: "contain" }, guides: true, crop: onCrop, ref: cropperRef, dragMode: 'move', movable: true, zoomable: true, scalable: true, cropBoxMovable: true, cropBoxResizable: false }));
-};
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Cropper, { ReactCropperElement } from "react-cropper";
+import "cropperjs/dist/cropper.css";
+
+export interface CropperImgProps {
+    imageSrc: string | undefined; // imageSrc can be a string (image URL or base64) or undefined
+    onCroppedImage: (imageUrl: string) => void; // Callback function from parent to pass cropped image
+    aspectRatio: number;
+    rotationAngle: number; // Rotation angle passed from the parent
+    zoomLevel: number; // Add zoomLevel prop
+    moveDirection: { x: number; y: number }; // Movement props
+    currentState: string
+}
+
+export const NewCropperImg: React.FC<CropperImgProps> = ({ imageSrc, onCroppedImage, aspectRatio, rotationAngle, zoomLevel, moveDirection, currentState }) => {
+    const cropperRef = useRef<ReactCropperElement>(null);
+
+    const onCrop = () => {
+        const cropper = cropperRef.current?.cropper;
+        if (cropper) {
+            cropper.setDragMode('move');
+            const croppedCanvas = cropper.getCroppedCanvas();
+            const croppedImageUrl = croppedCanvas.toDataURL(); // Data URL for preview
+            onCroppedImage(croppedImageUrl);
+        } else {
+            console.log("Cropper instance is not available.");
+        }
+    };
+
+    useEffect(() => {
+        // Rotate the image whenever the rotation angle changes
+        const cropper = cropperRef.current?.cropper;
+        if (cropper) {
+            cropper.rotate(rotationAngle); // Apply the rotation to the image
+        }
+
+    }, [rotationAngle]); // Effect will run whenever rotationAngle changes
+
+    useEffect(() => {
+        // Zoom the image whenever the zoom level changes
+        const cropper = cropperRef.current?.cropper;
+
+        if (cropper) {
+            const cropBoxData = cropper.getCropBoxData();
+            if (cropBoxData.width) {
+                console.log('Inside cropper scale')
+                cropper.scale(zoomLevel); // Apply the zoom level
+            }
+            // Apply zoom directly without using getZoom method
+        }
+    }, [zoomLevel]); // Effect will run whenever zoomLevel changes
+
+    // Move the image based on the moveDirection prop
+    useEffect(() => {
+        const cropper = cropperRef.current?.cropper;
+        if (cropper) {
+            // Make sure moveDirection is available before calling move
+            const cropBoxData = cropper.getCropBoxData();
+            if (cropBoxData.width) {
+                const { x, y } = moveDirection;
+                if (typeof x === "number" && typeof y === "number") {
+                    cropper.move(x, y); // Move the image
+                }
+            }
+
+        }
+    }, [moveDirection]); // This effect runs whenever moveDirection changes
+
+    useEffect(() => {
+        const cropper = cropperRef.current?.cropper;
+        if (cropper) {
+            cropper.setAspectRatio(aspectRatio); // Dynamically set the aspect ratio
+            if (aspectRatio === 1) {
+                // Get the displayed (canvas) dimensions of the image
+                const canvasData = cropper.getCanvasData();
+                const canvasWidth = canvasData.width;  // Displayed width of the image
+                const canvasHeight = canvasData.height; // Displayed height of the image
+                const canvasLeft = canvasData.left;  // Left offset of the image within the container
+                const canvasTop = canvasData.top;    // Top offset of the image within the container
+
+                // Define the desired crop box dimensions
+                const cropBoxWidth = 200;  // Desired crop box width
+                const cropBoxHeight = 100; // Desired crop box height
+
+                // Calculate the center position for the crop box
+                const left = canvasLeft + (canvasWidth - cropBoxWidth) / 2;
+                const top = canvasTop + (canvasHeight - cropBoxHeight) / 2;
+
+                // Set the crop box data
+                cropper.setCropBoxData({
+                    left: left,
+                    top: top,
+                    width: cropBoxWidth,
+                    height: cropBoxHeight,
+                });
+            }
+
+        }
+
+    }, [aspectRatio]); // Trigger this effect whenever aspectRatio changes
+
+    return (
+        <Cropper
+            src={imageSrc}
+            style={{ height: "100%", width: "100%", objectFit: "contain" }}
+            guides={true} // Show guides for cropping
+            crop={onCrop} // Callback to capture the cropped area
+            ref={cropperRef}
+            dragMode='move'
+            movable={true}
+            zoomable={true} // Allow zooming of the image
+            scalable={true} // Prevent scaling of the crop box
+            cropBoxMovable={true} // Allow the crop box to be moved inside the image
+            cropBoxResizable={false} // Disable resizing the crop box
+        />
+    );
+};