@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/components/atoms/index.ts

@@ -0,0 +1,88 @@
+export { Button, type ButtonProps } from "./Button";
+export { Input, type InputProps } from "./Input";
+export { Label, type LabelProps } from "./Label";
+export { Textarea, type TextareaProps } from "./Textarea";
+export { Select, type SelectProps, type SelectOption } from "./Select";
+export { Checkbox, type CheckboxProps } from "./Checkbox";
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardBody,
+  CardFooter,
+  type CardProps,
+} from "./Card";
+export { Badge, type BadgeProps } from "./Badge";
+export { Spinner, type SpinnerProps } from "./Spinner";
+
+// Migrated atoms
+export {
+  Avatar,
+  type AvatarProps,
+  type AvatarSize,
+  type AvatarStatus,
+} from "./Avatar";
+export {
+  Box,
+  type BoxProps,
+  type BoxPadding,
+  type BoxMargin,
+  type BoxBg,
+  type BoxRounded,
+  type BoxShadow,
+} from "./Box";
+export { Center, type CenterProps } from "./Center";
+export { Divider, type DividerProps, type DividerOrientation } from "./Divider";
+export {
+  Icon,
+  type IconProps,
+  type IconSize,
+  type IconAnimation,
+} from "./Icon";
+export {
+  ProgressBar,
+  type ProgressBarProps,
+  type ProgressBarVariant,
+  type ProgressBarColor,
+} from "./ProgressBar";
+export { Radio, type RadioProps } from "./Radio";
+export { Switch, type SwitchProps } from "./Switch";
+export { Spacer, type SpacerProps, type SpacerSize } from "./Spacer";
+export {
+  Stack,
+  VStack,
+  HStack,
+  type StackProps,
+  type VStackProps,
+  type HStackProps,
+  type StackDirection,
+  type StackGap,
+  type StackAlign,
+  type StackJustify,
+} from "./Stack";
+export {
+  TextHighlight,
+  type TextHighlightProps,
+  type HighlightType,
+} from "./TextHighlight";
+export {
+  Typography,
+  type TypographyProps,
+  type TypographyVariant,
+} from "./Typography";
+export { ThemeToggle, type ThemeToggleProps } from "./ThemeToggle";
+export { ThemeSelector } from "./ThemeSelector";
+export { Overlay, type OverlayProps } from "./Overlay";
+
+// Inspection form components
+export {
+  ConditionalWrapper,
+  type ConditionalWrapperProps,
+  type ConditionalContext,
+} from "./ConditionalWrapper";
+export {
+  LawReferenceTooltip,
+  type LawReferenceTooltipProps,
+  type LawReference,
+} from "./LawReferenceTooltip";

package/shells/typescript-shell/packages/client/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './molecules';
+export * from './organisms';
+export * from './templates';

package/shells/typescript-shell/packages/client/src/components/molecules/Accordion.tsx

