@plesk/ui-library 3.25.7 → 3.26.0

package/styleguide/images/symbols.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="10944" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="16" height="11040" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <symbol viewBox="0 0 12 12" id="archive:12">
       <path d="M2 1h7v.5a.5.5 0 0 0 1 0V1a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-.5a.5.5 0 0 0-1 0v.5H2V1z" />
@@ -592,6 +592,14 @@
       <path d="M11.145 2.855a.496.496 0 0 1 0-.702L13.097.202A.5.5 0 0 1 13.498 0h.004a.495.495 0 0 1 .401.202l1.952 1.951a.496.496 0 0 1-.702.702L14 1.702V10h-1V1.702l-1.153 1.153a.496.496 0 0 1-.702 0zM9.5 10a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
       <path d="M2 10c0-1.477.534-2.83 1.419-3.875a.47.47 0 0 1 .692-.014c.195.195.193.51.018.724A5 5 0 1 0 13 10h1.001a6 6 0 0 1-12 0z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="docker-filled:12">
+      <path d="M11.85 5.287c-.3-.224-.6-.3-.9-.3-.225 0-.375 0-.6.076-.075-.526-.375-.9-.75-1.2l-.15-.15-.15.15c-.225.3-.3.824-.225 1.2 0 .3.075.6.3.824-.375.226-.825.3-1.275.3H.75a.75.75 0 0 0-.75.75c.075 1.426.6 4.5 3.9 4.5 4.35 0 5.1-2.475 6.15-5.1h.15c.675 0 1.275-.225 1.65-.825l.15-.15-.15-.075zm-10.875.15h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225H.975c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm4.5-1.875h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225z" />
+      <path d="M5.475 5.438h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5 0h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.075.226.225.226zm-1.5-3.75h.675c.15 0 .225-.076.225-.226V.787c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-3 3.75h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.226.225.226zm1.5-1.876h.675c.15 0 .225-.074.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm-1.5 0h.675c.15 0 .225-.075.225-.225v-.675c0-.15-.075-.225-.225-.225h-.675c-.075 0-.225.075-.225.225v.675c0 .15.15.225.225.225zm1.5 1.876h.675c.15 0 .225-.075.225-.226v-.675c0-.15-.075-.225-.225-.225h-.675c-.15 0-.225.075-.225.225v.675c0 .15.15.226.225.226z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="docker-filled:16">
+      <path d="M15.8 6.8c-.4-.3-.8-.4-1.2-.4-.3 0-.5 0-.8.1-.1-.7-.5-1.2-1-1.6l-.2-.2-.2.2c-.3.4-.4 1.1-.3 1.6 0 .4.1.8.4 1.1-.5.3-1.1.4-1.7.4H1a1 1 0 0 0-1 1c.1 1.9.8 6 5.2 6 5.8 0 6.8-3.3 8.2-6.8h.2c.9 0 1.7-.3 2.2-1.1l.2-.2-.2-.1zM1.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM7.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+      <path d="M7.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM9.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.1.3.3.3zM7.3 2h.9c.2 0 .3-.1.3-.3V.8c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM3.3 4.5h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.1 0-.3.1-.3.3v.9c0 .2.2.3.3.3zM5.3 7h.9c.2 0 .3-.1.3-.3v-.9c0-.2-.1-.3-.3-.3h-.9c-.2 0-.3.1-.3.3v.9c0 .2.2.3.3.3z" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="dollar-filled:12">
       <path fill-rule="evenodd" d="M12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zM6.5 3a.5.5 0 0 0-.5.5v.53A1.5 1.5 0 0 0 6.3 7h.4a.5.5 0 0 1 0 1H5.3a.5.5 0 0 0 0 1H6v.5a.5.5 0 0 0 1 0v-.53A1.5 1.5 0 0 0 6.7 6h-.4a.5.5 0 0 1 0-1h1.4a.5.5 0 0 0 0-1H7v-.5a.5.5 0 0 0-.5-.5z" clip-rule="evenodd" />
     </symbol>
@@ -606,6 +614,12 @@
       <path fill-rule="evenodd" d="M8.5 15c3.5899 0 6.5-2.9101 6.5-6.5S12.0899 2 8.5 2 2 4.9101 2 8.5 4.9101 15 8.5 15zm0 1c4.1421 0 7.5-3.3579 7.5-7.5S12.6421 1 8.5 1 1 4.3579 1 8.5 4.3579 16 8.5 16z" clip-rule="evenodd" />
       <path d="M8 4.5a.5.5 0 0 1 1 0V5h1.5a.5.5 0 0 1 0 1H8c-.5523 0-1 .4477-1 1s.4477 1 1 1h1c1.1046 0 2 .8954 2 2s-.8954 2-2 2v.5a.5.5 0 0 1-1 0V12H6.5a.5.5 0 0 1 0-1H9c.5523 0 1-.4477 1-1s-.4477-1-1-1H8c-1.1046 0-2-.8954-2-2s.8954-2 2-2v-.5z" />
     </symbol>
