@zonos/amino 5.5.30 → 5.5.32

package/components/lightbox/LightBox.d.ts

@@ -0,0 +1,90 @@
+import { type BaseDialogProps } from "../dialog/BaseDialog";
+export type LightBoxProps = BaseDialogProps & {
+    /**
+     * Function called when the lightbox is closed
+     */
+    onClose: () => void;
+};
+/**
+ * LightBox component provides a modal view for displaying images, videos, or other media
+ * content with a darkened background overlay.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Button onClick={() => setOpen(true)}>Open Image</Button>
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <img src="/path/to/image.jpg" alt="Preview" />
+ * </LightBox>
+ * ```
+ *
+ * @example With custom width
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   width={800}
+ * >
+ *   <img src="/path/to/image.jpg" alt="Preview" style={{ maxWidth: '100%' }} />
+ * </LightBox>
+ * ```
+ *
+ * @example With video content
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <video
+ *     controls
+ *     width="100%"
+ *     autoPlay
+ *   >
+ *     <source src="/path/to/video.mp4" type="video/mp4" />
+ *     Your browser does not support the video tag.
+ *   </video>
+ * </LightBox>
+ * ```
+ *
+ * @example With carousel of images
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ * const [currentIndex, setCurrentIndex] = useState(0);
+ * const images = ['/image1.jpg', '/image2.jpg', '/image3.jpg'];
+ *
+ * <LightBox
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <div style={{ display: 'flex', alignItems: 'center' }}>
+ *     <Button
+ *       icon={<ArrowLeftIcon />}
+ *       onClick={() => setCurrentIndex(prev => Math.max(0, prev - 1))}
+ *       disabled={currentIndex === 0}
+ *       variant="plain"
+ *     />
+ *     <img
+ *       src={images[currentIndex]}
+ *       alt={`Image ${currentIndex + 1}`}
+ *       style={{ maxWidth: '90%', maxHeight: '80vh' }}
+ *     />
+ *     <Button
+ *       icon={<ArrowRightIcon />}
+ *       onClick={() => setCurrentIndex(prev => Math.min(images.length - 1, prev + 1))}
+ *       disabled={currentIndex === images.length - 1}
+ *       variant="plain"
+ *     />
+ *   </div>
+ * </LightBox>
+ * ```
+ */
+export declare const LightBox: ({ children, ...props }: LightBoxProps) => import("react").JSX.Element;

package/components/lightbox/LightBox.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),r=require("../dialog/BaseDialog.js");require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("react"),require("react-dom"),require("clsx"),require("framer-motion"),require("../../style-inject.es-d4ddeae4.js");exports.LightBox=function(i){var s=i.children,t=e.__rest(i,["children"]);return React.createElement(r.BaseDialog,t,s)};
+"use strict";var e=require("../../_rollupPluginBabelHelpers-697f213c.js"),r=require("../../tslib.es6-8c21e256.js"),i=require("../dialog/BaseDialog.js"),s=require("react/jsx-runtime");require("react"),require("react-dom"),require("clsx"),require("framer-motion"),require("../../style-inject.es-d4ddeae4.js");exports.LightBox=function(t){var u=t.children,a=r.__rest(t,["children"]);return s.jsx(i.BaseDialog,e._objectSpread2(e._objectSpread2({},a),{},{children:u}))};

package/components/list/CollapsibleList.d.ts

@@ -0,0 +1,101 @@
+import { type ReactNode } from 'react';
+import { type ListProps } from "./List";
+export type CollapsibleListProps = ListProps & {
+    /**
+     * Optional icon to display next to the title in the header
+     */
+    icon?: ReactNode;
+    /**
+     * Whether to start expanded
+     * @default false
+     */
+    startExpanded?: boolean;
+    /**
+     * Title text or element for the collapsible header
+     */
+    title: ReactNode;
+};
+/**
+ * CollapsibleList component provides a list with a collapsible section that can be expanded
+ * or collapsed by clicking on the header. It's an extension of the List component with added
+ * functionality for expandable content.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CollapsibleList title="Settings">
+ *   <ListItem label="Profile" />
+ *   <ListItem label="Account" />
+ *   <ListItem label="Security" />
+ * </CollapsibleList>
+ * ```
+ *
+ * @example With icon and starting expanded
+ * ```tsx
+ * <CollapsibleList
+ *   icon={<SettingsIcon size={24} />}
+ *   title="Advanced Settings"
+ *   startExpanded
+ * >
+ *   <ListItem label="Developer Options" />
+ *   <ListItem label="Experimental Features" />
+ * </CollapsibleList>
+ * ```
+ *
+ * @example With border and selectable items
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>(null);
+ *
+ * <CollapsibleList
+ *   title="Categories"
+ *   withBorder
+ * >
+ *   <ListItem
+ *     label="Electronics"
+ *     selected={selected === 'electronics'}
+ *     onClick={() => setSelected(selected === 'electronics' ? null : 'electronics')}
+ *   />
+ *   <ListItem
+ *     label="Clothing"
+ *     selected={selected === 'clothing'}
+ *     onClick={() => setSelected(selected === 'clothing' ? null : 'clothing')}
+ *   />
+ *   <ListItem
+ *     label="Books"
+ *     selected={selected === 'books'}
+ *     onClick={() => setSelected(selected === 'books' ? null : 'books')}
+ *   />
+ * </CollapsibleList>
+ * ```
+ *
+ * @example Multiple collapsible lists
+ * ```tsx
+ * <div>
+ *   <CollapsibleList title="First Section" startExpanded>
+ *     <ListItem label="Item 1" />
+ *     <ListItem label="Item 2" />
+ *   </CollapsibleList>
+ *
+ *   <CollapsibleList title="Second Section">
+ *     <ListItem label="Item A" />
+ *     <ListItem label="Item B" />
+ *   </CollapsibleList>
+ * </div>
+ * ```
+ *
+ * @example With decorators in list items
+ * ```tsx
+ * <CollapsibleList title="Files">
+ *   <ListItem
+ *     label="Document.pdf"
+ *     decorator={<Thumbnail icon={<DocumentIcon />} shape="square" />}
+ *     rightDecorator={<Badge>3 MB</Badge>}
+ *   />
+ *   <ListItem
+ *     label="Image.png"
+ *     decorator={<Thumbnail icon={<ImageIcon />} shape="square" />}
+ *     rightDecorator={<Badge>1.2 MB</Badge>}
+ *   />
+ * </CollapsibleList>
+ * ```
+ */
+export declare const CollapsibleList: ({ children, className, icon, startExpanded, style, title, withBorder, withNegativeMargin, }: CollapsibleListProps) => import("react").JSX.Element;

