@payglocal_ui/flux-ui 0.1.0

package/src/inline-dialog.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { X } from "lucide-react";
+import { cn } from "./utils";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface InlineDialogProps
+  extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}
+
+export interface InlineDialogContentProps
+  extends Omit<
+    React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,
+    "side" | "sideOffset"
+  > {
+  side?: "top" | "right" | "bottom" | "left";
+  sideOffset?: number;
+  /** Hide the built-in close button */
+  hideClose?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// InlineDialog (Popover root)
+// ---------------------------------------------------------------------------
+
+const InlineDialog = PopoverPrimitive.Root;
+InlineDialog.displayName = "InlineDialog";
+
+// ---------------------------------------------------------------------------
+// InlineDialogTrigger
+// ---------------------------------------------------------------------------
+
+const InlineDialogTrigger = PopoverPrimitive.Trigger;
+InlineDialogTrigger.displayName = "InlineDialogTrigger";
+
+// ---------------------------------------------------------------------------
+// Arrow positioning helpers
+// ---------------------------------------------------------------------------
+
+type ArrowSide = "top" | "right" | "bottom" | "left";
+
+/**
+ * Returns Tailwind classes that position the 8×8 arrow square on the correct
+ * edge of the floating card and rotate it so the corner points at the trigger.
+ */
+function getArrowClasses(side: ArrowSide): string {
+  const base =
+    "absolute size-2 bg-card border border-border pointer-events-none";
+
+  switch (side) {
+    case "top":
+      // Arrow appears on the bottom edge of the card (card is above trigger)
+      return cn(
+        base,
+        "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45",
+        "border-t-0 border-l-0"
+      );
+    case "bottom":
+      // Arrow appears on the top edge of the card (card is below trigger)
+      return cn(
+        base,
+        "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45",
+        "border-b-0 border-r-0"
+      );
+    case "left":
+      // Arrow appears on the right edge of the card (card is left of trigger)
+      return cn(
+        base,
+        "right-0 top-1/2 -translate-y-1/2 translate-x-1/2 rotate-45",
+        "border-t-0 border-l-0"
+      );
+    case "right":
+      // Arrow appears on the left edge of the card (card is right of trigger)
+      return cn(
+        base,
+        "left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 rotate-45",
+        "border-b-0 border-r-0"
+      );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// InlineDialogContent
+// ---------------------------------------------------------------------------
+
+const InlineDialogContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  InlineDialogContentProps
+>(
+  (
+    {
+      className,
+      side = "bottom",
+      sideOffset = 8,
+      hideClose = false,
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        side={side}
+        sideOffset={sideOffset}
+        className={cn(
+          // Base card
+          "relative z-[120] max-w-xs overflow-visible",
+          "rounded-xl border border-border bg-card p-4 text-foreground shadow-lg",
+          // Animation
+          "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
+          "transition-opacity duration-pg-fast ease-pg-standard",
+          "outline-none",
+          className
+        )}
+        {...props}
+      >
+        {/* Arrow pointer */}
+        <span className={getArrowClasses(side)} aria-hidden="true" />
+
+        {/* Close button */}
+        {!hideClose && (
+          <PopoverPrimitive.Close
+            className={cn(
+              "absolute right-2 top-2 z-10",
+              "inline-flex size-6 items-center justify-center rounded-md",
+              "text-muted-foreground hover:text-foreground",
+              "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"
+            )}
+            aria-label="Close"
+          >
+            <X className="size-3.5" />
+          </PopoverPrimitive.Close>
+        )}
+
+        {children}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+);
+InlineDialogContent.displayName = "InlineDialogContent";
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export { InlineDialog, InlineDialogTrigger, InlineDialogContent };

package/src/inline-edit.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import * as React from "react";
+import { Check, Pencil, X } from "lucide-react";
+import { cn } from "./utils";
+
+export interface InlineEditProps {
+  value: string;
+  onConfirm: (val: string) => void;
+  placeholder?: string;
+  multiline?: boolean;
+  disabled?: boolean;
+  showButtons?: boolean;
+  readClassName?: string;
+  inputClassName?: string;
+}
+
+const InlineEdit = React.forwardRef<HTMLDivElement, InlineEditProps>(
+  (
+    {
+      value,
+      onConfirm,
+      placeholder = "Click to edit…",
+      multiline = false,
+      disabled = false,
+      showButtons = false,
+      readClassName,
+      inputClassName,
+    },
+    ref
+  ) => {
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(value);
+    const [hovered, setHovered] = React.useState(false);
+    const inputRef = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+
+    React.useEffect(() => {
+      if (!editing) setDraft(value);
+    }, [value, editing]);
+
+    React.useEffect(() => {
+      if (editing) {
+        inputRef.current?.focus();
+        if (inputRef.current) {
+          const el = inputRef.current;
+          const len = el.value.length;
+          el.setSelectionRange(len, len);
+        }
+      }
+    }, [editing]);
+
+    const confirm = React.useCallback(() => {
+      setEditing(false);
+      if (draft !== value) onConfirm(draft);
+    }, [draft, value, onConfirm]);
+
+    const cancel = React.useCallback(() => {
+      setEditing(false);
+      setDraft(value);
+    }, [value]);
+
+    const handleKeyDown = React.useCallback(
+      (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" && !multiline) {
+          e.preventDefault();
+          confirm();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          cancel();
+        }
+      },
+      [confirm, cancel, multiline]
+    );
+
+    const handleBlur = React.useCallback(
+      (e: React.FocusEvent) => {
+        // If showButtons, don't auto-confirm on blur unless focus leaves the whole group
+        if (showButtons) {
+          const related = e.relatedTarget as Node | null;
+          const container = (e.currentTarget as HTMLElement).closest(
+            "[data-inline-edit]"
+          );
+          if (container && related && container.contains(related)) return;
+        }
+        confirm();
+      },
+      [confirm, showButtons]
+    );
+
+    const startEditing = () => {
+      if (disabled) return;
+      setEditing(true);
+    };
+
+    const sharedInputClass = cn(
+      "w-full rounded-md border border-border bg-card px-2 py-1 text-[15px] leading-tight text-foreground shadow-sm",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+      "transition-colors duration-pg-fast ease-pg-standard",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      inputClassName
+    );
+
+    return (
+      <div ref={ref} data-inline-edit="" className="relative inline-flex flex-col gap-1 max-w-full">
+        {editing ? (
+          <>
+            {multiline ? (
+              <textarea
+                ref={inputRef as React.Ref<HTMLTextAreaElement>}
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={handleBlur}
+                placeholder={placeholder}
+                rows={3}
+                className={cn(sharedInputClass, "resize-none leading-relaxed py-1.5")}
+              />
+            ) : (
+              <input
+                ref={inputRef as React.Ref<HTMLInputElement>}
+                type="text"
+                value={draft}
+                onChange={(e) => setDraft(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onBlur={handleBlur}
+                placeholder={placeholder}
+                className={sharedInputClass}
+              />
+            )}
+
+            {showButtons && (
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    confirm();
+                  }}
+                  className={cn(
+                    "inline-flex items-center justify-center rounded-md p-1",
+                    "text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-950/40",
+                    "transition-colors duration-pg-fast ease-pg-standard",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+                  )}
+                  aria-label="Confirm"
+                >
+                  <Check className="size-3.5" />
+                </button>
+                <button
+                  type="button"
+                  onMouseDown={(e) => {
+                    e.preventDefault();
+                    cancel();
+                  }}
+                  className={cn(
+                    "inline-flex items-center justify-center rounded-md p-1",
+                    "text-destructive hover:bg-destructive/10",
+                    "transition-colors duration-pg-fast ease-pg-standard",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35"
+                  )}
+                  aria-label="Cancel"
+                >
+                  <X className="size-3.5" />
+                </button>
+              </div>
+            )}
+          </>
+        ) : (
+          <span
+            role="button"
+            tabIndex={disabled ? -1 : 0}
+            aria-label={value || placeholder}
+            onMouseEnter={() => setHovered(true)}
+            onMouseLeave={() => setHovered(false)}
+            onClick={startEditing}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                startEditing();
+              }
+            }}
+            className={cn(
+              "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-[15px] leading-tight",
+              "transition-colors duration-pg-fast ease-pg-standard",
+              !disabled && "hover:bg-muted cursor-text",
+              disabled && "cursor-not-allowed opacity-50",
+              readClassName
+            )}
+          >
+            <span className={cn(!value && "text-muted-foreground")}>
+              {value || placeholder}
+            </span>
+            {!disabled && (
+              <Pencil
+                className={cn(
+                  "size-3.5 shrink-0 text-muted-foreground transition-opacity duration-pg-fast ease-pg-standard",
+                  hovered ? "opacity-100" : "opacity-0"
+                )}
+                aria-hidden
+              />
+            )}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+InlineEdit.displayName = "InlineEdit";
+
+export { InlineEdit };

package/src/input-group.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex w-full items-stretch rounded-xl border border-border bg-card shadow-sm outline-none transition-[color,box-shadow] dark:bg-card/50",
+        "min-h-11 h-11 has-[>textarea]:h-auto",
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring",
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto min-h-11 cursor-text select-none items-center justify-center gap-2 px-0 text-[15px] font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3.5 has-[>button]:-ml-[0.45rem] has-[>kbd]:-ml-[0.35rem]",
+        "inline-end":
+          "order-last pr-3.5 has-[>button]:-mr-[0.4rem] has-[>kbd]:-mr-[0.35rem]",
+        "block-start":
+          "order-first w-full justify-start border-b px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full justify-start border-t px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+);
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+const inputGroupButtonVariants = cva(
+  "inline-flex items-center justify-center gap-2 border border-transparent bg-transparent text-sm font-medium text-foreground shadow-none transition-colors hover:bg-muted",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+);
+
+function InputGroupButton({
+  className,
+  type = "button",
+  size = "xs",
+  ...props
+}: React.ComponentProps<"button"> & VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <button
+      type={type}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+};

package/src/input.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-11 min-h-11 w-full rounded-lg border border-border bg-card px-4 py-2 text-[15px] leading-tight shadow-sm transition-colors",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:bg-muted/40 disabled:opacity-60",
+          "read-only:bg-muted/25 read-only:text-muted-foreground",
+          "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25 dark:aria-invalid:ring-destructive/40",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/layout.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import { cn } from "./utils";
+
+/** Maps to Tailwind spacing steps used across PayGlocal dashboard surfaces */
+export type LayoutSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+const gapClass: Record<LayoutSpacing, string> = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4",
+  xl: "gap-6",
+};
+
+const padClass: Record<LayoutSpacing, string> = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+};
+
+const padXClass: Record<LayoutSpacing, string> = {
+  none: "px-0",
+  xs: "px-1",
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-6",
+  xl: "px-8",
+};
+
+const padYClass: Record<LayoutSpacing, string> = {
+  none: "py-0",
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6",
+  xl: "py-8",
+};
+
+export type BoxProps = React.HTMLAttributes<HTMLDivElement> & {
+  as?: React.ElementType;
+  p?: LayoutSpacing;
+  px?: LayoutSpacing;
+  py?: LayoutSpacing;
+};
+
+/** Neutral block with token-aligned padding; extend with `className` for radius, borders, flex, etc. */
+export function Box({ as: Comp = "div", className, p = "none", px, py, ...props }: BoxProps) {
+  const axis = px !== undefined || py !== undefined;
+  return (
+    <Comp
+      className={cn(
+        !axis && padClass[p],
+        px !== undefined && padXClass[px],
+        py !== undefined && padYClass[py],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export type StackProps = React.HTMLAttributes<HTMLDivElement> & {
+  as?: React.ElementType;
+  gap?: LayoutSpacing;
+  align?: "start" | "center" | "stretch" | "end";
+};
+
+/** Vertical flex stack; default gap matches common section rhythm (`gap-4`). */
+export function Stack({
+  as: Comp = "div",
+  className,
+  gap = "lg",
+  align = "stretch",
+  ...props
+}: StackProps) {
+  const alignCls =
+    align === "start"
+      ? "items-start"
+      : align === "center"
+        ? "items-center"
+        : align === "end"
+          ? "items-end"
+          : "items-stretch";
+  return <Comp className={cn("flex flex-col", gapClass[gap], alignCls, className)} {...props} />;
+}
+
+export type InlineProps = React.HTMLAttributes<HTMLDivElement> & {
+  gap?: LayoutSpacing;
+  wrap?: boolean;
+  justify?: "start" | "center" | "end" | "between";
+};
+
+/** Horizontal flex row for toolbars and inline field groups */
+export function Inline({
+  className,
+  gap = "md",
+  wrap = false,
+  justify = "start",
+  ...props
+}: InlineProps) {
+  const justifyCls =
+    justify === "center"
+      ? "justify-center"
+      : justify === "end"
+        ? "justify-end"
+        : justify === "between"
+          ? "justify-between"
+          : "justify-start";
+  return (
+    <div
+      className={cn("flex flex-row items-center", gapClass[gap], justifyCls, wrap && "flex-wrap", className)}
+      {...props}
+    />
+  );
+}