@alexgorbatchev/shadcn 0.0.48 → 0.0.50

package/dist/hooks/useLinkAnalyticsCallback.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from "react";
+import type { IAnalyticsProps } from "../analytics/types.js";
+type LinkClickHandler = (event: MouseEvent<HTMLAnchorElement>) => void;
+/**
+ * Tracks link activation. Client routers call the link's click handler and then prevent the default action to
+ * navigate without a document load, so a link rendered through `render` reads cancellation when this handler runs
+ * instead of after the dispatch. Handlers on the rendered element run first and can still cancel.
+ */
+export declare function useLinkAnalyticsCallback(component: string, analytics: IAnalyticsProps["analytics"], callback: LinkClickHandler | undefined, isRendered: boolean): LinkClickHandler;
+export {};

package/dist/index.d.ts

@@ -67,7 +67,8 @@ export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./component
 export { Spinner } from "./components/Spinner.js";
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnGroup, TableColumn, } from "./components/Table.js";
 export type { TableTextAlign, TableVisibility } from "./components/Table.js";
-export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/NativeSelect.js";
+export { OptionSelect } from "./components/OptionSelect.js";
+export type { OptionSelectOption, OptionSelectProps } from "./components/OptionSelect.js";
 export { Kbd, KbdGroup } from "./components/Kbd.js";
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, } from "./components/Item.js";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./components/Pagination.js";
@@ -100,9 +101,27 @@ export { Meter, MeterLabel, MeterValue, MeterTrack, MeterIndicator } from "./com
 export { Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, ToolbarGroup, ToolbarSeparator, } from "./components/Toolbar.js";
 export { Stepper, StepperList, StepperTrigger, StepperIndicator, StepperContent } from "./components/Stepper.js";
 export { AppShell } from "./components/AppShell.js";
-export type { AppShellProps, AppShellNavigationItem } from "./components/AppShell.js";
+export type { AppShellContent, AppShellProps, AppShellNavigationItem } from "./components/AppShell.js";
+export { Stack } from "./components/Stack.js";
+export type { StackProps } from "./components/Stack.js";
+export { Grid, GridItem } from "./components/Grid.js";
+export type { GridProps, GridItemProps } from "./components/Grid.js";
+export { Container } from "./components/Container.js";
+export type { ContainerProps } from "./components/Container.js";
+export type { ContainerWidth, GridAlign, GridColumns, GridMinColumnWidth, GridSpan, LayoutBreakpoint, LayoutHeight, LayoutSpacing, ResponsiveValue, StackAlign, StackDirection, StackJustify, } from "./layout/types.js";
+export { Text } from "./components/Text.js";
+export type { TextProps, TextSize, TextTone, TextWeight } from "./components/Text.js";
+export type { TextAlign } from "./typography/types.js";
+export { Heading } from "./components/Heading.js";
+export type { HeadingProps, HeadingLevel, HeadingSize } from "./components/Heading.js";
+export { WeatherSummary } from "./components/WeatherSummary.js";
+export type { IWeatherDay, TemperatureUnit, WeatherCondition, WeatherSummaryProps, } from "./components/WeatherSummary.js";
+export { WeatherForecast } from "./components/WeatherForecast.js";
+export type { WeatherForecastDay, WeatherForecastProps } from "./components/WeatherForecast.js";
 export { PageHeader } from "./components/PageHeader.js";
 export type { PageHeaderProps } from "./components/PageHeader.js";
+export { PageIntro } from "./components/PageIntro.js";
+export type { PageIntroHighlight, PageIntroProps } from "./components/PageIntro.js";
 export { WorkspaceSwitcher } from "./components/WorkspaceSwitcher.js";
 export type { WorkspaceSwitcherProps } from "./components/WorkspaceSwitcher.js";
 export { AccountMenu } from "./components/AccountMenu.js";

package/dist/index.js

