@olwiba/ui 0.0.28

package/src/overlays/Overlay.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+import { Loader2 } from 'lucide-react';
+
+// ─── Dim ──────────────────────────────────────────────────────────────────────
+
+interface DimOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  opacity?: number;
+}
+
+function DimOverlay({ opacity = 0.5, className, style, ...props }: DimOverlayProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn('absolute inset-0 bg-background', className)}
+      style={{ opacity, ...style }}
+      {...props}
+    />
+  );
+}
+
+// ─── Scrim ────────────────────────────────────────────────────────────────────
+
+type ScrimDirection = 'top' | 'bottom' | 'left' | 'right';
+
+interface ScrimOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction?: ScrimDirection;
+  color?: string;
+}
+
+const scrimGradients: Record<ScrimDirection, string> = {
+  bottom: 'to bottom',
+  top: 'to top',
+  left: 'to left',
+  right: 'to right',
+};
+
+function ScrimOverlay({ direction = 'bottom', color = 'var(--background)', className, style, ...props }: ScrimOverlayProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn('pointer-events-none absolute inset-x-0 bottom-0 h-1/2', className)}
+      style={{
+        background: `linear-gradient(${scrimGradients[direction]}, transparent, ${color})`,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+// ─── Loading ──────────────────────────────────────────────────────────────────
+
+interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+}
+
+function LoadingOverlay({ label, className, ...props }: LoadingOverlayProps) {
+  return (
+    <div
+      role="status"
+      className={cn('absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/80 backdrop-blur-sm', className)}
+      {...props}
+    >
+      <Loader2 className="size-5 animate-spin text-muted-foreground" />
+      {label && <p className="text-xs text-muted-foreground">{label}</p>}
+    </div>
+  );
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+type OverlayVariant = 'dim' | 'scrim' | 'loading';
+
+type OverlayProps =
+  | ({ variant: 'dim' } & DimOverlayProps)
+  | ({ variant: 'scrim' } & ScrimOverlayProps)
+  | ({ variant: 'loading' } & LoadingOverlayProps);
+
+export function Overlay(props: OverlayProps) {
+  if (props.variant === 'dim') return <DimOverlay {...(props as DimOverlayProps)} />;
+  if (props.variant === 'scrim') return <ScrimOverlay {...(props as ScrimOverlayProps)} />;
+  return <LoadingOverlay {...(props as LoadingOverlayProps)} />;
+}
+
+export type { OverlayProps, OverlayVariant };

package/src/overlays/Underlay.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@olwiba/cn';
+
+// ─── Grid ─────────────────────────────────────────────────────────────────────
+
+interface GridUnderlayProps extends React.SVGAttributes<SVGElement> {
+  variant: 'dots' | 'lines' | 'cross';
+  size?: number;
+  className?: string;
+}
+
+function GridUnderlay({ variant, size = 24, className, ...props }: GridUnderlayProps) {
+  const id = React.useId();
+
+  const pattern =
+    variant === 'dots' ? (
+      <circle cx={size / 2} cy={size / 2} r={1} fill="currentColor" />
+    ) : variant === 'lines' ? (
+      <path d={`M ${size} 0 L 0 0 0 ${size}`} fill="none" stroke="currentColor" strokeWidth={0.5} />
+    ) : (
+      <>
+        <line x1={size / 2} y1={0} x2={size / 2} y2={size} stroke="currentColor" strokeWidth={0.5} />
+        <line x1={0} y1={size / 2} x2={size} y2={size / 2} stroke="currentColor" strokeWidth={0.5} />
+      </>
+    );
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn('pointer-events-none absolute inset-0 h-full w-full text-foreground/15', className)}
+      {...props}
+    >
+      <defs>
+        <pattern id={id} width={size} height={size} patternUnits="userSpaceOnUse">
+          {pattern}
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+    </svg>
+  );
+}
+
+// ─── Glow ─────────────────────────────────────────────────────────────────────
+
+const blurClass = { sm: 'blur-xl', md: 'blur-2xl', lg: 'blur-3xl', xl: 'blur-[80px]' } as const;
+
+interface GlowUnderlayProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: number;
+  color?: string;
+  followCursor?: boolean;
+  blur?: keyof typeof blurClass;
+}
+
+function GlowUnderlay({
+  size = 400,
+  color = 'color-mix(in oklch, var(--primary) 45%, transparent)',
+  followCursor = false,
+  blur = 'lg',
+  className,
+  style,
+  ...props
+}: GlowUnderlayProps) {
+  const [pos, setPos] = React.useState({ x: '50%', y: '50%' });
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!followCursor) return;
+    const handleMouseMove = (e: MouseEvent) => {
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      setPos({ x: `${e.clientX - rect.left}px`, y: `${e.clientY - rect.top}px` });
+    };
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, [followCursor]);
+
+  return (
+    <div ref={containerRef} className={cn('pointer-events-none absolute inset-0 overflow-hidden', className)} {...props}>
+      <div
+        aria-hidden="true"
+        className={cn('absolute rounded-full', blurClass[blur])}
+        style={{
+          width: size,
+          height: size,
+          background: color,
+          left: pos.x,
+          top: pos.y,
+          transform: 'translate(-50%, -50%)',
+          ...style,
+        }}
+      />
+    </div>
+  );
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+type UnderlayVariant = 'dots' | 'lines' | 'cross' | 'glow';
+
+type UnderlayProps =
+  | ({ variant: 'dots' | 'lines' | 'cross' } & Omit<GridUnderlayProps, 'variant'>)
+  | ({ variant: 'glow' } & Omit<GlowUnderlayProps, 'variant'>);
+
+export function Underlay(props: UnderlayProps) {
+  if (props.variant === 'glow') {
+    return <GlowUnderlay {...(props as GlowUnderlayProps)} />;
+  }
+  return <GridUnderlay {...(props as GridUnderlayProps)} />;
+}
+
+export type { UnderlayProps, UnderlayVariant };

