Reset front directory to match origin/main

sparkle/src/_index.ts

@@ -103,32 +103,40 @@ export {
 
 import {
   Ai21 as Ai21Logo,
+  Anthropic as AnthropicLogo,
   Claude as ClaudeLogo,
   Cohere as CohereLogo,
   Drive as DriveLogo,
   Github as GithubLogo,
+  GithubWhite as GithubWhiteLogo,
   Google as GoogleLogo,
   Gpt3 as Gpt3Logo,
   Gpt4 as Gpt4Logo,
   HuggingFace as HuggingFaceLogo,
   Microsoft as MicrosoftLogo,
+  Mistral as MistralLogo,
   Notion as NotionLogo,
+  Openai as OpenaiLogo,
   Replicate as ReplicateLogo,
   Slack as SlackLogo,
 } from "./logo/platforms";
 
 export {
   Ai21Logo,
+  AnthropicLogo,
   ClaudeLogo,
   CohereLogo,
   DriveLogo,
   GithubLogo,
+  GithubWhiteLogo,
   GoogleLogo,
   Gpt3Logo,
   Gpt4Logo,
   HuggingFaceLogo,
   MicrosoftLogo,
+  MistralLogo,
   NotionLogo,
+  OpenaiLogo,
   ReplicateLogo,
   SlackLogo,
 };

sparkle/src/components/Button.tsx

@@ -23,7 +23,7 @@ export type ButtonProps = {
     | "avatar";
 
   type?: "button" | "menu" | "select";
-  size?: "xs" | "sm" | "md";
+  size?: "xs" | "sm" | "md" | "lg";
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
   hasMagnifying?: boolean;
@@ -39,24 +39,28 @@ const textClasses = {
   xs: "s-text-xs s-font-semibold",
   sm: "s-text-sm s-font-semibold",
   md: "s-text-base s-font-bold",
+  lg: "s-text-lg s-font-bold",
 };
 
 const sizeClasses = {
   xs: "s-gap-x-1 s-px-3 s-py-1.5",
   sm: "s-gap-x-1 s-px-4 s-py-2",
   md: "s-gap-x-1.5 s-px-5 s-py-3",
+  lg: "s-gap-x-3 s-px-6 s-py-4",
 };
 
 const sizeAvatarClasses = {
   xs: "s-gap-x-1 s-pl-0.5 s-pr-3 s-py-0.5",
   sm: "s-gap-x-1 s-pl-0.5 s-pr-4 s-py-0.5",
   md: "s-gap-x-1.5 s-pl-1 s-pr-5 s-py-1",
+  lg: "s-gap-x-2 s-pl-0 s-pr-6 s-py-0",
 };
 
 const containerClasses = {
   xs: "s-px-0.5",
   sm: "s-px-1",
   md: "s-px-1",
+  lg: "s-px-1",
 };
 
 const variantClasses = {
@@ -92,7 +96,7 @@ const variantClasses = {
     active: "active:s-bg-action-100 active:s-border-action-500",
     disabled: "s-text-action-300 s-border-structure-200 s-bg-structure-0",
     dark: {
-      base: "dark:s-text-action-600-dark dark:s-border-structure-200-dark dark:s-bg-structure-50-dark",
+      base: "dark:s-text-action-600-dark dark:s-border-structure-200-dark dark:s-bg-structure-100-dark",
       hover:
         "dark:hover:s-text-action-700-dark dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
       active:
@@ -107,7 +111,7 @@ const variantClasses = {
     active: "active:s-bg-warning-100 active:s-border-warning-500",
     disabled: "s-text-warning-300 s-border-structure-200 s-bg-structure-0",
     dark: {
-      base: "dark:s-text-warning-600-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
+      base: "dark:s-text-warning-600-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
       hover:
         "dark:hover:s-bg-warning-50-dark dark:hover:s-border-warning-300-dark",
       active:
@@ -124,7 +128,7 @@ const variantClasses = {
       "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
     disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
     dark: {
-      base: "dark:s-text-element-800-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
+      base: "dark:s-text-element-800-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
       hover:
         "dark:hover:s-text-action-300 dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
       active:
@@ -141,7 +145,7 @@ const variantClasses = {
       "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
     disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
     dark: {
-      base: "dark:s-text-element-700-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
+      base: "dark:s-text-element-700-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
       hover:
         "dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
       active:

sparkle/src/components/PriceTable.tsx

@@ -9,86 +9,114 @@ interface PriceTableProps {
   title: string;
   price: string;
   priceLabel?: string;
-  color?: "pink" | "sky" | "emerald";
+  color?: "pink" | "sky" | "emerald" | "amber" | "blue";
+  size?: "xs" | "sm";
   className?: string;
   children: ReactNode;
+  magnified?: boolean;
 }
 
 const colorTable = {
-  pink: "s-bg-pink-400",
-  sky: "s-bg-sky-400",
-  emerald: "s-bg-emerald-400",
+  pink: "s-bg-pink-400 dark:s-bg-pink-500",
+  amber: "s-bg-amber-400 dark:s-bg-amber-500",
+  sky: "s-bg-sky-400 dark:s-bg-sky-500",
+  blue: "s-bg-blue-400 dark:s-bg-blue-500",
+  emerald: "s-bg-emerald-400 dark:s-bg-emerald-500",
 };
 
 const textColorTable = {
-  pink: "s-text-pink-900",
-  sky: "s-text-sky-900",
-  emerald: "s-text-emerald-900",
+  pink: "s-text-pink-900 dark:s-text-pink-950",
+  amber: "s-text-amber-900 dark:s-text-amber-950",
+  sky: "s-text-sky-900 dark:s-text-sky-950",
+  blue: "s-text-blue-900 dark:s-text-blue-950",
+  emerald: "s-text-emerald-900 dark:s-text-emerald-950",
+};
+
+const sizeTable = {
+  sm: "s-rounded-2xl s-p-1.5 s-shadow-2xl",
+  xs: "s-rounded-xl s-p-1 s-shadow-xl",
 };
 
 export function PriceTable({
   title,
   price,
   color = "pink",
+  size = "xs",
   priceLabel = "",
   className = "",
+  magnified = true,
   children, // Use children instead of tableItems
 }: PriceTableProps) {
+  // Pass size prop to all PriceTable.Item children
+  const childrenWithProps = React.Children.map(children, (child) => {
+    // Checking isValidElement is the safe way and avoids a typescript error too
+    if (React.isValidElement<PriceTableItemProps>(child)) {
+      if (
+        child.type === PriceTable.Item ||
+        child.type === PriceTable.ActionContainer
+      ) {
+        return React.cloneElement(child, { size: size });
+      }
+    }
+    return child;
+  });
+
   return (
     <div
       className={classNames(
-<<<<<<< HEAD
         "s-w-full",
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
->>>>>>> 8fa7eac1 (New alpha Sparkle)
         "s-flex s-cursor-default s-flex-col s-border s-border-white/30",
         sizeTable[size],
         magnified
           ? "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100"
           : "",
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-        "s-flex s-cursor-default s-flex-col s-rounded-xl s-p-1 s-shadow-xl",
-        "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100",
->>>>>>> df0d8fa8 (wip)
-=======
-        "s-w-72",
-        "s-flex s-cursor-default s-flex-col s-rounded-xl s-p-1 s-shadow-xl",
-        "s-duration-400 s-scale-95 s-transition-all s-ease-out hover:s-scale-100",
->>>>>>> 43f5b1df (Reset changes in sparkle for separate PR)
         colorTable[color],
-=======
-        size === "xs" ? colorTable[color] : bigColorTable[color],
->>>>>>> 8fa7eac1 (New alpha Sparkle)
-=======
-        colorTable[color],
->>>>>>> 6793f0f1 (New alpha Sparkle)
         className
       )}
     >
-      <div className="s-flex s-flex-col s-px-3 s-py-2">
-        <div className="s-w-full s-text-right s-text-2xl s-font-semibold s-text-white">
+      <div
+        className={classNames(
+          "s-flex s-flex-col",
+          size === "xs" ? "s-px-3 s-py-2" : "s-px-4 s-py-3"
+        )}
+      >
+        <div
+          className={classNames(
+            size === "xs" ? "s-text-2xl" : "s-text-3xl",
+            "s-w-full s-text-right s-font-semibold",
+            "s-text-structure-0"
+          )}
+        >
           {title}
         </div>
         <div className="-s-mt-2 s-flex s-flex-row s-items-baseline s-gap-2">
           <span
             className={classNames(
+              size === "xs" ? "s-text-3xl" : "s-text-4xl",
               textColorTable[color],
-              "s-text-3xl s-font-bold"
+              "s-font-bold"
             )}
           >
             {price}
           </span>
-          <span className="s-text-base s-font-bold s-text-white/70">
+          <span
+            className={classNames(
+              "s-font-bold s-text-white/70",
+              size === "xs" ? "s-text-base" : "s-text-lg"
+            )}
+          >
             {priceLabel}
           </span>
         </div>
       </div>
-      <div className="s-flex s-h-full s-flex-col s-overflow-hidden s-rounded-lg s-bg-white s-shadow-md">
-        {children}
+      <div
+        className={classNames(
+          size === "xs" ? "s-rounded-lg" : "s-rounded-xl",
+          "s-flex s-h-full s-flex-col s-overflow-hidden s-shadow-md",
+          "s-bg-white dark:s-bg-structure-100-dark"
+        )}
+      >
+        {childrenWithProps}
       </div>
     </div>
   );
@@ -108,33 +136,42 @@ const iconColorTable = {
 
 interface PriceTableItemProps {
   label: string;
+  size?: "xs" | "sm";
   variant?: "check" | "dash" | "xmark";
   className?: string;
 }
 
 PriceTable.Item = function ({
   label,
   variant = "check",
+  size = "xs",
   className = "",
 }: PriceTableItemProps) {
   return (
     <div
       className={classNames(
-        "s-flex s-items-center s-gap-1.5 s-border-b s-border-structure-100 s-px-2 s-py-2.5 s-text-sm s-text-element-800 ",
+        size === "xs"
+          ? " s-gap-2 s-p-2.5 s-text-sm"
+          : "s-gap-3 s-p-4 s-text-base",
+        "s-flex s-items-start s-border-b",
+        "s-border-structure-100 s-text-element-800",
+        "dark:s-border-structure-200-dark/50 dark:s-text-element-800-dark",
         className
       )}
     >
-      <div>
+      <div className="s-pt-0.5">
         <Icon
-          size="xs"
+          size={size}
           visual={iconTable[variant]}
           className={iconColorTable[variant]}
         />
       </div>
       <div
         className={classNames(
-          variant === "xmark" ? "s-text-element-600" : "",
-          "s-overflow-hidden s-overflow-ellipsis s-whitespace-nowrap"
+          variant === "xmark"
+            ? "s-text-element-600 dark:s-text-element-600-dark"
+            : "",
+          "s-overflow-hidden"
         )}
       >
         {label}
@@ -145,13 +182,20 @@ PriceTable.Item = function ({
 
 interface PriceTableActionContainerProps {
   children: ReactNode;
+  size?: "xs" | "sm";
 }
 
 PriceTable.ActionContainer = function ({
   children,
+  size = "xs",
 }: PriceTableActionContainerProps) {
   return (
-    <div className="s-flex s-w-full s-flex-grow s-justify-center s-p-2">
+    <div
+      className={classNames(
+        "s-flex s-w-full s-flex-grow s-justify-center s-px-2",
+        size === "xs" ? "s-py-2" : "s-py-4"
+      )}
+    >
       <div className="s-flex s-h-full s-flex-col s-justify-end">{children}</div>
     </div>
   );
@@ -162,5 +206,7 @@ interface PriceTableContainerProps {
 }
 
 PriceTable.Container = function ({ children }: PriceTableContainerProps) {
-  return <div className="s-flex s-w-full s-gap-3">{children}</div>;
+  return (
+    <div className="s-flex s-w-full s-items-stretch  s-gap-3">{children}</div>
+  );
 };

sparkle/src/logo/platforms/Anthropic.tsx

@@ -11,15 +11,7 @@ const SvgAnthropic = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="#000"
-<<<<<<< HEAD
-<<<<<<< HEAD
       d="M16.867 4H13.5l6.132 15.53H23L16.867 4ZM7.133 4 1 19.53h3.438l1.237-3.262h6.435l1.251 3.261H16.8L10.653 4h-3.52Zm-.33 9.382 2.09-5.46 2.104 5.46H6.802Z"
-=======
-      d="M15.364 6H12.74l4.779 12h2.625L15.364 6ZM7.78 6 3 18h2.679l.964-2.52h5.014l.975 2.52h2.679L10.52 6H7.78Zm-.258 7.25L9.15 9.03l1.64 4.22H7.52Z"
->>>>>>> 53f4a4bc (wip)
-=======
-      d="M16.867 4H13.5l6.132 15.53H23L16.867 4ZM7.133 4 1 19.53h3.438l1.237-3.262h6.435l1.251 3.261H16.8L10.653 4h-3.52Zm-.33 9.382 2.09-5.46 2.104 5.46H6.802Z"
->>>>>>> 24017352 (wip)
     />
   </svg>
 );

sparkle/src/logo/platforms/GithubWhite.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgGithubWhite = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M12 2C6.475 2 2 6.503 2 12.063c0 4.453 2.862 8.214 6.838 9.547.5.088.687-.213.687-.478 0-.239-.013-1.031-.013-1.874-2.512.466-3.162-.616-3.362-1.182-.113-.29-.6-1.183-1.025-1.422-.35-.188-.85-.654-.013-.666.788-.013 1.35.73 1.538 1.031.9 1.522 2.338 1.095 2.912.83.088-.654.35-1.094.638-1.346-2.225-.251-4.55-1.12-4.55-4.968 0-1.095.387-2 1.025-2.705-.1-.251-.45-1.283.1-2.666 0 0 .837-.265 2.75 1.031.8-.226 1.65-.34 2.5-.34.85 0 1.7.114 2.5.34 1.912-1.308 2.75-1.031 2.75-1.031.55 1.383.2 2.415.1 2.666.637.705 1.025 1.598 1.025 2.705 0 3.861-2.337 4.717-4.562 4.968.362.315.675.919.675 1.862 0 1.346-.013 2.428-.013 2.767 0 .265.188.579.688.478C19.137 20.277 22 16.503 22 12.063 22 6.503 17.525 2 12 2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgGithubWhite;