@soadtech/cli 0.1.0

package/registry/components/Persona/PersonaMessage.tsx

@@ -0,0 +1,70 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Avatar } from '../Avatar';
+import { VerifiedBadge } from './Persona';
+import type { PersonaMessageProps, PersonaSize } from './Persona.types';
+import styles from './PersonaMessage.module.css';
+
+const avatarSizeMap: Record<PersonaSize, 'lg' | 'md' | 'sm'> = {
+  lg: 'lg',
+  md: 'md',
+  sm: 'sm',
+};
+
+export const PersonaMessage = forwardRef<HTMLDivElement, PersonaMessageProps>(
+  (
+    {
+      avatarSrc,
+      avatarAlt = '',
+      name,
+      username,
+      verified = false,
+      message,
+      time,
+      badgeCount,
+      unread = false,
+      size = 'md',
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const showBadge = badgeCount != null && badgeCount > 0;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[size], className)}
+        tabIndex={0}
+        {...rest}
+      >
+        <Avatar src={avatarSrc} alt={avatarAlt} size={avatarSizeMap[size]} />
+        <div className={styles.body}>
+          <div className={styles.header}>
+            <span className={styles.nameRow}>
+              <span className={styles.name}>{name}</span>
+              {verified && <VerifiedBadge />}
+              {username && <span className={styles.username}>{username}</span>}
+            </span>
+            <span className={styles.trailing}>
+              {time && <span className={styles.time}>{time}</span>}
+              {unread && <span className={styles.unreadDot} />}
+            </span>
+          </div>
+          {message && <span className={styles.message}>{message}</span>}
+        </div>
+        {showBadge && (
+          <div className={styles.badgeArea}>
+            {size === 'sm' ? (
+              <span className={styles.badgeDot} />
+            ) : (
+              <span className={styles.badge}>{badgeCount}</span>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+PersonaMessage.displayName = 'PersonaMessage';

package/registry/components/Persona/index.ts

@@ -0,0 +1,11 @@
+export { Persona } from './Persona';
+export { PersonaMessage } from './PersonaMessage';
+export { PersonaAction } from './PersonaAction';
+export { MessageDropdown } from './MessageDropdown';
+export type {
+  PersonaProps,
+  PersonaSize,
+  PersonaMessageProps,
+  PersonaActionProps,
+  MessageDropdownProps,
+} from './Persona.types';

package/registry/components/Progress/Progress.module.css

@@ -0,0 +1,41 @@
+/* ═══ Progress ═══ */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+  font-family: var(--st-font-family);
+}
+
+/* ─── Label ─── */
+
+.label {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Track & Fill ─── */
+
+.track {
+  width: 100%;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-200);
+  overflow: hidden;
+}
+
+.fill {
+  height: 100%;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-primary);
+  transition: width var(--st-transition-normal);
+}
+
+/* ─── Value ─── */
+
+.value {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  text-align: right;
+}

package/registry/components/Progress/Progress.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ProgressProps } from './Progress.types';
+import styles from './Progress.module.css';
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      label,
+      value = 0,
+      showValue = true,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const clamped = Math.max(0, Math.min(100, value));
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {label && <span className={styles.label}>{label}</span>}
+        <div
+          className={styles.track}
+          role="progressbar"
+          aria-valuenow={clamped}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={label}
+        >
+          <div
+            className={styles.fill}
+            style={{ width: `${clamped}%` }}
+          />
+        </div>
+        {showValue && (
+          <span className={styles.value}>{clamped}%</span>
+        )}
+      </div>
+    );
+  }
+);
+
+Progress.displayName = 'Progress';

package/registry/components/Progress/Progress.types.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  /** Label text above the bar */
+  label?: string;
+  /** Progress value 0–100 */
+  value?: number;
+  /** Show percentage text below the bar */
+  showValue?: boolean;
+}

package/registry/components/Progress/index.ts

@@ -0,0 +1,2 @@
+export { Progress } from './Progress';
+export type { ProgressProps } from './Progress.types';

