@capillarytech/blaze-ui 1.2.8-beta.2 → 2.0.3

package/README.md

@@ -104,18 +104,31 @@ To customize when the GitHub Action runs:
 - Modify the `.github/workflows/gitleaks_secret_scan.yml` file.
 - Adjust the `on` section to trigger scans on additional events or branches.
 
-# Blaze UI
+# Cap UI
 
-A modern React component library built with Ant Design v5, providing enhanced UI components for Capillary applications.
+A modern React component library built with Ant Design v6, providing enhanced UI components for Capillary applications.
 
 ## Features
 
-- 🎨 Built on top of Ant Design v5
+- 🎨 Built on top of Ant Design v6 (latest)
 - 📦 Tree-shakeable ES modules
 - 🎯 Full TypeScript support with type definitions
 - 🌐 Internationalization ready
 - 💅 Styled with SCSS and CSS Modules
 - ⚡ Optimized bundle size
+- ✅ Fully compliant with Ant Design v6 APIs
+
+## Ant Design v6 Migration (Complete ✅)
+
+This library has been upgraded from Ant Design v5 to **v6.1.0**. All critical components are fully compliant with the new v6 APIs.
+
+| Package | Version |
+|---------|---------|
+| `antd` | 6.1.0 |
+| `@ant-design/icons` | 6.1.0 |
+| React (required) | ≥18.0.0 |
+
+> 📄 **For detailed migration information, see [docs/ANTD_V6_MIGRATION.md](./docs/ANTD_V6_MIGRATION.md)**
 
 ## Installation
 
@@ -136,17 +149,44 @@ yarn add @capillarytech/blaze-ui
 Load fonts and base styles in your application entry point:
 
 ```jsx
-import { loadBlazeUI } from '@capillarytech/blaze-ui/utils';
+import { loadCapUI } from '@capillarytech/blaze-ui/utils';
 
 // Load fonts (Roboto, Material Icons) and base styles (sanitize.css)
-loadBlazeUI();
+loadCapUI();
+
+// Load with custom base font size (default: '14px')
+loadCapUI({
+  baseFontSize: '16px'
+});
+```
+
+#### Configuration Options
+
+The `loadCapUI` function accepts the following configuration options:
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `baseFontSize` | `string` | `'14px'` | Base font size for rem calculations. Sets `document.documentElement.style.fontSize` globally. |
+| `loadRoboto` | `boolean` | `true` | Whether to load the Roboto font family. |
+| `loadMaterialIcons` | `boolean` | `true` | Whether to load Material Icons font. |
+| `robotoWeights` | `number[]` | `[400, 500]` | Array of font weights to load for Roboto (e.g., `[300, 400, 500, 700]`). |
+
+**Example with all options:**
+
+```jsx
+loadCapUI({
+  baseFontSize: '16px',
+  loadRoboto: true,
+  loadMaterialIcons: true,
+  robotoWeights: [300, 400, 500, 700]
+});
 ```
 
 **Note:** If your app already imports `sanitize.css` directly, webpack will deduplicate it if both resolve to the same module path. To avoid duplication, you can load fonts separately:
 
 ```jsx
-import { loadBlazeUIFonts } from '@capillarytech/blaze-ui/utils';
-loadBlazeUIFonts();
+import { loadCapUIFonts } from '@capillarytech/blaze-ui/utils';
+loadCapUIFonts();
 ```
 
 ### Using Components
@@ -181,7 +221,7 @@ This will start the Storybook development server at `http://localhost:6006`, whe
 
 ## Theming
 
-Blaze UI provides a comprehensive theming system using Ant Design v5's token-based architecture. This eliminates the need for SCSS color overrides and provides consistent theming across all components.
+Cap UI provides a comprehensive theming system using Ant Design v6's token-based architecture. This eliminates the need for SCSS color overrides and provides consistent theming across all components.
 
 ### Quick Start
 