package/src/primitives/Badge.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { Badge as CNBadge, type BadgeProps as CNBadgeProps } from '@olwiba/cn';
+
+// Badge no longer supports mode — variant/size/disabled only.
+export type BadgeProps = CNBadgeProps;
+
+export function Badge(props: BadgeProps) {
+  return <CNBadge {...props} />;
+}

package/src/primitives/Button.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+import { Button as CNButton, type ButtonProps as CNButtonProps } from '@olwiba/cn';
+import { useUIMode } from '../context/OlwibaUIContext';
+
+export type ButtonProps = CNButtonProps;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== 'default' ? (ctxMode as "playful" | "smooth") : undefined);
+    return <CNButton mode={resolvedMode} {...props} ref={ref} />;
+  }
+);
+Button.displayName = 'Button';

package/src/primitives/Card.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Card as CNCard, type CardProps as CNCardProps,
+  CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
+} from '@olwiba/cn';
+import { useUIMode } from '../context/OlwibaUIContext';
+
+export type CardProps = CNCardProps;
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== 'default' ? (ctxMode as "playful" | "smooth") : undefined);
+    return <CNCard mode={resolvedMode} {...props} ref={ref} />;
+  }
+);
+Card.displayName = 'Card';
+
+// Sub-components are pass-throughs — no mode logic needed.
+export { CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/src/primitives/Checkbox.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { Checkbox as CNCheckbox, type CheckboxProps as CNCheckboxProps } from '@olwiba/cn';
+import { useUIMode } from '../context/OlwibaUIContext';
+
+export type CheckboxProps = CNCheckboxProps;
+
+export const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CNCheckbox>,
+  CheckboxProps
+>(({ mode, ...props }, ref) => {
+  const ctxMode = useUIMode();
+  const resolvedMode = mode ?? (ctxMode !== 'default' ? (ctxMode as "playful" | "smooth") : undefined);
+  return <CNCheckbox mode={resolvedMode} {...props} ref={ref} />;
+});
+Checkbox.displayName = 'Checkbox';

package/src/primitives/Input.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+import { Input as CNInput, type InputProps as CNInputProps } from '@olwiba/cn';
+import { useUIMode } from '../context/OlwibaUIContext';
+
+export type InputProps = CNInputProps;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== 'default' ? (ctxMode as "playful" | "smooth") : undefined);
+    return <CNInput mode={resolvedMode} {...props} ref={ref} />;
+  }
+);
+Input.displayName = 'Input';

