@common-origin/design-system 2.18.0 → 2.20.0

package/dist/components/molecules/ActionSheet/ActionSheet.mjs

@@ -0,0 +1,283 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styled$module, { keyframes } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import { Divider } from '../../atoms/Divider/Divider.mjs';
+import { Icon } from '../../atoms/Icon/Icon.mjs';
+import { Stack } from '../../atoms/Stack/Stack.mjs';
+import { Typography } from '../../atoms/Typography/Typography.mjs';
+import { ListItem } from '../List/ListItem.mjs';
+import tokens from '../../../lib/cssTokens.mjs';
+import { exitAnimation, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { usePresence, useInert } from '../../../lib/usePresence.mjs';
+
+var _a = tokens.semantic,
+  color = _a.color,
+  border = _a.border,
+  space = _a.space,
+  motion = _a.motion,
+  elevation = _a.elevation;
+var slideUp = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var fadeIn = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledOverlay",
+  componentId: "sc-regbol-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"], ["\n  position: fixed;\n  inset: 0;\n  background-color: ", ";\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n"])), tokens.semantic.surface.scrim, tokens.semantic.layer.modal, fadeIn, motion.duration.moderate, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
+var StyledActionSheet = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledActionSheet",
+  componentId: "sc-regbol-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"], ["\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: ", ";\n  border-top-left-radius: ", ";\n  border-top-right-radius: ", ";\n  box-shadow: ", ";\n  max-height: 90vh;\n  overflow-y: auto;\n  z-index: ", ";\n  animation: ", " ", " ", "", ";\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n\n"])), tokens.semantic.surface.raised, tokens.semantic.radius.lg, tokens.semantic.radius.lg, elevation.overlay, tokens.semantic.layer.modal, slideUp, motion.duration.slow, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, reducedMotion, fadeIn, motion.duration.slow, motion.easing.decelerate, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+});
+var StyledHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledHeader",
+  componentId: "sc-regbol-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: ", " ", " ", ";\n  border-bottom: ", ";\n"])), space[400], space[400], space[300], border["default"]);
+var StyledHeaderContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ActionSheet__StyledHeaderContent",
+  componentId: "sc-regbol-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+var StyledCloseButton = /*#__PURE__*/styled.button.withConfig({
+  displayName: "ActionSheet__StyledCloseButton",
+  componentId: "sc-regbol-4"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: ", ";\n  border: none;\n  background: transparent;\n  color: ", ";\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  margin-left: ", ";\n  \n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n  \n  &:focus-visible {\n    outline: ", ";\n    outline-offset: ", ";\n  }\n"])), space[200], color.icon.muted, tokens.semantic.radius.sm, motion.transition.feedback, space[200], color.icon["default"], color.fill.muted, border.focus, border.focusOffset);
+var StyledActionsList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "ActionSheet__StyledActionsList",
+  componentId: "sc-regbol-5"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"], ["\n  padding: ", " ", ";\n  margin: 0;\n  list-style: none;\n"
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */])), space[200], space[300]);
+/**
+ * ActionSheet component for bottom sheet modals
+ *
+ * Displays a modal action sheet that slides up from the bottom,
+ * providing a list of actions for the user to choose from.
+ * Includes focus trapping, keyboard navigation, and accessibility features.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <ActionSheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Choose an action"
+ *   actions={[
+ *     {
+ *       id: 'edit',
+ *       label: 'Edit',
+ *       icon: 'edit',
+ *       onSelect: () => console.log('Edit')
+ *     },
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: 'trash',
+ *       destructive: true,
+ *       onSelect: () => console.log('Delete')
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+var ActionSheet = function ActionSheet(_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    title = _a.title,
+    description = _a.description,
+    actions = _a.actions,
+    _b = _a.closeOnOverlayClick,
+    closeOnOverlayClick = _b === void 0 ? true : _b,
+    _c = _a.closeOnEscape,
+    closeOnEscape = _c === void 0 ? true : _c,
+    _d = _a.showCloseButton,
+    showCloseButton = _d === void 0 ? true : _d,
+    dataTestId = _a["data-testid"];
+  var sheetRef = useRef(null);
+  var previousActiveElement = useRef(null);
+  var _e = usePresence(isOpen),
+    isPresent = _e.isPresent,
+    isExiting = _e.isExiting;
+  useInert(sheetRef, isExiting);
+  // Store the element that had focus when sheet opened
+  useEffect(function () {
+    if (isOpen) {
+      previousActiveElement.current = document.activeElement;
+    }
+  }, [isOpen]);
+  // Focus management and escape key handling
+  useEffect(function () {
+    if (!isOpen) return;
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Escape' && closeOnEscape) {
+        e.preventDefault();
+        onClose();
+      }
+      // Focus trap
+      if (e.key === 'Tab' && sheetRef.current) {
+        var focusableElements = sheetRef.current.querySelectorAll('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        var firstElement = focusableElements[0];
+        var lastElement = focusableElements[focusableElements.length - 1];
+        if (e.shiftKey && document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement === null || lastElement === void 0 ? void 0 : lastElement.focus();
+        } else if (!e.shiftKey && document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    // Focus first focusable element (button or element with role="button")
+    var frame = requestAnimationFrame(function () {
+      var _a;
+      var firstFocusable = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), [role="button"][tabindex]:not([aria-disabled="true"])');
+      firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+    });
+    // Prevent body scroll
+    var originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return function () {
+      // A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
+      cancelAnimationFrame(frame);
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = originalOverflow;
+      // Return focus to previous element
+      if (previousActiveElement.current) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isOpen, onClose, closeOnEscape]);
+  var handleOverlayClick = function handleOverlayClick(e) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  var handleActionClick = function handleActionClick(action) {
+    if (!action.disabled) {
+      action.onSelect();
+      onClose();
+    }
+  };
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
+  // Find if there are any destructive actions to add divider
+  var destructiveIndex = actions.findIndex(function (a) {
+    return a.destructive;
+  });
+  var hasDestructive = destructiveIndex >= 0;
+  return /*#__PURE__*/createPortal(jsxs(Fragment, {
+    children: [jsx(StyledOverlay, {
+      onClick: handleOverlayClick,
+      "$isExiting": isExiting
+    }), jsxs(StyledActionSheet, {
+      ref: sheetRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-hidden": isExiting || undefined,
+      "$isExiting": isExiting,
+      "aria-labelledby": title ? 'action-sheet-title' : undefined,
+      "aria-describedby": description ? 'action-sheet-description' : undefined,
+      "data-testid": dataTestId,
+      children: [(title || description || showCloseButton) && jsxs(StyledHeader, {
+        children: [jsx(StyledHeaderContent, {
+          children: jsxs(Stack, {
+            direction: "column",
+            gap: description && title ? 'xs' : 'none',
+            children: [title && jsx("div", {
+              id: "action-sheet-title",
+              children: jsx(Typography, {
+                variant: "h3",
+                children: title
+              })
+            }), description && jsx("div", {
+              id: "action-sheet-description",
+              children: jsx(Typography, {
+                variant: "body",
+                color: "subdued",
+                children: description
+              })
+            })]
+          })
+        }), showCloseButton && jsx(StyledCloseButton, {
+          type: "button",
+          onClick: onClose,
+          "aria-label": "Close",
+          children: jsx(Icon, {
+            name: "close",
+            size: "sm",
+            iconColor: "subdued"
+          })
+        })]
+      }), jsx(StyledActionsList, {
+        children: actions.map(function (action, index) {
+          return jsxs(React.Fragment, {
+            children: [hasDestructive && index === destructiveIndex && index > 0 && jsx(Divider, {
+              size: "small"
+            }), jsx(ListItem, {
+              primary: action.label,
+              icon: action.icon && jsx(Icon, {
+                name: action.icon,
+                size: "md",
+                iconColor: action.disabled ? 'disabled' : action.destructive ? 'error' : 'default'
+              }),
+              interactive: true,
+              onClick: function onClick() {
+                return handleActionClick(action);
+              },
+              disabled: action.disabled,
+              destructive: action.destructive,
+              spacing: "compact"
+            })]
+          }, action.id);
+        })
+      })]
+    })]
+  }), document.body);
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+export { ActionSheet };
+//# sourceMappingURL=ActionSheet.mjs.map

