@undefine-ui/design-system 1.1.0 → 2.1.0

package/README.md

@@ -10,6 +10,8 @@ pnpm add @undefine-ui/design-system
 pnpm add @mui/material @mui/x-data-grid @emotion/react @emotion/styled react react-dom react-hook-form
 ```
 
+**Note**: Fonts (Work Sans and Geist) are bundled with the package and automatically loaded by the `ThemeProvider`. You don't need to install or import `@fontsource` packages separately.
+
 ## Usage
 
 ### Providers
@@ -29,7 +31,7 @@ export function DesignSystemApp({ children }: { children: React.ReactNode }) {
 ```
 
 - `SettingsProvider` exposes the design-system preferences (mode, contrast, fonts, nav layout) through the `useSettings` hook. Provide your own `settings` object if you want different defaults or if you persist user choices.
-- `ThemeProvider` wraps MUI’s CssVarsProvider with the Define theme (`createTheme`). It accepts any React children and automatically injects `CssBaseline`.
+- `ThemeProvider` wraps MUI's CssVarsProvider with the Define theme (`createTheme`). It accepts any React children and automatically injects `CssBaseline` and loads the required fonts (Work Sans and Geist).
 - Both providers are exported from the package root so you can colocate them with your router/root layout.
 
 ### Theming hooks
@@ -72,30 +74,34 @@ import {
 
 Storybook (`pnpm dev:storybook`) documents each component and token surface.
 
-### Logo asset paths
+### Logo assets
+
+`<Logo />` renders logo images hosted on Cloudinary by default. The component automatically selects the appropriate variant based on props:
 
-`<Logo />` renders image files that your host app must expose under `/logos/*`. The defaults map as follows:
+| Variant flag combo         | Asset served                        |
+| -------------------------- | ----------------------------------- |
+| `isFull={false}` (default) | Single logo (60px width)            |
+| `isFull`                   | Full logo with text (120px width)   |
+| `isWhite`                  | White variant for dark backgrounds  |
+| `isBlack`                  | Black variant for light backgrounds |
+| `isWhite` + `isFull`       | White full logo                     |
+| `isBlack` + `isFull`       | Black full logo                     |
 
-| Variant flag combo         | Expected path                |
-| -------------------------- | ---------------------------- |
-| `isFull={false}` (default) | `/logos/logo.png`            |
-| `isFull`                   | `/logos/logo-full.png`       |
-| `isWhite`                  | `/logos/logo-white.png`      |
-| `isWhite` + `isFull`       | `/logos/logo-full-white.png` |
-| `isBlack`                  | `/logos/logo-black.png`      |
-| `isBlack` + `isFull`       | `/logos/logo-full-black.png` |
+All logo assets are served from Cloudinary and don't require any local files in your host app.
 
-If your asset pipeline lives elsewhere, pass `src` to override the image while keeping the same sizing, and use `href` / `LinkComponent` to control the click target:
+If you need to use custom logo assets, pass `src` to override the default image, and use `href` / `LinkComponent` to control the click behavior:
 
 ```tsx
 <Logo
   href="https://undefine.io"
   src="https://cdn.myapp.com/brand/undefine-light.svg"
   sx={{ width: 140 }}
+  disableLink={false}
+  alt="Custom logo"
 />
 ```
 
-All other props from `BoxProps` are forwarded to the underlying `<img>`.
+Use `disableLink={true}` to render just the image without any link wrapper. All other props from `BoxProps` are forwarded to the underlying `<img>`.
 
 ## Export surface
 

package/dist/index.cjs

@@ -28,8 +28,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   CheckboxDefault: () => CheckboxDefault,
   CheckboxIndeterminate: () => CheckboxIndeterminate,
   CheckboxSelect: () => CheckboxSelect,
@@ -155,7 +155,7 @@ __export(src_exports, {
   varAlpha: () => varAlpha,
   warning: () => warning
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/libs/helpers.ts
 var isEqual = (a, b) => {
@@ -5562,6 +5562,17 @@ var getInitColorSchemeScript = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
 // src/theme/ThemeProvider.tsx
 var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"), 1);
 var import_styles31 = require("@mui/material/styles");
+var import__ = require("@fontsource/work-sans/300.css");
+var import__2 = require("@fontsource/work-sans/400.css");
+var import__3 = require("@fontsource/work-sans/500.css");
+var import__4 = require("@fontsource/work-sans/600.css");
+var import__5 = require("@fontsource/work-sans/700.css");
+var import__6 = require("@fontsource/geist/300.css");
+var import__7 = require("@fontsource/geist/400.css");
+var import__8 = require("@fontsource/geist/500.css");
+var import__9 = require("@fontsource/geist/600.css");
+var import__10 = require("@fontsource/geist/700.css");
+var import_satoshi = require("./satoshi-4X3TX4PE.css");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var ThemeProvider = ({ children }) => {
   const settings = useSettings();
@@ -5586,14 +5597,14 @@ var import_Box2 = __toESM(require("@mui/material/Box"), 1);
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LOGO_MAP = {
   full: {
-    black: "/logos/logo-full-black.png",
-    white: "/logos/logo-full-white.png",
-    default: "/logos/logo-full.png"
+    black: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077834/define-agency/logos/logo-black-full_mjngwu.png",
+    white: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077836/define-agency/logos/logo-white-full_nsf6ge.png",
+    default: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077836/define-agency/logos/logo-full_xzon1i.png"
   },
   single: {
-    black: "/logos/logo-black.png",
-    white: "/logos/logo-white.png",
-    default: "/logos/logo.png"
+    black: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077834/define-agency/logos/logo-black_xskhha.png",
+    white: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077834/define-agency/logos/logo-white_tssio4.png",
+    default: "https://res.cloudinary.com/dvbtbsinu/image/upload/v1763077835/define-agency/logos/logo_ypolky.png"
   }
 };
 var Logo = ({