@@ -200,192 +240,7 @@ function App() {
 }
 ```
 
-### Basic Usage
-
-The `getCapThemeConfig()` function maps all Capillary design tokens to Ant Design tokens, ensuring consistent theming:
-
-```tsx
-import { ConfigProvider } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui';
-
-const App = () => (
-  <ConfigProvider theme={getCapThemeConfig()}>
-    <YourApp />
-  </ConfigProvider>
-);
-```
-
-### Dark/Light Mode Support
-
-Ant Design v5 supports built-in dark/light mode switching. Use the `algorithm` prop to enable theme switching:
-
-```tsx
-import { ConfigProvider, theme as antdTheme } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui';
-
-const App = ({ themeMode = 'light' }) => {
-  const themeConfig = getCapThemeConfig({
-    algorithm: themeMode === 'dark' 
-      ? antdTheme.darkAlgorithm 
-      : antdTheme.defaultAlgorithm,
-  });
-
-  return (
-    <ConfigProvider theme={themeConfig}>
-      <YourApp />
-    </ConfigProvider>
-  );
-};
-```
-
-**Example with theme toggle:**
-
-```tsx
-import React, { useState } from 'react';
-import { ConfigProvider, theme as antdTheme } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui';
-import { Button } from 'antd-v5';
-
-const App = () => {
-  const [isDark, setIsDark] = useState(false);
-
-  const themeConfig = getCapThemeConfig({
-    algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
-  });
-
-  return (
-    <ConfigProvider theme={themeConfig}>
-      <Button onClick={() => setIsDark(!isDark)}>
-        Toggle {isDark ? 'Light' : 'Dark'} Mode
-      </Button>
-      <YourApp />
-    </ConfigProvider>
-  );
-};
-```
-
-### Custom Theme Overrides
-
-You can override specific tokens while keeping the base Capillary theme:
-
-```tsx
-import { ConfigProvider } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui';
-
-const App = () => {
-  const themeConfig = getCapThemeConfig({
-    token: {
-      colorPrimary: '#custom-color', // Override primary color
-      borderRadius: 12, // Override border radius
-    },
-    components: {
-      Button: {
-        borderRadius: 8, // Override button border radius
-        controlHeight: 40, // Override button height
-      },
-      Input: {
-        colorBorder: '#custom-border', // Override input border color
-      },
-    },
-  });
-
-  return (
-    <ConfigProvider theme={themeConfig}>
-      <YourApp />
-    </ConfigProvider>
-  );
-};
-```
-
-### What Gets Themed
-
-The `getCapThemeConfig()` function configures tokens for:
-
-**Global Tokens:**
-- Primary, success, warning, error, info colors
-- Text colors (primary, secondary, tertiary, quaternary)
-- Background colors (container, elevated, layout, spotlight)
-- Border colors
-- Typography (font family, sizes)
-- Border radius
-- Spacing/padding
-
-**Component-Specific Tokens:**
-- **Alert**: Background colors for success/info/warning/error states
-- **Button**: Primary colors, hover states, disabled states, default button styles
-- **Input**: Border colors, hover/focus states, error states, disabled states
-- **Table**: Header colors, row hover states, text colors
-- **Checkbox**: Checked colors, disabled states
-- **Radio**: Checked colors, disabled states
-- **Switch**: Checked colors, hover states
-- **Tab**: Text colors, active states, ink bar color
-- **Dropdown**: Hover states
-- **Tooltip**: Background and text colors
-- **Divider**: Border colors
-- **Select**: Border, hover, disabled states
-
-### Benefits of Token-Based Theming
-
-✅ **No SCSS Overrides Needed**: Colors are handled via tokens, eliminating the need for SCSS color overrides  
-✅ **Consistent Theming**: All Ant Design components automatically use the configured tokens  
-✅ **Dark/Light Mode**: Built-in support for theme switching  
-✅ **Type-Safe**: Full TypeScript support with proper types  
-✅ **Easy Customization**: Override specific tokens without affecting others  
-✅ **Future-Proof**: Uses Ant Design v5's modern token system  
-
-### Migration from SCSS Overrides
-
-If you're currently using SCSS overrides for Ant Design components, you can migrate to the token system:
-
-**Before (SCSS overrides):**
-```scss
-.ant-btn-primary {
-  background-color: $cap-primary-base;
-  
-  &:hover {
-    background-color: $cap-primary-hover;
-  }
-}
-```
-
-**After (Token-based):**
-```tsx
-import { ConfigProvider } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui';
-
-<ConfigProvider theme={getCapThemeConfig()}>
-  {/* Button colors are automatically themed */}
-</ConfigProvider>
-```
-
-The `getCapThemeConfig()` function already maps all Capillary colors to Ant Design tokens, so you can remove SCSS color overrides and rely on the token system.
-
-### Advanced: Multiple Theme Instances
-
-You can create multiple theme instances for different parts of your application:
-
-```tsx
-import { ConfigProvider } from 'antd-v5';
-import { getCapThemeConfig } from '@capillarytech/blaze-ui';
-
-const App = () => {
-  const defaultTheme = getCapThemeConfig();
-  const customTheme = getCapThemeConfig({
-    token: { colorPrimary: '#ff6b6b' },
-  });
-
-  return (
-    <>
-      <ConfigProvider theme={defaultTheme}>
-        <DefaultSection />
-      </ConfigProvider>
-      <ConfigProvider theme={customTheme}>
-        <CustomSection />
-      </ConfigProvider>
-    </>
-  );
-};
-```
+> 📄 **For complete theming documentation, see [docs/THEMING.md](./docs/THEMING.md)**
 
 ## Styling
 
@@ -393,7 +248,7 @@ The library uses CSS Modules with SCSS and automatically embeds styles in the Ja
 
 ### Using Design Tokens and Variables
 
-Blaze UI provides a comprehensive set of design tokens (colors, spacing, typography, etc.) in the `styled` folder that you can use in your application to maintain consistency with the component library.
+Cap UI provides a comprehensive set of design tokens (colors, spacing, typography, etc.) in the `styled` folder that you can use in your application to maintain consistency with the component library.
 
 #### For SCSS/SASS Projects
 
@@ -563,12 +418,20 @@ bash scripts/publish.sh beta
 
 ## Migration from cap-ui-library
 
-This library is designed as a modern replacement for `@capillarytech/cap-ui-library`, migrated from Ant Design v3 to v5. Key changes include:
+This library is designed as a modern replacement for `@capillarytech/cap-ui-library`, migrated from Ant Design v3 to v6. Key changes include:
 
-1. **Updated Ant Design APIs**: All components now use Ant Design v5 APIs
+1. **Updated Ant Design APIs**: All components now use Ant Design v6 APIs (latest)
 2. **Modern React patterns**: Functional components with hooks instead of class components
 3. **Full TypeScript support**: Complete type definitions for all components and utilities
 4. **Better tree-shaking**: Optimized bundle size with proper ES modules
+5. **v6 Compliance**: All deprecated v5 APIs have been updated to use the new v6 equivalents
+
+## Documentation
+
+| Document | Description |
+|----------|-------------|
+| [ANTD_V6_MIGRATION.md](./docs/ANTD_V6_MIGRATION.md) | Detailed Ant Design v5 → v6 migration report |
+| [THEMING.md](./docs/THEMING.md) | Complete theming guide with examples |
 
 ## Contributing
 
@@ -577,4 +440,3 @@ Please read our contributing guidelines before submitting PRs.
 ## License
 
 ISC © Capillary Technologies
-

package/dist/CapAlert/CapAlert.d.ts

@@ -2,6 +2,13 @@ import React from 'react';
 export interface CapAlertProps {
     className?: string;
     type?: 'success' | 'info' | 'warning' | 'error';
+    /**
+     * Title/message content of the alert. Maps to Ant Design v6's `message` prop internally.
+     */
+    title?: React.ReactNode;
+    /**
+     * @deprecated Use `title` instead. Will be removed in next major version.
+     */
     message?: React.ReactNode;
     description?: React.ReactNode;
     showIcon?: boolean;

package/dist/CapAlert/CapAlert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CapAlert.d.ts","sourceRoot":"","sources":["../../components/CapAlert/CapAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAIrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CapAlert.d.ts","sourceRoot":"","sources":["../../components/CapAlert/CapAlert.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,aAAa;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoBrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/CapAlert/__snapshots__/CapAlert.test.tsx.snap

@@ -0,0 +1,265 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`CapAlert Snapshots should match snapshot with custom className 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info ant-alert-no-icon cap-alert-v2 custom-alert-class css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Custom Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with default props 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Default Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with description 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Alert Title
+        </div>
+        <div
+          class="ant-alert-description"
+        >
+          This is the alert description
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with error type 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-error ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Error Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with info type 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Info Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with showIcon 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <span
+        aria-label="info-circle"
+        class="anticon anticon-info-circle ant-alert-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="info-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
+          />
+        </svg>
+      </span>
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Alert with Icon
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with success type 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-success ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Success Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with title prop 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Title Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with title prop taking precedence over message 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-info ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Title
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapAlert Snapshots should match snapshot with warning type 1`] = `
+<div>
+  <div
+    class="cap-alert-wrapper"
+  >
+    <div
+      class="ant-alert ant-alert-warning ant-alert-no-icon cap-alert-v2 css-var-root css-dev-only-do-not-override-dbp7pc"
+      data-show="true"
+      role="alert"
+    >
+      <div
+        class="ant-alert-section"
+      >
+        <div
+          class="ant-alert-title"
+        >
+          Warning Alert
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/dist/CapAlert/index.js

@@ -62,7 +62,7 @@ var _classnames = _interopRequireDefault(__webpack_require__(6942));
 var _react = _interopRequireDefault(__webpack_require__(9206));
 var _styles = _interopRequireDefault(__webpack_require__(4107));
 var _jsxRuntime = __webpack_require__(4848);
-const _excluded = ["className", "type"];
+const _excluded = ["className", "type", "title", "message"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -70,14 +70,19 @@ const clsPrefix = 'cap-alert-v2';
 const CapAlert = _ref => {
   let {
       className,
-      type = 'info'
+      type = 'info',
+      title,
+      message
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  // Support both new `title` and deprecated `message` props
+  const alertTitle = title || message;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: _styles.default['cap-alert-wrapper'],
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antdV.Alert, _extends({
       className: (0, _classnames.default)(_styles.default[clsPrefix], className),
-      type: type
+      type: type,
+      message: alertTitle
     }, rest))
   });
 };