@payglocal_ui/flux-ui 0.1.0

package/src/select.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "./utils";
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-11 min-h-11 w-full items-center justify-between gap-2.5 rounded-lg border border-border bg-card px-4 py-2 text-[15px] text-foreground shadow-sm outline-none",
+      "ring-ring/50 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "[&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground opacity-70" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1 text-muted-foreground", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1 text-muted-foreground", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-[120] max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
+        "data-[state=open]:opacity-100 data-[state=closed]:opacity-0 transition-opacity duration-150",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1 max-h-72 overflow-y-auto",
+          position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-lg py-2 pl-2 pr-8 text-sm outline-none",
+      "focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4 text-primary" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/separator.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "./utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/side-nav.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "./utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface SideNavProps extends React.ComponentPropsWithoutRef<"aside"> {
+  /** "collapsed" renders icon-only at 60px; "expanded" renders full at 240px (default) */
+  width?: "collapsed" | "expanded";
+  /** Controlled collapsed state */
+  isCollapsed?: boolean;
+  /** Called when the sidebar requests a collapse/expand */
+  onCollapse?: (collapsed: boolean) => void;
+}
+
+export interface SideNavItemProps extends React.ComponentPropsWithoutRef<"a"> {
+  /** Icon element — required, rendered at size-4 shrink-0 */
+  icon: React.ReactNode;
+  /** Visible label — hidden when sidebar is collapsed */
+  label: string;
+  /** Highlights the item as the current route */
+  isActive?: boolean;
+  /** Navigable href — renders an <a> when provided */
+  href?: string;
+  /** Click handler */
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  /** Optional badge slot rendered after the label */
+  badge?: React.ReactNode;
+  /** Injected by SideNavSection — consumers should not pass this */
+  _collapsed?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface SideNavContextValue {
+  isCollapsed: boolean;
+}
+
+const SideNavContext = React.createContext<SideNavContextValue>({
+  isCollapsed: false,
+});
+
+function useSideNavContext() {
+  return React.useContext(SideNavContext);
+}
+
+// ---------------------------------------------------------------------------
+// SideNav
+// ---------------------------------------------------------------------------
+
+const SideNav = React.forwardRef<HTMLElement, SideNavProps>(
+  (
+    {
+      className,
+      width = "expanded",
+      isCollapsed: isCollapsedProp,
+      onCollapse,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const collapsed =
+      isCollapsedProp !== undefined ? isCollapsedProp : width === "collapsed";
+
+    return (
+      <SideNavContext.Provider value={{ isCollapsed: collapsed }}>
+        <aside
+          ref={ref}
+          data-slot="side-nav"
+          data-collapsed={collapsed}
+          className={cn(
+            "flex flex-col bg-sidebar border-r border-sidebar-border",
+            "transition-all duration-pg-normal ease-pg-standard",
+            collapsed ? "w-[60px]" : "w-[240px]",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </aside>
+      </SideNavContext.Provider>
+    );
+  }
+);
+SideNav.displayName = "SideNav";
+
+// ---------------------------------------------------------------------------
+// SideNavHeader
+// ---------------------------------------------------------------------------
+
+const SideNavHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="side-nav-header"
+    className={cn(
+      "px-4 py-4 border-b border-sidebar-border shrink-0",
+      className
+    )}
+    {...props}
+  />
+));
+SideNavHeader.displayName = "SideNavHeader";
+
+// ---------------------------------------------------------------------------
+// SideNavSection
+// ---------------------------------------------------------------------------
+
+interface SideNavSectionProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Optional section label — hidden when sidebar is collapsed */
+  label?: string;
+}
+
+const SideNavSection = React.forwardRef<HTMLDivElement, SideNavSectionProps>(
+  ({ className, label, children, ...props }, ref) => {
+    const { isCollapsed } = useSideNavContext();
+
+    return (
+      <div
+        ref={ref}
+        data-slot="side-nav-section"
+        className={cn("px-3 py-2", className)}
+        {...props}
+      >
+        {label && !isCollapsed && (
+          <p className="mb-1 px-3 text-xs font-medium text-muted-foreground uppercase tracking-wider select-none">
+            {label}
+          </p>
+        )}
+        {children}
+      </div>
+    );
+  }
+);
+SideNavSection.displayName = "SideNavSection";
+
+// ---------------------------------------------------------------------------
+// SideNavItem
+// ---------------------------------------------------------------------------
+
+const SideNavItem = React.forwardRef<HTMLAnchorElement, SideNavItemProps>(
+  (
+    {
+      className,
+      icon,
+      label,
+      isActive = false,
+      href,
+      onClick,
+      badge,
+      _collapsed,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isCollapsed } = useSideNavContext();
+    const collapsed = _collapsed !== undefined ? _collapsed : isCollapsed;
+
+    const baseClassName = cn(
+      "flex items-center gap-3 px-3 py-2 rounded-lg text-sm cursor-pointer",
+      "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",
+      isActive
+        ? "bg-primary/10 text-primary font-medium"
+        : "text-sidebar-foreground hover:bg-muted/50",
+      collapsed && "justify-center px-0",
+      className
+    );
+
+    const content = (
+      <>
+        <span className="size-4 shrink-0 flex items-center justify-center">
+          {icon}
+        </span>
+        {!collapsed && (
+          <>
+            <span className="flex-1 truncate">{label}</span>
+            {badge && <span className="shrink-0">{badge}</span>}
+          </>
+        )}
+      </>
+    );
+
+    if (href) {
+      return (
+        <a
+          ref={ref}
+          href={href}
+          title={collapsed ? label : undefined}
+          aria-current={isActive ? "page" : undefined}
+          className={baseClassName}
+          onClick={onClick as React.MouseEventHandler<HTMLAnchorElement>}
+          {...props}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <a
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        title={collapsed ? label : undefined}
+        aria-current={isActive ? "page" : undefined}
+        className={baseClassName}
+        onClick={onClick as React.MouseEventHandler<HTMLAnchorElement>}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(e as unknown as React.MouseEvent<HTMLElement>);
+          }
+        }}
+        {...props}
+      >
+        {content}
+      </a>
+    );
+  }
+);
+SideNavItem.displayName = "SideNavItem";
+
+// ---------------------------------------------------------------------------
+// SideNavFooter
+// ---------------------------------------------------------------------------
+
+const SideNavFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="side-nav-footer"
+    className={cn(
+      "mt-auto border-t border-sidebar-border px-3 py-3 shrink-0",
+      className
+    )}
+    {...props}
+  />
+));
+SideNavFooter.displayName = "SideNavFooter";
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export {
+  SideNav,
+  SideNavHeader,
+  SideNavSection,
+  SideNavItem,
+  SideNavFooter,
+};

