@alexgorbatchev/shadcn 0.0.17 → 0.0.19

package/dist/theme.css

@@ -32,14 +32,14 @@
   --color-frame-halo: var(--frame-halo);
   --color-backdrop: var(--backdrop);
   --color-terminal-background: var(--terminal-background);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar: var(--sidebar, var(--background));
+  --color-sidebar-foreground: var(--sidebar-foreground, var(--foreground));
+  --color-sidebar-primary: var(--sidebar-primary, var(--primary));
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground, var(--primary-foreground));
+  --color-sidebar-accent: var(--sidebar-accent, var(--accent));
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground, var(--accent-foreground));
+  --color-sidebar-border: var(--sidebar-border, var(--border));
+  --color-sidebar-ring: var(--sidebar-ring, var(--ring));
   --font-sans: var(--ag-font);
   --font-mono: var(--ag-font);
   --text-xs: var(--ag-text-xs);
@@ -68,14 +68,6 @@
   :root {
     --ag-font: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     --radius: 4px;
-    --sidebar: var(--background);
-    --sidebar-foreground: var(--foreground);
-    --sidebar-primary: var(--primary);
-    --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: var(--accent);
-    --sidebar-accent-foreground: var(--accent-foreground);
-    --sidebar-border: var(--border);
-    --sidebar-ring: var(--ring);
     --ag-text-xs: 11px;
     --ag-control-text: 12px;
     --ag-text: 14px;
@@ -191,6 +183,8 @@
   }
 
   [data-density="comfortable"] {
+    --ag-text-xs: 11px;
+    --ag-control-text: 12px;
     --ag-text: 14px;
     --ag-heading: 18px;
     --ag-leading: 1.65;
@@ -205,6 +199,8 @@
   }
 
   [data-density="compact"] {
+    --ag-text-xs: 11px;
+    --ag-control-text: 12px;
     --ag-text: 12px;
     --ag-heading: 13px;
     --ag-leading: 1.35;
@@ -226,6 +222,44 @@
     @apply bg-background text-foreground font-sans text-base;
   }
 
+  @media (forced-colors: none) {
+    @supports selector(::-webkit-scrollbar) {
+      ::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+      }
+
+      ::-webkit-scrollbar-track,
+      ::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        min-width: 24px;
+        min-height: 24px;
+        border: 2px solid transparent;
+        border-radius: 999px;
+        background: var(--input);
+        background-clip: padding-box;
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--muted-foreground);
+      }
+
+      ::-webkit-scrollbar-button {
+        display: none;
+      }
+    }
+
+    @supports not selector(::-webkit-scrollbar) {
+      * {
+        scrollbar-width: thin;
+        scrollbar-color: var(--input) transparent;
+      }
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
@@ -452,3 +486,45 @@
     --scroll-fade-b: var(--_scroll-fade-size-b);
   }
 }
+
+/* Pointer-following border highlight and surface glow. useCardSpotlight writes --card-spotlight-x/y while the
+   pointer is inside the card; without them both gradients sit off-screen and the frame shows the plain border. */
+@utility card-spotlight {
+  @media (forced-colors: none) {
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    background-image:
+      linear-gradient(var(--card), var(--card)),
+      radial-gradient(
+        240px circle at var(--card-spotlight-x, -999px) var(--card-spotlight-y, -999px),
+        color-mix(in oklab, var(--primary) 75%, transparent),
+        transparent 70%
+      ),
+      linear-gradient(var(--border), var(--border));
+    background-origin: border-box;
+    background-clip: padding-box, border-box, border-box;
+
+    &::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      border-radius: inherit;
+      pointer-events: none;
+      background: radial-gradient(
+        420px circle at var(--card-spotlight-x, -999px) var(--card-spotlight-y, -999px),
+        color-mix(in oklab, var(--primary) 9%, transparent),
+        transparent 45%
+      );
+      opacity: 0;
+      transition: opacity 350ms ease-out;
+    }
+
+    @media (hover: hover) {
+      &:hover::before {
+        opacity: 1;
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1000,7 +1000,7 @@
   },
   "scripts": {
     "test": "vitest run --config .storybook/vitest.config.ts && bun run test:native && bun run test:package",
-    "test:package": "bun run build && bun test scripts/__tests__",
+    "test:package": "bun run build && bun test scripts/__tests__ ./.storybook/__tests__/createStorybookViteConfig.test.ts",
     "test:preview": "bun test scripts/storybookPreview.test.ts",
     "test:native": "vitest run --config .storybook/vitest.native.config.ts",
     "test:coverage": "vitest run --config .storybook/vitest.coverage.config.ts --coverage",
@@ -1013,7 +1013,7 @@
     "build-storybook": "storybook build",
     "prepack": "bun run build",
     "test:reduced-motion": "vitest run --config .storybook/vitest.reduced-motion.config.ts",
-    "test:visual": "vitest run --config .storybook/vitest.visual.config.ts Button.stories.tsx Badge.stories.tsx Card.stories.tsx Input.stories.tsx",
+    "test:visual": "vitest run --config .storybook/vitest.visual.config.ts Button.stories.tsx Badge.stories.tsx Card.stories.tsx Input.stories.tsx ScrollArea.stories.tsx",
     "test:visual:update": "bun run test:visual --update"
   },
   "dependencies": {

package/dist/chunk-fqekyjkh.js

@@ -1,65 +0,0 @@
-import {
-  cn2
-} from "./chunk-cp2m7y7v.js";
-
-// src/components/Card.tsx
-import { jsx } from "react/jsx-runtime";
-function Card2({ density, className, size = "default", ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card",
-    "data-size": size,
-    className: cn2("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-md bg-card py-(--card-spacing) text-sm text-card-foreground border border-border [--card-spacing:var(--ag-panel-padding)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--ag-panel-padding-sm)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md", className),
-    ...props
-  });
-}
-function CardHeader2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card-header",
-    className: cn2("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-md px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className),
-    ...props
-  });
-}
-function CardTitle2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card-title",
-    className: cn2("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className),
-    ...props
-  });
-}
-function CardDescription2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card-description",
-    className: cn2("text-sm text-muted-foreground", className),
-    ...props
-  });
-}
-function CardAction2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card-action",
-    className: cn2("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
-    ...props
-  });
-}
-function CardContent2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card-content",
-    className: cn2("px-(--card-spacing)", className),
-    ...props
-  });
-}
-function CardFooter2({ density, className, ...props }) {
-  return /* @__PURE__ */ jsx("div", {
-    "data-density": density,
-    "data-slot": "card-footer",
-    className: cn2("flex items-center rounded-b-md border-t bg-muted/50 p-(--card-spacing)", className),
-    ...props
-  });
-}
-
-export { Card2, CardHeader2, CardTitle2, CardDescription2, CardAction2, CardContent2, CardFooter2 };