@soadtech/cli 0.1.0

package/registry/components/InputText/InputText.types.ts

@@ -0,0 +1,32 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+
+export type InputTextSize = 'lg' | 'md';
+
+export type InputTextFeedbackStatus = 'success' | 'error' | 'warning' | 'ai';
+
+export interface InputTextFeedback {
+  status: InputTextFeedbackStatus;
+  message: string;
+}
+
+export interface InputTextProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Input height: lg=48px, md=40px. */
+  size?: InputTextSize;
+  /** Label text above input. */
+  label?: string;
+  /** Description text below label, above input. */
+  description?: string;
+  /** Helper text below input. Coexists with feedback. */
+  helperText?: string;
+  /** Validation feedback — affects border + text color. */
+  feedback?: InputTextFeedback;
+  /** Shows X button when input has value. */
+  clearable?: boolean;
+  /** Clear button callback. */
+  onClear?: () => void;
+  /** Left slot inside input box. */
+  leftElement?: ReactNode;
+  /** Right slot inside input box. */
+  rightElement?: ReactNode;
+}

package/registry/components/InputText/index.ts

@@ -0,0 +1,7 @@
+export { InputText } from './InputText';
+export type {
+  InputTextProps,
+  InputTextSize,
+  InputTextFeedback,
+  InputTextFeedbackStatus,
+} from './InputText.types';

package/registry/components/InputTextArea/InputTextArea.module.css

