@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/primitives/Tooltip.tsx

@@ -1,213 +0,0 @@
-import {
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type ReactElement,
-  type ReactNode,
-} from "react";
-import { createPortal } from "react-dom";
-
-// Lightweight tooltip — replaces the native `title=` attribute when
-// you want a short reveal delay (default 120 ms vs the OS' ~500 ms)
-// and styling that matches the kit's chrome. Portals to body so it
-// floats above transformed parents / fixed bars.
-//
-// Wraps a single React element child; mouse + focus listeners are
-// attached via clone so the trigger keeps its own handlers.
-
-export interface TooltipProps {
-  content: ReactNode;
-  children: ReactElement<{
-    onMouseEnter?: React.MouseEventHandler;
-    onMouseLeave?: React.MouseEventHandler;
-    onFocus?: React.FocusEventHandler;
-    onBlur?: React.FocusEventHandler;
-  }>;
-  // ms before showing. Default 120.
-  delay?: number;
-  // "top" hovers above the trigger, "bottom" below, "auto" prefers
-  // top but flips to bottom when the trigger sits near the viewport
-  // top edge (would otherwise clip against the browser chrome).
-  // Default "auto".
-  placement?: "top" | "bottom" | "auto";
-  // Render even if `content` is falsy. Default false — callers can
-  // wrap unconditionally without branching JSX.
-  alwaysRender?: boolean;
-  // When true, force the tooltip to a single line and truncate
-  // overflow with an ellipsis. Default false — content wraps to
-  // multiple lines within `maxWidth`. Existing single-line labels
-  // (scan-status pill, date row) render identically because they
-  // fit within maxWidth without wrapping; longer hints (explanatory
-  // text under form fields, etc.) now display in full.
-  truncate?: boolean;
-}
-
-// AUTO_FLIP_THRESHOLD_PX = the vertical space "top" placement needs
-// above the trigger (tooltip height + gap + a bit of breathing room).
-// Trigger positioned closer than this to the viewport top gets a
-// bottom-flip.
-const AUTO_FLIP_THRESHOLD_PX = 48;
-
-export function Tooltip({
-  content,
-  children,
-  delay = 120,
-  placement = "auto",
-  alwaysRender = false,
-  truncate = false,
-}: TooltipProps) {
-  const triggerRef = useRef<HTMLElement | null>(null);
-  const [open, setOpen] = useState(false);
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null);
-  const [resolvedPlacement, setResolvedPlacement] = useState<"top" | "bottom">(
-    placement === "bottom" ? "bottom" : "top",
-  );
-  const timerRef = useRef<number | null>(null);
-
-  const cancelTimer = useCallback(() => {
-    if (timerRef.current !== null) {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  }, []);
-
-  const computePos = useCallback(() => {
-    const el = triggerRef.current;
-    if (!el) return;
-    const r = el.getBoundingClientRect();
-    // "auto" resolves to top when there's enough room above, else
-    // bottom. Explicit "top" / "bottom" are honoured verbatim.
-    let effective: "top" | "bottom";
-    if (placement === "auto") {
-      effective = r.top < AUTO_FLIP_THRESHOLD_PX ? "bottom" : "top";
-    } else {
-      effective = placement;
-    }
-    setResolvedPlacement(effective);
-    setPos({
-      x: r.left + r.width / 2,
-      y: effective === "top" ? r.top : r.bottom,
-    });
-  }, [placement]);
-
-  const show = useCallback(() => {
-    cancelTimer();
-    timerRef.current = window.setTimeout(() => {
-      computePos();
-      setOpen(true);
-      timerRef.current = null;
-    }, delay);
-  }, [cancelTimer, computePos, delay]);
-
-  const hide = useCallback(() => {
-    cancelTimer();
-    setOpen(false);
-  }, [cancelTimer]);
-
-  useEffect(() => {
-    if (!open) return;
-    const onScrollResize = () => computePos();
-    window.addEventListener("scroll", onScrollResize, { passive: true, capture: true });
-    window.addEventListener("resize", onScrollResize);
-    return () => {
-      window.removeEventListener("scroll", onScrollResize, { capture: true });
-      window.removeEventListener("resize", onScrollResize);
-    };
-  }, [open, computePos]);
-
-  useEffect(() => cancelTimer, [cancelTimer]);
-
-  if (!isValidElement(children)) return children;
-  if (!content && !alwaysRender) return children;
-
-  const child = children;
-  // cloneElement's `Partial<P>` signature isn't compatible with the
-  // `T | undefined` event-handler types in HTMLAttributes once
-  // `exactOptionalPropertyTypes: true` is on. The runtime behaviour is fine —
-  // React happily accepts these props on any host element. We narrow via
-  // unknown to silence the type system on a known React-types limitation.
-  const clonedProps = {
-    ref: (el: HTMLElement | null) => {
-      triggerRef.current = el;
-      const childRef = (child as unknown as { ref?: React.Ref<HTMLElement> }).ref;
-      if (typeof childRef === "function") childRef(el);
-      else if (childRef && typeof childRef === "object") {
-        (childRef as { current: HTMLElement | null }).current = el;
-      }
-    },
-    onMouseEnter: (e: React.MouseEvent) => {
-      child.props.onMouseEnter?.(e);
-      show();
-    },
-    onMouseLeave: (e: React.MouseEvent) => {
-      child.props.onMouseLeave?.(e);
-      hide();
-    },
-    onFocus: (e: React.FocusEvent) => {
-      child.props.onFocus?.(e);
-      show();
-    },
-    onBlur: (e: React.FocusEvent) => {
-      child.props.onBlur?.(e);
-      hide();
-    },
-  };
-  const clonedTrigger = cloneElement(
-    child,
-    clonedProps as unknown as Parameters<typeof cloneElement>[1],
-  );
-
-  const tooltipStyle: CSSProperties = {
-    position: "fixed",
-    left: pos?.x ?? -9999,
-    top: pos?.y ?? -9999,
-    transform:
-      resolvedPlacement === "top"
-        ? "translate(-50%, calc(-100% - 8px))"
-        : "translate(-50%, 8px)",
-    background: "var(--ck-bg-surface)",
-    color: "var(--ck-text-primary)",
-    border: "1px solid var(--ck-border-strong)",
-    borderRadius: "var(--ck-radius-sm)",
-    boxShadow: "var(--ck-shadow-2)",
-    padding: "6px 10px",
-    fontSize: 11,
-    fontFamily: "var(--ck-font-mono)",
-    lineHeight: 1.45,
-    letterSpacing: "0.02em",
-    pointerEvents: "none",
-    zIndex: 9999,
-    maxWidth: 320,
-    // Default: wrap long hints. Opt-in `truncate` restores the old
-    // single-line-with-ellipsis behaviour for compact labels where
-    // horizontal overflow is preferable to a taller tooltip (e.g.
-    // dense toolbars). Single-line labels shorter than maxWidth
-    // render identically in both modes — the branch only matters
-    // when content would need multiple lines.
-    ...(truncate
-      ? {
-          whiteSpace: "nowrap" as const,
-          overflow: "hidden" as const,
-          textOverflow: "ellipsis" as const,
-        }
-      : {
-          whiteSpace: "normal" as const,
-          wordBreak: "break-word" as const,
-        }),
-    opacity: open && pos ? 1 : 0,
-    transition: "opacity 120ms ease",
-  };
-
-  return (
-    <>
-      {clonedTrigger}
-      {(open || alwaysRender) &&
-        pos &&
-        createPortal(<div style={tooltipStyle}>{content}</div>, document.body)}
-    </>
-  );
-}

