beacon-ui 3.1.8 → 3.2.0

package/CHANGELOG.md

@@ -5,6 +5,35 @@ 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.2.0] - 2025-01-02
+
+### 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
+- Menu component now supports render props for full customization:
+  - `renderSwitch` - Customize or replace the Switch component with your own implementation
+  - `renderToggleButton` - Customize or replace the toggle button (menu/close icon) with your own component
+  - `renderButton` - Customize or replace the menu action button with your own component
+- Menu component callback props for handling interactions:
+  - `onSwitchChange` - Callback when Switch value changes
+  - `onToggleButtonClick` - Callback when toggle button is clicked
+  - `onButtonClick` - Callback when menu action button is clicked
+- Exported render prop types: `SwitchRenderProps`, `ToggleButtonRenderProps`, `MenuButtonRenderProps`
+
+### Changed
+- Menu component now uses internal state management for Switch, allowing better control and customization
+- Render props are optional - if not provided, Menu uses default components (backward compatible)
+
 ## [3.1.8] - 2025-12-29
 
 ### Fixed

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/components/Menu.d.ts

@@ -7,6 +7,17 @@ export interface MenuItem {
     selected?: boolean;
     onClick?: (item: MenuItem) => void;
 }
+export interface SwitchRenderProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+}
+export interface ToggleButtonRenderProps {
+    isOpen: boolean;
+    onClick: () => void;
+}
+export interface MenuButtonRenderProps {
+    onClick: () => void;
+}
 export interface MenuProps extends ComponentPropsWithRef<"div"> {
     variant?: MenuVariant;
     showMenu?: boolean;
@@ -18,7 +29,13 @@ export interface MenuProps extends ComponentPropsWithRef<"div"> {
     avatarImageUrl?: string;
     selectedItemId?: string;
     onItemClick?: (item: MenuItem) => void;
+    renderSwitch?: (props: SwitchRenderProps) => ReactNode;
+    renderToggleButton?: (props: ToggleButtonRenderProps) => ReactNode;
+    renderButton?: (props: MenuButtonRenderProps) => ReactNode;
+    onSwitchChange?: (checked: boolean) => void;
+    onToggleButtonClick?: () => void;
+    onButtonClick?: () => void;
 }
-export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, selectedItemId, onItemClick, className, style, ref, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, selectedItemId, onItemClick, renderSwitch, renderToggleButton, renderButton, onSwitchChange, onToggleButtonClick, onButtonClick, className, style, ref, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Menu.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA2aX"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAoC,SAAS,EAAE,MAAM,OAAO,CAAC;AAMpG,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC;IACvD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IACnE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAC;IAC3D,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAieX"}

package/dist/components/Menu.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useCallback, useEffect } from "react";
 import { CloseIcon, MenuIcon, DownloadIcon } from "../icons";
 import { Switch } from "./Switch";
 import { useThemeSafe } from "../providers/ThemeProvider";
@@ -12,10 +12,31 @@ const DEFAULT_MENU_ITEMS = [
     { id: "4", label: "Menu Item #4" },
     { id: "5", label: "Menu Item #5" },
 ];
