@cmdniels/uikit 1.4.3 → 1.4.5

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 (8) hide show
  1. package/out/components/combobox/ComboboxList.js +1 -1
  2. package/out/components/dialog/DialogContent.js +1 -1
  3. package/out/components/sidebar/SidebarContent.js +1 -1
  4. package/out/components/textarea/TextArea.js +1 -1
  5. package/out/components/typography/TypographyPre.js +1 -1
  6. package/out/components/typography/TypographyTable.js +1 -1
  7. package/package.json +93 -85
  8. package/tailwind.css +57 -3
package/out/components/combobox/ComboboxList.js CHANGED
@@ -15,5 +15,5 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
15
15
  import cn from "../../cn";
16
16
  export default function ComboboxList(_a) {
17
17
  var { className } = _a, props = __rest(_a, ["className"]);
18
- return (_jsx(ComboboxPrimitive.List, Object.assign({ "data-slot": "combobox-list", className: cn("scrollbar-hidden max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className) }, props)));
18
+ return (_jsx(ComboboxPrimitive.List, Object.assign({ "data-slot": "combobox-list", className: cn("scrollbar-none max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", className) }, props)));
19
19
  }
package/out/components/dialog/DialogContent.js CHANGED
@@ -19,5 +19,5 @@ import DialogOverlay from "./DialogOverlay";
19
19
  import DialogPortal from "./DialogPortal";
20
20
  export default function DialogContent(_a) {
21
21
  var { className, children, showCloseButton = true } = _a, props = __rest(_a, ["className", "children", "showCloseButton"]);
22
- return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Popup, Object.assign({ "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-1/2 gap-6 rounded-xl bg-background p-6 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className) }, props, { children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm" }), children: [_jsx(IconX, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] }))] }));
22
+ return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(DialogPrimitive.Popup, Object.assign({ "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 flex h-fit max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] -translate-1/2 overflow-hidden rounded-xl ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className) }, props, { children: _jsxs("div", { className: cn("max-h-[calc(100%-2rem)]", "grid w-full gap-6 overflow-y-auto rounded-xl bg-background p-6 text-sm", "scrollbar-track-background scrollbar-thumb-border scrollbar"), children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", render: _jsx(Button, { variant: "ghost", className: "absolute top-4 right-4", size: "icon-sm" }), children: [_jsx(IconX, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] }) }))] }));
23
23
  }
package/out/components/sidebar/SidebarContent.js CHANGED
@@ -13,5 +13,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import cn from "../../cn";
14
14
  export default function SidebarContent(_a) {
15
15
  var { className } = _a, props = __rest(_a, ["className"]);
16
- return (_jsx("div", Object.assign({ "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("scrollbar-hidden flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className) }, props)));
16
+ return (_jsx("div", Object.assign({ "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("scrollbar-none flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className) }, props)));
17
17
  }
package/out/components/textarea/TextArea.js CHANGED
@@ -13,5 +13,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import cn from "../../cn";
14
14
  export default function TextArea(_a) {
15
15
  var { className } = _a, props = __rest(_a, ["className"]);
16
- return (_jsx("textarea", Object.assign({ "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-border bg-card px-2.5 py-2 text-base break-all shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm", className) }, props)));
16
+ return (_jsx("textarea", Object.assign({ "data-slot": "textarea", className: cn("flex field-sizing-content max-h-full min-h-16 w-full rounded-md border border-border bg-card px-2.5 py-2 text-base break-all shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm", className) }, props)));
17
17
  }
package/out/components/typography/TypographyPre.js CHANGED
@@ -14,7 +14,7 @@ import { forwardRef } from "react";
14
14
  import cn from "../../cn";
