@dust-tt/sparkle 0.1.6 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "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

@@ -2,7 +2,7 @@ import { ReactComponentLike } from "prop-types";
 import React, { MouseEvent } from "react";
 
 import {
-  divLink,
+  noHrefLink,
   SparkleContext,
   SparkleContextLinkType,
 } from "@sparkle/context";
@@ -66,12 +66,9 @@ const tabSizingClasses = {
 
 export function Tab({ tabs, onTabClick, className = "" }: TabProps) {
   const { components } = React.useContext(SparkleContext);
+
   const renderTabs = () =>
     tabs.map((tab) => {
-      // If we don't have an set the href to "" and use a div.
-      const href = tab.href || "";
-      const Link: SparkleContextLinkType = tab.href ? components.link : divLink;
-
       const tabStateClasses = tab.current
         ? tabClasses.selected
         : tabClasses.default;
@@ -98,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={href}
+          href={tab.href || "#"}
         >
           <div
             className={

package/src/context.tsx

@@ -5,7 +5,8 @@ export type SparkleContextLinkType = ComponentType<{
   href: string;
   className?: string;
   children: ReactNode;
-  arriaCurrent?:
+  ariaLabel?: string;
+  ariaCurrent?:
     | boolean
     | "time"
     | "false"
@@ -27,36 +28,44 @@ export const aLink: SparkleContextLinkType = ({
   key,
   href,
   className,
-  arriaCurrent,
+  ariaCurrent,
+  ariaLabel,
+  onClick,
   children,
 }) => (
-  <a key={key} href={href} className={className} aria-current={arriaCurrent}>
+  <a
+    key={key}
+    href={href}
+    className={className}
+    aria-current={ariaCurrent}
+    aria-label={ariaLabel}
+    onClick={onClick}
+  >
     {children}
   </a>
 );
 
-export const divLink: SparkleContextLinkType = ({
+export const noHrefLink: SparkleContextLinkType = ({
   key,
   className,
-  arriaCurrent,
+  ariaCurrent,
+  ariaLabel,
+  onClick,
   children,
 }) => (
-  <div key={key} className={className} aria-current={arriaCurrent}>
+  <a
+    key={key}
+    className={className}
+    aria-current={ariaCurrent}
+    arria-label={ariaLabel}
+    onClick={onClick}
+  >
     {children}
-  </div>
+  </a>
 );
 
 export const SparkleContext = React.createContext<SparkleContextType>({
   components: {
-    link: ({ key, href, className, arriaCurrent, children }) => (
-      <a
-        key={key}
-        href={href}
-        className={className}
-        aria-current={arriaCurrent}
-      >
-        {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 };
 

package/tsconfig.json

@@ -23,9 +23,9 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    ".eslintrc.js",
-    "tailwind.config.js",
-    "rollup.config.mjs"
+    // ".eslintrc.js",
+    // "tailwind.config.js",
+    // "rollup.config.mjs"
   ],
   "exclude": ["node_modules", "dist"]
 }