@soadtech/cli 0.1.0

package/registry/components/InputCounter/InputCounter.module.css

@@ -0,0 +1,146 @@
+/* ─── 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);
+}
+
+/* ─── Counter box ─── */
+.counterBox {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: var(--st-color-neutral-100);
+  padding: var(--st-space-1);
+  transition: border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.counterBox.lg {
+  height: 48px;
+}
+
+.counterBox.md {
+  height: 40px;
+}
+
+.counterBox:hover:not(.disabled):not(.error):not(.warning):not(.success):not(.ai):not(.focused) {
+  border-color: var(--st-color-border-strong);
+}
+
+.counterBox.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);
+}
+
+.counterBox.error {
+  border-color: var(--st-color-error);
+  box-shadow: 0 0 0 2px var(--st-color-error);
+}
+
+.counterBox.warning {
+  border-color: var(--st-color-warning);
+  box-shadow: 0 0 0 2px var(--st-color-warning);
+}
+
+.counterBox.success {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.counterBox.ai {
+  border-color: var(--st-color-info);
+  box-shadow: 0 0 0 2px var(--st-color-info);
+}
+
+.counterBox.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Buttons ─── */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 50%;
+  background: var(--st-color-foreground);
+  color: var(--st-color-background);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background var(--st-transition-fast);
+}
+
+.button:hover {
+  background: var(--st-color-neutral-800);
+}
+
+.button.lg {
+  width: 40px;
+  height: 40px;
+}
+
+.button.md {
+  width: 32px;
+  height: 32px;
+}
+
+/* ─── Value display ─── */
+.value {
+  flex: 1;
+  text-align: center;
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.value_error {
+  color: var(--st-color-error);
+}
+
+.value_ai {
+  color: var(--st-color-info);
+}
+
+/* ─── 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/InputCounter/InputCounter.tsx

@@ -0,0 +1,232 @@
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import type { InputCounterProps } from './InputCounter.types';
+import styles from './InputCounter.module.css';
+
+function PlusIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M8 3v10M3 8h10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function MinusIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M3 8h10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+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 InputCounter = forwardRef<HTMLInputElement, InputCounterProps>(
+  (
+    {
+      label,
+      size = 'lg',
+      feedback,
+      value,
+      defaultValue = 0,
+      onChange,
+      min,
+      max,
+      step = 1,
+      disabled,
+      required,
+      className,
+      name,
+    },
+    ref,
+  ) => {
+    const hiddenRef = useRef<HTMLInputElement>(null);
+    const [focused, setFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue);
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+
+    // Merge forwarded ref with internal ref
+    const setRefs = useCallback(
+      (node: HTMLInputElement | null) => {
+        (
+          hiddenRef as React.MutableRefObject<HTMLInputElement | null>
+        ).current = node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref)
+          (ref as React.MutableRefObject<HTMLInputElement | null>).current =
+            node;
+      },
+      [ref],
+    );
+
+    const clamp = (val: number) => {
+      let clamped = val;
+      if (min !== undefined) clamped = Math.max(min, clamped);
+      if (max !== undefined) clamped = Math.min(max, clamped);
+      return clamped;
+    };
+
+    const update = (next: number) => {
+      const clamped = clamp(next);
+      if (!isControlled) setInternalValue(clamped);
+      onChange?.(clamped);
+    };
+
+    const increment = () => update(currentValue + step);
+    const decrement = () => update(currentValue - step);
+
+    const handleFocus = () => setFocused(true);
+    const handleBlur = () => setFocused(false);
+
+    const feedbackStatus = feedback?.status;
+
+    const counterBoxCls = cn(
+      styles.counterBox,
+      styles[size],
+      focused && styles.focused,
+      feedbackStatus && styles[feedbackStatus],
+      disabled && styles.disabled,
+    );
+
+    const valueCls = cn(
+      styles.value,
+      feedbackStatus === 'error' && styles.value_error,
+      feedbackStatus === 'ai' && styles.value_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={counterBoxCls}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        >
+          <button
+            type="button"
+            className={cn(styles.button, styles[size])}
+            onClick={increment}
+            disabled={disabled || (max !== undefined && currentValue >= max)}
+            aria-label="Increment"
+          >
+            <PlusIcon />
+          </button>
+
+          <span className={valueCls}>{currentValue}</span>
+
+          <button
+            type="button"
+            className={cn(styles.button, styles[size])}
+            onClick={decrement}
+            disabled={disabled || (min !== undefined && currentValue <= min)}
+            aria-label="Decrement"
+          >
+            <MinusIcon />
+          </button>
+
+          <input
+            ref={setRefs}
+            type="hidden"
+            name={name}
+            value={currentValue}
+          />
+        </div>
+
+        {feedback && (
+          <span
+            className={cn(
+              styles.feedbackText,
+              styles[`feedback_${feedbackStatus}`],
+            )}
+          >
+            {FeedbackIcon && <FeedbackIcon />}
+            {feedback.message}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+InputCounter.displayName = 'InputCounter';

package/registry/components/InputCounter/InputCounter.types.ts

@@ -0,0 +1,37 @@
+export type InputCounterSize = 'lg' | 'md';
+
+export type InputCounterFeedbackStatus = 'success' | 'error' | 'warning' | 'ai';
+
+export interface InputCounterFeedback {
+  status: InputCounterFeedbackStatus;
+  message: string;
+}
+
+export interface InputCounterProps {
+  /** Label text above counter. */
+  label?: string;
+  /** Counter height: lg=48px, md=40px. */
+  size?: InputCounterSize;
+  /** Validation feedback — affects border + value text color. */
+  feedback?: InputCounterFeedback;
+  /** Controlled value. */
+  value?: number;
+  /** Uncontrolled initial value. */
+  defaultValue?: number;
+  /** Called with new numeric value on increment/decrement. */
+  onChange?: (value: number) => void;
+  /** Minimum bound. */
+  min?: number;
+  /** Maximum bound. */
+  max?: number;
+  /** Increment/decrement amount. */
+  step?: number;
+  /** Disables entire component. */
+  disabled?: boolean;
+  /** Shows asterisk on label. */
+  required?: boolean;
+  /** Additional class on root element. */
+  className?: string;
+  /** Name attribute for the hidden input. */
+  name?: string;
+}

