@ttt-productions/ui-core 0.11.8 → 0.11.10

package/dist/react/components/scroll-to-top-button.d.ts

@@ -1,11 +1,23 @@
 import * as React from "react";
 import { type ButtonProps } from "./button.js";
-export interface ScrollToTopButtonProps {
+/**
+ * Standard button DOM props forwarded to the rendered element, minus the props
+ * this component owns. Owned props are excluded (not just overridden) so a
+ * consumer can never route them through the passthrough channel: `aria-label`
+ * is set via {@link ScrollToTopButtonProps.ariaLabel}, extra classes via the
+ * merge-aware {@link ScrollToTopButtonProps.className}, content via
+ * {@link ScrollToTopButtonProps.icon}, and `onClick` is fixed to scroll-to-top
+ * (its scroll animation configurable via
+ * {@link ScrollToTopButtonProps.scrollBehavior}). This mirrors how the sibling
+ * `Button` destructures its owned `className` out of the forwarded `...props`.
+ */
+type ScrollToTopButtonPassthrough = Omit<React.ComponentPropsWithoutRef<"button">, "className" | "onClick" | "aria-label" | "children">;
+export interface ScrollToTopButtonProps extends ScrollToTopButtonPassthrough {
     /** Scroll threshold (px) before the button appears. Default 400. */
     threshold?: number;
     /** Aria label. Default "Scroll to top". */
     ariaLabel?: string;
-    /** Optional extra classes for the button. */
+    /** Optional extra classes for the button. Merged with the component's own classes. */
     className?: string;
     /** Optional override for the icon. */
     icon?: React.ReactNode;
@@ -13,6 +25,16 @@ export interface ScrollToTopButtonProps {
     variant?: ButtonProps["variant"];
     /** Button size. Forwarded to the underlying Button. Default "icon". */
     size?: ButtonProps["size"];
+    /**
+     * Scroll behavior passed to `window.scrollTo`. Default "smooth". Pass "auto"
+     * to skip the smooth animation (e.g. for a reduced-motion mode). The package
+     * stays motion-policy agnostic: the consumer decides what to pass here — an
+     * explicit JS `behavior: "smooth"` is not overridden by a CSS
+     * `scroll-behavior` kill-switch, so an app-level reduced-motion mode must
+     * pass "auto" to actually stop the animation.
+     */
+    scrollBehavior?: ScrollBehavior;
 }
-export declare function ScrollToTopButton({ threshold, ariaLabel, className, icon, variant, size, }: ScrollToTopButtonProps): React.JSX.Element;
+export declare function ScrollToTopButton({ threshold, ariaLabel, className, icon, variant, size, scrollBehavior, ...rest }: ScrollToTopButtonProps): React.JSX.Element;
+export {};
 //# sourceMappingURL=scroll-to-top-button.d.ts.map

package/dist/react/components/scroll-to-top-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top-button.d.ts","sourceRoot":"","sources":["../../../src/react/components/scroll-to-top-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAGvD,MAAM,WAAW,sBAAsB;IACrC,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAe,EACf,SAA2B,EAC3B,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAa,GACd,EAAE,sBAAsB,qBA2BxB"}
+{"version":3,"file":"scroll-to-top-button.d.ts","sourceRoot":"","sources":["../../../src/react/components/scroll-to-top-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAGvD;;;;;;;;;;GAUG;AACH,KAAK,4BAA4B,GAAG,IAAI,CACtC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,WAAW,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,CACpD,CAAC;AAEF,MAAM,WAAW,sBAAuB,SAAQ,4BAA4B;IAC1E,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAe,EACf,SAA2B,EAC3B,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAa,EACb,cAAyB,EACzB,GAAG,IAAI,EACR,EAAE,sBAAsB,qBA4BxB"}

package/dist/react/components/scroll-to-top-button.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { ChevronUp } from "lucide-react";
 import { Button } from "./button.js";
 import { cn } from "../../lib/utils.js";
-export function ScrollToTopButton({ threshold = 400, ariaLabel = "Scroll to top", className, icon, variant, size = "icon", }) {
+export function ScrollToTopButton({ threshold = 400, ariaLabel = "Scroll to top", className, icon, variant, size = "icon", scrollBehavior = "smooth", ...rest }) {
     const [isVisible, setIsVisible] = React.useState(false);
     React.useEffect(() => {
         const toggle = () => setIsVisible(window.scrollY > threshold);
@@ -12,7 +12,7 @@ export function ScrollToTopButton({ threshold = 400, ariaLabel = "Scroll to top"
         window.addEventListener("scroll", toggle, { passive: true });
         return () => window.removeEventListener("scroll", toggle);
     }, [threshold]);
-    const onClick = () => window.scrollTo({ top: 0, behavior: "smooth" });
-    return (_jsx(Button, { variant: variant, size: size, onClick: onClick, "aria-label": ariaLabel, className: cn("fixed bottom-24 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg transition-opacity duration-300", isVisible ? "opacity-100" : "opacity-0 pointer-events-none", className), children: icon ?? _jsx(ChevronUp, { className: "h-5 w-5" }) }));
+    const onClick = () => window.scrollTo({ top: 0, behavior: scrollBehavior });
+    return (_jsx(Button, { ...rest, variant: variant, size: size, onClick: onClick, "aria-label": ariaLabel, className: cn("fixed bottom-24 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg transition-opacity duration-300", isVisible ? "opacity-100" : "opacity-0 pointer-events-none", className), children: icon ?? _jsx(ChevronUp, { className: "h-5 w-5" }) }));
 }
 //# sourceMappingURL=scroll-to-top-button.js.map

package/dist/react/components/scroll-to-top-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-to-top-button.js","sourceRoot":"","sources":["../../../src/react/components/scroll-to-top-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAiBxC,MAAM,UAAU,iBAAiB,CAAC,EAChC,SAAS,GAAG,GAAG,EACf,SAAS,GAAG,eAAe,EAC3B,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,MAAM,GACU;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;QAC9D,MAAM,EAAE,CAAC;QACT,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAEtE,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,SAAS,EAAE,EAAE,CACX,uGAAuG,EACvG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,+BAA+B,EAC3D,SAAS,CACV,YAEA,IAAI,IAAI,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GACnC,CACV,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronUp } from \"lucide-react\";\nimport { Button, type ButtonProps } from \"./button.js\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport interface ScrollToTopButtonProps {\n  /** Scroll threshold (px) before the button appears. Default 400. */\n  threshold?: number;\n  /** Aria label. Default \"Scroll to top\". */\n  ariaLabel?: string;\n  /** Optional extra classes for the button. */\n  className?: string;\n  /** Optional override for the icon. */\n  icon?: React.ReactNode;\n  /** Button variant. Forwarded to the underlying Button. Defaults to Button's own default. */\n  variant?: ButtonProps[\"variant\"];\n  /** Button size. Forwarded to the underlying Button. Default \"icon\". */\n  size?: ButtonProps[\"size\"];\n}\n\nexport function ScrollToTopButton({\n  threshold = 400,\n  ariaLabel = \"Scroll to top\",\n  className,\n  icon,\n  variant,\n  size = \"icon\",\n}: ScrollToTopButtonProps) {\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const toggle = () => setIsVisible(window.scrollY > threshold);\n    toggle();\n    window.addEventListener(\"scroll\", toggle, { passive: true });\n    return () => window.removeEventListener(\"scroll\", toggle);\n  }, [threshold]);\n\n  const onClick = () => window.scrollTo({ top: 0, behavior: \"smooth\" });\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"fixed bottom-24 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg transition-opacity duration-300\",\n        isVisible ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n        className,\n      )}\n    >\n      {icon ?? <ChevronUp className=\"h-5 w-5\" />}\n    </Button>\n  );\n}\n"]}
+{"version":3,"file":"scroll-to-top-button.js","sourceRoot":"","sources":["../../../src/react/components/scroll-to-top-button.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAoB,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AA0CxC,MAAM,UAAU,iBAAiB,CAAC,EAChC,SAAS,GAAG,GAAG,EACf,SAAS,GAAG,eAAe,EAC3B,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,MAAM,EACb,cAAc,GAAG,QAAQ,EACzB,GAAG,IAAI,EACgB;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;QAC9D,MAAM,EAAE,CAAC;QACT,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7D,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,CAAC;IAE5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,gBACJ,SAAS,EACrB,SAAS,EAAE,EAAE,CACX,uGAAuG,EACvG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,+BAA+B,EAC3D,SAAS,CACV,YAEA,IAAI,IAAI,KAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GACnC,CACV,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronUp } from \"lucide-react\";\nimport { Button, type ButtonProps } from \"./button.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * Standard button DOM props forwarded to the rendered element, minus the props\n * this component owns. Owned props are excluded (not just overridden) so a\n * consumer can never route them through the passthrough channel: `aria-label`\n * is set via {@link ScrollToTopButtonProps.ariaLabel}, extra classes via the\n * merge-aware {@link ScrollToTopButtonProps.className}, content via\n * {@link ScrollToTopButtonProps.icon}, and `onClick` is fixed to scroll-to-top\n * (its scroll animation configurable via\n * {@link ScrollToTopButtonProps.scrollBehavior}). This mirrors how the sibling\n * `Button` destructures its owned `className` out of the forwarded `...props`.\n */\ntype ScrollToTopButtonPassthrough = Omit<\n  React.ComponentPropsWithoutRef<\"button\">,\n  \"className\" | \"onClick\" | \"aria-label\" | \"children\"\n>;\n\nexport interface ScrollToTopButtonProps extends ScrollToTopButtonPassthrough {\n  /** Scroll threshold (px) before the button appears. Default 400. */\n  threshold?: number;\n  /** Aria label. Default \"Scroll to top\". */\n  ariaLabel?: string;\n  /** Optional extra classes for the button. Merged with the component's own classes. */\n  className?: string;\n  /** Optional override for the icon. */\n  icon?: React.ReactNode;\n  /** Button variant. Forwarded to the underlying Button. Defaults to Button's own default. */\n  variant?: ButtonProps[\"variant\"];\n  /** Button size. Forwarded to the underlying Button. Default \"icon\". */\n  size?: ButtonProps[\"size\"];\n  /**\n   * Scroll behavior passed to `window.scrollTo`. Default \"smooth\". Pass \"auto\"\n   * to skip the smooth animation (e.g. for a reduced-motion mode). The package\n   * stays motion-policy agnostic: the consumer decides what to pass here — an\n   * explicit JS `behavior: \"smooth\"` is not overridden by a CSS\n   * `scroll-behavior` kill-switch, so an app-level reduced-motion mode must\n   * pass \"auto\" to actually stop the animation.\n   */\n  scrollBehavior?: ScrollBehavior;\n}\n\nexport function ScrollToTopButton({\n  threshold = 400,\n  ariaLabel = \"Scroll to top\",\n  className,\n  icon,\n  variant,\n  size = \"icon\",\n  scrollBehavior = \"smooth\",\n  ...rest\n}: ScrollToTopButtonProps) {\n  const [isVisible, setIsVisible] = React.useState(false);\n\n  React.useEffect(() => {\n    const toggle = () => setIsVisible(window.scrollY > threshold);\n    toggle();\n    window.addEventListener(\"scroll\", toggle, { passive: true });\n    return () => window.removeEventListener(\"scroll\", toggle);\n  }, [threshold]);\n\n  const onClick = () => window.scrollTo({ top: 0, behavior: scrollBehavior });\n\n  return (\n    <Button\n      {...rest}\n      variant={variant}\n      size={size}\n      onClick={onClick}\n      aria-label={ariaLabel}\n      className={cn(\n        \"fixed bottom-24 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg transition-opacity duration-300\",\n        isVisible ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n        className,\n      )}\n    >\n      {icon ?? <ChevronUp className=\"h-5 w-5\" />}\n    </Button>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttt-productions/ui-core",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "description": "Shared UI components for TTT Productions projects",
   "repository": {
     "type": "git",

package/src/react/components/scroll-to-top-button.tsx

@@ -5,12 +5,28 @@ import { ChevronUp } from "lucide-react";
 import { Button, type ButtonProps } from "./button.js";
 import { cn } from "../../lib/utils.js";
 
-export interface ScrollToTopButtonProps {
+/**
+ * Standard button DOM props forwarded to the rendered element, minus the props
+ * this component owns. Owned props are excluded (not just overridden) so a
+ * consumer can never route them through the passthrough channel: `aria-label`
+ * is set via {@link ScrollToTopButtonProps.ariaLabel}, extra classes via the
+ * merge-aware {@link ScrollToTopButtonProps.className}, content via
+ * {@link ScrollToTopButtonProps.icon}, and `onClick` is fixed to scroll-to-top
+ * (its scroll animation configurable via
+ * {@link ScrollToTopButtonProps.scrollBehavior}). This mirrors how the sibling
+ * `Button` destructures its owned `className` out of the forwarded `...props`.
+ */
+type ScrollToTopButtonPassthrough = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "className" | "onClick" | "aria-label" | "children"
+>;
+
+export interface ScrollToTopButtonProps extends ScrollToTopButtonPassthrough {
   /** Scroll threshold (px) before the button appears. Default 400. */
   threshold?: number;
   /** Aria label. Default "Scroll to top". */
   ariaLabel?: string;
-  /** Optional extra classes for the button. */
+  /** Optional extra classes for the button. Merged with the component's own classes. */
   className?: string;
   /** Optional override for the icon. */
   icon?: React.ReactNode;
@@ -18,6 +34,15 @@ export interface ScrollToTopButtonProps {
   variant?: ButtonProps["variant"];
   /** Button size. Forwarded to the underlying Button. Default "icon". */
   size?: ButtonProps["size"];
+  /**
+   * Scroll behavior passed to `window.scrollTo`. Default "smooth". Pass "auto"
+   * to skip the smooth animation (e.g. for a reduced-motion mode). The package
+   * stays motion-policy agnostic: the consumer decides what to pass here — an
+   * explicit JS `behavior: "smooth"` is not overridden by a CSS
+   * `scroll-behavior` kill-switch, so an app-level reduced-motion mode must
+   * pass "auto" to actually stop the animation.
+   */
+  scrollBehavior?: ScrollBehavior;
 }
 
 export function ScrollToTopButton({
@@ -27,6 +52,8 @@ export function ScrollToTopButton({
   icon,
   variant,
   size = "icon",
+  scrollBehavior = "smooth",
+  ...rest
 }: ScrollToTopButtonProps) {
   const [isVisible, setIsVisible] = React.useState(false);
 
@@ -37,10 +64,11 @@ export function ScrollToTopButton({
     return () => window.removeEventListener("scroll", toggle);
   }, [threshold]);
 
-  const onClick = () => window.scrollTo({ top: 0, behavior: "smooth" });
+  const onClick = () => window.scrollTo({ top: 0, behavior: scrollBehavior });
 
   return (
     <Button
+      {...rest}
       variant={variant}
       size={size}
       onClick={onClick}