beacon-ui 3.1.9 → 3.3.0

package/CHANGELOG.md

@@ -5,6 +5,36 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.3.0] - 2025-01-02
+
+### Added
+- Typography implementation guide section in documentation with code examples and best practices
+- Comprehensive usage examples for typography classes with copy-to-clipboard functionality
+- Implementation patterns for combining typography classes with inline styles for color and spacing
+
+### Changed
+- Refactored all inline typography styles to use typography utility classes throughout documentation
+- Improved typography class usage consistency across all component examples
+- Updated build script to correctly determine font weight prefix based on fontWeight reference (not just fontFamily)
+- Typography classes now properly handle H3 (secondary-semibold) and H6 (secondary-medium) font weights
+
+### Fixed
+- Fixed H3 typography class to use `font-weight-secondary-semibold` instead of `font-weight-primary-semibold`
+- Fixed H6 typography class to use `font-weight-secondary-medium` instead of `font-weight-secondary-semibold`
+- Corrected font weight determination logic in token build script to check fontWeight reference directly
+
+## [3.2.0] - 2025-01-01
+
+### Changed
+- Simplified Card component usage examples for better developer experience
+- Removed unnecessary wrapper divs from Card examples - Card's built-in flex layout handles spacing automatically
+- Improved code examples to be cleaner and more minimal, following design system best practices
+- Card examples now demonstrate cleaner, more maintainable code patterns
+
+### Fixed
+- Fixed missing line-height in typography previews across Card component examples
+- Fixed image constraints in Product Card Pattern example - removed fixed width/height props for better flexibility
+
 ## [3.1.9] - 2025-12-29
 
 ### Added

package/README.md

@@ -491,6 +491,31 @@ Components adapt seamlessly across breakpoints:
 - Tablet (max-width: 1024px)
 - Mobile (max-width: 768px)
 
+## Assets (Images)
+
+The package includes static assets (images) for patterns, avatars, and previews. These are located in `assets/` directory.
+
+### Pattern Images (Card Component)
+
+The Card component uses background pattern images. To use them:
+
+1. Copy pattern images from `node_modules/beacon-ui/assets/patterns/` to your `public/images/patterns/` directory
+2. The Card component will automatically reference them via `/images/patterns/` paths
+
+### Automatic Setup
+
+Add a postinstall script to your `package.json`:
+
+```json
+{
+  "scripts": {
+    "postinstall": "mkdir -p public/images/patterns public/images/avatars public/images/preview && cp -r node_modules/beacon-ui/assets/patterns/* public/images/patterns/ && cp -r node_modules/beacon-ui/assets/avatars/* public/images/avatars/ && cp -r node_modules/beacon-ui/assets/preview/* public/images/preview/"
+  }
+}
+```
+
+See `assets/README.md` for more details.
+
 ## Troubleshooting
 
 ### Components not styling correctly

package/assets/README.md

