beacon-ui 3.1.4

package/dist/components/Card.d.ts

@@ -0,0 +1,40 @@
+import type { Theme, HueVariant } from "../tokens/types";
+import { type PatternType } from "../utils/patternPaths";
+type CardType = "product" | "experience" | "info" | "generic";
+type ProductCardSize = "full" | "half";
+type ProductCardStatus = "default" | "highlighted";
+type ExperienceCardType = "default" | "skills" | "contacts";
+type GenericCardStatus = "default" | "highlighted" | "selected";
+interface CardProps {
+    cardType: CardType;
+    theme: Theme;
+    hue: HueVariant;
+    size?: ProductCardSize;
+    status?: ProductCardStatus;
+    hasImage?: boolean;
+    imageAspectRatio?: "16x9" | "4x3";
+    hasIdentifiers?: boolean;
+    hasButton?: boolean;
+    title?: string;
+    description?: string;
+    experienceType?: ExperienceCardType;
+    positionName?: string;
+    companyName?: string;
+    year?: string;
+    experienceDescription?: string;
+    label?: string;
+    details?: string;
+    cardName?: string;
+    cardDescription?: string;
+    hasIcon?: boolean;
+    genericStatus?: GenericCardStatus;
+    showBgPattern?: boolean;
+    patternType?: PatternType;
+    showOverlay?: boolean;
+    showShadow?: boolean;
+    showBorder?: boolean;
+    slot?: React.ReactNode;
+}
+export declare function Card({ cardType, theme, hue, size, status, hasImage, imageAspectRatio, hasIdentifiers, hasButton, title, description, experienceType, positionName, companyName, year, experienceDescription, label, details, cardName, cardDescription, hasIcon, genericStatus, showBgPattern, patternType, showOverlay, showShadow, showBorder, slot, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE3E,KAAK,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAG9D,KAAK,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AACvC,KAAK,iBAAiB,GAAG,SAAS,GAAG,aAAa,CAAC;AAGnD,KAAK,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAG5D,KAAK,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEhE,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,GAAG,EAAE,UAAU,CAAC;IAEhB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,GAAG,EAEH,IAAa,EACb,MAAkB,EAClB,QAAe,EACf,gBAAyB,EACzB,cAAqB,EACrB,SAAgB,EAChB,KAAuB,EACvB,WAAsI,EAEtI,cAA0B,EAC1B,YAA8B,EAC9B,WAA4B,EAC5B,IAAgB,EAChB,qBAA0C,EAC1C,KAAe,EACf,OAAmB,EAEnB,QAAsB,EACtB,eAAoC,EACpC,OAAc,EAEd,aAAyB,EACzB,aAAoB,EACpB,WAAqB,EACrB,WAAkB,EAClB,UAAiB,EACjB,UAAiB,EACjB,IAAI,GACL,EAAE,SAAS,2CAkyBX"}

package/dist/components/Card.js

@@ -0,0 +1,517 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RightArrowIcon, ArrowDownFallSlotIcon } from "../icons";
+import { getPatternConfig } from "../utils/patternPaths";
+export function Card({ cardType, theme, hue, 
+// ProductCard
+size = "full", status = "default", hasImage = true, imageAspectRatio = "16x9", hasIdentifiers = true, hasButton = true, title = "Product Title", description = "Add your products Details that description here. This paragraph is restricted only two lines even if content is large.", 
+// ExperienceCard
+experienceType = "default", positionName = "Position Name", companyName = "Company Name", year = "2025-26", experienceDescription = "Long Description", label = "Label", details = "Details", 
+// InfoCard
+cardName = "Card Name", cardDescription = "Card Description", hasIcon = true, 
+// Generic Card
+genericStatus = "default", showBgPattern = true, patternType = "cubes", showOverlay = true, showShadow = true, showBorder = true, slot, }) {
+    const renderProductCard = () => {
+        const isFull = size === "full";
+        const isHighlighted = status === "highlighted";
+        const cardStyles = {
+            position: "relative",
+            overflow: "hidden",
+            borderRadius: "var(--corner-radius-400)",
+            backgroundColor: isHighlighted ? "var(--bg-page-primary)" : "var(--bg-page-tertiary)",
+            display: "flex",
+            flexDirection: isFull ? "row" : "column",
+            gap: isFull ? "var(--spacing-500)" : "var(--spacing-200)",
+            padding: isFull ? 0 : "var(--spacing-400)",
+            width: isFull ? "100%" : "100%",
+            maxWidth: isFull ? "600px" : "400px",
+            minHeight: isFull ? "240px" : "auto",
+        };
+        const overlayStyles = {
+            position: "absolute",
+            inset: "-1px",
+            background: `linear-gradient(to bottom, rgba(255,255,255,0) 26.827%, ${isHighlighted ? "var(--bg-page-primary)" : "var(--bg-page-secondary)"} 86.384%)`,
+            pointerEvents: "none",
+        };
+        if (isFull) {
+            return (_jsxs("div", { style: cardStyles, children: [showBgPattern && (_jsx("div", { style: {
+                            position: "absolute",
+                            aspectRatio: "64/64",
+                            inset: "-1px",
+                            overflow: "hidden",
+                        }, children: _jsx("div", { style: {
+                                position: "absolute",
+                                inset: "0 -322px -322px 0",
+                                backgroundImage: "url('data:image/svg+xml,%3Csvg width=\"210\" height=\"163\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"210\" height=\"163\" fill=\"%23d2d2d6\"/%3E%3C/svg%3E')",
+                                backgroundRepeat: "repeat",
+                                backgroundSize: "210px 163px",
+                            } }) })), showOverlay && _jsx("div", { style: overlayStyles }), hasImage && (_jsx("div", { style: {
+                            aspectRatio: imageAspectRatio === "16x9" ? "16/9" : "4/3",
+                            flex: "1 0 0",
+                            maxHeight: "240px",
+                            maxWidth: "300px",
+                            minHeight: "36px",
+                            minWidth: "48px",
+                            position: "relative",
+                            borderRadius: "0 var(--corner-radius-400) 0 0",
+                            overflow: "hidden",
+                        }, children: _jsx("div", { style: {
+                                position: "absolute",
+                                inset: 0,
+                                backgroundColor: "var(--bg-page-secondary)",
+                                borderRadius: "0 var(--corner-radius-400) 0 0",
+                            } }) })), _jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: "1 0 0",
+                            gap: "var(--spacing-500)",
+                            alignItems: "flex-start",
+                            minHeight: 0,
+                            minWidth: 0,
+                            padding: "0 0 var(--spacing-500) 0",
+                            position: "relative",
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "var(--spacing-200)",
+                                    alignItems: "flex-start",
+                                    width: "100%",
+                                }, children: [_jsx("h4", { style: {
+                                            fontFamily: "var(--font-secondary)",
+                                            fontSize: "var(--heading-h4-text-size)",
+                                            lineHeight: "var(--heading-h4-line-height)",
+                                            fontWeight: "var(--font-weight-secondary-semibold)",
+                                            color: "var(--fg-neutral)",
+                                            margin: 0,
+                                            textTransform: "capitalize",
+                                        }, children: title }), _jsx("p", { style: {
+                                            fontFamily: "var(--font-secondary)",
+                                            fontSize: "var(--body-regular-text-size)",
+                                            lineHeight: "var(--body-regular-line-height)",
+                                            fontWeight: "var(--font-weight-secondary-regular)",
+                                            color: "var(--fg-neutral-tertiary)",
+                                            margin: 0,
+                                            flex: "1 0 0",
+                                            display: "-webkit-box",
+                                            WebkitLineClamp: 2,
+                                            WebkitBoxOrient: "vertical",
+                                            overflow: "hidden",
+                                        }, children: description })] }), hasIdentifiers && (_jsxs("div", { style: {
+                                    display: "flex",
+                                    gap: "var(--spacing-200)",
+                                    alignItems: "flex-start",
+                                }, children: [_jsx("div", { style: {
+                                            backgroundColor: "var(--bg-page-tertiary)",
+                                            padding: "var(--spacing-100) var(--spacing-300)",
+                                            borderRadius: "var(--corner-radius-full)",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "var(--spacing-100)",
+                                        }, children: _jsx("span", { style: {
+                                                fontFamily: "var(--font-secondary)",
+                                                fontSize: "var(--body-extra-small-text-size)",
+                                                lineHeight: "var(--body-extra-small-line-height)",
+                                                color: "var(--fg-neutral-tertiary)",
+                                            }, children: "Identifier" }) }), _jsx("div", { style: {
+                                            backgroundColor: "var(--bg-page-tertiary)",
+                                            padding: "var(--spacing-100) var(--spacing-300)",
+                                            borderRadius: "var(--corner-radius-full)",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "var(--spacing-100)",
+                                        }, children: _jsx("span", { style: {
+                                                fontFamily: "var(--font-secondary)",
+                                                fontSize: "var(--body-extra-small-text-size)",
+                                                lineHeight: "var(--body-extra-small-line-height)",
+                                                color: "var(--fg-neutral-tertiary)",
+                                            }, children: "Tag" }) })] })), hasButton && (_jsxs("div", { style: {
+                                    backgroundColor: "var(--bg-primary-tonal)",
+                                    padding: "var(--spacing-300) var(--spacing-400)",
+                                    borderRadius: "var(--corner-radius-200)",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "var(--spacing-200)",
+                                    cursor: "pointer",
+                                }, children: [_jsx("span", { style: {
+                                            fontFamily: "var(--font-secondary)",
+                                            fontSize: "var(--body-small-text-size)",
+                                            lineHeight: "var(--body-small-line-height)",
+                                            fontWeight: "var(--font-weight-secondary-medium)",
+                                            color: "var(--fg-primary-on-tonal)",
+                                        }, children: "Button" }), _jsx(RightArrowIcon, { size: "xs" })] }))] })] }));
+        }
+        // Half size (vertical)
+        return (_jsxs("div", { style: cardStyles, children: [showBgPattern && (_jsx("div", { style: {
+                        position: "absolute",
+                        aspectRatio: "64/64",
+                        inset: "-1px",
+                        overflow: "hidden",
+                    }, children: _jsx("div", { style: {
+                            position: "absolute",
+                            inset: "0 -322px -322px 0",
+                            backgroundImage: "url('data:image/svg+xml,%3Csvg width=\"210\" height=\"163\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Crect width=\"210\" height=\"163\" fill=\"%23d2d2d6\"/%3E%3C/svg%3E')",
+                            backgroundRepeat: "repeat",
+                            backgroundSize: "210px 163px",
+                        } }) })), showOverlay && _jsx("div", { style: overlayStyles }), _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "var(--spacing-200)",
+                        alignItems: "flex-start",
+                        width: "100%",
+                        position: "relative",
+                    }, children: [_jsx("h5", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--heading-h5-text-size)",
+                                lineHeight: "var(--heading-h5-line-height)",
+                                fontWeight: "var(--font-weight-secondary-semibold)",
+                                color: "var(--fg-neutral)",
+                                margin: 0,
+                                textTransform: "capitalize",
+                            }, children: title }), _jsx("p", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--body-regular-text-size)",
+                                lineHeight: "var(--body-regular-line-height)",
+                                fontWeight: "var(--font-weight-secondary-regular)",
+                                color: "var(--fg-neutral-tertiary)",
+                                margin: 0,
+                                display: "-webkit-box",
+                                WebkitLineClamp: 1,
+                                WebkitBoxOrient: "vertical",
+                                overflow: "hidden",
+                            }, children: description })] }), hasImage && (_jsx("div", { style: {
+                        aspectRatio: imageAspectRatio === "16x9" ? "320/180" : "4/3",
+                        minHeight: "27px",
+                        minWidth: "48px",
+                        position: "relative",
+                        borderRadius: "var(--corner-radius-400)",
+                        width: "100%",
+                        overflow: "hidden",
+                    }, children: _jsx("div", { style: {
+                            position: "absolute",
+                            inset: 0,
+                            backgroundColor: "var(--bg-page-secondary)",
+                            borderRadius: "var(--corner-radius-400)",
+                        } }) })), hasIdentifiers && (_jsxs("div", { style: {
+                        display: "flex",
+                        gap: "var(--spacing-200)",
+                        alignItems: "flex-start",
+                        position: "relative",
+                    }, children: [_jsx("div", { style: {
+                                backgroundColor: "var(--bg-page-tertiary)",
+                                padding: "var(--spacing-100) var(--spacing-300)",
+                                borderRadius: "var(--corner-radius-full)",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "var(--spacing-100)",
+                            }, children: _jsx("span", { style: {
+                                    fontFamily: "var(--font-secondary)",
+                                    fontSize: "var(--body-extra-small-text-size)",
+                                    lineHeight: "var(--body-extra-small-line-height)",
+                                    color: "var(--fg-neutral-tertiary)",
+                                }, children: "Identifier" }) }), _jsx("div", { style: {
+                                backgroundColor: "var(--bg-page-tertiary)",
+                                padding: "var(--spacing-100) var(--spacing-300)",
+                                borderRadius: "var(--corner-radius-full)",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "var(--spacing-100)",
+                            }, children: _jsx("span", { style: {
+                                    fontFamily: "var(--font-secondary)",
+                                    fontSize: "var(--body-extra-small-text-size)",
+                                    lineHeight: "var(--body-extra-small-line-height)",
+                                    color: "var(--fg-neutral-tertiary)",
+                                }, children: "Tag" }) })] })), hasButton && (_jsxs("div", { style: {
+                        backgroundColor: "var(--bg-primary-tonal)",
+                        padding: "var(--spacing-300) var(--spacing-400)",
+                        borderRadius: "var(--corner-radius-200)",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "var(--spacing-200)",
+                        cursor: "pointer",
+                        position: "relative",
+                    }, children: [_jsx("span", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--body-small-text-size)",
+                                lineHeight: "var(--body-small-line-height)",
+                                fontWeight: "var(--font-weight-secondary-medium)",
+                                color: "var(--fg-primary-on-tonal)",
+                            }, children: "Button" }), _jsx(RightArrowIcon, { size: "xs" })] }))] }));
+    };
+    const renderExperienceCard = () => {
+        const isDefault = experienceType === "default";
+        const isSkills = experienceType === "skills";
+        const isContacts = experienceType === "contacts";
+        if (isDefault) {
+            return (_jsxs("div", { style: {
+                    display: "flex",
+                    gap: "var(--spacing-500)",
+                    alignItems: "flex-start",
+                    width: "480px",
+                    position: "relative",
+                }, children: [_jsx("div", { style: {
+                            minHeight: "48px",
+                            minWidth: "48px",
+                            width: "64px",
+                            height: "64px",
+                            borderRadius: "var(--corner-radius-200)",
+                            backgroundColor: "var(--bg-page-secondary)",
+                            flexShrink: 0,
+                        } }), _jsxs("div", { style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            flex: "1 0 0",
+                            gap: "var(--spacing-300)",
+                            alignItems: "flex-start",
+                            maxWidth: "600px",
+                            minHeight: 0,
+                            minWidth: 0,
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "var(--spacing-100)",
+                                    alignItems: "flex-start",
+                                    width: "100%",
+                                }, children: [_jsx("h6", { style: {
+                                            fontFamily: "var(--font-secondary)",
+                                            fontSize: "var(--heading-h6-text-size)",
+                                            lineHeight: "var(--heading-h6-line-height)",
+                                            fontWeight: "var(--font-weight-secondary-semibold)",
+                                            color: "var(--fg-neutral)",
+                                            margin: 0,
+                                            textTransform: "capitalize",
+                                        }, children: positionName }), _jsx("p", { style: {
+                                            fontFamily: "var(--font-secondary)",
+                                            fontSize: "var(--body-regular-text-size)",
+                                            lineHeight: "var(--body-regular-line-height)",
+                                            fontWeight: "var(--font-weight-secondary-medium)",
+                                            color: "var(--fg-neutral-tertiary)",
+                                            margin: 0,
+                                        }, children: companyName }), _jsx("p", { style: {
+                                            fontFamily: "var(--font-secondary)",
+                                            fontSize: "var(--body-extra-small-text-size)",
+                                            lineHeight: "var(--body-extra-small-line-height)",
+                                            fontWeight: "var(--font-weight-secondary-regular)",
+                                            color: "var(--fg-neutral-tertiary)",
+                                            margin: 0,
+                                        }, children: year })] }), _jsx("p", { style: {
+                                    fontFamily: "var(--font-secondary)",
+                                    fontSize: "var(--body-small-text-size)",
+                                    lineHeight: "var(--body-small-line-height)",
+                                    fontWeight: "var(--font-weight-secondary-regular)",
+                                    color: "var(--fg-neutral-tertiary)",
+                                    margin: 0,
+                                }, children: experienceDescription })] })] }));
+        }
+        if (isSkills) {
+            return (_jsxs("div", { style: {
+                    display: "flex",
+                    gap: "var(--spacing-400)",
+                    alignItems: "center",
+                    backgroundColor: "var(--bg-page-secondary)",
+                    padding: "var(--spacing-200)",
+                    borderRadius: "var(--corner-radius-200)",
+                    width: "480px",
+                    position: "relative",
+                }, children: [_jsx("div", { style: {
+                            minHeight: "32px",
+                            minWidth: "32px",
+                            width: "48px",
+                            height: "48px",
+                            borderRadius: "var(--corner-radius-200)",
+                            backgroundColor: "var(--bg-page-tertiary)",
+                            flexShrink: 0,
+                        } }), _jsx("p", { style: {
+                            fontFamily: "var(--font-secondary)",
+                            fontSize: "var(--body-regular-text-size)",
+                            lineHeight: "var(--body-regular-line-height)",
+                            fontWeight: "var(--font-weight-secondary-medium)",
+                            color: "var(--fg-neutral)",
+                            margin: 0,
+                            flex: "1 0 0",
+                        }, children: positionName })] }));
+        }
+        // Contacts
+        return (_jsxs("div", { style: {
+                display: "flex",
+                gap: "var(--spacing-400)",
+                alignItems: "center",
+                width: "480px",
+                position: "relative",
+            }, children: [_jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        flex: "1 0 0",
+                        gap: "var(--spacing-100)",
+                        alignItems: "flex-start",
+                        maxWidth: "600px",
+                        minHeight: 0,
+                        minWidth: 0,
+                    }, children: [_jsx("p", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--body-regular-text-size)",
+                                lineHeight: "var(--body-regular-line-height)",
+                                fontWeight: "var(--font-weight-secondary-regular)",
+                                color: "var(--fg-neutral-tertiary)",
+                                margin: 0,
+                            }, children: label }), _jsx("p", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--body-medium-text-size)",
+                                lineHeight: "var(--body-medium-line-height)",
+                                fontWeight: "var(--font-weight-secondary-medium)",
+                                color: "var(--fg-neutral)",
+                                margin: 0,
+                            }, children: details })] }), _jsx("div", { style: {
+                        backgroundColor: "var(--bg-page-tertiary)",
+                        width: "48px",
+                        height: "48px",
+                        borderRadius: "var(--corner-radius-200)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                    }, children: _jsx("div", { style: {
+                            width: "24px",
+                            height: "24px",
+                            backgroundColor: "var(--fg-neutral)",
+                            borderRadius: "50%",
+                        } }) })] }));
+    };
+    const renderInfoCard = () => {
+        return (_jsxs("div", { style: {
+                display: "flex",
+                gap: "var(--spacing-400)",
+                alignItems: "flex-start",
+                width: "480px",
+                position: "relative",
+            }, children: [hasIcon && (_jsx("div", { style: {
+                        backgroundColor: "var(--bg-primary-tonal)",
+                        width: "32px",
+                        height: "32px",
+                        borderRadius: "var(--corner-radius-200)",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        padding: "8px",
+                    }, children: _jsx("div", { style: {
+                            width: "16px",
+                            height: "16px",
+                            backgroundColor: "var(--fg-primary-on-tonal)",
+                            borderRadius: "50%",
+                        } }) })), _jsxs("div", { style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        flex: "1 0 0",
+                        gap: "var(--spacing-300)",
+                        alignItems: "flex-start",
+                        maxWidth: "600px",
+                        minHeight: 0,
+                        minWidth: 0,
+                    }, children: [_jsx("p", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--body-regular-text-size)",
+                                lineHeight: "var(--body-regular-line-height)",
+                                fontWeight: "var(--font-weight-secondary-medium)",
+                                color: "var(--fg-neutral)",
+                                margin: 0,
+                            }, children: cardName }), _jsx("p", { style: {
+                                fontFamily: "var(--font-secondary)",
+                                fontSize: "var(--body-small-text-size)",
+                                lineHeight: "var(--body-small-line-height)",
+                                fontWeight: "var(--font-weight-secondary-regular)",
+                                color: "var(--fg-neutral-tertiary)",
+                                margin: 0,
+                                textAlign: "justify",
+                            }, children: cardDescription })] })] }));
+    };
+    const renderGenericCard = () => {
+        const isDefault = genericStatus === "default";
+        const isHighlighted = genericStatus === "highlighted";
+        const isSelected = genericStatus === "selected";
+        const cardStyles = {
+            display: "flex",
+            flexDirection: "column",
+            gap: "var(--spacing-400)",
+            alignItems: "flex-start",
+            overflow: "hidden",
+            padding: "var(--spacing-400)",
+            borderRadius: "var(--corner-radius-400)",
+            width: "400px",
+            position: "relative",
+            backgroundColor: isDefault ? "var(--bg-page-tertiary)" : "var(--bg-page-primary)",
+        };
+        if (showBorder) {
+            if (isSelected) {
+                cardStyles.border = "var(--border-width-25) solid var(--border-primary)";
+            }
+            else {
+                cardStyles.border = "var(--border-width-25) solid var(--border-strong-200)";
+            }
+        }
+        if (showShadow) {
+            if (isHighlighted) {
+                cardStyles.boxShadow =
+                    "0px 4px 6px -2px var(--shadow-subtle), 0px -4px 9px -6px var(--shadow-subtle)";
+            }
+            else {
+                cardStyles.boxShadow =
+                    "0px 1px 4px -2px var(--shadow-subtle), 0px 1px 4px 0px var(--shadow-subtle)";
+            }
+        }
+        const overlayGradient = isDefault
+            ? "var(--bg-page-secondary)"
+            : "var(--bg-page-primary)";
+        return (_jsxs("div", { style: cardStyles, children: [showBgPattern && (() => {
+                    const patternConfig = getPatternConfig(patternType);
+                    if (!patternConfig.imageUrl)
+                        return null;
+                    return (_jsx("div", { style: {
+                            position: "absolute",
+                            aspectRatio: "64/64",
+                            inset: showBorder ? "-1px" : "0",
+                            overflow: "hidden",
+                            zIndex: 1,
+                        }, children: _jsx("div", { style: {
+                                position: "absolute",
+                                inset: patternConfig.inset || "0",
+                                backgroundImage: `url("${patternConfig.imageUrl}")`,
+                                backgroundRepeat: "repeat",
+                                backgroundSize: patternConfig.backgroundSize,
+                                backgroundPosition: patternConfig.backgroundPosition || "top left",
+                            } }) }));
+                })(), showOverlay && (_jsx("div", { style: {
+                        position: "absolute",
+                        inset: showBorder ? "-1px" : "0",
+                        background: `linear-gradient(to bottom, rgba(255,255,255,0) 26.827%, ${overlayGradient} 86.384%)`,
+                        pointerEvents: "none",
+                        zIndex: 2,
+                    } })), slot || (_jsx("div", { style: {
+                        backgroundColor: "var(--bg-warning-tonal)",
+                        border: "var(--border-width-25) dashed var(--border-warning)",
+                        padding: "var(--spacing-200) 8px",
+                        borderRadius: "var(--corner-radius-100)",
+                        width: "100%",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        minHeight: "32px",
+                        position: "relative",
+                        zIndex: 3,
+                    }, children: _jsx("div", { style: { color: "var(--fg-warning-on-tonal)" }, children: _jsx(ArrowDownFallSlotIcon, { size: "xs" }) }) }))] }));
+    };
+    const renderCard = () => {
+        switch (cardType) {
+            case "product":
+                return renderProductCard();
+            case "experience":
+                return renderExperienceCard();
+            case "info":
+                return renderInfoCard();
+            case "generic":
+                return renderGenericCard();
+            default:
+                return null;
+        }
+    };
+    return (_jsx("div", { className: "ds-card-preview-container", children: _jsx("div", { className: "ds-card-preview-canvas", children: renderCard() }) }));
+}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,12 @@
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+    ariaLabel?: string;
+    label?: string;
+    showLabel?: boolean;
+}
+export declare function Checkbox({ checked, onChange, disabled, id, ariaLabel, label, showLabel, }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAQA,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAe,EACf,QAAQ,EACR,QAAgB,EAChB,EAAE,EACF,SAAS,EACT,KAAK,EACL,SAAiB,GAClB,EAAE,aAAa,2CAmGf"}

package/dist/components/Checkbox.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { CheckboxPreview } from "./CheckboxPreview";
+import { useThemeSafe } from "../providers/ThemeProvider";
+export function Checkbox({ checked = false, onChange, disabled = false, id, ariaLabel, label, showLabel = false, }) {
+    const themeContext = useThemeSafe();
+    const theme = themeContext?.theme;
+    const hue = themeContext?.hue;
+    const [status, setStatus] = useState("default");
+    const handleClick = useCallback(() => {
+        if (!disabled && onChange) {
+            onChange(!checked);
+        }
+    }, [checked, disabled, onChange]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            if (onChange) {
+                onChange(!checked);
+            }
+        }
+    }, [checked, disabled, onChange]);
+    const handleMouseEnter = useCallback(() => {
+        if (!disabled) {
+            setStatus("hovered");
+        }
+    }, [disabled]);
+    const handleMouseLeave = useCallback(() => {
+        if (!disabled) {
+            setStatus("default");
+        }
+    }, [disabled]);
+    const handleFocus = useCallback(() => {
+        if (!disabled) {
+            setStatus("focused");
+        }
+    }, [disabled]);
+    const handleBlur = useCallback(() => {
+        if (!disabled) {
+            setStatus("default");
+        }
+    }, [disabled]);
+    const handleMouseDown = useCallback(() => {
+        if (!disabled) {
+            setStatus("pressed");
+        }
+    }, [disabled]);
+    const handleMouseUp = useCallback(() => {
+        if (!disabled) {
+            setStatus("default");
+        }
+    }, [disabled]);
+    const currentStatus = disabled ? "disabled" : status;
+    return (_jsx("button", { type: "button", id: id, role: "checkbox", "aria-checked": checked, "aria-label": ariaLabel, "aria-disabled": disabled, disabled: disabled, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, style: {
+            border: "none",
+            background: "none",
+            padding: 0,
+            cursor: disabled ? "not-allowed" : "pointer",
+            outline: "none",
+        }, children: _jsx(CheckboxPreview, { checked: checked, status: currentStatus, label: label, showLabel: showLabel, theme: theme, hue: hue }) }));
+}