@capillarytech/blaze-ui 2.4.1-beta.1 → 2.6.1-beta.0

package/dist/styled/variables.scss

@@ -65,6 +65,8 @@ $cap-white-overlay: rgba(255, 255, 255, 0.8);
 $cap-black: #000000;
 $cap-black-alpha01: #00000022;
 $cap-black-alpha02: #000000de;
+$cap-black-overlay: rgba(0, 0, 0, 0.56);
+$cap-shadow-color: rgba(0, 0, 0, 0.12);
 
 // Semantic colors
 $color-error: #ff4d4f;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capillarytech/blaze-ui",
-  "version": "2.4.1-beta.1",
+  "version": "2.6.1-beta.0",
   "description": "Capillary UI component library with Ant Design v6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -230,16 +230,16 @@
       "require": "./dist/CapRow/index.js",
       "types": "./dist/CapRow/index.d.ts"
     },
-    "./CapSelectFilter": {
-      "import": "./dist/CapSelectFilter/index.js",
-      "require": "./dist/CapSelectFilter/index.js",
-      "types": "./dist/CapSelectFilter/index.d.ts"
-    },
     "./CapSkeleton": {
       "import": "./dist/CapSkeleton/index.js",
       "require": "./dist/CapSkeleton/index.js",
       "types": "./dist/CapSkeleton/index.d.ts"
     },
