@0xsquid/ui 0.9.1 → 0.9.2

package/dist/cjs/index.js

@@ -3350,6 +3350,14 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
             : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsxRuntime.jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
+const borderTypeClassMap = {
+    border: 'tw-border tw-border-material-light-thin',
+    outline: 'tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin',
+};
+function ModalContent({ children, addGap = false, borderType = 'border', }) {
+    return (jsxRuntime.jsx("div", { className: cn('tw-flex tw-h-full tw-max-h-[535px] tw-w-full tw-flex-col tw-self-stretch tw-overflow-auto tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300', addGap && 'tw-gap-squid-xxs tw-pt-squid-xxs', borderTypeClassMap[borderType]), children: children }));
+}
+
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     return (jsxRuntime.jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsxRuntime.jsx(Button, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
@@ -3543,6 +3551,7 @@ exports.LoadingSkeleton = LoadingSkeleton;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.Modal = Modal;
+exports.ModalContent = ModalContent;
 exports.NavigationBar = NavigationBar;
 exports.NumericInput = NumericInput;
 exports.ProductCard = ProductCard;

package/dist/cjs/types/components/layout/index.d.ts

@@ -5,6 +5,7 @@ export * from './ErrorMessage';
 export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
+export * from './ModalContent';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';

package/dist/esm/index.js

@@ -3348,6 +3348,14 @@ function Modal({ children, className, onBackdropClick, isOpen: _isOpen = true, m
             : undefined, className: cn('tw-absolute tw-inset-0 tw-z-40 tw-flex tw-items-start tw-justify-center tw-bg-material-dark-average tw-px-squid-xs tw-py-squid-xl tw-pb-squid-m tw-transition-all', _isOpen ? 'tw-animate-blur-in' : 'tw-animate-blur-out'), children: jsx("div", { className: cn('tw-relative tw-flex tw-max-h-[600px] tw-w-[400px] tw-flex-col tw-items-start tw-justify-end tw-gap-squid-xxs tw-self-end', className, _isOpen ? 'tw-animate-slide-to-top' : 'tw-animate-slide-to-bottom', maxHeight && 'tw-h-full'), children: children }) })));
 }
 
+const borderTypeClassMap = {
+    border: 'tw-border tw-border-material-light-thin',
+    outline: 'tw-outline tw-outline-1 -tw-outline-offset-[1px] tw-outline-material-light-thin',
+};
+function ModalContent({ children, addGap = false, borderType = 'border', }) {
+    return (jsx("div", { className: cn('tw-flex tw-h-full tw-max-h-[535px] tw-w-full tw-flex-col tw-self-stretch tw-overflow-auto tw-rounded-squid-l tw-bg-grey-800 tw-text-grey-300', addGap && 'tw-gap-squid-xxs tw-pt-squid-xxs', borderTypeClassMap[borderType]), children: children }));
+}
+
 function NavigationBar({ title, displayBackButton = false, logoUrl, transparent = false, displayButtonShadows = false, onBackButtonClick, actions, }) {
     return (jsxs("nav", { className: cn('tw-flex tw-max-h-[120px] tw-min-w-96 tw-flex-col tw-text-grey-300', transparent ? 'tw-bg-transparent' : 'tw-bg-grey-900'), children: [jsxs("div", { className: cn('tw-flex tw-h-squid-xxl tw-items-center tw-justify-end tw-gap-x-squid-xs', displayBackButton ? 'tw-px-squid-m' : 'tw-pl-squid-l tw-pr-squid-m'), children: [displayBackButton ? (jsx(Button, { className: displayButtonShadows
                             ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
@@ -3517,4 +3525,4 @@ function SquidConfigProvider({ theme, children, themeType = 'light', }) {
     return (jsx("div", { style: parsedStyle, "data-squid-theme-type": themeType, className: "tw-group tw-relative tw-font-geist", children: children }));
 }
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, SettingsItem, SettingsSlider, SquidConfigProvider, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, UsdAmount, useDropdownMenu };

package/dist/esm/types/components/layout/index.d.ts

@@ -5,6 +5,7 @@ export * from './ErrorMessage';
 export * from './InfoBox';
 export * from './Menu';
 export * from './Modal';
+export * from './ModalContent';
 export * from './NavigationBar';
 export * from './ProductCard';
 export * from './ProfileHeaderBackground';

package/dist/index.d.ts

@@ -313,6 +313,13 @@ interface ModalProps {
 }
 declare function Modal({ children, className, onBackdropClick, isOpen: _isOpen, maxHeight, }: ModalProps): false | react_jsx_runtime.JSX.Element;
 
+type ModalContentBorderType = 'border' | 'outline';
+declare function ModalContent({ children, addGap, borderType, }: {
+    children?: React.ReactNode;
+    addGap?: boolean;
+    borderType?: ModalContentBorderType;
+}): react_jsx_runtime.JSX.Element;
+
 type ActionButton = {
     labelOrIcon: string | React.ReactNode;
     onClick?: () => void;
@@ -457,4 +464,4 @@ declare function useDropdownMenu(props?: {
     openDropdownButtonRef: React.RefObject<HTMLButtonElement>;
 };
 
-export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };
+export { AddressButton, ArrowButton, AssetsButton, BadgeImage, BodyText, Boost, BoostButton, Button, CaptionText, Chip, DetailsToolbar, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, ErrorMessage, FeeButton, HeadingText, HistoryItem, InfoBox, Input, ListItem, LoadingSkeleton, Menu, MenuItem, Modal, ModalContent, NavigationBar, NumericInput, ProductCard, ProfileHeaderBackground, SectionTitle, SettingsButton, type SettingsButtonProps, SettingsItem, type SettingsItemProps, SettingsSlider, type SettingsSliderProps, SquidConfigProvider, type SquidTheme, SwapConfiguration, SwapDetailListItem, SwapProgressViewHeader, SwapStepItem, SwapStepsCollapsed, Switch, TokenPair, Tooltip, type TooltipProps, type TooltipThreshold, type TooltipWidth, UsdAmount, useDropdownMenu };

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/0xsquid/squid-ui.git"
   },
   "description": "Squid's UI components",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "author": "",
   "license": "MIT",
   "scripts": {