@alexgorbatchev/shadcn 0.0.53 → 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-rc99vk8d.js → chunk-06ky09dc.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-en44w1pn.js";
 import {
   OptionSelect2
-} from "./chunk-xfryhw7e.js";
+} from "./chunk-p6z2m3zp.js";
 import {
   Badge2
 } from "./chunk-9t530p75.js";

package/dist/{chunk-yrp7xtb5.js → chunk-6j8ksqt9.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-bd09gygt.js";
 import {
   OptionSelect2
-} from "./chunk-xfryhw7e.js";
+} from "./chunk-p6z2m3zp.js";
 import {
   useAnalyticsCallback
 } from "./chunk-5mydsjp3.js";

package/dist/{chunk-5rxjvjkq.js → chunk-98s6zk9v.js}

@@ -24,7 +24,7 @@ import {
   TableHead2,
   TableCell2,
   TableCaption2
-} from "./chunk-tjn53x34.js";
+} from "./chunk-tmr0jqv8.js";
 import {
   safeHref
 } from "./chunk-xhtsnwnb.js";

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

@@ -117,7 +117,7 @@ import {
   SelectContent2,
   SelectItem2,
   OptionSelect2
-} from "./chunk-xfryhw7e.js";
+} from "./chunk-p6z2m3zp.js";
 import {
   ThemeContext
 } from "./chunk-1j2hz3w9.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/{chunk-k7cvfw0f.js → chunk-bmyw7q4w.js}

