ikoncomponents 1.5.8 → 1.5.10

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

@@ -1,39 +0,0 @@
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form'
-import React from 'react'
-import { FormInputProps } from '../types'
-import {
-    InputOTP,
-    InputOTPGroup,
-    InputOTPSlot,
-} from "../../../shadcn/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

@@ -1,52 +0,0 @@
-import * as React from 'react'
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form'
-import { Input } from '../../../shadcn/input'
-import { Button } from '../../../shadcn/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

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

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

@@ -1,28 +0,0 @@
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form'
-
-import React from 'react'
-import { FormTextareaProps } from '../types'
-import { Textarea } from '../../../shadcn/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

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

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

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

@@ -1,19 +0,0 @@
-.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;
-  }
-