@alexgorbatchev/shadcn 0.0.18 → 0.0.20

package/llms/components/overlays/Tooltip.md

@@ -0,0 +1,318 @@
+# Tooltip
+
+Story: @alexgorbatchev/shadcn/components/overlays/Tooltip
+Source: src/components/stories/overlays/Tooltip.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/overlays/Tooltip.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, Button, DirectionProvider, Kbd } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps, ReactElement } from "react";
+import { useState } from "react";
+import { SaveIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+Tooltip
+```
+
+## Default render
+
+```tsx
+(args) => (<Tooltip {...args}>
+      <TooltipTrigger render={<Button variant="outline"/>}>Hover or focus</TooltipTrigger>
+      <TooltipContent>Save your changes.</TooltipContent>
+    </Tooltip>)
+```
+
+## Examples
+
+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.
+
+### Default
+
+```tsx
+{}
+```
+
+### Open
+
+```tsx
+{
+    args: { defaultOpen: true }
+}
+```
+
+### Below
+
+```tsx
+{
+    render: (args) => (<Tooltip {...args}>
+      <TooltipTrigger render={<Button variant="outline"/>}>Below</TooltipTrigger>
+      <TooltipContent side="bottom">Additional information.</TooltipContent>
+    </Tooltip>)
+}
+```
+
+### NativeCallback
+
+```tsx
+{
+    render: (args) => (<Tooltip {...args}>
+      <TooltipTrigger render={<Button />}>Callback hint</TooltipTrigger>
+      <TooltipContent className={(state) => (state.open ? "min-w-80" : "min-w-0")}>
+        Native callback hint.
+      </TooltipContent>
+    </Tooltip>)
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    decorators: [
+        (Story) => (<DirectionProvider direction="rtl">
+        <div dir="rtl">
+          <Story />
+        </div>
+      </DirectionProvider>),
+    ],
+    render: () => (<div className="p-32">
+      <Tooltip>
+        <TooltipTrigger render={<Button variant="outline"/>}>RTL hint</TooltipTrigger>
+        <TooltipContent side="bottom" align="start">
+          معلومات إضافية عن المشروع
+        </TooltipContent>
+      </Tooltip>
+    </div>)
+}
+```
+
+### Payload
+
+```tsx
+{
+    render: () => (<Tooltip<string>>
+      {({ payload }) => (<div className="flex gap-4 p-32">
+          <TooltipTrigger<string> payload="Alpha" render={<Button />}>
+            Preview Alpha
+          </TooltipTrigger>
+          <TooltipTrigger<string> payload="Beta" render={<Button />}>
+            Preview Beta
+          </TooltipTrigger>
+          <TooltipContent>Project: {payload?.toUpperCase()}</TooltipContent>
+        </div>)}
+    </Tooltip>)
+}
+```
+
+### Top
+
+```tsx
+{
+    render: () => <PlacementHint side="top"/>
+}
+```
+
+### Bottom
+
+```tsx
+{
+    render: () => <PlacementHint side="bottom"/>
+}
+```
+
+### Left
+
+```tsx
+{
+    render: () => <PlacementHint side="left"/>
+}
+```
+
+### Right
+
+```tsx
+{
+    render: () => <PlacementHint side="right"/>
+}
+```
+
+### InlineStart
+
+```tsx
+{
+    render: () => <PlacementHint side="inline-start"/>
+}
+```
+
+### InlineEnd
+
+```tsx
+{
+    render: () => <PlacementHint side="inline-end"/>
+}
+```
+
+### RightToLeftTop
+
+```tsx
+{
+    render: () => <PlacementHint side="top"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftBottom
+
+```tsx
+{
+    render: () => <PlacementHint side="bottom"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftLeft
+
+```tsx
+{
+    render: () => <PlacementHint side="left"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftRight
+
+```tsx
+{
+    render: () => <PlacementHint side="right"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftInlineStart
+
+```tsx
+{
+    render: () => <PlacementHint side="inline-start"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### RightToLeftInlineEnd
+
+```tsx
+{
+    render: () => <PlacementHint side="inline-end"/>,
+    decorators: RightToLeft.decorators
+}
+```
+
+### KeyboardShortcut
+
+```tsx
+{
+    render: function Render() {
+        const [count, setCount] = useState(0);
+        return (<div className="flex flex-col items-start gap-4 p-32">
+        <Tooltip>
+          <TooltipTrigger render={<Button variant="outline" size="icon-sm" aria-label="Save changes" onClick={() => setCount(count + 1)}/>}>
+            <SaveIcon aria-hidden="true"/>
+          </TooltipTrigger>
+          <TooltipContent>
+            Save changes <Kbd>S</Kbd>
+          </TooltipContent>
+        </Tooltip>
+        <output aria-label="Save count">{count}</output>
+      </div>);
+    }
+}
+```
+
+### RightToLeftKeyboardShortcut
+
+```tsx
+{
+    render: function Render() {
+        const [count, setCount] = useState(0);
+        return (<div className="flex flex-col items-start gap-4 p-32">
+        <Tooltip>
+          <TooltipTrigger render={<Button variant="outline" size="icon-sm" aria-label="Save changes" onClick={() => setCount(count + 1)}/>}>
+            <SaveIcon aria-hidden="true"/>
+          </TooltipTrigger>
+          <TooltipContent>
+            Save changes <Kbd>S</Kbd>
+          </TooltipContent>
+        </Tooltip>
+        <output aria-label="Save count">{count}</output>
+      </div>);
+    },
+    decorators: RightToLeft.decorators
+}
+```
+
+### DisabledButton
+
+```tsx
+{
+    render: () => (<div className="p-32">
+      <Tooltip>
+        <TooltipTrigger render={<span tabIndex={0} aria-label="Feature availability" className="inline-block w-fit"/>}>
+          <Button variant="outline" disabled>
+            Unavailable save
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>This feature is currently unavailable.</TooltipContent>
+      </Tooltip>
+    </div>)
+}
+```
+
+### RightToLeftDisabledButton
+
+```tsx
+{
+    render: () => (<div className="p-32">
+      <Tooltip>
+        <TooltipTrigger render={<span tabIndex={0} aria-label="Feature availability" className="inline-block w-fit"/>}>
+          <Button variant="outline" disabled>
+            Unavailable save
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>This feature is currently unavailable.</TooltipContent>
+      </Tooltip>
+    </div>),
+    decorators: RightToLeft.decorators
+}
+```
+
+### CancelledOpening
+
+```tsx
+{
+    args: { onOpenChange: fn((_isOpen, details) => details.cancel()) }
+}
+```
+
+### ProviderDelay
+
+```tsx
+{
+    render: (args) => (<TooltipProvider delay={150}>
+      <Tooltip {...args}>
+        <TooltipTrigger render={<Button />}>Delayed hint</TooltipTrigger>
+        <TooltipContent>Delay completed.</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>)
+}
+```

package/llms/components/providers/DensityProvider.md

@@ -0,0 +1,171 @@
+# DensityProvider
+
+Story: @alexgorbatchev/shadcn/components/providers/DensityProvider
+Source: src/components/stories/providers/DensityProvider.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/providers/DensityProvider.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DensityProvider, Badge, Button, Field, FieldLabel, Input, Popover, PopoverTrigger, PopoverContent, PopoverTitle, type Density } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useId, useState } from "react";
+```
+
+## Default component
+
+```tsx
+DensityProvider
+```
+
+## Default args
+
+```tsx
+{ density: "comfortable" }
+```
+
+## Default render
+
+```tsx
+(args) => {
+    const storyId = useId();
+    return (<DensityProvider {...args}>
+        <DensityValueExample />
+        <Field>
+          <FieldLabel htmlFor={storyId}>Name</FieldLabel>
+          <Input id={storyId} placeholder="Your name"/>
+        </Field>
+        <div className="mt-4 flex gap-2">
+          <Button>Save</Button>
+          <Popover>
+            <PopoverTrigger render={<Button variant="outline"/>}>Details</PopoverTrigger>
+            <PopoverContent>
+              <PopoverTitle>Density follows the provider through portals.</PopoverTitle>
+              <DensityValueExample />
+              <Button>Continue</Button>
+            </PopoverContent>
+          </Popover>
+        </div>
+      </DensityProvider>);
+}
+```
+
+## Examples
+
+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.
+
+### Comfortable
+
+```tsx
+{}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### DefaultDensity
+
+```tsx
+{
+    args: { density: undefined }
+}
+```
+
+### Mixed
+
+```tsx
+{
+    render: () => (<DensityProvider density="comfortable">
+      <div className="flex flex-col gap-4">
+        <Button>Comfortable provider</Button>
+        <Button density="compact">Compact override</Button>
+        <DensityProvider density="compact">
+          <Button>Nested compact provider</Button>
+          <DensityValueExample />
+          <DensityValueExample density="comfortable" label="Explicit density"/>
+        </DensityProvider>
+        <Button>After nested provider</Button>
+      </div>
+    </DensityProvider>)
+}
+```
+
+### Dynamic
+
+```tsx
+{
+    render: () => {
+        const [density, setDensity] = useState<Density>("comfortable");
+        return (<DensityProvider density={density}>
+        <DensityValueExample />
+        <Input aria-label="Persistent name"/>
+        <Popover>
+          <PopoverTrigger render={<Button />}>Density details</PopoverTrigger>
+          <PopoverContent>
+            <PopoverTitle>Live density</PopoverTitle>
+            <DensityValueExample />
+            <Button onClick={() => setDensity("compact")}>Use compact</Button>
+            <Button onClick={() => setDensity("comfortable")}>Use comfortable</Button>
+          </PopoverContent>
+        </Popover>
+      </DensityProvider>);
+    }
+}
+```
+
+### PortalOverride
+
+```tsx
+{
+    render: () => (<DensityProvider density="compact">
+      <Button>Compact control</Button>
+      <Popover>
+        <PopoverTrigger render={<Button />}>Override details</PopoverTrigger>
+        <PopoverContent density="comfortable">
+          <PopoverTitle>Explicit portal density</PopoverTitle>
+          <Button>Comfortable control</Button>
+        </PopoverContent>
+      </Popover>
+    </DensityProvider>)
+}
+```
+
+### AncestorTokens
+
+```tsx
+{
+    render: () => (<div className="flex flex-col gap-4">
+      <DensityProvider density="compact">
+        <Button>Reference control</Button>
+        <Badge>Reference tag</Badge>
+      </DensityProvider>
+      <div className="[--ag-control-text:30px] [--ag-text-xs:30px]">
+        <DensityProvider density="compact">
+          <Button>Isolated control</Button>
+          <Badge>Isolated tag</Badge>
+        </DensityProvider>
+      </div>
+    </div>)
+}
+```
+
+### RenderedElement
+
+```tsx
+{
+    render: () => (<DensityProvider density="compact" render={<section aria-label="Compact toolbar" className="flex gap-2"/>}>
+      <Button>Rendered control</Button>
+      <Button>Second control</Button>
+    </DensityProvider>)
+}
+```

package/llms/components/providers/DirectionProvider.md

@@ -0,0 +1,39 @@
+# DirectionProvider
+
+Story: @alexgorbatchev/shadcn/components/providers/DirectionProvider
+Source: src/components/stories/providers/DirectionProvider.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/providers/DirectionProvider.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DirectionProvider, ToggleGroup, ToggleGroupItem } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+DirectionProvider
+```
+
+## Default args
+
+```tsx
+{ direction: "rtl" }
+```
+
+## Default render
+
+```tsx
+(args) => (<DirectionProvider {...args}>
+      <ToggleGroup aria-label="Direction example">
+        <ToggleGroupItem value="first">First</ToggleGroupItem>
+        <ToggleGroupItem value="second">Second</ToggleGroupItem>
+      </ToggleGroup>
+    </DirectionProvider>)
+```
+
+## Examples
+
+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.