@godxjp/ui 6.0.0 → 6.0.1

package/src/components/feedback/alert.tsx

@@ -1,167 +0,0 @@
-import * as React from "react";
-import {
-  AlertCircle,
-  CheckCircle2,
-  Info,
-  RefreshCw,
-  TriangleAlert,
-  X,
-  type LucideIcon,
-} from "lucide-react";
-
-import { useTranslation } from "../../i18n/use-translation";
-import { humanError } from "../../lib/format";
-import { cn } from "../../lib/utils";
-import { Inline } from "../layout/inline";
-import { Button } from "../general/button";
-import type { AlertVariantProp } from "../../props/vocabulary";
-import type {
-  AlertActionsProp,
-  AlertContentProp,
-  AlertDescriptionProp,
-  AlertProp,
-  AlertQueryErrorProp,
-  AlertTitleProp,
-} from "../../props/components/feedback.prop";
-
-export type {
-  AlertProp,
-  AlertProp as AlertProps,
-  AlertTitleProp,
-  AlertTitleProp as AlertTitleProps,
-  AlertContentProp,
-  AlertContentProp as AlertContentProps,
-  AlertDescriptionProp,
-  AlertDescriptionProp as AlertDescriptionProps,
-  AlertActionsProp,
-  AlertActionsProp as AlertActionsProps,
-  AlertQueryErrorProp,
-  AlertQueryErrorProp as AlertQueryErrorProps,
-} from "../../props/components/feedback.prop";
-
-const AlertContext = React.createContext<AlertVariantProp>("default");
-
-const DEFAULT_ICONS: Record<AlertVariantProp, LucideIcon> = {
-  default: Info,
-  destructive: AlertCircle,
-  warning: TriangleAlert,
-  success: CheckCircle2,
-};
-
-const AlertBase = React.forwardRef<HTMLDivElement, AlertProp>(
-  ({ variant = "default", icon, onDismiss, className, children, ...props }, ref) => {
-    const IconComponent = icon === false ? null : (icon ?? DEFAULT_ICONS[variant]);
-
-    return (
-      <AlertContext.Provider value={variant}>
-        <div
-          ref={ref}
-          role="alert"
-          data-slot="alert"
-          data-variant={variant}
-          data-dismissible={onDismiss ? "" : undefined}
-          className={className}
-          {...props}
-        >
-          {IconComponent && (
-            <IconComponent data-slot="alert-icon" data-variant={variant} aria-hidden="true" />
-          )}
-          <div data-slot="alert-body">{children}</div>
-          {onDismiss && (
-            <button
-              type="button"
-              onClick={() => {
-                void onDismiss();
-              }}
-              data-slot="alert-dismiss"
-              className="ring-offset-background focus-visible:ring-ring transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-              aria-label="Dismiss"
-            >
-              <X className="size-4" aria-hidden="true" />
-            </button>
-          )}
-        </div>
-      </AlertContext.Provider>
-    );
-  },
-);
-AlertBase.displayName = "Alert";
-
-export const AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProp>(
-  ({ className, ...props }, ref) => {
-    const variant = React.useContext(AlertContext);
-    return (
-      <p
-        ref={ref}
-        data-slot="alert-title"
-        data-variant={variant}
-        className={className}
-        {...props}
-      />
-    );
-  },
-);
-AlertTitle.displayName = "AlertTitle";
-
-export const AlertContent = React.forwardRef<HTMLDivElement, AlertContentProp>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="alert-content"
-      className={cn("min-w-0 flex-1", className)}
-      {...props}
-    />
-  ),
-);
-AlertContent.displayName = "AlertContent";
-
-export const AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProp>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} data-slot="alert-description" className={className} {...props} />
-  ),
-);
-AlertDescription.displayName = "AlertDescription";
-
-export const AlertActions = React.forwardRef<HTMLDivElement, AlertActionsProp>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} data-slot="alert-actions" className={className} {...props} />
-  ),
-);
-AlertActions.displayName = "AlertActions";
-
-/** TanStack Query / API failure preset — same visual as `Alert variant="destructive"`. Used by `DataState` (@godxjp/ui/query). */
-export function AlertQueryError({ error, onRetry, className }: AlertQueryErrorProp) {
-  const { t } = useTranslation();
-  return (
-    <Alert variant="destructive" className={className}>
-      <AlertTitle>{t("common.error")}</AlertTitle>
-      <AlertDescription>{humanError(error)}</AlertDescription>
-      {onRetry && (
-        <AlertActions>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => {
-              void onRetry();
-            }}
-          >
-            <Inline gap="xs">
-              <RefreshCw className="size-4" aria-hidden="true" />
-              {t("common.retry")}
-            </Inline>
-          </Button>
-        </AlertActions>
-      )}
-    </Alert>
-  );
-}
-
-export const Alert = Object.assign(AlertBase, {
-  Title: AlertTitle,
-  Content: AlertContent,
-  Description: AlertDescription,
-  Actions: AlertActions,
-  QueryError: AlertQueryError,
-});
-
-export { AlertBase };

package/src/components/feedback/dialog.tsx

