@godxjp/ui 6.0.0 → 6.0.2

package/dist/chunk-DU6ZYZRP.js

@@ -0,0 +1,238 @@
+import { Input } from './chunk-VOHTRR5X.js';
+import { buttonVariants, Button } from './chunk-HJEBRCXL.js';
+import { Label } from './chunk-7PWBC4BY.js';
+import { useTranslation } from './chunk-3F2AKYRD.js';
+import { cn } from './chunk-U7N2A7A3.js';
+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 { jsx, jsxs } from 'react/jsx-runtime';
+
+var DialogModeContext = React.createContext("form");
+function useDialogMode() {
+  return React.useContext(DialogModeContext);
+}
+function DialogRoot({ mode = "form", ...props }) {
+  if (mode === "confirm") {
+    return /* @__PURE__ */ jsx(DialogModeContext.Provider, { value: "confirm", children: /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "dialog", ...props }) });
+  }
+  return /* @__PURE__ */ jsx(DialogModeContext.Provider, { value: "form", children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props }) });
+}
+function DialogTrigger(props) {
+  const mode = useDialogMode();
+  if (mode === "confirm") {
+    return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  }
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal(props) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose(props) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    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;
+var DialogContent = React.forwardRef(({ className, children, showClose, showCloseButton: showCloseButtonProp, ...props }, ref) => {
+  const mode = useDialogMode();
+  if (mode === "confirm") {
+    return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        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"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AlertDialogPrimitive.Content,
+        {
+          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
+        }
+      )
+    ] });
+  }
+  const showCloseButton = showCloseButtonProp ?? showClose ?? true;
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        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: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsxs(
+            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",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+});
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "dialog-header", className, ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "dialog-footer", className, ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => {
+  const mode = useDialogMode();
+  const cls = cn(className);
+  if (mode === "confirm") {
+    return /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, { ref, "data-slot": "dialog-title", className: cls, ...props });
+  }
+  return /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, "data-slot": "dialog-title", className: cls, ...props });
+});
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const mode = useDialogMode();
+  const cls = cn(className);
+  if (mode === "confirm") {
+    return /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Description,
+      {
+        ref,
+        "data-slot": "dialog-description",
+        className: cls,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      ref,
+      "data-slot": "dialog-description",
+      className: cls,
+      ...props
+    }
+  );
+});
+DialogDescription.displayName = "DialogDescription";
+var DialogAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className: cn(buttonVariants(), className), ...props }));
+DialogAction.displayName = "DialogAction";
+var DialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className: cn(buttonVariants({ variant: "outline" }), className),
+    ...props
+  }
+));
+DialogCancel.displayName = "DialogCancel";
+function DialogConfirm({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  cancelLabel,
+  variant = "default",
+  confirmPhrase,
+  onConfirm,
+  keepOpenOnConfirm = false,
+  pending = false
+}) {
+  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) => {
+    setTyped("");
+    onOpenChange(next);
+  };
+  const handleConfirm = () => {
+    if (!phraseMatches) return;
+    void (async () => {
+      await onConfirm();
+      if (!keepOpenOnConfirm) onOpenChange(false);
+    })();
+  };
+  return /* @__PURE__ */ jsx(DialogRoot, { mode: "confirm", open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      description ? /* @__PURE__ */ jsx(DialogDescription, { children: description }) : null
+    ] }),
+    needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "text-sm", children: t("common.typeToConfirm", { phrase: confirmPhrase }) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: inputId,
+          value: typed,
+          onChange: (e) => {
+            setTyped(e.target.value);
+          },
+          autoComplete: "off",
+          spellCheck: false,
+          placeholder: confirmPhrase,
+          "aria-required": "true"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: pending, children: resolvedCancel }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: effectiveVariant === "destructive" ? "destructive" : "default",
+          onClick: handleConfirm,
+          disabled: pending || !phraseMatches,
+          children: pending ? t("common.working") : resolvedConfirm
+        }
+      )
+    ] })
+  ] }) });
+}
+var 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 { Dialog, DialogAction, DialogCancel, DialogClose, DialogConfirm, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger };

package/dist/chunk-DY5C44UP.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { jsx } from 'react/jsx-runtime';
+
+function Popover(props) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger(props) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverAnchor(props) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    "data-slot": "popover-content",
+    align,
+    sideOffset,
+    className: cn(
+      "bg-popover text-popover-foreground z-50 w-72 origin-[var(--radix-popover-content-transform-origin)] rounded-md border p-4 shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var PopoverHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "popover-header",
+    className: cn("flex flex-col gap-1 text-sm", className),
+    ...props
+  }
+);
+var PopoverTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { "data-slot": "popover-title", className: cn("font-medium", className), ...props });
+var PopoverDescription = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    "data-slot": "popover-description",
+    className: cn("text-muted-foreground", className),
+    ...props
+  }
+);
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/chunk-E4HJNQ62.js

