@soadtech/cli 0.1.0

package/registry/components/Alert/Alert.tsx

@@ -0,0 +1,146 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { AlertProps, AlertStatus } from './Alert.types';
+import styles from './Alert.module.css';
+
+function InfoIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8.5" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M10 9V14M10 6.5V7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function SuccessIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8.5" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M6.5 10L9 12.5L13.5 7.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <path
+        d="M10 2.5L18.5 17.5H1.5L10 2.5Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 8V12M10 14.5V15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+      <circle cx="10" cy="10" r="8.5" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M10 6V11M10 13.5V14"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M4 4L12 12M12 4L4 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+const defaultIcons: Record<AlertStatus, JSX.Element> = {
+  info: <InfoIcon />,
+  success: <SuccessIcon />,
+  warning: <WarningIcon />,
+  error: <ErrorIcon />,
+};
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    {
+      status = 'info',
+      variant = 'solid',
+      layout = 'inline',
+      title,
+      description,
+      icon,
+      onClose,
+      actions,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const renderedIcon = icon ?? defaultIcons[status];
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(
+          styles.root,
+          styles[variant],
+          styles[status],
+          styles[layout],
+          className
+        )}
+        {...rest}
+      >
+        <span className={styles.statusIcon}>{renderedIcon}</span>
+
+        <div className={styles.body}>
+          <div className={styles.content}>
+            <p className={styles.title}>{title}</p>
+            {description && (
+              <p className={styles.description}>{description}</p>
+            )}
+          </div>
+          {actions && <div className={styles.actions}>{actions}</div>}
+        </div>
+
+        {onClose && (
+          <button
+            type="button"
+            className={styles.close}
+            onClick={onClose}
+            aria-label="Close alert"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';

package/registry/components/Alert/Alert.types.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type AlertStatus = 'info' | 'success' | 'warning' | 'error';
+export type AlertVariant = 'solid' | 'alpha';
+export type AlertLayout = 'inline' | 'stacked';
+
+export interface AlertProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Semantic status */
+  status?: AlertStatus;
+  /** Visual style: solid (filled bg) or alpha (light bg + colored left border) */
+  variant?: AlertVariant;
+  /** Actions placement: inline (beside text) or stacked (below text) */
+  layout?: AlertLayout;
+  /** Alert title */
+  title: string;
+  /** Optional description text */
+  description?: string;
+  /** Custom icon override (defaults based on status) */
+  icon?: ReactNode;
+  /** Close callback — renders close button when provided */
+  onClose?: () => void;
+  /** Action slot (buttons, links) */
+  actions?: ReactNode;
+}

package/registry/components/Alert/index.ts

@@ -0,0 +1,7 @@
+export { Alert } from './Alert';
+export type {
+  AlertProps,
+  AlertStatus,
+  AlertVariant,
+  AlertLayout,
+} from './Alert.types';

package/registry/components/Avatar/Avatar.module.css

@@ -0,0 +1,100 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-200);
+  color: var(--st-color-neutral-600);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-semibold);
+  overflow: visible;
+  flex-shrink: 0;
+}
+
+/* ─── Sizes ─── */
+
+.xl {
+  width: 64px;
+  height: 64px;
+  font-size: var(--st-font-size-xl);
+}
+
+.lg {
+  width: 48px;
+  height: 48px;
+  font-size: var(--st-font-size-md);
+}
+
+.md {
+  width: 36px;
+  height: 36px;
+  font-size: var(--st-font-size-sm);
+}
+
+.sm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--st-font-size-xs);
+}
+
+/* ─── Image ─── */
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--st-radius-full);
+}
+
+/* ─── Initials ─── */
+
+.initials {
+  line-height: 1;
+  user-select: none;
+}
+
+/* ─── Icon ─── */
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.iconSvg {
+  width: 55%;
+  height: 55%;
+}
+
+/* ─── Status indicator ─── */
+
+.status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-success);
+  border: 2px solid var(--st-color-background);
+}
+
+.xl .status {
+  width: 14px;
+  height: 14px;
+}
+
+.lg .status {
+  width: 12px;
+  height: 12px;
+}
+
+.md .status {
+  width: 10px;
+  height: 10px;
+}
+
+.sm .status {
+  width: 8px;
+  height: 8px;
+  border-width: 1.5px;
+}

