@godxjp/ui 23.3.0 → 23.4.0

package/dist/components/general/actions.js

@@ -0,0 +1,253 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Check, Copy, MoreHorizontal, ThumbsDown, ThumbsUp, TriangleAlert } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu.js";
+import { Button } from "./button.js";
+import { VisuallyHidden } from "./visually-hidden.js";
+function isRtl(element) {
+  return element?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl";
+}
+function LabelledIconButton({
+  label,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", size: "icon-sm", variant: "ghost", "aria-label": label, ...props, children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: label })
+  ] });
+}
+const Actions = React.forwardRef(
+  ({ items, onClick, variant = "borderless", fadeIn, fadeInLeft, label, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const nodes = React.useRef(/* @__PURE__ */ new Map());
+    const [focusKey, setFocusKey] = React.useState(null);
+    const navKeys = items.filter((item) => !item.actionRender).map((item) => item.key);
+    const tabStop = focusKey && navKeys.includes(focusKey) ? focusKey : navKeys[0];
+    const moveTo = (key) => {
+      if (!key) return;
+      setFocusKey(key);
+      nodes.current.get(key)?.focus();
+    };
+    const handleKeyDown = (key) => (event) => {
+      const rtl = isRtl(event.currentTarget);
+      const forward = rtl ? "ArrowLeft" : "ArrowRight";
+      const backward = rtl ? "ArrowRight" : "ArrowLeft";
+      const index = navKeys.indexOf(key);
+      if (event.key === forward) {
+        event.preventDefault();
+        moveTo(navKeys[(index + 1) % navKeys.length]);
+      } else if (event.key === backward) {
+        event.preventDefault();
+        moveTo(navKeys[(index - 1 + navKeys.length) % navKeys.length]);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        moveTo(navKeys[0]);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        moveTo(navKeys[navKeys.length - 1]);
+      }
+    };
+    const dispatch = (item, keyPath, domEvent) => {
+      if (item.onItemClick) {
+        item.onItemClick(item);
+        return;
+      }
+      onClick?.({ item, key: keyPath[0], keyPath, domEvent });
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id,
+        role: "toolbar",
+        "aria-label": label ?? t("general.actions.label"),
+        "aria-orientation": "horizontal",
+        "data-slot": "actions",
+        "data-variant": variant,
+        "data-fade-in": fadeIn || fadeInLeft ? "" : void 0,
+        "data-fade-in-inline": fadeInLeft ? "" : void 0,
+        className: cn("ui-actions", className),
+        ...rest,
+        children: items.map((item) => {
+          if (item.actionRender) {
+            return /* @__PURE__ */ jsx(React.Fragment, { children: typeof item.actionRender === "function" ? item.actionRender(item) : item.actionRender }, item.key);
+          }
+          const name = item.label ?? item.key;
+          const shared = {
+            ref: (node) => {
+              if (node) nodes.current.set(item.key, node);
+              else nodes.current.delete(item.key);
+            },
+            tabIndex: tabStop === item.key ? 0 : -1,
+            onFocus: () => setFocusKey(item.key),
+            onKeyDown: handleKeyDown(item.key),
+            variant: item.danger ? "destructive" : "ghost"
+          };
+          if (item.subItems && item.subItems.length > 0) {
+            return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { type: "button", size: "icon-sm", "aria-label": name, ...shared, children: item.icon ?? /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true" }) }) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: item.subItems.map((sub) => /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  variant: sub.danger ? "destructive" : void 0,
+                  onSelect: (event) => dispatch(
+                    sub,
+                    [sub.key, item.key],
+                    event
+                  ),
+                  children: [
+                    sub.icon,
+                    sub.label ?? sub.key
+                  ]
+                },
+                sub.key
+              )) })
+            ] }, item.key);
+          }
+          return /* @__PURE__ */ jsx(
+            LabelledIconButton,
+            {
+              label: name,
+              onClick: (event) => dispatch(item, [item.key], event),
+              ...shared,
+              children: item.icon
+            },
+            item.key
+          );
+        })
+      }
+    );
+  }
+);
+Actions.displayName = "Actions";
+const ActionsItem = React.forwardRef(
+  ({ status = "default", defaultIcon, runningIcon, label, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const base = label ?? t("general.actions.label");
+    const name = status === "default" ? base : `${base} \xB7 ${t(`general.actions.status.${status}`)}`;
+    const glyph = status === "loading" ? null : status === "error" ? /* @__PURE__ */ jsx(TriangleAlert, { "aria-hidden": "true" }) : status === "running" ? runningIcon ?? defaultIcon : defaultIcon;
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          id,
+          type: "button",
+          size: "icon-sm",
+          variant: "ghost",
+          "data-slot": "actions-item",
+          "data-status": status,
+          "aria-label": name,
+          "aria-busy": status === "loading" || void 0,
+          loading: status === "loading",
+          className: cn("ui-actions-item", className),
+          ...rest,
+          children: glyph
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: name })
+    ] });
+  }
+);
+ActionsItem.displayName = "ActionsItem";
+const ActionsCopy = React.forwardRef(
+  ({ text = "", icon, label, onCopy, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const [copied, setCopied] = React.useState(false);
+    const timer = React.useRef(void 0);
+    React.useEffect(() => () => clearTimeout(timer.current), []);
+    const name = label ?? t("general.actions.copy");
+    const run = async () => {
+      try {
+        await navigator.clipboard?.writeText(text);
+      } catch {
+        return;
+      }
+      onCopy?.(text);
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 3e3);
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref,
+            id,
+            type: "button",
+            size: "icon-sm",
+            variant: "ghost",
+            "data-slot": "actions-copy",
+            "data-copied": copied ? "" : void 0,
+            "aria-label": name,
+            className: cn("ui-actions-copy", className),
+            onClick: run,
+            ...rest,
+            children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : icon ?? /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(TooltipContent, { children: name })
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: copied ? t("general.actions.copied") : "" })
+    ] });
+  }
+);
+ActionsCopy.displayName = "ActionsCopy";
+const ActionsFeedback = React.forwardRef(
+  ({ value = "default", onChange, label, likeLabel, dislikeLabel, id, className, ...rest }, ref) => {
+    const { t } = useTranslation();
+    const toggle = (next) => onChange?.(value === next ? "default" : next);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        role: "group",
+        "aria-label": label ?? t("general.actions.feedback"),
+        "data-slot": "actions-feedback",
+        className: cn("ui-actions-feedback", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            LabelledIconButton,
+            {
+              label: likeLabel ?? t("general.actions.like"),
+              "aria-pressed": value === "like",
+              "data-pressed": value === "like" ? "" : void 0,
+              onClick: () => toggle("like"),
+              children: /* @__PURE__ */ jsx(ThumbsUp, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LabelledIconButton,
+            {
+              label: dislikeLabel ?? t("general.actions.dislike"),
+              "aria-pressed": value === "dislike",
+              "data-pressed": value === "dislike" ? "" : void 0,
+              onClick: () => toggle("dislike"),
+              children: /* @__PURE__ */ jsx(ThumbsDown, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ActionsFeedback.displayName = "ActionsFeedback";
+export {
+  Actions,
+  ActionsCopy,
+  ActionsFeedback,
+  ActionsItem
+};

package/dist/components/general/activity.js

@@ -1,3 +1,4 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";

package/dist/components/general/float-button.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { FloatButtonBackTopProp, FloatButtonGroupProp, FloatButtonShapeProp, FloatButtonTooltipProp, FloatButtonTypeProp } from "../../props/components/general.prop.js";
+export type { FloatButtonBackTopProp, FloatButtonBackTopProp as FloatButtonBackTopProps, FloatButtonBadgeProp, FloatButtonGroupProp, FloatButtonGroupProp as FloatButtonGroupProps, FloatButtonPlacementProp, FloatButtonProp, FloatButtonProp as FloatButtonProps, FloatButtonShapeProp, FloatButtonTooltipProp, FloatButtonTriggerProp, FloatButtonTypeProp, } from "../../props/components/general.prop.js";
+/**
+ * FloatButton.Group — a stack of corner actions, optionally behind one trigger.
+ *
+ * Two modes, and `trigger` is the switch, exactly as in antd: WITHOUT it every child is visible and
+ * no trigger is drawn; WITH it the children collapse behind a trigger that opens them on click or
+ * on hover.
+ */
+declare function FloatButtonGroup({ children, trigger, open, onOpenChange, closeIcon, placement, shape, type, icon, disabled, className, onClick, ...rest }: FloatButtonGroupProp): React.JSX.Element;
+/**
+ * FloatButton.BackTop — the corner action that returns a scroll container to the top.
+ *
+ * `target` is antd's, and it is the answer to the objection that a document-bound BackTop competes
+ * with a shell that owns its own scroll: pass `() => element` and this watches that element, not
+ * the document. Under `prefers-reduced-motion` the scroll is instant rather than tweened
+ * (WCAG 2.3.3), which is antd's behaviour too.
+ */
+declare function FloatButtonBackTop({ visibilityHeight, target, duration, showProgress, onClick, icon, tooltip, className, ...rest }: FloatButtonBackTopProp): React.JSX.Element | null;
+/**
+ * The compound, exactly as antd exports it: one name, two sub-parts on it. A consumer porting a
+ * screen writes `<FloatButton.Group>` / `<FloatButton.BackTop>` unchanged.
+ */
+export declare const FloatButton: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "content" | "type"> & {
+    icon?: import("../../props/index.js").ChildrenProp;
+    description?: import("../../props/index.js").DescriptionProp;
+    content?: import("../../props/index.js").ChildrenProp;
+    type?: FloatButtonTypeProp;
+    shape?: FloatButtonShapeProp;
+    tooltip?: import("../../props/index.js").ChildrenProp | FloatButtonTooltipProp;
+    href?: string;
+    target?: React.HTMLAttributeAnchorTarget;
+    badge?: import("./float-button.js").FloatButtonBadgeProp;
+    disabled?: import("../../props/index.js").DisabledProp;
+    htmlType?: "button" | "submit" | "reset";
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLElement>> & {
+    Group: typeof FloatButtonGroup;
+    BackTop: typeof FloatButtonBackTop;
+};

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
 };