@cosxai/ui 0.24.0 → 1.0.0-alpha.0

package/src/neobrutalism/Sticker.tsx

@@ -1,71 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-
-// Rotated badge — "NEW!", "FREE!", "v2.0!" style. Sits in the
-// corner of featured cards or banners. Filled with an accent
-// colour, thick border, hard shadow, slight tilt to read as a
-// physical sticker pinned on the page.
-
-export interface StickerProps {
-  children: ReactNode;
-  // Tilt angle in degrees. Default -8 (slight left lean —
-  // pleasing eye-tilt without going crazy).
-  rotate?: number;
-  // Fill tone. "accent" / "warning" / "success" / "critical"
-  // pick from token palette; pass a hex string to override.
-  tone?: "accent" | "warning" | "success" | "critical" | string;
-  // px diameter — sticker is square so width == height.
-  size?: number;
-  className?: string;
-  style?: CSSProperties;
-}
-
-function toneToBg(tone: NonNullable<StickerProps["tone"]>) {
-  switch (tone) {
-    case "accent":
-      return "var(--ck-accent, #88AAEE)";
-    case "warning":
-      return "var(--ck-warning, #FFD23F)";
-    case "success":
-      return "var(--ck-success, #A3E636)";
-    case "critical":
-      return "var(--ck-critical, #FF6B6B)";
-    default:
-      return tone;
-  }
-}
-
-export function Sticker({
-  children,
-  rotate = -8,
-  tone = "warning",
-  size = 80,
-  className,
-  style,
-}: StickerProps) {
-  return (
-    <span
-      className={className}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        textAlign: "center",
-        width: size,
-        height: size,
-        padding: 6,
-        background: toneToBg(tone),
-        color: "#000",
-        border: "2px solid var(--neobrut-ink, #000)",
-        borderRadius: "50%",
-        boxShadow: "3px 3px 0 0 var(--neobrut-ink, #000)",
-        transform: `rotate(${rotate}deg)`,
-        font: "800 14px/1.1 var(--ck-font-display, var(--ck-font-sans))",
-        letterSpacing: "0.02em",
-        textTransform: "uppercase",
-        ...style,
-      }}
-    >
-      {children}
-    </span>
-  );
-}

package/src/neobrutalism/index.ts

@@ -1,4 +0,0 @@
-export { Marquee } from "./Marquee";
-export type { MarqueeProps } from "./Marquee";
-export { Sticker } from "./Sticker";
-export type { StickerProps } from "./Sticker";

package/src/primitives/Avatar.tsx

@@ -1,53 +0,0 @@
-import { cn } from "../lib/cn";
-
-// Circular avatar — image with initials fallback. Use the `name`
-// prop to derive initials (first letter of first two whitespace-
-// separated tokens). Size scales the whole thing including font.
-
-export interface AvatarProps {
-  // Display name — used for initials fallback and as alt text.
-  name: string;
-  // Image src. If omitted or fails to load, falls back to initials.
-  src?: string | null;
-  size?: number; // px, default 32
-  className?: string;
-}
-
-function initials(name: string): string {
-  const parts = name.trim().split(/\s+/).slice(0, 2);
-  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "?";
-}
-
-export function Avatar({ name, src, size = 32, className }: AvatarProps) {
-  return (
-    <span
-      className={cn("ck-avatar", className)}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        background: "var(--ck-bg-muted)",
-        color: "var(--ck-text-secondary)",
-        font: `500 ${Math.round(size * 0.4)}px/1 var(--ck-font-sans)`,
-        overflow: "hidden",
-        flexShrink: 0,
-      }}
-      aria-label={name}
-    >
-      {src ? (
-        <img
-          src={src}
-          alt={name}
-          width={size}
-          height={size}
-          style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        />
-      ) : (
-        initials(name)
-      )}
-    </span>
-  );
-}

package/src/primitives/Button.tsx

