@alkimi.org/ui-kit 0.1.8 → 0.1.10

package/dist/index.js

@@ -32,12 +32,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
-  Card: () => Card,
-  CardContent: () => CardContent,
-  CardDescription: () => CardDescription,
-  CardFooter: () => CardFooter,
-  CardHeader: () => CardHeader,
-  CardTitle: () => CardTitle,
+  GlitchLink: () => GlitchLink_default,
+  PixelLoad: () => PixelLoad,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  TextDecoder: () => TextDecoder_default,
   buttonVariants: () => buttonVariants,
   cn: () => cn
 });
@@ -58,22 +59,22 @@ function cn(...inputs) {
 // src/components/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[3.75rem] text-[0.875rem] font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        secondary: "bg-secondary/80 text-secondary-foreground hover:bg-secondary",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10"
+        default: "h-9 px-4 py-2",
+        sm: "h-8 text-[0.75rem] px-3 py-2",
+        lg: "h-10 px-8 py-2",
+        icon: "h-9 w-9"
       }
     },
     defaultVariants: {
@@ -83,85 +84,499 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
   }
 );
 var Button = React.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    icon,
+    ...props
+  }, ref) => {
     const Comp = asChild ? import_react_slot.Slot : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       Comp,
       {
         className: cn(buttonVariants({ variant, size, className })),
         ref,
-        ...props
+        disabled: loading || props.disabled,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mr-2 h-4 w-4 animate-spin rounded-full border-[1.33px] border-primary-foreground border-t-transparent" }),
+          !loading && icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2", children: icon }),
+          props.children
+        ]
       }
     );
   }
 );
 Button.displayName = "Button";
 
-// src/components/card.tsx
+// src/components/tabs.tsx
 var React2 = __toESM(require("react"));
+var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "div",
+var Tabs = TabsPrimitive.Root;
+var TabsList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  TabsPrimitive.List,
   {
     ref,
     className: cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "inline-flex items-center justify-center rounded-[3.75rem] bg-muted p-1 text-muted-foreground",
       className
     ),
     ...props
   }
 ));
-Card.displayName = "Card";
-var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "div",
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  TabsPrimitive.Trigger,
   {
     ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-[3.75rem] px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    ),
     ...props
   }
 ));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "h3",
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  TabsPrimitive.Content,
   {
     ref,
     className: cn(
-      "text-2xl font-semibold leading-none tracking-tight",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     ),
     ...props
   }
 ));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "p",
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/components/TextDecoder.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SYMBOLS = ["\\", "-", "?", "/", "#", "!", "_", "+", "<", ">"];
+var MAX_ITERATIONS = 3;
+var SPEED = 400;
+var scrambleText = (input, symbols) => {
+  if (!input) return "";
+  return input.split(" ").map((word) => {
+    if (!word) return "";
+    const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];
+    return randomSymbol.repeat(word.length);
+  }).join(" ");
+};
+var extractText = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
   }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
+  if (Array.isArray(node)) {
+    return node.map(extractText).join("");
   }
