@neoptocom/neopto-ui 0.6.0 → 0.6.2
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 +10 -2
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Avatar.tsx +1 -1
package/README.md
CHANGED
|
@@ -36,16 +36,24 @@ export default {
|
|
|
36
36
|
|
|
37
37
|
### Step 3: Setup your CSS file
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
If your CSS file is at `src/app/globals.css` (App Router), use:
|
|
40
40
|
|
|
41
41
|
```css
|
|
42
42
|
@import "tailwindcss";
|
|
43
43
|
|
|
44
44
|
/* Scan the component library source files */
|
|
45
|
-
@source "
|
|
45
|
+
@source "../../node_modules/@neoptocom/neopto-ui/src";
|
|
46
46
|
|
|
47
47
|
/* Import library styles */
|
|
48
48
|
@import "@neoptocom/neopto-ui/styles";
|
|
49
|
+
|
|
50
|
+
/* Scan your own project files */
|
|
51
|
+
@source "../";
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Note:** The path is relative to your CSS file location. Adjust `../` levels accordingly.
|
|
56
|
+
|
|
49
57
|
```
|
|
50
58
|
|
|
51
59
|
Then import this CSS in your `src/main.tsx`:
|
package/dist/index.cjs
CHANGED
|
@@ -174,7 +174,7 @@ function Typo({
|
|
|
174
174
|
}
|
|
175
175
|
);
|
|
176
176
|
}
|
|
177
|
-
function getAvatarClasses(size = "
|
|
177
|
+
function getAvatarClasses(size = "md", className) {
|
|
178
178
|
const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
|
|
179
179
|
const sizes = {
|
|
180
180
|
sm: "w-[28px] h-[28px]",
|
package/dist/index.js
CHANGED
|
@@ -153,7 +153,7 @@ function Typo({
|
|
|
153
153
|
}
|
|
154
154
|
);
|
|
155
155
|
}
|
|
156
|
-
function getAvatarClasses(size = "
|
|
156
|
+
function getAvatarClasses(size = "md", className) {
|
|
157
157
|
const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
|
|
158
158
|
const sizes = {
|
|
159
159
|
sm: "w-[28px] h-[28px]",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neoptocom/neopto-ui",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
|
|
6
6
|
"keywords": [
|
|
@@ -15,7 +15,7 @@ export type AvatarProps = {
|
|
|
15
15
|
size?: "sm" | "md";
|
|
16
16
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
|
|
17
17
|
|
|
18
|
-
function getAvatarClasses(size: AvatarProps["size"] = "
|
|
18
|
+
function getAvatarClasses(size: AvatarProps["size"] = "md", className?: string): string {
|
|
19
19
|
const base =
|
|
20
20
|
"relative box-border flex items-center justify-center overflow-hidden rounded-full " +
|
|
21
21
|
"border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
|