@soadtech/cli 0.1.0

package/registry/components/Accordion/AccordionItem.module.css

@@ -0,0 +1,124 @@
+.item {
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+/* ─── Trigger ─── */
+
+.trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--st-space-3) var(--st-space-4);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  gap: var(--st-space-3);
+  text-align: left;
+  color: var(--st-color-foreground);
+  font-family: var(--st-font-family);
+  transition: background-color var(--st-transition-fast);
+}
+
+.trigger:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+.trigger:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: -2px;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Accordion variant disabled: dark filled background */
+.trigger.accordion:disabled {
+  background-color: var(--st-color-neutral-800);
+  color: var(--st-color-neutral-50);
+  opacity: 1;
+}
+
+/* ─── Icon ─── */
+
+.icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--st-color-muted);
+}
+
+.trigger.accordion:disabled .icon {
+  color: var(--st-color-neutral-300);
+}
+
+/* ─── Content ─── */
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 2px;
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+}
+
+.description {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+}
+
+.trigger.accordion:disabled .description {
+  color: var(--st-color-neutral-400);
+}
+
+/* ─── Indicator ─── */
+
+.indicator {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--st-transition-base);
+}
+
+.indicatorOpen {
+  transform: rotate(180deg);
+}
+
+/* ─── Panel ─── */
+
+.panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--st-transition-slow);
+}
+
+.panelOpen {
+  grid-template-rows: 1fr;
+}
+
+.panelContent {
+  overflow: hidden;
+}
+
+.panelInner {
+  padding: var(--st-space-1) var(--st-space-4) var(--st-space-4)
+    var(--st-space-12);
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-relaxed);
+}
+
+/* Showmore variant: less left padding since there's no icon column */
+.showmore ~ .panel .panelInner {
+  padding-left: var(--st-space-8);
+}

package/registry/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,148 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useAccordion } from './AccordionContext';
+import type { AccordionItemProps } from './AccordionItem.types';
+import styles from './AccordionItem.module.css';
+
+function ChevronIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function PlusIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M8 3V13M3 8H13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function MinusIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M3 8H13"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function TriangleIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
+      <path d="M1.5 3L5 7L8.5 3H1.5Z" />
+    </svg>
+  );
+}
+
+export const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
+  (
+    {
+      value,
+      title,
+      description,
+      icon,
+      disabled = false,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const { variant, openItems, toggle } = useAccordion();
+    const isOpen = openItems.includes(value);
+    const triggerId = `st-accordion-trigger-${value}`;
+    const panelId = `st-accordion-panel-${value}`;
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.item, className)}
+        {...rest}
+      >
+        <button
+          id={triggerId}
+          type="button"
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          disabled={disabled}
+          className={cn(
+            styles.trigger,
+            styles[variant],
+            isOpen && styles.open
+          )}
+          onClick={() => toggle(value)}
+        >
+          {variant === 'showmore' && (
+            <span
+              className={cn(
+                styles.indicator,
+                isOpen && styles.indicatorOpen
+              )}
+            >
+              <TriangleIcon />
+            </span>
+          )}
+
+          {icon && variant !== 'showmore' && (
+            <span className={styles.icon}>{icon}</span>
+          )}
+
+          <span className={styles.content}>
+            <span className={styles.title}>{title}</span>
+            {description && variant !== 'showmore' && (
+              <span className={styles.description}>{description}</span>
+            )}
+          </span>
+
+          {variant === 'collapsible' && (
+            <span
+              className={cn(
+                styles.indicator,
+                isOpen && styles.indicatorOpen
+              )}
+            >
+              <ChevronIcon />
+            </span>
+          )}
+
+          {variant === 'accordion' && (
+            <span className={styles.indicator}>
+              {isOpen ? <MinusIcon /> : <PlusIcon />}
+            </span>
+          )}
+        </button>
+
+        <div
+          id={panelId}
+          role="region"
+          aria-labelledby={triggerId}
+          className={cn(styles.panel, isOpen && styles.panelOpen)}
+        >
+          <div className={styles.panelContent}>
+            <div className={styles.panelInner}>{children}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+AccordionItem.displayName = 'AccordionItem';

package/registry/components/Accordion/AccordionItem.types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Unique identifier for this item within the accordion */
+  value: string;
+  /** Trigger title text */
+  title: string;
+  /** Optional description below the title (collapsible/accordion variants) */
+  description?: string;
+  /** Optional icon rendered before the title (collapsible/accordion variants) */
+  icon?: ReactNode;
+  /** Whether the item is disabled */
+  disabled?: boolean;
+}

package/registry/components/Accordion/index.ts

@@ -0,0 +1,8 @@
+export { Accordion } from './Accordion';
+export { AccordionItem } from './AccordionItem';
+export type {
+  AccordionProps,
+  AccordionType,
+  AccordionVariant,
+} from './Accordion.types';
+export type { AccordionItemProps } from './AccordionItem.types';

package/registry/components/ActionBar/ActionBar.module.css

@@ -0,0 +1,18 @@
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex-wrap: wrap;
+}
+
+.start {
+  justify-content: flex-start;
+}
+
+.center {
+  justify-content: center;
+}
+
+.end {
+  justify-content: flex-end;
+}

