@soadtech/cli 0.1.0

package/registry/components/RangeSlider/RangeSlider.module.css

@@ -0,0 +1,133 @@
+/* ═══ RangeSlider ═══ */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-1);
+  font-family: var(--st-font-family);
+}
+
+/* ─── Label ─── */
+
+.label {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+/* ─── Slider row ─── */
+
+.sliderRow {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-3);
+}
+
+.sliderWrap {
+  flex: 1;
+  min-width: 0;
+}
+
+/* ─── Track container ─── */
+
+.sliderContainer {
+  position: relative;
+  height: 20px;
+  cursor: pointer;
+}
+
+/* ─── Track ─── */
+
+.track {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 6px;
+  transform: translateY(-50%);
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-neutral-200);
+}
+
+/* ─── Fill ─── */
+
+.fill {
+  position: absolute;
+  top: 50%;
+  height: 6px;
+  transform: translateY(-50%);
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-primary);
+  pointer-events: none;
+}
+
+/* ─── Thumb ─── */
+
+.thumb {
+  position: absolute;
+  top: 50%;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-surface);
+  border: 2px solid var(--st-color-neutral-300);
+  box-shadow: var(--st-shadow-sm);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  z-index: 1;
+  transition: border-color var(--st-transition-fast),
+    box-shadow var(--st-transition-fast);
+  touch-action: none;
+}
+
+.thumb:hover {
+  border-color: var(--st-color-primary);
+}
+
+.thumb:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.thumbActive {
+  cursor: grabbing;
+  border-color: var(--st-color-primary);
+  box-shadow: var(--st-shadow-md);
+}
+
+/* ─── Value input (single mode) ─── */
+
+.valueInput {
+  width: 64px;
+  height: 36px;
+  padding: 0 var(--st-space-2);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-md);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  text-align: center;
+  color: var(--st-color-foreground);
+  background-color: var(--st-color-surface);
+  outline: none;
+  transition: border-color var(--st-transition-fast);
+}
+
+.valueInput:focus {
+  border-color: var(--st-color-primary);
+}
+
+/* ─── Value labels (range mode) ─── */
+
+.valueLabels {
+  position: relative;
+  height: 20px;
+  margin-top: var(--st-space-1);
+}
+
+.valueLabel {
+  position: absolute;
+  transform: translateX(-50%);
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  white-space: nowrap;
+}

