@soadtech/cli 0.1.0

package/registry/components/SelectDropdown/SelectDropdown.tsx

@@ -0,0 +1,375 @@
+import {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+} from 'react';
+import { cn } from '../../utils/cn';
+import type {
+  SelectDropdownProps,
+  SelectOption,
+  SelectOptionGroup,
+} from './SelectDropdown.types';
+import { SelectDropdownOverlay } from './SelectDropdownOverlay';
+import styles from './SelectDropdown.module.css';
+
+function ChevronDownIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChipDismissIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M3 3L9 9M9 3L3 9"
+        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;
+
+function isGroup(
+  item: SelectOption | SelectOptionGroup,
+): item is SelectOptionGroup {
+  return 'options' in item;
+}
+
+function flattenOptions(
+  items: (SelectOption | SelectOptionGroup)[],
+): SelectOption[] {
+  const result: SelectOption[] = [];
+  for (const item of items) {
+    if (isGroup(item)) {
+      result.push(...item.options);
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+}
+
+export const SelectDropdown = forwardRef<HTMLDivElement, SelectDropdownProps>(
+  (props, ref) => {
+    const {
+      size = 'lg',
+      label,
+      helperText,
+      feedback,
+      placeholder = 'Select...',
+      disabled = false,
+      required,
+      searchable = true,
+      searchPlaceholder = 'Search',
+      options,
+      noOptionsText = 'No options',
+      className,
+      multiple: _multiple,
+      value: _value,
+      onChange: _onChange,
+      ...rest
+    } = props as SelectDropdownProps & {
+      multiple?: boolean;
+      value?: unknown;
+      onChange?: unknown;
+    };
+
+    const multiple = props.multiple === true;
+    const maxVisibleChips = multiple
+      ? ((props as { maxVisibleChips?: number }).maxVisibleChips ?? 1)
+      : 1;
+
+    const [open, setOpen] = useState(false);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    // Merge forwarded ref with internal ref
+    const setRefs = useCallback(
+      (node: HTMLDivElement | null) => {
+        (rootRef as React.MutableRefObject<HTMLDivElement | null>).current =
+          node;
+        if (typeof ref === 'function') ref(node);
+        else if (ref)
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref],
+    );
+
+    // Close on click-outside
+    useEffect(() => {
+      if (!open) return;
+      function handleClick(e: MouseEvent) {
+        if (
+          rootRef.current &&
+          !rootRef.current.contains(e.target as Node)
+        ) {
+          setOpen(false);
+        }
+      }
+      document.addEventListener('mousedown', handleClick);
+      return () => document.removeEventListener('mousedown', handleClick);
+    }, [open]);
+
+    // Close on Escape
+    useEffect(() => {
+      if (!open) return;
+      function handleKey(e: KeyboardEvent) {
+        if (e.key === 'Escape') setOpen(false);
+      }
+      document.addEventListener('keydown', handleKey);
+      return () => document.removeEventListener('keydown', handleKey);
+    }, [open]);
+
+    const toggleOpen = useCallback(() => {
+      if (!disabled) setOpen((prev) => !prev);
+    }, [disabled]);
+
+    const allOptions = flattenOptions(options);
+
+    // Selected values as array
+    const selectedValues: string[] = multiple
+      ? ((props as { value?: string[] }).value ?? [])
+      : (props as { value?: string | null }).value
+        ? [(props as { value?: string | null }).value as string]
+        : [];
+
+    const handleSelect = useCallback(
+      (value: string) => {
+        if (multiple) {
+          const onChange = (props as { onChange?: (v: string[]) => void })
+            .onChange;
+          const current = (props as { value?: string[] }).value ?? [];
+          if (current.includes(value)) {
+            onChange?.(current.filter((v) => v !== value));
+          } else {
+            onChange?.([...current, value]);
+          }
+        } else {
+          const onChange = (
+            props as { onChange?: (v: string | null) => void }
+          ).onChange;
+          onChange?.(value);
+          setOpen(false);
+        }
+      },
+      [multiple, props],
+    );
+
+    const handleChipDismiss = useCallback(
+      (value: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (multiple) {
+          const onChange = (props as { onChange?: (v: string[]) => void })
+            .onChange;
+          const current = (props as { value?: string[] }).value ?? [];
+          onChange?.(current.filter((v) => v !== value));
+        }
+      },
+      [multiple, props],
+    );
+
+    const feedbackStatus = feedback?.status;
+    const FeedbackIcon = feedbackStatus
+      ? feedbackIcons[feedbackStatus]
+      : null;
+
+    const triggerCls = cn(
+      styles.trigger,
+      styles[size],
+      open && styles.open,
+      feedbackStatus && styles[feedbackStatus],
+      disabled && styles.disabled,
+    );
+
+    // Render trigger content
+    const renderTriggerContent = () => {
+      if (multiple) {
+        const values = (props as { value?: string[] }).value ?? [];
+        if (values.length === 0) {
+          return <span className={styles.placeholder}>{placeholder}</span>;
+        }
+
+        const visibleChips = values.slice(0, maxVisibleChips);
+        const overflowCount = values.length - maxVisibleChips;
+
+        return (
+          <div className={styles.chipArea}>
+            {visibleChips.map((val) => {
+              const opt = allOptions.find((o) => o.value === val);
+              return (
+                <span key={val} className={styles.valueChip}>
+                  <span className={styles.chipLabel}>
+                    {opt?.label ?? val}
+                  </span>
+                  <button
+                    type="button"
+                    className={styles.chipDismiss}
+                    onClick={(e) => handleChipDismiss(val, e)}
+                    aria-label={`Remove ${opt?.label ?? val}`}
+                  >
+                    <ChipDismissIcon />
+                  </button>
+                </span>
+              );
+            })}
+            {overflowCount > 0 && (
+              <span className={styles.overflowCount}>+{overflowCount}</span>
+            )}
+          </div>
+        );
+      }
+
+      // Single select
+      const singleValue = (props as { value?: string | null }).value;
+      if (!singleValue) {
+        return <span className={styles.placeholder}>{placeholder}</span>;
+      }
+
+      const selectedOpt = allOptions.find((o) => o.value === singleValue);
+      return (
+        <span className={styles.value}>
+          {selectedOpt?.label ?? singleValue}
+        </span>
+      );
+    };
+
+    return (
+      <div
+        ref={setRefs}
+        className={cn(styles.root, className)}
+        {...rest}
+      >
+        {label && (
+          <span className={styles.label}>
+            {label}
+            {required && <span className={styles.required}>*</span>}
+          </span>
+        )}
+
+        <div
+          className={triggerCls}
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          tabIndex={disabled ? -1 : 0}
+          onClick={toggleOpen}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              toggleOpen();
+            }
+          }}
+        >
+          {renderTriggerContent()}
+          <span className={cn(styles.chevron, open && styles.chevronOpen)}>
+            <ChevronDownIcon />
+          </span>
+        </div>
+
+        {helperText && (
+          <span className={styles.helperText}>{helperText}</span>
+        )}
+
+        {feedback && (
+          <span
+            className={cn(
+              styles.feedbackText,
+              styles[`feedback_${feedbackStatus}`],
+            )}
+          >
+            {FeedbackIcon && <FeedbackIcon />}
+            {feedback.message}
+          </span>
+        )}
+
+        {open && (
+          <div className={styles.popover}>
+            <SelectDropdownOverlay
+              items={options}
+              selectedValues={selectedValues}
+              multiple={multiple}
+              searchable={searchable}
+              searchPlaceholder={searchPlaceholder}
+              noOptionsText={noOptionsText}
+              onSelect={handleSelect}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+SelectDropdown.displayName = 'SelectDropdown';

package/registry/components/SelectDropdown/SelectDropdown.types.ts

@@ -0,0 +1,50 @@
+import type { HTMLAttributes } from 'react';
+
+export type SelectDropdownSize = 'lg' | 'md';
+export type SelectDropdownFeedbackStatus = 'success' | 'error' | 'warning' | 'ai';
+
+export interface SelectDropdownFeedback {
+  status: SelectDropdownFeedbackStatus;
+  message: string;
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface SelectOptionGroup {
+  label: string;
+  options: SelectOption[];
+}
+
+interface Base extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  size?: SelectDropdownSize;
+  label?: string;
+  helperText?: string;
+  feedback?: SelectDropdownFeedback;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  options: (SelectOption | SelectOptionGroup)[];
+  noOptionsText?: string;
+}
+
+export interface SingleSelectProps extends Base {
+  multiple?: false;
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+}
+
+export interface MultiSelectProps extends Base {
+  multiple: true;
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  maxVisibleChips?: number;
+}
+
+export type SelectDropdownProps = SingleSelectProps | MultiSelectProps;

package/registry/components/SelectDropdown/SelectDropdownOption.module.css

@@ -0,0 +1,101 @@
+/* ─── Option row ─── */
+.option {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  padding: var(--st-space-2) var(--st-space-3);
+  cursor: pointer;
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-foreground);
+  transition:
+    background-color var(--st-transition-fast),
+    color var(--st-transition-fast);
+  outline: none;
+}
+
+/* ─── Highlighted (keyboard) ─── */
+.option.highlighted {
+  background-color: var(--st-color-neutral-100);
+}
+
+/* ─── Hover ─── */
+.option:hover:not(.disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+/* ─── Disabled ─── */
+.option.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ─── Checkbox (multiselect) ─── */
+.checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.checkboxBox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1.5px solid var(--st-color-neutral-300);
+  border-radius: var(--st-radius-sm);
+  background-color: var(--st-color-background);
+  transition:
+    background-color var(--st-transition-fast),
+    border-color var(--st-transition-fast);
+}
+
+.checkboxBox.checked {
+  background-color: var(--st-color-success);
+  border-color: var(--st-color-success);
+}
+
+.checkboxIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--st-color-success-foreground);
+}
+
+.checkboxIcon svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* ─── Content ─── */
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+.label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+}
+
+/* ─── Check icon (single select) ─── */
+.checkIcon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--st-color-success);
+}