package/registry/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ActionBarProps } from './ActionBar.types';
+import styles from './ActionBar.module.css';
+
+export const ActionBar = forwardRef<HTMLDivElement, ActionBarProps>(
+  ({ align = 'start', className, children, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="toolbar"
+        className={cn(styles.root, styles[align], className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ActionBar.displayName = 'ActionBar';

package/registry/components/ActionBar/ActionBar.types.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+
+export type ActionBarAlign = 'start' | 'center' | 'end';
+
+export interface ActionBarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Horizontal alignment of items */
+  align?: ActionBarAlign;
+}

package/registry/components/ActionBar/ActionBarLink.module.css

@@ -0,0 +1,31 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  color: var(--st-color-primary);
+  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);
+  text-decoration: none;
+  cursor: pointer;
+  padding: var(--st-space-1) var(--st-space-2);
+  border-radius: var(--st-radius-sm);
+  transition: color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.root:hover {
+  color: var(--st-color-primary-hover);
+  text-decoration: underline;
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.externalIcon {
+  display: inline-flex;
+  align-items: center;
+}

package/registry/components/ActionBar/ActionBarLink.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ActionBarLinkProps } from './ActionBarLink.types';
+import styles from './ActionBarLink.module.css';
+
+function ExternalIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path
+        d="M10.5 7.58V11.08C10.5 11.39 10.38 11.69 10.16 11.91C9.94 12.13 9.64 12.25 9.33 12.25H2.92C2.61 12.25 2.31 12.13 2.09 11.91C1.87 11.69 1.75 11.39 1.75 11.08V4.67C1.75 4.36 1.87 4.06 2.09 3.84C2.31 3.62 2.61 3.5 2.92 3.5H6.42"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.75 1.75H12.25V5.25"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5.83 8.17L12.25 1.75"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const ActionBarLink = forwardRef<
+  HTMLAnchorElement,
+  ActionBarLinkProps
+>(({ external = false, className, children, ...rest }, ref) => {
+  return (
+    <a
+      ref={ref}
+      className={cn(styles.root, className)}
+      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+      {...rest}
+    >
+      {children}
+      {external && (
+        <span className={styles.externalIcon}>
+          <ExternalIcon />
+        </span>
+      )}
+    </a>
+  );
+});
+
+ActionBarLink.displayName = 'ActionBarLink';

package/registry/components/ActionBar/ActionBarLink.types.ts

@@ -0,0 +1,7 @@
+import type { AnchorHTMLAttributes } from 'react';
+
+export interface ActionBarLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Show external link icon */
+  external?: boolean;
+}

package/registry/components/ActionBar/index.ts

@@ -0,0 +1,4 @@
+export { ActionBar } from './ActionBar';
+export { ActionBarLink } from './ActionBarLink';
+export type { ActionBarProps, ActionBarAlign } from './ActionBar.types';
+export type { ActionBarLinkProps } from './ActionBarLink.types';

package/registry/components/Alert/Alert.module.css

@@ -0,0 +1,172 @@
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--st-space-3);
+  padding: var(--st-space-4);
+  border-radius: var(--st-radius-lg);
+  font-family: var(--st-font-family);
+  position: relative;
+}
+
+/* ─── Body ─── */
+
+.body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  gap: var(--st-space-3);
+}
+
+.inline .body {
+  flex-direction: row;
+  align-items: center;
+}
+
+.stacked .body {
+  flex-direction: column;
+}
+
+/* ─── Content ─── */
+
+.content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  margin: 0;
+}
+
+.description {
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  margin: 0;
+  opacity: 0.85;
+}
+
+/* ─── Status icon ─── */
+
+.statusIcon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+
+/* ─── Actions ─── */
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex-shrink: 0;
+}
+
+/* ─── Close ─── */
+
+.close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-sm);
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--st-transition-fast);
+  color: inherit;
+}
+
+.close:hover {
+  opacity: 1;
+}
+
+.close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* ═══════════════════════════════════════
+   Solid variant
+   ═══════════════════════════════════════ */
+
+.solid {
+  color: #ffffff;
+}
+
+.solid.info {
+  background-color: var(--st-color-info);
+}
+
+.solid.success {
+  background-color: var(--st-color-success);
+}
+
+.solid.warning {
+  background-color: var(--st-color-warning);
+}
+
+.solid.error {
+  background-color: var(--st-color-error);
+}
+
+/* ═══════════════════════════════════════
+   Alpha variant
+   ═══════════════════════════════════════ */
+
+.alpha {
+  color: var(--st-color-foreground);
+  border-left: 3px solid transparent;
+}
+
+.alpha .description {
+  color: var(--st-color-muted);
+  opacity: 1;
+}
+
+.alpha.info {
+  background-color: var(--st-color-info-subtle);
+  border-left-color: var(--st-color-info);
+}
+
+.alpha.info .statusIcon {
+  color: var(--st-color-info);
+}
+
+.alpha.success {
+  background-color: var(--st-color-success-subtle);
+  border-left-color: var(--st-color-success);
+}
+
+.alpha.success .statusIcon {
+  color: var(--st-color-success);
+}
+
+.alpha.warning {
+  background-color: var(--st-color-warning-subtle);
+  border-left-color: var(--st-color-warning);
+}
+
+.alpha.warning .statusIcon {
+  color: var(--st-color-warning);
+}
+
+.alpha.error {
+  background-color: var(--st-color-error-subtle);
+  border-left-color: var(--st-color-error);
+}
+
+.alpha.error .statusIcon {
+  color: var(--st-color-error);
+}