@soadtech/cli 0.1.0

package/registry/components/InputSearch/InputSearch.tsx

@@ -0,0 +1,251 @@
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import type { InputSearchProps } from './InputSearch.types';
+import styles from './InputSearch.module.css';
+
+function SearchIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.833313 7.33331C0.833313 3.74346 3.74346 0.833313 7.33331 0.833313C10.9232 0.833313 13.8333 3.74347 13.8333 7.33331C13.8333 8.94827 13.2444 10.4257 12.2695 11.5624L15.0202 14.3131C15.2155 14.5084 15.2155 14.8249 15.0202 15.0202C14.8249 15.2155 14.5084 15.2155 14.3131 15.0202L11.5624 12.2695C10.4257 13.2444 8.94827 13.8333 7.33331 13.8333C3.74347 13.8333 0.833313 10.9232 0.833313 7.33331ZM7.33331 1.83331C4.29575 1.83331 1.83331 4.29575 1.83331 7.33331C1.83331 10.3709 4.29575 12.8333 7.33331 12.8333C10.3709 12.8333 12.8333 10.3709 12.8333 7.33331C12.8333 4.29575 10.3709 1.83331 7.33331 1.83331Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.55806 4.55806C4.80214 4.31398 5.19786 4.31398 5.44194 4.55806L10.5028 9.61889L15.5636 4.55806C15.8077 4.31398 16.2034 4.31398 16.4475 4.55806C16.6916 4.80214 16.6916 5.19786 16.4475 5.44194L11.3867 10.5028L16.4475 15.5636C16.6916 15.8077 16.6916 16.2034 16.4475 16.4475C16.2034 16.6916 15.8077 16.6916 15.5636 16.4475L10.5028 11.3867L5.44194 16.4475C5.19786 16.6916 4.80214 16.6916 4.55806 16.4475C4.31398 16.2034 4.31398 15.8077 4.55806 15.5636L9.61889 10.5028L4.55806 5.44194C4.31398 5.19786 4.31398 4.80214 4.55806 4.55806Z"
+        fill="currentColor"
+      />
+    </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 InputSearch = forwardRef<HTMLInputElement, InputSearchProps>(
+  (
+    {
+      label,
+      placeholder,
+      value,
+      defaultValue,
+      onChange,
+      onSearch,
+      onClear,
+      helperText,
+      feedback,
+      disabled,
+      required,
+      className,
+      name,
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [focused, setFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(
+      () => (defaultValue as string) ?? '',
+    );
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value) : internalValue;
+    const hasValue = currentValue.length > 0;
+
+    const setRefs = useCallback(
+      (node: HTMLInputElement | null) => {
+        (inputRef 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 handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(true);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+    };
+
+    const handleClear = () => {
+      if (!isControlled) setInternalValue('');
+      onClear?.();
+      inputRef.current?.focus();
+    };
+
+    const handleSearch = () => {
+      onSearch?.(currentValue);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        handleSearch();
+      }
+    };
+
+    const feedbackStatus = feedback?.status;
+    const showClear = (focused || hasValue) && !disabled;
+
+    const inputBoxCls = cn(
+      styles.inputBox,
+      focused && styles.focused,
+      feedbackStatus && styles[feedbackStatus],
+      disabled && styles.disabled,
+    );
+
+    const inputCls = cn(
+      styles.input,
+      feedbackStatus === 'error' && styles.input_error,
+      feedbackStatus === 'ai' && styles.input_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={inputBoxCls}>
+          <input
+            ref={setRefs}
+            className={inputCls}
+            placeholder={placeholder}
+            value={isControlled ? currentValue : undefined}
+            defaultValue={isControlled ? undefined : defaultValue}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            disabled={disabled}
+            required={required}
+            name={name}
+          />
+
+          {showClear && (
+            <button
+              type="button"
+              className={styles.clearBtn}
+              onClick={handleClear}
+              aria-label="Clear search"
+            >
+              <CloseIcon />
+            </button>
+          )}
+
+          <button
+            type="button"
+            className={styles.searchBtn}
+            onClick={handleSearch}
+            disabled={disabled}
+            aria-label="Search"
+          >
+            <SearchIcon />
+          </button>
+        </div>
+
+        {helperText && (
+          <span className={styles.helperText}>{helperText}</span>
+        )}
+
+        {feedback && (
+          <span
+            className={cn(
+              styles.feedbackText,
+              styles[`feedback_${feedbackStatus}`],
+            )}
+          >
+            {FeedbackIcon && <FeedbackIcon />}
+            {feedback.message}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+InputSearch.displayName = 'InputSearch';

package/registry/components/InputSearch/InputSearch.types.ts

@@ -0,0 +1,35 @@
+export type InputSearchFeedbackStatus = 'success' | 'error' | 'warning' | 'ai';
+
+export interface InputSearchFeedback {
+  status: InputSearchFeedbackStatus;
+  message: string;
+}
+
+export interface InputSearchProps {
+  /** Label text above input. */
+  label?: string;
+  /** Placeholder text for the input. */
+  placeholder?: string;
+  /** Controlled value. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Native change handler for the input. */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Called with current value on Enter or search icon click. */
+  onSearch?: (value: string) => void;
+  /** Called when the clear button is clicked. */
+  onClear?: () => void;
+  /** Helper text below input. */
+  helperText?: string;
+  /** Validation feedback — affects border + text color. */
+  feedback?: InputSearchFeedback;
+  /** Disables entire component. */
+  disabled?: boolean;
+  /** Shows asterisk on label. */
+  required?: boolean;
+  /** Additional class on root element. */
+  className?: string;
+  /** Name attribute for the input. */
+  name?: string;
+}

package/registry/components/InputSearch/index.ts

@@ -0,0 +1,6 @@
+export { InputSearch } from './InputSearch';
+export type {
+  InputSearchProps,
+  InputSearchFeedback,
+  InputSearchFeedbackStatus,
+} from './InputSearch.types';

package/registry/components/InputText/InputText.module.css

@@ -0,0 +1,183 @@
+/* ─── 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);
+}
+
+/* ─── Description ─── */
+.description {
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Input box ─── */
+.inputBox {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-lg);
+  background: var(--st-color-surface);
+  padding: 0 var(--st-space-3);
+  transition: border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.inputBox.lg {
+  height: 48px;
+}
+
+.inputBox.md {
+  height: 40px;
+}
+
+.inputBox:hover:not(.disabled):not(.error):not(.warning):not(.success):not(.ai):not(.focused) {
+  border-color: var(--st-color-border-strong);
+}
+
+.inputBox.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);
+}
+
+.inputBox.error {
+  border-color: var(--st-color-error);
+  box-shadow: 0 0 0 2px var(--st-color-error);
+}
+
+.inputBox.warning {
+  border-color: var(--st-color-warning);
+  box-shadow: 0 0 0 2px var(--st-color-warning);
+}
+
+.inputBox.success {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.inputBox.ai {
+  border-color: var(--st-color-info);
+  box-shadow: 0 0 0 2px var(--st-color-info);
+}
+
+.inputBox.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── 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);
+}
+
+.input_error {
+  color: var(--st-color-error);
+}
+
+.input_ai {
+  color: var(--st-color-info);
+}
+
+/* ─── Left / Right element ─── */
+.leftElement,
+.rightElement {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Clear button ─── */
+.clearBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: var(--st-radius-md);
+  color: var(--st-color-muted);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background var(--st-transition-fast);
+}
+
+.clearBtn:hover {
+  background: var(--st-color-neutral-100);
+}
+
+/* ─── Footer row ─── */
+.footerRow {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* ─── Helper text ─── */
+.helperText {
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Counter ─── */
+.counter {
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+  margin-left: auto;
+}
+
+/* ─── 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/InputText/InputText.tsx

@@ -0,0 +1,244 @@
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import type { InputTextProps } from './InputText.types';
+import styles from './InputText.module.css';
+
+function ClearIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M4.5 4.5l7 7M11.5 4.5l-7 7"
+        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 InputText = forwardRef<HTMLInputElement, InputTextProps>(
+  (
+    {
+      size = 'lg',
+      label,
+      description,
+      helperText,
+      feedback,
+      clearable = false,
+      onClear,
+      leftElement,
+      rightElement,
+      disabled,
+      required,
+      maxLength,
+      type,
+      value,
+      defaultValue,
+      onChange,
+      onFocus,
+      onBlur,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [focused, setFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(
+      () => (defaultValue as string) ?? '',
+    );
+
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? String(value) : internalValue;
+    const hasValue = currentValue.length > 0;
+
+    // Merge forwarded ref with internal ref
+    const setRefs = useCallback(
+      (node: HTMLInputElement | null) => {
+        (inputRef 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 handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) setInternalValue(e.target.value);
+      onChange?.(e);
+    };
+
+    const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const handleClear = () => {
+      if (!isControlled) setInternalValue('');
+      onClear?.();
+      inputRef.current?.focus();
+    };
+
+    const feedbackStatus = feedback?.status;
+    const showClear = clearable && hasValue && !disabled;
+    const showFooter = helperText || maxLength != null;
+
+    const inputBoxCls = cn(
+      styles.inputBox,
+      styles[size],
+      focused && styles.focused,
+      feedbackStatus && styles[feedbackStatus],
+      disabled && styles.disabled,
+    );
+
+    const inputCls = cn(
+      styles.input,
+      feedbackStatus === 'error' && styles.input_error,
+      feedbackStatus === 'ai' && styles.input_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>
+        )}
+
+        {description && (
+          <span className={styles.description}>{description}</span>
+        )}
+
+        <div className={inputBoxCls}>
+          {leftElement && (
+            <span className={styles.leftElement}>{leftElement}</span>
+          )}
+
+          <input
+            ref={setRefs}
+            className={inputCls}
+            type={type}
+            value={isControlled ? currentValue : undefined}
+            defaultValue={isControlled ? undefined : defaultValue}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            required={required}
+            maxLength={maxLength}
+            {...rest}
+          />
+
+          {rightElement && (
+            <span className={styles.rightElement}>{rightElement}</span>
+          )}
+
+          {showClear && (
+            <button
+              type="button"
+              className={styles.clearBtn}
+              onClick={handleClear}
+              aria-label="Clear input"
+            >
+              <ClearIcon />
+            </button>
+          )}
+        </div>
+
+        {showFooter && (
+          <div className={styles.footerRow}>
+            {helperText && (
+              <span className={styles.helperText}>{helperText}</span>
+            )}
+            {maxLength != null && (
+              <span className={styles.counter}>
+                {currentValue.length}/{maxLength}
+              </span>
+            )}
+          </div>
+        )}
+
+        {feedback && (
+          <span
+            className={cn(
+              styles.feedbackText,
+              styles[`feedback_${feedbackStatus}`],
+            )}
+          >
+            {FeedbackIcon && <FeedbackIcon />}
+            {feedback.message}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+InputText.displayName = 'InputText';