@@ -1,67 +0,0 @@
-import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
-import { cn } from "../lib/cn";
-
-/**
- * Button — primitive interactive element. Variants `primary`
- * (filled) / `secondary` (outlined) / `ghost` (transparent) /
- * `icon` (square 32×32).
- *
- * The `loading` prop is the canonical way to show that an async
- * action triggered by the button is in flight. When true:
- *
- *   - a small ring spinner renders before the children (inherits
- *     `currentColor` so it reads on every variant),
- *   - the button is `disabled` natively so clicks are dropped,
- *   - `aria-busy="true"` is set for AT consumers.
- *
- * `loading` and `disabled` are distinct states. `disabled` says
- * "you can't take this action right now" (form invalid, no
- * selection, etc.). `loading` says "we're already taking this
- * action — wait". Callers typically wire both:
- *
- *     <Button disabled={!name.trim()} loading={submitting}>
- *       {submitting ? "Saving…" : "Save"}
- *     </Button>
- *
- * Visual: see docs/components/button.
- *
- * Forwards ref to the underlying <button>. Spreads `...rest` so
- * consumers can pass data-* / aria-* / className.
- */
-
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "icon";
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant | undefined;
-  /**
-   * When true, the button renders a leading spinner, sets
-   * `aria-busy="true"`, and becomes natively `disabled` so click
-   * handlers no longer fire. Use this for any async submit so the
-   * user sees the click landed AND can't double-fire the action.
-   */
-  loading?: boolean | undefined;
-  children?: ReactNode;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(
-    { variant = "primary", className, children, loading, disabled, ...rest },
-    ref,
-  ) {
-    return (
-      <button
-        ref={ref}
-        {...rest}
-        className={cn("ck-btn", `ck-btn--${variant}`, className)}
-        disabled={disabled || loading}
-        aria-busy={loading || undefined}
-        data-loading={loading || undefined}
-      >
-        {loading ? (
-          <span className="ck-btn-spinner" aria-hidden="true" />
-        ) : null}
-        {children}
-      </button>
-    );
-  },
-);

package/src/primitives/Card.tsx

@@ -1,41 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-import { cn } from "../lib/cn";
-
-export interface CardProps {
-  // Eyebrow + title bar at the top. Pass any nodes; common pattern
-  // is <span className="ck-eyebrow">...</span> + <h3>...</h3>.
-  header?: ReactNode;
-  // Right-aligned actions next to the header (e.g. action buttons).
-  headerActions?: ReactNode;
-  // Bottom strip (typically buttons or meta info).
-  footer?: ReactNode;
-  children?: ReactNode;
-  // Disable the default body padding (when the children manage
-  // their own — e.g. a list with full-bleed rows).
-  noPad?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function Card({
-  header,
-  headerActions,
-  footer,
-  children,
-  noPad,
-  className,
-  style,
-}: CardProps) {
-  return (
-    <section className={cn("ck-card", className)} style={style}>
-      {(header || headerActions) && (
-        <header className="ck-card__head">
-          <div style={{ flex: 1, minWidth: 0 }}>{header}</div>
-          {headerActions}
-        </header>
-      )}
-      <div className={noPad ? undefined : "ck-card__body"}>{children}</div>
-      {footer && <footer className="ck-card__foot">{footer}</footer>}
-    </section>
-  );
-}

package/src/primitives/Checkbox.tsx

@@ -1,87 +0,0 @@
-import { cn } from "../lib/cn";
-
-// Custom-styled checkbox — accent-bordered square that becomes filled
-// accent + white tick when checked. The native <input type="checkbox">
-// renders as a giant white card on dark backgrounds in most browsers,
-// which is exactly the bug that prompted this primitive in the parent
-// project. Use this anywhere you'd reach for a checkbox.
-
-export interface CheckboxProps {
-  checked: boolean;
-  onChange: (next: boolean) => void;
-  label?: React.ReactNode;
-  suffix?: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  /**
-   * Test hook forwarded to the visual button. Consumers with
-   * getByTestId('…') queries can keep them working across the swap
-   * from native <input type="checkbox"> to this primitive without
-   * touching each test file.
-   */
-  "data-testid"?: string;
-}
-
-export function Checkbox({
-  checked,
-  onChange,
-  label,
-  suffix,
-  disabled,
-  className,
-  "data-testid": testId,
-}: CheckboxProps) {
-  return (
-    <label
-      className={cn("ck-checkbox", className)}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 8,
-        font: "400 13px/1 var(--ck-font-sans)",
-        color: "var(--ck-text-secondary)",
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.5 : 1,
-        userSelect: "none",
-      }}
-    >
-      <button
-        type="button"
-        role="checkbox"
-        aria-checked={checked}
-        disabled={disabled}
-        onClick={() => !disabled && onChange(!checked)}
-        data-testid={testId}
-        style={{
-          width: 16,
-          height: 16,
-          borderRadius: 4,
-          border: "1.5px solid var(--ck-accent)",
-          background: checked ? "var(--ck-accent)" : "transparent",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 0,
-          cursor: disabled ? "not-allowed" : "pointer",
-          flexShrink: 0,
-        }}
-      >
-        {checked && (
-          <svg width="10" height="10" viewBox="0 0 12 12" fill="none" aria-hidden>
-            <path
-              d="M2.5 6.5L5 9L9.5 3.5"
-              stroke="#FFFFFF"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        )}
-      </button>
-      {label}
-      {suffix && (
-        <span style={{ color: "var(--ck-text-tertiary)" }}>{suffix}</span>
-      )}
-    </label>
-  );
-}

