@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/components/atoms/LawReferenceTooltip.tsx

@@ -0,0 +1,190 @@
+/**
+ * LawReferenceTooltip Atom Component
+ *
+ * A specialized tooltip for displaying law references in inspection forms.
+ * Shows law name, article number, and relevant clause text.
+ */
+
+import React from "react";
+import { Box } from "./Box";
+import { VStack } from "./Stack";
+import { Typography } from "./Typography";
+import { Divider } from "./Divider";
+import { cn } from "../../lib/cn";
+
+/**
+ * Law reference definition
+ */
+export interface LawReference {
+  /** Law identifier (e.g., "VVO", "TPED") */
+  law: string;
+  /** Full name of the law */
+  lawName?: string;
+  /** Article number (e.g., "§8", "Artikel 5") */
+  article: string;
+  /** Clause or paragraph text */
+  clause?: string;
+  /** Optional link to full law text */
+  link?: string;
+}
+
+export interface LawReferenceTooltipProps {
+  /** The law reference to display */
+  reference: LawReference;
+  /** Children element that triggers the tooltip */
+  children: React.ReactNode;
+  /** Tooltip position */
+  position?: "top" | "bottom" | "left" | "right";
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Position styles for tooltip placement
+ */
+const positionStyles = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
+  left: "right-full top-1/2 -translate-y-1/2 mr-2",
+  right: "left-full top-1/2 -translate-y-1/2 ml-2",
+};
+
+/**
+ * Arrow styles based on position
+ */
+const arrowStyles = {
+  top: "top-full left-1/2 -translate-x-1/2 border-t-[var(--color-foreground)] border-l-transparent border-r-transparent border-b-transparent",
+  bottom:
+    "bottom-full left-1/2 -translate-x-1/2 border-b-[var(--color-foreground)] border-l-transparent border-r-transparent border-t-transparent",
+  left: "left-full top-1/2 -translate-y-1/2 border-l-[var(--color-foreground)] border-t-transparent border-b-transparent border-r-transparent",
+  right:
+    "right-full top-1/2 -translate-y-1/2 border-r-[var(--color-foreground)] border-t-transparent border-b-transparent border-l-transparent",
+};
+
+/**
+ * LawReferenceTooltip displays legal references with structured formatting.
+ *
+ * @example
+ * <LawReferenceTooltip
+ *   reference={{
+ *     law: "VVO",
+ *     lawName: "Verkehrsverordnung",
+ *     article: "§8 Abs. 3",
+ *     clause: "Die zulässige Gesamtmasse darf 3500 kg nicht überschreiten."
+ *   }}
+ * >
+ *   <Typography variant="small" className="text-blue-600 underline cursor-help">VVO §8</Typography>
+ * </LawReferenceTooltip>
+ */
+export const LawReferenceTooltip: React.FC<LawReferenceTooltipProps> = ({
+  reference,
+  children,
+  position = "top",
+  className,
+}) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
+  };
+
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setIsVisible(false);
+  };
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return (
+    <Box
+      as="span"
+      position="relative"
+      display="inline-block"
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onFocus={handleMouseEnter}
+      onBlur={handleMouseLeave}
+    >
+      {children}
+      {isVisible && (
+        <Box
+          padding="sm"
+          rounded="lg"
+          shadow="lg"
+          position="absolute"
+          className={cn(
+            "z-50 w-64 bg-[var(--color-foreground)] text-[var(--color-background)]",
+            positionStyles[position],
+          )}
+          role="tooltip"
+        >
+          <VStack gap="xs">
+            {/* Law header */}
+            <Typography
+              variant="label"
+              weight="semibold"
+              className="text-amber-400"
+            >
+              {reference.law} {reference.article}
+            </Typography>
+
+            {/* Law name */}
+            {reference.lawName && (
+              <Typography
+                variant="caption"
+                className="text-[var(--color-muted-foreground)]"
+              >
+                {reference.lawName}
+              </Typography>
+            )}
+
+            {/* Clause text */}
+            {reference.clause && (
+              <>
+                <Divider className="border-[var(--color-border)]" />
+                <Typography
+                  variant="caption"
+                  className="text-[var(--color-background)] leading-relaxed"
+                >
+                  {reference.clause}
+                </Typography>
+              </>
+            )}
+
+            {/* Link to full text */}
+            {reference.link && (
+              <Typography
+                as="a"
+                variant="caption"
+                className="text-blue-400 hover:text-blue-300 underline cursor-pointer"
+                // @ts-expect-error - anchor props
+                href={reference.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e: React.MouseEvent) => e.stopPropagation()}
+              >
+                View full law text
+              </Typography>
+            )}
+          </VStack>
+
+          {/* Arrow */}
+          <Box
+            as="span"
+            position="absolute"
+            className={cn("w-0 h-0 border-4", arrowStyles[position])}
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+LawReferenceTooltip.displayName = "LawReferenceTooltip";

package/shells/typescript-shell/packages/client/src/components/atoms/Overlay.tsx

@@ -0,0 +1,37 @@
+/**
+ * Overlay Atom Component
+ *
+ * A fixed backdrop for modals and drawers.
+ */
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export interface OverlayProps {
+  isVisible?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
+  className?: string;
+  blur?: boolean;
+}
+
+export const Overlay: React.FC<OverlayProps> = ({
+  isVisible = true,
+  onClick,
+  className,
+  blur = true,
+}) => {
+  if (!isVisible) return null;
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-40 bg-[var(--color-background)]/80",
+        blur && "backdrop-blur-sm",
+        className,
+      )}
+      onClick={onClick}
+      aria-hidden="true"
+    />
+  );
+};
+
+export default Overlay;