15
15
  const TypographyPre = forwardRef((_a, ref) => {
16
16
  var { className, children } = _a, props = __rest(_a, ["className", "children"]);
17
- return (_jsx("pre", Object.assign({ ref: ref, className: cn("scrollbar-hidden min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-data-highlighted-line:px-0 has-data-line-numbers:px-0 has-data-[slot=tabs]:p-0", className) }, props, { children: children })));
17
+ return (_jsx("pre", Object.assign({ ref: ref, className: cn("scrollbar-none min-w-0 overflow-x-auto px-4 py-3.5 outline-none has-data-highlighted-line:px-0 has-data-line-numbers:px-0 has-data-[slot=tabs]:p-0", className) }, props, { children: children })));
18
18
  });
19
19
  TypographyPre.displayName = "TypographyPre";
20
20
  export default TypographyPre;
package/out/components/typography/TypographyTable.js CHANGED
@@ -14,7 +14,7 @@ import { forwardRef } from "react";
14
14
  import cn from "../../cn";
15
15
  const TypographyTable = forwardRef((_a, ref) => {
16
16
  var { className } = _a, props = __rest(_a, ["className"]);
17
- return (_jsx("div", { className: "my-6 scrollbar-hidden w-full overflow-y-auto rounded-lg border", children: _jsx("table", Object.assign({ ref: ref, className: cn("relative w-full overflow-hidden border-none text-sm [&_tbody_tr:last-child]:border-b-0", className) }, props)) }));
17
+ return (_jsx("div", { className: "my-6 scrollbar-none w-full overflow-y-auto rounded-lg border", children: _jsx("table", Object.assign({ ref: ref, className: cn("relative w-full overflow-hidden border-none text-sm [&_tbody_tr:last-child]:border-b-0", className) }, props)) }));
18
18
  });
19
19
  TypographyTable.displayName = "TypographyTable";
20
20
  export default TypographyTable;
