@almadar/cli 0.3.2 → 1.0.3

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

@@ -0,0 +1,262 @@
+/**
+ * Box Component
+ *
+ * A versatile layout primitive that provides spacing, background, border, and shadow controls.
+ * Think of it as a styled div with consistent design tokens.
+ */
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export type BoxPadding = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type BoxMargin =
+  | "none"
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "auto";
+export type BoxBg =
+  | "transparent"
+  | "primary"
+  | "secondary"
+  | "muted"
+  | "accent"
+  | "surface"
+  | "overlay";
+export type BoxRounded = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export type BoxShadow = "none" | "sm" | "md" | "lg" | "xl";
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Padding on all sides */
+  padding?: BoxPadding;
+  /** Horizontal padding (overrides padding for x-axis) */
+  paddingX?: BoxPadding;
+  /** Vertical padding (overrides padding for y-axis) */
+  paddingY?: BoxPadding;
+  /** Margin on all sides */
+  margin?: BoxMargin;
+  /** Horizontal margin */
+  marginX?: BoxMargin;
+  /** Vertical margin */
+  marginY?: BoxMargin;
+  /** Background color */
+  bg?: BoxBg;
+  /** Show border */
+  border?: boolean;
+  /** Border radius */
+  rounded?: BoxRounded;
+  /** Box shadow */
+  shadow?: BoxShadow;
+  /** Display type */
+  display?:
+    | "block"
+    | "inline"
+    | "inline-block"
+    | "flex"
+    | "inline-flex"
+    | "grid";
+  /** Fill available width */
+  fullWidth?: boolean;
+  /** Fill available height */
+  fullHeight?: boolean;
+  /** Overflow behavior */
+  overflow?: "auto" | "hidden" | "visible" | "scroll";
+  /** Position */
+  position?: "relative" | "absolute" | "fixed" | "sticky";
+  /** HTML element to render as */
+  as?: React.ElementType;
+}
+
+const paddingStyles: Record<BoxPadding, string> = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  "2xl": "p-12",
+};
+
+const paddingXStyles: Record<BoxPadding, string> = {
+  none: "px-0",
+  xs: "px-1",
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-6",
+  xl: "px-8",
+  "2xl": "px-12",
+};
+
+const paddingYStyles: Record<BoxPadding, string> = {
+  none: "py-0",
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6",
+  xl: "py-8",
+  "2xl": "py-12",
+};
+
+const marginStyles: Record<BoxMargin, string> = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  "2xl": "m-12",
+  auto: "m-auto",
+};
+
+const marginXStyles: Record<BoxMargin, string> = {
+  none: "mx-0",
+  xs: "mx-1",
+  sm: "mx-2",
+  md: "mx-4",
+  lg: "mx-6",
+  xl: "mx-8",
+  "2xl": "mx-12",
+  auto: "mx-auto",
+};
+
+const marginYStyles: Record<BoxMargin, string> = {
+  none: "my-0",
+  xs: "my-1",
+  sm: "my-2",
+  md: "my-4",
+  lg: "my-6",
+  xl: "my-8",
+  "2xl": "my-12",
+  auto: "my-auto",
+};
+
+// Using CSS variables for theme-aware styling
+const bgStyles: Record<BoxBg, string> = {
+  transparent: "bg-transparent",
+  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+  secondary:
+    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
+  surface: "bg-[var(--color-card)]",
+  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm",
+};
+
+const roundedStyles: Record<BoxRounded, string> = {
+  none: "rounded-none",
+  sm: "rounded-[var(--radius-sm)]",
+  md: "rounded-[var(--radius-md)]",
+  lg: "rounded-[var(--radius-lg)]",
+  xl: "rounded-[var(--radius-xl)]",
+  "2xl": "rounded-[var(--radius-xl)]",
+  full: "rounded-[var(--radius-full)]",
+};
+
+const shadowStyles: Record<BoxShadow, string> = {
+  none: "shadow-none",
+  sm: "shadow-[var(--shadow-sm)]",
+  md: "shadow-[var(--shadow-main)]",
+  lg: "shadow-[var(--shadow-lg)]",
+  xl: "shadow-[var(--shadow-lg)]",
+};
+
+const displayStyles = {
+  block: "block",
+  inline: "inline",
+  "inline-block": "inline-block",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid",
+};
+
+const overflowStyles = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll",
+};
+
+const positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky",
+};
+
+/**
+ * Box - Versatile container component with design tokens
+ */
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
+  (
+    {
+      padding,
+      paddingX,
+      paddingY,
+      margin,
+      marginX,
+      marginY,
+      bg = "transparent",
+      border = false,
+      rounded = "none",
+      shadow = "none",
+      display,
+      fullWidth = false,
+      fullHeight = false,
+      overflow,
+      position,
+      className,
+      children,
+      as: Component = "div",
+      onClick,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          // Padding
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          // Margin
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          // Background
+          bgStyles[bg],
+          // Border - uses theme variables
+          border &&
+            "border-[length:var(--border-width)] border-[var(--color-border)]",
+          // Rounded
+          roundedStyles[rounded],
+          // Shadow
+          shadowStyles[shadow],
+          // Display
+          display && displayStyles[display],
+          // Dimensions
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          // Overflow
+          overflow && overflowStyles[overflow],
+          // Position
+          position && positionStyles[position],
+          // Cursor for clickable
+          onClick && "cursor-pointer",
+          className,
+        )}
+        onClick={onClick}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+
+Box.displayName = "Box";
+
+export default Box;

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

