@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/components/ui/CardConnector.tsx

@@ -1,56 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export function CardConnector({
-  className,
-  direction,
-}: {
-  className?: string;
-  direction?: "horizontal" | "vertical";
-}) {
-  return (
-    <>
-      <div
-        className={cn(
-          "mt-[-3px] mb-[-3px] flex items-center justify-center",
-          className,
-          (!direction || direction === "horizontal") && "md:hidden",
-        )}
-      >
-        <svg
-          width="40"
-          height="31"
-          viewBox="0 0 40 31"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M40 3.04199C33.8405 3.55018 29 8.70936 29 15C29 21.2906 33.8405 26.4498 40 26.958L40 31L-1.35505e-06 31L-1.18021e-06 27C6.62741 27 12 21.6274 12 15C12 8.37258 6.62741 3 -1.31134e-07 3L0 -1.74846e-06L40 0L40 3.04199Z"
-            fill="white"
-          />
-        </svg>
-      </div>
-
-      <div
-        className={cn(
-          "mt-6 mr-[-3px] ml-[-3px] hidden",
-          className,
-          (!direction || direction === "horizontal") && "md:block",
-        )}
-      >
-        <svg
-          className={className}
-          width="31"
-          height="40"
-          viewBox="0 0 31 40"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.04199 0C3.55018 6.15949 8.70936 11 15 11C21.2906 11 26.4498 6.1595 26.958 0H31V40H27C27 33.3726 21.6274 28 15 28C8.37258 28 3 33.3726 3 40H0V0H3.04199Z"
-            fill="white"
-          />
-        </svg>
-      </div>
-    </>
-  );
-}

package/src/components/ui/button.tsx