package/components/list/CollapsibleList.js

@@ -1 +1 @@
-"use strict";var e=require("../../tslib.es6-8c21e256.js"),i=require("react"),l=require("clsx"),s=require("../collapse/Collapse.js"),a=require("./List.js"),t=require("../list-item/ListItem.js"),o=require("../../icons/ChevronUpIcon.js"),r=require("../../style-inject.es-d4ddeae4.js");function n(e){return e&&e.__esModule?e:{default:e}}require("@mui/material/Collapse"),require("../text/Text.js"),require("../../styles/constants/theme.js"),require("../../icons/icon-base/_IconBase.js");var m=n(l),_="Amino_CollapsibleList-module__styledCollapse--eE1-I",d="Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ",p="Amino_CollapsibleList-module__collapsed--rpRnN",c="Amino_CollapsibleList-module__styledList--r4g2Z",u="Amino_CollapsibleList-module__withBorder--DvXKH",y="Amino_CollapsibleList-module__withNegativeMargin--G5hX0";r.styleInject(".Amino_CollapsibleList-module__styledCollapse--eE1-I .__icon-wrapper{display:var(--amino-collapsible-list-collapse-icon-display);width:var(--amino-space-32)}.Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ .__icon-wrapper{display:var(--amino-collapsible-list-primary-icon-display)}.Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ svg{transition:var(--amino-transition)}.Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ svg.Amino_CollapsibleList-module__collapsed--rpRnN{opacity:1;transform:rotate(180deg)}.Amino_CollapsibleList-module__styledList--r4g2Z{display:flex;flex-direction:column;gap:2px}.Amino_CollapsibleList-module__styledList--r4g2Z.Amino_CollapsibleList-module__withBorder--DvXKH{border:1px solid var(--amino-gray-200);border-radius:var(--amino-radius-12);padding:var(--amino-space-8)}.Amino_CollapsibleList-module__styledList--r4g2Z.Amino_CollapsibleList-module__withNegativeMargin--G5hX0{margin:var(--amino-space-negative-24)}");exports.CollapsibleList=function(l){var r=l.children,n=l.className,L=l.icon,b=l.startExpanded,C=l.style,g=l.title,v=l.withBorder,h=l.withNegativeMargin,q=e.__read(i.useState(!b),2),A=q[0],I=q[1];return React.createElement(a.List,{className:m.default(n,c,v&&u,h&&y),style:e.__assign(e.__assign({},C),{"--amino-collapsible-list-collapse-icon-display":L?"inline-block":"","--amino-collapsible-list-primary-icon-display":L?"":"none"}),withBorder:v,withNegativeMargin:h},React.createElement(t.ListItem,{className:m.default(d),decorator:L,label:g,onClick:function(){return I(!A)},rightDecorator:React.createElement(o.ChevronUpIcon,{className:A?p:""})}),React.createElement(s.Collapse,{className:_,collapsed:A},r))};
+"use strict";var e=require("../../tslib.es6-8c21e256.js"),i=require("react"),l=require("clsx"),s=require("../collapse/Collapse.js"),a=require("./List.js"),o=require("../list-item/ListItem.js"),r=require("../../icons/ChevronUpIcon.js"),t=require("../../style-inject.es-d4ddeae4.js"),n=require("react/jsx-runtime");function m(e){return e&&e.__esModule?e:{default:e}}require("@mui/material/Collapse"),require("../text/Text.js"),require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../styles/constants/theme.js"),require("../../icons/icon-base/_IconBase.js");var _=m(l),d="Amino_CollapsibleList-module__styledCollapse--eE1-I",p="Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ",c="Amino_CollapsibleList-module__collapsed--rpRnN",u="Amino_CollapsibleList-module__styledList--r4g2Z",y="Amino_CollapsibleList-module__withBorder--DvXKH",L="Amino_CollapsibleList-module__withNegativeMargin--G5hX0";t.styleInject(".Amino_CollapsibleList-module__styledCollapse--eE1-I .__icon-wrapper{display:var(--amino-collapsible-list-collapse-icon-display);width:var(--amino-space-32)}.Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ .__icon-wrapper{display:var(--amino-collapsible-list-primary-icon-display)}.Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ svg{transition:var(--amino-transition)}.Amino_CollapsibleList-module__styledPrimaryListItem--6qySQ svg.Amino_CollapsibleList-module__collapsed--rpRnN{opacity:1;transform:rotate(180deg)}.Amino_CollapsibleList-module__styledList--r4g2Z{display:flex;flex-direction:column;gap:2px}.Amino_CollapsibleList-module__styledList--r4g2Z.Amino_CollapsibleList-module__withBorder--DvXKH{border:1px solid var(--amino-gray-200);border-radius:var(--amino-radius-12);padding:var(--amino-space-8)}.Amino_CollapsibleList-module__styledList--r4g2Z.Amino_CollapsibleList-module__withNegativeMargin--G5hX0{margin:var(--amino-space-negative-24)}");exports.CollapsibleList=function(l){var t=l.children,m=l.className,b=l.icon,C=l.startExpanded,g=l.style,v=l.title,h=l.withBorder,q=l.withNegativeMargin,j=e.__read(i.useState(!C),2),A=j[0],x=j[1];return n.jsxs(a.List,{className:_.default(m,u,h&&y,q&&L),style:e.__assign(e.__assign({},g),{"--amino-collapsible-list-collapse-icon-display":b?"inline-block":"","--amino-collapsible-list-primary-icon-display":b?"":"none"}),withBorder:h,withNegativeMargin:q,children:[n.jsx(o.ListItem,{className:_.default(p),decorator:b,label:v,onClick:function(){return x(!A)},rightDecorator:n.jsx(r.ChevronUpIcon,{className:A?c:""})}),n.jsx(s.Collapse,{className:d,collapsed:A,children:t})]})};