package/shells/typescript-shell/packages/client/src/components/atoms/ProgressBar.tsx

@@ -0,0 +1,256 @@
+/**
+ * ProgressBar Atom Component
+ *
+ * A progress bar component with linear, circular, and stepped variants.
+ */
+
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export type ProgressBarType = "linear" | "circular" | "stepped";
+export type ProgressBarVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger";
+export type ProgressBarColor = ProgressBarVariant; // Alias
+
+export interface ProgressBarProps {
+  /**
+   * Progress value (0-100)
+   */
+  value: number;
+
+  /**
+   * Maximum value (for calculating percentage)
+   * @default 100
+   */
+  max?: number;
+
+  /**
+   * Type of the progress bar (linear, circular, stepped)
+   * @default 'linear'
+   */
+  type?: ProgressBarType;
+
+  /**
+   * Variant/color of the progress bar
+   * @default 'primary'
+   */
+  variant?: ProgressBarVariant;
+
+  /**
+   * Color variant (alias for variant)
+   * @default 'primary'
+   */
+  color?: ProgressBarColor;
+
+  /**
+   * Show percentage text
+   * @default false
+   */
+  showPercentage?: boolean;
+
+  /**
+   * Alias for showPercentage (pattern compatibility)
+   */
+  showLabel?: boolean;
+
+  /**
+   * Label text
+   */
+  label?: string;
+
+  /**
+   * Size (for circular variant)
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Number of steps (for stepped variant)
+   * @default 5
+   */
+  steps?: number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+const colorClasses: Record<ProgressBarVariant, string> = {
+  default: "bg-[var(--color-primary)]",
+  primary: "bg-[var(--color-primary)]",
+  success: "bg-[var(--color-success)]",
+  warning: "bg-[var(--color-warning)]",
+  danger: "bg-[var(--color-error)]",
+};
+
+const circularSizeClasses = {
+  sm: "w-16 h-16",
+  md: "w-24 h-24",
+  lg: "w-32 h-32",
+};
+
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  value,
+  max = 100,
+  type = "linear",
+  variant = "primary",
+  color,
+  showPercentage = false,
+  showLabel = false,
+  label,
+  size = "md",
+  steps = 5,
+  className,
+}) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  // Use color if provided, else variant
+  const effectiveColor = color ?? variant;
+  // Use showLabel as alias for showPercentage
+  const effectiveShowPercentage = showPercentage || showLabel;
+
+  if (type === "linear") {
+    return (
+      <div className={cn("w-full", className)}>
+        {label && (
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-sm font-bold text-[var(--color-foreground)]">
+              {label}
+            </span>
+            {effectiveShowPercentage && (
+              <span className="text-sm text-[var(--color-foreground)] font-medium">
+                {Math.round(percentage)}%
+              </span>
+            )}
+          </div>
+        )}
+        <div className="w-full h-2 bg-[var(--color-muted)] border border-[var(--color-border)] overflow-hidden">
+          <div
+            className={cn(
+              "h-full transition-all duration-300 ease-out",
+              colorClasses[effectiveColor],
+            )}
+            style={{ width: `${percentage}%` }}
+            role="progressbar"
+            aria-valuenow={value}
+            aria-valuemin={0}
+            aria-valuemax={max}
+            aria-label={label || `Progress: ${Math.round(percentage)}%`}
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (type === "circular") {
+    const radius = size === "sm" ? 28 : size === "md" ? 40 : 56;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percentage / 100) * circumference;
+
+    return (
+      <div
+        className={cn(
+          "relative inline-flex items-center justify-center",
+          className,
+        )}
+      >
+        <svg
+          className={cn("transform -rotate-90", circularSizeClasses[size])}
+          viewBox="0 0 100 100"
+        >
+          {/* Background circle */}
+          <circle
+            cx="50"
+            cy="50"
+            r={radius}
+            stroke="currentColor"
+            strokeWidth="8"
+            fill="none"
+            className="text-[var(--color-muted)]"
+          />
+          {/* Progress circle */}
+          <circle
+            cx="50"
+            cy="50"
+            r={radius}
+            stroke="currentColor"
+            strokeWidth="8"
+            fill="none"
+            strokeDasharray={circumference}
+            strokeDashoffset={offset}
+            strokeLinecap="round"
+            className={cn(
+              "transition-all duration-300 ease-out",
+              colorClasses[effectiveColor],
+            )}
+          />
+        </svg>
+        {effectiveShowPercentage && (
+          <div className="absolute inset-0 flex items-center justify-center">
+            <span className="text-sm font-bold text-[var(--color-foreground)]">
+              {Math.round(percentage)}%
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (type === "stepped") {
+    const stepValue = max / steps;
+    const activeSteps = Math.floor(value / stepValue);
+    const partialStep = (value % stepValue) / stepValue;
+
+    return (
+      <div className={cn("w-full", className)}>
+        {label && (
+          <div className="flex items-center justify-between mb-2">
+            <span className="text-sm font-medium text-[var(--color-foreground)]">
+              {label}
+            </span>
+            {effectiveShowPercentage && (
+              <span className="text-sm text-[var(--color-muted-foreground)]">
+                {Math.round(percentage)}%
+              </span>
+            )}
+          </div>
+        )}
+        <div className="flex gap-1">
+          {Array.from({ length: steps }).map((_, index) => {
+            const isActive = index < activeSteps;
+            const isPartial = index === activeSteps && partialStep > 0;
+
+            return (
+              <div
+                key={index}
+                className="flex-1 h-2 bg-[var(--color-muted)] border border-[var(--color-border)] overflow-hidden"
+              >
+                <div
+                  className={cn(
+                    "h-full transition-all duration-300 ease-out",
+                    (isActive || isPartial) && colorClasses[effectiveColor],
+                  )}
+                  style={{
+                    width: isPartial
+                      ? `${partialStep * 100}%`
+                      : isActive
+                        ? "100%"
+                        : "0%",
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+ProgressBar.displayName = "ProgressBar";

package/shells/typescript-shell/packages/client/src/components/atoms/Radio.tsx

@@ -0,0 +1,164 @@
+/**
+ * Radio Atom Component
+ *
+ * A radio button component with label support and accessibility.
+ */
+
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export interface RadioProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "type" | "size"
+> {
+  /**
+   * Label text displayed next to the radio button
+   */
+  label?: string;
+
+  /**
+   * Helper text displayed below the radio button
+   */
+  helperText?: string;
+
+  /**
+   * Error message displayed below the radio button
+   */
+  error?: string;
+
+  /**
+   * Size of the radio button
+   * @default 'md'
+   */
+  size?: "sm" | "md" | "lg";
+}
+
+export const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      label,
+      helperText,
+      error,
+      size = "md",
+      className,
+      id,
+      checked,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+    const hasError = !!error;
+
+    const sizeClasses = {
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6",
+    };
+
+    const dotSizeClasses = {
+      sm: "w-2 h-2",
+      md: "w-2.5 h-2.5",
+      lg: "w-3 h-3",
+    };
+
+    return (
+      <>
+        <div className="flex items-start gap-3">
+          <div className="relative flex-shrink-0 mt-0.5">
+            <input
+              ref={ref}
+              type="radio"
+              id={radioId}
+              checked={checked}
+              disabled={disabled}
+              className={cn("sr-only peer", className)}
+              aria-invalid={hasError}
+              aria-describedby={
+                error
+                  ? `${radioId}-error`
+                  : helperText
+                    ? `${radioId}-helper`
+                    : undefined
+              }
+              {...props}
+            />
+            <label
+              htmlFor={radioId}
+              className={cn(
+                "flex items-center justify-center",
+                "border-[length:var(--border-width)] transition-all cursor-pointer",
+                sizeClasses[size],
+                hasError
+                  ? "border-[var(--color-error)] peer-focus:ring-[var(--color-error)]/20"
+                  : "border-[var(--color-border)] peer-focus:ring-[var(--color-ring)]/20",
+                checked
+                  ? hasError
+                    ? "border-[var(--color-error)]"
+                    : "border-[var(--color-primary)] bg-[var(--color-primary)]"
+                  : "",
+                "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
+                disabled && "opacity-50 cursor-not-allowed",
+                !disabled && "hover:border-[var(--color-border-hover)]",
+              )}
+            >
+              {checked && (
+                <div
+                  className={cn(
+                    "transition-all",
+                    dotSizeClasses[size],
+                    hasError
+                      ? "bg-[var(--color-error)]"
+                      : "bg-[var(--color-primary-foreground)]",
+                  )}
+                />
+              )}
+            </label>
+          </div>
+
+          {label && (
+            <div className="flex-1 min-w-0">
+              <label
+                htmlFor={radioId}
+                className={cn(
+                  "block text-sm font-medium cursor-pointer select-none",
+                  hasError
+                    ? "text-[var(--color-error)]"
+                    : "text-[var(--color-foreground)]",
+                  disabled && "opacity-50 cursor-not-allowed",
+                )}
+              >
+                {label}
+              </label>
+            </div>
+          )}
+        </div>
+
+        {(helperText || error) && (
+          <div className="mt-1.5 ml-8">
+            {error && (
+              <p
+                id={`${radioId}-error`}
+                className="text-sm text-[var(--color-error)] font-medium"
+                role="alert"
+              >
+                {error}
+              </p>
+            )}
+            {!error && helperText && (
+              <p
+                id={`${radioId}-helper`}
+                className="text-sm text-[var(--color-muted-foreground)]"
+              >
+                {helperText}
+              </p>
+            )}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+Radio.displayName = "Radio";

package/shells/typescript-shell/packages/client/src/components/atoms/Select.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { ChevronDown } from "lucide-react";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  "children"
+> {
+  options: SelectOption[];
+  placeholder?: string;
+  error?: string;
+}
+
+export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, options, placeholder, error, ...props }, ref) => {
+    return (
+      <div className="relative">
+        <select
+          ref={ref}
+          className={cn(
+            "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)] appearance-none",
+            "px-3 py-2 pr-10 text-sm text-[var(--color-foreground)] font-medium",
+            "bg-[var(--color-card)]",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
+            "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
+            error
+              ? "border-[var(--color-error)] focus:border-[var(--color-error)]"
+              : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+            className,
+          )}
+          {...props}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          {options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+          <ChevronDown className="h-4 w-4 text-[var(--color-foreground)]" />
+        </div>
+      </div>
+    );
+  },
+);
+
+Select.displayName = "Select";