@payglocal_ui/flux-ui 0.1.0

package/src/progress-indicator.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+
+export type ProgressIndicatorSize = "sm" | "md" | "lg";
+
+export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  selectedIndex: number;
+  values: string[];
+  size?: ProgressIndicatorSize;
+  onChange?: (index: number) => void;
+}
+
+const dotSizeMap: Record<ProgressIndicatorSize, { base: string; active: string }> = {
+  sm: {
+    base: "h-1.5 w-1.5",
+    active: "h-1.5 w-4",
+  },
+  md: {
+    base: "h-2 w-2",
+    active: "h-2 w-6",
+  },
+  lg: {
+    base: "h-2.5 w-2.5",
+    active: "h-2.5 w-8",
+  },
+};
+
+const ProgressIndicator = React.forwardRef<HTMLDivElement, ProgressIndicatorProps>(
+  ({ className, selectedIndex, values, size = "md", onChange, ...props }, ref) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    const handleKeyDown = React.useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!onChange) return;
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          const next = Math.min(selectedIndex + 1, values.length - 1);
+          if (next !== selectedIndex) onChange(next);
+        } else if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          const prev = Math.max(selectedIndex - 1, 0);
+          if (prev !== selectedIndex) onChange(prev);
+        }
+      },
+      [onChange, selectedIndex, values.length]
+    );
+
+    const sizes = dotSizeMap[size];
+
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        aria-label={props["aria-label"] ?? "Step indicator"}
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
+        className={cn("flex items-center gap-1.5 outline-none focus-visible:outline-none", className)}
+        {...props}
+      >
+        {values.map((label, index) => {
+          const isActive = index === selectedIndex;
+          return (
+            <button
+              key={index}
+              type="button"
+              role="tab"
+              aria-label={label}
+              aria-current={isActive ? "step" : undefined}
+              aria-selected={isActive}
+              tabIndex={-1}
+              onClick={() => onChange?.(index)}
+              className={cn(
+                "rounded-full transition-all duration-pg-normal ease-pg-standard",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                isActive
+                  ? cn("bg-primary", sizes.active)
+                  : cn(
+                      "bg-muted-foreground/30 hover:bg-muted-foreground/50",
+                      sizes.base
+                    )
+              )}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+);
+ProgressIndicator.displayName = "ProgressIndicator";
+
+export { ProgressIndicator };

package/src/progress.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { Check } from "lucide-react";
+import { cn } from "./utils";
+
+export type ProgressVariant = "default" | "success" | "warning" | "error";
+export type ProgressSize = "xs" | "sm" | "md" | "lg";
+
+export interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+  variant?: ProgressVariant;
+  size?: ProgressSize;
+  label?: boolean;
+}
+
+const variantTrack: Record<ProgressVariant, string> = {
+  default: "bg-primary",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  error: "bg-red-500",
+};
+
+const sizeClasses: Record<ProgressSize, string> = {
+  xs: "h-1",
+  sm: "h-1.5",
+  md: "h-2",
+  lg: "h-3",
+};
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  ProgressProps
+>(({ className, value, variant = "default", size = "md", label, ...props }, ref) => (
+  <div className="w-full">
+    <ProgressPrimitive.Root
+      ref={ref}
+      className={cn("relative w-full overflow-hidden rounded-full bg-muted", sizeClasses[size], className)}
+      {...props}
+      value={value}
+    >
+      <ProgressPrimitive.Indicator
+        className={cn("h-full w-full flex-1 transition-all duration-pg-slow ease-pg-standard", variantTrack[variant])}
+        style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+    {label && <p className="mt-1 text-xs text-muted-foreground text-right">{value ?? 0}%</p>}
+  </div>
+));
+Progress.displayName = "Progress";
+
+export type ProgressStepStatus = "complete" | "current" | "upcoming";
+
+export interface ProgressTrackerStep {
+  label: string;
+  description?: string;
+  status: ProgressStepStatus;
+}
+
+export interface ProgressTrackerProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: ProgressTrackerStep[];
+}
+
+const ProgressTracker = React.forwardRef<HTMLDivElement, ProgressTrackerProps>(
+  ({ className, steps, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-start", className)} {...props}>
+      {steps.map((step, i) => (
+        <React.Fragment key={i}>
+          <div className="flex flex-col items-center gap-1.5 min-w-0">
+            <div className={cn(
+              "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
+              step.status === "complete" && "bg-primary border-primary text-primary-foreground",
+              step.status === "current" && "bg-primary/10 border-primary text-primary",
+              step.status === "upcoming" && "bg-card border-border text-muted-foreground"
+            )}>
+              {step.status === "complete" ? <Check className="size-4" strokeWidth={2.5} /> : i + 1}
+            </div>
+            <div className="text-center px-1">
+              <p className={cn("text-xs font-medium", step.status === "upcoming" ? "text-muted-foreground" : "text-foreground")}>{step.label}</p>
+              {step.description && <p className="text-[11px] text-muted-foreground mt-0.5">{step.description}</p>}
+            </div>
+          </div>
+          {i < steps.length - 1 && (
+            <div className="flex-1 mt-4 mx-1">
+              <div className={cn("h-0.5 w-full rounded-full transition-colors", step.status === "complete" ? "bg-primary" : "bg-border")} />
+            </div>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  )
+);
+ProgressTracker.displayName = "ProgressTracker";
+
+export { Progress, ProgressTracker };

package/src/radio-group.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "./utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex flex-col gap-2", className)}
+    {...props}
+  />
+));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+export type RadioGroupItemProps = React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Item
+>;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  RadioGroupItemProps
+>(({ className, ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      "size-4 shrink-0 rounded-full border border-border bg-card shadow-sm",
+      "transition-colors duration-pg-fast ease-pg-standard",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+      "data-[state=checked]:border-primary",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <span className="block size-2 rounded-full bg-primary" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/responsive.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+
+// ---------------------------------------------------------------------------
+// Breakpoint type
+// ---------------------------------------------------------------------------
+
+export type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
+
+// ---------------------------------------------------------------------------
+// Internal helpers
+// ---------------------------------------------------------------------------
+
+/** Ordered list — index used for comparison */
+const BREAKPOINT_ORDER: Breakpoint[] = ["sm", "md", "lg", "xl", "2xl"];
+
+/** Tailwind min-width values aligned with default config */
+const BREAKPOINT_MIN_WIDTH: Record<Breakpoint, number> = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+function bpIndex(bp: Breakpoint): number {
+  return BREAKPOINT_ORDER.indexOf(bp);
+}
+
+// ---------------------------------------------------------------------------
+// Show
+// ---------------------------------------------------------------------------
+
+export interface ShowProps extends React.HTMLAttributes<HTMLElement> {
+  /** Render children at this breakpoint and above. */
+  above?: Breakpoint;
+  /** Render children strictly below this breakpoint. */
+  below?: Breakpoint;
+  /** HTML element to render. Defaults to "div". */
+  as?: React.ElementType;
+  /** Display value to restore when visible. Defaults to "block". */
+  display?: "block" | "flex" | "inline" | "inline-block" | "grid" | "inline-flex";
+  children?: React.ReactNode;
+}
+
+const DISPLAY_ABOVE_CLASS: Record<
+  Breakpoint,
+  Record<ShowProps["display"] & string, string>
+> = {
+  sm: {
+    block: "sm:block",
+    flex: "sm:flex",
+    inline: "sm:inline",
+    "inline-block": "sm:inline-block",
+    grid: "sm:grid",
+    "inline-flex": "sm:inline-flex",
+  },
+  md: {
+    block: "md:block",
+    flex: "md:flex",
+    inline: "md:inline",
+    "inline-block": "md:inline-block",
+    grid: "md:grid",
+    "inline-flex": "md:inline-flex",
+  },
+  lg: {
+    block: "lg:block",
+    flex: "lg:flex",
+    inline: "lg:inline",
+    "inline-block": "lg:inline-block",
+    grid: "lg:grid",
+    "inline-flex": "lg:inline-flex",
+  },
+  xl: {
+    block: "xl:block",
+    flex: "xl:flex",
+    inline: "xl:inline",
+    "inline-block": "xl:inline-block",
+    grid: "xl:grid",
+    "inline-flex": "xl:inline-flex",
+  },
+  "2xl": {
+    block: "2xl:block",
+    flex: "2xl:flex",
+    inline: "2xl:inline",
+    "inline-block": "2xl:inline-block",
+    grid: "2xl:grid",
+    "inline-flex": "2xl:inline-flex",
+  },
+};
+
+/** Tailwind class to hide at a breakpoint and above */
+const HIDDEN_ABOVE_CLASS: Record<Breakpoint, string> = {
+  sm: "sm:hidden",
+  md: "md:hidden",
+  lg: "lg:hidden",
+  xl: "xl:hidden",
+  "2xl": "2xl:hidden",
+};
+
+export const Show = React.forwardRef<HTMLElement, ShowProps>(
+  (
+    {
+      above,
+      below,
+      as: Tag = "div",
+      display = "block",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    let visibilityClass: string;
+
+    if (above) {
+      // hidden by default, become visible at `above` breakpoint
+      visibilityClass = cn("hidden", DISPLAY_ABOVE_CLASS[above][display]);
+    } else if (below) {
+      // visible by default, hidden at `below` breakpoint and above
+      visibilityClass = HIDDEN_ABOVE_CLASS[below];
+    } else {
+      visibilityClass = "";
+    }
+
+    return (
+      <Tag
+        ref={ref}
+        className={cn(visibilityClass, className)}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
+Show.displayName = "Show";
+
+// ---------------------------------------------------------------------------
+// Hide
+// ---------------------------------------------------------------------------
+
+export interface HideProps extends React.HTMLAttributes<HTMLElement> {
+  /** Hide children at this breakpoint and above. */
+  above?: Breakpoint;
+  /** Hide children strictly below this breakpoint (i.e. visible at/above). */
+  below?: Breakpoint;
+  /** HTML element to render. Defaults to "div". */
+  as?: React.ElementType;
+  /** Display value to restore when visible. Defaults to "block". */
+  display?: "block" | "flex" | "inline" | "inline-block" | "grid" | "inline-flex";
+  children?: React.ReactNode;
+}
+
+export const Hide = React.forwardRef<HTMLElement, HideProps>(
+  (
+    {
+      above,
+      below,
+      as: Tag = "div",
+      display = "block",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    let visibilityClass: string;
+
+    if (above) {
+      // visible by default, hidden at `above` breakpoint and above
+      visibilityClass = HIDDEN_ABOVE_CLASS[above];
+    } else if (below) {
+      // hidden by default (below breakpoint), visible at/above breakpoint — inverse of Show above
+      visibilityClass = cn("hidden", DISPLAY_ABOVE_CLASS[below][display]);
+    } else {
+      visibilityClass = "";
+    }
+
+    return (
+      <Tag
+        ref={ref}
+        className={cn(visibilityClass, className)}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
+Hide.displayName = "Hide";
+
+// ---------------------------------------------------------------------------
+// useBreakpoint hook
+// ---------------------------------------------------------------------------
+
+function getActiveBreakpoint(): Breakpoint | null {
+  if (typeof window === "undefined") return null;
+  // Walk from largest to smallest — first match wins
+  for (let i = BREAKPOINT_ORDER.length - 1; i >= 0; i--) {
+    const bp = BREAKPOINT_ORDER[i];
+    if (window.matchMedia(`(min-width: ${BREAKPOINT_MIN_WIDTH[bp]}px)`).matches) {
+      return bp;
+    }
+  }
+  return null;
+}
+
+export interface UseBreakpointReturn {
+  /** The currently active (highest matching) breakpoint, or null on SSR / xs viewport. */
+  breakpoint: Breakpoint | null;
+  /** Returns true when the viewport is at or above `bp`. */
+  isAbove: (bp: Breakpoint) => boolean;
+  /** Returns true when the viewport is strictly below `bp`. */
+  isBelow: (bp: Breakpoint) => boolean;
+  /** True when no breakpoint is active (viewport < 640 px). */
+  isMobile: boolean;
+  /** True when active breakpoint is md (768–1023 px). */
+  isTablet: boolean;
+  /** True when active breakpoint is lg or above (≥ 1024 px). */
+  isDesktop: boolean;
+}
+
+export function useBreakpoint(): UseBreakpointReturn {
+  const [breakpoint, setBreakpoint] = React.useState<Breakpoint | null>(() =>
+    getActiveBreakpoint()
+  );
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    // Build one MediaQueryList per breakpoint and attach listeners
+    const queries = BREAKPOINT_ORDER.map((bp) =>
+      window.matchMedia(`(min-width: ${BREAKPOINT_MIN_WIDTH[bp]}px)`)
+    );
+
+    function handleChange() {
+      setBreakpoint(getActiveBreakpoint());
+    }
+
+    queries.forEach((mql) => mql.addEventListener("change", handleChange));
+    // Sync once on mount (handles SSR hydration mismatch)
+    handleChange();
+
+    return () => {
+      queries.forEach((mql) => mql.removeEventListener("change", handleChange));
+    };
+  }, []);
+
+  const isAbove = React.useCallback(
+    (bp: Breakpoint): boolean => {
+      if (breakpoint === null) return false;
+      return bpIndex(breakpoint) >= bpIndex(bp);
+    },
+    [breakpoint]
+  );
+
+  const isBelow = React.useCallback(
+    (bp: Breakpoint): boolean => {
+      if (breakpoint === null) return true;
+      return bpIndex(breakpoint) < bpIndex(bp);
+    },
+    [breakpoint]
+  );
+
+  return {
+    breakpoint,
+    isAbove,
+    isBelow,
+    isMobile: breakpoint === null,
+    isTablet: breakpoint === "md",
+    isDesktop: breakpoint !== null && bpIndex(breakpoint) >= bpIndex("lg"),
+  };
+}

package/src/scroll-area.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "./utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border hover:bg-muted-foreground/30" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/section-message.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { Info, CheckCircle2, AlertTriangle, XCircle, Sparkles } from "lucide-react";
+import { cn } from "./utils";
+
+export type SectionMessageVariant = "info" | "success" | "warning" | "error" | "discovery";
+
+export interface SectionMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: SectionMessageVariant;
+}
+
+const variantConfig: Record<
+  SectionMessageVariant,
+  { border: string; bg: string; icon: React.ElementType; iconColor: string }
+> = {
+  info: {
+    border: "border-l-blue-500",
+    bg: "bg-blue-50/60 dark:bg-blue-950/20",
+    icon: Info,
+    iconColor: "text-blue-500 dark:text-blue-400",
+  },
+  success: {
+    border: "border-l-green-500",
+    bg: "bg-green-50/60 dark:bg-green-950/20",
+    icon: CheckCircle2,
+    iconColor: "text-green-500 dark:text-green-400",
+  },
+  warning: {
+    border: "border-l-amber-500",
+    bg: "bg-amber-50/60 dark:bg-amber-950/20",
+    icon: AlertTriangle,
+    iconColor: "text-amber-500 dark:text-amber-400",
+  },
+  error: {
+    border: "border-l-red-500",
+    bg: "bg-red-50/60 dark:bg-red-950/20",
+    icon: XCircle,
+    iconColor: "text-red-500 dark:text-red-400",
+  },
+  discovery: {
+    border: "border-l-purple-500",
+    bg: "bg-purple-50/60 dark:bg-purple-950/20",
+    icon: Sparkles,
+    iconColor: "text-purple-500 dark:text-purple-400",
+  },
+};
+
+const SectionMessageVariantContext = React.createContext<SectionMessageVariant>("info");
+
+const SectionMessage = React.forwardRef<HTMLDivElement, SectionMessageProps>(
+  ({ className, variant = "info", children, ...props }, ref) => {
+    const config = variantConfig[variant];
+    const Icon = config.icon;
+    return (
+      <SectionMessageVariantContext.Provider value={variant}>
+        <div
+          ref={ref}
+          role="region"
+          className={cn(
+            "flex w-full gap-4 rounded-xl border border-l-4 border-border p-5 shadow-sm transition-colors duration-pg-fast ease-pg-standard",
+            config.border,
+            config.bg,
+            className
+          )}
+          {...props}
+        >
+          <Icon
+            className={cn("mt-0.5 size-5 shrink-0", config.iconColor)}
+            aria-hidden
+          />
+          <div className="flex-1 min-w-0">{children}</div>
+        </div>
+      </SectionMessageVariantContext.Provider>
+    );
+  }
+);
+SectionMessage.displayName = "SectionMessage";
+
+const SectionMessageTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h4
+    ref={ref}
+    className={cn("text-sm font-semibold text-foreground mb-1", className)}
+    {...props}
+  />
+));
+SectionMessageTitle.displayName = "SectionMessageTitle";
+
+const SectionMessageContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground leading-relaxed", className)}
+    {...props}
+  />
+));
+SectionMessageContent.displayName = "SectionMessageContent";
+
+const SectionMessageActions = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-wrap gap-2 mt-3", className)}
+    {...props}
+  />
+));
+SectionMessageActions.displayName = "SectionMessageActions";
+
+export {
+  SectionMessage,
+  SectionMessageTitle,
+  SectionMessageContent,
+  SectionMessageActions,
+};