@soadtech/cli 0.1.0

package/registry/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,46 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { SegmentedControlContext } from './SegmentedControlContext';
+import type { SegmentedControlProps } from './SegmentedControl.types';
+import styles from './SegmentedControl.module.css';
+
+export const SegmentedControl = forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(
+  (
+    {
+      size = 'md',
+      variant = 'button',
+      value,
+      onValueChange,
+      disabled = false,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <SegmentedControlContext.Provider
+        value={{ value, onValueChange, disabled }}
+      >
+        <div
+          ref={ref}
+          role="radiogroup"
+          className={cn(
+            styles.root,
+            styles[size],
+            styles[variant],
+            className
+          )}
+          {...rest}
+        >
+          {children}
+        </div>
+      </SegmentedControlContext.Provider>
+    );
+  }
+);
+
+SegmentedControl.displayName = 'SegmentedControl';

package/registry/components/SegmentedControl/SegmentedControl.types.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+export type SegmentedControlSize = 'lg' | 'md' | 'sm';
+export type SegmentedControlVariant = 'button' | 'tag';
+
+export interface SegmentedControlProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /** Size of the segmented control */
+  size?: SegmentedControlSize;
+  /** Visual variant */
+  variant?: SegmentedControlVariant;
+  /** Currently active segment value (controlled) */
+  value?: string;
+  /** Callback when active segment changes */
+  onValueChange?: (value: string) => void;
+  /** Disable all segments */
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export interface SegmentedControlItemProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+  /** Unique value for this segment */
+  value: string;
+  /** Optional icon */
+  icon?: ReactNode;
+}

package/registry/components/SegmentedControl/SegmentedControlContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export interface SegmentedControlContextValue {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled: boolean;
+}
+
+export const SegmentedControlContext =
+  createContext<SegmentedControlContextValue | null>(null);
+
+export function useSegmentedControl(): SegmentedControlContextValue {
+  const ctx = useContext(SegmentedControlContext);
+  if (!ctx) {
+    throw new Error(
+      'SegmentedControlItem must be used within a SegmentedControl'
+    );
+  }
+  return ctx;
+}

package/registry/components/SegmentedControl/SegmentedControlItem.module.css

@@ -0,0 +1,55 @@
+.item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sc-height);
+  padding: 0 var(--sc-px);
+  font-size: var(--sc-font);
+  gap: var(--sc-gap);
+  background: transparent;
+  color: var(--st-color-foreground);
+  border: none;
+  cursor: pointer;
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-medium);
+  line-height: var(--st-line-height-tight);
+  white-space: nowrap;
+  user-select: none;
+  transition: background-color var(--st-transition-fast),
+    color var(--st-transition-fast);
+}
+
+.item:hover:not(.active):not(:disabled) {
+  background: var(--st-color-neutral-200);
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: -2px;
+}
+
+.active {
+  background: var(--st-color-neutral-900);
+  color: #fff;
+  box-shadow: var(--st-shadow-sm);
+}
+
+.active:hover:not(:disabled) {
+  background: var(--st-color-neutral-800);
+}
+
+.item:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+}

package/registry/components/SegmentedControl/SegmentedControlItem.tsx

@@ -0,0 +1,32 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useSegmentedControl } from './SegmentedControlContext';
+import type { SegmentedControlItemProps } from './SegmentedControl.types';
+import styles from './SegmentedControlItem.module.css';
+
+export const SegmentedControlItem = forwardRef<
+  HTMLButtonElement,
+  SegmentedControlItemProps
+>(({ value, icon, disabled, className, children, ...rest }, ref) => {
+  const ctx = useSegmentedControl();
+  const isActive = ctx.value === value;
+  const isDisabled = disabled || ctx.disabled;
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="radio"
+      aria-checked={isActive}
+      disabled={isDisabled}
+      className={cn(styles.item, isActive && styles.active, className)}
+      onClick={() => ctx.onValueChange?.(value)}
+      {...rest}
+    >
+      {icon && <span className={styles.icon}>{icon}</span>}
+      {children && <span className={styles.label}>{children}</span>}
+    </button>
+  );
+});
+
+SegmentedControlItem.displayName = 'SegmentedControlItem';

package/registry/components/SegmentedControl/index.ts

@@ -0,0 +1,8 @@
+export { SegmentedControl } from './SegmentedControl';
+export { SegmentedControlItem } from './SegmentedControlItem';
+export type {
+  SegmentedControlProps,
+  SegmentedControlSize,
+  SegmentedControlVariant,
+  SegmentedControlItemProps,
+} from './SegmentedControl.types';

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

@@ -0,0 +1,214 @@
+/* ─── Root ─── */
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--st-space-2);
+  position: relative;
+  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);
+}
+
+/* ─── Trigger ─── */
+.trigger {
+  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);
+  cursor: pointer;
+  transition:
+    border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.trigger.lg {
+  height: 48px;
+}
+
+.trigger.md {
+  height: 40px;
+}
+
+.trigger:hover:not(.disabled):not(.error):not(.warning):not(.success):not(.ai):not(.open) {
+  border-color: var(--st-color-border-strong);
+}
+
+.trigger.open:not(.disabled):not(.error):not(.warning):not(.ai) {
+  border-color: var(--st-color-border-strong);
+}
+
+.trigger.error {
+  border-color: var(--st-color-error);
+  box-shadow: 0 0 0 2px var(--st-color-error);
+}
+
+.trigger.warning {
+  border-color: var(--st-color-warning);
+  box-shadow: 0 0 0 2px var(--st-color-warning);
+}
+
+.trigger.success {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.trigger.ai {
+  border-color: var(--st-color-info);
+  box-shadow: 0 0 0 2px var(--st-color-info);
+}
+
+.trigger.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Value / Placeholder ─── */
+.value {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.placeholder {
+  flex: 1;
+  min-width: 0;
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Chevron ─── */
+.chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--st-color-muted);
+  transition: transform var(--st-transition-fast);
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+/* ─── Chip area (multiselect) ─── */
+.chipArea {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ─── Value chip ─── */
+.valueChip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+  height: 24px;
+  padding: 0 var(--st-space-2);
+  background: var(--st-color-success);
+  color: var(--st-color-success-foreground);
+  border-radius: 9999px;
+  font-size: var(--st-font-size-xs);
+  line-height: 1;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.chipLabel {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chipDismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 9999px;
+  opacity: 0.8;
+  transition: opacity var(--st-transition-fast);
+}
+
+.chipDismiss:hover {
+  opacity: 1;
+}
+
+/* ─── Overflow counter ─── */
+.overflowCount {
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* ─── Helper text ─── */
+.helperText {
+  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);
+}
+
+/* ─── Popover ─── */
+.popover {
+  position: absolute;
+  top: calc(100% + var(--st-space-2));
+  left: 0;
+  width: 100%;
+  z-index: var(--st-z-dropdown);
+}