@spark-ui/components 17.10.5-beta.0 → 17.11.1

package/dist/textarea/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/textarea/TextareaClearButton.tsx","../../src/textarea/TextareaGroup.tsx","../../src/textarea/TextareaLeadingIcon.tsx","../../src/textarea/TextareaTrailingIcon.tsx","../../src/textarea/Textarea.tsx","../../src/textarea/index.ts"],"sourcesContent":["import { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { InputGroup } from '../input'\n\nexport interface TextareaClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button to clear the textarea value. Renders a <button> element. */\nexport const TextareaClearButton = (props: TextareaClearButtonProps) => {\n  return (\n    <InputGroup.ClearButton inline data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n  )\n}\n\nTextareaClearButton.id = InputGroup.ClearButton.id\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n","import { InputGroup, InputGroupProps } from '../input'\n\nexport type TextareaGroupProps = InputGroupProps\n\nexport const TextareaGroup = (props: TextareaGroupProps) => {\n  return <InputGroup {...props} />\n}\n\nTextareaGroup.displayName = 'TextareaGroup'\n","import { InputGroup, InputLeadingIconProps } from '../input'\n\nexport type TextareaLeadingIconProps = InputLeadingIconProps\n\n/** An icon displayed before the textarea text. Renders a <div> element. */\nexport const TextareaLeadingIcon = (props: InputLeadingIconProps) => {\n  return <InputGroup.LeadingIcon data-spark-component=\"textarea-group-leading-icon\" {...props} />\n}\n\nTextareaLeadingIcon.id = InputGroup.LeadingIcon.id\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\n","import { InputGroup, InputTrailingIconProps } from '../input'\n\nexport type TextareaTrailingIconProps = InputTrailingIconProps\n\n/** An icon displayed after the textarea text. Renders a <div> element. */\nexport const TextareaTrailingIcon = (props: InputTrailingIconProps) => {\n  return <InputGroup.TrailingIcon data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n}\n\nTextareaTrailingIcon.id = InputGroup.TrailingIcon.id\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nimport { Input, InputProps } from '../input'\n\ntype TextareaPrimitiveProps = ComponentPropsWithoutRef<'textarea'>\n\nexport interface TextareaProps extends TextareaPrimitiveProps, Pick<InputProps, 'onValueChange'> {\n  isResizable?: boolean\n  ref?: Ref<HTMLTextAreaElement>\n}\n\nconst Root = ({\n  className,\n  disabled,\n  rows = 1,\n  isResizable = true,\n  ref,\n  onValueChange,\n  ...others\n}: PropsWithChildren<TextareaProps>) => {\n  return (\n    <Input\n      className={cx(className, 'py-sz-10 rounded-xl!', isResizable ? 'resize-y' : 'resize-none')}\n      data-spark-component=\"textarea\"\n      disabled={disabled}\n      asChild\n      onValueChange={onValueChange}\n    >\n      <textarea ref={ref} rows={rows} {...others} />\n    </Input>\n  )\n}\n\n/**\n * A multi-line text input field that allows users to enter longer text content.\n */\nexport const Textarea = Object.assign(Root, {\n  id: Input.id,\n})\n\nRoot.displayName = 'Textarea'\n","import { TextareaClearButton } from './TextareaClearButton'\nimport { TextareaGroup as Root } from './TextareaGroup'\nimport { TextareaLeadingIcon } from './TextareaLeadingIcon'\nimport { TextareaTrailingIcon } from './TextareaTrailingIcon'\n\nexport * from './Textarea'\n\n/**\n * A wrapper component that combines a Textarea with icons and interactive elements\n * to create enhanced text input patterns with visual indicators and clear functionality.\n */\nexport const TextareaGroup: typeof Root & {\n  LeadingIcon: typeof TextareaLeadingIcon\n  TrailingIcon: typeof TextareaTrailingIcon\n  ClearButton: typeof TextareaClearButton\n} = Object.assign(Root, {\n  LeadingIcon: TextareaLeadingIcon,\n  TrailingIcon: TextareaTrailingIcon,\n  ClearButton: TextareaClearButton,\n})\n\nTextareaGroup.displayName = 'TextareaGroup'\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n\nexport { type TextareaGroupProps } from './TextareaGroup'\nexport { type TextareaLeadingIconProps } from './TextareaLeadingIcon'\nexport { type TextareaTrailingIconProps } from './TextareaTrailingIcon'\nexport { type TextareaClearButtonProps } from './TextareaClearButton'\n"],"mappings":";;;;AAUA,IAAa,KAAuB,MAEhC,kBAAC,EAAW,aAAZ;CAAwB,QAAA;CAAO,wBAAqB;CAA+B,GAAI;CAAS,CAAA;AAIpG,EAAoB,KAAK,EAAW,YAAY,IAChD,EAAoB,cAAc;;;ACblC,IAAa,KAAiB,MACrB,kBAAC,GAAD,EAAY,GAAI,GAAS,CAAA;AAGlC,EAAc,cAAc;;;ACH5B,IAAa,KAAuB,MAC3B,kBAAC,EAAW,aAAZ;CAAwB,wBAAqB;CAA8B,GAAI;CAAS,CAAA;AAGjG,EAAoB,KAAK,EAAW,YAAY,IAChD,EAAoB,cAAc;;;ACLlC,IAAa,KAAwB,MAC5B,kBAAC,EAAW,cAAZ;CAAyB,wBAAqB;CAA+B,GAAI;CAAS,CAAA;AAGnG,EAAqB,KAAK,EAAW,aAAa,IAClD,EAAqB,cAAc;;;ACEnC,IAAM,KAAQ,EACZ,cACA,aACA,UAAO,GACP,iBAAc,IACd,QACA,kBACA,GAAG,QAGD,kBAAC,GAAD;CACE,WAAW,EAAG,GAAW,wBAAwB,IAAc,aAAa,cAAc;CAC1F,wBAAqB;CACX;CACV,SAAA;CACe;WAEf,kBAAC,YAAD;EAAe;EAAW;EAAM,GAAI;EAAU,CAAA;CACxC,CAAA,EAOC,IAAW,OAAO,OAAO,GAAM,EAC1C,IAAI,EAAM,IACX,CAAC;AAEF,EAAK,cAAc;;;AC9BnB,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,aAAa;CACb,cAAc;CACd,aAAa;CACd,CAAC;AAEF,EAAc,cAAc,iBAC5B,EAAoB,cAAc,6BAClC,EAAqB,cAAc,8BACnC,EAAoB,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/textarea/TextareaClearButton.tsx","../../src/textarea/TextareaGroup.tsx","../../src/textarea/TextareaLeadingIcon.tsx","../../src/textarea/TextareaTrailingIcon.tsx","../../src/textarea/Textarea.tsx","../../src/textarea/index.ts"],"sourcesContent":["import { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { InputGroup } from '../input'\n\nexport interface TextareaClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button to clear the textarea value. Renders a <button> element. */\nexport const TextareaClearButton = (props: TextareaClearButtonProps) => {\n  return (\n    <InputGroup.ClearButton inline data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n  )\n}\n\nTextareaClearButton.id = InputGroup.ClearButton.id\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n","import { InputGroup, InputGroupProps } from '../input'\n\nexport type TextareaGroupProps = InputGroupProps\n\nexport const TextareaGroup = (props: TextareaGroupProps) => {\n  return <InputGroup {...props} />\n}\n\nTextareaGroup.displayName = 'TextareaGroup'\n","import { InputGroup, InputLeadingIconProps } from '../input'\n\nexport type TextareaLeadingIconProps = InputLeadingIconProps\n\n/** An icon displayed before the textarea text. Renders a <div> element. */\nexport const TextareaLeadingIcon = (props: InputLeadingIconProps) => {\n  return <InputGroup.LeadingIcon data-spark-component=\"textarea-group-leading-icon\" {...props} />\n}\n\nTextareaLeadingIcon.id = InputGroup.LeadingIcon.id\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\n","import { InputGroup, InputTrailingIconProps } from '../input'\n\nexport type TextareaTrailingIconProps = InputTrailingIconProps\n\n/** An icon displayed after the textarea text. Renders a <div> element. */\nexport const TextareaTrailingIcon = (props: InputTrailingIconProps) => {\n  return <InputGroup.TrailingIcon data-spark-component=\"textarea-group-trailing-icon\" {...props} />\n}\n\nTextareaTrailingIcon.id = InputGroup.TrailingIcon.id\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, PropsWithChildren, Ref } from 'react'\n\nimport { Input, InputProps } from '../input'\n\ntype TextareaPrimitiveProps = ComponentPropsWithoutRef<'textarea'>\n\nexport interface TextareaProps extends TextareaPrimitiveProps, Pick<InputProps, 'onValueChange'> {\n  isResizable?: boolean\n  ref?: Ref<HTMLTextAreaElement>\n}\n\nconst Root = ({\n  className,\n  disabled,\n  rows = 1,\n  isResizable = true,\n  ref,\n  onValueChange,\n  ...others\n}: PropsWithChildren<TextareaProps>) => {\n  return (\n    <Input\n      className={cx(\n        className,\n        'py-[var(--spacing-sz-10)]',\n        isResizable ? 'resize-y' : 'resize-none'\n      )}\n      data-spark-component=\"textarea\"\n      disabled={disabled}\n      asChild\n      onValueChange={onValueChange}\n    >\n      <textarea ref={ref} rows={rows} {...others} />\n    </Input>\n  )\n}\n\n/**\n * A multi-line text input field that allows users to enter longer text content.\n */\nexport const Textarea = Object.assign(Root, {\n  id: Input.id,\n})\n\nRoot.displayName = 'Textarea'\n","import { TextareaClearButton } from './TextareaClearButton'\nimport { TextareaGroup as Root } from './TextareaGroup'\nimport { TextareaLeadingIcon } from './TextareaLeadingIcon'\nimport { TextareaTrailingIcon } from './TextareaTrailingIcon'\n\nexport * from './Textarea'\n\n/**\n * A wrapper component that combines a Textarea with icons and interactive elements\n * to create enhanced text input patterns with visual indicators and clear functionality.\n */\nexport const TextareaGroup: typeof Root & {\n  LeadingIcon: typeof TextareaLeadingIcon\n  TrailingIcon: typeof TextareaTrailingIcon\n  ClearButton: typeof TextareaClearButton\n} = Object.assign(Root, {\n  LeadingIcon: TextareaLeadingIcon,\n  TrailingIcon: TextareaTrailingIcon,\n  ClearButton: TextareaClearButton,\n})\n\nTextareaGroup.displayName = 'TextareaGroup'\nTextareaLeadingIcon.displayName = 'TextareaGroup.LeadingIcon'\nTextareaTrailingIcon.displayName = 'TextareaGroup.TrailingIcon'\nTextareaClearButton.displayName = 'TextareaGroup.ClearButton'\n\nexport { type TextareaGroupProps } from './TextareaGroup'\nexport { type TextareaLeadingIconProps } from './TextareaLeadingIcon'\nexport { type TextareaTrailingIconProps } from './TextareaTrailingIcon'\nexport { type TextareaClearButtonProps } from './TextareaClearButton'\n"],"mappings":";;;;AAUA,IAAa,KAAuB,MAEhC,kBAAC,EAAW,aAAZ;CAAwB,QAAA;CAAO,wBAAqB;CAA+B,GAAI;CAAS,CAAA;AAIpG,EAAoB,KAAK,EAAW,YAAY,IAChD,EAAoB,cAAc;;;ACblC,IAAa,KAAiB,MACrB,kBAAC,GAAD,EAAY,GAAI,GAAS,CAAA;AAGlC,EAAc,cAAc;;;ACH5B,IAAa,KAAuB,MAC3B,kBAAC,EAAW,aAAZ;CAAwB,wBAAqB;CAA8B,GAAI;CAAS,CAAA;AAGjG,EAAoB,KAAK,EAAW,YAAY,IAChD,EAAoB,cAAc;;;ACLlC,IAAa,KAAwB,MAC5B,kBAAC,EAAW,cAAZ;CAAyB,wBAAqB;CAA+B,GAAI;CAAS,CAAA;AAGnG,EAAqB,KAAK,EAAW,aAAa,IAClD,EAAqB,cAAc;;;ACEnC,IAAM,KAAQ,EACZ,cACA,aACA,UAAO,GACP,iBAAc,IACd,QACA,kBACA,GAAG,QAGD,kBAAC,GAAD;CACE,WAAW,EACT,GACA,6BACA,IAAc,aAAa,cAC5B;CACD,wBAAqB;CACX;CACV,SAAA;CACe;WAEf,kBAAC,YAAD;EAAe;EAAW;EAAM,GAAI;EAAU,CAAA;CACxC,CAAA,EAOC,IAAW,OAAO,OAAO,GAAM,EAC1C,IAAI,EAAM,IACX,CAAC;AAEF,EAAK,cAAc;;;AClCnB,IAAa,IAIT,OAAO,OAAO,GAAM;CACtB,aAAa;CACb,cAAc;CACd,aAAa;CACd,CAAC;AAEF,EAAc,cAAc,iBAC5B,EAAoB,cAAc,6BAClC,EAAqB,cAAc,8BACnC,EAAoB,cAAc"}

