npm - @shohojdhara/atomix - Versions diffs - 0.1.21 → 0.1.24 - Mend

@shohojdhara/atomix 0.1.21 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (115) hide show

package/CHANGELOG.md +4 -0
package/NPM_PUBLISHING.md +221 -0
package/README.md +50 -124
package/css.d.ts +0 -0
package/dist/css/atomix.css +1 -1
package/dist/js/628.js +1 -0
package/dist/js/atomix.react.cjs.js +1 -0
package/dist/js/atomix.react.esm.js +1 -1
package/dist/js/atomix.react.umd.js +1 -1
package/dist/js/chunks/cjs/202.6e2b9e63a406ff01b151.js +1 -0
package/dist/js/chunks/cjs/308.86b2e7ea63bf439e01b4.js +1 -0
package/dist/js/chunks/cjs/54.54733c458fc7ced6d9ba.js +1 -0
package/dist/js/chunks/cjs/619.8e6863cb2985a3a109af.js +1 -0
package/dist/js/chunks/cjs/690.17522d562f7ebe2fa7b4.js +1 -0
package/dist/js/chunks/cjs/894.6edddf7d4bf7ccb11e25.js +1 -0
package/dist/js/chunks/cjs/897.74f4c88710fe45c1b9e3.js +1 -0
package/dist/types/components/Breadcrumb/index.d.ts +2 -3
package/dist/types/components/River/index.d.ts +1 -1
package/dist/types/components/Tab/index.d.ts +2 -2
package/dist/types/components/Toggle/index.d.ts +2 -2
package/dist/types/components/Tooltip/index.d.ts +2 -3
package/index.d.ts +3 -0
package/package.json +38 -86
package/src/components/Accordion/index.ts +0 -0
package/src/components/AtomixLogo/index.ts +0 -0
package/src/components/Button/index.ts +0 -0
package/src/components/Navigation/Menu/Menu.stories.tsx +0 -0
package/src/components/Navigation/Nav/Nav.stories.tsx +0 -0
package/src/components/Navigation/README.md +0 -0
package/src/components/Navigation/SideMenu/SideMenu.README.md +0 -0
package/src/components/Navigation/SideMenu/SideMenu.stories.tsx +0 -0
package/src/components/Navigation/SideMenu/SideMenu.tsx +0 -0
package/src/components/Navigation/SideMenu/SideMenuItem.tsx +0 -0
package/src/components/Navigation/SideMenu/SideMenuList.tsx +0 -0
package/src/components/Navigation/scripts/NavbarInteractions.ts +0 -0
package/src/components/Navigation/scripts/SideMenu.ts +0 -0
package/src/components/Navigation/scripts/SideMenuBundle.ts +0 -0
package/src/components/Navigation/scripts/SideMenuInteractions.ts +0 -0
package/src/components/Navigation/scripts/bundle.ts +0 -0
package/src/components/Navigation/scripts/index.ts +0 -0
package/src/components/PhotoViewer/README.md +0 -0
package/src/components/index.ts +0 -0
package/src/docs/atomix-component-guidelines.mdx +0 -0
package/src/index.ts +10 -5
package/src/layouts/index.ts +5 -0
package/src/lib/README.md +0 -0
package/src/lib/composables/useSideMenu.ts +0 -0
package/src/lib/index.ts +6 -6
package/src/styles/01-settings/_settings.animations.scss +7 -2
package/src/styles/01-settings/_settings.box-shadow.scss +9 -5
package/src/styles/01-settings/_settings.button.scss +5 -0
package/src/styles/01-settings/_settings.card.scss +2 -1
package/src/styles/01-settings/_settings.form.scss +3 -0
package/src/styles/01-settings/_settings.navbar.scss +1 -0
package/src/styles/01-settings/_settings.typography.scss +2 -2
package/src/styles/01-settings/_settings.z-layers.scss +19 -1
package/src/styles/css-modules.d.ts +308 -0
package/CONTRIBUTING.md +0 -151
package/NEXTJS_INTEGRATION.md +0 -389
package/babel.config.js +0 -58
package/dist/types/layouts/Grid/Container.d.ts +0 -38
package/dist/types/layouts/Grid/Grid.d.ts +0 -37
package/dist/types/layouts/Grid/GridCol.d.ts +0 -64
package/dist/types/layouts/Grid/Row.d.ts +0 -38
package/dist/types/layouts/Grid/index.d.ts +0 -8
package/dist/types/layouts/MasonryGrid/MasonryGrid.d.ts +0 -71
package/dist/types/layouts/MasonryGrid/MasonryGridItem.d.ts +0 -24
package/dist/types/layouts/MasonryGrid/index.d.ts +0 -4
package/dist/types/layouts/index.d.ts +0 -2
package/dist/types/lib/composables/index.d.ts +0 -30
package/dist/types/lib/composables/useAccordion.d.ts +0 -30
package/dist/types/lib/composables/useBadge.d.ts +0 -10
package/dist/types/lib/composables/useBreadcrumb.d.ts +0 -13
package/dist/types/lib/composables/useButton.d.ts +0 -11
package/dist/types/lib/composables/useCallout.d.ts +0 -11
package/dist/types/lib/composables/useCard.d.ts +0 -8
package/dist/types/lib/composables/useCheckbox.d.ts +0 -11
package/dist/types/lib/composables/useDataTable.d.ts +0 -66
package/dist/types/lib/composables/useDatePicker.d.ts +0 -91
package/dist/types/lib/composables/useDropdown.d.ts +0 -26
package/dist/types/lib/composables/useEdgePanel.d.ts +0 -15
package/dist/types/lib/composables/useForm.d.ts +0 -12
package/dist/types/lib/composables/useFormGroup.d.ts +0 -10
package/dist/types/lib/composables/useHero.d.ts +0 -53
package/dist/types/lib/composables/useInput.d.ts +0 -12
package/dist/types/lib/composables/useMessages.d.ts +0 -38
package/dist/types/lib/composables/useModal.d.ts +0 -40
package/dist/types/lib/composables/useNavbar.d.ts +0 -59
package/dist/types/lib/composables/usePagination.d.ts +0 -13
package/dist/types/lib/composables/usePhotoViewer.d.ts +0 -57
package/dist/types/lib/composables/usePopover.d.ts +0 -30
package/dist/types/lib/composables/useProgress.d.ts +0 -38
package/dist/types/lib/composables/useRadio.d.ts +0 -10
package/dist/types/lib/composables/useRating.d.ts +0 -52
package/dist/types/lib/composables/useRiver.d.ts +0 -107
package/dist/types/lib/composables/useSelect.d.ts +0 -10
package/dist/types/lib/composables/useSideMenu.d.ts +0 -28
package/dist/types/lib/composables/useSpinner.d.ts +0 -10
package/dist/types/lib/composables/useTextarea.d.ts +0 -10
package/dist/types/lib/composables/useTodo.d.ts +0 -18
package/dist/types/lib/constants/components.d.ts +0 -993
package/dist/types/lib/constants/index.d.ts +0 -1
package/dist/types/lib/index.d.ts +0 -6
package/dist/types/lib/types/components.d.ts +0 -2050
package/dist/types/lib/types/index.d.ts +0 -1
package/dist/types/lib/utils/dom.d.ts +0 -26
package/dist/types/lib/utils/icons.d.ts +0 -20
package/dist/types/lib/utils/index.d.ts +0 -3
package/dist/types/lib/utils/useForkRef.d.ts +0 -10
package/examples/nextjs-example.tsx +0 -271
package/implementation-guide.md +0 -505
package/next.config.js +0 -90
package/postcss.config.js +0 -28
package/tsconfig.json +0 -74
package/webpack.config.js +0 -473

