@soadtech/cli 0.1.0

package/registry/components/Switch/Switch.module.css

@@ -0,0 +1,145 @@
+/* ─── Root ─── */
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Sizes ─── */
+.md {
+  width: 44px;
+  height: 24px;
+}
+
+.sm {
+  width: 36px;
+  height: 20px;
+}
+
+/* ─── Hidden native input ─── */
+.input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+/* ─── Track ─── */
+.track {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-300);
+  transition:
+    background-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+/* ─── Thumb ─── */
+.thumb {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-background);
+  transition: transform var(--st-transition-fast);
+}
+
+.md .thumb {
+  width: 20px;
+  height: 20px;
+  transform: translateX(2px);
+}
+
+.sm .thumb {
+  width: 16px;
+  height: 16px;
+  transform: translateX(2px);
+}
+
+/* ─── Icons ─── */
+.iconX,
+.iconCheck {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity var(--st-transition-fast);
+}
+
+.iconX {
+  opacity: 1;
+  color: var(--st-color-neutral-400);
+}
+
+.iconCheck {
+  opacity: 0;
+  color: var(--st-color-success);
+}
+
+.md .iconX svg,
+.md .iconCheck svg {
+  width: 12px;
+  height: 12px;
+}
+
+.sm .iconX svg,
+.sm .iconCheck svg {
+  width: 10px;
+  height: 10px;
+}
+
+/* ─── Checked state ─── */
+.root:has(.input:checked) .track {
+  background-color: var(--st-color-success);
+}
+
+.root.md:has(.input:checked) .thumb {
+  transform: translateX(22px);
+}
+
+.root.sm:has(.input:checked) .thumb {
+  transform: translateX(18px);
+}
+
+.root:has(.input:checked) .iconX {
+  opacity: 0;
+}
+
+.root:has(.input:checked) .iconCheck {
+  opacity: 1;
+}
+
+/* ─── Hover ─── */
+.root:not(.disabled):not(.readOnly):has(.input:hover) .track {
+  background-color: var(--st-color-neutral-400);
+}
+
+.root:not(.disabled):not(.readOnly):has(.input:checked:hover) .track {
+  background-color: var(--st-color-success-hover);
+}
+
+/* ─── Focus ─── */
+.root:has(.input:focus-visible) .track {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Read-only ─── */
+.readOnly .input {
+  cursor: default;
+}

package/registry/components/Switch/Switch.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, useRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { SwitchProps } from './Switch.types';
+import styles from './Switch.module.css';
+
+function XIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path
+        d="M3 3L9 9M9 3L3 9"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+      <path
+        d="M2.5 6L5 8.5L9.5 3.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (
+    {
+      size = 'md',
+      readOnly = false,
+      disabled = false,
+      checked,
+      defaultChecked,
+      onCheckedChange,
+      onChange,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      onChange?.(e);
+      onCheckedChange?.(e.target.checked);
+    };
+
+    return (
+      <span
+        className={cn(
+          styles.root,
+          styles[size],
+          disabled && styles.disabled,
+          readOnly && styles.readOnly,
+          className,
+        )}
+      >
+        <input
+          ref={ref ?? internalRef}
+          type="checkbox"
+          role="switch"
+          className={styles.input}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          disabled={disabled}
+          readOnly={readOnly}
+          onChange={handleChange}
+          {...rest}
+        />
+        <span className={styles.track}>
+          <span className={styles.thumb}>
+            <span className={styles.iconX}>
+              <XIcon />
+            </span>
+            <span className={styles.iconCheck}>
+              <CheckIcon />
+            </span>
+          </span>
+        </span>
+      </span>
+    );
+  },
+);
+
+Switch.displayName = 'Switch';

package/registry/components/Switch/Switch.types.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes } from 'react';
+
+export type SwitchSize = 'md' | 'sm';
+
+export interface SwitchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+  size?: SwitchSize;
+  readOnly?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export type SwitchFieldVariant = 'default' | 'card';
+
+export interface SwitchFieldProps extends Omit<SwitchProps, 'className'> {
+  label: string;
+  description?: string;
+  variant?: SwitchFieldVariant;
+  className?: string;
+}

package/registry/components/Switch/SwitchField.module.css

