@neoptocom/neopto-ui 0.4.0 → 0.5.0

package/src/components/Chat/AnimatedBgRectangle.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+
+interface AnimatedBgRectangleProps {
+  colors: string[];
+  delay?: number;
+}
+
+const AnimatedBgRectangle = ({ colors, delay = 0 }: AnimatedBgRectangleProps) => {
+  const uniqueId = useMemo(() => Math.random().toString(36).substr(2, 9), []);
+
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="none"
+      className="h-full transition-all duration-500 ease-in-out w-full"
+      preserveAspectRatio="none"
+    >
+      <style>
+        {`
+          @keyframes colorCycle-${uniqueId} {
+            0% { fill: ${colors[0]}; }
+            25% { fill: ${colors[1]}; }
+            50% { fill: ${colors[2]}; }
+            75% { fill: ${colors[3]}; }
+            100% { fill: ${colors[0]}; }
+          }
+          @keyframes fadeIn-${uniqueId} {
+            0% { opacity: 0; }
+            100% { opacity: 1; }
+          }
+          .animated-circle-${uniqueId} {
+            animation: 
+              fadeIn-${uniqueId} 1.5s ease-in-out 1.5s forwards,
+              colorCycle-${uniqueId} 4s infinite linear ${delay}s;
+            opacity: 0;
+            transition: all 0.5s ease-in-out;
+          }
+        `}
+      </style>
+      <g style={{ mixBlendMode: "overlay" }} filter="url(#filter0_f_241_319)">
+        <rect x="10" y="12" width="44" height="40" className={`animated-circle-${uniqueId}`} />
+      </g>
+      <defs>
+        <filter id="filter0_f_241_319" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="4" result="effect1_foregroundBlur_241_319" />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
+
+export default AnimatedBgRectangle;
+

package/src/components/Chat/ChatButton.tsx

@@ -0,0 +1,132 @@
+import { useState, useEffect } from "react";
+import AnimatedBgCircle from "./AnimatedBgCircle";
+import AnimatedBgRectangle from "./AnimatedBgRectangle";
+import Typo from "../Typo";
+
+export interface ChatButtonProps {
+  /** Callback when chat button is clicked */
+  onOpenChat: () => void;
+  /** Whether there's a new notification */
+  hasNotification?: boolean;
+  /** The notification message to display */
+  notificationMessage?: string;
+  /** Logo source for the chat agent */
+  logoSrc?: string;
+  /** Alt text for the logo */
+  logoAlt?: string;
+  /** Custom animation colors */
+  animationColors?: string[];
+}
+
+const ChatButton = ({
+  onOpenChat,
+  hasNotification = false,
+  notificationMessage = "",
+  logoSrc,
+  logoAlt = "Chat Agent",
+  animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
+}: ChatButtonProps) => {
+  const [showText, setShowText] = useState(false);
+  const [delayedHasNotification, setDelayedHasNotification] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsMounted(true), 250);
+    return () => clearTimeout(timer);
+  }, []);
+
+  useEffect(() => {
+    if (hasNotification) {
+      const textTimer = setTimeout(() => setShowText(true), 500);
+      setDelayedHasNotification(true);
+      return () => clearTimeout(textTimer);
+    } else {
+      const textHideTimer = setTimeout(() => setShowText(false), 250);
+      const backgroundTimer = setTimeout(
+        () => setDelayedHasNotification(false),
+        350
+      );
+      return () => {
+        clearTimeout(textHideTimer);
+        clearTimeout(backgroundTimer);
+      };
+    }
+  }, [hasNotification]);
+
+  const circleAnimations = [
+    { delay: 0, style: "left-0 top-0" },
+    { delay: 0.75, style: "right-0 top-0" },
+    { delay: 1, style: "bottom-0 left-0" },
+    { delay: 0.25, style: "bottom-0 right-0" },
+  ];
+  const rectAnimations = [
+    { delay: 0, style: "left-0 top-0" },
+    { delay: 0.75, style: "right-0 top-0" },
+    { delay: 1, style: "bottom-0 left-0" },
+    { delay: 0.25, style: "bottom-0 right-0" },
+  ];
+
+  return (
+    <div
+      className={`flex justify-end items-center fixed bottom-3 right-8 z-40 h-24 transition-all duration-600 ease-in-out ${
+        delayedHasNotification ? "w-[432px]" : "w-24"
+      } ${isMounted ? "opacity-100" : "opacity-0"}`}
+    >
+      {circleAnimations.map((circle, index) => (
+        <div
+          key={`circle-${index}`}
+          className={`absolute ${circle.style} h-20 min-w-20 transition-all duration-600 ease-in-out w-20 overflow-visible flex justify-between`}
+        >
+          <AnimatedBgCircle
+            colors={animationColors}
+            delay={circle.delay}
+            stretch={delayedHasNotification}
+          />
+        </div>
+      ))}
+      {rectAnimations.map((rect, index) => (
+        <div
+          key={`rect-${index}`}
+          className={`absolute ${rect.style} h-20 transition-all duration-600 ease-in-out ${
+            delayedHasNotification
+              ? "w-[324px] opacity-100 px-0"
+              : "w-20 px-10 opacity-0"
+          } overflow-visible flex justify-between`}
+        >
+          <AnimatedBgRectangle colors={animationColors} delay={rect.delay} />
+        </div>
+      ))}
+      {isMounted && (
+        <button
+          onClick={onOpenChat}
+          className={`flex flex-row-reverse items-center gap-1.5 fixed p-3 rounded-full shadow-md cursor-pointer h-16 mr-4 transition-all duration-600 ease-in-out border-2 border-[var(--border)] ${
+            delayedHasNotification ? "w-[400px]" : "w-16"
+          }`}
+          style={{
+            background: "var(--chat-button-gradient)",
+          }}
+          aria-label={hasNotification ? notificationMessage : "Open chat"}
+        >
+          {logoSrc && (
+            <img
+              src={logoSrc}
+              alt={logoAlt}
+              className="w-10 h-10 object-contain"
+            />
+          )}
+          <Typo
+            variant="label-lg"
+            className={`pl-2 w-80 line-clamp-2 overflow-hidden text-ellipsis text-left transition-opacity duration-300 ${
+              showText ? "opacity-100" : "opacity-0"
+            }`}
+          >
+            {notificationMessage}
+          </Typo>
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default ChatButton;
+

package/src/components/Chat/index.ts

@@ -0,0 +1,5 @@
+export { default as ChatButton } from "./ChatButton";
+export type { ChatButtonProps } from "./ChatButton";
+export { default as AnimatedBgCircle } from "./AnimatedBgCircle";
+export { default as AnimatedBgRectangle } from "./AnimatedBgRectangle";
+

package/src/components/Chip.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import Icon from "./Icon";
+
+export type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: "warning" | "success" | "error" | "light" | "dark";
+  icon?: string;
+  label?: string;
+};
+
+export default function Chip({
+  variant = "success",
+  icon,
+  className = "",
+  label,
+  ...props
+}: ChipProps) {
+  const base =
+    "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 " +
+    "text-xs font-semibold";
+
+  // Token-based backgrounds + readable text
+  const variantCls: Record<NonNullable<ChipProps["variant"]>, string> = {
+    warning: "bg-[var(--warning)] text-white",
+    success: "bg-[var(--success)] text-white",
+    error: "bg-[var(--destructive)] text-white",
+    light: "bg-[var(--muted)] text-[var(--fg)]",
+    dark: "bg-[var(--surface)] text-[var(--fg)]"
+  };
+
+  return (
+    <div className={[base, variantCls[variant], className].join(" ")} {...props}>
+      {icon ? <Icon name={icon} size="sm" className="mr-0.5" /> : null}
+      <span>{label}</span>
+    </div>
+  );
+}
+
+

package/src/components/Counter.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import Icon from "./Icon";
+
+export type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+};
+
+export default function Counter({
+  value = 0,
+  onChange,
+  min = 0,
+  max = 99,
+  step = 1,
+  className = "",
+  ...props
+}: CounterProps) {
+  const [count, setCount] = React.useState(value);
+
+  React.useEffect(() => {
+    setCount(value);
+  }, [value]);
+
+  const handleIncrement = () => {
+    const newValue = Math.min(count + step, max);
+    setCount(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleDecrement = () => {
+    const newValue = Math.max(count - step, min);
+    setCount(newValue);
+    onChange?.(newValue);
+  };
+
+  const base =
+    "inline-flex w-fit items-center justify-center gap-2 whitespace-nowrap overflow-hidden rounded-full h-7.5 px-2 " +
+    "text-xs font-semibold bg-[var(--muted)] text-[var(--fg)]";
+
+  return (
+    <div className={[base, className].join(" ")} {...props}>
+      <span className="min-w-[1.5rem] text-center">{count}</span>
+      <div className="flex flex-col gap-0 -my-1">
+        <button
+          type="button"
+          onClick={handleIncrement}
+          disabled={count >= max}
+          className="hover:opacity-70 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity"
+          aria-label="Increment"
+        >
+          <Icon name="keyboard_arrow_up" size="sm" />
+        </button>
+        <button
+          type="button"
+          onClick={handleDecrement}
+          disabled={count <= min}
+          className="hover:opacity-70 disabled:opacity-30 disabled:cursor-not-allowed transition-opacity"
+          aria-label="Decrement"
+        >
+          <Icon name="keyboard_arrow_down" size="sm" />
+        </button>
+      </div>
+    </div>
+  );
+}
+

package/src/components/Icon.tsx

@@ -0,0 +1,48 @@
+export type IconProps = {
+  /** Material Symbols name (e.g., "search", "close", "more_vert") */
+  name: string;
+  className?: string;
+  title?: string;
+  /** Visual size preset */
+  size?: "sm" | "md" | "lg";
+  /** Filled (1) vs outlined (0) glyph */
+  fill?: 0 | 1;
+};
+
+const sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 36,
+} as const;
+
+export default function Icon({
+  name,
+  className = "",
+  title,
+  size = "md",
+  fill = 0
+}: IconProps) {
+  const fontSize = sizeMap[size] ?? sizeMap.md;
+  // If user already provides a Tailwind color class, don't override color
+  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
+  const style: React.CSSProperties = {
+    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
+    fontSize,
+    lineHeight: 1,
+    display: "inline-block",
+    verticalAlign: "middle",
+    ...(hasColorClass ? {} : { color: "inherit" })
+  };
+  return (
+    <span
+      className={`material-symbols-rounded rounded ${className}`}
+      style={style}
+      aria-hidden={title ? undefined : true}
+      title={title}
+    >
+      {name}
+    </span>
+  );
+}
+
+

package/src/components/IconButton.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import Icon from "./Icon";
+
+const iconButtonStyles = tv({
+  base: [
+    "flex items-center justify-center rounded-full flex-shrink-0",
+    "transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50"
+  ].join(" "),
+  variants: {
+    variant: {
+      ghost: "bg-transparent hover:bg-[var(--muted)] active:bg-[var(--muted)]",
+      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600",
+      secondary: "border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--muted)] active:bg-[var(--muted)]"
+    },
+    size: {
+      sm: "w-8 h-8",
+      md: "w-10 h-10",
+      lg: "w-12 h-12"
+    }
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "md"
+  }
+});
+
+type IconButtonVariants = VariantProps<typeof iconButtonStyles>;
+
+export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  IconButtonVariants & {
+    /** Material Symbols icon name */
+    icon: string;
+    /** Icon size (defaults to button size) */
+    iconSize?: "sm" | "md" | "lg";
+    /** Icon fill (0 = outlined, 1 = filled) */
+    iconFill?: 0 | 1;
+    /** Optional custom className for the icon */
+    iconClassName?: string;
+  };
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      variant,
+      size,
+      icon,
+      iconSize,
+      iconFill = 0,
+      iconClassName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    // Map button size to icon size if not explicitly provided
+    const defaultIconSize = size === "sm" ? "sm" : size === "lg" ? "lg" : "md";
+    const effectiveIconSize = iconSize ?? defaultIconSize;
+
+    // Icon color based on variant (can be overridden by iconClassName)
+    const defaultIconColorClass =
+      variant === "primary"
+        ? "text-white"
+        : variant === "secondary"
+        ? "text-[var(--fg)]"
+        : "text-[var(--muted-fg)]";
+
+    const finalIconClassName = iconClassName ?? defaultIconColorClass;
+
+    return (
+      <button
+        ref={ref}
+        className={iconButtonStyles({ variant, size, className })}
+        {...props}
+      >
+        <Icon
+          name={icon}
+          size={effectiveIconSize}
+          fill={iconFill}
+          className={finalIconClassName}
+        />
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = "IconButton";
+

package/src/components/Input.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, disabled, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        disabled={disabled}
+        className={[
+          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "text-sm placeholder:text-[var(--muted-fg)]",
+          disabled
+            ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed"
+            : [
+                "text-[var(--muted-fg)]",
+                "border-[var(--muted-fg)]",
+                "hover:border-[var(--border)]",
+                "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+              ].join(" "),
+          className
+        ].join(" ")}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";

package/src/components/Modal.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+export type ModalProps = {
+  open: boolean;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  title?: string;
+  /** When true, closes when the overlay is clicked */
+  closeOnOverlay?: boolean;
+};
+
+function useIsomorphicLayoutEffect(effect: React.EffectCallback, deps?: React.DependencyList) {
+  const useEffectHook = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+  useEffectHook(effect, deps);
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  closeOnOverlay = true,
+  children
+}: ModalProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  // Prevent body scroll when open
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+    if (!open) return;
+    const original = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = original;
+    };
+  }, [open]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!mounted) return null;
+  if (!open) return null;
+
+  const overlay = (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className="absolute inset-0 bg-black/50"
+        onClick={() => closeOnOverlay && onClose?.()}
+      />
+      <div className="relative z-10 w-full max-w-lg rounded-[var(--radius-lg)] bg-[var(--surface)] text-[var(--fg)] p-6 shadow-xl">
+        {title ? (
+          <h2 id="modal-title" className="mb-2 text-lg font-semibold">
+            {title}
+          </h2>
+        ) : null}
+        <div>{children}</div>
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="btn btn-outline"
+            type="button"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const container = document.body;
+  return createPortal(overlay, container);
+}