@@ -2,7 +2,7 @@ import {
   Table2,
   TableHeader2,
   TableBody2
-} from "./chunk-tjn53x34.js";
+} from "./chunk-tmr0jqv8.js";
 
 // src/components/virtual-table/VirtualTable.tsx
 import {

package/dist/{chunk-zs4h45d8.js → chunk-k45r2rz0.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk-bd09gygt.js";
 import {
   OptionSelect2
-} from "./chunk-xfryhw7e.js";
+} from "./chunk-p6z2m3zp.js";
 import {
   useAnalyticsCallback
 } from "./chunk-5mydsjp3.js";

package/dist/{chunk-xfryhw7e.js → chunk-p6z2m3zp.js}

@@ -183,7 +183,8 @@ function OptionSelect2({
   width = "fit",
   density,
   analytics,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedBy
 }) {
   return /* @__PURE__ */ jsxs2(Select2, {
     items: options,
@@ -201,6 +202,7 @@ function OptionSelect2({
       /* @__PURE__ */ jsx2(SelectTrigger2, {
         id,
         "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
         density,
         size,
         className: cn2(width === "full" && "w-full"),

package/dist/{chunk-tjn53x34.js → chunk-tmr0jqv8.js}

@@ -59,13 +59,15 @@ var visibilityClasses = {
   sm: "hidden sm:table-cell",
   lg: "hidden lg:table-cell",
   "container-sm": "hidden @min-[400px]/table:table-cell",
-  "container-md": "hidden @min-[480px]/table:table-cell"
+  "container-md": "hidden @min-[480px]/table:table-cell",
+  "container-lg": "hidden @min-[640px]/table:table-cell"
 };
 var columnVisibilityClasses = {
   sm: "hidden sm:table-column",
   lg: "hidden lg:table-column",
   "container-sm": "hidden @min-[400px]/table:table-column",
-  "container-md": "hidden @min-[480px]/table:table-column"
+  "container-md": "hidden @min-[480px]/table:table-column",
+  "container-lg": "hidden @min-[640px]/table:table-column"
 };
 function TableHead2({
   density,

package/dist/{chunk-p894n7r6.js → chunk-x7emg3jx.js}

@@ -10,10 +10,10 @@ import {
   TableCell2,
   TableColumnGroup2,
   TableColumn2
-} from "./chunk-tjn53x34.js";
+} from "./chunk-tmr0jqv8.js";
 import {
   OptionSelect2
-} from "./chunk-xfryhw7e.js";
+} from "./chunk-p6z2m3zp.js";
 import {
   Input2
 } from "./chunk-7vg045gd.js";

package/dist/components/OptionSelect.d.ts

@@ -22,8 +22,10 @@ type OptionSelectProps = IDensityProps & IAnalyticsProps & {
     /** `full` fills a form field; `fit` sits inline in a toolbar. */
     width?: "fit" | "full";
     "aria-label"?: string;
+    /** IDs of elements describing the select trigger. */
+    "aria-describedby"?: string;
 };
 /** A styled single-value `Select` for the common case of a flat list of options. */
-declare function OptionSelect({ options, value, defaultValue, onValueChange, placeholder, name, id, disabled, required, size, width, density, analytics, "aria-label": ariaLabel, }: OptionSelectProps): ReactElement;
+declare function OptionSelect({ options, value, defaultValue, onValueChange, placeholder, name, id, disabled, required, size, width, density, analytics, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: OptionSelectProps): ReactElement;
 export { OptionSelect };
 export type { OptionSelectOption, OptionSelectProps };

package/dist/components/Table.d.ts

@@ -14,7 +14,8 @@ declare function TableFooter({ density, className, ...props }: TableFooterProps)
 type TableRowProps = ComponentProps<"tr"> & IDensityProps;
 declare function TableRow({ density, className, ...props }: TableRowProps): ReactElement;
 type TableTextAlign = TextAlign;
-type TableVisibility = "sm" | "lg" | "container-sm" | "container-md";
+/** Viewport breakpoints, or table-container breakpoints at 400, 480, and 640 pixels. */
+type TableVisibility = "sm" | "lg" | "container-sm" | "container-md" | "container-lg";
 interface ITableCellOptions {
     truncate?: boolean;
     textAlign?: TableTextAlign;

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/assistant-ui/elements/DataTable.js

@@ -1,8 +1,8 @@
 import {
   DataTable2
-} from "../../../chunk-5rxjvjkq.js";
+} from "../../../chunk-98s6zk9v.js";
 import"../../../chunk-1wz92wgg.js";
-import"../../../chunk-tjn53x34.js";
+import"../../../chunk-tmr0jqv8.js";
 import"../../../chunk-k1f35j55.js";
 import"../../../chunk-m4geb1s5.js";
 import"../../../chunk-9t530p75.js";

package/dist/components/assistant-ui/index.js

@@ -203,8 +203,8 @@ import"../../chunk-1wz92wgg.js";
 import"../../chunk-9t530p75.js";
 import {
   DataTable2
-} from "../../chunk-5rxjvjkq.js";
-import"../../chunk-tjn53x34.js";
+} from "../../chunk-98s6zk9v.js";
+import"../../chunk-tmr0jqv8.js";
 import {
   DaySeparator2
 } from "../../chunk-3j9enr2q.js";

package/dist/components/assistant-ui/native/McpConfigDialog.js

@@ -1,11 +1,11 @@
 import {
   McpConfigDialog2
-} from "../../../chunk-rc99vk8d.js";
+} from "../../../chunk-06ky09dc.js";
 import"../../../chunk-m4geb1s5.js";
 import"../../../chunk-9t530p75.js";
 import"../../../chunk-m32ptxf3.js";
 import"../../../chunk-tcefvfr8.js";
-import"../../../chunk-xfryhw7e.js";
+import"../../../chunk-p6z2m3zp.js";
 import"../../../chunk-4t23yhc0.js";
 import"../../../chunk-7vg045gd.js";
 import"../../../chunk-7jpsybag.js";

package/dist/components/assistant-ui/native/index.js

@@ -133,12 +133,12 @@ import"../../../chunk-dyg4pwcd.js";
 import {
   DirectiveText2
 } from "../../../chunk-n8n3gp71.js";
-import"../../../chunk-xfryhw7e.js";
+import"../../../chunk-p6z2m3zp.js";
 import"../../../chunk-m32ptxf3.js";
 import"../../../chunk-52aadmkc.js";
 import {
   McpConfigDialog2
-} from "../../../chunk-rc99vk8d.js";
+} from "../../../chunk-06ky09dc.js";
 import"../../../chunk-ptdr68cq.js";
 import"../../../chunk-65xd5we6.js";
 import {

package/dist/components/calendar/index.js

@@ -10,8 +10,8 @@ import {
 import {
   Calendar2,
   CalendarDayButton2
-} from "../../chunk-yrp7xtb5.js";
-import"../../chunk-xfryhw7e.js";
+} from "../../chunk-6j8ksqt9.js";
+import"../../chunk-p6z2m3zp.js";
 import {
   Popover2,
   PopoverTrigger2,

package/dist/components/data-grid/index.js

@@ -7,8 +7,8 @@ import"../../chunk-jpvw9xqy.js";
 import {
   Button2
 } from "../../chunk-bd09gygt.js";
-import"../../chunk-tjn53x34.js";
-import"../../chunk-xfryhw7e.js";
+import"../../chunk-tmr0jqv8.js";
+import"../../chunk-p6z2m3zp.js";
 import"../../chunk-7jpsybag.js";
 import"../../chunk-7vg045gd.js";
 import {
@@ -19,7 +19,7 @@ import {
   DataGridColumnHeader2,
   DataGridFilter2,
   DataGridPagination2
-} from "../../chunk-p894n7r6.js";
+} from "../../chunk-x7emg3jx.js";
 import {
   Checkbox2
 } from "../../chunk-b5s5y5wq.js";

package/dist/components/gantt/index.js

@@ -7,7 +7,7 @@ import {
   DragSource2,
   DropTarget2,
   Kanban2
-} from "../../chunk-zs4h45d8.js";
+} from "../../chunk-k45r2rz0.js";
 import"../../chunk-en44w1pn.js";
 import"../../chunk-9t530p75.js";
 import"../../chunk-7ny0vyek.js";
@@ -20,7 +20,7 @@ import {
 } from "../../chunk-bd09gygt.js";
 import {
   OptionSelect2
-} from "../../chunk-xfryhw7e.js";
+} from "../../chunk-p6z2m3zp.js";
 import {
   Table2,
   TableHeader2,
@@ -28,7 +28,7 @@ import {
   TableRow2,
   TableHead2,
   TableCell2
-} from "../../chunk-tjn53x34.js";
+} from "../../chunk-tmr0jqv8.js";
 import"../../chunk-5mydsjp3.js";
 
 // src/components/gantt/Gantt.tsx

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

@@ -31,7 +31,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-zs390b72.js";
+} from "../../chunk-aye7r5mq.js";
 import {
   MenuPopup,
   MenuItem2,
@@ -99,7 +99,7 @@ import {
   Tabs2,
   TabsList2,
   TabsTrigger2
-} from "../../chunk-zs4h45d8.js";
+} from "../../chunk-k45r2rz0.js";
 import {
   Badge2
 } from "../../chunk-9t530p75.js";
@@ -113,7 +113,7 @@ import {
   SelectTrigger2,
   SelectContent2,
   SelectItem2
-} from "../../chunk-xfryhw7e.js";
+} from "../../chunk-p6z2m3zp.js";
 import"../../chunk-1j2hz3w9.js";
 import"../../chunk-k99h6evz.js";
 import {
@@ -145,7 +145,7 @@ import {
   TableHead2,
   TableCell2,
   TableCaption2
-} from "../../chunk-tjn53x34.js";
+} from "../../chunk-tmr0jqv8.js";
 import"../../chunk-7vnpp3ya.js";
 import"../../chunk-m4geb1s5.js";
 import"../../chunk-9ecf92s6.js";

package/dist/components/persian-calendar/index.js

@@ -11,8 +11,8 @@ import {
   getCalendarClassNames,
   CalendarDayButton2,
   CalendarDropdown
-} from "../../chunk-yrp7xtb5.js";
-import"../../chunk-xfryhw7e.js";
+} from "../../chunk-6j8ksqt9.js";
+import"../../chunk-p6z2m3zp.js";
 import {
   useAnalyticsCallback
 } from "../../chunk-5mydsjp3.js";

package/dist/components/virtual-data-grid/index.js

@@ -1,14 +1,14 @@
 import"../../chunk-en44w1pn.js";
 import {
   TableRow2
-} from "../../chunk-tjn53x34.js";
+} from "../../chunk-tmr0jqv8.js";
 import"../../chunk-7ny0vyek.js";
 import"../../chunk-8ssktt4b.js";
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-x90xmrba.js";
 import"../../chunk-jpvw9xqy.js";
 import"../../chunk-bd09gygt.js";
-import"../../chunk-xfryhw7e.js";
+import"../../chunk-p6z2m3zp.js";
 import"../../chunk-7jpsybag.js";
 import"../../chunk-7vg045gd.js";
 import {
@@ -16,10 +16,10 @@ import {
   DataGridHeaderRows,
   DataGridCells2,
   DataGridColumns
-} from "../../chunk-p894n7r6.js";
+} from "../../chunk-x7emg3jx.js";
 import {
   VirtualTable2
-} from "../../chunk-k7cvfw0f.js";
+} from "../../chunk-bmyw7q4w.js";
 import"../../chunk-5mydsjp3.js";
 
 // src/components/virtual-data-grid/VirtualDataGrid.tsx

package/dist/components/virtual-table/index.js

@@ -1,8 +1,8 @@
 import"../../chunk-en44w1pn.js";
-import"../../chunk-tjn53x34.js";
+import"../../chunk-tmr0jqv8.js";
 import {
   VirtualTable2
-} from "../../chunk-k7cvfw0f.js";
+} from "../../chunk-bmyw7q4w.js";
 export {
   VirtualTable2 as VirtualTable
 };

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-zs390b72.js";
+} from "./chunk-aye7r5mq.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -186,7 +186,7 @@ import {
   useDropTarget2,
   DropTarget2,
   Kanban2
