@optilogic/core 1.0.0-beta.0 → 1.0.0-beta.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.
Files changed (4) hide show
  1. package/README.md +10 -7
  2. package/dist/styles.css +61 -0
  3. package/package.json +7 -43
  4. package/src/styles.css +61 -0
package/README.md CHANGED
@@ -13,17 +13,20 @@ npm install @optilogic/core
13
13
  Install the required peer dependencies:
14
14
 
15
15
  ```bash
16
- # Required
17
16
  npm install react react-dom tailwindcss
17
+ ```
18
+
19
+ Optional peer dependencies for specific components:
18
20
 
19
- # Radix UI (install based on components you use)
20
- npm install @radix-ui/react-tooltip @radix-ui/react-select @radix-ui/react-dropdown-menu
21
+ ```bash
22
+ # DataGrid virtualization
23
+ npm install @tanstack/react-virtual
21
24
 
22
- # Icons
23
- npm install lucide-react
25
+ # DatePicker
26
+ npm install date-fns react-day-picker
24
27
 
25
- # Optional (for specific components)
26
- npm install @tanstack/react-virtual sonner
28
+ # Toaster notifications
29
+ npm install sonner
27
30
  ```
28
31
 
29
32
  ## Setup
package/dist/styles.css CHANGED
@@ -94,3 +94,64 @@
94
94
  @apply bg-background text-foreground;
95
95
  }
96
96
  }
97
+
98
+ @layer utilities {
99
+ /* Thin scrollbar - apply per-element
100
+ * Uses theme variables for automatic theme matching:
101
+ * - Track: transparent (blends with background)
102
+ * - Thumb: muted-foreground with transparency
103
+ */
104
+ .scrollbar-thin {
105
+ scrollbar-width: thin;
106
+ scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
107
+ }
108
+
109
+ .scrollbar-thin::-webkit-scrollbar {
110
+ width: 8px;
111
+ height: 8px;
112
+ }
113
+
114
+ .scrollbar-thin::-webkit-scrollbar-track {
115
+ background: transparent;
116
+ border-radius: 4px;
117
+ }
118
+
119
+ .scrollbar-thin::-webkit-scrollbar-thumb {
120
+ background: hsl(var(--muted-foreground) / 0.3);
121
+ border-radius: 4px;
122
+ }
123
+
124
+ .scrollbar-thin::-webkit-scrollbar-thumb:hover {
125
+ background: hsl(var(--muted-foreground) / 0.5);
126
+ }
127
+
128
+ /* Global thin scrollbar - apply to html/body to style all descendants */
129
+ .scrollbar-thin-all,
130
+ .scrollbar-thin-all * {
131
+ scrollbar-width: thin;
132
+ scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
133
+ }
134
+
135
+ .scrollbar-thin-all ::-webkit-scrollbar,
136
+ .scrollbar-thin-all::-webkit-scrollbar {
137
+ width: 8px;
138
+ height: 8px;
139
+ }
140
+
141
+ .scrollbar-thin-all ::-webkit-scrollbar-track,
142
+ .scrollbar-thin-all::-webkit-scrollbar-track {
143
+ background: transparent;
144
+ border-radius: 4px;
145
+ }
146
+
147
+ .scrollbar-thin-all ::-webkit-scrollbar-thumb,
148
+ .scrollbar-thin-all::-webkit-scrollbar-thumb {
149
+ background: hsl(var(--muted-foreground) / 0.3);
150
+ border-radius: 4px;
151
+ }
152
+
153
+ .scrollbar-thin-all ::-webkit-scrollbar-thumb:hover,
154
+ .scrollbar-thin-all::-webkit-scrollbar-thumb:hover {
155
+ background: hsl(var(--muted-foreground) / 0.5);
156
+ }
157
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@optilogic/core",
3
- "version": "1.0.0-beta.0",
3
+ "version": "1.0.0-beta.2",
4
4
  "description": "Core UI components for Optilogic - A professional React component library",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
@@ -38,11 +38,6 @@
38
38
  "README.md"
39
39
  ],