@@ -0,0 +1,150 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { Loader2, type LucideIcon } from "lucide-react";
+
+export type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "ghost"
+  | "danger"
+  | "success"
+  | "warning"
+  | "default";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  /** Left icon as ReactNode (preferred) */
+  leftIcon?: React.ReactNode;
+  /** Right icon as ReactNode (preferred) */
+  rightIcon?: React.ReactNode;
+  /** Left icon as Lucide icon component (convenience prop, renders with default size) */
+  icon?: LucideIcon;
+  /** Right icon as Lucide icon component (convenience prop) */
+  iconRight?: LucideIcon;
+}
+
+// Using CSS variables for theme-aware styling with hover/active effects
+const variantStyles = {
+  primary: [
+    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]",
+  ].join(" "),
+  secondary: [
+    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+    "hover:bg-[var(--color-secondary-hover)]",
+    "active:scale-[var(--active-scale)]",
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-[var(--color-muted-foreground)]",
+    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "active:scale-[var(--active-scale)]",
+  ].join(" "),
+  danger: [
+    "bg-[var(--color-surface)] text-[var(--color-error)]",
+    "border-[length:var(--border-width)] border-[var(--color-error)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]",
+  ].join(" "),
+  success: [
+    "bg-[var(--color-surface)] text-[var(--color-success)]",
+    "border-[length:var(--border-width)] border-[var(--color-success)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]",
+  ].join(" "),
+  warning: [
+    "bg-[var(--color-surface)] text-[var(--color-warning)]",
+    "border-[length:var(--border-width)] border-[var(--color-warning)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]",
+  ].join(" "),
+  // "default" is an alias for secondary
+  default: [
+    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+    "hover:bg-[var(--color-secondary-hover)]",
+    "active:scale-[var(--active-scale)]",
+  ].join(" "),
+};
+
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base",
+};
+
+const iconSizeStyles = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+};
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      disabled,
+      leftIcon,
+      rightIcon,
+      icon: IconComponent,
+      iconRight: IconRightComponent,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const resolvedLeftIcon =
+      leftIcon ||
+      (IconComponent && <IconComponent className={iconSizeStyles[size]} />);
+    const resolvedRightIcon =
+      rightIcon ||
+      (IconRightComponent && (
+        <IconRightComponent className={iconSizeStyles[size]} />
+      ));
+
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || isLoading}
+        className={cn(
+          "inline-flex items-center justify-center gap-2",
+          "font-[var(--font-weight-medium)]",
+          "rounded-[var(--radius-sm)]",
+          "transition-all duration-[var(--transition-normal)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        )}
+        {...props}
+      >
+        {isLoading ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          resolvedLeftIcon && (
+            <span className="flex-shrink-0">{resolvedLeftIcon}</span>
+          )
+        )}
+        {children}
+        {resolvedRightIcon && !isLoading && (
+          <span className="flex-shrink-0">{resolvedRightIcon}</span>
+        )}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";

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

@@ -0,0 +1,151 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export type CardShadow = "none" | "sm" | "md" | "lg";
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "default" | "bordered" | "elevated" | "interactive";
+  padding?: "none" | "sm" | "md" | "lg";
+  /** Card title - renders in header if provided */
+  title?: string;
+  /** Card subtitle - renders below title */
+  subtitle?: string;
+  /** Shadow size override */
+  shadow?: CardShadow;
+}
+
+// Using CSS variables for theme-aware styling
+const variantStyles = {
+  default: "bg-[var(--color-card)] border-none",
+  bordered: [
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-none",
+  ].join(" "),
+  elevated: [
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-main)]",
+  ].join(" "),
+  // Interactive variant with theme-specific hover effects
+  interactive: [
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-main)]",
+    "cursor-pointer",
+    "transition-all duration-[var(--transition-normal)]",
+    "hover:shadow-[var(--shadow-hover)]",
+  ].join(" "),
+};
+
+const paddingStyles = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6",
+};
+
+const shadowStyles: Record<CardShadow, string> = {
+  none: "shadow-none",
+  sm: "shadow-[var(--shadow-sm)]",
+  md: "shadow-[var(--shadow-main)]",
+  lg: "shadow-[var(--shadow-lg)]",
+};
+
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      className,
+      variant = "bordered",
+      padding = "md",
+      title,
+      subtitle,
+      shadow,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "rounded-[var(--radius-md)]",
+          "transition-all duration-[var(--transition-normal)]",
+          variantStyles[variant],
+          paddingStyles[padding],
+          shadow && shadowStyles[shadow],
+          className,
+        )}
+        {...props}
+      >
+        {(title || subtitle) && (
+          <div className="mb-4">
+            {title && (
+              <h3 className="text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]">
+                {title}
+              </h3>
+            )}
+            {subtitle && (
+              <p className="text-sm text-[var(--color-muted-foreground)] mt-1">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";
+
+// Card subcomponents
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("mb-4", className)} {...props} />
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-lg text-[var(--color-card-foreground)]",
+      "font-[var(--font-weight-bold)]",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+// Alias for CardBody (used by shared component-types)
+export const CardBody = CardContent;
+CardBody.displayName = "CardBody";
+
+export const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("mt-4 flex items-center", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";

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

@@ -0,0 +1,67 @@
+/**
+ * Center Component
+ * 
+ * A layout utility that centers its children horizontally and/or vertically.
+ */
+import React from 'react';
+import { cn } from '../../lib/cn';
+
+export interface CenterProps {
+  /** Center inline (width fits content) vs block (full width) */
+  inline?: boolean;
+  /** Center only horizontally */
+  horizontal?: boolean;
+  /** Center only vertically */
+  vertical?: boolean;
+  /** Minimum height (useful for vertical centering) */
+  minHeight?: string | number;
+  /** Fill available height */
+  fullHeight?: boolean;
+  /** Fill available width */
+  fullWidth?: boolean;
+  /** Custom class name */
+  className?: string;
+  /** Inline styles */
+  style?: React.CSSProperties;
+  /** Children elements */
+  children: React.ReactNode;
+  /** HTML element to render as */
+  as?: React.ElementType;
+}
+
+/**
+ * Center - Centers content horizontally and/or vertically
+ */
+export const Center: React.FC<CenterProps> = ({
+  inline = false,
+  horizontal = true,
+  vertical = true,
+  minHeight,
+  fullHeight = false,
+  fullWidth = false,
+  className,
+  style,
+  children,
+  as: Component = 'div',
+}) => {
+  const mergedStyle = minHeight ? { minHeight, ...style } : style;
+
+  return (
+    <Component
+      className={cn(
+        inline ? 'inline-flex' : 'flex',
+        horizontal && 'justify-center',
+        vertical && 'items-center',
+        fullHeight && 'h-full',
+        fullWidth && 'w-full',
+        className
+      )}
+      style={mergedStyle}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default Center;
+

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { Check } from "lucide-react";
+
+export interface CheckboxProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "type"
+> {
+  label?: string;
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, id, ...props }, ref) => {
+    const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+
+    return (
+      <div className="flex items-center">
+        <div className="relative flex items-center">
+          <input
+            ref={ref}
+            type="checkbox"
+            id={inputId}
+            className={cn(
+              "peer h-4 w-4 border-[length:var(--border-width)] border-[var(--color-border)]",
+              "accent-[var(--color-primary)] focus:ring-[var(--color-ring)] focus:ring-offset-0",
+              "bg-[var(--color-card)] checked:bg-[var(--color-primary)]",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              className,
+            )}
+            {...props}
+          />
+        </div>
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="ml-2 text-sm text-[var(--color-foreground)] font-medium cursor-pointer select-none"
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";