@cmdniels/uikit 1.3.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 (12) hide show
  1. package/out/components/combobox/ComboboxList.js +1 -1
  2. package/out/components/dialog/DialogContent.js +1 -1
  3. package/out/components/input-group/InputGroupTextarea.js +1 -1
  4. package/out/components/sidebar/SidebarContent.js +1 -1
  5. package/out/components/textarea/{Textarea.d.ts → TextArea.d.ts} +1 -1
  6. package/out/components/textarea/{Textarea.js → TextArea.js} +2 -2
  7. package/out/components/typography/TypographyPre.js +1 -1
  8. package/out/components/typography/TypographyTable.js +1 -1
  9. package/out/index.d.ts +1 -1
  10. package/out/index.js +1 -1
  11. package/package.json +93 -85
  12. 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/input-group/InputGroupTextarea.js CHANGED
@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  };
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
14
  import cn from "../../cn";
15
- import Textarea from "../../components/textarea/Textarea";
15
+ import Textarea from "../../components/textarea/TextArea";
16
16
  export default function InputGroupTextarea(_a) {
17
17
  var { className } = _a, props = __rest(_a, ["className"]);
18
18
  return (_jsx(Textarea, Object.assign({ "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent", className) }, props)));
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.d.ts → TextArea.d.ts} RENAMED
@@ -1,2 +1,2 @@
1
1
  import type { ComponentProps } from "react";
2
- export default function Textarea({ className, ...props }: ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
2
+ export default function TextArea({ className, ...props }: ComponentProps<"textarea">): import("react/jsx-runtime").JSX.Element;
package/out/components/textarea/{Textarea.js → TextArea.js} RENAMED
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import cn from "../../cn";
14
- export default function Textarea(_a) {
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 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/out/index.d.ts CHANGED
@@ -202,7 +202,7 @@ export { default as TableFooter } from "./components/table/TableFooter";
202
202
  export { default as TableHead } from "./components/table/TableHead";
203
203
  export { default as TableHeader } from "./components/table/TableHeader";
204
204
  export { default as TableRow } from "./components/table/TableRow";
205
- export { default as Textarea } from "./components/textarea/Textarea";
205
+ export { default as TextArea } from "./components/textarea/TextArea";
206
206
  export { default as Toggle } from "./components/toggle/Toggle";
207
207
  export { default as Tooltip } from "./components/tooltip/Tooltip";
208
208
  export { default as TooltipContent } from "./components/tooltip/TooltipContent";
package/out/index.js CHANGED
@@ -239,7 +239,7 @@ export { default as TableHead } from "./components/table/TableHead";
239
239
  export { default as TableHeader } from "./components/table/TableHeader";
240
240
  export { default as TableRow } from "./components/table/TableRow";
241
241
  // Textarea
242
- export { default as Textarea } from "./components/textarea/Textarea";
242
+ export { default as TextArea } from "./components/textarea/TextArea";
243
243
  // Toggle
244
244
  export { default as Toggle } from "./components/toggle/Toggle";
245
245
  // Tooltip
package/package.json CHANGED
@@ -1,86 +1,94 @@
1
1
  {
2
- "name": "@cmdniels/uikit",
3
- "version": "1.3.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
+ }