package/src/primitives/index.ts

@@ -1,53 +0,0 @@
-export { Button } from "./Button";
-export type { ButtonProps, ButtonVariant } from "./Button";
-export { Card } from "./Card";
-export type { CardProps } from "./Card";
-export { Tag } from "./Tag";
-export type { TagProps, TagTone } from "./Tag";
-export { CountBadge } from "./CountBadge";
-export type { CountBadgeProps } from "./CountBadge";
-export { Kbd } from "./Kbd";
-export type { KbdProps } from "./Kbd";
-export { Avatar } from "./Avatar";
-export type { AvatarProps } from "./Avatar";
-export { Input } from "./Input";
-export type { InputProps } from "./Input";
-export { Select } from "./Select";
-export type { SelectProps, SelectOption } from "./Select";
-export { Combobox } from "./Combobox";
-export type {
-  ComboboxProps,
-  ComboboxOption,
-  ComboboxCommit,
-  ComboboxCommitted,
-  ComboboxHandle,
-} from "./Combobox";
-export { Chip } from "./Chip";
-export type { ChipProps, ChipTone } from "./Chip";
-export { MultiCombobox } from "./MultiCombobox";
-export type {
-  MultiComboboxProps,
-  MultiComboboxEntry,
-  MultiComboboxHandle,
-  MultiComboboxLayout,
-} from "./MultiCombobox";
-export { Textarea } from "./Textarea";
-export type { TextareaProps } from "./Textarea";
-export { Checkbox } from "./Checkbox";
-export type { CheckboxProps } from "./Checkbox";
-export { Radio } from "./Radio";
-export type { RadioProps } from "./Radio";
-export { ToggleSwitch } from "./ToggleSwitch";
-export type { ToggleSwitchProps } from "./ToggleSwitch";
-export { Tooltip } from "./Tooltip";
-export type { TooltipProps } from "./Tooltip";
-export { PageHeader } from "./PageHeader";
-export type { PageHeaderProps } from "./PageHeader";
-export { MentionCombobox, findActiveMentionStart, extractQuery } from "./MentionCombobox";
-export type { MentionComboboxProps, MentionComboboxHandle } from "./MentionCombobox";
-export { SignaturePad } from "./SignaturePad";
-export type { SignaturePadProps, SignaturePadHandle } from "./SignaturePad";
-export { CopyField } from "./CopyField";
-export type { CopyFieldProps } from "./CopyField";
-export { SegmentedControl } from "./SegmentedControl";
-export type { SegmentedControlProps, SegmentedControlOption } from "./SegmentedControl";