package/registry/components/Avatar/Avatar.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { AvatarProps } from './Avatar.types';
+import styles from './Avatar.module.css';
+
+function PersonIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className={styles.iconSvg}>
+      <path
+        d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  (
+    {
+      src,
+      alt = '',
+      initials,
+      icon,
+      size = 'md',
+      status = false,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const renderContent = () => {
+      if (src) {
+        return <img src={src} alt={alt} className={styles.image} />;
+      }
+      if (initials) {
+        return <span className={styles.initials}>{initials}</span>;
+      }
+      return <span className={styles.icon}>{icon ?? <PersonIcon />}</span>;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, styles[size], className)}
+        {...rest}
+      >
+        {renderContent()}
+        {status && <span className={styles.status} />}
+      </div>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

package/registry/components/Avatar/Avatar.types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type AvatarSize = 'xl' | 'lg' | 'md' | 'sm';
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Image URL */
+  src?: string;
+  /** Alt text for image */
+  alt?: string;
+  /** Initials to display when no image */
+  initials?: string;
+  /** Custom icon to display when no image or initials */
+  icon?: ReactNode;
+  /** Avatar size */
+  size?: AvatarSize;
+  /** Show online/status indicator */
+  status?: boolean;
+}

package/registry/components/Avatar/AvatarGroup.module.css

@@ -0,0 +1,64 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ─── Spacing ─── */
+
+.overlap > * {
+  border: 2px solid var(--st-color-background);
+  border-radius: var(--st-radius-full);
+}
+
+.overlap.xl > *:not(:first-child) { margin-left: -16px; }
+.overlap.lg > *:not(:first-child) { margin-left: -12px; }
+.overlap.md > *:not(:first-child) { margin-left: -8px; }
+.overlap.sm > *:not(:first-child) { margin-left: -6px; }
+
+.spaced.xl { gap: var(--st-space-2); }
+.spaced.lg { gap: var(--st-space-2); }
+.spaced.md { gap: var(--st-space-2); }
+.spaced.sm { gap: var(--st-space-1); }
+
+/* ─── Counter ─── */
+
+.counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-200);
+  color: var(--st-color-neutral-600);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-medium);
+  flex-shrink: 0;
+}
+
+.counterXl {
+  width: 64px;
+  height: 64px;
+  font-size: var(--st-font-size-lg);
+}
+
+.counterLg {
+  width: 48px;
+  height: 48px;
+  font-size: var(--st-font-size-md);
+}
+
+.counterMd {
+  width: 36px;
+  height: 36px;
+  font-size: var(--st-font-size-sm);
+}
+
+.counterSm {
+  width: 28px;
+  height: 28px;
+  font-size: var(--st-font-size-xs);
+}
+
+/* Counter inherits spacing from parent */
+.overlap .counter {
+  border: 2px solid var(--st-color-background);
+}

package/registry/components/Avatar/AvatarGroup.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, Children, isValidElement, cloneElement } from 'react';
+import { cn } from '../../utils/cn';
+import type { AvatarGroupProps } from './AvatarGroup.types';
+import type { AvatarSize } from './Avatar.types';
+import styles from './AvatarGroup.module.css';
+
+const sizeMap: Record<AvatarSize, string> = {
+  xl: styles.xl,
+  lg: styles.lg,
+  md: styles.md,
+  sm: styles.sm,
+};
+
+const counterSizeMap: Record<AvatarSize, string> = {
+  xl: styles.counterXl,
+  lg: styles.counterLg,
+  md: styles.counterMd,
+  sm: styles.counterSm,
+};
+
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  (
+    {
+      size = 'md',
+      spacing = 'overlap',
+      limit,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const childArray = Children.toArray(children).filter(isValidElement);
+    const total = childArray.length;
+    const visibleChildren =
+      limit && total > limit ? childArray.slice(0, limit) : childArray;
+    const excess = limit && total > limit ? total - limit : 0;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[spacing],
+          sizeMap[size],
+          className
+        )}
+        {...rest}
+      >
+        {visibleChildren.map((child) =>
+          cloneElement(child as React.ReactElement<{ size?: AvatarSize }>, {
+            size,
+          })
+        )}
+        {excess > 0 && (
+          <span className={cn(styles.counter, counterSizeMap[size])}>
+            +{excess}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+AvatarGroup.displayName = 'AvatarGroup';

package/registry/components/Avatar/AvatarGroup.types.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'react';
+import type { AvatarSize } from './Avatar.types';
+
+export type AvatarGroupSpacing = 'overlap' | 'spaced';
+
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** Avatar size applied to all children */
+  size?: AvatarSize;
+  /** Spacing mode: overlap (negative margin) or spaced (gap) */
+  spacing?: AvatarGroupSpacing;
+  /** Max visible avatars — excess shown as "+N" counter */
+  limit?: number;
+}

package/registry/components/Avatar/index.ts

@@ -0,0 +1,8 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps, AvatarSize } from './Avatar.types';
+
+export { AvatarGroup } from './AvatarGroup';
+export type {
+  AvatarGroupProps,
+  AvatarGroupSpacing,
+} from './AvatarGroup.types';

