@undefine-ui/design-system 2.0.0 → 2.2.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,9 +74,50 @@ import {
 
 Storybook (`pnpm dev:storybook`) documents each component and token surface.
 
+### Icon library
+
+The package includes a comprehensive icon library with 23 SVG icons organized by category.
+
+**Available icons:**
+
+- **Navigation:** NavArrowLeft, NavArrowRight, NavArrowDown, LongArrowUpLeftSolid
+- **User:** UserFill, UserOutline
+- **Form Controls:** CheckboxDefault, CheckboxSelect, CheckboxIndeterminate, RadioDefault, RadioSelect
+- **Actions:** Search, Copy, Trash, XMark, XMarkSolid, CloudUpload
+- **Feedback:** InfoCircleFill, InfoCircleOutline, ClipboardCheck, Loader
+- **Visibility:** Eye, EyeClosed
+
+**Usage:**
+
+```tsx
+import { Icon } from '@undefine-ui/design-system';
+
+// Basic usage
+<Icon icon="Search" sx={{ width: 24, height: 24 }} />
+
+// With custom color
+<Icon icon="InfoCircleFill" sx={{ width: 32, height: 32, color: 'primary.main' }} />
+
+// Different sizes
+<Icon icon="Loader" sx={{ width: 16, height: 16 }} />
+<Icon icon="Loader" sx={{ width: 48, height: 48 }} />
+```
+
+**Props:**
+
+- `icon` - Icon name (required, type: `IconType`)
+- `sx` - MUI sx prop for styling (size, color, etc.)
+- All `BoxProps` from MUI are supported
+
+The Icon component renders SVG icons with full theme integration and accepts any MUI Box props for flexible styling.
+
 ### Logo assets
 
-`<Logo />` renders logo images hosted on Cloudinary by default. The component automatically selects the appropriate variant based on props:
+The package exports two Logo components:
+
+#### `<Logo />`
+
+Renders logo images hosted on Cloudinary by default. The component automatically selects the appropriate variant based on props:
 
 | Variant flag combo         | Asset served                        |
 | -------------------------- | ----------------------------------- |
@@ -87,19 +130,40 @@ Storybook (`pnpm dev:storybook`) documents each component and token surface.
 
 All logo assets are served from Cloudinary and don't require any local files in your host app.
 
-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 isFull isWhite href="/dashboard" />
+```
+
+**Props:**
+
+- `isFull` - Use full logo with text (default: `false`)
+- `isWhite` - Use white variant (default: `false`)
+- `isBlack` - Use black variant (default: `false`)
+- `disableLink` - Render without link wrapper (default: `false`)
+- `href` - Link destination (default: `'/'`)
+- `LinkComponent` - Custom link component (default: `'a'`)
+- `src` - Override logo source URL
+- `alt` - Image alt text (default: `'Undefine UI logo'`)
+- `sx` - MUI sx prop for styling
+
+#### `<AnimatedLogo />`
+
+An animated SVG version of the logo perfect for splash screens and loading states. Features a smooth infinite animation sequence with staggered timing for visual interest.
 
 ```tsx
-<Logo
-  href="https://undefine.io"
-  src="https://cdn.myapp.com/brand/undefine-light.svg"
-  sx={{ width: 140 }}
-  disableLink={false}
-  alt="Custom logo"
-/>
+import { AnimatedLogo } from '@undefine-ui/design-system';
+
+<AnimatedLogo />;
 ```
 
-Use `disableLink={true}` to render just the image without any link wrapper. All other props from `BoxProps` are forwarded to the underlying `<img>`.
+The animated logo automatically plays on mount with:
+
+- Background fade-in
+- Left bars sliding in from the left
+- D letter scaling in with a bounce effect
+- Continuous infinite loop
+
+Ideal for splash screens, loading overlays, or brand storytelling moments.
 
 ## Export surface
 

package/dist/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnimatedLogo: () => AnimatedLogo,
   CheckboxDefault: () => CheckboxDefault,
   CheckboxIndeterminate: () => CheckboxIndeterminate,
   CheckboxSelect: () => CheckboxSelect,
@@ -68,6 +69,7 @@ __export(index_exports, {
   SettingsConsumer: () => SettingsConsumer,
   SettingsContext: () => SettingsContext,
   SettingsProvider: () => SettingsProvider,
+  SplashScreen: () => SplashScreen,
   Table: () => Table,
   TablePagination: () => TablePagination,
   ThemeProvider: () => ThemeProvider,
@@ -2047,7 +2049,7 @@ var Search = (props) => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M10.9804 10.9798C11.1757 10.7845 11.4923 10.7845 11.6875 10.9798L14.3542 13.6464C14.5495 13.8417 14.5495 14.1583 14.3542 14.3535C14.1589 14.5488 13.8424 14.5488 13.6471 14.3535L10.9804 11.6869C10.7852 11.4916 10.7852 11.175 10.9804 10.9798Z",
-            fill: "#1E1F24"
+            fill: "currentColor"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2056,7 +2058,7 @@ var Search = (props) => {
             fillRule: "evenodd",
             clipRule: "evenodd",
             d: "M7.33333 2.5C4.66396 2.5 2.5 4.66396 2.5 7.33333C2.5 10.0027 4.66396 12.1667 7.33333 12.1667C8.67047 12.1667 9.87999 11.6244 10.7556 10.7465C11.6281 9.87162 12.1667 8.66585 12.1667 7.33333C12.1667 4.66396 10.0027 2.5 7.33333 2.5ZM1.5 7.33333C1.5 4.11167 4.11167 1.5 7.33333 1.5C10.555 1.5 13.1667 4.11167 13.1667 7.33333C13.1667 8.94123 12.5155 10.398 11.4636 11.4526C10.4081 12.5109 8.94682 13.1667 7.33333 13.1667C4.11167 13.1667 1.5 10.555 1.5 7.33333Z",
-            fill: "#1E1F24"
+            fill: "currentColor"
           }
         )
       ]
@@ -5562,6 +5564,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();
@@ -5626,6 +5639,108 @@ var Logo = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_Link.default, { component: LinkComponent, href, sx: { display: "contents" }, children: logo });
 };
+var AnimatedLogo = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "svg",
+    {
+      width: "120",
+      height: "120",
+      viewBox: "0 0 120 120",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("style", { children: `
+          @keyframes fadeIn {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 1;
+            }
+          }
+          
+          @keyframes slideInLeft {
+            from {
+              opacity: 0;
+              transform: translateX(-30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+          
+          @keyframes slideInRight {
+            from {
+              opacity: 0;
+              transform: translateX(30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+          
+          @keyframes scaleIn {
+            from {
+              opacity: 0;
+              transform: scale(0.5);
+            }
+            to {
+              opacity: 1;
+              transform: scale(1);
+            }
+          }
+          
+          .background-rect {
+            animation: fadeIn 1.2s ease-out infinite;
+            opacity: 0;
+          }
+          
+          .bars {
+            animation: slideInLeft 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+            animation-delay: 0.4s;
+            opacity: 0;
+          }
+          
+          .d-letter {
+            animation: scaleIn 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
+            animation-delay: 1s;
+            opacity: 0;
+            transform-origin: center;
+          }
+        ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "rect",
+          {
+            className: "background-rect",
+            x: "30.2988",
+            y: "11.9149",
+            width: "75.7447",
+            height: "78.8085",
+            fill: "white"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "path",
+          {
+            className: "bars",
+            d: "M8.85059 113.191H7.48926C7.11333 113.191 6.8086 112.887 6.80859 112.511V28.3671C6.8086 28.1866 6.88019 28.0134 7.00781 27.8857L8.85059 26.0429V113.191ZM12.5957 113.191H10.5527V24.3408L12.5957 22.2978V113.191ZM16 113.191H13.957V20.9365L16 18.8935V113.191ZM19.0635 113.191H17.0215V17.872L19.0635 15.83V113.191ZM21.7871 113.191H19.7451V15.1484L21.7871 13.1064V113.191ZM24.1699 113.191H22.2979V12.5956L24.1699 10.7236V113.191Z",
+            fill: "#5E30EB"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          "path",
+          {
+            className: "d-letter",
+            d: "M112.511 6.80853C112.887 6.80854 113.191 7.11326 113.191 7.4892V91.6328C113.191 91.8133 113.12 91.9865 112.992 92.1142L92.1143 112.992C91.9866 113.120 91.8133 113.191 91.6328 113.191H24.5107V10.3828L27.8857 7.00775C28.0134 6.88012 28.1867 6.80854 28.3672 6.80853H112.511ZM48.3408 82.7236H65.6172C71.9715 82.7235 77.4182 81.5604 81.957 79.2343C86.5528 76.9081 90.071 73.4463 92.5107 68.8505C95.007 64.2549 96.2548 58.5532 96.2549 51.7451C96.2549 45.2202 95.0919 39.773 92.7656 35.4042C90.4394 30.9788 87.0924 27.6308 82.7236 25.3613C78.4117 23.0918 73.2201 21.957 67.1494 21.957H48.3408V82.7236ZM67.5742 32.5107C70.7515 32.5107 73.39 33.2202 75.4893 34.6386C77.6452 36.0003 79.2628 38.1278 80.3408 41.0214C81.4187 43.915 81.957 47.6029 81.957 52.0849C81.957 58.723 80.6809 63.7159 78.1279 67.0634C75.6315 70.4109 71.7161 72.0849 66.3828 72.0849H62.1279V32.5107H67.5742Z",
+            fill: "#5E30EB"
+          }
+        )
+      ]
+    }
+  );
+};
 
 // src/components/Table/Table.tsx
 var import_Box4 = __toESM(require("@mui/material/Box"), 1);
@@ -6849,8 +6964,35 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
   }
   return content;
 };
+var SplashScreen = ({ portal, sx, ...rest }) => {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    import_Box14.default,
+    {
+      sx: {
+        right: 0,
+        width: 1,
+        bottom: 0,
+        height: 1,
+        zIndex: 9998,
+        display: "flex",
+        position: "fixed",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "background.default",
+        ...sx
+      },
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(AnimatedLogo, {})
+    }
+  );
+  if (portal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_Portal.default, { children: content });
+  }
+  return content;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedLogo,
   CheckboxDefault,
   CheckboxIndeterminate,
   CheckboxSelect,
@@ -6889,6 +7031,7 @@ var LoadingScreen = ({ portal, sx, ...rest }) => {
   SettingsConsumer,
   SettingsContext,
   SettingsProvider,
+  SplashScreen,
   Table,
   TablePagination,
   ThemeProvider,