@solostylist/ui-kit 1.0.8 → 1.0.10

package/dist/theme/customizations/inputs.js

@@ -0,0 +1,447 @@
+import { j as l } from "../../jsx-runtime-C5mzlN2N.js";
+import { c as t } from "../../createSvgIcon-B7_s-URK.js";
+import { brand as e, gray as o } from "../theme-primitives.js";
+import { o as i } from "../../outlinedInputClasses-BTtPbpE5.js";
+import { g as s } from "../../generateUtilityClasses-STjIp_B9.js";
+import { s as n } from "../../svgIconClasses-SzHbWjUv.js";
+import { a } from "../../createTheme-BZxWCiBm.js";
+const c = t(/* @__PURE__ */ l.jsx("path", {
+  d: "M18 19H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1m1-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"
+}), "CheckBoxOutlineBlankRounded"), p = t(/* @__PURE__ */ l.jsx("path", {
+  d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
+}), "CheckRounded"), u = t(/* @__PURE__ */ l.jsx("path", {
+  d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
+}), "RemoveRounded"), b = s("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), d = s("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), m = {
+  MuiButtonBase: {
+    defaultProps: {
+      disableTouchRipple: !0,
+      disableRipple: !0
+    },
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        boxSizing: "border-box",
+        transition: "all 100ms ease-in",
+        "&:focus-visible": {
+          outline: `3px solid ${a(r.palette.primary.main, 0.5)}`,
+          outlineOffset: "2px"
+        }
+      })
+    }
+  },
+  MuiButton: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        boxShadow: "none",
+        borderRadius: (r.vars || r).shape.borderRadius,
+        textTransform: "none",
+        variants: [
+          {
+            props: {
+              size: "small"
+            },
+            style: {
+              height: "2.25rem",
+              padding: "8px 12px"
+            }
+          },
+          {
+            props: {
+              size: "medium"
+            },
+            style: {
+              height: "2.5rem"
+              // 40px
+            }
+          },
+          {
+            props: {
+              color: "primary",
+              variant: "contained"
+            },
+            style: {
+              color: "white",
+              backgroundColor: o[900],
+              backgroundImage: `linear-gradient(to bottom, ${o[700]}, ${o[800]})`,
+              boxShadow: `inset 0 1px 0 ${o[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
+              border: `1px solid ${o[700]}`,
+              "&:hover": {
+                backgroundImage: "none",
+                backgroundColor: o[700],
+                boxShadow: "none"
+              },
+              "&:active": {
+                backgroundColor: o[800]
+              },
+              ...r.applyStyles("dark", {
+                color: "black",
+                backgroundColor: o[50],
+                backgroundImage: `linear-gradient(to bottom, ${o[100]}, ${o[50]})`,
+                boxShadow: "inset 0 -1px 0  hsl(220, 30%, 80%)",
+                border: `1px solid ${o[50]}`,
+                "&:hover": {
+                  backgroundImage: "none",
+                  backgroundColor: o[300],
+                  boxShadow: "none"
+                },
+                "&:active": {
+                  backgroundColor: o[400]
+                }
+              })
+            }
+          },
+          {
+            props: {
+              color: "secondary",
+              variant: "contained"
+            },
+            style: {
+              color: "white",
+              backgroundColor: e[300],
+              backgroundImage: `linear-gradient(to bottom, ${a(e[400], 0.8)}, ${e[500]})`,
+              boxShadow: `inset 0 2px 0 ${a(e[200], 0.2)}, inset 0 -2px 0 ${a(e[700], 0.4)}`,
+              border: `1px solid ${e[500]}`,
+              "&:hover": {
+                backgroundColor: e[700],
+                boxShadow: "none"
+              },
+              "&:active": {
+                backgroundColor: e[700],
+                backgroundImage: "none"
+              }
+            }
+          },
+          {
+            props: {
+              variant: "outlined"
+            },
+            style: {
+              color: (r.vars || r).palette.text.primary,
+              border: "1px solid",
+              borderColor: o[200],
+              backgroundColor: a(o[50], 0.3),
+              "&:hover": {
+                backgroundColor: o[100],
+                borderColor: o[300]
+              },
+              "&:active": {
+                backgroundColor: o[200]
+              },
+              ...r.applyStyles("dark", {
+                backgroundColor: o[800],
+                borderColor: o[700],
+                "&:hover": {
+                  backgroundColor: o[900],
+                  borderColor: o[600]
+                },
+                "&:active": {
+                  backgroundColor: o[900]
+                }
+              })
+            }
+          },
+          {
+            props: {
+              color: "secondary",
+              variant: "outlined"
+            },
+            style: {
+              color: e[700],
+              border: "1px solid",
+              borderColor: e[200],
+              backgroundColor: e[50],
+              "&:hover": {
+                backgroundColor: e[100],
+                borderColor: e[400]
+              },
+              "&:active": {
+                backgroundColor: a(e[200], 0.7)
+              },
+              ...r.applyStyles("dark", {
+                color: e[50],
+                border: "1px solid",
+                borderColor: e[900],
+                backgroundColor: a(e[900], 0.3),
+                "&:hover": {
+                  borderColor: e[700],
+                  backgroundColor: a(e[900], 0.6)
+                },
+                "&:active": {
+                  backgroundColor: a(e[900], 0.5)
+                }
+              })
+            }
+          },
+          {
+            props: {
+              variant: "text"
+            },
+            style: {
+              color: o[600],
+              "&:hover": {
+                backgroundColor: o[100]
+              },
+              "&:active": {
+                backgroundColor: o[200]
+              },
+              ...r.applyStyles("dark", {
+                color: o[50],
+                "&:hover": {
+                  backgroundColor: o[700]
+                },
+                "&:active": {
+                  backgroundColor: a(o[700], 0.7)
+                }
+              })
+            }
+          },
+          {
+            props: {
+              color: "secondary",
+              variant: "text"
+            },
+            style: {
+              color: e[700],
+              "&:hover": {
+                backgroundColor: a(e[100], 0.5)
+              },
+              "&:active": {
+                backgroundColor: a(e[200], 0.7)
+              },
+              ...r.applyStyles("dark", {
+                color: e[100],
+                "&:hover": {
+                  backgroundColor: a(e[900], 0.5)
+                },
+                "&:active": {
+                  backgroundColor: a(e[900], 0.3)
+                }
+              })
+            }
+          }
+        ]
+      })
+    }
+  },
+  MuiIconButton: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        boxShadow: "none",
+        borderRadius: (r.vars || r).shape.borderRadius,
+        textTransform: "none",
+        fontWeight: r.typography.fontWeightMedium,
+        letterSpacing: 0,
+        color: (r.vars || r).palette.text.primary,
+        border: "1px solid ",
+        borderColor: o[200],
+        backgroundColor: a(o[50], 0.3),
+        "&:hover": {
+          backgroundColor: o[100],
+          borderColor: o[300]
+        },
+        "&:active": {
+          backgroundColor: o[200]
+        },
+        ...r.applyStyles("dark", {
+          backgroundColor: o[800],
+          borderColor: o[700],
+          "&:hover": {
+            backgroundColor: o[900],
+            borderColor: o[600]
+          },
+          "&:active": {
+            backgroundColor: o[900]
+          }
+        }),
+        variants: [
+          {
+            props: {
+              size: "small"
+            },
+            style: {
+              width: "2.25rem",
+              height: "2.25rem",
+              padding: "0.25rem",
+              [`& .${n.root}`]: { fontSize: "1rem" }
+            }
+          },
+          {
+            props: {
+              size: "medium"
+            },
+            style: {
+              width: "2.5rem",
+              height: "2.5rem"
+            }
+          }
+        ]
+      })
+    }
+  },
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        borderRadius: "10px",
+        boxShadow: `0 4px 16px ${a(o[400], 0.2)}`,
+        [`& .${d.selected}`]: {
+          color: e[500]
+        },
+        ...r.applyStyles("dark", {
+          [`& .${d.selected}`]: {
+            color: "#fff"
+          },
+          boxShadow: `0 4px 16px ${a(e[700], 0.5)}`
+        })
+      })
+    }
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        padding: "12px 16px",
+        textTransform: "none",
+        borderRadius: "10px",
+        fontWeight: 500,
+        ...r.applyStyles("dark", {
+          color: o[400],
+          boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
+          [`&.${b.selected}`]: {
+            color: e[300]
+          }
+        })
+      })
+    }
+  },
+  MuiCheckbox: {
+    defaultProps: {
+      disableRipple: !0,
+      icon: /* @__PURE__ */ l.jsx(c, { sx: { color: "hsla(210, 0%, 0%, 0.0)" } }),
+      checkedIcon: /* @__PURE__ */ l.jsx(p, { sx: { height: 14, width: 14 } }),
+      indeterminateIcon: /* @__PURE__ */ l.jsx(u, { sx: { height: 14, width: 14 } })
+    },
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        margin: 10,
+        height: 16,
+        width: 16,
+        borderRadius: 5,
+        border: "1px solid ",
+        borderColor: a(o[300], 0.8),
+        boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
+        backgroundColor: a(o[100], 0.4),
+        transition: "border-color, background-color, 120ms ease-in",
+        "&:hover": {
+          borderColor: e[300]
+        },
+        "&.Mui-focusVisible": {
+          outline: `3px solid ${a(e[500], 0.5)}`,
+          outlineOffset: "2px",
+          borderColor: e[400]
+        },
+        "&.Mui-checked": {
+          color: "white",
+          backgroundColor: e[500],
+          borderColor: e[500],
+          boxShadow: "none",
+          "&:hover": {
+            backgroundColor: e[600]
+          }
+        },
+        ...r.applyStyles("dark", {
+          borderColor: a(o[700], 0.8),
+          boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
+          backgroundColor: a(o[900], 0.8),
+          "&:hover": {
+            borderColor: e[300]
+          },
+          "&.Mui-focusVisible": {
+            borderColor: e[400],
+            outline: `3px solid ${a(e[500], 0.5)}`,
+            outlineOffset: "2px"
+          }
+        })
+      })
+    }
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        border: "none"
+      },
+      input: {
+        "&::placeholder": {
+          opacity: 0.7,
+          color: o[500]
+        }
+      }
+    }
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      input: {
+        padding: 0
+      },
+      root: ({ theme: r }) => ({
+        padding: "8px 12px",
+        color: (r.vars || r).palette.text.primary,
+        borderRadius: (r.vars || r).shape.borderRadius,
+        border: `1px solid ${(r.vars || r).palette.divider}`,
+        backgroundColor: (r.vars || r).palette.background.default,
+        transition: "border 120ms ease-in",
+        "&:hover": {
+          borderColor: o[400]
+        },
+        [`&.${i.focused}`]: {
+          outline: `3px solid ${a(e[500], 0.5)}`,
+          borderColor: e[400]
+        },
+        ...r.applyStyles("dark", {
+          "&:hover": {
+            borderColor: o[500]
+          }
+        }),
+        variants: [
+          {
+            props: {
+              size: "small"
+            },
+            style: {
+              height: "2.25rem"
+            }
+          },
+          {
+            props: {
+              size: "medium"
+            },
+            style: {
+              height: "2.5rem"
+            }
+          }
+        ]
+      }),
+      notchedOutline: {
+        border: "none"
+      }
+    }
+  },
+  MuiInputAdornment: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        color: (r.vars || r).palette.grey[500],
+        ...r.applyStyles("dark", {
+          color: (r.vars || r).palette.grey[400]
+        })
+      })
+    }
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: ({ theme: r }) => ({
+        typography: r.typography.caption,
+        marginBottom: 8
+      })
+    }
+  }
+};
+export {
+  m as inputsCustomizations
+};

package/dist/theme/customizations/navigation.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const navigationCustomizations: Components<Theme>;