@@ -1,325 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { X } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-import { buttonVariants } from "../general/button";
-import { useTranslation } from "../../i18n/use-translation";
-import { Button } from "../general/button";
-import { Input } from "../data-entry/input";
-import { Label } from "../data-entry/label";
-import type { DialogConfirmProp } from "../../props/components/feedback.prop";
-
-export type {
-  DialogConfirmProp,
-  DialogConfirmProp as DialogConfirmProps,
-} from "../../props/components/feedback.prop";
-
-/** form = nhập liệu / wizard (role=dialog, có nút X). confirm = quyết định (role=alertdialog, không X). */
-export type DialogMode = "form" | "confirm";
-
-const DialogModeContext = React.createContext<DialogMode>("form");
-
-function useDialogMode(): DialogMode {
-  return React.useContext(DialogModeContext);
-}
-
-type DialogRootProps = React.ComponentProps<typeof DialogPrimitive.Root> & {
-  mode?: DialogMode;
-};
-
-function DialogRoot({ mode = "form", ...props }: DialogRootProps) {
-  if (mode === "confirm") {
-    return (
-      <DialogModeContext.Provider value="confirm">
-        <AlertDialogPrimitive.Root data-slot="dialog" {...props} />
-      </DialogModeContext.Provider>
-    );
-  }
-  return (
-    <DialogModeContext.Provider value="form">
-      <DialogPrimitive.Root data-slot="dialog" {...props} />
-    </DialogModeContext.Provider>
-  );
-}
-
-function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  const mode = useDialogMode();
-  if (mode === "confirm") {
-    return <AlertDialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-  }
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-const DialogOverlay = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    data-slot="dialog-overlay"
-    className={cn(
-      "ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
-      className,
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    showClose?: boolean;
-    showCloseButton?: boolean;
-  }
->(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
-  const mode = useDialogMode();
-
-  if (mode === "confirm") {
-    return (
-      <AlertDialogPrimitive.Portal>
-        <AlertDialogPrimitive.Overlay
-          data-slot="dialog-overlay"
-          className="ui-dialog-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-        />
-        <AlertDialogPrimitive.Content
-          ref={ref}
-          data-slot="dialog-content"
-          className={cn(
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </AlertDialogPrimitive.Content>
-      </AlertDialogPrimitive.Portal>
-    );
-  }
-
-  const showCloseButton = showCloseButtonProp ?? showClose ?? true;
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        ref={ref}
-        data-slot="dialog-content"
-        className={cn(
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 duration-200 outline-none",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton ? (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring transition-opacity focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-          >
-            <X className="size-4" aria-hidden="true" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        ) : null}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-});
-DialogContent.displayName = "DialogContent";
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div data-slot="dialog-header" className={className} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div data-slot="dialog-footer" className={className} {...props} />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  HTMLHeadingElement,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => {
-  const mode = useDialogMode();
-  const cls = cn(className);
-  if (mode === "confirm") {
-    return (
-      <AlertDialogPrimitive.Title ref={ref} data-slot="dialog-title" className={cls} {...props} />
-    );
-  }
-  return <DialogPrimitive.Title ref={ref} data-slot="dialog-title" className={cls} {...props} />;
-});
-DialogTitle.displayName = "DialogTitle";
-
-const DialogDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => {
-  const mode = useDialogMode();
-  const cls = cn(className);
-  if (mode === "confirm") {
-    return (
-      <AlertDialogPrimitive.Description
-        ref={ref}
-        data-slot="dialog-description"
-        className={cls}
-        {...props}
-      />
-    );
-  }
-  return (
-    <DialogPrimitive.Description
-      ref={ref}
-      data-slot="dialog-description"
-      className={cls}
-      {...props}
-    />
-  );
-});
-DialogDescription.displayName = "DialogDescription";
-
-/** Confirm mode — primary action (maps to Radix AlertDialogAction). */
-const DialogAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
-));
-DialogAction.displayName = "DialogAction";
-
-/** Confirm mode — dismiss without action (maps to Radix AlertDialogCancel). */
-const DialogCancel = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(buttonVariants({ variant: "outline" }), className)}
-    {...props}
-  />
-));
-DialogCancel.displayName = "DialogCancel";
-
-/** Preset: confirm / destructive / type-to-confirm — use case `mode="confirm"` without compound markup. */
-function DialogConfirm({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel,
-  cancelLabel,
-  variant = "default",
-  confirmPhrase,
-  onConfirm,
-  keepOpenOnConfirm = false,
-  pending = false,
-}: DialogConfirmProp) {
-  const { t } = useTranslation();
-  const [typed, setTyped] = React.useState("");
-  const inputId = React.useId();
-
-  const needsPhrase = confirmPhrase != null && confirmPhrase.length > 0;
-  const phraseMatches = !needsPhrase || typed === confirmPhrase;
-  const effectiveVariant = needsPhrase ? "destructive" : variant;
-  const resolvedConfirm = confirmLabel ?? (needsPhrase ? t("common.delete") : t("common.continue"));
-  const resolvedCancel = cancelLabel ?? t("common.cancel");
-
-  const handleOpenChange = (next: boolean) => {
-    setTyped("");
-    onOpenChange(next);
-  };
-
-  const handleConfirm = () => {
-    if (!phraseMatches) return;
-    void (async () => {
-      await onConfirm();
-      if (!keepOpenOnConfirm) onOpenChange(false);
-    })();
-  };
-
-  return (
-    <DialogRoot mode="confirm" open={open} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          {description ? <DialogDescription>{description}</DialogDescription> : null}
-        </DialogHeader>
-
-        {needsPhrase && (
-          <div className="ui-stack-xs">
-            <Label htmlFor={inputId} className="text-sm">
-              {t("common.typeToConfirm", { phrase: confirmPhrase })}
-            </Label>
-            <Input
-              id={inputId}
-              value={typed}
-              onChange={(e) => {
-                setTyped(e.target.value);
-              }}
-              autoComplete="off"
-              spellCheck={false}
-              placeholder={confirmPhrase}
-              aria-required="true"
-            />
-          </div>
-        )}
-
-        <DialogFooter>
-          <DialogCancel asChild>
-            <Button variant="ghost" disabled={pending}>
-              {resolvedCancel}
-            </Button>
-          </DialogCancel>
-          <Button
-            variant={effectiveVariant === "destructive" ? "destructive" : "default"}
-            onClick={handleConfirm}
-            disabled={pending || !phraseMatches}
-          >
-            {pending ? t("common.working") : resolvedConfirm}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </DialogRoot>
-  );
-}
-
-export const Dialog = Object.assign(DialogRoot, {
-  Trigger: DialogTrigger,
-  Portal: DialogPortal,
-  Overlay: DialogOverlay,
-  Content: DialogContent,
-  Header: DialogHeader,
-  Footer: DialogFooter,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Close: DialogClose,
-  Action: DialogAction,
-  Cancel: DialogCancel,
-  Confirm: DialogConfirm,
-});
-
-export {
-  DialogRoot,
-  DialogTrigger,
-  DialogPortal,
-  DialogOverlay,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-  DialogAction,
-  DialogCancel,
-  DialogConfirm,
-};

