@sntxindu/ui 1.0.0 → 1.0.1
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 -10
- package/dist/styles.css +126 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @sntxindu/ui
|
|
2
2
|
|
|
3
3
|
Enterprise-grade React UI component library built with Radix UI and Tailwind CSS.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @
|
|
8
|
+
npm install @sntxindu/ui
|
|
9
9
|
# or
|
|
10
|
-
yarn add @
|
|
10
|
+
yarn add @sntxindu/ui
|
|
11
11
|
# or
|
|
12
|
-
pnpm add @
|
|
12
|
+
pnpm add @sntxindu/ui
|
|
13
13
|
```
|
|
14
14
|
|
|
15
15
|
## Peer Dependencies
|
|
@@ -27,7 +27,7 @@ npm install react react-dom tailwindcss
|
|
|
27
27
|
In your main application file (e.g., `_app.tsx` or `layout.tsx`):
|
|
28
28
|
|
|
29
29
|
```tsx
|
|
30
|
-
import '@
|
|
30
|
+
import '@sntxindu/ui/styles.css'
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
### 2. Configure Tailwind
|
|
@@ -40,7 +40,7 @@ module.exports = {
|
|
|
40
40
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
41
41
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
42
42
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
43
|
-
'./node_modules/@
|
|
43
|
+
'./node_modules/@sntxindu/ui/dist/**/*.{js,mjs}',
|
|
44
44
|
],
|
|
45
45
|
// ... rest of your config
|
|
46
46
|
}
|
|
@@ -51,7 +51,7 @@ module.exports = {
|
|
|
51
51
|
### Import Components
|
|
52
52
|
|
|
53
53
|
```tsx
|
|
54
|
-
import { Button, Card, Badge } from '@
|
|
54
|
+
import { Button, Card, Badge } from '@sntxindu/ui'
|
|
55
55
|
|
|
56
56
|
function App() {
|
|
57
57
|
return (
|
|
@@ -77,8 +77,8 @@ function App() {
|
|
|
77
77
|
For better tree-shaking, you can import components individually:
|
|
78
78
|
|
|
79
79
|
```tsx
|
|
80
|
-
import { Button } from '@
|
|
81
|
-
import { Card } from '@
|
|
80
|
+
import { Button } from '@sntxindu/ui/components/button'
|
|
81
|
+
import { Card } from '@sntxindu/ui/components/card'
|
|
82
82
|
```
|
|
83
83
|
|
|
84
84
|
## Available Components
|
|
@@ -129,7 +129,7 @@ All components accept a `className` prop for custom styling:
|
|
|
129
129
|
Full TypeScript support with type definitions included.
|
|
130
130
|
|
|
131
131
|
```tsx
|
|
132
|
-
import type { ButtonProps } from '@
|
|
132
|
+
import type { ButtonProps } from '@sntxindu/ui'
|
|
133
133
|
|
|
134
134
|
const MyButton: React.FC<ButtonProps> = (props) => {
|
|
135
135
|
return <Button {...props} />
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
@import "shadcn/tailwind.css";
|
|
4
|
+
|
|
5
|
+
@custom-variant dark (&:is(.dark *));
|
|
6
|
+
|
|
7
|
+
@theme inline {
|
|
8
|
+
--color-background: var(--background);
|
|
9
|
+
--color-foreground: var(--foreground);
|
|
10
|
+
--font-sans: var(--font-sans);
|
|
11
|
+
--font-mono: var(--font-geist-mono);
|
|
12
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
13
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
14
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
15
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
16
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
17
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
18
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
19
|
+
--color-sidebar: var(--sidebar);
|
|
20
|
+
--color-chart-5: var(--chart-5);
|
|
21
|
+
--color-chart-4: var(--chart-4);
|
|
22
|
+
--color-chart-3: var(--chart-3);
|
|
23
|
+
--color-chart-2: var(--chart-2);
|
|
24
|
+
--color-chart-1: var(--chart-1);
|
|
25
|
+
--color-ring: var(--ring);
|
|
26
|
+
--color-input: var(--input);
|
|
27
|
+
--color-border: var(--border);
|
|
28
|
+
--color-destructive: var(--destructive);
|
|
29
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
30
|
+
--color-accent: var(--accent);
|
|
31
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
32
|
+
--color-muted: var(--muted);
|
|
33
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
34
|
+
--color-secondary: var(--secondary);
|
|
35
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
36
|
+
--color-primary: var(--primary);
|
|
37
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
38
|
+
--color-popover: var(--popover);
|
|
39
|
+
--color-card-foreground: var(--card-foreground);
|
|
40
|
+
--color-card: var(--card);
|
|
41
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
42
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
43
|
+
--radius-lg: var(--radius);
|
|
44
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
45
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
46
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
47
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:root {
|
|
51
|
+
--background: oklch(1 0 0);
|
|
52
|
+
--foreground: oklch(0.147 0.004 49.25);
|
|
53
|
+
--card: oklch(1 0 0);
|
|
54
|
+
--card-foreground: oklch(0.147 0.004 49.25);
|
|
55
|
+
--popover: oklch(1 0 0);
|
|
56
|
+
--popover-foreground: oklch(0.147 0.004 49.25);
|
|
57
|
+
--primary: oklch(0.216 0.006 56.043);
|
|
58
|
+
--primary-foreground: oklch(0.985 0.001 106.423);
|
|
59
|
+
--secondary: oklch(0.97 0.001 106.424);
|
|
60
|
+
--secondary-foreground: oklch(0.216 0.006 56.043);
|
|
61
|
+
--muted: oklch(0.97 0.001 106.424);
|
|
62
|
+
--muted-foreground: oklch(0.553 0.013 58.071);
|
|
63
|
+
--accent: oklch(0.216 0.006 56.043);
|
|
64
|
+
--accent-foreground: oklch(0.985 0.001 106.423);
|
|
65
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
66
|
+
--border: oklch(0.923 0.003 48.717);
|
|
67
|
+
--input: oklch(0.923 0.003 48.717);
|
|
68
|
+
--ring: oklch(0.709 0.01 56.259);
|
|
69
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
70
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
71
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
72
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
73
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
74
|
+
--radius: 0.45rem;
|
|
75
|
+
--sidebar: oklch(0.985 0.001 106.423);
|
|
76
|
+
--sidebar-foreground: oklch(0.147 0.004 49.25);
|
|
77
|
+
--sidebar-primary: oklch(0.216 0.006 56.043);
|
|
78
|
+
--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
|
|
79
|
+
--sidebar-accent: oklch(0.216 0.006 56.043);
|
|
80
|
+
--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
|
|
81
|
+
--sidebar-border: oklch(0.923 0.003 48.717);
|
|
82
|
+
--sidebar-ring: oklch(0.709 0.01 56.259);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.dark {
|
|
86
|
+
--background: oklch(0.147 0.004 49.25);
|
|
87
|
+
--foreground: oklch(0.985 0.001 106.423);
|
|
88
|
+
--card: oklch(0.216 0.006 56.043);
|
|
89
|
+
--card-foreground: oklch(0.985 0.001 106.423);
|
|
90
|
+
--popover: oklch(0.216 0.006 56.043);
|
|
91
|
+
--popover-foreground: oklch(0.985 0.001 106.423);
|
|
92
|
+
--primary: oklch(0.923 0.003 48.717);
|
|
93
|
+
--primary-foreground: oklch(0.216 0.006 56.043);
|
|
94
|
+
--secondary: oklch(0.268 0.007 34.298);
|
|
95
|
+
--secondary-foreground: oklch(0.985 0.001 106.423);
|
|
96
|
+
--muted: oklch(0.268 0.007 34.298);
|
|
97
|
+
--muted-foreground: oklch(0.709 0.01 56.259);
|
|
98
|
+
--accent: oklch(0.923 0.003 48.717);
|
|
99
|
+
--accent-foreground: oklch(0.216 0.006 56.043);
|
|
100
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
101
|
+
--border: oklch(1 0 0 / 10%);
|
|
102
|
+
--input: oklch(1 0 0 / 15%);
|
|
103
|
+
--ring: oklch(0.553 0.013 58.071);
|
|
104
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
105
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
106
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
107
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
108
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
109
|
+
--sidebar: oklch(0.216 0.006 56.043);
|
|
110
|
+
--sidebar-foreground: oklch(0.985 0.001 106.423);
|
|
111
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
112
|
+
--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
|
|
113
|
+
--sidebar-accent: oklch(0.923 0.003 48.717);
|
|
114
|
+
--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
|
|
115
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
116
|
+
--sidebar-ring: oklch(0.553 0.013 58.071);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@layer base {
|
|
120
|
+
* {
|
|
121
|
+
@apply border-border outline-ring/50;
|
|
122
|
+
}
|
|
123
|
+
body {
|
|
124
|
+
@apply bg-background text-foreground;
|
|
125
|
+
}
|
|
126
|
+
}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sntxindu/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Syntax Industries UI Component Library",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
7
7
|
"types": "./dist/index.d.ts",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
10
11
|
"import": "./dist/index.mjs",
|
|
11
|
-
"require": "./dist/index.js"
|
|
12
|
-
"types": "./dist/index.d.ts"
|
|
12
|
+
"require": "./dist/index.js"
|
|
13
13
|
},
|
|
14
14
|
"./components/*": {
|
|
15
|
+
"types": "./dist/components/*.d.ts",
|
|
15
16
|
"import": "./dist/components/*.mjs",
|
|
16
|
-
"require": "./dist/components/*.js"
|
|
17
|
-
"types": "./dist/components/*.d.ts"
|
|
17
|
+
"require": "./dist/components/*.js"
|
|
18
18
|
},
|
|
19
19
|
"./styles.css": "./dist/styles.css"
|
|
20
20
|
},
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"license": "MIT",
|
|
43
43
|
"repository": {
|
|
44
44
|
"type": "git",
|
|
45
|
-
"url": "https://github.com/sntxindu/syntax-industries-ui"
|
|
45
|
+
"url": "git+https://github.com/sntxindu/syntax-industries-ui.git"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
48
|
"react": ">=18.0.0",
|