@@ -0,0 +1,24 @@
+# Assets
+
+This directory contains static assets (images) used by the Beacon UI components.
+
+## Structure
+
+- **patterns/** - Background pattern images for Card component
+- **avatars/** - Avatar placeholder images
+- **preview/** - Preview/demo images for documentation examples
+
+## Usage
+
+These assets are part of the `beacon-ui` package. For Next.js applications:
+
+1. The assets are automatically copied to `public/images/` during build via the `copy:assets` script
+2. Components reference them via `/images/patterns/`, `/images/avatars/`, `/images/preview/` paths
+3. For non-Next.js applications, copy these assets to your public/assets directory manually
+
+## Package Distribution
+
+When the package is published, these assets are included in the npm package under `node_modules/beacon-ui/assets/`.
+
+Consuming applications should copy these assets to their public directory. You can use the provided postinstall script or copy them manually.
+

package/assets/avatars/README.md

@@ -0,0 +1,42 @@
+# Avatar Images
+
+This directory contains avatar images used in the design system.
+
+## Adding New Avatar Images
+
+1. Place your image file in this directory (supported formats: JPG, PNG, WebP)
+2. Update `src/utils/imagePaths.ts` to add your new image:
+
+```typescript
+export const IMAGE_PATHS = {
+  avatars: {
+    default: "/images/avatars/avatar-female.png",
+    user1: "/images/avatars/user1.jpg", // Add your new image here
+    user2: "/images/avatars/user2.jpg",
+  },
+};
+```
+
+3. Use the image in your code:
+
+```typescript
+import { getAvatarImage } from "@/utils/imagePaths";
+
+// Use the default image
+const imageUrl = getAvatarImage("default");
+
+// Or use a specific image
+const imageUrl = getAvatarImage("user1");
+```
+
+## Image Guidelines
+
+- Recommended size: 400x400px or larger (square aspect ratio)
+- Formats: JPG, PNG, or WebP
+- Keep file sizes reasonable for web performance
+- Use consistent naming conventions (e.g., `avatar-default.jpg`, `user1.jpg`)
+
+## Current Images
+
+- `avatar-default.jpg` - Default avatar image (add this file)
+

package/assets/patterns/README.md

@@ -0,0 +1,40 @@
+# Pattern Images
+
+This directory contains background pattern images used by the Card component.
+
+## Usage
+
+These images are part of the `beacon-ui` package and are stored in `packages/beacon-ui/assets/patterns/`. 
+
+For the documentation site, they are automatically copied to `public/images/patterns/` during build via the `copy:assets` script.
+
+For consuming applications:
+
+1. Copy the pattern images from `node_modules/beacon-ui/assets/patterns/` to your application's `public/images/patterns/` directory
+2. The Card component will automatically reference them via `/images/patterns/` paths
+
+## Pattern Files
+
+- `Cube_pt.png` - Cubes pattern
+- `Maths_pt.png` - Mathematics pattern
+- `Dots_pt.png` - Dots pattern
+- `Diagonal_pt.png` - Diagonal lines pattern
+- `Smudge_pt.png` - Charcoal smudge pattern
+- `Rough_Paper_pt.png` - Rough paper pattern
+- `Denim_pt.png` - Denim pattern
+- `Squares_pt.png` - Squares pattern
+- `Mosaic_pt.png` - Mosaic pattern
+- `Cotton_pt.png` - Cotton pattern
+
+## Automatic Setup (Optional)
+
+You can add a postinstall script to your `package.json` to automatically copy these images:
+
+```json
+{
+  "scripts": {
+    "postinstall": "mkdir -p public/images/patterns && cp -r node_modules/beacon-ui/assets/patterns/* public/images/patterns/"
+  }
+}
+```
+

package/dist/components/Card.d.ts

@@ -1,37 +1,19 @@
 import { ComponentPropsWithRef } from "react";
 import { type PatternType } from "../utils/patternPaths";
-export type CardType = "product" | "experience" | "info" | "generic";
-export type ProductCardSize = "full" | "half";
-export type ProductCardStatus = "default" | "highlighted";
-export type ExperienceCardType = "default" | "skills" | "contacts";
-export type GenericCardStatus = "default" | "highlighted" | "selected";
+import type { CornerRadiusStep } from "./Button";
+export type CardStatus = "default" | "highlighted" | "selected";
+export type CardShadow = "0" | "50" | "100" | "200" | "300" | "400" | "500";
 export interface CardProps extends Omit<ComponentPropsWithRef<"div">, "slot"> {
-    cardType: CardType;
-    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;
+    padding?: number;
+    height?: string;
+    status?: CardStatus;
+    shadow?: CardShadow;
+    cornerRadius?: CornerRadiusStep;
     showBgPattern?: boolean;
     patternType?: PatternType;
     showOverlay?: boolean;
-    showShadow?: boolean;
     showBorder?: boolean;
-    slot?: React.ReactNode;
+    children?: React.ReactNode;
 }
-export declare function Card({ cardType, 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, className, style, ref, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ padding, height, status, shadow, cornerRadius, showBgPattern, patternType, showOverlay, showBorder, children, className, style, ref, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAE3E,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAGrE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAGnE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3E,QAAQ,EAAE,QAAQ,CAAC;IAEnB,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,EAER,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,EACJ,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAmyBX"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,UAAU,CAAC;AAChE,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAoBD,wBAAgB,IAAI,CAAC,EACnB,OAAa,EACb,MAAM,EACN,MAAkB,EAClB,MAAM,EACN,YAAgB,EAChB,aAAqB,EACrB,WAAqB,EACrB,WAAmB,EACnB,UAAiB,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA0GX"}

package/dist/components/Card.js

@@ -1,519 +1,115 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useThemeSafe } from "../providers/ThemeProvider";
-import { RightArrowIcon, ArrowDownFallSlotIcon } from "../icons";
+import { ArrowDownFallSlotIcon } from "../icons";
 import { getPatternConfig } from "../utils/patternPaths";
-export function Card({ cardType, 
-// 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, className, style, ref, ...rest }) {
-    useThemeSafe(); // Ensure theme context is available
-    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 CORNER_RADIUS_MAP = {
+    0: "var(--corner-radius-none)",
+    1: "var(--corner-radius-100)",
+    2: "var(--corner-radius-200)",
+    3: "var(--corner-radius-300)",
+    4: "var(--corner-radius-400)",
+    5: "var(--corner-radius-full)",
+};
+function getSpacingToken(padding) {
+    if (padding === 0) {
+        return "var(--spacing-none)";
+    }
+    return `var(--spacing-${padding})`;
+}
+function getShadowToken(shadow) {
+    if (!shadow)
+        return undefined;
+    return `var(--drop-shadow-${shadow})`;
+}
+function getHeightValue(height) {
+    if (height === undefined)
+        return undefined;
+    // Allow strings like "200px", "100%", "auto", "fill", etc.
+    return height;
+}
+export function Card({ padding = 400, height, status = "default", shadow, cornerRadius = 4, showBgPattern = false, patternType = "cubes", showOverlay = false, showBorder = true, children, className, style, ref, ...rest }) {
+    useThemeSafe();
+    const isDefault = status === "default";
+    const isHighlighted = status === "highlighted";
+    const isSelected = status === "selected";
+    const heightValue = getHeightValue(height);
+    // Only apply overflow: auto for fixed heights (not "auto" or undefined)
+    const hasFixedHeight = heightValue && heightValue !== "auto";
+    const cardStyles = {
+        display: "flex",
+        flexDirection: "column",
+        gap: "var(--spacing-400)",
+        alignItems: "flex-start",
+        overflow: hasFixedHeight ? "auto" : "hidden",
+        padding: getSpacingToken(padding),
+        borderRadius: CORNER_RADIUS_MAP[cornerRadius],
+        position: "relative",
+        backgroundColor: isDefault ? "var(--bg-page-tertiary)" : "var(--bg-page-primary)",
+        ...(heightValue && { height: heightValue }),
+        ...(shadow && { boxShadow: getShadowToken(shadow) }),
+        ...style,
     };
-    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 (showBorder) {
+        if (isSelected) {
+            cardStyles.border = "var(--border-width-25) solid var(--border-primary)";
         }
-        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 })] }));
+        else {
+            cardStyles.border = "var(--border-width-25) solid var(--border-strong-200)";
         }
-        // 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)";
-            }
+    }
+    const overlayGradient = isDefault
+        ? "var(--bg-page-secondary)"
+        : "var(--bg-page-primary)";
+    // Build background layers using CSS multiple backgrounds
+    // CSS backgrounds stack: first listed = top layer, last listed = bottom layer
+    // We want: overlay (middle) first, pattern (bottom) last
+    // Content will naturally be on top since it's not a background
+    const backgroundLayers = [];
+    if (showOverlay) {
+        backgroundLayers.push(`linear-gradient(to bottom, rgba(255,255,255,0) 26.827%, ${overlayGradient} 86.384%)`);
+    }
+    if (showBgPattern) {
+        const patternConfig = getPatternConfig(patternType);
+        if (patternConfig.imageUrl) {
+            backgroundLayers.push(`url("${patternConfig.imageUrl}")`);
         }
-        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)";
-            }
+    }
+    // Apply background layers to card styles
+    if (backgroundLayers.length > 0) {
+        cardStyles.backgroundImage = backgroundLayers.join(", ");
+        if (showBgPattern && showOverlay) {
+            const patternConfig = getPatternConfig(patternType);
+            // First value applies to first background (overlay), second to pattern
+            cardStyles.backgroundRepeat = "no-repeat, repeat";
+            cardStyles.backgroundSize = patternConfig.backgroundSize
+                ? `100% 100%, ${patternConfig.backgroundSize}`
+                : "100% 100%, auto";
+            cardStyles.backgroundPosition = patternConfig.backgroundPosition
+                ? `center, ${patternConfig.backgroundPosition}`
+                : "center, top left";
         }
-        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;
+        else if (showBgPattern) {
+            const patternConfig = getPatternConfig(patternType);
+            cardStyles.backgroundRepeat = "repeat";
+            cardStyles.backgroundSize = patternConfig.backgroundSize || "auto";
+            cardStyles.backgroundPosition = patternConfig.backgroundPosition || "top left";
         }
-    };
-    return (_jsx("div", { ref: ref, className: className, style: style, ...rest, children: renderCard() }));
+        else if (showOverlay) {
+            cardStyles.backgroundRepeat = "no-repeat";
+            cardStyles.backgroundSize = "100% 100%";
+            cardStyles.backgroundPosition = "center";
+        }
+    }
+    return (_jsx("div", { ref: ref, className: className, style: cardStyles, ...rest, children: children || (_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",
+            }, children: _jsx("div", { style: { color: "var(--fg-warning-on-tonal)" }, children: _jsx(ArrowDownFallSlotIcon, { size: "xs" }) }) })) }));
 }

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { Menu, type MenuItem as MenuItemData } from "./components/Menu";
 export { MenuItem, type MenuItemProps, type MenuItemState } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
 export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState, ButtonColor } from "./components/Button";
-export type { CardProps, CardType, ProductCardSize, ProductCardStatus, ExperienceCardType, GenericCardStatus } from "./components/Card";
+export type { CardProps, CardStatus, CardShadow } from "./components/Card";
 export type { CheckboxProps, CheckboxStatus } from "./components/Checkbox";
 export type { SwitchProps, SwitchStatus } from "./components/Switch";
 export type { InputProps, InputSize, InputStatus } from "./components/Input";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxI,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}

package/dist/utils/patternPaths.d.ts

@@ -12,8 +12,8 @@ export interface PatternConfig {
 }
 /**
  * Pattern configurations with image URLs and tiling settings
- * Note: These URLs are from Figma and expire after 7 days.
- * For production, download these images and store them in public/images/patterns/
+ * Images are stored in the package assets and copied to public/images/patterns/ during build
+ * They are referenced via /images/patterns/ paths in the consuming application
  */
 export declare const PATTERN_CONFIGS: Record<PatternType, PatternConfig>;
 /**

package/dist/utils/patternPaths.js

@@ -5,8 +5,8 @@
  */
 /**
  * Pattern configurations with image URLs and tiling settings
- * Note: These URLs are from Figma and expire after 7 days.
- * For production, download these images and store them in public/images/patterns/
+ * Images are stored in the package assets and copied to public/images/patterns/ during build
+ * They are referenced via /images/patterns/ paths in the consuming application
  */
 export const PATTERN_CONFIGS = {
     default: {
@@ -14,60 +14,60 @@ export const PATTERN_CONFIGS = {
         backgroundSize: "128px 128px",
     },
     cubes: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/3594165a-11de-4be4-818c-90c23daf0172",
+        imageUrl: "/images/patterns/Cube_pt.png",
         backgroundSize: "33.5px 50px",
         backgroundPosition: "top left",
     },
     mathematics: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/db1da532-dc86-42e2-8edb-cebd1f4583d9",
+        imageUrl: "/images/patterns/Maths_pt.png",
         backgroundSize: "64px 128px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     dots: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/c320aab8-9413-4f04-b5d9-5dab473bf72c",
+        imageUrl: "/images/patterns/Dots_pt.png",
         backgroundSize: "186px 186px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     diagonal: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/63f95452-d091-48c8-9315-17b2db88811f",
+        imageUrl: "/images/patterns/Diagonal_pt.png",
         backgroundSize: "7px 7px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     smudge: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/953c58bc-519e-453a-801e-aa7771123bf0",
+        imageUrl: "/images/patterns/Smudge_pt.png",
         backgroundSize: "200px 200px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     paper: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/6cac21b4-e9cb-4b07-9655-9da328879b35",
+        imageUrl: "/images/patterns/Rough_Paper_pt.png",
         backgroundSize: "158px 158px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     denim: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/df4b639a-4aa8-47b3-a356-1704c5d0e8ca",
+        imageUrl: "/images/patterns/Denim_pt.png",
         backgroundSize: "210px 163px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     squares: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/7d44ab02-5237-4466-9957-80d02eac70a8",
+        imageUrl: "/images/patterns/Squares_pt.png",
         backgroundSize: "32px 32px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     mosaic: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/d78c45bb-6e59-4444-a78b-740387c8d790",
+        imageUrl: "/images/patterns/Mosaic_pt.png",
         backgroundSize: "355px 288px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",
     },
     cotton: {
-        imageUrl: "https://www.figma.com/api/mcp/asset/9010e582-f104-4247-9a42-450d3c28fa71",
+        imageUrl: "/images/patterns/Cotton_pt.png",
         backgroundSize: "157.5px 157.5px",
         backgroundPosition: "top left",
         inset: "0 -322px -322px 0",

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "beacon-ui",
-  "version": "3.1.9",
+  "version": "3.3.0",
   "description": "Beacon Design System - Components and tokens",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "tokens",
+    "assets",
     "README.md",
     "CHANGELOG.md"
   ],

