@cere/cere-design-system 0.0.45 → 0.2.0

package/dist/chunk-D7D25O6E.mjs

@@ -0,0 +1,280 @@
+import {
+  deploymentEntityColors,
+  deploymentStatusColors,
+  deploymentSurface,
+  primitives,
+  typography,
+  webSurfaceTokens,
+  workflowChromeColors,
+  workflowConnectionColors,
+  workflowNodeColors
+} from "./chunk-WC2TCWXK.mjs";
+
+// src/theme/spacing.ts
+var borderRadius = {
+  /** Small: alerts, compact elements */
+  sm: 8,
+  /** Medium: buttons, inputs, selects */
+  md: 12,
+  /** Large: chips, cards, global default */
+  lg: 16,
+  /** Extra large: hero surfaces, dialogs */
+  xl: 20,
+  /** Pill: fully rounded badges, on-gradient buttons */
+  pill: 999
+};
+
+// src/theme/surfaceVariants/webLight.ts
+var webLight = webSurfaceTokens;
+
+// src/theme/surfaceVariants/index.ts
+var surfaceVariants = { webLight };
+
+// src/theme/index.ts
+import { createTheme } from "@mui/material/styles";
+
+// src/theme/semantic.ts
+var semantic = {
+  action: {
+    primary: primitives.violet[500],
+    primaryHover: primitives.violet[600],
+    disabled: primitives.grey[400]
+  },
+  surface: {
+    default: primitives.white,
+    paper: primitives.white,
+    // Divergent near-violet #7B2CBF (rgba 123,44,191). NOT the brand violet
+    // (#aa44f2). Kept distinct in Track A; collapse deferred to Track C.
+    selected: "rgba(123, 44, 191, 0.1)",
+    hover: "rgba(0, 0, 0, 0.04)"
+  },
+  text: {
+    primary: primitives.nearBlack,
+    secondary: primitives.neutral[600],
+    disabled: primitives.neutral[900],
+    contrast: primitives.white
+  },
+  border: {
+    default: primitives.grey[300],
+    subtle: "rgba(0, 0, 0, 0.05)"
+  },
+  feedback: {
+    success: {
+      main: primitives.green[500],
+      light: primitives.green[400],
+      dark: primitives.green[600]
+    },
+    error: {
+      main: primitives.red[500],
+      light: primitives.red[400],
+      dark: primitives.red[600]
+    },
+    warning: {
+      main: primitives.amber[500],
+      light: primitives.amber[400],
+      dark: primitives.amber[600]
+    }
+  }
+};
+var deploymentSurfaceTokens = {
+  /** Surface/high background (Figma #fefcff) */
+  surfaceHigh: deploymentSurface.surfaceHigh,
+  /** Stroke/Outside border (Figma #e6e6e6) */
+  strokeOutside: deploymentSurface.strokeOutside,
+  /** Default card border (Figma #cdcccd) */
+  borderDefault: deploymentSurface.borderDefault,
+  /** Primary text (Figma #1d1b20) */
+  textPrimary: deploymentSurface.textPrimary,
+  /** Secondary/muted text (Figma #818083) */
+  textSecondary: deploymentSurface.textSecondary,
+  /** Accent blue for workspace border, capacity bar, chevrons (Figma #5865f2) */
+  accentBlue: deploymentSurface.accentBlue,
+  /** Workspace card shadow */
+  workspaceShadow: "0px 8px 12px rgba(26, 10, 124, 0.1)",
+  /** Hover state for context menu items */
+  hoverLight: deploymentSurface.hoverLight,
+  /** Generic hover overlay (buttons, icon-buttons, rows) */
+  hoverOverlay: "rgba(0, 0, 0, 0.04)",
+  /** Blue-50 highlight background for active menu items (Figma blue-50) */
+  highlightBg: deploymentSurface.highlightBg,
+  /** Blue-50 highlight background hover state */
+  highlightBgHover: deploymentSurface.highlightBgHover,
+  /** Blue-100 highlight border for active menu items (Figma blue-100) */
+  highlightBorder: deploymentSurface.highlightBorder,
+  /** Switch track enabled (Figma basic/green #53b96a) */
+  switchGreen: deploymentSurface.switchGreen,
+  /** Switch track disabled/off (Figma neutral track) */
+  switchTrackOff: deploymentSurface.switchTrackOff
+};
+
+// src/theme/components.ts
+var components = {
+  MuiButton: {
+    styleOverrides: {
+      root: {
+        textTransform: "none",
+        borderRadius: borderRadius.md,
+        fontWeight: 600,
+        padding: "8px 24px",
+        boxShadow: "none",
+        "&:hover": {
+          boxShadow: "none"
+        }
+      },
+      sizeSmall: {
+        padding: "4px 12px",
+        fontSize: "12px"
+      },
+      sizeMedium: {
+        padding: "8px 24px",
+        fontSize: "14px"
+      },
+      sizeLarge: {
+        padding: "12px 24px",
+        fontSize: "16px"
+      }
+    }
+  },
+  MuiTextField: {
+    styleOverrides: {
+      root: {
+        "& .MuiOutlinedInput-root": {
+          borderRadius: borderRadius.md
+        }
+      }
+    }
+  },
+  MuiSelect: {
+    styleOverrides: {
+      root: {
+        borderRadius: borderRadius.md
+      }
+    }
+  },
+  MuiChip: {
+    styleOverrides: {
+      root: {
+        borderRadius: borderRadius.lg,
+        fontWeight: 500
+      }
+    }
+  },
+  MuiPaper: {
+    styleOverrides: {
+      root: {
+        boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.05)",
+        border: "1px solid rgba(0, 0, 0, 0.05)"
+      }
+    }
+  },
+  MuiDrawer: {
+    styleOverrides: {
+      paper: {
+        borderRight: "1px solid rgba(0, 0, 0, 0.05)"
+      }
+    }
+  },
+  MuiAlert: {
+    styleOverrides: {
+      root: {
+        borderRadius: borderRadius.sm
+      },
+      filled: {
+        borderRadius: borderRadius.sm
+      }
+    }
+  }
+};
+
+// src/theme/index.ts
+var colors = {
+  primary: {
+    main: semantic.action.primary,
+    light: semantic.action.primary,
+    dark: semantic.action.primaryHover,
+    contrastText: semantic.text.contrast
+  },
+  secondary: {
+    main: primitives.neutral[600],
+    light: primitives.neutral[900],
+    dark: primitives.neutral[300],
+    contrastText: semantic.text.contrast
+  },
+  success: {
+    main: semantic.feedback.success.main,
+    light: semantic.feedback.success.light,
+    dark: semantic.feedback.success.dark,
+    contrastText: semantic.text.contrast
+  },
+  error: {
+    main: semantic.feedback.error.main,
+    light: semantic.feedback.error.light,
+    dark: semantic.feedback.error.dark,
+    contrastText: semantic.text.contrast
+  },
+  warning: {
+    main: semantic.feedback.warning.main,
+    light: semantic.feedback.warning.light,
+    dark: semantic.feedback.warning.dark,
+    contrastText: semantic.text.contrast
+  },
+  tertiary: {
+    main: semantic.feedback.warning.main,
+    light: semantic.feedback.warning.light,
+    dark: semantic.feedback.warning.dark,
+    contrastText: primitives.nearBlack
+  },
+  grey: primitives.grey,
+  text: {
+    primary: semantic.text.primary,
+    secondary: semantic.text.secondary,
+    disabled: semantic.text.disabled
+  },
+  background: {
+    default: semantic.surface.default,
+    paper: semantic.surface.paper,
+    selected: semantic.surface.selected
+  }
+};
+var baseTheme = createTheme({
+  cssVariables: true,
+  palette: {
+    mode: "light",
+    primary: colors.primary,
+    secondary: colors.secondary,
+    success: colors.success,
+    error: colors.error,
+    warning: colors.warning,
+    grey: colors.grey,
+    text: colors.text,
+    background: colors.background
+  },
+  typography,
+  shape: {
+    borderRadius: borderRadius.lg
+  },
+  components
+});
+var theme = createTheme(baseTheme, {
+  palette: {
+    deployment: {
+      entity: deploymentEntityColors,
+      status: deploymentStatusColors
+    },
+    workflow: {
+      node: workflowNodeColors,
+      connection: workflowConnectionColors,
+      chrome: workflowChromeColors
+    }
+  }
+});
+
+export {
+  deploymentSurfaceTokens,
+  borderRadius,
+  webLight,
+  surfaceVariants,
+  colors,
+  theme
+};
+//# sourceMappingURL=chunk-D7D25O6E.mjs.map