@@ -0,0 +1,69 @@
+/* ─── Root ─── */
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--st-space-2);
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ─── Content ─── */
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--st-space-0);
+}
+
+/* ─── Label ─── */
+.label {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-medium);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Description ─── */
+.description {
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Card variant ─── */
+.card {
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  padding: var(--st-space-3) var(--st-space-4);
+  transition:
+    border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+}
+
+.card:hover:not(.disabled):not(.readOnly) {
+  border-color: var(--st-color-border-strong);
+}
+
+.card:has(input:checked) {
+  border-color: var(--st-color-success);
+}
+
+.card:has(input:focus-visible) {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+.disabled {
+  opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ─── Read-only ─── */
+.readOnly {
+  cursor: default;
+}

package/registry/components/Switch/SwitchField.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Switch } from './Switch';
+import type { SwitchFieldProps } from './Switch.types';
+import styles from './SwitchField.module.css';
+
+export const SwitchField = forwardRef<HTMLInputElement, SwitchFieldProps>(
+  (
+    {
+      label,
+      description,
+      variant = 'default',
+      disabled = false,
+      readOnly = false,
+      size,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <label
+        className={cn(
+          styles.root,
+          styles[variant],
+          disabled && styles.disabled,
+          readOnly && styles.readOnly,
+          className,
+        )}
+      >
+        <span className={styles.content}>
+          <span className={styles.label}>{label}</span>
+          {description && (
+            <span className={styles.description}>{description}</span>
+          )}
+        </span>
+        <Switch
+          ref={ref}
+          disabled={disabled}
+          readOnly={readOnly}
+          size={size}
+          {...rest}
+        />
+      </label>
+    );
+  },
+);
+
+SwitchField.displayName = 'SwitchField';

package/registry/components/Switch/index.ts

@@ -0,0 +1,8 @@
+export { Switch } from './Switch';
+export { SwitchField } from './SwitchField';
+export type {
+  SwitchProps,
+  SwitchSize,
+  SwitchFieldProps,
+  SwitchFieldVariant,
+} from './Switch.types';

package/registry/components/Tab/Tab.module.css

@@ -0,0 +1,20 @@
+/* ─── Root ─── */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--st-font-family);
+}
+
+/* ─── Basic variant ─── */
+
+.basic {
+  gap: 0;
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+/* ─── Dynamic variant ─── */
+
+.dynamic {
+  gap: var(--st-space-2);
+}

package/registry/components/Tab/Tab.tsx

@@ -0,0 +1,35 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { TabContext } from './TabContext';
+import type { TabProps } from './Tab.types';
+import styles from './Tab.module.css';
+
+export const Tab = forwardRef<HTMLDivElement, TabProps>(
+  (
+    {
+      variant = 'basic',
+      value,
+      onValueChange,
+      disabled = false,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <TabContext.Provider value={{ value, onValueChange, variant, disabled }}>
+        <div
+          ref={ref}
+          role="tablist"
+          className={cn(styles.root, styles[variant], className)}
+          {...rest}
+        >
+          {children}
+        </div>
+      </TabContext.Provider>
+    );
+  }
+);
+
+Tab.displayName = 'Tab';

package/registry/components/Tab/Tab.types.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
+
+export type TabVariant = 'basic' | 'dynamic';
+
+export interface TabProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  variant?: TabVariant;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export interface TabItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'value'> {
+  value: string;
+  icon?: ReactNode;
+  badge?: number;
+  onClose?: () => void;
+  disabled?: boolean;
+}
+
+export interface TabAddProps extends ButtonHTMLAttributes<HTMLButtonElement> {}

package/registry/components/Tab/TabAdd.module.css

@@ -0,0 +1,36 @@
+/* ─── Add button ─── */
+
+.add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-lg);
+  background: transparent;
+  color: var(--st-color-foreground);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.add:hover:not(:disabled) {
+  background: var(--st-color-neutral-100);
+  border-color: var(--st-color-border-strong);
+}
+
+.add:focus-visible {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.add:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}

package/registry/components/Tab/TabAdd.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useTab } from './TabContext';
+import type { TabAddProps } from './Tab.types';
+import styles from './TabAdd.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"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const TabAdd = forwardRef<HTMLButtonElement, TabAddProps>(
+  ({ disabled, className, ...rest }, ref) => {
+    const ctx = useTab();
+    const isDisabled = disabled || ctx.disabled;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={isDisabled}
+        className={cn(styles.add, className)}
+        aria-label="Add tab"
+        {...rest}
+      >
+        <PlusIcon />
+      </button>
+    );
+  }
+);
+
+TabAdd.displayName = 'TabAdd';

package/registry/components/Tab/TabContext.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+import type { TabVariant } from './Tab.types';
+
+export interface TabContextValue {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  variant: TabVariant;
+  disabled: boolean;
+}
+
+export const TabContext = createContext<TabContextValue | null>(null);
+
+export function useTab(): TabContextValue {
+  const ctx = useContext(TabContext);
+  if (!ctx) {
+    throw new Error('TabItem must be used within a Tab');
+  }
+  return ctx;
+}

package/registry/components/Tab/TabItem.module.css

@@ -0,0 +1,145 @@
+/* ─── Item base ─── */
+
+.item {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-tight);
+  white-space: nowrap;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* ─── Basic variant ─── */
+
+.basic {
+  height: 40px;
+  padding: 0 var(--st-space-4);
+  gap: var(--st-space-2);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--st-color-muted);
+  font-weight: var(--st-font-weight-medium);
+  margin-bottom: -1px;
+}
+
+.basic:hover:not(.active):not(.disabled) {
+  background: var(--st-color-neutral-100);
+  color: var(--st-color-foreground);
+}
+
+.basic.active {
+  border-bottom-color: var(--st-color-success);
+  color: var(--st-color-foreground);
+  font-weight: var(--st-font-weight-semibold);
+}
+
+.basic:focus-visible {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Dynamic variant ─── */
+
+.dynamic {
+  height: 36px;
+  padding: 0 var(--st-space-3);
+  gap: var(--st-space-2);
+  background: var(--st-color-background);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-lg);
+  color: var(--st-color-foreground);
+  font-weight: var(--st-font-weight-medium);
+}
+
+.dynamic:hover:not(.active):not(.disabled) {
+  background: var(--st-color-neutral-100);
+  border-color: var(--st-color-border-strong);
+}
+
+.dynamic.active {
+  background: var(--st-color-neutral-900);
+  border-color: var(--st-color-neutral-900);
+  color: #ffffff;
+}
+
+.dynamic:focus-visible {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+/* ─── Disabled ─── */
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: default;
+}
+
+/* ─── Icon ─── */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Label ─── */
+
+.label {
+  white-space: nowrap;
+}
+
+/* ─── Badge (basic variant) ─── */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: var(--st-radius-full);
+  background: 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;
+}
+
+/* ─── Close button (dynamic variant) ─── */
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: currentColor;
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--st-radius-full);
+  flex-shrink: 0;
+  transition: background-color 0.15s ease;
+}
+
+.close:hover {
+  background-color: var(--st-color-neutral-200);
+}
+
+.closeActive:hover {
+  background-color: var(--st-color-neutral-700);
+}
+
+.close:focus-visible {
+  box-shadow: 0 0 0 2px var(--st-color-success);
+  outline: none;
+}