package/src/skeleton.tsx

@@ -0,0 +1,74 @@
+import { cn } from "./utils";
+
+interface ShimmerProps {
+  className?: string;
+  rounded?: "sm" | "md" | "lg" | "full";
+}
+
+export function Shimmer({ className, rounded = "md" }: ShimmerProps) {
+  const r = { sm: "rounded", md: "rounded-lg", lg: "rounded-xl", full: "rounded-full" }[rounded];
+  return <div className={cn("shimmer", r, className)} />;
+}
+
+export function StatCardSkeleton() {
+  return (
+    <div className="bg-card text-card-foreground rounded-xl p-5 flex flex-col gap-3 border border-border shadow-sm">
+      <div className="flex items-center justify-between">
+        <Shimmer className="h-3 w-28" />
+        <Shimmer className="h-10 w-10" rounded="full" />
+      </div>
+      <Shimmer className="h-9 w-44 mt-1" />
+      <Shimmer className="h-3 w-32" />
+    </div>
+  );
+}
+
+export function TableRowSkeleton({
+  cols = 6,
+  comfortable = false,
+  density: densityProp,
+  snug = false,
+}: {
+  cols?: number;
+  /** @deprecated prefer `density` */
+  comfortable?: boolean;
+  density?: "default" | "comfortable" | "compact";
+  snug?: boolean;
+}) {
+  const density =
+    densityProp ??
+    (comfortable ? "comfortable" : "default");
+  const cellPad =
+    density === "comfortable"
+      ? "px-5 py-4"
+      : density === "compact"
+        ? snug
+          ? "pl-1.5 pr-2.5 py-2.5"
+          : "px-3 py-2.5"
+        : "px-4 py-3.5";
+  return (
+    <tr
+      className={cn(
+        "border-b border-border/60",
+        density === "comfortable" && "min-h-[56px]",
+        density === "compact" && "min-h-[44px]"
+      )}
+    >
+      {Array.from({ length: cols }).map((_, i) => (
+        <td key={i} className={cellPad}>
+          <Shimmer className={cn("h-3.5", i === 0 ? "w-20" : i === cols - 1 ? "w-14" : "w-28")} />
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+export function ChartSkeleton({ height = "h-48" }: { height?: string }) {
+  return (
+    <div className={cn("flex items-end gap-2 px-2", height)}>
+      {[55, 72, 40, 88, 65, 82, 48, 95, 60, 70].map((h, i) => (
+        <div key={i} className="flex-1 shimmer rounded-t-md" style={{ height: `${h}%` }} />
+      ))}
+    </div>
+  );
+}

package/src/slider.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "./utils";
+
+export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {}
+
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  ({ className, ...props }, ref) => (
+    <SliderPrimitive.Root
+      ref={ref}
+      className={cn("relative flex w-full touch-none select-none items-center", className)}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb className="block h-[18px] w-[18px] rounded-full border-2 border-primary bg-card shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50" />
+    </SliderPrimitive.Root>
+  )
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/src/sonner.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { useEffect, useState } from "react";
+
+/** Drop-in toast host; pair with `toast` from `sonner`. Resolves theme via next-themes when mounted. */
+export function Toaster({ theme, ...props }: ToasterProps) {
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const resolved =
+    theme ?? (mounted && resolvedTheme === "dark" ? "dark" : "light");
+
+  return (
+    <Sonner
+      theme={resolved}
+      position="bottom-right"
+      toastOptions={{
+        classNames: {
+          toast:
+            "bg-[var(--popover)] text-[var(--popover-foreground)] border-[var(--border)] shadow-lg rounded-[10px] text-[13px]",
+          description: "text-[var(--muted-foreground)]",
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+export { toast } from "sonner";

package/src/spinner.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import { Loader2 } from "lucide-react";
+
+import { cn } from "./utils";
+
+const sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 28,
+  xl: 36,
+} as const;
+
+const colorMap = {
+  primary: "text-primary",
+  muted: "text-muted-foreground",
+  white: "text-white",
+  inherit: "",
+} as const;
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: keyof typeof sizeMap;
+  color?: keyof typeof colorMap;
+}
+
+const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
+  ({ className, size = "md", color = "primary", ...props }, ref) => {
+    const px = sizeMap[size];
+
+    return (
+      <span
+        ref={ref}
+        data-slot="spinner"
+        role="status"
+        aria-label="Loading"
+        className={cn("inline-flex items-center justify-center", colorMap[color], className)}
+        {...props}
+      >
+        <Loader2
+          width={px}
+          height={px}
+          className="animate-spin"
+          aria-hidden="true"
+        />
+        <span className="sr-only">Loading...</span>
+      </span>
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+export { Spinner };