@spark-ui/components 17.14.2 → 17.14.4-beta.0

package/dist/tag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption-highlight',\n    'px-md',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      size: makeVariants<'size', ['md', 'lg']>({\n        md: ['h-sz-20'],\n        lg: ['h-sz-24'],\n      }),\n      shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n        square: [],\n        rounded: ['rounded-tag'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'info', 'neutral', 'danger', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'support',\n      size: 'md',\n      shape: 'pill',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>, TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\n/**\n * A compact element that labels, categorizes, or organizes content using keywords.\n */\nexport const Tag = ({\n  design = 'filled',\n  intent = 'support',\n  size = 'md',\n  shape = 'pill',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n        size,\n        shape,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tag/variants/filled.ts","../../src/tag/variants/outlined.ts","../../src/tag/variants/tinted.ts","../../src/tag/Tag.styles.tsx","../../src/tag/Tag.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw(['bg-main', 'text-on-main']),\n  },\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw(['bg-support', 'text-on-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw(['bg-accent', 'text-on-accent']),\n  },\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw(['bg-success', 'text-on-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw(['bg-alert', 'text-on-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw(['bg-error', 'text-on-error']),\n  },\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw(['bg-info', 'text-on-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw(['bg-neutral', 'text-on-neutral']),\n  },\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw(['bg-surface', 'text-on-surface']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n  {\n    intent: 'main',\n    design: 'outlined',\n    class: tw(['text-main']),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw(['text-support']),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw(['text-accent']),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw(['text-success']),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw(['text-alert']),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw(['text-error']),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw(['text-info']),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw(['text-neutral']),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n  {\n    intent: 'main',\n    design: 'tinted',\n    class: tw(['bg-main-container', 'text-on-main-container']),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw(['bg-support-container', 'text-on-support-container']),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw(['bg-accent-container', 'text-on-accent-container']),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw(['bg-success-container', 'text-on-success-container']),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw(['bg-alert-container', 'text-on-alert-container']),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw(['bg-error-container', 'text-on-error-container']),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw(['bg-info-container', 'text-on-info-container']),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw(['bg-neutral-container', 'text-on-neutral-container']),\n  },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport { filledVariants, outlinedVariants, tintedVariants } from './variants'\n\nexport const tagStyles = cva(\n  [\n    'box-border default:inline-flex default:w-fit items-center justify-center gap-sm whitespace-nowrap',\n    'text-caption-highlight',\n    'px-md',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the tag.\n       * - `filled`: Tag will be plain.\n       * - `outlined`: Tag will have a surface background with an colored outline/text.\n       * - `tinted`: Tag will be filled but using a lighter color scheme.\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted']>({\n        filled: [],\n        outlined: ['border-sm', 'border-current'],\n        tinted: [],\n      }),\n      size: makeVariants<'size', ['md', 'lg']>({\n        md: ['h-sz-20'],\n        lg: ['h-sz-24'],\n      }),\n      shape: makeVariants<'shape', ['square', 'rounded', 'pill']>({\n        square: [],\n        rounded: ['rounded-tag'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Color scheme of the tag.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'info', 'neutral', 'danger', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [...filledVariants, ...outlinedVariants, ...tintedVariants],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'support',\n      size: 'md',\n      shape: 'pill',\n    },\n  }\n)\n\nexport type TagStylesProps = VariantProps<typeof tagStyles>\n","import { ButtonHTMLAttributes, type PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { tagStyles, type TagStylesProps } from './Tag.styles'\n\ninterface BaseTagProps\n  extends PropsWithChildren<ButtonHTMLAttributes<HTMLSpanElement>>, TagStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n}\n\ninterface FilteredDesignIntent<\n  Design extends TagProps['design'],\n  K extends TagStylesProps['intent'] | never = never,\n> {\n  design?: Design\n  intent?: Exclude<TagStylesProps['intent'], K>\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport type ValidTagDesignIntent =\n  | FilteredDesignIntent<'tinted', 'surface'>\n  | FilteredDesignIntent<'outlined', 'surface'>\n  | FilteredDesignIntent<'filled'>\n\nexport type TagProps = BaseTagProps & ValidTagDesignIntent\n\n/**\n * A compact element that labels, categorizes, or organizes content using keywords.\n */\nexport const Tag = ({\n  design = 'filled',\n  intent = 'support',\n  size = 'md',\n  shape = 'rounded',\n  asChild,\n  className,\n  ref,\n  ...others\n}: TagProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      data-spark-component=\"tag\"\n      ref={ref}\n      className={tagStyles({\n        className,\n        design,\n        intent,\n        size,\n        shape,\n      })}\n      {...others}\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/textarea/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../input-BSCMbnO4.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-[var(--spacing-sz-10)]`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../input-Dj8YT6P3.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=t=>(0,n.jsx)(e.t.ClearButton,{inline:!0,"data-spark-component":`textarea-group-trailing-icon`,...t});r.id=e.t.ClearButton.id,r.displayName=`TextareaGroup.ClearButton`;var i=t=>(0,n.jsx)(e.t,{...t});i.displayName=`TextareaGroup`;var a=t=>(0,n.jsx)(e.t.LeadingIcon,{"data-spark-component":`textarea-group-leading-icon`,...t});a.id=e.t.LeadingIcon.id,a.displayName=`TextareaGroup.LeadingIcon`;var o=t=>(0,n.jsx)(e.t.TrailingIcon,{"data-spark-component":`textarea-group-trailing-icon`,...t});o.id=e.t.TrailingIcon.id,o.displayName=`TextareaGroup.TrailingIcon`;var s=({className:r,disabled:i,rows:a=1,isResizable:o=!0,ref:s,onValueChange:c,...l})=>(0,n.jsx)(e.n,{className:(0,t.cx)(r,`py-sz-10 rounded-xl!`,o?`resize-y`:`resize-none`),"data-spark-component":`textarea`,disabled:i,asChild:!0,onValueChange:c,children:(0,n.jsx)(`textarea`,{ref:s,rows:a,...l})}),c=Object.assign(s,{id:e.n.id});s.displayName=`Textarea`;var l=Object.assign(i,{LeadingIcon:a,TrailingIcon:o,ClearButton:r});l.displayName=`TextareaGroup`,a.displayName=`TextareaGroup.LeadingIcon`,o.displayName=`TextareaGroup.TrailingIcon`,r.displayName=`TextareaGroup.ClearButton`,exports.Textarea=c,exports.TextareaGroup=l;
 //# sourceMappingURL=index.js.map

package/dist/textarea/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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":"oNAUA,IAAa,EAAuB,IAEhC,EAAA,EAAA,KAAC,EAAA,EAAW,YAAZ,CAAwB,OAAA,GAAO,uBAAqB,+BAA+B,GAAI,EAAS,CAAA,CAIpG,EAAoB,GAAK,EAAA,EAAW,YAAY,GAChD,EAAoB,YAAc,4BCblC,IAAa,EAAiB,IACrB,EAAA,EAAA,KAAC,EAAA,EAAD,CAAY,GAAI,EAAS,CAAA,CAGlC,EAAc,YAAc,gBCH5B,IAAa,EAAuB,IAC3B,EAAA,EAAA,KAAC,EAAA,EAAW,YAAZ,CAAwB,uBAAqB,8BAA8B,GAAI,EAAS,CAAA,CAGjG,EAAoB,GAAK,EAAA,EAAW,YAAY,GAChD,EAAoB,YAAc,4BCLlC,IAAa,EAAwB,IAC5B,EAAA,EAAA,KAAC,EAAA,EAAW,aAAZ,CAAyB,uBAAqB,+BAA+B,GAAI,EAAS,CAAA,CAGnG,EAAqB,GAAK,EAAA,EAAW,aAAa,GAClD,EAAqB,YAAc,6BCEnC,IAAM,GAAQ,CACZ,YACA,WACA,OAAO,EACP,cAAc,GACd,MACA,gBACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,WAAA,EAAA,EAAA,IACE,EACA,4BACA,EAAc,WAAa,cAC5B,CACD,uBAAqB,WACX,WACV,QAAA,GACe,0BAEf,EAAA,EAAA,KAAC,WAAD,CAAe,MAAW,OAAM,GAAI,EAAU,CAAA,CACxC,CAAA,CAOC,EAAW,OAAO,OAAO,EAAM,CAC1C,GAAI,EAAA,EAAM,GACX,CAAC,CAEF,EAAK,YAAc,WClCnB,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,YAAa,EACb,aAAc,EACd,YAAa,EACd,CAAC,CAEF,EAAc,YAAc,gBAC5B,EAAoB,YAAc,4BAClC,EAAqB,YAAc,6BACnC,EAAoB,YAAc"}
+{"version":3,"file":"index.js","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":"oNAUA,IAAa,EAAuB,IAEhC,EAAA,EAAA,KAAC,EAAA,EAAW,YAAZ,CAAwB,OAAA,GAAO,uBAAqB,+BAA+B,GAAI,EAAS,CAAA,CAIpG,EAAoB,GAAK,EAAA,EAAW,YAAY,GAChD,EAAoB,YAAc,4BCblC,IAAa,EAAiB,IACrB,EAAA,EAAA,KAAC,EAAA,EAAD,CAAY,GAAI,EAAS,CAAA,CAGlC,EAAc,YAAc,gBCH5B,IAAa,EAAuB,IAC3B,EAAA,EAAA,KAAC,EAAA,EAAW,YAAZ,CAAwB,uBAAqB,8BAA8B,GAAI,EAAS,CAAA,CAGjG,EAAoB,GAAK,EAAA,EAAW,YAAY,GAChD,EAAoB,YAAc,4BCLlC,IAAa,EAAwB,IAC5B,EAAA,EAAA,KAAC,EAAA,EAAW,aAAZ,CAAyB,uBAAqB,+BAA+B,GAAI,EAAS,CAAA,CAGnG,EAAqB,GAAK,EAAA,EAAW,aAAa,GAClD,EAAqB,YAAc,6BCEnC,IAAM,GAAQ,CACZ,YACA,WACA,OAAO,EACP,cAAc,GACd,MACA,gBACA,GAAG,MAGD,EAAA,EAAA,KAAC,EAAA,EAAD,CACE,WAAA,EAAA,EAAA,IAAc,EAAW,uBAAwB,EAAc,WAAa,cAAc,CAC1F,uBAAqB,WACX,WACV,QAAA,GACe,0BAEf,EAAA,EAAA,KAAC,WAAD,CAAe,MAAW,OAAM,GAAI,EAAU,CAAA,CACxC,CAAA,CAOC,EAAW,OAAO,OAAO,EAAM,CAC1C,GAAI,EAAA,EAAM,GACX,CAAC,CAEF,EAAK,YAAc,WC9BnB,IAAa,EAIT,OAAO,OAAO,EAAM,CACtB,YAAa,EACb,aAAc,EACd,YAAa,EACd,CAAC,CAEF,EAAc,YAAc,gBAC5B,EAAoB,YAAc,4BAClC,EAAqB,YAAc,6BACnC,EAAoB,YAAc"}

package/dist/textarea/index.mjs

@@ -1,4 +1,4 @@
-import { n as e, t } from "../input-cKdm2R3n.mjs";
+import { n as e, t } from "../input-CXQMncfN.mjs";
 import { cx as n } from "class-variance-authority";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/textarea/TextareaClearButton.tsx
@@ -29,7 +29,7 @@ s.id = t.TrailingIcon.id, s.displayName = "TextareaGroup.TrailingIcon";
 //#endregion
 //#region src/textarea/Textarea.tsx
 var c = ({ className: t, disabled: i, rows: a = 1, isResizable: o = !0, ref: s, onValueChange: c, ...l }) => /* @__PURE__ */ r(e, {
-	className: n(t, "py-[var(--spacing-sz-10)]", o ? "resize-y" : "resize-none"),
+	className: n(t, "py-sz-10 rounded-xl!", o ? "resize-y" : "resize-none"),
 	"data-spark-component": "textarea",
 	disabled: i,
 	asChild: !0,

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(\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"}
+{"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"}

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-pz6WB_vb.js`),i=require(`../icon-button-BKVPOP0K.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 o.useMemo(()=>({...e,closeAll:t}),[e,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-DHeX5cfF.js`),i=require(`../icon-button-C1r7EJkb.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.useRef(e);return t.current=e,o.useMemo(()=>({get toasts(){return t.current.toasts},add:e=>t.current.add(e),update:(e,n)=>t.current.update(e,n),close:e=>t.current.close(e),promise:(e,n)=>t.current.promise(e,n),closeAll:()=>t.current.toasts.forEach(({id:e})=>t.current.close(e))}),[])}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.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[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))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    '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)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const baseToastManager = BaseToast.useToastManager()\n\n  const closeAll = React.useCallback((): void => {\n    baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n  }, [baseToastManager])\n\n  // Memoize the returned object so its reference is stable across renders,\n  // preventing infinite loops when used as a useEffect dependency.\n  return React.useMemo(\n    () => ({ ...baseToastManager, closeAll }) as UseToastManagerReturnValue,\n    [baseToastManager, closeAll]\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[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))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    '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)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const manager = BaseToast.useToastManager()\n  const managerRef = React.useRef(manager)\n  managerRef.current = manager\n\n  return React.useMemo(\n    () => ({\n      get toasts() {\n        return managerRef.current.toasts\n      },\n      add: options => managerRef.current.add(options),\n      update: (id, options) => managerRef.current.update(id, options),\n      close: id => managerRef.current.close(id),\n      promise: (p, options) => managerRef.current.promise(p, options),\n      closeAll: () => managerRef.current.toasts.forEach(({ id }) => managerRef.current.close(id)),\n    }),\n    []\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}

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-D49vse7F.mjs";
-import { t as r } from "../icon-button-Bw0k4nKs.mjs";
+import { t as n } from "../button-CN6S8r-l.mjs";
+import { t as r } from "../icon-button-CIwr0GiT.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";
@@ -253,13 +253,17 @@ function x({ toast: e }) {
 //#endregion
 //#region src/toast/useToastManager.ts
 function S() {
-	let e = u.useToastManager(), t = o.useCallback(() => {
-		e.toasts.forEach(({ id: t }) => e.close(t));
-	}, [e]);
-	return o.useMemo(() => ({
-		...e,
-		closeAll: t
-	}), [e, t]);
+	let e = u.useToastManager(), t = o.useRef(e);
+	return t.current = e, o.useMemo(() => ({
+		get toasts() {
+			return t.current.toasts;
+		},
+		add: (e) => t.current.add(e),
+		update: (e, n) => t.current.update(e, n),
+		close: (e) => t.current.close(e),
+		promise: (e, n) => t.current.promise(e, n),
+		closeAll: () => t.current.toasts.forEach(({ id: e }) => t.current.close(e))
+	}), []);
 }
 //#endregion
 //#region src/toast/index.tsx

package/dist/toast/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[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))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    '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)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const baseToastManager = BaseToast.useToastManager()\n\n  const closeAll = React.useCallback((): void => {\n    baseToastManager.toasts.forEach(({ id }) => baseToastManager.close(id))\n  }, [baseToastManager])\n\n  // Memoize the returned object so its reference is stable across renders,\n  // preventing infinite loops when used as a useEffect dependency.\n  return React.useMemo(\n    () => ({ ...baseToastManager, closeAll }) as UseToastManagerReturnValue,\n    [baseToastManager, closeAll]\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toast/Toast.styles.ts","../../src/toast/Toast.tsx","../../src/toast/useToastManager.ts","../../src/toast/index.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\n\nexport const toastStyles = cva(\n  [\n    'gap-lg p-md flex w-max !w-[min(400px,calc(100vw-2rem))] flex-col rounded-lg border-md',\n    'absolute right-0 bottom-0 left-auto mr-0',\n    'bg-clip-padding shadow-md select-none',\n    'focus-visible:ring-focus focus-visible:ring-2 focus-visible:outline-none',\n    'z-[calc(1000-var(--toast-index))]',\n    \"after:absolute after:bottom-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']\",\n    // Stack effect while not focused\n    '[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))))]',\n    // Scale and translate\n    'ease-standard [transition-property:opacity,transform]',\n    'duration-400',\n    // Present when the toast is animating in.\n    'data-[starting-style]:[transform:translateY(150%)]',\n    // Expanded: Present when the toast is expanded in the viewport.\n    '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)))]',\n    // Present when the toast is animating out.\n    'data-[ending-style]:duration-250',\n    'data-[ending-style]:opacity-0',\n    'data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]',\n    'data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]',\n    // Limited: Present when the toast was removed due to exceeding the limit.\n    'data-[limited]:opacity-0',\n  ],\n  {\n    variants: {\n      design: {\n        filled: '',\n        tinted: '',\n      },\n      intent: {\n        success: '',\n        alert: '',\n        error: '',\n        info: '',\n        neutral: '',\n        main: '',\n        support: '',\n        accent: '',\n        surface: '',\n        surfaceInverse: '',\n      },\n    },\n    compoundVariants: [\n      // Filled variants\n      {\n        design: 'filled',\n        intent: 'success',\n        class: ['bg-success text-on-success border-success'],\n      },\n      {\n        design: 'filled',\n        intent: 'alert',\n        class: ['bg-alert text-on-alert border-alert'],\n      },\n      {\n        design: 'filled',\n        intent: 'error',\n        class: ['bg-error text-on-error border-error'],\n      },\n      {\n        design: 'filled',\n        intent: 'info',\n        class: ['bg-info text-on-info border-info'],\n      },\n      {\n        design: 'filled',\n        intent: 'neutral',\n        class: ['bg-neutral text-on-neutral border-neutral'],\n      },\n      {\n        design: 'filled',\n        intent: 'main',\n        class: ['bg-main text-on-main border-main'],\n      },\n      {\n        design: 'filled',\n        intent: 'support',\n        class: ['bg-support text-on-support border-support'],\n      },\n      {\n        design: 'filled',\n        intent: 'accent',\n        class: ['bg-accent text-on-accent border-accent'],\n      },\n      {\n        design: 'filled',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'filled',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n\n      // Tinted variants\n      {\n        design: 'tinted',\n        intent: 'success',\n        class: ['bg-success-container text-on-success-container border-success'],\n      },\n      {\n        design: 'tinted',\n        intent: 'alert',\n        class: ['bg-alert-container text-on-alert-container border-alert'],\n      },\n      {\n        design: 'tinted',\n        intent: 'error',\n        class: ['bg-error-container text-on-error-container border-error'],\n      },\n      {\n        design: 'tinted',\n        intent: 'info',\n        class: ['bg-info-container text-on-info-container border-info'],\n      },\n      {\n        design: 'tinted',\n        intent: 'neutral',\n        class: ['bg-neutral-container text-on-neutral-container border-neutral'],\n      },\n      {\n        design: 'tinted',\n        intent: 'main',\n        class: ['bg-main-container text-on-main-container border-main'],\n      },\n      {\n        design: 'tinted',\n        intent: 'support',\n        class: ['bg-support-container text-on-support-container border-support'],\n      },\n      {\n        design: 'tinted',\n        intent: 'accent',\n        class: ['bg-accent-container text-on-accent-container border-accent'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surface',\n        class: ['bg-surface text-on-surface border-surface'],\n      },\n      {\n        design: 'tinted',\n        intent: 'surfaceInverse',\n        class: ['bg-surface-inverse text-on-surface-inverse border-surface-inverse'],\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'neutral',\n    },\n  }\n)\n\nexport type ToastVariantProps = VariantProps<typeof toastStyles>\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Button, ButtonProps } from '@spark-ui/components/button'\nimport { Icon } from '@spark-ui/components/icon'\nimport { IconButton } from '@spark-ui/components/icon-button'\nimport { AlertFill } from '@spark-ui/icons/AlertFill'\nimport { Close } from '@spark-ui/icons/Close'\nimport { InfoFill } from '@spark-ui/icons/InfoFill'\nimport { ValidFill } from '@spark-ui/icons/ValidFill'\nimport { WarningFill } from '@spark-ui/icons/WarningFill'\nimport { cx } from 'class-variance-authority'\n\nimport { toastStyles } from './Toast.styles'\nimport type { ToastData, ToastDesign, ToastIntent, ToastObject } from './types'\n\nfunction getButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surface'\n  if (intent === 'surface') return 'surfaceInverse'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nfunction getCloseButtonIntent(intent?: ToastIntent): ButtonProps['intent'] {\n  if (intent === 'surfaceInverse') return 'surfaceInverse'\n  if (intent === 'surface') return 'surface'\n  if (intent === 'error') return 'danger'\n\n  return intent as ButtonProps['intent']\n}\n\nconst getActionProps = (\n  action: ToastData['action'],\n  { toastDesign, toastIntent }: { toastDesign?: ToastDesign; toastIntent?: ToastIntent }\n): ButtonProps => {\n  if (!action) return {}\n\n  const { design, intent, className, onClick, ...rest } = action\n\n  return {\n    design: design ?? toastDesign,\n    intent: intent ?? getButtonIntent(toastIntent),\n    className: cx('ml-auto', className),\n    onClick,\n    ...rest,\n  }\n}\n\nconst getToastRootProps = (toast: ToastObject, design: ToastDesign, intent: ToastIntent) => ({\n  swipeDirection: ['down', 'right'] as ['down', 'right'],\n  toast,\n  className: cx(toastStyles({ design, intent })),\n  style: {\n    ['--gap' as string]: 'var(--spacing-md)',\n    ['--offset-y' as string]:\n      'calc(var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y))',\n  },\n})\n\nfunction getDefaultIcon(intent: ToastIntent): React.ReactNode {\n  switch (intent) {\n    case 'info':\n      return <InfoFill />\n    case 'success':\n      return <ValidFill />\n    case 'alert':\n      return <WarningFill />\n    case 'error':\n      return <AlertFill />\n    case 'main':\n    case 'support':\n    case 'accent':\n    case 'neutral':\n    case 'surface':\n    case 'surfaceInverse':\n    default:\n      return <InfoFill />\n  }\n}\n\nexport function Toast({ toast }: { toast: ToastObject }) {\n  const {\n    icon: ToastIcon,\n    intent = 'info',\n    design: _design, // deprecated prop, ignored\n    action,\n    isClosable,\n    closeLabel = 'Close',\n    compact = false,\n  } = toast.data ?? {}\n\n  // Always use 'tinted' design regardless of prop value\n  const design = 'tinted' as const\n\n  const ActionButton = action?.close ? BaseToast.Close : BaseToast.Action\n  const actionProps = getActionProps(action, { toastDesign: design, toastIntent: intent })\n  const rootProps = getToastRootProps(toast, design, intent)\n\n  // Use provided icon or default icon based on intent\n  const icon = ToastIcon ?? getDefaultIcon(intent)\n\n  const getCloseButton = (className?: string) => {\n    if (!isClosable) return null\n\n    return (\n      <BaseToast.Close\n        className={className}\n        render={\n          <IconButton\n            aria-label={closeLabel}\n            design={design}\n            intent={getCloseButtonIntent(intent)}\n            size=\"md\"\n          />\n        }\n      >\n        <Icon>\n          <Close />\n        </Icon>\n      </BaseToast.Close>\n    )\n  }\n\n  const renderTitle = () => {\n    // Check ToastData first for JSX, then fallback to toast.title (string)\n    const title = toast.data?.title ?? toast.title\n    const hasDescription = !!(toast.data?.description ?? toast.description)\n\n    if (typeof title !== 'string' && title !== undefined) {\n      return (\n        <BaseToast.Title\n          className={hasDescription ? 'text-headline-2' : 'text-body-1'}\n          render={<div />}\n        >\n          {title}\n        </BaseToast.Title>\n      )\n    }\n\n    return <BaseToast.Title className={hasDescription ? 'text-headline-2' : 'text-body-1'} />\n  }\n\n  const renderDescription = () => {\n    // Check ToastData first for JSX, then fallback to toast.description (string)\n    const description = toast.data?.description ?? toast.description\n\n    if (!description) return null\n\n    if (typeof description !== 'string') {\n      return (\n        <BaseToast.Description className=\"text-body-1\" render={<div />}>\n          {description}\n        </BaseToast.Description>\n      )\n    }\n\n    return <BaseToast.Description className=\"text-body-1\" />\n  }\n\n  return (\n    <BaseToast.Root key={toast.id} {...rootProps}>\n      <div className={cx('flex', compact ? 'gap-lg items-center' : 'gap-md flex-col')}>\n        <div className=\"gap-lg p-md flex grow items-center\">\n          {/* Icon */}\n          <Icon size=\"md\">{icon}</Icon>\n          {/* Title and description */}\n          <div\n            className={cx(\n              'gap-sm flex flex-col',\n              compact && 'flex-1',\n              !compact && isClosable && 'pr-3xl'\n            )}\n          >\n            {renderTitle()}\n            {renderDescription()}\n          </div>\n        </div>\n\n        <div className={cx('flex')}>\n          {/* Action button */}\n          {action && (\n            <ActionButton render={<Button {...actionProps} />}>{action.label}</ActionButton>\n          )}\n          {/* Close button - compact layout only */}\n          {compact && getCloseButton()}\n        </div>\n\n        {/* Close button - default layout only */}\n        {!compact && getCloseButton('top-md right-md absolute')}\n      </div>\n    </BaseToast.Root>\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport * as React from 'react'\n\nimport type { UseToastManagerReturnValue } from './types'\n\nexport function useToastManager(): UseToastManagerReturnValue {\n  const manager = BaseToast.useToastManager()\n  const managerRef = React.useRef(manager)\n  managerRef.current = manager\n\n  return React.useMemo(\n    () => ({\n      get toasts() {\n        return managerRef.current.toasts\n      },\n      add: options => managerRef.current.add(options),\n      update: (id, options) => managerRef.current.update(id, options),\n      close: id => managerRef.current.close(id),\n      promise: (p, options) => managerRef.current.promise(p, options),\n      closeAll: () => managerRef.current.toasts.forEach(({ id }) => managerRef.current.close(id)),\n    }),\n    []\n  )\n}\n","import { Toast as BaseToast } from '@base-ui/react/toast'\nimport { Slot } from '@spark-ui/components/slot'\nimport { cx } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { Toast } from './Toast'\nimport type { ToastData, ToastObject } from './types'\nimport { useToastManager } from './useToastManager'\n\nexport * from './types'\n\nfunction ToastList() {\n  const { toasts } = useToastManager()\n\n  return toasts.map(toast => <Toast key={toast.id} toast={toast} />)\n}\n\ninterface ToastProviderProps extends React.ComponentProps<typeof BaseToast.Provider> {\n  children: React.ReactNode\n}\n\n/**\n * A provider component that manages and displays temporary notification messages to users.\n */\nexport function ToastProvider({ children, limit = 3, ...props }: ToastProviderProps) {\n  return (\n    <BaseToast.Provider limit={limit} {...props}>\n      <BaseToast.Portal>\n        <BaseToast.Viewport\n          className={cx(\n            'z-toast right-lg bottom-lg text-on-surfa- fixed top-auto mx-auto flex w-fit flex-col items-end'\n          )}\n        >\n          <ToastList />\n        </BaseToast.Viewport>\n      </BaseToast.Portal>\n      {children}\n    </BaseToast.Provider>\n  )\n}\n\ninterface ToastTriggerProps\n  extends\n    Omit<React.ComponentPropsWithRef<'button'>, 'title'>,\n    Pick<ToastObject, 'priority'>,\n    Pick<ToastData, 'design' | 'intent' | 'icon' | 'isClosable' | 'action' | 'compact'> {\n  children: React.ReactNode\n  asChild?: boolean\n  title: string | React.ReactNode\n  description?: string | React.ReactNode\n  timeout?: number\n}\n\nexport function ToastTrigger({\n  children,\n  onClick,\n  asChild = false,\n  title,\n  description,\n  timeout = 5000,\n  design = 'filled',\n  intent = 'neutral',\n  isClosable = true,\n  icon,\n  action,\n  compact,\n  priority = 'low',\n}: ToastTriggerProps) {\n  const toastManager = useToastManager()\n\n  const Component = asChild ? Slot : 'button'\n\n  function createToast(e: React.MouseEvent<HTMLButtonElement>) {\n    onClick?.(e)\n    toastManager.add({\n      title,\n      description,\n      timeout,\n      priority,\n      data: {\n        design,\n        intent,\n        isClosable,\n        ...(icon && { icon }),\n        action,\n        ...(compact !== undefined && { compact }),\n      },\n    })\n  }\n\n  return (\n    <Component {...(!asChild && { type: 'button' })} onClick={createToast}>\n      {children}\n    </Component>\n  )\n}\n\nexport type ToastManager = ReturnType<typeof BaseToast.createToastManager>\n\nexport const createToastManager: () => ToastManager = BaseToast.createToastManager\n\nexport { useToastManager }\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.14.2",
+  "version": "17.14.4-beta.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@spark-ui/hooks": "17.14.2",
-    "@spark-ui/icons": "17.14.2",
-    "@spark-ui/internal-utils": "17.14.2",
+    "@spark-ui/hooks": "17.14.4-beta.0",
+    "@spark-ui/icons": "17.14.4-beta.0",
+    "@spark-ui/internal-utils": "17.14.4-beta.0",
     "@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.14.2",
+    "@spark-ui/theme-utils": "17.14.4-beta.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"

package/dist/icon-button-BKVPOP0K.js

@@ -1,2 +0,0 @@
-require(`./chunk-C91j1N6u.js`);const e=require(`./button-pz6WB_vb.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=`rounded`,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-BKVPOP0K.js.map

package/dist/input-BSCMbnO4.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?.props.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,{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-lg`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-r-0! mr-[-1px] rounded-l-lg`),...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-lg`,a||o?`bg-on-surface/dim-5`:null),children:(0,i.jsx)(g,{ref:t,className:(0,n.cx)(e,`rounded-l-0! ml-[-1px] rounded-r-lg`),...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-BSCMbnO4.js.map

package/dist/input-BSCMbnO4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-BSCMbnO4.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?.props.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 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>\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-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-r-0! mr-[-1px] rounded-l-lg')}\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-lg', isInactive ? 'bg-on-surface/dim-5' : null)}>\n      <InputAddon\n        ref={ref}\n        className={cx(className, 'rounded-l-0! ml-[-1px] rounded-r-lg')}\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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"}