@olwiba/ui 0.2.25 → 0.2.26

package/site/demos/underlay.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import { Underlay, type UnderlayVariant } from '@olwiba/ui';
+import { DemoControls, useUsageCode } from '~/components/ComponentPreview';
+import { Button, Badge } from '@olwiba/cn';
+
+const variants: UnderlayVariant[] = ['dots', 'lines', 'cross', 'glow'];
+
+function MockContent() {
+  return (
+    <div className="relative z-10 flex w-full flex-col gap-4 p-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <p className="text-xs text-muted-foreground">Total revenue</p>
+          <p className="text-2xl font-semibold">$48,295</p>
+        </div>
+        <Badge variant="secondary">+12.4%</Badge>
+      </div>
+      <div className="flex gap-3">
+        {['Mon', 'Tue', 'Wed', 'Thu', 'Fri'].map((d, i) => (
+          <div key={d} className="flex flex-1 flex-col items-center gap-1">
+            <div
+              className="w-full rounded bg-primary/20"
+              style={{ height: `${[40, 65, 50, 80, 55][i]}px` }}
+            />
+            <span className="text-[10px] text-muted-foreground">{d}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function UnderlayDemo() {
+  const [variant, setVariant] = React.useState<UnderlayVariant>('dots');
+
+  const extraProps = variant === 'glow' ? ` size={320} followCursor blur="xl"` : '';
+
+  useUsageCode(
+    `<div className="relative overflow-hidden rounded-xl">\n  <Underlay variant="${variant}"${extraProps} />\n  <div className="relative z-10 p-8">Content</div>\n</div>`,
+  );
+
+  return (
+    <>
+      <div className="relative w-full overflow-hidden bg-card">
+        <Underlay
+          key={variant}
+          variant={variant}
+          {...(variant === 'glow' ? { size: 360, followCursor: true, blur: 'xl' as const } : {})}
+        />
+        <MockContent />
+      </div>
+
+      <DemoControls>
+        <div className="space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">Variant</span>
+          <div className="flex flex-wrap gap-1.5">
+            {variants.map((v) => (
+              <Button
+                key={v}
+                variant={variant === v ? 'default' : 'secondary'}
+                size="sm"
+                onClick={() => setVariant(v)}
+              >
+                {v}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </DemoControls>
+    </>
+  );
+}

package/site/demos/update-banner.tsx

@@ -0,0 +1,31 @@
+import { UpdateBanner } from '@olwiba/ui';
+import * as React from 'react';
+
+export default function UpdateBannerDemo() {
+  const [show, setShow] = React.useState(true);
+
+  return (
+    <div className="relative min-h-[260px] overflow-hidden rounded-2xl border bg-background p-6">
+      <p className="text-sm text-muted-foreground">
+        The banner polls a version endpoint and slides in when the deployed version no longer matches
+        the running bundle. This demo forces it visible.
+      </p>
+      <button
+        className="mt-4 rounded-md border px-3 py-1.5 text-sm"
+        onClick={() => setShow((value) => !value)}
+      >
+        Toggle banner
+      </button>
+
+      {/* Demo container overrides the fixed positioning context */}
+      <div className="absolute inset-0 [&>div]:absolute [&>div]:top-4">
+        <UpdateBanner
+          forceShow={show}
+          currentVersion="dev-local"
+          fetchVersion={async () => ({ version: 'dev-local' })}
+          onRefresh={() => setShow(false)}
+        />
+      </div>
+    </div>
+  );
+}

package/site/demos/use-copy-to-clipboard.tsx

@@ -0,0 +1,21 @@
+'use client';
+import { useCopyToClipboard } from '@olwiba/ui';
+import { Button } from '@olwiba/cn';
+import { Check, Copy } from 'lucide-react';
+
+const snippet = 'bun add @olwiba/ui @olwiba/cn';
+
+export default function Demo() {
+  const [copied, copy] = useCopyToClipboard();
+
+  return (
+    <div className="flex items-center justify-center p-8">
+      <div className="flex items-center gap-2 rounded-xl border bg-muted px-4 py-2">
+        <code className="font-mono text-sm">{snippet}</code>
+        <Button size="icon" variant="ghost" className="size-7 shrink-0" onClick={() => copy(snippet)}>
+          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/site/demos/use-debounce.tsx

@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import { useDebounce } from '@olwiba/ui';
+import { Input } from '@olwiba/cn';
+
+export default function Demo() {
+  const [value, setValue] = React.useState('');
+  const debounced = useDebounce(value, 400);
+
+  return (
+    <div className="mx-auto flex max-w-sm flex-col gap-4 p-8">
+      <Input placeholder="Type something..." value={value} onChange={(e) => setValue(e.target.value)} />
+      <div className="space-y-1 rounded-xl border bg-card p-4 text-sm">
+        <div className="flex justify-between gap-4">
+          <span className="text-muted-foreground">Live</span>
+          <span className="font-mono">{value || '—'}</span>
+        </div>
+        <div className="flex justify-between gap-4">
+          <span className="text-muted-foreground">Debounced (400ms)</span>
+          <span className="font-mono">{debounced || '—'}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/site/demos/use-intersection-observer.tsx

@@ -0,0 +1,32 @@
+'use client';
+import * as React from 'react';
+import { useIntersectionObserver } from '@olwiba/ui';
+import { cn } from '@olwiba/cn';
+
+export default function Demo() {
+  const [ref, isVisible] = useIntersectionObserver({ threshold: 0.5 });
+
+  return (
+    <div className="space-y-3 p-6">
+      <div className="text-sm text-center">
+        Status:{' '}
+        <strong className={isVisible ? 'text-emerald-500' : 'text-muted-foreground'}>
+          {isVisible ? 'intersecting' : 'not intersecting'}
+        </strong>
+      </div>
+      <div className="h-44 overflow-y-auto rounded-xl border">
+        <div className="flex h-16 items-center justify-center text-xs text-muted-foreground">↓ scroll</div>
+        <div
+          ref={ref as unknown as React.RefObject<HTMLDivElement>}
+          className={cn(
+            'mx-4 rounded-xl border p-4 text-sm text-center transition-all duration-500',
+            isVisible ? 'border-primary bg-primary/5 text-primary' : 'bg-muted text-muted-foreground',
+          )}
+        >
+          Observed element
+        </div>
+        <div className="flex h-16 items-center justify-center text-xs text-muted-foreground">↑ scroll</div>
+      </div>
+    </div>
+  );
+}

package/site/demos/use-local-storage.tsx

@@ -0,0 +1,22 @@
+'use client';
+import { useLocalStorage } from '@olwiba/ui';
+import { Button } from '@olwiba/cn';
+
+export default function Demo() {
+  const [count, setCount] = useLocalStorage('demo-count', 0);
+
+  return (
+    <div className="flex flex-col items-center gap-4 p-8">
+      <div className="w-40 rounded-2xl border bg-card p-6 text-center">
+        <div className="text-4xl font-bold tabular-nums">{count}</div>
+        <div className="mt-1 text-xs text-muted-foreground">persisted in localStorage</div>
+      </div>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={() => setCount(count - 1)}>−</Button>
+        <Button variant="outline" size="sm" onClick={() => setCount(0)}>Reset</Button>
+        <Button size="sm" onClick={() => setCount(count + 1)}>+</Button>
+      </div>
+      <p className="text-xs text-muted-foreground">Value persists across page reloads.</p>
+    </div>
+  );
+}

package/site/demos/use-media-query.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { useMediaQuery } from '@olwiba/ui';
+import { cn } from '@olwiba/cn';
+
+const breakpoints = [
+  { label: 'sm', query: '(min-width: 640px)' },
+  { label: 'md', query: '(min-width: 768px)' },
+  { label: 'lg', query: '(min-width: 1024px)' },
+  { label: 'xl', query: '(min-width: 1280px)' },
+  { label: 'dark', query: '(prefers-color-scheme: dark)' },
+];
+
+function Row({ label, query }: { label: string; query: string }) {
+  const matches = useMediaQuery(query);
+  return (
+    <div className={cn('flex items-center justify-between rounded-xl border px-4 py-2.5 text-sm transition-colors', matches ? 'border-primary bg-primary/5' : 'bg-card')}>
+      <code className="font-mono text-xs">{query}</code>
+      <span className={cn('text-xs font-medium', matches ? 'text-primary' : 'text-muted-foreground')}>
+        {matches ? 'matches' : 'no match'}
+      </span>
+    </div>
+  );
+}
+
+export default function Demo() {
+  return (
+    <div className="flex flex-col gap-2 p-6">
+      {breakpoints.map((bp) => <Row key={bp.label} {...bp} />)}
+    </div>
+  );
+}

package/site/demos/use-pagination.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { usePagination } from '@olwiba/ui';
+import { Button } from '@olwiba/cn';
+
+const ALL_ITEMS = Array.from({ length: 23 }, (_, i) => `Item ${i + 1}`);
+
+export default function Demo() {
+  const { page, totalPages, offset, pageSize, hasPrev, hasNext, prev, next, goTo } = usePagination(ALL_ITEMS.length, 5);
+  const pageItems = ALL_ITEMS.slice(offset, offset + pageSize);
+
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <div className="space-y-1.5">
+        {pageItems.map((item) => (
+          <div key={item} className="rounded-xl border bg-card px-4 py-2.5 text-sm">{item}</div>
+        ))}
+      </div>
+      <div className="flex items-center justify-between gap-2">
+        <Button variant="outline" size="sm" disabled={!hasPrev} onClick={prev}>Previous</Button>
+        <div className="flex gap-1">
+          {Array.from({ length: totalPages }, (_, i) => (
+            <Button key={i} size="sm" variant={page === i + 1 ? 'default' : 'outline'} className="size-8 p-0" onClick={() => goTo(i + 1)}>
+              {i + 1}
+            </Button>
+          ))}
+        </div>
+        <Button variant="outline" size="sm" disabled={!hasNext} onClick={next}>Next</Button>
+      </div>
+    </div>
+  );
+}

package/site/demos/user-profile-block.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div className="p-8 text-muted-foreground text-sm">UserProfileBlock — coming soon</div>;
+}

package/site/demos/version-banner.tsx

@@ -0,0 +1,27 @@
+import { VersionBanner } from '@olwiba/ui';
+import * as React from 'react';
+
+export default function VersionBannerDemo() {
+  const [show, setShow] = React.useState(true);
+
+  return (
+    <div className="w-full max-w-lg rounded-lg border overflow-hidden">
+      {show ? (
+        <VersionBanner
+          version="2.1.0"
+          message="New components available — see what's changed."
+          onDismiss={() => setShow(false)}
+        />
+      ) : (
+        <div className="flex items-center justify-center py-4">
+          <button
+            onClick={() => setShow(true)}
+            className="text-sm text-muted-foreground underline"
+          >
+            Reset demo
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/email/EmailLinkFallback.tsx

@@ -17,7 +17,13 @@ export function EmailLinkFallback({
         {label}
       </EmailText>
       <EmailText style={{ margin: 0 }}>
-        <EmailLink href={actionUrl} brandColor={brandColor}>
+        {/*
+          Set through `style` rather than CN's `brandColor` prop, which this
+          package's pinned @olwiba/cn does not have yet. CN applies that prop as
+          `color` anyway, and `style` wins over its default, so the result is
+          identical without coupling this file to a release.
+        */}
+        <EmailLink href={actionUrl} style={brandColor ? { color: brandColor } : undefined}>
           {actionUrl}
         </EmailLink>
       </EmailText>

package/src/email/index.ts

@@ -1,3 +1,6 @@
 export { ActionEmail, type ActionEmailProps } from './ActionEmail';
 export { NoticeEmail, type NoticeEmailProps } from './NoticeEmail';
 export { EmailLayout, type EmailLayoutProps } from './EmailLayout';
+// Used internally by ActionEmail and useful on its own: any email with a button
+// wants a copyable link for the clients that strip them.
+export { EmailLinkFallback, type EmailLinkFallbackProps } from './EmailLinkFallback';