@cmdniels/uikit 1.1.2 → 1.1.4

package/out/clerk.d.ts

@@ -0,0 +1 @@
+export declare const clerkTheme: any;

package/out/clerk.js

@@ -0,0 +1,64 @@
+import { experimental_createTheme } from "@clerk/themes";
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const clerkTheme = experimental_createTheme({
+    name: "uikit",
+    cssLayerName: "components",
+    variables: {
+        colorBackground: "var(--background)",
+        colorDanger: "var(--destructive)",
+        colorForeground: "var(--foreground)",
+        colorInput: "var(--card)",
+        colorInputBackground: "var(--card)",
+        colorInputForeground: "var(--card-foreground)",
+        colorModalBackdrop: "oklch(0 0 0 / 0.5)",
+        colorMuted: "var(--muted)",
+        colorMutedForeground: "var(--muted-foreground)",
+        colorNeutral: "var(--foreground)",
+        colorPrimary: "var(--primary)",
+        colorPrimaryForeground: "var(--primary-foreground)",
+        colorRing: "var(--ring)",
+        colorTextOnPrimaryBackground: "var(--primary-foreground)",
+        colorTextSecondary: "var(--muted-foreground)",
+        borderRadius: "0.375rem",
+        fontSize: "0.875rem",
+        fontWeight: {
+            normal: "400",
+            medium: "500",
+            semibold: "600",
+            bold: "600",
+        },
+    },
+    elements: {
+        // Cards & Containers
+        card: "rounded-xl border border-border bg-card shadow-xs text-card-foreground",
+        pricingTableCard: "rounded-xl border border-border bg-card shadow-xs text-card-foreground",
+        cardBox: "rounded-xl border border-border bg-card shadow-xs text-card-foreground",
+        popoverBox: "rounded-md border border-border bg-card shadow-md text-card-foreground",
+        userButtonPopoverMain: "rounded-md border border-border bg-card shadow-md text-card-foreground",
+        userButtonPopoverFooter: "bg-card",
+        navbarMobileMenuRow: "bg-card",
+        navbar: "bg-card",
+        pageScrollBox: "bg-card",
+        footer: "border-border bg-card",
+        // Inputs
+        formFieldInput: "h-9 rounded-md border border-border bg-card shadow-xs placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
+        formFieldLabel: "text-sm font-medium text-foreground",
+        // Buttons
+        formButtonPrimary: "h-9 rounded-md bg-primary text-primary-foreground hover:bg-primary/80 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        socialButtonsBlockButton: "h-9 rounded-md border border-border bg-card shadow-xs hover:bg-muted focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        // Remove Clerk's default styling
+        button: {
+            '&[data-variant="solid"]::after': {
+                display: "none",
+            },
+        },
+        // Provider Icons
+        providerIcon__apple: "dark:invert",
+        providerIcon__github: "dark:invert",
+        providerIcon__okx_wallet: "dark:invert",
+        providerIcon__vercel: "dark:invert",
+        providerIcon__linear: "dark:invert",
+        providerIcon__notion: "dark:invert",
+        pricingTableCardTitle: "text-2xl font-semibold",
+    },
+});

package/out/components/scroll-area/ScrollBar.js

@@ -15,5 +15,5 @@ import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
 import cn from "../../cn";
 export default function ScrollBar(_a) {
     var { className, orientation = "vertical" } = _a, props = __rest(_a, ["className", "orientation"]);
-    return (_jsx(ScrollAreaPrimitive.Scrollbar, Object.assign({ "data-slot": "scroll-area-scrollbar", "data-orientation": orientation, orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", className) }, props, { children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) })));
+    return (_jsx(ScrollAreaPrimitive.Scrollbar, Object.assign({ "data-slot": "scroll-area-scrollbar", "data-orientation": orientation, orientation: orientation, className: cn("flex touch-none p-px select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent", "opacity-0 transition-opacity duration-300 ease-in-out data-hovering:opacity-100", className) }, props, { children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "scroll-area-thumb", className: "relative flex-1 rounded-full bg-border" }) })));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmdniels/uikit",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,10 @@
       "types": "./out/cn.d.ts",
       "import": "./out/cn.js"
     },
+    "./clerk": {
+      "types": "./out/clerk.d.ts",
+      "import": "./out/clerk.js"
+    },
     "./tailwind.css": "./tailwind.css"
   },
   "files": [
@@ -25,6 +29,7 @@
   ],
   "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"
@@ -50,6 +55,7 @@
     "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",