kmod-cli 1.0.10

package/component-templates/components/gradient-outline.tsx

@@ -0,0 +1,233 @@
+// "use client";
+// import React, {FC, HTMLAttributes, useState, useEffect, useRef} from "react";
+
+// type GradientOutlineProps = {
+//   children: React.ReactNode;
+//   strokeWidth?: number;
+//   borderRadius?: number;
+//   gradientColors?: string[];
+//   hoverGradientColors?: string[];
+//   gradientAngle?: number;
+//   allowHover?: boolean;
+//   className?: string;
+//   id: string;
+//   onClick?: () => void;
+// } & HTMLAttributes<HTMLDivElement>;
+
+// const GradientOutline: FC<GradientOutlineProps> = ({
+//   children,
+//   id,
+//   allowHover = true,
+//   strokeWidth = 1,
+//   borderRadius = 16,
+//   hoverGradientColors = ["#E6CAA4", "#E9B84E"],
+//   gradientColors = [
+//     "rgba(255, 255, 255, 0.08)",
+//     "rgba(255, 255, 255, 0.4)",
+//     "rgba(255, 255, 255, 0)",
+//     "rgba(255, 255, 255, 0)",
+//     "rgba(255, 255, 255, 0.1)",
+//   ],
+//   gradientAngle = 45,
+//   className = "",
+//   onClick,
+//   ...props
+// }) => {
+//   const [isHovered, setIsHovered] = useState(false);
+//   const gradientId = `gradient-${Math.random().toString(36).substr(2, 9)}`;
+//   const containerRef = useRef<HTMLDivElement>(null);
+//   const [dimensions, setDimensions] = useState({width: 100, height: 100});
+
+//   useEffect(() => {
+//     if (containerRef.current) {
+//       const {width, height} = containerRef.current.getBoundingClientRect();
+//       setDimensions({width, height});
+//     }
+//   }, []);
+
+//   const colors = isHovered ? hoverGradientColors : gradientColors;
+
+//   return (
+//     <div
+//       ref={containerRef}
+//       id={id}
+//       onClick={onClick}
+//       onMouseEnter={() => allowHover && setIsHovered(true)}
+//       onMouseLeave={() => allowHover && setIsHovered(false)}
+//       className={`relative inline-block overflow-hidden p-2 ${className}`}
+//       style={{borderRadius}}
+//       {...props}
+//     >
+//       {children}
+//       <svg
+//         width="100%"
+//         height="100%"
+//         className="absolute top-0 left-0"
+//         viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
+//         preserveAspectRatio="none"
+//       >
+//         <defs>
+//           <linearGradient
+//             id={gradientId}
+//             x1={Math.cos((gradientAngle * Math.PI) / 180)}
+//             y1={Math.sin((gradientAngle * Math.PI) / 180)}
+//             x2={1 - Math.cos((gradientAngle * Math.PI) / 180)}
+//             y2={1 - Math.sin((gradientAngle * Math.PI) / 180)}
+//           >
+//             {colors.map((color, index) => (
+//               <stop
+//                 key={index}
+//                 offset={`${(index / (colors.length - 1)) * 100}%`}
+//                 stopColor={color}
+//               />
+//             ))}
+//           </linearGradient>
+//         </defs>
+//         <rect
+//           x={strokeWidth / 2}
+//           y={strokeWidth / 2}
+//           width={dimensions.width - strokeWidth}
+//           height={dimensions.height - strokeWidth}
+//           rx={borderRadius}
+//           ry={borderRadius}
+//           stroke={`url(#${gradientId})`}
+//           strokeWidth={strokeWidth}
+//           fill="none"
+//         />
+//       </svg>
+//     </div>
+//   );
+// };
+
+// export default GradientOutline;
+
+// // GradientOutline id="gc-1" className="w-full h-fit">
+// //     <div className="w-full text-white bg-black">
+// //     <span>abc cbac</span>
+// //     <span>abc cbac</span>
+// //     <span>abc cbac</span>
+// //     <span>abc cbac</span>
+// //     </div>
+// // </GradientOutline>
+
+"use client";
+import React, {
+  FC,
+  HTMLAttributes,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+
+export type GradientOutlineProps = {
+  children: React.ReactNode;
+  strokeWidth?: number;
+  borderRadius?: number;
+  gradientColors?: string[];
+  hoverGradientColors?: string[];
+  gradientAngle?: number;
+  allowHover?: boolean;
+  className?: string;
+  onClick?: () => void;
+} & HTMLAttributes<HTMLDivElement>;
+
+export const GradientOutline: FC<GradientOutlineProps> = ({
+  children,
+  allowHover = true,
+  strokeWidth = 1,
+  borderRadius = 16,
+  gradientColors = [
+    "rgba(255, 255, 255, 0.08)",
+    "rgba(255, 255, 255, 0.4)",
+    "rgba(255, 255, 255, 0)",
+    "rgba(255, 255, 255, 0)",
+    "rgba(255, 255, 255, 0.1)",
+  ],
+  hoverGradientColors = ["#E6CAA4", "#E9B84E"],
+  gradientAngle = 45,
+  className = "",
+  onClick,
+  ...props
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 100, height: 100 });
+  const gradientId = `gradient-${useId()}`; // SSR-safe ID
+
+  // Resize observer để responsive
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        const { width, height } = containerRef.current.getBoundingClientRect();
+        setDimensions({ width, height });
+      }
+    };
+    updateDimensions();
+
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    if (containerRef.current) resizeObserver.observe(containerRef.current);
+    window.addEventListener("resize", updateDimensions);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateDimensions);
+    };
+  }, []);
+
+  const colors = isHovered ? hoverGradientColors : gradientColors;
+
+  // Gradient angle helper
+  const rad = (gradientAngle % 360) * (Math.PI / 180);
+  const x1 = 0.5 - 0.5 * Math.cos(rad);
+  const y1 = 0.5 - 0.5 * Math.sin(rad);
+  const x2 = 0.5 + 0.5 * Math.cos(rad);
+  const y2 = 0.5 + 0.5 * Math.sin(rad);
+
+  return (
+    <div
+      ref={containerRef}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={(e) => e.key === "Enter" && onClick?.()}
+      onMouseEnter={() => allowHover && setIsHovered(true)}
+      onMouseLeave={() => allowHover && setIsHovered(false)}
+      className={`relative inline-block overflow-hidden ${className}`}
+      style={{ borderRadius }}
+      {...props}
+    >
+      {children}
+      <svg
+        width="100%"
+        height="100%"
+        className="absolute top-0 left-0 pointer-events-none"
+        viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <linearGradient id={gradientId} x1={x1} y1={y1} x2={x2} y2={y2}>
+            {colors.map((color, index) => (
+              <stop
+                key={index}
+                offset={`${(index / (colors.length - 1)) * 100}%`}
+                stopColor={color}
+              />
+            ))}
+          </linearGradient>
+        </defs>
+        <rect
+          x={strokeWidth / 2}
+          y={strokeWidth / 2}
+          width={dimensions.width - strokeWidth}
+          height={dimensions.height - strokeWidth}
+          rx={borderRadius}
+          ry={borderRadius}
+          stroke={`url(#${gradientId})`}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+      </svg>
+    </div>
+  );
+};

