doom-design-system 0.3.4 → 0.4.1

package/dist/components/ActionRow/ActionRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 interface ActionRowProps extends React.HTMLAttributes<HTMLDivElement> {
     icon: React.ReactNode;
     title: string;

package/dist/components/ActionRow/ActionRow.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,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from '../Text/Text.js';
-import { Flex } from '../Layout/Layout.js';
-import { ChevronRight } from 'lucide-react';
-import clsx from 'clsx';
-import styles from './ActionRow.module.css';
+import { Text } from "../Text/Text.js";
+import { Flex } from "../Layout/Layout.js";
+import { ChevronRight } from "lucide-react";
+import clsx from "clsx";
+import styles from "./ActionRow.module.css";
 export function ActionRow(_a) {
     var { icon, title, description, onClick, className } = _a, props = __rest(_a, ["icon", "title", "description", "onClick", "className"]);
-    return (_jsxs(Flex, Object.assign({ align: "center", gap: "1.5rem", onClick: onClick, className: clsx(styles.actionRow, className) }, props, { children: [_jsx("div", { className: styles.iconWrapper, children: icon }), _jsxs(Flex, { direction: "column", gap: "0.25rem", style: { flex: 1 }, children: [_jsx(Text, { variant: "h6", weight: "bold", children: title }), description && (_jsx(Text, { color: "muted", variant: "small", children: description }))] }), _jsx(ChevronRight, { size: 20, strokeWidth: 2.5, style: { color: 'var(--muted-foreground)' } })] })));
+    return (_jsxs(Flex, Object.assign({ align: "center", gap: 6, onClick: onClick, className: clsx(styles.actionRow, className) }, props, { children: [_jsx("div", { className: styles.iconWrapper, children: icon }), _jsxs(Flex, { direction: "column", gap: 1, style: { flex: 1 }, children: [_jsx(Text, { variant: "h6", weight: "bold", children: title }), description && (_jsx(Text, { color: "muted", variant: "small", children: description }))] }), _jsx(ChevronRight, { size: 20, strokeWidth: 2.5, style: { color: "var(--muted-foreground)" } })] })));
 }

package/dist/components/Avatar/Avatar.js

@@ -3,7 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import clsx from "clsx";
 import styles from "./Avatar.module.css";
+import { Image } from "../Image/Image.js";
 export function Avatar({ src, alt = "Avatar", fallback, size = "md", shape = "square", className, }) {
     const [hasError, setHasError] = useState(false);
-    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx("img", { src: src, alt: alt, className: styles.image, onError: () => setHasError(true) })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
+    return (_jsx("div", { className: clsx(styles.avatar, styles[size], styles[shape], className), children: src && !hasError ? (_jsx(Image, { src: src, alt: alt, className: styles.image, onError: () => setHasError(true), fit: "cover", rounded: false })) : (_jsx("span", { className: clsx(styles.fallback, styles[size]), children: typeof fallback === "string" ? fallback.slice(0, 2) : fallback })) }));
 }

package/dist/components/Badge/Badge.d.ts

@@ -1,8 +1,10 @@
 import React from "react";
 type BadgeVariant = "primary" | "success" | "warning" | "error" | "secondary" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
+    size?: BadgeSize;
     children: React.ReactNode;
 }
