randmarcomps 1.24.0 → 1.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -92
- package/package.json +88 -88
package/README.md
CHANGED
|
@@ -1,92 +1,92 @@
|
|
|
1
|
-
# randmarcomps
|
|
2
|
-
|
|
3
|
-
A simple TypeScript React component library with Tailwind CSS v4 styling.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install randmarcomps
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Requirements
|
|
12
|
-
|
|
13
|
-
This component library requires the following dependencies:
|
|
14
|
-
|
|
15
|
-
### Tailwind CSS v4
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm install tailwindcss@^4.0.0
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
For Tailwind CSS v4, you need to add a source directive to your CSS file to include the styles from randmarcomps:
|
|
22
|
-
|
|
23
|
-
```css
|
|
24
|
-
/* In your main CSS file (e.g., src/index.css) */
|
|
25
|
-
@import 'tailwindcss';
|
|
26
|
-
@source "../node_modules/randmarcomps/dist";
|
|
27
|
-
|
|
28
|
-
/* Rest of your CSS */
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
This directive tells Tailwind to process the components from randmarcomps when generating your CSS.
|
|
32
|
-
|
|
33
|
-
If you're using a different path structure, adjust the path accordingly. The path should be relative to your CSS file.
|
|
34
|
-
|
|
35
|
-
### React Router
|
|
36
|
-
|
|
37
|
-
Several components (like Navbar and Topbar) require React Router:
|
|
38
|
-
|
|
39
|
-
```bash
|
|
40
|
-
npm install react-router-dom@^7.3.0
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Components that use React Router include:
|
|
44
|
-
- Navbar (uses useParams, Link)
|
|
45
|
-
- Topbar (uses useNavigate, useParams)
|
|
46
|
-
|
|
47
|
-
## Usage
|
|
48
|
-
|
|
49
|
-
Import the components directly:
|
|
50
|
-
|
|
51
|
-
```tsx
|
|
52
|
-
import {
|
|
53
|
-
InputOTP,
|
|
54
|
-
InputOTPGroup,
|
|
55
|
-
InputOTPSeparator,
|
|
56
|
-
InputOTPSlot,
|
|
57
|
-
} from 'randmarcomps';
|
|
58
|
-
|
|
59
|
-
function App() {
|
|
60
|
-
return (
|
|
61
|
-
<InputOTP maxLength={6}>
|
|
62
|
-
<InputOTPGroup>
|
|
63
|
-
<InputOTPSlot index={0} />
|
|
64
|
-
<InputOTPSlot index={1} />
|
|
65
|
-
<InputOTPSlot index={2} />
|
|
66
|
-
</InputOTPGroup>
|
|
67
|
-
<InputOTPSeparator />
|
|
68
|
-
<InputOTPGroup>
|
|
69
|
-
<InputOTPSlot index={3} />
|
|
70
|
-
<InputOTPSlot index={4} />
|
|
71
|
-
<InputOTPSlot index={5} />
|
|
72
|
-
</InputOTPGroup>
|
|
73
|
-
</InputOTP>);
|
|
74
|
-
}
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
## Compatibility
|
|
78
|
-
|
|
79
|
-
This library is designed to work with:
|
|
80
|
-
- React 19
|
|
81
|
-
- React Router 7
|
|
82
|
-
- Tailwind CSS v4
|
|
83
|
-
|
|
84
|
-
If you're using earlier versions, you may encounter compatibility issues:
|
|
85
|
-
- Tailwind v3: You may encounter styling issues due to differences in the CSS layer system
|
|
86
|
-
- React Router <7: The API may have changed between versions
|
|
87
|
-
|
|
88
|
-
## Development
|
|
89
|
-
|
|
90
|
-
- `npm run dev` - Start development server
|
|
91
|
-
- `npm run build` - Build the library
|
|
92
|
-
- `npm run lint` - Lint the code
|
|
1
|
+
# randmarcomps
|
|
2
|
+
|
|
3
|
+
A simple TypeScript React component library with Tailwind CSS v4 styling.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install randmarcomps
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Requirements
|
|
12
|
+
|
|
13
|
+
This component library requires the following dependencies:
|
|
14
|
+
|
|
15
|
+
### Tailwind CSS v4
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install tailwindcss@^4.0.0
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
For Tailwind CSS v4, you need to add a source directive to your CSS file to include the styles from randmarcomps:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
/* In your main CSS file (e.g., src/index.css) */
|
|
25
|
+
@import 'tailwindcss';
|
|
26
|
+
@source "../node_modules/randmarcomps/dist";
|
|
27
|
+
|
|
28
|
+
/* Rest of your CSS */
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
This directive tells Tailwind to process the components from randmarcomps when generating your CSS.
|
|
32
|
+
|
|
33
|
+
If you're using a different path structure, adjust the path accordingly. The path should be relative to your CSS file.
|
|
34
|
+
|
|
35
|
+
### React Router
|
|
36
|
+
|
|
37
|
+
Several components (like Navbar and Topbar) require React Router:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npm install react-router-dom@^7.3.0
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Components that use React Router include:
|
|
44
|
+
- Navbar (uses useParams, Link)
|
|
45
|
+
- Topbar (uses useNavigate, useParams)
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
Import the components directly:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import {
|
|
53
|
+
InputOTP,
|
|
54
|
+
InputOTPGroup,
|
|
55
|
+
InputOTPSeparator,
|
|
56
|
+
InputOTPSlot,
|
|
57
|
+
} from 'randmarcomps';
|
|
58
|
+
|
|
59
|
+
function App() {
|
|
60
|
+
return (
|
|
61
|
+
<InputOTP maxLength={6}>
|
|
62
|
+
<InputOTPGroup>
|
|
63
|
+
<InputOTPSlot index={0} />
|
|
64
|
+
<InputOTPSlot index={1} />
|
|
65
|
+
<InputOTPSlot index={2} />
|
|
66
|
+
</InputOTPGroup>
|
|
67
|
+
<InputOTPSeparator />
|
|
68
|
+
<InputOTPGroup>
|
|
69
|
+
<InputOTPSlot index={3} />
|
|
70
|
+
<InputOTPSlot index={4} />
|
|
71
|
+
<InputOTPSlot index={5} />
|
|
72
|
+
</InputOTPGroup>
|
|
73
|
+
</InputOTP>);
|
|
74
|
+
}
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Compatibility
|
|
78
|
+
|
|
79
|
+
This library is designed to work with:
|
|
80
|
+
- React 19
|
|
81
|
+
- React Router 7
|
|
82
|
+
- Tailwind CSS v4
|
|
83
|
+
|
|
84
|
+
If you're using earlier versions, you may encounter compatibility issues:
|
|
85
|
+
- Tailwind v3: You may encounter styling issues due to differences in the CSS layer system
|
|
86
|
+
- React Router <7: The API may have changed between versions
|
|
87
|
+
|
|
88
|
+
## Development
|
|
89
|
+
|
|
90
|
+
- `npm run dev` - Start development server
|
|
91
|
+
- `npm run build` - Build the library
|
|
92
|
+
- `npm run lint` - Lint the code
|
package/package.json
CHANGED
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "randmarcomps",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "1.
|
|
5
|
-
"description": "The UI library enabling speed and consistency in Randmar frontends.",
|
|
6
|
-
"type": "module",
|
|
7
|
-
"files": [
|
|
8
|
-
"dist"
|
|
9
|
-
],
|
|
10
|
-
"main": "./dist/randmarcomps.umd.cjs",
|
|
11
|
-
"module": "./dist/randmarcomps.js",
|
|
12
|
-
"types": "./dist/randmarcomps.d.ts",
|
|
13
|
-
"exports": {
|
|
14
|
-
".": {
|
|
15
|
-
"types": "./dist/randmarcomps.d.ts",
|
|
16
|
-
"import": "./dist/randmarcomps.js",
|
|
17
|
-
"require": "./dist/randmarcomps.umd.cjs"
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
"repository": {
|
|
21
|
-
"type": "git",
|
|
22
|
-
"url": "https://dev.azure.com/randmar/Randmar%20Open%20Source/_git/randmarcomps"
|
|
23
|
-
},
|
|
24
|
-
"author": "Randmar Inc.",
|
|
25
|
-
"license": "MIT",
|
|
26
|
-
"homepage": "https://dev.azure.com/randmar/Randmar%20Open%20Source/_git/randmarcomps",
|
|
27
|
-
"publishConfig": {
|
|
28
|
-
"registry": "https://registry.npmjs.org/"
|
|
29
|
-
},
|
|
30
|
-
"scripts": {
|
|
31
|
-
"dev": "vite",
|
|
32
|
-
"build": "vite build",
|
|
33
|
-
"lint": "eslint .",
|
|
34
|
-
"ladle-build": "npx ladle build",
|
|
35
|
-
"ladle-preview": "npx ladle preview",
|
|
36
|
-
"ladle-dev": "npx ladle serve"
|
|
37
|
-
},
|
|
38
|
-
"peerDependencies": {
|
|
39
|
-
"react": "^19.0.0",
|
|
40
|
-
"react-dom": "^19.0.0",
|
|
41
|
-
"react-router-dom": "^7.3.0",
|
|
42
|
-
"tailwindcss": "^4.0.0"
|
|
43
|
-
},
|
|
44
|
-
"devDependencies": {
|
|
45
|
-
"@eslint/js": "^9.21.0",
|
|
46
|
-
"@tailwindcss/vite": "^4.0.12",
|
|
47
|
-
"@types/node": "^22.13.10",
|
|
48
|
-
"@types/react": "^19.0.10",
|
|
49
|
-
"@types/react-dom": "^19.0.4",
|
|
50
|
-
"@vitejs/plugin-react": "^4.3.4",
|
|
51
|
-
"eslint": "^9.21.0",
|
|
52
|
-
"eslint-plugin-react-hooks": "^5.1.0",
|
|
53
|
-
"eslint-plugin-react-refresh": "^0.4.19",
|
|
54
|
-
"globals": "^15.15.0",
|
|
55
|
-
"tailwindcss": "^4.0.12",
|
|
56
|
-
"typescript": "~5.7.2",
|
|
57
|
-
"typescript-eslint": "^8.24.1",
|
|
58
|
-
"vite": "^6.2.0",
|
|
59
|
-
"vite-plugin-dts": "^4.5.3"
|
|
60
|
-
},
|
|
61
|
-
"dependencies": {
|
|
62
|
-
"@ladle/react": "^5.0.1",
|
|
63
|
-
"@radix-ui/react-alert-dialog": "^1.1.6",
|
|
64
|
-
"@radix-ui/react-avatar": "^1.1.3",
|
|
65
|
-
"@radix-ui/react-checkbox": "^1.1.4",
|
|
66
|
-
"@radix-ui/react-dialog": "^1.1.6",
|
|
67
|
-
"@radix-ui/react-label": "^2.1.2",
|
|
68
|
-
"@radix-ui/react-popover": "^1.1.6",
|
|
69
|
-
"@radix-ui/react-progress": "^1.1.2",
|
|
70
|
-
"@radix-ui/react-radio-group": "^1.2.3",
|
|
71
|
-
"@radix-ui/react-scroll-area": "^1.2.3",
|
|
72
|
-
"@radix-ui/react-select": "^2.1.6",
|
|
73
|
-
"@radix-ui/react-separator": "^1.1.2",
|
|
74
|
-
"@radix-ui/react-slot": "^1.1.2",
|
|
75
|
-
"@radix-ui/react-switch": "^1.1.3",
|
|
76
|
-
"@radix-ui/react-tabs": "^1.1.3",
|
|
77
|
-
"@radix-ui/react-toast": "^1.2.6",
|
|
78
|
-
"@radix-ui/react-tooltip": "^1.1.8",
|
|
79
|
-
"class-variance-authority": "^0.7.1",
|
|
80
|
-
"clsx": "^2.1.1",
|
|
81
|
-
"i": "^0.3.7",
|
|
82
|
-
"input-otp": "^1.4.2",
|
|
83
|
-
"lucide-react": "^0.479.0",
|
|
84
|
-
"npm": "^11.2.0",
|
|
85
|
-
"tailwind-merge": "^3.0.2",
|
|
86
|
-
"tailwindcss-animate": "^1.0.7"
|
|
87
|
-
}
|
|
88
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "randmarcomps",
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "1.27.0",
|
|
5
|
+
"description": "The UI library enabling speed and consistency in Randmar frontends.",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"main": "./dist/randmarcomps.umd.cjs",
|
|
11
|
+
"module": "./dist/randmarcomps.js",
|
|
12
|
+
"types": "./dist/randmarcomps.d.ts",
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"types": "./dist/randmarcomps.d.ts",
|
|
16
|
+
"import": "./dist/randmarcomps.js",
|
|
17
|
+
"require": "./dist/randmarcomps.umd.cjs"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "https://dev.azure.com/randmar/Randmar%20Open%20Source/_git/randmarcomps"
|
|
23
|
+
},
|
|
24
|
+
"author": "Randmar Inc.",
|
|
25
|
+
"license": "MIT",
|
|
26
|
+
"homepage": "https://dev.azure.com/randmar/Randmar%20Open%20Source/_git/randmarcomps",
|
|
27
|
+
"publishConfig": {
|
|
28
|
+
"registry": "https://registry.npmjs.org/"
|
|
29
|
+
},
|
|
30
|
+
"scripts": {
|
|
31
|
+
"dev": "vite",
|
|
32
|
+
"build": "vite build",
|
|
33
|
+
"lint": "eslint .",
|
|
34
|
+
"ladle-build": "npx ladle build",
|
|
35
|
+
"ladle-preview": "npx ladle preview",
|
|
36
|
+
"ladle-dev": "npx ladle serve"
|
|
37
|
+
},
|
|
38
|
+
"peerDependencies": {
|
|
39
|
+
"react": "^19.0.0",
|
|
40
|
+
"react-dom": "^19.0.0",
|
|
41
|
+
"react-router-dom": "^7.3.0",
|
|
42
|
+
"tailwindcss": "^4.0.0"
|
|
43
|
+
},
|
|
44
|
+
"devDependencies": {
|
|
45
|
+
"@eslint/js": "^9.21.0",
|
|
46
|
+
"@tailwindcss/vite": "^4.0.12",
|
|
47
|
+
"@types/node": "^22.13.10",
|
|
48
|
+
"@types/react": "^19.0.10",
|
|
49
|
+
"@types/react-dom": "^19.0.4",
|
|
50
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
51
|
+
"eslint": "^9.21.0",
|
|
52
|
+
"eslint-plugin-react-hooks": "^5.1.0",
|
|
53
|
+
"eslint-plugin-react-refresh": "^0.4.19",
|
|
54
|
+
"globals": "^15.15.0",
|
|
55
|
+
"tailwindcss": "^4.0.12",
|
|
56
|
+
"typescript": "~5.7.2",
|
|
57
|
+
"typescript-eslint": "^8.24.1",
|
|
58
|
+
"vite": "^6.2.0",
|
|
59
|
+
"vite-plugin-dts": "^4.5.3"
|
|
60
|
+
},
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"@ladle/react": "^5.0.1",
|
|
63
|
+
"@radix-ui/react-alert-dialog": "^1.1.6",
|
|
64
|
+
"@radix-ui/react-avatar": "^1.1.3",
|
|
65
|
+
"@radix-ui/react-checkbox": "^1.1.4",
|
|
66
|
+
"@radix-ui/react-dialog": "^1.1.6",
|
|
67
|
+
"@radix-ui/react-label": "^2.1.2",
|
|
68
|
+
"@radix-ui/react-popover": "^1.1.6",
|
|
69
|
+
"@radix-ui/react-progress": "^1.1.2",
|
|
70
|
+
"@radix-ui/react-radio-group": "^1.2.3",
|
|
71
|
+
"@radix-ui/react-scroll-area": "^1.2.3",
|
|
72
|
+
"@radix-ui/react-select": "^2.1.6",
|
|
73
|
+
"@radix-ui/react-separator": "^1.1.2",
|
|
74
|
+
"@radix-ui/react-slot": "^1.1.2",
|
|
75
|
+
"@radix-ui/react-switch": "^1.1.3",
|
|
76
|
+
"@radix-ui/react-tabs": "^1.1.3",
|
|
77
|
+
"@radix-ui/react-toast": "^1.2.6",
|
|
78
|
+
"@radix-ui/react-tooltip": "^1.1.8",
|
|
79
|
+
"class-variance-authority": "^0.7.1",
|
|
80
|
+
"clsx": "^2.1.1",
|
|
81
|
+
"i": "^0.3.7",
|
|
82
|
+
"input-otp": "^1.4.2",
|
|
83
|
+
"lucide-react": "^0.479.0",
|
|
84
|
+
"npm": "^11.2.0",
|
|
85
|
+
"tailwind-merge": "^3.0.2",
|
|
86
|
+
"tailwindcss-animate": "^1.0.7"
|
|
87
|
+
}
|
|
88
|
+
}
|