@soadtech/cli 0.1.0

package/registry/components/SelectDropdown/SelectDropdownOverlay.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import type { SelectOption, SelectOptionGroup } from './SelectDropdown.types';
+import { SelectDropdownOption } from './SelectDropdownOption';
+import styles from './SelectDropdownOverlay.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 isGroup(
+  item: SelectOption | SelectOptionGroup,
+): item is SelectOptionGroup {
+  return 'options' in item;
+}
+
+interface SelectDropdownOverlayProps {
+  items: (SelectOption | SelectOptionGroup)[];
+  selectedValues: string[];
+  multiple: boolean;
+  searchable: boolean;
+  searchPlaceholder: string;
+  noOptionsText: string;
+  onSelect: (value: string) => void;
+}
+
+export function SelectDropdownOverlay({
+  items,
+  selectedValues,
+  multiple,
+  searchable,
+  searchPlaceholder,
+  noOptionsText,
+  onSelect,
+}: SelectDropdownOverlayProps) {
+  const [query, setQuery] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Flatten options with group info for filtering and keyboard nav
+  const flattenItems = useCallback(
+    (q: string) => {
+      const result: { option: SelectOption; groupLabel?: string }[] = [];
+      const lowerQ = q.toLowerCase();
+
+      for (const item of items) {
+        if (isGroup(item)) {
+          const filtered = item.options.filter((o) =>
+            o.label.toLowerCase().includes(lowerQ),
+          );
+          for (const opt of filtered) {
+            result.push({ option: opt, groupLabel: item.label });
+          }
+        } else {
+          if (item.label.toLowerCase().includes(lowerQ)) {
+            result.push({ option: item });
+          }
+        }
+      }
+
+      return result;
+    },
+    [items],
+  );
+
+  const filtered = flattenItems(query);
+
+  // Reset highlight when query changes
+  useEffect(() => {
+    setHighlightedIndex(-1);
+  }, [query]);
+
+  // Auto-focus search input
+  useEffect(() => {
+    if (searchable) searchRef.current?.focus();
+  }, [searchable]);
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          let next = prev + 1;
+          while (next < filtered.length && filtered[next].option.disabled) {
+            next++;
+          }
+          return next < filtered.length ? next : prev;
+        });
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setHighlightedIndex((prev) => {
+          let next = prev - 1;
+          while (next >= 0 && filtered[next].option.disabled) {
+            next--;
+          }
+          return next >= 0 ? next : prev;
+        });
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (
+          highlightedIndex >= 0 &&
+          highlightedIndex < filtered.length &&
+          !filtered[highlightedIndex].option.disabled
+        ) {
+          onSelect(filtered[highlightedIndex].option.value);
+        }
+      }
+    },
+    [filtered, highlightedIndex, onSelect],
+  );
+
+  // Scroll highlighted option into view
+  useEffect(() => {
+    if (highlightedIndex < 0 || !listRef.current) return;
+    const el = listRef.current.querySelectorAll('[role="option"]')[
+      highlightedIndex
+    ] as HTMLElement | undefined;
+    el?.scrollIntoView({ block: 'nearest' });
+  }, [highlightedIndex]);
+
+  // Render options with group headers and dividers
+  const renderOptions = () => {
+    if (filtered.length === 0) {
+      return <div className={styles.noOptions}>{noOptionsText}</div>;
+    }
+
+    const elements: React.ReactNode[] = [];
+    let lastGroup: string | undefined;
+    let flatIndex = 0;
+
+    for (const entry of filtered) {
+      if (entry.groupLabel && entry.groupLabel !== lastGroup) {
+        if (lastGroup !== undefined) {
+          elements.push(
+            <div key={`div-${entry.groupLabel}`} className={styles.divider} />,
+          );
+        }
+        elements.push(
+          <span key={`grp-${entry.groupLabel}`} className={styles.groupLabel}>
+            {entry.groupLabel}
+          </span>,
+        );
+        lastGroup = entry.groupLabel;
+      }
+
+      const idx = flatIndex;
+      elements.push(
+        <SelectDropdownOption
+          key={entry.option.value}
+          option={entry.option}
+          selected={selectedValues.includes(entry.option.value)}
+          highlighted={highlightedIndex === idx}
+          multiple={multiple}
+          onSelect={onSelect}
+          onMouseEnter={() => setHighlightedIndex(idx)}
+        />,
+      );
+      flatIndex++;
+    }
+
+    return elements;
+  };
+
+  return (
+    <div className={styles.overlay} onKeyDown={handleKeyDown}>
+      {searchable && (
+        <div className={styles.searchBox}>
+          <span className={styles.searchIcon}>
+            <SearchIcon />
+          </span>
+          <input
+            ref={searchRef}
+            className={styles.searchInput}
+            type="text"
+            placeholder={searchPlaceholder}
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </div>
+      )}
+      <div className={styles.optionList} role="listbox" ref={listRef}>
+        {renderOptions()}
+      </div>
+    </div>
+  );
+}

