@alkimi.org/ui-kit 0.1.12 → 0.1.13

package/README.github.md

@@ -32,6 +32,21 @@ module.exports = {
     "./node_modules/@alkimi.org/ui-kit/dist/**/*.{js,mjs}",
   ],
   theme: {
+    fontSize: {
+      xs: ["0.75rem", "1rem"],
+      sm: ["12px", "1.25rem"],
+      base: ["14px", "1.5rem"],
+      lg: ["1.125rem", "1.75rem"],
+      xl: ["1.25rem", "1.75rem"],
+      "2xl": ["1.5rem", "2rem"],
+      "3xl": ["1.875rem", "2.25rem"],
+      "4xl": ["2.25rem", "2.5rem"],
+      "5xl": ["3rem", "1"],
+      "6xl": ["3.75rem", "1"],
+      "7xl": ["4.5rem", "1"],
+      "8xl": ["6rem", "1"],
+      "9xl": ["8rem", "1"],
+    },
     extend: {
       colors: {
         border: "hsl(var(--border))",
@@ -69,9 +84,13 @@ module.exports = {
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        DEFAULT: "var(--radius)",
+        lg: "calc(var(--radius) + 2px)",
+        md: "var(--radius)",
+        sm: "calc(var(--radius) - 2px)",
+        xl: "calc(var(--radius) + 4px)",
+        "2xl": "calc(var(--radius) + 6px)",
+        "3xl": "3.75rem",
       },
     },
   },
@@ -92,48 +111,31 @@ Or if you prefer, add the CSS variables to your own CSS file:
 ```css
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
+    /* Dark Mode Theme (Default) */
+    --background: 240 10% 4%;
+    --foreground: 144 100% 97%;
+    --card: 0 0% 3.5%;
+    --card-foreground: 140 100% 97.1%;
+    --popover: 0 0% 3.5%;
+    --popover-foreground: 140 100% 97.1%;
+    --primary: 140 100% 97.1%;
+    --primary-foreground: 240 6% 10%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 140 100% 97.1%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 144 4.3% 54.9%;
+    --accent: 0 0% 15.3%;
+    --accent-foreground: 140 100% 97.1%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 140 100% 97.1%;
+    --border: 240 3.7% 27.6%;
+    --input: 240 3.7% 27.6%;
+    --ring: 140 100% 97.1%;
+    --radius: 0.625rem;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+  body {
+    font-size: 14px;
   }
 }
 ```
@@ -210,37 +212,6 @@ function App() {
 }
 ```
 
-### Card Component
-
-```tsx
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-} from "@alkimi.org/ui-kit/card"
-import { Button } from "@alkimi.org/ui-kit/button"
-
-function App() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Card Title</CardTitle>
-        <CardDescription>Card Description</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>Card Content</p>
-      </CardContent>
-      <CardFooter>
-        <Button>Action</Button>
-      </CardFooter>
-    </Card>
-  )
-}
-```
-
 ## Adding More Components
 
 To add more shadcn/ui components to this library:

package/README.md

@@ -32,6 +32,21 @@ module.exports = {
     "./node_modules/@alkimi.org/ui-kit/dist/**/*.{js,mjs}",
   ],
   theme: {
+    fontSize: {
+      xs: ['0.75rem', '1rem'],
+      sm: ['12px', '1.25rem'],
+      base: ['14px', '1.5rem'],
+      lg: ['1.125rem', '1.75rem'],
+      xl: ['1.25rem', '1.75rem'],
+      '2xl': ['1.5rem', '2rem'],
+      '3xl': ['1.875rem', '2.25rem'],
+      '4xl': ['2.25rem', '2.5rem'],
+      '5xl': ['3rem', '1'],
+      '6xl': ['3.75rem', '1'],
+      '7xl': ['4.5rem', '1'],
+      '8xl': ['6rem', '1'],
+      '9xl': ['8rem', '1'],
+    },
     extend: {
       colors: {
         border: "hsl(var(--border))",
@@ -69,9 +84,13 @@ module.exports = {
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        DEFAULT: "var(--radius)",
+        lg: "calc(var(--radius) + 2px)",
+        md: "var(--radius)",
+        sm: "calc(var(--radius) - 2px)",
+        xl: "calc(var(--radius) + 4px)",
+        "2xl": "calc(var(--radius) + 6px)",
+        "3xl": "3.75rem",
       },
     },
   },
@@ -92,48 +111,31 @@ Or if you prefer, add the CSS variables to your own CSS file:
 ```css
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
+    /* Dark Mode Theme (Default) */
+    --background: 240 10% 4%;
+    --foreground: 144 100% 97%;
+    --card: 0 0% 3.5%;
+    --card-foreground: 140 100% 97.1%;
+    --popover: 0 0% 3.5%;
+    --popover-foreground: 140 100% 97.1%;
+    --primary: 140 100% 97.1%;
+    --primary-foreground: 240 6% 10%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 140 100% 97.1%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 144 4.3% 54.9%;
+    --accent: 0 0% 15.3%;
+    --accent-foreground: 140 100% 97.1%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 140 100% 97.1%;
+    --border: 240 3.7% 27.6%;
+    --input: 240 3.7% 27.6%;
+    --ring: 140 100% 97.1%;
+    --radius: 0.625rem;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+  body {
+    font-size: 14px;
   }
 }
 ```

package/README.npm.md

@@ -32,6 +32,21 @@ module.exports = {
     "./node_modules/@alkimi.org/ui-kit/dist/**/*.{js,mjs}",
   ],
   theme: {
+    fontSize: {
+      xs: ['0.75rem', '1rem'],
+      sm: ['12px', '1.25rem'],
+      base: ['14px', '1.5rem'],
+      lg: ['1.125rem', '1.75rem'],
+      xl: ['1.25rem', '1.75rem'],
+      '2xl': ['1.5rem', '2rem'],
+      '3xl': ['1.875rem', '2.25rem'],
+      '4xl': ['2.25rem', '2.5rem'],
+      '5xl': ['3rem', '1'],
+      '6xl': ['3.75rem', '1'],
+      '7xl': ['4.5rem', '1'],
+      '8xl': ['6rem', '1'],
+      '9xl': ['8rem', '1'],
+    },
     extend: {
       colors: {
         border: "hsl(var(--border))",
@@ -69,9 +84,13 @@ module.exports = {
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        DEFAULT: "var(--radius)",
+        lg: "calc(var(--radius) + 2px)",
+        md: "var(--radius)",
+        sm: "calc(var(--radius) - 2px)",
+        xl: "calc(var(--radius) + 4px)",
+        "2xl": "calc(var(--radius) + 6px)",
+        "3xl": "3.75rem",
       },
     },
   },
@@ -92,48 +111,31 @@ Or if you prefer, add the CSS variables to your own CSS file:
 ```css
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
+    /* Dark Mode Theme (Default) */
+    --background: 240 10% 4%;
+    --foreground: 144 100% 97%;
+    --card: 0 0% 3.5%;
+    --card-foreground: 140 100% 97.1%;
+    --popover: 0 0% 3.5%;
+    --popover-foreground: 140 100% 97.1%;
+    --primary: 140 100% 97.1%;
+    --primary-foreground: 240 6% 10%;
+    --secondary: 240 4% 16%;
+    --secondary-foreground: 140 100% 97.1%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 144 4.3% 54.9%;
+    --accent: 0 0% 15.3%;
+    --accent-foreground: 140 100% 97.1%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 140 100% 97.1%;
+    --border: 240 3.7% 27.6%;
+    --input: 240 3.7% 27.6%;
+    --ring: 140 100% 97.1%;
+    --radius: 0.625rem;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+  body {
+    font-size: 14px;
   }
 }
 ```

package/dist/components/GlitchLink.d.mts

@@ -1,12 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { RefAttributes, ReactNode } from 'react';
 
+declare const DEFAULT_SYMBOLS: string[];
 type GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {
-    href: string;
+    href?: string;
     children: ReactNode;
     symbols?: string[];
     className?: string;
+    asChild?: boolean;
 };
-declare const GlitchLink: ({ href, children, symbols, className, ...props }: GlitchLinkProps) => react_jsx_runtime.JSX.Element;
+declare const GlitchLink: ({ href, children, symbols, className, asChild, ...props }: GlitchLinkProps) => react_jsx_runtime.JSX.Element;
 
-export { GlitchLink as default };
+export { DEFAULT_SYMBOLS, GlitchLink as default };

package/dist/components/GlitchLink.d.ts

@@ -1,12 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { RefAttributes, ReactNode } from 'react';
 
+declare const DEFAULT_SYMBOLS: string[];
 type GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {
-    href: string;
+    href?: string;
     children: ReactNode;
     symbols?: string[];
     className?: string;
+    asChild?: boolean;
 };
-declare const GlitchLink: ({ href, children, symbols, className, ...props }: GlitchLinkProps) => react_jsx_runtime.JSX.Element;
+declare const GlitchLink: ({ href, children, symbols, className, asChild, ...props }: GlitchLinkProps) => react_jsx_runtime.JSX.Element;
 
-export { GlitchLink as default };
+export { DEFAULT_SYMBOLS, GlitchLink as default };

package/dist/components/GlitchLink.js

@@ -32,24 +32,34 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/GlitchLink.tsx
 var GlitchLink_exports = {};
 __export(GlitchLink_exports, {
+  DEFAULT_SYMBOLS: () => DEFAULT_SYMBOLS,
   default: () => GlitchLink_default
 });
 module.exports = __toCommonJS(GlitchLink_exports);
 var import_link = __toESM(require("next/link"));
 var import_react = require("react");
+var import_react_slot = require("@radix-ui/react-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_SYMBOLS = ["/", "#", "*"];
 var GlitchLink = ({
   href,
   children,
   symbols = DEFAULT_SYMBOLS,
-  className = "underline",
+  className,
+  asChild = false,
   ...props
 }) => {
   const [isHovering, setIsHovering] = (0, import_react.useState)(false);
-  const text = typeof children === "string" ? children : "";
+  const getTextContent = (node) => {
+    if (typeof node === "string") return node;
+    if ((0, import_react.isValidElement)(node) && node.props.children) {
+      return getTextContent(node.props.children);
+    }
+    return "";
+  };
+  const text = getTextContent(children);
   const getRandomGlitch = () => {
-    if (!isHovering || !text) return children;
+    if (!isHovering || !text) return text;
     return text.split(" ").map((word) => {
       const randomLetterIndex = Math.floor(Math.random() * word.length);
       return word.replace(
@@ -58,17 +68,22 @@ var GlitchLink = ({
       );
     }).join(" ");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_link.default,
-    {
-      href,
-      className,
-      onMouseEnter: () => setIsHovering(true),
-      onMouseLeave: () => setIsHovering(false),
-      ...props,
-      children: text ? isHovering ? getRandomGlitch() : children : children
-    }
-  );
+  const commonProps = {
+    className,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
+    ...props
+  };
+  if (asChild && (0, import_react.isValidElement)(children)) {
+    const content2 = text ? isHovering ? getRandomGlitch() : text : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, { ...commonProps, children: (0, import_react.cloneElement)(children, {}, content2) });
+  }
+  const content = text ? isHovering ? getRandomGlitch() : children : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: href || "#", ...commonProps, children: content });
 };
 var GlitchLink_default = GlitchLink;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_SYMBOLS
+});
 //# sourceMappingURL=GlitchLink.js.map

package/dist/components/GlitchLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/GlitchLink.tsx"],"sourcesContent":["\"use client\"\nimport Link from \"next/link\"\nimport { RefAttributes, useState, ReactNode } from \"react\"\n\ntype GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {\n  href: string\n  children: ReactNode\n  symbols?: string[]\n  className?: string\n}\n\nconst DEFAULT_SYMBOLS = [\"/\", \"#\", \"*\"]\n\nconst GlitchLink = ({\n  href,\n  children,\n  symbols = DEFAULT_SYMBOLS,\n  className = \"underline\",\n  ...props\n}: GlitchLinkProps) => {\n  const [isHovering, setIsHovering] = useState(false)\n\n  const text = typeof children === \"string\" ? children : \"\"\n\n  const getRandomGlitch = () => {\n    if (!isHovering || !text) return children\n    return text\n      .split(\" \")\n      .map((word: string) => {\n        // take one random letter from the word\n        const randomLetterIndex = Math.floor(Math.random() * word.length)\n\n        // replace the letter with a random symbol\n        return word.replace(\n          word[randomLetterIndex],\n          symbols[Math.floor(Math.random() * symbols.length)]\n        )\n      })\n      .join(\" \")\n  }\n\n  return (\n    <Link\n      href={href}\n      className={className}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      {...props}\n    >\n      {text ? (isHovering ? getRandomGlitch() : children) : children}\n    </Link>\n  )\n}\n\nexport default GlitchLink\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AACjB,mBAAmD;AAwC/C;AA/BJ,IAAM,kBAAkB,CAAC,KAAK,KAAK,GAAG;AAEtC,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAElD,QAAM,OAAO,OAAO,aAAa,WAAW,WAAW;AAEvD,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAiB;AAErB,YAAM,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM;AAGhE,aAAO,KAAK;AAAA,QACV,KAAK,iBAAiB;AAAA,QACtB,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,QAAQ,MAAM,CAAC;AAAA,MACpD;AAAA,IACF,CAAC,EACA,KAAK,GAAG;AAAA,EACb;AAEA,SACE;AAAA,IAAC,YAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc,MAAM,cAAc,IAAI;AAAA,MACtC,cAAc,MAAM,cAAc,KAAK;AAAA,MACtC,GAAG;AAAA,MAEH,iBAAQ,aAAa,gBAAgB,IAAI,WAAY;AAAA;AAAA,EACxD;AAEJ;AAEA,IAAO,qBAAQ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/GlitchLink.tsx"],"sourcesContent":["\"use client\"\nimport Link from \"next/link\"\nimport {\n  RefAttributes,\n  useState,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nexport const DEFAULT_SYMBOLS = [\"/\", \"#\", \"*\"]\n\ntype GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {\n  href?: string\n  children: ReactNode\n  symbols?: string[]\n  className?: string\n  asChild?: boolean\n}\n\nconst GlitchLink = ({\n  href,\n  children,\n  symbols = DEFAULT_SYMBOLS,\n  className,\n  asChild = false,\n  ...props\n}: GlitchLinkProps) => {\n  const [isHovering, setIsHovering] = useState(false)\n\n  // Extract text from children - either direct string or from child element\n  const getTextContent = (node: ReactNode): string => {\n    if (typeof node === \"string\") return node\n    if (isValidElement(node) && node.props.children) {\n      return getTextContent(node.props.children)\n    }\n    return \"\"\n  }\n\n  const text = getTextContent(children)\n\n  const getRandomGlitch = () => {\n    if (!isHovering || !text) return text\n    return text\n      .split(\" \")\n      .map((word: string) => {\n        // take one random letter from the word\n        const randomLetterIndex = Math.floor(Math.random() * word.length)\n\n        // replace the letter with a random symbol\n        return word.replace(\n          word[randomLetterIndex],\n          symbols[Math.floor(Math.random() * symbols.length)]\n        )\n      })\n      .join(\" \")\n  }\n\n  const commonProps = {\n    className,\n    onMouseEnter: () => setIsHovering(true),\n    onMouseLeave: () => setIsHovering(false),\n    ...props,\n  }\n\n  if (asChild && isValidElement(children)) {\n    const content = text ? (isHovering ? getRandomGlitch() : text) : children\n    return (\n      <Slot {...commonProps}>\n        {cloneElement(children as React.ReactElement, {}, content)}\n      </Slot>\n    )\n  }\n\n  const content = text ? (isHovering ? getRandomGlitch() : children) : children\n\n  return (\n    <Link href={href || \"#\"} {...commonProps}>\n      {content}\n    </Link>\n  )\n}\n\nexport default GlitchLink\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAiB;AACjB,mBAMO;AACP,wBAAqB;AA4Df;AA1DC,IAAM,kBAAkB,CAAC,KAAK,KAAK,GAAG;AAU7C,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAGlD,QAAM,iBAAiB,CAAC,SAA4B;AAClD,QAAI,OAAO,SAAS,SAAU,QAAO;AACrC,YAAI,6BAAe,IAAI,KAAK,KAAK,MAAM,UAAU;AAC/C,aAAO,eAAe,KAAK,MAAM,QAAQ;AAAA,IAC3C;AACA,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,eAAe,QAAQ;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAiB;AAErB,YAAM,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM;AAGhE,aAAO,KAAK;AAAA,QACV,KAAK,iBAAiB;AAAA,QACtB,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,QAAQ,MAAM,CAAC;AAAA,MACpD;AAAA,IACF,CAAC,EACA,KAAK,GAAG;AAAA,EACb;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,cAAc,MAAM,cAAc,IAAI;AAAA,IACtC,cAAc,MAAM,cAAc,KAAK;AAAA,IACvC,GAAG;AAAA,EACL;AAEA,MAAI,eAAW,6BAAe,QAAQ,GAAG;AACvC,UAAMA,WAAU,OAAQ,aAAa,gBAAgB,IAAI,OAAQ;AACjE,WACE,4CAAC,0BAAM,GAAG,aACP,yCAAa,UAAgC,CAAC,GAAGA,QAAO,GAC3D;AAAA,EAEJ;AAEA,QAAM,UAAU,OAAQ,aAAa,gBAAgB,IAAI,WAAY;AAErE,SACE,4CAAC,YAAAC,SAAA,EAAK,MAAM,QAAQ,KAAM,GAAG,aAC1B,mBACH;AAEJ;AAEA,IAAO,qBAAQ;","names":["content","Link"]}

package/dist/components/GlitchLink.mjs

@@ -3,20 +3,33 @@
 
 // src/components/GlitchLink.tsx
 import Link from "next/link";
-import { useState } from "react";
+import {
+  useState,
+  cloneElement,
+  isValidElement
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_SYMBOLS = ["/", "#", "*"];
 var GlitchLink = ({
   href,
   children,
   symbols = DEFAULT_SYMBOLS,
-  className = "underline",
+  className,
+  asChild = false,
   ...props
 }) => {
   const [isHovering, setIsHovering] = useState(false);
-  const text = typeof children === "string" ? children : "";
+  const getTextContent = (node) => {
+    if (typeof node === "string") return node;
+    if (isValidElement(node) && node.props.children) {
+      return getTextContent(node.props.children);
+    }
+    return "";
+  };
+  const text = getTextContent(children);
   const getRandomGlitch = () => {
-    if (!isHovering || !text) return children;
+    if (!isHovering || !text) return text;
     return text.split(" ").map((word) => {
       const randomLetterIndex = Math.floor(Math.random() * word.length);
       return word.replace(
@@ -25,20 +38,22 @@ var GlitchLink = ({
       );
     }).join(" ");
   };
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      href,
-      className,
-      onMouseEnter: () => setIsHovering(true),
-      onMouseLeave: () => setIsHovering(false),
-      ...props,
-      children: text ? isHovering ? getRandomGlitch() : children : children
-    }
-  );
+  const commonProps = {
+    className,
+    onMouseEnter: () => setIsHovering(true),
+    onMouseLeave: () => setIsHovering(false),
+    ...props
+  };
+  if (asChild && isValidElement(children)) {
+    const content2 = text ? isHovering ? getRandomGlitch() : text : children;
+    return /* @__PURE__ */ jsx(Slot, { ...commonProps, children: cloneElement(children, {}, content2) });
+  }
+  const content = text ? isHovering ? getRandomGlitch() : children : children;
+  return /* @__PURE__ */ jsx(Link, { href: href || "#", ...commonProps, children: content });
 };
 var GlitchLink_default = GlitchLink;
 export {
+  DEFAULT_SYMBOLS,
   GlitchLink_default as default
 };
 //# sourceMappingURL=GlitchLink.mjs.map

package/dist/components/GlitchLink.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/GlitchLink.tsx"],"sourcesContent":["\"use client\"\nimport Link from \"next/link\"\nimport { RefAttributes, useState, ReactNode } from \"react\"\n\ntype GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {\n  href: string\n  children: ReactNode\n  symbols?: string[]\n  className?: string\n}\n\nconst DEFAULT_SYMBOLS = [\"/\", \"#\", \"*\"]\n\nconst GlitchLink = ({\n  href,\n  children,\n  symbols = DEFAULT_SYMBOLS,\n  className = \"underline\",\n  ...props\n}: GlitchLinkProps) => {\n  const [isHovering, setIsHovering] = useState(false)\n\n  const text = typeof children === \"string\" ? children : \"\"\n\n  const getRandomGlitch = () => {\n    if (!isHovering || !text) return children\n    return text\n      .split(\" \")\n      .map((word: string) => {\n        // take one random letter from the word\n        const randomLetterIndex = Math.floor(Math.random() * word.length)\n\n        // replace the letter with a random symbol\n        return word.replace(\n          word[randomLetterIndex],\n          symbols[Math.floor(Math.random() * symbols.length)]\n        )\n      })\n      .join(\" \")\n  }\n\n  return (\n    <Link\n      href={href}\n      className={className}\n      onMouseEnter={() => setIsHovering(true)}\n      onMouseLeave={() => setIsHovering(false)}\n      {...props}\n    >\n      {text ? (isHovering ? getRandomGlitch() : children) : children}\n    </Link>\n  )\n}\n\nexport default GlitchLink\n"],"mappings":";;;;AACA,OAAO,UAAU;AACjB,SAAwB,gBAA2B;AAwC/C;AA/BJ,IAAM,kBAAkB,CAAC,KAAK,KAAK,GAAG;AAEtC,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAG;AACL,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,QAAM,OAAO,OAAO,aAAa,WAAW,WAAW;AAEvD,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAiB;AAErB,YAAM,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM;AAGhE,aAAO,KAAK;AAAA,QACV,KAAK,iBAAiB;AAAA,QACtB,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,QAAQ,MAAM,CAAC;AAAA,MACpD;AAAA,IACF,CAAC,EACA,KAAK,GAAG;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc,MAAM,cAAc,IAAI;AAAA,MACtC,cAAc,MAAM,cAAc,KAAK;AAAA,MACtC,GAAG;AAAA,MAEH,iBAAQ,aAAa,gBAAgB,IAAI,WAAY;AAAA;AAAA,EACxD;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../src/components/GlitchLink.tsx"],"sourcesContent":["\"use client\"\nimport Link from \"next/link\"\nimport {\n  RefAttributes,\n  useState,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nexport const DEFAULT_SYMBOLS = [\"/\", \"#\", \"*\"]\n\ntype GlitchLinkProps = RefAttributes<HTMLAnchorElement> & {\n  href?: string\n  children: ReactNode\n  symbols?: string[]\n  className?: string\n  asChild?: boolean\n}\n\nconst GlitchLink = ({\n  href,\n  children,\n  symbols = DEFAULT_SYMBOLS,\n  className,\n  asChild = false,\n  ...props\n}: GlitchLinkProps) => {\n  const [isHovering, setIsHovering] = useState(false)\n\n  // Extract text from children - either direct string or from child element\n  const getTextContent = (node: ReactNode): string => {\n    if (typeof node === \"string\") return node\n    if (isValidElement(node) && node.props.children) {\n      return getTextContent(node.props.children)\n    }\n    return \"\"\n  }\n\n  const text = getTextContent(children)\n\n  const getRandomGlitch = () => {\n    if (!isHovering || !text) return text\n    return text\n      .split(\" \")\n      .map((word: string) => {\n        // take one random letter from the word\n        const randomLetterIndex = Math.floor(Math.random() * word.length)\n\n        // replace the letter with a random symbol\n        return word.replace(\n          word[randomLetterIndex],\n          symbols[Math.floor(Math.random() * symbols.length)]\n        )\n      })\n      .join(\" \")\n  }\n\n  const commonProps = {\n    className,\n    onMouseEnter: () => setIsHovering(true),\n    onMouseLeave: () => setIsHovering(false),\n    ...props,\n  }\n\n  if (asChild && isValidElement(children)) {\n    const content = text ? (isHovering ? getRandomGlitch() : text) : children\n    return (\n      <Slot {...commonProps}>\n        {cloneElement(children as React.ReactElement, {}, content)}\n      </Slot>\n    )\n  }\n\n  const content = text ? (isHovering ? getRandomGlitch() : children) : children\n\n  return (\n    <Link href={href || \"#\"} {...commonProps}>\n      {content}\n    </Link>\n  )\n}\n\nexport default GlitchLink\n"],"mappings":";;;;AACA,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AA4Df;AA1DC,IAAM,kBAAkB,CAAC,KAAK,KAAK,GAAG;AAU7C,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAGlD,QAAM,iBAAiB,CAAC,SAA4B;AAClD,QAAI,OAAO,SAAS,SAAU,QAAO;AACrC,QAAI,eAAe,IAAI,KAAK,KAAK,MAAM,UAAU;AAC/C,aAAO,eAAe,KAAK,MAAM,QAAQ;AAAA,IAC3C;AACA,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,eAAe,QAAQ;AAEpC,QAAM,kBAAkB,MAAM;AAC5B,QAAI,CAAC,cAAc,CAAC,KAAM,QAAO;AACjC,WAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,SAAiB;AAErB,YAAM,oBAAoB,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM;AAGhE,aAAO,KAAK;AAAA,QACV,KAAK,iBAAiB;AAAA,QACtB,QAAQ,KAAK,MAAM,KAAK,OAAO,IAAI,QAAQ,MAAM,CAAC;AAAA,MACpD;AAAA,IACF,CAAC,EACA,KAAK,GAAG;AAAA,EACb;AAEA,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,cAAc,MAAM,cAAc,IAAI;AAAA,IACtC,cAAc,MAAM,cAAc,KAAK;AAAA,IACvC,GAAG;AAAA,EACL;AAEA,MAAI,WAAW,eAAe,QAAQ,GAAG;AACvC,UAAMA,WAAU,OAAQ,aAAa,gBAAgB,IAAI,OAAQ;AACjE,WACE,oBAAC,QAAM,GAAG,aACP,uBAAa,UAAgC,CAAC,GAAGA,QAAO,GAC3D;AAAA,EAEJ;AAEA,QAAM,UAAU,OAAQ,aAAa,gBAAgB,IAAI,WAAY;AAErE,SACE,oBAAC,QAAK,MAAM,QAAQ,KAAM,GAAG,aAC1B,mBACH;AAEJ;AAEA,IAAO,qBAAQ;","names":["content"]}

package/dist/components/TextDecoder.js

@@ -255,19 +255,19 @@ var TextDecoder = ({ children, className, delay = 0 }) => {
     {
       ref: elementRef,
       "aria-label": ariaLabel,
-      className: cn("relative block", className),
+      className: cn("inline-grid", className),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
             className: cn(
-              "transition-opacity duration-300",
+              "transition-opacity duration-300 col-start-1 row-start-1",
               hasAnimated ? "opacity-100" : "opacity-0"
             ),
             children
           }
         ),
-        showDecoded && displayContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute inset-0 transition-opacity duration-300", children: displayContent })
+        showDecoded && displayContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "transition-opacity duration-300 col-start-1 row-start-1", children: displayContent })
       ]
     }
   );