package/tokens/generated/index.css

@@ -434,12 +434,6 @@
 /* Responsive tokens */
 :root {
   --device-width: 1440px;
-  --adaptive-set-d96-t80-m32: 96px;
-  --adaptive-set-d96-t48-m32: 96px;
-  --adaptive-set-d48-t32-m24: 48px;
-  --adaptive-set-d64-t80-m32: 64px;
-  --adaptive-set-d80-t64-m48: 80px;
-  --adaptive-set-d32-t80-m32: 32px;
   --heading-h1-text-size: 64px;
   --fonts-heading-h1-text-size: 64px;
   --heading-h1-paragraph-spacing: 72px;
@@ -506,18 +500,18 @@
   --fonts-body-medium-paragraph-spacing: 28px;
   --body-medium-line-height: 28px;
   --fonts-body-medium-line-height: 28px;
+  --adaptive-set-d96-t80-m32: 96px;
+  --adaptive-set-d96-t48-m32: 96px;
+  --adaptive-set-d48-t32-m24: 48px;
+  --adaptive-set-d64-t80-m32: 64px;
+  --adaptive-set-d80-t64-m48: 80px;
+  --adaptive-set-d32-t80-m32: 32px;
   --menu-width: 224px;
 }
 
 @media (max-width: 1024px) {
   :root {
     --device-width: 834px;
-    --adaptive-set-d96-t80-m32: 80px;
-    --adaptive-set-d96-t48-m32: 48px;
-    --adaptive-set-d48-t32-m24: 32px;
-    --adaptive-set-d64-t80-m32: 80px;
-    --adaptive-set-d80-t64-m48: 64px;
-    --adaptive-set-d32-t80-m32: 80px;
     --heading-h1-text-size: 60px;
     --fonts-heading-h1-text-size: 60px;
     --heading-h1-paragraph-spacing: 64px;
@@ -584,6 +578,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 80px;
+    --adaptive-set-d96-t48-m32: 48px;
+    --adaptive-set-d48-t32-m24: 32px;
+    --adaptive-set-d64-t80-m32: 80px;
+    --adaptive-set-d80-t64-m48: 64px;
+    --adaptive-set-d32-t80-m32: 80px;
     --menu-width: var(--device-width);
   }
 }