package/NEXTJS_INTEGRATION.md DELETED Viewed

@@ -1,389 +0,0 @@
-# Next.js Integration Guide
-This guide explains how to integrate Atomix Design System with Next.js applications, including support for Server-Side Rendering (SSR) and App Router.
-## Installation
-```bash
-npm install @shohojdhara/atomix
-# or
-yarn add @shohojdhara/atomix
-# or
-pnpm add @shohojdhara/atomix
-```
-## Basic Setup
-### 1. Import Styles
-Add the Atomix CSS to your Next.js application:
-#### App Router (app directory)
-```tsx
-// app/layout.tsx
-import '@shohojdhara/atomix/css'
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}
-```
-#### Pages Router (pages directory)
-```tsx
-// pages/_app.tsx
-import '@shohojdhara/atomix/css'
-import type { AppProps } from 'next/app'
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
-```
-### 2. Use Components
-```tsx
-// app/page.tsx or pages/index.tsx
-import { Button, Hero, Card } from '@shohojdhara/atomix'
-export default function HomePage() {
-  return (
-    <div>
-      <Hero
-        title="Welcome to Next.js with Atomix"
-        subtitle="Modern UI Components"
-        text="Build beautiful applications with Atomix Design System"
-        alignment="center"
-      />
-      <div className="o-container u-py-5">
-        <Card>
-          <div className="c-card__body">
-            <h3 className="c-card__title">Getting Started</h3>
-            <p className="c-card__text">
-              Start building with Atomix components in your Next.js application.
-            </p>
-            <Button variant="primary" label="Learn More" />
-          </div>
-        </Card>
-      </div>
-    </div>
-  )
-}
-```
-## Advanced Configuration
-### Next.js Configuration
-Create or update your `next.config.js` file:
-```javascript
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Transpile Atomix package for better compatibility
-  transpilePackages: ['@shohojdhara/atomix'],
-  // Configure webpack for custom assets
-  webpack: (config, { isServer }) => {
-    // Handle SCSS files from Atomix
-    config.module.rules.push({
-      test: /\.scss$/,
-      use: [
-        'style-loader',
-        'css-loader',
-        {
-          loader: 'sass-loader',
-          options: {
-            implementation: require('sass-embedded'),
-          },
-        },
-      ],
-    });
-    // Handle TypeScript declaration files
-    config.module.rules.push({
-      test: /\.d\.ts$/,
-      use: ['ignore-loader'],
-      exclude: /node_modules/,
-    });
-    // Ignore TypeScript declaration file warnings
-    config.ignoreWarnings = [
-      ...(config.ignoreWarnings || []),
-      { module: /\.d\.ts$/ }
-    ];
-    // Add fallbacks for Node.js core modules (required for Webpack 5)
-    if (!isServer) {
-      config.resolve.fallback = {
-        ...config.resolve.fallback,
-        crypto: false, // Provide empty mock for crypto
-      };
-    }
-    return config;
-  },
-};
-module.exports = nextConfig;
-```
-For the TypeScript declaration files fix, you'll need to install:
-```bash
-npm install --save-dev ignore-loader
-# or
-yarn add --dev ignore-loader
-# or
-pnpm add --save-dev ignore-loader
-```
-### TypeScript Configuration
-Ensure your `tsconfig.json` includes proper module resolution:
-```json
-{
-  "compilerOptions": {
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve"
-  }
-}
-```
-## Server-Side Rendering (SSR) Support
-Atomix components are fully compatible with Next.js SSR. All components render correctly on the server and hydrate properly on the client.
-### Dynamic Imports (if needed)
-For components with client-side only features, use dynamic imports:
-```tsx
-import dynamic from 'next/dynamic'
-const DynamicComponent = dynamic(
-  () => import('@shohojdhara/atomix').then(mod => mod.ComponentName),
-  { ssr: false }
-)
-```
-## Styling Options
-### 1. Using Pre-built CSS
-```tsx
-import '@shohojdhara/atomix/css'
-// or minified version
-import '@shohojdhara/atomix/css/min'
-```
-### 2. Using SCSS (for customization)
-```scss
-// styles/globals.scss
-@import '@shohojdhara/atomix/scss';
-// Your custom overrides
-:root {
-  --atomix-primary-color: #your-brand-color;
-}
-```
-### 3. CSS Modules Support
-Atomix works seamlessly with Next.js CSS Modules:
-```tsx
-// components/MyComponent.module.scss
-.container {
-  @apply u-p-4 u-bg-primary-subtle;
-}
-.title {
-  @apply c-hero__title;
-}
-```
-## Theme Configuration
-### Dark Mode Support
-```tsx
-// app/layout.tsx
-'use client'
-import { useEffect, useState } from 'react'
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  const [theme, setTheme] = useState('light')
-  useEffect(() => {
-    document.documentElement.setAttribute('data-atomix-theme', theme)
-  }, [theme])
-  return (
-    <html lang="en" data-atomix-theme={theme}>
-      <body>{children}</body>
-    </html>
-  )
-}
-```
-### Custom Theme Variables
-```css
-/* styles/globals.css */
-:root {
-  /* Primary Colors */
-  --atomix-primary-50: #eff6ff;
-  --atomix-primary-500: #3b82f6;
-  --atomix-primary-900: #1e3a8a;
-  /* Custom spacing */
-  --atomix-spacing-xs: 0.25rem;
-  --atomix-spacing-sm: 0.5rem;
-  --atomix-spacing-md: 1rem;
-}
-```
-## Performance Optimization
-### Tree Shaking
-Atomix supports tree shaking out of the box. Import only the components you need:
-```tsx
-// ✅ Good - tree shaking works
-import { Button, Card } from '@shohojdhara/atomix'
-// ❌ Avoid - imports entire library
-import * as Atomix from '@shohojdhara/atomix'
-```
-### Bundle Analysis
-Use Next.js bundle analyzer to check your bundle size:
-```bash
-npm install --save-dev @next/bundle-analyzer
-```
-```javascript
-// next.config.js
-const withBundleAnalyzer = require('@next/bundle-analyzer')({
-  enabled: process.env.ANALYZE === 'true',
-})
-module.exports = withBundleAnalyzer(nextConfig)
-```
-## Common Issues and Solutions
-### 1. CSS Not Loading
-Make sure to import the CSS file in your root layout or _app file:
-```tsx
-import '@shohojdhara/atomix/css'
-```
-### 2. TypeScript Errors
-Ensure you have the latest TypeScript definitions:
-```bash
-npm install --save-dev @types/react @types/react-dom
-```
-### 3. Hydration Mismatches
-For components with dynamic content, use the `suppressHydrationWarning` prop:
-```tsx
-<div suppressHydrationWarning>
-  {/* Dynamic content */}
-</div>
-```
-### 4. Font Loading Issues
-If using custom fonts, add them to your Next.js font optimization:
-```tsx
-// app/layout.tsx
-import { Inter } from 'next/font/google'
-const inter = Inter({ subsets: ['latin'] })
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
-```
-## Example Projects
-### Minimal Setup
-```tsx
-// app/page.tsx
-import { Button, Hero } from '@shohojdhara/atomix'
-export default function Home() {
-  return (
-    <Hero
-      title="Hello Next.js + Atomix"
-      actions={<Button variant="primary" label="Get Started" />}
-    />
-  )
-}
-```
-### Full Application Structure
-```
-my-nextjs-app/
-├── app/
-│   ├── layout.tsx          # Import Atomix CSS here
-│   ├── page.tsx           # Use Atomix components
-│   └── globals.css        # Custom theme variables
-├── components/
-│   └── ui/                # Your custom components using Atomix
-├── next.config.js         # Next.js configuration
-└── package.json
-```
-## Migration from Other UI Libraries
-If you're migrating from other UI libraries, Atomix provides similar components with consistent APIs. Check our [Component Migration Guide](./MIGRATION.md) for specific mappings.
-## Support
-- [Documentation](https://liimonx.github.io/atomix)
-- [Storybook](https://liimonx.github.io/atomix/storybook)
-- [GitHub Issues](https://github.com/liimonx/atomix/issues)
-## Contributing
-See our [Contributing Guide](./CONTRIBUTING.md) for information on how to contribute to Atomix.

package/babel.config.js DELETED Viewed

@@ -1,58 +0,0 @@
-module.exports = {
-  presets: [
-    ['@babel/preset-env', {
-      targets: {
-        browsers: [
-          'last 2 versions',
-          'not dead',
-          'not IE 11',
-          '> 1%'
-        ],
-        node: '16'
-      },
-      useBuiltIns: 'usage',
-      corejs: 3,
-      bugfixes: true,
-      loose: false,
-      modules: false,
-      debug: process.env.NODE_ENV === 'development'
-    }],
-    ['@babel/preset-react', {
-      runtime: 'automatic',
-      development: process.env.NODE_ENV === 'development',
-      importSource: 'react'
-    }],
-    ['@babel/preset-typescript', {
-      isTSX: true,
-      allExtensions: true,
-      allowDeclareFields: true,
-      allowNamespaces: true,
-      optimizeConstEnums: true
-    }]
-  ],
-  plugins: [
-    ['@babel/plugin-transform-runtime', {
-      corejs: 3,
-      helpers: true,
-      regenerator: true
-    }]
-  ],
-  env: {
-    production: {
-      compact: true,
-      comments: false,
-      minified: true
-    },
-    test: {
-      presets: [
-        ['@babel/preset-env', { targets: { node: 'current' } }]
-      ]
-    }
-  },
-  ignore: [
-    '**/*.d.ts',
-    '**/*.test.ts',
-    '**/*.test.tsx',
-    'node_modules'
-  ]
-};

package/dist/types/layouts/Grid/Container.d.ts DELETED Viewed

@@ -1,38 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The content to be rendered within the container
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Container type:
-     * - undefined: responsive container with max-width at each breakpoint
-     * - 'fluid': full width container
-     * - 'sm', 'md', 'lg', 'xl', 'xxl': responsive container with max-width at specified breakpoint
-     */
-    type?: 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-}
-/**
- * Container component for creating responsive layouts.
- * Uses the CSS container classes defined in _objects.container.scss.
- *
- * @example
- * ```tsx
- * <Container>
- *   Content with responsive max-width
- * </Container>
- *
- * <Container type="fluid">
- *   Full width content
- * </Container>
- *
- * <Container type="md">
- *   Content with max-width at md breakpoint
- * </Container>
- * ```
- */
-export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/Grid/Grid.d.ts DELETED Viewed

@@ -1,37 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export interface GridProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The content to be rendered within the grid
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Control the horizontal alignment of items
-     */
-    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
-    /**
-     * Control the vertical alignment of items
-     */
-    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-    /**
-     * No gutters between columns
-     */
-    noGutters?: boolean;
-}
-/**
- * Grid component for creating responsive layouts.
- * Uses the CSS grid system defined in _objects.grid.scss.
- *
- * @example
- * ```tsx
- * <Grid>
- *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
- *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
- *   <GridCol sm={6} md={4} lg={3}>Column content</GridCol>
- * </Grid>
- * ```
- */
-export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/Grid/GridCol.d.ts DELETED Viewed

@@ -1,64 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The content to be rendered within the column
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Number of columns to span at extra small breakpoint (default)
-     */
-    xs?: number | 'auto';
-    /**
-     * Number of columns to span at small breakpoint
-     */
-    sm?: number | 'auto';
-    /**
-     * Number of columns to span at medium breakpoint
-     */
-    md?: number | 'auto';
-    /**
-     * Number of columns to span at large breakpoint
-     */
-    lg?: number | 'auto';
-    /**
-     * Number of columns to span at extra large breakpoint
-     */
-    xl?: number | 'auto';
-    /**
-     * Number of columns to span at extra extra large breakpoint
-     */
-    xxl?: number | 'auto';
-    /**
-     * Offset at extra small breakpoint
-     */
-    offsetXs?: number;
-    /**
-     * Offset at small breakpoint
-     */
-    offsetSm?: number;
-    /**
-     * Offset at medium breakpoint
-     */
-    offsetMd?: number;
-    /**
-     * Offset at large breakpoint
-     */
-    offsetLg?: number;
-    /**
-     * Offset at extra large breakpoint
-     */
-    offsetXl?: number;
-    /**
-     * Offset at extra extra large breakpoint
-     */
-    offsetXxl?: number;
-}
-/**
- * GridCol component for creating columns within a Grid.
- * Uses the CSS grid column classes defined in _objects.grid.scss.
- */
-export declare const GridCol: React.ForwardRefExoticComponent<GridColProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/Grid/Row.d.ts DELETED Viewed

