@scalepad/ui 0.1.0

package/src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -0,0 +1,149 @@
+import type { ReactNode } from 'react';
+
+import { Flex, Modal, type ModalProps } from '@mantine/core';
+
+import { Button } from '../Button';
+import { Text } from '../Typography';
+
+export interface ConfirmationModalProps extends Omit<
+  ModalProps,
+  'children' | 'onClose'
+> {
+  /**
+   * Modal title (displayed in header)
+   */
+  title: string;
+  /**
+   * Modal description/message
+   */
+  description: string | ReactNode;
+  /**
+   * Confirm button label
+   * @default "Confirm"
+   */
+  confirmLabel?: string;
+  /**
+   * Cancel button label
+   * @default "Cancel"
+   */
+  cancelLabel?: string;
+  /**
+   * Callback when confirm is clicked
+   */
+  onConfirm: () => void;
+  /**
+   * Callback when cancel is clicked or modal is closed (via X button or overlay click).
+   * This automatically maps to the modal's onClose handler.
+   */
+  onCancel: () => void;
+  /**
+   * Variant of the confirmation dialog
+   * @default "default"
+   */
+  variant?: 'default' | 'destructive';
+  /**
+   * Whether the confirm button is loading
+   * @default false
+   */
+  confirmLoading?: boolean;
+  /**
+   * Left section of the confirm button
+   */
+  confirmButtonLeftSection?: ReactNode;
+  /**
+   * Whether the confirm button is disabled
+   * @default false
+   */
+  confirmDisabled?: boolean;
+}
+
+/**
+ * ConfirmationModal Component
+ *
+ * A reusable confirmation dialog for user actions requiring explicit confirmation.
+ * Supports both general confirmations (default variant) and critical/destructive actions (destructive variant).
+ * Follows Figma Dialog pattern with header, body, and footer.
+ *
+ * @example
+ * ```tsx
+ * // Default variant for general confirmations
+ * <ConfirmationModal
+ *   opened={opened}
+ *   title="Update Agent"
+ *   description="Update the agent on 3 devices to the latest version?"
+ *   confirmLabel="Update Agent"
+ *   onConfirm={handleUpdate}
+ *   onCancel={close}
+ * />
+ *
+ * // Destructive variant for critical actions
+ * <ConfirmationModal
+ *   opened={opened}
+ *   title="Delete Device"
+ *   description="This action cannot be undone."
+ *   confirmLabel="Delete"
+ *   onConfirm={handleDelete}
+ *   onCancel={close}
+ *   variant="destructive"
+ * />
+ * ```
+ */
+export function ConfirmationModal({
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  onCancel,
+  variant = 'default',
+  confirmLoading = false,
+  confirmButtonLeftSection,
+  confirmDisabled = false,
+  ...modalProps
+}: ConfirmationModalProps) {
+  const isDestructive = variant === 'destructive';
+
+  return (
+    <Modal
+      {...modalProps}
+      title={title}
+      onClose={onCancel}
+      centered
+      padding="xl"
+      radius="xl"
+      size="md"
+      withCloseButton
+    >
+      <Flex direction="column" gap="xl">
+        {/* Description */}
+        {typeof description === 'string' ? (
+          <Text variant="caption1" c="text.subdued.default">
+            {description}
+          </Text>
+        ) : (
+          description
+        )}
+
+        {/* Actions */}
+        <Flex gap="xs" justify="flex-end">
+          <Button
+            variant="outline"
+            onClick={onCancel}
+            disabled={confirmLoading}
+          >
+            {cancelLabel}
+          </Button>
+          <Button
+            variant={isDestructive ? 'destructive' : 'primary'}
+            onClick={onConfirm}
+            loading={confirmLoading}
+            disabled={confirmDisabled}
+            leftSection={confirmButtonLeftSection}
+          >
+            {confirmLabel}
+          </Button>
+        </Flex>
+      </Flex>
+    </Modal>
+  );
+}

package/src/components/ConfirmationModal/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmationModal } from './ConfirmationModal';
+export type { ConfirmationModalProps } from './ConfirmationModal';

package/src/components/ConfirmationTooltip/ConfirmationTooltip.tsx

