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

package/package.json

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

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

@@ -0,0 +1,14 @@
+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;
+}
+
+export declare function StickyActions(props: StickyActionsProps): JSX.Element;

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

@@ -0,0 +1,20 @@
+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 innerClass = [
+    "a1-sticky-actions__inner",
+    resolvedWidth && `a1-sticky-actions__inner--${resolvedWidth}`,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div 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,29 @@
+.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);
+  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));
+  padding-inline: var(--component-sticky-actions-padding-inline);
+  box-sizing: border-box;
+}
+
+.a1-sticky-actions__inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--component-sticky-actions-gap);
+  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;