@@ -591,12 +591,6 @@
 @media (max-width: 768px) {
   :root {
     --device-width: 430px;
-    --adaptive-set-d96-t80-m32: 32px;
-    --adaptive-set-d96-t48-m32: 32px;
-    --adaptive-set-d48-t32-m24: 24px;
-    --adaptive-set-d64-t80-m32: 32px;
-    --adaptive-set-d80-t64-m48: 48px;
-    --adaptive-set-d32-t80-m32: 32px;
     --heading-h1-text-size: 48px;
     --fonts-heading-h1-text-size: 48px;
     --heading-h1-paragraph-spacing: 56px;
@@ -663,6 +657,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 32px;
+    --adaptive-set-d96-t48-m32: 32px;
+    --adaptive-set-d48-t32-m24: 24px;
+    --adaptive-set-d64-t80-m32: 32px;
+    --adaptive-set-d80-t64-m48: 48px;
+    --adaptive-set-d32-t80-m32: 32px;
     --menu-width: var(--device-width);
   }
 }
@@ -728,7 +728,7 @@
 }
 .text-heading-h3 {
   font-family: var(--font-primary);
-  font-weight: var(--font-weight-primary-semibold);
+  font-weight: var(--font-weight-secondary-semibold);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h3-text-size);
   line-height: var(--fonts-heading-h3-line-height);