@@ -0,0 +1,132 @@
+import {
+  cloneElement,
+  useEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactElement,
+} from 'react';
+
+import { Tooltip, type TooltipProps } from '@mantine/core';
+
+type SupportedChildProps = {
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  'aria-label'?: string;
+};
+
+export interface ConfirmationTooltipProps {
+  /**
+   * Interactive element that triggers confirmation.
+   */
+  children: ReactElement<SupportedChildProps>;
+  /**
+   * Tooltip label shown while confirmed.
+   * @default 'Copied'
+   */
+  label?: TooltipProps['label'];
+  /**
+   * Confirmation visibility duration in milliseconds.
+   * @default 1500
+   */
+  durationMs?: number;
+  /**
+   * Optional aria-label to apply while confirmation is visible.
+   */
+  confirmedAriaLabel?: string;
+  /**
+   * Tooltip position relative to the child.
+   * @default 'top'
+   */
+  position?: TooltipProps['position'];
+  /**
+   * Whether to show a tooltip arrow.
+   * @default true
+   */
+  withArrow?: TooltipProps['withArrow'];
+  /**
+   * Tooltip color token.
+   * @default 'dark'
+   */
+  color?: TooltipProps['color'];
+  /**
+   * Whether tooltip should render inside a portal.
+   */
+  withinPortal?: TooltipProps['withinPortal'];
+  /**
+   * Tooltip transition configuration.
+   */
+  transitionProps?: TooltipProps['transitionProps'];
+  /**
+   * Disables the confirmation behavior.
+   * Child click still fires as normal.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Wraps any clickable child and shows a short-lived confirmation tooltip after click.
+ */
+export function ConfirmationTooltip({
+  children,
+  label = 'Copied',
+  durationMs = 1500,
+  confirmedAriaLabel,
+  position = 'top',
+  withArrow = false,
+  color = 'dark',
+  withinPortal,
+  transitionProps,
+  disabled = false,
+}: ConfirmationTooltipProps) {
+  const [isConfirmed, setIsConfirmed] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearConfirmationTimeout = () => {
+    if (!timeoutRef.current) return;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = null;
+  };
+
+  useEffect(
+    () => () => {
+      clearConfirmationTimeout();
+    },
+    [],
+  );
+
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    children.props.onClick?.(event);
+
+    if (disabled) return;
+
+    setIsConfirmed(true);
+    clearConfirmationTimeout();
+    timeoutRef.current = setTimeout(() => {
+      setIsConfirmed(false);
+      timeoutRef.current = null;
+    }, durationMs);
+  };
+
+  const originalAriaLabel = children.props['aria-label'];
+  const clonedChild = cloneElement(children, {
+    onClick: handleClick,
+    ...(confirmedAriaLabel
+      ? { 'aria-label': isConfirmed ? confirmedAriaLabel : originalAriaLabel }
+      : {}),
+  });
+
+  return (
+    <Tooltip
+      label={label}
+      opened={!disabled && isConfirmed}
+      position={position}
+      withArrow={withArrow}
+      color={color}
+      withinPortal={withinPortal}
+      transitionProps={transitionProps}
+    >
+      {clonedChild}
+    </Tooltip>
+  );
+}

package/src/components/ConfirmationTooltip/index.ts

@@ -0,0 +1,2 @@
+export { ConfirmationTooltip } from './ConfirmationTooltip';
+export type { ConfirmationTooltipProps } from './ConfirmationTooltip';

package/src/components/DataDialog.figma.tsx

@@ -0,0 +1,33 @@
+import figma from '@figma/code-connect';
+
+import { DataDialog } from './DataDialog';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  DataDialog,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=151%3A12298',
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "showError": figma.boolean('ShowError'),
+      // "type": figma.enum('Type', {
+      //   "Desktop": "desktop",
+      //   "Desktop Scrollable": "desktop-scrollable",
+      //   "Mobile": "mobile",
+      //   "Mobile Full Screen Scrollable": "mobile-full-screen-scrollable"
+      // })
+    },
+    example: _props => (
+      <DataDialog open onOpenChange={() => {}} title="Dialog title">
+        Dialog content
+      </DataDialog>
+    ),
+  }
+);

package/src/components/DataDialog.tsx

@@ -0,0 +1,46 @@
+import type { CSSProperties, ReactNode } from 'react';
+
+import { Modal } from '@mantine/core';
+
+import { textStyleVariants } from '../tokens';
+
+import { Text } from './Typography';
+
+export interface DataDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  children: ReactNode;
+}
+
+const titleStyle: CSSProperties = textStyleVariants.heading4;
+
+/**
+ * DataDialog component for displaying detailed data in a modal
+ * Wraps Mantine Modal with a consistent API
+ */
+export function DataDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+}: DataDialogProps) {
+  return (
+    <Modal
+      opened={open}
+      onClose={() => onOpenChange(false)}
+      title={<span style={titleStyle}>{title}</span>}
+      size="md"
+      centered
+    >
+      {description && (
+        <Text variant="caption1" c="text.subdued.default" mb="md">
+          {description}
+        </Text>
+      )}
+      {children}
+    </Modal>
+  );
+}