@alexgorbatchev/shadcn 0.0.43 → 0.0.45

package/README.md

@@ -270,6 +270,10 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 
 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`.
 
+Set `wrap` on `ItemTitle` to keep complete titles visible in narrow items, including long names without spaces. The default title presentation remains unchanged.
+
+`ToggleGroup` supports optional single selection by default and independent selections with `multiple`. Set `required` for a single selection that stays pressed when activated again by pointer, Space, or Enter. Required groups accept exactly one initial item through the controlled `value` or uncontrolled `defaultValue` tuple and cannot use `multiple`. Empty selection requests are canceled through Base UI before consumer callbacks or analytics run; accepted changes retain the native array value and event-details API. This selection rule does not add form submission or validation behavior.
+
 `ScrollArea` supplies a native scroll viewport and one vertical `ScrollBar` by default. Set `scrollbars={<ScrollBar orientation="horizontal" />}` for a wide horizontal layout, or supply a fragment containing vertical and horizontal parts for both axes. The tracks stay outside the viewport and reserve their shared corner. `keepMounted` belongs to `ScrollBar`; root and track className callbacks receive native overflow/scroll state. Focus the viewport for native keyboard scrolling.
 
 Scrolling is intentional: cards, panels, dialogs, sheets, and floating surfaces carry `data-scroll="none"`. Put long content in a nested `ScrollArea` or an explicitly styled native scroll viewport; the outer surface stays stationary. `DialogContent` bounds its height to the viewport and uses a flex column, so give a nested `ScrollArea` `className="min-h-0"` to let it shrink within the dialog. Headers and footers stay outside that scroll area when they need to remain visible.

package/dist/{chunk-634pk1cg.js → chunk-6475gsta.js}

@@ -4,7 +4,7 @@ import {
 import {
   ToggleGroup2,
   ToggleGroupItem2
-} from "./chunk-w9s21aj0.js";
+} from "./chunk-q606kj28.js";
 
 // src/components/assistant-ui/elements/MessageActions.tsx
 import { CheckIcon, CopyIcon, EllipsisIcon, RefreshCwIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";

package/dist/{chunk-0ybh8xre.js → chunk-79vgr8w9.js}

@@ -19,7 +19,7 @@ import {
 import {
   ToggleGroup2,
   ToggleGroupItem2
-} from "./chunk-w9s21aj0.js";
+} from "./chunk-q606kj28.js";
 
 // src/components/assistant-ui/elements/FeedbackDialog.tsx
 import { useId } from "react";

package/dist/{chunk-3c35ysaq.js → chunk-dhmtrz6f.js}

@@ -7,7 +7,7 @@ import {
 import {
   ToggleGroup2,
   ToggleGroupItem2
-} from "./chunk-w9s21aj0.js";
+} from "./chunk-q606kj28.js";
 import {
   pct,
   announced

package/dist/{chunk-3r0q02k6.js → chunk-pp0qdx0f.js}

@@ -1333,11 +1333,11 @@ function ItemContent2({ density, className, ...props }) {
     ...props
   });
 }
-function ItemTitle2({ density, className, ...props }) {
+function ItemTitle2({ density, className, wrap = false, ...props }) {
   return /* @__PURE__ */ jsx14("div", {
     "data-density": density,
     "data-slot": "item-title",
-    className: cn2("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
+    className: cn2(!wrap && "line-clamp-1", "flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", wrap && "min-w-0 max-w-full wrap-anywhere", className),
     ...props
   });
 }

package/dist/{chunk-w9s21aj0.js → chunk-q606kj28.js}

@@ -62,6 +62,7 @@ function ToggleGroup2({
   orientation = "horizontal",
   children,
   style,
+  required = false,
   ...props
 }) {
   const trackedOnValueChange = useAnalyticsCallback("ToggleGroup", analytics, { name: "ui.change-request" }, props.onValueChange);
@@ -78,7 +79,13 @@ function ToggleGroup2({
     }),
     className: (state) => cn2("group/toggle-group flex w-fit flex-row items-center rounded-sm data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch", typeof className === "function" ? className(state) : className),
     ...props,
-    onValueChange: trackedOnValueChange,
+    onValueChange: (value, details) => {
+      if (required && value.length === 0) {
+        details.cancel();
+        return;
+      }
+      trackedOnValueChange(value, details);
+    },
     children: /* @__PURE__ */ jsx2(ToggleGroupContext.Provider, {
       value: { variant, size, spacing },
       children

package/dist/components/Item.d.ts

@@ -19,8 +19,11 @@ type ItemMediaProps = ComponentProps<"div"> & VariantProps<typeof itemMediaVaria
 declare function ItemMedia({ density, className, variant, ...props }: ItemMediaProps): ReactElement;
 type ItemContentProps = ComponentProps<"div"> & IDensityProps;
 declare function ItemContent({ density, className, ...props }: ItemContentProps): ReactElement;
-type ItemTitleProps = ComponentProps<"div"> & IDensityProps;
-declare function ItemTitle({ density, className, ...props }: ItemTitleProps): ReactElement;
+type ItemTitleProps = ComponentProps<"div"> & IDensityProps & {
+    /** Keep the complete title visible, including long unbroken names. */
+    wrap?: boolean;
+};
+declare function ItemTitle({ density, className, wrap, ...props }: ItemTitleProps): ReactElement;
 type ItemDescriptionProps = ComponentProps<"p"> & IDensityProps;
 declare function ItemDescription({ density, className, ...props }: ItemDescriptionProps): ReactElement;
 type ItemActionsProps = ComponentProps<"div"> & IDensityProps;

package/dist/components/ToggleGroup.d.ts

@@ -4,10 +4,24 @@ import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group
 import type { VariantProps } from "class-variance-authority";
 import type { IDensityProps } from "../density/types.js";
 import { toggleVariants, type ToggleProps } from "./Toggle.js";
-export type ToggleGroupProps = IAnalyticsProps & ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants> & IDensityProps & IToggleGroupLayout;
+export type ToggleGroupProps = IAnalyticsProps & Omit<ToggleGroupPrimitive.Props, "multiple" | "value" | "defaultValue"> & VariantProps<typeof toggleVariants> & IDensityProps & IToggleGroupLayout & (OptionalToggleGroupSelection | RequiredToggleGroupSelection);
+type OptionalToggleGroupSelection = Pick<ToggleGroupPrimitive.Props, "multiple" | "value" | "defaultValue"> & {
+    required?: false;
+};
+type RequiredToggleGroupSelection = {
+    /** Keep one toggle pressed. Supply exactly one initial value. */
+    required: true;
+    multiple?: false;
+} & ({
+    value: [string];
+    defaultValue?: [string];
+} | {
+    value?: undefined;
+    defaultValue: [string];
+});
 interface IToggleGroupLayout {
     spacing?: number;
 }
-export declare function ToggleGroup({ analytics, density, className, variant, size, spacing, orientation, children, style, ...props }: ToggleGroupProps): ReactElement;
+export declare function ToggleGroup({ analytics, density, className, variant, size, spacing, orientation, children, style, required, ...props }: ToggleGroupProps): ReactElement;
 export declare function ToggleGroupItem({ density, className, variant, size, ...props }: ToggleProps): ReactElement;
 export {};

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

@@ -1,8 +1,8 @@
 import {
   FeedbackDialog2
-} from "../../../chunk-0ybh8xre.js";
+} from "../../../chunk-79vgr8w9.js";
 import"../../../chunk-6jpz5geq.js";
-import"../../../chunk-w9s21aj0.js";
+import"../../../chunk-q606kj28.js";
 import"../../../chunk-bygq5yqf.js";
 import"../../../chunk-jcxxjkqx.js";
 import"../../../chunk-tq0pfv5h.js";

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

@@ -1,7 +1,7 @@
 import {
   MessageActions2
-} from "../../../chunk-634pk1cg.js";
-import"../../../chunk-w9s21aj0.js";
+} from "../../../chunk-6475gsta.js";
+import"../../../chunk-q606kj28.js";
 import"../../../chunk-38301e40.js";
 import"../../../chunk-x90xmrba.js";
 import"../../../chunk-jpvw9xqy.js";

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

@@ -1,7 +1,7 @@
 import {
   ReasoningEffort2
-} from "../../../chunk-3c35ysaq.js";
-import"../../../chunk-w9s21aj0.js";
+} from "../../../chunk-dhmtrz6f.js";
+import"../../../chunk-q606kj28.js";
 import"../../../chunk-5j39rehg.js";
 import"../../../chunk-5mydsjp3.js";
 import"../../../chunk-8ssktt4b.js";

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

@@ -259,10 +259,10 @@ import"../../chunk-f6rbv5gf.js";
 import {
   EveAskQuestion2
 } from "../../chunk-vg2j5044.js";
-import"../../chunk-w9s21aj0.js";
+import"../../chunk-q606kj28.js";
 import {
   FeedbackDialog2
-} from "../../chunk-0ybh8xre.js";
+} from "../../chunk-79vgr8w9.js";
 import {
   FileRoot2,
   FileIconDisplay2,
@@ -351,7 +351,7 @@ import {
 } from "../../chunk-1t959882.js";
 import {
   MessageActions2
-} from "../../chunk-634pk1cg.js";
+} from "../../chunk-6475gsta.js";
 import {
   MessageAttachments2
 } from "../../chunk-wpa484a6.js";
@@ -461,7 +461,7 @@ import {
 } from "../../chunk-qv3b2jvc.js";
 import {
   ReasoningEffort2
-} from "../../chunk-3c35ysaq.js";
+} from "../../chunk-dhmtrz6f.js";
 import {
   SwapLabel2
 } from "../../chunk-wgxs6b5t.js";

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

@@ -36,7 +36,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-3r0q02k6.js";
+} from "../../chunk-pp0qdx0f.js";
 import {
   DropdownMenu2,
   DropdownMenuTrigger2,
@@ -112,7 +112,7 @@ import {
   Toggle2,
   ToggleGroup2,
   ToggleGroupItem2
-} from "../../chunk-w9s21aj0.js";
+} from "../../chunk-q606kj28.js";
 import {
   Alert2,
   AlertTitle2,

package/dist/index.js

@@ -178,7 +178,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-3r0q02k6.js";
+} from "./chunk-pp0qdx0f.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -301,7 +301,7 @@ import {
   Toggle2,
   ToggleGroup2,
   ToggleGroupItem2
-} from "./chunk-w9s21aj0.js";
+} from "./chunk-q606kj28.js";
 import {
   Spinner2
 } from "./chunk-1xncv9gb.js";

package/dist/prototype.js

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

package/llms/components/actions/ToggleGroup.md

@@ -8,7 +8,8 @@ Source: src/components/stories/actions/ToggleGroup.stories.tsx
 ## Public imports
 
 ```tsx
