doom-design-system 0.4.0 → 0.4.2

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/Badge/Badge.module.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-pill);
+  border-radius: var(--radius);
   font-weight: 700;
   text-transform: uppercase;
   border: 2px solid var(--card-border);

package/dist/components/FileUpload/FileUpload.js

@@ -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();

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

@@ -5,4 +5,4 @@ export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     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;
+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

@@ -11,50 +11,81 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+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 } = _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);
+    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(() => {
-        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);
-        };
+        setStatus("loading");
+        setShowSkeleton(true);
     }, [src]);
-    const handleLoad = (e) => {
-        if (timerRef.current)
-            clearTimeout(timerRef.current);
-        setIsLoaded(true);
+    // 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 handleError = (e) => {
-        if (fallbackSrc && !hasError) {
-            setHasError(true);
-            return;
+        const img = e.currentTarget;
+        try {
+            if (img.decode) {
+                await img.decode();
+            }
+        }
+        catch (error) {
+            // ignore decode errors (e.g. invalid image data)
+        }
+        finally {
+            setStatus("loaded");
         }
-        if (timerRef.current)
-            clearTimeout(timerRef.current);
-        setIsLoaded(true);
+    }, [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);
-    };
-    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))] }));
+    }, [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

@@ -1,13 +1,16 @@
 .image {
   display: block;
-  max-width: 100%;
-  height: auto;
-}
-.image[data-loaded=false] {
+  width: 100%;
+  height: 100%;
   opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  background-color: transparent;
+}
+.image.visible {
+  opacity: 1;
 }
-.image.with-transition {
-  transition: opacity 0.3s ease-in-out;
+.image.hidden {
+  opacity: 0;
 }
 .image.fit-cover {
   object-fit: cover;
@@ -29,6 +32,22 @@
   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 {

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

@@ -1,31 +1,126 @@
 import React, { ElementType } from "react";
-interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
+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;
+export interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
+    /** The content to be rendered inside the layout container. */
     children?: React.ReactNode;
+    /**
+     * The HTML element or React component to render as the root node.
+     * @default "div"
+     */
     as?: ElementType;
 }
 export interface GridProps extends LayoutProps {
+    /**
+     * Defines the columns of the grid.
+     * Accepts a number (e.g., `3` for 3 equal columns) or a CSS string (e.g., `"1fr 2fr"`).
+     * @default "1fr"
+     */
     columns?: string | number;
-    gap?: string | number;
+    /**
+     * Spacing between grid items.
+     * Maps to the design system spacing tokens (e.g., `4` = 1rem).
+     * @default 4
+     */
+    gap?: Spacing;
 }
+/**
+ * A CSS Grid container for creating two-dimensional layouts.
+ * Use this when you need precise control over columns and rows, or complex grid placements.
+ */
 export declare function Grid({ children, columns, gap, className, style, as: Component, ...props }: GridProps): import("react/jsx-runtime").JSX.Element;
 export interface FlexProps extends LayoutProps {
+    /**
+     * The direction in which flex items are placed in the flex container.
+     * @default "row"
+     */
     direction?: "row" | "column" | "row-reverse" | "column-reverse";
+    /**
+     * Alignment of items along the main axis.
+     * @default "flex-start"
+     */
     justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+    /**
+     * Alignment of items along the cross axis.
+     * @default "stretch"
+     */
     align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    gap?: string | number;
+    /**
+     * Spacing between flex items.
+     * Maps to the design system spacing tokens.
+     * @default 0
+     */
+    gap?: Spacing;
+    /**
+     * Controls whether flex items are forced onto one line or can wrap onto multiple lines.
+     * @default false
+     */
     wrap?: boolean | "wrap" | "nowrap" | "wrap-reverse";
 }
+/**
+ * A flexible box container for one-dimensional layouts.
+ * Use this as your primary layout tool for aligning items in a row or column,
+ * distributing space, and handling wrapping.
+ */
 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"> {
+    /**
+     * The direction to stack items. Defaults to vertical ("column").
+     * Can be overridden to "row" for semantic or responsive adjustments.
+     * @default "column"
+     */
     direction?: "column" | "column-reverse" | "row" | "row-reverse";
 }
+/**
+ * A specialized Flex container explicitly optimized for vertical stacking.
+ * Use this for lists, form fields, card content, or any group of elements
+ * that should be arranged vertically with consistent spacing.
+ * Note: While it defaults to column, `direction="row"` is supported for semantic overrides.
+ */
 export declare function Stack({ children, direction, gap, align, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
 export interface SwitcherProps extends FlexProps {
+    /**
+     * The breakpoint threshold at which the layout switches from horizontal to vertical.
+     * e.g., "xs" means it will be horizontal on screens larger than "xs" (480px), and vertical below.
+     * @default "xs"
+     */
     threshold?: "xxs" | "xs" | "sm" | "md";
 }
+/**
+ * A responsive layout component that switches from horizontal to vertical layout
+ * based on a container query or breakpoint threshold.
+ * Use this for "sidebar + main content" layouts or any pattern that needs
+ * to stack on smaller screens but sit side-by-side on larger ones.
+ */
 export declare function Switcher({ children, threshold, className, ...props }: SwitcherProps): import("react/jsx-runtime").JSX.Element;
 export interface ContainerProps extends LayoutProps {
+    /**
+     * The maximum width of the container.
+     * - `sm`: 640px
+     * - `md`: 768px
+     * - `lg`: 1024px
+     * - `xl`: 1280px
+     * - `fluid`: 100%
+     * @default "xl"
+     */
     maxWidth?: "sm" | "md" | "lg" | "xl" | "fluid";
 }
+/**
+ * A specific layout component for centering content horizontally on the page.
+ * Use this to constrain the maximum width of your page content or sections,
+ * ensuring consistent margins and readability on large screens.
+ */
 export declare function Container({ children, maxWidth, className, as: Component, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Layout/Layout.js

@@ -13,27 +13,73 @@ 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";
+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];
+}
+/**
+ * A CSS Grid container for creating two-dimensional layouts.
+ * Use this when you need precise control over columns and rows, or complex grid placements.
+ */
 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 })));