-export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, selectedItemId, onItemClick, className, style, ref, ...rest }) {
+export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, selectedItemId, onItemClick, renderSwitch, renderToggleButton, renderButton, onSwitchChange, onToggleButtonClick, onButtonClick, className, style, ref, ...rest }) {
     const themeContext = useThemeSafe();
     const theme = themeContext?.theme ?? "dark";
     const [hoveredItemId, setHoveredItemId] = useState(null);
+    const [switchChecked, setSwitchChecked] = useState(theme === "dark");
+    // Update switch checked state when theme changes
+    useEffect(() => {
+        setSwitchChecked(theme === "dark");
+    }, [theme]);
+    const handleSwitchChange = useCallback((checked) => {
+        setSwitchChecked(checked);
+        if (onSwitchChange) {
+            onSwitchChange(checked);
+        }
+    }, [onSwitchChange]);
+    const handleToggleButtonClick = useCallback(() => {
+        if (onToggleButtonClick) {
+            onToggleButtonClick();
+        }
+    }, [onToggleButtonClick]);
+    const handleButtonClick = useCallback(() => {
+        if (onButtonClick) {
+            onButtonClick();
+        }
+    }, [onButtonClick]);
     const containerStyles = useMemo(() => {
         const baseStyles = {
             display: "flex",
@@ -178,7 +199,7 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
         };
     }, []);
     if (variant === "close-menu") {
-        return (_jsx("div", { ref: ref, className: className, style: { ...containerStyles, ...style }, ...rest, children: _jsx("button", { style: iconButtonStyles, children: _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: _jsx(CloseIcon, { size: 32 }) }) }) }));
+        return (_jsx("div", { ref: ref, className: className, style: { ...containerStyles, ...style }, ...rest, children: renderToggleButton ? (renderToggleButton({ isOpen: true, onClick: handleToggleButtonClick })) : (_jsx("button", { style: iconButtonStyles, onClick: handleToggleButtonClick, children: _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: _jsx(CloseIcon, { size: 32 }) }) })) }));
     }
     const isDesktop = variant === "desktop";
     const isTabletOpen = variant === "tablet-open";
@@ -257,7 +278,10 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                                             fontWeight: "var(--font-weight-secondary-medium)",
                                             color: "var(--fg-neutral)",
                                             margin: 0,
-                                        }, children: headerSubtitle })] }))] }), _jsxs("div", { style: footerStyles, children: [showButton && (_jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] })), _jsx(Switch, { checked: theme === "dark", showIcons: true }), _jsx("button", { style: iconButtonStyles, children: _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: [(isTabletOpen || isMobileOpen) && _jsx(CloseIcon, { size: 32 }), (isTabletClosed || isMobileClosed) && _jsx(MenuIcon, { size: 32 })] }) })] })] })), showMenuItems && (_jsx("div", { style: {
+                                        }, children: headerSubtitle })] }))] }), _jsxs("div", { style: footerStyles, children: [showButton && (renderButton ? (renderButton({ onClick: handleButtonClick })) : (_jsxs("div", { style: buttonStyles, onClick: handleButtonClick, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }))), renderSwitch ? (renderSwitch({ checked: switchChecked, onChange: handleSwitchChange })) : (_jsx(Switch, { checked: switchChecked, onChange: handleSwitchChange, showIcons: true })), renderToggleButton ? (renderToggleButton({
+                                isOpen: isTabletOpen || isMobileOpen,
+                                onClick: handleToggleButtonClick
+                            })) : (_jsx("button", { style: iconButtonStyles, onClick: handleToggleButtonClick, children: _jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "32px", height: "32px" }, children: [(isTabletOpen || isMobileOpen) && _jsx(CloseIcon, { size: 32 }), (isTabletClosed || isMobileClosed) && _jsx(MenuIcon, { size: 32 })] }) }))] })] })), showMenuItems && (_jsx("div", { style: {
                     display: "flex",
                     flexDirection: "column",
                     gap: "var(--spacing-200)",
@@ -284,5 +308,5 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                     // Determine state for MenuItem component
                     const itemState = isSelected ? "Active" : isHovered ? "Hovered" : "Default";
                     return (_jsx(MenuItemComponent, { menuTitle: item.label, iconStart: true, iconStart1: item.icon || null, iconEnd: showChevrons, iconEnd1: null, state: itemState, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, item.id));
-                }) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(Switch, { checked: theme === "dark", showIcons: true }) })] }))] }));
+                }) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: renderButton ? (renderButton({ onClick: handleButtonClick })) : (_jsxs("div", { style: buttonStyles, onClick: handleButtonClick, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] })) })), _jsx("div", { style: footerStyles, children: renderSwitch ? (renderSwitch({ checked: switchChecked, onChange: handleSwitchChange })) : (_jsx(Switch, { checked: switchChecked, onChange: handleSwitchChange, showIcons: true })) })] }))] }));
 }

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.8",
+  "version": "3.2.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"
   ],