@alexgorbatchev/shadcn 0.0.58 → 0.0.60

package/README.md

@@ -275,7 +275,7 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 | Conversations            | Attachment, Bubble, Marker, Message, MessageScroller                                                                                                                                          |
 | App configuration        | DensityProvider, DirectionProvider, ThemeProvider                                                                                                                                             |
 
-Use the composed parts exported from the package root, such as `DialogTrigger`, `DialogContent`, and `DialogTitle`. Storybook provides working compositions, variants, disabled states, and action callbacks. The local preview starts with `bun run storybook` and binds to `127.0.0.1:6006`.
+Use the composed parts exported from the package root, such as `DialogTrigger`, `DialogContent`, and `DialogTitle`. Storybook provides working compositions, variants, disabled states, and action callbacks. The local preview starts with `just storybook` and binds to `127.0.0.1:6006`.
 
 Set `wrap` on `ItemTitle` to keep complete titles visible in narrow items, including long names without spaces. The default title presentation remains unchanged.
 
@@ -329,7 +329,7 @@ Use the Theme toolbar to select light, dark, or system palettes; Docs and exampl
 
 `Carousel` supports horizontal, vertical, and right-to-left navigation. Focus its named region to use the arrow keys; arrow keys inside slide inputs retain their input behavior. Supply `opts` and `plugins` for carousel configuration, and `setApi` to receive its API. Reduced-motion preference disables programmatic slide animation.
 
