@ama-pt/agora-design-system 3.7.0 → 4.0.1

package/artifacts/dist/types/configs/tailwind-config.d.ts

@@ -1,386 +1,5 @@
-import { PluginAPI } from 'tailwindcss/types/config';
-declare const AgoraTailwindConfig: {
-    content: never[];
-    theme: {
-        extend: {
-            borderWidth: {
-                DEFAULT: string;
-                0: string;
-                1: string;
-                2: string;
-                3: string;
-                4: string;
-            };
-            content: {
-                empty: string;
-            };
-            gridTemplateRows: {
-                7: string;
-                8: string;
-                9: string;
-                10: string;
-            };
-            gridTemplateColumns: {
-                '1-auto': string;
-                '2-auto': string;
-                '3-auto': string;
-                '4-auto': string;
-                '5-auto': string;
-                '6-auto': string;
-                '7-auto': string;
-                '8-auto': string;
-                '9-auto': string;
-                '10-auto': string;
-                '11-auto': string;
-                '12-auto': string;
-            };
-            opacity: {
-                16: string;
-                32: string;
-            };
-            minWidth: {
-                initial: string;
-            };
-            maxWidth: {
-                initial: string;
-            };
-            minHeight: {
-                initial: string;
-            };
-            maxHeight: {
-                initial: string;
-            };
-            zIndex: {
-                dropdown: string;
-                backdrop: string;
-                sticky: string;
-                fixed: string;
-                drawer: string;
-                dialog: string;
-                toast: string;
-                tooltip: string;
-            };
-        };
-        screens: {
-            xs: string;
-            md: string;
-            xl: string;
-        };
-        fontFamily: {
-            sans: [string, string];
-        };
-        fontSize: {
-            base: string;
-            's-regular': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            's-medium': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            's-semibold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            's-bold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'm-light': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'm-regular': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'm-medium': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'm-semibold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'm-bold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'l-light': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'l-regular': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'l-medium': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'l-semibold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'l-bold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'xl-light': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'xl-regular': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'xl-medium': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'xl-semibold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            'xl-bold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '2xl-light': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '2xl-regular': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '2xl-medium': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '2xl-semibold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '2xl-bold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '3xl-light': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '3xl-regular': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '3xl-medium': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '3xl-semibold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-            '3xl-bold': [string, {
-                lineHeight: string;
-                letterSpacing: string;
-                fontWeight: string;
-            }];
-        };
-        borderRadius: {
-            none: string;
-            4: string;
-            8: string;
-            16: string;
-            24: string;
-            32: string;
-            full: string;
-        };
-        colors: {
-            transparent: string;
-            white: string;
-            black: string;
-            focus: string;
-            backdrop: string;
-            mask: {
-                image: string;
-                'neutral-900': string;
-                'primary-900': string;
-                'secondary-900': string;
-            };
-            neutral: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            primary: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            secondary: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            informative: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            success: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            warning: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-            danger: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-            };
-        };
-        spacing: {
-            0: string;
-            8: string;
-            16: string;
-            24: string;
-            32: string;
-            40: string;
-            48: string;
-            56: string;
-            64: string;
-            72: string;
-            80: string;
-            88: string;
-            96: string;
-            104: string;
-            112: string;
-            120: string;
-            128: string;
-            256: string;
-            '1/4': string;
-            '1/2': string;
-            full: string;
-            initial: string;
-        };
-        boxShadow: {
-            none: string;
-            'top-lower': string;
-            'top-low': string;
-            'top-medium': string;
-            'top-high': string;
-            'top-higher': string;
-            'center-lower': string;
-            'center-low': string;
-            'center-medium': string;
-            'center-high': string;
-            'center-higher': string;
-            'bottom-lower': string;
-            'bottom-low': string;
-            'bottom-medium': string;
-            'bottom-high': string;
-            'bottom-higher': string;
-            inner: string;
-        };
-        transitionDuration: {
-            DEFAULT: string;
-        };
-        container: {
-            padding: {
-                xs: string;
-                md: string;
-                xl: string;
-            };
-        };
-    };
-    plugins: (({ addComponents }: PluginAPI) => void)[];
-    safelist: {
-        pattern: RegExp;
-        variants: string[];
-    }[];
+export declare const BREAKPOINTS: {
+    readonly xs: 360;
+    readonly md: 768;
+    readonly xl: 1280;
 };
