pejay-ui 1.0.0

package/registry.json

@@ -0,0 +1,350 @@
+{
+  "button": {
+    "name": "Button",
+    "category": "button",
+    "files": [
+      "templates/button/Button.tsx",
+      "templates/button/tooltip.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  "form/input": {
+    "name": "Input",
+    "category": "form",
+    "files": [
+      "templates/form/input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/amount-input": {
+    "name": "AmountInput",
+    "category": "form",
+    "files": [
+      "templates/form/amount-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/checkbox": {
+    "name": "Checkbox",
+    "category": "form",
+    "files": [
+      "templates/form/checkbox.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/checkbox-group": {
+    "name": "CheckboxGroup",
+    "category": "form",
+    "files": [
+      "templates/form/checkbox-group.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "dependencies": [
+      "form/checkbox"
+    ]
+  },
+  "form/date-picker": {
+    "name": "DatePicker",
+    "category": "form",
+    "files": [
+      "templates/form/date-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "select-dropdown/select-input"
+    ]
+  },
+  "form/date-range-picker": {
+    "name": "DateRangePicker",
+    "category": "form",
+    "files": [
+      "templates/form/date-range-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "select-dropdown/select-input"
+    ]
+  },
+  "form/email-input": {
+    "name": "EmailInput",
+    "category": "form",
+    "files": [
+      "templates/form/email-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/file-input": {
+    "name": "FileInput",
+    "category": "form",
+    "files": [
+      "templates/form/file-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/number-input": {
+    "name": "NumberInput",
+    "category": "form",
+    "files": [
+      "templates/form/number-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/password-input": {
+    "name": "PasswordInput",
+    "category": "form",
+    "files": [
+      "templates/form/password-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/phone-input": {
+    "name": "PhoneInput",
+    "category": "form",
+    "files": [
+      "templates/form/phone-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "form/radio": {
+    "name": "Radio",
+    "category": "form",
+    "files": [
+      "templates/form/radio.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  "form/radio-group": {
+    "name": "RadioGroup",
+    "category": "form",
+    "files": [
+      "templates/form/radio-group.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ],
+    "dependencies": [
+      "form/radio"
+    ]
+  },
+  "form/range-slider": {
+    "name": "RangeSlider",
+    "category": "form",
+    "files": [
+      "templates/form/range-slider.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  "form/switch": {
+    "name": "Switch",
+    "category": "form",
+    "files": [
+      "templates/form/switch.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  "form/textarea": {
+    "name": "Textarea",
+    "category": "form",
+    "files": [
+      "templates/form/textarea.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge"
+    ]
+  },
+  "form/time-picker": {
+    "name": "TimePicker",
+    "category": "form",
+    "files": [
+      "templates/form/time-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "select-dropdown/select-input"
+    ]
+  },
+  "form/time-range-picker": {
+    "name": "TimeRangePicker",
+    "category": "form",
+    "files": [
+      "templates/form/time-range-picker.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ],
+    "dependencies": [
+      "select-dropdown/select-input"
+    ]
+  },
+  "form/url-input": {
+    "name": "UrlInput",
+    "category": "form",
+    "files": [
+      "templates/form/url-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ]
+  },
+  "dropdown/select-input": {
+    "name": "SelectInput",
+    "category": "select-dropdown",
+    "files": [
+      "templates/select-dropdown/select-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ]
+  },
+  "dropdown/multiselect-input": {
+    "name": "MultiselectInput",
+    "category": "select-dropdown",
+    "files": [
+      "templates/select-dropdown/multiselect-input.tsx"
+    ],
+    "utils": [
+      "cn.ts"
+    ],
+    "peerDependencies": [
+      "clsx",
+      "tailwind-merge",
+      "lucide-react",
+      "@floating-ui/react"
+    ]
+  }
+}

package/templates/button/Button.tsx

@@ -0,0 +1,156 @@
+import React from "react";
+import { cn } from "@/utils/cn";
+
+import { Tooltip } from "./tooltip";
+
+/* ─────────────────────────────────────────────
+   Types
+   ───────────────────────────────────────────── */
+
+export type ButtonVariant =
+  /* ── Solid (filled bg, white text) ──────── */
+  | "primary"
+  | "danger"
+  | "success"
+  | "warning"
+  | "black"
+  | "white"
+  /* ── Soft (coloured text, tinted bg) ────── */
+  | "primary-soft"
+  | "danger-soft"
+  | "success-soft"
+  | "warning-soft"
+  | "black-soft"
+  | "white-soft"
+  /* ── Ghost (transparent bg → soft on hover) ─ */
+  | "primary-ghost"
+  | "danger-ghost"
+  | "success-ghost"
+  | "warning-ghost"
+  | "black-ghost"
+  | "white-ghost";
+export type RoundedStyle = "full" | "lg" | "md" | "sm" | "none";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  variant?: ButtonVariant;
+  rounded?: RoundedStyle;
+  /** Removes all hover and active state classes from the variant. */
+  disableHoverEffect?: boolean;
+  /** When true the button is disabled and shows the loader or fallback text. */
+  isLoading?: boolean;
+  /** Custom loader — pass any React node (e.g. a spinner component). */
+  loader?: React.ReactNode;
+  /** Sets width to 100% of the parent container. */
+  fullWidth?: boolean;
+  /** Optional content to show inside a hover tooltip. */
+  tooltipContent?: React.ReactNode | string | null;
+}
+
+
+/* ─────────────────────────────────────────────
+   Maps
+   ───────────────────────────────────────────── */
+
+/*
+ * Solid  variants — filled background, white (or black for 'white') text.
+ * Soft   variants — coloured text + bg-current/10. Tint always matches text.
+ * Ghost  variants — transparent bg, coloured text. On hover, bg-current/10
+ *   fades in (same soft tint), giving a clean "reveal on hover" effect.
+ *   bg-transparent → hover:bg-current/10 → active:bg-current/15
+ */
+const variantMap: Record<ButtonVariant, string> = {
+  /* ── Solid ─────────────────────────────────────────── */
+  primary: "bg-sky-500     hover:bg-sky-600     active:bg-sky-700     text-white",
+  danger:  "bg-red-600     hover:bg-red-700     active:bg-red-800     text-white",
+  success: "bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800 text-white",
+  warning: "bg-amber-500   hover:bg-amber-600   active:bg-amber-700   text-white",
+  black:   "bg-black       hover:bg-black/80    active:bg-black/70    text-white",
+  white:   "bg-white       hover:bg-white/80    active:bg-white/70    text-black",
+
+  /* ── Soft (coloured text, always-visible tint) ───────── */
+  "primary-soft": "text-sky-500     bg-current/10 hover:bg-current/15 active:bg-current/20",
+  "danger-soft":  "text-red-600     bg-current/10 hover:bg-current/15 active:bg-current/20",
+  "success-soft": "text-emerald-600 bg-current/10 hover:bg-current/15 active:bg-current/20",
+  "warning-soft": "text-amber-500   bg-current/10 hover:bg-current/15 active:bg-current/20",
+  "black-soft":   "text-black       bg-current/10 hover:bg-current/15 active:bg-current/20",
+  "white-soft":   "text-white       bg-current/10 hover:bg-current/15 active:bg-current/20",
+
+  /* ── Ghost (transparent → soft tint on hover) ──────── */
+  "primary-ghost": "text-sky-500     bg-transparent hover:bg-current/10 active:bg-current/15",
+  "danger-ghost":  "text-red-600     bg-transparent hover:bg-current/10 active:bg-current/15",
+  "success-ghost": "text-emerald-600 bg-transparent hover:bg-current/10 active:bg-current/15",
+  "warning-ghost": "text-amber-500   bg-transparent hover:bg-current/10 active:bg-current/15",
+  "black-ghost":   "text-black       bg-transparent hover:bg-current/10 active:bg-current/15",
+  "white-ghost":   "text-white       bg-transparent hover:bg-current/10 active:bg-current/15",
+};
+
+const roundedMap: Record<RoundedStyle, string> = {
+  full: "rounded-full",
+  lg: "rounded-lg",
+  md: "rounded-md",
+  sm: "rounded-sm",
+  none: "rounded-none",
+};
+
+/* Strip hover: and active: modifier classes so the button stays visually static */
+const stripInteractive = (classes: string) =>
+  classes
+    .split(" ")
+    .filter((c) => !c.startsWith("hover:") && !c.startsWith("active:"))
+    .join(" ");
+
+export const Button = ({
+  variant = "primary",
+  rounded = "lg",
+  disableHoverEffect = false,
+  isLoading = false,
+  loader,
+  fullWidth = false,
+  tooltipContent,
+  className,
+  children,
+  type = "button",
+  disabled,
+  ...props
+}: ButtonProps) => {
+  /* Resolve variant classes, stripping hover/active when disableHoverEffect is set */
+  const variantClasses = disableHoverEffect
+    ? stripInteractive(variantMap[variant])
+    : variantMap[variant];
+
+  /* Render content: loader node / fallback text / normal children */
+  const content = isLoading
+    ? (loader ?? <span className="text-sm font-medium">Loading…</span>)
+    : children;
+
+  return (
+    <Tooltip content={tooltipContent}>
+      <button
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(
+          /* Base layout & typography */
+          "inline-flex items-center justify-center gap-2 px-5 h-9",
+          "whitespace-nowrap text-sm font-medium",
+          /* Smooth state transitions */
+          "transition-colors duration-150 cursor-pointer",
+          /* Keyboard focus ring (Accessibility) */
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-sky-500",
+          /* Disabled state (covers isLoading too) */
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          /* Full width utility */
+          fullWidth && "w-full",
+          variantClasses,
+          roundedMap[rounded],
+          className,
+        )}
+        {...props}
+      >
+        {content}
+      </button>
+    </Tooltip>
+  );
+};
+
+

package/templates/button/index.ts

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./tooltip";

package/templates/button/tooltip.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useEffect } from "react";
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingPortal,
+  type Placement,
+} from "@floating-ui/react";
+import { cn } from "@/utils/cn";
+
+interface TooltipProps {
+  children: React.ReactNode | string;
+  content?: React.ReactNode | string | null | undefined;
+  className?: string;
+  /** Position of the tooltip relative to the trigger. Defaults to "top" */
+  direction?: Placement;
+  /** Whether the tooltip should be disabled */
+  disabled?: boolean;
+  /** Custom class for the reference wrapper element */
+  wrapperClassName?: string;
+  /** If true, the reference wrapper spans 100% width instead of shrink-wrapping */
+  fullWidth?: boolean;
+}
+
+
+/**
+ * A custom Tooltip component built with Floating UI for professional positioning
+ * and Portals to avoid container clipping (overflow: hidden).
+ */
+export const Tooltip = ({
+  children,
+  content = null,
+  className,
+  direction = "top",
+  disabled = false,
+  wrapperClassName,
+  fullWidth = false,
+}: TooltipProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Force close tooltip when it becomes disabled or content is removed
+  useEffect(() => {
+    const isContentEmpty = !content || (typeof content === "string" && content.trim() === "");
+    if (disabled || isContentEmpty) {
+      setIsOpen(false);
+    }
+  }, [disabled, content]);
+
+  // 1. Setup Floating UI logic
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpen && !disabled && !!content,
+    onOpenChange: setIsOpen,
+    placement: direction,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(16), // Matches Spotify's gap
+      flip({ fallbackAxisSideDirection: "start" }), // Flips if hits screen edge
+      shift({ padding: 5 }), // Shifts slightly if hitting side edge
+    ],
+  });
+
+  // 2. Setup Interactions
+  const hover = useHover(context, { move: false, delay: 50 });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    hover,
+    focus,
+    dismiss,
+    role,
+  ]);
+  
+  if (disabled) {
+    return <>{children}</>;
+  }
+
+  // If disabled or no content provided, just return the trigger without the wrapper div
+  if (!content || (typeof content === "string" && content.trim() === "")) {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      {/* Trigger element - wrapped in a div to serve as the reference point */}
+      <div
+        ref={refs.setReference}
+        {...getReferenceProps()}
+        className={cn(
+          fullWidth ? "w-full flex items-center min-w-0" : "w-fit inline-flex items-center min-w-0",
+          wrapperClassName
+        )}
+      >
+        {children}
+      </div>
+
+      {/* Floating element - rendered in a Portal to break out of overflow:hidden parents */}
+      {isOpen && (
+        <FloatingPortal>
+          <div
+            ref={refs.setFloating}
+            style={floatingStyles}
+            {...getFloatingProps()}
+            className={cn(
+              "z-9999 px-2 py-1 text-xs font-medium text-black bg-gray-100 rounded-sm max-w-xs whitespace-normal break-words pointer-events-none",
+              isOpen ? "opacity-100 scale-100" : "opacity-0 scale-95",
+              className,
+            )}
+          >
+            {content}
+          </div>
+        </FloatingPortal>
+      )}
+    </>
+  );
+};