@@ -30,16 +30,6 @@ import {
   AlertDialogDescription2,
   AlertDialogAction2,
   AlertDialogCancel2,
-  Select2,
-  SelectGroup2,
-  SelectValue2,
-  SelectTrigger2,
-  SelectContent2,
-  SelectLabel2,
-  SelectItem2,
-  SelectSeparator2,
-  SelectScrollUpButton2,
-  SelectScrollDownButton2,
   DensityProvider2,
   collectLayoutViolations2,
   LayoutGuard2,
@@ -160,7 +150,16 @@ import {
   StepperIndicator2,
   StepperContent2,
   AppShell2,
+  Stack2,
+  Grid2,
+  GridItem2,
+  Container2,
+  Text2,
+  Heading2,
+  WeatherSummary2,
+  WeatherForecast2,
   PageHeader2,
+  PageIntro2,
   WorkspaceSwitcher2,
   AccountMenu2,
   StatCard2,
@@ -172,7 +171,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-svr3r7pj.js";
+} from "./chunk-f43963xy.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -187,7 +186,7 @@ import {
   useDropTarget2,
   DropTarget2,
   Kanban2
-} from "./chunk-gbmvkt3q.js";
+} from "./chunk-zs4h45d8.js";
 import {
   Toolbar2,
   ToolbarButton2,
@@ -195,10 +194,8 @@ import {
   ToolbarInput2,
   ToolbarGroup2,
   ToolbarSeparator2
-} from "./chunk-x6vx0v6d.js";
+} from "./chunk-7srpghny.js";
 import {
-  ScrollArea2,
-  ScrollBar2,
   Combobox2,
   ComboboxValue2,
   ComboboxTrigger2,
@@ -222,15 +219,10 @@ import {
   NumberFieldIncrement2,
   NumberFieldScrubArea2,
   NumberFieldScrubAreaCursor2
-} from "./chunk-a6mes7w0.js";
-import {
-  NativeSelect2,
-  NativeSelectOption2,
-  NativeSelectOptGroup2
-} from "./chunk-r4jzz4f2.js";
+} from "./chunk-31wptjv4.js";
 import {
   Slider2
-} from "./chunk-2mn2ctsk.js";
+} from "./chunk-7cq1s2ey.js";
 import {
   MenuPortal,
   MenuPopup,
@@ -248,7 +240,7 @@ import {
   MenuShortcut2,
   DropdownMenu2,
   DropdownMenuTrigger2
-} from "./chunk-cfnkbp0y.js";
+} from "./chunk-10vjajh7.js";
 import {
   Empty2,
   EmptyHeader2,
@@ -256,7 +248,7 @@ import {
   EmptyTitle2,
   EmptyDescription2,
   EmptyContent2
-} from "./chunk-9de1htr5.js";
+} from "./chunk-4e96tpw0.js";
 import {
   Table2,
   TableHeader2,
@@ -268,55 +260,59 @@ import {
   TableColumnGroup2,
   TableColumn2,
   TableCaption2
-} from "./chunk-zte6pw69.js";
+} from "./chunk-tjn53x34.js";
 import {
-  Alert2,
-  AlertTitle2,
-  AlertDescription2,
-  AlertAction2
-} from "./chunk-zdt8xxzy.js";
+  ScrollArea2,
+  ScrollBar2
+} from "./chunk-f9sm5zpv.js";
 import {
   RadioGroup2,
   RadioGroupItem2
-} from "./chunk-ekbesw9t.js";
-import {
-  FieldSet2,
-  FieldLegend2,
-  FieldGroup2,
-  Field2,
-  FieldContent2,
-  FieldLabel2,
-  FieldTitle2,
-  FieldDescription2,
-  FieldSeparator2,
-  FieldError2
-} from "./chunk-6jpz5geq.js";
+} from "./chunk-kgqe8gpb.js";
 import {
   toggleVariants2,
   Toggle2,
   ToggleGroup2,
   ToggleGroupItem2
-} from "./chunk-q606kj28.js";
-import {
-  Spinner2
-} from "./chunk-1xncv9gb.js";
+} from "./chunk-p56he2j7.js";
 import {
   Checkbox2
-} from "./chunk-caz81rnv.js";
+} from "./chunk-b5s5y5wq.js";
 import {
   Kbd2,
   KbdGroup2
-} from "./chunk-vyve5wf3.js";
+} from "./chunk-7vnpp3ya.js";
 import {
   Switch2
-} from "./chunk-ptgtqv1a.js";
+} from "./chunk-m98d89xc.js";
 import {
   Progress2,
   ProgressTrack2,
   ProgressIndicator2,
   ProgressLabel2,
   ProgressValue2
-} from "./chunk-5j39rehg.js";
+} from "./chunk-bcwbh20z.js";
+import {
+  Alert2,
+  AlertTitle2,
+  AlertDescription2,
+  AlertAction2
+} from "./chunk-x9qph1g4.js";
+import {
+  FieldSet2,
+  FieldLegend2,
+  FieldGroup2,
+  Field2,
+  FieldContent2,
+  FieldLabel2,
+  FieldTitle2,
+  FieldDescription2,
+  FieldSeparator2,
+  FieldError2
+} from "./chunk-9n0axzd5.js";
+import {
+  Spinner2
+} from "./chunk-t3p4dn1p.js";
 import {
   Card2,
   CardHeader2,
@@ -325,7 +321,7 @@ import {
   CardAction2,
   CardContent2,
   CardFooter2
-} from "./chunk-bygq5yqf.js";
+} from "./chunk-k1f35j55.js";
 import {
   Sheet2,
   SheetTrigger2,
@@ -359,7 +355,7 @@ import {
   SidebarMenuSub2,
   SidebarMenuSubItem2,
   SidebarMenuSubButton2
-} from "./chunk-c9ypcp4s.js";
+} from "./chunk-1f6p05qh.js";
 import {
   Avatar2,
   AvatarImage2,
@@ -367,28 +363,28 @@ import {
   AvatarBadge2,
   AvatarGroup2,
   AvatarGroupCount2
-} from "./chunk-hyq4nwg2.js";
+} from "./chunk-0hq6rg7w.js";
 import {
   HoverCard2,
   HoverCardTrigger2,
   HoverCardContent2
-} from "./chunk-60p7sagm.js";
+} from "./chunk-9ecf92s6.js";
 import {
   Skeleton2
-} from "./chunk-d70rcwk7.js";
-import {
-  Label2
-} from "./chunk-jcxxjkqx.js";
-import"./chunk-4710gn6d.js";
+} from "./chunk-1fzwfn11.js";
+import"./chunk-m4geb1s5.js";
 import {
   badgeVariants2,
   Badge2
-} from "./chunk-wjx6zf94.js";
+} from "./chunk-9t530p75.js";
 import {
   Collapsible2,
   CollapsibleTrigger2,
   CollapsibleContent2
 } from "./chunk-fw86vanx.js";