package/components/list/List.d.ts

@@ -0,0 +1,88 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type ListProps = BaseProps & {
+    /**
+     * List items to be displayed
+     * Typically ListItem components
+     */
+    children?: ReactNode;
+    /**
+     * Whether to display a border around the list
+     * @default false
+     */
+    withBorder?: boolean;
+    /**
+     * Whether to apply negative margin to make the list flush with its container
+     * @default false
+     */
+    withNegativeMargin?: boolean;
+};
+/**
+ * List component provides a container for displaying a collection of related items.
+ * It's typically used with ListItem components as children.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <List>
+ *   <ListItem label="Item 1" />
+ *   <ListItem label="Item 2" />
+ *   <ListItem label="Item 3" />
+ * </List>
+ * ```
+ *
+ * @example With border
+ * ```tsx
+ * <List withBorder>
+ *   <ListItem label="Item 1" subtitle="Description for item 1" />
+ *   <ListItem label="Item 2" subtitle="Description for item 2" />
+ * </List>
+ * ```
+ *
+ * @example With selection
+ * ```tsx
+ * const [selectedItem, setSelectedItem] = useState<number | null>(null);
+ *
+ * <List>
+ *   <ListItem
+ *     label="Item 1"
+ *     selected={selectedItem === 1}
+ *     onClick={() => setSelectedItem(selectedItem === 1 ? null : 1)}
+ *   />
+ *   <ListItem
+ *     label="Item 2"
+ *     selected={selectedItem === 2}
+ *     onClick={() => setSelectedItem(selectedItem === 2 ? null : 2)}
+ *   />
+ *   <ListItem
+ *     label="Disabled Item"
+ *     disabled
+ *     onClick={() => {}}
+ *   />
+ * </List>
+ * ```
+ *
+ * @example With negative margin
+ * ```tsx
+ * <div style={{ padding: '20px', border: '1px solid #ccc' }}>
+ *   <List withNegativeMargin>
+ *     <ListItem label="This list is flush with container" />
+ *     <ListItem label="No padding around the list" />
+ *   </List>
+ * </div>
+ * ```
+ *
+ * @example With decorators
+ * ```tsx
+ * <List>
+ *   <ListItem
+ *     label="With icon"
+ *     decorator={<Thumbnail icon={<UserIcon />} shape="round" />}
+ *   />
+ *   <ListItem
+ *     label="With right decorator"
+ *     rightDecorator={<Badge>New</Badge>}
+ *   />
+ * </List>
+ * ```
+ */
+export declare const List: ({ children, className, style, withBorder, withNegativeMargin, }: ListProps) => import("react").JSX.Element;

package/components/list/List.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),i=require("../../style-inject.es-d4ddeae4.js");function t(e){return e&&e.__esModule?e:{default:e}}var s=t(e),r="Amino_List-module__styledList--VWPqT",a="Amino_List-module__withBorder--qMjj4",o="Amino_List-module__withNegativeMargin--OCmTD";i.styleInject(".Amino_List-module__styledList--VWPqT{display:flex;flex-direction:column;gap:2px}.Amino_List-module__styledList--VWPqT.Amino_List-module__withBorder--qMjj4{border:1px solid var(--amino-gray-200);border-radius:var(--amino-radius-12);padding:var(--amino-space-8)}.Amino_List-module__styledList--VWPqT.Amino_List-module__withNegativeMargin--OCmTD{margin:var(--amino-space-negative-24)}");exports.List=function(e){var i=e.children,t=e.className,n=e.style,l=e.withBorder,d=e.withNegativeMargin;return React.createElement("section",{className:s.default(t,r,l&&a,d&&o),style:n},i)};
+"use strict";var e=require("clsx"),i=require("../../style-inject.es-d4ddeae4.js"),t=require("react/jsx-runtime");function r(e){return e&&e.__esModule?e:{default:e}}var s=r(e),a="Amino_List-module__styledList--VWPqT",o="Amino_List-module__withBorder--qMjj4",n="Amino_List-module__withNegativeMargin--OCmTD";i.styleInject(".Amino_List-module__styledList--VWPqT{display:flex;flex-direction:column;gap:2px}.Amino_List-module__styledList--VWPqT.Amino_List-module__withBorder--qMjj4{border:1px solid var(--amino-gray-200);border-radius:var(--amino-radius-12);padding:var(--amino-space-8)}.Amino_List-module__styledList--VWPqT.Amino_List-module__withNegativeMargin--OCmTD{margin:var(--amino-space-negative-24)}");exports.List=function(e){var i=e.children,r=e.className,d=e.style,l=e.withBorder,m=e.withNegativeMargin;return t.jsx("section",{className:s.default(r,a,l&&o,m&&n),style:d,children:i})};

