@inntechcorp/it-design 3.1.24 → 4.0.0-beta.1

package/dist/utils/GetButtonSizeSlug.d.ts

@@ -0,0 +1,6 @@
+import { ButtonSize } from '../types/ButtonProps';
+/**
+ * Button-specific size slug converter
+ * Handles both standard sizes and icon-only sizes
+ */
+export default function GetButtonSizeSlug(size: ButtonSize): string;

package/dist/utils/GetIconSizeBySize.d.ts

@@ -1,2 +1,2 @@
-import { ITDSize } from "../index";
+import { ITDSize } from '../index';
 export default function GetIconSizeBySize(size: ITDSize): "14" | "16" | "18" | "20" | "22" | "24";

package/dist/utils/GetSizeBySizeSlug.d.ts

@@ -1,3 +1,3 @@
-import { ComponentSizes } from "enums/enum";
-import { ITDSizeSlug } from "../index";
+import { ComponentSizes } from '../enums/enum';
+import { ITDSizeSlug } from '../index';
 export default function GetSizeBySizeSlug(size: ITDSizeSlug): ComponentSizes;

package/dist/utils/GetSizeSlugBySize.d.ts

@@ -1,3 +1,6 @@
-import { ComponentSizesSlug } from "enums/enum";
-import { ITDSize } from "../index";
+import { ComponentSizesSlug } from '../enums/enum';
+import { ITDSize } from '../index';
+/**
+ * General purpose size slug converter for all components
+ */
 export default function GetSizeSlugBySize(size: ITDSize): ComponentSizesSlug;

package/dist/utils/InlineSVGCached.d.ts

@@ -7,5 +7,5 @@ type InlineSVGCachedProps = {
     onLoaded?: () => void;
     onError?: (error: unknown) => void;
 };
-declare const _default: import("react").MemoExoticComponent<({ src, className, style, title, role, onLoaded, onError }: InlineSVGCachedProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ src, className, style, title, role, onLoaded, onError }: InlineSVGCachedProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;

package/dist/utils/index.d.ts

@@ -1,4 +1,6 @@
-export { default as GetIconSizeBySize } from './GetIconSizeBySize';
-export { default as GetSizeBySizeSlug } from './GetSizeBySizeSlug';
-export { default as GetSizeSlugBySize } from './GetSizeSlugBySize';
-export { default as InlineSVGCached } from './InlineSVGCached';
+export { default as GetIconSizeBySize } from '../GetIconSizeBySize';
+export { default as GetSizeBySizeSlug } from '../GetSizeBySizeSlug';
+export { default as GetSizeSlugBySize } from '../GetSizeSlugBySize';
+export { default as GetButtonSizeSlug } from '../GetButtonSizeSlug';
+export { default as InlineSVGCached } from '../InlineSVGCached';
+export { ErrorAnnouncement, getErrorAriaProps, getErrorId } from '../ErrorAnnouncement';

package/package.json

