@payglocal_ui/flux-ui 0.1.0

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@payglocal_ui/flux-ui",
+  "version": "0.1.0",
+  "description": "Flux UI primitives — inputs, fields, dialog, data table, charts, calendar, and more (Tailwind v4 + Radix).",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "tailwind",
+    "radix-ui",
+    "design-system",
+    "flux"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.13",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.9",
+    "@radix-ui/react-radio-group": "^1.4.0",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-switch": "^1.3.0",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.37.0",
+    "lucide-react": "^0.577.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.14.0",
+    "recharts": "^3.8.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "check-types": "tsc --noEmit"
+  }
+}

package/src/accordion.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "./utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-border last:border-b-0", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex w-full items-center justify-between py-4 text-sm font-medium text-foreground",
+        "hover:text-primary transition-colors duration-pg-fast ease-pg-standard",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-pg-fast ease-pg-standard" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm text-muted-foreground",
+      "data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up",
+      className
+    )}
+    style={
+      {
+        "--accordion-content-height": "var(--radix-accordion-content-height)",
+      } as React.CSSProperties
+    }
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = "AccordionContent";
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/alert.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import * as React from "react";
+import { X, Info, CheckCircle2, AlertTriangle, XCircle } from "lucide-react";
+import { cn } from "./utils";
+
+export type AlertVariant = "info" | "success" | "warning" | "error" | "neutral";
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const variantStyles: Record<AlertVariant, string> = {
+  info: "bg-blue-50 border-blue-200 text-blue-900 dark:bg-blue-950/30 dark:border-blue-800 dark:text-blue-200",
+  success: "bg-green-50 border-green-200 text-green-900 dark:bg-green-950/30 dark:border-green-800 dark:text-green-200",
+  warning: "bg-amber-50 border-amber-200 text-amber-900 dark:bg-amber-950/30 dark:border-amber-800 dark:text-amber-200",
+  error: "bg-red-50 border-red-200 text-red-900 dark:bg-red-950/30 dark:border-red-800 dark:text-red-200",
+  neutral: "bg-muted border-border text-foreground",
+};
+
+const variantIcons: Record<AlertVariant, React.ElementType> = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  error: XCircle,
+  neutral: Info,
+};
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant = "info", dismissible, onDismiss, children, ...props }, ref) => {
+    const Icon = variantIcons[variant];
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn("relative flex gap-3 rounded-xl border p-4 shadow-sm", variantStyles[variant], className)}
+        {...props}
+      >
+        <Icon className="mt-0.5 size-4 shrink-0" aria-hidden />
+        <div className="flex-1 min-w-0">{children}</div>
+        {dismissible && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="shrink-0 rounded-md p-0.5 opacity-60 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+            aria-label="Dismiss"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 text-sm font-semibold leading-none", className)} {...props} />
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm opacity-90 leading-relaxed", className)} {...props} />
+  )
+);
+AlertDescription.displayName = "AlertDescription";
+
+export interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+}
+
+const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
+  ({ className, variant = "info", dismissible, onDismiss, children, ...props }, ref) => {
+    const Icon = variantIcons[variant];
+    return (
+      <div
+        ref={ref}
+        role="banner"
+        className={cn("flex items-center gap-3 border-b px-4 py-3", variantStyles[variant], className)}
+        {...props}
+      >
+        <Icon className="size-4 shrink-0" aria-hidden />
+        <div className="flex-1 min-w-0 text-sm">{children}</div>
+        {dismissible && (
+          <button
+            type="button"
+            onClick={onDismiss}
+            className="shrink-0 rounded-md p-0.5 opacity-60 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+            aria-label="Dismiss"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+Banner.displayName = "Banner";
+
+export { Alert, AlertTitle, AlertDescription, Banner };

package/src/avatar-group.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
+
+export interface AvatarGroupItem {
+  src?: string;
+  fallback: string;
+  alt?: string;
+}
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatars: AvatarGroupItem[];
+  max?: number;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeClasses: Record<NonNullable<AvatarGroupProps["size"]>, string> = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10",
+};
+
+const fontSizeClasses: Record<NonNullable<AvatarGroupProps["size"]>, string> = {
+  sm: "text-[10px]",
+  md: "text-xs",
+  lg: "text-xs",
+};
+
+const overlapClasses: Record<NonNullable<AvatarGroupProps["size"]>, string> = {
+  sm: "-ml-2",
+  md: "-ml-2",
+  lg: "-ml-2",
+};
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ avatars, max = 4, size = "md", className, ...props }, ref) => {
+    const visible = avatars.slice(0, max);
+    const overflowCount = avatars.length - max;
+    const totalSlots = visible.length + (overflowCount > 0 ? 1 : 0);
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center", className)}
+        {...props}
+      >
+        {visible.map((avatar, index) => {
+          const zIndex = totalSlots - index;
+          return (
+            <Avatar
+              key={index}
+              className={cn(
+                sizeClasses[size],
+                overlapClasses[size],
+                "ring-2 ring-background border border-border shrink-0 transition-[margin] duration-[var(--duration-pg-fast,150ms)] ease-[var(--ease-pg-standard,cubic-bezier(0.4,0,0.2,1))] first:ml-0",
+              )}
+              style={{ zIndex }}
+            >
+              {avatar.src && (
+                <AvatarImage src={avatar.src} alt={avatar.alt ?? avatar.fallback} />
+              )}
+              <AvatarFallback
+                className={cn(
+                  fontSizeClasses[size],
+                  "font-medium",
+                )}
+              >
+                {avatar.fallback}
+              </AvatarFallback>
+            </Avatar>
+          );
+        })}
+
+        {overflowCount > 0 && (
+          <div
+            className={cn(
+              sizeClasses[size],
+              overlapClasses[size],
+              fontSizeClasses[size],
+              "relative shrink-0 flex items-center justify-center rounded-full border border-border bg-muted text-muted-foreground font-medium ring-2 ring-background transition-[margin] duration-[var(--duration-pg-fast,150ms)] ease-[var(--ease-pg-standard,cubic-bezier(0.4,0,0.2,1))]",
+            )}
+            style={{ zIndex: 0 }}
+          >
+            +{overflowCount}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+AvatarGroup.displayName = "AvatarGroup";
+
+export { AvatarGroup };

package/src/avatar-tag.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { X } from "lucide-react";
+import { cn } from "./utils";
+
+export type AvatarTagSize = "sm" | "md" | "lg";
+
+export interface AvatarTagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Display label for the tag */
+  label: string;
+  /** Optional image src for the avatar */
+  src?: string;
+  /** Alt text for the avatar image */
+  alt?: string;
+  /** Size variant */
+  size?: AvatarTagSize;
+  /** Called when the remove button is clicked */
+  onRemove?: () => void;
+  /** Disables interaction */
+  disabled?: boolean;
+}
+
+function getInitials(label: string): string {
+  const words = label.trim().split(/\s+/);
+  if (words.length === 1) {
+    return words[0].slice(0, 2).toUpperCase();
+  }
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+}
+
+const sizeConfig: Record<
+  AvatarTagSize,
+  { avatar: string; text: string; icon: string; padding: string }
+> = {
+  sm: {
+    avatar: "h-[18px] w-[18px]",
+    text: "text-[10px]",
+    icon: "size-2.5",
+    padding: "px-1.5 py-0.5 gap-1",
+  },
+  md: {
+    avatar: "h-5 w-5",
+    text: "text-xs",
+    icon: "size-3",
+    padding: "px-2 py-0.5 gap-1",
+  },
+  lg: {
+    avatar: "h-6 w-6",
+    text: "text-sm",
+    icon: "size-3.5",
+    padding: "px-2.5 py-1 gap-1.5",
+  },
+};
+
+const AvatarTag = React.forwardRef<HTMLSpanElement, AvatarTagProps>(
+  (
+    {
+      label,
+      src,
+      alt,
+      size = "md",
+      onRemove,
+      disabled = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const cfg = sizeConfig[size];
+    const initials = getInitials(label);
+
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "inline-flex items-center rounded-full border border-border bg-card font-medium transition-colors duration-[var(--duration-pg-fast,150ms)] ease-[var(--ease-pg-standard,cubic-bezier(0.4,0,0.2,1))]",
+          cfg.padding,
+          cfg.text,
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        )}
+        {...props}
+      >
+        {/* Avatar */}
+        <AvatarPrimitive.Root
+          className={cn(
+            "relative shrink-0 overflow-hidden rounded-full",
+            cfg.avatar
+          )}
+        >
+          <AvatarPrimitive.Image
+            src={src}
+            alt={alt ?? label}
+            className="aspect-square h-full w-full object-cover"
+          />
+          <AvatarPrimitive.Fallback
+            className={cn(
+              "flex h-full w-full items-center justify-center rounded-full bg-primary/10 text-primary font-semibold leading-none",
+              cfg.text
+            )}
+          >
+            {initials}
+          </AvatarPrimitive.Fallback>
+        </AvatarPrimitive.Root>
+
+        {/* Label */}
+        <span className="leading-none select-none">{label}</span>
+
+        {/* Remove button */}
+        {onRemove && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (!disabled) onRemove();
+            }}
+            disabled={disabled}
+            className={cn(
+              "flex items-center justify-center rounded-full opacity-60 transition-opacity duration-[var(--duration-pg-fast,150ms)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+              disabled && "pointer-events-none"
+            )}
+            aria-label={`Remove ${label}`}
+          >
+            <X className={cfg.icon} />
+          </button>
+        )}
+      </span>
+    );
+  }
+);
+
+AvatarTag.displayName = "AvatarTag";
+
+export { AvatarTag };