package/components/list-item/ListItem.d.ts

@@ -0,0 +1,35 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type Props = BaseProps & {
+    /**
+     * Element to display before the label, typically an icon or avatar
+     */
+    decorator?: ReactNode;
+    /**
+     * Whether the list item is disabled and cannot be interacted with
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Primary text or element to display in the list item
+     */
+    label: ReactNode;
+    /**
+     * Function to call when the list item is clicked
+     */
+    onClick?: MouseEventHandler;
+    /**
+     * Element to display after the label and subtitle, typically a badge or action
+     */
+    rightDecorator?: ReactNode;
+    /**
+     * Whether the list item is visually selected/active
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Secondary text or element to display below the label
+     */
+    subtitle?: ReactNode;
+};
+export declare const ListItem: ({ className, decorator, disabled, label, onClick, rightDecorator, selected, style, subtitle, }: Props) => import("react").JSX.Element;

package/components/list-item/ListItem.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),t=require("../text/Text.js"),i=require("../../style-inject.es-d4ddeae4.js");function o(e){return e&&e.__esModule?e:{default:e}}require("../../tslib.es6-8c21e256.js"),require("../../styles/constants/theme.js");var m=o(e),n="Amino_ListItem-module__aminoListItem--1LE7t",a="Amino_ListItem-module__hasIcon--2Imem",l="Amino_ListItem-module__disabled--bb--n",s="Amino_ListItem-module__selected--Ih4MV",r="Amino_ListItem-module__withClick--4KRpm",_="Amino_ListItem-module__textContainer--n4vsF",c="Amino_ListItem-module__icon--zwqup";i.styleInject(".Amino_ListItem-module__aminoListItem--1LE7t{align-items:center;border-radius:var(--amino-radius-8);display:flex;flex-direction:row;gap:var(--amino-space-16);line-height:16px;min-height:var(--amino-size-xl);padding:var(--amino-space-8) var(--amino-space-16)}.Amino_ListItem-module__aminoListItem--1LE7t .__icon-wrapper{display:none}.Amino_ListItem-module__aminoListItem--1LE7t .__icon-wrapper.Amino_ListItem-module__hasIcon--2Imem{display:inline-block}.Amino_ListItem-module__aminoListItem--1LE7t:not(.Amino_ListItem-module__disabled--bb--n).Amino_ListItem-module__selected--Ih4MV{background-color:var(--amino-blue-50)}.Amino_ListItem-module__aminoListItem--1LE7t:not(.Amino_ListItem-module__disabled--bb--n).Amino_ListItem-module__selected--Ih4MV *{color:var(--amino-blue-800)}.Amino_ListItem-module__aminoListItem--1LE7t:active,.Amino_ListItem-module__aminoListItem--1LE7t:focus,.Amino_ListItem-module__aminoListItem--1LE7t:hover{background-color:var(--amino-hover-color);outline:none}.Amino_ListItem-module__aminoListItem--1LE7t.Amino_ListItem-module__disabled--bb--n{color:var(--amino-gray-600);cursor:not-allowed}.Amino_ListItem-module__aminoListItem--1LE7t:not(.Amino_ListItem-module__disabled--bb--n):not(.Amino_ListItem-module__selected--Ih4MV).Amino_ListItem-module__withClick--4KRpm:hover{background-color:var(--amino-hover-color);cursor:pointer}.Amino_ListItem-module__textContainer--n4vsF{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;gap:2px}.Amino_ListItem-module__icon--zwqup{border-radius:var(--amino-radius-6);height:var(--amino-space-32);margin-right:var(--amino-space-16);width:var(--amino-space-32)}");var d=function(e){var t=e.icon,i=e.iconComponent,o=e.label;return t?React.createElement("img",{alt:o,className:c,src:t}):i?React.createElement(React.Fragment,null,i):null};exports.ListItem=function(e){var i=e.className,o=e.decorator,c=e.disabled,u=e.label,L=e.onClick,I=e.rightDecorator,p=e.selected,b=e.style,v=e.subtitle;return React.createElement("button",{className:m.default(i,n,c&&l,p&&s,!!L&&r),onClick:function(e){return!c&&(null==L?void 0:L(e))},style:b,type:"button"},React.createElement("div",{className:m.default("__icon-wrapper",o&&a)},o,React.createElement(d,{label:"string"==typeof u?u:""})),React.createElement("div",{className:_},React.createElement(t.Text,{type:"label"},u),v&&React.createElement(t.Text,{type:"caption"},v)),I)};
+"use strict";var e=require("clsx"),i=require("../text/Text.js"),t=require("../../style-inject.es-d4ddeae4.js"),o=require("react/jsx-runtime");function m(e){return e&&e.__esModule?e:{default:e}}require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../tslib.es6-8c21e256.js"),require("../../styles/constants/theme.js");var n=m(e),s="Amino_ListItem-module__aminoListItem--1LE7t",l="Amino_ListItem-module__hasIcon--2Imem",a="Amino_ListItem-module__disabled--bb--n",r="Amino_ListItem-module__selected--Ih4MV",_="Amino_ListItem-module__withClick--4KRpm",d="Amino_ListItem-module__textContainer--n4vsF",u="Amino_ListItem-module__icon--zwqup";t.styleInject(".Amino_ListItem-module__aminoListItem--1LE7t{align-items:center;border-radius:var(--amino-radius-8);display:flex;flex-direction:row;gap:var(--amino-space-16);line-height:16px;min-height:var(--amino-size-xl);padding:var(--amino-space-8) var(--amino-space-16)}.Amino_ListItem-module__aminoListItem--1LE7t .__icon-wrapper{display:none}.Amino_ListItem-module__aminoListItem--1LE7t .__icon-wrapper.Amino_ListItem-module__hasIcon--2Imem{display:inline-block}.Amino_ListItem-module__aminoListItem--1LE7t:not(.Amino_ListItem-module__disabled--bb--n).Amino_ListItem-module__selected--Ih4MV{background-color:var(--amino-blue-50)}.Amino_ListItem-module__aminoListItem--1LE7t:not(.Amino_ListItem-module__disabled--bb--n).Amino_ListItem-module__selected--Ih4MV *{color:var(--amino-blue-800)}.Amino_ListItem-module__aminoListItem--1LE7t:active,.Amino_ListItem-module__aminoListItem--1LE7t:focus,.Amino_ListItem-module__aminoListItem--1LE7t:hover{background-color:var(--amino-hover-color);outline:none}.Amino_ListItem-module__aminoListItem--1LE7t.Amino_ListItem-module__disabled--bb--n{color:var(--amino-gray-600);cursor:not-allowed}.Amino_ListItem-module__aminoListItem--1LE7t:not(.Amino_ListItem-module__disabled--bb--n):not(.Amino_ListItem-module__selected--Ih4MV).Amino_ListItem-module__withClick--4KRpm:hover{background-color:var(--amino-hover-color);cursor:pointer}.Amino_ListItem-module__textContainer--n4vsF{align-items:flex-start;display:flex;flex-direction:column;flex-grow:1;gap:2px}.Amino_ListItem-module__icon--zwqup{border-radius:var(--amino-radius-6);height:var(--amino-space-32);margin-right:var(--amino-space-16);width:var(--amino-space-32)}");var c=function(e){var i=e.icon,t=e.iconComponent,m=e.label;return i?o.jsx("img",{alt:m,className:u,src:i}):t?o.jsx(o.Fragment,{children:t}):null};exports.ListItem=function(e){var t=e.className,m=e.decorator,u=e.disabled,L=e.label,I=e.onClick,p=e.rightDecorator,b=e.selected,v=e.style,h=e.subtitle;return o.jsxs("button",{className:n.default(t,s,u&&a,b&&r,!!I&&_),onClick:function(e){return!u&&(null==I?void 0:I(e))},style:v,type:"button",children:[o.jsxs("div",{className:n.default("__icon-wrapper",m&&l),children:[m,o.jsx(c,{label:"string"==typeof L?L:""})]}),o.jsxs("div",{className:d,children:[o.jsx(i.Text,{type:"label",children:L}),h&&o.jsx(i.Text,{type:"caption",children:h})]}),p]})};

