@dust-tt/sparkle 0.1.5 → 0.1.7

package/package.json

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

package/src/components/Button.tsx

@@ -1,5 +1,7 @@
-import React, { MouseEvent, ComponentType } from "react";
+import React, { ComponentType,MouseEvent } from "react";
+
 import { classNames } from "@sparkle/lib/utils";
+
 import { Icon } from "./Icon";
 
 type ButtonProps = {

package/src/components/Item.tsx

@@ -0,0 +1,122 @@
+import React, { ComponentType, MouseEvent } from "react";
+
+import {
+  noHrefLink,
+  SparkleContext,
+  SparkleContextLinkType,
+} from "@sparkle/context";
+import { ChevronRight } from "@sparkle/icons/mini";
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon } from "./Icon";
+
+type ItemProps = {
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  size?: "sm" | "md";
+  selected?: boolean;
+  disabled?: boolean;
+  label: string;
+  icon?: ComponentType;
+  className?: string;
+  href?: string;
+};
+
+const baseClasses =
+  "group inline-flex transition-color ease-out duration-400 box-border gap-x-2 py-3 text-sm font-semibold";
+
+const iconBaseClasses = "h-5 w-5 transition-color ease-out duration-400";
+
+const iconClasses = {
+  default: {
+    base: "h-5 w-5 text-element-700",
+    hover: "group-hover:text-action-400",
+    dark: {
+      base: "dark:text-element-600-dark",
+      hover: "dark:group-hover:text-action-500-dark",
+    },
+  },
+  selected: {
+    base: "text-action-500",
+    hover: "",
+    dark: {
+      base: "dark:text-action-500-dark",
+      hover: "",
+    },
+  },
+};
+
+const stateClasses = {
+  default: {
+    base: "text-element-900 cursor-pointer",
+    hover: "hover:text-action-500",
+    active: "active:text-action-700",
+    dark: {
+      base: "dark:bg-action-500-dark dark:border-action-600-dark",
+      hover: "dark:hover:bg-action-500-dark dark:hover:border-action-500-dark",
+      active:
+        "dark:active:bg-action-600-dark dark:active:border-action-700-dark",
+    },
+    disabled: "cursor-not-allowed opacity-50 bg-gray-200",
+  },
+  selected: {
+    base: "bg-action-500 border-action-600 text-white cursor-default",
+    dark: {
+      base: "dark:bg-action-500-dark dark:border-action-600-dark",
+    },
+  },
+};
+
+export function Item({
+  onClick,
+  selected = false,
+  disabled = false,
+  label,
+  icon,
+  className = "",
+  href,
+}: ItemProps) {
+  const { components } = React.useContext(SparkleContext);
+
+  const currentStateClasses = selected
+    ? stateClasses.selected
+    : stateClasses.default;
+
+  const itemClasses = classNames(
+    baseClasses,
+    currentStateClasses.base,
+    currentStateClasses.dark?.base,
+    disabled ? currentStateClasses.disabled : "",
+    !selected && !disabled ? currentStateClasses.hover : "",
+    !selected && !disabled ? currentStateClasses.dark?.hover : "",
+    !selected && !disabled ? currentStateClasses.active : "",
+    !selected && !disabled ? currentStateClasses.dark?.active : "",
+    className
+  );
+
+  const currentIconClasses = selected
+    ? iconClasses.selected
+    : iconClasses.default;
+
+  const finalIconClasses = classNames(
+    iconBaseClasses,
+    currentIconClasses.base,
+    currentIconClasses.hover,
+    currentIconClasses.dark.base,
+    currentIconClasses.dark.hover
+  );
+
+  const Link: SparkleContextLinkType = href ? components.link : noHrefLink;
+
+  return (
+    <Link
+      className={itemClasses}
+      onClick={selected || disabled ? undefined : onClick}
+      aria-label={label}
+      href={href || "#"}
+    >
+      {icon && <Icon IconComponent={icon} className={finalIconClasses} />}
+      <span className="grow">{label}</span>
+      <Icon IconComponent={ChevronRight} className={finalIconClasses} />
+    </Link>
+  );
+}

package/src/components/Tab.tsx

@@ -1,7 +1,11 @@
 import { ReactComponentLike } from "prop-types";
 import React, { MouseEvent } from "react";
 
-import { SparkleContext } from "@sparkle/context";
+import {
+  noHrefLink,
+  SparkleContext,
+  SparkleContextLinkType,
+} from "@sparkle/context";
 import { classNames } from "@sparkle/lib/utils";
 
 type TabProps = {
@@ -62,7 +66,6 @@ const tabSizingClasses = {
 
 export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
   const { components } = React.useContext(SparkleContext);
-  const Link = components.link;
 
   const renderTabs = () =>
     tabs.map((tab) => {
@@ -92,13 +95,17 @@ export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
         className
       );
 
+      const Link: SparkleContextLinkType = tab.href
+        ? components.link
+        : noHrefLink;
+
       return (
         <Link
           key={tab.label}
           className={finalTabClasses}
           aria-current={tab.current ? "page" : undefined}
           onClick={(event) => onTabClick?.(tab.label, event)}
-          href={tab.href}
+          href={tab.href || "#"}
         >
           <div
             className={

package/src/context.tsx

@@ -1,22 +1,71 @@
 import React, { ComponentType, MouseEvent, ReactNode } from "react";
 
+export type SparkleContextLinkType = ComponentType<{
+  key?: React.Key | null;
+  href: string;
+  className?: string;
+  children: ReactNode;
+  ariaLabel?: string;
+  ariaCurrent?:
+    | boolean
+    | "time"
+    | "false"
+    | "true"
+    | "page"
+    | "step"
+    | "location"
+    | "date";
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}>;
+
 export type SparkleContextType = {
   components: {
-    link: ComponentType<{
-      href?: string;
-      className?: string;
-      children: ReactNode;
-      onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    }>;
+    link: SparkleContextLinkType;
   };
 };
 
+export const aLink: SparkleContextLinkType = ({
+  key,
+  href,
+  className,
+  ariaCurrent,
+  ariaLabel,
+  onClick,
+  children,
+}) => (
+  <a
+    key={key}
+    href={href}
+    className={className}
+    aria-current={ariaCurrent}
+    aria-label={ariaLabel}
+    onClick={onClick}
+  >
+    {children}
+  </a>
+);
+
+export const noHrefLink: SparkleContextLinkType = ({
+  key,
+  className,
+  ariaCurrent,
+  ariaLabel,
+  onClick,
+  children,
+}) => (
+  <a
+    key={key}
+    className={className}
+    aria-current={ariaCurrent}
+    arria-label={ariaLabel}
+    onClick={onClick}
+  >
+    {children}
+  </a>
+);
+
 export const SparkleContext = React.createContext<SparkleContextType>({
   components: {
-    link: ({ href, className, children }) => (
-      <a href={href} className={className}>
-        {children}
-      </a>
-    ),
+    link: aLink,
   },
 });

package/src/index.ts

@@ -9,6 +9,9 @@ export { Button };
 import { Tab } from "./components/Tab";
 export { Tab };
 
+import { Item } from "./components/Item";
+export { Item };
+
 import { Icon } from "./components/Icon";
 export { Icon };