@gtivr4/a1-design-system-react 0.11.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",

package/src/components/choice-group/choice-group.css

@@ -138,7 +138,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--a1-cg-gap);
-  margin-top: var(--a1-cg-items-top-gap);
 }
 
 /* Fixed column count when --a1-cg-columns is set */

package/src/components/sticky-actions/StickyActions.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode, HTMLAttributes } from "react";
+
+export interface StickyActionsProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * Constrains the inner content to the same max-widths as Section's contentWidth prop.
+   * Match this to the contentWidth of the Section above so buttons align with page content.
+   * "xs" = 28.5rem · "sm" = 40rem · "md" = 50rem · "lg" = 60rem · "xl" = 70rem · "2xl" = 90rem
+   */
+  contentWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  className?: string;
+  children?: ReactNode;
+}
+
+/**
+ * Fixed bottom action bar for flows, wizards, and multi-step forms.
+ *
+ * Renders a position:fixed bar at the bottom of the viewport and an invisible
+ * spacer sibling in document flow. The spacer height is measured via ResizeObserver
+ * and kept in sync automatically — no manual bottom padding needed on the page.
+ */
+export declare function StickyActions(props: StickyActionsProps): JSX.Element;

package/src/components/sticky-actions/StickyActions.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from "react";
+import "./sticky-actions.css";
+
+const VALID_CONTENT_WIDTHS = ["xs", "sm", "md", "lg", "xl", "2xl"];
+
+export function StickyActions({ contentWidth, className = "", children, ...props }) {
+  const resolvedWidth = VALID_CONTENT_WIDTHS.includes(contentWidth) ? contentWidth : null;
+  const barRef = useRef(null);
+  const [offset, setOffset] = useState(0);
+
+  useEffect(() => {
+    if (!barRef.current) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setOffset(entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height);
+    });
+    ro.observe(barRef.current);
+    return () => ro.disconnect();
+  }, []);
+
+  const innerClass = [
+    "a1-sticky-actions__inner",
+    resolvedWidth && `a1-sticky-actions__inner--${resolvedWidth}`,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <>
+      {/* Spacer holds the bar's height in document flow so content above is
+          never hidden. Height is measured and kept in sync via ResizeObserver. */}
+      <div style={{ height: offset }} aria-hidden="true" />
+      <div
+        ref={barRef}
+        className={["a1-sticky-actions", className].filter(Boolean).join(" ")}
+        {...props}
+      >
+        <div className={innerClass}>{children}</div>
+      </div>
+    </>
+  );
+}

package/src/components/sticky-actions/sticky-actions.css

@@ -0,0 +1,31 @@
+.a1-sticky-actions {
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline: 0;
+  z-index: var(--component-sticky-actions-z-index);
+  background: var(--component-sticky-actions-background);
+  border-block-start: var(--component-sticky-actions-border-width) solid var(--semantic-color-border-subtle);
+  box-sizing: border-box;
+}
+
+.a1-sticky-actions__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--component-sticky-actions-gap);
+  /* Padding lives here so max-width + margin-inline: auto center correctly
+     against the full viewport width, not the outer padded content area. */
+  padding-inline: var(--component-sticky-actions-padding-inline);
+  padding-block-start: var(--component-sticky-actions-padding-block);
+  padding-block-end: calc(var(--component-sticky-actions-padding-block) + env(safe-area-inset-bottom, 0px));
+  width: 100%;
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+/* Content width — mirrors Section's contentWidth values for visual alignment */
+.a1-sticky-actions__inner--xs  { max-width: 28.5rem; }
+.a1-sticky-actions__inner--sm  { max-width: 40rem;   }
+.a1-sticky-actions__inner--md  { max-width: 50rem;   }
+.a1-sticky-actions__inner--lg  { max-width: 60rem;   }
+.a1-sticky-actions__inner--xl  { max-width: 70rem;   }
+.a1-sticky-actions__inner--2xl { max-width: 90rem;   }

package/src/index.js

@@ -60,3 +60,4 @@ export { DataTable } from "./components/data-table/DataTable.jsx";
 export { DataTableFilters } from "./components/data-table/DataTableFilters.jsx";
 export { Figure } from "./components/figure/Figure.jsx";
 export { Spacer } from "./components/spacer/Spacer.jsx";
+export { StickyActions } from "./components/sticky-actions/StickyActions.jsx";

package/src/tokens.css

@@ -693,6 +693,12 @@
   --component-step-tracker-active-width: 2rem;
   --component-step-tracker-active-color: #060b14;
   --component-step-tracker-gap: 0.375rem;
+  --component-sticky-actions-background: #ffffff;
+  --component-sticky-actions-border-width: 1px;
+  --component-sticky-actions-padding-block: 1rem;
+  --component-sticky-actions-padding-inline: 1rem;
+  --component-sticky-actions-gap: 0.75rem;
+  --component-sticky-actions-z-index: 150;
   --component-switch-track-width: 2.5rem;
   --component-switch-track-height: 1.375rem;
   --component-switch-thumb-size: 1rem;