package/registry/components/RadioButton/RadioButton.module.css

@@ -0,0 +1,103 @@
+/* ─── Root ─── */
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ─── Sizes ─── */
+.md {
+  width: 20px;
+  height: 20px;
+}
+
+.sm {
+  width: 16px;
+  height: 16px;
+}
+
+/* ─── Hidden native input ─── */
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* ─── Visual circle ─── */
+.circle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: 1.5px solid var(--st-color-neutral-300);
+  border-radius: 50%;
+  background-color: var(--st-color-background);
+  transition:
+    background-color var(--st-transition-fast),
+    border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+/* ─── Inner dot ─── */
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--st-color-success-foreground);
+  opacity: 0;
+  transition: opacity var(--st-transition-fast);
+}
+
+.sm .dot {
+  width: 6px;
+  height: 6px;
+}
+
+/* ─── Checked state ─── */
+.root:has(.input:checked) .circle {
+  background-color: var(--st-color-success);
+  border-color: var(--st-color-success);
+}
+
+.root:has(.input:checked) .dot {
+  opacity: 1;
+}
+
+/* ─── Hover ─── */
+.root:not(.disabled):not(.readOnly):has(.input:hover) .circle {
+  border-color: var(--st-color-neutral-400);
+}
+
+.root:not(.disabled):not(.readOnly):has(.input:checked:hover) .circle {
+  background-color: var(--st-color-success-hover);
+  border-color: var(--st-color-success-hover);
+}
+
+/* ─── Focus ─── */
+.root:has(.input:focus-visible) .circle {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Read-only ─── */
+.readOnly .input {
+  cursor: default;
+}
+
+.readOnly .circle {
+  border-color: var(--st-color-neutral-200);
+}

package/registry/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { RadioButtonProps } from './RadioButton.types';
+import styles from './RadioButton.module.css';
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+  (
+    {
+      readOnly = false,
+      size = 'md',
+      disabled = false,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <span
+        className={cn(
+          styles.root,
+          styles[size],
+          disabled && styles.disabled,
+          readOnly && styles.readOnly,
+          className,
+        )}
+      >
+        <input
+          ref={ref}
+          type="radio"
+          className={styles.input}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          readOnly={readOnly}
+          onChange={handleChange}
+          {...rest}
+        />
+        <span className={styles.circle}>
+          <span className={styles.dot} />
+        </span>
+      </span>
+    );
+  },
+);
+
+RadioButton.displayName = 'RadioButton';

package/registry/components/RadioButton/RadioButton.types.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes } from 'react';
+
+export type RadioSize = 'md' | 'sm';
+
+export interface RadioButtonProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+  size?: RadioSize;
+  readOnly?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export type RadioFieldVariant = 'default' | 'card';
+
+export interface RadioFieldProps extends RadioButtonProps {
+  label: string;
+  description?: string;
+  variant?: RadioFieldVariant;
+  value?: string;
+}

package/registry/components/RadioButton/RadioField.module.css