+import {
+  Label2
+} from "./chunk-m32ptxf3.js";
 import"./chunk-tcefvfr8.js";
 import {
   Popover2,
@@ -397,7 +393,20 @@ import {
   PopoverHeader2,
   PopoverTitle2,
   PopoverDescription2
-} from "./chunk-21ab0jsp.js";
+} from "./chunk-bf8kbj33.js";
+import {
+  Select2,
+  SelectGroup2,
+  SelectValue2,
+  SelectTrigger2,
+  SelectContent2,
+  SelectLabel2,
+  SelectItem2,
+  SelectSeparator2,
+  SelectScrollUpButton2,
+  SelectScrollDownButton2,
+  OptionSelect2
+} from "./chunk-xfryhw7e.js";
 import {
   Dialog2,
   DialogTrigger2,
@@ -409,7 +418,7 @@ import {
   DialogFooter2,
   DialogTitle2,
   DialogDescription2
-} from "./chunk-jgdpa00w.js";
+} from "./chunk-4t23yhc0.js";
 import {
   InputGroup2,
   InputGroupAddon2,
@@ -417,18 +426,18 @@ import {
   InputGroupText2,
   InputGroupInput2,
   InputGroupTextarea2
-} from "./chunk-14mh00z3.js";
-import {
-  Input2
-} from "./chunk-0fmrwsgp.js";
+} from "./chunk-rxjxb4vy.js";
 import {
   Textarea2
-} from "./chunk-tq0pfv5h.js";
+} from "./chunk-er6e5fj8.js";
+import {
+  Input2
+} from "./chunk-7vg045gd.js";
 import"./chunk-7jpsybag.js";
 import"./chunk-k99h6evz.js";
 import {
   Separator2
-} from "./chunk-rajgnfbr.js";
+} from "./chunk-52aadmkc.js";
 import {
   useTheme2
 } from "./chunk-1j2hz3w9.js";
