{"mappings":";;;;;;;;;;;;;;;;;;;;AAeA,MAAM,yCAAmB;AAEzB;;;2DAG2D;AAuC3D,MAAM;AA6IN,MAAM;AA+DC,SAAS,0CAAqB,KAA8B;IACjE,IAAI,WAAC,OAAO,gBAAE,YAAY,gBAAE,YAAY,UAAE,MAAM,YAAE,QAAQ,cAAE,UAAU,EAAE,GAAG,YAAW,GAAG;IACzF,IAAI,CAAC,WAAW,WAAW,GAAG,CAAA,GAAA,qBAAO,EAAE;IAEvC,qBACE,gCAAC,CAAA,GAAA,qCAAI;QACF,GAAG,UAAU;QACd,MAAK;QACL,gBAAc;QACd,cAAY,eAAe,eAAe;QAC1C,gBAAc,aAAa;QAC3B,WAAW;QACX,OAAO;YACL,GAAG,MAAM,KAAK;YACd,aAAa;YACb,WAAW;QACb;QACA,SAAS,CAAA;YACP,IAAI,EAAE,SAAS,EACb,WAAW;QAEf;QACA,QAAQ,CAAA;YACN,IAAI,EAAE,SAAS,EACb,WAAW;QAEf;QACA,eAAe,CAAA;YACb,mFAAmF;YACnF,IAAI,SAAS,CAAA,GAAA,gEAAa,EAAE;YAC5B,MAAO,UAAU,WAAW,EAAE,aAAa,IAAI,CAAC,CAAA,GAAA,mDAAU,EAAE,QAC1D,SAAS,OAAO,aAAa;YAG/B,IAAI,WAAW,EAAE,aAAa,EAAE;gBAC9B,EAAE,cAAc;gBAChB,SAAS,OAAO,EAAE;YACpB;QACF;kBACC,CAAC,aAAC,SAAS,EAAC,iBACX,iCAAC;gBACC,gBAAc,aAAa;gBAC3B,gBAAc,aAAa;gBAC3B,gBAAc;gBACd,cAAY,eAAe,eAAe;gBAC1C,WACE,AAAC,CAAA,MAAM,SAAS,IAAI,EAAC,IACrB,MACA,4CACA,CAAA,GAAA,6CAAU,kGAUR;;oBAGH,8BACC,gCAAC;wBACC,SAAS;;oBAgBZ,MAAM,QAAQ;;;;AAKzB","sources":["packages/@react-spectrum/ai/src/PromptFieldContainer.tsx"],"sourcesContent":["import {\n  brand,\n  defaultBrand,\n  defineProperties,\n  outerBorderStops,\n  stops,\n  token\n} from './tokens.macro' with {type: 'macro'};\nimport {color, css, style, StyleString} from '@react-spectrum/s2/style' with {type: 'macro'};\nimport {getEventTarget} from 'react-aria/private/utils/shadowdom/DOMFunctions';\nimport {Group, GroupProps} from 'react-aria-components/Group';\nimport {isFocusable} from 'react-aria/private/utils/isFocusable';\nimport {mergeStyles} from '@react-spectrum/s2/mergeStyles';\nimport {useState} from 'react';\n\nconst STATE_TRANSITION = '700ms cubic-bezier(0.32, 0.72, 0, 1)';\n\n/* The brand color drives the hue of the entire component. Override --brand on\n   the PromptField (or any ancestor) to retheme it — all gradients, shadows, and\n   borders are derived from this hue via OKLCH relative colors in tokens.macro.\n   The default is the fuchsia primary, rgb(236, 105, 255). */\ndefineProperties(`\n  @property --brand {\n    syntax: '<color>';\n    initial-value: ${defaultBrand()};\n    inherits: true;\n  }\n\n  @property --con-hue-opacity {\n    syntax: '<percentage>';\n    initial-value: 0%;\n    inherits: false;\n  }\n\n  @property --bg-stop-1 {\n    syntax: '<color>';\n    initial-value: #0000;\n    inherits: false;\n  }\n\n  @property --bg-stop-2 {\n    syntax: '<color>';\n    initial-value: #0000;\n    inherits: false;  \n  }\n\n  @property --bg-stop-3 {\n    syntax: '<color>';\n    initial-value: #0000;\n    inherits: false;\n  }\n\n  @property --bg-stop-4 {\n    syntax: '<color>';\n    initial-value: #0000;\n    inherits: false;\n  }\n`);\n\nconst containerBackground = css(`\n  transition: --con-hue-opacity ${STATE_TRANSITION}, --bg-stop-1 ${STATE_TRANSITION}, --bg-stop-2 ${STATE_TRANSITION}, --bg-stop-3 ${STATE_TRANSITION}, --bg-stop-4 ${STATE_TRANSITION}, box-shadow ${STATE_TRANSITION};\n  \n  background:\n    linear-gradient(\n      to bottom,\n      light-dark(rgb(255 255 255 / 75%), rgb(0 0 0 / 40%)) 0% 37%,\n      light-dark(rgb(255 255 255 / 15%), rgb(0 0 0 / 12%)) 83% 100%\n    ),\n    radial-gradient(\n      50% 50% at -20% 100%,\n      rgb(from ${token('container.gradient.con-hue.generating.stop-3')} r g b / var(--con-hue-opacity)),\n      transparent\n    ),\n    radial-gradient(\n      70% 60% at 5% 80%,\n      rgb(from ${token('container.gradient.con-hue.generating.stop-2')} r g b / var(--con-hue-opacity)),\n      transparent\n    ),\n    radial-gradient(\n      70% 50% at 40% 80%,\n      rgb(from ${token('container.gradient.con-hue.generating.stop-1')} r g b / var(--con-hue-opacity)),\n      transparent\n    ),\n    radial-gradient(\n      circle at right bottom,\n      var(--bg-stop-1) 0%,\n      var(--bg-stop-2) 35%,\n      var(--bg-stop-3) 82%,\n      var(--bg-stop-4) 100%\n    );\n\n  --border-color: ${token(`container.border.default`)};\n  --inset-shadow-color: ${color('transparent-white-50')};\n  --drop-shadow-color: light-dark(${brand(0.5826, 0.2265, -0.4, 0.05)}, ${brand(0.6617, 0.2508, -0.5, 0.05)});\n  --prominent-outline-glow: ;\n\n  box-shadow:\n    var(--prominent-outline-glow)\n    inset 0 0 0 1px var(--border-color),\n    inset 0 6px 15px 0 var(--inset-shadow-color),\n    inset 0 0 0 0 transparent, /* placeholder for generating state so transition is smooth */\n    inset 0 -5px 21.6px 0 ${color('transparent-white-50')},\n    inset 0 24px 32px 0 ${color('transparent-white-50')},\n    0 -3px 10px 1px var(--drop-shadow-color);\n\n  &[data-variant=prominent] {\n    /* trailing comma is intentional so it can be interpolated above */\n    --prominent-outline-glow:\n      0 20px 20px -24px ${token('outline-glow.gradient.generating.stop-3')},\n      inset 0 -20px 20px -24px ${token('outline-glow.gradient.generating.stop-3')},;\n    &[data-focused] {\n      --prominent-outline-glow: 0 20px 20px -24px transparent, inset 0 -20px 20px -24px transparent,;\n    }\n  }\n\n  &[data-state=idle] {\n    &[data-variant=balanced] {\n      ${stops('idle', 'default', 'balanced')}\n\n      &[data-hovered] {\n        ${stops('idle', 'hover', 'balanced')}\n      }\n    }\n\n    &[data-variant=prominent] {\n      ${stops('idle', 'default', 'prominent')}\n\n      &[data-hovered] {\n        ${stops('idle', 'hover', 'prominent')}\n      }\n    }\n\n    &[data-variant=subtle] {\n      --con-hue-opacity: 0%;\n      --bg-stop-1: light-dark(white, ${color('gray-75')});\n      --bg-stop-2: light-dark(white, ${color('gray-75')});\n      --bg-stop-3: light-dark(white, ${color('gray-75')});\n      --bg-stop-4: light-dark(white, ${color('gray-75')});\n      --border-color: ${token(`container.border.focus`)};\n      --drop-shadow-color: transparent;\n\n      &[data-hovered] {\n        ${stops('idle', 'hover', 'subtle')}\n        --border-color: ${token(`container.border.default`)};\n        --drop-shadow-color: light-dark(${brand(0.5826, 0.2265, -0.4, 0.05)}, ${brand(0.6617, 0.2508, -0.5, 0.05)});\n      }\n    }\n\n    &[data-focused][data-focused] {\n      --con-hue-opacity: 0%;\n      --bg-stop-1: light-dark(white, ${color('gray-75')});\n      --bg-stop-2: light-dark(white, ${color('gray-75')});\n      --bg-stop-3: light-dark(white, ${color('gray-75')});\n      --bg-stop-4: light-dark(white, ${color('gray-75')});\n      --border-color: ${token(`container.border.focus`)};\n      --inset-shadow-color: transparent;\n      --drop-shadow-color: transparent;\n    }\n  }\n\n  &[data-state=generating] {\n    box-shadow:\n      var(--prominent-outline-glow)\n      inset 0 0 0 1px var(--border-color),\n      inset 0 6px 15px 0 var(--inset-shadow-color),\n      inset 0 -32px 100px -50px ${token('container.color.inner-shadow.generating')},\n      inset 0 -5px 21.6px 0 ${color('transparent-white-50')},\n      inset 0 24px 32px 0 ${color('transparent-white-50')},\n      0 -3px 10px 1px var(--drop-shadow-color),\n      0 6px 83px rgb(from ${token('outer-border.gradient.ob-spread-shadow.generating.stop-3')} r g b / var(--spread-shadow-opacity));\n\n    &[data-variant=balanced] {\n      --spread-shadow-opacity: ${token('outer-border.opacity.spread-bg-balanced')}%;\n      ${stops('generating', 'default', 'balanced')}\n\n      &[data-hovered] {\n        ${stops('generating', 'hover', 'balanced')}\n      }\n    }\n\n    &[data-variant=prominent] {\n      --spread-shadow-opacity: ${token('outer-border.opacity.spread-bg-prominent')}%;\n      ${stops('generating', 'default', 'prominent')}\n\n      &[data-hovered] {\n        ${stops('generating', 'hover', 'prominent')}\n      }\n    }\n\n    &[data-variant=subtle] {\n      --spread-shadow-opacity: ${token('outer-border.opacity.spread-bg-subtle')}%;\n      ${stops('generating', 'default', 'subtle')}\n\n      &[data-hovered] {\n        ${stops('generating', 'hover', 'subtle')}\n      }\n    }\n  }\n`);\n\nconst outerBorder = css(`\n  --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.default')};\n\n  padding: 6px;\n  border-radius: calc(24px + 6px);\n  transition: --bg-stop-1 ${STATE_TRANSITION}, --bg-stop-2 ${STATE_TRANSITION}, --bg-stop-3 ${STATE_TRANSITION}, box-shadow ${STATE_TRANSITION};\n  background: linear-gradient(\n    to right,\n    var(--bg-stop-1) 0%,\n    var(--bg-stop-2) 37%,\n    var(--bg-stop-3) 77%\n  );\n\n  box-shadow:\n    0 2px 4px var(--outer-drop-shadow-color),\n    0 6px 16px -10px var(--outer-border-hue);\n\n  &[data-variant=balanced] {\n    ${outerBorderStops('balanced')}\n  }\n  \n  &[data-variant=prominent] {\n    ${outerBorderStops('prominent')}\n\n    &[data-state=idle][data-focused] {\n      --bg-stop-1: ${token('outer-border.gradient.ob-border.stop-1')};\n      --bg-stop-2: ${token('outer-border.gradient.ob-border.stop-1')};\n      --bg-stop-3: ${token('outer-border.gradient.ob-border.stop-1')};\n    }\n  }\n\n  &[data-variant=subtle] {\n    --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.subtle')};\n    --outer-border-hue: transparent;\n    --bg-stop-1: ${token('outer-border.gradient.ob-border.stop-1')};\n    --bg-stop-2: ${token('outer-border.gradient.ob-border.stop-1')};\n    --bg-stop-3: ${token('outer-border.gradient.ob-border.stop-1')};\n\n    &[data-hovered] {\n      --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.default')};\n      ${outerBorderStops('subtle')}\n    }\n  }\n\n  &[data-state=idle][data-focused] {\n    --bg-stop-1: ${token('outer-border.gradient.ob-border.stop-1')};\n    --bg-stop-2: ${token('outer-border.gradient.ob-border.stop-1')};\n    --bg-stop-3: ${token('outer-border.gradient.ob-border.stop-1')};\n    --outer-border-hue: transparent;\n    --outer-drop-shadow-color: ${token('outer-border.color.drop-shadow.ob-border.focus')};\n  }\n`);\n\ninterface PropFieldContainerProps extends Omit<GroupProps, 'children'> {\n  children: React.ReactNode;\n  variant: 'balanced' | 'prominent' | 'subtle';\n  isGenerating: boolean;\n  isDropTarget: boolean;\n  brandColor?: string;\n  styles?: StyleString;\n  inputRef: React.RefObject<HTMLDivElement | null>;\n}\n\nexport function PromptFieldContainer(props: PropFieldContainerProps) {\n  let {variant, isGenerating, isDropTarget, styles, inputRef, brandColor, ...otherProps} = props;\n  let [isFocused, setFocused] = useState(false);\n\n  return (\n    <Group\n      {...otherProps}\n      role=\"group\"\n      data-variant={variant}\n      data-state={isGenerating ? 'generating' : 'idle'}\n      data-focused={isFocused || undefined}\n      className={outerBorder}\n      style={{\n        ...props.style,\n        // @ts-ignore\n        '--brand': brandColor\n      }}\n      onFocus={e => {\n        if (e.isTrusted) {\n          setFocused(true);\n        }\n      }}\n      onBlur={e => {\n        if (e.isTrusted) {\n          setFocused(false);\n        }\n      }}\n      onPointerDown={e => {\n        // If not clicking on something focusable within the prompt field, focus the input.\n        let target = getEventTarget(e) as Element | null;\n        while (target && target !== e.currentTarget && !isFocusable(target)) {\n          target = target.parentElement;\n        }\n\n        if (target === e.currentTarget) {\n          e.preventDefault();\n          inputRef.current?.focus();\n        }\n      }}>\n      {({isHovered}) => (\n        <div\n          data-hovered={isHovered || undefined}\n          data-focused={isFocused || undefined}\n          data-variant={variant}\n          data-state={isGenerating ? 'generating' : 'idle'}\n          className={\n            (props.className || '') +\n            ' ' +\n            containerBackground +\n            mergeStyles(\n              style({\n                display: 'flex',\n                flexDirection: 'column',\n                gap: 16,\n                padding: 16,\n                cursor: 'text',\n                borderRadius: '[24px]',\n                position: 'relative'\n              }),\n              styles\n            )\n          }>\n          {isDropTarget && (\n            <div\n              className={style({\n                pointerEvents: 'none',\n                position: 'absolute',\n                top: 0,\n                left: 0,\n                width: '100%',\n                height: '100%',\n                boxSizing: 'border-box',\n                borderRadius: 'inherit',\n                backgroundColor: 'blue-800/10',\n                borderStyle: 'solid',\n                borderWidth: 2,\n                borderColor: 'blue-800'\n              })}\n            />\n          )}\n          {props.children}\n        </div>\n      )}\n    </Group>\n  );\n}\n"],"names":[],"version":3,"file":"PromptFieldContainer.cjs.map"}