package/registry/components/SelectDropdown/index.ts

@@ -0,0 +1,11 @@
+export { SelectDropdown } from './SelectDropdown';
+export type {
+  SelectDropdownProps,
+  SelectDropdownSize,
+  SelectDropdownFeedback,
+  SelectDropdownFeedbackStatus,
+  SelectOption,
+  SelectOptionGroup,
+  SingleSelectProps,
+  MultiSelectProps,
+} from './SelectDropdown.types';

package/registry/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,14 @@
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: var(--sb-expanded-width, 240px);
+  height: 100%;
+  background-color: var(--st-color-surface);
+  border-right: 1px solid var(--st-color-border);
+  transition: width var(--st-transition-slow);
+  overflow: hidden;
+}
+
+.collapsed {
+  width: var(--sb-collapsed-width, 64px);
+}

package/registry/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../utils/cn';
+import { SidebarContext } from './SidebarContext';
+import type { SidebarProps } from './Sidebar.types';
+import styles from './Sidebar.module.css';
+
+export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
+  (
+    {
+      collapsed = false,
+      expandedWidth = '240px',
+      collapsedWidth = '64px',
+      className,
+      children,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    const ctx = useMemo(() => ({ collapsed }), [collapsed]);
+
+    return (
+      <SidebarContext.Provider value={ctx}>
+        <aside
+          ref={ref}
+          className={cn(styles.sidebar, collapsed && styles.collapsed, className)}
+          style={{
+            '--sb-expanded-width': expandedWidth,
+            '--sb-collapsed-width': collapsedWidth,
+            ...style,
+          } as React.CSSProperties}
+          {...rest}
+        >
+          {children}
+        </aside>
+      </SidebarContext.Provider>
+    );
+  }
+);
+
+Sidebar.displayName = 'Sidebar';

package/registry/components/Sidebar/Sidebar.types.ts

@@ -0,0 +1,41 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+  /** Icon-only collapsed mode. */
+  collapsed?: boolean;
+  /** Width when expanded. */
+  expandedWidth?: string;
+  /** Width when collapsed. */
+  collapsedWidth?: string;
+}
+
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  /** Section label, hidden when collapsed. */
+  label?: string;
+}
+
+export interface SidebarNavItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Icon shown in both expanded and collapsed modes. */
+  icon: ReactNode;
+  /** Nav item label text. */
+  label: string;
+  /** Active/selected state. */
+  active?: boolean;
+  /** Disabled state. */
+  disabled?: boolean;
+  /** Badge content — pill in expanded, dot in collapsed. */
+  badge?: ReactNode;
+  /** Callback when item is selected. */
+  onSelect?: () => void;
+  /** Submenu content — shows chevron + animated panel. */
+  children?: ReactNode;
+}
+
+export interface SidebarDividerProps extends HTMLAttributes<HTMLDivElement> {}

package/registry/components/Sidebar/SidebarContent.module.css

@@ -0,0 +1,5 @@
+.content {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--st-space-2) 0;
+}

package/registry/components/Sidebar/SidebarContent.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { SidebarContentProps } from './Sidebar.types';
+import styles from './SidebarContent.module.css';
+
+export const SidebarContent = forwardRef<HTMLDivElement, SidebarContentProps>(
+  ({ className, children, ...rest }, ref) => (
+    <div ref={ref} className={cn(styles.content, className)} {...rest}>
+      {children}
+    </div>
+  )
+);
+
+SidebarContent.displayName = 'SidebarContent';

package/registry/components/Sidebar/SidebarContext.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+export interface SidebarContextValue {
+  collapsed: boolean;
+}
+
+export const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+export function useSidebar(): SidebarContextValue {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error('Sidebar components must be used within a <Sidebar>');
+  }
+  return ctx;
+}

package/registry/components/Sidebar/SidebarDivider.module.css

@@ -0,0 +1,5 @@
+.divider {
+  height: 1px;
+  margin: var(--st-space-2) var(--st-space-4);
+  background-color: var(--st-color-border);
+}

package/registry/components/Sidebar/SidebarDivider.tsx

@@ -0,0 +1,17 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { SidebarDividerProps } from './Sidebar.types';
+import styles from './SidebarDivider.module.css';
+
+export const SidebarDivider = forwardRef<HTMLDivElement, SidebarDividerProps>(
+  ({ className, ...rest }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      className={cn(styles.divider, className)}
+      {...rest}
+    />
+  )
+);
+
+SidebarDivider.displayName = 'SidebarDivider';

