@spark-ui/components 12.1.2 → 13.0.1-beta.0

package/dist/chunk-HEKSVWYW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/Button.tsx","../src/button/Button.styles.tsx","../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n  extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>,\n    ButtonStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n   */\n  isLoading?: boolean\n  /**\n   * If your loading state should only display a spinner, it's better to specify a label for it (a11y).\n   */\n  loadingLabel?: string\n  /**\n   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n   */\n  loadingText?: string\n  ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n  DOMAttributes<HTMLButtonElement>,\n  'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOver',\n  'onMouseOut',\n  'onKeyDown',\n  'onKeyPress',\n  'onKeyUp',\n  'onSubmit',\n]\n\nexport const Button = ({\n  children,\n  design = 'filled',\n  disabled = false,\n  intent = 'main',\n  isLoading = false,\n  loadingLabel,\n  loadingText,\n  shape = 'rounded',\n  size = 'md',\n  asChild,\n  className,\n  underline = false,\n  ref,\n  ...others\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button'\n\n  const shouldNotInteract = !!disabled || isLoading\n\n  const disabledEventHandlers = useMemo(() => {\n    const result: Partial<Record<DOMAttributesEventHandler, () => void>> = {}\n\n    if (shouldNotInteract) {\n      blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))\n    }\n\n    return result\n  }, [shouldNotInteract])\n\n  const spinnerProps = {\n    size: 'current' as SpinnerProps['size'],\n    className: loadingText ? 'inline-block' : 'absolute',\n    ...(loadingLabel && { 'aria-label': loadingLabel }),\n  }\n\n  return (\n    <Component\n      data-spark-component=\"button\"\n      {...(Component === 'button' && { type: 'button' })}\n      ref={ref}\n      className={buttonStyles({\n        className,\n        design,\n        disabled: shouldNotInteract,\n        intent,\n        shape,\n        size,\n        underline,\n      })}\n      disabled={!!disabled}\n      aria-busy={isLoading}\n      aria-live={isLoading ? 'assertive' : 'off'}\n      {...others}\n      {...disabledEventHandlers}\n    >\n      {wrapPolymorphicSlot(asChild, children, slotted =>\n        isLoading ? (\n          <>\n            <Spinner {...spinnerProps} />\n            {loadingText && loadingText}\n\n            <div\n              aria-hidden\n              className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n            >\n              {slotted}\n            </div>\n          </>\n        ) : (\n          slotted\n        )\n      )}\n    </Component>\n  )\n}\n\nButton.displayName = 'Button'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n  contrastVariants,\n  filledVariants,\n  ghostVariants,\n  outlinedVariants,\n  tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n  [\n    'u-shadow-border-transition',\n    'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n    'default:px-lg',\n    'text-body-1 font-bold',\n    'focus-visible:u-outline',\n  ],\n  {\n    variants: {\n      /**\n       * Main style of the button.\n       *\n       * - `filled`: Button will be plain.\n       *\n       * - `outlined`: Button will be transparent with an outline.\n       *\n       * - `tinted`: Button will be filled but using a lighter color scheme.\n       *\n       * - `ghost`: Button will look like a link. No borders, plain text.\n       *\n       * - `contrast`: Button will be surface filled. No borders, plain text.\n       *\n       */\n      design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n        filled: [],\n        outlined: ['bg-transparent', 'border-sm', 'border-current'],\n        tinted: [],\n        ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n        contrast: [],\n      }),\n      underline: {\n        true: ['underline'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n      /**\n       * Size of the button.\n       */\n      size: makeVariants<'size', ['sm', 'md', 'lg']>({\n        sm: ['min-w-sz-32', 'h-sz-32'],\n        md: ['min-w-sz-44', 'h-sz-44'],\n        lg: ['min-w-sz-56', 'h-sz-56'],\n      }),\n      /**\n       * Shape of the button.\n       */\n      shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n        rounded: ['rounded-lg'],\n        square: ['rounded-0'],\n        pill: ['rounded-full'],\n      }),\n      /**\n       * Disable the button, preventing user interaction and adding opacity.\n       */\n      disabled: {\n        true: ['cursor-not-allowed', 'opacity-dim-3'],\n        false: ['cursor-pointer'],\n      },\n    },\n    compoundVariants: [\n      ...filledVariants,\n      ...outlinedVariants,\n      ...tintedVariants,\n      ...ghostVariants,\n      ...contrastVariants,\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'main',\n      size: 'md',\n      shape: 'rounded',\n    },\n  }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n  // Main\n  {\n    intent: 'main',\n    design: 'filled',\n    class: tw([\n      'bg-main',\n      'text-on-main',\n      'hover:bg-main-hovered',\n      'enabled:active:bg-main-hovered',\n      'focus-visible:bg-main-hovered',\n    ]),\n  },\n  // Support\n  {\n    intent: 'support',\n    design: 'filled',\n    class: tw([\n      'bg-support',\n      'text-on-support',\n      'hover:bg-support-hovered',\n      'enabled:active:bg-support-hovered',\n      'focus-visible:bg-support-hovered',\n    ]),\n  },\n  // Accent\n  {\n    intent: 'accent',\n    design: 'filled',\n    class: tw([\n      'bg-accent',\n      'text-on-accent',\n      'hover:bg-accent-hovered',\n      'enabled:active:bg-accent-hovered',\n      'focus-visible:bg-accent-hovered',\n    ]),\n  },\n  // Basic\n  {\n    intent: 'basic',\n    design: 'filled',\n    class: tw([\n      'bg-basic',\n      'text-on-basic',\n      'hover:bg-basic-hovered',\n      'enabled:active:bg-basic-hovered',\n      'focus-visible:bg-basic-hovered',\n    ]),\n  },\n  // Success\n  {\n    intent: 'success',\n    design: 'filled',\n    class: tw([\n      'bg-success',\n      'text-on-success',\n      'hover:bg-success-hovered',\n      'enabled:active:bg-success-hovered',\n      'focus-visible:bg-success-hovered',\n    ]),\n  },\n  // Alert\n  {\n    intent: 'alert',\n    design: 'filled',\n    class: tw([\n      'bg-alert',\n      'text-on-alert',\n      'hover:bg-alert-hovered',\n      'enabled:active:bg-alert-hovered',\n      'focus-visible:bg-alert-hovered',\n    ]),\n  },\n  // Danger\n  {\n    intent: 'danger',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-error',\n      'hover:bg-error-hovered enabled:active:bg-error-hovered',\n      'focus-visible:bg-error-hovered',\n    ]),\n  },\n  // Info\n  {\n    intent: 'info',\n    design: 'filled',\n    class: tw([\n      'text-on-error bg-info',\n      'hover:bg-info-hovered enabled:active:bg-info-hovered',\n      'focus-visible:bg-info-hovered',\n    ]),\n  },\n  // Neutral\n  {\n    intent: 'neutral',\n    design: 'filled',\n    class: tw([\n      'bg-neutral',\n      'text-on-neutral',\n      'hover:bg-neutral-hovered',\n      'enabled:active:bg-neutral-hovered',\n      'focus-visible:bg-neutral-hovered',\n    ]),\n  },\n  // Surface\n  {\n    intent: 'surface',\n    design: 'filled',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'filled',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n  {\n    intent: 'main',\n    design: 'ghost',\n    class: tw([\n      'text-on-main-container',\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'ghost',\n    class: tw([\n      'text-on-support-container',\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'ghost',\n    class: tw([\n      'text-on-accent-container',\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'ghost',\n    class: tw([\n      'text-on-basic-container',\n      'hover:bg-basic/dim-5',\n      'enabled:active:bg-basic/dim-5',\n      'focus-visible:bg-basic/dim-5',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'ghost',\n    class: tw([\n      'text-on-success-container',\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'ghost',\n    class: tw([\n      'text-on-alert-container',\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'ghost',\n    class: tw([\n      'text-on-error-container',\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'ghost',\n    class: tw([\n      'text-on-info-container',\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'ghost',\n    class: tw([\n      'text-on-neutral-container',\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'ghost',\n    class: tw([\n      'text-surface',\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'ghost',\n    class: tw([\n      'text-surface-inverse',\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n    ]),\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([\n      'hover:bg-main/dim-5',\n      'enabled:active:bg-main/dim-5',\n      'focus-visible:bg-main/dim-5',\n      'text-main',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-support/dim-5',\n      'enabled:active:bg-support/dim-5',\n      'focus-visible:bg-support/dim-5',\n      'text-support',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-accent/dim-5',\n      'enabled:active:bg-accent/dim-5',\n      'focus-visible:bg-accent/dim-5',\n      'text-accent',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-basic/dim-5',\n      'enabled:active:bg-basic/dim-5',\n      'focus-visible:bg-basic/dim-5',\n      'text-basic',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-success/dim-5',\n      'enabled:active:bg-success/dim-5',\n      'focus-visible:bg-success/dim-5',\n      'text-success',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-alert/dim-5',\n      'enabled:active:bg-alert/dim-5',\n      'focus-visible:bg-alert/dim-5',\n      'text-alert',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-error/dim-5',\n      'enabled:active:bg-error/dim-5',\n      'focus-visible:bg-error/dim-5',\n      'text-error',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-info/dim-5',\n      'enabled:active:bg-info/dim-5',\n      'focus-visible:bg-info/dim-5',\n      'text-info',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-neutral/dim-5',\n      'enabled:active:bg-neutral/dim-5',\n      'focus-visible:bg-neutral/dim-5',\n      'text-neutral',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface/dim-5',\n      'enabled:active:bg-surface/dim-5',\n      'focus-visible:bg-surface/dim-5',\n      'text-surface',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'outlined',\n    class: tw([\n      'hover:bg-surface-inverse/dim-5',\n      'enabled:active:bg-surface-inverse/dim-5',\n      'focus-visible:bg-surface-inverse/dim-5',\n      'text-surface-inverse',\n    ]),\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([\n      'bg-main-container',\n      'text-on-main-container',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'tinted',\n    class: tw([\n      'bg-support-container',\n      'text-on-support-container',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'tinted',\n    class: tw([\n      'bg-accent-container',\n      'text-on-accent-container',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'tinted',\n    class: tw([\n      'bg-basic-container',\n      'text-on-basic-container',\n      'hover:bg-basic-container-hovered',\n      'enabled:active:bg-basic-container-hovered',\n      'focus-visible:bg-basic-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'tinted',\n    class: tw([\n      'bg-success-container',\n      'text-on-success-container',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'tinted',\n    class: tw([\n      'bg-alert-container',\n      'text-on-alert-container',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'tinted',\n    class: tw([\n      'bg-error-container',\n      'text-on-error-container',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'tinted',\n    class: tw([\n      'bg-info-container',\n      'text-on-info-container',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'tinted',\n    class: tw([\n      'bg-neutral-container',\n      'text-on-neutral-container',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'tinted',\n    class: tw([\n      'bg-surface',\n      'text-on-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'tinted',\n    class: tw([\n      'bg-surface-inverse',\n      'text-on-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n  {\n    intent: 'main',\n    design: 'contrast',\n    class: tw([\n      'text-on-main-contaier bg-surface',\n      'hover:bg-main-container-hovered',\n      'enabled:active:bg-main-container-hovered',\n      'focus-visible:bg-main-container-hovered',\n    ]),\n  },\n  {\n    intent: 'support',\n    design: 'contrast',\n    class: tw([\n      'text-on-support-container bg-surface',\n      'hover:bg-support-container-hovered',\n      'enabled:active:bg-support-container-hovered',\n      'focus-visible:bg-support-container-hovered',\n    ]),\n  },\n  {\n    intent: 'accent',\n    design: 'contrast',\n    class: tw([\n      'text-on-accent-container bg-surface',\n      'hover:bg-accent-container-hovered',\n      'enabled:active:bg-accent-container-hovered',\n      'focus-visible:bg-accent-container-hovered',\n    ]),\n  },\n  {\n    intent: 'basic',\n    design: 'contrast',\n    class: tw([\n      'text-on-basic-container bg-surface',\n      'hover:bg-basic-container-hovered',\n      'enabled:active:bg-basic-container-hovered',\n      'focus-visible:bg-basic-container-hovered',\n    ]),\n  },\n  {\n    intent: 'success',\n    design: 'contrast',\n    class: tw([\n      'text-on-success-container bg-surface',\n      'hover:bg-success-container-hovered',\n      'enabled:active:bg-success-container-hovered',\n      'focus-visible:bg-success-container-hovered',\n    ]),\n  },\n  {\n    intent: 'alert',\n    design: 'contrast',\n    class: tw([\n      'text-on-alert-container bg-surface',\n      'hover:bg-alert-container-hovered',\n      'enabled:active:bg-alert-container-hovered',\n      'focus-visible:bg-alert-container-hovered',\n    ]),\n  },\n  {\n    intent: 'danger',\n    design: 'contrast',\n    class: tw([\n      'text-on-error-container bg-surface',\n      'hover:bg-error-container-hovered',\n      'enabled:active:bg-error-container-hovered',\n      'focus-visible:bg-error-container-hovered',\n    ]),\n  },\n  {\n    intent: 'info',\n    design: 'contrast',\n    class: tw([\n      'text-on-info-container bg-surface',\n      'hover:bg-info-container-hovered',\n      'enabled:active:bg-info-container-hovered',\n      'focus-visible:bg-info-container-hovered',\n    ]),\n  },\n  {\n    intent: 'neutral',\n    design: 'contrast',\n    class: tw([\n      'text-on-neutral-container bg-surface',\n      'hover:bg-neutral-container-hovered',\n      'enabled:active:bg-neutral-container-hovered',\n      'focus-visible:bg-neutral-container-hovered',\n    ]),\n  },\n  {\n    intent: 'surface',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface bg-surface',\n      'hover:bg-surface-hovered',\n      'enabled:active:bg-surface-hovered',\n      'focus-visible:bg-surface-hovered',\n    ]),\n  },\n  {\n    intent: 'surfaceInverse',\n    design: 'contrast',\n    class: tw([\n      'text-on-surface-inverse bg-surface-inverse',\n      'hover:bg-surface-inverse-hovered',\n      'enabled:active:bg-surface-inverse-hovered',\n      'focus-visible:bg-surface-inverse-hovered',\n    ]),\n  },\n] as const\n"],"mappings":"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","names":["tw","tw","tw","tw"]}

