@soadtech/cli 0.1.0

package/registry/components/NavbarUser/NavbarUser.tsx

@@ -0,0 +1,202 @@
+import { cn } from '../../utils/cn';
+import { Avatar } from '../Avatar';
+import type { NavbarUserProps } from './NavbarUser.types';
+import styles from './NavbarUser.module.css';
+
+function BackIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M12.5 15L7.5 10L12.5 5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function HamburgerIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        d="M3 5H17M3 10H17M3 15H17"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.55806 4.55806C4.80214 4.31398 5.19786 4.31398 5.44194 4.55806L10.5028 9.61889L15.5636 4.55806C15.8077 4.31398 16.2034 4.31398 16.4475 4.55806C16.6916 4.80214 16.6916 5.19786 16.4475 5.44194L11.3867 10.5028L16.4475 15.5636C16.6916 15.8077 16.6916 16.2034 16.4475 16.4475C16.2034 16.6916 15.8077 16.6916 15.5636 16.4475L10.5028 11.3867L5.44194 16.4475C5.19786 16.6916 4.80214 16.6916 4.55806 16.4475C4.31398 16.2034 4.31398 15.8077 4.55806 15.5636L9.61889 10.5028L4.55806 5.44194C4.31398 5.19786 4.31398 4.80214 4.55806 4.55806Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function VerifiedBadge() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      className={styles.verifiedBadge}
+    >
+      <circle cx="8" cy="8" r="8" fill="var(--st-color-info)" />
+      <path
+        d="M5 8L7 10L11 6"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronDownIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden="true"
+      className={styles.userChevron}
+    >
+      <path
+        d="M4 6L8 10L12 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function NavbarUser({
+  title,
+  subtitle,
+  onBack,
+  onClose,
+  actions,
+  user,
+  onUserClick,
+  logo,
+  onMenuClick,
+  className,
+}: NavbarUserProps) {
+  const isLevel2 = !!onBack;
+
+  return (
+    <nav className={cn(styles.root, isLevel2 && styles.level2, className)}>
+      {/* Mobile-only: logo + hamburger */}
+      <span className={styles.mobileLead}>
+        {logo}
+        {onMenuClick && (
+          <button
+            type="button"
+            className={styles.menuBtn}
+            onClick={onMenuClick}
+            aria-label="Open menu"
+          >
+            <HamburgerIcon />
+          </button>
+        )}
+      </span>
+
+      {/* Back button (Level 2) */}
+      {onBack && (
+        <button
+          type="button"
+          className={styles.backBtn}
+          onClick={onBack}
+          aria-label="Go back"
+        >
+          <BackIcon />
+        </button>
+      )}
+
+      {/* Title + subtitle */}
+      <div className={styles.titleGroup}>
+        <span className={styles.title}>{title}</span>
+        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}
+      </div>
+
+      {/* Action icons slot */}
+      {actions && <div className={styles.actions}>{actions}</div>}
+
+      {/* User section */}
+      {user && (
+        <button
+          type="button"
+          className={styles.userSection}
+          onClick={onUserClick}
+        >
+          <Avatar
+            src={user.avatar}
+            initials={user.name
+              .split(' ')
+              .map((w) => w[0])
+              .join('')
+              .slice(0, 2)
+              .toUpperCase()}
+            size="sm"
+          />
+          <div className={styles.userInfo}>
+            <span className={styles.userName}>
+              {user.name}
+              {user.verified && <VerifiedBadge />}
+            </span>
+            <span className={styles.userHandle}>@{user.username}</span>
+          </div>
+          <ChevronDownIcon />
+        </button>
+      )}
+
+      {/* Close button (mobile Level 2) */}
+      {onClose && (
+        <button
+          type="button"
+          className={styles.closeBtn}
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <CloseIcon />
+        </button>
+      )}
+    </nav>
+  );
+}
+
+NavbarUser.displayName = 'NavbarUser';

package/registry/components/NavbarUser/NavbarUser.types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+export interface NavbarUserInfo {
+  name: string;
+  username: string;
+  avatar?: string;
+  verified?: boolean;
+}
+
+export interface NavbarUserProps {
+  /** Page title */
+  title: string;
+  /** Description below title */
+  subtitle?: string;
+  /** Shows back arrow; presence indicates Level 2 */
+  onBack?: () => void;
+  /** Close button (mobile Level 2 only) */
+  onClose?: () => void;
+  /** Slot for action icon buttons */
+  actions?: ReactNode;
+  /** User info (avatar, name, handle) */
+  user?: NavbarUserInfo;
+  /** Dropdown trigger on user section */
+  onUserClick?: () => void;
+  /** Brand mark (mobile only) */
+  logo?: ReactNode;
+  /** Hamburger button (mobile only) */
+  onMenuClick?: () => void;
+  /** Root element class */
+  className?: string;
+}

