@alexgorbatchev/shadcn 0.0.24 → 0.0.26

package/dist/components/ButtonGroup.d.ts

@@ -4,10 +4,11 @@ import { useRender } from "@base-ui/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 import { Separator } from "./Separator.js";
 declare const buttonGroupVariants: (props?: ({
+    layout?: "content" | "equal" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ButtonGroupProps = ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & IDensityProps;
-declare function ButtonGroup({ density, className, orientation, ...props }: ButtonGroupProps): ReactElement;
+declare function ButtonGroup({ density, className, orientation, layout, ...props }: ButtonGroupProps): ReactElement;
 type ButtonGroupTextProps = useRender.ComponentProps<"div"> & IDensityProps;
 declare function ButtonGroupText({ density, className, render, ...props }: ButtonGroupTextProps): ReactElement;
 declare function ButtonGroupSeparator({ density, className, orientation, ...props }: ComponentProps<typeof Separator>): ReactElement;

package/dist/components/tree/TreeItem.d.ts

@@ -13,7 +13,7 @@ type TreeItemProps<T> = useRender.ComponentProps<"div", TreeItemState> & IDensit
     item: ItemInstance<T>;
     startEnhancer?: ReactNode;
     endEnhancer?: ReactNode;
-    expandOn?: "click" | "doubleClick";
+    expandOn?: "click" | "doubleClick" | "disclosure";
     isEditing?: boolean;
     isDropTarget?: boolean;
 };

package/dist/components/tree/index.js

@@ -1,6 +1,9 @@
 import {
   cn2
 } from "../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-btz12z1j.js";
 
 // src/components/tree/TreeItem.tsx
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -60,13 +63,13 @@ function TreeItem({
         event.preventDefault();
         item.getTree().setSelectedItems?.([item.getId()]);
         item.primaryAction();
-        if (expandOn === "doubleClick" && item.isFolder())
+        if (expandOn !== "click" && item.isFolder())
           toggle();
       },
-      ...expandOn === "doubleClick" ? {
+      ...expandOn !== "click" ? {
         onClick: select,
         onDoubleClick: (event) => {
-          if (!isRowControl(event) && item.isFolder())
+          if (expandOn === "doubleClick" && !isRowControl(event) && item.isFolder())
             toggle();
         }
       } : {},
@@ -81,11 +84,25 @@ function TreeItem({
       className: cn2("relative flex min-h-control min-w-0 cursor-default items-center gap-2 rounded-sm py-1 pr-2 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring", (isSelected || isDropTarget || isInsideTarget) && "bg-accent text-accent-foreground"),
       children: /* @__PURE__ */ jsxs(Fragment, {
         children: [
-          item.isFolder() ? /* @__PURE__ */ jsx(ChevronRightIcon, {
+          item.isFolder() && expandOn === "disclosure" ? /* @__PURE__ */ jsx(Button2, {
+            variant: "ghost",
+            size: "icon-xs",
+            "aria-label": `${isExpanded ? "Collapse" : "Expand"} ${item.getItemName()}`,
+            "aria-expanded": isExpanded,
+            onClick: (event) => {
+              event.stopPropagation();
+              toggle();
+            },
+            onDoubleClick: (event) => event.stopPropagation(),
+            onKeyDown: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+              className: cn2(isExpanded && "rotate-90")
+            })
+          }) : item.isFolder() ? /* @__PURE__ */ jsx(ChevronRightIcon, {
             "aria-hidden": "true",
             className: cn2("size-3.5 shrink-0", isExpanded && "rotate-90")
           }) : /* @__PURE__ */ jsx("span", {
-            className: "size-3.5 shrink-0"
+            className: cn2("shrink-0", expandOn === "disclosure" ? "size-control-xs" : "size-3.5")
           }),
           /* @__PURE__ */ jsx("span", {
             "aria-hidden": "true",
@@ -133,7 +150,7 @@ function Tree({
   return /* @__PURE__ */ jsxs2("div", {
     ...container,
     "data-density": density,
-    className: cn2("grid min-w-0 gap-1", variant === "default" && "rounded-sm border border-border bg-card p-2"),
+    className: cn2("grid min-w-0 grid-cols-1 gap-1", variant === "default" && "rounded-sm border border-border bg-card p-2"),
     onKeyDown: (event) => {
       if (event.target instanceof Element && event.target.closest("input,textarea,select,form,button,[role=menu]"))
         return;

package/dist/index.js

@@ -1400,6 +1400,10 @@ import { cva } from "class-variance-authority";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-sm [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
   variants: {
+    layout: {
+      content: "",
+      equal: "grid w-full grid-flow-col auto-cols-fr data-[orientation=vertical]:grid-flow-row"
+    },
     orientation: {
       horizontal: "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-sm! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0",
       vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-sm! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0"
@@ -1409,13 +1413,19 @@ var buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative
     orientation: "horizontal"
   }
 });
-function ButtonGroup({ density, className, orientation, ...props }) {
+function ButtonGroup({
+  density,
+  className,
+  orientation,
+  layout = "content",
+  ...props
+}) {
   return /* @__PURE__ */ jsx13("div", {
     role: "group",
     "data-density": density,
     "data-slot": "button-group",
     "data-orientation": orientation,
-    className: cn2(buttonGroupVariants({ orientation }), className),
+    className: cn2(buttonGroupVariants({ orientation, layout }), className),
     ...props
   });
 }

package/llms/components/actions/ButtonGroup.md

@@ -53,6 +53,21 @@ ButtonGroup
 
 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.
 
+### EqualWidthPads
+
+```tsx
+{
+    args: { layout: "equal" },
+    render: (args) => (<div data-testid="ButtonGroup--container" className="w-80">
+      <ButtonGroup {...args}>
+        {Array.from({ length: 8 }, (_, index) => (<Button key={index} variant="pad" size="content" disabled>
+            {index + 1}
+          </Button>))}
+      </ButtonGroup>
+    </div>)
+}
+```
+
 ### Horizontal
 
 ```tsx

package/llms/components/navigation/Tree.md

@@ -28,6 +28,16 @@ import { useState } from "react";
 
 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.
 
+### ConstrainedRows
+
+```tsx
+{
+    render: () => (<div className="w-[260px]">
+      <Example isComposed isConstrained/>
+    </div>)
+}
+```
+
 ### Default
 
 ```tsx

package/package.json

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