@@ -1,38 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export interface RowProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The content to be rendered within the row
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Control the horizontal alignment of items
-     */
-    justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
-    /**
-     * Control the vertical alignment of items
-     */
-    alignItems?: 'start' | 'end' | 'center' | 'baseline' | 'stretch';
-    /**
-     * No gutters between columns
-     */
-    noGutters?: boolean;
-}
-/**
- * Row component for creating rows within a Grid or Container.
- * Uses the CSS row classes defined in _objects.grid.scss.
- *
- * @example
- * ```tsx
- * <Container>
- *   <Row justifyContent="between" alignItems="center">
- *     <GridCol md={6}>Column content</GridCol>
- *     <GridCol md={6}>Column content</GridCol>
- *   </Row>
- * </Container>
- * ```
- */
-export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/layouts/Grid/index.d.ts DELETED Viewed

@@ -1,8 +0,0 @@
-export { Grid } from './Grid';
-export type { GridProps } from './Grid';
-export { GridCol } from './GridCol';
-export type { GridColProps } from './GridCol';
-export { Container } from './Container';
-export type { ContainerProps } from './Container';
-export { Row } from './Row';
-export type { RowProps } from './Row';

package/dist/types/layouts/MasonryGrid/MasonryGrid.d.ts DELETED Viewed