package/registry/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,251 @@
+import { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import type { RangeSliderProps } from './RangeSlider.types';
+import styles from './RangeSlider.module.css';
+
+function clamp(val: number, lo: number, hi: number) {
+  return Math.max(lo, Math.min(hi, val));
+}
+
+function snap(val: number, min: number, step: number) {
+  return Math.round((val - min) / step) * step + min;
+}
+
+export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>(
+  (
+    {
+      label,
+      min = 0,
+      max = 100,
+      step = 1,
+      value = 0,
+      onValueChange,
+      rangeValue,
+      onRangeChange,
+      showInput = false,
+      suffix = '',
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const trackRef = useRef<HTMLDivElement>(null);
+    const [dragging, setDragging] = useState<number | null>(null);
+    const [inputText, setInputText] = useState(String(value));
+    const [inputFocused, setInputFocused] = useState(false);
+
+    const isRange = rangeValue !== undefined;
+
+    useEffect(() => {
+      if (!inputFocused) {
+        setInputText(String(value));
+      }
+    }, [value, inputFocused]);
+
+    const toPercent = useCallback(
+      (val: number) => ((val - min) / (max - min)) * 100,
+      [min, max]
+    );
+
+    const fromClientX = useCallback(
+      (clientX: number) => {
+        const el = trackRef.current;
+        if (!el) return min;
+        const rect = el.getBoundingClientRect();
+        const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+        const raw = min + ratio * (max - min);
+        return clamp(snap(raw, min, step), min, max);
+      },
+      [min, max, step]
+    );
+
+    /* ─── Pointer handlers ─── */
+
+    const handlePointerDown =
+      (index: number) => (e: React.PointerEvent) => {
+        e.preventDefault();
+        (e.target as HTMLElement).setPointerCapture(e.pointerId);
+        setDragging(index);
+      };
+
+    const handlePointerMove =
+      (index: number) => (e: React.PointerEvent) => {
+        if (dragging !== index) return;
+        const val = fromClientX(e.clientX);
+
+        if (isRange && rangeValue && onRangeChange) {
+          const next: [number, number] = [rangeValue[0], rangeValue[1]];
+          next[index] = val;
+          if (next[0] > next[1]) {
+            if (index === 0) next[0] = next[1];
+            else next[1] = next[0];
+          }
+          onRangeChange(next);
+        } else if (!isRange) {
+          onValueChange?.(val);
+        }
+      };
+
+    const handlePointerUp = () => setDragging(null);
+
+    const handleTrackClick = (e: React.MouseEvent) => {
+      if ((e.target as HTMLElement).closest('[role="slider"]')) return;
+      const val = fromClientX(e.clientX);
+
+      if (isRange && rangeValue && onRangeChange) {
+        const d0 = Math.abs(val - rangeValue[0]);
+        const d1 = Math.abs(val - rangeValue[1]);
+        const next: [number, number] = [rangeValue[0], rangeValue[1]];
+        if (d0 <= d1) next[0] = val;
+        else next[1] = val;
+        if (next[0] > next[1])
+          [next[0], next[1]] = [next[1], next[0]];
+        onRangeChange(next);
+      } else if (!isRange) {
+        onValueChange?.(val);
+      }
+    };
+
+    /* ─── Keyboard handler ─── */
+
+    const handleKeyDown =
+      (index: number) => (e: React.KeyboardEvent) => {
+        let delta = 0;
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = step;
+        else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown')
+          delta = -step;
+        else return;
+        e.preventDefault();
+
+        if (isRange && rangeValue && onRangeChange) {
+          const next: [number, number] = [rangeValue[0], rangeValue[1]];
+          next[index] = clamp(next[index] + delta, min, max);
+          if (next[0] > next[1]) return;
+          onRangeChange(next);
+        } else if (!isRange) {
+          onValueChange?.(clamp(value + delta, min, max));
+        }
+      };
+
+    /* ─── Input handlers ─── */
+
+    const handleInputFocus = () => {
+      setInputFocused(true);
+      setInputText(String(value));
+    };
+
+    const handleInputBlur = () => {
+      setInputFocused(false);
+      const parsed = parseFloat(inputText);
+      if (!isNaN(parsed)) {
+        onValueChange?.(clamp(snap(parsed, min, step), min, max));
+      } else {
+        setInputText(String(value));
+      }
+    };
+
+    const handleInputKeyDown = (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') (e.target as HTMLInputElement).blur();
+    };
+
+    /* ─── Computed positions ─── */
+
+    const singlePct = isRange ? 0 : toPercent(value);
+    const rangePcts = isRange
+      ? [toPercent(rangeValue![0]), toPercent(rangeValue![1])]
+      : [0, 0];
+
+    /* ─── Render ─── */
+
+    const renderThumb = (pct: number, index: number, ariaVal: number, ariaLabel?: string) => (
+      <div
+        key={index}
+        className={cn(styles.thumb, dragging === index && styles.thumbActive)}
+        style={{ left: `${pct}%` }}
+        role="slider"
+        tabIndex={0}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={ariaVal}
+        aria-label={ariaLabel}
+        onPointerDown={handlePointerDown(index)}
+        onPointerMove={handlePointerMove(index)}
+        onPointerUp={handlePointerUp}
+        onKeyDown={handleKeyDown(index)}
+      />
+    );
+
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {label && <span className={styles.label}>{label}</span>}
+
+        <div className={styles.sliderRow}>
+          <div className={styles.sliderWrap}>
+            <div
+              className={styles.sliderContainer}
+              ref={trackRef}
+              onClick={handleTrackClick}
+            >
+              <div className={styles.track} />
+
+              {isRange ? (
+                <div
+                  className={styles.fill}
+                  style={{
+                    left: `${rangePcts[0]}%`,
+                    width: `${rangePcts[1] - rangePcts[0]}%`,
+                  }}
+                />
+              ) : (
+                <div
+                  className={styles.fill}
+                  style={{ left: 0, width: `${singlePct}%` }}
+                />
+              )}
+
+              {isRange
+                ? [
+                    renderThumb(rangePcts[0], 0, rangeValue![0], `${label} minimum`),
+                    renderThumb(rangePcts[1], 1, rangeValue![1], `${label} maximum`),
+                  ]
+                : renderThumb(singlePct, 0, value, label)}
+            </div>
+
+            {isRange && rangeValue && (
+              <div className={styles.valueLabels}>
+                <span
+                  className={styles.valueLabel}
+                  style={{ left: `${rangePcts[0]}%` }}
+                >
+                  {rangeValue[0]}
+                </span>
+                <span
+                  className={styles.valueLabel}
+                  style={{ left: `${rangePcts[1]}%` }}
+                >
+                  {rangeValue[1]}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {!isRange && showInput && (
+            <input
+              type="text"
+              className={styles.valueInput}
+              value={inputFocused ? inputText : `${value}${suffix}`}
+              onChange={(e) =>
+                setInputText(e.target.value.replace(suffix, ''))
+              }
+              onFocus={handleInputFocus}
+              onBlur={handleInputBlur}
+              onKeyDown={handleInputKeyDown}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+RangeSlider.displayName = 'RangeSlider';

package/registry/components/RangeSlider/RangeSlider.types.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes } from 'react';
+
+export interface RangeSliderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Label text above the slider */
+  label?: string;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Single-thumb value */
+  value?: number;
+  /** Single-thumb change handler */
+  onValueChange?: (value: number) => void;
+  /** Dual-thumb range value [low, high] */
+  rangeValue?: [number, number];
+  /** Dual-thumb range change handler */
+  onRangeChange?: (value: [number, number]) => void;
+  /** Show editable input next to track (single mode) */
+  showInput?: boolean;
+  /** Suffix shown in input, e.g. "%" */
+  suffix?: string;
+}

package/registry/components/RangeSlider/index.ts

@@ -0,0 +1,2 @@
+export { RangeSlider } from './RangeSlider';
+export type { RangeSliderProps } from './RangeSlider.types';

package/registry/components/Rating/Rating.module.css

@@ -0,0 +1,56 @@
+/* ─── Root ─── */
+.root {
+  --rating-color-active: var(--st-color-primary);
+  --rating-color-inactive: var(--st-color-neutral-200);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--st-space-1);
+}
+
+/* ─── Stars container ─── */
+.stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+/* ─── Icon fills ─── */
+.iconActive {
+  fill: var(--rating-color-active);
+}
+
+.iconInactive {
+  fill: var(--rating-color-inactive);
+}
+
+/* ─── Value text ─── */
+.value {
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-semibold);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-foreground);
+}
+
+.md .value {
+  font-size: var(--st-font-size-sm);
+}
+
+.sm .value {
+  font-size: var(--st-font-size-xs);
+}
+
+/* ─── Count text ─── */
+.count {
+  font-family: var(--st-font-family);
+  line-height: var(--st-line-height-tight);
+  color: var(--st-color-muted);
+}
+
+.md .count {
+  font-size: var(--st-font-size-sm);
+}
+
+.sm .count {
+  font-size: var(--st-font-size-xs);
+}

package/registry/components/Rating/Rating.tsx

@@ -0,0 +1,142 @@
+import { forwardRef, useId } from 'react';
+import { cn } from '../../utils/cn';
+import type { RatingIconType, RatingProps } from './Rating.types';
+import styles from './Rating.module.css';
+
+const STAR_PATH =
+  'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z';
+const HEART_PATH =
+  'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z';
+
+interface IconProps {
+  type: RatingIconType;
+  fill: number;
+  gradientId: string;
+  size: number;
+}
+
+function RatingIcon({ type, fill, gradientId, size }: IconProps) {
+  const d = type === 'star' ? STAR_PATH : HEART_PATH;
+  const clamped = Math.min(1, Math.max(0, fill));
+
+  if (clamped <= 0) {
+    return (
+      <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+        <path d={d} className={styles.iconInactive} />
+      </svg>
+    );
+  }
+
+  if (clamped >= 1) {
+    return (
+      <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+        <path d={d} className={styles.iconActive} />
+      </svg>
+    );
+  }
+
+  const offset = `${Math.round(clamped * 100)}%`;
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
+      <defs>
+        <linearGradient id={gradientId}>
+          <stop
+            offset={offset}
+            style={{ stopColor: 'var(--rating-color-active)' }}
+          />
+          <stop
+            offset={offset}
+            style={{ stopColor: 'var(--rating-color-inactive)' }}
+          />
+        </linearGradient>
+      </defs>
+      <path d={d} fill={`url(#${gradientId})`} />
+    </svg>
+  );
+}
+
+const ICON_SIZE = { md: 16, sm: 12 } as const;
+
+export const Rating = forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      value,
+      count,
+      maxStars = 5,
+      size = 'md',
+      variant = 'type1',
+      icon = 'star',
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const baseId = useId().replace(/:/g, '');
+    const iconSize = ICON_SIZE[size];
+
+    const starsEl = (
+      <span className={styles.stars}>
+        {variant === 'simple' ? (
+          <RatingIcon
+            type={icon}
+            fill={1}
+            gradientId={`${baseId}-0`}
+            size={iconSize}
+          />
+        ) : (
+          Array.from({ length: maxStars }, (_, i) => (
+            <RatingIcon
+              key={i}
+              type={icon}
+              fill={Math.min(1, Math.max(0, value - i))}
+              gradientId={`${baseId}-${i}`}
+              size={iconSize}
+            />
+          ))
+        )}
+      </span>
+    );
+
+    const valueEl = <span className={styles.value}>{value}</span>;
+    const countEl =
+      count !== undefined ? (
+        <span className={styles.count}>({count})</span>
+      ) : null;
+
+    /* Element order depends on variant + size:
+       md type1 / sm type2 / simple → stars first
+       md type2 / sm type1          → value first */
+    const starsFirst =
+      variant === 'simple' ||
+      (variant === 'type1' && size === 'md') ||
+      (variant === 'type2' && size === 'sm');
+
+    const label = `Rating: ${value} out of ${maxStars}${count !== undefined ? ` (${count} reviews)` : ''}`;
+
+    return (
+      <div
+        ref={ref}
+        role="img"
+        aria-label={label}
+        className={cn(styles.root, styles[size], className)}
+        {...rest}
+      >
+        {starsFirst ? (
+          <>
+            {starsEl}
+            {valueEl}
+            {countEl}
+          </>
+        ) : (
+          <>
+            {valueEl}
+            {starsEl}
+            {countEl}
+          </>
+        )}
+      </div>
+    );
+  },
+);
+
+Rating.displayName = 'Rating';