package/registry/components/Sidebar/SidebarFooter.module.css

@@ -0,0 +1,5 @@
+.footer {
+  flex-shrink: 0;
+  padding: var(--st-space-4);
+  border-top: 1px solid var(--st-color-border);
+}

package/registry/components/Sidebar/SidebarFooter.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { SidebarFooterProps } from './Sidebar.types';
+import styles from './SidebarFooter.module.css';
+
+export const SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(
+  ({ className, children, ...rest }, ref) => (
+    <div ref={ref} className={cn(styles.footer, className)} {...rest}>
+      {children}
+    </div>
+  )
+);
+
+SidebarFooter.displayName = 'SidebarFooter';

package/registry/components/Sidebar/SidebarGroup.module.css

@@ -0,0 +1,12 @@
+.group {
+  padding: var(--st-space-2) 0;
+}
+
+.label {
+  padding: var(--st-space-2) var(--st-space-4);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}

package/registry/components/Sidebar/SidebarGroup.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useSidebar } from './SidebarContext';
+import type { SidebarGroupProps } from './Sidebar.types';
+import styles from './SidebarGroup.module.css';
+
+export const SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(
+  ({ label, className, children, ...rest }, ref) => {
+    const { collapsed } = useSidebar();
+
+    return (
+      <div ref={ref} className={cn(styles.group, className)} {...rest}>
+        {label && !collapsed && (
+          <div className={styles.label}>{label}</div>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+
+SidebarGroup.displayName = 'SidebarGroup';

package/registry/components/Sidebar/SidebarHeader.module.css

@@ -0,0 +1,5 @@
+.header {
+  flex-shrink: 0;
+  padding: var(--st-space-4);
+  border-bottom: 1px solid var(--st-color-border);
+}

package/registry/components/Sidebar/SidebarHeader.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { SidebarHeaderProps } from './Sidebar.types';
+import styles from './SidebarHeader.module.css';
+
+export const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
+  ({ className, children, ...rest }, ref) => (
+    <div ref={ref} className={cn(styles.header, className)} {...rest}>
+      {children}
+    </div>
+  )
+);
+
+SidebarHeader.displayName = 'SidebarHeader';

package/registry/components/Sidebar/SidebarNavItem.module.css

@@ -0,0 +1,176 @@
+.wrapper {
+  padding: var(--st-space-1) var(--st-space-3);
+}
+
+/* ─── Expanded trigger (pill) ─── */
+
+.trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--st-space-2) var(--st-space-3);
+  gap: var(--st-space-3);
+  background: transparent;
+  border: none;
+  border-radius: var(--st-radius-full);
+  cursor: pointer;
+  color: var(--st-color-foreground);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  text-align: left;
+  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-success);
+  outline-offset: -2px;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.trigger.active {
+  background-color: var(--st-color-success);
+  color: var(--st-color-success-foreground);
+}
+
+.trigger.active:hover:not(:disabled) {
+  background-color: var(--st-color-success);
+}
+
+/* ─── Icon slot ─── */
+
+.iconSlot {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+}
+
+/* ─── Label ─── */
+
+.label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ─── Badge (expanded) ─── */
+
+.badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--st-space-2);
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-success);
+  color: var(--st-color-success-foreground);
+  font-size: var(--st-font-size-xs);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: 1;
+}
+
+.trigger.active .badge {
+  background-color: var(--st-color-success-foreground);
+  color: var(--st-color-success);
+}
+
+/* ─── Chevron ─── */
+
+.chevron {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform var(--st-transition-base);
+}
+
+.chevronOpen {
+  transform: rotate(90deg);
+}
+
+/* ─── Submenu panel (grid animation) ─── */
+
+.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-left: var(--st-space-6);
+}
+
+/* ─── Collapsed icon button (squircle) ─── */
+
+.iconButton {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;
+  background: transparent;
+  border: none;
+  border-radius: var(--st-radius-lg);
+  cursor: pointer;
+  color: var(--st-color-foreground);
+  transition: background-color var(--st-transition-fast);
+}
+
+.iconButton:hover:not(:disabled) {
+  background-color: var(--st-color-neutral-100);
+}
+
+.iconButton:focus-visible {
+  outline: 2px solid var(--st-color-success);
+  outline-offset: -2px;
+}
+
+.iconButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.iconButton.active {
+  background-color: var(--st-color-success);
+  color: var(--st-color-success-foreground);
+}
+
+.iconButton.active:hover:not(:disabled) {
+  background-color: var(--st-color-success);
+}
+
+/* ─── Badge dot (collapsed) ─── */
+
+.badgeDot {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-success);
+}