@soadtech/cli 0.1.0

package/registry/components/Table/TableToolbar.tsx

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

package/registry/components/Table/index.ts

@@ -0,0 +1,22 @@
+export { Table } from './Table';
+export { TableToolbar } from './TableToolbar';
+export { TableHeader } from './TableHeader';
+export { TableBody } from './TableBody';
+export { TableRow } from './TableRow';
+export { TableHeaderCell } from './TableHeaderCell';
+export { TableCell } from './TableCell';
+export { TableFooter } from './TableFooter';
+export type {
+  TableProps,
+  TableSortDirection,
+  TableSize,
+  TableCellAlign,
+  TableToolbarProps,
+  TableHeaderProps,
+  TableBodyProps,
+  TableRowProps,
+  TableHeaderCellProps,
+  TableCellProps,
+  TableFooterProps,
+  TableFooterAlign,
+} from './Table.types';

package/registry/components/Tag/Tag.module.css

@@ -0,0 +1,46 @@
+/* ─── 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);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* ─── Colors ─── */
+
+.brand   { --_tag-color: var(--st-color-primary);     --_tag-fg: var(--st-color-primary-foreground); }
+.neutral { --_tag-color: var(--st-color-neutral-500);  --_tag-fg: #ffffff; }
+.inverse { --_tag-color: var(--st-color-neutral-900);  --_tag-fg: #ffffff; }
+.info    { --_tag-color: var(--st-color-info);         --_tag-fg: var(--st-color-info-foreground); }
+.success { --_tag-color: var(--st-color-success);      --_tag-fg: var(--st-color-success-foreground); }
+.warning { --_tag-color: var(--st-color-warning);      --_tag-fg: var(--st-color-warning-foreground); }
+.error   { --_tag-color: var(--st-color-error);        --_tag-fg: var(--st-color-error-foreground); }
+
+/* ─── Variants ─── */
+
+.filled { background-color: var(--_tag-color); color: var(--_tag-fg); border: 1px solid transparent; }
+.stroke { background-color: transparent; color: var(--_tag-color); border: 1px solid var(--_tag-color); }
+
+/* ─── Sizes ─── */
+
+.lg { height: 28px; padding: 0 var(--st-space-3); gap: var(--st-space-1); font-size: var(--st-font-size-sm); }
+.md { height: 24px; padding: 0 var(--st-space-2); gap: var(--st-space-1); font-size: var(--st-font-size-xs); }
+.sm { height: 20px; padding: 0 6px;               gap: 2px;              font-size: var(--st-font-size-xs); }
+
+/* ─── Icon ─── */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Label ─── */
+
+.label {
+  white-space: nowrap;
+}

package/registry/components/Tag/Tag.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TagProps } from './Tag.types';
+import styles from './Tag.module.css';
+
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(
+  (
+    {
+      variant = 'filled',
+      color = 'brand',
+      size = 'md',
+      icon,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[variant],
+          styles[color],
+          styles[size],
+          className
+        )}
+        {...rest}
+      >
+        {icon && <span className={styles.icon}>{icon}</span>}
+        <span className={styles.label}>{children}</span>
+      </span>
+    );
+  }
+);
+
+Tag.displayName = 'Tag';

package/registry/components/Tag/Tag.types.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+// ─── Tag ───
+
+export type TagVariant = 'filled' | 'stroke';
+export type TagColor = 'brand' | 'neutral' | 'inverse' | 'info' | 'success' | 'warning' | 'error';
+export type TagSize = 'lg' | 'md' | 'sm';
+
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: TagVariant;
+  color?: TagColor;
+  size?: TagSize;
+  icon?: ReactNode;
+}
+
+// ─── TagStatus ───
+
+export type TagStatusType = 'active' | 'archived' | 'scheduled' | 'draft' | 'new';
+export type TagStatusSize = 'lg' | 'md';
+
+export interface TagStatusProps extends HTMLAttributes<HTMLSpanElement> {
+  status: TagStatusType;
+  variant?: TagVariant;
+  size?: TagStatusSize;
+}
+
+// ─── TagBrand ───
+
+export type TagBrandVariant = 'default' | 'inverse';
+export type TagBrandColor = 'primary' | 'secondary' | 'tertiary';
+
+export interface TagBrandProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: TagBrandVariant;
+  color?: TagBrandColor;
+  size?: TagSize;
+  icon?: ReactNode;
+}

package/registry/components/Tag/TagBrand.module.css