package/dist/chunk-D7D25O6E.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/spacing.ts","../src/theme/surfaceVariants/webLight.ts","../src/theme/surfaceVariants/index.ts","../src/theme/index.ts","../src/theme/semantic.ts","../src/theme/components.ts"],"sourcesContent":["/**\n * Spacing and sizing tokens for the design system.\n *\n * Centralizes border-radius, component-specific sizing, and spacing\n * constants that were previously scattered across component files.\n */\n\nexport const borderRadius = {\n  /** Small: alerts, compact elements */\n  sm: 8,\n  /** Medium: buttons, inputs, selects */\n  md: 12,\n  /** Large: chips, cards, global default */\n  lg: 16,\n  /** Extra large: hero surfaces, dialogs */\n  xl: 20,\n  /** Pill: fully rounded badges, on-gradient buttons */\n  pill: 999,\n} as const;\n\nexport const componentSizing = {\n  workflow: {\n    nodeIconSize: 18,\n    inspectorWidth: 320,\n  },\n  deployment: {\n    entityIconSize: 16,\n    chevronSize: 16,\n    panelRadius: 12,\n  },\n} as const;\n","/**\n * Surface variant: web-light.\n *\n * The marketplace + vault product palette. Both apps render on a light\n * surface; the older audit synthesis (which assumed marketplace was dark)\n * was wrong. There is no shipping dark variant today; that lands as part\n * of the dark-mode work (blocker `B5` in `DESIGN_SYSTEM_TODO.md`).\n *\n * This variant currently mirrors `webSurfaceTokens` verbatim. Future\n * work may diverge (e.g. a vault-specific accent override), at which\n * point a new named variant should be added rather than forking values\n * in app land.\n *\n * See `company-memory-bank/00-foundations/design-system.md` §4.\n */\n\nimport { webSurfaceTokens } from '../webSurfaceTokens';\n\nexport const webLight = webSurfaceTokens;\nexport type WebLightVariant = typeof webLight;\n","import { webLight } from './webLight';\n\n/**\n * Named surface variants. Consumers pick one variant per product surface\n * by importing the matching CSS layer (`@cere/cere-design-system/surfaces/<name>.css`)\n * AND optionally referencing the typed token bag here at the TS layer.\n *\n * Today there is only `webLight` (the shipped marketplace + vault\n * palette). A future `webDark` lands with the dark-mode work\n * (`DESIGN_SYSTEM_TODO.md` blocker `B5`).\n *\n * See `company-memory-bank/00-foundations/design-system.md` §4.\n */\nexport const surfaceVariants = { webLight } as const;\nexport type SurfaceVariant = keyof typeof surfaceVariants;\n\nexport { webLight };\nexport type { WebLightVariant } from './webLight';\n","/**\n * Design system theme barrel.\n *\n * Composes the MUI theme from token modules and re-exports everything\n * the public API needs. Internal structure:\n *\n *   primitives.ts  - Tier 1: raw color values (hue + shade)\n *   semantic.ts    - Tier 2: intent-based tokens\n *   typography.ts  - Font family and type scale\n *   components.ts  - MUI component style overrides\n *   spacing.ts     - Border radius and sizing constants\n */\n\nimport { createTheme, Theme } from '@mui/material/styles';\n// Side-effect: register custom Typography variants with MUI's type system.\nimport './typography-augment';\n\n// Token modules\nimport { primitives, deploymentEntityColors, deploymentStatusColors, workflowNodeColors, workflowConnectionColors, workflowChromeColors } from './primitives';\nimport { semantic } from './semantic';\nimport { typography } from './typography';\nimport { components } from './components';\nimport { borderRadius } from './spacing';\n\n// ---------------------------------------------------------------------------\n// Module augmentation: type-safe access to theme.palette.deployment/workflow\n// ---------------------------------------------------------------------------\ndeclare module '@mui/material/styles' {\n  interface TypeBackground {\n    selected: string;\n  }\n  interface Palette {\n    deployment: {\n      entity: typeof deploymentEntityColors;\n      status: typeof deploymentStatusColors;\n    };\n    workflow: {\n      node: typeof workflowNodeColors;\n      connection: typeof workflowConnectionColors;\n      chrome: typeof workflowChromeColors;\n    };\n  }\n  interface PaletteOptions {\n    deployment?: {\n      entity?: Record<string, string>;\n      status?: Record<string, string>;\n    };\n    workflow?: {\n      node?: Partial<typeof workflowNodeColors>;\n      connection?: Partial<typeof workflowConnectionColors>;\n      chrome?: Partial<typeof workflowChromeColors>;\n    };\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Backwards-compatible `colors` object (same shape, derived from tokens)\n// ---------------------------------------------------------------------------\nconst colors = {\n  primary: {\n    main: semantic.action.primary,\n    light: semantic.action.primary,\n    dark: semantic.action.primaryHover,\n    contrastText: semantic.text.contrast,\n  },\n  secondary: {\n    main: primitives.neutral[600],\n    light: primitives.neutral[900],\n    dark: primitives.neutral[300],\n    contrastText: semantic.text.contrast,\n  },\n  success: {\n    main: semantic.feedback.success.main,\n    light: semantic.feedback.success.light,\n    dark: semantic.feedback.success.dark,\n    contrastText: semantic.text.contrast,\n  },\n  error: {\n    main: semantic.feedback.error.main,\n    light: semantic.feedback.error.light,\n    dark: semantic.feedback.error.dark,\n    contrastText: semantic.text.contrast,\n  },\n  warning: {\n    main: semantic.feedback.warning.main,\n    light: semantic.feedback.warning.light,\n    dark: semantic.feedback.warning.dark,\n    contrastText: semantic.text.contrast,\n  },\n  tertiary: {\n    main: semantic.feedback.warning.main,\n    light: semantic.feedback.warning.light,\n    dark: semantic.feedback.warning.dark,\n    contrastText: primitives.nearBlack,\n  },\n  grey: primitives.grey,\n  text: {\n    primary: semantic.text.primary,\n    secondary: semantic.text.secondary,\n    disabled: semantic.text.disabled,\n  },\n  background: {\n    default: semantic.surface.default,\n    paper: semantic.surface.paper,\n    selected: semantic.surface.selected,\n  },\n};\n\n// ---------------------------------------------------------------------------\n// Theme composition\n// ---------------------------------------------------------------------------\nconst baseTheme = createTheme({\n  cssVariables: true,\n  palette: {\n    mode: 'light',\n    primary: colors.primary,\n    secondary: colors.secondary,\n    success: colors.success,\n    error: colors.error,\n    warning: colors.warning,\n    grey: colors.grey,\n    text: colors.text,\n    background: colors.background,\n  },\n  typography,\n  shape: {\n    borderRadius: borderRadius.lg,\n  },\n  components,\n});\n\n// Extend palette with deployment dashboard and workflow tokens\nexport const theme: Theme = createTheme(baseTheme, {\n  palette: {\n    deployment: {\n      entity: deploymentEntityColors,\n      status: deploymentStatusColors,\n    },\n    workflow: {\n      node: workflowNodeColors,\n      connection: workflowConnectionColors,\n      chrome: workflowChromeColors,\n    },\n  },\n});\n\n// ---------------------------------------------------------------------------\n// Public exports (preserve every name the old barrel exported)\n// ---------------------------------------------------------------------------\nexport { colors };\nexport { semantic, deploymentSurfaceTokens } from './semantic';\nexport {\n  primitives,\n  robPrimaryPalette,\n  robPaletteExtended,\n  deploymentEntityColors,\n  deploymentStatusColors,\n  workflowNodeColors,\n  workflowConnectionColors,\n  workflowChromeColors,\n  deploymentSurface,\n} from './primitives';\nexport { borderRadius, componentSizing } from './spacing';\nexport { motion } from './motion';\nexport { webSurfaceTokens } from './webSurfaceTokens';\nexport type { WebSurfaceTokenKey } from './webSurfaceTokens';\nexport { surfaceVariants, webLight } from './surfaceVariants';\nexport type { SurfaceVariant, WebLightVariant } from './surfaceVariants';\n","/**\n * Tier 2: Semantic color tokens.\n *\n * Intent-based tokens that map primitives to UI roles. Components\n * should reference these (or theme.palette) instead of raw hex values.\n *\n * To change the color scheme: edit the mappings here. Zero component changes.\n */\n\nimport { primitives, deploymentSurface } from './primitives';\n\nexport const semantic = {\n  action: {\n    primary: primitives.violet[500],\n    primaryHover: primitives.violet[600],\n    disabled: primitives.grey[400],\n  },\n  surface: {\n    default: primitives.white,\n    paper: primitives.white,\n    // Divergent near-violet #7B2CBF (rgba 123,44,191). NOT the brand violet\n    // (#aa44f2). Kept distinct in Track A; collapse deferred to Track C.\n    selected: 'rgba(123, 44, 191, 0.1)',\n    hover: 'rgba(0, 0, 0, 0.04)',\n  },\n  text: {\n    primary: primitives.nearBlack,\n    secondary: primitives.neutral[600],\n    disabled: primitives.neutral[900],\n    contrast: primitives.white,\n  },\n  border: {\n    default: primitives.grey[300],\n    subtle: 'rgba(0, 0, 0, 0.05)',\n  },\n  feedback: {\n    success: {\n      main: primitives.green[500],\n      light: primitives.green[400],\n      dark: primitives.green[600],\n    },\n    error: {\n      main: primitives.red[500],\n      light: primitives.red[400],\n      dark: primitives.red[600],\n    },\n    warning: {\n      main: primitives.amber[500],\n      light: primitives.amber[400],\n      dark: primitives.amber[600],\n    },\n  },\n} as const;\n\n/**\n * Shared Figma surface/stroke tokens used across deployment dashboard\n * components. Referenced by semantic name rather than raw hex.\n */\nexport const deploymentSurfaceTokens = {\n  /** Surface/high background (Figma #fefcff) */\n  surfaceHigh: deploymentSurface.surfaceHigh,\n  /** Stroke/Outside border (Figma #e6e6e6) */\n  strokeOutside: deploymentSurface.strokeOutside,\n  /** Default card border (Figma #cdcccd) */\n  borderDefault: deploymentSurface.borderDefault,\n  /** Primary text (Figma #1d1b20) */\n  textPrimary: deploymentSurface.textPrimary,\n  /** Secondary/muted text (Figma #818083) */\n  textSecondary: deploymentSurface.textSecondary,\n  /** Accent blue for workspace border, capacity bar, chevrons (Figma #5865f2) */\n  accentBlue: deploymentSurface.accentBlue,\n  /** Workspace card shadow */\n  workspaceShadow: '0px 8px 12px rgba(26, 10, 124, 0.1)',\n  /** Hover state for context menu items */\n  hoverLight: deploymentSurface.hoverLight,\n  /** Generic hover overlay (buttons, icon-buttons, rows) */\n  hoverOverlay: 'rgba(0, 0, 0, 0.04)',\n  /** Blue-50 highlight background for active menu items (Figma blue-50) */\n  highlightBg: deploymentSurface.highlightBg,\n  /** Blue-50 highlight background hover state */\n  highlightBgHover: deploymentSurface.highlightBgHover,\n  /** Blue-100 highlight border for active menu items (Figma blue-100) */\n  highlightBorder: deploymentSurface.highlightBorder,\n  /** Switch track enabled (Figma basic/green #53b96a) */\n  switchGreen: deploymentSurface.switchGreen,\n  /** Switch track disabled/off (Figma neutral track) */\n  switchTrackOff: deploymentSurface.switchTrackOff,\n} as const;\n","/**\n * MUI component style overrides for the design system.\n *\n * Centralized overrides applied via createTheme({ components }).\n * Keeps the theme barrel focused on composition.\n */\n\nimport type { Components, Theme } from '@mui/material/styles';\nimport { borderRadius } from './spacing';\n\nexport const components: Components<Omit<Theme, 'components'>> = {\n  MuiButton: {\n    styleOverrides: {\n      root: {\n        textTransform: 'none',\n        borderRadius: borderRadius.md,\n        fontWeight: 600,\n        padding: '8px 24px',\n        boxShadow: 'none',\n        '&:hover': {\n          boxShadow: 'none',\n        },\n      },\n      sizeSmall: {\n        padding: '4px 12px',\n        fontSize: '12px',\n      },\n      sizeMedium: {\n        padding: '8px 24px',\n        fontSize: '14px',\n      },\n      sizeLarge: {\n        padding: '12px 24px',\n        fontSize: '16px',\n      },\n    },\n  },\n  MuiTextField: {\n    styleOverrides: {\n      root: {\n        '& .MuiOutlinedInput-root': {\n          borderRadius: borderRadius.md,\n        },\n      },\n    },\n  },\n  MuiSelect: {\n    styleOverrides: {\n      root: {\n        borderRadius: borderRadius.md,\n      },\n    },\n  },\n  MuiChip: {\n    styleOverrides: {\n      root: {\n        borderRadius: borderRadius.lg,\n        fontWeight: 500,\n      },\n    },\n  },\n  MuiPaper: {\n    styleOverrides: {\n      root: {\n        boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.05)',\n        border: '1px solid rgba(0, 0, 0, 0.05)',\n      },\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: {\n        borderRight: '1px solid rgba(0, 0, 0, 0.05)',\n      },\n    },\n  },\n  MuiAlert: {\n    styleOverrides: {\n      root: {\n        borderRadius: borderRadius.sm,\n      },\n      filled: {\n        borderRadius: borderRadius.sm,\n      },\n    },\n  },\n};\n"],"mappings":";;;;;;;;;;;;;AAOO,IAAM,eAAe;AAAA;AAAA,EAE1B,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,IAAI;AAAA;AAAA,EAEJ,MAAM;AACR;;;ACAO,IAAM,WAAW;;;ACLjB,IAAM,kBAAkB,EAAE,SAAS;;;ACA1C,SAAS,mBAA0B;;;ACF5B,IAAM,WAAW;AAAA,EACtB,QAAQ;AAAA,IACN,SAAS,WAAW,OAAO,GAAG;AAAA,IAC9B,cAAc,WAAW,OAAO,GAAG;AAAA,IACnC,UAAU,WAAW,KAAK,GAAG;AAAA,EAC/B;AAAA,EACA,SAAS;AAAA,IACP,SAAS,WAAW;AAAA,IACpB,OAAO,WAAW;AAAA;AAAA;AAAA,IAGlB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS,WAAW;AAAA,IACpB,WAAW,WAAW,QAAQ,GAAG;AAAA,IACjC,UAAU,WAAW,QAAQ,GAAG;AAAA,IAChC,UAAU,WAAW;AAAA,EACvB;AAAA,EACA,QAAQ;AAAA,IACN,SAAS,WAAW,KAAK,GAAG;AAAA,IAC5B,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM,WAAW,MAAM,GAAG;AAAA,MAC1B,OAAO,WAAW,MAAM,GAAG;AAAA,MAC3B,MAAM,WAAW,MAAM,GAAG;AAAA,IAC5B;AAAA,IACA,OAAO;AAAA,MACL,MAAM,WAAW,IAAI,GAAG;AAAA,MACxB,OAAO,WAAW,IAAI,GAAG;AAAA,MACzB,MAAM,WAAW,IAAI,GAAG;AAAA,IAC1B;AAAA,IACA,SAAS;AAAA,MACP,MAAM,WAAW,MAAM,GAAG;AAAA,MAC1B,OAAO,WAAW,MAAM,GAAG;AAAA,MAC3B,MAAM,WAAW,MAAM,GAAG;AAAA,IAC5B;AAAA,EACF;AACF;AAMO,IAAM,0BAA0B;AAAA;AAAA,EAErC,aAAa,kBAAkB;AAAA;AAAA,EAE/B,eAAe,kBAAkB;AAAA;AAAA,EAEjC,eAAe,kBAAkB;AAAA;AAAA,EAEjC,aAAa,kBAAkB;AAAA;AAAA,EAE/B,eAAe,kBAAkB;AAAA;AAAA,EAEjC,YAAY,kBAAkB;AAAA;AAAA,EAE9B,iBAAiB;AAAA;AAAA,EAEjB,YAAY,kBAAkB;AAAA;AAAA,EAE9B,cAAc;AAAA;AAAA,EAEd,aAAa,kBAAkB;AAAA;AAAA,EAE/B,kBAAkB,kBAAkB;AAAA;AAAA,EAEpC,iBAAiB,kBAAkB;AAAA;AAAA,EAEnC,aAAa,kBAAkB;AAAA;AAAA,EAE/B,gBAAgB,kBAAkB;AACpC;;;AC7EO,IAAM,aAAoD;AAAA,EAC/D,WAAW;AAAA,IACT,gBAAgB;AAAA,MACd,MAAM;AAAA,QACJ,eAAe;AAAA,QACf,cAAc,aAAa;AAAA,QAC3B,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,UACT,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,gBAAgB;AAAA,MACd,MAAM;AAAA,QACJ,4BAA4B;AAAA,UAC1B,cAAc,aAAa;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,gBAAgB;AAAA,MACd,MAAM;AAAA,QACJ,cAAc,aAAa;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,gBAAgB;AAAA,MACd,MAAM;AAAA,QACJ,cAAc,aAAa;AAAA,QAC3B,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,gBAAgB;AAAA,MACd,MAAM;AAAA,QACJ,WAAW;AAAA,QACX,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,gBAAgB;AAAA,MACd,OAAO;AAAA,QACL,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,gBAAgB;AAAA,MACd,MAAM;AAAA,QACJ,cAAc,aAAa;AAAA,MAC7B;AAAA,MACA,QAAQ;AAAA,QACN,cAAc,aAAa;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AACF;;;AF5BA,IAAM,SAAS;AAAA,EACb,SAAS;AAAA,IACP,MAAM,SAAS,OAAO;AAAA,IACtB,OAAO,SAAS,OAAO;AAAA,IACvB,MAAM,SAAS,OAAO;AAAA,IACtB,cAAc,SAAS,KAAK;AAAA,EAC9B;AAAA,EACA,WAAW;AAAA,IACT,MAAM,WAAW,QAAQ,GAAG;AAAA,IAC5B,OAAO,WAAW,QAAQ,GAAG;AAAA,IAC7B,MAAM,WAAW,QAAQ,GAAG;AAAA,IAC5B,cAAc,SAAS,KAAK;AAAA,EAC9B;AAAA,EACA,SAAS;AAAA,IACP,MAAM,SAAS,SAAS,QAAQ;AAAA,IAChC,OAAO,SAAS,SAAS,QAAQ;AAAA,IACjC,MAAM,SAAS,SAAS,QAAQ;AAAA,IAChC,cAAc,SAAS,KAAK;AAAA,EAC9B;AAAA,EACA,OAAO;AAAA,IACL,MAAM,SAAS,SAAS,MAAM;AAAA,IAC9B,OAAO,SAAS,SAAS,MAAM;AAAA,IAC/B,MAAM,SAAS,SAAS,MAAM;AAAA,IAC9B,cAAc,SAAS,KAAK;AAAA,EAC9B;AAAA,EACA,SAAS;AAAA,IACP,MAAM,SAAS,SAAS,QAAQ;AAAA,IAChC,OAAO,SAAS,SAAS,QAAQ;AAAA,IACjC,MAAM,SAAS,SAAS,QAAQ;AAAA,IAChC,cAAc,SAAS,KAAK;AAAA,EAC9B;AAAA,EACA,UAAU;AAAA,IACR,MAAM,SAAS,SAAS,QAAQ;AAAA,IAChC,OAAO,SAAS,SAAS,QAAQ;AAAA,IACjC,MAAM,SAAS,SAAS,QAAQ;AAAA,IAChC,cAAc,WAAW;AAAA,EAC3B;AAAA,EACA,MAAM,WAAW;AAAA,EACjB,MAAM;AAAA,IACJ,SAAS,SAAS,KAAK;AAAA,IACvB,WAAW,SAAS,KAAK;AAAA,IACzB,UAAU,SAAS,KAAK;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,IACV,SAAS,SAAS,QAAQ;AAAA,IAC1B,OAAO,SAAS,QAAQ;AAAA,IACxB,UAAU,SAAS,QAAQ;AAAA,EAC7B;AACF;AAKA,IAAM,YAAY,YAAY;AAAA,EAC5B,cAAc;AAAA,EACd,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS,OAAO;AAAA,IAChB,WAAW,OAAO;AAAA,IAClB,SAAS,OAAO;AAAA,IAChB,OAAO,OAAO;AAAA,IACd,SAAS,OAAO;AAAA,IAChB,MAAM,OAAO;AAAA,IACb,MAAM,OAAO;AAAA,IACb,YAAY,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,IACL,cAAc,aAAa;AAAA,EAC7B;AAAA,EACA;AACF,CAAC;AAGM,IAAM,QAAe,YAAY,WAAW;AAAA,EACjD,SAAS;AAAA,IACP,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;","names":[]}