package/dist/chunk-TKAU6SMC.mjs

@@ -0,0 +1,197 @@
+// src/progress/Progress.tsx
+import { cx } from "class-variance-authority";
+import { Progress as RadixProgress2 } from "radix-ui";
+import { useMemo, useState } from "react";
+
+// src/progress/ProgressBar.styles.ts
+import { cva } from "class-variance-authority";
+var progressBarStyles = cva(
+  ["relative", "h-sz-4 w-full", "transform-gpu overflow-hidden", "bg-on-background/dim-4"],
+  {
+    variants: {
+      shape: {
+        square: [],
+        rounded: ["rounded-sm"]
+      }
+    }
+  }
+);
+
+// src/progress/ProgressContext.tsx
+import { createContext, useContext } from "react";
+var ProgressContext = createContext(null);
+var ID_PREFIX = ":progress";
+var useProgress = () => {
+  const context = useContext(ProgressContext);
+  if (!context) {
+    throw new Error("useProgress must be used within a Progress provider");
+  }
+  return context;
+};
+
+// src/progress/ProgressIndicator.tsx
+import { Progress as RadixProgress } from "radix-ui";
+
+// src/progress/ProgressIndicator.styles.ts
+import { cva as cva2 } from "class-variance-authority";
+var progressIndicatorStyles = cva2(["h-full w-full", "transition-transform duration-400"], {
+  variants: {
+    /**
+     * Color scheme of the progress component.
+     */
+    intent: {
+      basic: ["bg-basic"],
+      main: ["bg-main"],
+      support: ["bg-support"],
+      accent: ["bg-accent"],
+      success: ["bg-success"],
+      alert: ["bg-alert"],
+      danger: ["bg-error"],
+      info: ["bg-info"],
+      neutral: ["bg-neutral"]
+    },
+    /**
+     * Shape of the progress component.
+     */
+    shape: {
+      square: [],
+      rounded: ["rounded-sm"]
+    },
+    /**
+     * Sets if the progress value is not determinated.
+     */
+    isIndeterminate: {
+      true: ["absolute", "-translate-x-1/2", "animate-standalone-indeterminate-bar"],
+      false: []
+    }
+  }
+});
+
+// src/progress/ProgressIndicator.tsx
+import { jsx } from "react/jsx-runtime";
+var ProgressIndicator = ({
+  className,
+  style,
+  ref,
+  ...others
+}) => {
+  const { value, max, intent, shape, isIndeterminate } = useProgress();
+  const x = (max - value) / max * 100;
+  return /* @__PURE__ */ jsx(
+    RadixProgress.ProgressIndicator,
+    {
+      "data-spark-component": "progress-indicator",
+      className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
+      style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
+      ref,
+      ...others
+    }
+  );
+};
+ProgressIndicator.displayName = "Progress.Indicator";
+
+// src/progress/ProgressBar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ProgressBar = ({
+  className,
+  children = /* @__PURE__ */ jsx2(ProgressIndicator, {}),
+  ref,
+  ...others
+}) => {
+  const { shape } = useProgress();
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-spark-component": "progress-bar",
+      className: progressBarStyles({ className, shape }),
+      ref,
+      ...others,
+      children
+    }
+  );
+};
+ProgressBar.displayName = "Progress.Bar";
+
+// src/progress/Progress.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Progress = ({
+  className,
+  value: valueProp,
+  max = 100,
+  shape = "square",
+  intent = "basic",
+  isIndeterminate = false,
+  children = /* @__PURE__ */ jsx3(ProgressBar, {}),
+  ref,
+  ...others
+}) => {
+  const [labelId, setLabelId] = useState();
+  const value = useMemo(() => {
+    return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId };
+  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId]);
+  return /* @__PURE__ */ jsx3(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ jsx3(
+    RadixProgress2.Progress,
+    {
+      "data-spark-component": "progress",
+      ref,
+      className: cx("gap-sm focus-visible:u-outline flex flex-col", className),
+      value: valueProp,
+      "aria-labelledby": labelId,
+      max,
+      tabIndex: -1,
+      ...others,
+      children
+    }
+  ) });
+};
+Progress.displayName = "Progress";
+
+// src/progress/ProgressLabel.tsx
+import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
+import { useCallback, useId } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ProgressLabel = ({
+  id: idProp,
+  children,
+  ref: forwardedRef,
+  ...others
+}) => {
+  const internalID = `${ID_PREFIX}-label-${useId()}`;
+  const id = idProp || internalID;
+  const { onLabelId } = useProgress();
+  const rootRef = useCallback(
+    (el) => {
+      onLabelId(el ? id : void 0);
+    },
+    [id, onLabelId]
+  );
+  const ref = useMergeRefs(forwardedRef, rootRef);
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      "data-spark-component": "progress-label",
+      id,
+      className: "text-body-2 text-on-surface",
+      ref,
+      ...others,
+      children
+    }
+  );
+};
+ProgressLabel.displayName = "Progress.Label";
+
+// src/progress/index.ts
+var Progress2 = Object.assign(Progress, {
+  Label: ProgressLabel,
+  Bar: ProgressBar,
+  Indicator: ProgressIndicator
+});
+Progress2.displayName = "Progress";
+ProgressBar.displayName = "Progress.Bar";
+ProgressIndicator.displayName = "Progress.Indicator";
+ProgressLabel.displayName = "Progress.Label";
+
+export {
+  Progress2 as Progress
+};
+//# sourceMappingURL=chunk-TKAU6SMC.mjs.map

