@alexgorbatchev/shadcn 0.0.19 → 0.0.21

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

@@ -0,0 +1,74 @@
+# Meter
+
+Story: @alexgorbatchev/shadcn/components/data-display/Meter
+Source: src/components/stories/data-display/Meter.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Meter.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Meter, MeterLabel, MeterValue, MeterTrack, MeterIndicator, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState, type ReactElement } from "react";
+```
+
+## Default component
+
+```tsx
+Meter
+```
+
+## Default args
+
+```tsx
+{ value: 25 }
+```
+
+## Default render
+
+```tsx
+() => <StorageExample />
+```
+
+## 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
+{}
+```
+
+### Formatted
+
+```tsx
+{
+    render: (args) => (<Meter {...args} min={0} max={1000} value={500} locale="en-US" format={{ style: "unit", unit: "gigabyte" }}>
+      <MeterLabel>Disk capacity</MeterLabel>
+      <MeterValue />
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+    </Meter>)
+}
+```
+
+### NativeStateCallbacks
+
+```tsx
+{
+    render: () => (<Meter value={30} className={() => "font-medium"} style={() => ({ opacity: 0.9 })}>
+      <MeterLabel className={() => "font-medium"}>Queue capacity</MeterLabel>
+      <MeterValue className={() => "font-medium"}/>
+      <MeterTrack className={() => "h-2"}>
+        <MeterIndicator className={() => "bg-primary"}/>
+      </MeterTrack>
+    </Meter>)
+}
+```

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

@@ -0,0 +1,50 @@
+# Sparkline
+
+Story: @alexgorbatchev/shadcn/components/data-display/Sparkline
+Source: src/components/stories/data-display/Sparkline.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Sparkline.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Sparkline } from "@alexgorbatchev/shadcn/chart";
+```
+
+## Default component
+
+```tsx
+Sparkline
+```
+
+## Default args
+
+```tsx
+{ label: "Weekly revenue", values: [4, 6, 3, 8, 10] }
+```
+
+## 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.
+
+### Line
+
+```tsx
+{}
+```
+
+### Area
+
+```tsx
+{
+    args: { type: "area" }
+}
+```
+
+### Bar
+
+```tsx
+{
+    args: { type: "bar" }
+}
+```

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

@@ -0,0 +1,65 @@
+# StatCard
+
+Story: @alexgorbatchev/shadcn/components/data-display/StatCard
+Source: src/components/stories/data-display/StatCard.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/StatCard.stories.tsx)
+
+## Public imports
+
+```tsx
+import { StatCard } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+StatCard
+```
+
+## Default args
+
+```tsx
+{
+    label: "Revenue",
+    value: "$24,580",
+    change: "+12%",
+    changeIntent: "positive",
+    description: "Compared with the previous month.",
+    children: <a href="#revenue">View revenue report</a>,
+}
+```
+
+## 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
+{}
+```
+
+### Decrease
+
+```tsx
+{
+    args: { change: "-5%", changeIntent: "negative", children: undefined, description: undefined }
+}
+```
+
+### Neutral
+
+```tsx
+{
+    args: { change: "No change", changeIntent: "neutral" }
+}
+```
+
+### Loading
+
+```tsx
+{
+    args: { loading: true, change: undefined }
+}
+```

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

