Improvements and chores - 5 Aug 2025 [OFFICIAL TS SUPPORT] (#1300)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: kotAPI

.husky/pre-commit

@@ -1,8 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
-
-#!/bin/sh
-. ~/.zshrc   # or ~/.bashrc if using bash
 npm test
 
 npm run lint:staged

README.md

@@ -23,14 +23,8 @@ npm install @radui/ui
 ```
 
 Description: Rad UI is a React UI library that simplifies UI development, offering a collection of components and utilities to enhance the user experience. It addresses common challenges in building interfaces, making it easier for developers to create intuitive and visually appealing applications.
-
-Technology stack: React
-Status: Beta
-Please note that Rad UI is under development and will receive a full official release soon in 2024 once significant production-ready components are readily available.
-What sets this apart: Rad UI stands out with its focus on simplicity, flexibility, and ease of integration into React projects.
 <!-- 
 
-
 ## Dependencies
 
 Describe any dependencies that must be installed for this software to work.
@@ -66,8 +60,8 @@ For more details, you can read on how to contribute to development of Rad UI in
 
 [Setting Up Dev Environment](https://www.rad-ui.com/docs/contributing/setting-up-dev-environment)
 
-
 ## Where can I get more help, if I need it?
+
 [GitHub Discussions](https://github.com/rad-ui/ui/discussions)
 [Discord](https://discord.com/invite/nMaQfeEPNp)
 
@@ -83,4 +77,4 @@ Node versions tested in 18.19.0 - 21.4.0
 
 1. Project heavily inspired by RadixUI, Floating UI, shadcn/ui and many other libraries that defined the modern web that we know today
 
-This project is tested with BrowserStack
+This project is tested with BrowserStack

package-lock.json

@@ -4,46 +4,7 @@
   "description": "",
   "main": "dist",
   "type": "module",
-  "exports": {
-    "./themes/default.css": "./dist/themes/default.css",
-    "./themes/tailwind-presets/default.js": "./dist/themes/tailwind-presets/default.js",
-    "./Accordion": "./dist/components/Accordion.js",
-    "./AlertDialog": "./dist/components/AlertDialog.js",
-    "./AspectRatio": "./dist/components/AspectRatio.js",
-    "./Avatar": "./dist/components/Avatar.js",
-    "./AvatarGroup": "./dist/components/AvatarGroup.js",
-    "./Badge": "./dist/components/Badge.js",
-    "./BlockQuote": "./dist/components/BlockQuote.js",
-    "./Button": "./dist/components/Button.js",
-    "./Callout": "./dist/components/Callout.js",
-    "./Card": "./dist/components/Card.js",
-    "./Code": "./dist/components/Code.js",
-    "./Collapsible": "./dist/components/Collapsible.js",
-    "./DataList": "./dist/components/DataList.js",
-    "./Dialog": "./dist/components/Dialog.js",
-    "./Em": "./dist/components/Em.js",
-    "./Heading": "./dist/components/Heading.js",
-    "./HoverCard": "./dist/components/HoverCard.js",
-    "./Kbd": "./dist/components/Kbd.js",
-    "./Link": "./dist/components/Link.js",
-    "./Progress": "./dist/components/Progress.js",
-    "./Quote": "./dist/components/Quote.js",
-    "./RadioGroup": "./dist/components/RadioGroup.js",
-    "./ScrollArea": "./dist/components/ScrollArea.js",
-    "./Separator": "./dist/components/Separator.js",
-    "./Skeleton": "./dist/components/Skeleton.js",
-    "./Strong": "./dist/components/Strong.js",
-    "./Switch": "./dist/components/Switch.js",
-    "./Table": "./dist/components/Table.js",
-    "./Tabs": "./dist/components/Tabs.js",
-    "./Text": "./dist/components/Text.js",
-    "./TextArea": "./dist/components/TextArea.js",
-    "./Theme": "./dist/components/Theme.js",
-    "./Toggle": "./dist/components/Toggle.js",
-    "./ToggleGroup": "./dist/components/ToggleGroup.js",
-    "./Tooltip": "./dist/components/Tooltip.js",
-    "./VisuallyHidden": "./dist/components/VisuallyHidden.js"
-  },
+  "exports": {},
   "scripts": {
     "test": "jest",
     "coverage": "jest --coverage",
@@ -57,11 +18,12 @@
     "generate-tokens": "tsx ./src/tokenGen/index.js",
     "bundle-tokens": "rollup --config rollup-tokens.config.js",
     "compile-components": "rollup -c rollup.config.cjs",
-    "process-components": "mkdirp ./dist/components && cp -r ./dist/temp-cleanup/*js ./dist/components && rimraf dist/temp-cleanup",
+    "process-components": "node scripts/process-components.cjs",
     "prebuild": "npm run test && npm run clean",
+    "build:generate-exports": "node scripts/generate-exports.cjs",
     "build:css": "npm run generate-tokens && npm run bundle-tokens && npm run build-css",
     "build:components": "npm run compile-components && npm run process-components",
-    "build:rollup": "npm run prebuild && npm run build:css && NODE_OPTIONS='--max-old-space-size=4076' npm run build:components",
+    "build:rollup": "npm run prebuild && npm run build:css && NODE_OPTIONS='--max-old-space-size=4076' npm run build:components && npm run build:generate-exports",
     "compile-components:esbuild": "node build-components.cjs",
     "check:types": "tsc --noEmit",
     "build-components:esbuild": "npm run compile-components:esbuild && npm run process-components",
@@ -137,6 +99,7 @@
     "rimraf": "6.0.1",
     "rollup": "4.46.2",
     "rollup-plugin-banner2": "1.3.0",
+    "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.77.2",
     "sass-loader": "16.0.4",
@@ -161,4 +124,4 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

package.json

@@ -1,4 +1,3 @@
-// rollup.config.cjs
 const babel = require('@rollup/plugin-babel');
 const resolve = require('@rollup/plugin-node-resolve');
 const terser = require('@rollup/plugin-terser');
@@ -7,6 +6,7 @@ const alias = require('@rollup/plugin-alias');
 const path = require('path');
 const fs = require('fs');
 const banner2 = require('rollup-plugin-banner2');
+const { dts } = require('rollup-plugin-dts');
 
 // Function to dynamically get all component directories in the 'src/components' folder
 function getComponentDirectories() {
@@ -24,6 +24,7 @@ const components = getComponentDirectories();
  * Using it this way not only avoids the Javascript Heap Out of Memory error but also speeds up the build process
  */
 
+// Shared plugin instances
 const typescriptPluginInstance = typescript({ tsconfig: './tsconfig.json', sourceMap: false });
 const aliasPluginInstance = alias({
     entries: [
@@ -39,15 +40,13 @@ const terserPluginInstance = terser();
 const resolvePluginInstance = resolve();
 const bannerPluginInstance = banner2(() => '\'use client\';');
 
-module.exports = components.map((component) => {
+// JS builds
+const jsBundles = components.map((component) => {
     const tsxFilePath = `src/components/ui/${component}/${component}.tsx`;
     return {
         input: tsxFilePath,
         onwarn(warning, warn) {
-            // Suppress expected warnings
-            if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
-                return;
-            }
+            if (warning.code === 'MODULE_LEVEL_DIRECTIVE') return;
             warn(warning);
         },
         output: [
@@ -66,6 +65,20 @@ module.exports = components.map((component) => {
             bannerPluginInstance
         ]
     };
-}
+});
+
+// Type declarations builds
+const dtsBundles = components.map((component) => {
+    const entry = `src/components/ui/${component}/${component}.tsx`;
+    return {
+        input: entry,
+        output: {
+            file: `dist/temp-cleanup/${component}.d.ts`,
+            format: 'es'
+        },
+        plugins: [dts()],
+        external: ['react', 'react-dom']
+    };
+});
 
-);
+module.exports = [...jsBundles, ...dtsBundles];

rollup.config.cjs

@@ -0,0 +1,35 @@
+const RELEASED_COMPONENTS = [
+    // Released
+    'Accordion',
+    'Avatar',
+    'AvatarGroup',
+    'AlertDialog',
+    'AspectRatio',
+    'Badge',
+    'Button',
+    'BlockQuote',
+    'Callout',
+    'Card',
+    'Code',
+    'Dialog',
+    'Em',
+    'Heading',
+    'Text',
+    'Kbd',
+    'Progress',
+    'Separator',
+    'Strong',
+    'Switch',
+    'Table',
+    'Tabs',
+    'Toggle',
+    'ToggleGroup',
+    'Tooltip',
+    'VisuallyHidden',
+    // Released but not documented officially
+    'ScrollArea',
+    'Theme',
+    'Link'
+];
+
+module.exports = RELEASED_COMPONENTS;

scripts/RELEASED_COMPONENTS.cjs

@@ -0,0 +1,94 @@
+/**
+ * Generate Exports Script for Rad UI
+ *
+ * WHAT THIS SCRIPT DOES:
+ * This script automatically generates the "exports" field in package.json based on
+ * the built components and theme files in the dist/ directory. It creates proper
+ * import paths for both JavaScript and TypeScript users.
+ *
+ * WHY IT'S REQUIRED:
+ * 1. Manual Maintenance: Without this script, we'd have to manually update package.json
+ *    exports every time we add/remove components, which is error-prone and time-consuming.
+ *
+ * 2. TypeScript Support: Generates proper "types" field for each component, enabling
+ *    TypeScript users to get proper type checking and IntelliSense.
+ *
+ * 3. Tree Shaking: Enables users to import individual components instead of the entire
+ *    library, reducing bundle sizes significantly.
+ *
+ * 4. Theme Exports: Ensures theme files (CSS and Tailwind presets) are properly
+ *    exported for styling support.
+ *
+ * 5. Consistency: Guarantees that all built components are automatically available
+ *    for import without manual configuration.
+ *
+ * USAGE:
+ * This script runs automatically as part of the build process via:
+ * npm run build:generate-exports
+ *
+ * OUTPUT:
+ * Updates package.json with exports like:
+ * {
+ *   "./Button": {
+ *     "import": "./dist/components/Button.js",
+ *     "types": "./dist/components/Button.d.ts"
+ *   },
+ *   "./themes/default.css": "./dist/themes/default.css"
+ * }
+ */
+
+const fs = require('fs');
+const path = require('path');
+const RELEASED_COMPONENTS = require('./RELEASED_COMPONENTS.cjs');
+
+// Component exports
+const distPath = path.resolve(__dirname, '../dist/components');
+let files = [];
+try {
+    files = fs.readdirSync(distPath);
+} catch (error) {
+    console.warn(`Warning: ${distPath} not found. No components will be exported.`);
+    files = [];
+}
+
+const exportsMap = {};
+
+// Add theme exports
+exportsMap['./themes/default.css'] = './dist/themes/default.css';
+exportsMap['./themes/tailwind-presets/default.js'] = './dist/themes/tailwind-presets/default.js';
+
+const notReleasedComponents = [];
+
+// Add component exports
+files.forEach(file => {
+    const match = file.match(/^(.+)\.js$/);
+    if (match) {
+        const name = match[1];
+
+        if (!RELEASED_COMPONENTS.includes(name)) {
+            notReleasedComponents.push(name);
+            return;
+        }
+
+        exportsMap[`./${name}`] = {
+            import: `./dist/components/${name}.js`,
+            types: `./dist/components/${name}.d.ts`
+        };
+    }
+});
+
+if (notReleasedComponents.length > 0) {
+    console.log(`Not released components: ${notReleasedComponents.join(', ')}`);
+}
+
+const pkgPath = path.resolve(__dirname, '../package.json');
+
+try {
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    pkg.exports = exportsMap;
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    console.log('✅ package.json exports updated!');
+} catch (error) {
+    console.error('❌ Failed to update package.json exports:', error.message);
+    process.exit(1);
+}