package/dist/components/molecules/ActionSheet/ActionSheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/molecules/ActionSheet/index.d.mts

@@ -0,0 +1,2 @@
+export { ActionSheet } from './ActionSheet.mjs';
+export type { ActionSheetProps, Action } from './ActionSheet.mjs';

package/dist/components/molecules/AgentInput/AgentInput.d.mts

@@ -0,0 +1,30 @@
+import { AgentInputSubmitSource, AgentInputVoiceError } from './agentInputSpeech.mjs';
+interface SubmitPayload {
+    text: string;
+    source: AgentInputSubmitSource;
+    timestamp: string;
+}
+export interface AgentInputProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit: (payload: SubmitPayload) => void | Promise<void>;
+    placeholder?: string;
+    disabled?: boolean;
+    isSubmitting?: boolean;
+    enableVoice?: boolean;
+    autoSubmitOnVoiceFinal?: boolean;
+    voiceLanguage?: string;
+    noSpeechTimeoutMs?: number;
+    onVoiceStart?: () => void;
+    onVoiceStop?: () => void;
+    onVoiceInterim?: (text: string) => void;
+    onVoiceFinal?: (text: string) => void;
+    onVoiceError?: (error: AgentInputVoiceError) => void;
+    statusMessage?: string;
+    errorMessage?: string;
+    label?: string;
+    'data-testid'?: string;
+}
+export declare const AgentInput: ({ value, defaultValue, onChange, onSubmit, placeholder, disabled, isSubmitting, enableVoice, autoSubmitOnVoiceFinal, voiceLanguage, noSpeechTimeoutMs, onVoiceStart, onVoiceStop, onVoiceInterim, onVoiceFinal, onVoiceError, statusMessage, errorMessage, label, "data-testid": dataTestId, }: AgentInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};