package/src/pwa/InstallPromptBanner.tsx

@@ -1,132 +0,0 @@
-import { useEffect, useState } from "react";
-import { Button } from "../primitives/Button";
-
-// Surfaces the browser's PWA install affordance — `beforeinstallprompt`
-// is the Chromium-side hook that fires when a site qualifies for
-// install. Without intervention browsers eventually suppress it; we
-// catch the event, render a dismissable banner, and trigger the
-// prompt only when the user clicks Install.
-//
-// Dismissal persists in localStorage so the banner doesn't reappear
-// on every page load after the user said no thanks.
-//
-// iOS Safari doesn't fire beforeinstallprompt at all — for that
-// platform you need to show your own "Tap share → Add to Home
-// Screen" instructions. Detect via `iosSafari` prop or your own
-// heuristic and render a different banner if needed.
-
-interface BeforeInstallPromptEvent extends Event {
-  prompt: () => Promise<void>;
-  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
-}
-
-export interface InstallPromptBannerProps {
-  // Heading text.
-  title?: string;
-  // Body text below the heading.
-  message?: string;
-  installLabel?: string;
-  dismissLabel?: string;
-  // localStorage key for the dismissal flag.
-  storageKey?: string;
-  // Called after the user installs (accepted) or dismisses.
-  onResolve?: (outcome: "accepted" | "dismissed") => void;
-}
-
-export function InstallPromptBanner({
-  title = "Install this app",
-  message = "Add it to your home screen for a faster, full-screen experience.",
-  installLabel = "Install",
-  dismissLabel = "Not now",
-  storageKey = "ck-install-prompt-dismissed",
-  onResolve,
-}: InstallPromptBannerProps) {
-  const [evt, setEvt] = useState<BeforeInstallPromptEvent | null>(null);
-  const [dismissed, setDismissed] = useState(() => {
-    if (typeof window === "undefined") return true;
-    return window.localStorage.getItem(storageKey) === "1";
-  });
-
-  useEffect(() => {
-    if (dismissed) return;
-    const onBefore = (e: Event) => {
-      e.preventDefault();
-      setEvt(e as BeforeInstallPromptEvent);
-    };
-    window.addEventListener("beforeinstallprompt", onBefore);
-    return () => window.removeEventListener("beforeinstallprompt", onBefore);
-  }, [dismissed]);
-
-  const dismiss = () => {
-    window.localStorage.setItem(storageKey, "1");
-    setDismissed(true);
-    setEvt(null);
-    onResolve?.("dismissed");
-  };
-
-  const install = async () => {
-    if (!evt) return;
-    await evt.prompt();
-    const choice = await evt.userChoice;
-    setEvt(null);
-    if (choice.outcome === "accepted") {
-      window.localStorage.setItem(storageKey, "1");
-      setDismissed(true);
-    }
-    onResolve?.(choice.outcome);
-  };
-
-  if (dismissed || !evt) return null;
-
-  return (
-    <div
-      role="region"
-      aria-label="Install app"
-      style={{
-        position: "fixed",
-        left: 16,
-        right: 16,
-        bottom: `calc(16px + var(--ck-tabbar-height, 0px))`,
-        zIndex: 90,
-        maxWidth: 480,
-        marginLeft: "auto",
-        marginRight: "auto",
-        background: "var(--ck-bg-surface)",
-        border: "1px solid var(--ck-border-subtle)",
-        borderRadius: "var(--ck-radius-md)",
-        boxShadow: "var(--ck-shadow-2)",
-        padding: "14px 16px",
-        display: "flex",
-        gap: 12,
-        alignItems: "center",
-        fontFamily: "var(--ck-font-sans)",
-      }}
-    >
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div
-          style={{
-            font: "500 14px/1.3 var(--ck-font-sans)",
-            color: "var(--ck-text-primary)",
-            marginBottom: 2,
-          }}
-        >
-          {title}
-        </div>
-        <div
-          style={{
-            font: "400 12px/1.4 var(--ck-font-sans)",
-            color: "var(--ck-text-tertiary)",
-          }}
-        >
-          {message}
-        </div>
-      </div>
-      <Button variant="ghost" onClick={dismiss}>
-        {dismissLabel}
-      </Button>
-      <Button variant="primary" onClick={install}>
-        {installLabel}
-      </Button>
-    </div>
-  );
-}

