@wireapp/react-ui-kit 9.69.4 → 9.69.5

package/lib/Surface/Accordion/Accordion.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const AccordionItem_1 = require("./AccordionItem/AccordionItem");
+const AccordionItem_styles_1 = require("./AccordionItem/AccordionItem.styles");
+/**
+ * A vertically stacked set of interactive headings that each reveal an associated section of content.
+ * The Accordion component can be used to create expandable/collapsible sections of content.
+ *
+ * @example
+ * Single open accordion (default)
+ * ```tsx
+ * <Accordion>
+ *   <Accordion.Item title="What is Wire?" value="item-1">
+ *     <Text>Wire is a secure messaging platform...</Text>
+ *   </Accordion.Item>
+ *   <Accordion.Item title="Is Wire secure?" value="item-2">
+ *     <Text>Yes, Wire uses end-to-end encryption...</Text>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ *
+ * @example
+ * Multiple open accordion:
+ * ```tsx
+ * <Accordion type="multiple">
+ *   <Accordion.Item title="What is Wire?" value="item-1">
+ *     <Text>Wire is a secure messaging platform...</Text>
+ *   </Accordion.Item>
+ *   <Accordion.Item title="Is Wire secure?" value="item-2">
+ *     <Text>Yes, Wire uses end-to-end encryption...</Text>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+exports.Accordion = (0, react_1.forwardRef)((props, ref) => {
+    if (props.type === 'multiple') {
+        return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: "multiple", defaultValue: props.defaultValue, value: props.value, onValueChange: props.onValueChange, ref: ref, css: AccordionItem_styles_1.wrapperStyles, children: props.children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: "single", defaultValue: props.defaultValue, value: props.value, onValueChange: props.onValueChange, collapsible: true, ref: ref, css: AccordionItem_styles_1.wrapperStyles, ...props, children: props.children }));
+});
+exports.Accordion.displayName = 'Accordion';
+exports.Accordion.Item = AccordionItem_1.AccordionItem;

package/lib/Surface/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from './Accordion';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const SingleOpen: Story;
+export declare const MultipleOpen: Story;
+export declare const WithDefaultOpen: Story;
+export declare const TooLongTitle: Story;
+//# sourceMappingURL=Accordion.stories.d.ts.map

package/lib/Surface/Accordion/Accordion.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/Surface/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAKtC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAahC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAExC,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuB7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC"}

package/lib/Surface/Accordion/Accordion.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooLongTitle = exports.WithDefaultOpen = exports.MultipleOpen = exports.SingleOpen = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const Accordion_1 = require("./Accordion");
+const colors_v2_1 = require("../../Identity/colors-v2/colors-v2");
+const Typography_1 = require("../../Typography");
+const meta = {
+    component: Accordion_1.Accordion,
+    title: 'Surface/Accordion',
+    parameters: {
+        layout: 'centered',
+    },
+    decorators: [
+        Story => ((0, jsx_runtime_1.jsx)("div", { style: { width: '500px', margin: '0 auto', backgroundColor: 'white', padding: '20px' }, children: (0, jsx_runtime_1.jsx)(Story, {}) })),
+    ],
+};
+exports.default = meta;
+exports.SingleOpen = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Accordion_1.Accordion, { children: [(0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "What is Wire?", value: "item-1", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Wire is a secure messaging and collaboration platform that helps teams communicate effectively while maintaining the highest standards of security and privacy." }) }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Is Wire secure?", value: "item-2", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Yes, Wire uses end-to-end encryption for all messages, calls, and files. This means that only the participants in a conversation can read the messages." }) }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Can I use Wire on multiple devices?", value: "item-3", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Yes, Wire is available on multiple platforms including desktop (Windows, macOS, Linux), mobile (iOS, Android), and web browsers." }) })] })),
+};
+exports.MultipleOpen = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Accordion_1.Accordion, { type: "multiple", children: [(0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "What is Wire?", value: "item-1", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Wire is a secure messaging and collaboration platform that helps teams communicate effectively while maintaining the highest standards of security and privacy." }) }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Is Wire secure?", value: "item-2", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Yes, Wire uses end-to-end encryption for all messages, calls, and files. This means that only the participants in a conversation can read the messages." }) }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Can I use Wire on multiple devices?", value: "item-3", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Yes, Wire is available on multiple platforms including desktop (Windows, macOS, Linux), mobile (iOS, Android), and web browsers." }) })] })),
+};
+exports.WithDefaultOpen = {
+    render: () => ((0, jsx_runtime_1.jsxs)(Accordion_1.Accordion, { defaultValue: "item-2", children: [(0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "What is Wire?", value: "item-1", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Wire is a secure messaging and collaboration platform that helps teams communicate effectively while maintaining the highest standards of security and privacy." }) }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Is Wire secure?", value: "item-2", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Yes, Wire uses end-to-end encryption for all messages, calls, and files. This means that only the participants in a conversation can read the messages." }) }), (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Can I use Wire on multiple devices?", value: "item-3", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Yes, Wire is available on multiple platforms including desktop (Windows, macOS, Linux), mobile (iOS, Android), and web browsers." }) })] })),
+};
+exports.TooLongTitle = {
+    render: () => ((0, jsx_runtime_1.jsx)(Accordion_1.Accordion, { children: (0, jsx_runtime_1.jsx)(Accordion_1.Accordion.Item, { title: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", value: "item-1", children: (0, jsx_runtime_1.jsx)(Typography_1.Text, { size: 12, color: colors_v2_1.COLOR_V2.GRAY_80, children: "Wire is a secure messaging and collaboration platform that helps teams communicate effectively while maintaining the highest standards of security and privacy." }) }) })),
+};

package/lib/Surface/Accordion/AccordionItem/AccordionItem.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface AccordionItemProps {
+    title: string;
+    children: ReactNode;
+    value: string;
+}
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=AccordionItem.d.ts.map

package/lib/Surface/Accordion/AccordionItem/AccordionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.d.ts","sourceRoot":"","sources":["../../../../src/Surface/Accordion/AccordionItem/AccordionItem.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAyB,SAAS,EAAC,MAAM,OAAO,CAAC;AAexD,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,+GAYzB,CAAC"}

package/lib/Surface/Accordion/AccordionItem/AccordionItem.js

@@ -0,0 +1,51 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionItem = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/*
+ * Wire
+ * Copyright (C) 2025 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const react_1 = require("react");
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const AccordionItem_styles_1 = require("./AccordionItem.styles");
+const Icon_1 = require("../../../DataDisplay/Icon");
+exports.AccordionItem = (0, react_1.forwardRef)(({ title, children, value }, ref) => ((0, jsx_runtime_1.jsxs)(AccordionPrimitive.Item, { value: value, ref: ref, css: AccordionItem_styles_1.itemStyles, children: [(0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { css: AccordionItem_styles_1.triggerStyles, children: [(0, jsx_runtime_1.jsx)("span", { css: AccordionItem_styles_1.triggerTextStyles, children: title }), (0, jsx_runtime_1.jsx)(Icon_1.ChevronDownIcon, { css: AccordionItem_styles_1.chevronStyles })] }), (0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { css: AccordionItem_styles_1.contentStyles, children: (0, jsx_runtime_1.jsx)("div", { css: AccordionItem_styles_1.contentTextStyles, children: children }) })] })));
+exports.AccordionItem.displayName = 'AccordionItem';

package/lib/Surface/Accordion/AccordionItem/AccordionItem.styles.d.ts

@@ -0,0 +1,9 @@
+import { CSSObject } from '@emotion/react';
+export declare const wrapperStyles: CSSObject;
+export declare const itemStyles: CSSObject;
+export declare const triggerStyles: CSSObject;
+export declare const triggerTextStyles: CSSObject;
+export declare const contentStyles: CSSObject;
+export declare const contentTextStyles: CSSObject;
+export declare const chevronStyles: CSSObject;
+//# sourceMappingURL=AccordionItem.styles.d.ts.map

package/lib/Surface/Accordion/AccordionItem/AccordionItem.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionItem.styles.d.ts","sourceRoot":"","sources":["../../../../src/Surface/Accordion/AccordionItem/AccordionItem.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAY,MAAM,gBAAgB,CAAC;AA0BpD,eAAO,MAAM,aAAa,EAAE,SAG3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAMxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAW3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAI/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAG/B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC"}

package/lib/Surface/Accordion/AccordionItem/AccordionItem.styles.js

@@ -0,0 +1,92 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chevronStyles = exports.contentTextStyles = exports.contentStyles = exports.triggerTextStyles = exports.triggerStyles = exports.itemStyles = exports.wrapperStyles = void 0;
+const react_1 = require("@emotion/react");
+const colors_v2_1 = require("../../../Identity/colors-v2/colors-v2");
+const util_1 = require("../../../utils/util");
+const ANIMATION_TIMING = '300ms';
+const ANIMATION_EASING = 'cubic-bezier(0.87, 0, 0.13, 1)';
+const slideDown = (0, react_1.keyframes) `
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+`;
+const slideUp = (0, react_1.keyframes) `
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+`;
+exports.wrapperStyles = {
+    width: '100%',
+    overflow: 'hidden',
+};
+exports.itemStyles = {
+    overflow: 'hidden',
+    borderBottom: `1px solid var(--text-input-border)`,
+    '&:not(:last-child)': {
+        marginBottom: '8px',
+    },
+};
+exports.triggerStyles = {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    background: 'none',
+    padding: '0',
+    border: 'none',
+    cursor: 'pointer',
+    transition: 'background-color 0.2s ease',
+    height: '40px',
+};
+exports.triggerTextStyles = {
+    ...(0, util_1.ellipsis)(),
+    fontSize: '16px',
+    marginRight: '16px',
+};
+exports.contentStyles = {
+    overflow: 'hidden',
+    '&[data-state="open"]': {
+        animation: `${slideDown} ${ANIMATION_TIMING} ${ANIMATION_EASING}`,
+    },
+    '&[data-state="closed"]': {
+        animation: `${slideUp} ${ANIMATION_TIMING} ${ANIMATION_EASING}`,
+    },
+};
+exports.contentTextStyles = {
+    width: '100%',
+    padding: '16px 0',
+};
+exports.chevronStyles = {
+    width: '16px',
+    height: '16px',
+    color: colors_v2_1.COLOR_V2.GRAY_70,
+    transition: `transform ${ANIMATION_TIMING} ${ANIMATION_EASING}`,
+    '[data-state="open"] &': {
+        transform: 'rotate(180deg)',
+    },
+};

package/lib/Surface/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/lib/Surface/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Surface/Accordion/index.ts"],"names":[],"mappings":"AAmBA,cAAc,aAAa,CAAC"}

package/lib/Surface/Accordion/index.js

@@ -0,0 +1,35 @@
+"use strict";
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Accordion"), exports);

package/lib/Surface/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { CSSObject } from '@emotion/react';
+/**
+ * A dropdown menu component that provides a customizable and accessible dropdown interface.
+ * Built on top of accessible primitives, it offers a flexible way to display
+ * contextual actions and navigation options.
+ *
+ * Disclaimer: Custom trigger components (with asChild) must accept id, aria-haspopup, aria-expanded, and data-state props.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger>Open Menu</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ * With custom trigger:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ */
+export declare const DropdownMenu: {
+    ({ children }: {
+        children: ReactNode;
+    }): import("@emotion/react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, asChild, cssObj, }: {
+        children: ReactNode;
+        asChild?: boolean;
+        cssObj?: CSSObject;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Content: ({ children }: {
+        children: ReactNode;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    Item: ({ children, onClick }: {
+        children: ReactNode;
+        onClick: () => void;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/lib/Surface/DropdownMenu/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,YAAY;mBAAgB;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAC;8CAQ3D;QACD,QAAQ,EAAE,SAAS,CAAC;QACpB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,MAAM,CAAC,EAAE,SAAS,CAAC;KACpB;4BAUwC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAC;kCAYf;QAAC,QAAQ,EAAE,SAAS,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAC;CAhCxF,CAAC"}

package/lib/Surface/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownMenu = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DropdownMenuPrimitive = __importStar(require("@radix-ui/react-dropdown-menu"));
+const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
+/**
+ * A dropdown menu component that provides a customizable and accessible dropdown interface.
+ * Built on top of accessible primitives, it offers a flexible way to display
+ * contextual actions and navigation options.
+ *
+ * Disclaimer: Custom trigger components (with asChild) must accept id, aria-haspopup, aria-expanded, and data-state props.
+ *
+ * Example:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger>Open Menu</DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ * With custom trigger:
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenu.Trigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </DropdownMenu.Trigger>
+ *   <DropdownMenu.Content>
+ *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+ *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>
+ *   </DropdownMenu.Content>
+ * </DropdownMenu>
+ * ```
+ *
+ */
+const DropdownMenu = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Root, { children: children });
+};
+exports.DropdownMenu = DropdownMenu;
+const DropdownMenuTrigger = ({ children, asChild = false, cssObj, }) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Trigger, { asChild: asChild, css: !asChild && { ...DropdownMenu_styles_1.triggerStyles, ...cssObj }, children: children }));
+};
+exports.DropdownMenu.Trigger = DropdownMenuTrigger;
+const DropdownMenuContent = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { css: DropdownMenu_styles_1.contentStyle, sideOffset: 6, children: children }) }));
+};
+exports.DropdownMenu.Content = DropdownMenuContent;
+const DropdownMenuItem = ({ children, onClick }) => {
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Item, { css: DropdownMenu_styles_1.itemStyle, onClick: onClick, children: (0, jsx_runtime_1.jsx)("span", { css: DropdownMenu_styles_1.textStyles, children: children }) }));
+};
+exports.DropdownMenu.Item = DropdownMenuItem;

