@almadar/cli 1.0.6 → 1.0.8

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

@@ -1,190 +0,0 @@
-/**
- * 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

@@ -1,37 +0,0 @@
-/**
- * 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

@@ -1,256 +0,0 @@
-/**
- * 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

@@ -1,164 +0,0 @@
-/**
- * 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

@@ -1,62 +0,0 @@
-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";