@soadtech/cli 0.1.0

package/registry/components/Chip/Chip.module.css

@@ -0,0 +1,143 @@
+/* ─── Root ─── */
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--st-radius-full);
+  font-family: var(--st-font-family);
+  font-weight: var(--st-font-weight-medium);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* ─── Sizes ─── */
+
+.md {
+  height: 32px;
+  padding: 0 var(--st-space-3);
+  gap: var(--st-space-2);
+  font-size: var(--st-font-size-sm);
+}
+
+.sm {
+  height: 24px;
+  padding: 0 var(--st-space-2);
+  gap: var(--st-space-1);
+  font-size: var(--st-font-size-xs);
+}
+
+/* Reduce right padding when dismiss button is present */
+.dismissible.md {
+  padding-right: var(--st-space-1);
+}
+
+.dismissible.sm {
+  padding-right: 2px;
+}
+
+/* ─── Filled variant ─── */
+
+.filled {
+  background-color: var(--st-color-neutral-100);
+  border: 1px solid transparent;
+  color: var(--st-color-foreground);
+}
+
+.filled:hover {
+  background-color: var(--st-color-neutral-200);
+}
+
+/* ─── Light variant ─── */
+
+.light {
+  background-color: var(--st-color-background);
+  border: 1px solid var(--st-color-border);
+  color: var(--st-color-foreground);
+}
+
+.light:hover {
+  border-color: var(--st-color-border-strong);
+}
+
+/* ─── Selected (overrides both variants) ─── */
+
+.selected {
+  background-color: var(--st-color-neutral-900);
+  border-color: var(--st-color-neutral-900);
+  color: #ffffff;
+}
+
+.selected:hover {
+  background-color: var(--st-color-neutral-800);
+  border-color: var(--st-color-neutral-800);
+}
+
+/* ─── Focus ─── */
+
+.root: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;
+}
+
+/* ─── Dismiss button ─── */
+
+.dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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;
+}
+
+.md .dismiss {
+  width: 22px;
+  height: 22px;
+}
+
+.sm .dismiss {
+  width: 18px;
+  height: 18px;
+}
+
+/* Dismiss hover — light surfaces */
+.filled:not(.selected) .dismiss:hover,
+.light:not(.selected) .dismiss:hover {
+  background-color: var(--st-color-neutral-300);
+}
+
+/* Dismiss hover — dark/selected surfaces */
+.selected .dismiss:hover {
+  background-color: var(--st-color-neutral-700);
+}

package/registry/components/Chip/Chip.tsx

@@ -0,0 +1,93 @@
+import { forwardRef } from 'react';
+import type { KeyboardEvent } from 'react';
+import { cn } from '../../utils/cn';
+import type { ChipProps } from './Chip.types';
+import styles from './Chip.module.css';
+
+function DismissIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path
+        d="M9 3L3 9M3 3l6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(
+  (
+    {
+      variant = 'filled',
+      size = 'md',
+      selected = false,
+      disabled = false,
+      icon,
+      onDismiss,
+      onClick,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+
+      if ((e.key === 'Enter' || e.key === ' ') && onClick) {
+        e.preventDefault();
+        onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+      }
+
+      if ((e.key === 'Delete' || e.key === 'Backspace') && onDismiss) {
+        e.preventDefault();
+        onDismiss();
+      }
+
+      rest.onKeyDown?.(e);
+    };
+
+    return (
+      <div
+        ref={ref}
+        role={onClick ? 'button' : undefined}
+        tabIndex={disabled ? -1 : 0}
+        className={cn(
+          styles.root,
+          styles[variant],
+          styles[size],
+          selected && styles.selected,
+          disabled && styles.disabled,
+          onDismiss && styles.dismissible,
+          className
+        )}
+        onClick={disabled ? undefined : onClick}
+        onKeyDown={handleKeyDown}
+        aria-disabled={disabled || undefined}
+        {...rest}
+      >
+        {icon && <span className={styles.icon}>{icon}</span>}
+        <span className={styles.label}>{children}</span>
+        {onDismiss && (
+          <button
+            type="button"
+            tabIndex={-1}
+            className={styles.dismiss}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!disabled) onDismiss();
+            }}
+            aria-label="Dismiss"
+          >
+            <DismissIcon />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+Chip.displayName = 'Chip';

package/registry/components/Chip/Chip.types.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type ChipVariant = 'filled' | 'light';
+export type ChipSize = 'md' | 'sm';
+
+export interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+  /** Visual variant */
+  variant?: ChipVariant;
+  /** Chip size */
+  size?: ChipSize;
+  /** Whether the chip is selected */
+  selected?: boolean;
+  /** Whether the chip is disabled */
+  disabled?: boolean;
+  /** Left icon slot */
+  icon?: ReactNode;
+  /** Called when the dismiss button is clicked — shows X button when provided */
+  onDismiss?: () => void;
+}