package/dist/toast/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../button-BaJmiSYq.js`),i=require(`../icon-button-BSVlcyAO.js`);let a=require(`class-variance-authority`),o=require(`react`);o=e.t(o);let s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/toast`),u=require(`@spark-ui/icons/AlertFill`),d=require(`@spark-ui/icons/InfoFill`),f=require(`@spark-ui/icons/ValidFill`),p=require(`@spark-ui/icons/WarningFill`);var m=(0,a.cva)([`gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md`,`absolute right-0 bottom-0 left-auto mr-0`,`bg-clip-padding shadow-md select-none`,`focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none`,`z-[calc(1000-var(--toast-index))]`,`after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']`,`[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]`,`ease-standard [transition-property:opacity,transform]`,`duration-400`,`data-[starting-style]:[transform:translateY(150%)]`,`data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]`,`data-[ending-style]:duration-250`,`data-[ending-style]:opacity-0`,`data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]`,`data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[limited]:opacity-0`],{variants:{design:{filled:``,tinted:``},intent:{success:``,alert:``,error:``,info:``,neutral:``,main:``,support:``,accent:``,surface:``,surfaceInverse:``}},compoundVariants:[{design:`filled`,intent:`success`,class:[`bg-success text-on-success border-success`]},{design:`filled`,intent:`alert`,class:[`bg-alert text-on-alert border-alert`]},{design:`filled`,intent:`error`,class:[`bg-error text-on-error border-error`]},{design:`filled`,intent:`info`,class:[`bg-info text-on-info border-info`]},{design:`filled`,intent:`neutral`,class:[`bg-neutral text-on-neutral border-neutral`]},{design:`filled`,intent:`main`,class:[`bg-main text-on-main border-main`]},{design:`filled`,intent:`support`,class:[`bg-support text-on-support border-support`]},{design:`filled`,intent:`accent`,class:[`bg-accent text-on-accent border-accent`]},{design:`filled`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`filled`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]},{design:`tinted`,intent:`success`,class:[`bg-success-container text-on-success-container border-success`]},{design:`tinted`,intent:`alert`,class:[`bg-alert-container text-on-alert-container border-alert`]},{design:`tinted`,intent:`error`,class:[`bg-error-container text-on-error-container border-error`]},{design:`tinted`,intent:`info`,class:[`bg-info-container text-on-info-container border-info`]},{design:`tinted`,intent:`neutral`,class:[`bg-neutral-container text-on-neutral-container border-neutral`]},{design:`tinted`,intent:`main`,class:[`bg-main-container text-on-main-container border-main`]},{design:`tinted`,intent:`support`,class:[`bg-support-container text-on-support-container border-support`]},{design:`tinted`,intent:`accent`,class:[`bg-accent-container text-on-accent-container border-accent`]},{design:`tinted`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`tinted`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]}],defaultVariants:{design:`filled`,intent:`neutral`}});function h(e){return e===`surfaceInverse`?`surface`:e===`surface`?`surfaceInverse`:e===`error`?`danger`:e}function g(e){return e===`surfaceInverse`?`surfaceInverse`:e===`surface`?`surface`:e===`error`?`danger`:e}var _=(e,{toastDesign:t,toastIntent:n})=>{if(!e)return{};let{design:r,intent:i,className:o,onClick:s,...c}=e;return{design:r??t,intent:i??h(n),className:(0,a.cx)(`ml-auto`,o),onClick:s,...c}},v=(e,t,n)=>({swipeDirection:[`down`,`right`],toast:e,className:(0,a.cx)(m({design:t,intent:n})),style:{"--gap":`var(--spacing-md)`,"--offset-y":`calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))`}});function y(e){switch(e){case`info`:return(0,s.jsx)(d.InfoFill,{});case`success`:return(0,s.jsx)(f.ValidFill,{});case`alert`:return(0,s.jsx)(p.WarningFill,{});case`error`:return(0,s.jsx)(u.AlertFill,{});default:return(0,s.jsx)(d.InfoFill,{})}}function b({toast:e}){let{icon:t,intent:o=`info`,design:u,action:d,isClosable:f,closeLabel:p=`Close`,compact:m=!1}=e.data??{},h=`tinted`,b=d?.close?l.Toast.Close:l.Toast.Action,x=_(d,{toastDesign:h,toastIntent:o}),S=v(e,h,o),C=t??y(o),w=e=>f?(0,s.jsx)(l.Toast.Close,{className:e,render:(0,s.jsx)(i.t,{"aria-label":p,design:h,intent:g(o),size:`md`}),children:(0,s.jsx)(n.t,{children:(0,s.jsx)(c.Close,{})})}):null,T=()=>{let t=e.data?.title??e.title,n=!!(e.data?.description??e.description);return typeof t!=`string`&&t!==void 0?(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`})},E=()=>{let t=e.data?.description??e.description;return t?typeof t==`string`?(0,s.jsx)(l.Toast.Description,{className:`text-body-1`}):(0,s.jsx)(l.Toast.Description,{className:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):null};return(0,s.jsx)(l.Toast.Root,{...S,children:(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`,m?`gap-lg items-center`:`gap-md flex-col`),children:[(0,s.jsxs)(`div`,{className:`gap-lg p-md flex grow items-center`,children:[(0,s.jsx)(n.t,{size:`md`,children:C}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`gap-sm flex flex-col`,m&&`flex-1`,!m&&f&&`pr-3xl`),children:[T(),E()]})]}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`),children:[d&&(0,s.jsx)(b,{render:(0,s.jsx)(r.t,{...x}),children:d.label}),m&&w()]}),!m&&w(`top-md right-md absolute`)]})},e.id)}function x(){let e=l.Toast.useToastManager(),t=o.useCallback(()=>{e.toasts.forEach(({id:t})=>e.close(t))},[e]);return{...e,closeAll:t}}function S(){let{toasts:e}=x();return e.map(e=>(0,s.jsx)(b,{toast:e},e.id))}function C({children:e,limit:t=3,...n}){return(0,s.jsxs)(l.Toast.Provider,{limit:t,...n,children:[(0,s.jsx)(l.Toast.Portal,{children:(0,s.jsx)(l.Toast.Viewport,{className:(0,a.cx)(`z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end`),children:(0,s.jsx)(S,{})})}),e]})}function w({children:e,onClick:n,asChild:r=!1,title:i,description:a,timeout:o=5e3,design:c=`filled`,intent:l=`neutral`,isClosable:u=!0,icon:d,action:f,compact:p,priority:m=`low`}){let h=x(),g=r?t.Slot:`button`;function _(e){n?.(e),h.add({title:i,description:a,timeout:o,priority:m,data:{design:c,intent:l,isClosable:u,...d&&{icon:d},action:f,...p!==void 0&&{compact:p}}})}return(0,s.jsx)(g,{...!r&&{type:`button`},onClick:_,children:e})}var T=l.Toast.createToastManager;exports.ToastProvider=C,exports.ToastTrigger=w,exports.createToastManager=T,exports.useToastManager=x;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../button-Tv2N8_24.js`),i=require(`../icon-button-CTe0v0g7.js`);let a=require(`class-variance-authority`),o=require(`react`);o=e.t(o);let s=require(`react/jsx-runtime`),c=require(`@spark-ui/icons/Close`),l=require(`@base-ui/react/toast`),u=require(`@spark-ui/icons/AlertFill`),d=require(`@spark-ui/icons/InfoFill`),f=require(`@spark-ui/icons/ValidFill`),p=require(`@spark-ui/icons/WarningFill`);var m=(0,a.cva)([`gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md`,`absolute right-0 bottom-0 left-auto mr-0`,`bg-clip-padding shadow-md select-none`,`focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none`,`z-[calc(1000-var(--toast-index))]`,`after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']`,`[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+calc(min(var(--toast-index),10)*-16px)))_scale(calc(max(0,1-(var(--toast-index)*0.1))))]`,`ease-standard [transition-property:opacity,transform]`,`duration-400`,`data-[starting-style]:[transform:translateY(150%)]`,`data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y)))]`,`data-[ending-style]:duration-250`,`data-[ending-style]:opacity-0`,`data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]`,`data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]`,`data-[limited]:opacity-0`],{variants:{design:{filled:``,tinted:``},intent:{success:``,alert:``,error:``,info:``,neutral:``,main:``,support:``,accent:``,surface:``,surfaceInverse:``}},compoundVariants:[{design:`filled`,intent:`success`,class:[`bg-success text-on-success border-success`]},{design:`filled`,intent:`alert`,class:[`bg-alert text-on-alert border-alert`]},{design:`filled`,intent:`error`,class:[`bg-error text-on-error border-error`]},{design:`filled`,intent:`info`,class:[`bg-info text-on-info border-info`]},{design:`filled`,intent:`neutral`,class:[`bg-neutral text-on-neutral border-neutral`]},{design:`filled`,intent:`main`,class:[`bg-main text-on-main border-main`]},{design:`filled`,intent:`support`,class:[`bg-support text-on-support border-support`]},{design:`filled`,intent:`accent`,class:[`bg-accent text-on-accent border-accent`]},{design:`filled`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`filled`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]},{design:`tinted`,intent:`success`,class:[`bg-success-container text-on-success-container border-success`]},{design:`tinted`,intent:`alert`,class:[`bg-alert-container text-on-alert-container border-alert`]},{design:`tinted`,intent:`error`,class:[`bg-error-container text-on-error-container border-error`]},{design:`tinted`,intent:`info`,class:[`bg-info-container text-on-info-container border-info`]},{design:`tinted`,intent:`neutral`,class:[`bg-neutral-container text-on-neutral-container border-neutral`]},{design:`tinted`,intent:`main`,class:[`bg-main-container text-on-main-container border-main`]},{design:`tinted`,intent:`support`,class:[`bg-support-container text-on-support-container border-support`]},{design:`tinted`,intent:`accent`,class:[`bg-accent-container text-on-accent-container border-accent`]},{design:`tinted`,intent:`surface`,class:[`bg-surface text-on-surface border-surface`]},{design:`tinted`,intent:`surfaceInverse`,class:[`bg-surface-inverse text-on-surface-inverse border-surface-inverse`]}],defaultVariants:{design:`filled`,intent:`neutral`}});function h(e){return e===`surfaceInverse`?`surface`:e===`surface`?`surfaceInverse`:e===`error`?`danger`:e}function g(e){return e===`surfaceInverse`?`surfaceInverse`:e===`surface`?`surface`:e===`error`?`danger`:e}var _=(e,{toastDesign:t,toastIntent:n})=>{if(!e)return{};let{design:r,intent:i,className:o,onClick:s,...c}=e;return{design:r??t,intent:i??h(n),className:(0,a.cx)(`ml-auto`,o),onClick:s,...c}},v=(e,t,n)=>({swipeDirection:[`down`,`right`],toast:e,className:(0,a.cx)(m({design:t,intent:n})),style:{"--gap":`var(--spacing-md)`,"--offset-y":`calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))`}});function y(e){switch(e){case`info`:return(0,s.jsx)(d.InfoFill,{});case`success`:return(0,s.jsx)(f.ValidFill,{});case`alert`:return(0,s.jsx)(p.WarningFill,{});case`error`:return(0,s.jsx)(u.AlertFill,{});default:return(0,s.jsx)(d.InfoFill,{})}}function b({toast:e}){let{icon:t,intent:o=`info`,design:u,action:d,isClosable:f,closeLabel:p=`Close`,compact:m=!1}=e.data??{},h=`tinted`,b=d?.close?l.Toast.Close:l.Toast.Action,x=_(d,{toastDesign:h,toastIntent:o}),S=v(e,h,o),C=t??y(o),w=e=>f?(0,s.jsx)(l.Toast.Close,{className:e,render:(0,s.jsx)(i.t,{"aria-label":p,design:h,intent:g(o),size:`md`}),children:(0,s.jsx)(n.t,{children:(0,s.jsx)(c.Close,{})})}):null,T=()=>{let t=e.data?.title??e.title,n=!!(e.data?.description??e.description);return typeof t!=`string`&&t!==void 0?(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):(0,s.jsx)(l.Toast.Title,{className:n?`text-headline-2`:`text-body-1`})},E=()=>{let t=e.data?.description??e.description;return t?typeof t==`string`?(0,s.jsx)(l.Toast.Description,{className:`text-body-1`}):(0,s.jsx)(l.Toast.Description,{className:`text-body-1`,render:(0,s.jsx)(`div`,{}),children:t}):null};return(0,s.jsx)(l.Toast.Root,{...S,children:(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`,m?`gap-lg items-center`:`gap-md flex-col`),children:[(0,s.jsxs)(`div`,{className:`gap-lg p-md flex grow items-center`,children:[(0,s.jsx)(n.t,{size:`md`,children:C}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`gap-sm flex flex-col`,m&&`flex-1`,!m&&f&&`pr-3xl`),children:[T(),E()]})]}),(0,s.jsxs)(`div`,{className:(0,a.cx)(`flex`),children:[d&&(0,s.jsx)(b,{render:(0,s.jsx)(r.t,{...x}),children:d.label}),m&&w()]}),!m&&w(`top-md right-md absolute`)]})},e.id)}function x(){let e=l.Toast.useToastManager(),t=o.useCallback(()=>{e.toasts.forEach(({id:t})=>e.close(t))},[e]);return{...e,closeAll:t}}function S(){let{toasts:e}=x();return e.map(e=>(0,s.jsx)(b,{toast:e},e.id))}function C({children:e,limit:t=3,...n}){return(0,s.jsxs)(l.Toast.Provider,{limit:t,...n,children:[(0,s.jsx)(l.Toast.Portal,{children:(0,s.jsx)(l.Toast.Viewport,{className:(0,a.cx)(`z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end`),children:(0,s.jsx)(S,{})})}),e]})}function w({children:e,onClick:n,asChild:r=!1,title:i,description:a,timeout:o=5e3,design:c=`filled`,intent:l=`neutral`,isClosable:u=!0,icon:d,action:f,compact:p,priority:m=`low`}){let h=x(),g=r?t.Slot:`button`;function _(e){n?.(e),h.add({title:i,description:a,timeout:o,priority:m,data:{design:c,intent:l,isClosable:u,...d&&{icon:d},action:f,...p!==void 0&&{compact:p}}})}return(0,s.jsx)(g,{...!r&&{type:`button`},onClick:_,children:e})}var T=l.Toast.createToastManager;exports.ToastProvider=C,exports.ToastTrigger=w,exports.createToastManager=T,exports.useToastManager=x;
 //# sourceMappingURL=index.js.map

package/dist/toast/index.mjs

@@ -1,7 +1,7 @@
 import { Slot as e } from "../slot/index.mjs";
 import { t } from "../icon-D05Uqh8_.mjs";
-import { t as n } from "../button-BtuAr9qV.mjs";
-import { t as r } from "../icon-button-XyQSaVPL.mjs";
+import { t as n } from "../button-CNabSkd_.mjs";
+import { t as r } from "../icon-button-DVbKK2_a.mjs";
 import { cva as i, cx as a } from "class-variance-authority";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.10.5-beta.0",
+  "version": "17.11.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "1.0.0",
-    "@spark-ui/hooks": "17.10.5-beta.0",
-    "@spark-ui/icons": "17.10.5-beta.0",
-    "@spark-ui/internal-utils": "17.10.5-beta.0",
+    "@spark-ui/hooks": "17.11.1",
+    "@spark-ui/icons": "17.11.1",
+    "@spark-ui/internal-utils": "17.11.1",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.10.5-beta.0",
+    "@spark-ui/theme-utils": "17.11.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"

package/dist/form-field-CV5dzt-I.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-field-CV5dzt-I.mjs","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\n */\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A helper text message displayed below the form control. Renders a <span> element. */\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\n/** The label for the form field control. Renders a <label> element. */\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/form-field-CYGgse45.js

@@ -1,2 +0,0 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`),n=require(`./label-BCSEss4U.js`),r=require(`./FormFieldRequiredIndicator-CEB8Ez-q.js`);let i=require(`class-variance-authority`),a=require(`react`),o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/Check`),c=require(`@spark-ui/icons/WarningOutline`),l=require(`@spark-ui/icons/AlertOutline`);var u=(0,a.createContext)(null),d=`:form-field`,f=()=>{let e=(0,a.useContext)(u);if(!e)throw Error(`useFormField must be used within a FormField provider`);return e},p=({id:e,name:t,disabled:n=!1,readOnly:r=!1,state:i,isRequired:s,children:c})=>{let l=`${d}-label-${(0,a.useId)()}`,[f,p]=(0,a.useState)([]),m=f.length>0?f.join(` `):void 0,h=(0,a.useCallback)(e=>{p(t=>[...t,e])},[]),g=(0,a.useCallback)(e=>{p(t=>t.filter(t=>t!==e))},[]),_=(0,a.useMemo)(()=>({id:e,labelId:l,name:t,disabled:n,readOnly:r,state:i,isRequired:s,isInvalid:i===`error`,description:m,onMessageIdAdd:h,onMessageIdRemove:g}),[e,l,t,n,r,m,i,s,h,g]);return(0,o.jsx)(u.Provider,{value:_,children:c})};p.displayName=`FormFieldProvider`;var m=({className:t,disabled:n=!1,readOnly:r=!1,name:s,state:c,isRequired:l=!1,asChild:u=!1,ref:f,...m})=>(0,o.jsx)(p,{id:`${d}-${(0,a.useId)()}`,name:s,isRequired:l,disabled:n,readOnly:r,state:c,children:(0,o.jsx)(u?e.Slot:`div`,{ref:f,"data-spark-component":`form-field`,className:(0,i.cx)(t,`gap-md flex flex-col`),...m})});m.displayName=`FormField`;var h=({id:e,className:t,ref:n,...r})=>{let{onMessageIdAdd:s,onMessageIdRemove:c}=f(),l=`${d}-message-${(0,a.useId)()}`,u=e||l;return(0,a.useEffect)(()=>(s(u),()=>{c(u)}),[u,s,c]),(0,o.jsx)(`span`,{ref:n,id:u,"data-spark-component":`form-field-message`,className:(0,i.cx)(t,`default:text-caption`),...r})};h.displayName=`FormField.Message`;var g=({className:e,state:n,children:r,ref:a,...u})=>f().state===n?(0,o.jsxs)(h,{ref:a,"data-spark-component":`form-field-state-message`,className:(0,i.cx)(`gap-sm flex items-center`,n===`error`?`text-error`:`text-on-surface/dim-1`,e),...u,children:[n===`alert`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(c.WarningOutline,{})}),n===`error`&&(0,o.jsx)(t.t,{size:`sm`,intent:`error`,children:(0,o.jsx)(l.AlertOutline,{})}),n===`success`&&(0,o.jsx)(t.t,{size:`sm`,children:(0,o.jsx)(s.Check,{})}),r]}):null;g.displayName=`FormField.StateMessage`;var _=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-alert-message`,state:`alert`,...t});_.displayName=`FormField.AlertMessage`;var v=({className:e,value:t=``,maxLength:n,description:r,liveAnnouncement:s,ref:c,...l})=>{let[u,d]=(0,a.useState)(t);return(0,a.useEffect)(()=>{let e=setTimeout(()=>{d(t)},1e3);return()=>clearTimeout(e)},[t]),(0,o.jsxs)(`span`,{className:`ml-auto self-start`,children:[r&&(0,o.jsx)(h,{className:`default:sr-only`,children:r}),(0,o.jsx)(`span`,{ref:c,"aria-hidden":!0,"data-spark-component":`form-field-characters-count`,className:(0,i.cx)(e,`text-caption`,`text-neutral`),...l,children:`${t.length}/${n}`}),s&&(0,o.jsx)(`span`,{className:`sr-only`,"aria-live":`polite`,children:s({remainingChars:n-u.length})})]})};v.displayName=`FormField.CharactersCount`;var y=()=>{let{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}=(0,a.useContext)(u)||{};return{id:e,name:t,description:n,disabled:r,readOnly:i,state:o,labelId:s,isInvalid:c,isRequired:l}},b=({children:e})=>(0,o.jsx)(o.Fragment,{children:e(y())});b.displayName=`FormField.Control`;var x=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-description`,className:(0,i.cx)(`text-on-surface/dim-1 text-body-2`,e),...n});x.displayName=`FormField.Description`;var S=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-error-message`,state:`error`,...t});S.displayName=`FormField.ErrorMessage`;var C=({className:e,ref:t,...n})=>(0,o.jsx)(h,{ref:t,"data-spark-component":`form-field-helper-message`,className:(0,i.cx)(`text-on-surface/dim-1`,e),...n});C.displayName=`FormField.HelperMessage`;var w=({htmlFor:t,className:a,children:s,requiredIndicator:c=(0,o.jsx)(r.t,{}),asChild:l,ref:u,...d})=>{let p=f(),{disabled:m,labelId:h,isRequired:g}=p;return(0,o.jsx)(n.t,{ref:u,id:h,"data-spark-component":`form-field-label`,htmlFor:l?void 0:t||p.id,className:(0,i.cx)(`default:font-medium`,a,m?`text-on-surface/dim-3  pointer-events-none`:void 0),asChild:l,...d,children:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Slottable,{children:s}),g&&c]})})};w.displayName=`FormField.Label`;var T=({ref:e,...t})=>(0,o.jsx)(g,{ref:e,"data-spark-component":`form-field-success-message`,state:`success`,...t});T.displayName=`FormField.SuccessMessage`;var E=Object.assign(m,{Label:w,Description:x,Control:b,StateMessage:g,SuccessMessage:T,AlertMessage:_,ErrorMessage:S,HelperMessage:C,RequiredIndicator:r.t,CharactersCount:v});E.displayName=`FormField`,w.displayName=`FormField.Label`,x.displayName=`FormField.Description`,b.displayName=`FormField.Control`,g.displayName=`FormField.StateMessage`,T.displayName=`FormField.SuccessMessage`,_.displayName=`FormField.AlertMessage`,S.displayName=`FormField.ErrorMessage`,C.displayName=`FormField.HelperMessage`,r.t.displayName=`FormField.RequiredIndicator`,v.displayName=`FormField.CharactersCount`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
-//# sourceMappingURL=form-field-CYGgse45.js.map