package/component-templates/components/gradient-svg.tsx

@@ -0,0 +1,157 @@
+// import React from 'react';
+
+// import { ReactSVG } from 'react-svg';
+
+// export type GradientSVGProps = {
+//   image: string;
+//   isActive?: boolean;
+// };
+// export const GradientSVG = ({ image, isActive }: GradientSVGProps) => {
+//   return (
+//     <ReactSVG
+//       src={image}
+//       beforeInjection={(svg) => {
+//         const defs = document.createElementNS(
+//           "http://www.w3.org/2000/svg",
+//           "defs"
+//         );
+//         if (isActive) {
+//           defs.innerHTML = `
+//         <linearGradient id="customGradient" x1="0" y1="0" x2="0" y2="1">
+//           <stop offset="0%" stop-color="#A079FC" />
+//           <stop offset="100%" stop-color="#0D5BB5" />
+//         </linearGradient>
+//       `;
+//         }
+//         svg.prepend(defs);
+
+//         svg.querySelectorAll("[stroke]").forEach((el) => {
+//           el.setAttribute(
+//             "stroke",
+//             isActive ? "url(#customGradient)" : "#515158"
+//           );
+//         });
+//         svg.querySelectorAll("[fill]").forEach((el) => {
+//           el.setAttribute(
+//             "fill",
+//             isActive ? "url(#customGradient)" : "#515158"
+//           );
+//         });
+//       }}
+//       className="h-9 w-9"
+//     />
+//   );
+// };
+
+import React from 'react';
+
+import { ReactSVG } from 'react-svg';
+
+export type GradientStop = {
+  offset: string; // "0%", "50%", ...
+  color: string;  // "#hex" or "rgb(...)"
+};
+
+export type GradientSVGProps = {
+  image: string;
+  isActive?: boolean;
+  gradientId?: string;
+  gradientStops?: GradientStop[];
+  stroke?: string | { gradient: true };
+  fill?: string | { gradient: true };
+  gradientType?: "linear" | "radial";
+  angle?: number; // For linear gradients, if needed
+  className?: string;
+  style: React.CSSProperties;
+};
+
+export const GradientSVG = ({
+  image,
+  isActive = false,
+  gradientId = "customGradient",
+  gradientStops = [
+    { offset: "0%", color: "#A079FC" },
+    { offset: "100%", color: "#0D5BB5" },
+  ],
+  stroke = { gradient: true },
+  fill = { gradient: true },
+  gradientType = "linear",
+  angle = 180, // it can be used for linear gradients
+  className = "h-9 w-9",
+  style = {},
+  ...props
+}: GradientSVGProps) => {
+  return (
+    <ReactSVG
+      src={image}
+      beforeInjection={(svg) => {
+        if (isActive && ((stroke as any).gradient || (fill as any).gradient)) {
+          if (!svg.querySelector(`#${gradientId}`)) {
+            const defs = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "defs"
+            );
+
+            const gradient = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              gradientType === "linear" ? "linearGradient" : "radialGradient"
+            );
+            gradient.setAttribute("id", gradientId);
+
+            if (gradientType === "linear") {
+              const rad = (angle % 360) * (Math.PI / 180);
+              const x1 = (Math.cos(rad) + 1) / 2;
+              const y1 = (Math.sin(rad) + 1) / 2;
+              const x2 = 1 - x1;
+              const y2 = 1 - y1;
+
+              gradient.setAttribute("x1", x1.toString());
+              gradient.setAttribute("y1", y1.toString());
+              gradient.setAttribute("x2", x2.toString());
+              gradient.setAttribute("y2", y2.toString());
+            } else {
+              gradient.setAttribute("cx", "50%");
+              gradient.setAttribute("cy", "50%");
+              gradient.setAttribute("r", "50%");
+            }
+
+            gradientStops.forEach((stop) => {
+              const stopEl = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "stop"
+              );
+              stopEl.setAttribute("offset", stop.offset);
+              stopEl.setAttribute("stop-color", stop.color);
+              gradient.appendChild(stopEl);
+            });
+
+            defs.appendChild(gradient);
+            svg.prepend(defs);
+          }
+        }
+
+        svg.querySelectorAll("[stroke]").forEach((el) => {
+          let strokeVal = "#515158";
+          if (isActive) {
+            if (typeof stroke === "string") strokeVal = stroke;
+            else if ((stroke as any).gradient) strokeVal = `url(#${gradientId})`;
+          }
+          el.setAttribute("stroke", strokeVal);
+        });
+
+        svg.querySelectorAll("[fill]").forEach((el) => {
+          let fillVal = "#515158";
+          if (isActive) {
+            if (typeof fill === "string") fillVal = fill;
+            else if ((fill as any).gradient) fillVal = `url(#${gradientId})`;
+          }
+          el.setAttribute("fill", fillVal);
+        });
+      }}
+      className={className}
+      style={style}
+      {...props}
+    />
+  );
+};
+

