Chore/tag migration

.gitignore

@@ -6,12 +6,9 @@
 /.pnp.*
 node_modules
 
-# parcel
-.parcel-cache
 development
 build
 dist
-parcel-bundle-reports
 
 # misc
 .eslintcache

README.md

@@ -14,35 +14,182 @@
 
 ## Introduction
 
+The Kleros UI Components Library is a comprehensive collection of React components that implement the Kleros design system. This library provides a consistent and accessible user interface for Kleros applications, making it easier to build cohesive user experiences across the Kleros ecosystem.
+
+Built with React, TypeScript, and Tailwind CSS, this library offers a wide range of components from basic UI elements to complex interactive widgets. Each component is designed with accessibility, customization, and ease of use in mind.
+
+## Features
+
+- **React-based components**: Built with React 18 and TypeScript for type safety
+- **Tailwind CSS integration**: Leverages Tailwind for styling with consistent design tokens
+- **Accessibility**: Components follow WAI-ARIA guidelines for maximum accessibility
+- **Responsive design**: Components adapt to different screen sizes
+- **Customizable**: Easily theme and extend components to match your application's design
+- **Storybook documentation**: Interactive documentation with usage examples
+
+## Components
+
+The library includes a wide variety of components, including but not limited to:
+
+- **Layout**: Box, Card, Modal
+- **Navigation**: Breadcrumb, Pagination, Tabs
+- **Form Elements**: TextField, TextArea, NumberField, Checkbox, RadioGroup, Switch, DatePicker, FileUploader
+- **Data Display**: DisplaySmall, DisplayLarge, DisplayIcon, Tag, Tooltip
+- **Feedback**: Alert, Push Notifications
+- **Progress**: LinearProgress, CircularProgress, Steps, Timeline
+- **Interactive Elements**: Button, Accordion, Dropdown, Cascader
+
 ## Usage
 
-#### Install the package
-With `yarn add @kleros/ui-components-library` or `npm install @kleros/ui-components-library`
+### Installation
 