-import { ToggleGroup, ToggleGroupItem, DirectionProvider, Field, FieldLabel, FieldDescription } from "@alexgorbatchev/shadcn";
+import { ToggleGroup, ToggleGroupItem, DirectionProvider, Field, FieldLabel, FieldDescription, Button } from "@alexgorbatchev/shadcn";
+import { AnalyticsProvider } from "@alexgorbatchev/shadcn/analytics";
 ```
 
 ## Supporting imports
@@ -61,6 +62,52 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 {}
 ```
 
+### RequiredSingle
+
+```tsx
+{
+    args: { required: true, defaultValue: ["bold"], variant: "outline", analytics: { id: "required-format" } },
+    beforeEach: () => {
+        trackRequiredChange.mockClear();
+    },
+    decorators: [
+        (Story) => (<AnalyticsProvider transport={{ track: trackRequiredChange }}>
+        <Story />
+      </AnalyticsProvider>),
+    ]
+}
+```
+
+### RequiredControlled
+
+```tsx
+{
+    beforeEach: () => {
+        submitRequiredForm.mockClear();
+    },
+    render: function Render(args) {
+        const [value, setValue] = useState<[
+            string
+        ]>(["bold"]);
+        return (<form onSubmit={(event) => {
+                event.preventDefault();
+                submitRequiredForm(value);
+            }}>
+        <ToggleGroup {...args} required multiple={false} value={value} defaultValue={undefined} onValueChange={(values, details) => {
+                const next = values[0];
+                if (next !== undefined)
+                    setValue([next]);
+                args.onValueChange?.(values, details);
+            }}>
+          <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+          <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+        </ToggleGroup>
+        <Button type="submit">Apply formatting</Button>
+      </form>);
+    }
+}
+```
+
 ### Multiple
 
 ```tsx

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

@@ -190,6 +190,45 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### TitleMedia
+
+```tsx
+{
+    render: (args) => (<Item {...args}>
+      <ItemContent>
+        <ItemTitle>
+          <ItemMedia>
+            <FileIcon data-testid="title-icon" aria-hidden="true"/>
+          </ItemMedia>
+          <span>Document title</span>
+        </ItemTitle>
+      </ItemContent>
+    </Item>)
+}
+```
+
+### WrappedTitle
+
+```tsx
+{
+    render: (args) => (<div data-testid="title-container" className="w-56">
+      <Item {...args} render={<dl />}>
+        <ItemContent>
+          <dt>
+            <ItemTitle wrap>
+              <ItemMedia>
+                <FileIcon aria-hidden="true"/>
+              </ItemMedia>
+              A long saved title with repeated details and a verylongunbrokenmarkertitlethatmustremainreadable
+            </ItemTitle>
+          </dt>
+          <dd>Saved item details</dd>
+        </ItemContent>
+      </Item>
+    </div>)
+}
+```
+
 ### NativeSeparatorCallback
 
 ```tsx