package/dist/chunk-TKAU6SMC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/progress/Progress.tsx","../src/progress/ProgressBar.styles.ts","../src/progress/ProgressContext.tsx","../src/progress/ProgressIndicator.tsx","../src/progress/ProgressIndicator.styles.ts","../src/progress/ProgressBar.tsx","../src/progress/ProgressLabel.tsx","../src/progress/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Progress as RadixProgress } from 'radix-ui'\nimport { PropsWithChildren, Ref, useMemo, useState } from 'react'\n\nimport { ProgressBar } from './ProgressBar'\nimport { ProgressContext } from './ProgressContext'\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator.styles'\n\nexport interface ProgressProps\n  extends RadixProgress.ProgressProps,\n    Pick<ProgressIndicatorStylesProps, 'intent'> {\n  shape?: 'square' | 'rounded'\n  isIndeterminate?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Progress = ({\n  className,\n  value: valueProp,\n  max = 100,\n  shape = 'square',\n  intent = 'basic',\n  isIndeterminate = false,\n  children = <ProgressBar />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressProps>) => {\n  const [labelId, setLabelId] = useState<string>()\n\n  const value = useMemo(() => {\n    return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId }\n  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId])\n\n  return (\n    <ProgressContext.Provider data-spark-component=\"progress\" value={value}>\n      <RadixProgress.Progress\n        data-spark-component=\"progress\"\n        ref={ref}\n        className={cx('gap-sm focus-visible:u-outline flex flex-col', className)}\n        value={valueProp}\n        aria-labelledby={labelId}\n        max={max}\n        tabIndex={-1}\n        {...others}\n      >\n        {children}\n      </RadixProgress.Progress>\n    </ProgressContext.Provider>\n  )\n}\n\nProgress.displayName = 'Progress'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const progressBarStyles = cva(\n  ['relative', 'h-sz-4 w-full', 'transform-gpu overflow-hidden', 'bg-on-background/dim-4'],\n  {\n    variants: {\n      shape: {\n        square: [],\n        rounded: ['rounded-sm'],\n      },\n    },\n  }\n)\n\nexport type ProgressBarStylesProps = VariantProps<typeof progressBarStyles>\n","import { createContext, useContext } from 'react'\n\nimport { ProgressIndicatorStylesProps } from './ProgressIndicator.styles'\n\nexport interface ProgressContextValue {\n  value: number\n  max: number\n  isIndeterminate: boolean\n  shape: 'square' | 'rounded'\n  intent: ProgressIndicatorStylesProps['intent']\n  onLabelId: (id?: string) => void\n}\n\nexport const ProgressContext = createContext<ProgressContextValue | null>(null)\n\nexport const ID_PREFIX = ':progress'\n\nexport const useProgress = () => {\n  const context = useContext(ProgressContext)\n\n  if (!context) {\n    throw new Error('useProgress must be used within a Progress provider')\n  }\n\n  return context\n}\n","import { Progress as RadixProgress } from 'radix-ui'\nimport { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { useProgress } from './ProgressContext'\nimport { progressIndicatorStyles } from './ProgressIndicator.styles'\n\nexport type ProgressIndicatorProps = ComponentPropsWithRef<'div'>\n\nexport const ProgressIndicator = ({\n  className,\n  style,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressIndicatorProps>) => {\n  const { value, max, intent, shape, isIndeterminate } = useProgress()\n  const x = ((max - value) / max) * 100\n\n  return (\n    <RadixProgress.ProgressIndicator\n      data-spark-component=\"progress-indicator\"\n      className={progressIndicatorStyles({ className, intent, shape, isIndeterminate })}\n      style={{ ...style, ...(!isIndeterminate && { transform: `translateX(-${x}%)` }) }}\n      ref={ref}\n      {...others}\n    />\n  )\n}\n\nProgressIndicator.displayName = 'Progress.Indicator'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const progressIndicatorStyles = cva(['h-full w-full', 'transition-transform duration-400'], {\n  variants: {\n    /**\n     * Color scheme of the progress component.\n     */\n    intent: {\n      basic: ['bg-basic'],\n      main: ['bg-main'],\n      support: ['bg-support'],\n      accent: ['bg-accent'],\n      success: ['bg-success'],\n      alert: ['bg-alert'],\n      danger: ['bg-error'],\n      info: ['bg-info'],\n      neutral: ['bg-neutral'],\n    },\n    /**\n     * Shape of the progress component.\n     */\n    shape: {\n      square: [],\n      rounded: ['rounded-sm'],\n    },\n    /**\n     * Sets if the progress value is not determinated.\n     */\n    isIndeterminate: {\n      true: ['absolute', '-translate-x-1/2', 'animate-standalone-indeterminate-bar'],\n      false: [],\n    },\n  },\n})\n\nexport type ProgressIndicatorStylesProps = VariantProps<typeof progressIndicatorStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { progressBarStyles } from './ProgressBar.styles'\nimport { useProgress } from './ProgressContext'\nimport { ProgressIndicator } from './ProgressIndicator'\n\nexport type ProgressBarProps = ComponentPropsWithRef<'div'>\n\nexport const ProgressBar = ({\n  className,\n  children = <ProgressIndicator />,\n  ref,\n  ...others\n}: PropsWithChildren<ProgressBarProps>) => {\n  const { shape } = useProgress()\n\n  return (\n    <div\n      data-spark-component=\"progress-bar\"\n      className={progressBarStyles({ className, shape })}\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </div>\n  )\n}\n\nProgressBar.displayName = 'Progress.Bar'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { ComponentPropsWithRef, useCallback, useId } from 'react'\n\nimport { ID_PREFIX, useProgress } from './ProgressContext'\n\nexport type ProgressLabelProps = ComponentPropsWithRef<'span'>\n\nexport const ProgressLabel = ({\n  id: idProp,\n  children,\n  ref: forwardedRef,\n  ...others\n}: ProgressLabelProps) => {\n  const internalID = `${ID_PREFIX}-label-${useId()}`\n  const id = idProp || internalID\n\n  const { onLabelId } = useProgress()\n  const rootRef = useCallback(\n    (el: HTMLSpanElement) => {\n      onLabelId(el ? id : undefined)\n    },\n    [id, onLabelId]\n  )\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  return (\n    <span\n      data-spark-component=\"progress-label\"\n      id={id}\n      className=\"text-body-2 text-on-surface\"\n      ref={ref}\n      {...others}\n    >\n      {children}\n    </span>\n  )\n}\n\nProgressLabel.displayName = 'Progress.Label'\n","import { Progress as Root } from './Progress'\nimport { ProgressBar } from './ProgressBar'\nimport { ProgressIndicator } from './ProgressIndicator'\nimport { ProgressLabel } from './ProgressLabel'\n\nexport const Progress: typeof Root & {\n  Label: typeof ProgressLabel\n  Bar: typeof ProgressBar\n  Indicator: typeof ProgressIndicator\n} = Object.assign(Root, {\n  Label: ProgressLabel,\n  Bar: ProgressBar,\n  Indicator: ProgressIndicator,\n})\n\nProgress.displayName = 'Progress'\nProgressBar.displayName = 'Progress.Bar'\nProgressIndicator.displayName = 'Progress.Indicator'\nProgressLabel.displayName = 'Progress.Label'\n\nexport { type ProgressProps } from './Progress'\nexport { type ProgressBarProps } from './ProgressBar'\nexport { type ProgressLabelProps } from './ProgressLabel'\nexport { type ProgressIndicatorProps } from './ProgressIndicator'\n"],"mappings":"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","names":["RadixProgress","cva","jsx","jsx","RadixProgress","jsx","Progress"]}