@@ -1,20 +1,30 @@
 {
   "name": "@inntechcorp/it-design",
-  "version": "3.1.24",
+  "version": "4.0.0-beta.1",
   "description": "All in one Design library for web applications.",
   "author": "Inn.Tech",
   "license": "ISC",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
+  "sideEffects": [
+    "*.css",
+    "lib/global.css",
+    "lib/css/*.css",
+    "lib/index.ts",
+    "lib/context/**",
+    "lib/helpers/datetime/**"
+  ],
   "files": [
     "dist",
-    "src/typings"
+    "src/typings",
+    "ACCESSIBILITY.md"
   ],
   "scripts": {
     "prepublish": "rollup -c --bundleConfigAsCjs",
     "build-rollup": "[ -d ./dist ] || mkdir dist && rm -r ./dist && rollup -c --bundleConfigAsCjs",
+    "analyze": "ROLLUP_WATCH=false rollup -c --bundleConfigAsCjs && open dist/stats.html",
     "start-rollup": "rollup -c -w --bundleConfigAsCjs",
     "npm-publish": "yarn run build-rollup && npm publish --access public",
     "start": "vite --host",
@@ -29,119 +39,126 @@
   },
   "dependencies": {
     "@mona-health/react-input-mask": "^3.0.3",
-    "autoprefixer": "10.4.21",
-    "axios": "1.11.0",
-    "core-js": "3.45.1",
+    "autoprefixer": "10.4.23",
+    "axios": "1.13.2",
+    "core-js": "3.47.0",
+    "csstype": "^3.2.3",
+    "dayjs": "1.11.19",
     "fast-deep-equal": "^3.1.3",
-    "i18next": "25.4.2",
-    "i18next-browser-languagedetector": "8.2.0",
-    "i18next-http-backend": "3.0.2",
-    "i18next-resources-to-backend": "^1.2.1",
-    "lodash-es": "4.17.21",
-    "overlayscrollbars": "2.11.4",
+    "lodash-es": "4.17.22",
+    "lucide-react": "^0.562.0",
+    "overlayscrollbars": "2.13.0",
     "postcss": "8.5.6",
     "postcss-calc": "10.1.1",
     "prop-types": "^15.8.1",
-    "query-string": "9.2.2",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-i18next": "15.7.3",
+    "query-string": "9.3.1",
     "react-nanny": "^2.15.0",
     "react-number-format": "5.4.4",
-    "react-router": "7.8.2",
-    "react-router-dom": "7.8.2",
-    "react-spring": "10.0.1",
+    "react-router": "7.11.0",
+    "react-router-dom": "7.11.0",
+    "react-spring": "10.0.3",
     "react-svg": "16.3.0",
     "react-transition-group": "4.4.5",
-    "react-virtuoso": "^4.12.8",
+    "react-virtuoso": "4.17.0",
     "smoothscroll-polyfill": "^0.4.4",
-    "styled-components": "6.1.19",
-    "uuid": "11.1.0",
+    "sonner": "^2.0.7",
+    "uuid": "13.0.0",
     "web-vitals": "5.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.28.3",
-    "@babel/plugin-transform-runtime": "7.28.3",
-    "@babel/preset-env": "7.28.3",
-    "@babel/preset-react": "7.27.1",
-    "@babel/preset-typescript": "7.27.1",
-    "@babel/runtime": "7.28.3",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "28.0.6",
+    "@babel/core": "7.28.5",
+    "@babel/plugin-transform-runtime": "7.28.5",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@babel/runtime": "7.28.4",
+    "@rollup/plugin-babel": "6.1.0",
+    "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "6.1.0",
-    "@rollup/plugin-node-resolve": "16.0.1",
-    "@storybook/addon-docs": "^9.0.9",
-    "@storybook/addon-links": "9.1.4",
-    "@storybook/addon-onboarding": "9.1.4",
-    "@storybook/builder-vite": "9.1.4",
-    "@storybook/react-vite": "9.1.4",
-    "@testing-library/jest-dom": "6.8.0",
-    "@testing-library/react": "16.3.0",
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-links": "10.1.10",
+    "@storybook/addon-onboarding": "10.1.10",
+    "@storybook/builder-vite": "10.1.10",
+    "@storybook/react-vite": "10.1.10",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "24.3.0",
-    "@types/react": "19.1.12",
-    "@types/react-dom": "19.1.9",
+    "@types/node": "25.0.3",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/rollup-plugin-node-globals": "1.4.5",
-    "@vitejs/plugin-react": "5.0.2",
+    "@vitejs/plugin-react": "5.1.2",
     "babel-plugin-styled-components": "2.1.4",
     "copy-webpack-plugin": "13.0.1",
     "customize-cra": "^1.0.0",
-    "dayjs": "^1.11.19",
     "dts-bundle-generator": "^9.5.1",
-    "sonner": "^2.0.0",
-    "eslint-plugin-storybook": "9.1.4",
+    "eslint-plugin-storybook": "10.1.10",
     "esm": "^3.2.25",
+    "i18next": "25.7.3",
+    "i18next-browser-languagedetector": "8.2.0",
+    "i18next-http-backend": "3.0.2",
+    "i18next-resources-to-backend": "^1.2.1",
     "less-loader": "12.3.0",
     "postcss-custom-properties": "14.0.6",
     "postcss-import": "16.1.1",
     "postcss-nesting": "13.0.2",
     "postcss-normalize": "13.0.1",
-    "postcss-preset-env": "10.3.1",
+    "postcss-preset-env": "10.5.0",
+    "react": "19.2.3",
     "react-app-rewired": "^2.2.1",
-    "rollup": "4.50.0",
+    "react-dom": "19.2.3",
+    "react-i18next": "16.5.0",
+    "rollup": "4.54.0",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "6.2.3",
+    "rollup-plugin-dts": "6.3.0",
     "rollup-plugin-local-resolve": "^1.0.7",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "4.0.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-styles": "4.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.92.0",
-    "sass-embedded": "^1.97.1",
+    "rollup-plugin-visualizer": "6.0.5",
     "source-map-loader": "5.0.0",
-    "storybook": "9.1.4",
+    "storybook": "10.1.10",
+    "styled-components": "6.1.19",
     "tslib": "2.8.1",
-    "typescript": "5.9.2",
-    "vite": "7.1.4",
+    "typescript": "5.9.3",
+    "vite": "7.3.0",
     "vite-plugin-css-injected-by-js": "3.5.2",
-    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "2.2.2",
     "vite-plugin-node-polyfills": "0.24.0",
     "vite-plugin-svgr": "4.5.0",
-    "vite-tsconfig-paths": "5.1.4"
+    "vite-tsconfig-paths": "6.0.3"
   },
   "peerDependencies": {
-    "dayjs": "1.11.18",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "sonner": "^2.0.0",
     "styled-components": "^6.1.19"
   },
   "bugs": {
     "url": "https://github.com/inntechcorp/it-design-library/issues"
   },
   "keywords": [
+    "design-system",
+    "component-library",
+    "react",
+    "typescript",
+    "styled-components",
+    "accessibility",
+    "wcag",
+    "a11y",
+    "ui",
     "design",
-    "library",
-    "ui"
+    "oklch",
+    "dark-mode"
   ],
   "eslintConfig": {
     "extends": [
@@ -167,15 +184,21 @@
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/index.d.mts",
-        "default": "./dist/index.esm.js"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/es/index.js"
       },
       "require": {
         "types": "./dist/index.d.ts",
-        "default": "./dist/index.cjs.js"
+        "default": "./dist/cjs/index.js"
       }
     },
+    "./global.css": "./dist/global.css",
     "./dist/global.css": "./dist/global.css",
+    "./css/properties.css": "./dist/css/properties.css",
+    "./css/reset.css": "./dist/css/reset.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/components.css": "./dist/css/components.css",
+    "./css/utilities.css": "./dist/css/utilities.css",
     "./locales/*": "./dist/locales/*"
   },
   "directories": {

package/dist/button/button.style.SVG.d.ts

@@ -1,4 +0,0 @@
-/**
- * SVG
- */
-export declare const getSVG: () => import("styled-components").RuleSet<object>;

package/dist/button/button.style.circle.d.ts

@@ -1,4 +0,0 @@
-/**
- * CIRCLE
- */
-export declare const getCircle: () => import("styled-components").RuleSet<object>;

package/dist/button/button.style.strecth.d.ts

@@ -1,4 +0,0 @@
-/**
- * STRECTH
- */
-export declare const getStrecth: () => import("styled-components").RuleSet<object>;

package/dist/cropper/index.d.ts

@@ -1,44 +0,0 @@
-export interface CropArea {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export interface ImageCropperProps {
-    /** Image source (URL or base64) */
-    src: string;
-    /** Aspect ratio to maintain (e.g., 1 for square, 16/9 for widescreen). If undefined, free crop */
-    aspectRatio?: number;
-    /** Minimum crop width in pixels */
-    minWidth?: number;
-    /** Minimum crop height in pixels */
-    minHeight?: number;
-    /** Output width - cropped image will be resized to this width */
-    outputWidth?: number;
-    /** Output height - cropped image will be resized to this height */
-    outputHeight?: number;
-    /** Output image quality (0-1) */
-    quality?: number;
-    /** Output image format */
-    outputFormat?: "image/jpeg" | "image/png" | "image/webp";
-    /** Callback when crop area changes */
-    onCropChange?: (cropArea: CropArea) => void;
-    /** Container width */
-    width?: string | number;
-    /** Container height */
-    height?: string | number;
-    /** Show grid lines on crop area (default: true) */
-    showGrid?: boolean;
-}
-export interface ImageCropperRef {
-    /** Get cropped image as Blob */
-    getCroppedImage: () => Promise<Blob | null>;
-    /** Get cropped image as File */
-    getCroppedFile: (fileName?: string) => Promise<File | null>;
-    /** Get crop area coordinates */
-    getCropArea: () => CropArea;
-    /** Reset crop area to center */
-    reset: () => void;
-}
-declare const ImageCropper: import("react").ForwardRefExoticComponent<ImageCropperProps & import("react").RefAttributes<ImageCropperRef>>;
-export default ImageCropper;

package/dist/global.css

@@ -1,146 +0,0 @@
-body {
-  
-  padding: 0;
-  margin: 0;
-
-}
-
-*, ::after, ::before {
-  box-sizing                  : border-box;
-  -webkit-tap-highlight-color : transparent;
-  -webkit-font-smoothing      : antialiased;
-  margin    : 0px;
-  padding   : 0px;
-  outline   : none;
-}
-
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-  outline: 0;
-  font-weight: bold;
-}
-
-a {
-  cursor: pointer;
-  color: #029CFD;
-  text-decoration: none;
-}
-
-a:hover {
-  color: #0083d4;
-}
-
-button, span, input, textarea {
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-input {
-  background: transparent;
-  border: none;
-}
-
-input, textarea {
-  &::placeholder {
-    color: inherit;
-  }
-}
-
-button {
-  border: none;
-}
-
-textarea {
-  vertical-align: top;
-  vertical-align: text-top;
-}
-
-.itd-provider, #itd-modal-root, #itd-tooltip-root, #itd-notification-root {
-
-  font-size   : 0.875rem;
-  line-height : 1rem;
-  font-weight : 500;
-  font-family : "Inter", sans-serif;
-  color       : #555;
-  -webkit-font-smoothing: antialiased;
-
-}
-
-.os-theme-dark {
-  --os-size: 8px;
-  --os-handle-bg: #3598fe80;
-  --os-handle-bg-hover: #3598fe;
-  --os-handle-bg-active: #3598fe;
-}
-
-/* ================================= */
-/* Component Transitions */
-/* ================================= */
-
-/* Modal Transitions */
-.modal-enter {
-  opacity: 0 !important;
-  transform: translate(-50%, -40%) !important;
-}
-
-.modal-enter-active {
-  opacity: 1 !important;
-  transform: translate(-50%, -50%) !important;
-  transition: opacity 300ms, transform 300ms !important;
-  transition-delay: .3s !important;
-}
-
-.modal-exit {
-  opacity: 1 !important;
-  transform: translate(-50%, -50%) !important;
-}
-
-.modal-exit-active {
-  opacity: 0 !important;
-  transform: translate(-50%, -40%) !important;
-  transition: opacity 300ms, transform 300ms !important;
-}
-
-/* Select Menu Transitions */
-.select-menu-enter {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-}
-
-.select-menu-enter-active {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
-
-.select-menu-exit {
-  opacity: 1 !important;
-}
-
-.select-menu-exit-active {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
-
-/* DatePicker Modal Transitions */
-.datepicker-modal-enter {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-}
-
-.datepicker-modal-enter-active {
-  opacity: 1 !important;
-  transform: translateY(0) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}
-
-.datepicker-modal-exit {
-  opacity: 1 !important;
-}
-
-.datepicker-modal-exit-active {
-  opacity: 0 !important;
-  transform: translateY(-10px) !important;
-  transition: opacity 250ms, transform 250ms !important;
-}

package/dist/icons/FileDocument.d.ts

@@ -1,6 +0,0 @@
-declare const FileDocument: ({ width, height, fill }: {
-    width?: number;
-    height?: number;
-    fill?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default FileDocument;

package/dist/icons/FileExcel.d.ts

@@ -1,5 +0,0 @@
-declare const FileExcel: ({ width, height }: {
-    width?: number;
-    height?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default FileExcel;

package/dist/icons/FilePdf.d.ts

@@ -1,5 +0,0 @@
-declare const FilePdf: ({ width, height }: {
-    width?: number;
-    height?: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export default FilePdf;