@cosxai/ui 0.25.0 → 1.0.0-alpha.1

package/src/components/Icon.tsx

@@ -0,0 +1,32 @@
+import type { LucideIcon, LucideProps } from 'lucide-react';
+
+import { cn } from '../lib/cn';
+
+export type IconProps = Omit<LucideProps, 'ref'> & {
+  /** A Lucide icon component: `import { Share2 } from 'lucide-react'`. */
+  icon: LucideIcon;
+  /** Accessible name. Without it the icon is decorative (aria-hidden). */
+  label?: string | undefined;
+  /** px. 14–16 inside controls, 16–20 on its own. @default 16 */
+  size?: number | undefined;
+};
+
+/**
+ * Icon — a Lucide line icon in currentColor. Lucide is the system's icon
+ * set (3.0 flagged it as a substitute; confirmed for 1.0). Status is never
+ * an icon — it is a Badge.
+ */
+export function Icon({ icon: Glyph, label, size = 16, className, strokeWidth = 1.75, ...rest }: IconProps) {
+  return (
+    <Glyph
+      size={size}
+      strokeWidth={strokeWidth}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+      role={label ? 'img' : undefined}
+      focusable="false"
+      className={cn('shrink-0', className)}
+      {...rest}
+    />
+  );
+}

package/src/components/IconButton.tsx