package/components/menu/Menu.d.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+export type MenuProps = BaseProps & {
+    /**
+     * Menu items to be displayed
+     * Typically MenuItem components
+     */
+    children?: ReactNode;
+};
+/**
+ * Menu component provides a container for dropdown menu items.
+ * It's typically used with MenuItem components and the MenuButton component.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Menu>
+ *   <MenuItem>Profile settings</MenuItem>
+ *   <MenuItem>Account settings</MenuItem>
+ *   <MenuItem>Help</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With MenuButton
+ * ```tsx
+ * <MenuButton action={<Button>Options</Button>}>
+ *   <Menu>
+ *     <MenuItem onClick={handleEdit}>Edit</MenuItem>
+ *     <MenuItem onClick={handleDelete}>Delete</MenuItem>
+ *   </Menu>
+ * </MenuButton>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <Menu>
+ *   <MenuItem icon={<EditIcon />}>Edit</MenuItem>
+ *   <MenuItem icon={<TrashIcon />}>Delete</MenuItem>
+ *   <MenuItem icon={<CopyIcon />}>Duplicate</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With disabled items
+ * ```tsx
+ * <Menu>
+ *   <MenuItem>Edit</MenuItem>
+ *   <MenuItem disabled>Delete</MenuItem>
+ *   <MenuItem>Duplicate</MenuItem>
+ * </Menu>
+ * ```
+ */
+export declare const Menu: ({ children, className, style }: MenuProps) => import("react").JSX.Element;

