@cosxai/ui 0.7.1 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",

package/src/primitives/Checkbox.tsx

@@ -13,6 +13,13 @@ export interface CheckboxProps {
   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({
@@ -22,6 +29,7 @@ export function Checkbox({
   suffix,
   disabled,
   className,
+  "data-testid": testId,
 }: CheckboxProps) {
   return (
     <label
@@ -43,6 +51,7 @@ export function Checkbox({
         aria-checked={checked}
         disabled={disabled}
         onClick={() => !disabled && onChange(!checked)}
+        data-testid={testId}
         style={{
           width: 16,
           height: 16,

package/src/primitives/Radio.tsx

@@ -0,0 +1,131 @@
+import { cn } from "../lib/cn";
+
+// Custom-styled radio — accent-bordered circle that becomes filled
+// accent + white dot when checked. Paired with Checkbox: same
+// disabled/label/suffix contract, same 16px hit target size. Use
+// this anywhere you'd reach for a `<input type="radio">` — the
+// native control renders as the OS accent (blue on macOS by
+// default) which doesn't respect --ck-accent per workspace, and the
+// unstyled defaults look inconsistent alongside our Checkbox.
+//
+// Radio is a single option in a group; the caller owns the group's
+// selection state and passes `checked` + `onChange` per option.
+// Radios with the same `name` still get the browser's native "one
+// selected at a time" behaviour if you need form-post semantics; we
+// forward it to a hidden native input so aria-pressed on the visual
+// button doesn't drift from the actual form value.
+
+export interface RadioProps {
+  checked: boolean;
+  onChange: (next: boolean) => void;
+  label?: React.ReactNode;
+  suffix?: React.ReactNode;
+  disabled?: boolean;
+  /**
+   * Native radio-group name. Optional but recommended: browsers
+   * enforce "only one checked at a time" for same-name radios, so
+   * passing a shared name is a belt-and-braces guard against a
+   * stale onChange handler leaving two visually-checked radios.
+   */
+  name?: string;
+  /**
+   * Value that lands in the form-post payload when this radio is
+   * checked. Only meaningful when `name` is also set.
+   */
+  value?: string;
+  className?: string;
+  /** Test hook forwarded to the visual button — see Checkbox. */
+  "data-testid"?: string;
+}
+
+export function Radio({
+  checked,
+  onChange,
+  label,
+  suffix,
+  disabled,
+  name,
+  value,
+  className,
+  "data-testid": testId,
+}: RadioProps) {
+  return (
+    <label
+      className={cn("ck-radio", 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="radio"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => !disabled && !checked && onChange(true)}
+        data-testid={testId}
+        style={{
+          width: 16,
+          height: 16,
+          borderRadius: "50%",
+          border: "1.5px solid var(--ck-accent)",
+          background: "transparent",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 0,
+          cursor: disabled ? "not-allowed" : "pointer",
+          flexShrink: 0,
+        }}
+      >
+        {checked && (
+          <span
+            aria-hidden
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: "var(--ck-accent)",
+              display: "inline-block",
+            }}
+          />
+        )}
+      </button>
+      {/* Hidden native input keeps the browser's same-name enforcement
+          + lets consumers use the surrounding <form> for post payload. */}
+      {name && (
+        <input
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={(e) => !disabled && onChange(e.target.checked)}
+          disabled={disabled}
+          tabIndex={-1}
+          aria-hidden
+          style={{
+            position: "absolute",
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: "hidden",
+            clip: "rect(0,0,0,0)",
+            whiteSpace: "nowrap",
+            border: 0,
+          }}
+        />
+      )}
+      {label}
+      {suffix && (
+        <span style={{ color: "var(--ck-text-tertiary)" }}>{suffix}</span>
+      )}
+    </label>
+  );
+}

package/src/primitives/index.ts

@@ -18,6 +18,8 @@ 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";