crca 1.4.0__py3-none-any.whl

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { Badge } from './Badge';
+
+interface SearchResultItemProps {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  icon?: string;
+  iconBackground?: string;
+  iconColor?: string;
+  tags?: string[];
+  metadata?: Array<{
+    icon?: string;
+    label: string;
+    value?: string | number;
+  }>;
+  actionLabel?: string;
+  onAction?: () => void;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function SearchResultItem({
+  title,
+  subtitle,
+  description,
+  icon,
+  iconBackground = 'bg-bolt-elements-background-depth-1/80 dark:bg-bolt-elements-background-depth-4/80',
+  iconColor = 'text-purple-500',
+  tags,
+  metadata,
+  actionLabel,
+  onAction,
+  onClick,
+  className,
+}: SearchResultItemProps) {
+  return (
+    <motion.div
+      className={classNames(
+        'p-5 rounded-xl border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-3/50',
+        onClick ? 'cursor-pointer' : '',
+        className,
+      )}
+      whileHover={{
+        scale: 1.01,
+        y: -1,
+        transition: { type: 'spring', stiffness: 400, damping: 17 },
+      }}
+      whileTap={{ scale: 0.99 }}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      onClick={onClick}
+    >
+      <div className="flex items-start justify-between mb-3 gap-3">
+        <div className="flex items-start gap-3">
+          {icon && (
+            <div
+              className={classNames(
+                'w-10 h-10 rounded-xl backdrop-blur-sm flex items-center justify-center shadow-sm',
+                iconBackground,
+              )}
+            >
+              <span className={classNames(icon, 'w-5 h-5', iconColor)} />
+            </div>
+          )}
+          <div>
+            <h3 className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark text-base">
+              {title}
+            </h3>
+            {subtitle && (
+              <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark flex items-center gap-1">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {actionLabel && onAction && (
+          <motion.button
+            onClick={(e) => {
+              e.stopPropagation();
+              onAction();
+            }}
+            className="px-4 py-2 h-9 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[100px] justify-center text-sm shadow-sm hover:shadow-md"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {actionLabel}
+          </motion.button>
+        )}
+      </div>
+
+      {description && (
+        <div className="mb-4 bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm p-3 rounded-lg border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
+          <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
+            {description}
+          </p>
+        </div>
+      )}
+
+      {tags && tags.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 mb-3">
+          {tags.map((tag) => (
+            <Badge key={tag} variant="subtle" size="sm">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {metadata && metadata.length > 0 && (
+        <div className="flex flex-wrap items-center gap-3 text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+          {metadata.map((item, index) => (
+            <div key={index} className="flex items-center gap-1">
+              {item.icon && <span className={classNames(item.icon, 'w-3.5 h-3.5')} />}
+              <span>
+                {item.label}
+                {item.value !== undefined && ': '}
+                {item.value !== undefined && (
+                  <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                    {item.value}
+                  </span>
+                )}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,22 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { classNames } from '~/utils/classNames';
+
+interface SeparatorProps {
+  className?: string;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Separator = ({ className, orientation = 'horizontal' }: SeparatorProps) => {
+  return (
+    <SeparatorPrimitive.Root
+      className={classNames(
+        'bg-bolt-elements-borderColor',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className,
+      )}
+      orientation={orientation}
+    />
+  );
+};
+
+export default Separator;

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

@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import { IconButton } from '~/components/ui/IconButton';
+interface SettingsButtonProps {
+  onClick: () => void;
+}
+
+export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      icon="i-ph:gear"
+      size="xl"
+      title="Settings"
+      data-testid="settings-button"
+      className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
+    />
+  );
+});
+
+interface HelpButtonProps {
+  onClick: () => void;
+}
+
+export const HelpButton = memo(({ onClick }: HelpButtonProps) => {
+  return (
+    <IconButton
+      onClick={onClick}
+      icon="i-ph:question"
+      size="xl"
+      title="Help & Documentation"
+      data-testid="help-button"
+      className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
+    />
+  );
+});

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

@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import { memo } from 'react';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+import { genericMemo } from '~/utils/react';
+
+export type SliderOptions<T> = {
+  left: { value: T; text: string };
+  middle?: { value: T; text: string };
+  right: { value: T; text: string };
+};
+
+interface SliderProps<T> {
+  selected: T;
+  options: SliderOptions<T>;
+  setSelected?: (selected: T) => void;
+}
+
+export const Slider = genericMemo(<T,>({ selected, options, setSelected }: SliderProps<T>) => {
+  const hasMiddle = !!options.middle;
+  const isLeftSelected = hasMiddle ? selected === options.left.value : selected === options.left.value;
+  const isMiddleSelected = hasMiddle && options.middle ? selected === options.middle.value : false;
+
+  return (
+    <div className="flex items-center flex-wrap shrink-0 gap-1 bg-bolt-elements-background-depth-1 overflow-hidden rounded-full p-1">
+      <SliderButton selected={isLeftSelected} setSelected={() => setSelected?.(options.left.value)}>
+        {options.left.text}
+      </SliderButton>
+
+      {options.middle && (
+        <SliderButton selected={isMiddleSelected} setSelected={() => setSelected?.(options.middle!.value)}>
+          {options.middle.text}
+        </SliderButton>
+      )}
+
+      <SliderButton
+        selected={!isLeftSelected && !isMiddleSelected}
+        setSelected={() => setSelected?.(options.right.value)}
+      >
+        {options.right.text}
+      </SliderButton>
+    </div>
+  );
+});
+
+interface SliderButtonProps {
+  selected: boolean;
+  children: string | JSX.Element | Array<JSX.Element | string>;
+  setSelected: () => void;
+}
+
+const SliderButton = memo(({ selected, children, setSelected }: SliderButtonProps) => {
+  return (
+    <button
+      onClick={setSelected}
+      className={classNames(
+        'bg-transparent text-sm px-2.5 py-0.5 rounded-full relative',
+        selected
+          ? 'text-bolt-elements-item-contentAccent'
+          : 'text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive',
+      )}
+    >
+      <span className="relative z-10">{children}</span>
+      {selected && (
+        <motion.span
+          layoutId="pill-tab"
+          transition={{ duration: 0.2, ease: cubicEasingFn }}
+          className="absolute inset-0 z-0 bg-bolt-elements-item-backgroundAccent rounded-full"
+        ></motion.span>
+      )}
+    </button>
+  );
+});

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

@@ -0,0 +1,90 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+
+// Status types supported by the component
+type StatusType = 'online' | 'offline' | 'away' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'loading';
+
+// Size types for the indicator
+type SizeType = 'sm' | 'md' | 'lg';
+
+// Status color mapping
+const STATUS_COLORS: Record<StatusType, string> = {
+  online: 'bg-green-500',
+  success: 'bg-green-500',
+  offline: 'bg-red-500',
+  error: 'bg-red-500',
+  away: 'bg-yellow-500',
+  warning: 'bg-yellow-500',
+  busy: 'bg-red-500',
+  info: 'bg-blue-500',
+  loading: 'bg-purple-500',
+};
+
+// Size class mapping
+const SIZE_CLASSES: Record<SizeType, string> = {
+  sm: 'w-2 h-2',
+  md: 'w-3 h-3',
+  lg: 'w-4 h-4',
+};
+
+// Text size mapping based on indicator size
+const TEXT_SIZE_CLASSES: Record<SizeType, string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+interface StatusIndicatorProps {
+  /** The status to display */
+  status: StatusType;
+
+  /** Size of the indicator */
+  size?: SizeType;
+
+  /** Whether to show a pulsing animation */
+  pulse?: boolean;
+
+  /** Optional label text */
+  label?: string;
+
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * StatusIndicator component
+ *
+ * A component for displaying status indicators with optional labels and pulse animations.
+ */
+export function StatusIndicator({ status, size = 'md', pulse = false, label, className }: StatusIndicatorProps) {
+  // Get the color class for the status
+  const colorClass = STATUS_COLORS[status] || 'bg-gray-500';
+
+  // Get the size class for the indicator
+  const sizeClass = SIZE_CLASSES[size];
+
+  // Get the text size class for the label
+  const textSizeClass = TEXT_SIZE_CLASSES[size];
+
+  return (
+    <div className={classNames('flex items-center gap-2', className)}>
+      {/* Status indicator dot */}
+      <span className={classNames('rounded-full relative', colorClass, sizeClass)}>
+        {/* Pulse animation */}
+        {pulse && <span className={classNames('absolute inset-0 rounded-full animate-ping opacity-75', colorClass)} />}
+      </span>
+
+      {/* Optional label */}
+      {label && (
+        <span
+          className={classNames(
+            'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
+            textSizeClass,
+          )}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { memo } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { classNames } from '~/utils/classNames';
+
+interface SwitchProps {
+  className?: string;
+  checked?: boolean;
+  onCheckedChange?: (event: boolean) => void;
+}
+
+export const Switch = memo(({ className, onCheckedChange, checked }: SwitchProps) => {
+  return (
+    <SwitchPrimitive.Root
+      className={classNames(
+        'relative h-6 w-11 cursor-pointer rounded-full bg-bolt-elements-button-primary-background',
+        'transition-colors duration-200 ease-in-out',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-bolt-elements-item-contentAccent',
+        className,
+      )}
+      checked={checked}
+      onCheckedChange={(e) => onCheckedChange?.(e)}
+    >
+      <SwitchPrimitive.Thumb
+        className={classNames(
+          'block h-5 w-5 rounded-full bg-white',
+          'shadow-lg shadow-black/20',
+          'transition-transform duration-200 ease-in-out',
+          'translate-x-0.5',
+          'data-[state=checked]:translate-x-[1.375rem]',
+          'will-change-transform',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+});

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { classNames } from '~/utils/classNames';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={classNames(
+      'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-3-dark p-1 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={classNames(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background dark:ring-offset-bolt-elements-background-dark transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background-depth-0 dark:data-[state=active]:bg-bolt-elements-background-depth-2-dark data-[state=active]:text-bolt-elements-textPrimary dark:data-[state=active]:text-bolt-elements-textPrimary-dark data-[state=active]:shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={classNames(
+      'mt-2 ring-offset-bolt-elements-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,112 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface Tab {
+  /** Unique identifier for the tab */
+  id: string;
+
+  /** Content to display in the tab */
+  label: React.ReactNode;
+
+  /** Optional icon to display before the label */
+  icon?: string;
+}
+
+interface TabsWithSliderProps {
+  /** Array of tab objects */
+  tabs: Tab[];
+
+  /** ID of the currently active tab */
+  activeTab: string;
+
+  /** Function called when a tab is clicked */
+  onChange: (tabId: string) => void;
+
+  /** Additional class name for the container */
+  className?: string;
+
+  /** Additional class name for inactive tabs */
+  tabClassName?: string;
+
+  /** Additional class name for the active tab */
+  activeTabClassName?: string;
+
+  /** Additional class name for the slider */
+  sliderClassName?: string;
+}
+
+/**
+ * TabsWithSlider component
+ *
+ * A tabs component with an animated slider that moves to the active tab.
+ */
+export function TabsWithSlider({
+  tabs,
+  activeTab,
+  onChange,
+  className,
+  tabClassName,
+  activeTabClassName,
+  sliderClassName,
+}: TabsWithSliderProps) {
+  // State for slider dimensions
+  const [sliderDimensions, setSliderDimensions] = useState({ width: 0, left: 0 });
+
+  // Refs for tab elements
+  const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Update slider position when active tab changes
+  useEffect(() => {
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeTab);
+
+    if (activeIndex !== -1 && tabsRef.current[activeIndex]) {
+      const activeTabElement = tabsRef.current[activeIndex];
+
+      if (activeTabElement) {
+        setSliderDimensions({
+          width: activeTabElement.offsetWidth,
+          left: activeTabElement.offsetLeft,
+        });
+      }
+    }
+  }, [activeTab, tabs]);
+
+  return (
+    <div className={classNames('relative flex gap-2', className)}>
+      {/* Tab buttons */}
+      {tabs.map((tab, index) => (
+        <button
+          key={tab.id}
+          ref={(el) => (tabsRef.current[index] = el)}
+          onClick={() => onChange(tab.id)}
+          className={classNames(
+            'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center relative overflow-hidden',
+            tab.id === activeTab
+              ? classNames('text-white shadow-sm shadow-purple-500/20', activeTabClassName)
+              : classNames(
+                  'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
+                  tabClassName,
+                ),
+          )}
+        >
+          <span className={classNames('flex items-center gap-2', tab.id === activeTab ? 'font-medium' : '')}>
+            {tab.icon && <span className={tab.icon} />}
+            {tab.label}
+          </span>
+        </button>
+      ))}
+
+      {/* Animated slider */}
+      <motion.div
+        className={classNames('absolute bottom-0 left-0 h-10 rounded-lg bg-purple-500 -z-10', sliderClassName)}
+        initial={false}
+        animate={{
+          width: sliderDimensions.width,
+          x: sliderDimensions.left,
+        }}
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useState } from 'react';
+import { themeStore, toggleTheme } from '~/lib/stores/theme';
+import { IconButton } from './IconButton';
+
+interface ThemeSwitchProps {
+  className?: string;
+}
+
+export const ThemeSwitch = memo(({ className }: ThemeSwitchProps) => {
+  const theme = useStore(themeStore);
+  const [domLoaded, setDomLoaded] = useState(false);
+
+  useEffect(() => {
+    setDomLoaded(true);
+  }, []);
+
+  return (
+    domLoaded && (
+      <IconButton
+        className={className}
+        icon={theme === 'dark' ? 'i-ph-sun-dim-duotone' : 'i-ph-moon-stars-duotone'}
+        size="xl"
+        title="Toggle Theme"
+        onClick={toggleTheme}
+      />
+    )
+  );
+});