package/components/menu/Menu.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),r=require("../../style-inject.es-d4ddeae4.js");function n(e){return e&&e.__esModule?e:{default:e}}var t=n(e),a="Amino_Menu-module__menu--zFWFk";r.styleInject(".Amino_Menu-module__menu--zFWFk{list-style-type:none;margin:0;padding:0}.Amino_Menu-module__menu--zFWFk hr{border:0;border-bottom:var(--amino-border-subtle);margin-bottom:var(--amino-radius-6);margin-top:var(--amino-radius-6)}");exports.Menu=function(e){var r=e.children,n=e.className,u=e.style;return React.createElement("div",{className:t.default(n,a),style:u},r)};
+"use strict";var e=require("clsx"),r=require("../../style-inject.es-d4ddeae4.js"),n=require("react/jsx-runtime");function t(e){return e&&e.__esModule?e:{default:e}}var u=t(e),i="Amino_Menu-module__menu--zFWFk";r.styleInject(".Amino_Menu-module__menu--zFWFk{list-style-type:none;margin:0;padding:0}.Amino_Menu-module__menu--zFWFk hr{border:0;border-bottom:var(--amino-border-subtle);margin-bottom:var(--amino-radius-6);margin-top:var(--amino-radius-6)}");exports.Menu=function(e){var r=e.children,t=e.className,a=e.style;return n.jsx("div",{className:u.default(t,i),style:a,children:r})};

package/components/menu/MenuItem.d.ts

@@ -0,0 +1,74 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type MenuItemProps = BaseProps & {
+    /**
+     * Content to display in the menu item
+     */
+    children: ReactNode;
+    /**
+     * Whether the menu item is disabled and cannot be clicked
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional icon to display before the menu item text
+     */
+    icon?: ReactNode;
+    /**
+     * Function to call when the menu item is clicked
+     */
+    onClick?: MouseEventHandler;
+};
+/**
+ * MenuItem component represents a clickable option in a dropdown menu.
+ * Each MenuItem is typically placed within a Menu component.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Menu>
+ *   <MenuItem onClick={handleClick}>Settings</MenuItem>
+ *   <MenuItem onClick={handleLogout}>Logout</MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With icons
+ * ```tsx
+ * <Menu>
+ *   <MenuItem icon={<SettingsIcon />} onClick={handleSettings}>
+ *     Settings
+ *   </MenuItem>
+ *   <MenuItem icon={<LogoutIcon />} onClick={handleLogout}>
+ *     Logout
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <Menu>
+ *   <MenuItem onClick={handleEdit}>Edit</MenuItem>
+ *   <MenuItem disabled onClick={handleDelete}>
+ *     Delete
+ *   </MenuItem>
+ * </Menu>
+ * ```
+ *
+ * @example With MenuButton
+ * ```tsx
+ * <MenuButton action={<Button size="sm">Actions</Button>}>
+ *   <Menu>
+ *     <MenuItem onClick={() => handleAction('view')}>
+ *       View Details
+ *     </MenuItem>
+ *     <MenuItem onClick={() => handleAction('edit')}>
+ *       Edit Item
+ *     </MenuItem>
+ *     <MenuItem disabled={!canDelete} onClick={() => handleAction('delete')}>
+ *       Delete Item
+ *     </MenuItem>
+ *   </Menu>
+ * </MenuButton>
+ * ```
+ */
+export declare const MenuItem: ({ children, className, disabled, icon, onClick, style, }: MenuItemProps) => import("react").JSX.Element;
+export {};

package/components/menu/MenuItem.js

@@ -1 +1 @@
-"use strict";var e=require("clsx"),t=require("../../style-inject.es-d4ddeae4.js");function n(e){return e&&e.__esModule?e:{default:e}}var i=n(e),a="Amino_MenuItem-module__disabled--aPHbO",o="Amino_MenuItem-module__styledListItem--Yw0-a";t.styleInject(".Amino_MenuItem-module__disabled--aPHbO .Amino_MenuItem-module__styledListItem--Yw0-a{cursor:not-allowed;opacity:var(--amino-opacity-disabled)}.Amino_MenuItem-module__styledListItem--Yw0-a{align-items:center;border-radius:var(--amino-radius-6);cursor:pointer;display:flex;font-size:var(--amino-font-size-base);line-height:24px;padding:var(--amino-space-8);-webkit-user-select:none;user-select:none;width:100%}.Amino_MenuItem-module__styledListItem--Yw0-a:hover{background:var(--amino-hover-color)}.Amino_MenuItem-module__styledListItem--Yw0-a:active{outline:none}.Amino_MenuItem-module__styledListItem--Yw0-a a{display:block;width:100%}.Amino_MenuItem-module__styledListItem--Yw0-a svg{margin-right:var(--amino-space-8)}[data-theme=night] .Amino_MenuItem-module__styledListItem--Yw0-a:hover{background:var(--amino-gray-100)}");exports.MenuItem=function(e){var t=e.children,n=e.className,m=e.disabled,s=e.icon,l=e.onClick,r=e.style;return React.createElement("li",{className:i.default(n,m&&a),style:r},React.createElement("button",{className:o,onClick:function(e){return!m&&(null==l?void 0:l(e))},type:"button"},s,t))};
+"use strict";var e=require("clsx"),t=require("../../style-inject.es-d4ddeae4.js"),i=require("react/jsx-runtime");function n(e){return e&&e.__esModule?e:{default:e}}var a=n(e),o="Amino_MenuItem-module__disabled--aPHbO",s="Amino_MenuItem-module__styledListItem--Yw0-a";t.styleInject(".Amino_MenuItem-module__disabled--aPHbO .Amino_MenuItem-module__styledListItem--Yw0-a{cursor:not-allowed;opacity:var(--amino-opacity-disabled)}.Amino_MenuItem-module__styledListItem--Yw0-a{align-items:center;border-radius:var(--amino-radius-6);cursor:pointer;display:flex;font-size:var(--amino-font-size-base);line-height:24px;padding:var(--amino-space-8);-webkit-user-select:none;user-select:none;width:100%}.Amino_MenuItem-module__styledListItem--Yw0-a:hover{background:var(--amino-hover-color)}.Amino_MenuItem-module__styledListItem--Yw0-a:active{outline:none}.Amino_MenuItem-module__styledListItem--Yw0-a a{display:block;width:100%}.Amino_MenuItem-module__styledListItem--Yw0-a svg{margin-right:var(--amino-space-8)}[data-theme=night] .Amino_MenuItem-module__styledListItem--Yw0-a:hover{background:var(--amino-gray-100)}");exports.MenuItem=function(e){var t=e.children,n=e.className,l=e.disabled,m=e.icon,r=e.onClick,u=e.style;return i.jsx("li",{className:a.default(n,l&&o),style:u,children:i.jsxs("button",{className:s,onClick:function(e){return!l&&(null==r?void 0:r(e))},type:"button",children:[m,t]})})};