+    <symbol viewBox="0 0 12 12" id="dot:12">
+      <path d="M7.5 6a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
+    </symbol>
+    <symbol viewBox="0 0 16 16" id="dot:16">
+      <path d="M6,8a2,2 0 1,0 4,0a2,2 0 1,0 -4,0" />
+    </symbol>
     <symbol viewBox="0 0 12 12" id="emoticon-confused:12">
       <path fill-rule="evenodd" d="M6 11A5 5 0 106 1a5 5 0 000 10zm0 1A6 6 0 106 0a6 6 0 000 12z" clip-rule="evenodd" />
       <path d="M8.803 9a.244.244 0 00.2-.383C8.334 7.636 7.259 7 6.048 7c-1.21 0-2.285.636-2.956 1.617a.244.244 0 00.2.383h5.512zM4.75 4.75a1 1 0 11-2 0 1 1 0 012 0zM9.25 4.75a1 1 0 11-2 0 1 1 0 012 0z" />

package/styleguide/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Plesk UI Library 3.25.7</title>
+    <title>Plesk UI Library 3.26.0</title>
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
     <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
@@ -40,6 +40,6 @@
     </script>
     <noscript><div><img src="https://mc.yandex.ru/watch/56446840" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
     <!-- /Yandex.Metrika counter -->
-    <script src="build/bundle.91e6a6ac.js"></script>
+    <script src="build/bundle.0e0e8f42.js"></script>
   </body>
 </html>