-Compose `ChartContainer`, `ChartTooltip`, and `ChartLegend` with Recharts components. Import the chart parts from `@alexgorbatchev/shadcn/chart` and install its peers listed above. Give the container a height or aspect ratio; `ChartConfig` supplies series labels, icons, and either one color or light/dark colors. Use semantic values such as `var(--primary)` and keep `accessibilityLayer` enabled for keyboard tooltips. Use `labelKey` and `nameKey` for custom tooltip data, and legend content's `nameKey` for custom legend labels. Keep series selection in application state; the tooltip's `defaultIndex` only sets its initial state.
+Compose `ChartContainer`, `ChartTooltip`, and `ChartLegend` with Recharts components. Import the chart parts from `@alexgorbatchev/shadcn/chart` and install its peers listed above. The container keeps a 16:9 aspect ratio by default; give it `height` (such as `192` or `"12rem"`) to fill the available width at that height instead. `ChartConfig` supplies series labels, icons, and either one color or light/dark colors. Use semantic values such as `var(--primary)` and keep `accessibilityLayer` enabled for keyboard tooltips. Use `labelKey` and `nameKey` for custom tooltip data, and legend content's `nameKey` for custom legend labels. Keep series selection in application state; the tooltip's `defaultIndex` only sets its initial state.
 
 Supply HTML attributes and refs to tooltip or legend content through `htmlProps`; Recharts injects its own chart props into those content components, so those props do not go to the DOM. An `onClick` legend callback renders keyboard-accessible buttons. Omit the tooltip's `portal` prop for native floating positioning; custom portal targets own their positioning through the native `wrapperStyle` API. Tooltip and legend content preserve chart density, direction and configured colors through portals. A container's `dir` overrides DirectionProvider context, and content's `htmlProps.dir` overrides the chart direction. Reverse Recharts' `XAxis` explicitly for RTL data ordering; native keyboard movement follows that axis. See the [Chart guide](https://ui.shadcn.com/docs/components/base/chart).
 

package/dist/{chunk-ddbc17b4.js → chunk-6fvcqd48.js}

@@ -74,6 +74,8 @@ function Chart3({
   children,
   config,
   initialDimension = { width: 320, height: 200 },
+  height,
+  style,
   ...props
 }) {
   const uniqueId = useId();
@@ -89,7 +91,8 @@ function Chart3({
       "data-density": resolvedDensity,
       "data-slot": "chart",
       "data-chart": chartId,
-      className: cn2("flex aspect-video min-w-0 justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+      className: cn2("flex aspect-video min-w-0 justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", height !== undefined && "aspect-auto w-full", className),
+      style: height === undefined ? style : { ...style, height },
       ...props,
       children: [
         /* @__PURE__ */ jsx2(ChartStyle2, {

package/dist/{chunk-nrdc4t48.js → chunk-6grp5fhy.js}

@@ -12,7 +12,7 @@ import {
   Chart3,
   ChartTooltipContent2,
   ChartTooltip2
-} from "./chunk-ddbc17b4.js";
+} from "./chunk-6fvcqd48.js";
 import {
   take
 } from "./chunk-v8ks0cfq.js";

package/dist/components/assistant-ui/elements/Chart.js

@@ -1,8 +1,8 @@
 import {
   Chart2
-} from "../../../chunk-nrdc4t48.js";
+} from "../../../chunk-6grp5fhy.js";
 import"../../../chunk-k1f35j55.js";
-import"../../../chunk-ddbc17b4.js";
+import"../../../chunk-6fvcqd48.js";
 import"../../../chunk-tcefvfr8.js";
 import"../../../chunk-jpvw9xqy.js";
 import"../../../chunk-e6hk39ev.js";

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

@@ -53,10 +53,10 @@ import {
   CanvasSplitLine2
 } from "../../chunk-424xrf3x.js";
 import"../../chunk-tcefvfr8.js";
-import"../../chunk-ddbc17b4.js";
+import"../../chunk-6fvcqd48.js";
 import {
   Chart2
-} from "../../chunk-nrdc4t48.js";
+} from "../../chunk-6grp5fhy.js";
 import"../../chunk-7vg045gd.js";
 import"../../chunk-er6e5fj8.js";
 import"../../chunk-rxjxb4vy.js";

package/dist/components/chart/Chart.d.ts

@@ -2,7 +2,7 @@ import type { ReactElement } from "react";
 import type { ChartProps, ChartTooltipContentProps, ChartLegendContentProps } from "./types.js";
 import { Tooltip } from "recharts";
 import { ChartStyle } from "./ChartStyle.js";
-declare function Chart({ id, dir, density, className, children, config, initialDimension, ...props }: ChartProps): ReactElement;
+declare function Chart({ id, dir, density, className, children, config, initialDimension, height, style, ...props }: ChartProps): ReactElement;
 declare function ChartTooltipContent({ density, active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, valueFormatter, labelClassName, formatter, color, nameKey, labelKey, htmlProps, contentStyle, itemStyle, labelStyle, wrapperClassName, itemSorter, }: ChartTooltipContentProps): ReactElement | null;
 declare function ChartLegendContent({ density, className, hideIcon, payload, verticalAlign, nameKey, onClick, onMouseEnter, onMouseLeave, formatter, htmlProps, labelStyle, inactiveColor, }: ChartLegendContentProps): ReactElement | null;
 declare const ChartTooltip: typeof Tooltip;

package/dist/components/chart/index.js

@@ -9,7 +9,7 @@ import {
   ChartLegendContent2,
   ChartTooltip2,
   ChartLegend2
-} from "../../chunk-ddbc17b4.js";
+} from "../../chunk-6fvcqd48.js";
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-en44w1pn.js";
 import"../../chunk-jpvw9xqy.js";

package/dist/components/chart/types.d.ts

@@ -22,6 +22,8 @@ export type ChartProps = ComponentProps<"div"> & IDensityProps & {
     config: ChartConfig;
     children: ComponentProps<typeof ResponsiveContainer>["children"];
     initialDimension?: ComponentProps<typeof ResponsiveContainer>["initialDimension"];
+    /** A fixed height, such as `192` or `"12rem"`; the chart then fills the available width instead of keeping 16:9. */
+    height?: CSSProperties["height"];
 };
 export type ChartStyleProps = {
     id: string;

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.58",
+  version: "0.0.60",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {
@@ -3105,25 +3105,6 @@ var package_default = {
     access: "public",
     registry: "https://registry.npmjs.org/"
   },
-  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__ ./.storybook/__tests__/createStorybookViteConfig.test.ts",
-    "test:preview": "bun test scripts/storybookPreview.test.ts",
-    "test:prototype": "bun test --config=./cli/bunfig.toml --coverage cli && vitest run --config .storybook/vitest.prototype.config.ts --coverage",
-    "test:native": "vitest run --config .storybook/vitest.native.config.ts",
-    "test:coverage": "vitest run --config .storybook/vitest.coverage.config.ts --coverage",
-    "test:contrast": "vitest run --config .storybook/vitest.contrast.config.ts",
-    build: "bun scripts/build.ts",
-    typecheck: "tsc --noEmit",
-    lint: "oxlint --deny-warnings src .storybook scripts cli templates/prototype/src templates/prototype/vite.config.ts && oxfmt --check . && bun run lint:unused",
-    "lint:unused": "ts-unused check tsconfig.json",
-    storybook: "bun scripts/buildLlmDocs.ts && storybook dev --host 127.0.0.1 -p 6006 --no-open",
-    "build-storybook": "bun scripts/buildLlmDocs.ts && 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 ScrollArea.stories.tsx",
-    "test:visual:update": "bun run test:visual --update"
-  },
   devDependencies: {
     "@assistant-ui/ai-sdk": "0.0.14",
     "@assistant-ui/generative-ui": "0.0.6",
@@ -3187,6 +3168,7 @@ var package_default = {
     "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "^8.6.0",
     "es-toolkit": "1.52.0",
+    execa: "10.2.1",
     "heat-graph": "0.0.25",
     "input-otp": "1.5.0",
     leaflet: "^1.9.4",
@@ -3195,7 +3177,7 @@ var package_default = {
     oxfmt: "^0.72.0",
     oxlint: "^1.87.0",
     "parse-diff": "0.12.0",
-    playwright: "^1.64.0",
+    playwright: "1.64.1",
     "react-big-calendar": "1.20.0",
     "react-colorful": "5.8.1",
     "react-dropzone": "20.1.4",
@@ -3577,28 +3559,55 @@ async function runWorkspace(directory, action, port) {
 
 // cli/createProgram.ts
 function createProgram(options) {
+  const width = Number.isFinite(options.width) && options.width >= 1 ? Math.floor(options.width) : 100;
   const program = new Command("shadcn-prototype").description("Create and preview editable React mockups.").version(package_default.version).exitOverride().showHelpAfterError();
   program.configureOutput({ writeOut: options.writeOut, writeErr: options.writeErr });
   program.configureHelp({
+    helpWidth: width,
+    minWidthToWrap: 1,
+    displayWidth: Bun.stringWidth,
     formatHelp(command, helper) {
-      const lines = [`Usage: ${helper.commandUsage(command)}`, "", command.description(), "", "Options:"];
-      for (const option of helper.visibleOptions(command))
-        lines.push(`  ${option.flags}  ${option.description}`);
+      const wrap = (text) => options.isAgent ? text : helper.boxWrap(text, width);
+      const formatItem = (term, description, prefix = "  ", continuation = "  ") => {
+        const prefixWidth = helper.displayWidth(prefix);
+        const descriptionColumn = Math.max(prefixWidth + 2, Math.min(45, Math.floor(width / 2)));
+        const termWidth = descriptionColumn - 4;
+        const connect = (line) => continuation + line.slice(continuation.length);
+        if (prefixWidth + helper.displayWidth(term) + 2 > descriptionColumn) {
+          const wrappedTerm = helper.boxWrap(term, Math.max(1, width - prefixWidth)).split(`
+`).map((line, index) => `${index === 0 ? prefix : continuation}${line}`).join(`
+`);
+          if (!description)
+            return wrappedTerm;
+          const wrappedDescription = helper.formatItem("", termWidth, description, helper).split(`
+`).map(connect);
+          return [wrappedTerm, ...wrappedDescription].join(`
+`);
+        }
+        return helper.formatItem(`${prefix.slice(2)}${term}`, termWidth, description, helper).split(`
+`).map((line, index) => index === 0 ? line : connect(line)).join(`
+`);
+      };
+      const lines = [wrap(`Usage: ${helper.commandUsage(command)}`), "", wrap(command.description()), "", "Options:"];
+      for (const option of helper.visibleOptions(command)) {
+        lines.push(options.isAgent ? `  ${option.flags}  ${option.description}` : formatItem(option.flags, option.description));
+      }
       const visit = (parent, prefix) => {
         const commands = helper.visibleCommands(parent);
         for (const [index, child] of commands.entries()) {
           const isLast = index === commands.length - 1;
           const marker = options.isAgent ? "- " : isLast ? "\u2570\u2500 " : "\u251C\u2500 ";
-          const name = `${prefix}${marker}${helper.subcommandTerm(child)}`;
-          lines.push(options.isAgent ? `${name}: ${child.description()}` : `${name.padEnd(44)} ${child.description()}`);
-          visit(child, `${prefix}${options.isAgent ? "  " : isLast ? "   " : "\u2502  "}`);
+          const term = helper.subcommandTerm(child);
+          const continuation = `${prefix}${options.isAgent ? "  " : isLast ? "   " : "\u2502  "}`;
+          lines.push(options.isAgent ? `${prefix}${marker}${term}: ${child.description()}` : formatItem(term, child.description(), `${prefix}${marker}`, continuation));
+          visit(child, continuation);
         }
       };
       if (command.commands.length) {
         lines.push("", "Commands:");
         visit(command, "  ");
       }
-      const body = lines.map((line) => !options.isAgent && line.length > options.width ? `${line.slice(0, Math.max(0, options.width - 3))}...` : line).join(`
+      const body = lines.join(`
 `) + `
 `;
       return options.isAgent ? "ALERT: Agents must read `AGENT=1 shadcn-prototype skill` before using this tool.\n" + body : body;

package/llms/components/data-display/Chart.md

@@ -113,6 +113,27 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### FixedHeight
+
+```tsx
+{
+    args: { className: undefined, height: 192 },
+    render: function Render(args) {
+        const [isWide, setWide] = useState(false);
+        return (<>
+        <Button onClick={() => setWide(!isWide)}>Resize chart</Button>
+        <div className={isWide ? "w-96" : "w-64"}>
+          <ChartContainer {...args}>
+            <BarChart accessibilityLayer data={data}>
+              <Bar dataKey="desktop" fill="var(--color-desktop)" isAnimationActive={false}/>
+            </BarChart>
+          </ChartContainer>
+        </div>
+      </>);
+    }
+}
+```
+
 ### ResponsiveGrid
 
 ```tsx

package/llms/setup.md

@@ -275,7 +275,7 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 | Conversations            | Attachment, Bubble, Marker, Message, MessageScroller                                                                                                                                          |
 | App configuration        | DensityProvider, DirectionProvider, ThemeProvider                                                                                                                                             |
 
-Use the composed parts exported from the package root, such as `DialogTrigger`, `DialogContent`, and `DialogTitle`. Storybook provides working compositions, variants, disabled states, and action callbacks. The local preview starts with `bun run storybook` and binds to `127.0.0.1:6006`.
+Use the composed parts exported from the package root, such as `DialogTrigger`, `DialogContent`, and `DialogTitle`. Storybook provides working compositions, variants, disabled states, and action callbacks. The local preview starts with `just storybook` and binds to `127.0.0.1:6006`.
 
 Set `wrap` on `ItemTitle` to keep complete titles visible in narrow items, including long names without spaces. The default title presentation remains unchanged.
 
@@ -329,7 +329,7 @@ Use the Theme toolbar to select light, dark, or system palettes; Docs and exampl
 
 `Carousel` supports horizontal, vertical, and right-to-left navigation. Focus its named region to use the arrow keys; arrow keys inside slide inputs retain their input behavior. Supply `opts` and `plugins` for carousel configuration, and `setApi` to receive its API. Reduced-motion preference disables programmatic slide animation.
 
-Compose `ChartContainer`, `ChartTooltip`, and `ChartLegend` with Recharts components. Import the chart parts from `@alexgorbatchev/shadcn/chart` and install its peers listed above. Give the container a height or aspect ratio; `ChartConfig` supplies series labels, icons, and either one color or light/dark colors. Use semantic values such as `var(--primary)` and keep `accessibilityLayer` enabled for keyboard tooltips. Use `labelKey` and `nameKey` for custom tooltip data, and legend content's `nameKey` for custom legend labels. Keep series selection in application state; the tooltip's `defaultIndex` only sets its initial state.
+Compose `ChartContainer`, `ChartTooltip`, and `ChartLegend` with Recharts components. Import the chart parts from `@alexgorbatchev/shadcn/chart` and install its peers listed above. The container keeps a 16:9 aspect ratio by default; give it `height` (such as `192` or `"12rem"`) to fill the available width at that height instead. `ChartConfig` supplies series labels, icons, and either one color or light/dark colors. Use semantic values such as `var(--primary)` and keep `accessibilityLayer` enabled for keyboard tooltips. Use `labelKey` and `nameKey` for custom tooltip data, and legend content's `nameKey` for custom legend labels. Keep series selection in application state; the tooltip's `defaultIndex` only sets its initial state.
 
 Supply HTML attributes and refs to tooltip or legend content through `htmlProps`; Recharts injects its own chart props into those content components, so those props do not go to the DOM. An `onClick` legend callback renders keyboard-accessible buttons. Omit the tooltip's `portal` prop for native floating positioning; custom portal targets own their positioning through the native `wrapperStyle` API. Tooltip and legend content preserve chart density, direction and configured colors through portals. A container's `dir` overrides DirectionProvider context, and content's `htmlProps.dir` overrides the chart direction. Reverse Recharts' `XAxis` explicitly for RTL data ordering; native keyboard movement follows that axis. See the [Chart guide](https://ui.shadcn.com/docs/components/base/chart).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1054,25 +1054,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "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__ ./.storybook/__tests__/createStorybookViteConfig.test.ts",
-    "test:preview": "bun test scripts/storybookPreview.test.ts",
-    "test:prototype": "bun test --config=./cli/bunfig.toml --coverage cli && vitest run --config .storybook/vitest.prototype.config.ts --coverage",
-    "test:native": "vitest run --config .storybook/vitest.native.config.ts",
-    "test:coverage": "vitest run --config .storybook/vitest.coverage.config.ts --coverage",
-    "test:contrast": "vitest run --config .storybook/vitest.contrast.config.ts",
-    "build": "bun scripts/build.ts",
-    "typecheck": "tsc --noEmit",
-    "lint": "oxlint --deny-warnings src .storybook scripts cli templates/prototype/src templates/prototype/vite.config.ts && oxfmt --check . && bun run lint:unused",
-    "lint:unused": "ts-unused check tsconfig.json",
-    "storybook": "bun scripts/buildLlmDocs.ts && storybook dev --host 127.0.0.1 -p 6006 --no-open",
-    "build-storybook": "bun scripts/buildLlmDocs.ts && 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 ScrollArea.stories.tsx",
-    "test:visual:update": "bun run test:visual --update"
-  },
   "devDependencies": {
     "@assistant-ui/ai-sdk": "0.0.14",
     "@assistant-ui/generative-ui": "0.0.6",
@@ -1136,6 +1117,7 @@
     "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "^8.6.0",
     "es-toolkit": "1.52.0",
+    "execa": "10.2.1",
     "heat-graph": "0.0.25",
     "input-otp": "1.5.0",
     "leaflet": "^1.9.4",
@@ -1144,7 +1126,7 @@
     "oxfmt": "^0.72.0",
     "oxlint": "^1.87.0",
     "parse-diff": "0.12.0",
-    "playwright": "^1.64.0",
+    "playwright": "1.64.1",
     "react-big-calendar": "1.20.0",
     "react-colorful": "5.8.1",
     "react-dropzone": "20.1.4",