@@ -0,0 +1,223 @@
+/**
+ * Accordion Molecule Component
+ *
+ * A collapsible content component with single or multiple open items.
+ * Uses Button, Icon, Typography, and Divider atoms.
+ */
+
+import React, { useState } from "react";
+import { ChevronDown } from "lucide-react";
+
+import { Icon } from "../atoms/Icon";
+import { Typography } from "../atoms/Typography";
+
+import { cn } from "../../lib/cn";
+
+export interface AccordionItem {
+  /**
+   * Item ID (auto-generated from header/title if not provided)
+   */
+  id?: string;
+
+  /**
+   * Item header/title
+   */
+  header?: React.ReactNode;
+
+  /**
+   * Alias for header (pattern compatibility)
+   */
+  title?: React.ReactNode;
+
+  /**
+   * Item content
+   */
+  content: React.ReactNode;
+
+  /**
+   * Disable item
+   */
+  disabled?: boolean;
+
+  /**
+   * Default open state
+   */
+  defaultOpen?: boolean;
+}
+
+export interface AccordionProps {
+  /**
+   * Accordion items
+   */
+  items: AccordionItem[];
+
+  /**
+   * Allow multiple items open at once
+   * @default false
+   */
+  multiple?: boolean;
+
+  /**
+   * Default open items (IDs)
+   */
+  defaultOpenItems?: string[];
+
+  /**
+   * Default open items by index (pattern compatibility)
+   */
+  defaultOpen?: number[];
+
+  /**
+   * Controlled open items (IDs)
+   */
+  openItems?: string[];
+
+  /**
+   * Callback when item opens/closes
+   */
+  onItemToggle?: (itemId: string, isOpen: boolean) => void;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+// Helper to generate ID from header/title content
+function generateItemId(item: AccordionItem, index: number): string {
+  if (item.id) return item.id;
+  const headerText = item.header ?? item.title;
+  if (typeof headerText === "string") {
+    return `accordion-${headerText.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+  }
+  return `accordion-item-${index}`;
+}
+
+// Normalize item to ensure id and header are set
+function normalizeItem(
+  item: AccordionItem,
+  index: number,
+): AccordionItem & { id: string; header: React.ReactNode } {
+  return {
+    ...item,
+    id: generateItemId(item, index),
+    header: item.header ?? item.title ?? "",
+  };
+}
+
+export const Accordion: React.FC<AccordionProps> = ({
+  items,
+  multiple = false,
+  defaultOpenItems,
+  defaultOpen,
+  openItems: controlledOpenItems,
+  onItemToggle,
+  className,
+}) => {
+  // Normalize items to ensure id and header are always present
+  const normalizedItems = items.map((item, index) =>
+    normalizeItem(item, index),
+  );
+
+  // Resolve default open items - prefer defaultOpenItems (string IDs), fall back to defaultOpen (indices)
+  const resolveDefaultOpen = (): string[] => {
+    if (defaultOpenItems) return defaultOpenItems;
+    if (defaultOpen) {
+      return defaultOpen
+        .filter((index) => index >= 0 && index < normalizedItems.length)
+        .map((index) => normalizedItems[index].id);
+    }
+    return normalizedItems
+      .filter((item) => item.defaultOpen)
+      .map((item) => item.id);
+  };
+
+  const [internalOpenItems, setInternalOpenItems] = useState<Set<string>>(
+    new Set(resolveDefaultOpen()),
+  );
+
+  const openItemsSet = controlledOpenItems
+    ? new Set(controlledOpenItems)
+    : internalOpenItems;
+
+  const handleToggle = (itemId: string) => {
+    const isOpen = openItemsSet.has(itemId);
+    const newOpenItems = new Set(openItemsSet);
+
+    if (isOpen) {
+      newOpenItems.delete(itemId);
+    } else {
+      if (!multiple) {
+        newOpenItems.clear();
+      }
+      newOpenItems.add(itemId);
+    }
+
+    if (controlledOpenItems === undefined) {
+      setInternalOpenItems(newOpenItems);
+    }
+
+    onItemToggle?.(itemId, !isOpen);
+  };
+
+  return (
+    <div className={cn("w-full", className)}>
+      {normalizedItems.map((item, index) => {
+        const isOpen = openItemsSet.has(item.id);
+        const isDisabled = item.disabled;
+
+        return (
+          <div key={item.id} className={index > 0 ? "mt-2" : ""}>
+            <div className="border-2 border-[var(--color-border)] overflow-hidden">
+              <button
+                type="button"
+                onClick={() => !isDisabled && handleToggle(item.id)}
+                disabled={isDisabled}
+                className={cn(
+                  "w-full flex items-center justify-between px-4 py-3",
+                  "bg-[var(--color-card)]",
+                  "hover:bg-[var(--color-muted)]",
+                  "transition-colors duration-200",
+                  "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-inset",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  isOpen && "bg-[var(--color-muted)] font-bold",
+                )}
+                aria-expanded={isOpen}
+                aria-controls={`accordion-content-${item.id}`}
+              >
+                <div className="flex-1 text-left">
+                  {typeof item.header === "string" ? (
+                    <Typography variant="body" weight="medium">
+                      {item.header}
+                    </Typography>
+                  ) : (
+                    item.header
+                  )}
+                </div>
+                <Icon
+                  icon={ChevronDown}
+                  size="sm"
+                  className={cn(
+                    "transition-transform duration-200",
+                    isOpen && "transform rotate-180",
+                  )}
+                />
+              </button>
+
+              {isOpen && (
+                <div
+                  id={`accordion-content-${item.id}`}
+                  className="px-4 py-3 bg-[var(--color-card)] border-t-2 border-[var(--color-border)]"
+                >
+                  {item.content}
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+Accordion.displayName = "Accordion";

package/shells/typescript-shell/packages/client/src/components/molecules/Alert.tsx

@@ -0,0 +1,117 @@
+/**
+ * Alert Molecule Component
+ *
+ * A component for displaying alert messages with different variants and actions.
+ * Uses theme-aware CSS variables for styling.
+ */
+
+import React from "react";
+import { X, AlertCircle, CheckCircle, AlertTriangle, Info } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Box } from "../atoms/Box";
+import { Icon } from "../atoms/Icon";
+import { Typography } from "../atoms/Typography";
+
+export type AlertVariant = "info" | "success" | "warning" | "error";
+
+export interface AlertProps {
+  /** Alert content (children or message) */
+  children?: React.ReactNode;
+  /** Alert message (alias for children) */
+  message?: string;
+  variant?: AlertVariant;
+  title?: string;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  onClose?: () => void;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+const variantBorderClasses: Record<AlertVariant, string> = {
+  info: "border-[var(--color-info)]",
+  success: "border-[var(--color-success)]",
+  warning: "border-[var(--color-warning)]",
+  error: "border-[var(--color-error)]",
+};
+
+const variantIconColors: Record<AlertVariant, string> = {
+  info: "text-[var(--color-info)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  error: "text-[var(--color-error)]",
+};
+
+const iconMap: Record<AlertVariant, typeof Info> = {
+  info: Info,
+  success: CheckCircle,
+  warning: AlertTriangle,
+  error: AlertCircle,
+};
+
+export const Alert: React.FC<AlertProps> = ({
+  children,
+  message,
+  variant = "info",
+  title,
+  dismissible = false,
+  onDismiss,
+  onClose,
+  actions,
+  className,
+}) => {
+  const handleDismiss = onDismiss || onClose;
+  // Use message if provided, else children
+  const content = children ?? message;
+
+  return (
+    <Box
+      bg="surface"
+      border
+      shadow="sm"
+      padding="md"
+      rounded="sm"
+      className={cn(variantBorderClasses[variant], className)}
+      role="alert"
+    >
+      <div className="flex items-start gap-3">
+        {/* Icon */}
+        <div className="flex-shrink-0 mt-0.5">
+          <Icon
+            icon={iconMap[variant]}
+            size="md"
+            className={variantIconColors[variant]}
+          />
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {title && (
+            <Typography variant="h6" className="mb-1">
+              {title}
+            </Typography>
+          )}
+          <Typography variant="body2">{content}</Typography>
+          {actions && <div className="mt-3 flex gap-2">{actions}</div>}
+        </div>
+
+        {/* Dismiss Button */}
+        {(dismissible || handleDismiss) && (
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className={cn(
+              "flex-shrink-0 p-1 transition-colors rounded-[var(--radius-sm)]",
+              "hover:bg-[var(--color-muted)]",
+            )}
+            aria-label="Dismiss alert"
+          >
+            <Icon icon={X} size="sm" />
+          </button>
+        )}
+      </div>
+    </Box>
+  );
+};
+
+Alert.displayName = "Alert";

package/shells/typescript-shell/packages/client/src/components/molecules/Breadcrumb.tsx

@@ -0,0 +1,159 @@
+/**
+ * Breadcrumb Molecule Component
+ *
+ * A breadcrumb navigation component with separators and icons.
+ * Uses Button, Icon, and Typography atoms.
+ */
+
+import React from "react";
+import { ChevronRight } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+
+import { Icon } from "../atoms/Icon";
+import { Typography } from "../atoms/Typography";
+import { cn } from "../../lib/cn";
+
+export interface BreadcrumbItem {
+  /**
+   * Item label
+   */
+  label: string;
+
+  /**
+   * Item href (if provided, renders as link)
+   */
+  href?: string;
+
+  /**
+   * Item path (alias for href, for schema compatibility)
+   */
+  path?: string;
+
+  /**
+   * Item icon
+   */
+  icon?: LucideIcon;
+
+  /**
+   * Click handler (if href not provided)
+   */
+  onClick?: () => void;
+
+  /**
+   * Is current page
+   */
+  isCurrent?: boolean;
+}
+
+export interface BreadcrumbProps {
+  /**
+   * Breadcrumb items
+   */
+  items: BreadcrumbItem[];
+
+  /**
+   * Separator icon
+   */
+  separator?: LucideIcon;
+
+  /**
+   * Maximum items to show (truncates with ellipsis)
+   */
+  maxItems?: number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+  items,
+  separator = ChevronRight,
+  maxItems,
+  className,
+}) => {
+  const displayItems =
+    maxItems && items.length > maxItems
+      ? [
+          ...items.slice(0, 1),
+          { label: "...", isCurrent: false } as BreadcrumbItem,
+          ...items.slice(-maxItems + 1),
+        ]
+      : items;
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={cn("flex items-center gap-2", className)}
+    >
+      <ol className="flex items-center gap-2">
+        {displayItems.map((item, index) => {
+          const isLast = index === displayItems.length - 1;
+          const isEllipsis = item.label === "...";
+
+          return (
+            <li key={index} className="flex items-center gap-2">
+              {isEllipsis ? (
+                <Typography variant="small" color="muted">
+                  {item.label}
+                </Typography>
+              ) : item.href || item.path ? (
+                <a
+                  href={item.href || item.path}
+                  className={cn(
+                    "flex items-center gap-1.5 transition-colors",
+                    isLast
+                      ? "text-[var(--color-foreground)] font-bold"
+                      : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+                  )}
+                  aria-current={isLast ? "page" : undefined}
+                >
+                  {item.icon && <Icon icon={item.icon} size="sm" />}
+                  <Typography
+                    variant="small"
+                    weight={isLast ? "medium" : "normal"}
+                  >
+                    {item.label}
+                  </Typography>
+                </a>
+              ) : (
+                <button
+                  type="button"
+                  onClick={item.onClick}
+                  className={cn(
+                    "flex items-center gap-1.5 transition-colors",
+                    "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
+                    isLast
+                      ? "text-[var(--color-foreground)] font-bold cursor-default"
+                      : "text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+                  )}
+                  aria-current={isLast ? "page" : undefined}
+                  disabled={isLast}
+                >
+                  {item.icon && <Icon icon={item.icon} size="sm" />}
+                  <Typography
+                    variant="small"
+                    weight={isLast ? "medium" : "normal"}
+                  >
+                    {item.label}
+                  </Typography>
+                </button>
+              )}
+
+              {!isLast && (
+                <Icon
+                  icon={separator}
+                  size="sm"
+                  className="text-[var(--color-muted-foreground)]"
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+};
+
+Breadcrumb.displayName = "Breadcrumb";