-} from "./chunk-zs4h45d8.js";
+} from "./chunk-k45r2rz0.js";
 import {
   Toolbar2,
   ToolbarButton2,
@@ -260,7 +260,7 @@ import {
   TableColumnGroup2,
   TableColumn2,
   TableCaption2
-} from "./chunk-tjn53x34.js";
+} from "./chunk-tmr0jqv8.js";
 import {
   ScrollArea2,
   ScrollBar2
@@ -406,7 +406,7 @@ import {
   SelectScrollUpButton2,
   SelectScrollDownButton2,
   OptionSelect2
-} from "./chunk-xfryhw7e.js";
+} from "./chunk-p6z2m3zp.js";
 import {
   Dialog2,
   DialogTrigger2,

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.53",
+  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/data-display/TableResponsive.md

@@ -0,0 +1,34 @@
+# TableResponsive
+
+Story: @alexgorbatchev/shadcn/components/data-display/TableResponsive
+Source: src/components/stories/data-display/TableResponsive.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/TableResponsive.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Table } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+Table
+```
+
+## Default render
+
+```tsx
+() => <ResponsiveTablesExample />
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### ContainerBoundaries
+
+```tsx
+{}
+```

package/llms/components/forms/OptionSelect.md

@@ -14,7 +14,7 @@ import { Button, OptionSelect } from "@alexgorbatchev/shadcn";
 ## Supporting imports
 
 ```tsx
-import { useState } from "react";
+import { useId, useState } from "react";
 ```
 
 ## Default component
