@cmdniels/uikit 1.4.3 → 1.4.6

package/out/components/combobox/ComboboxList.js

@@ -15,5 +15,5 @@ import { Combobox as ComboboxPrimitive } from "@base-ui/react";
 import cn from "../../cn";
 export default function ComboboxList(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    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)));
+    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)));
 }

package/out/components/dialog/DialogContent.js

@@ -19,5 +19,5 @@ import DialogOverlay from "./DialogOverlay";
 import DialogPortal from "./DialogPortal";
 export default function DialogContent(_a) {
     var { className, children, showCloseButton = true } = _a, props = __rest(_a, ["className", "children", "showCloseButton"]);
-    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" })] }))] }))] }));
+    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" })] }))] }) }))] }));
 }

package/out/components/select/Select.d.ts

@@ -1,3 +1,3 @@
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-declare const Select: typeof SelectPrimitive.Root;
-export default Select;
+export declare const SelectRegistryContext: import("react").Context<Map<unknown, string> | null>;
+export default function Select({ children, ...props }: SelectPrimitive.Root.Props<unknown, boolean | undefined>): import("react/jsx-runtime").JSX.Element;

package/out/components/select/Select.js

@@ -1,4 +1,21 @@
 "use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-const Select = SelectPrimitive.Root;
-export default Select;
+import { createContext, useRef } from "react";
+export const SelectRegistryContext = createContext(null);
+export default function Select(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const registryRef = useRef(new Map());
+    return (_jsx(SelectRegistryContext.Provider, { value: registryRef.current, children: _jsx(SelectPrimitive.Root, Object.assign({}, props, { itemToStringLabel: (value) => { var _a; return (_a = registryRef.current.get(value)) !== null && _a !== void 0 ? _a : String(value); }, children: children })) }));
+}

package/out/components/select/SelectItem.d.ts

@@ -1,2 +1,2 @@
 import { Select as SelectPrimitive } from "@base-ui/react/select";
-export default function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+export default function SelectItem({ className, children, value, ...props }: SelectPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;

package/out/components/select/SelectItem.js

@@ -13,8 +13,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select as SelectPrimitive } from "@base-ui/react/select";
 import { IconCheck } from "@tabler/icons-react";
+import { useContext, useEffect } from "react";
 import cn from "../../cn";
+import { SelectRegistryContext } from "./Select";
 export default function SelectItem(_a) {
-    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(SelectPrimitive.Item, Object.assign({ "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className) }, props, { children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(IconCheck, { className: "pointer-events-none" }) })] })));
+    var { className, children, value } = _a, props = __rest(_a, ["className", "children", "value"]);
+    const registry = useContext(SelectRegistryContext);
+    useEffect(() => {
+        if (registry && value !== undefined) {
+            const label = typeof children === "string" ? children : String(children);
+            registry.set(value, label);
+        }
+    }, [registry, value, children]);
+    return (_jsxs(SelectPrimitive.Item, Object.assign({ "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), value: value }, props, { children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(IconCheck, { className: "pointer-events-none" }) })] })));
 }

package/out/components/sidebar/SidebarContent.js

@@ -13,5 +13,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from "../../cn";
 export default function SidebarContent(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    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)));
+    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)));
 }

package/out/components/textarea/TextArea.js

@@ -13,5 +13,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from "../../cn";
 export default function TextArea(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    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)));
+    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)));
 }

package/out/components/typography/TypographyPre.js

@@ -14,7 +14,7 @@ import { forwardRef } from "react";
 import cn from "../../cn";
 const TypographyPre = forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    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 })));
+    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 })));
 });
 TypographyPre.displayName = "TypographyPre";
 export default TypographyPre;

package/out/components/typography/TypographyTable.js

@@ -14,7 +14,7 @@ import { forwardRef } from "react";
 import cn from "../../cn";
 const TypographyTable = forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    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)) }));
+    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)) }));
 });
 TypographyTable.displayName = "TypographyTable";
 export default TypographyTable;

package/package.json