package/registry/components/NavbarUser/index.ts

@@ -0,0 +1,2 @@
+export { NavbarUser } from './NavbarUser';
+export type { NavbarUserProps, NavbarUserInfo } from './NavbarUser.types';

package/registry/components/Notification/Notification.types.ts

@@ -0,0 +1,65 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type NotificationCategory =
+  | 'warning'
+  | 'success'
+  | 'intelligence'
+  | 'team';
+
+export interface NotificationItemProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Determines icon & color scheme */
+  category: NotificationCategory;
+  /** Bold title text */
+  title: string;
+  /** Timestamp text e.g. "1h ago" */
+  time?: string;
+  /** Description below title */
+  description?: string;
+  /** Shows blue unread dot */
+  unread?: boolean;
+  /** Custom icon override */
+  icon?: ReactNode;
+  /** Avatar URL for `team` category */
+  avatarSrc?: string;
+  /** Avatar alt text */
+  avatarAlt?: string;
+  /** Action button slot */
+  action?: ReactNode;
+  /** Trash icon click handler (hover-visible) */
+  onDelete?: () => void;
+  /** Reply input slot */
+  replyArea?: ReactNode;
+}
+
+export interface NotificationReplyProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /** Replying user avatar URL */
+  avatarSrc?: string;
+  /** Avatar alt text */
+  avatarAlt?: string;
+  /** Controlled input value */
+  value?: string;
+  /** Input change handler */
+  onValueChange?: (value: string) => void;
+  /** Chip(s) rendered before input */
+  mentions?: ReactNode;
+  /** Input placeholder text */
+  placeholder?: string;
+  /** Send Reply click handler */
+  onSend?: () => void;
+  /** Cancel click handler */
+  onCancel?: () => void;
+}
+
+export interface NotificationPanelProps
+  extends HTMLAttributes<HTMLDivElement> {
+  /** Header title */
+  title?: string;
+  /** Close button handler */
+  onClose?: () => void;
+  /** Footer button text */
+  footerLabel?: string;
+  /** Footer button click handler */
+  onFooterClick?: () => void;
+}

package/registry/components/Notification/NotificationItem.module.css