package/src/pwa/index.ts

@@ -1,4 +0,0 @@
-export { InstallPromptBanner } from "./InstallPromptBanner";
-export type { InstallPromptBannerProps } from "./InstallPromptBanner";
-export { registerSW } from "./registerSW";
-export type { RegisterSWOptions } from "./registerSW";

package/src/pwa/manifest.template.json

@@ -1,20 +0,0 @@
-{
-  "name": "Your App Name",
-  "short_name": "AppName",
-  "description": "One-line app description.",
-  "start_url": "/",
-  "display": "standalone",
-  "orientation": "portrait",
-  "theme_color": "#0B0D12",
-  "background_color": "#0B0D12",
-  "icons": [
-    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
-    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
-    {
-      "src": "/icon-512-maskable.png",
-      "sizes": "512x512",
-      "type": "image/png",
-      "purpose": "maskable"
-    }
-  ]
-}

package/src/pwa/registerSW.ts

@@ -1,55 +0,0 @@
-// Thin wrapper around vite-plugin-pwa's `virtual:pwa-register`. Use
-// from your app's entry point (main.tsx) so the service worker is
-// registered on first paint. Behaviour:
-//
-//   - new SW detected → optional onNeedRefresh callback (typically
-//     toast prompting reload)
-//   - SW activated for the first time → onOfflineReady callback
-//     (typically toast announcing "Ready offline")
-//
-// The kit doesn't pull in vite-plugin-pwa as a dep — the consumer
-// app installs and configures it. This wrapper just centralises
-// the registration boilerplate so consumers don't repeat it.
-
-export interface RegisterSWOptions {
-  onNeedRefresh?: () => void;
-  onOfflineReady?: () => void;
-  onRegistered?: (registration: ServiceWorkerRegistration | undefined) => void;
-  onRegisterError?: (error: unknown) => void;
-}
-
-// Specifier is constructed from a runtime expression so Vite's
-// static import analyser can't see "virtual:pwa-register" as a
-// literal — without this, every consumer app would fail to boot
-// unless they had vite-plugin-pwa installed AND configured (since
-// transform happens before the try/catch runs at runtime).
-//
-// The eval is the simplest indirection that's also obviously a
-// no-op to readers. /* @vite-ignore */ on its own isn't enough
-// because Vite still attempts resolution when the specifier is a
-// constant string literal.
-const PWA_REGISTER_SPECIFIER = ["virtual", "pwa-register"].join(":");
-
-export async function registerSW(opts: RegisterSWOptions = {}) {
-  if (typeof window === "undefined") return;
-  try {
-    const mod = await import(/* @vite-ignore */ PWA_REGISTER_SPECIFIER);
-    if (typeof mod.registerSW !== "function") {
-      console.warn("virtual:pwa-register found but registerSW() is not a function");
-      return;
-    }
-    mod.registerSW({
-      immediate: true,
-      onNeedRefresh: opts.onNeedRefresh,
-      onOfflineReady: opts.onOfflineReady,
-      onRegisteredSW: (_url: string, reg: ServiceWorkerRegistration | undefined) => {
-        opts.onRegistered?.(reg);
-      },
-      onRegisterError: opts.onRegisterError,
-    });
-  } catch (err) {
-    // vite-plugin-pwa not installed / configured. Silent in dev,
-    // surface to caller if they care.
-    opts.onRegisterError?.(err);
-  }
-}