package/components/nested-data-table/NestedDataTable.d.ts

@@ -0,0 +1,121 @@
+import { type ReactNode } from 'react';
+import type { Column } from 'react-data-grid';
+import type { BaseProps } from "../../types/BaseProps";
+import type { flattenRow } from "../../utils/flattenRow";
+type ColumnType<TRow> = Column<TRow, Record<string, unknown>>;
+export type ColumnCell<TRow extends Record<string, unknown>> = NonNullable<ColumnType<TRow>['renderCell']>;
+export type CustomColumnCells<TRow extends Record<string, unknown>> = {
+    [key in keyof TRow]?: ColumnCell<TRow>;
+};
+type Props<TRow extends Record<string, unknown>> = BaseProps & {
+    /**
+     * Current page number for pagination
+     */
+    currentPage?: number;
+    /**
+     * Custom rendering functions for specific column cells
+     */
+    customColumnCells?: CustomColumnCells<TRow>;
+    /**
+     * Custom function to flatten nested objects in table data
+     * If not provided, the default flattenRow from "src/utils/flattenRow.ts" will be used
+     */
+    customFlattenRow?: typeof flattenRow;
+    /**
+     * Handler function for page changes in pagination
+     * @param page - The new page number
+     */
+    handlePagination?: (page: number) => void;
+    /**
+     * Whether there is a next page available for pagination
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether there is a previous page available for pagination
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * Whether data is currently being fetched
+     */
+    isFetching: boolean;
+    /**
+     * Custom component to display while data is loading
+     */
+    loadingComponent?: ReactNode;
+    /**
+     * Custom component to display when there is no data or an error state
+     */
+    restState?: ReactNode;
+    /**
+     * Data to be displayed in the table
+     */
+    tableData: TRow[];
+    /**
+     * Optional title for the table
+     */
+    title?: string;
+};
+/**
+ * A data table component that can display nested data structures with pagination support.
+ * Automatically extracts and displays nested object properties in a tabular format,
+ * with support for custom cell rendering and pagination controls.
+ *
+ * @example Basic usage
+ * ```tsx
+ * type User = {
+ *   id: number;
+ *   name: string;
+ *   details: {
+ *     email: string;
+ *     phone: string;
+ *   };
+ * };
+ *
+ * const [users, setUsers] = useState<User[]>([]);
+ * const [loading, setLoading] = useState(true);
+ *
+ * useEffect(() => {
+ *   fetchUsers().then(data => {
+ *     setUsers(data);
+ *     setLoading(false);
+ *   });
+ * }, []);
+ *
+ * <NestedDataTable
+ *   isFetching={loading}
+ *   tableData={users}
+ *   title="User List"
+ * />
+ * ```
+ *
+ * @example With custom cell rendering
+ * ```tsx
+ * <NestedDataTable
+ *   customColumnCells={{
+ *     name: props => <strong>{props.row.name}</strong>,
+ *     'details.email': props => <a href={`mailto:${props.row.details.email}`}>{props.row.details.email}</a>
+ *   }}
+ *   isFetching={loading}
+ *   tableData={users}
+ *   title="User List with Custom Formatting"
+ * />
+ * ```
+ *
+ * @example With pagination
+ * ```tsx
+ * const [page, setPage] = useState(1);
+ * const [hasMore, setHasMore] = useState(true);
+ *
+ * <NestedDataTable
+ *   currentPage={page}
+ *   handlePagination={setPage}
+ *   hasNextPage={hasMore}
+ *   hasPreviousPage={page > 1}
+ *   isFetching={loading}
+ *   tableData={users}
+ *   title="Paginated User List"
+ * />
+ * ```
+ */
+export declare const NestedDataTable: <TRow extends Record<string, unknown> | Record<string, unknown>>({ currentPage, customColumnCells, customFlattenRow, handlePagination, hasNextPage, hasPreviousPage, isFetching, loadingComponent, restState, style, tableData, title, }: Props<TRow>) => import("react").JSX.Element;
+export {};