package/types/src/components/Icon/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const NAMES_12: IconName[];
-export declare type IconName = 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-right' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-in' | 'arrow-up-in-cloud' | 'arrow-up-out' | 'arrow-up-tray' | 'arrows-four-directions' | 'arrows-inward' | 'arrows-loop' | 'arrows-opposite' | 'arrows-outward' | 'backup' | 'backup2' | 'bar-chart-vertical' | 'bar-chart-vertical-arrow-up' | 'bell' | 'book-email' | 'boundary' | 'box-diagonal-bottom-in' | 'box-diagonal-top-in' | 'brush' | 'bug' | 'calendar' | 'calendar-clock' | 'camera' | 'card' | 'card-ribbon' | 'card-row' | 'card-tile' | 'cd' | 'cd-up-in-cloud' | 'chain' | 'chain-broken' | 'chat' | 'check-list' | 'check-mark' | 'check-mark-circle' | 'check-mark-circle-filled' | 'chevron-double-down' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-diagonal' | 'clean' | 'clip' | 'clock' | 'clone' | 'cloud' | 'cloud-checkmark' | 'cloud-crossed' | 'cloud-graph' | 'code' | 'connection' | 'console' | 'console-filled' | 'copy' | 'copy-indicator' | 'cpu' | 'crane' | 'credit-cards' | 'cross-mark' | 'cross-mark-circle' | 'cross-mark-circle-filled' | 'crown-transfer' | 'dashboard' | 'database' | 'database-box' | 'database-plus' | 'deploy' | 'dollar' | 'dollar-filled' | 'emoticon-confused' | 'emoticon-dead' | 'emoticon-excited' | 'emoticon-happy' | 'emoticon-neutral' | 'emoticon-sad' | 'emoticon-smile' | 'enter' | 'exclamation-mark-circle' | 'exclamation-mark-circle-filled' | 'eye' | 'eye-closed' | 'facebook' | 'facebook-filled' | 'feedback' | 'filter' | 'filter-check-mark' | 'fire' | 'flag-globe' | 'floppy-disk' | 'folder-closed' | 'folder-key' | 'folder-network' | 'folder-open' | 'folders-tree' | 'four-squares' | 'gear' | 'git' | 'github' | 'globe' | 'hard-drive' | 'hard-drive-key' | 'hat' | 'hexagons' | 'home' | 'info-circle' | 'info-circle-filled' | 'ip-addresses' | 'kebab' | 'key' | 'lifebuoy' | 'lightbulb' | 'limit' | 'linux' | 'list' | 'list-check-mark' | 'location' | 'lock-closed' | 'lock-closed-check' | 'lock-closed-filled' | 'lock-open' | 'lock-open-cross' | 'lock-open-filled' | 'mail' | 'mail-settings' | 'megaphone' | 'menu' | 'menu-thin' | 'microsoft' | 'minimize' | 'minus' | 'minus-circle' | 'minus-circle-filled' | 'monitoring' | 'monitoring-off' | 'my-little-admin' | 'net' | 'nine-dots' | 'node-js' | 'package' | 'panel' | 'panel-check' | 'panel-eye' | 'panel-key' | 'panel-settings' | 'panels' | 'pause-circle' | 'pencil' | 'pencil-dialog' | 'php' | 'phpmyadmin' | 'pin' | 'pipette' | 'plans' | 'plugins' | 'plus' | 'power' | 'projects' | 'puzzle' | 'question-mark-circle' | 'question-mark-circle-filled' | 'ram' | 'react-js' | 'recycle' | 'refresh' | 'reload' | 'remove' | 'reset' | 'resource' | 'ribbon' | 'rocket' | 'ruby' | 'sand-clock' | 'scan' | 'screen' | 'search' | 'security-check' | 'send' | 'servers' | 'share' | 'shield' | 'shield-chain' | 'shopping-cart' | 'sidebar-right-hide' | 'sidebar-right-show' | 'signal-light' | 'site-page' | 'sleep' | 'sliders' | 'square-with-circles' | 'star' | 'star-circle-filled' | 'star-filled' | 'star-half-filled' | 'start' | 'start-circle' | 'stop' | 'stop-circle' | 'storage' | 'themes' | 'three-dots-horizontal' | 'three-dots-vertical' | 'tools' | 'transfer' | 'triangle-exclamation-mark' | 'triangle-exclamation-mark-filled' | 'unarchive' | 'user' | 'volume' | 'web' | 'web-plus' | 'web-settings' | 'windows' | 'wordpress';
+export declare type IconName = 'archive' | 'arrow-back' | 'arrow-diagonal-out' | 'arrow-down' | 'arrow-down-in' | 'arrow-down-out' | 'arrow-down-tray' | 'arrow-left' | 'arrow-right' | 'arrow-right-in' | 'arrow-right-out' | 'arrow-up' | 'arrow-up-circle' | 'arrow-up-in' | 'arrow-up-in-cloud' | 'arrow-up-out' | 'arrow-up-tray' | 'arrows-four-directions' | 'arrows-inward' | 'arrows-loop' | 'arrows-opposite' | 'arrows-outward' | 'backup' | 'backup2' | 'bar-chart-vertical' | 'bar-chart-vertical-arrow-up' | 'bell' | 'book-email' | 'boundary' | 'box-diagonal-bottom-in' | 'box-diagonal-top-in' | 'brush' | 'bug' | 'calendar' | 'calendar-clock' | 'camera' | 'card' | 'card-ribbon' | 'card-row' | 'card-tile' | 'cd' | 'cd-up-in-cloud' | 'chain' | 'chain-broken' | 'chat' | 'check-list' | 'check-mark' | 'check-mark-circle' | 'check-mark-circle-filled' | 'chevron-double-down' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-diagonal' | 'clean' | 'clip' | 'clock' | 'clone' | 'cloud' | 'cloud-checkmark' | 'cloud-crossed' | 'cloud-graph' | 'code' | 'connection' | 'console' | 'console-filled' | 'copy' | 'copy-indicator' | 'cpu' | 'crane' | 'credit-cards' | 'cross-mark' | 'cross-mark-circle' | 'cross-mark-circle-filled' | 'crown-transfer' | 'dashboard' | 'database' | 'database-box' | 'database-plus' | 'deploy' | 'docker-filled' | 'dollar' | 'dollar-filled' | 'dot' | 'emoticon-confused' | 'emoticon-dead' | 'emoticon-excited' | 'emoticon-happy' | 'emoticon-neutral' | 'emoticon-sad' | 'emoticon-smile' | 'enter' | 'exclamation-mark-circle' | 'exclamation-mark-circle-filled' | 'eye' | 'eye-closed' | 'facebook' | 'facebook-filled' | 'feedback' | 'filter' | 'filter-check-mark' | 'fire' | 'flag-globe' | 'floppy-disk' | 'folder-closed' | 'folder-key' | 'folder-network' | 'folder-open' | 'folders-tree' | 'four-squares' | 'gear' | 'git' | 'github' | 'globe' | 'hard-drive' | 'hard-drive-key' | 'hat' | 'hexagons' | 'home' | 'info-circle' | 'info-circle-filled' | 'ip-addresses' | 'kebab' | 'key' | 'lifebuoy' | 'lightbulb' | 'limit' | 'linux' | 'list' | 'list-check-mark' | 'location' | 'lock-closed' | 'lock-closed-check' | 'lock-closed-filled' | 'lock-open' | 'lock-open-cross' | 'lock-open-filled' | 'mail' | 'mail-settings' | 'megaphone' | 'menu' | 'menu-thin' | 'microsoft' | 'minimize' | 'minus' | 'minus-circle' | 'minus-circle-filled' | 'monitoring' | 'monitoring-off' | 'my-little-admin' | 'net' | 'nine-dots' | 'node-js' | 'package' | 'panel' | 'panel-check' | 'panel-eye' | 'panel-key' | 'panel-settings' | 'panels' | 'pause-circle' | 'pencil' | 'pencil-dialog' | 'php' | 'phpmyadmin' | 'pin' | 'pipette' | 'plans' | 'plugins' | 'plus' | 'power' | 'projects' | 'puzzle' | 'question-mark-circle' | 'question-mark-circle-filled' | 'ram' | 'react-js' | 'recycle' | 'refresh' | 'reload' | 'remove' | 'reset' | 'resource' | 'ribbon' | 'rocket' | 'ruby' | 'sand-clock' | 'scan' | 'screen' | 'search' | 'security-check' | 'send' | 'servers' | 'share' | 'shield' | 'shield-chain' | 'shopping-cart' | 'sidebar-right-hide' | 'sidebar-right-show' | 'signal-light' | 'site-page' | 'sleep' | 'sliders' | 'square-with-circles' | 'star' | 'star-circle-filled' | 'star-filled' | 'star-half-filled' | 'start' | 'start-circle' | 'stop' | 'stop-circle' | 'storage' | 'themes' | 'three-dots-horizontal' | 'three-dots-vertical' | 'tools' | 'transfer' | 'triangle-exclamation-mark' | 'triangle-exclamation-mark-filled' | 'unarchive' | 'user' | 'volume' | 'web' | 'web-plus' | 'web-settings' | 'windows' | 'wordpress';
 export declare const NAMES: IconName[];