@@ -0,0 +1,55 @@
+import { cva } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react';
+import type { ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { formatCount } from './Button';
+import { Icon } from './Icon';
+
+const iconButton = cva(
+  [
+    'relative inline-grid shrink-0 place-items-center rounded-md border p-0',
+    'transition-[background-color,border-color] duration-[120ms] ease-standard',
+    'cursor-pointer outline-none focus-visible:shadow-(--focus-ring)',
+    'disabled:cursor-not-allowed disabled:opacity-40',
+  ],
+  {
+    variants: {
+      variant: {
+        outline: 'border-rule bg-transparent text-fg hover:border-fg',
+        ghost: 'border-transparent bg-transparent text-fg hover:bg-hover',
+        solid: 'border-ink bg-ink text-linen hover:bg-ink-raised ink:border-yellow-accent ink:bg-yellow-accent ink:text-ink ink:hover:bg-yellow-accent-hover',
+      },
+      size: { sm: 'size-8', md: 'size-[38px]', lg: 'size-11' },
+    },
+    defaultVariants: { variant: 'ghost', size: 'md' },
+  },
+);
+
+export type IconButtonProps = Omit<ComponentProps<'button'>, 'children' | 'aria-label'> & {
+  icon: LucideIcon;
+  /** Required: the accessible name (and the hover title). */
+  label: string;
+  /** outline (--rule edge) · ghost (hover wash) · solid (ink). @default "ghost" */
+  variant?: 'outline' | 'ghost' | 'solid' | undefined;
+  /** 32 · 38 · 44. @default "md" */
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  /** A count badge on the corner; hidden at zero, 99+ above 99. */
+  count?: number | undefined;
+};
+
+/** IconButton — a square icon-only button. It always carries a label. */
+export function IconButton({ icon, label, variant, size, count, className, ...rest }: IconButtonProps) {
+  const shown = count === undefined ? null : formatCount(count);
+  const glyph = size === 'sm' ? 16 : size === 'lg' ? 20 : 18;
+  return (
+    <button type="button" aria-label={shown ? `${label} (${shown})` : label} title={label} className={cn(iconButton({ variant, size }), className)} {...rest}>
+      <Icon icon={icon} size={glyph} />
+      {shown && (
+        <span aria-hidden className="absolute -top-1.5 -right-1.5 min-w-[18px] rounded-pill bg-brand-mark px-1 text-[11px] leading-[18px] font-semibold text-ink tabular-nums">
+          {shown}
+        </span>
+      )}
+    </button>
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,74 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+import { Field, useField } from './Field';
+import { controlFrame, controlInner } from './forms-control';
+
+export type InputProps = Omit<ComponentProps<'input'>, 'size' | 'prefix'> & {
+  /** Label above the field; with it (or hint/error) the input renders its own Field. */
+  label?: ReactNode;
+  hint?: ReactNode;
+  /** The error in words; sets invalid. */
+  error?: ReactNode;
+  /** Error state without a message of its own (the message lives elsewhere). */
+  invalid?: boolean | undefined;
+  /** Inside, before the text — a currency, an icon. */
+  prefix?: ReactNode;
+  /** Inside, after the text — a domain, a unit. */
+  suffix?: ReactNode;
+  /** 32 · 38 · 44 (mobile). @default "md" */
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  /** default (sunk) · borderless (inline editing: no chrome until hover/focus). */
+  variant?: 'default' | 'borderless' | undefined;
+  /** Class for the outer frame (className goes to the <input>). */
+  frameClassName?: string | undefined;
+};
+
+function Control({
+  prefix,
+  suffix,
+  size,
+  variant,
+  invalid,
+  frameClassName,
+  className,
+  disabled,
+  readOnly,
+  id,
+  ...rest
+}: Omit<InputProps, 'label' | 'hint' | 'error'>) {
+  const field = useField();
+  const bad = Boolean(invalid || field?.invalid);
+  const off = Boolean(disabled || field?.disabled);
+  return (
+    <div className={cn(controlFrame({ size, variant, invalid: bad, disabled: off, readOnly: Boolean(readOnly) && !off }), frameClassName)}>
+      {prefix && <span className="flex shrink-0 text-fg-secondary">{prefix}</span>}
+      <input
+        {...rest}
+        id={id ?? field?.id}
+        disabled={off}
+        readOnly={readOnly}
+        aria-invalid={bad || undefined}
+        aria-describedby={cn(rest['aria-describedby'], field?.describedBy) || undefined}
+        className={cn(controlInner, className)}
+      />
+      {suffix && <span className="flex shrink-0 text-fg-secondary">{suffix}</span>}
+    </div>
+  );
+}
+
+/**
+ * Input — a single-line text field. Sinks to linen and takes an ink edge
+ * on focus. Always labelled: pass label here, or wrap in a Field. Errors
+ * say how to fix it; validate on blur.
+ */
+export function Input({ label, hint, error, required, ...rest }: InputProps) {
+  if (label !== undefined || hint !== undefined || error !== undefined) {
+    return (
+      <Field label={label} hint={hint} error={error} required={required} disabled={rest.disabled} id={rest.id}>
+        <Control {...rest} required={required} />
+      </Field>
+    );
+  }
+  return <Control {...rest} required={required} />;
+}

package/src/components/Logo.tsx

@@ -0,0 +1,62 @@
+import type { ComponentProps } from 'react';
+
+import { cn } from '../lib/cn';
+import { LOOP, WORDMARK } from './logo-art';
+
+export type LogoProps = Omit<ComponentProps<'span'>, 'children'> & {
+  /** wordmark · icon (the loop) · tile (the loop on the yellow square). @default "wordmark" */
+  variant?: 'wordmark' | 'icon' | 'tile' | undefined;
+  /** ink on paper, linen and the yellow; white on ink. Never recoloured beyond these. Unset: ink, white in ink mode. */
+  tone?: 'ink' | 'white' | undefined;
+  /** The standard lockup: a 4px accent-yellow rule beneath the wordmark. */
+  rule?: boolean | undefined;
+  /** px height. @default 28 */
+  height?: number | undefined;
+  /** Accessible name. @default "COSX" */
+  alt?: string | undefined;
+};
+
+function Art({ art, height, title }: { art: typeof WORDMARK | typeof LOOP; height: number; title: string }) {
+  const [, , w, h] = art.viewBox.split(' ').map(Number) as [number, number, number, number];
+  return (
+    <svg viewBox={art.viewBox} height={height} width={Math.round((height * w) / h)} role="img" aria-label={title} fill="currentColor" className="block shrink-0">
+      {art.paths.map((d) => (
+        <path key={d.slice(0, 24)} d={d} />
+      ))}
+    </svg>
+  );
+}
+
+/**
+ * Logo — the COSX wordmark, the CO loop, or the yellow tile (app icon,
+ * avatar, favicon). Colour comes from the ground, never from the mark: the
+ * mark is ink or white, never yellow, never two-tone.
+ */
+export function Logo({ variant = 'wordmark', tone, rule = false, height = 28, alt = 'COSX', className, ...rest }: LogoProps) {
+  if (variant === 'tile') {
+    return (
+      <span
+        className={cn('inline-grid shrink-0 place-items-center bg-yellow text-ink', className)}
+        style={{ width: height, height, borderRadius: Math.round(height * 0.22) }}
+        {...rest}
+      >
+        <Art art={LOOP} height={height} title={alt} />
+      </span>
+    );
+  }
+  const colour = tone === 'white' ? 'text-white' : tone === 'ink' ? 'text-ink' : 'text-ink ink:text-white';
+  const art = <Art art={variant === 'icon' ? LOOP : WORDMARK} height={height} title={alt} />;
+  if (!rule || variant === 'icon') {
+    return (
+      <span className={cn('inline-flex', colour, className)} {...rest}>
+        {art}
+      </span>
+    );
+  }
+  return (
+    <span className={cn('inline-flex flex-col items-start', colour, className)} style={{ gap: Math.round(height * 0.45) }} {...rest}>
+      {art}
+      <span aria-hidden className="h-1 w-full rounded-[2px] bg-yellow-accent" />
+    </span>
+  );
+}

package/src/components/Marker.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type MarkerProps = Omit<ComponentProps<'span'>, 'children'> & {
+  children: ReactNode;
+  /** On an ink ground there is no band: the phrase is set in accent yellow. */
+  onInk?: boolean | undefined;
+  /** Draw the band in after the headline lands (motion.css; still with reduced motion). */
+  draw?: boolean | undefined;
+  as?: ElementType | undefined;
+};
+
+/**
+ * Marker — the highlighter behind the phrase that carries the finding.
+ * One per headline. The band sits in the lower part of the line and is
+ * cloned across line breaks; Chinese starts it lower (typography-cjk.css).
+ * Styling comes from the design system's own .marker rules.
+ */
+export function Marker({ children, onInk = false, draw = false, as: Tag = 'span', className, ...rest }: MarkerProps) {
+  return (
+    <Tag className={cn('marker', onInk && 'on-ink', draw && !onInk && 'draw', className)} {...rest}>
+      {children}
+    </Tag>
+  );
+}

package/src/components/MetaLabel.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps, ElementType, ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type MetaLabelProps = Omit<ComponentProps<'div'>, 'children'> & {
+  children: ReactNode;
+  /** grey (default) · ink · inverse (grey on ink) · linen · yellow (legal only on an ink ground). */
+  tone?: 'grey' | 'ink' | 'inverse' | 'linen' | 'yellow' | undefined;
+  /** 11.5 · 12 · 13.5px. @default "md" */
+  size?: 'sm' | 'md' | 'lg' | undefined;
+  /** A rule beneath: hair (1px) or yellow (4px). */
+  rule?: 'hair' | 'yellow' | undefined;
+  as?: ElementType | undefined;
+};
+
+const TONE = { grey: 'text-fg-secondary', ink: 'text-fg', inverse: 'text-grey-inverse', linen: 'text-linen', yellow: 'text-yellow-accent' };
+const SIZE = { sm: 'text-[11.5px]', md: 'text-meta', lg: 'text-small' };
+
+/** MetaLabel — eyebrows, metadata, page numbers: 12px 500 grey, sentence
+ *  case, no caps, no tracking. */
+export function MetaLabel({ children, tone = 'grey', size = 'md', rule, as: Tag = 'div', className, ...rest }: MetaLabelProps) {
+  return (
+    <Tag
+      className={cn(
+        'font-sans leading-[1.4] font-medium',
+        TONE[tone],
+        SIZE[size],
+        rule && 'pb-2.5',
+        rule === 'hair' && 'border-b border-rule',
+        rule === 'yellow' && 'border-b-4 border-yellow-accent',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}

package/src/components/Radio.tsx

@@ -0,0 +1,72 @@
+import * as RadioPrimitive from '@radix-ui/react-radio-group';
+import { useId, type ComponentProps, type ReactNode } from 'react';
+
+import { cn } from '../lib/cn';
+
+export type RadioOption = {
+  value: string;
+  label: ReactNode;
+  /** A line below the label. */
+  description?: ReactNode;
+  disabled?: boolean | undefined;
+};
+
+export type RadioGroupProps = Omit<ComponentProps<typeof RadioPrimitive.Root>, 'value' | 'onValueChange' | 'onChange' | 'children' | 'orientation'> & {
+  /** Two to five exclusive options, all visible (more: a Select). */
+  options: Array<string | RadioOption>;
+  value?: string | undefined;
+  onChange?: ((value: string) => void) | undefined;
+  /** column (default) or row. Arrow keys move between options either way. */
+  direction?: 'column' | 'row' | undefined;
+};
+
+/**
+ * RadioGroup — round sunk controls, an ink dot on the chosen one. Arrow
+ * keys move and choose; the group is one tab stop.
+ */
+export function RadioGroup({ options, value, onChange, direction = 'column', disabled, className, ...rest }: RadioGroupProps) {
+  const auto = useId();
+  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  return (
+    <RadioPrimitive.Root
+      {...(value !== undefined && { value })}
+      onValueChange={(v) => onChange?.(v)}
+      disabled={disabled}
+      orientation={direction === 'row' ? 'horizontal' : 'vertical'}
+      className={cn('flex font-sans', direction === 'row' ? 'flex-row flex-wrap gap-[22px]' : 'flex-col gap-2.5', className)}
+      {...rest}
+    >
+      {items.map((o) => {
+        const id = `rd${auto}-${o.value}`;
+        const off = Boolean(disabled || o.disabled);
+        return (
+          <div key={o.value} className={cn('inline-flex items-start gap-2.5', off && 'opacity-40')}>
+            <RadioPrimitive.Item
+              id={id}
+              value={o.value}
+              disabled={o.disabled}
+              aria-describedby={o.description ? `${id}-desc` : undefined}
+              className={cn(
+                'mt-0.5 grid size-4 shrink-0 cursor-pointer place-items-center rounded-pill border border-fg-secondary bg-sunk',
+                'transition-[border-color] duration-[120ms] ease-standard outline-none focus-visible:shadow-(--focus-ring)',
+                'data-[state=checked]:border-fg disabled:cursor-not-allowed',
+              )}
+            >
+              <RadioPrimitive.Indicator className="block size-2 rounded-pill bg-fg" />
+            </RadioPrimitive.Item>
+            <span className="flex flex-col gap-0.5">
+              <label htmlFor={id} className={cn('text-small leading-[1.45] text-fg', off ? 'cursor-not-allowed' : 'cursor-pointer')}>
+                {o.label}
+              </label>
+              {o.description && (
+                <span id={`${id}-desc`} className="text-meta leading-normal text-fg-secondary">
+                  {o.description}
+                </span>
+              )}
+            </span>
+          </div>
+        );
+      })}
+    </RadioPrimitive.Root>
+  );
+}