+    "./CapSlideBox": {
+      "import": "./dist/CapSlideBox/index.js",
+      "require": "./dist/CapSlideBox/index.js",
+      "types": "./dist/CapSlideBox/index.d.ts"
+    },
     "./CapSpin": {
       "import": "./dist/CapSpin/index.js",
       "require": "./dist/CapSpin/index.js",

package/dist/CapSelectFilter/CapSelectFilter.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { CapSelectFilterMenuItem, CapSelectFilterProps } from './CapSelectFilter.interfaces';
-export declare const renderMenuItem: (items: CapSelectFilterMenuItem[], selectedValue?: string) => {
-    key: string;
-    label: import("react/jsx-runtime").JSX.Element;
-    className: string;
-    'data-value': string;
-}[];
-export declare const renderDropdownMenu: (menu: React.ReactNode, dropdownMaxHeight?: string, dropdownWidth?: string) => import("react/jsx-runtime").JSX.Element;
-declare const CapSelectFilter: React.FC<CapSelectFilterProps>;
-export default CapSelectFilter;
-//# sourceMappingURL=CapSelectFilter.d.ts.map

package/dist/CapSelectFilter/CapSelectFilter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CapSelectFilter.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/CapSelectFilter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAOlG,eAAO,MAAM,cAAc,GAAI,OAAO,uBAAuB,EAAE,EAAE,gBAAgB,MAAM;;;;;GAStF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,KAAK,CAAC,SAAS,EACrB,oBAAoB,MAAM,EAC1B,gBAAgB,MAAM,4CAcvB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0DnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/CapSelectFilter/CapSelectFilter.interfaces.d.ts

@@ -1,22 +0,0 @@
-import { DropdownProps } from 'antd-v5';
-import React from 'react';
-export interface CapSelectFilterMenuItem {
-    key: string;
-    value: string;
-    label: string | React.ReactNode;
-}
-export interface CapSelectFilterProps extends Omit<DropdownProps, 'menu' | 'overlay' | 'overlayStyle' | 'onOpenChange'> {
-    className?: string;
-    overlayClassName?: string;
-    onSelect?: (event: React.MouseEvent<HTMLElement>) => void;
-    onOpenChange?: (open: boolean) => void;
-    selectedValue?: string;
-    placeholder?: string | React.ReactNode;
-    placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
-    width?: string;
-    dropdownMaxHeight?: string;
-    dropdownWidth?: string;
-    data?: CapSelectFilterMenuItem[];
-    showBadge?: boolean;
-}
-//# sourceMappingURL=CapSelectFilter.interfaces.d.ts.map

package/dist/CapSelectFilter/CapSelectFilter.interfaces.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CapSelectFilter.interfaces.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/CapSelectFilter.interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACvC,SAAS,CAAC,EAAE,YAAY,GAAG,QAAQ,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,UAAU,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/CapSelectFilter/README.md

@@ -1,121 +0,0 @@
-# CapSelectFilter
-
-A dropdown select filter component with badge support.
-
-## Migration from cap-ui-library to blaze-ui
-
-### Summary of Changes
-
-This component has been migrated from `cap-ui-library` to `blaze-ui` with the following updates:
-
-1. **Converted to TypeScript** - Full type safety with proper interfaces
-2. **Functional Component** - Migrated from functional component (no changes needed)
-3. **SCSS Modules** - Replaced styled-components with SCSS modules
-4. **Ant Design v6** - Updated to use Ant Design v6 compatible APIs:
-   - Changed from `overlay` prop to `menu={{ items }}` API
-   - Used `dropdownRender` to wrap menu with custom styling
-   - Removed direct usage of `CapMenu` components in favor of menu items array
-5. **CSS Units** - Converted all pixel values to rem units (base: 14px = 1rem)
-6. **SCSS Variables** - Replaced hardcoded colors/spacing with SCSS variables
-7. **React Hooks** - Added `useMemo` to optimize menu items generation
-
-### Breaking Changes
-
-**No breaking changes from cap-ui-library v8.x**
-
-All props remain the same and work identically to the cap-ui-library version.
-
-### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `className` | `string` | - | Additional CSS class for the dropdown wrapper |
-| `overlayClassName` | `string` | - | Additional CSS class for the dropdown overlay |
-| `onSelect` | `(event: React.MouseEvent<HTMLElement>) => void` | - | Callback when a menu item is selected |
-| `selectedValue` | `string` | - | Currently selected value |
-| `placeholder` | `React.ReactNode` | - | Placeholder text or node |
-| `placement` | `'bottomLeft' \| 'bottom' \| 'bottomRight' \| 'topLeft' \| 'top' \| 'topRight'` | `'bottomLeft'` | Dropdown placement |
-| `width` | `string` | `'80px'` | Width of the trigger element |
-| `dropdownMaxHeight` | `string` | `'320px'` | Maximum height of dropdown menu |
-| `dropdownWidth` | `string` | `'228px'` | Width of dropdown menu |
-| `data` | `CapSelectFilterMenuItem[]` | `[]` | Array of menu items |
-| `showBadge` | `boolean` | `false` | Whether to show a badge with count |
-
-### Data Item Structure
-
-```typescript
-interface CapSelectFilterMenuItem {
-  key: string;      // Unique key for React
-  value: string;    // Value to match against selectedValue
-  label: React.ReactNode;  // Display label
-}
-```
-
-### API Changes
-
-None - all APIs remain backward compatible.
-
-### Behavioral Changes
-
-None - component behaves identically to cap-ui-library version.
-
-### Migration Guide for Consumers
-
-No migration needed! Simply update your import path:
-
-**Before (cap-ui-library):**
-```javascript
-import CapSelectFilter from '@capillarytech/cap-ui-library/components/CapSelectFilter';
-```
-
-**After (blaze-ui):**
-```javascript
-import CapSelectFilter from '@capillarytech/blaze-ui/components/CapSelectFilter';
-// Or from the main export
-import { CapSelectFilter } from '@capillarytech/blaze-ui';
-```
-
-### Usage Example
-
-```tsx
-import React, { useState } from 'react';
-import CapSelectFilter from '@capillarytech/blaze-ui/components/CapSelectFilter';
-
-const MyComponent = () => {
-  const [selectedValue, setSelectedValue] = useState('option1');
-
-  const data = [
-    { key: '1', value: 'option1', label: 'Option 1' },
-    { key: '2', value: 'option2', label: 'Option 2' },
-    { key: '3', value: 'option3', label: 'Option 3' },
-  ];
-
-  const handleSelect = (e: React.MouseEvent<HTMLElement>) => {
-    const target = e.currentTarget;
-    const value = target.getAttribute('value');
-    if (value) {
-      setSelectedValue(value);
-    }
-  };
-
-  return (
-    <CapSelectFilter
-      placeholder="Select an option"
-      data={data}
-      selectedValue={selectedValue}
-      onSelect={handleSelect}
-      showBadge
-    />
-  );
-};
-```
-
-### Internal Implementation Notes
-
-- Uses `CapDropdown` with Ant Design v6 `menu` API (not the old `overlay` API)
-- Menu items are generated as an array of objects with `key`, `label`, `className`, and `onClick`
-- Uses `dropdownRender` to wrap the menu with custom styling (border and scrolling)
-- Styled with SCSS modules instead of styled-components
-- All spacing and colors use SCSS variables from `components/styled/variables.scss`
-- Badge count is calculated as `[selectedValue].length` (always shows 1 for single selection)
-- Uses `useMemo` to optimize menu items generation and prevent unnecessary re-renders

package/dist/CapSelectFilter/index.d.ts

@@ -1,3 +0,0 @@
-export { default } from './CapSelectFilter';
-export type { CapSelectFilterProps, CapSelectFilterMenuItem } from './CapSelectFilter.interfaces';
-//# sourceMappingURL=index.d.ts.map

package/dist/CapSelectFilter/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapSelectFilter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC"}