package/src/avatar.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "./utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full border border-border bg-muted", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full object-cover", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/badge.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { cn } from "./utils";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: "default" | "secondary" | "success" | "warning" | "error" | "outline";
+  size?: "sm" | "md" | "lg";
+  square?: boolean;
+  dot?: boolean;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+}
+
+const variantClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
+  default:
+    "bg-primary/10 text-primary border border-primary/20",
+  secondary:
+    "bg-muted text-muted-foreground border border-border",
+  success:
+    "bg-green-500/10 text-green-700 border border-green-500/20 dark:text-green-400",
+  warning:
+    "bg-amber-500/10 text-amber-700 border border-amber-500/20 dark:text-amber-400",
+  error:
+    "bg-red-500/10 text-red-700 border border-red-500/20 dark:text-red-400",
+  outline:
+    "bg-transparent text-foreground border border-border",
+};
+
+const sizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {
+  sm: "text-[10px] px-1.5 py-0.5 gap-1",
+  md: "text-xs px-2 py-0.5 gap-1",
+  lg: "text-sm px-2.5 py-1 gap-1.5",
+};
+
+const dotColorClasses: Record<NonNullable<BadgeProps["variant"]>, string> = {
+  default: "bg-primary",
+  secondary: "bg-muted-foreground",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  error: "bg-red-500",
+  outline: "bg-foreground",
+};
+
+const dotSizeClasses: Record<NonNullable<BadgeProps["size"]>, string> = {
+  sm: "size-1.5",
+  md: "size-1.5",
+  lg: "size-2",
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      variant = "default",
+      size = "md",
+      square = false,
+      dot = false,
+      leftIcon,
+      rightIcon,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "inline-flex items-center font-medium whitespace-nowrap transition-colors duration-pg-fast ease-pg-standard",
+          square ? "rounded-md" : "rounded-full",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      >
+        {dot && (
+          <span
+            className={cn(
+              "rounded-full flex-shrink-0",
+              dotSizeClasses[size],
+              dotColorClasses[variant]
+            )}
+          />
+        )}
+        {!dot && leftIcon && (
+          <span className="inline-flex items-center flex-shrink-0">{leftIcon}</span>
+        )}
+        {children}
+        {rightIcon && (
+          <span className="inline-flex items-center flex-shrink-0">{rightIcon}</span>
+        )}
+      </span>
+    );
+  }
+);
+Badge.displayName = "Badge";

