doom-design-system 0.4.1 → 0.4.2

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

@@ -13,33 +13,114 @@ declare const SPACING_MAP: {
     readonly 16: "4rem";
 };
 export type Spacing = keyof typeof SPACING_MAP;
-interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
+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;
+    /**
+     * 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";
+    /**
+     * 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,7 +13,6 @@ 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",
@@ -32,25 +31,55 @@ function resolveGap(gap) {
         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 = 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: resolveGap(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"]);
     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: resolveGap(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 = 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;
   }
 }