{"_id":"@aleksxt24/radix-ui-react-test","_rev":"3-60fca8984fa4f896eadaf03d8e1f3c4b","name":"@aleksxt24/radix-ui-react-test","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@aleksxt24/radix-ui-react-test","version":"0.0.1","_id":"@aleksxt24/radix-ui-react-test@0.0.1","maintainers":[{"name":"aleksxt24","email":"theheroofpopp@abv.bg"}],"dist":{"shasum":"ca0363baefa115a6f4bae640adeaaf3f689c7247","tarball":"https://registry.npmjs.org/@aleksxt24/radix-ui-react-test/-/radix-ui-react-test-0.0.1.tgz","fileCount":10,"integrity":"sha512-bk8N/Y5CY5ivAP38bsk/8xqaR8ddmdiNcbSvoMighrE29DVOVU/HIavNvq3BYAxDu+PFWdZAH+QpZKjL1Ye+JQ==","signatures":[{"sig":"MEUCIA/5Lb4UvDnxQ7WkHqrEpn+jyoOydgad7uXXqSTSdFsNAiEA8gys0g0UYVC2wjnLKKd5nz8Yp8sfJ4svy+JNEuRWaMM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":109586},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite","lint":"eslint .","build":"tsup","preview":"vite preview","build:app":"vite build"},"_npmUser":{"name":"aleksxt24","email":"theheroofpopp@abv.bg"},"overrides":{"vite":"npm:rolldown-vite@7.1.14"},"_npmVersion":"10.9.3","description":"Testing tsup","directories":{},"_nodeVersion":"22.20.0","dependencies":{"react":"^19.1.1","react-dom":"^19.1.1","@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-icons":"^1.3.2","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-hover-card":"^1.1.15"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","vite":"npm:rolldown-vite@7.1.14","eslint":"^9.36.0","globals":"^16.4.0","@eslint/js":"^9.36.0","typescript":"~5.9.3","@types/node":"^24.6.0","@types/react":"^19.1.16","@types/react-dom":"^19.1.9","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"_npmOperationalInternal":{"tmp":"tmp/radix-ui-react-test_0.0.1_1760409054401_0.6701423690169401","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@aleksxt24/radix-ui-react-test","version":"0.0.2","_id":"@aleksxt24/radix-ui-react-test@0.0.2","maintainers":[{"name":"aleksxt24","email":"theheroofpopp@abv.bg"}],"dist":{"shasum":"b12381d00b1015072daeadf3155ef8a11f4f1846","tarball":"https://registry.npmjs.org/@aleksxt24/radix-ui-react-test/-/radix-ui-react-test-0.0.2.tgz","fileCount":10,"integrity":"sha512-fG2V0b5aCG8jWiWWyx3TdNIcnUG2jS0ih+0z+EQtKzPTAFUq2eXgx+XwdYvs5sdQDiIgi9+Utgtdr3bb8NKMig==","signatures":[{"sig":"MEYCIQDX2oxQKuLfdSPqX/yel71NlF70nHv211mnWSzpS5P4tgIhANJqbIc0IpD/ic1BXr1IU5NEMUC+dtIfsBrbr3r14JnN","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":110158},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"dev":"vite","lint":"eslint .","build":"tsup","preview":"vite preview","build:app":"vite build"},"_npmUser":{"name":"aleksxt24","email":"theheroofpopp@abv.bg"},"overrides":{"vite":"npm:rolldown-vite@7.1.14"},"_npmVersion":"10.9.3","description":"Testing tsup","directories":{},"_nodeVersion":"22.20.0","dependencies":{"@radix-ui/react-tabs":"^1.1.13","@radix-ui/react-icons":"^1.3.2","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-hover-card":"^1.1.15"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.5.0","vite":"npm:rolldown-vite@7.1.14","eslint":"^9.36.0","globals":"^16.4.0","@eslint/js":"^9.36.0","typescript":"~5.9.3","@types/node":"^24.6.0","@types/react":"^19.1.16","@types/react-dom":"^19.1.9","typescript-eslint":"^8.45.0","@vitejs/plugin-react":"^5.0.4","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/radix-ui-react-test_0.0.2_1760410854865_0.22130891961349874","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@aleksxt24/radix-ui-react-test","version":"0.0.3","type":"module","description":"Testing tsup","scripts":{"dev":"vite","lint":"eslint .","preview":"vite preview","build":"tsup","build:app":"vite build"},"dependencies":{"@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-hover-card":"^1.1.15","@radix-ui/react-icons":"^1.3.2","@radix-ui/react-slider":"^1.3.6","@radix-ui/react-switch":"^1.2.6","@radix-ui/react-tabs":"^1.1.13"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"devDependencies":{"@eslint/js":"^9.36.0","@types/node":"^24.6.0","@types/react":"^19.1.16","@types/react-dom":"^19.1.9","@vitejs/plugin-react":"^5.0.4","eslint":"^9.36.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.22","globals":"^16.4.0","tsup":"^8.5.0","typescript":"~5.9.3","typescript-eslint":"^8.45.0","vite":"npm:rolldown-vite@7.1.14"},"overrides":{"vite":"npm:rolldown-vite@7.1.14"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./dist/index.css":"./dist/index.css"},"_id":"@aleksxt24/radix-ui-react-test@0.0.3","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-oI/VWhZmlb0fAyaqoTodXcBYqsLdzaeSkZnG8xkyp/hlXl7FN7RdF9Ktufj2ltI9tBLreYKkksqCuY2f88sylQ==","shasum":"369a49b52bdfc9e30527563a87eceb92296b832e","tarball":"https://registry.npmjs.org/@aleksxt24/radix-ui-react-test/-/radix-ui-react-test-0.0.3.tgz","fileCount":10,"unpackedSize":110202,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCw4bJuNi7StjdiXNEe4JwD/T8exV/d3EbQlkN9Hh8rJQIhAJX/NPsouL6KmQTvymIiiBVAEfJwYYJodzea7Wjk9RZy"}]},"_npmUser":{"name":"aleksxt24","email":"theheroofpopp@abv.bg"},"directories":{},"maintainers":[{"name":"aleksxt24","email":"theheroofpopp@abv.bg"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/radix-ui-react-test_0.0.3_1760411698642_0.5547798927852066"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-14T02:30:54.265Z","modified":"2025-10-14T03:14:59.062Z","0.0.1":"2025-10-14T02:30:54.630Z","0.0.2":"2025-10-14T03:00:55.047Z","0.0.3":"2025-10-14T03:14:58.859Z"},"description":"Testing tsup","maintainers":[{"name":"aleksxt24","email":"theheroofpopp@abv.bg"}],"readme":"# React Component Library with tsup\n\nThis is a React component library built with TypeScript and bundled with tsup. It includes reusable UI components based on Radix UI primitives.\n\n##  Components\n\n- **NavigationTabs**: A tabbed navigation component built with Radix UI Tabs.\n- **SettingsDialog**: A configurable settings dialog component built with Radix UI Dialog.\n- **InfoHoverCard**: A hover card component for displaying additional information.\n- **Guide**: A documentation component to display step-by-step guides.\n\n## 🚀 Getting Started\n\n### Installation\n\n```bash\nnpm install @aleksxt24/radix-ui-react-components\n```\n### Usage\n```jsx\nimport { NavigationTabs, SettingsDialog } from '@aleksxt24/radix-ui-react-components';\nimport '@aleksxt24/radix-ui-react-components/dist/index.css'; // Import styles\n\nfunction App() {\n  const [darkMode, setDarkMode] = React.useState(false);\n  \n  return (\n    <div className=\"App\">\n      <NavigationTabs \n        tabs={[\n          { id: 'tab1', title: 'Dashboard', content: 'Dashboard content here' },\n          { id: 'tab2', title: 'Settings', content: 'Settings content here' },\n        ]} \n      />\n      \n      <SettingsDialog \n        darkMode={darkMode} \n        onDarkModeChange={setDarkMode}\n      />\n    </div>\n  );\n}\n```\n\n##  Setup Process\n\nThis section guides you through setting up your own React component library with tsup.\n\n### 1. Create a new React project with Vite\n\n```bash\nnpm create vite@latest my-component-library -- --template react-ts\ncd my-component-library\nnpm install\n```\n\n### 2. Install tsup and necessary dependencies\n\n```bash\nnpm install --save-dev tsup\nnpm install @radix-ui/react-tabs @radix-ui/react-dialog @radix-ui/react-hover-card @radix-ui/react-switch @radix-ui/react-slider @radix-ui/react-checkbox @radix-ui/react-icons\n```\n\n### 3. Create component directory structure\n\n```\nsrc/\n  components/\n    NavigationTabs/\n      NavigationTabs.tsx\n      NavigationTabs.css\n      index.ts\n    SettingsDialog/\n      SettingsDialog.tsx\n      SettingsDialog.css\n      index.ts\n    InfoHoverCard/\n      InfoHoverCard.tsx\n      InfoHoverCard.css\n      index.ts\n    Guide/\n      Guide.tsx\n      index.ts\n    index.ts  # Main export file\n```\n\n### 4. Create a barrel file for exporting components\n\nIn `src/components/index.ts`:\n\n```typescript\n// Export all components\nexport * from './NavigationTabs';\nexport * from './Guide';\nexport * from './InfoHoverCard';\nexport { SettingsDialog } from './SettingsDialog';\n```\n\n### 5. Create a tsup configuration file\n\nCreate `tsup.config.ts` in the root directory:\n\n```typescript\nimport { defineConfig } from 'tsup';\n\nexport default defineConfig({\n  entry: ['src/components/index.ts'],\n  format: ['esm', 'cjs'],\n  dts: true, // generates TypeScript types\n  sourcemap: true,\n  clean: true,\n  outDir: 'dist',\n  tsconfig: 'tsconfig.build.json',\n  treeshake: true,\n  minify: true,\n  splitting: true,\n  external: ['react', 'react-dom'],\n});\n```\n\n### 6. Create a specialized tsconfig for building the library\n\nCreate `tsconfig.build.json` in the root directory:\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"useDefineForClassFields\": true,\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"module\": \"ESNext\",\n    \"skipLibCheck\": true,\n    \"moduleResolution\": \"node\",\n    \"outDir\": \"dist\",\n    \"declaration\": true,\n    \"jsx\": \"react-jsx\",\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"esModuleInterop\": true,\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true\n  },\n  \"include\": [\"src/components/**/*.ts\", \"src/components/**/*.tsx\"],\n  \"exclude\": [\"node_modules\"]\n}\n```\n\n### 7. Update package.json for publishing\n\n```json\n{\n  \"name\": \"@yourusername/your-component-library\",\n  \"version\": \"0.0.1\",\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"lint\": \"eslint .\",\n    \"preview\": \"vite preview\",\n    \"build\": \"tsup\",\n    \"build:app\": \"vite build\"\n  },\n  \"main\": \"./dist/index.cjs\",\n  \"module\": \"./dist/index.js\",\n  \"types\": \"./dist/index.d.ts\",\n  \"exports\": {\n    \".\": {\n      \"import\": \"./dist/index.js\",\n      \"require\": \"./dist/index.cjs\",\n      \"types\": \"./dist/index.d.ts\"\n    }\n  },\n  \"files\": [\"dist\"]\n}\n```\n\n### 8. Create a .npmignore file\n\n```\n# Source files\nsrc/\npublic/\n\n# Development files\nnode_modules/\n.vscode/\n.idea/\n.github/\n.git/\n\n# Config files\n*.config.js\n*.config.ts\ntsconfig*.json\nvite.config.ts\neslint.config.js\n\n# Logs and local files\n*.log\n*.local\n.DS_Store\n.env*\n.npmrc\n\n# Test files\ntest/\ntests/\n__tests__/\ncoverage/\n\n# Build files\nindex.html\n```\n\n### 9. Build the library\n\n```bash\nnpm run build\n```\n\n### 10. Publish to npm\n\n```bash\n# Login to npm\nnpm login\n\n# Publish as public package\nnpm publish --access public\n```\n\n##  Key Points for Library Development\n\n1. **Component Export Strategy**:\n   - Use barrel files (index.ts) to simplify imports\n   - Export only what you want to be public API\n\n2. **Build Configuration**:\n   - Use `external: ['react', 'react-dom']` to avoid bundling React\n\n3. **Package.json Configuration**:\n   - Set up `main`, `module`, and `types` fields correctly\n   - Use the `exports` field for modern resolution\n   - Include only necessary files with the `files` field\n\n4. **CSS Handling**:\n   - Include component CSS files alongside component code\n   - Import styles in component files for easier usage\n\n5. **Dependency Management**:\n   - List Radix UI components as direct dependencies\n   - Keep React and React DOM as peer dependencies\n\n","readmeFilename":"README.md"}