package/src/blanket.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+
+export interface BlanketProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Controls visibility of the blanket */
+  open?: boolean;
+  /** Adds semi-transparent black background (default: true) */
+  isTinted?: boolean;
+  /** Makes blanket completely transparent — only blocks pointer events */
+  isTransparent?: boolean;
+  /** Called when the blanket is clicked */
+  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  /** When true, pointer events pass through the blanket */
+  shouldAllowClickThrough?: boolean;
+}
+
+const Blanket = React.forwardRef<HTMLDivElement, BlanketProps>(
+  (
+    {
+      open = true,
+      isTinted = true,
+      isTransparent = false,
+      onClick,
+      shouldAllowClickThrough = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-open={open}
+        aria-hidden="true"
+        onClick={onClick}
+        className={cn(
+          "fixed inset-0 z-40",
+          // Animate in/out
+          "data-[open=true]:animate-in data-[open=false]:animate-out",
+          "data-[open=true]:fade-in-0 data-[open=false]:fade-out-0",
+          "transition-colors duration-pg-fast ease-pg-standard",
+          // Visibility
+          !open && "pointer-events-none",
+          // Background
+          !isTransparent && isTinted && "bg-black/50 backdrop-blur-sm",
+          isTransparent && "bg-transparent",
+          // Click-through
+          shouldAllowClickThrough && "pointer-events-none",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Blanket.displayName = "Blanket";
+
+export { Blanket };