crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/ui/GradientCard.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+// Predefined gradient colors
+const GRADIENT_COLORS = [
+  'from-purple-500/10 to-blue-500/5',
+  'from-blue-500/10 to-cyan-500/5',
+  'from-cyan-500/10 to-green-500/5',
+  'from-green-500/10 to-yellow-500/5',
+  'from-yellow-500/10 to-orange-500/5',
+  'from-orange-500/10 to-red-500/5',
+  'from-red-500/10 to-pink-500/5',
+  'from-pink-500/10 to-purple-500/5',
+];
+
+interface GradientCardProps {
+  /** Custom gradient class (overrides seed-based gradient) */
+  gradient?: string;
+
+  /** Seed string to determine gradient color */
+  seed?: string;
+
+  /** Whether to apply hover animation effect */
+  hoverEffect?: boolean;
+
+  /** Whether to apply border effect */
+  borderEffect?: boolean;
+
+  /** Card content */
+  children: React.ReactNode;
+
+  /** Additional class name */
+  className?: string;
+
+  /** Additional props */
+  [key: string]: any;
+}
+
+/**
+ * GradientCard component
+ *
+ * A card with a gradient background that can be determined by a seed string.
+ */
+export function GradientCard({
+  gradient,
+  seed,
+  hoverEffect = true,
+  borderEffect = true,
+  className,
+  children,
+  ...props
+}: GradientCardProps) {
+  // Get gradient color based on seed or use provided gradient
+  const gradientClass = gradient || getGradientColorFromSeed(seed);
+
+  // Animation variants for hover effect
+  const hoverAnimation = hoverEffect
+    ? {
+        whileHover: {
+          scale: 1.02,
+          y: -2,
+          transition: { type: 'spring', stiffness: 400, damping: 17 },
+        },
+        whileTap: { scale: 0.98 },
+      }
+    : undefined;
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-5 rounded-xl bg-gradient-to-br',
+        gradientClass,
+        borderEffect
+          ? 'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40'
+          : '',
+        'transition-all duration-300 shadow-sm',
+        hoverEffect ? 'hover:shadow-md' : '',
+        className,
+      )}
+      {...hoverAnimation}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/**
+ * Calculate a gradient color based on the seed string for visual variety
+ */
+function getGradientColorFromSeed(seedString?: string): string {
+  if (!seedString) {
+    return GRADIENT_COLORS[0];
+  }
+
+  const index = seedString.length % GRADIENT_COLORS.length;
+
+  return GRADIENT_COLORS[index];
+}

tools/bolt.diy/app/components/ui/IconButton.tsx