-export declare function Badge({ variant, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ variant, size, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Badge/Badge.js

@@ -14,6 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import styles from "./Badge.module.css";
 export function Badge(_a) {
-    var { variant = "primary", children, className } = _a, props = __rest(_a, ["variant", "children", "className"]);
-    return (_jsx("span", Object.assign({ className: clsx(styles.badge, styles[variant], className) }, props, { children: children })));
+    var { variant = "primary", size = "md", children, className } = _a, props = __rest(_a, ["variant", "size", "children", "className"]);
+    return (_jsx("span", Object.assign({ className: clsx(styles.badge, styles[variant], styles[size], className) }, props, { children: children })));
 }

package/dist/components/Badge/Badge.module.css

@@ -1,13 +1,25 @@
 .badge {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.75rem;
-  border-radius: var(--radius-pill);
-  font-size: 0.75rem;
+  justify-content: center;
+  border-radius: var(--radius);
   font-weight: 700;
   text-transform: uppercase;
   border: 2px solid var(--card-border);
   box-shadow: 2px 2px 0px 0px var(--card-border);
+  line-height: 1;
+}
+.badge.sm {
+  padding: 0.2rem 0.6rem;
+  font-size: 0.7rem;
+}
+.badge.md {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+}
+.badge.lg {
+  padding: 0.375rem 1rem;
+  font-size: 0.875rem;
 }
 .badge.primary {
   background-color: var(--primary);

package/dist/components/FileUpload/FileUpload.js

@@ -8,7 +8,7 @@ import { Stack, Flex, Switcher } from "../Layout/Layout.js";
 import { Badge } from "../Badge/Badge.js";
 import { Slat } from "../Slat/Slat.js";
 import { Upload, File as FileIcon, FileImage, FileVideo, FileAudio, FileCode, FileArchive, FileText, FileSpreadsheet, Asterisk, X, } from "lucide-react";
-import { Skeleton } from "../Skeleton/Skeleton.js";
+import { Image } from "../Image/Image.js";
 import clsx from "clsx";
 var Status;
 (function (Status) {
@@ -189,7 +189,7 @@ export const FileUpload = ({ label, helperText, accept, maxSize, multiple = fals
         }) }, handleDragHandlers, { children: [_jsxs(Switcher, { threshold: "xxs", className: clsx(styles.header, {
                     [styles.errorHeader]: status === Status.Error,
                     [styles.disabledHeader]: disabled,
-                }), justify: "space-between", align: "center", gap: "var(--spacing-sm)", children: [_jsx("div", { className: styles.headerContent, children: _jsxs(Text, { className: styles.headerTitle, id: "upload-title", children: [label || "Upload Files", required && (_jsx("span", { className: styles.requiredMark, children: _jsx(Asterisk, { size: 14, "aria-label": "required" }) }))] }) }), _jsx(Badge, { variant: status === Status.Error
+                }), justify: "space-between", align: "center", gap: 2, children: [_jsx("div", { className: styles.headerContent, children: _jsxs(Text, { className: styles.headerTitle, id: "upload-title", children: [label || "Upload Files", required && (_jsx("span", { className: styles.requiredMark, children: _jsx(Asterisk, { size: 14, "aria-label": "required" }) }))] }) }), _jsx(Badge, { variant: status === Status.Error
                             ? "error"
                             : status === Status.HasFiles
                                 ? "success"
@@ -216,9 +216,9 @@ export const FileUpload = ({ label, helperText, accept, maxSize, multiple = fals
                                 e.preventDefault();
                                 handleClick();
                             }
-                        }, role: "button", tabIndex: disabled ? -1 : 0, children: _jsxs(Stack, { gap: "var(--spacing-md)", align: "center", children: [_jsx("div", { className: styles.voidIconWrapper, "aria-hidden": "true", children: _jsx(Upload, { className: styles.icon, size: 48, strokeWidth: 2 }) }), _jsxs(Stack, { gap: "var(--spacing-xs)", align: "center", children: [_jsx(Text, { weight: "bold", className: styles.voidText, children: isDragging || isActive || forceActive
+                        }, role: "button", tabIndex: disabled ? -1 : 0, children: _jsxs(Stack, { gap: 4, align: "center", children: [_jsx("div", { className: styles.voidIconWrapper, "aria-hidden": "true", children: _jsx(Upload, { className: styles.icon, size: 48, strokeWidth: 2 }) }), _jsxs(Stack, { gap: 1, align: "center", children: [_jsx(Text, { weight: "bold", className: styles.voidText, children: isDragging || isActive || forceActive
                                                 ? "Drop files now"
-                                                : "Drag and drop files" }), _jsx(Text, { variant: "small", className: styles.secondary, children: "or click to browse" })] }), helperText && (_jsx(Text, { variant: "small", className: styles.helperText, id: "upload-helper", children: helperText })), displayError && (_jsx(Text, { variant: "small", className: styles.errorText, id: "upload-error", children: displayError }))] }) })) : (_jsxs(Flex, { direction: "column", justify: "space-between", gap: "var(--spacing-md)", className: styles.fileList, children: [_jsx(Stack, { gap: "var(--spacing-sm)", children: files.map((file, index) => {
+                                                : "Drag and drop files" }), _jsx(Text, { variant: "small", className: styles.secondary, children: "or click to browse" })] }), helperText && (_jsx(Text, { variant: "small", className: styles.helperText, id: "upload-helper", children: helperText })), displayError && (_jsx(Text, { variant: "small", className: styles.errorText, id: "upload-error", children: displayError }))] }) })) : (_jsxs(Flex, { direction: "column", justify: "space-between", gap: 4, className: styles.fileList, children: [_jsx(Stack, { gap: 2, children: files.map((file, index) => {
                                     const previewUrl = previews[file.name];
                                     return (_jsx(Slat, { label: file.name, secondaryLabel: formatFileSize(file.size), prependContent: previewUrl ? (_jsx(PreviewImage, { src: previewUrl, alt: file.name })) : (getFileIcon(file.name)), appendContent: _jsx(Button, { type: "button", variant: "danger", size: "sm", onClick: (e) => {
                                                 e.stopPropagation();
@@ -231,8 +231,7 @@ export const FileUpload = ({ label, helperText, accept, maxSize, multiple = fals
                                 }, children: "UPLOAD MORE FILES" }))] }))] })] })));
 };
 const PreviewImage = ({ src, alt }) => {
-    const [loaded, setLoaded] = useState(false);
-    return (_jsxs("div", { className: styles.previewWrapper, children: [!loaded && (_jsx(Skeleton, { width: "100%", height: "100%", className: styles.previewSkeleton })), _jsx("img", { src: src, alt: alt
-                    .replace(/\.(jpg|jpeg|png|gif|webp|svg)$/i, "")
-                    .replace(/[-_]/g, " ") || "File preview", className: clsx(styles.previewImg, { [styles.loaded]: loaded }), onLoad: () => setLoaded(true), style: loaded ? {} : { position: "absolute", opacity: 0 } })] }));
+    return (_jsx("div", { className: styles.previewWrapper, children: _jsx(Image, { src: src, alt: alt
+                .replace(/\.(jpg|jpeg|png|gif|webp|svg)$/i, "")
+                .replace(/[-_]/g, " ") || "File preview", className: styles.previewImg, fit: "cover", rounded: false }) }));
 };

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

@@ -322,11 +322,6 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-.previewImg.loaded {
-  opacity: 1;
 }
 
 .previewSkeleton {

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, width, height, ...props }: ImageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Image/Image.js

@@ -0,0 +1,91 @@
+"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 React, { useState, useEffect, useCallback } 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, width, height } = _a, props = __rest(_a, ["src", "alt", "className", "fit", "style", "onLoad", "onError", "fallbackSrc", "aspectRatio", "rounded", "width", "height"]);
+    const [status, setStatus] = useState("loading");
+    const [showSkeleton, setShowSkeleton] = useState(true);
+    // Helper to extract intrinsic numeric value and convert to CSS
+    const toCssValue = (val) => {
+        if (val === undefined || val === null)
+            return undefined;
+        if (typeof val === "number")
+            return `${val}px`;
+        return val;
+    };
+    const getIntrinsicSize = (val) => {
+        if (typeof val === "number")
+            return val;
+        if (typeof val === "string" && !val.endsWith("%")) {
+            const parsed = parseFloat(val);
+            return isNaN(parsed) ? undefined : parsed;
+        }
+        return undefined;
+    };
+    const computedAspectRatio = React.useMemo(() => {
+        if (aspectRatio)
+            return aspectRatio;
+        const w = getIntrinsicSize(width);
+        const h = getIntrinsicSize(height);
+        return w && h ? `${w} / ${h}` : undefined;
+    }, [aspectRatio, width, height]);
+    // Reset state when source changes
+    useEffect(() => {
+        setStatus("loading");
+        setShowSkeleton(true);
+    }, [src]);
+    // When loaded, keep skeleton for a moment to allow cross-fade
+    useEffect(() => {
+        if (status === "loaded") {
+            const timer = setTimeout(() => {
+                setShowSkeleton(false);
+            }, 500); // 500ms delay to allow image to fade in completely
+            return () => clearTimeout(timer);
+        }
+    }, [status]);
+    const handleLoad = useCallback(async (e) => {
+        onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
+        const img = e.currentTarget;
+        try {
+            if (img.decode) {
+                await img.decode();
+            }
+        }
+        catch (error) {
+            // ignore decode errors (e.g. invalid image data)
+        }
+        finally {
+            setStatus("loaded");
+        }
+    }, [onLoad]);
+    const handleError = useCallback((e) => {
+        if (fallbackSrc && status !== "error") {
+            // Prevents infinite loop if fallback also fails
+            if (e.currentTarget.src !== fallbackSrc) {
+                e.currentTarget.src = fallbackSrc;
+                return;
+            }
+        }
+        setStatus("error");
+        setShowSkeleton(false); // Remove skeleton immediately on error to show broken image icon or alt
+        onError === null || onError === void 0 ? void 0 : onError(e);
+    }, [fallbackSrc, status, onError]);
+    return (_jsxs("div", { className: clsx(styles.wrapper, rounded && styles.rounded, className), style: Object.assign({ aspectRatio: computedAspectRatio, width: toCssValue(width), height: toCssValue(height) }, style), children: [_jsx("div", { className: clsx(styles.skeletonLayer, status === "loaded" && styles.fadeOut), "aria-hidden": "true", children: showSkeleton && (_jsx(Skeleton, { style: {
+                        width: "100%",
+                        height: "100%",
+                    } })) }), _jsx("img", Object.assign({ src: src, alt: alt, className: clsx(styles.image, fit && styles[`fit-${fit}`], status === "loaded" ? styles.visible : styles.hidden), onLoad: handleLoad, onError: handleError, width: width, height: height }, props))] }));
+}

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

@@ -0,0 +1,55 @@
+.image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  background-color: transparent;
+}
+.image.visible {
+  opacity: 1;
+}
+.image.hidden {
+  opacity: 0;
+}
+.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;
+  background-color: var(--surface-accent);
+  isolation: isolate;
+}
+
+.skeletonLayer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  transition: opacity 0.5s ease-in-out;
+  opacity: 1;
+}
+.skeletonLayer.fadeOut {
+  opacity: 0;
+}
+
+.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,18 +1,32 @@
 import React, { ElementType } from "react";
+declare const SPACING_MAP: {
+    readonly 0: "0";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+};
+export type Spacing = keyof typeof SPACING_MAP;
 interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     as?: ElementType;
 }
 export interface GridProps extends LayoutProps {
     columns?: string | number;
-    gap?: string | number;
+    gap?: Spacing;
 }
 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";
-    gap?: string | number;
+    gap?: Spacing;
     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;

package/dist/components/Layout/Layout.js

@@ -13,20 +13,37 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import styles from "./Layout.module.css";
+// --- Tokens ---
+const SPACING_MAP = {
+    0: "0",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    8: "2rem",
+    10: "2.5rem",
+    12: "3rem",
+    16: "4rem",
+};
+function resolveGap(gap) {
+    if (gap === undefined)
+        return undefined;
+    return SPACING_MAP[gap];
+}
 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"]);
+    var { children, columns = "1fr", gap = 4, 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 })));
+    return (_jsx(Component, Object.assign({ className: clsx(styles.grid, className), style: Object.assign({ gridTemplateColumns, gap: resolveGap(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"]);
+    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 })));
+    return (_jsx(Component, Object.assign({ className: clsx(styles.flex, className), style: Object.assign({ flexDirection: direction, justifyContent: justify, alignItems: align, gap: resolveGap(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 = 4, 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) {

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,10 +2,19 @@
   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(--primary);

package/dist/components/Modal/Modal.js

@@ -31,7 +31,7 @@ export function ModalBody({ children, className, }) {
     return _jsx("div", { className: clsx(styles.body, className), children: children });
 }
 export function ModalFooter({ children, className, }) {
-    return (_jsx(Flex, { justify: "flex-end", align: "center", gap: "var(--spacing-md)", className: clsx(styles.footer, className), children: children }));
+    return (_jsx(Flex, { justify: "flex-end", align: "center", gap: 4, className: clsx(styles.footer, className), children: children }));
 }
 export function Modal(_a) {
     var { isOpen, onClose, title, children, footer, className, style, variant = "default" } = _a, props = __rest(_a, ["isOpen", "onClose", "title", "children", "footer", "className", "style", "variant"]);

package/dist/components/Slat/Slat.js

@@ -22,6 +22,6 @@ export const Slat = React.forwardRef((_a, ref) => {
                 e.preventDefault();
                 onClick(e);
             }
-        } }, props, { children: _jsxs(Flex, { justify: "space-between", align: "center", gap: "var(--spacing-sm)", children: [_jsxs(Flex, { gap: "var(--spacing-sm)", align: "center", style: { flex: 1, minWidth: 0 }, children: [prependContent && (_jsx("div", { className: styles.prepend, children: prependContent })), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { className: styles.label, children: label }), secondaryLabel && (_jsx(Text, { variant: "small", className: styles.secondaryLabel, children: secondaryLabel }))] })] }), _jsx(Flex, { align: "center", gap: "var(--spacing-sm)", children: appendContent && (_jsx("div", { className: styles.append, children: appendContent })) })] }) })));
+        } }, props, { children: _jsxs(Flex, { justify: "space-between", align: "center", gap: 2, children: [_jsxs(Flex, { gap: 2, align: "center", style: { flex: 1, minWidth: 0 }, children: [prependContent && (_jsx("div", { className: styles.prepend, children: prependContent })), _jsxs(Stack, { gap: 0, style: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { className: styles.label, children: label }), secondaryLabel && (_jsx(Text, { variant: "small", className: styles.secondaryLabel, children: secondaryLabel }))] })] }), _jsx(Flex, { align: "center", gap: 2, children: appendContent && (_jsx("div", { className: styles.append, children: appendContent })) })] }) })));
 });
 Slat.displayName = "Slat";