package/package.json CHANGED
@@ -1,86 +1,94 @@
1
1
  {
2
- "name": "@cmdniels/uikit",
3
- "version": "1.4.3",
4
- "private": false,
5
- "license": "MIT",
6
- "type": "module",
7
- "main": "./out/index.js",
8
- "types": "./out/index.d.ts",
9
- "exports": {
10
- ".": {
11
- "types": "./out/index.d.ts",
12
- "import": "./out/index.js"
13
- },
14
- "./cn": {
15
- "types": "./out/cn.d.ts",
16
- "import": "./out/cn.js"
17
- },
18
- "./clerk": {
19
- "types": "./out/clerk.d.ts",
20
- "import": "./out/clerk.js"
21
- },
22
- "./tailwind.css": "./tailwind.css"
23
- },
24
- "files": [
25
- "out",
26
- "tailwind.css",
27
- "README.md",
28
- "LICENSE"
29
- ],
30
- "sideEffects": false,
31
- "peerDependencies": {
32
- "@clerk/themes": "^2.4.46",
33
- "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
34
- "react": "^18.0.0 || ^19.0.0",
35
- "react-dom": "^18.0.0 || ^19.0.0",
36
- "recharts": "^3.6.0"
37
- },
38
- "dependencies": {
39
- "@base-ui/react": "^1.0.0",
40
- "@dnd-kit/core": "^6.3.1",
41
- "@dnd-kit/modifiers": "^9.0.0",
42
- "@dnd-kit/sortable": "^10.0.0",
43
- "@dnd-kit/utilities": "^3.2.2",
44
- "@radix-ui/react-dialog": "^1.1.15",
45
- "@radix-ui/react-scroll-area": "^1.2.10",
46
- "@tabler/icons-react": "^3.35.0",
47
- "@tailwindcss/postcss": "^4",
48
- "class-variance-authority": "^0.7.1",
49
- "clsx": "^2.1.1",
50
- "date-fns": "^4.1.0",
51
- "motion": "^12.23.26",
52
- "next-themes": "^0.4.6",
53
- "react-day-picker": "^9.12.0",
54
- "sonner": "^2.0.7",
55
- "tailwind-merge": "^3.4.0",
56
- "tailwindcss": "^4",
57
- "tw-animate-css": "^1.4.0"
58
- },
59
- "devDependencies": {
60
- "@clerk/themes": "^2.4.46",
61
- "@cmdniels/eslint-config": "^1.0.1",
62
- "@ladle/react": "^5.1.1",
63
- "@types/node": "24.10.1",
64
- "@types/react": "^19.2.7",
65
- "@types/react-dom": "^19.2.3",
66
- "eslint": "9.39.1",
67
- "next": "^16.0.10",
68
- "prettier": "~3.7.4",
69
- "react": "19.2.1",
70
- "react-dom": "19.2.1",
71
- "shadcn": "^3.6.1",
72
- "tsc-alias": "^1.8.16",
73
- "typescript": "^5",
74
- "vite": "^5.4.21"
75
- },
76
- "scripts": {
77
- "format": "prettier --write .",
78
- "lint": "eslint .",
79
- "lint:fix": "eslint --fix .",
80
- "fix": "pnpm lint:fix && pnpm format",
81
- "dev": "ladle serve",
82
- "build:docs": "ladle build",
83
- "preview": "ladle preview",
84
- "build": "rm -rf out && tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json"
85
- }
86
- }
2
+ "name": "@cmdniels/uikit",
3
+ "version": "1.4.5",
4
+ "private": false,
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "main": "./out/index.js",
8
+ "types": "./out/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./out/index.d.ts",
12
+ "import": "./out/index.js"
13
+ },
14
+ "./cn": {
15
+ "types": "./out/cn.d.ts",
16
+ "import": "./out/cn.js"
17
+ },
18
+ "./clerk": {
19
+ "types": "./out/clerk.d.ts",
20
+ "import": "./out/clerk.js"
21
+ },
22
+ "./tailwind.css": "./tailwind.css"
23
+ },
24
+ "files": [
25
+ "out",
26
+ "tailwind.css",
27
+ "README.md",
28
+ "LICENSE"
29
+ ],
30
+ "sideEffects": false,
31
+ "scripts": {
32
+ "format": "bunx prettier --write .",
33
+ "lint": "bunx eslint .",
34
+ "lint:fix": "bunx eslint --fix .",
35
+ "fix": "bun run lint:fix && bun run format",
36
+ "dev": "bunx ladle serve",
37
+ "build:docs": "bunx ladle build",
38
+ "preview": "bunx ladle preview",
39
+ "build": "bun run build:clean && bun run build:tsc && bun run build:alias",
40
+ "build:clean": "bunx rimraf out",
41
+ "build:tsc": "bunx tsc --project tsconfig.build.json",
42
+ "build:alias": "bunx tsc-alias -p tsconfig.build.json",
43
+ "prepublishOnly": "bun run build"
44
+ },
45
+ "peerDependencies": {
46
+ "@clerk/themes": "^2.4.46",
47
+ "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
48
+ "react": "^18.0.0 || ^19.0.0",
49
+ "react-dom": "^18.0.0 || ^19.0.0",
50
+ "recharts": "^3.6.0"
51
+ },
52
+ "dependencies": {
53
+ "@base-ui/react": "^1.0.0",
54
+ "@dnd-kit/core": "^6.3.1",
55
+ "@dnd-kit/modifiers": "^9.0.0",
56
+ "@dnd-kit/sortable": "^10.0.0",
57
+ "@dnd-kit/utilities": "^3.2.2",
58
+ "@radix-ui/react-dialog": "^1.1.15",
59
+ "@radix-ui/react-scroll-area": "^1.2.10",
60
+ "@tabler/icons-react": "^3.35.0",
61
+ "@tailwindcss/postcss": "^4",
62
+ "class-variance-authority": "^0.7.1",
63
+ "clsx": "^2.1.1",
64
+ "date-fns": "^4.1.0",
65
+ "motion": "^12.23.26",
66
+ "next-themes": "^0.4.6",
67
+ "react-day-picker": "^9.12.0",
68
+ "sonner": "^2.0.7",
69
+ "tailwind-merge": "^3.4.0",
70
+ "tailwindcss": "^4",
71
+ "tw-animate-css": "^1.4.0"
72
+ },
73
+ "devDependencies": {
74
+ "@clerk/themes": "^2.4.46",
75
+ "@cmdniels/eslint-config": "^1.0.1",
76
+ "@ladle/react": "^5.1.1",
77
+ "@types/node": "24.10.1",
78
+ "@types/react": "^19.2.7",
79
+ "@types/react-dom": "^19.2.3",
80
+ "eslint": "9.39.1",
81
+ "next": "^16.0.10",
82
+ "prettier": "~3.7.4",
83
+ "react": "19.2.1",
84
+ "react-dom": "19.2.1",
85
+ "shadcn": "^3.6.1",
86
+ "tsc-alias": "^1.8.16",
87
+ "typescript": "^5",
88
+ "vite": "^5.4.21"
89
+ },
90
+ "packageManager": "bun@1.3.0",
91
+ "engines": {
92
+ "bun": ">=1.3.0"
93
+ }
94
+ }
package/tailwind.css CHANGED
@@ -118,11 +118,65 @@
118
118
  }