package/registry/components/Badge/Badge.module.css

@@ -0,0 +1,92 @@
+.root {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ─── Indicator base ─── */
+
+.indicator {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+}
+
+/* ─── Positions ─── */
+
+.rightTop {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.rightCenter {
+  top: 50%;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.rightBottom {
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+/* ─── Dot ─── */
+
+.dot {
+  border-radius: var(--st-radius-full);
+}
+
+.dot.md {
+  width: 10px;
+  height: 10px;
+}
+
+.dot.sm {
+  width: 8px;
+  height: 8px;
+}
+
+.dot.primary {
+  background-color: var(--st-color-success);
+}
+
+.dot.secondary {
+  background-color: var(--st-color-primary);
+}
+
+/* ─── Pill (number / text) ─── */
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--st-radius-full);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-semibold);
+  white-space: nowrap;
+}
+
+.pill.md {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+}
+
+.pill.sm {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+}
+
+.pill.primary {
+  background-color: var(--st-color-success);
+  color: #ffffff;
+}
+
+.pill.secondary {
+  background-color: var(--st-color-primary);
+  color: #ffffff;
+}

package/registry/components/Badge/Badge.tsx

@@ -0,0 +1,89 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { BadgeProps } from './Badge.types';
+import styles from './Badge.module.css';
+
+const positionClass: Record<string, string> = {
+  'right-top': styles.rightTop,
+  'right-center': styles.rightCenter,
+  'right-bottom': styles.rightBottom,
+};
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  (
+    {
+      position = 'right-top',
+      variant = 'primary',
+      size = 'md',
+      count,
+      label,
+      dot = true,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const hasPill = count !== undefined || label !== undefined;
+    const showDot = !hasPill && dot;
+
+    const renderIndicator = () => {
+      if (count !== undefined) {
+        return (
+          <span
+            className={cn(
+              styles.indicator,
+              styles.pill,
+              styles[variant],
+              styles[size],
+              positionClass[position]
+            )}
+          >
+            +{count}
+          </span>
+        );
+      }
+
+      if (label !== undefined) {
+        return (
+          <span
+            className={cn(
+              styles.indicator,
+              styles.pill,
+              styles[variant],
+              styles[size],
+              positionClass[position]
+            )}
+          >
+            {label}
+          </span>
+        );
+      }
+
+      if (showDot) {
+        return (
+          <span
+            className={cn(
+              styles.indicator,
+              styles.dot,
+              styles[variant],
+              styles[size],
+              positionClass[position]
+            )}
+          />
+        );
+      }
+
+      return null;
+    };
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {children}
+        {renderIndicator()}
+      </div>
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/registry/components/Badge/Badge.types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'react';
+
+export type BadgePosition = 'right-top' | 'right-center' | 'right-bottom';
+export type BadgeVariant = 'primary' | 'secondary';
+export type BadgeSize = 'md' | 'sm';
+
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+  /** Badge position relative to children */
+  position?: BadgePosition;
+  /** Color variant: primary (green) or secondary (blue) */
+  variant?: BadgeVariant;
+  /** Badge size */
+  size?: BadgeSize;
+  /** Number to display as "+N" */
+  count?: number;
+  /** Text label to display (e.g. "New") */
+  label?: string;
+  /** When true (and no count/label), shows a dot indicator. Defaults to true. */
+  dot?: boolean;
+}