@payglocal_ui/flux-ui 0.1.0

package/src/flag.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import * as React from "react";
+import { Info, CheckCircle2, AlertTriangle, XCircle, X } from "lucide-react";
+import { cn } from "./utils";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type FlagVariant = "info" | "success" | "warning" | "error";
+export type FlagGroupPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+
+export interface FlagAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface FlagProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Heading text shown in bold */
+  title: string;
+  /** Optional body copy shown below the title */
+  description?: string;
+  /** Visual severity / colour */
+  variant?: FlagVariant;
+  /** Override the default lucide icon */
+  icon?: React.ReactNode;
+  /** Called when the close button is pressed */
+  onDismiss?: () => void;
+  /** Action buttons rendered below the content. Pass `false` to disable. */
+  autoDismiss?: number | false;
+  /** Optional CTA buttons */
+  actions?: FlagAction[];
+}
+
+export interface FlagGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Corner to anchor the stack */
+  position?: FlagGroupPosition;
+}
+
+export interface UseFlagGroupReturn {
+  flags: Array<FlagProps & { id: string }>;
+  addFlag: (flag: Omit<FlagProps, "onDismiss"> & { id?: string }) => string;
+  removeFlag: (id: string) => void;
+  clearAll: () => void;
+}
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const DEFAULT_AUTO_DISMISS = 8000;
+
+const variantBorder: Record<FlagVariant, string> = {
+  info: "border-l-blue-500",
+  success: "border-l-green-500",
+  warning: "border-l-amber-500",
+  error: "border-l-red-500",
+};
+
+const variantProgressBar: Record<FlagVariant, string> = {
+  info: "bg-blue-500",
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  error: "bg-red-500",
+};
+
+const variantIconColor: Record<FlagVariant, string> = {
+  info: "text-blue-500",
+  success: "text-green-500",
+  warning: "text-amber-500",
+  error: "text-red-500",
+};
+
+const defaultIcons: Record<FlagVariant, React.ElementType> = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  error: XCircle,
+};
+
+// ─── Flag ─────────────────────────────────────────────────────────────────────
+
+const Flag = React.forwardRef<HTMLDivElement, FlagProps>(
+  (
+    {
+      className,
+      title,
+      description,
+      variant = "info",
+      icon,
+      onDismiss,
+      autoDismiss = DEFAULT_AUTO_DISMISS,
+      actions,
+      ...props
+    },
+    ref
+  ) => {
+    const [progress, setProgress] = React.useState(100);
+    const pausedRef = React.useRef(false);
+    const startTimeRef = React.useRef<number | null>(null);
+    const elapsedRef = React.useRef(0);
+    const rafRef = React.useRef<number | null>(null);
+    const duration = autoDismiss === false ? null : autoDismiss;
+
+    React.useEffect(() => {
+      if (duration === null) return;
+
+      const tick = (now: number) => {
+        if (pausedRef.current) {
+          startTimeRef.current = now;
+          rafRef.current = requestAnimationFrame(tick);
+          return;
+        }
+        if (startTimeRef.current === null) startTimeRef.current = now;
+        elapsedRef.current += now - startTimeRef.current;
+        startTimeRef.current = now;
+
+        const remaining = Math.max(0, duration - elapsedRef.current);
+        const pct = (remaining / duration) * 100;
+        setProgress(pct);
+
+        if (remaining <= 0) {
+          onDismiss?.();
+          return;
+        }
+        rafRef.current = requestAnimationFrame(tick);
+      };
+
+      rafRef.current = requestAnimationFrame(tick);
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [duration]);
+
+    const handleMouseEnter = () => {
+      pausedRef.current = true;
+    };
+    const handleMouseLeave = () => {
+      pausedRef.current = false;
+      startTimeRef.current = null;
+    };
+
+    const DefaultIcon = defaultIcons[variant];
+    const renderedIcon = icon ?? <DefaultIcon className={cn("size-4 shrink-0 mt-0.5", variantIconColor[variant])} aria-hidden />;
+
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        className={cn(
+          "relative w-80 overflow-hidden rounded-xl border border-border bg-card shadow-lg",
+          "border-l-4",
+          variantBorder[variant],
+          className
+        )}
+        {...props}
+      >
+        {/* Body */}
+        <div className="flex gap-3 p-4 pr-10">
+          {renderedIcon}
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-semibold text-card-foreground leading-snug">{title}</p>
+            {description && (
+              <p className="mt-1 text-sm text-muted-foreground leading-relaxed">{description}</p>
+            )}
+            {actions && actions.length > 0 && (
+              <div className="mt-3 flex flex-wrap gap-2">
+                {actions.map((action) => (
+                  <button
+                    key={action.label}
+                    type="button"
+                    onClick={action.onClick}
+                    className="text-xs font-medium text-primary hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded"
+                  >
+                    {action.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Close button */}
+        {onDismiss && (
+          <button
+            type="button"
+            aria-label="Dismiss notification"
+            onClick={onDismiss}
+            className="absolute top-3 right-3 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <X className="size-3.5" aria-hidden />
+          </button>
+        )}
+
+        {/* Auto-dismiss progress bar */}
+        {duration !== null && (
+          <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-muted">
+            <div
+              className={cn("h-full transition-none", variantProgressBar[variant])}
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+Flag.displayName = "Flag";
+
+// ─── FlagGroup ────────────────────────────────────────────────────────────────
+
+const positionClasses: Record<FlagGroupPosition, string> = {
+  "bottom-right": "bottom-4 right-4 flex-col-reverse",
+  "bottom-left": "bottom-4 left-4 flex-col-reverse",
+  "top-right": "top-4 right-4 flex-col",
+  "top-left": "top-4 left-4 flex-col",
+};
+
+const FlagGroup = React.forwardRef<HTMLDivElement, FlagGroupProps>(
+  ({ className, position = "bottom-right", children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "fixed z-50 flex gap-2",
+        positionClasses[position],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+FlagGroup.displayName = "FlagGroup";
+
+// ─── useFlagGroup ─────────────────────────────────────────────────────────────
+
+function useFlagGroup(): UseFlagGroupReturn {
+  const [flags, setFlags] = React.useState<Array<FlagProps & { id: string }>>([]);
+
+  const removeFlag = React.useCallback((id: string) => {
+    setFlags((prev) => prev.filter((f) => f.id !== id));
+  }, []);
+
+  const addFlag = React.useCallback(
+    (flag: Omit<FlagProps, "onDismiss"> & { id?: string }): string => {
+      const id = flag.id ?? `flag-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+      setFlags((prev) => [...prev, { ...flag, id, onDismiss: () => removeFlag(id) }]);
+      return id;
+    },
+    [removeFlag]
+  );
+
+  const clearAll = React.useCallback(() => {
+    setFlags([]);
+  }, []);
+
+  return { flags, addFlag, removeFlag, clearAll };
+}
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export { Flag, FlagGroup, useFlagGroup };

package/src/form.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as React from "react";
+import { AlertCircle } from "lucide-react";
+import { cn } from "./utils";
+
+export type FormValues = Record<string, string>;
+export type FormErrors = Record<string, string>;
+
+export interface ValidatorRule {
+  required?: boolean | string;
+  minLength?: { value: number; message: string };
+  maxLength?: { value: number; message: string };
+  pattern?: { value: RegExp; message: string };
+  validate?: (value: string) => string | undefined;
+}
+
+export interface FieldConfig {
+  defaultValue?: string;
+  rules?: ValidatorRule;
+}
+
+export type FieldsConfig = Record<string, FieldConfig>;
+
+export interface RegisterResult {
+  name: string;
+  id: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+  onBlur: () => void;
+}
+
+export interface UseFormReturn {
+  values: FormValues;
+  errors: FormErrors;
+  register: (name: string) => RegisterResult;
+  handleSubmit: (onValid: (values: FormValues) => void, onInvalid?: (errors: FormErrors) => void) => (e: React.FormEvent) => void;
+  setError: (name: string, message: string) => void;
+  clearError: (name: string) => void;
+  reset: () => void;
+  setValue: (name: string, value: string) => void;
+}
+
+export function useForm(fields: FieldsConfig = {}): UseFormReturn {
+  const initial = Object.fromEntries(Object.entries(fields).map(([k, v]) => [k, v.defaultValue ?? ""]));
+  const [values, setValues] = React.useState<FormValues>(initial);
+  const [errors, setErrors] = React.useState<FormErrors>({});
+
+  function validate(name: string, value: string): string | undefined {
+    const rules = fields[name]?.rules;
+    if (!rules) return undefined;
+    if (rules.required && !value.trim()) return typeof rules.required === "string" ? rules.required : "This field is required";
+    if (rules.minLength && value.length < rules.minLength.value) return rules.minLength.message;
+    if (rules.maxLength && value.length > rules.maxLength.value) return rules.maxLength.message;
+    if (rules.pattern && !rules.pattern.value.test(value)) return rules.pattern.message;
+    if (rules.validate) return rules.validate(value);
+  }
+
+  const register = (name: string): RegisterResult => ({
+    name,
+    id: name,
+    value: values[name] ?? "",
+    onChange: (e) => setValues(v => ({ ...v, [name]: e.target.value })),
+    onBlur: () => {
+      const err = validate(name, values[name] ?? "");
+      setErrors(e => err ? { ...e, [name]: err } : (({ [name]: _, ...rest }) => rest)(e));
+    },
+  });
+
+  const handleSubmit = (onValid: (v: FormValues) => void, onInvalid?: (e: FormErrors) => void) => (e: React.FormEvent) => {
+    e.preventDefault();
+    const newErrors: FormErrors = {};
+    for (const [name] of Object.entries(fields)) {
+      const err = validate(name, values[name] ?? "");
+      if (err) newErrors[name] = err;
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      onInvalid?.(newErrors);
+    } else {
+      setErrors({});
+      onValid(values);
+    }
+  };
+
+  return {
+    values,
+    errors,
+    register,
+    handleSubmit,
+    setError: (name, msg) => setErrors(e => ({ ...e, [name]: msg })),
+    clearError: (name) => setErrors(e => (({ [name]: _, ...rest }) => rest)(e)),
+    reset: () => { setValues(initial); setErrors({}); },
+    setValue: (name, value) => setValues(v => ({ ...v, [name]: value })),
+  };
+}
+
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {}
+
+const Form = React.forwardRef<HTMLFormElement, FormProps>(
+  ({ className, ...props }, ref) => (
+    <form ref={ref} className={cn("space-y-4", className)} {...props} />
+  )
+);
+Form.displayName = "Form";
+
+export interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5", className)} {...props} />
+  )
+);
+FormItem.displayName = "FormItem";
+
+export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+}
+
+const FormLabel = React.forwardRef<HTMLLabelElement, FormLabelProps>(
+  ({ className, required, children, ...props }, ref) => (
+    <label ref={ref} className={cn("text-sm font-medium text-foreground", className)} {...props}>
+      {children}
+      {required && <span className="ml-1 text-destructive">*</span>}
+    </label>
+  )
+);
+FormLabel.displayName = "FormLabel";
+
+export interface FormControlProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
+  ({ ...props }, ref) => <div ref={ref} {...props} />
+);
+FormControl.displayName = "FormControl";
+
+export interface FormDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, FormDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-xs text-muted-foreground", className)} {...props} />
+  )
+);
+FormDescription.displayName = "FormDescription";
+
+export interface FormErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+
+const FormError = React.forwardRef<HTMLParagraphElement, FormErrorProps>(
+  ({ className, children, ...props }, ref) =>
+    children ? (
+      <p ref={ref} className={cn("flex items-center gap-1 text-xs text-destructive", className)} {...props}>
+        <AlertCircle className="size-3 shrink-0" />
+        {children}
+      </p>
+    ) : null
+);
+FormError.displayName = "FormError";
+
+export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5", className)} {...props} />
+  )
+);
+FormField.displayName = "FormField";
+
+export { Form, FormItem, FormLabel, FormControl, FormDescription, FormError, FormField };

package/src/grid-flex.tsx

@@ -0,0 +1,241 @@
+import * as React from "react";
+import { cn } from "./utils";
+import type { LayoutSpacing } from "./layout";
+
+// ---------------------------------------------------------------------------
+// Shared gap map (mirrors layout.tsx)
+// ---------------------------------------------------------------------------
+
+const gapClass: Record<LayoutSpacing, string> = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-3",
+  lg: "gap-4",
+  xl: "gap-6",
+};
+
+// ---------------------------------------------------------------------------
+// Grid
+// ---------------------------------------------------------------------------
+
+export type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
+
+export type ResponsiveCols = {
+  base?: GridCols;
+  sm?: GridCols;
+  md?: GridCols;
+  lg?: GridCols;
+};
+
+export type GridFlow = "row" | "col" | "dense";
+
+export type GridProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Number of columns (1–12 or "auto"), or a responsive object */
+  cols?: GridCols | ResponsiveCols;
+  /** Number of explicit rows */
+  rows?: 1 | 2 | 3 | 4 | 5 | 6 | "auto";
+  /** Gap between cells */
+  gap?: LayoutSpacing;
+  /** Grid auto-flow direction */
+  flow?: GridFlow;
+};
+
+const colClass: Record<string, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12",
+  auto: "grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+};
+
+const smColClass: Record<string, string> = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+  7: "sm:grid-cols-7",
+  8: "sm:grid-cols-8",
+  9: "sm:grid-cols-9",
+  10: "sm:grid-cols-10",
+  11: "sm:grid-cols-11",
+  12: "sm:grid-cols-12",
+  auto: "sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+};
+
+const mdColClass: Record<string, string> = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  7: "md:grid-cols-7",
+  8: "md:grid-cols-8",
+  9: "md:grid-cols-9",
+  10: "md:grid-cols-10",
+  11: "md:grid-cols-11",
+  12: "md:grid-cols-12",
+  auto: "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+};
+
+const lgColClass: Record<string, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12",
+  auto: "lg:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+};
+
+const rowClass: Record<string, string> = {
+  1: "grid-rows-1",
+  2: "grid-rows-2",
+  3: "grid-rows-3",
+  4: "grid-rows-4",
+  5: "grid-rows-5",
+  6: "grid-rows-6",
+  auto: "grid-rows-none",
+};
+
+const flowClass: Record<GridFlow, string> = {
+  row: "grid-flow-row",
+  col: "grid-flow-col",
+  dense: "grid-flow-dense",
+};
+
+function resolveColClasses(cols: GridCols | ResponsiveCols | undefined): string {
+  if (cols === undefined) return "";
+  if (typeof cols === "number" || cols === "auto") {
+    return colClass[String(cols)] ?? "";
+  }
+  // Responsive object
+  const { base, sm, md, lg } = cols as ResponsiveCols;
+  return cn(
+    base !== undefined && colClass[String(base)],
+    sm !== undefined && smColClass[String(sm)],
+    md !== undefined && mdColClass[String(md)],
+    lg !== undefined && lgColClass[String(lg)],
+  );
+}
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  ({ className, cols, rows, gap = "md", flow, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid",
+          resolveColClasses(cols),
+          rows !== undefined && rowClass[String(rows)],
+          gapClass[gap],
+          flow !== undefined && flowClass[flow],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Grid.displayName = "Grid";
+
+// ---------------------------------------------------------------------------
+// Flex
+// ---------------------------------------------------------------------------
+
+export type FlexDirection = "row" | "col" | "row-reverse" | "col-reverse";
+export type FlexWrap = boolean | "reverse";
+export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+
+export type FlexProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Flex direction */
+  direction?: FlexDirection;
+  /** Whether children wrap */
+  wrap?: FlexWrap;
+  /** Align items (cross axis) */
+  align?: FlexAlign;
+  /** Justify content (main axis) */
+  justify?: FlexJustify;
+  /** Gap between children */
+  gap?: LayoutSpacing;
+  /** Render as inline-flex */
+  inline?: boolean;
+};
+
+const directionClass: Record<FlexDirection, string> = {
+  row: "flex-row",
+  col: "flex-col",
+  "row-reverse": "flex-row-reverse",
+  "col-reverse": "flex-col-reverse",
+};
+
+const alignClass: Record<FlexAlign, string> = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline",
+};
+
+const justifyClass: Record<FlexJustify, string> = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly",
+};
+
+export const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
+  (
+    {
+      className,
+      direction = "row",
+      wrap = false,
+      align = "start",
+      justify = "start",
+      gap = "md",
+      inline = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const wrapCls =
+      wrap === true ? "flex-wrap" : wrap === "reverse" ? "flex-wrap-reverse" : "flex-nowrap";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          inline ? "inline-flex" : "flex",
+          directionClass[direction],
+          wrapCls,
+          alignClass[align],
+          justifyClass[justify],
+          gapClass[gap],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Flex.displayName = "Flex";