@shohojdhara/atomix 0.1.13 → 0.1.15

package/dist/types/components/Toggle/scripts/bundle.d.ts

@@ -0,0 +1,2 @@
+import Toggle from './index';
+export default Toggle;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-interface TooltipProps {
+export interface TooltipProps {
     /**
      * Content to be displayed in the tooltip
      */
@@ -29,7 +29,5 @@ interface TooltipProps {
      */
     offset?: number;
 }
-declare const Tooltip: React.FC<TooltipProps>;
-export type { TooltipProps };
+export declare const Tooltip: React.FC<TooltipProps>;
 export default Tooltip;
-export { Tooltip };

package/dist/types/components/Upload/Upload.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-interface UploadProps {
+export interface UploadProps {
     /**
      * Whether the upload component is disabled
      */
@@ -60,7 +60,5 @@ interface UploadProps {
 /**
  * Upload component for file uploads with drag and drop
  */
-declare const Upload: React.FC<UploadProps>;
-export type { UploadProps };
+export declare const Upload: React.FC<UploadProps>;
 export default Upload;
-export { Upload };

package/dist/types/components/index.d.ts

@@ -1,78 +1,45 @@
-export { default as Accordion } from './Accordion/Accordion';
-export type { AccordionProps } from './Accordion/Accordion';
-export { default as Avatar } from './Avatar/Avatar';
-export type { AvatarProps } from './Avatar/Avatar';
-export { default as Badge } from './Badge/Badge';
-export type { BadgeProps } from './Badge/Badge';
-export { default as Breadcrumb } from './Breadcrumb/Breadcrumb';
-export type { BreadcrumbProps } from './Breadcrumb/Breadcrumb';
-export { default as Button } from './Button';
-export type { ButtonProps } from './Button';
-export { default as Callout } from './Callout/Callout';
-export type { CalloutProps } from './Callout/Callout';
-export { default as Card } from './Card/Card';
-export type { CardProps } from './Card/Card';
-export { default as ColorModeToggle } from './ColorModeToggle/ColorModeToggle';
-export type { ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
-export { default as Countdown } from './Countdown/Countdown';
-export type { CountdownProps } from './Countdown/Countdown';
-export { default as DataTable } from './DataTable/DataTable';
-export type { DataTableProps } from './DataTable/DataTable';
-export { default as DatePicker } from './DatePicker/DatePicker';
-export type { DatePickerProps } from './DatePicker/DatePicker';
-export { default as Dropdown } from './Dropdown/Dropdown';
-export type { DropdownProps } from './Dropdown/Dropdown';
-export { default as EdgePanel } from './EdgePanel/EdgePanel';
-export type { EdgePanelProps } from './EdgePanel/EdgePanel';
-export { default as Form } from './Form/Form';
-export { default as Input } from './Form/Input';
-export { default as Textarea } from './Form/Textarea';
-export { default as Select } from './Form/Select';
-export { default as Checkbox } from './Form/Checkbox';
-export { default as Radio } from './Form/Radio';
-export { default as Hero } from './Hero/Hero';
-export type { HeroProps } from './Hero/Hero';
-export { default as Icon } from './Icon/Icon';
-export type { IconProps } from './Icon/Icon';
-export { default as List } from './List/List';
-export type { ListProps } from './List/List';
-export { default as Messages } from './Messages/Messages';
-export type { MessagesProps } from './Messages/Messages';
-export { default as Modal } from './Modal/Modal';
-export type { ModalProps } from './Modal/Modal';
-export { default as Navbar } from './Navbar/Navbar';
-export type { NavbarProps } from './Navbar/Navbar';
-export { default as Pagination } from './Pagination/Pagination';
-export type { PaginationProps } from './Pagination/Pagination';
-export { default as PhotoViewer } from './PhotoViewer/PhotoViewer';
-export type { PhotoViewerProps } from './PhotoViewer/PhotoViewer';
-export { default as Popover } from './Popover/Popover';
-export type { PopoverProps } from './Popover/Popover';
-export { default as ProductReview } from './ProductReview/ProductReview';
-export type { ProductReviewProps } from './ProductReview/ProductReview';
-export { default as Progress } from './Progress/Progress';
-export type { ProgressProps } from './Progress/Progress';
-export { default as Rating } from './Rating/Rating';
-export type { RatingProps } from './Rating/Rating';
-export { default as River } from './River/River';
-export type { RiverProps } from './River/River';
-export { default as SectionIntro } from './SectionIntro/SectionIntro';
-export type { SectionIntroProps } from './SectionIntro/SectionIntro';
-export { default as Spinner } from './Spinner/Spinner';
-export type { SpinnerProps } from './Spinner/Spinner';
-export { default as Steps } from './Steps/Steps';
-export type { StepsProps } from './Steps/Steps';
-export { default as Tab } from './Tab/Tab';
-export type { TabProps } from './Tab/Tab';
-export { default as Testimonial } from './Testimonial/Testimonial';
-export type { TestimonialProps } from './Testimonial/Testimonial';
-export { default as Todo } from './Todo/Todo';
-export type { TodoProps } from './Todo/Todo';
-export { default as Toggle } from './Toggle/Toggle';
-export type { ToggleProps } from './Toggle/Toggle';
-export { default as Tooltip } from './Tooltip/Tooltip';
-export type { TooltipProps } from './Tooltip/Tooltip';
-export { default as Upload } from './Upload/Upload';
-export type { UploadProps } from './Upload/Upload';
-export { default as AtomixLogo } from './AtomixLogo/AtomixLogo';
-export type { AtomixLogoProps } from './AtomixLogo/AtomixLogo';
+// Auto-generated component type exports
+
+export * from './Accordion/Accordion';
+export * from './AtomixLogo/AtomixLogo';
+export * from './Avatar/Avatar';
+export * from './Badge/Badge';
+export * from './Breadcrumb/Breadcrumb';
+export * from './Button/Button';
+export * from './Callout/Callout';
+export * from './Card/Card';
+export * from './ColorModeToggle/ColorModeToggle';
+export * from './Countdown/Countdown';
+export * from './DataTable/DataTable';
+export * from './DatePicker/DatePicker';
+export * from './Dropdown/Dropdown';
+export * from './EdgePanel/EdgePanel';
+export * from './Form/Form';
+export * from './Hero/Hero';
+export * from './Icon/Icon';
+export * from './List/List';
+export * from './Messages/Messages';
+export * from './Modal/Modal';
+export * from './Navbar/Navbar';
+export * from './Pagination/Pagination';
+export * from './PhotoViewer/PhotoViewer';
+export * from './Popover/Popover';
+export * from './ProductReview/ProductReview';
+export * from './Progress/Progress';
+export * from './Rating/Rating';
+export * from './River/River';
+export * from './SectionIntro/SectionIntro';
+export * from './Spinner/Spinner';
+export * from './Steps/Steps';
+export * from './Tab/Tab';
+export * from './Testimonial/Testimonial';
+export * from './Todo/Todo';
+export * from './Toggle/Toggle';
+export * from './Tooltip/Tooltip';
+export * from './Upload/Upload';
+export * from './Form/Form';
+export * from './Form/Input';
+export * from './Form/Textarea';
+export * from './Form/Select';
+export * from './Form/Checkbox';
+export * from './Form/Radio';

package/dist/types/index.d.ts

@@ -1,58 +1,24 @@
-import * as components from './components';
-import * as lib from './lib';
-export { components };
-export { lib };
-declare const Atomix: {
-    composables: typeof import("./lib/composables");
-    utils: typeof import("./lib/utils");
-    types: typeof import("./lib/types");
-    constants: typeof import("./lib/constants");
-    Accordion: import("react").FC<components.AccordionProps>;
-    Avatar: import("react").FC<components.AvatarProps>;
-    Badge: import("react").FC<components.BadgeProps>;
-    Breadcrumb: import("react").FC<components.BreadcrumbProps>;
-    Button: import("react").ForwardRefExoticComponent<Omit<components.ButtonProps & {
-        [key: string]: any;
-        as?: import("react").ElementType;
-        to?: string;
-        href?: string;
-    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Callout: import("react").FC<components.CalloutProps>;
-    Card: import("react").ForwardRefExoticComponent<components.CardProps & import("react").RefAttributes<HTMLDivElement>>;
-    ColorModeToggle: import("react").FC<components.ColorModeToggleProps>;
-    Countdown: import("react").FC<components.CountdownProps>;
-    DataTable: import("react").FC<components.DataTableProps>;
-    DatePicker: import("react").ForwardRefExoticComponent<components.DatePickerProps & import("react").RefAttributes<import("./components/DatePicker").DatePickerRef>>;
-    Dropdown: import("react").FC<components.DropdownProps>;
-    EdgePanel: import("react").FC<components.EdgePanelProps>;
-    Form: import("react").FC<import("./lib/types").FormProps>;
-    Input: import("react").FC<import("./lib/types").InputProps>;
-    Textarea: import("react").FC<import("./lib/types").TextareaProps>;
-    Select: import("react").FC<import("./lib/types").SelectProps>;
-    Checkbox: import("react").FC<import("./lib/types").CheckboxProps>;
-    Radio: import("react").FC<import("./lib/types").RadioProps>;
-    Hero: import("react").FC<components.HeroProps>;
-    Icon: import("react").FC<components.IconProps>;
-    List: import("react").FC<components.ListProps>;
-    Messages: import("react").FC<components.MessagesProps>;
-    Modal: import("react").FC<components.ModalProps>;
-    Navbar: import("react").FC<components.NavbarProps>;
-    Pagination: import("react").FC<components.PaginationProps>;
-    PhotoViewer: import("react").FC<components.PhotoViewerProps>;
-    Popover: import("react").FC<components.PopoverProps>;
-    ProductReview: import("react").FC<components.ProductReviewProps>;
-    Progress: import("react").ForwardRefExoticComponent<components.ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
-    Rating: import("react").ForwardRefExoticComponent<components.RatingProps & import("react").RefAttributes<HTMLDivElement>>;
-    River: import("react").FC<components.RiverProps>;
-    SectionIntro: import("react").FC<components.SectionIntroProps>;
-    Spinner: import("react").FC<components.SpinnerProps>;
-    Steps: import("react").FC<components.StepsProps>;
-    Tab: import("react").FC<components.TabProps>;
-    Testimonial: import("react").FC<components.TestimonialProps>;
-    Todo: import("react").FC<components.TodoProps>;
-    Toggle: import("react").FC<components.ToggleProps>;
-    Tooltip: import("react").FC<components.TooltipProps>;
-    Upload: import("react").FC<components.UploadProps>;
-    AtomixLogo: import("react").FC<components.AtomixLogoProps>;
+// Type definitions for @shohojdhara/atomix
+
+// Export all components
+export * from './components/index';
+
+// Export lib utilities
+export * from './lib/index';
+
+// Export layouts
+export * from './layouts/index';
+
+// Define the default export
+declare const atomix: {
+  [key: string]: any;
+  
+  // Explicitly include lib namespaces
+  composables: any;
+  utils: any;
+  constants: any;
+  layouts: any;
 };
-export default Atomix;
+
+// Default export
+export default atomix;

package/dist/types/layouts/index.d.ts

@@ -0,0 +1,11 @@
+import * as Grid from './Grid';
+import * as MasonryGrid from './MasonryGrid';
+declare const layouts: {
+    MasonryGrid: import("react").ForwardRefExoticComponent<MasonryGrid.MasonryGridProps & import("react").RefAttributes<HTMLDivElement>>;
+    MasonryGridItem: import("react").ForwardRefExoticComponent<MasonryGrid.MasonryGridItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Grid: import("react").ForwardRefExoticComponent<Grid.GridProps & import("react").RefAttributes<HTMLDivElement>>;
+    GridCol: import("react").ForwardRefExoticComponent<Grid.GridColProps & import("react").RefAttributes<HTMLDivElement>>;
+    Container: import("react").ForwardRefExoticComponent<Grid.ContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Row: import("react").ForwardRefExoticComponent<Grid.RowProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default layouts;

package/dist/types/lib/composables/useCheckbox.d.ts

@@ -7,5 +7,5 @@ import { CheckboxProps } from '../types/components';
 export declare function useCheckbox(initialProps?: Partial<CheckboxProps>): {
     defaultProps: Partial<CheckboxProps>;
     generateCheckboxClass: (props: Partial<CheckboxProps>) => string;
-    checkboxRef: import("react").RefObject<HTMLInputElement>;
+    checkboxRef: import("react").MutableRefObject<HTMLInputElement>;
 };

package/dist/types/lib/composables/useDatePicker.d.ts

@@ -61,10 +61,10 @@ export declare function useDatePicker({ value, onChange, selectionMode, startDat
     currentYear: number;
     selectionMode: DatePickerSelectionMode;
     rangeSelectionState: "start" | "end";
-    datePickerRef: import("react").RefObject<HTMLDivElement>;
-    inputRef: import("react").RefObject<HTMLInputElement>;
-    startDate: Date | null | undefined;
-    endDate: Date | null | undefined;
+    datePickerRef: import("react").MutableRefObject<HTMLDivElement>;
+    inputRef: import("react").MutableRefObject<HTMLInputElement>;
+    startDate: Date;
+    endDate: Date;
     setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     handleDateSelect: (day: number) => void;
     handlePrevMonth: () => void;

package/dist/types/lib/composables/useEdgePanel.d.ts

@@ -6,8 +6,8 @@ import { EdgePanelProps } from '../types/components';
  */
 export declare function useEdgePanel(initialProps?: Partial<EdgePanelProps>): {
     isOpen: boolean;
-    containerRef: import("react").RefObject<HTMLDivElement>;
-    backdropRef: import("react").RefObject<HTMLDivElement>;
+    containerRef: import("react").MutableRefObject<HTMLDivElement>;
+    backdropRef: import("react").MutableRefObject<HTMLDivElement>;
     generateEdgePanelClass: (props: Partial<EdgePanelProps>) => string;
     openPanel: () => void;
     closePanel: () => void;

package/dist/types/lib/composables/usePhotoViewer.d.ts

@@ -21,8 +21,8 @@ export declare const usePhotoViewer: ({ images, startIndex, enableGestures, onIm
     isFullscreen: boolean;
     rotationAngle: number;
     showInfo: boolean;
-    imageRef: React.RefObject<HTMLImageElement>;
-    containerRef: React.RefObject<HTMLDivElement>;
+    imageRef: React.MutableRefObject<HTMLImageElement>;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
     isTransitioning: boolean;
     setCurrentIndex: React.Dispatch<React.SetStateAction<number>>;
     setZoomLevel: (zoom: number | ((prev: number) => number)) => void;

package/dist/types/lib/types/index.d.ts

@@ -1,2 +1 @@
 export * from './components';
-export type { PhotoViewerProps } from './components';

package/index.d.ts

@@ -1,21 +1,30 @@
 // Type definitions for @shohojdhara/atomix
-// Export component types as namespace
-import * as components from './dist/types/components';
-export { components };
 
-// Export utility types as namespace
-import * as lib from './dist/types/lib';
-export { lib };
+// Import component types
+import * as components from './dist/types/components/index';
+import * as lib from './dist/types/lib/index';
+import * as layouts from './dist/types/layouts/index';
 
 // Define the type for the default export
 declare const Atomix: {
-  // Include all components
+  // Export all components
   [key: string]: any;
-  // Explicitly include lib namespaces to match implementation
+  
+  // Explicitly include lib namespaces
   composables: typeof lib.composables;
   utils: typeof lib.utils;
-  types: typeof lib.types;
   constants: typeof lib.constants;
-};
+  layouts: typeof layouts;
+} & typeof components;
 
+// Export all components individually
+export * from './dist/types/components/index';
+
+// Export lib utilities
+export * from './dist/types/lib/index';
+
+// Export layouts
+export * from './dist/types/layouts/index';
+
+// Default export
 export default Atomix;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Atomix Design System - A modern component library for web applications",
-  "main": "dist/js/atomix.react.cjs.js",
+  "main": "dist/js/atomix.react.esm.js",
   "module": "dist/js/atomix.react.esm.js",
-  "unpkg": "dist/js/atomix.react.js",
-  "jsdelivr": "dist/js/atomix.react.js",
-  "browser": "dist/js/atomix.react.js",
-  "typings": "index.d.ts",
+  "unpkg": "dist/js/atomix.react.umd.js",
+  "jsdelivr": "dist/js/atomix.react.umd.js",
+  "browser": "dist/js/atomix.react.umd.js",
+  "types": "dist/types/index.d.ts",
   "sideEffects": [
     "*.css",
     "*.scss",
@@ -15,7 +15,7 @@
   ],
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/js/atomix.react.esm.js",
       "require": "./dist/js/atomix.react.cjs.js",
       "default": "./dist/js/atomix.react.esm.js"
@@ -31,7 +31,15 @@
     },
     "./scss": "./src/styles/index.scss"
   },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/types/index.d.ts"
+      ]
+    }
+  },
   "dependencies": {
+    "@babel/runtime-corejs3": "^7.27.6",
     "@types/classnames": "^2.3.0",
     "@types/node": "^20.0.0",
     "@types/react-router-dom": "^5.3.3",
@@ -42,9 +50,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.26.10",
+    "@babel/plugin-transform-runtime": "^7.27.4",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
+    "@size-limit/preset-app": "^11.0.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
@@ -55,20 +65,38 @@
     "@storybook/test": "^8.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
     "caniuse-lite": "^1.0.30001721",
+    "clean-webpack-plugin": "^4.0.0",
+    "core-js": "^3.43.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "cssnano": "^6.1.2",
+    "eslint": "^9.29.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "gh-pages": "^6.1.1",
     "html-webpack-plugin": "^5.6.3",
     "mini-css-extract-plugin": "^2.9.2",
+    "npm-run-all": "^4.1.5",
     "polished": "^4.2.2",
     "postcss": "^8.4.24",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^10.2.3",
+    "prettier": "^3.5.3",
+    "rimraf": "^5.0.5",
     "sass-embedded": "^1.87.0",
     "sass-loader": "^16.0.5",
+    "size-limit": "^11.0.0",
     "storybook": "^8.0.0",
     "style-loader": "^4.0.0",
     "terser": "^5.24.0",
@@ -78,38 +106,50 @@
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.1",
-    "webpack-node-externals": "^3.0.0",
-    "@size-limit/preset-app": "^11.0.0",
-    "npm-run-all": "^4.1.5",
-    "size-limit": "^11.0.0"
+    "webpack-node-externals": "^3.0.0"
   },
   "scripts": {
-    "analyze": "npx webpack --mode production --env target=components --env format=all --env analyze=true",
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "predeploy": "npm run build-storybook && node scripts/prepare-deploy.js",
     "deploy": "gh-pages -d deploy",
-    "prepublishOnly": "npm run build:components",
-    "test:publish": "npm pack --dry-run",
+    "// Build scripts": "",
+    "build": "npm run build:components",
+    "build:components": "npm-run-all clean:dist build:styles build:react build:types",
+    "build:react": "webpack --mode production --env target=components --env format=all",
+    "build:styles": "webpack --mode production --env target=styles",
+    "build:types": "npm run clean:types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types && node scripts/fix-types.js",
+    "build:cjs": "webpack --mode production --env target=components --env format=cjs",
+    "build:esm": "webpack --mode production --env target=components --env format=esm",
+    "build:umd": "webpack --mode production --env target=components --env format=umd",
+    "// Utility scripts": "",
+    "clean:dist": "rimraf dist",
+    "clean:types": "rimraf dist/types",
+    "clean:all": "npm-run-all clean:dist clean:types",
+    "// Analysis scripts": "",
+    "analyze:bundle": "webpack --mode production --env target=components --env format=all --env analyze=true",
+    "analyze:size": "size-limit",
+    "analyze:all": "npm-run-all analyze:bundle analyze:size",
+    "// Version scripts": "",
     "version:patch": "npm version patch",
     "version:minor": "npm version minor",
     "version:major": "npm version major",
-    "analyze:size": "npx size-limit",
-    "analyze:bundle": "npm run analyze",
-    "build:parallel": "npm-run-all --parallel build:cjs build:esm build:umd",
-    "clean:dist": "rm -rf dist",
-    "build:components": "npm-run-all clean:dist build:types --parallel build:react build:styles build:types",
-    "build:react": "npx webpack --mode production --env target=components --env format=all",
-    "build:styles": "npm run clean:dist && npx webpack --mode production --env target=styles",
-    "build:cjs": "npx webpack --mode production --env target=components --env format=cjs",
-    "build:esm": "npx webpack --mode production --env target=components --env format=esm",
-    "build:umd": "npx webpack --mode production --env target=components --env format=umd",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "// Publishing scripts": "",
+    "prepublishOnly": "npm-run-all test build",
+    "test:publish": "npm pack --dry-run",
+    "publish:rc": "npm publish --tag next",
+    "publish:latest": "npm publish",
+    "// Development scripts": "",
     "link:local": "npm link && echo 'Package linked locally. Use npm link @shohojdhara/atomix in your project to test it.'",
     "unlink:local": "npm unlink",
-    "publish:rc": "npm publish --tag next",
-    "publish:latest": "npm publish"
+    "test": "echo \"No tests specified\" && exit 0",
+    "// Linting and formatting scripts": "",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src/",
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx src/ --fix",
+    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
+    "format:check": "prettier --check 'src/**/*.{js,jsx,ts,tsx,json,css,scss}'",
+    "typecheck": "tsc --noEmit"
   },
   "files": [
     "src",