119
119
  }
120
120
 
121
- @utility scrollbar-hidden {
122
- -ms-overflow-style: none;
123
- scrollbar-width: none;
121
+ /* Scrollbar Classes */
122
+ @theme {
123
+ --scrollbar-thumb-color: var(--color-border);
124
+ --scrollbar-track-color: var(--color-background);
125
+ --scrollbar-gutter-modifier: "";
126
+ }
124
127
 
128
+ @utility scrollbar-none {
129
+ scrollbar-width: none;
125
130
  &::-webkit-scrollbar {
126
131
  display: none;
127
132
  }
128
133
  }
134
+
135
+ @utility scrollbar {
136
+ scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
137
+ &::-webkit-scrollbar-thumb {
138
+ background-color: var(--scrollbar-thumb-color);
139
+ }
140
+ &::-webkit-scrollbar-track {
141
+ background-color: var(--scrollbar-track-color);
142
+ }
143
+ }
144
+
145
+ @utility scrollbar-stable {
146
+ scrollbar-gutter: stable var(--scrollbar-gutter-modifier);
147
+ }
148
+
149
+ @utility scrollbar-both-edges {
150
+ --scrollbar-gutter-modifier: both-edges;
151
+ }
152
+
153
+ @utility scrollbar-thumb-* {
154
+ --scrollbar-thumb-color: --value(--color-*);
155
+
156
+ scrollbar-arrow-color: var(--scrollbar-thumb-color);
157
+ &::-webkit-scrollbar-thumb {
158
+ background-color: var(--scrollbar-thumb-color);
159
+ }
160
+ &::-webkit-scrollbar-thumb:hover {
161
+ background-color: var(--scrollbar-thumb-color);
162
+ }
163
+ &::-webkit-scrollbar-thumb:active {
164
+ background-color: var(--scrollbar-thumb-color);
165
+ }
166
+ }
167
+
168
+ @utility scrollbar-track-* {
169
+ --scrollbar-track-color: --value(--color-*);
170
+
171
+ scrollbar-track-color: var(--scrollbar-track-color);
172
+ scrollbar-darkshadow-color: var(--scrollbar-track-color);
173
+ &::-webkit-scrollbar-track {
174
+ background-color: var(--scrollbar-track-color);
175
+ }
176
+ &::-webkit-scrollbar-track:hover {
177
+ background-color: var(--scrollbar-track-color);
178
+ }
179
+ &::-webkit-scrollbar-track:active {
180
+ background-color: var(--scrollbar-track-color);
181
+ }
182
+ }