package/dist/chunk-DRGMEIPT.mjs

@@ -0,0 +1,162 @@
+import {
+  deploymentSurfaceTokens
+} from "./chunk-D7D25O6E.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-DRGMEIPT.mjs.map

package/dist/chunk-DRGMEIPT.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/Alert';\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":";;;;;AACA,OAAO,aAA4C;AACnD,SAAS,cAAc;AAqFnB;AAjDJ,IAAM,kBAAkB,OAAO,OAAO,EAAgB,OAAO;AAAA;AAAA,EAE3D,cAAc;AAAA;AAAA,EAEd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,eAAe;AAAA;AAAA,EAEf,SAAS;AAAA,EACT,QAAQ;AAAA;AAAA,EAER,oBAAoB;AAAA,IAClB,SAAS;AAAA,EACX;AACF,EAAE;AAuBK,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,GAAG;AACL,MAAM;AACJ,MAAI,CAAC,SAAS,MAAM,KAAK,MAAM,IAAI;AACjC,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;;;AC/FA,SAAgB,gBAAgB;AAChC,OAAO,SAAS;AAChB,OAAO,gBAAgB;AACvB,OAAO,gBAAgB;AACvB,OAAO,cAAc;AACrB,OAAO,WAAW;AAClB,OAAO,qBAAqB;AAC5B,SAAS,UAAAA,eAAc;AAkGnB,mBAYI,OAAAC,MAVA,YAFJ;AAlEJ,IAAM,cAAcC,QAAO,GAAG,EAAE,OAAO;AAAA,EACrC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK;AAAA,EACL,SAAS;AAAA,EACT,iBAAiB,wBAAwB;AAAA,EACzC,QAAQ,aAAa,wBAAwB,aAAa;AAAA,EAC1D,cAAc;AAChB,EAAE;AA2BK,IAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmE;AAAA,IACjG,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,EACZ,CAAC;AAED,MAAI,CAAC,MAAM,GAAG,KAAK,MAAM,IAAI;AAC3B,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,YAAY;AAC7B,QAAI;AACF,YAAM,UAAU,UAAU,UAAU,EAAE;AACtC,kBAAY,EAAE,MAAM,MAAM,SAAS,0BAA0B,UAAU,UAAU,CAAC;AAClF,eAAS;AAAA,IACX,QAAQ;AACN,kBAAY,EAAE,MAAM,MAAM,SAAS,qBAAqB,UAAU,QAAQ,CAAC;AAAA,IAC7E;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM;AAChC,gBAAY,CAAC,UAAU,EAAE,GAAG,MAAM,MAAM,MAAM,EAAE;AAAA,EAClD;AAEA,SACE,iCACE;AAAA,yBAAC,eACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,IAAI;AAAA,YACF,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,OAAO,wBAAwB;AAAA,UACjC;AAAA,UAEC;AAAA;AAAA,YAAM;AAAA;AAAA;AAAA,MACT;AAAA,MACA,gBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,IAAI;AAAA,YACF,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,OAAO,wBAAwB;AAAA,YAC/B,YAAY;AAAA,UACd;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAS;AAAA,UACT,MAAK;AAAA,UACL,cAAY,QAAQ,UAAU,OAAO,EAAE;AAAA,UACvC,IAAI;AAAA,YACF,SAAS;AAAA,YACT,WAAW;AAAA,cACT,iBAAiB,wBAAwB;AAAA,YAC3C;AAAA,UACF;AAAA,UAEA,0BAAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,gBACF,UAAU;AAAA,gBACV,OAAO,wBAAwB;AAAA,cACjC;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,SAAS;AAAA,QACf,kBAAkB;AAAA,QAClB,SAAS;AAAA,QACT,cAAc,EAAE,UAAU,OAAO,YAAY,SAAS;AAAA,QAEtD,0BAAAA,KAAC,SAAM,SAAS,qBAAqB,UAAU,SAAS,UACrD,mBAAS,SACZ;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":["styled","jsx","styled"]}