atenea-components 1.4.17

package/dist/tokens/theme.d.ts

@@ -0,0 +1,247 @@
+export declare const theme: {
+    fontSize: {
+        readonly xs: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+        }];
+        readonly sm: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+        }];
+        readonly base: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+        }];
+        readonly lg: readonly ["clamp(1rem, 0.875rem + 0.5vw, 1.125rem)", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly xl: readonly ["clamp(1.125rem, 1rem + 0.5vw, 1.25rem)", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly "2xl": readonly ["clamp(1.25rem, 1.125rem + 0.75vw, 1.5rem)", {
+            readonly lineHeight: "2rem";
+        }];
+        readonly "3xl": readonly ["clamp(1.5rem, 1.375rem + 0.75vw, 1.875rem)", {
+            readonly lineHeight: "2.25rem";
+        }];
+        readonly "4xl": readonly ["clamp(1.75rem, 1.5rem + 1vw, 2.25rem)", {
+            readonly lineHeight: "2.5rem";
+        }];
+        readonly h1: readonly ["clamp(2rem, 1.5rem + 2.5vw, 3rem)", {
+            readonly lineHeight: "clamp(2.5rem, 2.125rem + 3vw, 3.625rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h2: readonly ["clamp(1.75rem, 1.375rem + 2vw, 2.5rem)", {
+            readonly lineHeight: "clamp(2.125rem, 1.75rem + 2.5vw, 3rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h3: readonly ["clamp(1.5rem, 1.25rem + 1.5vw, 2rem)", {
+            readonly lineHeight: "clamp(1.875rem, 1.625rem + 2vw, 2.375rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h4: readonly ["clamp(1.375rem, 1.125rem + 1.25vw, 1.75rem)", {
+            readonly lineHeight: "clamp(1.625rem, 1.375rem + 1.5vw, 2.125rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h5: readonly ["clamp(1.25rem, 1.125rem + 1vw, 1.5rem)", {
+            readonly lineHeight: "clamp(1.5rem, 1.375rem + 1.25vw, 1.75rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly s1: readonly ["clamp(1rem, 0.9375rem + 0.5vw, 1.125rem)", {
+            readonly lineHeight: "1.75rem";
+            readonly fontWeight: 400;
+        }];
+        readonly s2: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 600;
+        }];
+        readonly b1: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 400;
+        }];
+        readonly b2: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 500;
+        }];
+        readonly b3: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 400;
+        }];
+        readonly b4: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 500;
+        }];
+        readonly c1: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 500;
+        }];
+        readonly c2: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 500;
+        }];
+        readonly c3: readonly ["0.625rem", {
+            readonly lineHeight: "0.875rem";
+            readonly fontWeight: 500;
+        }];
+        readonly label: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 500;
+        }];
+        readonly buttonGiant: readonly ["clamp(1rem, 0.9375rem + 0.5vw, 1.125rem)", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonLarge: readonly ["1rem", {
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonMedium: readonly ["0.875rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonSmall: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonTiny: readonly ["0.625rem", {
+            readonly lineHeight: "0.75rem";
+            readonly fontWeight: 600;
+        }];
+    };
+    fontFamily: {
+        readonly sans: readonly ["Onest", "system-ui", "sans-serif"];
+    };
+    fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    letterSpacing: {
+        readonly normal: "0";
+    };
+    colors: {
+        black: {
+            100: string;
+            90: string;
+            80: string;
+            70: string;
+            60: string;
+            50: string;
+            40: string;
+            30: string;
+            20: string;
+            10: string;
+        };
+        white: {
+            100: string;
+            90: string;
+            80: string;
+            70: string;
+            60: string;
+            50: string;
+            40: string;
+            30: string;
+            20: string;
+            10: string;
+        };
+        primary: {
+            900: string;
+            800: string;
+            700: string;
+            600: string;
+            500: string;
+            400: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        textAtenea: {
+            900: string;
+            700: string;
+            500: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        grey: {
+            900: string;
+            800: string;
+            700: string;
+            600: string;
+            500: string;
+            400: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        greenSuccess: {
+            900: string;
+            800: string;
+            700: string;
+            600: string;
+            500: string;
+            400: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        redDanger: {
+            900: string;
+            800: string;
+            700: string;
+            500: string;
+            300: string;
+            100: string;
+            50: string;
+        };
+        yellowWarning: {
+            900: string;
+            800: string;
+            700: string;
+            500: string;
+            300: string;
+            100: string;
+            50: string;
+        };
+        blueInfo: {
+            900: string;
+            800: string;
+            700: string;
+            600: string;
+            500: string;
+            400: string;
+            300: string;
+            200: string;
+            100: string;
+            50: string;
+        };
+        pinkAtenea: {
+            500: string;
+            300: string;
+            100: string;
+        };
+        violetAtenea: {
+            500: string;
+            300: string;
+            100: string;
+        };
+        orangeAtenea: {
+            500: string;
+            300: string;
+            100: string;
+        };
+    };
+    spacing: {
+        2.5: string;
+    };
+    borders: {
+        ringWidth: {
+            2: string;
+        };
+        borderRadius: {
+            md: string;
+        };
+    };
+};

package/dist/tokens/theme.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.theme = void 0;
+const colors_1 = require("./colors");
+const typography_1 = require("./typography");
+const spacing_1 = require("./spacing");
+const borders_1 = require("./borders");
+exports.theme = {
+    fontSize: typography_1.typography.fontSize,
+    fontFamily: typography_1.typography.fontFamily,
+    fontWeight: typography_1.typography.fontWeight,
+    letterSpacing: typography_1.typography.letterSpacing,
+    colors: colors_1.colors,
+    spacing: spacing_1.spacing,
+    borders: borders_1.borders,
+};

package/dist/tokens/typography.d.ts

@@ -0,0 +1,120 @@
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: readonly ["Onest", "system-ui", "sans-serif"];
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly xs: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+        }];
+        readonly sm: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+        }];
+        readonly base: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+        }];
+        readonly lg: readonly ["clamp(1rem, 0.875rem + 0.5vw, 1.125rem)", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly xl: readonly ["clamp(1.125rem, 1rem + 0.5vw, 1.25rem)", {
+            readonly lineHeight: "1.75rem";
+        }];
+        readonly "2xl": readonly ["clamp(1.25rem, 1.125rem + 0.75vw, 1.5rem)", {
+            readonly lineHeight: "2rem";
+        }];
+        readonly "3xl": readonly ["clamp(1.5rem, 1.375rem + 0.75vw, 1.875rem)", {
+            readonly lineHeight: "2.25rem";
+        }];
+        readonly "4xl": readonly ["clamp(1.75rem, 1.5rem + 1vw, 2.25rem)", {
+            readonly lineHeight: "2.5rem";
+        }];
+        readonly h1: readonly ["clamp(2rem, 1.5rem + 2.5vw, 3rem)", {
+            readonly lineHeight: "clamp(2.5rem, 2.125rem + 3vw, 3.625rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h2: readonly ["clamp(1.75rem, 1.375rem + 2vw, 2.5rem)", {
+            readonly lineHeight: "clamp(2.125rem, 1.75rem + 2.5vw, 3rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h3: readonly ["clamp(1.5rem, 1.25rem + 1.5vw, 2rem)", {
+            readonly lineHeight: "clamp(1.875rem, 1.625rem + 2vw, 2.375rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h4: readonly ["clamp(1.375rem, 1.125rem + 1.25vw, 1.75rem)", {
+            readonly lineHeight: "clamp(1.625rem, 1.375rem + 1.5vw, 2.125rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly h5: readonly ["clamp(1.25rem, 1.125rem + 1vw, 1.5rem)", {
+            readonly lineHeight: "clamp(1.5rem, 1.375rem + 1.25vw, 1.75rem)";
+            readonly fontWeight: 600;
+        }];
+        readonly s1: readonly ["clamp(1rem, 0.9375rem + 0.5vw, 1.125rem)", {
+            readonly lineHeight: "1.75rem";
+            readonly fontWeight: 400;
+        }];
+        readonly s2: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 600;
+        }];
+        readonly b1: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 400;
+        }];
+        readonly b2: readonly ["1rem", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 500;
+        }];
+        readonly b3: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 400;
+        }];
+        readonly b4: readonly ["0.875rem", {
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 500;
+        }];
+        readonly c1: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 500;
+        }];
+        readonly c2: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 500;
+        }];
+        readonly c3: readonly ["0.625rem", {
+            readonly lineHeight: "0.875rem";
+            readonly fontWeight: 500;
+        }];
+        readonly label: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 500;
+        }];
+        readonly buttonGiant: readonly ["clamp(1rem, 0.9375rem + 0.5vw, 1.125rem)", {
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonLarge: readonly ["1rem", {
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonMedium: readonly ["0.875rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonSmall: readonly ["0.75rem", {
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 600;
+        }];
+        readonly buttonTiny: readonly ["0.625rem", {
+            readonly lineHeight: "0.75rem";
+            readonly fontWeight: 600;
+        }];
+    };
+    readonly letterSpacing: {
+        readonly normal: "0";
+    };
+};

package/dist/tokens/typography.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typography = void 0;
+exports.typography = {
+    fontFamily: {
+        sans: ["Onest", "system-ui", "sans-serif"],
+    },
+    fontWeight: {
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    },
+    fontSize: {
+        xs: ["0.75rem", { lineHeight: "1rem" }],
+        sm: ["0.875rem", { lineHeight: "1.25rem" }],
+        base: ["1rem", { lineHeight: "1.5rem" }],
+        lg: ["clamp(1rem, 0.875rem + 0.5vw, 1.125rem)", { lineHeight: "1.75rem" }],
+        xl: ["clamp(1.125rem, 1rem + 0.5vw, 1.25rem)", { lineHeight: "1.75rem" }],
+        "2xl": [
+            "clamp(1.25rem, 1.125rem + 0.75vw, 1.5rem)",
+            { lineHeight: "2rem" },
+        ],
+        "3xl": [
+            "clamp(1.5rem, 1.375rem + 0.75vw, 1.875rem)",
+            { lineHeight: "2.25rem" },
+        ],
+        "4xl": ["clamp(1.75rem, 1.5rem + 1vw, 2.25rem)", { lineHeight: "2.5rem" }],
+        h1: [
+            "clamp(2rem, 1.5rem + 2.5vw, 3rem)",
+            {
+                lineHeight: "clamp(2.5rem, 2.125rem + 3vw, 3.625rem)",
+                fontWeight: 600,
+            },
+        ],
+        h2: [
+            "clamp(1.75rem, 1.375rem + 2vw, 2.5rem)",
+            { lineHeight: "clamp(2.125rem, 1.75rem + 2.5vw, 3rem)", fontWeight: 600 },
+        ],
+        h3: [
+            "clamp(1.5rem, 1.25rem + 1.5vw, 2rem)",
+            {
+                lineHeight: "clamp(1.875rem, 1.625rem + 2vw, 2.375rem)",
+                fontWeight: 600,
+            },
+        ],
+        h4: [
+            "clamp(1.375rem, 1.125rem + 1.25vw, 1.75rem)",
+            {
+                lineHeight: "clamp(1.625rem, 1.375rem + 1.5vw, 2.125rem)",
+                fontWeight: 600,
+            },
+        ],
+        h5: [
+            "clamp(1.25rem, 1.125rem + 1vw, 1.5rem)",
+            {
+                lineHeight: "clamp(1.5rem, 1.375rem + 1.25vw, 1.75rem)",
+                fontWeight: 600,
+            },
+        ],
+        s1: [
+            "clamp(1rem, 0.9375rem + 0.5vw, 1.125rem)",
+            { lineHeight: "1.75rem", fontWeight: 400 },
+        ],
+        s2: ["1rem", { lineHeight: "1.5rem", fontWeight: 600 }],
+        b1: ["1rem", { lineHeight: "1.5rem", fontWeight: 400 }],
+        b2: ["1rem", { lineHeight: "1.5rem", fontWeight: 500 }],
+        b3: ["0.875rem", { lineHeight: "1.25rem", fontWeight: 400 }],
+        b4: ["0.875rem", { lineHeight: "1.25rem", fontWeight: 500 }],
+        c1: ["0.75rem", { lineHeight: "1rem", fontWeight: 500 }],
+        c2: ["0.75rem", { lineHeight: "1rem", fontWeight: 500 }],
+        c3: ["0.625rem", { lineHeight: "0.875rem", fontWeight: 500 }],
+        label: ["0.75rem", { lineHeight: "1rem", fontWeight: 500 }],
+        buttonGiant: [
+            "clamp(1rem, 0.9375rem + 0.5vw, 1.125rem)",
+            { lineHeight: "1.5rem", fontWeight: 600 },
+        ],
+        buttonLarge: ["1rem", { lineHeight: "1.25rem", fontWeight: 600 }],
+        buttonMedium: ["0.875rem", { lineHeight: "1rem", fontWeight: 600 }],
+        buttonSmall: ["0.75rem", { lineHeight: "1rem", fontWeight: 600 }],
+        buttonTiny: ["0.625rem", { lineHeight: "0.75rem", fontWeight: 600 }],
+    },
+    letterSpacing: {
+        normal: "0",
+    },
+};

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "atenea-components",
+  "version": "1.4.17",
+  "description": "React component library for Atenea",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "theme": "theme.js",
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/tokens/theme.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build:tsc": "tsc",
+    "build:rollup": "rollup -c",
+    "build": "npm run build:tsc && npm run build:rollup",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build",
+    "build:theme": "node scripts/build-theme.js"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "atenea"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/atenea-web-components.git"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.5",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-postcss": "^1.0.0",
+    "@storybook/react-vite": "^8.0.0",
+    "@types/react": "^18.0.37",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "rollup": "^4.14.0",
+    "tailwindcss": "^3.3.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.0"
+  },
+  "files": [
+    "dist",
+    "theme.js"
+  ]
+}