-export { AgoraTailwindConfig };

package/artifacts/dist/types/hooks/use-breakpoints-to-number.d.ts

@@ -1,6 +1,6 @@
 declare const useBreakpointScreenValues: () => {
-    xsScreen: number;
-    mdScreen: number;
-    xlScreen: number;
+    xsScreen: 360;
+    mdScreen: 768;
+    xlScreen: 1280;
 };
 export { useBreakpointScreenValues };

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

@@ -1,4 +1,14 @@
-export { AgoraTailwindConfig } from './configs/tailwind-config';
+/**
+ * Side-effect import: this file is not imported for runtime values.
+ * It tells Vite to include lib.css in the generated index.css.
+ *
+ * This ensures the library base styles, such as html/button rules and
+ * @layer base, are emitted with the package output.
+ *
+ * theme.css and Tailwind Preflight/Utilities are intentionally not bundled here;
+ * consumers are responsible for importing/providing them.
+ */
+import './styles/lib.css';
 export * from './components';
 export * from './hooks';
 export * from './models';

package/package.json

@@ -1,13 +1,23 @@
 {
   "name": "@ama-pt/agora-design-system",
   "description": "Ágora Design system",
-  "version": "3.7.0",
+  "version": "4.0.1",
   "main": "artifacts/dist/index.mjs",
   "module": "artifacts/dist/index.umd.js",
   "files": [
-    "artifacts/dist"
+    "artifacts/dist",
+    "src/styles/theme.css"
   ],
   "types": "artifacts/dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./artifacts/dist/types/index.d.ts",
+      "import": "./artifacts/dist/index.mjs",
+      "require": "./artifacts/dist/index.umd.js"
+    },
+    "./index.css": "./artifacts/dist/index.css",
+    "./theme.css": "./src/styles/theme.css"
+  },
   "scripts": {
     "start": "npm run storybook",
     "dev": "npm run storybook",
@@ -21,7 +31,7 @@
     "jest-tests-no-coverage": "jest --coverage=false",
     "local-jest-tests": "jest --config jest.config.local.ts --coverage",
     "local-jest-tests-no-coverage": "jest --config jest.config.local.ts --coverage=false",
-    "build": "vite build && tailwindcss -i ./src/styles/globals.css -o ./artifacts/dist/tailwind.css && tsc --project tsconfig-build.json && tsc-alias -p tsconfig-build.json"
+    "build": "vite build && tsc --project tsconfig-build.json && tsc-alias -p tsconfig-build.json"
   },
   "dependencies": {
     "classnames": "^2.5.1"
@@ -40,6 +50,8 @@
     "@storybook/mdx2-csf": "^1.1.0",
     "@storybook/react": "^9.1.16",
     "@storybook/react-vite": "^9.1.16",
+    "@tailwindcss/cli": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -52,7 +64,6 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "autoprefixer": "^10.4.22",
     "babel-jest": "^29.7.0",
     "date-fns": "^4.1.0",
     "del": "^8.0.1",
@@ -77,26 +88,26 @@
     "jest-preview": "^0.3.2",
     "jest-sonar-reporter": "^2.0.0",
     "playwright": "^1.57.0",
-    "postcss": "^8.5.6",
     "prettier": "^3.7.4",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "react-syntax-highlighter": "^15.6.6",
     "storybook": "^9.1.16",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.3.0",
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
     "tsc-alias": "^1.8.16",
     "typescript": "*",
-    "vite": "^5.4.21",
+    "vite": "^7.3.3",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0"
   },
   "author": "AMA",
   "license": "MIT",