package/dist/components/Table/Table.js

@@ -45,7 +45,7 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
         overscan: 5,
     });
     const isVirtual = !!height;
-    return (_jsxs("div", { className: clsx(styles.container, variant === "flat" && styles.flat, className), style: style, children: [enableFiltering && (_jsxs("div", { className: styles.toolbar, children: [_jsx("div", { style: { width: "300px" }, children: _jsx(Input, { placeholder: "Search...", value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "", onChange: (e) => setGlobalFilter(e.target.value) }) }), toolbarContent && (_jsx(Flex, { gap: "1rem", align: "center", children: toolbarContent }))] })), _jsxs("div", { ref: parentRef, tabIndex: 0, style: {
+    return (_jsxs("div", { className: clsx(styles.container, variant === "flat" && styles.flat, className), style: style, children: [enableFiltering && (_jsxs("div", { className: styles.toolbar, children: [_jsx("div", { style: { width: "300px" }, children: _jsx(Input, { placeholder: "Search...", value: globalFilter !== null && globalFilter !== void 0 ? globalFilter : "", onChange: (e) => setGlobalFilter(e.target.value) }) }), toolbarContent && (_jsx(Flex, { gap: 4, align: "center", children: toolbarContent }))] })), _jsxs("div", { ref: parentRef, tabIndex: 0, style: {
                     height: height ? height : "auto",
                     overflowY: height ? "auto" : "visible",
                     overflowX: "auto",
@@ -68,7 +68,7 @@ export function Table({ data, columns, enablePagination = true, enableFiltering
                                     }), rowVirtualizer.getVirtualItems().length > 0 && (_jsx("tr", { style: {
                                             height: `${rowVirtualizer.getTotalSize() -
                                                 rowVirtualizer.getVirtualItems()[rowVirtualizer.getVirtualItems().length - 1].end}px`,
-                                        }, children: _jsx("td", { colSpan: columns.length, style: { border: 0, padding: 0 } }) }))] })) : (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: clsx(styles.tr, striped && styles.striped, "group"), children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[density]), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }))] }), table.getRowModel().rows.length === 0 && (_jsx("div", { className: styles.noResults, children: "No results found." }))] }), enablePagination && !isVirtual && (_jsx("div", { className: styles.paginationContainer, children: _jsxs(Flex, { gap: "1rem", align: "center", style: { width: "100%", justifyContent: "space-between" }, children: [_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
+                                        }, children: _jsx("td", { colSpan: columns.length, style: { border: 0, padding: 0 } }) }))] })) : (_jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { className: clsx(styles.tr, striped && styles.striped, "group"), children: row.getVisibleCells().map((cell) => (_jsx("td", { className: clsx(styles.td, styles[density]), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) }))] }), table.getRowModel().rows.length === 0 && (_jsx("div", { className: styles.noResults, children: "No results found." }))] }), enablePagination && !isVirtual && (_jsx("div", { className: styles.paginationContainer, children: _jsxs(Flex, { gap: 4, align: "center", style: { width: "100%", justifyContent: "space-between" }, children: [_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { value: table.getState().pagination.pageSize, onChange: (e) => {
                                     table.setPageSize(Number(e.target.value));
                                 }, options: [
                                     { value: 10, label: "10 rows" },

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/Card";
 export * from "./components/Dropdown";
 export * from "./components/Form";
 export * from "./components/Input";
+export * from "./components/Image";
 export * from "./components/Layout";
 export * from "./components/Link";
 export * from "./components/Modal";

package/dist/index.js

@@ -4,6 +4,7 @@ export * from "./components/Card/index.js";
 export * from "./components/Dropdown/index.js";
 export * from "./components/Form/index.js";
 export * from "./components/Input/index.js";
+export * from "./components/Image/index.js";
 export * from "./components/Layout/index.js";
 export * from "./components/Link/index.js";
 export * from "./components/Modal/index.js";