package/component-templates/components/grid-layout.tsx

@@ -0,0 +1,69 @@
+"use client";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { twMerge } from 'tailwind-merge';
+
+interface GridLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns?: number;
+  gap?: number;
+  responsive?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  breakpoints?: {
+    minWidth: number;
+    columns: number;
+  }[];
+  mode?: "window" | "container";
+}
+
+export const GridLayout: React.FC<GridLayoutProps> = ({
+  columns = 3,
+  gap = 4,
+  responsive = true,
+  breakpoints,
+  className,
+  children,
+  mode = "window",
+  ...props
+}) => {
+  const [currentColumns, setCurrentColumns] = useState(columns);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateColumns = () => {
+      if (responsive && breakpoints) {
+        const width =
+          mode === "container" && contentRef.current
+            ? contentRef.current.offsetWidth
+            : window.innerWidth;
+
+        const sorted = [...breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+        const match = sorted.find((bp) => width >= bp.minWidth);
+        setCurrentColumns(match ? match.columns : columns);
+      }
+    };
+
+    updateColumns(); // initial
+    window.addEventListener("resize", updateColumns);
+    return () => window.removeEventListener("resize", updateColumns);
+  }, [responsive, breakpoints, columns, mode]);
+
+  return (
+    <div
+      ref={contentRef}
+      style={{
+        gridTemplateColumns: `repeat(${currentColumns}, minmax(0, 1fr))`,
+        display: "grid",
+        gap: `${gap}px`,
+      }}
+      className={twMerge(`w-full`, className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/component-templates/components/hydrate-guard.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, {
+  FC,
+  ReactNode,
+  useEffect,
+  useState,
+} from 'react';
+
+export type HydrationGuardProps = {
+  children: ReactNode;
+}
+
+/**
+ * HydrationGuard is a component that prevents its children from being
+ * rendered on the server, while still allowing them to be rendered on
+ * the client. This is useful for components that need to use browser
+ * APIs that are not available on the server, such as the `window`
+ * object or Web APIs that require user interaction.
+ *
+ * The component works by using the `useState` hook to keep track of
+ * whether the component has been mounted or not. On the server, the
+ * component is not mounted, so the `mounted` state is `false`, and
+ * the component does not render its children. On the client, the
+ * component is mounted, so the `mounted` state is `true`, and the
+ * component renders its children.
+ * @param {ReactNode} children - The children to render only on the client.
+ * @returns {ReactElement} The rendered children, or null if on the server.
+ */
+export const HydrationGuard:FC<HydrationGuardProps> = ({ children }) =>  {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return <>{children}</>;
+}

package/component-templates/components/image.tsx

@@ -0,0 +1,92 @@
+"use client";
+import React, { useState } from 'react';
+
+export interface ImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+  text?: string;
+  alt?: string;
+  className?: string;
+  imageClass?: string; 
+  fallbackSrc?: string;
+  fit?: "w" | "h" | "both";
+  style?: React.CSSProperties;
+  containerStyle?: React.CSSProperties;
+  id?: string;
+  onClick?: (event: React.MouseEvent<HTMLImageElement>) => void;
+  resourceLoadPriority?: "auto" | "high" | "low";
+  loadmode?: "lazy" | "eager";
+  sendAccessUrlToImageServer?:
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "strict-origin";
+//   crossOrigin?: "anonymous" | "use-credentials";
+  fetchPriority?: "auto" | "high" | "low";
+}
+
+export const Image: React.FC<ImageProps> = ({
+  src,
+  text,
+  alt = "image",
+  className = "",
+  imageClass = "", 
+  fallbackSrc = "https://picsum.photos/200/300/?blur=8",
+  // fallbackSrc = "https://images.pexels.com/photos/349758/hummingbird-bird-birds-349758.jpeg",
+  fit = "both",
+  style = {},
+  containerStyle = {},
+  resourceLoadPriority = "auto",
+  loadmode = "lazy",
+  sendAccessUrlToImageServer = "no-referrer",
+//   crossOrigin = "anonymous",
+  id,
+  onClick,
+  ...props
+}) => {
+  const [imgSrc, setImgSrc] = useState(src);
+  const [loading, setLoading] = useState(true);
+  // console.log("Image component rendered with src:", imgSrc);
+
+  return (
+    <div
+      style={containerStyle}
+      className={`relative overflow-hidden ${className}`}
+      onClick={onClick}
+      {...props}
+    >
+      {loading && (
+        <div className="absolute inset-0 bg-gray-200 animate-pulse" />
+      )}
+      <img
+        id={id}
+        style={style}
+        src={imgSrc}
+        // crossOrigin={crossOrigin}
+        loading={loadmode}
+        referrerPolicy={sendAccessUrlToImageServer}
+        fetchPriority={resourceLoadPriority}
+        alt={alt}
+        className={`${
+          fit === "w"
+            ? "w-full h-auto"
+            : fit === "h"
+            ? "h-full w-auto"
+            : "w-full h-full"
+        } object-cover transition-all duration-500 ${
+          loading ? "opacity-0" : "opacity-100"
+        } ${imageClass}`}
+        onLoad={() => setLoading(false)}
+        onError={(e) => {
+          // console.error("Error loading image:", e);
+          if (text) {
+            setImgSrc(text);
+            setLoading(false);
+            return;
+          }
+          setImgSrc(fallbackSrc);
+          setLoading(false);
+        }}
+      />
+    </div>
+  );
+};

package/component-templates/components/loader-slash-gradient.tsx

@@ -0,0 +1,85 @@
+import React, {
+  HTMLAttributes,
+  JSX,
+  ReactNode,
+} from 'react';
+
+import { cn } from '../lib/utils';
+
+export type LoadSlashBarProps = {
+  slashSize?: {
+    x: number;
+    y: number;
+  };
+  slashColors?: {
+    primary: string;
+    secondary: string;
+  };
+  rotate?: number;
+  className?: string;
+  containerClass?: string;
+  progressClass?: string;
+  elementClass?: string;
+  value?: number;
+  children?: ReactNode;
+  slashWidth?: number;
+} & HTMLAttributes<HTMLDivElement>;
+/**
+ * LoadSlashBar component renders a progress bar with a slash effect.
+ * It accepts various props to customize the appearance and behavior of the bar.
+ * @param {LoadSlashBarProps} props - Properties for customizing the LoadSlashBar component.
+ * @returns {JSX.Element} Rendered LoadSlashBar component.
+ */
+export const LoaderSlashGradient: React.FC<LoadSlashBarProps> = ({
+  slashColors = {primary: "#ffffff", secondary: "transparent"},
+  slashSize = {x: 20, y: 10},
+  className,
+  containerClass = "bg-black",
+  progressClass,
+  elementClass,
+  value = 0,
+  rotate = 45,
+  slashWidth = 100,
+  children,
+  ...props
+}):JSX.Element => {
+  return (
+    <div
+      {...props}
+      className={cn("w-full h-2 relative rounded-full", containerClass)}
+    >
+      <div
+        style={{
+          width: `${value}%`,
+        }}
+        className={cn(
+          "absolute z-[1] top-0 left-0 w-1/2 rounded-full h-full",
+          progressClass
+        )}
+      ></div>
+      <div
+        style={{
+          width: `${value}%`,
+        }}
+        className={cn(
+          "absolute z-[3] top-0 left-0 w-1/2 flex items-center justify-end bg-transparent rounded-full h-full",
+          elementClass
+        )}
+      >
+        {children}
+      </div>
+      <div
+        style={{
+          width: `${slashWidth}%`,
+          backgroundSize: `${slashSize?.x}px ${slashSize?.y}px`,
+          backgroundImage: `linear-gradient(${rotate}deg, ${slashColors?.primary} 35%, ${slashColors?.secondary} 10%, ${slashColors?.secondary} 75%, ${slashColors?.primary} 75%, ${slashColors?.primary})`,
+        }}
+        className={cn(
+          "absolute z-[2] top-0 left-0 h-full",
+          !slashWidth && "w-full",
+          className
+        )}
+      ></div>
+    </div>
+  );
+};