@@ -0,0 +1,51 @@
+# StatusTracker
+
+Story: @alexgorbatchev/shadcn/components/data-display/StatusTracker
+Source: src/components/stories/data-display/StatusTracker.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/StatusTracker.stories.tsx)
+
+## Public imports
+
+```tsx
+import { StatusTracker } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+StatusTracker
+```
+
+## Default args
+
+```tsx
+{
+    label: "API uptime",
+    items: [
+        { id: "1", label: "Monday", status: "success", description: "All systems operational" },
+        { id: "2", label: "Tuesday", status: "warning" },
+        { id: "3", label: "Wednesday", status: "error", description: "Incident resolved" },
+        { id: "4", label: "Thursday", status: "unknown" },
+    ],
+    onItemSelect: fn(),
+}
+```
+
+## 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
+{}
+```
+
+### ReadOnly
+
+```tsx
+{
+    args: { onItemSelect: undefined }
+}
+```

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

@@ -0,0 +1,254 @@
+# Table
+
+Story: @alexgorbatchev/shadcn/components/data-display/Table
+Source: src/components/stories/data-display/Table.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/Table.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Button, DirectionProvider, Checkbox, Input, Field, FieldGroup, FieldLabel, NativeSelect, NativeSelectOption } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import type { ComponentProps, ReactElement } from "react";
+import { useId, useRef, useState } from "react";
+import { MoreHorizontalIcon } from "lucide-react";
+import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  createColumnHelper,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  tableFeatures,
+  useTable,
+} from "@tanstack/react-table";
+```
+
+## Default component
+
+```tsx
+Table
+```
+
+## Default render
+
+```tsx
+(args) => (<Table {...args}>
+      <TableCaption>Invoices</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead scope="col">Invoice</TableHead>
+          <TableHead scope="col">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>INV-001</TableCell>
+          <TableCell>$250.00</TableCell>
+        </TableRow>
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell>Total</TableCell>
+          <TableCell>$250.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>)
+```
+
+## 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.
+
+### AlignedColumns
+
+```tsx
+{
+    render: () => (<Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead textAlign="start">Track</TableHead>
+          <TableHead textAlign="center">Length</TableHead>
+          <TableHead textAlign="end">BPM</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell textAlign="start">First light</TableCell>
+          <TableCell textAlign="center">5:00</TableCell>
+          <TableCell textAlign="end">123</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>)
+}
+```
+
+### Default
+
+```tsx
+{}
+```
+
+### Compact
+
+```tsx
+{
+    args: { density: "compact" }
+}
+```
+
+### RightToLeft
+
+```tsx
+{
+    args: { dir: "rtl" }
+}
+```
+
+### DataTableSorting
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args}/>
+}
+```
+
+### DataTableFiltering
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args}/>
+}
+```
+
+### DataTablePagination
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args}/>
+}
+```
+
+### DataTableSelection
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args}/>
+}
+```
+
+### DataTableVisibility
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args}/>
+}
+```
+
+### DataTableCompact
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args}/>,
+    args: { density: "compact" }
+}
+```
+
+### DataTableRightToLeft
+
+```tsx
+{
+    render: (args) => (<DirectionProvider direction="rtl">
+      <div dir="rtl">
+        <InvoiceTable {...args}/>
+      </div>
+    </DirectionProvider>)
+}
+```
+
+### DataTableCompactRightToLeft
+
+```tsx
+{
+    render: (args) => (<DirectionProvider direction="rtl">
+      <div dir="rtl">
+        <InvoiceTable {...args}/>
+      </div>
+    </DirectionProvider>),
+    args: { density: "compact" }
+}
+```
+
+### DataTableRowActions
+
+```tsx
+{
+    render: (args) => <InvoiceTable {...args} hasRowActions/>
+}
+```
+
+### FixedLayout
+
+```tsx
+{
+    render: () => (<div style={{ width: 280 }}>
+      <Table layout="fixed">
+        <TableHeader>
+          <TableRow>
+            <TableHead truncate>Title</TableHead>
+            <TableHead>Album</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell truncate title="A very long track title that exceeds its column">
+              A very long track title that exceeds its column
+            </TableCell>
+            <TableCell truncate>A very long album title that exceeds its column</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>)
+}
+```
+
+### ResponsiveColumns
+
+```tsx
+{
+    render: function ResponsiveColumns() {
+        const [isWide, setWide] = useState(false);
+        return (<>
+        <Button onClick={() => setWide(!isWide)}>Resize table</Button>
+        <div className={isWide ? "w-[600px]" : "w-[350px]"}>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Title</TableHead>
+                <TableHead visibleFrom="container-sm">BPM</TableHead>
+                <TableHead visibleFrom="container-md">Format</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell>First light</TableCell>
+                <TableCell visibleFrom="container-sm">123</TableCell>
+                <TableCell visibleFrom="container-md">FLAC</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </>);
+    }
+}
+```

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

@@ -0,0 +1,57 @@
+# VirtualTable
+
+Story: @alexgorbatchev/shadcn/components/data-display/VirtualTable
+Source: src/components/stories/data-display/VirtualTable.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/VirtualTable.stories.tsx)
+
+## Public imports
+
+```tsx
+import { VirtualTable } from "@alexgorbatchev/shadcn/virtual-table";
+import { TableCell, TableHead, TableRow, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+VirtualTable
+```
+
+## Default args
+
+```tsx
+{
+    items: fixture_virtualRows,
+    getItemKey: (item) => item,
+    label: "Items",
+    maxHeight: 300,
+    columnCount: 1,
+    header: (<TableRow>
+        <TableHead scope="col">Name</TableHead>
+      </TableRow>),
+    renderRow: (item, props) => (<TableRow {...props}>
+        <TableCell>
+          <Button>{item}</Button>
+        </TableCell>
+      </TableRow>),
+}
+```
+
+## 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.
+
+### LargeCollection
+
+```tsx
+{}
+```
+
+### RetainedRow
+
+```tsx
+{
+    args: { retainedKeys: ["Item 500"] }
+}
+```