package/lib/Surface/DropdownMenu/DropdownMenu.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { DropdownMenu } from './DropdownMenu';
+declare const meta: Meta<typeof DropdownMenu>;
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+export declare const Default: Story;
+export declare const WithLongItems: Story;
+export declare const WithCustomButton: Story;
+export declare const WithCustomIconButton: Story;
+//# sourceMappingURL=DropdownMenu.stories.d.ts.map

package/lib/Surface/DropdownMenu/DropdownMenu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAM5C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAMnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAC;AAE3C,eAAO,MAAM,OAAO,EAAE,KAarB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAelC,CAAC"}

package/lib/Surface/DropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithCustomIconButton = exports.WithCustomButton = exports.WithLongItems = exports.Default = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const DropdownMenu_1 = require("./DropdownMenu");
+const Icon_1 = require("../../DataDisplay/Icon");
+const Inputs_1 = require("../../Inputs");
+const IconButton_1 = require("../../Inputs/IconButton");
+const meta = {
+    component: DropdownMenu_1.DropdownMenu,
+    title: 'Surface/DropdownMenu',
+    parameters: {
+        layout: 'centered',
+    },
+};
+exports.default = meta;
+exports.Default = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { cssObj: { width: '40px', height: '40px' }, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Details" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete for me" })] })] })),
+};
+exports.WithLongItems = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { cssObj: { width: '40px', height: '40px' }, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy the detail of this message" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Contact the sender" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete this message (works only if you are the owner)" })] })] })),
+};
+exports.WithCustomButton = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Inputs_1.Button, { variant: Inputs_1.ButtonVariant.PRIMARY, children: "Open menu" }) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Details" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete for me" })] })] })),
+};
+exports.WithCustomIconButton = {
+    render: () => ((0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: IconButton_1.IconButtonVariant.PRIMARY, children: (0, jsx_runtime_1.jsx)(Icon_1.PlusIcon, {}) }) }), (0, jsx_runtime_1.jsxs)(DropdownMenu_1.DropdownMenu.Content, { children: [(0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Copy" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Details" }), (0, jsx_runtime_1.jsx)(DropdownMenu_1.DropdownMenu.Item, { onClick: () => { }, children: "Delete for me" })] })] })),
+};

package/lib/Surface/DropdownMenu/DropdownMenu.styles.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from '@emotion/react';
+export declare const contentStyle: CSSObject;
+export declare const itemStyle: CSSObject;
+export declare const textStyles: CSSObject;
+export declare const triggerStyles: CSSObject;
+//# sourceMappingURL=DropdownMenu.styles.d.ts.map

package/lib/Surface/DropdownMenu/DropdownMenu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.styles.d.ts","sourceRoot":"","sources":["../../../src/Surface/DropdownMenu/DropdownMenu.styles.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAY,MAAM,gBAAgB,CAAC;AAkDpD,eAAO,MAAM,YAAY,EAAE,SA0B1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SAkBvB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAIxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAS3B,CAAC"}