40
40
  "dependencies": {
41
- "class-variance-authority": "^0.7.1",
42
- "clsx": "^2.1.1",
43
- "tailwind-merge": "^3.0.1"
44
- },
45
- "peerDependencies": {
46
41
  "@radix-ui/react-accordion": "^1.2.0",
47
42
  "@radix-ui/react-alert-dialog": "^1.1.0",
48
43
  "@radix-ui/react-checkbox": "^1.1.0",
@@ -56,9 +51,14 @@
56
51
  "@radix-ui/react-switch": "^1.1.0",
57
52
  "@radix-ui/react-tabs": "^1.1.0",
58
53
  "@radix-ui/react-tooltip": "^1.1.0",
54
+ "class-variance-authority": "^0.7.1",
55
+ "clsx": "^2.1.1",
56
+ "lucide-react": "^0.400.0",
57
+ "tailwind-merge": "^3.0.1"
58
+ },
59
+ "peerDependencies": {
59
60
  "@tanstack/react-virtual": "^3.10.0",
60
61
  "date-fns": "^3.0.0 || ^4.0.0",
61
- "lucide-react": "^0.400.0",
62
62
  "react": "^18.0.0 || ^19.0.0",
63
63
  "react-day-picker": "^9.0.0",
64
64
  "react-dom": "^18.0.0 || ^19.0.0",
@@ -66,42 +66,6 @@
66
66
  "tailwindcss": "^3.4.0"
67
67
  },
68
68
  "peerDependenciesMeta": {
69
- "@radix-ui/react-accordion": {
70
- "optional": true
71
- },
72
- "@radix-ui/react-alert-dialog": {
73
- "optional": true
74
- },
75
- "@radix-ui/react-checkbox": {
76
- "optional": true
77
- },
78
- "@radix-ui/react-dropdown-menu": {
79
- "optional": true
80
- },
81
- "@radix-ui/react-label": {
82
- "optional": true
83
- },
84
- "@radix-ui/react-popover": {
85
- "optional": true
86
- },
87
- "@radix-ui/react-progress": {
88
- "optional": true
89
- },
90
- "@radix-ui/react-select": {
91
- "optional": true
92
- },
93
- "@radix-ui/react-separator": {
94
- "optional": true
95
- },
96
- "@radix-ui/react-switch": {
97
- "optional": true
98
- },
99
- "@radix-ui/react-tabs": {
100
- "optional": true
101
- },
102
- "@radix-ui/react-tooltip": {
103
- "optional": true
104
- },
105
69
  "@tanstack/react-virtual": {
106
70
  "optional": true
107
71
  },
package/src/styles.css CHANGED
@@ -94,3 +94,64 @@
94
94
  @apply bg-background text-foreground;
95
95
  }
96
96
  }
97
+
98
+ @layer utilities {
99
+ /* Thin scrollbar - apply per-element
100
+ * Uses theme variables for automatic theme matching:
101
+ * - Track: transparent (blends with background)
102
+ * - Thumb: muted-foreground with transparency
103
+ */
104
+ .scrollbar-thin {
105
+ scrollbar-width: thin;
106
+ scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
107
+ }
108
+
109
+ .scrollbar-thin::-webkit-scrollbar {
110
+ width: 8px;
111
+ height: 8px;
112
+ }
113
+
114
+ .scrollbar-thin::-webkit-scrollbar-track {
115
+ background: transparent;
116
+ border-radius: 4px;
117
+ }
118
+
119
+ .scrollbar-thin::-webkit-scrollbar-thumb {
120
+ background: hsl(var(--muted-foreground) / 0.3);
121
+ border-radius: 4px;
122
+ }
123
+
124
+ .scrollbar-thin::-webkit-scrollbar-thumb:hover {
125
+ background: hsl(var(--muted-foreground) / 0.5);
126
+ }
127
+
128
+ /* Global thin scrollbar - apply to html/body to style all descendants */
129
+ .scrollbar-thin-all,
130
+ .scrollbar-thin-all * {
131
+ scrollbar-width: thin;
132
+ scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
133
+ }
134
+
135
+ .scrollbar-thin-all ::-webkit-scrollbar,
136
+ .scrollbar-thin-all::-webkit-scrollbar {
137
+ width: 8px;
138
+ height: 8px;
139
+ }
140
+
141
+ .scrollbar-thin-all ::-webkit-scrollbar-track,
142
+ .scrollbar-thin-all::-webkit-scrollbar-track {
143
+ background: transparent;
144
+ border-radius: 4px;
145
+ }
146
+
147
+ .scrollbar-thin-all ::-webkit-scrollbar-thumb,
148
+ .scrollbar-thin-all::-webkit-scrollbar-thumb {
149
+ background: hsl(var(--muted-foreground) / 0.3);
150
+ border-radius: 4px;
151
+ }
152
+
153
+ .scrollbar-thin-all ::-webkit-scrollbar-thumb:hover,
154
+ .scrollbar-thin-all::-webkit-scrollbar-thumb:hover {
155
+ background: hsl(var(--muted-foreground) / 0.5);
156
+ }
157
+ }