@@ -1,62 +0,0 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-theme-secondary text-primary-foreground shadow-xs hover:bg-theme-secondary/80",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-8 px-7 py-5 has-[>svg]:px-3 md:text-sm text-xs",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(
-        "cursor-pointer",
-        buttonVariants({ variant, size, className }),
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -1,372 +0,0 @@
-import { cn } from "../../lib/utils";
-import { useState, useEffect } from "react";
-import { Expand, Shrink } from "lucide-react";
-
-/**
- * A reusable card component with header (icon, title, description) and content area.
- * Originally created for the page wizard but now available as a generic UI component.
- */
-export function Card({
-  children,
-  icon,
-  title,
-  description,
-  className,
-  noPadding,
-  collapsible = "no",
-  defaultCollapsed = "no",
-  summary,
-  footer,
-  showFullscreenButton = false,
-  onFullscreen,
-}: {
-  children: React.ReactNode;
-  icon: React.ReactNode;
-  title: string;
-  description: string;
-  className?: string;
-  noPadding?: boolean;
-  collapsible?: "yes" | "no" | "mobileOnly";
-  defaultCollapsed?: "yes" | "no" | "mobileOnly";
-  summary?: React.ReactNode;
-  footer?: React.ReactNode;
-  showFullscreenButton?: boolean;
-  onFullscreen?: () => void;
-}) {
-  const [isExpanded, setIsExpanded] = useState(() => {
-    if (defaultCollapsed === "yes") return false; // Starts collapsed
-    if (defaultCollapsed === "no") return true; // Starts expanded
-    if (defaultCollapsed === "mobileOnly") return false; // Starts collapsed on mobile, but we'll handle desktop separately
-    return true; // Default
-  });
-
-  const [isFullscreen, setIsFullscreen] = useState(false);
-
-  const isCollapsibleEnabled = collapsible !== "no";
-
-  // Prevent body scroll when fullscreen is active
-  useEffect(() => {
-    if (isFullscreen) {
-      document.body.style.overflow = "hidden";
-      return () => {
-        document.body.style.overflow = "";
-      };
-    }
-  }, [isFullscreen]);
-
-  // Check if collapsible behavior should be active (considering mobile-only options)
-  const isCollapsibleActive = () => {
-    if (collapsible === "no") return false;
-    if (collapsible === "mobileOnly") {
-      // Only collapsible on mobile - we'll handle this with CSS classes
-      return true;
-    }
-    return true; // For "yes"
-  };
-
-  // Determine what content to show based on collapsible state
-  const getContentToShow = () => {
-    if (!isCollapsibleEnabled) return children;
-
-    return isExpanded ? children : summary;
-  };
-
-  const shouldShowContent = () => {
-    if (!isCollapsibleEnabled) return true;
-
-    // Always show content area if we have either main content or summary
-    if (!isExpanded && summary) return true;
-    if (isExpanded) return true;
-
-    return false;
-  };
-
-  const toggleExpanded = () => {
-    if (isCollapsibleActive()) {
-      setIsExpanded(!isExpanded);
-    }
-  };
-
-  const handleFullscreen = () => {
-    setIsFullscreen(true);
-    onFullscreen?.();
-  };
-
-  const handleExitFullscreen = () => {
-    setIsFullscreen(false);
-  };
-
-  return (
-    <>
-      {/* Blurred background overlay - only visible in fullscreen */}
-      {isFullscreen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm md:hidden"
-          onClick={handleExitFullscreen}
-        />
-      )}
-
-      <div
-        className={cn(
-          "flex flex-col rounded-lg bg-white transition-all duration-300 ease-in-out",
-          className,
-          isFullscreen && [
-            // Fullscreen styles - only on mobile
-            "fixed inset-0 z-50 mx-0 mt-[30px] h-[calc(100vh-60px)] shadow-xl md:relative md:inset-auto md:mx-auto md:mt-0 md:h-auto md:shadow-none",
-          ],
-        )}
-      >
-        <div
-          className={cn(
-            "flex flex-col justify-between gap-1 p-4 pb-2 md:p-6 md:pb-4",
-            isCollapsibleEnabled && "cursor-pointer",
-          )}
-          onClick={isCollapsibleEnabled ? toggleExpanded : undefined}
-        >
-          <div className="flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <div className="text-theme-secondary flex h-4 w-4 items-center justify-center rounded-full">
-                {icon}
-              </div>
-              <div className="text-base font-bold text-neutral-800">
-                {title}
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              {/* Fullscreen button - only on mobile */}
-              {showFullscreenButton && (
-                <button
-                  onClick={handleFullscreen}
-                  className={cn(
-                    "flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden",
-                    isFullscreen && "hidden",
-                  )}
-                  aria-label="Open fullscreen"
-                >
-                  <Expand className="h-4 w-4" />
-                </button>
-              )}
-
-              {/* Exit fullscreen button - only visible in fullscreen */}
-              {showFullscreenButton && isFullscreen && (
-                <button
-                  onClick={handleExitFullscreen}
-                  className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
-                  aria-label="Exit fullscreen"
-                >
-                  <Shrink className="h-4 w-4" />
-                </button>
-              )}
-
-              {/* Show toggle in header when no summary is provided */}
-              {isCollapsibleEnabled && !summary && (
-                <>
-                  {collapsible === "yes" && (
-                    <button
-                      onClick={toggleExpanded}
-                      className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
-                      aria-label={isExpanded ? "Collapse" : "Expand"}
-                    >
-                      <svg
-                        className={cn(
-                          "h-4 w-4 transition-transform duration-200",
-                          isExpanded ? "rotate-180" : "rotate-0",
-                        )}
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 9l-7 7-7-7"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                  {collapsible === "mobileOnly" && (
-                    <button
-                      onClick={toggleExpanded}
-                      className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
-                      aria-label={isExpanded ? "Collapse" : "Expand"}
-                    >
-                      <svg
-                        className={cn(
-                          "h-4 w-4 transition-transform duration-200",
-                          isExpanded ? "rotate-180" : "rotate-0",
-                        )}
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 9l-7 7-7-7"
-                        />
-                      </svg>
-                    </button>
-                  )}
-                </>
-              )}
-            </div>
-          </div>
-          <div className="mb-1 text-xs text-neutral-500">{description}</div>
-        </div>
-
-        {shouldShowContent() && (
-          <div
-            className={cn(
-              "flex-1 transition-all duration-300 ease-in-out",
-              noPadding ? "" : "p-4 pt-0 md:p-6 md:pt-0",
-              isFullscreen && "overflow-hidden",
-              // Handle responsive behavior for mobile-only collapsible options
-              collapsible === "mobileOnly" &&
-                !isExpanded &&
-                summary &&
-                "block md:hidden",
-              collapsible === "mobileOnly" && isExpanded && "block",
-              className,
-            )}
-          >
-            {!isExpanded && summary && isCollapsibleEnabled ? (
-              <div className="flex items-start justify-between gap-2">
-                <div className="flex-1 cursor-pointer" onClick={toggleExpanded}>
-                  {summary}
-                </div>
-                {/* Show toggle button next to summary when summary exists */}
-                {collapsible === "yes" && (
-                  <button
-                    onClick={toggleExpanded}
-                    className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
-                    aria-label="Expand"
-                  >
-                    <svg
-                      className="h-4 w-4 rotate-0 transition-transform duration-200"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                )}
-                {collapsible === "mobileOnly" && (
-                  <button
-                    onClick={toggleExpanded}
-                    className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
-                    aria-label="Expand"
-                  >
-                    <svg
-                      className="h-4 w-4 rotate-0 transition-transform duration-200"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 9l-7 7-7-7"
-                      />
-                    </svg>
-                  </button>
-                )}
-              </div>
-            ) : (
-              <>
-                {isExpanded && isCollapsibleEnabled && summary ? (
-                  <>
-                    {/* Show summary with toggle button */}
-                    <div className="mb-4 flex items-start justify-between gap-2">
-                      <div
-                        className="flex-1 cursor-pointer"
-                        onClick={toggleExpanded}
-                      >
-                        {summary}
-                      </div>
-                      {/* Show toggle button next to summary */}
-                      {collapsible === "yes" && (
-                        <button
-                          onClick={toggleExpanded}
-                          className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700"
-                          aria-label="Collapse"
-                        >
-                          <svg
-                            className="h-4 w-4 rotate-180 transition-transform duration-200"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M19 9l-7 7-7-7"
-                            />
-                          </svg>
-                        </button>
-                      )}
-                      {collapsible === "mobileOnly" && (
-                        <button
-                          onClick={toggleExpanded}
-                          className="flex-shrink-0 text-neutral-500 transition-colors duration-200 hover:text-neutral-700 md:hidden"
-                          aria-label="Collapse"
-                        >
-                          <svg
-                            className="h-4 w-4 rotate-180 transition-transform duration-200"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                              d="M19 9l-7 7-7-7"
-                            />
-                          </svg>
-                        </button>
-                      )}
-                    </div>
-                    {/* Show full content below summary */}
-                    <div>{children}</div>
-                  </>
-                ) : (
-                  getContentToShow()
-                )}
-              </>
-            )}
-          </div>
-        )}
-
-        {/* Show full content on desktop when using mobile-only collapsible options */}
-        {collapsible === "mobileOnly" && (
-          <div
-            className={cn(
-              "hidden flex-1 transition-all duration-300 ease-in-out md:block",
-              noPadding ? "" : "p-4 pt-0 md:p-6",
-              className,
-            )}
-          >
-            {children}
-          </div>
-        )}
-
-        {/* Footer - always displayed regardless of collapsed state */}
-        {footer && (
-          <div className="border-t border-gray-100 p-4 pt-0 md:p-6 md:pt-0">
-            {footer}
-          </div>
-        )}
-      </div>
-    </>
-  );
-}