package/llms/setup.md

@@ -270,6 +270,10 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 
 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`.
 
+Set `wrap` on `ItemTitle` to keep complete titles visible in narrow items, including long names without spaces. The default title presentation remains unchanged.
+
+`ToggleGroup` supports optional single selection by default and independent selections with `multiple`. Set `required` for a single selection that stays pressed when activated again by pointer, Space, or Enter. Required groups accept exactly one initial item through the controlled `value` or uncontrolled `defaultValue` tuple and cannot use `multiple`. Empty selection requests are canceled through Base UI before consumer callbacks or analytics run; accepted changes retain the native array value and event-details API. This selection rule does not add form submission or validation behavior.
+
 `ScrollArea` supplies a native scroll viewport and one vertical `ScrollBar` by default. Set `scrollbars={<ScrollBar orientation="horizontal" />}` for a wide horizontal layout, or supply a fragment containing vertical and horizontal parts for both axes. The tracks stay outside the viewport and reserve their shared corner. `keepMounted` belongs to `ScrollBar`; root and track className callbacks receive native overflow/scroll state. Focus the viewport for native keyboard scrolling.
 
 Scrolling is intentional: cards, panels, dialogs, sheets, and floating surfaces carry `data-scroll="none"`. Put long content in a nested `ScrollArea` or an explicitly styled native scroll viewport; the outer surface stays stationary. `DialogContent` bounds its height to the viewport and uses a flex column, so give a nested `ScrollArea` `className="min-h-0"` to let it shrink within the dialog. Headers and footers stay outside that scroll area when they need to remain visible.

package/package.json

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