package/registry/components/Rating/Rating.types.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+
+export type RatingSize = 'md' | 'sm';
+export type RatingVariant = 'type1' | 'type2' | 'simple';
+export type RatingIconType = 'star' | 'heart';
+
+export interface RatingProps extends HTMLAttributes<HTMLDivElement> {
+  value: number;
+  count?: number;
+  maxStars?: number;
+  size?: RatingSize;
+  variant?: RatingVariant;
+  icon?: RatingIconType;
+}

package/registry/components/Rating/index.ts

@@ -0,0 +1,7 @@
+export { Rating } from './Rating';
+export type {
+  RatingProps,
+  RatingSize,
+  RatingVariant,
+  RatingIconType,
+} from './Rating.types';

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

@@ -0,0 +1,56 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  background: var(--st-color-neutral-100);
+  padding: 4px;
+  border-radius: var(--st-radius-full);
+}
+
+/* Sizes — custom properties inherited by items */
+.lg {
+  --sc-height: 40px;
+  --sc-px: var(--st-space-4);
+  --sc-font: var(--st-font-size-sm);
+  --sc-gap: var(--st-space-2);
+}
+
+.md {
+  --sc-height: 32px;
+  --sc-px: var(--st-space-3);
+  --sc-font: var(--st-font-size-sm);
+  --sc-gap: var(--st-space-1);
+}
+
+.sm {
+  --sc-height: 28px;
+  --sc-px: var(--st-space-2);
+  --sc-font: var(--st-font-size-xs);
+  --sc-gap: var(--st-space-1);
+}
+
+/* Button variant — connected, position-based corners */
+.button {
+  gap: 0;
+}
+
+.button > *:first-child {
+  border-radius: var(--st-radius-full) 0 0 var(--st-radius-full);
+}
+
+.button > *:last-child {
+  border-radius: 0 var(--st-radius-full) var(--st-radius-full) 0;
+}
+
+.button > *:only-child {
+  border-radius: var(--st-radius-full);
+}
+
+/* Tag variant — each item independently pill-shaped */
+.tag {
+  gap: 2px;
+}
+
+.tag > * {
+  border-radius: var(--st-radius-full);
+}