@dust-tt/sparkle 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "scripts": {
     "build": "rollup -c"
   },

package/src/components/Button.tsx

@@ -1,20 +1,33 @@
-import React, { MouseEvent } from "react";
-
-import { classNames } from "../lib/utils";
+import React, { MouseEvent, ComponentType } from "react";
+import { classNames } from "@sparkle/lib/utils";
+import { Icon } from "./Icon";
 
 type ButtonProps = {
-  type?: "primary" | "secondary";
+  type?: "primary" | "secondary" | "tertiary";
   size?: "xs" | "sm" | "md";
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
   label: string;
+  icon?: ComponentType;
   className?: string;
 };
 
 const sizeClasses = {
-  xs: "px-2.5 py-1.5 text-xs font-medium rounded-md",
-  sm: "px-3 py-2 text-xs font-bold rounded-lg",
-  md: "px-4 py-3 text-sm font-bold rounded-xl",
+  xs: "gap-x-1 px-3 py-1.5 text-xs font-semibold",
+  sm: "gap-x-1 px-4 py-2 text-sm font-semibold",
+  md: "gap-x-1.5 px-5 py-3 text-sm font-bold",
+};
+
+const containerClasses = {
+  xs: "px-0.5",
+  sm: "px-1",
+  md: "px-1",
+};
+
+const iconSizeClasses = {
+  xs: "h-4 w-4",
+  sm: "h-5 w-5",
+  md: "h-5 w-5",
 };
 
 const typeClasses = {
@@ -30,11 +43,22 @@ const typeClasses = {
     },
   },
   secondary: {
-    base: "text-action-500 border-structure-200",
+    base: "text-action-500 border-structure-300 bg-structure-0",
     hover: "hover:bg-action-50 hover:border-action-300",
     active: "active:bg-action-100 active:border-action-500",
     dark: {
-      base: "dark:text-action-500-dark dark:border-structure-300-dark",
+      base: "dark:text-action-500-dark dark:border-structure-300-dark dark:bg-structure-50-dark",
+      hover: "dark:hover:bg-action-50-dark dark:hover:border-action-300-dark",
+      active:
+        "dark:active:bg-action-100-dark dark:active:border-action-500-dark",
+    },
+  },
+  tertiary: {
+    base: "text-element-700 border-structure-300 bg-structure-0",
+    hover: "hover:text-element-800 hover:bg-action-50 hover:border-action-300",
+    active: "active:bg-action-100 active:border-action-500",
+    dark: {
+      base: "dark:text-element-700-dark dark:border-structure-300-dark dark:bg-structure-50-dark",
       hover: "dark:hover:bg-action-50-dark dark:hover:border-action-300-dark",
       active:
         "dark:active:bg-action-100-dark dark:active:border-action-500-dark",
@@ -48,10 +72,11 @@ export function Button({
   onClick,
   disabled = false,
   label,
+  icon,
   className = "",
 }: ButtonProps) {
   const buttonClasses = classNames(
-    "inline-flex items-center border-2 transition-colors duration-200",
+    "inline-flex items-center border transition-all ease-out duration-400 box-border rounded-full scale-95 hover:scale-100 hover:drop-shadow-md active:scale-95 active:drop-shadow-none",
     sizeClasses[size],
     typeClasses[type]?.base,
     typeClasses[type]?.hover,
@@ -63,6 +88,9 @@ export function Button({
     className
   );
 
+  const iconClasses = classNames(iconSizeClasses[size]);
+  const finalContainerClasses = classNames(containerClasses[size]);
+
   return (
     <button
       type="button"
@@ -71,7 +99,8 @@ export function Button({
       disabled={disabled}
       aria-label={label}
     >
-      {label}
+      {icon && <Icon IconComponent={icon} className={iconClasses} />}
+      <div className={finalContainerClasses}>{label}</div>
     </button>
   );
 }

package/src/components/Tab.tsx

@@ -1,16 +1,17 @@
 import { ReactComponentLike } from "prop-types";
 import React, { MouseEvent } from "react";
 
+import { SparkleContext } from "@sparkle/context";
 import { classNames } from "@sparkle/lib/utils";
 
 type TabProps = {
   tabs: Array<{
     label: string;
     hideLabel?: boolean;
-    href: string;
     current: boolean;
     sizing?: "hug" | "expand";
     icon?: ReactComponentLike;
+    href?: string;
   }>;
   onTabClick?: (tabName: string, event: MouseEvent<HTMLAnchorElement>) => void;
   className?: string;
@@ -18,15 +19,15 @@ type TabProps = {
 
 const tabClasses = {
   default: {
-    base: "text-element-800 border-transparent",
-    hover: "hover:text-action-600",
+    base: "text-element-800 border-transparent cursor-pointer",
+    hover: "hover:text-action-500",
     dark: {
-      base: "dark:text-element-800-dark",
+      base: "dark:text-element-700-dark",
       hover: "dark:hover:text-action-600-dark",
     },
   },
   selected: {
-    base: "border-action-500 text-action-600 cursor-default",
+    base: "border-action-500 text-action-500 cursor-default",
     hover: "",
     dark: {
       base: "dark:border-action-500-dark dark:text-action-500-dark",
@@ -38,17 +39,17 @@ const tabClasses = {
 const iconClasses = {
   default: {
     base: "text-element-600",
-    hover: "group-hover:text-action-400 group-hover:text-action-400",
+    hover: "group-hover:text-action-400",
     dark: {
       base: "dark:text-element-600-dark",
-      hover: "dark:group-hover:text-action-400-dark",
+      hover: "dark:group-hover:text-action-500-dark",
     },
   },
   selected: {
-    base: "text-action-400",
+    base: "text-action-500",
     hover: "",
     dark: {
-      base: "dark:text-action-400-dark",
+      base: "dark:text-action-500-dark",
       hover: "",
     },
   },
@@ -60,6 +61,9 @@ const tabSizingClasses = {
 };
 
 export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
+  const { components } = React.useContext(SparkleContext);
+  const Link = components.link;
+
   const renderTabs = () =>
     tabs.map((tab) => {
       const tabStateClasses = tab.current
@@ -70,31 +74,43 @@ export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
         : iconClasses.default;
 
       const finalTabClasses = classNames(
-        "group justify-center flex gap-x-2 text-sm font-medium px-4 py-3 border-b-2 transition-colors duration-200 whitespace-nowrap",
+        "group justify-center flex text-sm font-semibold px-4 py-3 border-b-2 transition-colors duration-400 whitespace-nowrap select-none",
         tabStateClasses.base,
         tabStateClasses.hover,
+        tabStateClasses.dark.base,
+        tabStateClasses.dark.hover,
         tabSizingClasses[tab.sizing ?? "hug"],
         className
       );
 
       const finalIconClasses = classNames(
-        "h-5 w-5",
+        "h-5 w-5 transition-colors duration-400",
         iconStateClasses.base,
         iconStateClasses.hover,
+        iconStateClasses.dark.base,
+        iconStateClasses.dark.hover,
         className
       );
 
       return (
-        <a
+        <Link
           key={tab.label}
-          href={tab.href}
           className={finalTabClasses}
           aria-current={tab.current ? "page" : undefined}
           onClick={(event) => onTabClick?.(tab.label, event)}
+          href={tab.href}
         >
-          {tab.icon && <tab.icon className={finalIconClasses} />}
-          {tab.hideLabel ?? tab.label}
-        </a>
+          <div
+            className={
+              tab.current
+                ? "flex gap-x-2"
+                : "duration-400 flex scale-100 transform gap-x-2 transition-transform ease-out group-hover:scale-110"
+            }
+          >
+            {tab.icon && <tab.icon className={finalIconClasses} />}
+            {tab.hideLabel ?? tab.label}
+          </div>
+        </Link>
       );
     });
 

package/src/context.tsx

@@ -0,0 +1,22 @@
+import React, { ComponentType, MouseEvent, ReactNode } from "react";
+
+export type SparkleContextType = {
+  components: {
+    link: ComponentType<{
+      href?: string;
+      className?: string;
+      children: ReactNode;
+      onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    }>;
+  };
+};
+
+export const SparkleContext = React.createContext<SparkleContextType>({
+  components: {
+    link: ({ href, className, children }) => (
+      <a href={href} className={className}>
+        {children}
+      </a>
+    ),
+  },
+});

package/tailwind.config.js

@@ -14,16 +14,16 @@ module.exports = {
           dark: colors.emerald[500],
         },
         action: {
+          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
+          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
+          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
+          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
+          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
           500: { DEFAULT: colors.blue[500], dark: colors.blue[500] },
           400: { DEFAULT: colors.blue[400], dark: colors.blue[600] },
           200: { DEFAULT: colors.blue[200], dark: colors.blue[800] },
           300: { DEFAULT: colors.blue[300], dark: colors.blue[700] },
           100: { DEFAULT: colors.blue[100], dark: colors.blue[900] },
-          600: { DEFAULT: colors.blue[600], dark: colors.blue[400] },
-          700: { DEFAULT: colors.blue[700], dark: colors.blue[300] },
-          800: { DEFAULT: colors.blue[800], dark: colors.blue[200] },
-          900: { DEFAULT: colors.blue[900], dark: colors.blue[100] },
-          950: { DEFAULT: colors.blue[950], dark: colors.blue[50] },
           50: { DEFAULT: colors.blue[50], dark: colors.blue[950] },
         },
         success: {
@@ -43,15 +43,15 @@ module.exports = {
         },
         element: {
           900: { DEFAULT: colors.slate[900], dark: colors.slate[50] },
-          800: { DEFAULT: colors.slate[800], dark: colors.slate[200] },
+          800: { DEFAULT: colors.slate[700], dark: colors.slate[200] },
           700: { DEFAULT: colors.slate[500], dark: colors.slate[300] },
-          500: { DEFAULT: colors.slate[300], dark: colors.slate[500] },
           600: { DEFAULT: colors.slate[400], dark: colors.slate[400] },
+          500: { DEFAULT: colors.slate[300], dark: colors.slate[500] },
         },
       },
     },
   },
-  darkMode: "media",
+  darkMode: "class",
   variants: {
     extend: {
       backgroundColor: ["dark"],