@suphark/ui 0.1.0

package/src/components/shared/button/add-new-button.tsx

@@ -0,0 +1,19 @@
+import { Plus } from "lucide-react";
+import { type ComponentProps, forwardRef } from "react";
+import { ActionButton } from "./base/action-button";
+
+interface AddNewButtonProps extends ComponentProps<typeof ActionButton> {
+  label?: string;
+  responsive?: boolean;
+}
+
+export const AddNewButton = forwardRef<HTMLButtonElement, AddNewButtonProps>(
+  ({ label = "Add New", responsive = false, children, ...props }, ref) => {
+    return (
+      <ActionButton ref={ref} icon={<Plus />} responsive={responsive} {...props}>
+        {children || label}
+      </ActionButton>
+    );
+  },
+);
+AddNewButton.displayName = "AddNewButton";

package/src/components/shared/button/base/action-button.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@suphark/ui/components/ui/tooltip";
+import {
+  type CheckPermissionOptions,
+  type CheckPermissionRequirement,
+  usePermission,
+} from "@suphark/ui/lib/permission";
+import { cn } from "@suphark/ui/lib/utils";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+
+// ดึง Type Props มาจาก Component โดยตรง
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+type TooltipContentProps = React.ComponentProps<typeof TooltipContent>;
+
+/**
+ * Extends standard ButtonProps and adds tooltip and external loading state.
+ */
+export interface ActionButtonProps extends ButtonProps, CheckPermissionOptions {
+  /**
+   * Optional: Permission requirement to render this button (e.g. "po-tracking:create")
+   */
+  permission?: CheckPermissionRequirement;
+  /**
+   * Optional text or element to display in a tooltip on hover.
+   */
+  tooltip?: React.ReactNode;
+  /**
+   * Specifies the preferred side of the trigger to render against.
+   */
+  tooltipSide?: TooltipContentProps["side"]; // "bottom" | "top" | "right" | "left"
+  /**
+   * An optional icon element (e.g., <CircleDollarSign />) to display.
+   * It will be replaced by a spinner when isLoading is true.
+   */
+  icon?: React.ReactElement<{ className?: string }>;
+  /**
+   * A boolean prop passed from the parent to control the loading state.
+   */
+  isLoading?: boolean;
+  /**
+   * If true, the label will be hidden on mobile screens (max-sm) and the tooltip
+   * will automatically show the label if not explicitly provided.
+   */
+  responsive?: boolean;
+}
+
+/**
+ * A component that combines Button, Tooltip, and an external loading state
+ * for in-page actions (e.g., opening dialogs, submitting forms).
+ */
+export function ActionButton({
+  permission,
+  organizationId,
+  orgTag,
+  tooltip,
+  tooltipSide,
+  icon,
+  isLoading,
+  responsive,
+  children,
+  className,
+  disabled,
+  onClick,
+  variant,
+  ...props
+}: ActionButtonProps) {
+  // Call usePermission unconditionally to comply with Rules of Hooks
+  const hasAccess = usePermission(permission || "public", { organizationId, orgTag });
+
+  if (permission && !hasAccess) {
+    return null;
+  }
+  // 1. Determine which icon to display
+  const displayIcon = isLoading ? (
+    <Loader2
+      className={cn("h-4 w-4 animate-spin", children && (responsive ? "sm:mr-2" : "mr-2"))}
+    />
+  ) : icon ? (
+    // Clone the provided icon to add standard styling
+    React.cloneElement(icon, {
+      className: cn("h-4 w-4", children && (responsive ? "sm:mr-2" : "mr-2"), icon.props.className),
+    })
+  ) : null;
+
+  // 2. Wrap children if responsive
+  const content = responsive ? (
+    <span className="hidden sm:inline-block">{children}</span>
+  ) : (
+    children
+  );
+
+  // 3. Auto-tooltip for responsive mode
+  const finalTooltip = tooltip || (responsive ? children : null);
+
+  // 4. Create the core button content
+  const buttonContent = (
+    <Button
+      className={cn(responsive && "max-sm:px-2", className)}
+      disabled={isLoading || disabled} // Disable if loading or explicitly disabled
+      onClick={onClick}
+      variant={variant}
+      {...props}
+    >
+      {displayIcon}
+      {content}
+    </Button>
+  );
+
+  // 5. Wrap with Tooltip if provided or auto-generated
+  if (finalTooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={buttonContent as React.ReactElement} />
+          <TooltipContent side={tooltipSide}>
+            {typeof finalTooltip === "string" ? <p>{finalTooltip}</p> : finalTooltip}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  // 6. Return plain button if no tooltip
+  return buttonContent;
+}

package/src/components/shared/button/base/link-button.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+// [FIX 1.1] นำเข้าเฉพาะ Button
+import { Button } from "@suphark/ui/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@suphark/ui/components/ui/tooltip";
+import {
+  type CheckPermissionOptions,
+  type CheckPermissionRequirement,
+  usePermission,
+} from "@suphark/ui/lib/permission";
+import { cn } from "@suphark/ui/lib/utils";
+import { Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+import { useTransition } from "react";
+
+// [FIX 1.2] ดึง Type Props มาจาก Component โดยตรง
+type ButtonProps = React.ComponentProps<typeof Button>;
+
+/**
+ * Extends standard ButtonProps and adds navigation and tooltip features.
+ */
+export interface LinkButtonProps extends ButtonProps, CheckPermissionOptions {
+  /**
+   * Optional: Permission requirement to render this button (e.g. "po-tracking:read")
+   */
+  permission?: CheckPermissionRequirement;
+  /**
+   * The path to navigate to.
+   */
+  href: string;
+  /**
+   * Optional text or element to display in a tooltip on hover.
+   */
+  tooltip?: React.ReactNode;
+  /**
+   * An optional icon element (e.g., <BarChart3 />) to display.
+   * It will be replaced by a spinner during transition.
+   */
+  // [FIX 2] ระบุ Type ของ icon ให้ชัดเจนขึ้น
+  icon?: React.ReactElement<{ className?: string }>;
+}
+
+/**
+ * A component that combines Button, Tooltip, and client-side navigation
+ * with a loading transition (spinner).
+ */
+export function LinkButton({
+  permission,
+  organizationId,
+  orgTag,
+  href,
+  tooltip,
+  icon,
+  children,
+  className,
+  disabled,
+  onClick,
+  ...props
+}: LinkButtonProps) {
+  // Call usePermission unconditionally to comply with Rules of Hooks
+  const hasAccess = usePermission(permission || "public", { organizationId, orgTag });
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+
+  if (permission && !hasAccess) {
+    return null;
+  }
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // Allow any custom onClick logic passed by the parent
+    if (onClick) {
+      (onClick as any)(e);
+    }
+
+    // Prevent default button behavior
+    e.preventDefault();
+
+    // Start navigation transition
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  // 1. Determine which icon to display
+  const displayIcon = isPending ? (
+    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+  ) : icon ? (
+    // Clone the provided icon to add standard styling
+    // (ตอนนี้ TypeScript จะเข้าใจ icon.props.className แล้ว)
+    React.cloneElement(icon, {
+      className: cn("mr-2 h-4 w-4", icon.props.className),
+    })
+  ) : null;
+
+  // 2. Create the core button content
+  const buttonContent = (
+    <Button
+      className={className}
+      disabled={isPending || disabled} // Disable if pending or explicitly disabled
+      onClick={handleClick}
+      {...props}
+    >
+      {displayIcon}
+      {children}
+    </Button>
+  );
+
+  // 3. Wrap with Tooltip if provided
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger render={buttonContent as React.ReactElement} />
+          <TooltipContent>
+            {typeof tooltip === "string" ? <p>{tooltip}</p> : tooltip}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  // 4. Return plain button if no tooltip
+  return buttonContent;
+}

package/src/components/shared/button/cancel-button.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { X } from "lucide-react";
+import type * as React from "react";
+
+interface CancelButtonProps extends ActionButtonProps {
+  label?: React.ReactNode;
+}
+
+export function CancelButton({
+  children,
+  icon,
+  label = "Cancel",
+  type = "button",
+  variant = "outline",
+  ...props
+}: CancelButtonProps) {
+  return (
+    <ActionButton type={type} variant={variant} icon={icon ?? <X />} {...props}>
+      {children ?? label}
+    </ActionButton>
+  );
+}

package/src/components/shared/button/confirm-button.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+interface ConfirmButtonProps extends ActionButtonProps {
+  label?: React.ReactNode;
+}
+
+export function ConfirmButton({
+  children,
+  icon,
+  label = "Confirm",
+  type = "button",
+  ...props
+}: ConfirmButtonProps) {
+  return (
+    <ActionButton type={type} icon={icon ?? <Check />} {...props}>
+      {children ?? label}
+    </ActionButton>
+  );
+}

package/src/components/shared/button/delete-button.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { Trash2 } from "lucide-react";
+import type * as React from "react";
+
+interface DeleteButtonProps extends ActionButtonProps {
+  label?: React.ReactNode;
+  loadingLabel?: React.ReactNode;
+}
+
+export function DeleteButton({
+  children,
+  icon,
+  isLoading,
+  label = "Delete",
+  loadingLabel = "Deleting...",
+  type = "button",
+  variant = "destructive",
+  ...props
+}: DeleteButtonProps) {
+  return (
+    <ActionButton
+      type={type}
+      variant={variant}
+      icon={icon ?? <Trash2 />}
+      isLoading={isLoading}
+      {...props}
+    >
+      {children ?? (isLoading ? loadingLabel : label)}
+    </ActionButton>
+  );
+}

package/src/components/shared/button/floating-save-button.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check, Loader2, Save, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+
+interface FloatingSaveButtonProps {
+  isPending: boolean;
+  hasChanges: boolean;
+  onSave: () => void;
+  onCancel?: () => void;
+  saveText?: string;
+  successText?: string;
+  pendingText?: string;
+  cancelText?: string;
+  className?: string;
+  buttonClassName?: string;
+}
+
+export function FloatingSaveButton({
+  isPending,
+  hasChanges,
+  onSave,
+  onCancel,
+  saveText = "Save",
+  successText = "Saved",
+  pendingText = "Saving...",
+  cancelText = "Cancel",
+  className,
+  buttonClassName,
+}: FloatingSaveButtonProps) {
+  const [showSuccess, setShowSuccess] = useState(false);
+  const wasPending = useRef(false);
+
+  useEffect(() => {
+    if (wasPending.current && !isPending && !hasChanges) {
+      setShowSuccess(true);
+      const timer = setTimeout(() => setShowSuccess(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    wasPending.current = isPending;
+  }, [isPending, hasChanges]);
+
+  if (!hasChanges && !showSuccess) return null;
+
+  return (
+    <div
+      className={cn(
+        "fade-in slide-in-from-bottom-4 fixed right-8 bottom-8 z-50 flex animate-in items-center gap-3 duration-300",
+        className,
+      )}
+    >
+      {onCancel && hasChanges && !isPending && !showSuccess && (
+        <Button
+          variant="secondary"
+          size="lg"
+          onClick={onCancel}
+          className="h-14 rounded-full border-2 border-border bg-background/80 px-6 shadow-xl backdrop-blur-md transition-all hover:bg-muted"
+        >
+          <X className="mr-2 h-4 w-4" />
+          {cancelText}
+        </Button>
+      )}
+
+      <Button
+        size="lg"
+        className={cn(
+          "h-14 gap-3 rounded-full border-4 border-background px-8 text-base shadow-2xl transition-all duration-300",
+          showSuccess
+            ? "scale-105 bg-emerald-500 text-white shadow-[0_0_20px_rgba(16,185,129,0.4)] hover:bg-emerald-500"
+            : "bg-primary text-primary-foreground hover:bg-primary/90",
+          buttonClassName,
+        )}
+        disabled={isPending || showSuccess}
+        onClick={onSave}
+      >
+        {isPending ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : showSuccess ? (
+          <Check className="zoom-in h-5 w-5 animate-in duration-300" />
+        ) : (
+          <Save className="h-5 w-5" />
+        )}
+        <span>{isPending ? pendingText : showSuccess ? successText : saveText}</span>
+      </Button>
+    </div>
+  );
+}

package/src/components/shared/button/index.ts

@@ -0,0 +1,13 @@
+/**
+ * ปุ่มมาตรฐานสำหรับ action ทั่วไป — ใช้ก่อนเขียน <Button> ดิบเสมอ
+ * ปุ่มที่ต้องใช้ next/navigation (LinkButton, RefreshButton) อยู่ที่ `@suphark/ui/next`
+ */
+export { AddNewButton } from "./add-new-button";
+export { ActionButton, type ActionButtonProps } from "./base/action-button";
+export { CancelButton } from "./cancel-button";
+export { ConfirmButton } from "./confirm-button";
+export { DeleteButton } from "./delete-button";
+export { FloatingSaveButton } from "./floating-save-button";
+export { PrintButton } from "./print-button";
+export { SaveButton } from "./save-button";
+export { SubmitButton } from "./submit-button";

package/src/components/shared/button/print-button.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { cn } from "@suphark/ui/lib/utils";
+import { Printer } from "lucide-react";
+
+// PrintButtonProps extends ActionButtonProps
+type PrintButtonProps = ActionButtonProps & {
+  href?: string;
+  target?: string;
+};
+
+/**
+ * A shared client component that provides a button to trigger the browser's print functionality.
+ * It is built on `ActionButton` and automatically hidden when the page is being printed.
+ *
+ * @param {React.ReactNode} [children] - (Optional) The text to display. Defaults to "Print".
+ * @param {React.ReactElement} [icon] - (Optional) Overrides the default <Printer /> icon.
+ * @param {string} [tooltip] - (Optional) Tooltip text to display on hover.
+ * @param {function} [onClick] - (Optional) A custom onClick handler. If not provided, it defaults to `window.print()`.
+ * @param {string} [variant] - (Optional) Button variant. Defaults to "outline".
+ * @param {string} [className] - (Optional) Additional CSS classes.
+ */
+export function PrintButton({
+  children,
+  icon,
+  onClick,
+  className,
+  variant,
+  href,
+  target,
+  ...props
+}: PrintButtonProps) {
+  // 1. G G (Default values)
+  const buttonText = children ?? "Print";
+  const buttonIcon = icon ?? <Printer />;
+  const buttonVariant = variant ?? "outline";
+
+  // 2. Default onClick logic
+  // If href is provided, we don't want to trigger window.print() by default
+  const handleClick = onClick ?? (href ? undefined : () => window.print());
+
+  const content = (
+    <ActionButton
+      variant={buttonVariant}
+      icon={buttonIcon}
+      onClick={handleClick}
+      className={cn("print:hidden", className)}
+      {...props}
+    >
+      {buttonText}
+    </ActionButton>
+  );
+
+  if (href) {
+    return (
+      <a href={href} target={target} rel={target === "_blank" ? "noopener noreferrer" : undefined}>
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}

package/src/components/shared/button/refresh-button.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { cn } from "@suphark/ui/lib/utils";
+import { RefreshCcw } from "lucide-react";
+import { useRouter } from "next/navigation";
+import * as React from "react";
+
+type RefreshButtonProps = ActionButtonProps;
+
+/**
+ * A shared client component that provides a button to trigger a router refresh.
+ * It is built on `ActionButton`.
+ *
+ * @param {React.ReactNode} [children] - (Optional) The text to display. Defaults to "Refresh".
+ * @param {React.ReactElement} [icon] - (Optional) Overrides the default <RefreshCcw /> icon.
+ * @param {function} [onClick] - (Optional) A custom onClick handler. If not provided, it defaults to `router.refresh()`.
+ * @param {string} [variant] - (Optional) Button variant. Defaults to "outline".
+ * @param {string} [className] - (Optional) Additional CSS classes.
+ */
+export function RefreshButton({
+  children,
+  icon,
+  onClick,
+  className,
+  variant,
+  ...props
+}: RefreshButtonProps) {
+  const router = useRouter();
+
+  // 1. Default values
+  const buttonText = children ?? "Refresh";
+  const buttonIcon = icon ?? <RefreshCcw />;
+  const buttonVariant = variant ?? "outline";
+
+  // 2. Default onClick to router.refresh()
+  // Track loading state for router refresh
+  const [isPending, startTransition] = React.useTransition();
+
+  const handleClick =
+    onClick ??
+    (() => {
+      startTransition(() => {
+        router.refresh();
+      });
+    });
+
+  return (
+    <ActionButton
+      variant={buttonVariant}
+      icon={buttonIcon}
+      onClick={handleClick}
+      className={cn(className)}
+      isLoading={props.isLoading || isPending}
+      {...props}
+    >
+      {buttonText}
+    </ActionButton>
+  );
+}

package/src/components/shared/button/save-button.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import {
+  ActionButton,
+  type ActionButtonProps,
+} from "@suphark/ui/components/shared/button/base/action-button";
+import { Save } from "lucide-react";
+import type * as React from "react";
+
+interface SaveButtonProps extends ActionButtonProps {
+  label?: React.ReactNode;
+  loadingLabel?: React.ReactNode;
+}
+
+export function SaveButton({
+  children,
+  icon,
+  isLoading,
+  label = "Save",
+  loadingLabel = "Saving...",
+  type = "submit",
+  ...props
+}: SaveButtonProps) {
+  return (
+    <ActionButton type={type} icon={icon ?? <Save />} isLoading={isLoading} {...props}>
+      {children ?? (isLoading ? loadingLabel : label)}
+    </ActionButton>
+  );
+}