@@ -1,86 +1,94 @@
 {
-  "name": "@cmdniels/uikit",
-  "version": "1.4.3",
-  "private": false,
-  "license": "MIT",
-  "type": "module",
-  "main": "./out/index.js",
-  "types": "./out/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./out/index.d.ts",
-      "import": "./out/index.js"
-    },
-    "./cn": {
-      "types": "./out/cn.d.ts",
-      "import": "./out/cn.js"
-    },
-    "./clerk": {
-      "types": "./out/clerk.d.ts",
-      "import": "./out/clerk.js"
-    },
-    "./tailwind.css": "./tailwind.css"
-  },
-  "files": [
-    "out",
-    "tailwind.css",
-    "README.md",
-    "LICENSE"
-  ],
-  "sideEffects": false,
-  "peerDependencies": {
-    "@clerk/themes": "^2.4.46",
-    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "recharts": "^3.6.0"
-  },
-  "dependencies": {
-    "@base-ui/react": "^1.0.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@tabler/icons-react": "^3.35.0",
-    "@tailwindcss/postcss": "^4",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "motion": "^12.23.26",
-    "next-themes": "^0.4.6",
-    "react-day-picker": "^9.12.0",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.4.0"
-  },
-  "devDependencies": {
-    "@clerk/themes": "^2.4.46",
-    "@cmdniels/eslint-config": "^1.0.1",
-    "@ladle/react": "^5.1.1",
-    "@types/node": "24.10.1",
-    "@types/react": "^19.2.7",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "9.39.1",
-    "next": "^16.0.10",
-    "prettier": "~3.7.4",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
-    "shadcn": "^3.6.1",
-    "tsc-alias": "^1.8.16",
-    "typescript": "^5",
-    "vite": "^5.4.21"
-  },
-  "scripts": {
-    "format": "prettier --write .",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "fix": "pnpm lint:fix && pnpm format",
-    "dev": "ladle serve",
-    "build:docs": "ladle build",
-    "preview": "ladle preview",
-    "build": "rm -rf out && tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json"
-  }
-}
+	"name": "@cmdniels/uikit",
+	"version": "1.4.6",
+	"private": false,
+	"license": "MIT",
+	"type": "module",
+	"main": "./out/index.js",
+	"types": "./out/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./out/index.d.ts",
+			"import": "./out/index.js"
+		},
+		"./cn": {
+			"types": "./out/cn.d.ts",
+			"import": "./out/cn.js"
+		},
+		"./clerk": {
+			"types": "./out/clerk.d.ts",
+			"import": "./out/clerk.js"
+		},
+		"./tailwind.css": "./tailwind.css"
+	},
+	"files": [
+		"out",
+		"tailwind.css",
+		"README.md",
+		"LICENSE"
+	],
+	"sideEffects": false,
+	"scripts": {
+		"format": "bunx prettier --write .",
+		"lint": "bunx eslint .",
+		"lint:fix": "bunx eslint --fix .",
+		"fix": "bun run lint:fix && bun run format",
+		"dev": "bunx ladle serve",
+		"build:docs": "bunx ladle build",
+		"preview": "bunx ladle preview",
+		"build": "bun run build:clean && bun run build:tsc && bun run build:alias",
+		"build:clean": "bunx rimraf out",
+		"build:tsc": "bunx tsc --project tsconfig.build.json",
+		"build:alias": "bunx tsc-alias -p tsconfig.build.json",
+		"prepublishOnly": "bun run build"
+	},
+	"peerDependencies": {
+		"@clerk/themes": "^2.4.46",
+		"next": "^14.0.0 || ^15.0.0 || ^16.0.0",
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0",
+		"recharts": "^3.6.0"
+	},
+	"dependencies": {
+		"@base-ui/react": "^1.0.0",
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/modifiers": "^9.0.0",
+		"@dnd-kit/sortable": "^10.0.0",
+		"@dnd-kit/utilities": "^3.2.2",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-scroll-area": "^1.2.10",
+		"@tabler/icons-react": "^3.35.0",
+		"@tailwindcss/postcss": "^4",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"date-fns": "^4.1.0",
+		"motion": "^12.23.26",
+		"next-themes": "^0.4.6",
+		"react-day-picker": "^9.12.0",
+		"sonner": "^2.0.7",
+		"tailwind-merge": "^3.4.0",
+		"tailwindcss": "^4",
+		"tw-animate-css": "^1.4.0"
+	},
+	"devDependencies": {
+		"@clerk/themes": "^2.4.46",
+		"@cmdniels/eslint-config": "^1.0.1",
+		"@ladle/react": "^5.1.1",
+		"@types/node": "24.10.1",
+		"@types/react": "^19.2.7",
+		"@types/react-dom": "^19.2.3",
+		"eslint": "9.39.1",
+		"next": "^16.0.10",
+		"prettier": "~3.7.4",
+		"react": "19.2.1",
+		"react-dom": "19.2.1",
+		"shadcn": "^3.6.1",
+		"tsc-alias": "^1.8.16",
+		"typescript": "^5",
+		"vite": "^5.4.21"
+	},
+	"packageManager": "bun@1.3.0",
+	"engines": {
+		"bun": ">=1.3.0"
+	}
+}

package/tailwind.css

@@ -118,11 +118,65 @@
 	}
 }
 
-@utility scrollbar-hidden {
-	-ms-overflow-style: none;
-	scrollbar-width: none;
+/* Scrollbar Classes */
+@theme {
+	--scrollbar-thumb-color: var(--color-border);
+	--scrollbar-track-color: var(--color-background);
+	--scrollbar-gutter-modifier: "";
+}
 
+@utility scrollbar-none {
+	scrollbar-width: none;
 	&::-webkit-scrollbar {
 		display: none;
 	}
 }
+
+@utility scrollbar {
+	scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--scrollbar-thumb-color);
+	}
+	&::-webkit-scrollbar-track {
+		background-color: var(--scrollbar-track-color);
+	}
+}
+
+@utility scrollbar-stable {
+	scrollbar-gutter: stable var(--scrollbar-gutter-modifier);
+}
+
+@utility scrollbar-both-edges {
+	--scrollbar-gutter-modifier: both-edges;
+}
+
+@utility scrollbar-thumb-* {
+	--scrollbar-thumb-color: --value(--color-*);
+
+	scrollbar-arrow-color: var(--scrollbar-thumb-color);
+	&::-webkit-scrollbar-thumb {
+		background-color: var(--scrollbar-thumb-color);
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: var(--scrollbar-thumb-color);
+	}
+	&::-webkit-scrollbar-thumb:active {
+		background-color: var(--scrollbar-thumb-color);
+	}
+}
+
+@utility scrollbar-track-* {
+	--scrollbar-track-color: --value(--color-*);
+
+	scrollbar-track-color: var(--scrollbar-track-color);
+	scrollbar-darkshadow-color: var(--scrollbar-track-color);
+	&::-webkit-scrollbar-track {
+		background-color: var(--scrollbar-track-color);
+	}
+	&::-webkit-scrollbar-track:hover {
+		background-color: var(--scrollbar-track-color);
+	}
+	&::-webkit-scrollbar-track:active {
+		background-color: var(--scrollbar-track-color);
+	}
+}