package/src/components/feedback/index.ts

@@ -1,53 +0,0 @@
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  DialogAction,
-  DialogCancel,
-  DialogConfirm,
-} from "./dialog";
-export type { DialogMode, DialogConfirmProp, DialogConfirmProps } from "./dialog";
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-} from "./sheet";
-export { Toaster } from "./sonner";
-export { toast, useToast, type LegacyToastOptions } from "./use-toast";
-export { SkeletonRows, SkeletonTable, SkeletonDetail, SkeletonCard } from "./skeleton";
-export {
-  Alert,
-  AlertTitle,
-  AlertContent,
-  AlertDescription,
-  AlertActions,
-  AlertQueryError,
-} from "./alert";
-export type {
-  AlertProp,
-  AlertProps,
-  AlertTitleProp,
-  AlertTitleProps,
-  AlertContentProp,
-  AlertContentProps,
-  AlertDescriptionProp,
-  AlertDescriptionProps,
-  AlertActionsProp,
-  AlertActionsProps,
-  AlertQueryErrorProp,
-  AlertQueryErrorProps,
-} from "./alert";

package/src/components/feedback/sheet.tsx

@@ -1,130 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-import { cn } from "../../lib/utils";
-
-export function Sheet(props: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="sheet" {...props} />;
-}
-
-export function SheetTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
-}
-
-export function SheetClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="sheet-close" {...props} />;
-}
-
-export function SheetPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="sheet-portal" {...props} />;
-}
-
-export const SheetOverlay = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    data-slot="sheet-overlay"
-    className={cn(
-      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-      className,
-    )}
-    {...props}
-  />
-));
-SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const sheetVariants = cva(
-  "fixed z-50 flex flex-col gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md",
-        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-      },
-    },
-    defaultVariants: { side: "right" },
-  },
-);
-
-interface SheetContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {
-  showCloseButton?: boolean;
-}
-
-export const SheetContent = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, showCloseButton = true, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      data-slot="sheet-content"
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      {showCloseButton ? (
-        <DialogPrimitive.Close
-          data-slot="sheet-close"
-          className="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
-        >
-          <X className="size-4" aria-hidden="true" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      ) : null}
-    </DialogPrimitive.Content>
-  </SheetPortal>
-));
-SheetContent.displayName = DialogPrimitive.Content.displayName;
-
-export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    data-slot="sheet-header"
-    className={cn("flex flex-col gap-1.5 text-center sm:text-left", className)}
-    {...props}
-  />
-);
-
-export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    data-slot="sheet-footer"
-    className={cn("mt-auto flex flex-col gap-2", className)}
-    {...props}
-  />
-);
-
-export const SheetTitle = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    data-slot="sheet-title"
-    className={cn("text-foreground text-lg font-semibold", className)}
-    {...props}
-  />
-));
-SheetTitle.displayName = DialogPrimitive.Title.displayName;
-
-export const SheetDescription = React.forwardRef<
-  React.ComponentRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    data-slot="sheet-description"
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
-SheetDescription.displayName = DialogPrimitive.Description.displayName;