package/dist/chunk-WA56YHV3.mjs

@@ -0,0 +1,358 @@
+import {
+  IconButton
+} from "./chunk-XYK6V3JF.mjs";
+import {
+  Icon
+} from "./chunk-UMUMFMFB.mjs";
+
+// src/dialog/Dialog.tsx
+import { Dialog as RadixDialog } from "radix-ui";
+import { useEffect, useRef } from "react";
+
+// src/dialog/DialogContext.tsx
+import { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DialogContext = createContext(null);
+var DialogProvider = ({
+  children: childrenProp,
+  withFade = false
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    DialogContext.Provider,
+    {
+      value: {
+        isFullScreen,
+        setIsFullScreen,
+        withFade
+      },
+      children: childrenProp
+    }
+  );
+};
+var useDialog = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw Error("useDialog must be used within a Dialog provider");
+  }
+  return context;
+};
+
+// src/dialog/Dialog.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Dialog = ({ children, withFade = false, ...rest }) => {
+  const open = rest.open;
+  const activeElementRef = useRef(null);
+  function handleActiveElementFocus() {
+    if (open && document.activeElement) {
+      activeElementRef.current = document.activeElement;
+    }
+    if (!open) {
+      setTimeout(() => {
+        if (!(activeElementRef.current instanceof HTMLElement)) return;
+        activeElementRef.current.focus();
+      }, 0);
+    }
+  }
+  useEffect(handleActiveElementFocus, [open]);
+  return /* @__PURE__ */ jsx2(DialogProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
+};
+Dialog.displayName = "Dialog.Root";
+
+// src/dialog/DialogBody.tsx
+import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
+import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
+import { cx } from "class-variance-authority";
+import { useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Body = ({
+  children,
+  className,
+  inset = false,
+  ref: forwardedRef,
+  ...rest
+}) => {
+  const scrollAreaRef = useRef2(null);
+  const ref = useMergeRefs(forwardedRef, scrollAreaRef);
+  const { withFade } = useDialog();
+  const overflow = useScrollOverflow(scrollAreaRef);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-spark-component": "dialog-body",
+      ref,
+      className: cx(
+        "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
+        "transition-all duration-300",
+        {
+          ["px-xl py-lg"]: !inset
+        },
+        className
+      ),
+      style: {
+        ...withFade && {
+          maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
+          maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+};
+Body.displayName = "Dialog.Body";
+
+// src/dialog/DialogClose.tsx
+import { Dialog as RadixDialog2 } from "radix-ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Close = (props) => /* @__PURE__ */ jsx4(RadixDialog2.Close, { ...props });
+Close.displayName = "Dialog.Close";
+
+// src/dialog/DialogCloseButton.tsx
+import { Close as CloseSVG } from "@spark-ui/icons/Close";
+import { cx as cx2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Root = ({
+  "aria-label": ariaLabel,
+  className,
+  size = "md",
+  intent = "neutral",
+  design = "ghost",
+  children = /* @__PURE__ */ jsx5(CloseSVG, {}),
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx5(
+    Close,
+    {
+      "data-spark-component": "dialog-close-button",
+      "data-part": "close",
+      ref,
+      className: cx2(["absolute", "top-md", "right-xl"], className),
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
+    }
+  );
+};
+var CloseButton = Object.assign(Root, {
+  id: "CloseButton"
+});
+Root.displayName = "Dialog.CloseButton";
+
+// src/dialog/DialogContent.tsx
+import { Dialog as RadixDialog3 } from "radix-ui";
+import { useEffect as useEffect2 } from "react";
+
+// src/dialog/DialogContent.styles.tsx
+import { cva } from "class-variance-authority";
+var dialogContentStyles = cva(
+  [
+    "z-modal flex flex-col bg-surface group",
+    "focus-visible:outline-hidden focus-visible:u-outline",
+    "[&:not(:has(footer))]:pb-lg",
+    "[&:not(:has(header))]:pt-lg"
+  ],
+  {
+    variants: {
+      size: {
+        fullscreen: "fixed size-full top-0 left-0",
+        sm: "max-w-sz-480",
+        md: "max-w-sz-672",
+        lg: "max-w-sz-864"
+      },
+      isNarrow: {
+        true: [],
+        false: []
+      }
+    },
+    compoundVariants: [
+      {
+        size: ["sm", "md", "lg"],
+        class: [
+          "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          "max-h-[80%]",
+          "shadow-md rounded-lg",
+          "data-[state=open]:animate-fade-in",
+          "data-[state=closed]:animate-fade-out"
+        ]
+      },
+      {
+        size: ["sm", "md", "lg"],
+        isNarrow: false,
+        class: ["w-full"]
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      isNarrow: false
+    }
+  }
+);
+
+// src/dialog/DialogContent.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Content = ({
+  children,
+  className,
+  isNarrow = false,
+  size = "md",
+  onInteractOutside,
+  ref,
+  ...rest
+}) => {
+  const { setIsFullScreen } = useDialog();
+  useEffect2(() => {
+    if (size === "fullscreen") setIsFullScreen(true);
+    return () => setIsFullScreen(false);
+  }, [setIsFullScreen, size]);
+  return /* @__PURE__ */ jsx6(
+    RadixDialog3.Content,
+    {
+      "data-spark-component": "dialog-content",
+      ref,
+      className: dialogContentStyles({
+        className,
+        isNarrow,
+        size
+      }),
+      onInteractOutside: (e) => {
+        const isForegroundElement = e.target.closest(".z-toast, .z-popover");
+        if (isForegroundElement) {
+          e.preventDefault();
+        }
+        onInteractOutside?.(e);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+Content.displayName = "Dialog.Content";
+
+// src/dialog/DialogDescription.tsx
+import { Dialog as RadixDialog4 } from "radix-ui";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { "data-spark-component": "dialog-description", ...props });
+Description.displayName = "Dialog.Description";
+
+// src/dialog/DialogFooter.tsx
+import { cx as cx3 } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
+  "footer",
+  {
+    "data-spark-component": "dialog-footer",
+    ref,
+    className: cx3(className, ["px-xl", "py-lg"]),
+    ...rest,
+    children
+  }
+);
+Footer.displayName = "Dialog.Footer";
+
+// src/dialog/DialogHeader.tsx
+import { cx as cx4 } from "class-variance-authority";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
+  "header",
+  {
+    "data-spark-component": "dialog-header",
+    ref,
+    className: cx4(className, ["px-xl", "py-lg"]),
+    ...rest,
+    children
+  }
+);
+Header.displayName = "Dialog.Header";
+
+// src/dialog/DialogOverlay.tsx
+import { cx as cx5 } from "class-variance-authority";
+import { Dialog as RadixDialog5 } from "radix-ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Overlay = ({ className, ref, ...rest }) => {
+  const { isFullScreen } = useDialog();
+  return /* @__PURE__ */ jsx10(
+    RadixDialog5.Overlay,
+    {
+      "data-spark-component": "dialog-overlay",
+      ref,
+      className: cx5(
+        isFullScreen ? "hidden" : "fixed",
+        ["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
+        ["bg-overlay/dim-1"],
+        ["data-[state=open]:animate-fade-in"],
+        ["data-[state=closed]:animate-fade-out"],
+        className
+      ),
+      ...rest
+    }
+  );
+};
+Overlay.displayName = "Dialog.Overlay";
+
+// src/dialog/DialogPortal.tsx
+import { Dialog as RadixDialog6 } from "radix-ui";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Portal, { ...rest, children });
+Portal.displayName = "Dialog.Portal";
+
+// src/dialog/DialogTitle.tsx
+import { cx as cx6 } from "class-variance-authority";
+import { Dialog as RadixDialog7 } from "radix-ui";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Title = ({ className, ref, ...others }) => {
+  return /* @__PURE__ */ jsx12(
+    RadixDialog7.Title,
+    {
+      "data-spark-component": "dialog-title",
+      ref,
+      className: cx6(
+        "text-headline-1 text-on-surface",
+        "group-has-data-[part=close]:pr-3xl",
+        className
+      ),
+      ...others
+    }
+  );
+};
+Title.displayName = "Dialog.Title";
+
+// src/dialog/DialogTrigger.tsx
+import { Dialog as RadixDialog8 } from "radix-ui";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Trigger = (props) => /* @__PURE__ */ jsx13(RadixDialog8.Trigger, { "data-spark-component": "dialog-trigger", ...props });
+Trigger.displayName = "Dialog.Trigger";
+
+// src/dialog/index.ts
+var Dialog2 = Object.assign(Dialog, {
+  Trigger,
+  Portal,
+  Overlay,
+  Content,
+  Header,
+  Body,
+  Footer,
+  Close,
+  CloseButton,
+  Title,
+  Description
+});
+Dialog2.displayName = "Dialog";
+Dialog2.Trigger.displayName = "Dialog.Trigger";
+Trigger.displayName = "Dialog.Trigger";
+Portal.displayName = "Dialog.Portal";
+Overlay.displayName = "Dialog.Overlay";
+Content.displayName = "Dialog.Content";
+Header.displayName = "Dialog.Header";
+Body.displayName = "Dialog.Body";
+Footer.displayName = "Dialog.Footer";
+CloseButton.displayName = "Dialog.CloseButton";
+Title.displayName = "Dialog.Title";
+Description.displayName = "Dialog.Description";
+
+export {
+  Dialog2 as Dialog
+};
+//# sourceMappingURL=chunk-WA56YHV3.mjs.map