package/registry/components/Chip/ChipGroup.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--st-space-2);
+}

package/registry/components/Chip/ChipGroup.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { ChipGroupProps } from './ChipGroup.types';
+import styles from './ChipGroup.module.css';
+
+export const ChipGroup = forwardRef<HTMLDivElement, ChipGroupProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div ref={ref} className={cn(styles.root, className)} {...rest}>
+        {children}
+      </div>
+    );
+  }
+);
+
+ChipGroup.displayName = 'ChipGroup';

package/registry/components/Chip/ChipGroup.types.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {}

package/registry/components/Chip/index.ts

@@ -0,0 +1,9 @@
+export { Chip } from './Chip';
+export type {
+  ChipProps,
+  ChipVariant,
+  ChipSize,
+} from './Chip.types';
+
+export { ChipGroup } from './ChipGroup';
+export type { ChipGroupProps } from './ChipGroup.types';

package/registry/components/Datepicker/Datepicker.module.css

@@ -0,0 +1,133 @@
+/* ─── 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);
+}
+
+/* ─── Range layout ─── */
+.rangeFields {
+  display: flex;
+  flex-direction: row;
+  gap: var(--st-space-4);
+}
+
+.fieldWrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-2);
+}
+
+/* ─── Input box ─── */
+.inputBox {
+  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);
+}
+
+.inputBox.lg {
+  height: 48px;
+}
+
+.inputBox.md {
+  height: 40px;
+}
+
+.inputBox:hover:not(.disabled):not(.error):not(.open) {
+  border-color: var(--st-color-border-strong);
+}
+
+.inputBox.open,
+.inputBox:focus-within:not(.disabled):not(.error) {
+  border-color: var(--st-color-success);
+  box-shadow: 0 0 0 2px var(--st-color-success);
+}
+
+.inputBox.error {
+  border-color: var(--st-color-error);
+  box-shadow: 0 0 0 2px var(--st-color-error);
+}
+
+.inputBox.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ─── Input text ─── */
+.inputText {
+  flex: 1;
+  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;
+}
+
+.inputText.placeholder {
+  color: var(--st-color-muted);
+}
+
+/* ─── Calendar icon button ─── */
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: transparent;
+  border-radius: var(--st-radius-md);
+  color: var(--st-color-muted);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background var(--st-transition-fast);
+}
+
+.iconBtn:hover {
+  background: var(--st-color-neutral-100);
+}
+
+/* ─── Helper text ─── */
+.helperText {
+  font-size: var(--st-font-size-xs);
+  line-height: var(--st-line-height-normal);
+  color: var(--st-color-muted);
+}
+
+/* ─── Error ─── */
+.errorText {
+  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);
+  color: var(--st-color-error);
+}
+
+/* ─── Popover ─── */
+.popover {
+  position: absolute;
+  top: calc(100% + var(--st-space-2));
+  left: 0;
+  z-index: var(--st-z-dropdown);
+}

package/registry/components/Datepicker/Datepicker.tsx