package/registry/components/SelectDropdown/SelectDropdownOption.tsx

@@ -0,0 +1,86 @@
+import { cn } from '../../utils/cn';
+import type { SelectOption } from './SelectDropdown.types';
+import styles from './SelectDropdownOption.module.css';
+
+function CheckmarkIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M3 8.5L6.5 12L13 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+interface SelectDropdownOptionProps {
+  option: SelectOption;
+  selected: boolean;
+  highlighted: boolean;
+  multiple: boolean;
+  onSelect: (value: string) => void;
+  onMouseEnter: () => void;
+}
+
+export function SelectDropdownOption({
+  option,
+  selected,
+  highlighted,
+  multiple,
+  onSelect,
+  onMouseEnter,
+}: SelectDropdownOptionProps) {
+  const handleClick = () => {
+    if (!option.disabled) onSelect(option.value);
+  };
+
+  return (
+    <div
+      className={cn(
+        styles.option,
+        highlighted && styles.highlighted,
+        selected && styles.selected,
+        option.disabled && styles.disabled,
+      )}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={option.disabled || undefined}
+      onClick={handleClick}
+      onMouseEnter={onMouseEnter}
+    >
+      {multiple && (
+        <span className={styles.checkbox}>
+          <span className={cn(styles.checkboxBox, selected && styles.checked)}>
+            {selected && (
+              <span className={styles.checkboxIcon}>
+                <CheckmarkIcon />
+              </span>
+            )}
+          </span>
+        </span>
+      )}
+
+      <div className={styles.content}>
+        <span className={styles.label}>{option.label}</span>
+        {option.description && (
+          <span className={styles.description}>{option.description}</span>
+        )}
+      </div>
+
+      {!multiple && selected && (
+        <span className={styles.checkIcon}>
+          <CheckmarkIcon />
+        </span>
+      )}
+    </div>
+  );
+}

package/registry/components/SelectDropdown/SelectDropdownOverlay.module.css

@@ -0,0 +1,74 @@
+/* ─── Overlay panel ─── */
+.overlay {
+  background: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  box-shadow: var(--st-shadow-lg);
+  overflow: hidden;
+}
+
+/* ─── Search box ─── */
+.searchBox {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  padding: var(--st-space-2) var(--st-space-3);
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+.searchIcon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+}
+
+.searchInput {
+  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;
+}
+
+.searchInput::placeholder {
+  color: var(--st-color-muted);
+}
+
+/* ─── Option list ─── */
+.optionList {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--st-space-1) 0;
+}
+
+/* ─── Group label ─── */
+.groupLabel {
+  display: block;
+  padding: var(--st-space-2) var(--st-space-3) var(--st-space-1);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-muted);
+  user-select: none;
+}
+
+/* ─── Divider ─── */
+.divider {
+  height: 1px;
+  background: var(--st-color-border);
+  margin: var(--st-space-1) 0;
+}
+
+/* ─── No options ─── */
+.noOptions {
+  padding: var(--st-space-4) var(--st-space-3);
+  text-align: center;
+  font-size: var(--st-font-size-sm);
+  color: var(--st-color-muted);
+}