doom-design-system 0.3.3 → 0.4.0

package/dist/components/FileUpload/FileUpload.module.css

@@ -0,0 +1,330 @@
+.window {
+  background-color: var(--card-bg);
+  border: var(--border-width) solid var(--card-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-hard);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  width: 100%;
+  max-width: 100%;
+  min-width: 280px;
+}
+.window.disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+}
+.window.disabled:hover {
+  transform: none !important;
+  filter: none !important;
+}
+.window.disabled {
+  /* 
+     .window should be able to override all children css and this is an example of that
+  */
+}
+.window.disabled * {
+  pointer-events: none;
+}
+.window.disabled::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 20;
+}
+.window.void {
+  border-color: transparent;
+  box-shadow: 0 0 0 4px var(--foreground);
+  transform: scale(1.01);
+  cursor: wait;
+}
+.window.void .header {
+  background-color: var(--common-black);
+  color: var(--background);
+  border-bottom: none;
+}
+.window.void .header > * {
+  --primary: var(--common-white);
+  --primary-foreground: var(--common-black);
+}
+.window.void .body {
+  background-color: var(--common-black);
+  cursor: wait;
+  margin-top: -1px;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+.window.void .body::before, .window.void .body::after {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: radial-gradient(1px 1px at 20% 30%, #fff 100%, transparent), radial-gradient(1px 1px at 40% 70%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 40%, #fff 100%, transparent), radial-gradient(1px 1px at 80% 80%, #fff 100%, transparent), radial-gradient(1px 1px at 10% 10%, #fff 100%, transparent), radial-gradient(1px 1px at 30% 50%, #fff 100%, transparent), radial-gradient(1px 1px at 50% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 70% 90%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 30%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 15% 75%, #fff 100%, transparent), radial-gradient(1px 1px at 85% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 65%, #fff 100%, transparent);
+  background-size: 50% 50%;
+  opacity: 0.5;
+  z-index: 0;
+  animation: consume-stars 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  pointer-events: none;
+}
+.window.void .body::after {
+  animation-name: consume-stars-alt;
+  animation-delay: -3s;
+  background-position: 33% 33%;
+  opacity: 0.3;
+}
+.window.void .body .starField {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+.window.void .body .starField::before, .window.void .body .starField::after {
+  content: "";
+  position: absolute;
+  inset: -50%;
+  width: 200%;
+  height: 200%;
+  background-image: radial-gradient(1px 1px at 25% 35%, #fff 100%, transparent), radial-gradient(1px 1px at 45% 75%, #fff 100%, transparent), radial-gradient(1px 1px at 65% 45%, #fff 100%, transparent), radial-gradient(1px 1px at 85% 85%, #fff 100%, transparent), radial-gradient(1px 1px at 15% 15%, #fff 100%, transparent), radial-gradient(1px 1px at 35% 55%, #fff 100%, transparent), radial-gradient(1px 1px at 55% 25%, #fff 100%, transparent), radial-gradient(1px 1px at 75% 95%, #fff 100%, transparent), radial-gradient(1px 1px at 95% 35%, #fff 100%, transparent), radial-gradient(1.5px 1.5px at 20% 80%, #fff 100%, transparent), radial-gradient(1px 1px at 90% 20%, #fff 100%, transparent), radial-gradient(1px 1px at 60% 70%, #fff 100%, transparent);
+  background-size: 50% 50%;
+  opacity: 0.5;
+  animation: consume-stars 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation-delay: -1.5s;
+}
+.window.void .body .starField::after {
+  animation-name: consume-stars-alt;
+  animation-delay: -4.5s;
+  background-position: 40% 40%;
+  opacity: 0.3;
+}
+.window.void .headerContent,
+.window.void .headerTitle {
+  opacity: 0;
+  visibility: hidden;
+}
+.window.void .voidIconWrapper,
+.window.void .voidText,
+.window.void .secondary,
+.window.void .helperText {
+  opacity: 0;
+  transform: scale(0.9);
+  pointer-events: none;
+}
+
+.header {
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: var(--border-width) solid var(--border-strong);
+  user-select: none;
+  min-height: 56px;
+  transition: all 0.4s ease;
+}
+@media (max-width: 480px) {
+  .header {
+    padding: var(--spacing-sm);
+    min-height: 48px;
+  }
+}
+@media (max-width: 360px) {
+  .header {
+    padding: var(--spacing-md);
+  }
+}
+.header > * {
+  --primary: var(--primary-foreground);
+  --primary-foreground: var(--primary);
+  --foreground: var(--primary-foreground);
+  --muted-foreground: var(--primary-foreground);
+}
+.header.errorHeader {
+  background-color: var(--error);
+  color: var(--error-foreground);
+}
+.header.disabledHeader {
+  background-color: var(--muted);
+  color: var(--muted-foreground);
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) !important;
+}
+.header.disabledHeader:hover {
+  transform: none !important;
+  filter: none !important;
+}
+.header.disabledHeader {
+  opacity: 1;
+}
+
+.headerContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.headerTitle {
+  font-family: var(--font-heading);
+  font-weight: 800;
+  font-size: var(--text-sm);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  display: block;
+}
+
+.requiredMark {
+  display: inline-flex;
+  vertical-align: middle;
+  margin-left: 2px;
+  color: inherit;
+  transform: translateY(-2px);
+}
+
+.body {
+  padding: var(--spacing-lg);
+  background-color: var(--card-bg);
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  position: relative;
+}
+@media (max-width: 640px) {
+  .body {
+    padding: var(--spacing-md);
+    min-height: 160px;
+  }
+}
+@media (max-width: 360px) {
+  .body {
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
+.body.hasFiles {
+  justify-content: flex-start;
+  align-items: stretch;
+  cursor: default;
+}
+.body.dragging, .body.error {
+  background-color: var(--surface-accent);
+}
+
+.emptyState {
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  border-radius: var(--radius);
+  transition: background-color 0.2s ease;
+}
+.emptyState:focus-visible {
+  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary);
+}
+.void .emptyState:hover {
+  background-color: transparent;
+  cursor: wait;
+}
+.emptyState {
+  text-align: center;
+}
+
+.voidIconWrapper {
+  transition: all 0.3s ease;
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
+}
+
+.icon {
+  color: var(--muted-foreground);
+  transition: all 0.3s ease;
+}
+@media (max-width: 480px) {
+  .icon {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+.secondary {
+  color: var(--muted-foreground);
+  opacity: 0.8;
+}
+
+.hiddenInput {
+  display: none;
+}
+
+.fileList {
+  width: 100%;
+  flex: 1;
+}
+
+.removeButton {
+  width: 32px;
+  height: 32px;
+  padding: 0 !important;
+  flex-shrink: 0;
+}
+
+@keyframes consume-stars {
+  0% {
+    transform: scale(2.5) rotate(0deg);
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(360deg);
+    opacity: 0;
+  }
+}
+@keyframes consume-stars-alt {
+  0% {
+    transform: scale(3) rotate(45deg);
+    opacity: 0;
+  }
+  5% {
+    opacity: 1;
+  }
+  95% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0) rotate(405deg);
+    opacity: 0;
+  }
+}
+.previewWrapper {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: var(--border-width) solid var(--border-strong);
+  position: relative;
+  background: var(--surface-accent);
+  flex-shrink: 0;
+}
+
+.previewImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.previewSkeleton {
+  position: absolute;
+  inset: 0;
+}

package/dist/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload } from "./FileUpload";
+export type { FileUploadProps } from "./FileUpload";

package/dist/components/FileUpload/index.js

@@ -0,0 +1 @@
+export { FileUpload } from "./FileUpload.js";

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    fallbackSrc?: string;
+    aspectRatio?: string | number;
+    rounded?: boolean;
+}
+export declare function Image({ src, alt, className, fit, style, onLoad, onError, fallbackSrc, aspectRatio, rounded, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Image/Image.js

@@ -0,0 +1,60 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import clsx from "clsx";
+import styles from "./Image.module.css";
+import { Skeleton } from "../Skeleton/Skeleton.js";
+export function Image(_a) {
+    var { src, alt, className, fit, style, onLoad, onError, fallbackSrc, aspectRatio, rounded = true } = _a, props = __rest(_a, ["src", "alt", "className", "fit", "style", "onLoad", "onError", "fallbackSrc", "aspectRatio", "rounded"]);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [hasError, setHasError] = useState(false);
+    const [showSkeleton, setShowSkeleton] = useState(false);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        setIsLoaded(false);
+        setHasError(false);
+        setShowSkeleton(false);
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            setShowSkeleton(true);
+        }, 150);
+        return () => {
+            if (timerRef.current)
+                clearTimeout(timerRef.current);
+        };
+    }, [src]);
+    const handleLoad = (e) => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setIsLoaded(true);
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+    };
+    const handleError = (e) => {
+        if (fallbackSrc && !hasError) {
+            setHasError(true);
+            return;
+        }
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        setIsLoaded(true);
+        onError === null || onError === void 0 ? void 0 : onError(e);
+    };
+    return (_jsxs("div", { className: clsx(styles.wrapper, rounded && styles.rounded, className), style: Object.assign({ aspectRatio }, style), children: [!isLoaded && showSkeleton && (_jsx(Skeleton, { className: styles.skeleton, style: {
+                    position: "absolute",
+                    inset: 0,
+                    height: "100%",
+                    width: "100%",
+                } })), _jsx("img", Object.assign({ src: hasError ? fallbackSrc : src, alt: alt, className: clsx(styles.image, fit && styles[`fit-${fit}`], showSkeleton && styles["with-transition"]), onLoad: handleLoad, onError: handleError, "data-loaded": isLoaded ? "true" : "false", style: { width: "100%", height: "100%" } }, props))] }));
+}