@@ -63,6 +63,20 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### DescribedTrigger
+
+```tsx
+{
+    render: function DescribedTrigger(args) {
+        const descriptionId = useId();
+        return (<>
+        <OptionSelect {...args} aria-describedby={descriptionId}/>
+        <p id={descriptionId}>Choose the runtime used for this project.</p>
+      </>);
+    }
+}
+```
+
 ### Controlled
 
 ```tsx

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/llms.txt

@@ -349,6 +349,7 @@ Generated from the public package exports and Storybook sources.
 - [StatCard](./llms/components/data-display/StatCard.md)
 - [StatusTracker](./llms/components/data-display/StatusTracker.md)
 - [Table](./llms/components/data-display/Table.md)
+- [TableResponsive](./llms/components/data-display/TableResponsive.md)
 - [Text](./llms/components/data-display/Text.md): Text renders body copy as a paragraph with semantic `size` (xs, sm, base, lg), `tone` (default, muted, faint, primary, success, warning, destructive), `weight`, and `align`. `truncate` keeps one line with an ellipsis; otherwise long words wrap. `tabular` aligns digits. Use `render={<span />}` for inline text, or another element such as `<li />` or `<time />`.
 - [VirtualDataGrid](./llms/components/data-display/VirtualDataGrid.md)
 - [VirtualTable](./llms/components/data-display/VirtualTable.md)

package/package.json

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