@@ -749,7 +749,7 @@
 }
 .text-heading-h6 {
   font-family: var(--font-secondary);
-  font-weight: var(--font-weight-secondary-semibold);
+  font-weight: var(--font-weight-secondary-medium);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h6-text-size);
   line-height: var(--fonts-heading-h6-line-height);

package/tokens/generated/responsive.css

@@ -1,12 +1,6 @@
 /* Responsive tokens */
 :root {
   --device-width: 1440px;
-  --adaptive-set-d96-t80-m32: 96px;
-  --adaptive-set-d96-t48-m32: 96px;
-  --adaptive-set-d48-t32-m24: 48px;
-  --adaptive-set-d64-t80-m32: 64px;
-  --adaptive-set-d80-t64-m48: 80px;
-  --adaptive-set-d32-t80-m32: 32px;
   --heading-h1-text-size: 64px;
   --fonts-heading-h1-text-size: 64px;
   --heading-h1-paragraph-spacing: 72px;
@@ -73,18 +67,18 @@
   --fonts-body-medium-paragraph-spacing: 28px;
   --body-medium-line-height: 28px;
   --fonts-body-medium-line-height: 28px;
+  --adaptive-set-d96-t80-m32: 96px;
+  --adaptive-set-d96-t48-m32: 96px;
+  --adaptive-set-d48-t32-m24: 48px;
+  --adaptive-set-d64-t80-m32: 64px;
+  --adaptive-set-d80-t64-m48: 80px;
+  --adaptive-set-d32-t80-m32: 32px;
   --menu-width: 224px;
 }
 
 @media (max-width: 1024px) {
   :root {
     --device-width: 834px;
-    --adaptive-set-d96-t80-m32: 80px;
-    --adaptive-set-d96-t48-m32: 48px;
-    --adaptive-set-d48-t32-m24: 32px;
-    --adaptive-set-d64-t80-m32: 80px;
-    --adaptive-set-d80-t64-m48: 64px;
-    --adaptive-set-d32-t80-m32: 80px;
     --heading-h1-text-size: 60px;
     --fonts-heading-h1-text-size: 60px;
     --heading-h1-paragraph-spacing: 64px;
@@ -151,6 +145,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 80px;
+    --adaptive-set-d96-t48-m32: 48px;
+    --adaptive-set-d48-t32-m24: 32px;
+    --adaptive-set-d64-t80-m32: 80px;
+    --adaptive-set-d80-t64-m48: 64px;
+    --adaptive-set-d32-t80-m32: 80px;
     --menu-width: var(--device-width);
   }
 }