@@ -0,0 +1,117 @@
+import { humanError } from './chunk-7S7MYFXE.js';
+import { Inline } from './chunk-S66TJXJU.js';
+import { Button } from './chunk-HJEBRCXL.js';
+import { useTranslation } from './chunk-3F2AKYRD.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { CheckCircle2, TriangleAlert, AlertCircle, Info, X, RefreshCw } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AlertContext = React.createContext("default");
+var DEFAULT_ICONS = {
+  default: Info,
+  destructive: AlertCircle,
+  warning: TriangleAlert,
+  success: CheckCircle2
+};
+var AlertBase = React.forwardRef(
+  ({ variant = "default", icon, onDismiss, className, children, ...props }, ref) => {
+    const IconComponent = icon === false ? null : icon ?? DEFAULT_ICONS[variant];
+    return /* @__PURE__ */ jsx(AlertContext.Provider, { value: variant, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-slot": "alert",
+        "data-variant": variant,
+        "data-dismissible": onDismiss ? "" : void 0,
+        className,
+        ...props,
+        children: [
+          IconComponent && /* @__PURE__ */ jsx(IconComponent, { "data-slot": "alert-icon", "data-variant": variant, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "alert-body", children }),
+          onDismiss && /* @__PURE__ */ jsx(
+            "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",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+AlertBase.displayName = "Alert";
+var AlertTitle = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const variant = React.useContext(AlertContext);
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        "data-slot": "alert-title",
+        "data-variant": variant,
+        className,
+        ...props
+      }
+    );
+  }
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "alert-content",
+      className: cn("min-w-0 flex-1", className),
+      ...props
+    }
+  )
+);
+AlertContent.displayName = "AlertContent";
+var AlertDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, "data-slot": "alert-description", className, ...props })
+);
+AlertDescription.displayName = "AlertDescription";
+var AlertActions = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "alert-actions", className, ...props })
+);
+AlertActions.displayName = "AlertActions";
+function AlertQueryError({ error, onRetry, className }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Alert, { variant: "destructive", className, children: [
+    /* @__PURE__ */ jsx(AlertTitle, { children: t("common.error") }),
+    /* @__PURE__ */ jsx(AlertDescription, { children: humanError(error) }),
+    onRetry && /* @__PURE__ */ jsx(AlertActions, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: () => {
+          void onRetry();
+        },
+        children: /* @__PURE__ */ jsxs(Inline, { gap: "xs", children: [
+          /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" }),
+          t("common.retry")
+        ] })
+      }
+    ) })
+  ] });
+}
+var Alert = Object.assign(AlertBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions,
+  QueryError: AlertQueryError
+});
+
+export { Alert, AlertActions, AlertBase, AlertContent, AlertDescription, AlertQueryError, AlertTitle };

package/dist/chunk-E76QIYSY.js

@@ -0,0 +1,93 @@
+import { ChoiceField, choiceGroupClassName } from './chunk-CQBADMFG.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+
+function useControllableArray(controlled, defaultValue) {
+  const [internal, setInternal] = React.useState(defaultValue);
+  const value = controlled ?? internal;
+  const setValue = React.useCallback(
+    (next) => {
+      if (controlled === void 0) setInternal(next);
+    },
+    [controlled]
+  );
+  return [value, setValue];
+}
+function CheckboxGroup({
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  options,
+  orientation = "vertical",
+  disabled,
+  name,
+  className,
+  children
+}) {
+  const reactId = React.useId();
+  const [value, setValue] = useControllableArray(controlledValue, defaultValue);
+  const toggle = (optionValue) => {
+    const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+    setValue(next);
+    onChange?.(next);
+  };
+  if (options && options.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "group",
+        "aria-disabled": disabled ? true : void 0,
+        "data-orientation": orientation,
+        className: choiceGroupClassName(orientation, className),
+        children: options.map((opt, index) => {
+          const id = `${reactId}-${opt.value}-${index}`;
+          const checked = value.includes(opt.value);
+          return /* @__PURE__ */ jsx(ChoiceField, { id, label: opt.label, description: opt.description, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id,
+              name,
+              value: opt.value,
+              checked,
+              disabled: Boolean(disabled) || Boolean(opt.disabled),
+              onCheckedChange: () => {
+                toggle(opt.value);
+              }
+            }
+          ) }, opt.value);
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-orientation": orientation,
+      className: cn(choiceGroupClassName(orientation), className),
+      children
+    }
+  );
+}
+var CheckboxRoot = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    "data-slot": "checkbox",
+    className: cn(
+      "peer ui-checkbox focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground shrink-0 shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "ui-choice-indicator", children: /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) })
+  }
+));
+CheckboxRoot.displayName = CheckboxPrimitive.Root.displayName;
+var Checkbox = Object.assign(CheckboxRoot, {
+  Group: CheckboxGroup
+});
+
+export { Checkbox, CheckboxGroup };

package/dist/chunk-F7PG4OEV.js

@@ -0,0 +1,37 @@
+import { Label } from './chunk-7PWBC4BY.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function FormField({
+  id,
+  label,
+  required,
+  helper,
+  error,
+  labelAddon,
+  className,
+  children
+}) {
+  const helperId = helper && !error ? `${id}-helper` : void 0;
+  const errorId = error ? `${id}-error` : void 0;
+  const describedBy = errorId ?? helperId;
+  const childWithA11y = React.isValidElement(children) ? React.cloneElement(children, {
+    "aria-describedby": describedBy,
+    "aria-required": required ? true : void 0,
+    "aria-invalid": !!error || void 0
+  }) : children;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs(Label, { htmlFor: id, className: "ui-inline-xs", children: [
+        /* @__PURE__ */ jsx("span", { children: label }),
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: "*" })
+      ] }),
+      labelAddon
+    ] }),
+    childWithA11y,
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-destructive text-xs", children: error }) : helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-muted-foreground text-xs", children: helper }) : null
+  ] });
+}
+
+export { FormField };