margo-ui 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "margo-ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A small React UI kit built on Tailwind CSS v4 design tokens, themeable through plain CSS custom properties.",
   "keywords": [
     "react",

package/src/components/background_glow.css

@@ -0,0 +1,32 @@
+.margo-background-glow::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0;
+  border-radius: inherit;
+  background: radial-gradient(
+    var(--margo-background-glow-size) circle at var(--margo-background-glow-x, 50%) var(--margo-background-glow-y, 50%),
+    var(--color-primary),
+    transparent 70%
+  );
+  transition: opacity 300ms ease-out;
+}
+
+.margo-background-glow:hover::before,
+.margo-background-glow:focus-within::before {
+  opacity: var(--margo-background-glow-opacity, 0.1);
+}
+
+.margo-background-glow--size-sm {
+  --margo-background-glow-size: 200px;
+}
+
+.margo-background-glow--size-md {
+  --margo-background-glow-size: 320px;
+}
+
+.margo-background-glow--size-lg {
+  --margo-background-glow-size: 480px;
+}

package/src/components/background_glow.tsx

@@ -0,0 +1,45 @@
+import { cloneElement } from "react";
+
+import { cn } from "../helpers/cn";
+
+import type { PointerEvent, PointerEventHandler, ReactElement } from "react";
+
+import "./background_glow.css";
+
+export type BackgroundGlowSize = "sm" | "md" | "lg";
+
+export type BackgroundGlowChildProps = {
+  className?: string;
+  onPointerMove?: PointerEventHandler<HTMLElement>;
+};
+
+export type BackgroundGlowProps = {
+  children: ReactElement<BackgroundGlowChildProps>;
+  size?: BackgroundGlowSize;
+};
+
+const BACKGROUND_GLOW_SIZE_CLASS: Record<BackgroundGlowSize, string> = {
+  sm: "margo-background-glow--size-sm",
+  md: "margo-background-glow--size-md",
+  lg: "margo-background-glow--size-lg",
+};
+
+export const BackgroundGlow = ({ children, size = "md" }: BackgroundGlowProps) => {
+  const handlePointerMove = (event: PointerEvent<HTMLElement>) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+
+    event.currentTarget.style.setProperty("--margo-background-glow-x", `${event.clientX - bounds.left}px`);
+    event.currentTarget.style.setProperty("--margo-background-glow-y", `${event.clientY - bounds.top}px`);
+
+    children.props.onPointerMove?.(event);
+  };
+
+  return cloneElement(children, {
+    className: cn(
+      "relative isolate margo-background-glow",
+      BACKGROUND_GLOW_SIZE_CLASS[size],
+      children.props.className,
+    ),
+    onPointerMove: handlePointerMove,
+  });
+};

package/src/components/border_glow.css

@@ -6,7 +6,7 @@
   opacity: 0;
   background: radial-gradient(
     480px circle at var(--margo-border-glow-x, 70%) var(--margo-border-glow-y, 70%),
-    var(--color-primary),
+    var(--color-primary-darken),
     transparent 70%
   );
   transition: opacity 300ms ease-out;

package/src/components/button.tsx

@@ -2,7 +2,7 @@ import { Tag } from "react-renderable";
 import { cn } from "../helpers/cn";
 import { Ripple } from "./ripple";
 