@@ -0,0 +1,42 @@
+/* ─── 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);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* ─── Colors ─── */
+
+.primary   { --_tag-color: var(--st-color-primary);   --_tag-fg: var(--st-color-primary-foreground);   --_tag-subtle: var(--st-color-primary-subtle); }
+.secondary { --_tag-color: var(--st-color-secondary);  --_tag-fg: var(--st-color-secondary-foreground); --_tag-subtle: var(--st-color-secondary-subtle); }
+.tertiary  { --_tag-color: var(--st-color-tertiary);   --_tag-fg: var(--st-color-tertiary-foreground);  --_tag-subtle: var(--st-color-tertiary-subtle); }
+
+/* ─── Variants ─── */
+
+.default { background-color: var(--_tag-color); color: var(--_tag-fg); border: 1px solid transparent; }
+.inverse { background-color: var(--_tag-subtle); color: var(--_tag-color); border: 1px solid transparent; }
+
+/* ─── Sizes ─── */
+
+.lg { height: 28px; padding: 0 var(--st-space-3); gap: var(--st-space-1); font-size: var(--st-font-size-sm); }
+.md { height: 24px; padding: 0 var(--st-space-2); gap: var(--st-space-1); font-size: var(--st-font-size-xs); }
+.sm { height: 20px; padding: 0 6px;               gap: 2px;              font-size: var(--st-font-size-xs); }
+
+/* ─── Icon ─── */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Label ─── */
+
+.label {
+  white-space: nowrap;
+}

package/registry/components/Tag/TagBrand.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TagBrandProps } from './Tag.types';
+import styles from './TagBrand.module.css';
+
+export const TagBrand = forwardRef<HTMLSpanElement, TagBrandProps>(
+  (
+    {
+      variant = 'default',
+      color = 'primary',
+      size = 'md',
+      icon,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[color],
+          styles[variant],
+          styles[size],
+          className
+        )}
+        {...rest}
+      >
+        {icon && <span className={styles.icon}>{icon}</span>}
+        <span className={styles.label}>{children}</span>
+      </span>
+    );
+  }
+);
+
+TagBrand.displayName = 'TagBrand';

package/registry/components/Tag/TagStatus.module.css

@@ -0,0 +1,43 @@
+/* ─── 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);
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* ─── Status colors ─── */
+
+.active    { --_tag-color: var(--st-color-success); --_tag-fg: var(--st-color-success-foreground); }
+.archived  { --_tag-color: var(--st-color-error);   --_tag-fg: var(--st-color-error-foreground); }
+.scheduled { --_tag-color: var(--st-color-warning); --_tag-fg: var(--st-color-warning-foreground); }
+.draft     { --_tag-color: var(--st-color-info);    --_tag-fg: var(--st-color-info-foreground); }
+.new       { --_tag-color: var(--st-color-primary); --_tag-fg: var(--st-color-primary-foreground); }
+
+/* ─── Variants ─── */
+
+.filled { background-color: var(--_tag-color); color: var(--_tag-fg); border: 1px solid transparent; }
+.stroke { background-color: transparent; color: var(--_tag-color); border: 1px solid var(--_tag-color); }
+
+/* ─── Sizes ─── */
+
+.lg { height: 28px; padding: 0 var(--st-space-3); gap: var(--st-space-1); font-size: var(--st-font-size-sm); }
+.md { height: 24px; padding: 0 var(--st-space-2); gap: var(--st-space-1); font-size: var(--st-font-size-xs); }
+
+/* ─── Icon ─── */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* ─── Label ─── */
+
+.label {
+  white-space: nowrap;
+}

package/registry/components/Tag/TagStatus.tsx

@@ -0,0 +1,119 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import type { TagStatusProps, TagStatusType } from './Tag.types';
+import styles from './TagStatus.module.css';
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path
+        d="M2.5 6l2.5 2.5 4.5-5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path
+        d="M3 3l6 6M9 3l-6 6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function CalendarIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <rect x="1.5" y="2.5" width="9" height="8" rx="1" stroke="currentColor" strokeWidth="1.5" />
+      <path d="M4 1.5v2M8 1.5v2M1.5 5.5h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function PencilIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path
+        d="M8.5 1.5l2 2L4 10H2v-2l6.5-6.5z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function DiamondIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path
+        d="M6 1l4 5-4 5-4-5 4-5z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+const statusIcons: Record<TagStatusType, () => JSX.Element> = {
+  active: CheckIcon,
+  archived: XIcon,
+  scheduled: CalendarIcon,
+  draft: PencilIcon,
+  new: DiamondIcon,
+};
+
+const statusLabels: Record<TagStatusType, string> = {
+  active: 'Active',
+  archived: 'Archived',
+  scheduled: 'Scheduled',
+  draft: 'Draft',
+  new: 'New',
+};
+
+export const TagStatus = forwardRef<HTMLSpanElement, TagStatusProps>(
+  (
+    {
+      status,
+      variant = 'filled',
+      size = 'md',
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const StatusIcon = statusIcons[status];
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          styles.root,
+          styles[status],
+          styles[variant],
+          styles[size],
+          className
+        )}
+        {...rest}
+      >
+        <span className={styles.icon}><StatusIcon /></span>
+        <span className={styles.label}>{children || statusLabels[status]}</span>
+      </span>
+    );
+  }
+);
+
+TagStatus.displayName = 'TagStatus';

