@sybilion/uilib 1.0.20

package/src/docs/pages/DropdownMenuPage.tsx

@@ -0,0 +1,41 @@
+import { Button } from '#uilib/components/ui/Button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#uilib/components/ui/DropdownMenu';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function DropdownMenuPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'DropdownMenu' }]}
+        title="DropdownMenu"
+        subheader="Context menu with items."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button type="button" variant="outline">
+              Open menu
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onSelect={() => {}}>Item one</DropdownMenuItem>
+            <DropdownMenuItem onSelect={() => {}}>Item two</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/FlickeringGridPage.tsx

@@ -0,0 +1,23 @@
+import { FlickeringGrid } from '#uilib/components/ui/FlickeringGrid';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function FlickeringGridPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'FlickeringGrid' }]}
+        title="FlickeringGrid"
+        subheader="Decorative animated grid background."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ height: 200, position: 'relative', overflow: 'hidden' }}
+      >
+        <FlickeringGrid className="" />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/FoldablePage.tsx

@@ -0,0 +1,25 @@
+import { Foldable } from '#uilib/components/ui/Foldable';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function FoldablePage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Foldable' }]}
+        title="Foldable"
+        subheader="Expandable section with header."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Foldable
+          header={<span>Click to expand</span>}
+          content={<p style={{ margin: 0 }}>Hidden content inside.</p>}
+          defaultUnfolded
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ImagePage.tsx

@@ -0,0 +1,26 @@
+import { Image } from '#uilib/components/ui/Image';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function ImagePage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Image' }]}
+        title="Image"
+        subheader="Responsive image wrapper."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Image
+          url="https://picsum.photos/seed/uilib/400/240"
+          alt="Sample"
+          fallback={null}
+          style={{ maxWidth: '100%', borderRadius: 8 }}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/ImageWithFallbackPage.tsx

@@ -0,0 +1,34 @@
+import { ImageWithFallback } from '#uilib/components/ui/ImageWithFallback';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function ImageWithFallbackPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'ImageWithFallback' }]}
+        title="ImageWithFallback"
+        subheader="Image with fallback on error."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <p style={{ marginBottom: 12 }}>Broken URL shows fallback:</p>
+        <ImageWithFallback
+          url="https://invalid.example.com/missing.png"
+          alt=""
+          fallback={<span>Failed to load</span>}
+          style={{
+            width: 200,
+            height: 120,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'var(--muted)',
+          }}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/InputPage.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+import { Input } from '#uilib/components/ui/Input';
+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 InputPage() {
+  const [v, setV] = useState('');
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Input' }]}
+        title="Input"
+        subheader="Text input."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 8,
+          maxWidth: 320,
+        }}
+      >
+        <Label htmlFor="in">Label</Label>
+        <Input
+          id="in"
+          value={v}
+          onChange={e => setV(e.target.value)}
+          placeholder="Type…"
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/InteractiveContentPage.tsx

@@ -0,0 +1,23 @@
+import { InteractiveContent } from '#uilib/components/ui/InteractiveContent';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const SAMPLE = 'Use **bold** and *italic* in formatted text.';
+
+export default function InteractiveContentPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'InteractiveContent' }]}
+        title="InteractiveContent"
+        subheader="Inline formatting from assistant-style text."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <InteractiveContent text={SAMPLE} />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/LabelPage.tsx

@@ -0,0 +1,21 @@
+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 LabelPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Label' }]}
+        title="Label"
+        subheader="Form label."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Label htmlFor="x">Example label</Label>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/LabelWithIdPage.tsx

@@ -0,0 +1,21 @@
+import { LabelWithId } from '#uilib/components/ui/LabelWithId';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function LabelWithIdPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'LabelWithId' }]}
+        title="LabelWithId"
+        subheader="Label with stable id for anchors."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <LabelWithId id={42} label="Analysis label" />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/LabeledInputPage.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { LabeledInput } from '#uilib/components/ui/LabeledInput/LabeledInput';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function LabeledInputPage() {
+  const [value, setValue] = useState('');
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'LabeledInput' }]}
+        title="LabeledInput"
+        subheader="Label + input row."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <LabeledInput
+          id="labeled-docs"
+          name="demo"
+          label="Field"
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          placeholder="Value"
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/LegacyPlatformLinkPage.tsx

@@ -0,0 +1,23 @@
+import { LegacyPlatformLink } from '#uilib/components/ui/LegacyPlatformLink';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function LegacyPlatformLinkPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'LegacyPlatformLink' }]}
+        title="LegacyPlatformLink"
+        subheader="Link styled for legacy platform navigation."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <LegacyPlatformLink redirectPath="/v1/dashboard">
+          Legacy platform link
+        </LegacyPlatformLink>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/LogoPage.tsx