@@ -0,0 +1,141 @@
+/* ─── Root ─── */
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--st-space-2);
+  font-family: var(--st-font-family);
+}
+
+/* ─── Label ─── */
+.label {
+  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);
+}
+
+.required {
+  color: var(--st-color-error);
+  margin-left: var(--st-space-1);
+}
+
+/* ─── Textarea box ─── */
+.textareaBox {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-lg);
+  background: var(--st-color-surface);
+  padding: 0;
+  transition: border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.textareaBox:hover:not(.disabled):not(.error):not(.warning):not(.success):not(.ai):not(.focused) {
+  border-color: var(--st-color-border-strong);
+}
+
+.textareaBox.focused:not(.disabled):not(.error):not(.warning):not(.success):not(.ai) {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.textareaBox.error {
+  border-color: var(--st-color-error);
+  box-shadow: 0 0 0 2px var(--st-color-error);
+}
+
+.textareaBox.warning {
+  border-color: var(--st-color-warning);
+  box-shadow: 0 0 0 2px var(--st-color-warning);
+}
+
+.textareaBox.success {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.textareaBox.ai {
+  border-color: var(--st-color-info);
+  box-shadow: 0 0 0 2px var(--st-color-info);
+}
+
+.textareaBox.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Toolbar ─── */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  padding: var(--st-space-2) var(--st-space-3);
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+/* ─── Textarea ─── */
+.textarea {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-foreground);
+  padding: var(--st-space-2) var(--st-space-3);
+  resize: vertical;
+  min-height: 80px;
+}
+
+.textarea::placeholder {
+  color: var(--st-color-muted);
+}
+
+.textarea_error {
+  color: var(--st-color-error);
+}
+
+.textarea_ai {
+  color: var(--st-color-info);
+}
+
+/* ─── Footer row ─── */
+.footerRow {
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* ─── Counter ─── */
+.counter {
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Feedback text ─── */
+.feedbackText {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+}
+
+.feedback_success {
+  color: var(--st-color-success);
+}
+
+.feedback_error {
+  color: var(--st-color-error);
+}
+
+.feedback_warning {
+  color: var(--st-color-warning);
+}
+
+.feedback_ai {
+  color: var(--st-color-info);
+}

package/registry/components/InputTextArea/InputTextArea.tsx

@@ -0,0 +1,170 @@
+import { forwardRef, useState } from 'react';
+import { cn } from '../../utils/cn';
+import type { InputTextAreaProps } from './InputTextArea.types';
+import styles from './InputTextArea.module.css';
+
+function FeedbackDot() {
+  return (
+    <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>
+  );
+}
+
+function FeedbackTriangle() {
+  return (
+    <svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path d="M4 0L8 8H0L4 0Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+function FeedbackDiamond() {
+  return (
+    <svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path d="M4 0L8 4L4 8L0 4L4 0Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+const feedbackIcons = {
+  success: FeedbackDot,
+  error: FeedbackDot,
+  warning: FeedbackTriangle,
+  ai: FeedbackDiamond,
+} as const;
+
+export const InputTextArea = forwardRef<
+  HTMLTextAreaElement,
+  InputTextAreaProps
+>(
+  (
+    {
+      label,
+      feedback,
+      toolbar,
+      disabled,
+      required,
+      maxLength,
+      value,
+      defaultValue,
+      onChange,
+      onFocus,
+      onBlur,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [focused, setFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(
+      () => (defaultValue as string) ?? '',
+    );
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value) : internalValue;
+
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const feedbackStatus = feedback?.status;
+
+    const textareaBoxCls = cn(
+      styles.textareaBox,
+      focused && styles.focused,
+      feedbackStatus && styles[feedbackStatus],
+      disabled && styles.disabled,
+    );
+
+    const textareaCls = cn(
+      styles.textarea,
+      feedbackStatus === 'error' && styles.textarea_error,
+      feedbackStatus === 'ai' && styles.textarea_ai,
+    );
+
+    const FeedbackIcon = feedbackStatus
+      ? feedbackIcons[feedbackStatus]
+      : null;
+
+    return (
+      <div className={cn(styles.root, className)}>
+        {label && (
+          <span className={styles.label}>
+            {label}
+            {required && <span className={styles.required}>*</span>}
+          </span>
+        )}
+
+        <div className={textareaBoxCls}>
+          {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
+
+          <textarea
+            ref={ref}
+            className={textareaCls}
+            value={isControlled ? currentValue : undefined}
+            defaultValue={isControlled ? undefined : defaultValue}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            required={required}
+            maxLength={maxLength}
+            {...rest}
+          />
+        </div>
+
+        {maxLength != null && (
+          <div className={styles.footerRow}>
+            <span className={styles.counter}>
+              {currentValue.length}/{maxLength}
+            </span>
+          </div>
+        )}
+
+        {feedback && (
+          <span
+            className={cn(
+              styles.feedbackText,
+              styles[`feedback_${feedbackStatus}`],
+            )}
+          >
+            {FeedbackIcon && <FeedbackIcon />}
+            {feedback.message}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+InputTextArea.displayName = 'InputTextArea';

package/registry/components/InputTextArea/InputTextArea.types.ts

@@ -0,0 +1,18 @@
+import type { TextareaHTMLAttributes, ReactNode } from 'react';
+
+export type InputTextAreaFeedbackStatus = 'success' | 'error' | 'warning' | 'ai';
+
+export interface InputTextAreaFeedback {
+  status: InputTextAreaFeedbackStatus;
+  message: string;
+}
+
+export interface InputTextAreaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Label text above textarea. */
+  label?: string;
+  /** Validation feedback — affects border + text color. */
+  feedback?: InputTextAreaFeedback;
+  /** Slot rendered inside box above textarea (e.g. formatting toolbar). */
+  toolbar?: ReactNode;
+}

package/registry/components/InputTextArea/index.ts

@@ -0,0 +1,6 @@
+export { InputTextArea } from './InputTextArea';
+export type {
+  InputTextAreaProps,
+  InputTextAreaFeedback,
+  InputTextAreaFeedbackStatus,
+} from './InputTextArea.types';

package/registry/components/NavbarUser/NavbarUser.module.css

@@ -0,0 +1,265 @@
+/* ═══════════════════════════════════════
+   NavbarUser — Desktop / Tablet (≥768px)
+   ═══════════════════════════════════════ */
+
+.root {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+  padding: var(--st-space-3) var(--st-space-4);
+  font-family: var(--st-font-family);
+  background-color: var(--st-color-background);
+  min-height: 56px;
+}
+
+/* ─── Mobile lead (hidden on desktop) ─── */
+
+.mobileLead {
+  display: none;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex-shrink: 0;
+}
+
+/* ─── Back button ─── */
+
+.backBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--st-transition-fast);
+}
+
+.backBtn:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.backBtn:focus-visible {
+  outline: 2px solid var(--st-color-info);
+  outline-offset: 2px;
+}
+
+/* ─── Title group ─── */
+
+.titleGroup {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.title {
+  font-size: var(--st-font-size-lg);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subtitle {
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Actions slot ─── */
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  flex-shrink: 0;
+}
+
+/* ─── User section ─── */
+
+.userSection {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  padding: var(--st-space-1) var(--st-space-2);
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  color: var(--st-color-foreground);
+  font-family: var(--st-font-family);
+  transition: background-color var(--st-transition-fast);
+}
+
+.userSection:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.userSection:focus-visible {
+  outline: 2px solid var(--st-color-info);
+  outline-offset: 2px;
+}
+
+.userInfo {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0;
+  min-width: 0;
+}
+
+.userName {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  line-height: var(--st-line-height-tight);
+  white-space: nowrap;
+}
+
+.userHandle {
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-muted);
+  white-space: nowrap;
+}
+
+.verifiedBadge {
+  flex-shrink: 0;
+}
+
+.userChevron {
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+}
+
+/* ─── Close button (hidden on desktop) ─── */
+
+.closeBtn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--st-transition-fast);
+}
+
+.closeBtn:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.closeBtn:focus-visible {
+  outline: 2px solid var(--st-color-info);
+  outline-offset: 2px;
+}
+
+/* ─── Menu button ─── */
+
+.menuBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  transition: background-color var(--st-transition-fast);
+}
+
+.menuBtn:hover {
+  background-color: var(--st-color-neutral-100);
+}
+
+.menuBtn:focus-visible {
+  outline: 2px solid var(--st-color-info);
+  outline-offset: 2px;
+}
+
+/* ═══════════════════════════════════════
+   Mobile (< 768px)
+   ═══════════════════════════════════════ */
+
+@media (max-width: 767px) {
+  .root {
+    flex-wrap: wrap;
+    padding: var(--st-space-2) var(--st-space-3);
+  }
+
+  .mobileLead {
+    display: flex;
+  }
+
+  .titleGroup {
+    flex-basis: 100%;
+    order: 10;
+  }
+
+  .title {
+    font-size: var(--st-font-size-md);
+  }
+
+  /* Avatar-only on mobile */
+  .userInfo {
+    display: none;
+  }
+
+  .userChevron {
+    display: none;
+  }
+
+  .userSection {
+    padding: var(--st-space-1);
+  }
+
+  /* ─── Level 2 mobile ─── */
+
+  .level2 .mobileLead {
+    display: none;
+  }
+
+  .level2 .actions {
+    display: none;
+  }
+
+  .level2 .userSection {
+    display: none;
+  }
+
+  .level2 .closeBtn {
+    display: flex;
+  }
+
+  .level2 .titleGroup {
+    flex-basis: auto;
+    flex: 1;
+    order: 0;
+  }
+
+  .level2 .subtitle {
+    display: none;
+  }
+}