@soadtech/cli 0.1.0

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

@@ -0,0 +1,47 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  border-radius: var(--st-radius-full);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-semibold);
+  white-space: nowrap;
+}
+
+/* ─── Sizes ─── */
+
+.md {
+  height: 24px;
+  padding: 0 var(--st-space-2);
+  font-size: var(--st-font-size-xs);
+}
+
+.sm {
+  height: 20px;
+  padding: 0 6px;
+  font-size: 11px;
+}
+
+/* ─── Direction colors (default: subtle bg + colored text) ─── */
+
+.up {
+  background-color: var(--st-color-success-subtle);
+  color: var(--st-color-success);
+}
+
+.down {
+  background-color: var(--st-color-error-subtle);
+  color: var(--st-color-error);
+}
+
+/* ─── Inverse: colored bg + white text ─── */
+
+.inverse.up {
+  background-color: var(--st-color-success);
+  color: #ffffff;
+}
+
+.inverse.down {
+  background-color: var(--st-color-error);
+  color: #ffffff;
+}

package/registry/components/Badge/TrendBadge.tsx

@@ -0,0 +1,65 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TrendBadgeProps } from './TrendBadge.types';
+import styles from './TrendBadge.module.css';
+
+function TrendUpIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path
+        d="M1 10C2.5 8 4 5 5.5 6.5C7 8 8 4 10 3C12 2 13 1 13 1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function TrendDownIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path
+        d="M1 4C2.5 6 4 9 5.5 7.5C7 6 8 10 10 11C12 12 13 13 13 13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const TrendBadge = forwardRef<HTMLSpanElement, TrendBadgeProps>(
+  (
+    {
+      value,
+      direction = 'up',
+      inverse = false,
+      size = 'md',
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[direction],
+          styles[size],
+          inverse && styles.inverse,
+          className
+        )}
+        {...rest}
+      >
+        {direction === 'up' ? <TrendUpIcon /> : <TrendDownIcon />}
+        {value}
+      </span>
+    );
+  }
+);
+
+TrendBadge.displayName = 'TrendBadge';

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+
+export type TrendDirection = 'up' | 'down';
+export type TrendBadgeSize = 'md' | 'sm';
+
+export interface TrendBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Display value (e.g. "36%") */
+  value: string;
+  /** Trend direction */
+  direction?: TrendDirection;
+  /** Inverse colors: true = colored bg + white text, false = subtle bg + colored text */
+  inverse?: boolean;
+  /** Size */
+  size?: TrendBadgeSize;
+}

package/registry/components/Badge/index.ts

@@ -0,0 +1,14 @@
+export { Badge } from './Badge';
+export type {
+  BadgeProps,
+  BadgePosition,
+  BadgeVariant,
+  BadgeSize,
+} from './Badge.types';
+
+export { TrendBadge } from './TrendBadge';
+export type {
+  TrendBadgeProps,
+  TrendDirection,
+  TrendBadgeSize,
+} from './TrendBadge.types';

package/registry/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbItemProps } from './Breadcrumbs.types';
+import styles from './Breadcrumbs.module.css';
+
+export const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
+  ({ href, icon, _active = false, className, children, ...rest }, ref) => {
+    const content = (
+      <>
+        {icon && <span className={styles.icon}>{icon}</span>}
+        {children && <span>{children}</span>}
+      </>
+    );
+
+    if (_active || !href) {
+      return (
+        <span
+          ref={ref as React.Ref<HTMLSpanElement>}
+          className={cn(styles.item, _active && styles.active, className)}
+          aria-current={_active ? 'page' : undefined}
+          {...rest}
+        >
+          {content}
+        </span>
+      );
+    }
+
+    return (
+      <a
+        ref={ref as React.Ref<HTMLAnchorElement>}
+        href={href}
+        className={cn(styles.item, styles.link, className)}
+        {...rest}
+      >
+        {content}
+      </a>
+    );
+  }
+);
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';

package/registry/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,81 @@
+.root {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+}
+
+.list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--st-space-1);
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.listItem {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+}
+
+/* ─── Item ─── */
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-tight);
+}
+
+.link {
+  text-decoration: none;
+  cursor: pointer;
+  transition: color var(--st-transition-fast);
+}
+
+.link:hover {
+  color: var(--st-color-foreground);
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+  border-radius: var(--st-radius-sm);
+}
+
+.active {
+  color: var(--st-color-foreground);
+  font-weight: var(--st-font-weight-semibold);
+}
+
+/* ─── Icon ─── */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Separator ─── */
+
+.separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--st-color-neutral-400);
+  user-select: none;
+}
+
+.separatorIcon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ─── Ellipsis ─── */
+
+.ellipsis {
+  color: var(--st-color-muted);
+  user-select: none;
+  letter-spacing: 1px;
+}