@@ -0,0 +1,68 @@
+/* ─── Root ─── */
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--st-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ─── Content ─── */
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-0);
+  padding-top: 1px;
+}
+
+/* ─── Label ─── */
+.label {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Description ─── */
+.description {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Card variant ─── */
+.card {
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  padding: var(--st-space-3) var(--st-space-4);
+  transition:
+    border-color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.card:hover:not(.disabled):not(.readOnly) {
+  border-color: var(--st-color-border-strong);
+}
+
+.card:has(input:checked) {
+  border-color: var(--st-color-success);
+}
+
+.card:has(input:focus-visible) {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+.disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ─── Read-only ─── */
+.readOnly {
+  cursor: default;
+}

package/registry/components/RadioButton/RadioField.tsx

@@ -0,0 +1,68 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { RadioButton } from './RadioButton';
+import { useRadioGroup } from './RadioGroupContext';
+import type { RadioFieldProps } from './RadioButton.types';
+import styles from './RadioField.module.css';
+
+export const RadioField = forwardRef<HTMLInputElement, RadioFieldProps>(
+  (
+    {
+      label,
+      description,
+      variant = 'default',
+      disabled = false,
+      readOnly = false,
+      size,
+      value,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useRadioGroup();
+    const isDisabled = disabled || group?.disabled || false;
+    const isReadOnly = readOnly || group?.readOnly || false;
+
+    const groupProps: Record<string, unknown> = {};
+    if (group) {
+      if (group.name) groupProps.name = group.name;
+      if (group.value !== undefined && value !== undefined) {
+        groupProps.checked = group.value === value;
+      }
+      if (group.onValueChange && value !== undefined) {
+        groupProps.onChange = () => group.onValueChange!(value);
+      }
+    }
+
+    return (
+      <label
+        className={cn(
+          styles.root,
+          styles[variant],
+          isDisabled && styles.disabled,
+          isReadOnly && styles.readOnly,
+          className,
+        )}
+      >
+        <RadioButton
+          ref={ref}
+          disabled={isDisabled}
+          readOnly={isReadOnly}
+          size={size}
+          value={value}
+          {...groupProps}
+          {...rest}
+        />
+        <span className={styles.content}>
+          <span className={styles.label}>{label}</span>
+          {description && (
+            <span className={styles.description}>{description}</span>
+          )}
+        </span>
+      </label>
+    );
+  },
+);
+
+RadioField.displayName = 'RadioField';

package/registry/components/RadioButton/RadioGroup.module.css

@@ -0,0 +1,41 @@
+/* ─── Root ─── */
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+}
+
+/* ─── Group label ─── */
+.label {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Items container ─── */
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-3);
+}
+
+/* ─── Helper text ─── */
+.helperText {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Error ─── */
+.error {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-error);
+}

package/registry/components/RadioButton/RadioGroup.tsx

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../utils/cn';
+import { RadioGroupContext } from './RadioGroupContext';
+import styles from './RadioGroup.module.css';
+
+export interface RadioGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  name?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  children: ReactNode;
+}
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      label,
+      helperText,
+      error,
+      disabled = false,
+      readOnly = false,
+      name,
+      value,
+      onValueChange,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const ctx = useMemo(
+      () => ({ disabled, readOnly, name, value, onValueChange }),
+      [disabled, readOnly, name, value, onValueChange],
+    );
+
+    return (
+      <RadioGroupContext.Provider value={ctx}>
+        <div
+          ref={ref}
+          role="radiogroup"
+          aria-label={label}
+          className={cn(styles.root, className)}
+          {...rest}
+        >
+          {label && <span className={styles.label}>{label}</span>}
+          <div className={styles.items}>{children}</div>
+          {error && (
+            <span className={styles.error}>
+              <svg
+                width="8"
+                height="8"
+                viewBox="0 0 8 8"
+                fill="none"
+                aria-hidden="true"
+              >
+                <circle cx="4" cy="4" r="4" fill="currentColor" />
+              </svg>
+              {error}
+            </span>
+          )}
+          {!error && helperText && (
+            <span className={styles.helperText}>{helperText}</span>
+          )}
+        </div>
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/registry/components/RadioButton/RadioGroupContext.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+export interface RadioGroupContextValue {
+  disabled: boolean;
+  readOnly: boolean;
+  name?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export const RadioGroupContext =
+  createContext<RadioGroupContextValue | null>(null);
+
+export function useRadioGroup(): RadioGroupContextValue | null {
+  return useContext(RadioGroupContext);
+}

package/registry/components/RadioButton/index.ts

@@ -0,0 +1,12 @@
+export { RadioButton } from './RadioButton';
+export type {
+  RadioButtonProps,
+  RadioSize,
+  RadioFieldProps,
+  RadioFieldVariant,
+} from './RadioButton.types';
+
+export { RadioField } from './RadioField';
+
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps } from './RadioGroup';