@@ -0,0 +1,25 @@
+import { Logo } from '#uilib/components/ui/Logo';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function LogoPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Logo' }]}
+        title="Logo"
+        subheader="Brand mark with optional wordmark."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection
+        style={{ display: 'flex', gap: '1.5rem', alignItems: 'center' }}
+      >
+        <Logo size="sm" />
+        <Logo size="md" />
+        <Logo size="lg" showText={false} />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/MobileAdaptiveSelectorPage.tsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+
+import { MobileAdaptiveSelector } from '#uilib/components/ui/MobileAdaptiveSelector';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const ITEMS = [
+  { value: 'a', label: 'Alpha' },
+  { value: 'b', label: 'Beta' },
+  { value: 'c', label: 'Gamma' },
+];
+
+export default function MobileAdaptiveSelectorPage() {
+  const [value, setValue] = useState('a');
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'MobileAdaptiveSelector' }]}
+        title="MobileAdaptiveSelector"
+        subheader="Toggle group on desktop, select on mobile (or many items)."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <MobileAdaptiveSelector
+          value={value}
+          onChange={setValue}
+          items={ITEMS}
+          isDropdown={false}
+        />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/NumberControlPage.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+import { NumberControl } from '#uilib/components/ui/NumberControl';
+import { PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function NumberControlPage() {
+  const [v, setV] = useState(1);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'NumberControl' }]}
+        title="NumberControl"
+        subheader="Stepper with minus / plus."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <NumberControl value={v} onChange={setV} min={0} max={10} step={0.5} />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/PagePage.tsx

@@ -0,0 +1,25 @@
+import { PageContent, PageContentSection } from '#uilib/components/ui/Page';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function PagePage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Page' }]}
+        title="Page"
+        subheader="PageContent and PageContentSection layout helpers."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContent>
+        <PageContentSection>
+          <p style={{ margin: 0 }}>First section content.</p>
+        </PageContentSection>
+        <PageContentSection>
+          <p style={{ margin: 0 }}>Second section content.</p>
+        </PageContentSection>
+      </PageContent>
+    </>
+  );
+}

package/src/docs/pages/ProgressPage.tsx

@@ -0,0 +1,21 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Progress } from '#uilib/components/ui/Progress';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function ProgressPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Progress' }]}
+        title="Progress"
+        subheader="Progress bar."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Progress value={45} style={{ maxWidth: 320 }} />
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/RegionCoordsPage.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { RegionSelector } from '#uilib/components/ui/RegionCoords';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+const REGIONS = {
+  NYC: { longitude: -74.006, latitude: 40.7128 },
+  London: { longitude: -0.1276, latitude: 51.5074 },
+};
+
+export default function RegionCoordsPage() {
+  const [picked, setPicked] = useState<string | null>(null);
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'RegionCoords' }]}
+        title="RegionCoords"
+        subheader="RegionSelector — pick a region from map coordinates."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <RegionSelector
+          regions={REGIONS}
+          onSelect={(name, coords) => {
+            setPicked(
+              `${name}: ${coords.latitude.toFixed(2)}, ${coords.longitude.toFixed(2)}`,
+            );
+          }}
+        >
+          <span style={{ marginRight: 8 }}>Map region</span>
+        </RegionSelector>
+        {picked ? <p style={{ marginTop: 12 }}>{picked}</p> : null}
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/RenamerPage.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Renamer } from '#uilib/components/ui/Renamer';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function RenamerPage() {
+  const [name, setName] = useState('Dataset name');
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Renamer' }]}
+        title="Renamer"
+        subheader="Inline rename with pencil control."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Renamer value={name} onChange={setName}>
+          {name}
+        </Renamer>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/SelectPage.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+import { PageContentSection } from '#uilib/components/ui/Page';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#uilib/components/ui/Select';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function SelectPage() {
+  const [v, setV] = useState('apple');
+
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Select' }]}
+        title="Select"
+        subheader="Radix select."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Select value={v} onValueChange={setV}>
+          <SelectTrigger style={{ width: 200 }}>
+            <SelectValue placeholder="Pick fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="orange">Orange</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectContent>
+        </Select>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/SeparatorPage.tsx

@@ -0,0 +1,23 @@
+import { PageContentSection } from '#uilib/components/ui/Page';
+import { Separator } from '#uilib/components/ui/Separator';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function SeparatorPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Separator' }]}
+        title="Separator"
+        subheader="Horizontal rule."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <p style={{ margin: 0 }}>Above</p>
+        <Separator style={{ margin: '12px 0' }} />
+        <p style={{ margin: 0 }}>Below</p>
+      </PageContentSection>
+    </>
+  );
+}

package/src/docs/pages/SheetPage.tsx

@@ -0,0 +1,40 @@
+import { Button } from '#uilib/components/ui/Button';
+import { PageContentSection } from '#uilib/components/ui/Page';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '#uilib/components/ui/Sheet';
+
+import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
+import { DocsHeaderActions } from '../docsHeaderActions';
+
+export default function SheetPage() {
+  return (
+    <>
+      <AppPageHeader
+        breadcrumbs={[{ label: 'Sheet' }]}
+        title="Sheet"
+        subheader="Slide-over panel (Radix dialog)."
+        actions={<DocsHeaderActions />}
+      />
+      <PageContentSection>
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button type="button">Open sheet</Button>
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Sheet title</SheetTitle>
+              <SheetDescription>Sheet description text.</SheetDescription>
+            </SheetHeader>
+            <p style={{ marginTop: 16 }}>Sheet body.</p>
+          </SheetContent>
+        </Sheet>
+      </PageContentSection>
+    </>
+  );
+}