@payglocal_ui/flux-ui 0.1.0

package/src/breadcrumb.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "./utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ className, ...props }, ref) => (
+  <nav
+    ref={ref}
+    aria-label="breadcrumb"
+    className={cn("", className)}
+    {...props}
+  />
+));
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2",
+      className
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, ...props }, ref) => (
+  <a
+    ref={ref}
+    className={cn(
+      "text-sm text-muted-foreground transition-colors duration-pg-fast ease-pg-standard hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 rounded-sm",
+      className
+    )}
+    {...props}
+  />
+));
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-current="page"
+    aria-disabled="true"
+    className={cn("text-sm font-medium text-foreground", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight className="text-muted-foreground" />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex size-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="size-4 text-muted-foreground" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/button-group.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { cn } from "./utils";
+import { ChevronDown } from "lucide-react";
+import {
+  forwardRef,
+  useState,
+  useRef,
+  useEffect,
+  type HTMLAttributes,
+  type ButtonHTMLAttributes,
+  type ReactNode,
+} from "react";
+import { Button } from "./button";
+import type { ButtonProps } from "./button";
+
+// ---------------------------------------------------------------------------
+// ButtonGroup
+// ---------------------------------------------------------------------------
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "horizontal" | "vertical";
+  variant?: ButtonProps["variant"];
+}
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ orientation = "horizontal", variant, className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="group"
+        data-variant={variant}
+        className={cn(
+          "inline-flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          // Horizontal connected borders
+          orientation === "horizontal" && [
+            "[&>*:not(:first-child)]:rounded-l-none",
+            "[&>*:not(:last-child)]:rounded-r-none",
+            "[&>*:not(:first-child)]:-ml-px",
+          ],
+          // Vertical connected borders
+          orientation === "vertical" && [
+            "[&>*:not(:first-child)]:rounded-t-none",
+            "[&>*:not(:last-child)]:rounded-b-none",
+            "[&>*:not(:first-child)]:-mt-px",
+          ],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+// ---------------------------------------------------------------------------
+// SplitButton
+// ---------------------------------------------------------------------------
+
+export interface SplitButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+  label: ReactNode;
+  onClick?: ButtonHTMLAttributes<HTMLButtonElement>["onClick"];
+  children?: ReactNode;
+  variant?: ButtonProps["variant"];
+  size?: ButtonProps["size"];
+  isLoading?: boolean;
+}
+
+export const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
+  (
+    {
+      label,
+      onClick,
+      children,
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    // Merge forwarded ref with internal ref
+    function setRefs(el: HTMLDivElement | null) {
+      (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      }
+    }
+
+    // Close dropdown when clicking outside
+    useEffect(() => {
+      if (!open) return;
+      function handleOutside(e: MouseEvent) {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(e.target as Node)
+        ) {
+          setOpen(false);
+        }
+      }
+      document.addEventListener("mousedown", handleOutside);
+      return () => document.removeEventListener("mousedown", handleOutside);
+    }, [open]);
+
+    return (
+      <div
+        ref={setRefs}
+        className={cn("relative inline-flex", className)}
+        {...(props as HTMLAttributes<HTMLDivElement>)}
+      >
+        {/* Primary action button */}
+        <Button
+          variant={variant}
+          size={size}
+          isLoading={isLoading}
+          disabled={disabled}
+          onClick={onClick}
+          className="rounded-r-none"
+        >
+          {label}
+        </Button>
+
+        {/* Dropdown trigger */}
+        <button
+          type="button"
+          disabled={disabled || isLoading}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          onClick={() => setOpen((v) => !v)}
+          className={cn(
+            "inline-flex items-center justify-center px-2 rounded-l-none -ml-px",
+            "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",
+            // Match variant styling
+            variant === "primary" &&
+              "bg-primary text-primary-foreground border border-primary shadow-sm hover:bg-[var(--primary-hover)] border-l border-l-primary-foreground/20",
+            variant === "secondary" &&
+              "bg-muted text-foreground border border-border shadow-sm hover:bg-muted/85 dark:bg-muted/35 dark:hover:bg-muted/55 border-l-0",
+            variant === "outline" &&
+              "bg-card text-foreground border border-border shadow-sm hover:bg-muted border-l-0",
+            variant === "ghost" &&
+              "bg-transparent text-foreground border border-transparent hover:bg-muted border-l-0",
+            variant === "danger" &&
+              "bg-red-600 text-white border border-red-600 shadow-sm hover:bg-red-700 border-l border-l-white/20",
+            // Size heights to match Button
+            size === "sm" && "h-9 min-h-9 rounded-lg",
+            size === "md" && "h-10 min-h-10 rounded-lg",
+            size === "lg" && "h-[3.25rem] min-h-[3.25rem] rounded-xl"
+          )}
+        >
+          <ChevronDown
+            className={cn(
+              "transition-transform duration-pg-fast ease-pg-standard",
+              open && "rotate-180",
+              size === "sm" ? "size-3.5" : size === "lg" ? "size-[1.125rem]" : "size-4"
+            )}
+          />
+        </button>
+
+        {/* Dropdown menu */}
+        {open && children && (
+          <div
+            role="menu"
+            className={cn(
+              "absolute right-0 top-full mt-1 z-50",
+              "bg-card border border-border rounded-lg shadow-lg py-1 min-w-32"
+            )}
+          >
+            {children}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+SplitButton.displayName = "SplitButton";
+
+// ---------------------------------------------------------------------------
+// SplitButtonItem — convenience wrapper for dropdown items
+// ---------------------------------------------------------------------------
+
+export interface SplitButtonItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: ReactNode;
+}
+
+export const SplitButtonItem = forwardRef<HTMLButtonElement, SplitButtonItemProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        role="menuitem"
+        type="button"
+        className={cn(
+          "block w-full text-left px-3 py-2 text-sm text-foreground",
+          "hover:bg-muted transition-colors duration-pg-fast ease-pg-standard",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "focus-visible:outline-none focus-visible:bg-muted",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+SplitButtonItem.displayName = "SplitButtonItem";

package/src/button.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { cn } from "./utils";
+import { Loader2 } from "lucide-react";
+import { type ButtonHTMLAttributes, forwardRef } from "react";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "ghost" | "danger" | "outline" | "link";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const variantClasses: Record<NonNullable<ButtonProps["variant"]>, string> = {
+  primary:
+    "bg-primary text-primary-foreground border border-primary shadow-sm hover:bg-[var(--primary-hover)]",
+  secondary:
+    "bg-muted text-foreground border border-border shadow-sm hover:bg-muted/85 dark:bg-muted/35 dark:text-foreground dark:border-border dark:hover:bg-muted/55",
+  ghost:
+    "bg-transparent text-foreground border border-transparent hover:bg-muted focus-visible:bg-muted/80 active:bg-muted/90",
+  danger:
+    "bg-red-600 text-white border border-red-600 shadow-sm hover:bg-red-700",
+  outline:
+    "bg-card text-foreground border border-border shadow-sm hover:bg-muted",
+  link:
+    "h-auto min-h-0 rounded-md border border-transparent bg-transparent px-2 py-2 text-[15px] font-medium text-primary shadow-none underline-offset-4 hover:bg-primary/5 hover:underline focus-visible:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50 disabled:hover:bg-transparent disabled:hover:no-underline",
+};
+
+/** Heights and padding match dashboard primary actions (~44–48px) and comfortable tap targets. */
+const sizes = {
+  sm: "h-9 min-h-9 px-3.5 text-xs gap-1.5 rounded-lg",
+  md: "h-10 min-h-10 px-5 text-sm gap-2 rounded-lg",
+  lg: "h-[3.25rem] min-h-[3.25rem] px-10 text-[15px] gap-2.5 rounded-xl",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      leftIcon,
+      rightIcon,
+      children,
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || isLoading}
+        className={cn(
+          "inline-flex items-center justify-center font-medium transition-colors duration-pg-fast ease-pg-standard",
+          variant !== "link" && "disabled:cursor-not-allowed disabled:opacity-50",
+          variant === "link" && "justify-center",
+          variant !== "link" && "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35",
+          variantClasses[variant],
+          variant !== "link" && sizes[size],
+          className
+        )}
+        {...props}
+      >
+        {isLoading ? (
+          <Loader2
+            className={cn(
+              "animate-spin",
+              size === "sm" ? "size-3.5" : size === "lg" ? "size-[1.125rem]" : "size-3.5"
+            )}
+          />
+        ) : (
+          leftIcon
+        )}
+        <span className={cn(isLoading && "opacity-70")}>{children}</span>
+        {!isLoading && rightIcon}
+      </button>
+    );
+  }
+);
+Button.displayName = "Button";

package/src/calendar.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButtonProps,
+  type DayPickerProps,
+} from "react-day-picker";
+
+import { Button } from "./button";
+import type { ButtonProps } from "./button";
+import { cn } from "./utils";
+
+const cellSize = "[--cell-size:2rem]";
+
+function navButtonClasses(variant: NonNullable<ButtonProps["variant"]>): string {
+  const base =
+    "inline-flex items-center justify-center rounded-lg border font-medium transition-colors duration-pg-fast ease-pg-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50";
+  switch (variant) {
+    case "outline":
+      return cn(
+        base,
+        "border-border bg-card text-foreground shadow-sm hover:bg-muted"
+      );
+    case "ghost":
+    default:
+      return cn(
+        base,
+        "border-transparent bg-transparent text-foreground hover:bg-muted focus-visible:bg-muted/80 active:bg-muted/90"
+      );
+  }
+}
+
+export type CalendarProps = DayPickerProps & {
+  buttonVariant?: ButtonProps["variant"];
+};
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  locale,
+  formatters,
+  components,
+  showWeekNumber,
+  ...props
+}: CalendarProps) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      showWeekNumber={showWeekNumber}
+      locale={locale}
+      className={cn(
+        "group/calendar bg-background p-3",
+        cellSize,
+        "[[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString(locale?.code ?? "default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          navButtonClasses(buttonVariant),
+          "h-[var(--cell-size)] w-[var(--cell-size)] min-h-0 min-w-0 shrink-0 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          navButtonClasses(buttonVariant),
+          "h-[var(--cell-size)] w-[var(--cell-size)] min-h-0 min-w-0 shrink-0 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[var(--cell-size)] w-full items-center justify-center px-[var(--cell-size)]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[var(--cell-size)] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative rounded-md border border-border bg-card shadow-sm focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/35",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute inset-0 cursor-pointer opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-sm"
+            : "flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
+          defaultClassNames.caption_label
+        ),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[var(--cell-size)] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] text-muted-foreground select-none",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none",
+          "[&:last-child[data-selected=true]_button]:rounded-r-md",
+          showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none bg-accent/60", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "rounded-md bg-muted text-foreground data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className: rootClass, rootRef, ...rootProps }) => (
+          <div
+            data-slot="calendar"
+            ref={rootRef}
+            className={cn(rootClass)}
+            {...rootProps}
+          />
+        ),
+        Chevron: ({ className: chClass, orientation, ...chProps }) => {
+          if (orientation === "left") {
+            return <ChevronLeft className={cn("size-4", chClass)} {...chProps} />;
+          }
+          if (orientation === "right") {
+            return <ChevronRight className={cn("size-4", chClass)} {...chProps} />;
+          }
+          return <ChevronDown className={cn("size-4", chClass)} {...chProps} />;
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...weekProps }) => (
+          <th {...weekProps}>
+            <div className="flex h-[var(--cell-size)] w-[var(--cell-size)] min-h-[var(--cell-size)] min-w-[var(--cell-size)] items-center justify-center text-center text-xs tabular-nums">
+              {children}
+            </div>
+          </th>
+        ),
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: DayButtonProps) {
+  const defaultClassNames = getDefaultClassNames();
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      type="button"
+      variant="ghost"
+      {...props}
+      disabled={Boolean(modifiers.disabled) || props.disabled}
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "flex aspect-square h-auto min-h-[var(--cell-size)] w-full min-w-[var(--cell-size)] flex-col gap-1 rounded-md p-0 font-normal leading-none data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground hover:bg-muted/80 dark:hover:bg-muted/50 [&>span]:text-xs [&>span]:opacity-70",
+        "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/35",
+        defaultClassNames.day,
+        className
+      )}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };