doom-design-system 0.3.4 → 0.4.0

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;
+  justify-content: center;
   border-radius: var(--radius-pill);
-  font-size: 0.75rem;
   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) {
@@ -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, ...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/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/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";