package/types/src/components/ItemLink/ItemLink.d.ts

@@ -9,6 +9,10 @@ declare type ItemLinkProps = {
      * @ignore
      */
     className?: string;
+    /**
+     * @ignore
+     */
+    hoverable?: boolean;
     /**
      * Content of the `ItemLink`.
      * @since 2.3.0

package/types/src/components/ItemLink/ItemLink.stories.d.ts

@@ -3,6 +3,7 @@ export declare const Basic: {
     (args: React.PropsWithChildren<{
         baseClassName?: string | undefined;
         className?: string | undefined;
+        hoverable?: boolean | undefined;
         children: React.ReactNode;
     } & React.HTMLProps<HTMLDivElement>>): JSX.Element;
     args: {

package/types/src/components/ItemList/ItemList.d.ts

@@ -9,6 +9,7 @@ declare type ItemProps = {
     value?: ItemValue;
     view?: 'simple' | 'card';
     disabled?: boolean;
+    hoverable?: boolean;
     footer?: ReactNode;
 };
 declare type ItemListProps = {
@@ -98,7 +99,14 @@ declare class ItemList extends Component<ItemListProps, ItemListState> {
     componentDidMount(): void;
     createItemProps: (item: React.ReactElement<ItemProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>) => ItemProps;
     renderNormal({ baseClassName, children, ...props }: ItemListProps): JSX.Element;
+    someChild(predicate: (child: ReactElement<ItemProps>) => boolean): boolean;
+    /**
+     * There are some states where we can't manage hoverable state
+     */
+    canManageHoverableState(): boolean;
+    isHoverable(): boolean;
     hasViewCard(): boolean;
+    hasHoverableCard(): boolean;
     renderReorderable({ baseClassName, onReorderEnd, children, ...props }: ItemListProps): JSX.Element | null;
     render(): JSX.Element;
 }

package/types/src/components/ItemList/ItemList.stories.d.ts

