@payglocal_ui/flux-ui 0.1.0

package/src/spotlight.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import { X, ChevronLeft, ChevronRight, Check } from "lucide-react";
+import { cn } from "./utils";
+
+export interface SpotlightStep {
+  title: string;
+  body: string;
+  image?: React.ReactNode;
+}
+
+export interface SpotlightCardProps {
+  title: string;
+  body: string;
+  image?: React.ReactNode;
+  currentStep?: number;
+  totalSteps?: number;
+  onNext?: () => void;
+  onBack?: () => void;
+  onDismiss?: () => void;
+  nextLabel?: string;
+  className?: string;
+}
+
+const SpotlightCard = React.forwardRef<HTMLDivElement, SpotlightCardProps>(
+  ({ title, body, image, currentStep, totalSteps, onNext, onBack, onDismiss, nextLabel, className }, ref) => {
+    const isLast = currentStep !== undefined && totalSteps !== undefined && currentStep >= totalSteps - 1;
+    return (
+      <div ref={ref} className={cn("bg-card border border-border rounded-xl shadow-xl p-5 w-72", className)}>
+        {onDismiss && (
+          <button
+            onClick={onDismiss}
+            className="absolute top-3 right-3 rounded-md p-1 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+            aria-label="Dismiss"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+        {image && <div className="mb-4">{image}</div>}
+        <h3 className="font-semibold text-base text-foreground pr-6">{title}</h3>
+        <p className="mt-1 text-sm text-muted-foreground leading-relaxed">{body}</p>
+        <div className="flex items-center justify-between mt-4">
+          <div className="flex items-center gap-2">
+            {totalSteps && totalSteps > 1 && (
+              <>
+                <span className="text-xs text-muted-foreground">{(currentStep ?? 0) + 1} of {totalSteps}</span>
+                <div className="flex gap-1">
+                  {Array.from({ length: totalSteps }).map((_, i) => (
+                    <span
+                      key={i}
+                      className={cn(
+                        "rounded-full transition-all duration-pg-fast",
+                        i === (currentStep ?? 0)
+                          ? "w-4 h-1.5 bg-primary"
+                          : "w-1.5 h-1.5 bg-muted-foreground/30"
+                      )}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+          <div className="flex gap-2">
+            {onBack && (currentStep ?? 0) > 0 && (
+              <button
+                onClick={onBack}
+                className="inline-flex items-center gap-1 h-8 px-3 rounded-lg text-xs font-medium text-muted-foreground hover:bg-muted transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+              >
+                <ChevronLeft className="size-3" /> Back
+              </button>
+            )}
+            {onNext && (
+              <button
+                onClick={onNext}
+                className="inline-flex items-center gap-1 h-8 px-3 rounded-lg text-xs font-medium bg-primary text-primary-foreground hover:bg-[var(--primary-hover)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+              >
+                {isLast ? (
+                  <><Check className="size-3" /> {nextLabel ?? "Done"}</>
+                ) : (
+                  <>{nextLabel ?? "Next"} <ChevronRight className="size-3" /></>
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+SpotlightCard.displayName = "SpotlightCard";
+
+export interface SpotlightProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Spotlight = ({ isOpen, onClose, children, className }: SpotlightProps) => {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50">
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
+      <div className={cn("relative z-10 flex items-center justify-center min-h-full p-4", className)}>
+        {children}
+      </div>
+    </div>
+  );
+};
+Spotlight.displayName = "Spotlight";
+
+export interface UseSpotlightReturn {
+  isOpen: boolean;
+  currentStep: number;
+  open: () => void;
+  close: () => void;
+  goNext: () => void;
+  goBack: () => void;
+  goTo: (step: number) => void;
+}
+
+export function useSpotlight(steps: SpotlightStep[], initialStep = 0): UseSpotlightReturn {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [currentStep, setCurrentStep] = React.useState(initialStep);
+
+  return {
+    isOpen,
+    currentStep,
+    open: () => { setCurrentStep(initialStep); setIsOpen(true); },
+    close: () => setIsOpen(false),
+    goNext: () => {
+      if (currentStep >= steps.length - 1) setIsOpen(false);
+      else setCurrentStep(s => s + 1);
+    },
+    goBack: () => setCurrentStep(s => Math.max(0, s - 1)),
+    goTo: (step) => setCurrentStep(Math.max(0, Math.min(step, steps.length - 1))),
+  };
+}
+
+export { Spotlight, SpotlightCard };

package/src/status-badge.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import * as React from "react";
+import { Check, X, RefreshCw, Clock, AlertCircle, ArrowRight, Info } from "lucide-react";
+import { cn } from "./utils";
+
+export type BadgeVariant =
+  | "success"
+  | "info"
+  | "warning"
+  | "refund"
+  | "danger"
+  | "orange"
+  | "muted";
+
+export type BadgeTrailIcon =
+  | "check"
+  | "x"
+  | "refresh"
+  | "clock"
+  | "alert"
+  | "arrow-right"
+  | "info";
+
+/* Light: low-opacity hue-matched borders. Dark: stronger borders for contrast on dark surfaces. */
+const VARIANT_CLASS: Record<BadgeVariant, string> = {
+  success:
+    "bg-emerald-500/10 text-emerald-800 border-emerald-600/10 dark:bg-emerald-500/35 dark:text-emerald-50 dark:border-emerald-400/70",
+  info: "bg-blue-500/10 text-blue-800 border-blue-600/10 dark:bg-sky-500/30 dark:text-sky-50 dark:border-sky-400/65",
+  warning:
+    "bg-amber-500/10 text-amber-900 border-amber-600/10 dark:bg-amber-500/35 dark:text-amber-50 dark:border-amber-400/70",
+  refund:
+    "bg-yellow-500/10 text-yellow-900 border-yellow-600/10 dark:bg-violet-500/30 dark:text-violet-100 dark:border-violet-400/60",
+  danger:
+    "bg-red-500/10 text-red-800 border-red-600/10 dark:bg-red-500/35 dark:text-red-50 dark:border-red-400/70",
+  orange:
+    "bg-orange-500/10 text-orange-900 border-orange-600/10 dark:bg-orange-500/35 dark:text-orange-50 dark:border-orange-400/65",
+  muted:
+    "bg-muted text-muted-foreground border-border/40 dark:bg-zinc-800/90 dark:text-zinc-200 dark:border-zinc-500/45",
+};
+
+export interface StatusBadgeProps {
+  variant: BadgeVariant;
+  label: string;
+  trailIcon?: BadgeTrailIcon;
+  size?: "sm" | "md";
+  className?: string;
+}
+
+export const StatusBadge = React.forwardRef<HTMLSpanElement, StatusBadgeProps>(
+  ({ variant, label, trailIcon, size = "md", className }, ref) => {
+    const iSize = size === "sm" ? 11 : 12;
+    const iProps = {
+      width: iSize,
+      height: iSize,
+      strokeWidth: 2.5,
+      style: { flexShrink: 0 },
+    } as const;
+
+    const icon =
+      trailIcon === "check"       ? <Check {...iProps} /> :
+      trailIcon === "x"           ? <X {...iProps} strokeWidth={3} /> :
+      trailIcon === "refresh"     ? <RefreshCw {...{ ...iProps, strokeWidth: 2 }} /> :
+      trailIcon === "clock"       ? <Clock {...iProps} strokeWidth={2} /> :
+      trailIcon === "alert"       ? <AlertCircle {...iProps} strokeWidth={2} /> :
+      trailIcon === "arrow-right" ? <ArrowRight {...iProps} strokeWidth={2.5} /> :
+      trailIcon === "info"        ? <Info {...iProps} strokeWidth={2.5} /> :
+      null;
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "inline-flex items-center gap-1.5 font-medium border whitespace-nowrap rounded-md",
+          VARIANT_CLASS[variant],
+          size === "sm" ? "text-[11px] px-2 py-[2px]" : "text-[13px] px-3 py-[5px]",
+          className
+        )}
+      >
+        {label}
+        {icon}
+      </span>
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";

package/src/switch.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const switchRootVariants = cva(
+  [
+    "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent",
+    "transition-colors duration-pg-fast ease-pg-standard",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[state=unchecked]:bg-muted data-[state=unchecked]:border-border",
+    "data-[state=checked]:bg-primary data-[state=checked]:border-transparent",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        md: "h-6 w-11",
+        lg: "h-7 w-[3.25rem]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+const switchThumbVariants = cva(
+  [
+    "pointer-events-none block rounded-full bg-white shadow-sm",
+    "transition-transform duration-pg-fast ease-pg-standard",
+    "ring-0",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5",
+        md: "size-4.5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5",
+        lg: "size-5.5 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0.5",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+);
+
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,
+    VariantProps<typeof switchRootVariants> {}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    ref={ref}
+    className={cn(switchRootVariants({ size }), className)}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb className={cn(switchThumbVariants({ size }))} />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/src/tabs.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "./utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center gap-0.5 rounded-lg border border-border bg-muted/40 p-0.5 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+      "ring-ring/50 focus-visible:outline-none focus-visible:ring-2",
+      "data-[state=active]:bg-card data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-3 outline-none ring-ring/50 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-lg",
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/tag.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "./utils";
+
+export type TagColorScheme = "neutral" | "blue" | "green" | "amber" | "red" | "purple";
+
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  colorScheme?: TagColorScheme;
+  onRemove?: () => void;
+  disabled?: boolean;
+}
+
+const colorClasses: Record<TagColorScheme, string> = {
+  neutral: "bg-card border-border text-foreground",
+  blue: "bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-300",
+  green: "bg-green-500/10 border-green-500/20 text-green-700 dark:text-green-300",
+  amber: "bg-amber-500/10 border-amber-500/20 text-amber-700 dark:text-amber-300",
+  red: "bg-red-500/10 border-red-500/20 text-red-700 dark:text-red-300",
+  purple: "bg-purple-500/10 border-purple-500/20 text-purple-700 dark:text-purple-300",
+};
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, colorScheme = "neutral", onRemove, disabled, children, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn("inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium transition-colors", colorClasses[colorScheme], disabled && "opacity-50 cursor-not-allowed", className)}
+      {...props}
+    >
+      {children}
+      {onRemove && !disabled && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onRemove(); }}
+          className="ml-0.5 rounded-sm opacity-60 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          aria-label="Remove"
+        >
+          <X className="size-3" />
+        </button>
+      )}
+    </span>
+  )
+);
+Tag.displayName = "Tag";
+
+export interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const TagGroup = React.forwardRef<HTMLDivElement, TagGroupProps>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex flex-wrap gap-1.5", className)} {...props} />
+);
+TagGroup.displayName = "TagGroup";
+
+export { Tag, TagGroup };

package/src/textarea.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[5.5rem] w-full rounded-lg border border-border bg-card px-4 py-3 text-[15px] leading-relaxed shadow-sm transition-colors",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };