@alexgorbatchev/shadcn 0.0.54 → 0.0.55

package/README.md

@@ -198,10 +198,15 @@ An independent production Vite consumer installed from the archive verifies RTL
 | `ThemeProvider.defaultTheme` | `"light" \| "dark" \| "system"` | `"system"`                      | Initial preference when storage has no saved value.                    |
 | `ThemeProvider.storageKey`   | `string`                        | `"shadcn-alexgorbatchev-theme"` | Local storage key for the preference.                                  |
 | `ThemeProvider.forcedTheme`  | `"light" \| "dark"`             | unset                           | Overrides the displayed palette without changing the saved preference. |
+| `ThemeProvider.preset`       | `"devhost" \| "shadcn"`         | `"devhost"`                     | Document-wide design preset, independent of color mode and density.    |
 | `DensityProvider.density`    | `"compact" \| "comfortable"`    | `"comfortable"`                 | Density for descendants and their portals.                             |
 | Component `density`          | `"compact" \| "comfortable"`    | inherited                       | Local override on styled components that expose the prop.              |
 
-`useTheme()` returns `theme`, `resolvedTheme`, and `setTheme`. Call `setTheme("light")`, `setTheme("dark")`, or `setTheme("system")` from a component inside the provider.
+`useTheme()` returns `theme`, `resolvedTheme`, `setTheme`, and `preset`. Call `setTheme("light")`, `setTheme("dark")`, or `setTheme("system")` from a component inside the provider.
+
+Use `<ThemeProvider preset="shadcn" defaultTheme="system">` for the [default shadcn Neutral palette](https://ui.shadcn.com/docs/theming), system sans-serif text, and its rounded corner scale. The default `devhost` preset uses the package's monospace design and sharp corners. Both presets support light, dark, and system modes, including portaled content. Code retains the monospace font. Density, component composition, and package-specific status colors remain independent of the preset.
+
+The preset is controlled by the prop; changing it updates the document without changing the saved color-mode preference. Persist that prop in your application if needed. Storybook exposes the same choice in its **Design** toolbar. For a page styled before React mounts, set `data-theme-preset="shadcn"` and `data-theme="light"` or `"dark"` on `<html>` to match the provider. The existing `theme.css` import and `@source` setup cover both presets.
 
 Override tokens after the theme imports. This example uses the existing success palette as the primary accent:
 

package/THIRD_PARTY_NOTICES.md

@@ -14,6 +14,8 @@ Questionnaire adapts the official registry's fifteen styled parts around `@shadc
 
 ## shadcn/ui
 
+The `shadcn` design preset in `src/theme.css` adapts the default Neutral light/dark palette and radius scale from https://ui.shadcn.com/docs/theming, retrieved on 2026-10-31. It preserves the package's independent density and status tokens and uses document data attributes for selection. The upstream MIT notice below covers these tokens.
+
 Questionnaire's NativeChoiceKeyboard and ItemArrowNavigation Storybook interactions adapt the native choice-navigation and contextual horizontal-arrow browser tests from `packages/react/src/questionnaire/questionnaire.browser.test.tsx` at upstream commit `3d98900e9b73c45f035f8109e9d41ba6a51685e7` (https://github.com/shadcn-ui/ui). Local changes use this package's styled compositions, Storybook's play context and accessible queries, and assert unanswered-item guards, focus, selection and submitted answers. The upstream MIT notice below covers these adaptations.
 
 Sidebar adapts the official provider and styled parts, preserving custom render/ref contracts, keyboard toggling within each provider, consumer-owned persistence, and native mobile Sheet behavior. Local changes support density, cancelled toggle events, observation without controlled state, inert offcanvas panels, configured mobile widths, and centered icons with accessible collapsed labels. Separator uses Base UI's current orientation attributes, and Tooltip preserves native state callbacks.

package/dist/{chunk-d5pabsj2.js → chunk-aye7r5mq.js}

@@ -1111,13 +1111,15 @@ function StoredThemeProvider({
   children,
   defaultTheme = "system",
   storageKey = "shadcn-alexgorbatchev-theme",
-  forcedTheme
+  forcedTheme,
+  preset = "devhost"
 }) {
   const { isDarkMode, ternaryDarkMode, setTernaryDarkMode } = useTernaryDarkMode({
     defaultValue: defaultTheme,
     localStorageKey: storageKey
   });
   return /* @__PURE__ */ jsx12(ThemePalette, {
+    preset,
     theme: forcedTheme ?? ternaryDarkMode,
     resolvedTheme: forcedTheme ?? (isDarkMode ? "dark" : "light"),
     setTheme: setTernaryDarkMode,
@@ -1128,13 +1130,15 @@ function ThemePalette({
   children,
   theme,
   resolvedTheme,
-  setTheme
+  setTheme,
+  preset
 }) {
   useIsomorphicLayoutEffect(() => {
     document.documentElement.dataset.theme = resolvedTheme;
+    document.documentElement.dataset.themePreset = preset;
     document.documentElement.style.colorScheme = resolvedTheme;
-  }, [resolvedTheme]);
-  const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme]);
+  }, [resolvedTheme, preset]);
+  const value = useMemo(() => ({ theme, resolvedTheme, setTheme, preset }), [theme, resolvedTheme, setTheme, preset]);
   return /* @__PURE__ */ jsxs8(ThemeContext.Provider, {
     value,
     children: [
@@ -1147,7 +1151,8 @@ function ThemePalette({
 function ControlledThemeProvider({
   children,
   controlledTheme,
-  forcedTheme
+  forcedTheme,
+  preset = "devhost"
 }) {
   const isDark = useMediaQuery("(prefers-color-scheme: dark)");
   const { theme, setTheme } = controlledTheme;
@@ -1156,6 +1161,7 @@ function ControlledThemeProvider({
     theme: forcedTheme ?? theme,
     resolvedTheme,
     setTheme,
+    preset,
     children
   });
 }

package/dist/components/ThemeProvider.d.ts

@@ -1,7 +1,8 @@
 import { type ReactElement, type ReactNode } from "react";
-import type { IThemeContextValue, ResolvedTheme, ThemeMode } from "../theme/types.js";
+import type { IThemeContextValue, ResolvedTheme, ThemeMode, ThemePreset } from "../theme/types.js";
 export interface IThemeProviderProps {
     children: ReactNode;
+    preset?: ThemePreset;
     defaultTheme?: ThemeMode;
     storageKey?: string;
     forcedTheme?: ResolvedTheme;

package/dist/components/json-render/index.js

@@ -31,7 +31,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-d5pabsj2.js";
+} from "../../chunk-aye7r5mq.js";
 import {
   MenuPopup,
   MenuItem2,

package/dist/index.d.ts

@@ -47,7 +47,7 @@ export { ScrollGuard } from "./components/ScrollGuard.js";
 export type { IScrollGuardProps } from "./components/ScrollGuard.js";
 export type { IThemeProviderProps } from "./components/ThemeProvider.js";
 export { useTheme } from "./hooks/useTheme.js";
-export type { ThemeMode, ResolvedTheme, IThemeContextValue } from "./theme/types.js";
+export type { ThemeMode, ResolvedTheme, ThemePreset, IThemeContextValue } from "./theme/types.js";
 export { useComboboxAnchor } from "./hooks/useComboboxAnchor.js";
 export { cn } from "./utils/cn.js";
 export { Toggle, toggleVariants } from "./components/Toggle.js";

package/dist/index.js

@@ -171,7 +171,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-d5pabsj2.js";
+} from "./chunk-aye7r5mq.js";
 import {
   Tabs2,
   tabsListVariants2,

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.54",
+  version: "0.0.55",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {

package/dist/theme/types.d.ts

@@ -1,7 +1,9 @@
 import type { TernaryDarkMode } from "usehooks-ts";
 export type ThemeMode = TernaryDarkMode;
 export type ResolvedTheme = "light" | "dark";
+export type ThemePreset = "devhost" | "shadcn";
 export interface IThemeContextValue {
+    preset: ThemePreset;
     theme: ThemeMode;
     resolvedTheme: ResolvedTheme;
     setTheme: (theme: ThemeMode) => void;

package/dist/theme.css

@@ -46,16 +46,16 @@
   --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);
+  --font-mono: var(--ag-font-mono);
   --text-xs: var(--ag-text-xs);
   --text-sm: var(--ag-control-text);
   --text-base: var(--ag-text);
   --text-lg: var(--ag-heading);
-  --radius-xs: 2px;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 4px;
-  --radius-xl: 4px;
+  --radius-xs: var(--ag-radius-xs);
+  --radius-sm: var(--ag-radius-sm);
+  --radius-md: var(--ag-radius-md);
+  --radius-lg: var(--radius);
+  --radius-xl: var(--ag-radius-xl);
   --spacing-control: var(--ag-control-h);
   --spacing-control-xs: calc(var(--ag-control-h) - 4px);
   --spacing-control-sm: calc(var(--ag-control-h) - 2px);
@@ -74,7 +74,13 @@
 @layer base {
   :root {
     --ag-font: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --ag-font-mono:
+      "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     --radius: 4px;
+    --ag-radius-xs: 2px;
+    --ag-radius-sm: 2px;
+    --ag-radius-md: 4px;
+    --ag-radius-xl: 4px;
     --ag-text-xs: 11px;
     --ag-control-text: 12px;
     --ag-text: 14px;
@@ -205,6 +211,93 @@
     --ag-shadow: 0 6px 22px rgb(0 0 0 / 0.3);
   }
 
+  [data-theme-preset="shadcn"] {
+    --ag-font:
+      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --radius: 0.625rem;
+    --ag-radius-xs: calc(var(--radius) * 0.4);
+    --ag-radius-sm: calc(var(--radius) * 0.6);
+    --ag-radius-md: calc(var(--radius) * 0.8);
+    --ag-radius-xl: calc(var(--radius) * 1.4);
+    --faint-foreground: var(--muted-foreground);
+    --destructive-soft: color-mix(in oklab, var(--destructive) 15%, transparent);
+    --frame-edge: var(--border);
+    --frame-halo: transparent;
+    --terminal-background: var(--background);
+    --ag-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  }
+
+  [data-theme-preset="shadcn"],
+  [data-theme-preset="shadcn"][data-theme="dark"] {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.145 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+  }
+
+  [data-theme-preset="shadcn"][data-theme="light"] {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(1 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
   [data-density="comfortable"] {
     --ag-text-xs: 11px;
     --ag-control-text: 12px;

package/llms/components/providers/ThemeProvider.md

@@ -49,6 +49,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Shadcn
+
+```tsx
+{
+    globals: { preset: "shadcn", theme: "system" }
+}
+```
+
 ### ForcedLight
 
 ```tsx

package/llms/setup.md

@@ -198,10 +198,15 @@ An independent production Vite consumer installed from the archive verifies RTL
 | `ThemeProvider.defaultTheme` | `"light" \| "dark" \| "system"` | `"system"`                      | Initial preference when storage has no saved value.                    |
 | `ThemeProvider.storageKey`   | `string`                        | `"shadcn-alexgorbatchev-theme"` | Local storage key for the preference.                                  |
 | `ThemeProvider.forcedTheme`  | `"light" \| "dark"`             | unset                           | Overrides the displayed palette without changing the saved preference. |
+| `ThemeProvider.preset`       | `"devhost" \| "shadcn"`         | `"devhost"`                     | Document-wide design preset, independent of color mode and density.    |
 | `DensityProvider.density`    | `"compact" \| "comfortable"`    | `"comfortable"`                 | Density for descendants and their portals.                             |
 | Component `density`          | `"compact" \| "comfortable"`    | inherited                       | Local override on styled components that expose the prop.              |
 
-`useTheme()` returns `theme`, `resolvedTheme`, and `setTheme`. Call `setTheme("light")`, `setTheme("dark")`, or `setTheme("system")` from a component inside the provider.
+`useTheme()` returns `theme`, `resolvedTheme`, `setTheme`, and `preset`. Call `setTheme("light")`, `setTheme("dark")`, or `setTheme("system")` from a component inside the provider.
+
+Use `<ThemeProvider preset="shadcn" defaultTheme="system">` for the [default shadcn Neutral palette](https://ui.shadcn.com/docs/theming), system sans-serif text, and its rounded corner scale. The default `devhost` preset uses the package's monospace design and sharp corners. Both presets support light, dark, and system modes, including portaled content. Code retains the monospace font. Density, component composition, and package-specific status colors remain independent of the preset.
+
+The preset is controlled by the prop; changing it updates the document without changing the saved color-mode preference. Persist that prop in your application if needed. Storybook exposes the same choice in its **Design** toolbar. For a page styled before React mounts, set `data-theme-preset="shadcn"` and `data-theme="light"` or `"dark"` on `<html>` to match the provider. The existing `theme.css` import and `@source` setup cover both presets.
 
 Override tokens after the theme imports. This example uses the existing success palette as the primary accent:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {