@cere/cere-design-system 0.1.0 → 0.2.0

package/dist/{chunk-3WCMINE5.mjs → chunk-34LFXT6C.mjs}

@@ -1,7 +1,7 @@
 import {
   Card,
-  Typography
-} from "./chunk-KVBMZNWT.mjs";
+  default as default2
+} from "./chunk-POCAW2G4.mjs";
 import {
   TextField
 } from "./chunk-ZP26PGMS.mjs";
@@ -9,7 +9,7 @@ import {
   fontFamilyMono,
   motion,
   webSurfaceTokens
-} from "./chunk-PWF2NJDB.mjs";
+} from "./chunk-WC2TCWXK.mjs";
 
 // src/components/inputs/CopyableField.tsx
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -94,7 +94,7 @@ var CopyableField = React.forwardRef(
             minHeight: label || copied ? void 0 : 0
           },
           children: [
-            label ? /* @__PURE__ */ jsx(Typography, { variant: "overline", children: label }) : /* @__PURE__ */ jsx("span", {}),
+            label ? /* @__PURE__ */ jsx(default2, { variant: "overline", children: label }) : /* @__PURE__ */ jsx("span", {}),
             /* @__PURE__ */ jsx(FlashLabel, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: copied ? flashLabel : "" })
           ]
         }
@@ -223,20 +223,16 @@ var SearchField = React2.forwardRef(
 );
 
 // src/components/inputs/FormControl.tsx
-import {
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  FormControlLabel,
-  InputLabel,
-  InputAdornment as InputAdornment2
-} from "@mui/material";
+import { default as default3 } from "@mui/material/FormControl";
+import { default as default4 } from "@mui/material/FormLabel";
+import { default as default5 } from "@mui/material/FormHelperText";
+import { default as default6 } from "@mui/material/FormControlLabel";
+import { default as default7 } from "@mui/material/InputLabel";
+import { default as default8 } from "@mui/material/InputAdornment";
 
 // src/components/inputs/ToggleButton.tsx
-import {
-  ToggleButton as MuiToggleButton,
-  ToggleButtonGroup as MuiToggleButtonGroup
-} from "@mui/material";
+import MuiToggleButton from "@mui/material/ToggleButton";
+import MuiToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import { styled as styled2 } from "@mui/material/styles";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ToggleButton = (props) => {
@@ -330,7 +326,7 @@ var Switch = ({
 // src/components/inputs/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox";
 import { styled as styled4 } from "@mui/material/styles";
-import FormControlLabel2 from "@mui/material/FormControlLabel";
+import FormControlLabel from "@mui/material/FormControlLabel";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var StyledCheckbox = styled4(MuiCheckbox)(({ theme }) => ({
   color: theme.palette.grey[400],
@@ -365,7 +361,7 @@ var Checkbox = ({
     right: "end"
   };
   return /* @__PURE__ */ jsx5(
-    FormControlLabel2,
+    FormControlLabel,
     {
       control: checkboxComponent,
       label,
@@ -377,7 +373,7 @@ var Checkbox = ({
 // src/components/inputs/Radio.tsx
 import MuiRadio from "@mui/material/Radio";
 import { styled as styled5 } from "@mui/material/styles";
-import FormControlLabel3 from "@mui/material/FormControlLabel";
+import FormControlLabel2 from "@mui/material/FormControlLabel";
 import RadioGroup from "@mui/material/RadioGroup";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var StyledRadio = styled5(MuiRadio)(({ theme }) => ({
@@ -410,7 +406,7 @@ var Radio = ({
     right: "end"
   };
   return /* @__PURE__ */ jsx6(
-    FormControlLabel3,
+    FormControlLabel2,
     {
       control: radioComponent,
       label,
@@ -421,7 +417,7 @@ var Radio = ({
 
 // src/components/inputs/DateRangePicker/DateRangePicker.tsx
 import Stack from "@mui/material/Stack";
-import Typography2 from "@mui/material/Typography";
+import Typography from "@mui/material/Typography";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
@@ -451,7 +447,7 @@ var DateRangePicker = ({
         }
       }
     ),
-    /* @__PURE__ */ jsx7(Typography2, { variant: "body2", color: "text.secondary", children: "\u2013" }),
+    /* @__PURE__ */ jsx7(Typography, { variant: "body2", color: "text.secondary", children: "\u2013" }),
     /* @__PURE__ */ jsx7(
       DatePicker,
       {
@@ -473,12 +469,12 @@ export {
   CopyableField,
   useSearchHotkeys,
   SearchField,
-  FormControl,
-  FormLabel,
-  FormHelperText,
-  FormControlLabel,
-  InputLabel,
-  InputAdornment2 as InputAdornment,
+  default3 as default,
+  default4 as default2,
+  default5 as default3,
+  default6 as default4,
+  default7 as default5,
+  default8 as default6,
   ToggleButton,
   ToggleButtonGroup,
   Switch,
@@ -487,4 +483,4 @@ export {
   Radio,
   DateRangePicker
 };
-//# sourceMappingURL=chunk-3WCMINE5.mjs.map
+//# sourceMappingURL=chunk-34LFXT6C.mjs.map

package/dist/chunk-34LFXT6C.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/CopyableField.tsx","../src/components/inputs/SearchField.tsx","../src/components/inputs/useSearchHotkeys.ts","../src/components/inputs/FormControl.tsx","../src/components/inputs/ToggleButton.tsx","../src/components/inputs/Switch.tsx","../src/components/inputs/Checkbox.tsx","../src/components/inputs/Radio.tsx","../src/components/inputs/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport { Card } from '../layout/Card';\nimport { Typography } from '../layout/Typography';\nimport {\n  fontFamilyMono,\n} from '../../theme/typography';\nimport { motion } from '../../theme/motion';\nimport { webSurfaceTokens } from '../../theme/webSurfaceTokens';\n\nexport interface CopyableFieldProps {\n  /** The string copied to the clipboard. Also rendered as the button label. */\n  value: string;\n  /** Small label rendered above the value (overline-styled). */\n  label?: React.ReactNode;\n  /** Custom aria-label; defaults to \"Copy {value}\". */\n  ariaLabel?: string;\n  /** How long the \"Copied\" flash stays visible, in ms. @default 1400 */\n  flashDurationMs?: number;\n  /** Text shown during the flash. @default \"Copied\" */\n  flashLabel?: string;\n  /** Optional callback invoked after a successful copy. */\n  onCopy?: (value: string) => void;\n}\n\nconst ValueButton = styled('button')({\n  fontFamily: fontFamilyMono,\n  fontSize: '11.5px',\n  fontWeight: 400,\n  lineHeight: 1.45,\n  padding: '8px 10px',\n  borderRadius: '8px',\n  backgroundColor: webSurfaceTokens.surfaceMid,\n  border: `1px solid ${webSurfaceTokens.strokeOnLow}`,\n  color: webSurfaceTokens.textSecondary,\n  wordBreak: 'break-all',\n  display: 'block',\n  width: '100%',\n  textAlign: 'left',\n  cursor: 'pointer',\n  appearance: 'none',\n  transition: `background ${motion.dur.fast} ${motion.ease.standard},\n               border-color ${motion.dur.fast} ${motion.ease.standard},\n               color ${motion.dur.fast} ${motion.ease.standard}`,\n  '&:hover': {\n    backgroundColor: webSurfaceTokens.surfaceContrast,\n    borderColor: webSurfaceTokens.strokeOnMed,\n    color: webSurfaceTokens.textPrimary,\n  },\n  '&:active': {\n    transform: 'translateY(1px)',\n  },\n  '&:focus-visible': {\n    outline: 'none',\n    boxShadow: webSurfaceTokens.shadowFocus,\n  },\n});\n\nconst FlashLabel = styled('span')({\n  fontSize: '11px',\n  fontWeight: 600,\n  color: webSurfaceTokens.cVioletDark,\n  letterSpacing: '0.04em',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animation: 'cere-copyable-flash 180ms ease-out',\n  },\n  '@keyframes cere-copyable-flash': {\n    from: { opacity: 0, transform: 'translateY(-2px)' },\n    to: { opacity: 1, transform: 'translateY(0)' },\n  },\n});\n\n/**\n * Tinted card with a label row and a monospace, click-to-copy value button.\n * Replaces ad-hoc `.share-card / .url / .share-card__flash` markup.\n */\nexport const CopyableField = React.forwardRef<HTMLDivElement, CopyableFieldProps>(\n  function CopyableField(\n    { value, label, ariaLabel, flashDurationMs = 1400, flashLabel = 'Copied', onCopy },\n    ref,\n  ) {\n  const [copied, setCopied] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.(value);\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => setCopied(false), flashDurationMs);\n    } catch {\n      // Clipboard blocked (insecure context / permissions). The value is\n      // still visible as plain text — silently no-op.\n    }\n  }, [value, onCopy, flashDurationMs]);\n\n  return (\n    <Card ref={ref} variant=\"tinted\" sx={{ p: 1.75 }}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: label || copied ? '6px' : 0,\n          minHeight: label || copied ? undefined : 0,\n        }}\n      >\n        {label ? <Typography variant=\"overline\">{label}</Typography> : <span />}\n        {/*\n         * Live region stays mounted (even when empty) so SRs reliably\n         * announce the swap to flashLabel after a copy. The visual flash\n         * uses the same node, so we don't double-render the text.\n         */}\n        <FlashLabel role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {copied ? flashLabel : ''}\n        </FlashLabel>\n      </Box>\n      <ValueButton\n        type=\"button\"\n        onClick={handleCopy}\n        aria-label={ariaLabel ?? `Copy ${value}`}\n      >\n        {value}\n      </ValueButton>\n    </Card>\n  );\n  },\n);\n","import React, { useEffect, useState } from 'react';\nimport { TextField, TextFieldProps } from './TextField';\nimport SearchIcon from '@mui/icons-material/Search';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { isMacPlatform } from './useSearchHotkeys';\n\nexport type SearchFieldVariant = 'standard' | 'pill';\n\nexport interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps' | 'variant'> {\n  placeholder?: string;\n  /** Fires with the next input value on every change. */\n  onSearch?: (value: string) => void;\n  /** Visual treatment. `pill` renders a fully-rounded input. @default 'standard' */\n  variant?: SearchFieldVariant;\n  /**\n   * Show a keyboard-shortcut hint adornment (⌘ K on Mac, Ctrl + K elsewhere) at\n   * the right edge. Pair with `useSearchHotkeys` to wire the key handler.\n   */\n  shortcutHint?: boolean;\n}\n\nconst ShortcutHint = () => {\n  // We render nothing on the server (and on the first client render) because\n  // we have no reliable SSR signal for platform — `navigator.platform` is only\n  // available after hydration. Rendering either default (⌘ or Ctrl) would be\n  // wrong roughly half the time, so we accept a one-frame flash and swap to\n  // the correct glyph in a post-mount effect. The hint is decorative.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  if (!mounted) return null;\n  const isMac = isMacPlatform();\n  // Mac convention is the cmd glyph + a thin gap before the letter; on other\n  // platforms the explicit \"Ctrl + K\" form reads better than \"CtrlK\".\n  const label = isMac ? '⌘ K' : 'Ctrl + K';\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden\n      sx={{\n        fontFamily: 'monospace',\n        fontSize: 11,\n        letterSpacing: 0.4,\n        px: 0.75,\n        py: 0.25,\n        borderRadius: 1,\n        border: '1px solid',\n        borderColor: 'divider',\n        color: 'text.secondary',\n        lineHeight: 1,\n      }}\n    >\n      {label}\n    </Box>\n  );\n};\n\nexport const SearchField = React.forwardRef<HTMLDivElement, SearchFieldProps>(\n  function SearchField(\n    {\n      placeholder = 'Search...',\n      onSearch,\n      onChange,\n      variant = 'standard',\n      shortcutHint = false,\n      sx,\n      ...props\n    },\n    ref,\n  ) {\n  const theme = useTheme();\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    onSearch?.(e.target.value);\n  };\n\n  const pillInputSx =\n    variant === 'pill'\n      ? { borderRadius: '999px', paddingRight: '6px' }\n      : undefined;\n\n  return (\n    <TextField\n      ref={ref}\n      placeholder={placeholder}\n      onChange={handleChange}\n      sx={sx}\n      slotProps={{\n        input: {\n          ...(pillInputSx ? { sx: pillInputSx } : {}),\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon style={{ fontSize: 18, color: theme.palette.text.disabled }} />\n            </InputAdornment>\n          ),\n          endAdornment: shortcutHint ? (\n            <InputAdornment position=\"end\">\n              <ShortcutHint />\n            </InputAdornment>\n          ) : undefined,\n        },\n      }}\n      {...props}\n    />\n  );\n  },\n);\n","import { RefObject, useEffect } from 'react';\n\nexport interface UseSearchHotkeysOptions {\n  /** Cmd/Ctrl + K focuses the ref. @default true */\n  k?: boolean;\n  /** `/` (when not already typing in another field) focuses the ref. @default true */\n  slash?: boolean;\n}\n\n/** Detect Mac via the modern `userAgentData.platform`, falling back to `navigator.platform`. */\nexport function isMacPlatform(): boolean {\n  if (typeof navigator === 'undefined') return false;\n  const uaDataPlatform = (navigator as Navigator & { userAgentData?: { platform?: string } })\n    .userAgentData?.platform;\n  if (typeof uaDataPlatform === 'string') return /mac/i.test(uaDataPlatform);\n  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform);\n}\n\n/**\n * Wire global Cmd+K (Mac) / Ctrl+K (everywhere else) and `/` hotkeys to focus\n * the input pointed to by `inputRef`. The `/` hotkey is suppressed while the\n * user is typing in another input, textarea or contentEditable element so it\n * doesn't hijack normal typing. Either hotkey can be disabled via options.\n */\nexport function useSearchHotkeys(\n  inputRef: RefObject<HTMLInputElement | null>,\n  options: UseSearchHotkeysOptions = {},\n) {\n  const { k: enableK = true, slash: enableSlash = true } = options;\n\n  useEffect(() => {\n    if (!enableK && !enableSlash) return;\n    const mac = isMacPlatform();\n    function onKeyDown(event: KeyboardEvent) {\n      if (enableK && event.key.toLowerCase() === 'k') {\n        // Mac users press Cmd-K (metaKey); Ctrl-K is reserved for kill-to-end-of-line.\n        // Everyone else uses Ctrl-K. Exclude Shift/Alt so we don't hijack browser\n        // shortcuts like Cmd+Shift+K (Chrome dev tools tab).\n        const correctMod = mac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;\n        if (correctMod && !event.shiftKey && !event.altKey) {\n          event.preventDefault();\n          inputRef.current?.focus();\n          return;\n        }\n      }\n      if (enableSlash && event.key === '/') {\n        const target = event.target as HTMLElement | null;\n        const typingInField =\n          target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          (target?.isContentEditable ?? false);\n        if (!typingInField) {\n          event.preventDefault();\n          inputRef.current?.focus();\n        }\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [inputRef, enableK, enableSlash]);\n}\n","export { default as FormControl } from '@mui/material/FormControl';\nexport type { FormControlProps } from '@mui/material/FormControl';\nexport { default as FormLabel } from '@mui/material/FormLabel';\nexport type { FormLabelProps } from '@mui/material/FormLabel';\nexport { default as FormHelperText } from '@mui/material/FormHelperText';\nexport type { FormHelperTextProps } from '@mui/material/FormHelperText';\nexport { default as FormControlLabel } from '@mui/material/FormControlLabel';\nexport type { FormControlLabelProps } from '@mui/material/FormControlLabel';\nexport { default as InputLabel } from '@mui/material/InputLabel';\nexport type { InputLabelProps } from '@mui/material/InputLabel';\nexport { default as InputAdornment } from '@mui/material/InputAdornment';\nexport type { InputAdornmentProps } from '@mui/material/InputAdornment';\n\n","import React from 'react';\nimport MuiToggleButton from '@mui/material/ToggleButton';\nimport type { ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';\nimport MuiToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport type { ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';\nimport { styled } from '@mui/material/styles';\n\nexport type ToggleButtonProps = MuiToggleButtonProps\n\nexport const ToggleButton: React.FC<ToggleButtonProps> = (props) => {\n  return <MuiToggleButton {...props} />;\n};\n\nexport type ToggleButtonGroupProps = MuiToggleButtonGroupProps\n\nconst StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({\n  '& .MuiToggleButton-root': {\n    border: `1px solid ${theme.palette.grey[300]}`,\n    '&.Mui-selected': {\n      backgroundColor: theme.palette.primary.main,\n      color: theme.palette.primary.contrastText,\n      '&:hover': {\n        backgroundColor: theme.palette.primary.light,\n      },\n    },\n    '&:hover': {\n      backgroundColor: theme.palette.grey[50],\n    },\n  },\n}));\n\nexport const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = (props) => {\n  return <StyledToggleButtonGroup {...props} />;\n};\n\n","import React from 'react';\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\nimport { styled } from '@mui/material/styles';\n\nexport interface SwitchProps extends MuiSwitchProps {\n  label?: string;\n  labelPosition?: 'left' | 'right';\n}\n\nconst StyledSwitch = styled(MuiSwitch)(({ theme }) => ({\n  width: 44,\n  height: 24,\n  padding: 0,\n  '& .MuiSwitch-switchBase': {\n    padding: 0,\n    margin: 2,\n    transitionDuration: '300ms',\n    '&.Mui-checked': {\n      transform: 'translateX(20px)',\n      color: theme.palette.common.white,\n      '& + .MuiSwitch-track': {\n        backgroundColor: theme.palette.success.main,\n        opacity: 1,\n        border: 0,\n      },\n      '&.Mui-disabled + .MuiSwitch-track': {\n        opacity: 0.5,\n      },\n    },\n    '&.Mui-focusVisible .MuiSwitch-thumb': {\n      color: theme.palette.success.main,\n      border: `6px solid ${theme.palette.common.white}`,\n    },\n    '&.Mui-disabled .MuiSwitch-thumb': {\n      color: theme.palette.grey[300],\n    },\n    '&.Mui-disabled + .MuiSwitch-track': {\n      opacity: 0.5,\n      backgroundColor: theme.palette.grey[300],\n    },\n  },\n  '& .MuiSwitch-thumb': {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  '& .MuiSwitch-track': {\n    borderRadius: 24 / 2,\n    backgroundColor: theme.palette.grey[300],\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: 500,\n    }),\n  },\n}));\n\nexport const Switch: React.FC<SwitchProps> = ({\n  label,\n  labelPosition = 'right',\n  ...props\n}) => {\n  const switchComponent = <StyledSwitch {...props} />;\n\n  if (!label) {\n    return switchComponent;\n  }\n\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n      {labelPosition === 'left' && <span>{label}</span>}\n      {switchComponent}\n      {labelPosition === 'right' && <span>{label}</span>}\n    </div>\n  );\n};\n\n","import React from 'react';\nimport MuiCheckbox, { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport { styled } from '@mui/material/styles';\nimport FormControlLabel from '@mui/material/FormControlLabel';\n\n/**\n * **Prop-forwarding note.**\n *\n * When `label` is absent, all props (including `sx` and `className`) are\n * forwarded directly to the inner `<Checkbox>` element.\n *\n * When `label` is provided, the component renders:\n * ```\n * <FormControlLabel control={<Checkbox {...props} />} label={label} />\n * ```\n * `sx` and `className` from the spread go to the inner `<Checkbox>`, NOT to\n * the outer `<FormControlLabel>`. If you need to style the label wrapper,\n * use MUI's `FormControlLabel` directly and pass `<Checkbox />` as `control`.\n */\nexport interface CheckboxProps extends Omit<MuiCheckboxProps, 'color'> {\n  label?: string;\n  labelPosition?: 'left' | 'right';\n}\n\nconst StyledCheckbox = styled(MuiCheckbox)(({ theme }) => ({\n  color: theme.palette.grey[400],\n  '&.Mui-checked': {\n    color: theme.palette.primary.main,\n  },\n  '&.MuiCheckbox-indeterminate': {\n    color: theme.palette.primary.main,\n  },\n  '&.Mui-disabled': {\n    color: theme.palette.grey[300],\n  },\n  '&:hover': {\n    backgroundColor: theme.palette.background.selected,\n  },\n  '&.Mui-focusVisible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: 2,\n  },\n}));\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  labelPosition = 'right',\n  ...props\n}) => {\n  const checkboxComponent = <StyledCheckbox {...props} />;\n\n  if (!label) {\n    return checkboxComponent;\n  }\n\n  const labelPlacementMap: Record<string, 'start' | 'end' | 'top' | 'bottom'> = {\n    left: 'start',\n    right: 'end',\n  };\n\n  return (\n    <FormControlLabel\n      control={checkboxComponent}\n      label={label}\n      labelPlacement={labelPlacementMap[labelPosition] || 'end'}\n    />\n  );\n};\n\n","import React from 'react';\nimport MuiRadio, { RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled } from '@mui/material/styles';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport RadioGroup from '@mui/material/RadioGroup';\n\nexport interface RadioProps extends Omit<MuiRadioProps, 'color'> {\n  label?: string;\n  labelPosition?: 'left' | 'right';\n}\n\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n  color: theme.palette.grey[400],\n  '&.Mui-checked': {\n    color: theme.palette.primary.main,\n  },\n  '&.Mui-disabled': {\n    color: theme.palette.grey[300],\n  },\n  '&:hover': {\n    backgroundColor: theme.palette.background.selected,\n  },\n  '&.Mui-focusVisible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: 2,\n  },\n}));\n\nexport const Radio: React.FC<RadioProps> = ({\n  label,\n  labelPosition = 'right',\n  ...props\n}) => {\n  const radioComponent = <StyledRadio {...props} />;\n\n  if (!label) {\n    return radioComponent;\n  }\n\n  const labelPlacementMap: Record<string, 'start' | 'end' | 'top' | 'bottom'> = {\n    left: 'start',\n    right: 'end',\n  };\n\n  return (\n    <FormControlLabel\n      control={radioComponent}\n      label={label}\n      labelPlacement={labelPlacementMap[labelPosition] || 'end'}\n    />\n  );\n};\n\nexport { RadioGroup };\n\n","import React from 'react';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\n\n/** Props for the DateRangePicker component. */\nexport interface DateRangePickerProps {\n  /** The selected start date, or null if unset. */\n  startDate: Date | null;\n  /** The selected end date, or null if unset. */\n  endDate: Date | null;\n  /** Callback fired when the start date changes. */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when the end date changes. */\n  onEndDateChange: (date: Date | null) => void;\n  /** Earliest selectable date for both pickers. */\n  minDate?: Date;\n  /** Latest selectable date for both pickers. */\n  maxDate?: Date;\n  /** If true, both date pickers are disabled. @default false */\n  disabled?: boolean;\n  /** Size of the text field inputs. @default 'small' */\n  size?: 'small' | 'medium';\n}\n\nexport const DateRangePicker: React.FC<DateRangePickerProps> = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  minDate,\n  maxDate,\n  disabled = false,\n  size = 'small',\n}) => {\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n        <DatePicker\n          label=\"Start date\"\n          value={startDate}\n          onChange={onStartDateChange}\n          minDate={minDate}\n          maxDate={endDate ?? maxDate}\n          disabled={disabled}\n          slotProps={{\n            textField: { size },\n          }}\n        />\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          –\n        </Typography>\n        <DatePicker\n          label=\"End date\"\n          value={endDate}\n          onChange={onEndDateChange}\n          minDate={startDate ?? minDate}\n          maxDate={maxDate}\n          disabled={disabled}\n          slotProps={{\n            textField: { size },\n          }}\n        />\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"mappings":"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","names":["CopyableField","default","React","useEffect","useState","Box","useEffect","jsx","useState","useEffect","Box","React","SearchField","default","styled","jsx","styled","jsx","jsxs","styled","jsx","styled","FormControlLabel","jsx","jsx","jsxs"]}

package/dist/chunk-3KCXCVOX.mjs

@@ -0,0 +1,411 @@
+// src/components/third-party/CodeEditor.tsx
+import { useCallback, useEffect, useState, useRef } from "react";
+import Editor from "@monaco-editor/react";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { jsx, jsxs } from "react/jsx-runtime";
+var configureTypeScript = (monaco) => {
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.ESNext,
+    noEmit: false,
+    lib: ["es2020", "dom"],
+    noUnusedLocals: false,
+    noUnusedParameters: false,
+    noImplicitAny: false,
+    noImplicitReturns: false,
+    noFallthroughCasesInSwitch: false,
+    // Treat every file as a module so top-level declarations don't clash
+    // across files in the workspace (prevents false "Cannot redeclare" errors).
+    moduleDetection: 3
+    // ts.ModuleDetectionKind.Force
+  });
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: false,
+    noSuggestionDiagnostics: true,
+    diagnosticCodesToIgnore: [
+      6133,
+      // 'x' is declared but its value is never read
+      6196
+      // 'x' is declared but its value is never read (different variant)
+    ]
+  });
+};
+var CodeEditor = ({
+  value,
+  onChange,
+  language = "typescript",
+  height = "400px",
+  minHeight,
+  theme: themeProp,
+  lineNumbers = "on",
+  options,
+  onMount,
+  onValidate,
+  editorRef,
+  monacoRef,
+  onFullscreenChange,
+  containerProps,
+  typeDefinitions,
+  externalModelManagement = false
+}) => {
+  const [isEditorReady, setIsEditorReady] = useState(false);
+  const [validationErrors, setValidationErrors] = useState([]);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [tsCode, setTsCode] = useState(value);
+  const [actualHeight, setActualHeight] = useState(
+    typeof height === "number" ? `${height}px` : height
+  );
+  const [showProblems, setShowProblems] = useState(false);
+  const [hasUserToggledProblems, setHasUserToggledProblems] = useState(false);
+  useEffect(() => {
+    if (hasUserToggledProblems) return;
+    if (validationErrors.length > 0) {
+      setShowProblems(true);
+    } else {
+      setShowProblems(false);
+    }
+  }, [validationErrors, hasUserToggledProblems]);
+  const internalEditorRef = useRef(null);
+  const internalMonacoRef = useRef(null);
+  const finalEditorRef = editorRef || internalEditorRef;
+  const finalMonacoRef = monacoRef || internalMonacoRef;
+  useEffect(() => {
+    if (isFullscreen) {
+      setActualHeight("calc(100vh - 80px)");
+    } else {
+      setActualHeight(typeof height === "number" ? `${height}px` : height);
+    }
+  }, [height, isFullscreen]);
+  const toggleFullscreen = useCallback(() => {
+    const newFullscreenState = !isFullscreen;
+    setIsFullscreen(newFullscreenState);
+    if (onFullscreenChange) {
+      onFullscreenChange(newFullscreenState);
+    }
+  }, [isFullscreen, onFullscreenChange]);
+  const gotoMarker = useCallback(
+    (marker) => {
+      const ed = finalEditorRef?.current;
+      if (!ed) return;
+      const position = { lineNumber: marker.startLineNumber, column: marker.startColumn || 1 };
+      try {
+        ed.revealPositionInCenter(position);
+        ed.setPosition(position);
+        ed.focus();
+      } catch (e) {
+        console.error("CodeEditor: Failed to navigate to marker", e);
+      }
+    },
+    [finalEditorRef]
+  );
+  useEffect(() => {
+    if (!isFullscreen) return;
+    function escapeHandler(event) {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsFullscreen(false);
+        if (onFullscreenChange) {
+          onFullscreenChange(false);
+        }
+      }
+    }
+    window.addEventListener("keydown", escapeHandler, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", escapeHandler, { capture: true });
+    };
+  }, [isFullscreen, onFullscreenChange]);
+  const handleEditorDidMount = useCallback(
+    (editor, monaco) => {
+      console.log("CodeEditor: onMount called", { editor: !!editor, monaco: !!monaco });
+      try {
+        configureTypeScript(monaco);
+      } catch (e) {
+        console.error("CodeEditor: Failed to configure TypeScript", e);
+      }
+      if (finalEditorRef) {
+        finalEditorRef.current = editor;
+      }
+      if (finalMonacoRef) {
+        finalMonacoRef.current = monaco;
+      }
+      setIsEditorReady(true);
+      console.log("CodeEditor: Editor ready");
+      try {
+        editor.addCommand(monaco.KeyCode.Escape, () => {
+          if (isFullscreen) {
+            setIsFullscreen(false);
+            if (onFullscreenChange) {
+              onFullscreenChange(false);
+            }
+            return true;
+          }
+          return false;
+        });
+        editor.onDidChangeModelDecorations(() => {
+          const model2 = editor.getModel();
+          if (model2 && onValidate) {
+            const markers = monaco.editor.getModelMarkers({ resource: model2.uri });
+            onValidate(markers);
+            setValidationErrors(markers);
+          }
+        });
+        const model = editor.getModel();
+        if (model && onValidate) {
+          const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+          onValidate(markers);
+          setValidationErrors(markers);
+        }
+      } catch (e) {
+        console.error("CodeEditor: Error setting up editor callbacks", e);
+      }
+      if (onMount) {
+        try {
+          onMount(editor, monaco);
+        } catch (e) {
+          console.error("CodeEditor: Error in custom onMount", e);
+        }
+      }
+    },
+    [isFullscreen, onFullscreenChange, onValidate, onMount, finalEditorRef, finalMonacoRef]
+  );
+  useEffect(() => {
+    if (!isEditorReady || !finalMonacoRef?.current || !typeDefinitions) return;
+    const monaco = finalMonacoRef.current;
+    const definitions = Array.isArray(typeDefinitions) ? typeDefinitions : [typeDefinitions];
+    const uris = [];
+    try {
+      definitions.forEach((def, index) => {
+        if (def && def.trim()) {
+          const uri = `ts:filename/custom-types-${index}.d.ts`;
+          uris.push(uri);
+          monaco.languages.typescript.typescriptDefaults.addExtraLib(def, uri);
+        }
+      });
+    } catch (error) {
+      console.error("CodeEditor: Error adding type definitions:", error);
+    }
+  }, [isEditorReady, finalMonacoRef, typeDefinitions]);
+  const handleCodeChange = (newValue) => {
+    const valueStr = newValue || "";
+    setTsCode(valueStr);
+    onChange(valueStr);
+  };
+  useEffect(() => {
+    if (externalModelManagement) return;
+    if (value !== tsCode) {
+      setTsCode(value);
+      if (isEditorReady && finalEditorRef?.current) {
+        const editor = finalEditorRef.current;
+        const currentValue = editor.getValue();
+        if (currentValue !== value) {
+          editor.setValue(value);
+        }
+      }
+    }
+  }, [value, tsCode, isEditorReady, finalEditorRef, externalModelManagement]);
+  const editorMinHeight = minHeight ? typeof minHeight === "number" ? `${minHeight}px` : minHeight : "400px";
+  const defaultOptions = {
+    lineNumbers,
+    minimap: { enabled: false },
+    readOnly: false,
+    wordWrap: "on",
+    fontSize: 14,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, "source-code-pro", monospace',
+    automaticLayout: true,
+    scrollBeyondLastLine: false,
+    theme: themeProp || "vs",
+    ...options
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: isFullscreen ? "100vh" : "100%",
+        minHeight: isFullscreen ? "100vh" : editorMinHeight,
+        position: isFullscreen ? "fixed" : "relative",
+        top: isFullscreen ? 0 : "auto",
+        left: isFullscreen ? 0 : "auto",
+        right: isFullscreen ? 0 : "auto",
+        bottom: isFullscreen ? 0 : "auto",
+        zIndex: isFullscreen ? 9999 : "auto",
+        bgcolor: "background.paper",
+        pt: isFullscreen ? "80px" : 0,
+        // Add padding top in fullscreen to account for header (64px) + spacing (16px)
+        px: isFullscreen ? 2 : 0,
+        pb: isFullscreen ? 2 : 0,
+        overflow: isFullscreen ? "hidden" : "visible"
+      },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: {
+            flex: 1,
+            border: 1,
+            borderColor: validationErrors.length > 0 ? "error.main" : "divider",
+            borderRadius: 1,
+            minHeight: editorMinHeight,
+            overflow: "hidden",
+            position: "relative",
+            display: "flex",
+            flexDirection: "column"
+          },
+          ...containerProps,
+          children: [
+            /* @__PURE__ */ jsx(Tooltip, { title: isFullscreen ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                onClick: toggleFullscreen,
+                size: "small",
+                sx: {
+                  position: isFullscreen ? "fixed" : "absolute",
+                  top: isFullscreen ? 72 : 8,
+                  // Position below header in fullscreen mode (header is ~64px)
+                  right: isFullscreen ? 16 : 8,
+                  zIndex: 1e4,
+                  // Ensure it's above other elements
+                  bgcolor: "rgba(255, 255, 255, 0.7)",
+                  "&:hover": {
+                    bgcolor: "rgba(255, 255, 255, 0.9)"
+                  },
+                  boxShadow: 1
+                },
+                children: isFullscreen ? /* @__PURE__ */ jsx(FullscreenExitIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(FullscreenIcon, { fontSize: "small" })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  minHeight: editorMinHeight,
+                  position: "relative",
+                  height: isFullscreen ? "100%" : actualHeight
+                },
+                children: /* @__PURE__ */ jsx(
+                  Editor,
+                  {
+                    height: "100%",
+                    defaultLanguage: language,
+                    defaultValue: value,
+                    value: tsCode,
+                    onChange: handleCodeChange,
+                    onMount: handleEditorDidMount,
+                    theme: themeProp || "vs",
+                    options: defaultOptions,
+                    loading: /* @__PURE__ */ jsx(Box, { sx: { p: 2, textAlign: "center" }, children: "Loading Monaco Editor..." }),
+                    beforeMount: (monaco) => {
+                      console.log("CodeEditor: beforeMount called", { monaco: !!monaco });
+                    }
+                  }
+                )
+              }
+            ),
+            validationErrors.length > 0 && /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  borderTop: 1,
+                  borderColor: "divider",
+                  bgcolor: "background.default",
+                  display: "flex",
+                  flexDirection: "column",
+                  maxHeight: showProblems ? 180 : 40,
+                  minHeight: 40,
+                  transition: "max-height 0.2s ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        px: 1,
+                        py: 0.5,
+                        gap: 1,
+                        borderBottom: showProblems ? "1px solid" : "none",
+                        borderColor: "divider",
+                        fontSize: "0.875rem",
+                        color: "text.secondary"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ErrorOutlineIcon, { color: "error", fontSize: "small" }),
+                        /* @__PURE__ */ jsx(Box, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
+                        /* @__PURE__ */ jsxs(Box, { sx: { ml: 1 }, children: [
+                          validationErrors.length,
+                          " error",
+                          validationErrors.length > 1 ? "s" : ""
+                        ] }),
+                        /* @__PURE__ */ jsx(Box, { sx: { flex: 1 } }),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            size: "small",
+                            "aria-label": "Toggle problems panel",
+                            onClick: () => {
+                              setHasUserToggledProblems(true);
+                              setShowProblems((s) => !s);
+                            },
+                            children: showProblems ? /* @__PURE__ */ jsx(ExpandMoreIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(ExpandLessIcon, { fontSize: "small" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  showProblems && /* @__PURE__ */ jsx(Box, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      onClick: () => gotoMarker(error),
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        px: 1.5,
+                        py: 0.75,
+                        gap: 1,
+                        cursor: "pointer",
+                        "&:hover": { bgcolor: "action.hover" },
+                        borderBottom: "1px dashed",
+                        borderColor: "divider",
+                        fontSize: "0.85rem"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(ErrorOutlineIcon, { color: "error", sx: { fontSize: 18 } }),
+                        /* @__PURE__ */ jsxs(Box, { sx: { color: "text.secondary", width: 64 }, children: [
+                          "Line ",
+                          error.startLineNumber
+                        ] }),
+                        /* @__PURE__ */ jsx(Box, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
+                      ]
+                    },
+                    `${error.startLineNumber}-${error.startColumn}-${index}`
+                  )) })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+
+export {
+  CodeEditor
+};
+//# sourceMappingURL=chunk-3KCXCVOX.mjs.map