package/dist/components/Image/Image.module.css

@@ -0,0 +1,36 @@
+.image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+.image[data-loaded=false] {
+  opacity: 0;
+}
+.image.with-transition {
+  transition: opacity 0.3s ease-in-out;
+}
+.image.fit-cover {
+  object-fit: cover;
+}
+.image.fit-contain {
+  object-fit: contain;
+}
+.image.fit-fill {
+  object-fit: fill;
+}
+.image.fit-none {
+  object-fit: none;
+}
+.image.fit-scale-down {
+  object-fit: scale-down;
+}
+
+.wrapper {
+  position: relative;
+  display: block;
+  overflow: hidden;
+}
+
+.rounded {
+  border-radius: var(--radius);
+}

package/dist/components/Image/index.d.ts

@@ -0,0 +1 @@
+export * from "./Image";

package/dist/components/Image/index.js

@@ -0,0 +1 @@
+export * from "./Image.js";

package/dist/components/Layout/Layout.d.ts

@@ -1,4 +1,4 @@
-import React, { ElementType } from 'react';
+import React, { ElementType } from "react";
 interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     as?: ElementType;
@@ -9,19 +9,23 @@ export interface GridProps extends LayoutProps {
 }
 export declare function Grid({ children, columns, gap, className, style, as: Component, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface FlexProps extends LayoutProps {
-    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
-    align?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
     gap?: string | number;
-    wrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    wrap?: boolean | "wrap" | "nowrap" | "wrap-reverse";
 }
 export declare function Flex({ children, direction, justify, align, gap, wrap, className, style, as: Component, ...props }: FlexProps): import("react/jsx-runtime").JSX.Element;
-export interface StackProps extends Omit<FlexProps, 'direction'> {
-    direction?: 'column' | 'column-reverse' | 'row' | 'row-reverse';
+export interface StackProps extends Omit<FlexProps, "direction"> {
+    direction?: "column" | "column-reverse" | "row" | "row-reverse";
 }
 export declare function Stack({ children, direction, gap, align, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
+export interface SwitcherProps extends FlexProps {
+    threshold?: "xxs" | "xs" | "sm" | "md";
+}
+export declare function Switcher({ children, threshold, className, ...props }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
 export interface ContainerProps extends LayoutProps {
-    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "fluid";
 }
 export declare function Container({ children, maxWidth, className, as: Component, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Layout.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,27 +11,29 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Layout.module.css';
+import clsx from "clsx";
+import styles from "./Layout.module.css";
 export function Grid(_a) {
-    var { children, columns = '1fr', gap = '1rem', className, style, as: Component = 'div' } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
-    const gridTemplateColumns = typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
+    var { children, columns = "1fr", gap = "1rem", className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "columns", "gap", "className", "style", "as"]);
+    const gridTemplateColumns = typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns;
     return (_jsx(Component, Object.assign({ className: clsx(styles.grid, className), style: Object.assign({ gridTemplateColumns,
             gap }, style) }, props, { children: children })));
 }
 export function Flex(_a) {
-    var { children, direction = 'row', justify = 'flex-start', align = 'stretch', gap = '0', wrap = false, className, style, as: Component = 'div' } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style", "as"]);
-    const flexWrap = typeof wrap === 'boolean'
-        ? (wrap ? 'wrap' : 'nowrap')
-        : wrap;
+    var { children, direction = "row", justify = "flex-start", align = "stretch", gap = "0", wrap = false, className, style, as: Component = "div" } = _a, props = __rest(_a, ["children", "direction", "justify", "align", "gap", "wrap", "className", "style", "as"]);
+    const flexWrap = typeof wrap === "boolean" ? (wrap ? "wrap" : "nowrap") : wrap;
     return (_jsx(Component, Object.assign({ className: clsx(styles.flex, className), style: Object.assign({ flexDirection: direction, justifyContent: justify, alignItems: align, gap,
             flexWrap }, style) }, props, { children: children })));
 }
 export function Stack(_a) {
-    var { children, direction = 'column', gap = '1rem', align = 'stretch' } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
+    var { children, direction = "column", gap = "1rem", align = "stretch" } = _a, props = __rest(_a, ["children", "direction", "gap", "align"]);
     return (_jsx(Flex, Object.assign({ direction: direction, gap: gap, align: align }, props, { children: children })));
 }
+export function Switcher(_a) {
+    var { children, threshold = "xs", className } = _a, props = __rest(_a, ["children", "threshold", "className"]);
+    return (_jsx(Flex, Object.assign({ className: clsx(styles.switcher, styles[`switch-${threshold}`], className) }, props, { children: children })));
+}
 export function Container(_a) {
-    var { children, maxWidth = 'xl', className, as: Component = 'div' } = _a, props = __rest(_a, ["children", "maxWidth", "className", "as"]);
+    var { children, maxWidth = "xl", className, as: Component = "div" } = _a, props = __rest(_a, ["children", "maxWidth", "className", "as"]);
     return (_jsx(Component, Object.assign({ className: clsx(styles.container, styles[maxWidth], className) }, props, { children: children })));
 }

package/dist/components/Layout/Layout.module.css

@@ -28,3 +28,32 @@
 .container.fluid {
   max-width: 100%;
 }
+
+.switcher {
+  display: flex;
+  flex-direction: row;
+}
+@media (max-width: 360px) {
+  .switcher.switch-xxs {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+@media (max-width: 480px) {
+  .switcher.switch-xs {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+@media (max-width: 640px) {
+  .switcher.switch-sm {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}
+@media (max-width: 768px) {
+  .switcher.switch-md {
+    flex-direction: column;
+    align-items: flex-start !important;
+  }
+}

package/dist/components/Link/Link.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
-export type LinkVariant = 'default' | 'button' | 'subtle';
+import React from "react";
+export type LinkVariant = "default" | "button" | "subtle";
 interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     children: React.ReactNode;
     variant?: LinkVariant;
+    prefetch?: boolean;
+    isExternal?: boolean;
+    disabled?: boolean;
     className?: string;
 }
-export declare function Link({ children, variant, className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, variant, prefetch, isExternal, disabled, className, onClick, onMouseEnter, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Link/Link.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -10,10 +10,31 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import styles from './Link.module.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import styles from "./Link.module.css";
+import React from "react";
+import { ExternalLink } from "lucide-react";
 export function Link(_a) {
-    var { children, variant = 'default', className } = _a, props = __rest(_a, ["children", "variant", "className"]);
-    return (_jsx("a", Object.assign({ className: clsx(styles.link, styles[variant], className) }, props, { children: children })));
+    var { children, variant = "default", prefetch, isExternal, disabled, className, onClick, onMouseEnter } = _a, props = __rest(_a, ["children", "variant", "prefetch", "isExternal", "disabled", "className", "onClick", "onMouseEnter"]);
+    const [shouldPrefetch, setShouldPrefetch] = React.useState(false);
+    const handleMouseEnter = (e) => {
+        if (disabled)
+            return;
+        if (prefetch && !shouldPrefetch) {
+            setShouldPrefetch(true);
+        }
+        onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
+    };
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    const externalProps = isExternal
+        ? { target: "_blank", rel: "noopener noreferrer" }
+        : {};
+    return (_jsxs("a", Object.assign({ className: clsx(styles.link, styles[variant], disabled && styles.disabled, className), onMouseEnter: handleMouseEnter, onClick: handleClick, "aria-disabled": disabled }, externalProps, props, { children: [children, isExternal && _jsx(ExternalLink, { size: 14, className: "ml-1" }), shouldPrefetch && props.href && (_jsx("link", { rel: "prefetch", href: props.href, as: "document" }))] })));
 }

package/dist/components/Link/Link.module.css

@@ -2,19 +2,35 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-weight: 700;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
   cursor: pointer;
+  outline: none;
+}
+.link:focus-visible {
+  outline: revert;
+}
+.link.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  text-decoration: none;
+  cursor: not-allowed;
 }
 .link.default {
-  color: var(--foreground);
-  border-bottom: 2px solid transparent;
+  color: var(--primary);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
 }
 .link.default:hover {
-  color: var(--primary);
-  border-bottom-color: var(--primary);
-  transform: translateY(-1px);
+  filter: brightness(1.2);
+}
+.link.default:visited {
+  color: var(--primary-dark, var(--primary));
+  filter: brightness(0.8);
+}
+.link.default:active {
+  filter: brightness(0.9);
 }
 .link.subtle {
   color: var(--muted-foreground);