package/registry/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,71 @@
+import {
+  forwardRef,
+  Children,
+  isValidElement,
+  cloneElement,
+  type ReactElement,
+} from 'react';
+import { cn } from '../../utils/cn';
+import type { BreadcrumbsProps, BreadcrumbItemProps } from './Breadcrumbs.types';
+import styles from './Breadcrumbs.module.css';
+
+function ChevronSeparator() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={styles.separatorIcon}>
+      <path
+        d="M4.5 2.5L8 6L4.5 9.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function SlashSeparator() {
+  return <span className={styles.separatorIcon}>/</span>;
+}
+
+export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
+  ({ separator = 'chevron', maxItems, className, children, ...rest }, ref) => {
+    const allItems = Children.toArray(children).filter(isValidElement) as ReactElement<BreadcrumbItemProps>[];
+    let visibleItems: (ReactElement<BreadcrumbItemProps> | 'ellipsis')[];
+
+    if (maxItems && allItems.length > maxItems) {
+      const tail = allItems.slice(-(maxItems - 1));
+      visibleItems = [allItems[0], 'ellipsis', ...tail];
+    } else {
+      visibleItems = allItems;
+    }
+
+    const Separator = separator === 'chevron' ? ChevronSeparator : SlashSeparator;
+
+    return (
+      <nav ref={ref} aria-label="Breadcrumb" className={cn(styles.root, className)} {...rest}>
+        <ol className={styles.list}>
+          {visibleItems.map((item, i) => {
+            const isLast = i === visibleItems.length - 1;
+
+            return (
+              <li key={i} className={styles.listItem}>
+                {i > 0 && (
+                  <span className={styles.separator} aria-hidden="true">
+                    <Separator />
+                  </span>
+                )}
+                {item === 'ellipsis' ? (
+                  <span className={styles.ellipsis}>...</span>
+                ) : (
+                  cloneElement(item, { _active: isLast })
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+    );
+  }
+);
+
+Breadcrumbs.displayName = 'Breadcrumbs';

package/registry/components/Breadcrumbs/Breadcrumbs.types.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type BreadcrumbSeparator = 'chevron' | 'slash';
+
+export interface BreadcrumbsProps
+  extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  /** Separator between items */
+  separator?: BreadcrumbSeparator;
+  /** Max visible items before collapsing middle items to "..." */
+  maxItems?: number;
+  children: ReactNode;
+}
+
+export interface BreadcrumbItemProps
+  extends HTMLAttributes<HTMLElement> {
+  /** When provided, renders as a link */
+  href?: string;
+  /** Optional icon before text */
+  icon?: ReactNode;
+  /** @internal Set by Breadcrumbs container */
+  _active?: boolean;
+}

package/registry/components/Breadcrumbs/index.ts

@@ -0,0 +1,7 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export { BreadcrumbItem } from './BreadcrumbItem';
+export type {
+  BreadcrumbsProps,
+  BreadcrumbSeparator,
+  BreadcrumbItemProps,
+} from './Breadcrumbs.types';

package/registry/components/Button/Button.module.css

@@ -0,0 +1,169 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--st-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--st-radius-full);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-medium);
+  line-height: var(--st-line-height-tight);
+  cursor: pointer;
+  transition: background-color var(--st-transition-fast),
+    border-color var(--st-transition-fast),
+    color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+  user-select: none;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.root:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Icon slot ─── */
+
+.iconSlot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════
+   Fill variant
+   ═══════════════════════════════════════ */
+
+.fill.primary {
+  background-color: var(--st-color-neutral-900);
+  color: #ffffff;
+}
+
+.fill.primary:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-800);
+}
+
+.fill.primary:active:not(:disabled) {
+  background-color: var(--st-color-neutral-950);
+}
+
+.fill.danger {
+  background-color: var(--st-color-error);
+  color: #ffffff;
+}
+
+.fill.danger:hover:not(:disabled) {
+  background-color: var(--st-color-error-hover);
+}
+
+.fill.danger:active:not(:disabled) {
+  background-color: #991b1b;
+}
+
+/* ═══════════════════════════════════════
+   Outline variant
+   ═══════════════════════════════════════ */
+
+.outline.primary {
+  background-color: transparent;
+  border-color: var(--st-color-neutral-300);
+  color: var(--st-color-neutral-900);
+}
+
+.outline.primary:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+.outline.primary:active:not(:disabled) {
+  background-color: var(--st-color-neutral-200);
+}
+
+.outline.danger {
+  background-color: transparent;
+  border-color: var(--st-color-error);
+  color: var(--st-color-error);
+}
+
+.outline.danger:hover:not(:disabled) {
+  background-color: var(--st-color-error-subtle);
+}
+
+.outline.danger:active:not(:disabled) {
+  background-color: #fee2e2;
+}
+
+/* ═══════════════════════════════════════
+   Ghost variant
+   ═══════════════════════════════════════ */
+
+.ghost.primary {
+  background-color: transparent;
+  color: var(--st-color-neutral-900);
+}
+
+.ghost.primary:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+.ghost.primary:active:not(:disabled) {
+  background-color: var(--st-color-neutral-200);
+}
+
+.ghost.danger {
+  background-color: transparent;
+  color: var(--st-color-error);
+}
+
+.ghost.danger:hover:not(:disabled) {
+  background-color: var(--st-color-error-subtle);
+}
+
+.ghost.danger:active:not(:disabled) {
+  background-color: #fee2e2;
+}
+
+/* ═══════════════════════════════════════
+   Sizes
+   ═══════════════════════════════════════ */
+
+.lg {
+  height: 48px;
+  padding: 0 var(--st-space-5);
+  font-size: var(--st-font-size-md);
+}
+
+.md {
+  height: 40px;
+  padding: 0 var(--st-space-4);
+  font-size: var(--st-font-size-sm);
+}
+
+.sm {
+  height: 32px;
+  padding: 0 var(--st-space-3);
+  font-size: var(--st-font-size-sm);
+}
+
+/* ─── Icon-only: square aspect ratio ─── */
+
+.iconOnly.lg {
+  width: 48px;
+  padding: 0;
+}
+
+.iconOnly.md {
+  width: 40px;
+  padding: 0;
+}
+
+.iconOnly.sm {
+  width: 32px;
+  padding: 0;
+}