package/src/riso/Halftone.tsx

@@ -1,85 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Halftone-tinted image / fill block. Renders a solid ink-color
-// background with a halftone dot pattern overlay; if `src` is
-// provided, the image sits underneath in `mix-blend-mode: multiply`
-// for a duotone-on-paper feel.
-//
-// Use for hero blocks, empty-state illustrations, photo treatments.
-
-export interface HalftoneProps {
-  children?: ReactNode;
-  // Optional image source. The image is duotoned via blend modes.
-  src?: string;
-  alt?: string;
-  // Ink color of the dot fill. Defaults to riso pink.
-  ink?: string;
-  // Dot size in px. Defaults to 1.6.
-  dotSize?: number;
-  // Dot grid spacing in px. Defaults to 7.
-  dotSpacing?: number;
-  width?: number | string;
-  height?: number | string;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function Halftone({
-  children,
-  src,
-  alt = "",
-  ink = "var(--ck-riso-pink, #FF48B0)",
-  dotSize = 1.6,
-  dotSpacing = 7,
-  width = "100%",
-  height = 200,
-  className,
-  style,
-}: HalftoneProps) {
-  return (
-    <div
-      className={className}
-      style={{
-        position: "relative",
-        width,
-        height,
-        background: ink,
-        overflow: "hidden",
-        borderRadius: 4,
-        ...style,
-      }}
-    >
-      {src && (
-        <img
-          src={src}
-          alt={alt}
-          style={{
-            position: "absolute",
-            inset: 0,
-            width: "100%",
-            height: "100%",
-            objectFit: "cover",
-            mixBlendMode: "multiply",
-            filter: "grayscale(1) contrast(1.15)",
-            pointerEvents: "none",
-          }}
-        />
-      )}
-      <div
-        aria-hidden
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: "none",
-          backgroundImage: `radial-gradient(circle, rgba(26,26,26,0.85) ${dotSize}px, transparent ${dotSize + 0.2}px)`,
-          backgroundSize: `${dotSpacing}px ${dotSpacing}px`,
-          mixBlendMode: "multiply",
-          opacity: 0.55,
-        }}
-      />
-      {children && (
-        <div style={{ position: "relative", zIndex: 2, color: "#1A1A1A" }}>{children}</div>
-      )}
-    </div>
-  );
-}

package/src/riso/Misregister.tsx

@@ -1,63 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Misregistration — render text (or any child) twice, with a small
-// offset between an "under" duplicate in a second ink color and the
-// "top" pass in the primary ink. The signature riso effect.
-//
-// The under copy is set aria-hidden so screen readers don't double-
-// read the content.
-
-export interface MisregisterProps {
-  children?: ReactNode;
-  // Ink color of the foreground (top) pass.
-  ink?: string;
-  // Ink color of the misregistered duplicate. Defaults to riso pink.
-  offsetInk?: string;
-  // Offset of the duplicate, in px. Defaults to {x:3, y:3}.
-  offsetX?: number;
-  offsetY?: number;
-  // Wrap in inline-block? Defaults true. Pass false for block use.
-  inline?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function Misregister({
-  children,
-  ink,
-  offsetInk = "var(--ck-riso-pink, #FF48B0)",
-  offsetX = 3,
-  offsetY = 3,
-  inline = true,
-  className,
-  style,
-}: MisregisterProps) {
-  return (
-    <span
-      className={className}
-      style={{
-        display: inline ? "inline-block" : "block",
-        position: "relative",
-        color: ink ?? "var(--ck-text-primary)",
-        ...style,
-      }}
-    >
-      <span
-        aria-hidden
-        style={{
-          position: "absolute",
-          top: offsetY,
-          left: offsetX,
-          color: offsetInk,
-          mixBlendMode: "multiply",
-          pointerEvents: "none",
-          width: "100%",
-          height: "100%",
-        }}
-      >
-        {children}
-      </span>
-      <span style={{ position: "relative" }}>{children}</span>
-    </span>
-  );
-}