@@ -158,12 +158,6 @@
 @media (max-width: 768px) {
   :root {
     --device-width: 430px;
-    --adaptive-set-d96-t80-m32: 32px;
-    --adaptive-set-d96-t48-m32: 32px;
-    --adaptive-set-d48-t32-m24: 24px;
-    --adaptive-set-d64-t80-m32: 32px;
-    --adaptive-set-d80-t64-m48: 48px;
-    --adaptive-set-d32-t80-m32: 32px;
     --heading-h1-text-size: 48px;
     --fonts-heading-h1-text-size: 48px;
     --heading-h1-paragraph-spacing: 56px;
@@ -230,6 +224,12 @@
     --fonts-body-medium-paragraph-spacing: 28px;
     --body-medium-line-height: 28px;
     --fonts-body-medium-line-height: 28px;
+    --adaptive-set-d96-t80-m32: 32px;
+    --adaptive-set-d96-t48-m32: 32px;
+    --adaptive-set-d48-t32-m24: 24px;
+    --adaptive-set-d64-t80-m32: 32px;
+    --adaptive-set-d80-t64-m48: 48px;
+    --adaptive-set-d32-t80-m32: 32px;
     --menu-width: var(--device-width);
   }
 }

package/tokens/generated/typography.css

@@ -48,7 +48,7 @@
 }
 .text-heading-h3 {
   font-family: var(--font-primary);
-  font-weight: var(--font-weight-primary-semibold);
+  font-weight: var(--font-weight-secondary-semibold);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h3-text-size);
   line-height: var(--fonts-heading-h3-line-height);
@@ -69,7 +69,7 @@
 }
 .text-heading-h6 {
   font-family: var(--font-secondary);
-  font-weight: var(--font-weight-secondary-semibold);
+  font-weight: var(--font-weight-secondary-medium);
   text-transform: capitalize;
   font-size: var(--fonts-heading-h6-text-size);
   line-height: var(--fonts-heading-h6-line-height);