@almadar/cli 1.0.6 → 1.0.8

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

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

@@ -1,150 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

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

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