-import type { CSSProperties, ElementType, ReactNode } from "react";
+import type { CSSProperties, ElementType, MouseEvent, MouseEventHandler, ReactNode } from "react";
 import type { TagProps } from "react-renderable";
 
 const CLASSNAME_BASE = `group/button flex h-8 w-fit shrink-0 items-center px-2 rounded-lg border-2 text-on-main
@@ -15,21 +15,31 @@ const CLASSNAME_GRID = "grid items-center gap-0 transition-[grid-template-column
 const CLASSNAME_SLOT = `min-w-0 overflow-hidden opacity-0 transition-opacity duration-[180ms] ease-in
 group-hover/button:opacity-100 group-focus-visible/button:opacity-100 group-data-[open=true]/button:opacity-100`;
 
+export type ButtonIconLabelSide = "start" | "end";
+
 export type ButtonProps<T extends ElementType = "button"> = TagProps<T> & {
   clickable?: boolean;
   active?: boolean;
   open?: boolean;
+  blurOnClick?: boolean;
 };
 
 export const Button = <T extends ElementType = "button">(props: ButtonProps<T>) => {
-  const { as, clickable = true, active = false, open = false, ...restProps } = props;
+  const { as, clickable = true, active = false, open = false, blurOnClick = true, ...restProps } = props;
   const nativeProps = { as: as ?? "button", ...restProps } as TagProps<T>;
+  const onClick = props.onClick as MouseEventHandler<HTMLElement> | undefined;
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    onClick?.(event);
+    if (blurOnClick && event.detail > 0) setTimeout(() => event.currentTarget.blur(), 150);
+  };
 
   return (
     <Ripple>
       <Tag
         {...nativeProps}
         data-open={open}
+        onClick={handleClick}
         className={cn(
           CLASSNAME_BASE,
           active ? "margo-border-gradient-primary" : CLASSNAME_SURFACE,
@@ -61,7 +71,7 @@ Button.IconLabel = ({
   label: ReactNode;
   gap?: string;
   reverse?: boolean;
-  side?: "start" | "end";
+  side?: ButtonIconLabelSide;
   className?: string | null;
 }) => {
   return (

package/src/components/card.tsx

@@ -1,6 +1,5 @@
 import { Tag } from "react-renderable";
 import { cn } from "../helpers/cn";
-import { BorderGlow } from "./border_glow";
 
 import type { ElementType } from "react";
 import type { TagProps } from "react-renderable";
@@ -12,18 +11,16 @@ export const Card = <T extends ElementType = "div">(props: CardProps<T>) => {
   const nativeProps = { as: as ?? "div", ...restProps } as TagProps<T>;
 
   return (
-    <BorderGlow>
-      <Tag
-        {...nativeProps}
-        className={cn(
-          "rounded-lg border-2 border-border bg-main p-5 text-on-main",
-          `focus:margo-border-gradient-primary focus-visible:outline focus-visible:outline-offset-1
-          focus-visible:outline-on-main`,
-          className,
-        )}
-      >
-        {children}
-      </Tag>
-    </BorderGlow>
+    <Tag
+      {...nativeProps}
+      className={cn(
+        "rounded-lg border-2 border-border bg-main p-5 text-on-main",
+        `focus:margo-border-gradient-primary focus-visible:outline focus-visible:outline-offset-1
+        focus-visible:outline-on-main`,
+        className,
+      )}
+    >
+      {children}
+    </Tag>
   );
 };

package/src/components/chip.tsx

@@ -0,0 +1,27 @@
+import { Tag } from "react-renderable";
+import { cn } from "../helpers/cn";
+
+import type { ElementType } from "react";
+import type { TagProps } from "react-renderable";
+
+export type ChipProps<T extends ElementType = "div"> = TagProps<T> & {
+  active?: boolean;
+};
+
+export const Chip = <T extends ElementType = "div">(props: ChipProps<T>) => {
+  const { as, active = false, className, children, ...restProps } = props;
+  const nativeProps = { as: as ?? "div", ...restProps } as TagProps<T>;
+
+  return (
+    <Tag
+      {...nativeProps}
+      className={cn(
+        "bg-secondary px-3 py-0.5 whitespace-nowrap lowercase flex-none leading-none rounded-md text-mc",
+        className,
+        active && "bg-on-main text-main",
+      )}
+    >
+      {children}
+    </Tag>
+  );
+};

package/src/components/ripple.tsx

@@ -19,7 +19,7 @@ export type RippleProps = {
   rippleClassName?: string;
 };
 
-export const Ripple = ({ children, rippleClassName = "bg-primary" }: RippleProps) => {
+export const Ripple = ({ children, rippleClassName = "bg-primary-darken" }: RippleProps) => {
   const { endRipple, ripple, startRipple } = useRipple();
 
   const handlePointerDown = (event: PointerEvent<HTMLElement>) => {

package/src/components/tooltip.tsx

@@ -0,0 +1,55 @@
+import { Tag } from "react-renderable";
+import { cn } from "../helpers/cn";
+
+import { useRef } from "react";
+
+import type { ElementType, ReactNode } from "react";
+import type { TagProps } from "react-renderable";
+
+export type TooltipPosition = "up" | "down" | "left" | "right";
+
+export type TooltipProps<T extends ElementType = "div"> = Omit<TagProps<T>, "aria-label" | "children" | "id"> & {
+  ariaLabel?: string;
+  id?: string;
+  placeholder?: ReactNode;
+  position?: TooltipPosition;
+  children?: ReactNode;
+};
+
+const TOOLTIP_POSITION_CLASS: Record<TooltipPosition, string> = {
+  up: "bottom-[120%] left-1/2 -translate-x-1/2",
+  down: "top-[120%] left-1/2 -translate-x-1/2",
+  left: "top-1/2 right-[calc(100%+0.5rem)] -translate-y-1/2",
+  right: "top-1/2 left-[calc(100%+0.5rem)] -translate-y-1/2",
+};
+
+export const Tooltip = <T extends ElementType = "div">(props: TooltipProps<T>) => {
+  const { as, ariaLabel, children, className, id, placeholder, position = "down", ...restProps } = props;
+  const nativeProps = { as: as ?? "div", ...restProps } as TagProps<T>;
+
+  const placeholderRef = useRef<ReactNode>(null);
+
+  const isFilled = placeholder !== null && placeholder !== undefined;
+
+  if (isFilled) placeholderRef.current = placeholder;
+
+  return (
+    <Tag {...nativeProps} className={cn("group relative inline-block size-fit", className)}>
+      {children}
+      <span
+        id={id}
+        role="tooltip"
+        aria-label={isFilled ? undefined : ariaLabel}
+        className={cn(
+          `pointer-events-none absolute z-10 rounded-sm bg-on-main px-2 py-0.5 text-xs text-main lowercase
+          whitespace-nowrap opacity-0`,
+          "transition-opacity duration-[250ms] ease-in-out",
+          isFilled && "group-hover:opacity-100 group-focus-within:opacity-100",
+          TOOLTIP_POSITION_CLASS[position],
+        )}
+      >
+        {placeholderRef.current}
+      </span>
+    </Tag>
+  );
+};

package/src/index.ts

@@ -1,16 +1,22 @@
+export { BackgroundGlow } from "./components/background_glow";
 export { BorderGlow } from "./components/border_glow";
 export { Button } from "./components/button";
 export { Card } from "./components/card";
+export { Chip } from "./components/chip";
 export { MetaColorScheme } from "./components/meta_color_scheme";
 export { Ripple } from "./components/ripple";
+export { Tooltip } from "./components/tooltip";
 
 export { useTheme } from "./hooks/use_theme";
 
 export { cn } from "./helpers/cn";
 export { THEME, themeClient } from "./helpers/theme";
 
+export type { BackgroundGlowChildProps, BackgroundGlowProps, BackgroundGlowSize } from "./components/background_glow";
 export type { BorderGlowChildProps, BorderGlowPosition, BorderGlowProps } from "./components/border_glow";
-export type { ButtonProps } from "./components/button";
+export type { ButtonIconLabelSide, ButtonProps } from "./components/button";
 export type { CardProps } from "./components/card";
+export type { ChipProps } from "./components/chip";
 export type { RippleChildProps, RippleProps } from "./components/ripple";
+export type { TooltipPosition, TooltipProps } from "./components/tooltip";
 export type { Theme } from "./helpers/theme";