@godxjp/ui 23.2.1 → 23.4.0

package/dist/components/general/float-button.js

@@ -0,0 +1,336 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronUp, FileText, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { useMediaQuery } from "../../lib/hooks.js";
+import { numberFormat } from "../../lib/intl-cache.js";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import { Button } from "./button.js";
+const GroupContext = React.createContext(null);
+const DEFAULT_ICON = /* @__PURE__ */ jsx(FileText, { "aria-hidden": "true" });
+const BUTTON_VARIANT = {
+  default: "outline",
+  primary: "default"
+};
+function isRenderable(node) {
+  return node != null && node !== false && node !== true && node !== "";
+}
+function toTooltipProps(tooltip) {
+  if (tooltip == null) return null;
+  if (typeof tooltip === "object" && !React.isValidElement(tooltip) && "title" in tooltip) {
+    return tooltip;
+  }
+  return { title: tooltip };
+}
+function FloatButtonBadge({
+  badge,
+  locale
+}) {
+  const { count, dot, overflowCount = 99, showZero = false, color } = badge;
+  if (!dot) {
+    if (count == null) return null;
+    if (count === 0 && !showZero) return null;
+  }
+  const label = dot ? null : count != null && count > overflowCount ? `${numberFormat(locale).format(overflowCount)}+` : numberFormat(locale).format(count ?? 0);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "float-button-badge",
+      "data-dot": dot ? "" : void 0,
+      className: "ui-float-button-badge",
+      style: color ? { "--float-button-badge-background": color } : void 0,
+      children: label
+    }
+  );
+}
+const FloatButtonRoot = React.forwardRef(function FloatButton({
+  icon,
+  description,
+  content,
+  type = "default",
+  shape = "circle",
+  tooltip,
+  href,
+  target,
+  badge,
+  disabled,
+  htmlType = "button",
+  className,
+  children,
+  ...rest
+}, ref) {
+  const { locale } = useTranslation();
+  const group = React.useContext(GroupContext);
+  const mergedShape = group?.shape ?? shape;
+  const mergedContent = isRenderable(content) ? content : description;
+  const hasContent = isRenderable(mergedContent);
+  const mergedIcon = !hasContent && icon == null ? DEFAULT_ICON : icon;
+  if (process.env.NODE_ENV !== "production" && mergedShape === "circle" && hasContent) {
+    console.warn(
+      "[@godxjp/ui] FloatButton: `content` is supported only when `shape` is `square` \u2014 a circle has no room for a line of text."
+    );
+  }
+  const tooltipProps = toTooltipProps(tooltip);
+  const ariaLabel = rest["aria-label"] ?? (!hasContent && typeof tooltipProps?.title === "string" ? tooltipProps.title : void 0);
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isRenderable(mergedIcon) ? /* @__PURE__ */ jsx("span", { "data-slot": "float-button-icon", className: "ui-float-button-icon", children: mergedIcon }) : null,
+    hasContent ? /* @__PURE__ */ jsx("span", { "data-slot": "float-button-content", className: "ui-float-button-content", children: mergedContent }) : null,
+    children,
+    badge ? /* @__PURE__ */ jsx(FloatButtonBadge, { badge, locale }) : null
+  ] });
+  const shared = {
+    "data-slot": "float-button",
+    "data-type": type,
+    "data-shape": mergedShape,
+    "data-individual": group?.individual ?? true ? "" : void 0,
+    "data-icon-only": hasContent ? void 0 : "",
+    className: cn("ui-float-button", className),
+    variant: BUTTON_VARIANT[type],
+    shape: mergedShape === "circle" ? "pill" : "default",
+    size: "icon-lg"
+  };
+  const node = href ? /* @__PURE__ */ jsx(Button, { ...shared, asChild: true, children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...rest,
+      ref,
+      href: disabled ? void 0 : href,
+      target,
+      "aria-label": ariaLabel,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      children: inner
+    }
+  ) }) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...shared,
+      ...rest,
+      ref,
+      type: htmlType,
+      disabled,
+      "aria-label": ariaLabel,
+      children: inner
+    }
+  );
+  if (!tooltipProps || !isRenderable(tooltipProps.title)) return node;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: node }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        side: tooltipProps.side,
+        align: tooltipProps.align,
+        sideOffset: tooltipProps.sideOffset,
+        children: tooltipProps.title
+      }
+    )
+  ] });
+});
+const PLACEMENTS = ["top", "left", "right", "bottom"];
+function FloatButtonGroup({
+  children,
+  trigger,
+  open,
+  onOpenChange,
+  closeIcon,
+  placement,
+  shape = "circle",
+  type = "default",
+  icon,
+  disabled,
+  className,
+  onClick,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const rootRef = React.useRef(null);
+  const isMenuMode = trigger === "click" || trigger === "hover";
+  const mergedPlacement = PLACEMENTS.includes(placement) ? placement : "top";
+  const individual = shape === "circle";
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const isControlled = open != null;
+  const isOpen = isControlled ? open : uncontrolledOpen;
+  if (process.env.NODE_ENV !== "production" && isControlled && !trigger) {
+    console.warn(
+      "[@godxjp/ui] FloatButton.Group: `open` needs to be used together with `trigger`."
+    );
+  }
+  const setOpen = React.useCallback(
+    (next) => {
+      if (disabled || next === isOpen) return;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [disabled, isOpen, isControlled, onOpenChange]
+  );
+  React.useEffect(() => {
+    if (trigger !== "click") return;
+    const root = rootRef.current;
+    if (!root) return;
+    const doc = root.ownerDocument;
+    const onDocClick = (event) => {
+      if (event.composedPath().includes(root)) return;
+      setOpen(false);
+    };
+    doc.addEventListener("click", onDocClick, { capture: true });
+    return () => doc.removeEventListener("click", onDocClick, { capture: true });
+  }, [trigger, setOpen]);
+  const listContext = React.useMemo(() => ({ shape, individual }), [shape, individual]);
+  const triggerContext = React.useMemo(() => ({ shape, individual: true }), [shape]);
+  const list = /* @__PURE__ */ jsx(GroupContext.Provider, { value: listContext, children: /* @__PURE__ */ jsx("div", { "data-slot": "float-button-list", className: "ui-float-button-list", children }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "data-slot": "float-button-group",
+      "data-placement": isMenuMode ? mergedPlacement : void 0,
+      "data-menu-mode": isMenuMode ? "" : void 0,
+      "data-individual": individual ? "" : void 0,
+      "data-state": isMenuMode ? isOpen ? "open" : "closed" : void 0,
+      className: cn("ui-float-button-group", className),
+      onMouseEnter: trigger === "hover" ? () => setOpen(true) : void 0,
+      onMouseLeave: trigger === "hover" ? () => setOpen(false) : void 0,
+      children: [
+        isMenuMode ? isOpen ? list : null : list,
+        isMenuMode ? /* @__PURE__ */ jsx(GroupContext.Provider, { value: triggerContext, children: /* @__PURE__ */ jsx(
+          FloatButtonRoot,
+          {
+            ...rest,
+            type,
+            disabled,
+            icon: isOpen ? closeIcon ?? /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }) : icon,
+            "aria-label": rest["aria-label"] ?? t("ui.floatButton.actions"),
+            "aria-expanded": isOpen,
+            className: "ui-float-button-trigger",
+            onClick: (event) => {
+              if (trigger === "click") setOpen(!isOpen);
+              onClick?.(event);
+            }
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function easeInOutCubic(t, b, c, d) {
+  const cc = c - b;
+  let tt = t / (d / 2);
+  if (tt < 1) return cc / 2 * tt * tt * tt + b;
+  tt -= 2;
+  return cc / 2 * (tt * tt * tt + 2) + b;
+}
+function readScrollTop(target) {
+  if (!target) return 0;
+  if (target === window) return window.pageYOffset || window.document.documentElement.scrollTop;
+  if ("documentElement" in target && target.documentElement) {
+    return target.documentElement.scrollTop;
+  }
+  return target.scrollTop;
+}
+function writeScrollTop(target, value) {
+  if (!target) return;
+  if (target === window) {
+    window.scrollTo(window.pageXOffset, value);
+  } else if ("documentElement" in target && target.documentElement) {
+    target.documentElement.scrollTop = value;
+  } else {
+    target.scrollTop = value;
+  }
+}
+function readScrollProgress(target) {
+  if (!target) return 0;
+  const element = target === window ? window.document.documentElement : "documentElement" in target && target.documentElement ? target.documentElement : target;
+  if (!element) return 0;
+  const max = Math.max(element.scrollHeight - element.clientHeight, 0);
+  if (max <= 0) return 0;
+  return Math.min(Math.max(readScrollTop(target) / max, 0), 1);
+}
+function FloatButtonBackTop({
+  visibilityHeight = 400,
+  target,
+  duration = 450,
+  showProgress = false,
+  onClick,
+  icon,
+  tooltip,
+  className,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const nodeRef = React.useRef(null);
+  const [visible, setVisible] = React.useState(visibilityHeight === 0);
+  const [progress, setProgress] = React.useState(0);
+  const getTarget = React.useCallback(
+    () => target ? target() : nodeRef.current?.ownerDocument ?? window,
+    [target]
+  );
+  React.useEffect(() => {
+    const container = getTarget();
+    let frame = 0;
+    const sync = () => {
+      frame = 0;
+      setVisible(readScrollTop(container) >= visibilityHeight);
+      if (showProgress) setProgress(readScrollProgress(container));
+    };
+    const onScroll = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(sync);
+    };
+    sync();
+    container?.addEventListener("scroll", onScroll);
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      container?.removeEventListener("scroll", onScroll);
+    };
+  }, [getTarget, showProgress, visibilityHeight]);
+  const scrollToTop = (event) => {
+    const container = getTarget();
+    const from = readScrollTop(container);
+    if (reduceMotion || duration <= 0) {
+      writeScrollTop(container, 0);
+    } else {
+      const startedAt = Date.now();
+      const step = () => {
+        const elapsed = Date.now() - startedAt;
+        if (elapsed >= duration) {
+          writeScrollTop(container, 0);
+          return;
+        }
+        writeScrollTop(container, easeInOutCubic(elapsed, from, 0, duration));
+        requestAnimationFrame(step);
+      };
+      requestAnimationFrame(step);
+    }
+    onClick?.(event);
+  };
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(
+    FloatButtonRoot,
+    {
+      ...rest,
+      ref: nodeRef,
+      className: cn("ui-float-button-back-top", className),
+      "data-progress": showProgress ? "" : void 0,
+      icon: icon ?? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" }),
+      tooltip: tooltip ?? t("ui.floatButton.backTop"),
+      onClick: scrollToTop,
+      style: showProgress ? {
+        ...rest.style,
+        "--float-button-progress-offset": `${progress}turn`
+      } : rest.style
+    }
+  );
+}
+FloatButtonGroup.displayName = "FloatButton.Group";
+FloatButtonBackTop.displayName = "FloatButton.BackTop";
+const FloatButton2 = Object.assign(FloatButtonRoot, {
+  Group: FloatButtonGroup,
+  BackTop: FloatButtonBackTop
+});
+export {
+  FloatButton2 as FloatButton
+};

package/dist/components/general/index.d.ts

@@ -1,11 +1,15 @@
 export { Button, buttonVariants } from "./button.js";
 export type { ButtonProps } from "./button.js";
-export { Text, Heading } from "./typography.js";
-export type { TextProps, HeadingProps, TextProp, HeadingProp } from "./typography.js";
+export { Text, Heading, Typography, Title, Paragraph, Link } from "./typography.js";
+export type { TextProps, HeadingProps, TextProp, HeadingProp, TypographyProp, TypographyProps, TypographyBlockProp, TypographyTitleProp, TitleProps, ParagraphProp, ParagraphProps, LinkProp, LinkProps, } from "./typography.js";
 export { Logo } from "./logo.js";
 export type { LogoMark, LogoProps, LogoSize, LogoTone } from "./logo.js";
 export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";
+export { FloatButton } from "./float-button.js";
+export type { FloatButtonBackTopProp, FloatButtonBackTopProps, FloatButtonBadgeProp, FloatButtonGroupProp, FloatButtonGroupProps, FloatButtonPlacementProp, FloatButtonProp, FloatButtonProps, FloatButtonShapeProp, FloatButtonTooltipProp, FloatButtonTriggerProp, FloatButtonTypeProp, } from "./float-button.js";
 export { Activity } from "./activity.js";
 export type { ActivityProp, ActivityProps } from "./activity.js";
 export { VisuallyHidden } from "./visually-hidden.js";
+export { Actions, ActionsItem, ActionsCopy, ActionsFeedback } from "./actions.js";
+export type { ActionsProp, ActionsProps, ActionsItemsProp, ActionsItemProp, ActionsItemProps, ActionsCopyProp, ActionsCopyProps, ActionsFeedbackProp, ActionsFeedbackProps, ActionsVariantProp, ActionsStatusProp, ActionsFeedbackValueProp, } from "./actions.js";

package/dist/components/general/index.js

@@ -1,16 +1,27 @@
 import { Button, buttonVariants } from "./button.js";
-import { Text, Heading } from "./typography.js";
+import { Text, Heading, Typography, Title, Paragraph, Link } from "./typography.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
+import { FloatButton } from "./float-button.js";
 import { Activity } from "./activity.js";
 import { VisuallyHidden } from "./visually-hidden.js";
+import { Actions, ActionsItem, ActionsCopy, ActionsFeedback } from "./actions.js";
 export {
+  Actions,
+  ActionsCopy,
+  ActionsFeedback,
+  ActionsItem,
   Activity,
   Button,
+  FloatButton,
   Heading,
+  Link,
   Logo,
+  Paragraph,
   Reveal,
   Text,
+  Title,
+  Typography,
   VisuallyHidden,
   buttonVariants
 };

package/dist/components/general/typography.d.ts

@@ -1,10 +1,14 @@
 import * as React from "react";
-export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as HeadingProps, } from "../../props/components/general.prop.js";
+import type { TextProp, TypographyBlockProp } from "../../props/components/general.prop.js";
+import type { TypographyEllipsisConfigProp } from "../../props/vocabulary/index.js";
+export type { TextProp, TextProp as TextProps, HeadingProp, HeadingProp as HeadingProps, TypographyProp, TypographyProp as TypographyProps, TypographyBlockProp, TypographyTitleProp, TypographyTitleProp as TitleProps, ParagraphProp, ParagraphProp as ParagraphProps, LinkProp, LinkProp as LinkProps, } from "../../props/components/general.prop.js";
 /**
- * Text — the typographic primitive. Use it INSTEAD of a hand-rolled `<span className="text-[13px]
- * font-medium text-muted-foreground">`.
+ * Text — the typographic primitive, and antd's `Typography.Text`.
+ *
+ * Use it INSTEAD of a hand-rolled `<span className="text-[13px] font-medium text-muted-foreground">`.
+ * Size is a step of the type scale (never a px); tone and weight are tokens.
  */
-export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
+export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & Omit<TypographyBlockProp, "ellipsis"> & {
     as?: "span" | "p" | "div" | "a" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
     asChild?: import("../../props/index.js").AsChildProp;
     link?: boolean;
@@ -14,6 +18,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
     clamp?: number;
+    ellipsis?: boolean | Omit<TypographyEllipsisConfigProp, "rows" | "expandable" | "onExpand">;
     whitespace?: import("../../props/index.js").TextWhitespaceProp;
     tabular?: boolean;
     decoration?: "none" | "underline" | "line-through";
@@ -25,9 +30,39 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     rel?: string;
     download?: React.AnchorHTMLAttributes<HTMLAnchorElement>["download"];
 } & React.RefAttributes<HTMLElement>>;
+/**
+ * Paragraph — antd `Typography.Paragraph`.
+ *
+ * Renders a `<div>`, matching antd, because the editing textarea and the action cluster are block
+ * content that a `<p>` may not legally contain — a `<p>` would be split by the parser and the
+ * actions would end up OUTSIDE the paragraph. Pass `as="p"` when the content is phrasing-only.
+ *
+ * The one difference from `Text` is antd's: `ellipsis` here keeps `rows`, `expandable` and
+ * `onExpand`.
+ */
+export declare const Paragraph: React.ForwardRefExoticComponent<Omit<TextProp, "as" | "ellipsis"> & {
+    as?: "div" | "p" | "span";
+    ellipsis?: boolean | TypographyEllipsisConfigProp;
+} & React.RefAttributes<HTMLElement>>;
+/**
+ * Link — antd `Typography.Link`.
+ *
+ * `Text link` is the same affordance and is unchanged; `Link` is antd's anchor-by-default flavour
+ * of it. It adds antd's `rel` guard: a `target="_blank"` with no explicit `rel` gets
+ * `noopener noreferrer`, because the opened document otherwise keeps a live handle on
+ * `window.opener`. antd restricts `ellipsis` to a boolean on `Link`, and that restriction is ported
+ * by the type — `allowRows` stays off.
+ */
+export declare const Link: React.ForwardRefExoticComponent<Omit<TextProp, "as" | "ellipsis"> & {
+    as?: "a" | "span";
+    ellipsis?: boolean;
+} & React.RefAttributes<HTMLElement>>;
 /**
  * Heading — h1..h4 sized from the `--heading-h*` tokens. `level` sets both the size token and the
  * semantic element; override the rendered element with `as` (e.g. a visual h2 that is a real <h1>).
+ *
+ * UNCHANGED by the antd port. antd's heading is `Title`, which is the sibling below; `Heading` is
+ * this library's own and keeps its four levels, its props and its markup exactly as they shipped.
  */
 export declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & {
     level?: import("../../props/index.js").HeadingLevelProp;
@@ -37,3 +72,43 @@ export declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAtt
     truncate?: boolean;
     weight?: import("../../props/index.js").FontWeightProp;
 } & React.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Title — antd `Typography.Title`.
+ *
+ * A SIBLING of `Heading`, not a replacement: five levels instead of four, plus the antd block
+ * behaviours (`copyable`, `editable`, `ellipsis`, the decorations). antd omits `strong` here
+ * because a heading already renders at the strong weight, and that omission is ported.
+ */
+export declare const Title: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> & Omit<TypographyBlockProp, "strong"> & {
+    level?: import("../../props/index.js").TitleLevelProp;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "div";
+    tone?: import("../../props/index.js").TextToneProp;
+    align?: import("../../props/index.js").TextAlignProp;
+    truncate?: boolean;
+    weight?: import("../../props/index.js").FontWeightProp;
+    ellipsis?: boolean | TypographyEllipsisConfigProp;
+} & React.RefAttributes<HTMLElement>>;
+/**
+ * Typography — antd's plain wrapper for a run of prose.
+ *
+ * It renders an `<article>` and carries no emphasis of its own. It exists so `Title`, `Paragraph`,
+ * `Text` and `Link` have a container with the reading measure and the block rhythm on it, and so
+ * the compound spelling every antd codebase is written in — `<Typography.Text>` — works here
+ * unchanged.
+ */
+declare const TypographyRoot: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "color"> & {
+    as?: string;
+    component?: string;
+} & React.RefAttributes<HTMLElement>>;
+type TypographyCompound = typeof TypographyRoot & {
+    Text: typeof Text;
+    Title: typeof Title;
+    Paragraph: typeof Paragraph;
+    Link: typeof Link;
+};
+/**
+ * The compound export. `Typography.Text` and the bare `Text` are the SAME component — there is no
+ * second, poorer Text — so a paste from an antd codebase and a call written in this library's own
+ * style compile to the same thing.
+ */
+export declare const Typography: TypographyCompound;