package/dist/form-field-CYGgse45.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-field-CYGgse45.js","names":[],"sources":["../src/form-field/FormFieldContext.tsx","../src/form-field/FormFieldProvider.tsx","../src/form-field/FormField.tsx","../src/form-field/FormFieldMessage.tsx","../src/form-field/FormFieldStateMessage.tsx","../src/form-field/FormFieldAlertMessage.tsx","../src/form-field/FormFieldCharactersCount.tsx","../src/form-field/FormFieldControl.tsx","../src/form-field/FormFieldDescription.tsx","../src/form-field/FormFieldErrorMessage.tsx","../src/form-field/FormFieldHelperMessage.tsx","../src/form-field/FormFieldLabel.tsx","../src/form-field/FormFieldSuccessMessage.tsx","../src/form-field/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface FormFieldContextState {\n  /**\n   * Generated id for the input component.\n   */\n  id: string\n  /**\n   * Generated id for the label component.\n   */\n  labelId?: string\n  /**\n   * The name of the input. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * Disables the field and its associated input\n   */\n  disabled?: boolean\n  /**\n   * Marks the field and its associated input as read only\n   */\n  readOnly?: boolean\n  /**\n   * The validation state of the input.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the form field will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the form field will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to store a descriptive message.\n   */\n  onMessageIdAdd: (id: string) => void\n  /**\n   * Callback used to remove a descriptive message.\n   */\n  onMessageIdRemove: (id: string) => void\n}\n\nexport const FormFieldContext = createContext<FormFieldContextState | null>(null)\n\nexport const ID_PREFIX = ':form-field'\n\nexport const useFormField = () => {\n  const context = useContext(FormFieldContext)\n\n  if (!context) {\n    throw Error('useFormField must be used within a FormField provider')\n  }\n\n  return context\n}\n","import { ReactNode, useCallback, useId, useMemo, useState } from 'react'\n\nimport { FormFieldContext, FormFieldContextState, ID_PREFIX } from './FormFieldContext'\n\nexport interface FormFieldProviderProps extends Pick<\n  FormFieldContextState,\n  'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'\n> {\n  children: ReactNode\n}\n\nexport const FormFieldProvider = ({\n  id,\n  name,\n  disabled = false,\n  readOnly = false,\n  state,\n  isRequired,\n  children,\n}: FormFieldProviderProps) => {\n  const labelId = `${ID_PREFIX}-label-${useId()}`\n  const [messageIds, setMessageIds] = useState<string[]>([])\n  const description = messageIds.length > 0 ? messageIds.join(' ') : undefined\n\n  const handleMessageIdAdd = useCallback((msgId: string) => {\n    setMessageIds(ids => [...ids, msgId])\n  }, [])\n\n  const handleMessageIdRemove = useCallback((msgId: string) => {\n    setMessageIds(ids => ids.filter(current => current !== msgId))\n  }, [])\n\n  const value = useMemo(() => {\n    const isInvalid = state === 'error'\n\n    return {\n      id,\n      labelId,\n      name,\n      disabled,\n      readOnly,\n      state,\n      isRequired,\n      isInvalid,\n      description,\n      onMessageIdAdd: handleMessageIdAdd,\n      onMessageIdRemove: handleMessageIdRemove,\n    }\n  }, [\n    id,\n    labelId,\n    name,\n    disabled,\n    readOnly,\n    description,\n    state,\n    isRequired,\n    handleMessageIdAdd,\n    handleMessageIdRemove,\n  ])\n\n  return <FormFieldContext.Provider value={value}>{children}</FormFieldContext.Provider>\n}\n\nFormFieldProvider.displayName = 'FormFieldProvider'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useId } from 'react'\n\nimport { Slot } from '../slot'\nimport { FormFieldContextState, ID_PREFIX } from './FormFieldContext'\nimport { FormFieldProvider } from './FormFieldProvider'\n\nexport interface FormFieldProps\n  extends\n    ComponentPropsWithoutRef<'div'>,\n    Pick<FormFieldContextState, 'name' | 'state' | 'isRequired'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n   */\n  asChild?: boolean\n  /**\n   * When `true`, prevents the user from interacting.\n   */\n  disabled?: boolean\n  /**\n   * Sets the component as interactive or not.\n   */\n  readOnly?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const FormField = ({\n  className,\n  disabled = false,\n  readOnly = false,\n  name,\n  state,\n  isRequired = false,\n  asChild = false,\n  ref,\n  ...others\n}: FormFieldProps) => {\n  const id = `${ID_PREFIX}-${useId()}`\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <FormFieldProvider\n      id={id}\n      name={name}\n      isRequired={isRequired}\n      disabled={disabled}\n      readOnly={readOnly}\n      state={state}\n    >\n      <Component\n        ref={ref}\n        data-spark-component=\"form-field\"\n        className={cx(className, 'gap-md flex flex-col')}\n        {...others}\n      />\n    </FormFieldProvider>\n  )\n}\n\nFormField.displayName = 'FormField'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useId } from 'react'\n\nimport { ID_PREFIX, useFormField } from './FormFieldContext'\n\nexport type FormFieldMessageProps = ComponentPropsWithoutRef<'span'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldMessage = ({\n  id: idProp,\n  className,\n  ref,\n  ...others\n}: FormFieldMessageProps) => {\n  const { onMessageIdAdd, onMessageIdRemove } = useFormField()\n  const currentId = `${ID_PREFIX}-message-${useId()}`\n  const id = idProp || currentId\n\n  useEffect(() => {\n    onMessageIdAdd(id)\n\n    return () => {\n      onMessageIdRemove(id)\n    }\n  }, [id, onMessageIdAdd, onMessageIdRemove])\n\n  return (\n    <span\n      ref={ref}\n      id={id}\n      data-spark-component=\"form-field-message\"\n      className={cx(className, 'default:text-caption')}\n      {...others}\n    />\n  )\n}\n\nFormFieldMessage.displayName = 'FormField.Message'\n","import { AlertOutline } from '@spark-ui/icons/AlertOutline'\nimport { Check } from '@spark-ui/icons/Check'\nimport { WarningOutline } from '@spark-ui/icons/WarningOutline'\nimport { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport interface FormFieldStateMessageProps extends FormFieldMessageProps {\n  state: 'error' | 'alert' | 'success'\n  ref?: Ref<HTMLSpanElement>\n}\n\n/**\n * Container for state messages (helper, error, success, alert). Renders a <div> element.\n */\nexport const FormFieldStateMessage = ({\n  className,\n  state,\n  children,\n  ref,\n  ...others\n}: FormFieldStateMessageProps) => {\n  const field = useFormField()\n\n  if (field.state !== state) {\n    return null\n  }\n\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-state-message\"\n      className={cx(\n        'gap-sm flex items-center',\n        state === 'error' ? 'text-error' : 'text-on-surface/dim-1',\n        className\n      )}\n      {...others}\n    >\n      {state === 'alert' && (\n        <Icon size=\"sm\">\n          <WarningOutline />\n        </Icon>\n      )}\n      {state === 'error' && (\n        <Icon size=\"sm\" intent=\"error\">\n          <AlertOutline />\n        </Icon>\n      )}\n      {state === 'success' && (\n        <Icon size=\"sm\">\n          <Check />\n        </Icon>\n      )}\n\n      {children}\n    </FormFieldMessage>\n  )\n}\n\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldAlertMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An alert message displayed when the form field is in an alert state. Renders a <span> element. */\nexport const FormFieldAlertMessage = ({ ref, ...props }: FormFieldAlertMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-alert-message\"\n      state=\"alert\"\n      {...props}\n    />\n  )\n}\n\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useState } from 'react'\n\nimport { FormFieldMessage } from './FormFieldMessage'\n\nexport type FormFieldCharactersCountProps = ComponentPropsWithoutRef<'span'> & {\n  /**\n   * This description is for the screen reader, read when the input is focused.\n   */\n  description?: string\n  /**\n   * The live announcement is for the screen read after a delay once the input value changes.\n   */\n  liveAnnouncement?: ({ remainingChars }: { remainingChars: number }) => string\n  /**\n   * Current value for the input this component belongs to.\n   */\n  value?: string\n  /**\n   * Maximum numeric value to be displayed.\n   */\n  maxLength: number\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** Displays the character count and remaining characters for an input. Renders a <span> element. */\nexport const FormFieldCharactersCount = ({\n  className,\n  value = '',\n  maxLength,\n  description,\n  liveAnnouncement,\n  ref,\n  ...others\n}: FormFieldCharactersCountProps) => {\n  const [throttledValue, setThrottledValue] = useState(value)\n\n  /**\n   * The value is throttled to avoid spamming the aria-live region (and consequently the screen reader).\n   */\n  useEffect(() => {\n    const timeoutId = setTimeout(() => {\n      setThrottledValue(value)\n    }, 1000)\n\n    return () => clearTimeout(timeoutId)\n  }, [value])\n\n  return (\n    <span className=\"ml-auto self-start\">\n      {description && (\n        <FormFieldMessage className=\"default:sr-only\">{description}</FormFieldMessage>\n      )}\n      <span\n        ref={ref}\n        aria-hidden\n        data-spark-component=\"form-field-characters-count\"\n        className={cx(className, 'text-caption', 'text-neutral')}\n        {...others}\n      >\n        {`${value.length}/${maxLength}`}\n      </span>\n\n      {liveAnnouncement && (\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveAnnouncement({ remainingChars: maxLength - throttledValue.length })}\n        </span>\n      )}\n    </span>\n  )\n}\n\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n","import { ReactNode, useContext } from 'react'\n\nimport { FormFieldContext, FormFieldContextState } from './FormFieldContext'\n\ntype State = Partial<\n  Pick<\n    FormFieldContextState,\n    | 'id'\n    | 'name'\n    | 'description'\n    | 'labelId'\n    | 'disabled'\n    | 'readOnly'\n    | 'state'\n    | 'isInvalid'\n    | 'isRequired'\n  >\n>\n\nexport interface FormFieldControlProps {\n  children: (state: State) => ReactNode\n}\n\nexport const useFormFieldControl = () => {\n  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =\n    useContext(FormFieldContext) || {}\n\n  return {\n    id,\n    name,\n    description,\n    disabled,\n    readOnly,\n    state,\n    labelId,\n    isInvalid,\n    isRequired,\n  } as State\n}\n\n/** A render prop component providing access to form field state. Renders its children. */\nexport const FormFieldControl = ({ children }: FormFieldControlProps) => {\n  const props = useFormFieldControl()\n\n  return <>{children(props)}</>\n}\n\nFormFieldControl.displayName = 'FormField.Control'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldDescriptionProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldDescription = ({ className, ref, ...others }: FormFieldDescriptionProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-description\"\n      className={cx('text-on-surface/dim-1 text-body-2', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldDescription.displayName = 'FormField.Description'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldErrorMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** An error message displayed when the form field is in an error state. Renders a <span> element. */\nexport const FormFieldErrorMessage = ({ ref, ...props }: FormFieldErrorMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-error-message\"\n      state=\"error\"\n      {...props}\n    />\n  )\n}\n\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { FormFieldMessage, FormFieldMessageProps } from './FormFieldMessage'\n\nexport type FormFieldHelperMessageProps = FormFieldMessageProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A helper text message displayed below the form control. Renders a <span> element. */\nexport const FormFieldHelperMessage = ({\n  className,\n  ref,\n  ...others\n}: FormFieldHelperMessageProps) => {\n  return (\n    <FormFieldMessage\n      ref={ref}\n      data-spark-component=\"form-field-helper-message\"\n      className={cx('text-on-surface/dim-1', className)}\n      {...others}\n    />\n  )\n}\n\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\n","import { cx } from 'class-variance-authority'\nimport { ReactNode, Ref } from 'react'\n\nimport { Label, LabelProps } from '../label'\nimport { Slottable } from '../slot'\nimport { useFormField } from './FormFieldContext'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\n\nexport interface FormFieldLabelProps extends LabelProps {\n  /**\n   * Element shown when the input is required inside the label.\n   */\n  requiredIndicator?: ReactNode\n  ref?: Ref<HTMLLabelElement>\n}\n\n/** The label for the form field control. Renders a <label> element. */\nexport const FormFieldLabel = ({\n  htmlFor: htmlForProp,\n  className,\n  children,\n  requiredIndicator = <FormFieldRequiredIndicator />,\n  asChild,\n  ref,\n  ...others\n}: FormFieldLabelProps) => {\n  const control = useFormField()\n\n  const { disabled, labelId, isRequired } = control\n  const htmlFor = asChild ? undefined : htmlForProp || control.id\n\n  return (\n    <Label\n      ref={ref}\n      id={labelId}\n      data-spark-component=\"form-field-label\"\n      htmlFor={htmlFor}\n      className={cx(\n        'default:font-medium',\n        className,\n        disabled ? 'text-on-surface/dim-3  pointer-events-none' : undefined\n      )}\n      asChild={asChild}\n      {...others}\n    >\n      <>\n        <Slottable>{children}</Slottable>\n        {isRequired && requiredIndicator}\n      </>\n    </Label>\n  )\n}\n\nFormFieldLabel.displayName = 'FormField.Label'\n","import { Ref } from 'react'\n\nimport { FormFieldStateMessage, FormFieldStateMessageProps } from './FormFieldStateMessage'\n\nexport type FormFieldSuccessMessageProps = Omit<FormFieldStateMessageProps, 'state'> & {\n  ref?: Ref<HTMLSpanElement>\n}\n\n/** A success message displayed when the form field is in a success state. Renders a <span> element. */\nexport const FormFieldSuccessMessage = ({ ref, ...props }: FormFieldSuccessMessageProps) => {\n  return (\n    <FormFieldStateMessage\n      ref={ref}\n      data-spark-component=\"form-field-success-message\"\n      state=\"success\"\n      {...props}\n    />\n  )\n}\n\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\n","import { FormField as Root } from './FormField'\nimport { FormFieldAlertMessage } from './FormFieldAlertMessage'\nimport { FormFieldCharactersCount } from './FormFieldCharactersCount'\nimport { FormFieldControl } from './FormFieldControl'\nimport { FormFieldDescription } from './FormFieldDescription'\nimport { FormFieldErrorMessage } from './FormFieldErrorMessage'\nimport { FormFieldHelperMessage } from './FormFieldHelperMessage'\nimport { FormFieldLabel } from './FormFieldLabel'\nimport { FormFieldRequiredIndicator } from './FormFieldRequiredIndicator'\nimport { FormFieldStateMessage } from './FormFieldStateMessage'\nimport { FormFieldSuccessMessage } from './FormFieldSuccessMessage'\n\n/**\n * A wrapper component that provides consistent layout and accessibility features for form inputs.\n */\nexport const FormField: typeof Root & {\n  Label: typeof FormFieldLabel\n  Description: typeof FormFieldDescription\n  Control: typeof FormFieldControl\n  StateMessage: typeof FormFieldStateMessage\n  SuccessMessage: typeof FormFieldSuccessMessage\n  AlertMessage: typeof FormFieldAlertMessage\n  ErrorMessage: typeof FormFieldErrorMessage\n  HelperMessage: typeof FormFieldHelperMessage\n  RequiredIndicator: typeof FormFieldRequiredIndicator\n  CharactersCount: typeof FormFieldCharactersCount\n} = Object.assign(Root, {\n  Label: FormFieldLabel,\n  Description: FormFieldDescription,\n  Control: FormFieldControl,\n  StateMessage: FormFieldStateMessage,\n  SuccessMessage: FormFieldSuccessMessage,\n  AlertMessage: FormFieldAlertMessage,\n  ErrorMessage: FormFieldErrorMessage,\n  HelperMessage: FormFieldHelperMessage,\n  RequiredIndicator: FormFieldRequiredIndicator,\n  CharactersCount: FormFieldCharactersCount,\n})\n\nFormField.displayName = 'FormField'\nFormFieldLabel.displayName = 'FormField.Label'\nFormFieldDescription.displayName = 'FormField.Description'\nFormFieldControl.displayName = 'FormField.Control'\nFormFieldStateMessage.displayName = 'FormField.StateMessage'\nFormFieldSuccessMessage.displayName = 'FormField.SuccessMessage'\nFormFieldAlertMessage.displayName = 'FormField.AlertMessage'\nFormFieldErrorMessage.displayName = 'FormField.ErrorMessage'\nFormFieldHelperMessage.displayName = 'FormField.HelperMessage'\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\nFormFieldCharactersCount.displayName = 'FormField.CharactersCount'\n\nexport { type FormFieldProps } from './FormField'\nexport { type FormFieldStateMessageProps } from './FormFieldStateMessage'\nexport { type FormFieldControl, useFormFieldControl } from './FormFieldControl'\nexport { type FormFieldDescriptionProps } from './FormFieldDescription'\nexport { type FormFieldHelperMessageProps } from './FormFieldHelperMessage'\nexport { type FormFieldSuccessMessageProps } from './FormFieldSuccessMessage'\nexport { type FormFieldAlertMessageProps } from './FormFieldAlertMessage'\nexport { type FormFieldErrorMessageProps } from './FormFieldErrorMessage'\nexport { type FormFieldLabelProps } from './FormFieldLabel'\nexport { type FormFieldRequiredIndicatorProps } from './FormFieldRequiredIndicator'\nexport { type FormFieldCharactersCountProps } from './FormFieldCharactersCount'\n"],"mappings":"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"}