package/components/nested-data-table/NestedDataTable.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("../button/Button.js"),r=require("./_TableData.js"),a=require("../rest-state/RestState.js"),i=require("../text/Text.js"),l=require("../../style-inject.es-d4ddeae4.js");require("../../_rollupPluginBabelHelpers-77a6284f.js"),require("../../tslib.es6-8c21e256.js"),require("clsx"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("./_Filter.js"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../help-text/HelpText.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../select/_StyledReactSelect.js"),require("react-intersection-observer"),require("react-select"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../flex/Flex.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js");var s="Amino_NestedDataTable-module__styledPivotTableContentWrapper--6lT1W",n="Amino_NestedDataTable-module__styledTableHeader--tdfr8",o="Amino_NestedDataTable-module__styledTableActionWrapper--o0Xmt";l.styleInject(".Amino_NestedDataTable-module__styledPivotTableContentWrapper--6lT1W{height:100%}.Amino_NestedDataTable-module__styledTableHeader--tdfr8{align-items:center;display:flex;padding:var(--amino-space-8)}.Amino_NestedDataTable-module__styledTableActionWrapper--o0Xmt{align-items:center;display:flex;flex:1;gap:var(--amino-space-8);justify-content:flex-end}");exports.NestedDataTable=function(l){var u=l.currentPage,c=l.customColumnCells,m=l.customFlattenRow,d=l.handlePagination,q=l.hasNextPage,j=l.hasPreviousPage,p=l.isFetching,b=l.loadingComponent,R=l.restState,g=l.style,T=l.tableData,_=l.title,v=e.useMemo((function(){return Array.isArray(T)?T:[T]}),[T]),h=!!d&&!!u&&T.length;return React.createElement("div",{className:s,style:g},React.createElement("div",{className:n},!!_&&React.createElement(i.Text,{type:"header"},_),!!h&&React.createElement("div",{className:o},React.createElement(t.Button,{disabled:1===u||!j,onClick:function(){j&&d(u-1)},outline:!0},"Previous page"),u,React.createElement(t.Button,{disabled:!q,onClick:function(){q&&d(u+1)},outline:!0},"Next page"))),p?b?React.createElement(React.Fragment,null,b):React.createElement(a.RestState,{label:"Loading..."}):0===v.length?R?React.createElement(React.Fragment,null,R):React.createElement(a.RestState,{label:"No data available."}):React.createElement(r.TableData,{customColumnCells:c,customFlattenRow:m,tableDataArr:v}))};
+"use strict";var e=require("react"),t=require("../button/Button.js"),r=require("./_TableData.js"),i=require("../rest-state/RestState.js"),s=require("../text/Text.js"),a=require("../../style-inject.es-d4ddeae4.js"),l=require("react/jsx-runtime");require("../../_rollupPluginBabelHelpers-697f213c.js"),require("../../tslib.es6-8c21e256.js"),require("clsx"),require("../button/RippleGroup.js"),require("framer-motion"),require("uuid"),require("../button/_Ripple.js"),require("../../utils/getAminoColor.js"),require("../../styles/constants/theme.js"),require("../button/useRipple.js"),require("../spinner/Spinner.js"),require("../../utils/getTestId.js"),require("./_Filter.js"),require("../select/MultiSelect.js"),require("../checkbox/Checkbox.js"),require("../help-text/HelpText.js"),require("../../icons/CheckmarkIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../global.module-569e4fd5.js"),require("../select/_StyledReactSelect.js"),require("react-intersection-observer"),require("react-select"),require("../../icons/DoubleChevronIcon.js"),require("../../icons/RemoveCircleIcon.js"),require("../../icons/RemoveIcon.js"),require("../../icons/FilterIcon.js"),require("../../utils/hooks/useDropdown.js"),require("@floating-ui/react"),require("../pivot-table/PivotTable.js"),require("react-data-grid"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../utils/addIndex.js"),require("../tooltip/Tooltip.js"),require("@mui/material/styles"),require("@mui/material/Tooltip"),require("../flex/Flex.js"),require("../../icons/ChevronRightCircleIcon.js"),require("../../utils/flattenRow.js"),require("../../utils/setupNestedData.js"),require("../../utils/truncateText.js");var n="Amino_NestedDataTable-module__styledPivotTableContentWrapper--6lT1W",o="Amino_NestedDataTable-module__styledTableHeader--tdfr8",u="Amino_NestedDataTable-module__styledTableActionWrapper--o0Xmt";a.styleInject(".Amino_NestedDataTable-module__styledPivotTableContentWrapper--6lT1W{height:100%}.Amino_NestedDataTable-module__styledTableHeader--tdfr8{align-items:center;display:flex;padding:var(--amino-space-8)}.Amino_NestedDataTable-module__styledTableActionWrapper--o0Xmt{align-items:center;display:flex;flex:1;gap:var(--amino-space-8);justify-content:flex-end}");exports.NestedDataTable=function(a){var c=a.currentPage,d=a.customColumnCells,j=a.customFlattenRow,q=a.handlePagination,m=a.hasNextPage,p=a.hasPreviousPage,b=a.isFetching,x=a.loadingComponent,h=a.restState,g=a.style,T=a.tableData,_=a.title,v=e.useMemo((function(){return Array.isArray(T)?T:[T]}),[T]),y=!!q&&!!c&&T.length;return l.jsxs("div",{className:n,style:g,children:[l.jsxs("div",{className:o,children:[!!_&&l.jsx(s.Text,{type:"header",children:_}),!!y&&l.jsxs("div",{className:u,children:[l.jsx(t.Button,{disabled:1===c||!p,onClick:function(){p&&q(c-1)},outline:!0,children:"Previous page"}),c,l.jsx(t.Button,{disabled:!m,onClick:function(){m&&q(c+1)},outline:!0,children:"Next page"})]})]}),b?x?l.jsx(l.Fragment,{children:x}):l.jsx(i.RestState,{label:"Loading..."}):0===v.length?h?l.jsx(l.Fragment,{children:h}):l.jsx(i.RestState,{label:"No data available."}):l.jsx(r.TableData,{customColumnCells:d,customFlattenRow:j,tableDataArr:v})]})};