@@ -0,0 +1,84 @@
+import { memo, forwardRef, type ForwardedRef } from 'react';
+import { classNames } from '~/utils/classNames';
+
+type IconSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+
+interface BaseIconButtonProps {
+  size?: IconSize;
+  className?: string;
+  iconClassName?: string;
+  disabledClassName?: string;
+  title?: string;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+type IconButtonWithoutChildrenProps = {
+  icon: string;
+  children?: undefined;
+} & BaseIconButtonProps;
+
+type IconButtonWithChildrenProps = {
+  icon?: undefined;
+  children: string | JSX.Element | JSX.Element[];
+} & BaseIconButtonProps;
+
+type IconButtonProps = IconButtonWithoutChildrenProps | IconButtonWithChildrenProps;
+
+// Componente IconButton com suporte a refs
+export const IconButton = memo(
+  forwardRef(
+    (
+      {
+        icon,
+        size = 'xl',
+        className,
+        iconClassName,
+        disabledClassName,
+        disabled = false,
+        title,
+        onClick,
+        children,
+      }: IconButtonProps,
+      ref: ForwardedRef<HTMLButtonElement>,
+    ) => {
+      return (
+        <button
+          ref={ref}
+          className={classNames(
+            'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed focus:outline-none',
+            {
+              [classNames('opacity-30', disabledClassName)]: disabled,
+            },
+            className,
+          )}
+          title={title}
+          disabled={disabled}
+          onClick={(event) => {
+            if (disabled) {
+              return;
+            }
+
+            onClick?.(event);
+          }}
+        >
+          {children ? children : <div className={classNames(icon, getIconSize(size), iconClassName)}></div>}
+        </button>
+      );
+    },
+  ),
+);
+
+function getIconSize(size: IconSize) {
+  if (size === 'sm') {
+    return 'text-sm';
+  } else if (size === 'md') {
+    return 'text-md';
+  } else if (size === 'lg') {
+    return 'text-lg';
+  } else if (size === 'xl') {
+    return 'text-xl';
+  } else {
+    return 'text-2xl';
+  }
+}

tools/bolt.diy/app/components/ui/Input.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { classNames } from '~/utils/classNames';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={classNames(
+        'flex h-10 w-full rounded-md border border-bolt-elements-border bg-bolt-elements-background px-3 py-2 text-sm ring-offset-bolt-elements-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-bolt-elements-textSecondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export { Input };

tools/bolt.diy/app/components/ui/Label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { classNames } from '~/utils/classNames';
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={classNames(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

tools/bolt.diy/app/components/ui/LoadingDots.tsx

@@ -0,0 +1,27 @@
+import { memo, useEffect, useState } from 'react';
+
+interface LoadingDotsProps {
+  text: string;
+}
+
+export const LoadingDots = memo(({ text }: LoadingDotsProps) => {
+  const [dotCount, setDotCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDotCount((prevDotCount) => (prevDotCount + 1) % 4);
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="flex justify-center items-center h-full">
+      <div className="relative">
+        <span>{text}</span>
+        <span className="absolute left-[calc(100%-12px)]">{'.'.repeat(dotCount)}</span>
+        <span className="invisible">...</span>
+      </div>
+    </div>
+  );
+});

tools/bolt.diy/app/components/ui/LoadingOverlay.tsx

@@ -0,0 +1,32 @@
+export const LoadingOverlay = ({
+  message = 'Loading...',
+  progress,
+  progressText,
+}: {
+  message?: string;
+  progress?: number;
+  progressText?: string;
+}) => {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center bg-black/80 z-50 backdrop-blur-sm">
+      <div className="relative flex flex-col items-center gap-4 p-8 rounded-lg bg-bolt-elements-background-depth-2 shadow-lg">
+        <div
+          className={'i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress'}
+          style={{ fontSize: '2rem' }}
+        ></div>
+        <p className="text-lg text-bolt-elements-textTertiary">{message}</p>
+        {progress !== undefined && (
+          <div className="w-64 flex flex-col gap-2">
+            <div className="w-full h-2 bg-bolt-elements-background-depth-1 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-bolt-elements-loader-progress transition-all duration-300 ease-out rounded-full"
+                style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+              />
+            </div>
+            {progressText && <p className="text-sm text-bolt-elements-textTertiary text-center">{progressText}</p>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

tools/bolt.diy/app/components/ui/PanelHeader.tsx

@@ -0,0 +1,20 @@
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface PanelHeaderProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const PanelHeader = memo(({ className, children }: PanelHeaderProps) => {
+  return (
+    <div
+      className={classNames(
+        'flex items-center gap-2 bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary border-b border-bolt-elements-borderColor px-4 py-1 min-h-[34px] text-sm',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});

tools/bolt.diy/app/components/ui/PanelHeaderButton.tsx

@@ -0,0 +1,36 @@
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface PanelHeaderButtonProps {
+  className?: string;
+  disabledClassName?: string;
+  disabled?: boolean;
+  children: string | JSX.Element | Array<JSX.Element | string>;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+
+export const PanelHeaderButton = memo(
+  ({ className, disabledClassName, disabled = false, children, onClick }: PanelHeaderButtonProps) => {
+    return (
+      <button
+        className={classNames(
+          'flex items-center shrink-0 gap-1.5 px-1.5 rounded-md py-0.5 text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
+          {
+            [classNames('opacity-30', disabledClassName)]: disabled,
+          },
+          className,
+        )}
+        disabled={disabled}
+        onClick={(event) => {
+          if (disabled) {
+            return;
+          }
+
+          onClick?.(event);
+        }}
+      >
+        {children}
+      </button>
+    );
+  },
+);

tools/bolt.diy/app/components/ui/Popover.tsx

@@ -0,0 +1,29 @@
+import * as Popover from '@radix-ui/react-popover';
+import type { PropsWithChildren, ReactNode } from 'react';
+
+export default ({
+  children,
+  trigger,
+  side,
+  align,
+}: PropsWithChildren<{
+  trigger: ReactNode;
+  side: 'top' | 'right' | 'bottom' | 'left' | undefined;
+  align: 'center' | 'start' | 'end' | undefined;
+}>) => (
+  <Popover.Root>
+    <Popover.Trigger asChild>{trigger}</Popover.Trigger>
+    <Popover.Anchor />
+    <Popover.Portal>
+      <Popover.Content
+        sideOffset={10}
+        side={side}
+        align={align}
+        className="bg-bolt-elements-background-depth-2 text-bolt-elements-item-contentAccent p-2 rounded-md shadow-xl z-workbench"
+      >
+        {children}
+        <Popover.Arrow className="bg-bolt-elements-item-background-depth-2" />
+      </Popover.Content>
+    </Popover.Portal>
+  </Popover.Root>
+);

tools/bolt.diy/app/components/ui/Progress.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: number;
+}
+
+const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(({ className, value, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={classNames('relative h-2 w-full overflow-hidden rounded-full bg-bolt-elements-background', className)}
+    {...props}
+  >
+    <div
+      className="h-full w-full flex-1 bg-bolt-elements-textPrimary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </div>
+));
+Progress.displayName = 'Progress';
+
+export { Progress };

tools/bolt.diy/app/components/ui/RepositoryStats.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Badge } from './Badge';
+import { classNames } from '~/utils/classNames';
+import { formatSize } from '~/utils/formatSize';
+
+interface RepositoryStatsProps {
+  stats: {
+    totalFiles?: number;
+    totalSize?: number;
+    languages?: Record<string, number>;
+    hasPackageJson?: boolean;
+    hasDependencies?: boolean;
+  };
+  className?: string;
+  compact?: boolean;
+}
+
+export function RepositoryStats({ stats, className, compact = false }: RepositoryStatsProps) {
+  const { totalFiles, totalSize, languages, hasPackageJson, hasDependencies } = stats;
+
+  return (
+    <div className={classNames('space-y-3', className)}>
+      {!compact && (
+        <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+          Repository Statistics:
+        </p>
+      )}
+
+      <div className={classNames('grid gap-3', compact ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3')}>
+        {totalFiles !== undefined && (
+          <div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+            <span className="i-ph:files text-purple-500 w-4 h-4" />
+            <span className={compact ? 'text-xs' : 'text-sm'}>Total Files: {totalFiles.toLocaleString()}</span>
+          </div>
+        )}
+
+        {totalSize !== undefined && (
+          <div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+            <span className="i-ph:database text-purple-500 w-4 h-4" />
+            <span className={compact ? 'text-xs' : 'text-sm'}>Total Size: {formatSize(totalSize)}</span>
+          </div>
+        )}
+      </div>
+
+      {languages && Object.keys(languages).length > 0 && (
+        <div className={compact ? 'pt-1' : 'pt-2'}>
+          <div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2">
+            <span className="i-ph:code text-purple-500 w-4 h-4" />
+            <span className={compact ? 'text-xs' : 'text-sm'}>Languages:</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {Object.entries(languages)
+              .sort(([, a], [, b]) => b - a)
+              .slice(0, compact ? 3 : 5)
+              .map(([lang, size]) => (
+                <Badge key={lang} variant="subtle" size={compact ? 'sm' : 'md'}>
+                  {lang} ({formatSize(size)})
+                </Badge>
+              ))}
+            {Object.keys(languages).length > (compact ? 3 : 5) && (
+              <Badge variant="subtle" size={compact ? 'sm' : 'md'}>
+                +{Object.keys(languages).length - (compact ? 3 : 5)} more
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+
+      {(hasPackageJson || hasDependencies) && (
+        <div className={compact ? 'pt-1' : 'pt-2'}>
+          <div className="flex flex-wrap gap-2">
+            {hasPackageJson && (
+              <Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:package w-3.5 h-3.5">
+                package.json
+              </Badge>
+            )}
+            {hasDependencies && (
+              <Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:tree-structure w-3.5 h-3.5">
+                Dependencies
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

tools/bolt.diy/app/components/ui/ScrollArea.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { classNames } from '~/utils/classNames';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={classNames('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={classNames(
+      'flex touch-none select-none transition-colors',
+      {
+        'h-full w-2.5 border-l border-l-transparent p-[1px]': orientation === 'vertical',
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]': orientation === 'horizontal',
+      },
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-bolt-elements-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

tools/bolt.diy/app/components/ui/SearchInput.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Input } from './Input';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Function to call when the clear button is clicked */
+  onClear?: () => void;
+
+  /** Whether to show the clear button when there is input */
+  showClearButton?: boolean;
+
+  /** Additional class name for the search icon */
+  iconClassName?: string;
+
+  /** Additional class name for the container */
+  containerClassName?: string;
+
+  /** Whether the search is loading */
+  loading?: boolean;
+}
+
+/**
+ * SearchInput component
+ *
+ * A search input field with a search icon and optional clear button.
+ */
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    { className, onClear, showClearButton = true, iconClassName, containerClassName, loading = false, ...props },
+    ref,
+  ) => {
+    const hasValue = Boolean(props.value);
+
+    return (
+      <div className={classNames('relative flex items-center w-full', containerClassName)}>
+        {/* Search icon or loading spinner */}
+        <div
+          className={classNames(
+            'absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary',
+            iconClassName,
+          )}
+        >
+          {loading ? (
+            <span className="i-ph:spinner-gap animate-spin w-4 h-4" />
+          ) : (
+            <span className="i-ph:magnifying-glass w-4 h-4" />
+          )}
+        </div>
+
+        {/* Input field */}
+        <Input
+          ref={ref}
+          className={classNames('pl-10', hasValue && showClearButton ? 'pr-10' : '', className)}
+          {...props}
+        />
+
+        {/* Clear button */}
+        <AnimatePresence>
+          {hasValue && showClearButton && (
+            <motion.button
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              transition={{ duration: 0.15 }}
+              type="button"
+              onClick={onClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary p-1 rounded-full hover:bg-bolt-elements-background-depth-2"
+              aria-label="Clear search"
+            >
+              <span className="i-ph:x w-3.5 h-3.5" />
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = 'SearchInput';