package/dist/icon-button-BSVlcyAO.js

@@ -1,2 +0,0 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./button-BaJmiSYq.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`),r=require(`@spark-ui/internal-utils`);var i=(0,t.cva)([`pl-0 pr-0`],{variants:{size:(0,r.makeVariants)({sm:[`text-body-1`],md:[`text-body-1`],lg:[`text-display-3`]})}}),a=({design:t=`filled`,disabled:r=!1,intent:a=`main`,shape:o=`pill`,size:s=`md`,className:c,ref:l,...u})=>(0,n.jsx)(e.t,{"data-spark-component":`icon-button`,ref:l,className:i({size:s,className:c}),design:t,disabled:r,intent:a,shape:o,size:s,...u});a.displayName=`IconButton`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
-//# sourceMappingURL=icon-button-BSVlcyAO.js.map

package/dist/input-CJOeEIbx.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-CJOeEIbx.mjs","names":[],"sources":["../src/input/InputGroupContext.ts","../src/input/InputClearButton.tsx","../src/input/InputGroup.styles.ts","../src/input/InputGroup.tsx","../src/input/InputAddon.styles.ts","../src/input/InputAddon.tsx","../src/input/InputLeadingAddon.tsx","../src/input/InputIcon.tsx","../src/input/InputLeadingIcon.tsx","../src/input/InputTrailingAddon.tsx","../src/input/InputTrailingIcon.tsx","../src/input/Input.styles.ts","../src/input/Input.tsx","../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button to clear the input value. Renders a <button> element. */\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * An addon displayed before the input. Renders a <span> element.\n */\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-full', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! -mr-px rounded-l-full')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\n/** An icon displayed before the input text. Renders a <div> element. */\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/** An addon displayed after the input. Renders a <span> element. */\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-full', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! -ml-px rounded-r-full')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\n/** An icon displayed after the input text. Renders a <div> element. */\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-input'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-input'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\n/**\n * A text input field that allows users to enter and edit text content.\n */\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\n/**\n * A wrapper component that combines an Input with addons, icons, and interactive elements\n * to create more complex text input patterns like search bars, password fields, or URL inputs.\n */\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"mappings":"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"}

package/dist/input-Dv436NKY.js

@@ -1,2 +0,0 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./icon-CRPcdgYp.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/hooks/use-merge-refs`),o=require(`@spark-ui/components/form-field`),s=require(`@spark-ui/hooks/use-combined-state`),c=require(`@spark-ui/icons/DeleteOutline`);var l=(0,r.createContext)(null),u=()=>(0,r.useContext)(l)||{isStandalone:!0},d=({className:e,tabIndex:r=-1,onClick:a,inline:o=!1,ref:s,...l})=>{let{onClear:d,hasTrailingIcon:f}=u();return(0,i.jsx)(`button`,{ref:s,"data-spark-component":`input-clear-button`,className:(0,n.cx)(e,`pointer-events-auto absolute`,o?`h-sz-44 top-0 -translate-y-0`:`top-1/2 -translate-y-1/2`,`inline-flex h-full items-center justify-center outline-hidden`,`text-neutral hover:text-neutral-hovered`,f?`right-3xl px-sz-12`:`pl-md pr-lg right-0`),tabIndex:r,onClick:e=>{a&&a(e),d&&d()},type:`button`,...l,children:(0,i.jsx)(t.t,{size:`sm`,children:(0,i.jsx)(c.DeleteOutline,{})})})},f=Object.assign(d,{id:`ClearButton`});d.displayName=`InputGroup.ClearButton`;var p=(0,n.cva)([`relative inline-flex w-full`],{variants:{disabled:{true:[`cursor-not-allowed`,`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`},readOnly:{true:[`relative`,`after:absolute`,`after:top-0`,`after:h-full`,`after:w-full`,`after:border-sm after:border-outline`,`after:rounded-lg`],false:`after:hidden`}}}),m=({className:e,children:t,state:n,disabled:c,readOnly:u,onClear:d,ref:f,...m})=>{let h=e=>e?e.type.id:``,g=(...e)=>_.find(t=>e.includes(h(t)||``)),_=r.Children.toArray(t).filter(r.isValidElement),v=g(`Input`),y=v?.props||{},b=(0,r.useRef)(null),x=(0,r.useRef)(d),S=(0,a.useMergeRefs)(v?.ref,b),[C,w]=(0,s.useCombinedState)(y.value,y.defaultValue,y.onValueChange),T=(0,o.useFormFieldControl)(),E=T.state??n,D=T.disabled||!!c,O=T.readOnly||!!u,k=g(`LeadingAddon`),A=g(`LeadingIcon`),j=g(`ClearButton`),M=g(`TrailingIcon`),N=g(`TrailingAddon`),P=!!k,F=!!N,I=!!A,L=!!M,R=!!C&&!!j&&!D&&!O,z=e=>{y.onChange&&y.onChange(e),w(e.target.value)},B=(0,r.useCallback)(()=>{x.current&&x.current(),w(``),b.current.focus()},[w]),V=(0,r.useMemo)(()=>({state:E,disabled:D,readOnly:O,hasLeadingIcon:I,hasTrailingIcon:L,hasLeadingAddon:P,hasTrailingAddon:F,hasClearButton:R,onClear:B}),[E,D,O,I,L,P,F,R,B]);(0,r.useEffect)(()=>{x.current=d},[d]);let H=b.current?.value;return(0,i.jsx)(l.Provider,{value:V,children:(0,i.jsxs)(`div`,{"data-spark-component":`input-group`,ref:f,className:p({disabled:D,readOnly:O,className:e}),...m,children:[P&&k,(0,i.jsxs)(`div`,{className:`relative inline-flex w-full`,children:[v&&(0,r.cloneElement)(v,{value:C??H??``,ref:S,defaultValue:void 0,onChange:z}),A,R&&j,M]}),F&&N]})})};m.displayName=`InputGroup`;var h=(0,n.cva)([`overflow-hidden`,`border-sm`,`shrink-0`,`h-full`,`focus-visible:relative focus-visible:z-raised`,`mx-0`],{variants:{asChild:{false:[`flex`,`items-center`,`px-lg`]},intent:{neutral:`border-outline`,error:`border-error`,alert:`border-alert`,success:`border-success`},disabled:{true:[`pointer-events-none border-outline!`]},readOnly:{true:[`pointer-events-none`]},design:{text:``,solid:``,inline:``}},compoundVariants:[{disabled:!1,readOnly:!1,design:`text`,class:[`bg-surface`,`text-on-surface`]},{disabled:!0,design:`text`,class:[`text-on-surface/dim-3`]},{disabled:!0,design:[`solid`,`inline`],class:[`opacity-dim-3`]}],defaultVariants:{intent:`neutral`}}),g=({asChild:t,className:n,children:a,ref:o,...s})=>{let{state:c,disabled:l,readOnly:d}=u(),f=typeof a==`string`,p=!!(!f&&t),m=f?a:r.Children.only(a),g=p&&!f?e.Slot:`div`;return(0,i.jsx)(g,{ref:o,"data-spark-component":`input-addon`,className:h({className:n,intent:c,disabled:l,readOnly:d,asChild:p,design:f?`text`:p?`solid`:`inline`}),...l&&{tabIndex:-1},...s,children:m})};g.displayName=`InputGroup.Addon`;var _=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-l-full`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-r-0! -mr-px rounded-l-full`),...r})})},v=Object.assign(_,{id:`LeadingAddon`});_.displayName=`InputGroup.LeadingAddon`;var y=({className:e,intent:r,children:a,...o})=>{let{disabled:s,readOnly:c}=u();return(0,i.jsx)(t.t,{"data-spark-component":`input-icon`,intent:r,className:(0,n.cx)(e,`pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2`,r?void 0:`text-neutral peer-focus:text-outline-high`,s||c?`opacity-dim-3`:void 0),...o,children:a})};y.displayName=`InputGroup.Icon`;var b=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`left-lg text-body-1`),...t});b.id=`LeadingIcon`,b.displayName=`InputGroup.LeadingIcon`;var x=({className:e,ref:t,...r})=>{let{disabled:a,readOnly:o}=u();return(0,i.jsx)(`div`,{className:(0,n.cx)(`rounded-r-full`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-l-0! -ml-px rounded-r-full`),...r})})},S=Object.assign(x,{id:`TrailingAddon`});x.displayName=`InputGroup.TrailingAddon`;var C=({className:e,...t})=>(0,i.jsx)(y,{className:(0,n.cx)(e,`right-lg text-body-1`),...t});C.id=`TrailingIcon`,C.displayName=`InputGroup.TrailingIcon`;var w=(0,n.cva)([`relative`,`border-sm`,`peer`,`w-full`,`appearance-none outline-hidden`,`bg-surface`,`text-ellipsis text-body-1 text-on-surface`,`caret-neutral`,`[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]`,`autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]`,`disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3`,`read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5`,`focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus`],{variants:{asChild:{true:[`min-h-sz-44`],false:[`h-sz-44`]},intent:{neutral:[`border-outline`,`default:hover:border-outline-high`],success:[`default:border-success`],alert:[`default:border-alert`],error:[`default:border-error`]},hasLeadingAddon:{true:[`rounded-l-0`],false:[`rounded-l-input`]},hasTrailingAddon:{true:[`rounded-r-0`],false:[`rounded-r-input`]},hasLeadingIcon:{true:[`pl-3xl`],false:[`pl-lg`]},hasTrailingIcon:{true:``},hasClearButton:{true:``}},compoundVariants:[{hasTrailingIcon:!1,hasClearButton:!1,class:`pr-lg`},{hasTrailingIcon:!0,hasClearButton:!1,class:`pr-3xl`},{hasTrailingIcon:!1,hasClearButton:!0,class:`pr-3xl`},{hasTrailingIcon:!0,hasClearButton:!0,class:`pr-[calc(var(--spacing-3xl)*2)]`}],defaultVariants:{intent:`neutral`}}),T=({className:t,asChild:n=!1,onValueChange:r,onChange:a,onKeyDown:s,disabled:c,readOnly:l,ref:d,...f})=>{let p=(0,o.useFormFieldControl)(),m=u(),{id:h,name:g,isInvalid:_,isRequired:v,description:y}=p,{hasLeadingAddon:b,hasTrailingAddon:x,hasLeadingIcon:S,hasTrailingIcon:C,hasClearButton:T,onClear:E}=m,D=n?e.Slot:`input`,O=p.state||m.state,k=p.disabled||m.disabled||c,A=p.readOnly||m.readOnly||l;return(0,i.jsx)(D,{"data-spark-component":`input`,ref:d,id:h,name:g,className:w({asChild:n,className:t,intent:O,hasLeadingAddon:!!b,hasTrailingAddon:!!x,hasLeadingIcon:!!S,hasTrailingIcon:!!C,hasClearButton:!!T}),disabled:k,readOnly:A,required:v,"aria-describedby":y,"aria-invalid":_,onChange:e=>{a&&a(e),r&&r(e.target.value)},onKeyDown:e=>{s&&s(e),T&&E&&e.key===`Escape`&&E()},...f})},E=Object.assign(T,{id:`Input`});T.displayName=`Input`;var D=Object.assign(m,{LeadingAddon:v,TrailingAddon:S,LeadingIcon:b,TrailingIcon:C,ClearButton:f});D.displayName=`InputGroup`,v.displayName=`InputGroup.LeadingAddon`,S.displayName=`InputGroup.TrailingAddon`,b.displayName=`InputGroup.LeadingIcon`,C.displayName=`InputGroup.TrailingIcon`,f.displayName=`InputGroup.ClearButton`,Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return D}});
-//# sourceMappingURL=input-Dv436NKY.js.map

package/dist/input-Dv436NKY.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-Dv436NKY.js","names":[],"sources":["../src/input/InputGroupContext.ts","../src/input/InputClearButton.tsx","../src/input/InputGroup.styles.ts","../src/input/InputGroup.tsx","../src/input/InputAddon.styles.ts","../src/input/InputAddon.tsx","../src/input/InputLeadingAddon.tsx","../src/input/InputIcon.tsx","../src/input/InputLeadingIcon.tsx","../src/input/InputTrailingAddon.tsx","../src/input/InputTrailingIcon.tsx","../src/input/Input.styles.ts","../src/input/Input.tsx","../src/input/index.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport interface InputGroupContextValue {\n  disabled?: boolean\n  readOnly?: boolean\n  hasLeadingIcon: boolean\n  hasTrailingIcon: boolean\n  hasLeadingAddon: boolean\n  hasTrailingAddon: boolean\n  hasClearButton: boolean\n  state: null | undefined | 'error' | 'alert' | 'success'\n  isStandalone?: boolean\n  onClear: () => void\n}\n\nexport const InputGroupContext = createContext<Partial<InputGroupContextValue> | null>(null)\n\nexport const useInputGroup = () => {\n  const context = useContext(InputGroupContext)\n\n  return context || { isStandalone: true }\n}\n","import { DeleteOutline } from '@spark-ui/icons/DeleteOutline'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, MouseEventHandler, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputClearButtonProps extends ComponentPropsWithoutRef<'button'> {\n  'aria-label': string\n  inline?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\n/** A button to clear the input value. Renders a <button> element. */\nconst Root = ({\n  className,\n  tabIndex = -1,\n  onClick,\n  inline = false,\n  ref,\n  ...others\n}: InputClearButtonProps) => {\n  const { onClear, hasTrailingIcon } = useInputGroup()\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = event => {\n    if (onClick) {\n      onClick(event)\n    }\n\n    if (onClear) {\n      onClear()\n    }\n  }\n\n  return (\n    <button\n      ref={ref}\n      data-spark-component=\"input-clear-button\"\n      className={cx(\n        className,\n        'pointer-events-auto absolute',\n        inline ? 'h-sz-44 top-0 -translate-y-0' : 'top-1/2 -translate-y-1/2',\n        'inline-flex h-full items-center justify-center outline-hidden',\n        'text-neutral hover:text-neutral-hovered',\n        hasTrailingIcon ? 'right-3xl px-sz-12' : 'pl-md pr-lg right-0'\n      )}\n      tabIndex={tabIndex}\n      onClick={handleClick}\n      type=\"button\"\n      {...others}\n    >\n      <Icon size=\"sm\">\n        <DeleteOutline />\n      </Icon>\n    </button>\n  )\n}\n\nexport const InputClearButton = Object.assign(Root, {\n  id: 'ClearButton',\n})\n\nRoot.displayName = 'InputGroup.ClearButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputGroupStyles = cva(['relative inline-flex w-full'], {\n  variants: {\n    /**\n     * When `true`, prevents the user from interacting.\n     */\n    disabled: {\n      true: [\n        'cursor-not-allowed',\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n    /**\n     * Sets the component as interactive or not.\n     */\n    readOnly: {\n      true: [\n        'relative',\n        'after:absolute',\n        'after:top-0',\n        'after:h-full',\n        'after:w-full',\n        'after:border-sm after:border-outline',\n        'after:rounded-lg',\n      ],\n      false: 'after:hidden',\n    },\n  },\n})\n\nexport type InputGroupStylesProps = VariantProps<typeof inputGroupStyles>\n","/* eslint-disable max-lines-per-function */\n\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport {\n  ChangeEventHandler,\n  Children,\n  cloneElement,\n  ComponentPropsWithoutRef,\n  DetailedReactHTMLElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  ReactElement,\n  Ref,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\n\nimport { InputProps } from './Input'\nimport { inputGroupStyles, InputGroupStylesProps } from './InputGroup.styles'\nimport { InputGroupContext } from './InputGroupContext'\n\nexport interface InputGroupProps extends ComponentPropsWithoutRef<'div'>, InputGroupStylesProps {\n  /**\n   * Use `state` prop to assign a specific state to the group, choosing from: `error`, `alert` and `success`. By doing so, the outline styles will be updated.\n   */\n  state?: 'error' | 'alert' | 'success'\n  /**\n   * Function handler to be executed after the input has been cleared.\n   */\n  onClear?: () => void\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputGroup = ({\n  className,\n  children: childrenProp,\n  state: stateProp,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  onClear,\n  ref: forwardedRef,\n  ...others\n}: PropsWithChildren<InputGroupProps>) => {\n  const getElementId = (element?: ReactElement) => {\n    return element ? (element.type as FC & { id?: string }).id : ''\n  }\n\n  const findElement = (...values: string[]) => {\n    return children.find(child => values.includes(getElementId(child) || ''))\n  }\n\n  const children = Children.toArray(childrenProp).filter(isValidElement)\n  const input = findElement('Input') as\n    | DetailedReactHTMLElement<InputProps, HTMLInputElement>\n    | undefined\n  const props = input?.props || {}\n\n  const inputRef = useRef<HTMLInputElement>(null!)\n  const onClearRef = useRef(onClear)\n  const ref = useMergeRefs<HTMLInputElement>(input?.ref, inputRef)\n  const [value, onChange] = useCombinedState(\n    props.value as string,\n    props.defaultValue as string,\n    props.onValueChange\n  )\n\n  // Data derivated from FormField context\n  const field = useFormFieldControl()\n  const state = field.state ?? stateProp\n  const disabled = field.disabled || !!disabledProp\n  const readOnly = field.readOnly || !!readOnlyProp\n\n  // InputGroup elements (in visual order)\n  const leadingAddon = findElement('LeadingAddon')\n  const leadingIcon = findElement('LeadingIcon')\n  const clearButton = findElement('ClearButton')\n  const trailingIcon = findElement('TrailingIcon')\n  const trailingAddon = findElement('TrailingAddon')\n\n  // Acknowledge which subComponents are used in the compound context\n  const hasLeadingAddon = !!leadingAddon\n  const hasTrailingAddon = !!trailingAddon\n  const hasLeadingIcon = !!leadingIcon\n  const hasTrailingIcon = !!trailingIcon\n  const hasClearButton = !!value && !!clearButton && !disabled && !readOnly\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (props.onChange) {\n      props.onChange(event)\n    }\n\n    onChange(event.target.value)\n  }\n\n  const handleClear = useCallback(() => {\n    if (onClearRef.current) {\n      onClearRef.current()\n    }\n\n    onChange('')\n\n    inputRef.current.focus()\n  }, [onChange])\n\n  const current = useMemo(() => {\n    return {\n      state,\n      disabled,\n      readOnly,\n      hasLeadingIcon,\n      hasTrailingIcon,\n      hasLeadingAddon,\n      hasTrailingAddon,\n      hasClearButton,\n      onClear: handleClear,\n    }\n  }, [\n    state,\n    disabled,\n    readOnly,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasClearButton,\n    handleClear,\n  ])\n\n  useEffect(() => {\n    onClearRef.current = onClear\n  }, [onClear])\n\n  // Preserve the input value when cloning. Some libraries like React Hook Form\n  // only expose a ref (via `register`) without direct value access, so we need\n  // to manually retrieve the value from the ref to avoid losing it.\n  const inputRefValue = inputRef.current?.value\n\n  return (\n    <InputGroupContext.Provider value={current}>\n      <div\n        data-spark-component=\"input-group\"\n        ref={forwardedRef}\n        className={inputGroupStyles({ disabled, readOnly, className })}\n        {...others}\n      >\n        {hasLeadingAddon && leadingAddon}\n\n        <div className=\"relative inline-flex w-full\">\n          {input &&\n            cloneElement(input, {\n              value: value ?? inputRefValue ?? '',\n              ref,\n              defaultValue: undefined,\n              onChange: handleChange,\n            })}\n\n          {leadingIcon}\n\n          {hasClearButton && clearButton}\n\n          {trailingIcon}\n        </div>\n\n        {hasTrailingAddon && trailingAddon}\n      </div>\n    </InputGroupContext.Provider>\n  )\n}\n\nInputGroup.displayName = 'InputGroup'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputAddonStyles = cva(\n  [\n    'overflow-hidden',\n    'border-sm',\n    'shrink-0',\n    'h-full',\n    'focus-visible:relative focus-visible:z-raised',\n    'mx-0',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: { false: ['flex', 'items-center', 'px-lg'] },\n      intent: {\n        neutral: 'border-outline',\n        error: 'border-error',\n        alert: 'border-alert',\n        success: 'border-success',\n      },\n      /**\n       * Disable the input addon, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['pointer-events-none border-outline!'],\n      },\n      /**\n       * Changes input addon styles based on the read only status from the input.\n       */\n      readOnly: {\n        true: ['pointer-events-none'],\n      },\n      /**\n       * Main style of the input addon.\n       */\n      design: {\n        text: '',\n        solid: '',\n        inline: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: false,\n        readOnly: false,\n        design: 'text',\n        class: ['bg-surface', 'text-on-surface'],\n      },\n      {\n        disabled: true,\n        design: 'text',\n        class: ['text-on-surface/dim-3'],\n      },\n      {\n        disabled: true,\n        design: ['solid', 'inline'],\n        class: ['opacity-dim-3'],\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputAddonStylesProps = VariantProps<typeof inputAddonStyles>\n","import { Children, type ComponentPropsWithoutRef, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputAddonStyles, type InputAddonStylesProps } from './InputAddon.styles'\nimport { useInputGroup } from './InputGroupContext'\n\nexport interface InputAddonProps\n  extends ComponentPropsWithoutRef<'div'>, Omit<InputAddonStylesProps, 'intent' | 'disabled'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const InputAddon = ({\n  asChild: asChildProp,\n  className,\n  children,\n  ref,\n  ...others\n}: PropsWithChildren<InputAddonProps>) => {\n  const { state, disabled, readOnly } = useInputGroup()\n\n  const isRawText = typeof children === 'string'\n  const asChild = !!(isRawText ? false : asChildProp)\n  const child = isRawText ? children : Children.only(children)\n  const Component = asChild && !isRawText ? Slot : 'div'\n\n  const getDesign = (): InputAddonStylesProps['design'] => {\n    if (isRawText) return 'text'\n\n    return asChild ? 'solid' : 'inline'\n  }\n\n  const design = getDesign()\n\n  return (\n    <Component\n      ref={ref}\n      data-spark-component=\"input-addon\"\n      className={inputAddonStyles({\n        className,\n        intent: state,\n        disabled,\n        readOnly,\n        asChild,\n        design,\n      })}\n      {...(disabled && { tabIndex: -1 })}\n      {...others}\n    >\n      {child}\n    </Component>\n  )\n}\n\nInputAddon.displayName = 'InputGroup.Addon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputLeadingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * An addon displayed before the input. Renders a <span> element.\n */\nconst Root = ({ className, ref, ...others }: InputLeadingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-l-full', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! -mr-px rounded-l-full')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputLeadingAddon = Object.assign(Root, {\n  id: 'LeadingAddon',\n})\n\nRoot.displayName = 'InputGroup.LeadingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { Icon, type IconProps } from '../icon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputIconProps = IconProps\n\nexport const InputIcon = ({ className, intent, children, ...others }: InputIconProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <Icon\n      data-spark-component=\"input-icon\"\n      intent={intent}\n      className={cx(\n        className,\n        'pointer-events-none absolute top-[calc(var(--spacing-sz-44)/2)] -translate-y-1/2',\n        intent ? undefined : 'text-neutral peer-focus:text-outline-high',\n        isInactive ? 'opacity-dim-3' : undefined\n      )}\n      {...others}\n    >\n      {children}\n    </Icon>\n  )\n}\n\nInputIcon.displayName = 'InputGroup.Icon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputLeadingIconProps = InputIconProps\n\n/** An icon displayed before the input text. Renders a <div> element. */\nexport const InputLeadingIcon = ({ className, ...others }: InputLeadingIconProps) => (\n  <InputIcon className={cx(className, 'left-lg text-body-1')} {...others} />\n)\n\nInputLeadingIcon.id = 'LeadingIcon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\n","import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { InputAddon, InputAddonProps } from './InputAddon'\nimport { useInputGroup } from './InputGroupContext'\n\nexport type InputTrailingAddonProps = InputAddonProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/** An addon displayed after the input. Renders a <span> element. */\nconst Root = ({ className, ref, ...others }: InputTrailingAddonProps) => {\n  const { disabled, readOnly } = useInputGroup()\n  const isInactive = disabled || readOnly\n\n  return (\n    <div className={cx('rounded-r-full', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! -ml-px rounded-r-full')}\n        {...others}\n      />\n    </div>\n  )\n}\n\nexport const InputTrailingAddon = Object.assign(Root, {\n  id: 'TrailingAddon',\n})\n\nRoot.displayName = 'InputGroup.TrailingAddon'\n","import { cx } from 'class-variance-authority'\n\nimport { InputIcon, InputIconProps } from './InputIcon'\n\nexport type InputTrailingIconProps = InputIconProps\n\n/** An icon displayed after the input text. Renders a <div> element. */\nexport const InputTrailingIcon = ({ className, ...others }: InputTrailingIconProps) => (\n  <InputIcon className={cx(className, 'right-lg text-body-1')} {...others} />\n)\n\nInputTrailingIcon.id = 'TrailingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const inputStyles = cva(\n  [\n    'relative',\n    'border-sm',\n    'peer',\n    'w-full',\n    'appearance-none outline-hidden',\n    'bg-surface',\n    'text-ellipsis text-body-1 text-on-surface',\n    'caret-neutral',\n    '[&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-on-surface)]',\n    'autofill:shadow-surface autofill:shadow-[inset_0_0_0px_1000px]',\n    'disabled:cursor-not-allowed disabled:border-outline disabled:bg-on-surface/dim-5 disabled:text-on-surface/dim-3',\n    'read-only:cursor-default read-only:pointer-events-none read-only:bg-on-surface/dim-5',\n    'focus:ring-1 focus:ring-inset focus:ring-focus focus:border-focus',\n  ],\n  {\n    variants: {\n      /**\n       * Change the component to the HTML tag or custom component of the only child.\n       */\n      asChild: {\n        true: ['min-h-sz-44'],\n        false: ['h-sz-44'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: {\n        neutral: ['border-outline', 'default:hover:border-outline-high'],\n        success: ['default:border-success'],\n        alert: ['default:border-alert'],\n        error: ['default:border-error'],\n      },\n      /**\n       * Sets if there is an addon before the input text.\n       */\n      hasLeadingAddon: {\n        true: ['rounded-l-0'],\n        false: ['rounded-l-input'],\n      },\n      /**\n       * Sets if there is an addon after the input text.\n       */\n      hasTrailingAddon: {\n        true: ['rounded-r-0'],\n        false: ['rounded-r-input'],\n      },\n      /**\n       * Sets if there is an icon before the input text.\n       */\n      hasLeadingIcon: {\n        true: ['pl-3xl'],\n        false: ['pl-lg'],\n      },\n      /**\n       * Sets if there is an icon after the input text.\n       */\n      hasTrailingIcon: { true: '' },\n      /**\n       * Sets if there is a button to clear the input text.\n       */\n      hasClearButton: { true: '' },\n    },\n    compoundVariants: [\n      {\n        hasTrailingIcon: false,\n        hasClearButton: false,\n        class: 'pr-lg',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: false,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: false,\n        hasClearButton: true,\n        class: 'pr-3xl',\n      },\n      {\n        hasTrailingIcon: true,\n        hasClearButton: true,\n        class: 'pr-[calc(var(--spacing-3xl)*2)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type InputStylesProps = VariantProps<typeof inputStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { ChangeEventHandler, ComponentPropsWithoutRef, KeyboardEventHandler, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { inputStyles } from './Input.styles'\nimport { useInputGroup } from './InputGroupContext'\n\ntype InputPrimitiveProps = ComponentPropsWithoutRef<'input'>\n\nexport interface InputProps extends InputPrimitiveProps {\n  asChild?: boolean\n  onValueChange?: (value: string) => void\n  ref?: Ref<HTMLInputElement>\n}\n\nconst Root = ({\n  className,\n  asChild = false,\n  onValueChange,\n  onChange,\n  onKeyDown,\n  disabled: disabledProp,\n  readOnly: readOnlyProp,\n  ref,\n  ...others\n}: InputProps) => {\n  const field = useFormFieldControl()\n  const group = useInputGroup()\n\n  const { id, name, isInvalid, isRequired, description } = field\n  const {\n    hasLeadingAddon,\n    hasTrailingAddon,\n    hasLeadingIcon,\n    hasTrailingIcon,\n    hasClearButton,\n    onClear,\n  } = group\n  const Component = asChild ? Slot : 'input'\n  const state = field.state || group.state\n  const disabled = field.disabled || group.disabled || disabledProp\n  const readOnly = field.readOnly || group.readOnly || readOnlyProp\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = event => {\n    if (onChange) {\n      onChange(event)\n    }\n\n    if (onValueChange) {\n      onValueChange(event.target.value)\n    }\n  }\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {\n    if (onKeyDown) {\n      onKeyDown(event)\n    }\n\n    if (hasClearButton && onClear && event.key === 'Escape') {\n      onClear()\n    }\n  }\n\n  return (\n    <Component\n      data-spark-component=\"input\"\n      ref={ref}\n      id={id}\n      name={name}\n      className={inputStyles({\n        asChild,\n        className,\n        intent: state,\n        hasLeadingAddon: !!hasLeadingAddon,\n        hasTrailingAddon: !!hasTrailingAddon,\n        hasLeadingIcon: !!hasLeadingIcon,\n        hasTrailingIcon: !!hasTrailingIcon,\n        hasClearButton: !!hasClearButton,\n      })}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      {...others}\n    />\n  )\n}\n\n/**\n * A text input field that allows users to enter and edit text content.\n */\nexport const Input = Object.assign(Root, {\n  id: 'Input',\n})\n\nRoot.displayName = 'Input'\n","import { InputClearButton } from './InputClearButton'\nimport { InputGroup as Root } from './InputGroup'\nimport { InputLeadingAddon } from './InputLeadingAddon'\nimport { InputLeadingIcon } from './InputLeadingIcon'\nimport { InputTrailingAddon } from './InputTrailingAddon'\nimport { InputTrailingIcon } from './InputTrailingIcon'\n\nexport * from './Input'\n\n/**\n * A wrapper component that combines an Input with addons, icons, and interactive elements\n * to create more complex text input patterns like search bars, password fields, or URL inputs.\n */\nexport const InputGroup: typeof Root & {\n  LeadingAddon: typeof InputLeadingAddon\n  TrailingAddon: typeof InputTrailingAddon\n  LeadingIcon: typeof InputLeadingIcon\n  TrailingIcon: typeof InputTrailingIcon\n  ClearButton: typeof InputClearButton\n} = Object.assign(Root, {\n  LeadingAddon: InputLeadingAddon,\n  TrailingAddon: InputTrailingAddon,\n  LeadingIcon: InputLeadingIcon,\n  TrailingIcon: InputTrailingIcon,\n  ClearButton: InputClearButton,\n})\n\nInputGroup.displayName = 'InputGroup'\nInputLeadingAddon.displayName = 'InputGroup.LeadingAddon'\nInputTrailingAddon.displayName = 'InputGroup.TrailingAddon'\nInputLeadingIcon.displayName = 'InputGroup.LeadingIcon'\nInputTrailingIcon.displayName = 'InputGroup.TrailingIcon'\nInputClearButton.displayName = 'InputGroup.ClearButton'\n\nexport { useInputGroup } from './InputGroupContext'\nexport { type InputGroupProps } from './InputGroup'\nexport { type InputLeadingIconProps } from './InputLeadingIcon'\nexport { type InputTrailingIconProps } from './InputTrailingIcon'\nexport { type InputLeadingAddonProps } from './InputLeadingAddon'\nexport { type InputTrailingAddonProps } from './InputTrailingAddon'\nexport { type InputClearButtonProps } from './InputClearButton'\n"],"mappings":"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"}

package/dist/popover-CSmCERcL.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-CSmCERcL.mjs","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\n  )\n}\n\nexport const usePopover = () => {\n  const context = useContext(PopoverContext)\n\n  if (!context) {\n    throw Error('usePopover must be used within a Popover provider')\n  }\n\n  return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n  intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n  return (\n    <PopoverProvider intent={intent}>\n      <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n        {children}\n      </RadixPopover.Root>\n    </PopoverProvider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n  <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n    {children}\n  </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n  ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n  asChild = false,\n  width = 16,\n  height = 8,\n  className,\n  ref,\n  ...rest\n}: ArrowProps) => {\n  const { intent } = usePopover()\n\n  /**\n   * This is necessary to override a Radix UI behaviour.\n   * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n   */\n  const styles = cva('visible', {\n    variants: {\n      intent: {\n        surface: 'fill-surface',\n        main: 'fill-main-container',\n        support: 'fill-support-container',\n        accent: 'fill-accent-container',\n        success: 'fill-success-container',\n        alert: 'fill-alert-container',\n        danger: 'fill-error-container',\n        info: 'fill-info-container',\n        neutral: 'fill-neutral-container',\n      },\n    },\n    defaultVariants: {\n      intent: 'surface',\n    },\n  })\n\n  return (\n    <RadixPopover.Arrow\n      data-spark-component=\"popover-arrow\"\n      ref={ref}\n      className={styles({ intent, className })}\n      asChild={asChild}\n      width={width}\n      height={height}\n      {...rest}\n    />\n  )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <RadixPopover.Close\n      data-spark-component=\"popover-close-button\"\n      ref={ref}\n      className={cx('right-lg top-md absolute', className)}\n      asChild\n      {...rest}\n    >\n      <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n        <Icon>\n          <CloseSVG />\n        </Icon>\n      </IconButton>\n    </RadixPopover.Close>\n  )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'rounded-md',\n    'shadow-sm',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    'max-h-(--radix-popper-available-height) overflow-y-auto',\n  ],\n  {\n    variants: {\n      intent: {\n        surface: 'bg-surface text-on-surface',\n        main: 'bg-main-container text-on-main-container',\n        support: 'bg-support-container text-on-support-container',\n        accent: 'bg-accent-container text-on-accent-container',\n        success: 'bg-success-container text-on-success-container',\n        alert: 'bg-alert-container text-on-alert-container',\n        danger: 'bg-error-container text-on-error-container',\n        info: 'bg-info-container text-on-info-container',\n        neutral: 'bg-neutral-container text-on-neutral-container',\n      },\n      matchTriggerWidth: {\n        true: 'w-(--radix-popper-anchor-width)',\n      },\n      enforceBoundaries: {\n        true: ['max-w-(--radix-popper-available-width)'],\n      },\n\n      inset: {\n        true: 'overflow-hidden',\n        false: 'p-lg',\n      },\n      elevation: {\n        dropdown: 'z-dropdown',\n        popover: 'z-popover',\n      },\n    },\n    compoundVariants: [\n      {\n        inset: false,\n        /**\n         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n         */\n        class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n      },\n      {\n        enforceBoundaries: false,\n        matchTriggerWidth: false,\n        class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n      },\n    ],\n    defaultVariants: {\n      matchTriggerWidth: false,\n      enforceBoundaries: false,\n      inset: false,\n      intent: 'surface',\n      elevation: 'popover',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n  StylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n  // Spark props\n  className,\n  children,\n  matchTriggerWidth = false,\n  // Radix props\n  align = 'center',\n  arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n  asChild = false,\n  avoidCollisions = true,\n  'aria-labelledby': ariaLabelledBy,\n  collisionBoundary,\n  collisionPadding = 0,\n  hideWhenDetached = false,\n  side = 'bottom',\n  sideOffset = 8,\n  sticky = 'partial',\n  inset = false,\n  elevation = 'popover',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { headerId, intent } = usePopover()\n\n  return (\n    <RadixPopover.Content\n      aria-labelledby={headerId || ariaLabelledBy}\n      className={styles({\n        enforceBoundaries: !!collisionBoundary,\n        matchTriggerWidth,\n        inset,\n        elevation,\n        intent,\n        className,\n      })}\n      data-spark-component=\"popover-content\"\n      ref={ref}\n      {...{\n        align,\n        arrowPadding,\n        asChild,\n        avoidCollisions,\n        collisionBoundary,\n        collisionPadding,\n        hideWhenDetached,\n        side,\n        sideOffset,\n        sticky,\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixPopover.Content>\n  )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n  const id = `${ID_PREFIX}-header-${useId()}`\n  const { setHeaderId } = usePopover()\n\n  useLayoutEffect(() => {\n    setHeaderId(id)\n\n    return () => setHeaderId(null)\n  }, [id, setHeaderId])\n\n  return (\n    <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n      {children}\n    </header>\n  )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}

package/dist/popover-CsCB_Fgs.js

@@ -1,2 +0,0 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./icon-CRPcdgYp.js`),t=require(`./icon-button-BSVlcyAO.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`radix-ui`),a=require(`react/jsx-runtime`),o=require(`@spark-ui/icons/Close`);var s=(0,r.createContext)(null),c=`:popover`,l=({children:e,intent:t})=>{let[n,i]=(0,r.useState)(null);return(0,a.jsx)(s.Provider,{value:{headerId:n,setHeaderId:i,intent:t},children:e})},u=()=>{let e=(0,r.useContext)(s);if(!e)throw Error(`usePopover must be used within a Popover provider`);return e},d=({children:e,intent:t=`surface`,modal:n=!1,...r})=>(0,a.jsx)(l,{intent:t,children:(0,a.jsx)(i.Popover.Root,{"data-spark-component":`popover`,modal:n,...r,children:e})});d.displayName=`Popover`;var f=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Anchor,{"data-spark-component":`popover-anchor`,ref:n,asChild:e,...r,children:t});f.displayName=`Popover.Anchor`;var p=({asChild:e=!1,width:t=16,height:r=8,className:o,ref:s,...c})=>{let{intent:l}=u(),d=(0,n.cva)(`visible`,{variants:{intent:{surface:`fill-surface`,main:`fill-main-container`,support:`fill-support-container`,accent:`fill-accent-container`,success:`fill-success-container`,alert:`fill-alert-container`,danger:`fill-error-container`,info:`fill-info-container`,neutral:`fill-neutral-container`}},defaultVariants:{intent:`surface`}});return(0,a.jsx)(i.Popover.Arrow,{"data-spark-component":`popover-arrow`,ref:s,className:d({intent:l,className:o}),asChild:e,width:t,height:r,...c})};p.displayName=`Popover.Arrow`;var m=({"aria-label":r,className:s,ref:c,...l})=>(0,a.jsx)(i.Popover.Close,{"data-spark-component":`popover-close-button`,ref:c,className:(0,n.cx)(`right-lg top-md absolute`,s),asChild:!0,...l,children:(0,a.jsx)(t.t,{size:`sm`,intent:`neutral`,design:`ghost`,"aria-label":r,children:(0,a.jsx)(e.t,{children:(0,a.jsx)(o.Close,{})})})});m.displayName=`Popover.CloseButton`;var h=(0,n.cva)([`rounded-md`,`shadow-sm`,`focus-visible:outline-hidden focus-visible:u-outline`,`max-h-(--radix-popper-available-height) overflow-y-auto`],{variants:{intent:{surface:`bg-surface text-on-surface`,main:`bg-main-container text-on-main-container`,support:`bg-support-container text-on-support-container`,accent:`bg-accent-container text-on-accent-container`,success:`bg-success-container text-on-success-container`,alert:`bg-alert-container text-on-alert-container`,danger:`bg-error-container text-on-error-container`,info:`bg-info-container text-on-info-container`,neutral:`bg-neutral-container text-on-neutral-container`},matchTriggerWidth:{true:`w-(--radix-popper-anchor-width)`},enforceBoundaries:{true:[`max-w-(--radix-popper-available-width)`]},inset:{true:`overflow-hidden`,false:`p-lg`},elevation:{dropdown:`z-dropdown`,popover:`z-popover`}},compoundVariants:[{inset:!1,class:`has-data-[spark-component=popover-close-button]:pr-3xl`},{enforceBoundaries:!1,matchTriggerWidth:!1,class:`max-w-[min(var(--spacing-sz-384),100vw)]`}],defaultVariants:{matchTriggerWidth:!1,enforceBoundaries:!1,inset:!1,intent:`surface`,elevation:`popover`}}),g=({className:e,children:t,matchTriggerWidth:n=!1,align:r=`center`,arrowPadding:o=16,asChild:s=!1,avoidCollisions:c=!0,"aria-labelledby":l,collisionBoundary:d,collisionPadding:f=0,hideWhenDetached:p=!1,side:m=`bottom`,sideOffset:g=8,sticky:_=`partial`,inset:v=!1,elevation:y=`popover`,ref:b,...x})=>{let{headerId:S,intent:C}=u();return(0,a.jsx)(i.Popover.Content,{"aria-labelledby":S||l,className:h({enforceBoundaries:!!d,matchTriggerWidth:n,inset:v,elevation:y,intent:C,className:e}),"data-spark-component":`popover-content`,ref:b,align:r,arrowPadding:o,asChild:s,avoidCollisions:c,collisionBoundary:d,collisionPadding:f,hideWhenDetached:p,side:m,sideOffset:g,sticky:_,...x,children:t})};g.displayName=`Popover.Content`;var _=({children:e,className:t,ref:i,...o})=>{let s=`${c}-header-${(0,r.useId)()}`,{setHeaderId:l}=u();return(0,r.useLayoutEffect)(()=>(l(s),()=>l(null)),[s,l]),(0,a.jsx)(`header`,{id:s,ref:i,className:(0,n.cx)(`mb-md text-headline-2`,t),...o,children:e})};_.displayName=`Popover.Header`;var v=({children:e,...t})=>(0,a.jsx)(i.Popover.Portal,{...t,children:e});v.displayName=`Popover.Portal`;var y=({asChild:e=!1,children:t,ref:n,...r})=>(0,a.jsx)(i.Popover.Trigger,{"data-spark-component":`popover-trigger`,ref:n,asChild:e,...r,children:t});y.displayName=`Popover.Trigger`;var b=Object.assign(d,{Anchor:f,Arrow:p,CloseButton:m,Content:g,Header:_,Portal:v,Trigger:y});b.displayName=`Popover`,f.displayName=`Popover.Anchor`,p.displayName=`Popover.Arrow`,m.displayName=`Popover.CloseButton`,g.displayName=`Popover.Content`,_.displayName=`Popover.Header`,v.displayName=`Popover.Portal`,y.displayName=`Popover.Trigger`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return b}});
-//# sourceMappingURL=popover-CsCB_Fgs.js.map

package/dist/popover-CsCB_Fgs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-CsCB_Fgs.js","names":[],"sources":["../src/popover/PopoverContext.tsx","../src/popover/Popover.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverContent.tsx","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n  | 'surface'\n  | 'main'\n  | 'support'\n  | 'accent'\n  | 'success'\n  | 'alert'\n  | 'danger'\n  | 'info'\n  | 'neutral'\nexport interface PopoverContextState {\n  headerId: HeaderId\n  setHeaderId: (id: HeaderId) => void\n  intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n  children,\n  intent,\n}: {\n  children: ReactNode\n  intent: PopoverIntent\n}) => {\n  const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n  return (\n    <PopoverContext.Provider\n      value={{\n        headerId,\n        setHeaderId,\n        intent,\n      }}\n    >\n      {children}\n    </PopoverContext.Provider>\n  )\n}\n\nexport const usePopover = () => {\n  const context = useContext(PopoverContext)\n\n  if (!context) {\n    throw Error('usePopover must be used within a Popover provider')\n  }\n\n  return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n  intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n  return (\n    <PopoverProvider intent={intent}>\n      <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n        {children}\n      </RadixPopover.Root>\n    </PopoverProvider>\n  )\n}\n\nPopover.displayName = 'Popover'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The anchor element for positioning the popover. Renders a <div> element.\n */\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n  <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n    {children}\n  </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n  ref?: Ref<SVGSVGElement>\n}\n\n/**\n * An arrow pointing to the anchor element. Renders an <svg> element.\n */\n\nexport const Arrow = ({\n  asChild = false,\n  width = 16,\n  height = 8,\n  className,\n  ref,\n  ...rest\n}: ArrowProps) => {\n  const { intent } = usePopover()\n\n  /**\n   * This is necessary to override a Radix UI behaviour.\n   * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n   */\n  const styles = cva('visible', {\n    variants: {\n      intent: {\n        surface: 'fill-surface',\n        main: 'fill-main-container',\n        support: 'fill-support-container',\n        accent: 'fill-accent-container',\n        success: 'fill-success-container',\n        alert: 'fill-alert-container',\n        danger: 'fill-error-container',\n        info: 'fill-info-container',\n        neutral: 'fill-neutral-container',\n      },\n    },\n    defaultVariants: {\n      intent: 'surface',\n    },\n  })\n\n  return (\n    <RadixPopover.Arrow\n      data-spark-component=\"popover-arrow\"\n      ref={ref}\n      className={styles({ intent, className })}\n      asChild={asChild}\n      width={width}\n      height={height}\n      {...rest}\n    />\n  )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n  'aria-label': string\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that closes the popover. Renders a <button> element.\n */\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <RadixPopover.Close\n      data-spark-component=\"popover-close-button\"\n      ref={ref}\n      className={cx('right-lg top-md absolute', className)}\n      asChild\n      {...rest}\n    >\n      <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n        <Icon>\n          <CloseSVG />\n        </Icon>\n      </IconButton>\n    </RadixPopover.Close>\n  )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  [\n    'rounded-md',\n    'shadow-sm',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    'max-h-(--radix-popper-available-height) overflow-y-auto',\n  ],\n  {\n    variants: {\n      intent: {\n        surface: 'bg-surface text-on-surface',\n        main: 'bg-main-container text-on-main-container',\n        support: 'bg-support-container text-on-support-container',\n        accent: 'bg-accent-container text-on-accent-container',\n        success: 'bg-success-container text-on-success-container',\n        alert: 'bg-alert-container text-on-alert-container',\n        danger: 'bg-error-container text-on-error-container',\n        info: 'bg-info-container text-on-info-container',\n        neutral: 'bg-neutral-container text-on-neutral-container',\n      },\n      matchTriggerWidth: {\n        true: 'w-(--radix-popper-anchor-width)',\n      },\n      enforceBoundaries: {\n        true: ['max-w-(--radix-popper-available-width)'],\n      },\n\n      inset: {\n        true: 'overflow-hidden',\n        false: 'p-lg',\n      },\n      elevation: {\n        dropdown: 'z-dropdown',\n        popover: 'z-popover',\n      },\n    },\n    compoundVariants: [\n      {\n        inset: false,\n        /**\n         * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n         */\n        class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n      },\n      {\n        enforceBoundaries: false,\n        matchTriggerWidth: false,\n        class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n      },\n    ],\n    defaultVariants: {\n      matchTriggerWidth: false,\n      enforceBoundaries: false,\n      inset: false,\n      intent: 'surface',\n      elevation: 'popover',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n  StylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\n/**\n * The popup element containing popover content. Renders a <div> element.\n */\n\nexport const Content = ({\n  // Spark props\n  className,\n  children,\n  matchTriggerWidth = false,\n  // Radix props\n  align = 'center',\n  arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n  asChild = false,\n  avoidCollisions = true,\n  'aria-labelledby': ariaLabelledBy,\n  collisionBoundary,\n  collisionPadding = 0,\n  hideWhenDetached = false,\n  side = 'bottom',\n  sideOffset = 8,\n  sticky = 'partial',\n  inset = false,\n  elevation = 'popover',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { headerId, intent } = usePopover()\n\n  return (\n    <RadixPopover.Content\n      aria-labelledby={headerId || ariaLabelledBy}\n      className={styles({\n        enforceBoundaries: !!collisionBoundary,\n        matchTriggerWidth,\n        inset,\n        elevation,\n        intent,\n        className,\n      })}\n      data-spark-component=\"popover-content\"\n      ref={ref}\n      {...{\n        align,\n        arrowPadding,\n        asChild,\n        avoidCollisions,\n        collisionBoundary,\n        collisionPadding,\n        hideWhenDetached,\n        side,\n        sideOffset,\n        sticky,\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixPopover.Content>\n  )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * The header section of the popover. Renders a <header> element.\n */\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n  const id = `${ID_PREFIX}-header-${useId()}`\n  const { setHeaderId } = usePopover()\n\n  useLayoutEffect(() => {\n    setHeaderId(id)\n\n    return () => setHeaderId(null)\n  }, [id, setHeaderId])\n\n  return (\n    <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n      {children}\n    </header>\n  )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\n/**\n * A portal that renders the popover in a different part of the DOM. Renders a <div> element.\n */\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\n/**\n * A button that opens the popover. Renders a <button> element.\n */\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n  <RadixPopover.Trigger\n    data-spark-component=\"popover-trigger\"\n    ref={ref}\n    asChild={asChild}\n    {...rest}\n  >\n    {children}\n  </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\n/**\n * A floating container that displays additional content when triggered, positioned relative to its trigger element.\n */\nexport const Popover: typeof Root & {\n  Anchor: typeof Anchor\n  Arrow: typeof Arrow\n  CloseButton: typeof CloseButton\n  Content: typeof Content\n  Header: typeof Header\n  Portal: typeof Portal\n  Trigger: typeof Trigger\n} = Object.assign(Root, {\n  Anchor,\n  Arrow,\n  CloseButton,\n  Content,\n  Header,\n  Portal,\n  Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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"}