package/registry/components/Button/Button.tsx

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ButtonProps } from './Button.types';
+import styles from './Button.module.css';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'fill',
+      color = 'primary',
+      size = 'md',
+      iconLeft,
+      iconRight,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const isIconOnly = !children && (iconLeft || iconRight);
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[variant],
+          styles[color],
+          styles[size],
+          isIconOnly && styles.iconOnly,
+          className
+        )}
+        {...rest}
+      >
+        {iconLeft && <span className={styles.iconSlot}>{iconLeft}</span>}
+        {children}
+        {iconRight && <span className={styles.iconSlot}>{iconRight}</span>}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/registry/components/Button/Button.types.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+export type ButtonVariant = 'fill' | 'outline' | 'ghost';
+export type ButtonColor = 'primary' | 'danger';
+export type ButtonSize = 'lg' | 'md' | 'sm';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual style */
+  variant?: ButtonVariant;
+  /** Color scheme */
+  color?: ButtonColor;
+  /** Size */
+  size?: ButtonSize;
+  /** Icon before text */
+  iconLeft?: ReactNode;
+  /** Icon after text */
+  iconRight?: ReactNode;
+}

package/registry/components/Button/index.ts

@@ -0,0 +1,7 @@
+export { Button } from './Button';
+export type {
+  ButtonProps,
+  ButtonVariant,
+  ButtonColor,
+  ButtonSize,
+} from './Button.types';

package/registry/components/ButtonLink/ButtonLink.module.css

@@ -0,0 +1,85 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: var(--st-radius-sm);
+  transition: color var(--st-transition-fast);
+}
+
+.root:hover {
+  text-decoration: underline;
+}
+
+.root:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* ─── Icon slot ─── */
+
+.iconSlot {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Colors ─── */
+
+.primary {
+  color: var(--st-color-primary);
+}
+
+.primary:hover {
+  color: var(--st-color-primary-hover);
+}
+
+.primary:active {
+  color: var(--st-color-primary-active);
+}
+
+.secondary {
+  color: var(--st-color-neutral-600);
+}
+
+.secondary:hover {
+  color: var(--st-color-neutral-800);
+}
+
+.secondary:active {
+  color: var(--st-color-neutral-900);
+}
+
+.danger {
+  color: var(--st-color-error);
+}
+
+.danger:hover {
+  color: var(--st-color-error-hover);
+}
+
+/* ─── Sizes ─── */
+
+.lg {
+  font-size: var(--st-font-size-md);
+}
+
+.md {
+  font-size: var(--st-font-size-sm);
+}
+
+.sm {
+  font-size: var(--st-font-size-xs);
+}
+
+/* ─── Disabled ─── */
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  text-decoration: none;
+}