-));
-CardFooter.displayName = "CardFooter";
+  if (import_react.default.isValidElement(node)) {
+    const props = node.props;
+    let result = "";
+    if (typeof props.text === "string") {
+      result += props.text;
+    }
+    if (typeof props.label === "string") {
+      result += props.label;
+    }
+    if (typeof props.title === "string") {
+      result += props.title;
+    }
+    if (props.children) {
+      result += extractText(props.children);
+    }
+    return result;
+  }
+  return "";
+};
+var scrambleReactNode = (node, scrambledText, textStartIndex) => {
+  if (typeof node === "string" || typeof node === "number") {
+    const text = String(node);
+    let scrambled = "";
+    for (let i = 0; i < text.length; i++) {
+      if (textStartIndex.current < scrambledText.length) {
+        scrambled += scrambledText[textStartIndex.current];
+        textStartIndex.current++;
+      } else {
+        scrambled += text[i];
+      }
+    }
+    return scrambled;
+  }
+  if (Array.isArray(node)) {
+    return node.map((child, index) => {
+      const scrambledChild = scrambleReactNode(
+        child,
+        scrambledText,
+        textStartIndex
+      );
+      if (import_react.default.isValidElement(scrambledChild)) {
+        const originalKey = import_react.default.isValidElement(child) ? child.key : null;
+        if (scrambledChild.key == null && originalKey == null) {
+          return import_react.default.cloneElement(scrambledChild, { key: `decoded-${index}` });
+        }
+        if (scrambledChild.key == null && originalKey != null) {
+          return import_react.default.cloneElement(scrambledChild, { key: originalKey });
+        }
+      }
+      return scrambledChild;
+    });
+  }
+  if (import_react.default.isValidElement(node)) {
+    const props = node.props;
+    const newProps = { ...props };
+    if (typeof props.text === "string") {
+      const text = props.text;
+      let scrambled = "";
+      for (let i = 0; i < text.length; i++) {
+        if (textStartIndex.current < scrambledText.length) {
+          scrambled += scrambledText[textStartIndex.current];
+          textStartIndex.current++;
+        } else {
+          scrambled += text[i];
+        }
+      }
+      newProps.text = scrambled;
+    }
+    if (typeof props.label === "string") {
+      const label = props.label;
+      let scrambled = "";
+      for (let i = 0; i < label.length; i++) {
+        if (textStartIndex.current < scrambledText.length) {
+          scrambled += scrambledText[textStartIndex.current];
+          textStartIndex.current++;
+        } else {
+          scrambled += label[i];
+        }
+      }
+      newProps.label = scrambled;
+    }
+    if (typeof props.title === "string") {
+      const title = props.title;
+      let scrambled = "";
+      for (let i = 0; i < title.length; i++) {
+        if (textStartIndex.current < scrambledText.length) {
+          scrambled += scrambledText[textStartIndex.current];
+          textStartIndex.current++;
+        } else {
+          scrambled += title[i];
+        }
+      }
+      newProps.title = scrambled;
+    }
+    if (props.children) {
+      newProps.children = scrambleReactNode(
+        props.children,
+        scrambledText,
+        textStartIndex
+      );
+    }
+    return import_react.default.cloneElement(node, newProps);
+  }
+  return node;
+};
+var TextDecoder = ({
+  children,
+  className,
+  delay = 0,
+  symbols = SYMBOLS,
+  maxIterations = MAX_ITERATIONS,
+  speed = SPEED
+}) => {
+  const [displayContent, setDisplayContent] = (0, import_react.useState)(null);
+  const [hasAnimated, setHasAnimated] = (0, import_react.useState)(false);
+  const elementRef = (0, import_react.useRef)(null);
+  const fullText = (0, import_react.useMemo)(() => extractText(children), [children]);
+  const initialScrambled = (0, import_react.useMemo)(
+    () => scrambleText(fullText, symbols),
+    [fullText, symbols]
+  );
+  (0, import_react.useEffect)(() => {
+    if (!hasAnimated && fullText) {
+      const textStartIndex = { current: 0 };
+      const scrambledContent = scrambleReactNode(
+        children,
+        initialScrambled,
+        textStartIndex
+      );
+      setDisplayContent(scrambledContent);
+    }
+  }, [children, initialScrambled, hasAnimated, fullText]);
+  (0, import_react.useEffect)(() => {
+    if (!fullText) {
+      setDisplayContent(null);
+      return;
+    }
+    if (hasAnimated) {
+      setDisplayContent(children);
+      return;
+    }
+    const element = elementRef.current;
+    if (!element) return;
+    let iteration = 0;
+    let intervalId = null;
+    let delayTimeoutId = null;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry.isIntersecting && !hasAnimated) {
+          delayTimeoutId = setTimeout(() => {
+            const textStartIndex = { current: 0 };
+            const scrambledContent = scrambleReactNode(
+              children,
+              initialScrambled,
+              textStartIndex
+            );
+            setDisplayContent(scrambledContent);
+            intervalId = setInterval(() => {
+              iteration++;
+              if (iteration >= maxIterations) {
+                setDisplayContent(children);
+                setHasAnimated(true);
+                if (intervalId) clearInterval(intervalId);
+              } else {
+                const newScrambled = scrambleText(fullText, symbols);
+                const textStartIndex2 = { current: 0 };
+                const scrambledContent2 = scrambleReactNode(
+                  children,
+                  newScrambled,
+                  textStartIndex2
+                );
+                setDisplayContent(scrambledContent2);
+              }
+            }, speed);
+          }, delay);
+          observer.disconnect();
+        }
+      },
+      {
+        threshold: 0.1
+        // Trigger when 10% of the element is visible
+      }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      if (intervalId) clearInterval(intervalId);
+      if (delayTimeoutId) clearTimeout(delayTimeoutId);
+    };
+  }, [
+    children,
+    fullText,
+    initialScrambled,
+    hasAnimated,
+    delay,
+    symbols,
+    maxIterations,
+    speed
+  ]);
+  const ariaLabel = (0, import_react.useMemo)(() => extractText(children), [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "span",
+    {
+      ref: elementRef,
+      "aria-label": ariaLabel,
+      className,
+      children: displayContent
+    }
+  );
+};
+var TextDecoder_default = TextDecoder;
+
+// src/components/GlitchLink.tsx
+var import_link = __toESM(require("next/link"));
+var import_react2 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DEFAULT_SYMBOLS = ["/", "#", "*"];
+var GlitchLink = ({
+  href,
+  children,
+  symbols = DEFAULT_SYMBOLS,
+  className = "underline",
+  ...props
+}) => {
+  const [isHovering, setIsHovering] = (0, import_react2.useState)(false);
+  const text = typeof children === "string" ? children : "";
+  const getRandomGlitch = () => {
+    if (!isHovering || !text) return children;
+    return text.split(" ").map((word) => {
+      const randomLetterIndex = Math.floor(Math.random() * word.length);
+      return word.replace(
+        word[randomLetterIndex],
+        symbols[Math.floor(Math.random() * symbols.length)]
+      );
+    }).join(" ");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_link.default,
+    {
+      href,
+      className,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseLeave: () => setIsHovering(false),
+      ...props,
+      children: text ? isHovering ? getRandomGlitch() : children : children
+    }
+  );
+};
+var GlitchLink_default = GlitchLink;
+
+// src/components/PixelLoad.tsx
+var import_image = __toESM(require("next/image"));
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function isStaticImageData(src) {
+  return typeof src === "object" && "src" in src;
+}
+function getImageSrc(src) {
+  return isStaticImageData(src) ? src.src : src;
+}
+function PixelLoad({
+  src,
+  alt,
+  duration = 600,
+  steps = 15,
+  className,
+  onAnimationComplete,
+  priority,
+  quality,
+  placeholder = "empty",
+  blurDataURL,
+  objectFit = "cover"
+}) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const canvasRef = (0, import_react3.useRef)(null);
+  const [status, setStatus] = (0, import_react3.useState)("loading");
+  const [dimensions, setDimensions] = (0, import_react3.useState)(null);
+  const imageSrc = getImageSrc(src);
+  const drawPixelated = (0, import_react3.useCallback)(
+    (ctx, img, pixelSize, w, h) => {
+      ctx.imageSmoothingEnabled = false;
+      const sw = Math.max(1, Math.floor(w / pixelSize));
+      const sh = Math.max(1, Math.floor(h / pixelSize));
+      ctx.clearRect(0, 0, w, h);
+      ctx.drawImage(img, 0, 0, sw, sh);
+      ctx.drawImage(canvasRef.current, 0, 0, sw, sh, 0, 0, w, h);
+    },
+    []
+  );
+  const runAnimation = (0, import_react3.useCallback)(
+    (ctx, img, w, h) => {
+      const minPixelSize = Math.max(w, h) / 4;
+      const intervalMs = duration / steps;
+      let currentStep = 0;
+      setStatus("animating");
+      const animate = () => {
+        const progress = currentStep / steps;
+        const pixelSize = Math.max(1, Math.floor(minPixelSize * (1 - progress)));
+        drawPixelated(ctx, img, pixelSize, w, h);
+        currentStep++;
+        if (currentStep <= steps) {
+          window.setTimeout(animate, intervalMs);
+        } else {
+          setStatus("complete");
+          onAnimationComplete?.();
+        }
+      };
+      animate();
+    },
+    [duration, steps, drawPixelated, onAnimationComplete]
+  );
+  (0, import_react3.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const updateDimensions = () => {
+      const { width, height } = container.getBoundingClientRect();
+      setDimensions({ width: Math.floor(width), height: Math.floor(height) });
+    };
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(container);
+    updateDimensions();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!dimensions) return;
+    if (dimensions.width <= 0 || dimensions.height <= 0) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = dimensions.width;
+    canvas.height = dimensions.height;
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      const minPixelSize = Math.max(dimensions.width, dimensions.height) / 4;
+      drawPixelated(ctx, img, minPixelSize, dimensions.width, dimensions.height);
+      runAnimation(ctx, img, dimensions.width, dimensions.height);
+    };
+    img.onerror = () => {
+      console.error("PixelLoad: Failed to load image");
+    };
+    img.src = imageSrc;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [imageSrc, dimensions, runAnimation, drawPixelated]);
+  const isComplete = status === "complete";
+  const isAnimating = status === "animating" || status === "loading";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative w-full h-full ${className || ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute top-0 left-0 w-full h-full",
+            style: {
+              objectFit,
+              opacity: isComplete ? 0 : 1,
+              zIndex: isAnimating ? 2 : 1
+            },
+            "aria-hidden": isComplete
+          }
+        ),
+        isComplete && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_image.default,
+          {
+            src,
+            alt,
+            fill: true,
+            priority,
+            quality,
+            placeholder,
+            blurDataURL,
+            className: "opacity-100 transition-opacity duration-150 ease-out z-[1]",
+            style: {
+              objectFit
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
+  GlitchLink,
+  PixelLoad,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  TextDecoder,
   buttonVariants,
   cn
 });