randmarcomps 1.29.0 → 1.31.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 +65 -16
- package/dist/style.css +133 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,11 +18,14 @@ This component library requires the following dependencies:
|
|
|
18
18
|
npm install tailwindcss@^4.0.0
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
For Tailwind CSS v4, you need to add
|
|
21
|
+
For Tailwind CSS v4, you need to add the following directives to your CSS file to include the styles from randmarcomps:
|
|
22
22
|
|
|
23
23
|
```css
|
|
24
24
|
/* In your main CSS file (e.g., src/index.css) */
|
|
25
|
-
@import
|
|
25
|
+
@import "tailwindcss";
|
|
26
|
+
@plugin "tailwindcss-animate";
|
|
27
|
+
@custom-variant dark (&:is(.dark *));
|
|
28
|
+
@import "../node_modules/randmarcomps/dist/style.css";
|
|
26
29
|
@source "../node_modules/randmarcomps/dist";
|
|
27
30
|
|
|
28
31
|
/* Rest of your CSS */
|
|
@@ -46,7 +49,19 @@ Components that use React Router include:
|
|
|
46
49
|
|
|
47
50
|
## Usage
|
|
48
51
|
|
|
49
|
-
Import the
|
|
52
|
+
### 1. Import the CSS
|
|
53
|
+
|
|
54
|
+
First, import the component library's CSS in your application:
|
|
55
|
+
|
|
56
|
+
```jsx
|
|
57
|
+
import 'randmarcomps/styles.css';
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
This will include all the necessary styles, including custom Randmar colors like `randmar-red`, `randmar-blue`, etc.
|
|
61
|
+
|
|
62
|
+
### 2. Import Components
|
|
63
|
+
|
|
64
|
+
Then import the components you need:
|
|
50
65
|
|
|
51
66
|
```tsx
|
|
52
67
|
import {
|
|
@@ -54,26 +69,60 @@ import {
|
|
|
54
69
|
InputOTPGroup,
|
|
55
70
|
InputOTPSeparator,
|
|
56
71
|
InputOTPSlot,
|
|
72
|
+
Button
|
|
57
73
|
} from 'randmarcomps';
|
|
58
74
|
|
|
59
75
|
function App() {
|
|
60
76
|
return (
|
|
61
|
-
<
|
|
62
|
-
<
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
77
|
+
<div>
|
|
78
|
+
<Button variant="blue">Blue Button</Button>
|
|
79
|
+
<Button variant="red">Red Button</Button>
|
|
80
|
+
|
|
81
|
+
<InputOTP maxLength={6}>
|
|
82
|
+
<InputOTPGroup>
|
|
83
|
+
<InputOTPSlot index={0} />
|
|
84
|
+
<InputOTPSlot index={1} />
|
|
85
|
+
<InputOTPSlot index={2} />
|
|
86
|
+
</InputOTPGroup>
|
|
87
|
+
<InputOTPSeparator />
|
|
88
|
+
<InputOTPGroup>
|
|
89
|
+
<InputOTPSlot index={3} />
|
|
90
|
+
<InputOTPSlot index={4} />
|
|
91
|
+
<InputOTPSlot index={5} />
|
|
92
|
+
</InputOTPGroup>
|
|
93
|
+
</InputOTP>
|
|
94
|
+
</div>
|
|
95
|
+
);
|
|
74
96
|
}
|
|
75
97
|
```
|
|
76
98
|
|
|
99
|
+
### Alternative: Using with Tailwind Source Directive
|
|
100
|
+
|
|
101
|
+
If you prefer to use Tailwind's source directive to process the components:
|
|
102
|
+
|
|
103
|
+
```css
|
|
104
|
+
/* In your main CSS file (e.g., src/index.css) */
|
|
105
|
+
@import 'tailwindcss';
|
|
106
|
+
@source "../node_modules/randmarcomps/dist";
|
|
107
|
+
|
|
108
|
+
/* Rest of your CSS */
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
This directive tells Tailwind to process the components from randmarcomps when generating your CSS.
|
|
112
|
+
If you're using a different path structure, adjust the path accordingly.
|
|
113
|
+
|
|
114
|
+
## Custom Colors
|
|
115
|
+
|
|
116
|
+
The library includes these custom Randmar colors:
|
|
117
|
+
- `randmar-red`
|
|
118
|
+
- `randmar-blue`
|
|
119
|
+
- `randmar-purple`
|
|
120
|
+
- `randmar-green`
|
|
121
|
+
- `randmar-black`
|
|
122
|
+
- `randmar-yellow`
|
|
123
|
+
|
|
124
|
+
These are available when you import the CSS file.
|
|
125
|
+
|
|
77
126
|
## Compatibility
|
|
78
127
|
|
|
79
128
|
This library is designed to work with:
|
package/dist/style.css
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
|
|
2
|
+
:root {
|
|
3
|
+
--background: oklch(1 0 0);
|
|
4
|
+
--foreground: oklch(0.145 0 0);
|
|
5
|
+
--card: oklch(1 0 0);
|
|
6
|
+
--card-foreground: oklch(0.145 0 0);
|
|
7
|
+
--popover: oklch(1 0 0);
|
|
8
|
+
--popover-foreground: oklch(0.145 0 0);
|
|
9
|
+
--primary: oklch(0.205 0 0);
|
|
10
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
11
|
+
--secondary: oklch(0.97 0 0);
|
|
12
|
+
--secondary-foreground: oklch(0.205 0 0);
|
|
13
|
+
--muted: oklch(0.97 0 0);
|
|
14
|
+
--muted-foreground: oklch(0.556 0 0);
|
|
15
|
+
--accent: oklch(0.97 0 0);
|
|
16
|
+
--accent-foreground: oklch(0.205 0 0);
|
|
17
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
18
|
+
--destructive-foreground: white;
|
|
19
|
+
--border: oklch(0.922 0 0);
|
|
20
|
+
--input: oklch(0.922 0 0);
|
|
21
|
+
--ring: oklch(0.708 0 0);
|
|
22
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
23
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
24
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
25
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
26
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
27
|
+
--radius: 0.625rem;
|
|
28
|
+
--sidebar: oklch(0.985 0 0);
|
|
29
|
+
--sidebar-foreground: oklch(0.145 0 0);
|
|
30
|
+
--sidebar-primary: oklch(0.205 0 0);
|
|
31
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
32
|
+
--sidebar-accent: oklch(0.97 0 0);
|
|
33
|
+
--sidebar-accent-foreground: oklch(0.205 0 0);
|
|
34
|
+
--sidebar-border: oklch(0.922 0 0);
|
|
35
|
+
--sidebar-ring: oklch(0.708 0 0);
|
|
36
|
+
|
|
37
|
+
--randmar-red: 0 59% 46%;
|
|
38
|
+
--randmar-blue: 222 68% 62%;
|
|
39
|
+
--randmar-purple: 269 21% 56%;
|
|
40
|
+
--randmar-green: 77 45% 58%;
|
|
41
|
+
--randmar-black: 0 0% 17%;
|
|
42
|
+
--randmar-yellow: 45 95% 64%;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark {
|
|
46
|
+
--background: oklch(0.27 0 0);
|
|
47
|
+
--foreground: oklch(0.99 0 0);
|
|
48
|
+
--card: oklch(0.12 0 0);
|
|
49
|
+
--card-foreground: oklch(0.99 0 0);
|
|
50
|
+
--popover: oklch(0.12 0 0);
|
|
51
|
+
--popover-foreground: oklch(0.99 0 0);
|
|
52
|
+
--primary: oklch(0.99 0 0);
|
|
53
|
+
--primary-foreground: oklch(0.20 0 0);
|
|
54
|
+
--secondary: oklch(0.24 0 0);
|
|
55
|
+
--secondary-foreground: oklch(0.99 0 0);
|
|
56
|
+
--muted: oklch(0.24 0 0);
|
|
57
|
+
--muted-foreground: oklch(0.71 0 0);
|
|
58
|
+
--accent: oklch(0.24 0 0);
|
|
59
|
+
--accent-foreground: oklch(0.99 0 0);
|
|
60
|
+
--destructive: oklch(0.47 0.15 0);
|
|
61
|
+
--destructive-foreground: oklch(0.99 0 0);
|
|
62
|
+
--border: oklch(0.42 0 0);
|
|
63
|
+
--input: oklch(0.24 0 0);
|
|
64
|
+
--ring: oklch(0.89 0 0);
|
|
65
|
+
--chart-1: oklch(0.65 0.18 220);
|
|
66
|
+
--chart-2: oklch(0.60 0.14 160);
|
|
67
|
+
--chart-3: oklch(0.69 0.20 30);
|
|
68
|
+
--chart-4: oklch(0.73 0.15 280);
|
|
69
|
+
--chart-5: oklch(0.69 0.19 340);
|
|
70
|
+
--sidebar: oklch(0.205 0 0);
|
|
71
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
72
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
73
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
74
|
+
--sidebar-accent: oklch(0.269 0 0);
|
|
75
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
76
|
+
--sidebar-border: oklch(0.269 0 0);
|
|
77
|
+
--sidebar-ring: oklch(0.439 0 0);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@theme inline {
|
|
81
|
+
--color-background: var(--background);
|
|
82
|
+
--color-foreground: var(--foreground);
|
|
83
|
+
--color-card: var(--card);
|
|
84
|
+
--color-card-foreground: var(--card-foreground);
|
|
85
|
+
--color-popover: var(--popover);
|
|
86
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
87
|
+
--color-primary: var(--primary);
|
|
88
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
89
|
+
--color-secondary: var(--secondary);
|
|
90
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
91
|
+
--color-muted: var(--muted);
|
|
92
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
93
|
+
--color-accent: var(--accent);
|
|
94
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
95
|
+
--color-destructive: var(--destructive);
|
|
96
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
97
|
+
--color-border: var(--border);
|
|
98
|
+
--color-input: var(--input);
|
|
99
|
+
--color-ring: var(--ring);
|
|
100
|
+
--color-chart-1: var(--chart-1);
|
|
101
|
+
--color-chart-2: var(--chart-2);
|
|
102
|
+
--color-chart-3: var(--chart-3);
|
|
103
|
+
--color-chart-4: var(--chart-4);
|
|
104
|
+
--color-chart-5: var(--chart-5);
|
|
105
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
106
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
107
|
+
--radius-lg: var(--radius);
|
|
108
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
109
|
+
--color-sidebar: var(--sidebar);
|
|
110
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
111
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
112
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
113
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
114
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
115
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
116
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
117
|
+
|
|
118
|
+
--color-randmar-red: hsl(var(--randmar-red));
|
|
119
|
+
--color-randmar-blue: hsl(var(--randmar-blue));
|
|
120
|
+
--color-randmar-purple: hsl(var(--randmar-purple));
|
|
121
|
+
--color-randmar-green: hsl(var(--randmar-green));
|
|
122
|
+
--color-randmar-black: hsl(var(--randmar-black));
|
|
123
|
+
--color-randmar-yellow: hsl(var(--randmar-yellow));
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
@layer base {
|
|
127
|
+
* {
|
|
128
|
+
@apply border-border outline-ring/50;
|
|
129
|
+
}
|
|
130
|
+
body {
|
|
131
|
+
@apply bg-background text-foreground;
|
|
132
|
+
}
|
|
133
|
+
}
|