@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/chunk-JS4IB5IU.mjs

@@ -0,0 +1,162 @@
+import {
+  deploymentSurfaceTokens
+} from "./chunk-ATIFLPH6.mjs";
+
+// src/components/feedback/RoleBadge.tsx
+import MuiChip from "@mui/material/Chip";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var StyledRoleBadge = styled(MuiChip)(() => ({
+  // Pill shape - 100px border radius
+  borderRadius: "100px",
+  // Typography specifications from Figma
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "18px",
+  letterSpacing: "0.16px",
+  // Padding specifications from Figma
+  padding: "3px 4px",
+  height: "auto",
+  // Outlined style (no background fill)
+  "& .MuiChip-label": {
+    padding: "0 8px"
+  }
+}));
+var RoleBadge = ({
+  label,
+  color = "primary",
+  size = "small",
+  ...props
+}) => {
+  if (!label || label.trim() === "") {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    StyledRoleBadge,
+    {
+      label,
+      variant: "outlined",
+      color,
+      size,
+      ...props
+    }
+  );
+};
+
+// src/components/feedback/IDBlock.tsx
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Snackbar from "@mui/material/Snackbar";
+import Alert from "@mui/material/Alert";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { styled as styled2 } from "@mui/material/styles";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var IDContainer = styled2(Box)(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "8px 16px",
+  backgroundColor: deploymentSurfaceTokens.surfaceHigh,
+  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: "8px"
+}));
+var IDBlock = ({
+  id,
+  label = "ID",
+  entityType = "entity",
+  onCopy
+}) => {
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  if (!id || id.trim() === "") {
+    return null;
+  }
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(id);
+      setSnackbar({ open: true, message: "ID copied to clipboard", severity: "success" });
+      onCopy?.();
+    } catch {
+      setSnackbar({ open: true, message: "Failed to copy ID", severity: "error" });
+    }
+  };
+  const handleSnackbarClose = () => {
+    setSnackbar((prev) => ({ ...prev, open: false }));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(IDContainer, { children: [
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          variant: "body2",
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: deploymentSurfaceTokens.textSecondary
+          },
+          children: [
+            label,
+            ":"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Typography,
+        {
+          variant: "body2",
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: deploymentSurfaceTokens.textPrimary,
+            userSelect: "all"
+          },
+          children: id
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          onClick: handleCopy,
+          size: "small",
+          "aria-label": `Copy ${entityType} ID ${id}`,
+          sx: {
+            padding: "4px",
+            "&:hover": {
+              backgroundColor: deploymentSurfaceTokens.hoverOverlay
+            }
+          },
+          children: /* @__PURE__ */ jsx2(
+            ContentCopyIcon,
+            {
+              sx: {
+                fontSize: "16px",
+                color: deploymentSurfaceTokens.textSecondary
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(
+      Snackbar,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleSnackbarClose,
+        anchorOrigin: { vertical: "top", horizontal: "center" },
+        children: /* @__PURE__ */ jsx2(Alert, { onClose: handleSnackbarClose, severity: snackbar.severity, children: snackbar.message })
+      }
+    )
+  ] });
+};
+
+export {
+  RoleBadge,
+  IDBlock
+};
+//# sourceMappingURL=chunk-JS4IB5IU.mjs.map

package/dist/chunk-JS4IB5IU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/RoleBadge.tsx","../src/components/feedback/IDBlock.tsx"],"sourcesContent":["import React from 'react';\nimport MuiChip, { ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\n/**\n * Color variants for the RoleBadge component\n */\nexport type RoleBadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning';\n\n/**\n * Size variants for the RoleBadge component\n */\nexport type RoleBadgeSize = 'small' | 'medium';\n\n/**\n * RoleBadge component props\n */\nexport interface RoleBadgeProps extends Omit<MuiChipProps, 'label' | 'variant' | 'color' | 'size'> {\n  /**\n   * The text content to display in the badge\n   */\n  label: string;\n  /**\n   * The color theme of the badge\n   * @default 'primary'\n   */\n  color?: RoleBadgeColor;\n  /**\n   * The size of the badge\n   * @default 'small'\n   */\n  size?: RoleBadgeSize;\n}\n\n/**\n * Styled MUI Chip with pill shape and outlined style\n * Matches Figma node 17-3595 specifications\n */\nconst StyledRoleBadge = styled(MuiChip)<MuiChipProps>(() => ({\n  // Pill shape - 100px border radius\n  borderRadius: '100px',\n  // Typography specifications from Figma\n  fontSize: '13px',\n  fontWeight: 400,\n  lineHeight: '18px',\n  letterSpacing: '0.16px',\n  // Padding specifications from Figma\n  padding: '3px 4px',\n  height: 'auto',\n  // Outlined style (no background fill)\n  '& .MuiChip-label': {\n    padding: '0 8px',\n  },\n}));\n\n/**\n * RoleBadge - Pill-shaped badge component for displaying roles or status labels\n *\n * A reusable badge component that extends MUI Chip with a pill-shaped outline style.\n * Designed for displaying user roles, status indicators, or categorization labels.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <RoleBadge label=\"Manager\" />\n *\n * // With color variants\n * <RoleBadge label=\"Admin\" color=\"error\" />\n * <RoleBadge label=\"Active\" color=\"success\" />\n *\n * // With size variants\n * <RoleBadge label=\"Owner\" size=\"medium\" />\n * ```\n *\n * @see Figma node 17-3595 for design specifications\n */\nexport const RoleBadge: React.FC<RoleBadgeProps> = ({\n  label,\n  color = 'primary',\n  size = 'small',\n  ...props\n}) => {\n  if (!label || label.trim() === '') {\n    return null;\n  }\n\n  return (\n    <StyledRoleBadge\n      label={label}\n      variant=\"outlined\"\n      color={color}\n      size={size}\n      {...props}\n    />\n  );\n};\n","import React, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Snackbar from '@mui/material/Snackbar';\nimport Alert from '@mui/material/Alert';\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\nimport { styled } from '@mui/material/styles';\nimport type { AlertColor } from '@mui/material';\nimport { deploymentSurfaceTokens } from '../../theme';\n\n/**\n * IDBlock component props\n */\nexport interface IDBlockProps {\n  /**\n   * The identifier value to display and copy\n   */\n  id: string;\n  /**\n   * Label prefix text\n   * @default 'ID'\n   */\n  label?: string;\n  /**\n   * Entity type for accessibility (used in aria-label)\n   * @default 'entity'\n   */\n  entityType?: string;\n  /**\n   * Additional callback to execute after successful copy\n   */\n  onCopy?: () => void;\n}\n\n/**\n * Styled container for the ID block\n * Matches Figma node 17-3596 specifications\n */\nconst IDContainer = styled(Box)(() => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '4px',\n  padding: '8px 16px',\n  backgroundColor: deploymentSurfaceTokens.surfaceHigh,\n  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,\n  borderRadius: '8px',\n}));\n\n/**\n * IDBlock - Read-only identifier display with integrated copy-to-clipboard button\n *\n * A component that displays an identifier (ID, account number, etc.) with a copy button.\n * Provides user feedback via an inline Snackbar when copy succeeds or fails.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <IDBlock id=\"W1234567890\" />\n *\n * // With custom label\n * <IDBlock id=\"ACC-9876543\" label=\"Account ID\" entityType=\"account\" />\n *\n * // With callback\n * <IDBlock\n *   id=\"DEPLOY-12345\"\n *   label=\"Deployment ID\"\n *   entityType=\"deployment\"\n *   onCopy={() => console.log('ID copied')}\n * />\n * ```\n *\n * @see Figma node 17-3596 for design specifications\n */\nexport const IDBlock: React.FC<IDBlockProps> = ({\n  id,\n  label = 'ID',\n  entityType = 'entity',\n  onCopy,\n}) => {\n  const [snackbar, setSnackbar] = useState<{ open: boolean; message: string; severity: AlertColor }>({\n    open: false,\n    message: '',\n    severity: 'success',\n  });\n\n  if (!id || id.trim() === '') {\n    return null;\n  }\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(id);\n      setSnackbar({ open: true, message: 'ID copied to clipboard', severity: 'success' });\n      onCopy?.();\n    } catch {\n      setSnackbar({ open: true, message: 'Failed to copy ID', severity: 'error' });\n    }\n  };\n\n  const handleSnackbarClose = () => {\n    setSnackbar((prev) => ({ ...prev, open: false }));\n  };\n\n  return (\n    <>\n      <IDContainer>\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontSize: '13px',\n            fontWeight: 500,\n            color: deploymentSurfaceTokens.textSecondary,\n          }}\n        >\n          {label}:\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontSize: '13px',\n            fontWeight: 500,\n            color: deploymentSurfaceTokens.textPrimary,\n            userSelect: 'all',\n          }}\n        >\n          {id}\n        </Typography>\n        <IconButton\n          onClick={handleCopy}\n          size=\"small\"\n          aria-label={`Copy ${entityType} ID ${id}`}\n          sx={{\n            padding: '4px',\n            '&:hover': {\n              backgroundColor: deploymentSurfaceTokens.hoverOverlay,\n            },\n          }}\n        >\n          <ContentCopyIcon\n            sx={{\n              fontSize: '16px',\n              color: deploymentSurfaceTokens.textSecondary,\n            }}\n          />\n        </IconButton>\n      </IDContainer>\n      <Snackbar\n        open={snackbar.open}\n        autoHideDuration={3000}\n        onClose={handleSnackbarClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}\n      >\n        <Alert onClose={handleSnackbarClose} severity={snackbar.severity}>\n          {snackbar.message}\n        </Alert>\n      </Snackbar>\n    </>\n  );\n};\n"],"mappings":"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","names":["styled","jsx","styled"]}