@@ -1,71 +0,0 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
-export interface MasonryGridProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * The content to be rendered within the masonry grid
-     */
-    children: ReactNode;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Number of columns at extra small breakpoint (default)
-     */
-    xs?: number;
-    /**
-     * Number of columns at small breakpoint
-     */
-    sm?: number;
-    /**
-     * Number of columns at medium breakpoint
-     */
-    md?: number;
-    /**
-     * Number of columns at large breakpoint
-     */
-    lg?: number;
-    /**
-     * Number of columns at extra large breakpoint
-     */
-    xl?: number;
-    /**
-     * Number of columns at extra extra large breakpoint
-     */
-    xxl?: number;
-    /**
-     * Gap between items (in pixels)
-     */
-    gap?: number;
-    /**
-     * Whether to animate item transitions
-     */
-    animate?: boolean;
-    /**
-     * Whether to handle image loading to prevent layout shifts
-     * When true, items will be shown immediately and positions updated as images load
-     */
-    imagesLoaded?: boolean;
-    /**
-     * Callback fired when all images are loaded and layout is complete
-     */
-    onLayoutComplete?: () => void;
-    /**
-     * Callback fired each time an image loads and layout is updated
-     */
-    onImageLoad?: (loadedCount: number, totalCount: number) => void;
-}
-/**
- * MasonryGrid component for creating a responsive masonry layout.
- * Uses JavaScript to position items optimally based on available vertical space,
- * similar to how a mason fits stones in a wall.
- *
- * @example
- * ```tsx
- * <MasonryGrid xs={1} sm={2} md={3} lg={4}>
- *   <MasonryGridItem>Item 1</MasonryGridItem>
- *   <MasonryGridItem>Item 2</MasonryGridItem>
- *   <MasonryGridItem>Item 3</MasonryGridItem>
- * </MasonryGrid>
- * ```
- */
-export declare const MasonryGrid: React.ForwardRefExoticComponent<MasonryGridProps & React.RefAttributes<HTMLDivElement>>;