-#### Create a theme file
-Wwhere you destructure `lightTheme` or `darkTheme` (or both) in your theme object to provide the correct colors to the components. ([example](https://github.com/kleros/kleros-v2/blob/dev/web/src/styles/themes.ts)).
+Install the package using your preferred package manager:
 
-#### Provide the theme
-With styled-components `ThemeProvider` ([example](https://github.com/kleros/kleros-v2/blob/dev/web/src/context/StyledComponentsProvider.tsx)).
+```bash
+# Using yarn
+yarn add @kleros/ui-components-library
+
+# Using npm
+npm install @kleros/ui-components-library
+```
 
-## Package Publication 
+### Setup
 
-#### Tagging
-1. Bump the version in `package.json`
-1. Run a clean build: `yarn clean && yarn build`
-1. Commit the change to git: `git add -u ; git commit -m "chore: release"`
-1. Tag this version: `version=v$(cat package.json | jq -r .version) && git tag -m $version $version`
-1. Push both commit and tag: `git push && git push --tags`
+1. Import the CSS at the top level of your application:
+
+```javascript
+import "@kleros/ui-components-library/style.css";
+```
+
+2. Import and use components in your application:
+
+```jsx
+import { Button, TextField, Alert } from "@kleros/ui-components-library";
+
+function MyComponent() {
+  return (
+    <div>
+      <TextField label="Username" placeholder="Enter your username" />
+      <Button>Submit</Button>
+      <Alert type="success">Operation completed successfully!</Alert>
+    </div>
+  );
+}
+```
+
+### Theme usage
+
+If you wish the use the library's tailwind theme variables in your tailwind app. You can utilize it by importing the theme file in your `global.css` file.
+
+```css
+@import tailwindcss @import
+  "../../../node_modules/@kleros/ui-components-library/dist/theme/theme.css";
+```
+
+You can find the available theme variables [here](src/styles/theme.css).
+If want to override or edit the defined theme variables, you can do so like this:
+
+```css
+:root {
+  --klerosUIComponentsWhiteBackground: #832323;
+}
+:root[class="dark"] {
+  --klerosUIComponentsWhiteBackground: #832323;
+}
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- React 18+
+- React DOM 18+
+- Tailwind CSS 4+
+
+Make sure these are installed in your project.
 
-#### Publish to NPM
-1. Export your NPM token: ` export YARN_NPM_AUTH_TOKEN=<npm_xxxxxxxxxxxx>`
-1. Publish: `yarn publish`
+## Development
+
+### Local Setup
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/kleros/ui-components-library.git
+   cd ui-components-library
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   yarn install
+   ```
+
+3. Start the Storybook development server:
+
+   ```bash
+   yarn start
+   ```
+
+4. Build the library:
+   ```bash
+   yarn build
+   ```
+
+### Code Quality
+
+This project uses:
+
+- TypeScript for type checking
+- ESLint for code linting
+- Prettier for code formatting
+- Husky for Git hooks
+- Conventional Commits for commit messages
+
+Run checks with:
 
-#### Publish to Github
-1. Login 
 ```bash
-npm login --registry https://npm.pkg.github.com --auth-type legacy
-> Username: YOUR_GITHUB_USERNAME
-> Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN`
+yarn check-types    # Type checking
+yarn check-style    # Linting
 ```
-2. Publish: `npm publish --registry https://npm.pkg.github.com`
+
+## Package Publication
+
+### Tagging
+
+1. Bump the version in `package.json`
+2. Run a clean build: `yarn clean && yarn build`
+3. Commit the change to git: `git add -u ; git commit -m "chore: release"`
+4. Tag this version: `version=v$(cat package.json | jq -r .version) && git tag -m $version $version`
+5. Push both commit and tag: `git push && git push --tags`
+
+### Publish to NPM
+
+1. Export your NPM token: `export YARN_NPM_AUTH_TOKEN=<npm_xxxxxxxxxxxx>`
+2. Publish: `yarn publish`
+
+### Publish to GitHub
+
+1. Login:
+
+   ```bash
+   npm login --registry https://npm.pkg.github.com --auth-type legacy
+   > Username: YOUR_GITHUB_USERNAME
+   > Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN
+   ```
+
+2. Publish: `npm publish --registry https://npm.pkg.github.com`
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes using conventional commits (`git commit -m 'feat: add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

eslint.config.mjs

@@ -65,7 +65,7 @@ export default [
 
     settings: {
       react: {
-        version: "^16.12.0",
+        version: "^18.2.0",
       },
       "import/resolver": {
         node: {

package.json

@@ -1,26 +1,35 @@
 {
   "name": "@kleros/ui-components-library",
-  "version": "2.20.0",
+  "version": "3.0.1-rc1",
   "description": "UI components library which implements the Kleros design system.",
-  "source": "src/lib/index.ts",
-  "main": "dist/index.js",
-  "types": "dist/types.d.ts",
+  "source": "./src/lib/index.ts",
+  "main": "./dist/esm/ui-components-library.js",
+  "module": "./dist/esm/ui-components-library.js",
+  "types": "./dist/ui-components-library.d.ts",
+  "style": "./dist/esm/ui-components-library.css",
   "isLibrary": true,
   "type": "module",
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "repository": "[email protected]:kleros/ui-components-library",
   "author": "Kleros",
   "license": "MIT",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/ui-components-library.js",
+      "types": "./dist/ui-components-library.d.ts"
+    },
+    "./style.css": "./dist/esm/ui-components-library.css",
+    "./theme.css": "./dist/theme/theme.css"
+  },
   "scripts": {
-    "build": "vite build",
+    "build:theme": "vite build --config vite.config.theme.js",
+    "build": "vite build && yarn build:theme",
     "build-storybook": "storybook build",
     "check-style": "eslint 'src/**/*.{ts,tsx}'",
     "check-types": "tsc --noEmit",
     "clean": "rm -rf dist",
     "prepare": "husky install",
-    "preview": "vite preview",
-    "start": "vite",
-    "storybook": "storybook dev -p 6006"
+    "start": "storybook dev -p 6006"
   },
   "files": [
     "dist"
@@ -43,11 +52,9 @@
     "@types/node": "^22.13.10",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
-    "@types/styled-components": "^5.1.20",
     "@typescript-eslint/eslint-plugin": "^8.26.0",
     "@typescript-eslint/parser": "^8.26.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "babel-plugin-styled-components": "^2.0.2",
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-import-resolver-parcel": "^1.10.6",
@@ -64,7 +71,6 @@
     "prettier-plugin-tailwindcss": "^0.6.11",
     "process": "^0.11.10",
     "storybook": "^8.6.4",
-    "styled-components": "^5.3.3",
     "tailwindcss": "^4.0.11",
     "typescript": "^5.8.2",
     "vite": "^6.2.1",
@@ -75,24 +81,23 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
-    "styled-components": "^5.3.3",
     "tailwindcss": "^4.0.11"
   },
   "dependencies": {
-    "@datepicker-react/hooks": "^2.8.4",
-    "@swc/helpers": "^0.3.2",
+    "@internationalized/date": "^3.7.0",
     "@tailwindcss/vite": "^4.0.12",
+    "bignumber.js": "^9.1.2",
     "clsx": "^2.1.1",
-    "rc-slider": "^9.7.5",
     "react": "^18.0.0",
     "react-aria-components": "^1.7.1",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
     "simplebar": "^5.3.6",
     "simplebar-react": "^2.3.6",
-    "smooth-scroll-into-view-if-needed": "^1.1.33",
     "tailwind-merge": "^3.0.2",
-    "usehooks-ts": "^2.9.1"
+    "tailwindcss-react-aria-components": "^2.0.0",
+    "usehooks-ts": "^2.9.1",
+    "vite-plugin-dts": "^4.5.3"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",