@@ -439,7 +448,7 @@ import {
   TooltipContent2,
   buttonVariants2,
   Button2
-} from "./chunk-38301e40.js";
+} from "./chunk-bd09gygt.js";
 import {
   usePortalContainer2,
   PortalProvider2
@@ -454,7 +463,7 @@ import"./chunk-8ssktt4b.js";
 import"./chunk-7ny0vyek.js";
 import {
   cn2
-} from "./chunk-cp2m7y7v.js";
+} from "./chunk-en44w1pn.js";
 export {
   Accordion2 as Accordion,
   AccordionContent2 as AccordionContent,
@@ -545,6 +554,7 @@ export {
   ComboboxTrigger2 as ComboboxTrigger,
   ComboboxValue2 as ComboboxValue,
   ConfirmationDialog2 as ConfirmationDialog,
+  Container2 as Container,
   ContextMenu2 as ContextMenu,
   MenuCheckboxItem2 as ContextMenuCheckboxItem,
   ContextMenuContent2 as ContextMenuContent,
@@ -623,6 +633,9 @@ export {
   FieldTitle2 as FieldTitle,
   FilterBar2 as FilterBar,
   FormDialog2 as FormDialog,
+  Grid2 as Grid,
+  GridItem2 as GridItem,
+  Heading2 as Heading,
   HoverCard2 as HoverCard,
   HoverCardContent2 as HoverCardContent,
   HoverCardTrigger2 as HoverCardTrigger,
@@ -693,9 +706,6 @@ export {
   MeterLabel2 as MeterLabel,
   MeterTrack2 as MeterTrack,
   MeterValue2 as MeterValue,
-  NativeSelect2 as NativeSelect,
-  NativeSelectOptGroup2 as NativeSelectOptGroup,
-  NativeSelectOption2 as NativeSelectOption,
   NavigationMenu2 as NavigationMenu,
   NavigationMenuContent2 as NavigationMenuContent,
   NavigationMenuIndicator2 as NavigationMenuIndicator,
@@ -711,7 +721,9 @@ export {
   NumberFieldInput2 as NumberFieldInput,
   NumberFieldScrubArea2 as NumberFieldScrubArea,
   NumberFieldScrubAreaCursor2 as NumberFieldScrubAreaCursor,
+  OptionSelect2 as OptionSelect,
   PageHeader2 as PageHeader,
+  PageIntro2 as PageIntro,
   PageMessage2 as PageMessage,
   Pagination2 as Pagination,
   PaginationContent2 as PaginationContent,
@@ -783,6 +795,7 @@ export {
   Skeleton2 as Skeleton,
   Slider2 as Slider,
   Spinner2 as Spinner,
+  Stack2 as Stack,
   StarRating2 as StarRating,
   StatCard2 as StatCard,
   StatusTracker2 as StatusTracker,
@@ -807,6 +820,7 @@ export {
   TabsList2 as TabsList,
   TabsTrigger2 as TabsTrigger,
   TagInput2 as TagInput,
+  Text2 as Text,
   Textarea2 as Textarea,
   ThemeProvider2 as ThemeProvider,
   Toast2 as Toast,
@@ -832,6 +846,8 @@ export {
   TooltipContent2 as TooltipContent,
   TooltipProvider2 as TooltipProvider,
   TooltipTrigger2 as TooltipTrigger,
+  WeatherForecast2 as WeatherForecast,
+  WeatherSummary2 as WeatherSummary,
   WorkspaceSwitcher2 as WorkspaceSwitcher,
   badgeVariants2 as badgeVariants,
   buttonGroupVariants2 as buttonGroupVariants,

package/dist/layout/constants.d.ts

@@ -0,0 +1,14 @@
+import type { ContainerWidth, GridAlign, GridColumns, GridMinColumnWidth, GridSpan, LayoutBreakpoint, LayoutHeight, LayoutSpacing, StackAlign, StackDirection, StackJustify } from "./types.js";
+export declare const GAP_CLASSES: Record<LayoutSpacing, string>;
+export declare const PADDING_CLASSES: Record<LayoutSpacing, string>;
+export declare const HEIGHT_CLASSES: Record<LayoutHeight, string>;
+export declare const GROW_CLASSES = "min-h-0 min-w-0 flex-1";
+export declare const STACK_DIRECTION_CLASSES: Record<LayoutBreakpoint, Record<StackDirection, string>>;
+export declare const STACK_ALIGN_CLASSES: Record<StackAlign, string>;
+export declare const STACK_JUSTIFY_CLASSES: Record<StackJustify, string>;
+export declare const GRID_COLUMN_CLASSES: Record<LayoutBreakpoint, Record<GridColumns, string>>;
+export declare const GRID_MIN_COLUMN_WIDTH_CLASSES: Record<GridMinColumnWidth, string>;
+export declare const GRID_ALIGN_CLASSES: Record<GridAlign, string>;
+export declare const GRID_SPAN_CLASSES: Record<LayoutBreakpoint, Record<GridSpan, string>>;
+export declare const CONTAINER_WIDTH_CLASSES: Record<ContainerWidth, string>;
+export declare const LAYOUT_BREAKPOINTS: readonly LayoutBreakpoint[];

package/dist/layout/responsiveClassNames.d.ts

@@ -0,0 +1,3 @@
+import type { LayoutBreakpoint, ResponsiveValue } from "./types.js";
+/** Resolves a responsive value to the literal class names of each breakpoint it sets. */
+export declare function responsiveClassNames<Value extends string | number>(value: ResponsiveValue<Value> | undefined, classes: Readonly<Record<LayoutBreakpoint, Readonly<Record<Value, string>>>>): string;

package/dist/layout/types.d.ts

@@ -0,0 +1,28 @@
+import type { Density } from "../density/types.js";
+/** Density-aware spacing tokens from `theme.css`, smallest to largest. */
+export type LayoutSpacing = "none" | "control" | "panel-sm" | "panel" | "field" | "section";
+/** Viewport breakpoints; `base` applies below `sm`. */
+export type LayoutBreakpoint = "base" | "sm" | "md" | "lg" | "xl";
+/** A single value, or values keyed by the viewport breakpoint where each one starts to apply. */
+export type ResponsiveValue<Value> = Value | Readonly<Partial<Record<LayoutBreakpoint, Value>>>;
+/**
+ * Block size:
+ * - `auto`: intrinsic height.
+ * - `full`: the parent's full height; descendants may shrink below their intrinsic height.
+ * - `viewport`: exactly the dynamic viewport height, for application frames.
+ * - `min-viewport`: at least the dynamic viewport height, for pages that may scroll as a whole.
+ */
+export type LayoutHeight = "auto" | "full" | "viewport" | "min-viewport";
+export type StackDirection = "vertical" | "horizontal";
+export type StackAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type StackJustify = "start" | "center" | "end" | "between";
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+/** Minimum track width for intrinsically responsive grids that fit as many columns as the width allows. */
+export type GridMinColumnWidth = "xs" | "sm" | "md" | "lg";
+export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | "full";
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export type ContainerWidth = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+export type LayoutState = {
+    slot: string;
+    density?: Density;
+};

package/dist/prototype.js

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

package/dist/theme.css

@@ -65,7 +65,9 @@
   --spacing-tag: var(--ag-tag-h);
   --spacing-tag-x: var(--ag-tag-x);
   --spacing-panel: var(--ag-panel-padding);
+  --spacing-panel-sm: var(--ag-panel-padding-sm);
   --spacing-field-gap: var(--ag-field-gap);
+  --spacing-section: var(--ag-section-gap);
   --shadow-frame: 0 0 0 1px var(--frame-halo), var(--ag-shadow);
 }
 
@@ -86,6 +88,7 @@
     --ag-panel-padding: 16px;
     --ag-panel-padding-sm: 12px;
     --ag-field-gap: 20px;
+    --ag-section-gap: 32px;
     color-scheme: dark;
     --background: #121417;
     --foreground: #eceff3;
@@ -216,6 +219,7 @@
     --ag-panel-padding: 16px;
     --ag-panel-padding-sm: 12px;
     --ag-field-gap: 20px;
+    --ag-section-gap: 32px;
   }
 
   [data-density="compact"] {
@@ -232,6 +236,7 @@
     --ag-panel-padding: 8px;
     --ag-panel-padding-sm: 6px;
     --ag-field-gap: 8px;
+    --ag-section-gap: 16px;
   }
 
   * {

package/dist/typography/types.d.ts

@@ -0,0 +1,2 @@
+/** Inline-direction text alignment that follows the writing direction. */
+export type TextAlign = "start" | "center" | "end";

package/llms/components/actions/ButtonLink.md

@@ -8,6 +8,7 @@ Source: src/components/stories/actions/ButtonLink.stories.tsx
 ## Public imports
 
 ```tsx
+import { AnalyticsProvider } from "@alexgorbatchev/shadcn/analytics";
 import { Button, ButtonLink } from "@alexgorbatchev/shadcn";
 ```
 
@@ -151,6 +152,27 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
 }
 ```
 
+### RouterLinkAnalytics
+
+```tsx
+{
+    args: { onClick: fn() },
+    decorators: [
+        (Story) => (<AnalyticsProvider enabled transport={{ track: trackLinkActivation }}>
+        <Story />
+      </AnalyticsProvider>),
+    ],
+    render: ({ href: _href, ...args }) => (<div className="flex items-center gap-4">
+      <ButtonLink {...args} render={<ClientRouterLink to="/plans" onNavigate={clientNavigate}/>}>
+        Plans
+      </ButtonLink>
+      <ButtonLink {...args} render={<ClientRouterLink to="/blocked" onNavigate={clientNavigate} onClick={(event) => event.preventDefault()}/>}>
+        Blocked
+      </ButtonLink>
+    </div>)
+}
+```
+
 ### RenderCallback
 
 ```tsx

package/llms/components/assistant-ui/elements/conversations/CanvasSplit.md

@@ -66,3 +66,41 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     args: { onCopy: undefined, onClose: undefined }
 }
 ```
+
+### FillSideBySide
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="h-[400px] w-[960px]" data-scroll="none">
+        <Story />
+      </div>),
+    ],
+    render: fillRender
+}
+```
+
+### FillStacked
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="h-[520px] w-[360px]" data-scroll="none">
+        <Story />
+      </div>),
+    ],
+    render: fillRender
+}
+```
+
+### CardSize
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-[960px]">
+        <Story />
+      </div>),
+    ]
+}
+```

package/llms/components/assistant-ui/elements/data-visualization/GeoMap.md

@@ -8,9 +8,16 @@ Source: src/components/stories/assistant-ui/elements/data-visualization/GeoMap.s
 ## Public imports
 
 ```tsx
+import { Button } from "@alexgorbatchev/shadcn";
 import { GeoMap } from "@alexgorbatchev/shadcn/assistant-ui";
 ```
 
+## Supporting imports
+
+```tsx
+import { useState, type ComponentProps, type ReactElement } from "react";
+```
+
 ## Default component
 
 ```tsx
@@ -89,3 +96,53 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
     args: { places: [], routes: [] }
 }
 ```
+
+### FillHeight
+
+```tsx
+{
+    args: { height: "fill" },
+    decorators: [
+        (Story) => (<div className="h-[480px] w-[520px]" data-scroll="none">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### FillResizesMap
+
+```tsx
+{
+    args: { height: "fill", showPlaces: false },
+    decorators: [
+        (Story) => (<div className="h-[240px] w-[320px] resize overflow-hidden" data-testid="GeoMapFrame">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### DynamicAttribution
+
+```tsx
+{
+    render: (args) => <SwitchingAttributionMap {...args}/>
+}
+```
+
+### ControlledSelection
+
+```tsx
+{
+    args: {
+        places: [
+            { id: "london", lat: 51.5, lng: -0.12, label: "London" },
+            { id: "paris", lat: 48.85, lng: 2.35, label: "Paris" },
+            { id: "rome", lat: 41.9, lng: 12.5, label: "Rome" },
+        ],
+        routes: [],
+    },
+    render: (args) => <ControlledSelectionMap {...args}/>
+}
+```