@sybilion/uilib 1.0.20

package/src/docs/pages/BadgePage.tsx

@@ -0,0 +1,27 @@
+import { Badge } from '#uilib/components/ui/Badge';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function BadgePage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Badge' }]}
+        title="Badge"
+        subheader="Status and label badges."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem' }}
+      >
+        <Badge>Default</Badge>
+        <Badge variant="outline">Outline</Badge>
+        <Badge variant="red">Red</Badge>
+        <Badge variant="green">Green</Badge>
+        <Badge squared>Squared</Badge>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/BreadcrumbPage.tsx

@@ -0,0 +1,38 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage as BreadcrumbPageCrumb,
+  BreadcrumbSeparator,
+} from '#uilib/components/ui/Breadcrumb';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function BreadcrumbPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Breadcrumb' }]}
+        title="Breadcrumb"
+        subheader="Inline navigation trail."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPageCrumb>Breadcrumb</BreadcrumbPageCrumb>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ButtonPage.tsx

@@ -0,0 +1,142 @@
+import { Button } from '#uilib/components/ui/Button';
+import type { ButtonVariant } from '#uilib/components/ui/Button/Button.types';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Plus } from 'lucide-react';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const VARIANTS: ButtonVariant[] = [
+  'default',
+  'destructive',
+  'outline',
+  'secondary',
+  'ghost',
+  'link',
+];
+
+const SIZES = ['sm', 'md', 'lg'] as const;
+
+export default function ButtonPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Button' }]}
+        title="Button"
+        subheader="Variants, sizes, icon mode, and disabled state."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}
+      >
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Variants × sizes</h3>
+          <div style={{ overflowX: 'auto' }}>
+            <table style={{ borderCollapse: 'collapse', width: '100%' }}>
+              <thead>
+                <tr>
+                  <th style={{ textAlign: 'left', padding: '0.5rem' }} />
+                  {SIZES.map(s => (
+                    <th key={s} style={{ padding: '0.5rem' }}>
+                      {s}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {VARIANTS.map(v => (
+                  <tr key={v}>
+                    <td
+                      style={{
+                        padding: '0.5rem',
+                        fontWeight: 600,
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {v}
+                    </td>
+                    {SIZES.map(s => (
+                      <td key={s} style={{ padding: '0.5rem' }}>
+                        <Button type="button" variant={v} size={s}>
+                          {v}
+                        </Button>
+                      </td>
+                    ))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Icon buttons</h3>
+          <p
+            style={{
+              marginBottom: '0.75rem',
+              color: 'var(--muted-foreground)',
+            }}
+          >
+            Square icon buttons — <code>icon</code> prop; pair with{' '}
+            <code>size</code> for sm / md / lg.
+          </p>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '0.75rem',
+              alignItems: 'center',
+            }}
+          >
+            {SIZES.map(s => (
+              <Button
+                key={s}
+                type="button"
+                variant="default"
+                size={s}
+                icon
+                aria-label={`Add ${s}`}
+              >
+                <Plus size={20} />
+              </Button>
+            ))}
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '0.75rem',
+              alignItems: 'center',
+              marginTop: '0.75rem',
+            }}
+          >
+            {VARIANTS.map(v => (
+              <Button key={v} type="button" variant={v} icon aria-label={v}>
+                <Plus size={20} />
+              </Button>
+            ))}
+          </div>
+        </section>
+        <section>
+          <h3 style={{ marginBottom: '1rem' }}>Disabled</h3>
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
+            <Button type="button" disabled>
+              Disabled
+            </Button>
+            <Button type="button" variant="outline" disabled>
+              Disabled outline
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              icon
+              disabled
+              aria-label="Disabled icon"
+            >
+              <Plus size={20} />
+            </Button>
+          </div>
+        </section>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/CardPage.tsx

@@ -0,0 +1,42 @@
+import { Button } from '#uilib/components/ui/Button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '#uilib/components/ui/Card';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function CardPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Card' }]}
+        title="Card"
+        subheader="Container with header, content, and footer slots."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Card style={{ maxWidth: 360 }}>
+          <CardHeader>
+            <CardTitle>Card title</CardTitle>
+            <CardDescription>Supporting description text.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p style={{ margin: 0 }}>Main content area.</p>
+          </CardContent>
+          <CardFooter>
+            <Button type="button" size="sm">
+              Action
+            </Button>
+          </CardFooter>
+        </Card>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -0,0 +1,161 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { ChartAreaInteractive } from '#uilib/components/ui/ChartAreaInteractive';
+import type { TimeRange } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers';
+import type {
+  ChartDataPoint,
+  OverlayMode,
+} from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
+import type { ForecastData } from '#uilib/types/forecast-data';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const DEMO_FORECAST_ID = 1;
+
+const DEMO_FORECAST_DATES = ['2023-06-01', '2023-07-01', '2023-08-01'] as const;
+
+const DEMO_OVERLAY_FORECAST: ForecastData = {
+  analysisId: DEMO_FORECAST_ID,
+  dates: [...DEMO_FORECAST_DATES],
+  forecastValues: [13.5, 14, 15],
+  allQuantiles: {
+    '0.1': [12.5, 13.2, 14],
+    '0.25': [13, 13.6, 14.5],
+    '0.5': [13.5, 14, 15],
+    '0.75': [14, 14.5, 15.5],
+    '0.9': [14.5, 15, 16.2],
+  },
+};
+
+const INTERVAL_LOWER_QUANTILES = ['0.1', '0.25'];
+const INTERVAL_UPPER_QUANTILES = ['0.75', '0.9'];
+
+const DEMO_DISCRETE_THRESHOLDS = (() => {
+  const nums = new Set<number>();
+  DEMO_OVERLAY_FORECAST.forecastValues.forEach(v => nums.add(v));
+  const q = DEMO_OVERLAY_FORECAST.allQuantiles;
+  if (q) {
+    for (const arr of Object.values(q)) {
+      arr.forEach(v => nums.add(v));
+    }
+  }
+  const sorted = [...nums].sort((a, b) => a - b);
+  return { lower: sorted, upper: sorted };
+})();
+
+const INITIAL_CHART: ChartDataPoint[] = [
+  { date: '2023-01-01', historical: 10 },
+  { date: '2023-02-01', historical: 12 },
+  { date: '2023-03-01', historical: 11 },
+  { date: '2023-04-01', historical: 14 },
+  { date: '2023-05-01', historical: 13 },
+  { date: '2023-06-01', [`forecast_${DEMO_FORECAST_ID}`]: 13.5 },
+  { date: '2023-07-01', [`forecast_${DEMO_FORECAST_ID}`]: 14 },
+  { date: '2023-08-01', [`forecast_${DEMO_FORECAST_ID}`]: 15 },
+];
+
+const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
+  { id: DEMO_FORECAST_ID, name: 'Forecast' },
+];
+
+type DemoMode = 'none' | OverlayMode;
+
+export default function ChartAreaInteractivePage() {
+  const [timeRange, setTimeRange] = useState<TimeRange>('1y');
+  const [pinMonth, setPinMonth] = useState<string | undefined>(undefined);
+  const [demoMode, setDemoMode] = useState<DemoMode>('none');
+  const [chartData] = useState<ChartDataPoint[]>(INITIAL_CHART);
+  const [hidden, setHidden] = useState<Set<string>>(new Set());
+  const [selectedLowerQuantile, setSelectedLowerQuantile] = useState<
+    string | null
+  >('0.1');
+  const [selectedUpperQuantile, setSelectedUpperQuantile] = useState<
+    string | null
+  >('0.9');
+  const [upperThreshold, setUpperThreshold] = useState(15);
+
+  const toggleLegendSeries = useCallback((key: string) => {
+    setHidden(prev => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+
+  const ensureAnalysisSeriesVisible = useCallback(() => {}, []);
+
+  const showQuantileOverlay =
+    demoMode === 'intervals' || demoMode === 'thresholds';
+
+  const overlayForecastData = useMemo(
+    () =>
+      showQuantileOverlay ? { [DEMO_FORECAST_ID]: DEMO_OVERLAY_FORECAST } : {},
+    [showQuantileOverlay],
+  );
+
+  const selectedForecast = useMemo(
+    () =>
+      showQuantileOverlay
+        ? { id: DEMO_FORECAST_ID, name: 'Forecast' }
+        : undefined,
+    [showQuantileOverlay],
+  );
+
+  const mode: OverlayMode | undefined =
+    demoMode === 'none' ? undefined : demoMode;
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'ChartAreaInteractive' }]}
+        title="ChartAreaInteractive"
+        subheader="Interactive area chart shell with time range controls."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Tabs
+          value={demoMode}
+          onValueChange={v => setDemoMode(v as DemoMode)}
+          style={{ marginBottom: 16 }}
+        >
+          <TabsList>
+            <TabsTrigger value="none">None</TabsTrigger>
+            <TabsTrigger value="pin">Pin</TabsTrigger>
+            <TabsTrigger value="intervals">Intervals</TabsTrigger>
+            <TabsTrigger value="thresholds">Thresholds</TabsTrigger>
+          </TabsList>
+        </Tabs>
+        <ChartAreaInteractive
+          timeRange={timeRange}
+          onTimeRangeChange={v => setTimeRange(v as TimeRange)}
+          pinMonth={pinMonth}
+          onPinMonthChange={setPinMonth}
+          mode={mode}
+          chartData={chartData}
+          forecastData={DEMO_FORECAST_ITEMS}
+          loading={false}
+          isDarkTheme={false}
+          toggleLegendSeries={toggleLegendSeries}
+          ensureAnalysisSeriesVisible={ensureAnalysisSeriesVisible}
+          hiddenSeries={hidden}
+          overlayForecastData={overlayForecastData}
+          selectedForecast={selectedForecast}
+          lowerQuantiles={INTERVAL_LOWER_QUANTILES}
+          upperQuantiles={INTERVAL_UPPER_QUANTILES}
+          selectedLowerQuantile={selectedLowerQuantile}
+          selectedUpperQuantile={selectedUpperQuantile}
+          onLowerQuantileChange={setSelectedLowerQuantile}
+          onUpperQuantileChange={setSelectedUpperQuantile}
+          upperThreshold={upperThreshold}
+          onUpperThresholdChange={setUpperThreshold}
+          discreteThresholdValues={DEMO_DISCRETE_THRESHOLDS}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ChartPage.tsx

@@ -0,0 +1,50 @@
+import { ChartContainer } from '#uilib/components/ui/Chart';
+import type { ChartConfig } from '#uilib/components/ui/Chart';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const DATA = [
+  { month: 'Jan', v: 12 },
+  { month: 'Feb', v: 18 },
+  { month: 'Mar', v: 15 },
+  { month: 'Apr', v: 22 },
+];
+
+const config = {
+  v: { label: 'Value', color: 'hsl(var(--chart-1))' },
+} satisfies ChartConfig;
+
+export default function ChartPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Chart' }]}
+        title="Chart"
+        subheader="ChartContainer + Recharts line chart."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <ChartContainer
+          config={config}
+          style={{ minHeight: 240, width: '100%' }}
+        >
+          <LineChart data={DATA} accessibilityLayer>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} />
+            <YAxis tickLine={false} axisLine={false} width={32} />
+            <Line
+              dataKey="v"
+              type="natural"
+              stroke="var(--color-chart-1)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ChatPage.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+
+import {
+  Chat,
+  ChatMessage,
+  ChatPrompt,
+  MessageRole,
+} from '#uilib/components/ui/Chat';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function ChatPage() {
+  const [text, setText] = useState('');
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Chat' }]}
+        title="Chat"
+        subheader="Chat shell with message list and prompt."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{
+          maxWidth: 560,
+          border: '1px solid var(--border)',
+          borderRadius: 12,
+          padding: 16,
+        }}
+      >
+        <Chat>
+          <ChatMessage
+            role={MessageRole.ASSISTANT}
+            text="This is a static assistant message in the docs preview."
+          />
+          <ChatMessage role={MessageRole.USER} text="Example user message." />
+          <ChatPrompt
+            id="docs-chat-inline"
+            placeholder="Message…"
+            onSubmit={msg => {
+              setText(msg);
+            }}
+          />
+          {text ? (
+            <p
+              style={{
+                marginTop: 12,
+                fontSize: 12,
+                color: 'var(--muted-foreground)',
+              }}
+            >
+              Last submit (local only): {text}
+            </p>
+          ) : null}
+        </Chat>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/CheckboxPage.tsx

@@ -0,0 +1,25 @@
+import { Checkbox } from '#uilib/components/ui/Checkbox';
+import { Label } from '#uilib/components/ui/Label';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function CheckboxPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Checkbox' }]}
+        title="Checkbox"
+        subheader="Binary toggle with label."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', alignItems: 'center', gap: 8 }}
+      >
+        <Checkbox id="c1" />
+        <Label htmlFor="c1">Accept terms</Label>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/DialogPage.tsx

@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import { Button } from '#uilib/components/ui/Button';
+import { Dialog } from '#uilib/components/ui/Dialog';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function DialogPage() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Dialog' }]}
+        title="Dialog"
+        subheader="Modal dialog with trigger and footer."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Dialog
+          open={open}
+          onOpenChange={setOpen}
+          trigger={<Button type="button">Open dialog</Button>}
+          title="Dialog title"
+          subtitle="Optional subtitle"
+          content={<p style={{ margin: 0 }}>Dialog body content.</p>}
+          footer={
+            <Button type="button" onClick={() => setOpen(false)}>
+              Close
+            </Button>
+          }
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/DrawerPage.tsx

@@ -0,0 +1,48 @@
+import { Button } from '#uilib/components/ui/Button';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '#uilib/components/ui/Drawer';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function DrawerPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Drawer' }]}
+        title="Drawer"
+        subheader="Mobile-friendly drawer (Vaul)."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Drawer>
+          <DrawerTrigger asChild>
+            <Button type="button">Open drawer</Button>
+          </DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Drawer title</DrawerTitle>
+              <DrawerDescription>Short description.</DrawerDescription>
+            </DrawerHeader>
+            <DrawerFooter>
+              <DrawerClose asChild>
+                <Button type="button" variant="outline">
+                  Close
+                </Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </DrawerContent>
+        </Drawer>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/DropZonePage.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { DropZone } from '#uilib/components/ui/DropZone/DropZone';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function DropZonePage() {
+  const [name, setName] = useState<string | null>(null);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'DropZone' }]}
+        title="DropZone"
+        subheader="Drag and drop or pick a file."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <DropZone
+          accept=".csv,.txt"
+          label="Drop a .csv or .txt file here"
+          onFile={file => setName(file.name)}
+        />
+        {name ? (
+          <p style={{ marginTop: 12, fontSize: 14 }}>Selected: {name}</p>
+        ) : null}
+      </PageContentSection>
+    </>
+  );
+}