@@ -15,6 +15,7 @@ export declare const Basic: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -37,6 +38,7 @@ export declare const Basic: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -61,6 +63,7 @@ export declare const Cards: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -83,6 +86,7 @@ export declare const Cards: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -107,6 +111,7 @@ export declare const Reorderables: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -129,6 +134,7 @@ export declare const Reorderables: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -153,6 +159,7 @@ export declare const Selectables: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;
@@ -175,6 +182,103 @@ export declare const Selectables: {
             value?: string | number | undefined;
             view?: "card" | "simple" | undefined;
             disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
+            footer?: React.ReactNode;
+        }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
+        className?: string | undefined;
+        baseClassName?: string | undefined;
+    } & Pick<React.PropsWithChildren<{
+        gap?: "md" | "lg" | "xs" | "sm" | "xl" | undefined;
+    }>, "gap">;
+};
+export declare const HoverableItemList: {
+    (args: {
+        hoverable?: boolean | undefined;
+        stretchable?: boolean | undefined;
+        selectable?: boolean | "multiple" | "toggleable" | undefined;
+        onSelect?: ((value: string | number | (string | number)[] | null) => void) | undefined;
+        value?: string | number | (string | number)[] | undefined;
+        defaultValue?: string | number | (string | number)[] | undefined;
+        reorderable?: boolean | undefined;
+        onReorderEnd?: (() => void) | undefined;
+        children: (React.ReactElement<{
+            className?: string | undefined;
+            onClick?: ((e: React.MouseEvent<React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>, MouseEvent>) => void) | undefined;
+            value?: string | number | undefined;
+            view?: "card" | "simple" | undefined;
+            disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
+            footer?: React.ReactNode;
+        }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
+        className?: string | undefined;
+        baseClassName?: string | undefined;
+    } & Pick<React.PropsWithChildren<{
+        gap?: "md" | "lg" | "xs" | "sm" | "xl" | undefined;
+    }>, "gap">): JSX.Element;
+    args: {
+        hoverable?: boolean | undefined;
+        stretchable?: boolean | undefined;
+        selectable?: boolean | "multiple" | "toggleable" | undefined;
+        onSelect?: ((value: string | number | (string | number)[] | null) => void) | undefined;
+        value?: string | number | (string | number)[] | undefined;
+        defaultValue?: string | number | (string | number)[] | undefined;
+        reorderable?: boolean | undefined;
+        onReorderEnd?: (() => void) | undefined;
+        children: (React.ReactElement<{
+            className?: string | undefined;
+            onClick?: ((e: React.MouseEvent<React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>, MouseEvent>) => void) | undefined;
+            value?: string | number | undefined;
+            view?: "card" | "simple" | undefined;
+            disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
+            footer?: React.ReactNode;
+        }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
+        className?: string | undefined;
+        baseClassName?: string | undefined;
+    } & Pick<React.PropsWithChildren<{
+        gap?: "md" | "lg" | "xs" | "sm" | "xl" | undefined;
+    }>, "gap">;
+};
+export declare const HoverableItems: {
+    (args: {
+        hoverable?: boolean | undefined;
+        stretchable?: boolean | undefined;
+        selectable?: boolean | "multiple" | "toggleable" | undefined;
+        onSelect?: ((value: string | number | (string | number)[] | null) => void) | undefined;
+        value?: string | number | (string | number)[] | undefined;
+        defaultValue?: string | number | (string | number)[] | undefined;
+        reorderable?: boolean | undefined;
+        onReorderEnd?: (() => void) | undefined;
+        children: (React.ReactElement<{
+            className?: string | undefined;
+            onClick?: ((e: React.MouseEvent<React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>, MouseEvent>) => void) | undefined;
+            value?: string | number | undefined;
+            view?: "card" | "simple" | undefined;
+            disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
+            footer?: React.ReactNode;
+        }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
+        className?: string | undefined;
+        baseClassName?: string | undefined;
+    } & Pick<React.PropsWithChildren<{
+        gap?: "md" | "lg" | "xs" | "sm" | "xl" | undefined;
+    }>, "gap">): JSX.Element;
+    args: {
+        hoverable?: boolean | undefined;
+        stretchable?: boolean | undefined;
+        selectable?: boolean | "multiple" | "toggleable" | undefined;
+        onSelect?: ((value: string | number | (string | number)[] | null) => void) | undefined;
+        value?: string | number | (string | number)[] | undefined;
+        defaultValue?: string | number | (string | number)[] | undefined;
+        reorderable?: boolean | undefined;
+        onReorderEnd?: (() => void) | undefined;
+        children: (React.ReactElement<{
+            className?: string | undefined;
+            onClick?: ((e: React.MouseEvent<React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>, MouseEvent>) => void) | undefined;
+            value?: string | number | undefined;
+            view?: "card" | "simple" | undefined;
+            disabled?: boolean | undefined;
+            hoverable?: boolean | undefined;
             footer?: React.ReactNode;
         }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null)[];
         className?: string | undefined;