package/readme.md

@@ -0,0 +1,88 @@
+# Atenea Web Components – Tailwind Theme Integration
+
+## Automated Tailwind Theme Export
+
+This project provides a design system and a set of custom Tailwind utilities (such as `text-h1`, `text-h2`, custom colors, etc.) that can be used both internally and in external projects. To ensure all custom utilities are available, the theme is defined in TypeScript and automatically exported to a CommonJS JavaScript file for Tailwind consumption.
+
+---
+
+### How It Works
+
+- The source of truth for the theme is `src/tokens/theme.ts` (TypeScript).
+- A build script (`scripts/build-theme.js`) generates a CommonJS-compatible `theme.js` in the project root.
+- The generated `theme.js` is imported in your `tailwind.config.js` to provide all custom utilities to Tailwind.
+
+---
+
+## Usage in This Project
+
+1. **Edit your theme in TypeScript:**
+   - Make changes in `src/tokens/theme.ts`.
+2. **Generate the JS theme:**
+   - Run:
+     ```sh
+     npm run build:theme
+     ```
+   - This will create/update `theme.js` in the root directory.
+3. **Tailwind config setup:**
+   - Your `tailwind.config.js` should look like this:
+     ```js
+     const { theme } = require('./theme');
+     module.exports = {
+       content: ['./src/**/*.{js,ts,jsx,tsx}'],
+       theme: {
+         extend: theme
+       },
+       plugins: [],
+     };
+     ```
+
+---
+
+## Usage in External Projects (Consumers)
+
+If you want to use these custom utilities in another project:
+
+1. **Install this package as a dependency.**
+2. **Import the generated theme in your Tailwind config:**
+   ```js
+   const { theme } = require('atenea-web-components/theme');
+   module.exports = {
+     content: [
+       './src/**/*.{js,ts,jsx,tsx}',
+       './node_modules/atenea-web-components/**/*.{js,ts,jsx,tsx}'
+     ],
+     theme: {
+       extend: theme
+     },
+     plugins: [],
+   };
+   ```
+3. **Ensure the theme is up to date:**
+   - If you update the package or its theme, run:
+     ```sh
+     npm run build:theme
+     ```
+   - (If you use a monorepo, you may want to automate this step in your build pipeline.)
+
+---
+
+## Recommendations
+
+- **Always run `npm run build:theme` after changing the theme in TypeScript.**
+- **Add the build step to your CI/CD pipeline** to avoid mismatches between TS and JS theme files.
+- **Document for consumers** that they must use the generated `theme.js` for full utility support (including custom font sizes like `text-h1`).
+- **If you publish this package,** ensure `theme.js` is included in the published files (not gitignored or npmignored).
+
+---
+
+## Troubleshooting
+
+- If custom utilities like `text-h1` do not work, ensure:
+  - The consumer project is importing the correct `theme.js`.
+  - The build script has been run after any theme changes.
+  - The `content` array in `tailwind.config.js` includes the package source files.
+
+---
+
+**For questions or improvements, please open an issue or PR!**