package/registry/components/Tag/index.ts

@@ -0,0 +1,15 @@
+export { Tag } from './Tag';
+export { TagStatus } from './TagStatus';
+export { TagBrand } from './TagBrand';
+export type {
+  TagProps,
+  TagVariant,
+  TagColor,
+  TagSize,
+  TagStatusProps,
+  TagStatusType,
+  TagStatusSize,
+  TagBrandProps,
+  TagBrandVariant,
+  TagBrandColor,
+} from './Tag.types';

package/registry/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,208 @@
+/* ─── Root wrapper ─── */
+
+.root {
+  position: relative;
+  display: inline-flex;
+}
+
+/* ─── Tooltip bubble ─── */
+
+.tooltip {
+  position: absolute;
+  z-index: 1000;
+  border-radius: var(--st-radius-md);
+  font-family: var(--st-font-family);
+  font-size: var(--st-font-size-sm);
+  line-height: var(--st-line-height-normal);
+  color: var(--_tooltip-fg);
+  background-color: var(--_tooltip-bg);
+  pointer-events: none;
+}
+
+/* ─── Variants ─── */
+
+.default {
+  --_tooltip-bg: var(--st-color-surface);
+  --_tooltip-fg: var(--st-color-foreground);
+  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.05));
+}
+
+.inverted {
+  --_tooltip-bg: var(--st-color-neutral-900);
+  --_tooltip-fg: #ffffff;
+}
+
+/* ─── Modes ─── */
+
+.rich {
+  width: 240px;
+  padding: var(--st-space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--st-space-2);
+  pointer-events: auto;
+}
+
+.inline {
+  width: max-content;
+  padding: var(--st-space-1) var(--st-space-2);
+  white-space: nowrap;
+}
+
+/* ─── Rich mode inner elements ─── */
+
+.title {
+  font-weight: var(--st-font-weight-semibold);
+}
+
+.body {
+  color: var(--_tooltip-fg);
+  opacity: 0.8;
+}
+
+.action {
+  display: flex;
+  margin-top: var(--st-space-1);
+}
+
+.content {
+  /* inline content inherits */
+}
+
+/* ─── Beak ─── */
+
+.beak {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: var(--_tooltip-bg);
+  transform: rotate(45deg);
+}
+
+/* drop-shadow on .default handles the beak shadow via the parent filter */
+
+/* ─── Placement × Alignment ─── */
+
+/* ── Top ── */
+
+.top_start {
+  bottom: calc(100% + 8px);
+  left: 0;
+}
+.top_start > .beak {
+  bottom: -4px;
+  left: 16px;
+}
+
+.top_center {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.top_center > .beak {
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.top_end {
+  bottom: calc(100% + 8px);
+  right: 0;
+}
+.top_end > .beak {
+  bottom: -4px;
+  right: 16px;
+}
+
+/* ── Bottom ── */
+
+.bottom_start {
+  top: calc(100% + 8px);
+  left: 0;
+}
+.bottom_start > .beak {
+  top: -4px;
+  left: 16px;
+}
+
+.bottom_center {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bottom_center > .beak {
+  top: -4px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+}
+
+.bottom_end {
+  top: calc(100% + 8px);
+  right: 0;
+}
+.bottom_end > .beak {
+  top: -4px;
+  right: 16px;
+}
+
+/* ── Start (left side) ── */
+
+.start_start {
+  right: calc(100% + 8px);
+  top: 0;
+}
+.start_start > .beak {
+  right: -4px;
+  top: 8px;
+}
+
+.start_center {
+  right: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.start_center > .beak {
+  right: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.start_end {
+  right: calc(100% + 8px);
+  bottom: 0;
+}
+.start_end > .beak {
+  right: -4px;
+  bottom: 8px;
+}
+
+/* ── End (right side) ── */
+
+.end_start {
+  left: calc(100% + 8px);
+  top: 0;
+}
+.end_start > .beak {
+  left: -4px;
+  top: 8px;
+}
+
+.end_center {
+  left: calc(100% + 8px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.end_center > .beak {
+  left: -4px;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.end_end {
+  left: calc(100% + 8px);
+  bottom: 0;
+}
+.end_end > .beak {
+  left: -4px;
+  bottom: 8px;
+}