@@ -0,0 +1,143 @@
+/* ═══ NotificationItem ═══ */
+
+.root {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--st-space-3);
+  padding: var(--st-space-3) var(--st-space-4);
+  border-left: 3px solid transparent;
+  transition: background-color var(--st-transition-fast),
+    border-color var(--st-transition-fast);
+  cursor: default;
+}
+
+.root:hover {
+  background-color: var(--st-color-primary-subtle);
+  border-left-color: var(--st-color-primary);
+}
+
+/* ─── Leading icon / avatar ─── */
+
+.leading {
+  flex-shrink: 0;
+  padding-top: var(--st-space-1);
+}
+
+.iconCircle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--st-radius-full);
+  flex-shrink: 0;
+}
+
+.warning {
+  background-color: var(--st-color-warning-subtle);
+  color: var(--st-color-warning);
+}
+
+.success {
+  background-color: var(--st-color-success-subtle);
+  color: var(--st-color-success);
+}
+
+.intelligence {
+  background-color: var(--st-color-info-subtle);
+  color: var(--st-color-info);
+}
+
+/* ─── Body ─── */
+
+.body {
+  flex: 1;
+  min-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: baseline;
+  gap: var(--st-space-2);
+}
+
+.title {
+  font-size: var(--st-font-size-sm);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.time {
+  flex-shrink: 0;
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+}
+
+.description {
+  margin: var(--st-space-1) 0 0;
+  font-size: var(--st-font-size-xs);
+  color: var(--st-color-muted);
+  line-height: var(--st-line-height-normal);
+}
+
+.action {
+  margin-top: var(--st-space-2);
+}
+
+.replySlot {
+  margin-top: var(--st-space-2);
+}
+
+/* ─── Trailing ─── */
+
+.trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--st-space-2);
+  flex-shrink: 0;
+  padding-top: var(--st-space-1);
+}
+
+.unreadDot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--st-radius-full);
+  background-color: var(--st-color-primary);
+  flex-shrink: 0;
+}
+
+.deleteBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-muted);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--st-transition-fast),
+    color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.root:hover .deleteBtn {
+  opacity: 1;
+}
+
+.deleteBtn:focus-visible {
+  opacity: 1;
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+.deleteBtn:hover {
+  color: var(--st-color-error);
+  background-color: var(--st-color-error-subtle);
+}

package/registry/components/Notification/NotificationItem.tsx

@@ -0,0 +1,157 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { Avatar } from '../Avatar';
+import type { NotificationCategory, NotificationItemProps } from './Notification.types';
+import styles from './NotificationItem.module.css';
+
+/* ═══ Inline SVGs ═══ */
+
+function WarningIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+      <path
+        d="M9 2L17 16H1L9 2Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9 7V11M9 13.5V14"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function CartIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+      <path
+        d="M1 1H3L3.6 4M3.6 4H17L14 11H5L3.6 4Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <circle cx="6" cy="15" r="1.5" fill="currentColor" />
+      <circle cx="13" cy="15" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ChartIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+      <path
+        d="M2 14L6 9L10 11L16 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13 4H16V7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function TrashIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M2 4H14M5.5 4V2.5H10.5V4M6.5 7V11.5M9.5 7V11.5M3.5 4L4.5 13.5H11.5L12.5 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/* ═══ Default icon map ═══ */
+
+const defaultIcons: Record<
+  Exclude<NotificationCategory, 'team'>,
+  JSX.Element
+> = {
+  warning: <WarningIcon />,
+  success: <CartIcon />,
+  intelligence: <ChartIcon />,
+};
+
+/* ═══ NotificationItem ═══ */
+
+export const NotificationItem = forwardRef<HTMLDivElement, NotificationItemProps>(
+  (
+    {
+      category,
+      title,
+      time,
+      description,
+      unread = false,
+      icon,
+      avatarSrc,
+      avatarAlt = '',
+      action,
+      onDelete,
+      replyArea,
+      className,
+      ...rest
+    },
+    ref
+  ) => {
+    const isTeam = category === 'team';
+
+    const renderedLeading = isTeam ? (
+      <Avatar src={avatarSrc} alt={avatarAlt} size="md" />
+    ) : (
+      <span className={cn(styles.iconCircle, styles[category])}>
+        {icon ?? defaultIcons[category]}
+      </span>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(styles.root, unread && styles.unread, className)}
+        {...rest}
+      >
+        <div className={styles.leading}>{renderedLeading}</div>
+
+        <div className={styles.body}>
+          <div className={styles.header}>
+            <span className={styles.title}>{title}</span>
+            {time && <span className={styles.time}>{time}</span>}
+          </div>
+          {description && <p className={styles.description}>{description}</p>}
+          {action && <div className={styles.action}>{action}</div>}
+          {replyArea && <div className={styles.replySlot}>{replyArea}</div>}
+        </div>
+
+        <div className={styles.trailing}>
+          {unread && <span className={styles.unreadDot} />}
+          {onDelete && (
+            <button
+              type="button"
+              className={styles.deleteBtn}
+              onClick={onDelete}
+              aria-label="Delete notification"
+            >
+              <TrashIcon />
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+NotificationItem.displayName = 'NotificationItem';

package/registry/components/Notification/NotificationPanel.module.css

@@ -0,0 +1,75 @@
+/* ═══ NotificationPanel ═══ */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  max-height: 520px;
+  background-color: var(--st-color-surface);
+  border: 1px solid var(--st-color-border);
+  border-radius: var(--st-radius-xl);
+  box-shadow: var(--st-shadow-lg);
+  overflow: hidden;
+}
+
+/* ─── Header ─── */
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  padding: var(--st-space-4);
+  border-bottom: 1px solid var(--st-color-border);
+}
+
+.title {
+  font-size: var(--st-font-size-md);
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+}
+
+.closeBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--st-radius-md);
+  background: transparent;
+  color: var(--st-color-muted);
+  cursor: pointer;
+  transition: color var(--st-transition-fast),
+    background-color var(--st-transition-fast);
+}
+
+.closeBtn:hover {
+  color: var(--st-color-foreground);
+  background-color: var(--st-color-neutral-100);
+}
+
+.closeBtn:focus-visible {
+  outline: 2px solid var(--st-color-primary);
+  outline-offset: 2px;
+}
+
+/* ─── Body ─── */
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ─── Footer ─── */
+
+.footer {
+  flex-shrink: 0;
+  padding: var(--st-space-3) var(--st-space-4);
+  border-top: 1px solid var(--st-color-border);
+}
+
+.footerBtn {
+  width: 100%;
+}