@@ -0,0 +1,236 @@
+import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '../../utils/cn';
+import { CalendarDialog } from '../Calendar/CalendarDialog';
+import type { DateRange } from '../Calendar/CalendarDialog.types';
+import type { DatepickerProps } from './Datepicker.types';
+import styles from './Datepicker.module.css';
+
+function formatDate(date: Date): string {
+  const d = String(date.getDate()).padStart(2, '0');
+  const m = String(date.getMonth() + 1).padStart(2, '0');
+  const y = date.getFullYear();
+  return `${d}/${m}/${y}`;
+}
+
+function CalendarIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+    >
+      <rect
+        x="2"
+        y="3"
+        width="12"
+        height="11"
+        rx="1.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+      />
+      <path d="M2 6.5h12" stroke="currentColor" strokeWidth="1.2" />
+      <path
+        d="M5.5 1.5v3M10.5 1.5v3"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ErrorDot() {
+  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>
+  );
+}
+
+export const Datepicker = forwardRef<HTMLDivElement, DatepickerProps>(
+  (
+    {
+      range = false,
+      size = 'lg',
+      label,
+      helperText,
+      error,
+      disabled = false,
+      value,
+      onChange,
+      rangeValue,
+      onRangeChange,
+      placeholder = 'DD/MM/YYYY',
+      minDate,
+      maxDate,
+      events,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    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 handleDone = useCallback(
+      (val: Date | DateRange | null) => {
+        if (range) {
+          onRangeChange?.(val && !(val instanceof Date) ? val : null);
+        } else {
+          onChange?.(val instanceof Date ? val : null);
+        }
+        setOpen(false);
+      },
+      [range, onChange, onRangeChange],
+    );
+
+    const handleCancel = useCallback(() => {
+      setOpen(false);
+    }, []);
+
+    const toggleOpen = useCallback(() => {
+      if (!disabled) setOpen((prev) => !prev);
+    }, [disabled]);
+
+    const inputBoxCls = cn(
+      styles.inputBox,
+      styles[size],
+      open && styles.open,
+      error && styles.error,
+      disabled && styles.disabled,
+    );
+
+    const renderInputBox = (
+      displayValue: string | undefined,
+      sublabel?: string,
+    ) => (
+      <div className={sublabel ? styles.fieldWrapper : undefined}>
+        {sublabel && <span className={styles.label}>{sublabel}</span>}
+        <div
+          className={inputBoxCls}
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          onClick={toggleOpen}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              toggleOpen();
+            }
+          }}
+        >
+          <span
+            className={cn(
+              styles.inputText,
+              !displayValue && styles.placeholder,
+            )}
+          >
+            {displayValue || placeholder}
+          </span>
+          <span className={styles.iconBtn} aria-hidden="true">
+            <CalendarIcon />
+          </span>
+        </div>
+      </div>
+    );
+
+    return (
+      <div
+        ref={setRefs}
+        className={cn(styles.root, className)}
+        {...rest}
+      >
+        {/* Label (single mode only) */}
+        {!range && label && <span className={styles.label}>{label}</span>}
+
+        {/* Inputs */}
+        {range ? (
+          <div className={styles.rangeFields}>
+            {renderInputBox(
+              rangeValue?.start ? formatDate(rangeValue.start) : undefined,
+              'From',
+            )}
+            {renderInputBox(
+              rangeValue?.end ? formatDate(rangeValue.end) : undefined,
+              'To',
+            )}
+          </div>
+        ) : (
+          renderInputBox(value ? formatDate(value) : undefined)
+        )}
+
+        {/* Helper / Error text */}
+        {error ? (
+          <span className={styles.errorText}>
+            <ErrorDot />
+            {error}
+          </span>
+        ) : (
+          helperText && <span className={styles.helperText}>{helperText}</span>
+        )}
+
+        {/* Calendar popover */}
+        {open && (
+          <div className={styles.popover}>
+            <CalendarDialog
+              mode={range ? 'range' : 'basic'}
+              defaultValue={!range ? (value ?? undefined) : undefined}
+              defaultRange={range ? (rangeValue ?? undefined) : undefined}
+              headerAlign="center"
+              events={events}
+              minDate={minDate}
+              maxDate={maxDate}
+              onCancel={handleCancel}
+              onDone={handleDone}
+            />
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+
+Datepicker.displayName = 'Datepicker';

package/registry/components/Datepicker/Datepicker.types.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes } from 'react';
+import type { DateRange } from '../Calendar/CalendarDialog.types';
+
+export type DatepickerSize = 'lg' | 'md';
+
+export interface DatepickerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /** Dual From/To inputs + range calendar. */
+  range?: boolean;
+  /** Input height: lg=48px, md=40px. */
+  size?: DatepickerSize;
+  /** Field label (single mode only). */
+  label?: string;
+  /** Helper text below input. Hidden when error is present. */
+  helperText?: string;
+  /** Error message. Shows red border + error dot. */
+  error?: string;
+  /** Disables the field. */
+  disabled?: boolean;
+  /** Selected date (single mode). */
+  value?: Date | null;
+  /** Called when date is selected (single mode). */
+  onChange?: (date: Date | null) => void;
+  /** Selected range (range mode). */
+  rangeValue?: DateRange | null;
+  /** Called when range is selected (range mode). */
+  onRangeChange?: (range: DateRange | null) => void;
+  /** Placeholder text for empty input. */
+  placeholder?: string;
+  /** Minimum selectable date. Passed to CalendarDialog. */
+  minDate?: Date;
+  /** Maximum selectable date. Passed to CalendarDialog. */
+  maxDate?: Date;
+  /** Event indicator dates. Passed to CalendarDialog. */
+  events?: Date[];
+}

package/registry/components/Datepicker/index.ts

@@ -0,0 +1,2 @@
+export { Datepicker } from './Datepicker';
+export type { DatepickerProps, DatepickerSize } from './Datepicker.types';