package/src/primitives/Switch.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+import { Switch as CNSwitch, type SwitchProps as CNSwitchProps } from '@olwiba/cn';
+
+export type SwitchProps = CNSwitchProps & {
+  mode?: 'default' | 'playful' | 'smooth';
+};
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof CNSwitch>,
+  SwitchProps
+>(({ mode: _mode, ...props }, ref) => {
+  return <CNSwitch {...props} ref={ref} />;
+});
+Switch.displayName = 'Switch';

package/src/primitives/Textarea.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+import { Textarea as CNTextarea, type TextareaProps as CNTextareaProps } from '@olwiba/cn';
+import { useUIMode } from '../context/OlwibaUIContext';
+
+export type TextareaProps = CNTextareaProps;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ mode, ...props }, ref) => {
+    const ctxMode = useUIMode();
+    const resolvedMode = mode ?? (ctxMode !== 'default' ? (ctxMode as "playful" | "smooth") : undefined);
+    return <CNTextarea mode={resolvedMode} {...props} ref={ref} />;
+  }
+);
+Textarea.displayName = 'Textarea';

package/src/primitives/index.ts

@@ -0,0 +1,7 @@
+export { Button, type ButtonProps } from './Button';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, type CardProps } from './Card';
+export { Badge, type BadgeProps } from './Badge';
+export { Input, type InputProps } from './Input';
+export { Textarea, type TextareaProps } from './Textarea';
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { Switch, type SwitchProps } from './Switch';

package/src/types/external-packages.d.ts

@@ -0,0 +1,79 @@
+declare module '@olwiba/docs' {
+  import * as React from 'react';
+
+  export const Theme: {
+    Purple: string;
+    [key: string]: string;
+  };
+
+  export function createDocsRoot(config: Record<string, unknown>): unknown;
+  export const DocsHeader: React.ComponentType<any>;
+  export const DocsFooter: React.ComponentType<any>;
+  export const DocsLayout: React.ComponentType<any>;
+  export const DocsCopyPage: React.ComponentType<any>;
+  export const DocsMobileNav: React.ComponentType<any>;
+  export const DocsToc: React.ComponentType<any>;
+  export const CopyCommandButton: React.ComponentType<any>;
+  export const CopyButton: React.ComponentType<any>;
+  export const mdxComponents: Record<string, React.ComponentType<any>>;
+  export function extractTextFromReactNode(node: React.ReactNode): string;
+  export function cn(...inputs: any[]): string;
+  export const Sandbox: React.ComponentType<any>;
+  export const CodeFence: React.ComponentType<any>;
+
+  export interface SandboxDefinition {
+    id: string;
+    defaultViewport?: 'desktop' | 'tablet' | 'mobile' | 'custom';
+    files: Array<{ path: string; language: string; code: string }>;
+    preview: React.LazyExoticComponent<React.FC>;
+  }
+
+  export type SandboxRegistryInput =
+    | SandboxDefinition[]
+    | Record<string, SandboxDefinition>;
+
+  export function registerSandboxes(input: SandboxRegistryInput): void;
+  export function getSandboxDefinition(id: string): SandboxDefinition | undefined;
+
+  export interface UIModeOption {
+    value: string;
+    label: string;
+  }
+  export interface UIModeDropdownProps {
+    modes: UIModeOption[];
+  }
+  export const UIModeDropdown: React.ComponentType<UIModeDropdownProps>;
+  export function getUIMode(): string;
+  export function setUIMode(mode: string): void;
+  export function subscribeUIMode(fn: (mode: string) => void): () => void;
+
+  export interface SidebarSection {
+    name: string;
+    href: string;
+  }
+
+  export interface TocItem {
+    title: string;
+    url: string;
+    depth: number;
+  }
+
+  export interface PageLoaderData {
+    path: string;
+    url: string;
+    pageTree: unknown;
+    frontmatter: { title?: string; description?: string };
+    toc: TocItem[];
+    rawContent: string;
+    neighbours: {
+      previous: { url: string; name: string } | null;
+      next: { url: string; name: string } | null;
+    };
+  }
+}
+
+declare module '@olwiba/docs/server' {
+  export function createServer(): unknown;
+}
+
+