package/src/primitives/Chip.tsx

@@ -1,177 +0,0 @@
-import { forwardRef, type CSSProperties, type HTMLAttributes, type ReactNode } from "react";
-
-import { cn } from "../lib/cn";
-
-/**
- * Chip — a compact pill representing one selected value (a recipient,
- * a filter, a tag the user picked). Exists so multi-value inputs
- * (MultiCombobox) and token lists share one removable-item shape
- * instead of each product hand-rolling a "name ×" span.
- *
- * Distinct from `Tag` (uppercase mono STATUS label — "PENDING",
- * "LIVE"): a Chip is sentence-case body text (13px sans), a pill on a
- * muted slab, and is interactive — optional `onClick` turns the label
- * into a button (e.g. "edit this entry"), optional `onRemove` adds
- * the × button.
- *
- * Tones: `neutral` (default), `accent`, `warning` (e.g. "needs a
- * name"), `critical`. `selected` outlines the chip in the accent
- * colour (e.g. the entry currently being edited). `disabled` dims the
- * chip and disables both buttons.
- *
- * Compose with: MultiCombobox (entry row), filter bars, recipient
- * lists on detail pages.
- *
- * Visual: see docs/components/multi-combobox.
- *
- * Forwards ref to the root <span>. Spreads `...rest` onto it so
- * consumers can pass data-* / aria-* / title / style. Chrome presets
- * can restyle via the `[data-ck-chip]` / `data-tone` / `data-selected`
- * hooks — 0.24.0 ships no per-chrome CSS for it.
- */
-
-export type ChipTone = "neutral" | "accent" | "warning" | "critical";
-
-export type ChipProps = Omit<HTMLAttributes<HTMLSpanElement>, "onClick"> & {
-  children: ReactNode;
-  tone?: ChipTone | undefined;
-  // Outline the chip in the accent colour (e.g. "being edited").
-  selected?: boolean | undefined;
-  // Dim + disable both the label button and the remove button.
-  disabled?: boolean | undefined;
-  // When set, the label renders as a <button> (e.g. click-to-edit).
-  onClick?: (() => void) | undefined;
-  // When set, a × button renders after the label.
-  onRemove?: (() => void) | undefined;
-  // aria-label for the × button. Default "Remove".
-  removeLabel?: string | undefined;
-  className?: string | undefined;
-};
-
-const TONE_FG: Record<ChipTone, string> = {
-  neutral: "var(--ck-text-primary, #111)",
-  accent: "var(--ck-accent, #4f46e5)",
-  warning: "var(--ck-warning, #D97706)",
-  critical: "var(--ck-critical, #DC2626)",
-};
-const TONE_BG: Record<ChipTone, string> = {
-  neutral: "var(--ck-bg-muted, #E5E8EE)",
-  accent: "var(--ck-accent-muted, rgba(79, 70, 229, 0.08))",
-  warning: "var(--ck-warning-muted, #FEF3E7)",
-  critical: "var(--ck-critical-muted, #FCEAEA)",
-};
-const TONE_BORDER: Record<ChipTone, string> = {
-  neutral: "var(--ck-border-subtle, #DDE0E6)",
-  accent: "var(--ck-accent-border, rgba(79, 70, 229, 0.35))",
-  warning: "color-mix(in oklab, var(--ck-warning, #D97706) 35%, transparent)",
-  critical: "color-mix(in oklab, var(--ck-critical, #DC2626) 35%, transparent)",
-};
-
-// Label text styles — shared by the <span> and <button> renderings so
-// the chip looks identical whether or not it is clickable.
-const LABEL_STYLE: CSSProperties = {
-  minWidth: 0,
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  font: "inherit",
-  color: "inherit",
-  background: "none",
-  border: "none",
-  padding: 0,
-  margin: 0,
-  textAlign: "left",
-};
-
-export const Chip = forwardRef<HTMLSpanElement, ChipProps>(function Chip(
-  {
-    children,
-    tone = "neutral",
-    selected = false,
-    disabled = false,
-    onClick,
-    onRemove,
-    removeLabel,
-    className,
-    style,
-    ...rest
-  },
-  ref,
-) {
-  const clickable = !!onClick && !disabled;
-  return (
-    <span
-      ref={ref}
-      className={cn("ck-chip", className)}
-      data-ck-chip
-      data-tone={tone}
-      data-selected={selected ? "true" : undefined}
-      data-disabled={disabled ? "true" : undefined}
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        maxWidth: "100%",
-        boxSizing: "border-box",
-        padding: onRemove ? "3px 6px 3px 10px" : "3px 10px",
-        borderRadius: 999,
-        background: TONE_BG[tone],
-        border: `1px solid ${selected ? "var(--ck-accent, #4f46e5)" : TONE_BORDER[tone]}`,
-        boxShadow: selected ? "0 0 0 2px var(--ck-accent-muted, rgba(79, 70, 229, 0.12))" : "none",
-        font: "500 13px/1.3 var(--ck-font-sans, system-ui, sans-serif)",
-        color: TONE_FG[tone],
-        opacity: disabled ? 0.5 : 1,
-        cursor: disabled ? "default" : undefined,
-        transition: "border-color var(--ck-dur-fast, 120ms) var(--ck-ease, ease)",
-        ...style,
-      }}
-      {...rest}
-    >
-      {onClick ? (
-        <button
-          type="button"
-          className="ck-chip-label"
-          onClick={onClick}
-          disabled={disabled}
-          style={{ ...LABEL_STYLE, cursor: clickable ? "pointer" : "default" }}
-        >
-          {children}
-        </button>
-      ) : (
-        <span className="ck-chip-label" style={LABEL_STYLE}>
-          {children}
-        </span>
-      )}
-      {onRemove ? (
-        <button
-          type="button"
-          className="ck-chip-remove"
-          aria-label={removeLabel ?? "Remove"}
-          onClick={onRemove}
-          disabled={disabled}
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 16,
-            height: 16,
-            flexShrink: 0,
-            padding: 0,
-            margin: 0,
-            border: "none",
-            borderRadius: 999,
-            background: "none",
-            color: "inherit",
-            opacity: 0.7,
-            font: "inherit",
-            fontSize: 14,
-            lineHeight: 1,
-            cursor: disabled ? "default" : "pointer",
-          }}
-        >
-          ×
-        </button>
-      ) : null}
-    </span>
-  );
-});