+    const gridClasses = clsx(styles.grid, className);
+    return (_jsx(Component, Object.assign({ className: gridClasses, style: Object.assign({ gridTemplateColumns, gap: resolveGap(gap) }, style) }, props, { children: children })));
 }
+/**
+ * A flexible box container for one-dimensional layouts.
+ * Use this as your primary layout tool for aligning items in a row or column,
+ * distributing space, and handling wrapping.
+ */
 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 })));
+    const flexClasses = clsx(styles.flex, styles[`direction-${direction}`], justify && styles[`justify-${justify}`], align && styles[`align-${align}`], className);
+    return (_jsx(Component, Object.assign({ className: flexClasses, style: Object.assign({ gap: resolveGap(gap), flexWrap }, style) }, props, { children: children })));
 }
+/**
+ * A specialized Flex container explicitly optimized for vertical stacking.
+ * Use this for lists, form fields, card content, or any group of elements
+ * that should be arranged vertically with consistent spacing.
+ * Note: While it defaults to column, `direction="row"` is supported for semantic overrides.
+ */
 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 })));
 }
+/**
+ * A responsive layout component that switches from horizontal to vertical layout
+ * based on a container query or breakpoint threshold.
+ * Use this for "sidebar + main content" layouts or any pattern that needs
+ * to stack on smaller screens but sit side-by-side on larger ones.
+ */
 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 })));
+    const switcherClasses = clsx(styles.switcher, styles[`switch-${threshold}`], className);
+    return (_jsx(Flex, Object.assign({ className: switcherClasses }, props, { children: children })));
 }
+/**
+ * A specific layout component for centering content horizontally on the page.
+ * Use this to constrain the maximum width of your page content or sections,
+ * ensuring consistent margins and readability on large screens.
+ */
 export function Container(_a) {
     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 })));
+    const containerClasses = clsx(styles.container, styles[maxWidth], className);
+    return (_jsx(Component, Object.assign({ className: containerClasses }, props, { children: children })));
 }

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

@@ -6,6 +6,66 @@
   display: flex;
 }
 
+.direction-row {
+  flex-direction: row;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.direction-row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction-column-reverse {
+  flex-direction: column-reverse;
+}
+
+.justify-flex-start {
+  justify-content: flex-start;
+}
+
+.justify-flex-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.justify-space-around {
+  justify-content: space-around;
+}
+
+.justify-space-evenly {
+  justify-content: space-evenly;
+}
+
+.align-flex-start {
+  align-items: flex-start;
+}
+
+.align-flex-end {
+  align-items: flex-end;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-stretch {
+  align-items: stretch;
+}
+
+.align-baseline {
+  align-items: baseline;
+}
+
 .container {
   width: 100%;
   margin-left: auto;
@@ -31,29 +91,28 @@
 
 .switcher {
   display: flex;
-  flex-direction: row;
 }
 @media (max-width: 360px) {
   .switcher.switch-xxs {
     flex-direction: column;
-    align-items: flex-start !important;
+    align-items: flex-start;
   }
 }
 @media (max-width: 480px) {
   .switcher.switch-xs {
     flex-direction: column;
-    align-items: flex-start !important;
+    align-items: flex-start;
   }
 }
 @media (max-width: 640px) {
   .switcher.switch-sm {
     flex-direction: column;
-    align-items: flex-start !important;
+    align-items: flex-start;
   }
 }
 @media (max-width: 768px) {
   .switcher.switch-md {
     flex-direction: column;
-    align-items: flex-start !important;
+    align-items: flex-start;
   }
 }

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" },