@solostylist/ui-kit 1.0.230 → 2.0.0

package/dist/theme/components/list-item-button.d.ts

@@ -3,37 +3,58 @@ export declare const listItemButtonStyles: (theme: Theme) => {
     [x: string]: string | number | {
         color: string;
         backgroundColor?: undefined;
-        '&:focus-visible'?: undefined;
-        '&:hover'?: undefined;
+        '&.Mui-focusVisible'?: undefined;
+        '@media (hover: hover) and (pointer: fine)'?: undefined;
+        '&:hover:not(.Mui-selected)'?: undefined;
     } | {
         [x: string]: string | {
             color: string;
-            backgroundColor?: undefined;
+            '&:hover'?: undefined;
         } | {
+            outline: string;
+            outlineOffset: number;
             backgroundColor: string;
             color?: undefined;
+            '&:hover'?: undefined;
+        } | {
+            '&:hover': {
+                backgroundColor: string;
+            };
+            color?: undefined;
         };
         backgroundColor: string;
         color: string;
-        '&:focus-visible': {
+        '&.Mui-focusVisible': {
+            outline: string;
+            outlineOffset: number;
             backgroundColor: string;
         };
-        '&:hover': {
-            backgroundColor: string;
+        "@media (hover: hover) and (pointer: fine)": {
+            '&:hover': {
+                backgroundColor: string;
+            };
         };
+        '&:hover:not(.Mui-selected)'?: undefined;
     } | {
-        [x: string]: string | {
+        '&:hover:not(.Mui-selected)': {
+            [x: string]: string | {
+                color: string;
+            };
+            backgroundColor: string;
             color: string;
         };
-        backgroundColor: string;
-        color: string;
-        '&:focus-visible'?: undefined;
-        '&:hover'?: undefined;
+        color?: undefined;
+        backgroundColor?: undefined;
+        '&.Mui-focusVisible'?: undefined;
+        '@media (hover: hover) and (pointer: fine)'?: undefined;
     } | {
+        outline: string;
+        outlineOffset: number;
         backgroundColor: string;
         color?: undefined;
-        '&:focus-visible'?: undefined;
-        '&:hover'?: undefined;
+        '&.Mui-focusVisible'?: undefined;
+        '@media (hover: hover) and (pointer: fine)'?: undefined;
+        '&:hover:not(.Mui-selected)'?: undefined;
     };
     alignItems: string;
     display: string;
@@ -45,37 +66,53 @@ export declare const listItemButtonStyles: (theme: Theme) => {
     '&.Mui-selected': {
         [x: string]: string | {
             color: string;
-            backgroundColor?: undefined;
+            '&:hover'?: undefined;
         } | {
+            outline: string;
+            outlineOffset: number;
             backgroundColor: string;
             color?: undefined;
+            '&:hover'?: undefined;
+        } | {
+            '&:hover': {
+                backgroundColor: string;
+            };
+            color?: undefined;
         };
         backgroundColor: string;
         color: string;
-        '&:focus-visible': {
+        '&.Mui-focusVisible': {
+            outline: string;
+            outlineOffset: number;
             backgroundColor: string;
         };
-        '&:hover': {
-            backgroundColor: string;
+        "@media (hover: hover) and (pointer: fine)": {
+            '&:hover': {
+                backgroundColor: string;
+            };
         };
     };
-    '&:hover:not(.Mui-selected)': {
-        [x: string]: string | {
+    "@media (hover: hover) and (pointer: fine)": {
+        '&:hover:not(.Mui-selected)': {
+            [x: string]: string | {
+                color: string;
+            };
+            backgroundColor: string;
             color: string;
         };
-        backgroundColor: string;
-        color: string;
     };
-    '&:focus-visible': {
+    '&.Mui-focusVisible': {
+        outline: string;
+        outlineOffset: number;
         backgroundColor: string;
     };
 };
 export declare const MuiListItemButton: {
     styleOverrides: {
-        root: ({ theme }: import('@mui/material').ListItemButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, keyof import('@mui/material').ListItemButtonOwnProps> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "sx" | "alignItems" | "disabled" | "disableGutters" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "divider" | "dense" | "selected"> & {
+        root: ({ theme }: import('@mui/material').ListItemButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, keyof import('@mui/material').ListItemButtonOwnProps> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "disabled" | "disableGutters" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "divider" | "selected" | "dense"> & {
             component?: React.ElementType | undefined;
         } & Record<string, unknown> & {
-            ownerState: import('@mui/material').ListItemButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, keyof import('@mui/material').ListItemButtonOwnProps> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "sx" | "alignItems" | "disabled" | "disableGutters" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "divider" | "dense" | "selected"> & {
+            ownerState: import('@mui/material').ListItemButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, keyof import('@mui/material').ListItemButtonOwnProps> & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "disabled" | "disableGutters" | "autoFocus" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "divider" | "selected" | "dense"> & {
                 component?: React.ElementType | undefined;
             } & Record<string, unknown>;
         } & {
@@ -84,37 +121,58 @@ export declare const MuiListItemButton: {
             [x: string]: string | number | {
                 color: string;
                 backgroundColor?: undefined;
-                '&:focus-visible'?: undefined;
-                '&:hover'?: undefined;
+                '&.Mui-focusVisible'?: undefined;
+                '@media (hover: hover) and (pointer: fine)'?: undefined;
+                '&:hover:not(.Mui-selected)'?: undefined;
             } | {
                 [x: string]: string | {
                     color: string;
-                    backgroundColor?: undefined;
+                    '&:hover'?: undefined;
                 } | {
+                    outline: string;
+                    outlineOffset: number;
                     backgroundColor: string;
                     color?: undefined;
+                    '&:hover'?: undefined;
+                } | {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                    color?: undefined;
                 };
                 backgroundColor: string;
                 color: string;
-                '&:focus-visible': {
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: number;
                     backgroundColor: string;
                 };
-                '&:hover': {
-                    backgroundColor: string;
+                "@media (hover: hover) and (pointer: fine)": {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
                 };
+                '&:hover:not(.Mui-selected)'?: undefined;
             } | {
-                [x: string]: string | {
+                '&:hover:not(.Mui-selected)': {
+                    [x: string]: string | {
+                        color: string;
+                    };
+                    backgroundColor: string;
                     color: string;
                 };
-                backgroundColor: string;
-                color: string;
-                '&:focus-visible'?: undefined;
-                '&:hover'?: undefined;
+                color?: undefined;
+                backgroundColor?: undefined;
+                '&.Mui-focusVisible'?: undefined;
+                '@media (hover: hover) and (pointer: fine)'?: undefined;
             } | {
+                outline: string;
+                outlineOffset: number;
                 backgroundColor: string;
                 color?: undefined;
-                '&:focus-visible'?: undefined;
-                '&:hover'?: undefined;
+                '&.Mui-focusVisible'?: undefined;
+                '@media (hover: hover) and (pointer: fine)'?: undefined;
+                '&:hover:not(.Mui-selected)'?: undefined;
             };
             alignItems: string;
             display: string;
@@ -126,28 +184,44 @@ export declare const MuiListItemButton: {
             '&.Mui-selected': {
                 [x: string]: string | {
                     color: string;
-                    backgroundColor?: undefined;
+                    '&:hover'?: undefined;
                 } | {
+                    outline: string;
+                    outlineOffset: number;
                     backgroundColor: string;
                     color?: undefined;
+                    '&:hover'?: undefined;
+                } | {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                    color?: undefined;
                 };
                 backgroundColor: string;
                 color: string;
-                '&:focus-visible': {
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: number;
                     backgroundColor: string;
                 };
-                '&:hover': {
-                    backgroundColor: string;
+                "@media (hover: hover) and (pointer: fine)": {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
                 };
             };
-            '&:hover:not(.Mui-selected)': {
-                [x: string]: string | {
+            "@media (hover: hover) and (pointer: fine)": {
+                '&:hover:not(.Mui-selected)': {
+                    [x: string]: string | {
+                        color: string;
+                    };
+                    backgroundColor: string;
                     color: string;
                 };
-                backgroundColor: string;
-                color: string;
             };
-            '&:focus-visible': {
+            '&.Mui-focusVisible': {
+                outline: string;
+                outlineOffset: number;
                 backgroundColor: string;
             };
         };

package/dist/theme/components/list-item-button.js

@@ -1,27 +1,34 @@
-import { n as e } from "../../svgIconClasses-BtHvkhy5.js";
+import { actionHoverMedia as e, getFocusVisibleStyle as t } from "./action-styles.js";
+import { n } from "../../svgIconClasses-C8D4AsMj.js";
 //#region lib/theme/components/list-item-button.tsx
-var t = (t) => ({
+var r = (r) => ({
 	alignItems: "center",
 	display: "flex",
-	gap: t.spacing(1),
-	padding: t.spacing(1, 2),
-	borderRadius: t.radius.none,
+	gap: r.spacing(1),
+	padding: r.spacing(1, 2),
+	borderRadius: r.radius.none,
 	whiteSpace: "nowrap",
-	color: (t.vars ?? t).palette.text.secondary,
-	[`& .${e.root}`]: { color: (t.vars ?? t).palette.text.secondary },
+	color: (r.vars ?? r).palette.text.secondary,
+	[`& .${n.root}`]: { color: (r.vars ?? r).palette.text.secondary },
 	"&.Mui-selected": {
-		backgroundColor: (t.vars ?? t).palette.action.selected,
-		color: (t.vars ?? t).palette.text.primary,
-		[`& .${e.root}`]: { color: (t.vars ?? t).palette.text.primary },
-		"&:focus-visible": { backgroundColor: (t.vars ?? t).palette.action.selected },
-		"&:hover": { backgroundColor: (t.vars ?? t).palette.action.selected }
+		backgroundColor: (r.vars ?? r).palette.action.selected,
+		color: (r.vars ?? r).palette.text.primary,
+		[`& .${n.root}`]: { color: (r.vars ?? r).palette.text.primary },
+		"&.Mui-focusVisible": {
+			backgroundColor: (r.vars ?? r).palette.action.selected,
+			...t(r)
+		},
+		[e]: { "&:hover": { backgroundColor: (r.vars ?? r).palette.action.selected } }
 	},
-	"&:hover:not(.Mui-selected)": {
-		backgroundColor: (t.vars ?? t).palette.action.hover,
-		color: (t.vars ?? t).palette.text.primary,
-		[`& .${e.root}`]: { color: (t.vars ?? t).palette.text.primary }
-	},
-	"&:focus-visible": { backgroundColor: "transparent" }
-}), n = { styleOverrides: { root: ({ theme: e }) => t(e) } };
+	[e]: { "&:hover:not(.Mui-selected)": {
+		backgroundColor: (r.vars ?? r).palette.action.hover,
+		color: (r.vars ?? r).palette.text.primary,
+		[`& .${n.root}`]: { color: (r.vars ?? r).palette.text.primary }
+	} },
+	"&.Mui-focusVisible": {
+		backgroundColor: (r.vars ?? r).palette.action.focus,
+		...t(r)
+	}
+}), i = { styleOverrides: { root: ({ theme: e }) => r(e) } };
 //#endregion
-export { n as MuiListItemButton, t as listItemButtonStyles };
+export { i as MuiListItemButton, r as listItemButtonStyles };

package/dist/theme/components/list-item.d.ts

@@ -1,10 +1,10 @@
 import { Theme } from '@mui/material/styles';
 export declare const MuiListItem: {
     styleOverrides: {
-        root: ({ theme }: import('@mui/material').ListItemOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "className" | "style" | "classes" | "children" | "sx" | "alignItems" | "disableGutters" | "slots" | "slotProps" | "divider" | "dense" | "disablePadding" | "secondaryAction"> & {
+        root: ({ theme }: import('@mui/material').ListItemOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "disableGutters" | "slots" | "slotProps" | "divider" | "dense" | "disablePadding" | "secondaryAction"> & {
             component?: React.ElementType | undefined;
         } & Record<string, unknown> & {
-            ownerState: import('@mui/material').ListItemOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "className" | "style" | "classes" | "children" | "sx" | "alignItems" | "disableGutters" | "slots" | "slotProps" | "divider" | "dense" | "disablePadding" | "secondaryAction"> & {
+            ownerState: import('@mui/material').ListItemOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "disableGutters" | "slots" | "slotProps" | "divider" | "dense" | "disablePadding" | "secondaryAction"> & {
                 component?: React.ElementType | undefined;
             } & Record<string, unknown>;
         } & {
@@ -14,37 +14,58 @@ export declare const MuiListItem: {
                 [x: string]: string | number | {
                     color: string;
                     backgroundColor?: undefined;
-                    '&:focus-visible'?: undefined;
-                    '&:hover'?: undefined;
+                    '&.Mui-focusVisible'?: undefined;
+                    '@media (hover: hover) and (pointer: fine)'?: undefined;
+                    '&:hover:not(.Mui-selected)'?: undefined;
                 } | {
                     [x: string]: string | {
                         color: string;
-                        backgroundColor?: undefined;
+                        '&:hover'?: undefined;
                     } | {
+                        outline: string;
+                        outlineOffset: number;
                         backgroundColor: string;
                         color?: undefined;
+                        '&:hover'?: undefined;
+                    } | {
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
+                        color?: undefined;
                     };
                     backgroundColor: string;
                     color: string;
-                    '&:focus-visible': {
+                    '&.Mui-focusVisible': {
+                        outline: string;
+                        outlineOffset: number;
                         backgroundColor: string;
                     };
-                    '&:hover': {
-                        backgroundColor: string;
+                    "@media (hover: hover) and (pointer: fine)": {
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
                     };
+                    '&:hover:not(.Mui-selected)'?: undefined;
                 } | {
-                    [x: string]: string | {
+                    '&:hover:not(.Mui-selected)': {
+                        [x: string]: string | {
+                            color: string;
+                        };
+                        backgroundColor: string;
                         color: string;
                     };
-                    backgroundColor: string;
-                    color: string;
-                    '&:focus-visible'?: undefined;
-                    '&:hover'?: undefined;
+                    color?: undefined;
+                    backgroundColor?: undefined;
+                    '&.Mui-focusVisible'?: undefined;
+                    '@media (hover: hover) and (pointer: fine)'?: undefined;
                 } | {
+                    outline: string;
+                    outlineOffset: number;
                     backgroundColor: string;
                     color?: undefined;
-                    '&:focus-visible'?: undefined;
-                    '&:hover'?: undefined;
+                    '&.Mui-focusVisible'?: undefined;
+                    '@media (hover: hover) and (pointer: fine)'?: undefined;
+                    '&:hover:not(.Mui-selected)'?: undefined;
                 };
                 alignItems: string;
                 display: string;
@@ -56,28 +77,44 @@ export declare const MuiListItem: {
                 '&.Mui-selected': {
                     [x: string]: string | {
                         color: string;
-                        backgroundColor?: undefined;
+                        '&:hover'?: undefined;
                     } | {
+                        outline: string;
+                        outlineOffset: number;
                         backgroundColor: string;
                         color?: undefined;
+                        '&:hover'?: undefined;
+                    } | {
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
+                        color?: undefined;
                     };
                     backgroundColor: string;
                     color: string;
-                    '&:focus-visible': {
+                    '&.Mui-focusVisible': {
+                        outline: string;
+                        outlineOffset: number;
                         backgroundColor: string;
                     };
-                    '&:hover': {
-                        backgroundColor: string;
+                    "@media (hover: hover) and (pointer: fine)": {
+                        '&:hover': {
+                            backgroundColor: string;
+                        };
                     };
                 };
-                '&:hover:not(.Mui-selected)': {
-                    [x: string]: string | {
+                "@media (hover: hover) and (pointer: fine)": {
+                    '&:hover:not(.Mui-selected)': {
+                        [x: string]: string | {
+                            color: string;
+                        };
+                        backgroundColor: string;
                         color: string;
                     };
-                    backgroundColor: string;
-                    color: string;
                 };
-                '&:focus-visible': {
+                '&.Mui-focusVisible': {
+                    outline: string;
+                    outlineOffset: number;
                     backgroundColor: string;
                 };
             } | {

package/dist/theme/components/list-item.js

@@ -1,6 +1,6 @@
-import { t as e } from "../../buttonBaseClasses-BVDyR-hz.js";
-import { n as t } from "../../svgIconClasses-BtHvkhy5.js";
-import { n } from "../../typographyClasses-CiDYRanL.js";
+import { t as e } from "../../buttonBaseClasses-BvBqFLb_.js";
+import { n as t } from "../../svgIconClasses-C8D4AsMj.js";
+import { n } from "../../typographyClasses-BLM3NmYd.js";
 import { listItemButtonStyles as r } from "./list-item-button.js";
 //#region lib/theme/components/list-item.tsx
 var i = { styleOverrides: { root: ({ theme: i }) => ({

package/dist/theme/components/list-subheader.d.ts

@@ -1,10 +1,10 @@
 import { Theme } from '@mui/material/styles';
 export declare const MuiListSubheader: {
     styleOverrides: {
-        root: ({ theme }: import('@mui/material').ListSubheaderOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "className" | "style" | "classes" | "children" | "sx" | "color" | "inset" | "disableGutters" | "disableSticky"> & {
+        root: ({ theme }: import('@mui/material').ListSubheaderOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "color" | "inset" | "className" | "style" | "classes" | "children" | "sx" | "disableGutters" | "disableSticky"> & {
             component?: React.ElementType | undefined;
         } & Record<string, unknown> & {
-            ownerState: import('@mui/material').ListSubheaderOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "className" | "style" | "classes" | "children" | "sx" | "color" | "inset" | "disableGutters" | "disableSticky"> & {
+            ownerState: import('@mui/material').ListSubheaderOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "color" | "inset" | "className" | "style" | "classes" | "children" | "sx" | "disableGutters" | "disableSticky"> & {
                 component?: React.ElementType | undefined;
             } & Record<string, unknown>;
         } & {