@alexgorbatchev/shadcn 0.0.59 → 0.0.61

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/{chunk-zwnba1pb.js → chunk-hz08pzsc.js}

@@ -4151,9 +4151,10 @@ function BarList2({
             value: item.value,
             "aria-label": item.label,
             format: { maximumFractionDigits: 2 },
+            className: "gap-y-1",
             children: [
               /* @__PURE__ */ jsxs29("div", {
-                className: "mb-1 flex items-center justify-between gap-3 text-sm",
+                className: "flex w-full items-center justify-between gap-3 text-sm",
                 children: [
                   /* @__PURE__ */ jsx44(MeterLabel2, {
                     children: onItemSelect ? /* @__PURE__ */ jsx44(Button2, {

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/components/json-render/index.js

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

package/dist/index.js

@@ -171,7 +171,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-zwnba1pb.js";
+} from "./chunk-hz08pzsc.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.59",
+  version: "0.0.61",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {
@@ -3105,26 +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": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts package",
-    "test:preview": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts preview",
-    "test:prototype": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts prototype",
-    "test:cli": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts cli",
-    "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": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts storybook",
-    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",
@@ -3197,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",

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

@@ -41,6 +41,14 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### Layout
+
+```tsx
+{
+    args: { onItemSelect: undefined }
+}
+```
+
 ### Empty
 
 ```tsx

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.59",
+  "version": "0.0.61",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {
@@ -1054,26 +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": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts package",
-    "test:preview": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts preview",
-    "test:prototype": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts prototype",
-    "test:cli": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts cli",
-    "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": "NODE_DISABLE_COMPILE_CACHE=1 bun scripts/runTestSuite.ts storybook",
-    "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",
@@ -1146,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",