package/registry/components/InputCounter/index.ts

@@ -0,0 +1,7 @@
+export { InputCounter } from './InputCounter';
+export type {
+  InputCounterProps,
+  InputCounterSize,
+  InputCounterFeedback,
+  InputCounterFeedbackStatus,
+} from './InputCounter.types';

package/registry/components/InputMessage/InputMessage.module.css

@@ -0,0 +1,148 @@
+/* ─── 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);
+}
+
+/* ─── Input box (pill — wraps everything) ─── */
+.inputBox {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  border: 1px solid var(--st-color-border);
+  border-radius: 999px;
+  background: var(--st-color-surface);
+  padding: var(--st-space-1);
+  height: 48px;
+  transition: border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.inputBox.focused {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.inputBox.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Plus button (bare icon, no circle) ─── */
+.plusBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background var(--st-transition-fast);
+}
+
+.plusBtn:hover {
+  background: var(--st-color-neutral-100);
+}
+
+/* ─── Input ─── */
+.input {
+  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: 0;
+}
+
+.input::placeholder {
+  color: var(--st-color-muted);
+}
+
+/* ─── Action buttons ─── */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+}
+
+.actionBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--st-radius-md);
+  transition: background var(--st-transition-fast);
+}
+
+.actionBtn:hover {
+  background: var(--st-color-neutral-100);
+}
+
+/* ─── Separator ─── */
+.separator {
+  width: 1px;
+  height: 24px;
+  background: var(--st-color-border);
+  flex-shrink: 0;
+}
+
+/* ─── Send button ─── */
+.sendBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: var(--st-color-neutral-200);
+  color: var(--st-color-muted);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background var(--st-transition-fast),
+    color var(--st-transition-fast);
+}
+
+.sendBtn:hover {
+  background: var(--st-color-neutral-300);
+}
+
+.sendBtnActive {
+  background: var(--st-color-foreground);
+  color: var(--st-color-background);
+}
+
+.sendBtnActive:hover {
+  background: var(--st-color-neutral-800);
+}