@spark-ui/components 13.0.3-beta.0 → 13.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/index.d.mts +2 -2
- package/dist/accordion/index.d.ts +2 -2
- package/dist/accordion/index.js +5 -5
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +5 -5
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.d.mts +1 -1
- package/dist/alert-dialog/index.d.ts +1 -1
- package/dist/alert-dialog/index.js +15 -10
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +15 -10
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/carousel/index.mjs +2 -2
- package/dist/collapsible/index.d.mts +1 -1
- package/dist/collapsible/index.d.ts +1 -1
- package/dist/collapsible/index.js +3 -3
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +3 -3
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.mjs +3 -3
- package/dist/dialog/index.mjs +2 -2
- package/dist/docgen.json +3098 -3129
- package/dist/drawer/index.d.mts +29 -37
- package/dist/drawer/index.d.ts +29 -37
- package/dist/drawer/index.js +89 -125
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +89 -127
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.mjs +2 -2
- package/dist/file-upload/index.mjs +3 -3
- package/dist/pagination/index.mjs +3 -3
- package/dist/popover/index.mjs +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/snackbar/index.mjs +3 -3
- package/dist/spinner/index.d.mts +1 -1
- package/dist/spinner/index.d.ts +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/tabs/index.mjs +3 -3
- package/dist/toast/index.d.mts +1 -1
- package/dist/toast/index.d.ts +1 -1
- package/dist/toast/index.js +3 -3
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +6 -6
- package/dist/toast/index.mjs.map +1 -1
- package/package.json +6 -6
- package/dist/DialogTrigger-8oDlAJjU.d.mts +0 -142
- package/dist/DialogTrigger-8oDlAJjU.d.ts +0 -142
- package/dist/DialogTrigger-woU7vsJi.d.mts +0 -142
- package/dist/DialogTrigger-woU7vsJi.d.ts +0 -142
- package/dist/chunk-2BSBKLHG.mjs +0 -358
- package/dist/chunk-2BSBKLHG.mjs.map +0 -1
- package/dist/chunk-D7YBYT5H.mjs +0 -308
- package/dist/chunk-D7YBYT5H.mjs.map +0 -1
- package/dist/chunk-HEKSVWYW.mjs +0 -800
- package/dist/chunk-HEKSVWYW.mjs.map +0 -1
- package/dist/chunk-TKAU6SMC.mjs +0 -197
- package/dist/chunk-TKAU6SMC.mjs.map +0 -1
- package/dist/chunk-WA56YHV3.mjs +0 -358
- package/dist/chunk-WA56YHV3.mjs.map +0 -1
- package/dist/chunk-WLI4EPS6.mjs +0 -358
- package/dist/chunk-WLI4EPS6.mjs.map +0 -1
- package/dist/chunk-XYK6V3JF.mjs +0 -53
- package/dist/chunk-XYK6V3JF.mjs.map +0 -1
- package/dist/index-BRKaV3lI.d.mts +0 -93
- package/dist/index-BRKaV3lI.d.ts +0 -93
- package/dist/index-Cw_DIfiq.d.mts +0 -93
- package/dist/index-Cw_DIfiq.d.ts +0 -93
|
@@ -1 +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
DELETED
|
@@ -1,197 +0,0 @@
|
|
|
1
|
-
// src/progress/Progress.tsx
|
|
2
|
-
import { cx } from "class-variance-authority";
|
|
3
|
-
import { Progress as RadixProgress2 } from "radix-ui";
|
|
4
|
-
import { useMemo, useState } from "react";
|
|
5
|
-
|
|
6
|
-
// src/progress/ProgressBar.styles.ts
|
|
7
|
-
import { cva } from "class-variance-authority";
|
|
8
|
-
var progressBarStyles = cva(
|
|
9
|
-
["relative", "h-sz-4 w-full", "transform-gpu overflow-hidden", "bg-on-background/dim-4"],
|
|
10
|
-
{
|
|
11
|
-
variants: {
|
|
12
|
-
shape: {
|
|
13
|
-
square: [],
|
|
14
|
-
rounded: ["rounded-sm"]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
);
|
|
19
|
-
|
|
20
|
-
// src/progress/ProgressContext.tsx
|
|
21
|
-
import { createContext, useContext } from "react";
|
|
22
|
-
var ProgressContext = createContext(null);
|
|
23
|
-
var ID_PREFIX = ":progress";
|
|
24
|
-
var useProgress = () => {
|
|
25
|
-
const context = useContext(ProgressContext);
|
|
26
|
-
if (!context) {
|
|
27
|
-
throw new Error("useProgress must be used within a Progress provider");
|
|
28
|
-
}
|
|
29
|
-
return context;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
// src/progress/ProgressIndicator.tsx
|
|
33
|
-
import { Progress as RadixProgress } from "radix-ui";
|
|
34
|
-
|
|
35
|
-
// src/progress/ProgressIndicator.styles.ts
|
|
36
|
-
import { cva as cva2 } from "class-variance-authority";
|
|
37
|
-
var progressIndicatorStyles = cva2(["h-full w-full", "transition-transform duration-400"], {
|
|
38
|
-
variants: {
|
|
39
|
-
/**
|
|
40
|
-
* Color scheme of the progress component.
|
|
41
|
-
*/
|
|
42
|
-
intent: {
|
|
43
|
-
basic: ["bg-basic"],
|
|
44
|
-
main: ["bg-main"],
|
|
45
|
-
support: ["bg-support"],
|
|
46
|
-
accent: ["bg-accent"],
|
|
47
|
-
success: ["bg-success"],
|
|
48
|
-
alert: ["bg-alert"],
|
|
49
|
-
danger: ["bg-error"],
|
|
50
|
-
info: ["bg-info"],
|
|
51
|
-
neutral: ["bg-neutral"]
|
|
52
|
-
},
|
|
53
|
-
/**
|
|
54
|
-
* Shape of the progress component.
|
|
55
|
-
*/
|
|
56
|
-
shape: {
|
|
57
|
-
square: [],
|
|
58
|
-
rounded: ["rounded-sm"]
|
|
59
|
-
},
|
|
60
|
-
/**
|
|
61
|
-
* Sets if the progress value is not determinated.
|
|
62
|
-
*/
|
|
63
|
-
isIndeterminate: {
|
|
64
|
-
true: ["absolute", "-translate-x-1/2", "animate-standalone-indeterminate-bar"],
|
|
65
|
-
false: []
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
// src/progress/ProgressIndicator.tsx
|
|
71
|
-
import { jsx } from "react/jsx-runtime";
|
|
72
|
-
var ProgressIndicator = ({
|
|
73
|
-
className,
|
|
74
|
-
style,
|
|
75
|
-
ref,
|
|
76
|
-
...others
|
|
77
|
-
}) => {
|
|
78
|
-
const { value, max, intent, shape, isIndeterminate } = useProgress();
|
|
79
|
-
const x = (max - value) / max * 100;
|
|
80
|
-
return /* @__PURE__ */ jsx(
|
|
81
|
-
RadixProgress.ProgressIndicator,
|
|
82
|
-
{
|
|
83
|
-
"data-spark-component": "progress-indicator",
|
|
84
|
-
className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
|
|
85
|
-
style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
|
|
86
|
-
ref,
|
|
87
|
-
...others
|
|
88
|
-
}
|
|
89
|
-
);
|
|
90
|
-
};
|
|
91
|
-
ProgressIndicator.displayName = "Progress.Indicator";
|
|
92
|
-
|
|
93
|
-
// src/progress/ProgressBar.tsx
|
|
94
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
95
|
-
var ProgressBar = ({
|
|
96
|
-
className,
|
|
97
|
-
children = /* @__PURE__ */ jsx2(ProgressIndicator, {}),
|
|
98
|
-
ref,
|
|
99
|
-
...others
|
|
100
|
-
}) => {
|
|
101
|
-
const { shape } = useProgress();
|
|
102
|
-
return /* @__PURE__ */ jsx2(
|
|
103
|
-
"div",
|
|
104
|
-
{
|
|
105
|
-
"data-spark-component": "progress-bar",
|
|
106
|
-
className: progressBarStyles({ className, shape }),
|
|
107
|
-
ref,
|
|
108
|
-
...others,
|
|
109
|
-
children
|
|
110
|
-
}
|
|
111
|
-
);
|
|
112
|
-
};
|
|
113
|
-
ProgressBar.displayName = "Progress.Bar";
|
|
114
|
-
|
|
115
|
-
// src/progress/Progress.tsx
|
|
116
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
117
|
-
var Progress = ({
|
|
118
|
-
className,
|
|
119
|
-
value: valueProp,
|
|
120
|
-
max = 100,
|
|
121
|
-
shape = "square",
|
|
122
|
-
intent = "basic",
|
|
123
|
-
isIndeterminate = false,
|
|
124
|
-
children = /* @__PURE__ */ jsx3(ProgressBar, {}),
|
|
125
|
-
ref,
|
|
126
|
-
...others
|
|
127
|
-
}) => {
|
|
128
|
-
const [labelId, setLabelId] = useState();
|
|
129
|
-
const value = useMemo(() => {
|
|
130
|
-
return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId };
|
|
131
|
-
}, [max, valueProp, intent, shape, isIndeterminate, setLabelId]);
|
|
132
|
-
return /* @__PURE__ */ jsx3(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ jsx3(
|
|
133
|
-
RadixProgress2.Progress,
|
|
134
|
-
{
|
|
135
|
-
"data-spark-component": "progress",
|
|
136
|
-
ref,
|
|
137
|
-
className: cx("gap-sm focus-visible:u-outline flex flex-col", className),
|
|
138
|
-
value: valueProp,
|
|
139
|
-
"aria-labelledby": labelId,
|
|
140
|
-
max,
|
|
141
|
-
tabIndex: -1,
|
|
142
|
-
...others,
|
|
143
|
-
children
|
|
144
|
-
}
|
|
145
|
-
) });
|
|
146
|
-
};
|
|
147
|
-
Progress.displayName = "Progress";
|
|
148
|
-
|
|
149
|
-
// src/progress/ProgressLabel.tsx
|
|
150
|
-
import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
|
|
151
|
-
import { useCallback, useId } from "react";
|
|
152
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
153
|
-
var ProgressLabel = ({
|
|
154
|
-
id: idProp,
|
|
155
|
-
children,
|
|
156
|
-
ref: forwardedRef,
|
|
157
|
-
...others
|
|
158
|
-
}) => {
|
|
159
|
-
const internalID = `${ID_PREFIX}-label-${useId()}`;
|
|
160
|
-
const id = idProp || internalID;
|
|
161
|
-
const { onLabelId } = useProgress();
|
|
162
|
-
const rootRef = useCallback(
|
|
163
|
-
(el) => {
|
|
164
|
-
onLabelId(el ? id : void 0);
|
|
165
|
-
},
|
|
166
|
-
[id, onLabelId]
|
|
167
|
-
);
|
|
168
|
-
const ref = useMergeRefs(forwardedRef, rootRef);
|
|
169
|
-
return /* @__PURE__ */ jsx4(
|
|
170
|
-
"span",
|
|
171
|
-
{
|
|
172
|
-
"data-spark-component": "progress-label",
|
|
173
|
-
id,
|
|
174
|
-
className: "text-body-2 text-on-surface",
|
|
175
|
-
ref,
|
|
176
|
-
...others,
|
|
177
|
-
children
|
|
178
|
-
}
|
|
179
|
-
);
|
|
180
|
-
};
|
|
181
|
-
ProgressLabel.displayName = "Progress.Label";
|
|
182
|
-
|
|
183
|
-
// src/progress/index.ts
|
|
184
|
-
var Progress2 = Object.assign(Progress, {
|
|
185
|
-
Label: ProgressLabel,
|
|
186
|
-
Bar: ProgressBar,
|
|
187
|
-
Indicator: ProgressIndicator
|
|
188
|
-
});
|
|
189
|
-
Progress2.displayName = "Progress";
|
|
190
|
-
ProgressBar.displayName = "Progress.Bar";
|
|
191
|
-
ProgressIndicator.displayName = "Progress.Indicator";
|
|
192
|
-
ProgressLabel.displayName = "Progress.Label";
|
|
193
|
-
|
|
194
|
-
export {
|
|
195
|
-
Progress2 as Progress
|
|
196
|
-
};
|
|
197
|
-
//# sourceMappingURL=chunk-TKAU6SMC.mjs.map
|
|
@@ -1 +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
DELETED
|
@@ -1,358 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
IconButton
|
|
3
|
-
} from "./chunk-XYK6V3JF.mjs";
|
|
4
|
-
import {
|
|
5
|
-
Icon
|
|
6
|
-
} from "./chunk-UMUMFMFB.mjs";
|
|
7
|
-
|
|
8
|
-
// src/dialog/Dialog.tsx
|
|
9
|
-
import { Dialog as RadixDialog } from "radix-ui";
|
|
10
|
-
import { useEffect, useRef } from "react";
|
|
11
|
-
|
|
12
|
-
// src/dialog/DialogContext.tsx
|
|
13
|
-
import { createContext, useContext, useState } from "react";
|
|
14
|
-
import { jsx } from "react/jsx-runtime";
|
|
15
|
-
var DialogContext = createContext(null);
|
|
16
|
-
var DialogProvider = ({
|
|
17
|
-
children: childrenProp,
|
|
18
|
-
withFade = false
|
|
19
|
-
}) => {
|
|
20
|
-
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
22
|
-
DialogContext.Provider,
|
|
23
|
-
{
|
|
24
|
-
value: {
|
|
25
|
-
isFullScreen,
|
|
26
|
-
setIsFullScreen,
|
|
27
|
-
withFade
|
|
28
|
-
},
|
|
29
|
-
children: childrenProp
|
|
30
|
-
}
|
|
31
|
-
);
|
|
32
|
-
};
|
|
33
|
-
var useDialog = () => {
|
|
34
|
-
const context = useContext(DialogContext);
|
|
35
|
-
if (!context) {
|
|
36
|
-
throw Error("useDialog must be used within a Dialog provider");
|
|
37
|
-
}
|
|
38
|
-
return context;
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
// src/dialog/Dialog.tsx
|
|
42
|
-
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
43
|
-
var Dialog = ({ children, withFade = false, ...rest }) => {
|
|
44
|
-
const open = rest.open;
|
|
45
|
-
const activeElementRef = useRef(null);
|
|
46
|
-
function handleActiveElementFocus() {
|
|
47
|
-
if (open && document.activeElement) {
|
|
48
|
-
activeElementRef.current = document.activeElement;
|
|
49
|
-
}
|
|
50
|
-
if (!open) {
|
|
51
|
-
setTimeout(() => {
|
|
52
|
-
if (!(activeElementRef.current instanceof HTMLElement)) return;
|
|
53
|
-
activeElementRef.current.focus();
|
|
54
|
-
}, 0);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
useEffect(handleActiveElementFocus, [open]);
|
|
58
|
-
return /* @__PURE__ */ jsx2(DialogProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
|
|
59
|
-
};
|
|
60
|
-
Dialog.displayName = "Dialog.Root";
|
|
61
|
-
|
|
62
|
-
// src/dialog/DialogBody.tsx
|
|
63
|
-
import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
|
|
64
|
-
import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
|
|
65
|
-
import { cx } from "class-variance-authority";
|
|
66
|
-
import { useRef as useRef2 } from "react";
|
|
67
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
68
|
-
var Body = ({
|
|
69
|
-
children,
|
|
70
|
-
className,
|
|
71
|
-
inset = false,
|
|
72
|
-
ref: forwardedRef,
|
|
73
|
-
...rest
|
|
74
|
-
}) => {
|
|
75
|
-
const scrollAreaRef = useRef2(null);
|
|
76
|
-
const ref = useMergeRefs(forwardedRef, scrollAreaRef);
|
|
77
|
-
const { withFade } = useDialog();
|
|
78
|
-
const overflow = useScrollOverflow(scrollAreaRef);
|
|
79
|
-
return /* @__PURE__ */ jsx3(
|
|
80
|
-
"div",
|
|
81
|
-
{
|
|
82
|
-
"data-spark-component": "dialog-body",
|
|
83
|
-
ref,
|
|
84
|
-
className: cx(
|
|
85
|
-
"focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
|
|
86
|
-
"transition-all duration-300",
|
|
87
|
-
{
|
|
88
|
-
["px-xl py-lg"]: !inset
|
|
89
|
-
},
|
|
90
|
-
className
|
|
91
|
-
),
|
|
92
|
-
style: {
|
|
93
|
-
...withFade && {
|
|
94
|
-
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))",
|
|
95
|
-
maskSize: `100% calc(100% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
|
|
96
|
-
maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
|
|
97
|
-
}
|
|
98
|
-
},
|
|
99
|
-
...rest,
|
|
100
|
-
children
|
|
101
|
-
}
|
|
102
|
-
);
|
|
103
|
-
};
|
|
104
|
-
Body.displayName = "Dialog.Body";
|
|
105
|
-
|
|
106
|
-
// src/dialog/DialogClose.tsx
|
|
107
|
-
import { Dialog as RadixDialog2 } from "radix-ui";
|
|
108
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
109
|
-
var Close = (props) => /* @__PURE__ */ jsx4(RadixDialog2.Close, { ...props });
|
|
110
|
-
Close.displayName = "Dialog.Close";
|
|
111
|
-
|
|
112
|
-
// src/dialog/DialogCloseButton.tsx
|
|
113
|
-
import { Close as CloseSVG } from "@spark-ui/icons/Close";
|
|
114
|
-
import { cx as cx2 } from "class-variance-authority";
|
|
115
|
-
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
116
|
-
var Root = ({
|
|
117
|
-
"aria-label": ariaLabel,
|
|
118
|
-
className,
|
|
119
|
-
size = "md",
|
|
120
|
-
intent = "neutral",
|
|
121
|
-
design = "ghost",
|
|
122
|
-
children = /* @__PURE__ */ jsx5(CloseSVG, {}),
|
|
123
|
-
ref,
|
|
124
|
-
...rest
|
|
125
|
-
}) => {
|
|
126
|
-
return /* @__PURE__ */ jsx5(
|
|
127
|
-
Close,
|
|
128
|
-
{
|
|
129
|
-
"data-spark-component": "dialog-close-button",
|
|
130
|
-
"data-part": "close",
|
|
131
|
-
ref,
|
|
132
|
-
className: cx2(["absolute", "top-md", "right-xl"], className),
|
|
133
|
-
asChild: true,
|
|
134
|
-
...rest,
|
|
135
|
-
children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
|
|
136
|
-
}
|
|
137
|
-
);
|
|
138
|
-
};
|
|
139
|
-
var CloseButton = Object.assign(Root, {
|
|
140
|
-
id: "CloseButton"
|
|
141
|
-
});
|
|
142
|
-
Root.displayName = "Dialog.CloseButton";
|
|
143
|
-
|
|
144
|
-
// src/dialog/DialogContent.tsx
|
|
145
|
-
import { Dialog as RadixDialog3 } from "radix-ui";
|
|
146
|
-
import { useEffect as useEffect2 } from "react";
|
|
147
|
-
|
|
148
|
-
// src/dialog/DialogContent.styles.tsx
|
|
149
|
-
import { cva } from "class-variance-authority";
|
|
150
|
-
var dialogContentStyles = cva(
|
|
151
|
-
[
|
|
152
|
-
"z-modal flex flex-col bg-surface group",
|
|
153
|
-
"focus-visible:outline-hidden focus-visible:u-outline",
|
|
154
|
-
"[&:not(:has(footer))]:pb-lg",
|
|
155
|
-
"[&:not(:has(header))]:pt-lg"
|
|
156
|
-
],
|
|
157
|
-
{
|
|
158
|
-
variants: {
|
|
159
|
-
size: {
|
|
160
|
-
fullscreen: "fixed size-full top-0 left-0",
|
|
161
|
-
sm: "max-w-sz-480",
|
|
162
|
-
md: "max-w-sz-672",
|
|
163
|
-
lg: "max-w-sz-864"
|
|
164
|
-
},
|
|
165
|
-
isNarrow: {
|
|
166
|
-
true: [],
|
|
167
|
-
false: []
|
|
168
|
-
}
|
|
169
|
-
},
|
|
170
|
-
compoundVariants: [
|
|
171
|
-
{
|
|
172
|
-
size: ["sm", "md", "lg"],
|
|
173
|
-
class: [
|
|
174
|
-
"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
|
|
175
|
-
"max-h-[80%]",
|
|
176
|
-
"shadow-md rounded-lg",
|
|
177
|
-
"data-[state=open]:animate-fade-in",
|
|
178
|
-
"data-[state=closed]:animate-fade-out"
|
|
179
|
-
]
|
|
180
|
-
},
|
|
181
|
-
{
|
|
182
|
-
size: ["sm", "md", "lg"],
|
|
183
|
-
isNarrow: false,
|
|
184
|
-
class: ["w-full"]
|
|
185
|
-
}
|
|
186
|
-
],
|
|
187
|
-
defaultVariants: {
|
|
188
|
-
size: "md",
|
|
189
|
-
isNarrow: false
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
);
|
|
193
|
-
|
|
194
|
-
// src/dialog/DialogContent.tsx
|
|
195
|
-
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
196
|
-
var Content = ({
|
|
197
|
-
children,
|
|
198
|
-
className,
|
|
199
|
-
isNarrow = false,
|
|
200
|
-
size = "md",
|
|
201
|
-
onInteractOutside,
|
|
202
|
-
ref,
|
|
203
|
-
...rest
|
|
204
|
-
}) => {
|
|
205
|
-
const { setIsFullScreen } = useDialog();
|
|
206
|
-
useEffect2(() => {
|
|
207
|
-
if (size === "fullscreen") setIsFullScreen(true);
|
|
208
|
-
return () => setIsFullScreen(false);
|
|
209
|
-
}, [setIsFullScreen, size]);
|
|
210
|
-
return /* @__PURE__ */ jsx6(
|
|
211
|
-
RadixDialog3.Content,
|
|
212
|
-
{
|
|
213
|
-
"data-spark-component": "dialog-content",
|
|
214
|
-
ref,
|
|
215
|
-
className: dialogContentStyles({
|
|
216
|
-
className,
|
|
217
|
-
isNarrow,
|
|
218
|
-
size
|
|
219
|
-
}),
|
|
220
|
-
onInteractOutside: (e) => {
|
|
221
|
-
const isForegroundElement = e.target.closest(".z-toast, .z-popover");
|
|
222
|
-
if (isForegroundElement) {
|
|
223
|
-
e.preventDefault();
|
|
224
|
-
}
|
|
225
|
-
onInteractOutside?.(e);
|
|
226
|
-
},
|
|
227
|
-
...rest,
|
|
228
|
-
children
|
|
229
|
-
}
|
|
230
|
-
);
|
|
231
|
-
};
|
|
232
|
-
Content.displayName = "Dialog.Content";
|
|
233
|
-
|
|
234
|
-
// src/dialog/DialogDescription.tsx
|
|
235
|
-
import { Dialog as RadixDialog4 } from "radix-ui";
|
|
236
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
237
|
-
var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { "data-spark-component": "dialog-description", ...props });
|
|
238
|
-
Description.displayName = "Dialog.Description";
|
|
239
|
-
|
|
240
|
-
// src/dialog/DialogFooter.tsx
|
|
241
|
-
import { cx as cx3 } from "class-variance-authority";
|
|
242
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
243
|
-
var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
|
|
244
|
-
"footer",
|
|
245
|
-
{
|
|
246
|
-
"data-spark-component": "dialog-footer",
|
|
247
|
-
ref,
|
|
248
|
-
className: cx3(className, ["px-xl", "py-lg"]),
|
|
249
|
-
...rest,
|
|
250
|
-
children
|
|
251
|
-
}
|
|
252
|
-
);
|
|
253
|
-
Footer.displayName = "Dialog.Footer";
|
|
254
|
-
|
|
255
|
-
// src/dialog/DialogHeader.tsx
|
|
256
|
-
import { cx as cx4 } from "class-variance-authority";
|
|
257
|
-
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
258
|
-
var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
|
|
259
|
-
"header",
|
|
260
|
-
{
|
|
261
|
-
"data-spark-component": "dialog-header",
|
|
262
|
-
ref,
|
|
263
|
-
className: cx4(className, ["px-xl", "py-lg"]),
|
|
264
|
-
...rest,
|
|
265
|
-
children
|
|
266
|
-
}
|
|
267
|
-
);
|
|
268
|
-
Header.displayName = "Dialog.Header";
|
|
269
|
-
|
|
270
|
-
// src/dialog/DialogOverlay.tsx
|
|
271
|
-
import { cx as cx5 } from "class-variance-authority";
|
|
272
|
-
import { Dialog as RadixDialog5 } from "radix-ui";
|
|
273
|
-
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
274
|
-
var Overlay = ({ className, ref, ...rest }) => {
|
|
275
|
-
const { isFullScreen } = useDialog();
|
|
276
|
-
return /* @__PURE__ */ jsx10(
|
|
277
|
-
RadixDialog5.Overlay,
|
|
278
|
-
{
|
|
279
|
-
"data-spark-component": "dialog-overlay",
|
|
280
|
-
ref,
|
|
281
|
-
className: cx5(
|
|
282
|
-
isFullScreen ? "hidden" : "fixed",
|
|
283
|
-
["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
|
|
284
|
-
["bg-overlay/dim-1"],
|
|
285
|
-
["data-[state=open]:animate-fade-in"],
|
|
286
|
-
["data-[state=closed]:animate-fade-out"],
|
|
287
|
-
className
|
|
288
|
-
),
|
|
289
|
-
...rest
|
|
290
|
-
}
|
|
291
|
-
);
|
|
292
|
-
};
|
|
293
|
-
Overlay.displayName = "Dialog.Overlay";
|
|
294
|
-
|
|
295
|
-
// src/dialog/DialogPortal.tsx
|
|
296
|
-
import { Dialog as RadixDialog6 } from "radix-ui";
|
|
297
|
-
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
298
|
-
var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Portal, { ...rest, children });
|
|
299
|
-
Portal.displayName = "Dialog.Portal";
|
|
300
|
-
|
|
301
|
-
// src/dialog/DialogTitle.tsx
|
|
302
|
-
import { cx as cx6 } from "class-variance-authority";
|
|
303
|
-
import { Dialog as RadixDialog7 } from "radix-ui";
|
|
304
|
-
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
305
|
-
var Title = ({ className, ref, ...others }) => {
|
|
306
|
-
return /* @__PURE__ */ jsx12(
|
|
307
|
-
RadixDialog7.Title,
|
|
308
|
-
{
|
|
309
|
-
"data-spark-component": "dialog-title",
|
|
310
|
-
ref,
|
|
311
|
-
className: cx6(
|
|
312
|
-
"text-headline-1 text-on-surface",
|
|
313
|
-
"group-has-data-[part=close]:pr-3xl",
|
|
314
|
-
className
|
|
315
|
-
),
|
|
316
|
-
...others
|
|
317
|
-
}
|
|
318
|
-
);
|
|
319
|
-
};
|
|
320
|
-
Title.displayName = "Dialog.Title";
|
|
321
|
-
|
|
322
|
-
// src/dialog/DialogTrigger.tsx
|
|
323
|
-
import { Dialog as RadixDialog8 } from "radix-ui";
|
|
324
|
-
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
325
|
-
var Trigger = (props) => /* @__PURE__ */ jsx13(RadixDialog8.Trigger, { "data-spark-component": "dialog-trigger", ...props });
|
|
326
|
-
Trigger.displayName = "Dialog.Trigger";
|
|
327
|
-
|
|
328
|
-
// src/dialog/index.ts
|
|
329
|
-
var Dialog2 = Object.assign(Dialog, {
|
|
330
|
-
Trigger,
|
|
331
|
-
Portal,
|
|
332
|
-
Overlay,
|
|
333
|
-
Content,
|
|
334
|
-
Header,
|
|
335
|
-
Body,
|
|
336
|
-
Footer,
|
|
337
|
-
Close,
|
|
338
|
-
CloseButton,
|
|
339
|
-
Title,
|
|
340
|
-
Description
|
|
341
|
-
});
|
|
342
|
-
Dialog2.displayName = "Dialog";
|
|
343
|
-
Dialog2.Trigger.displayName = "Dialog.Trigger";
|
|
344
|
-
Trigger.displayName = "Dialog.Trigger";
|
|
345
|
-
Portal.displayName = "Dialog.Portal";
|
|
346
|
-
Overlay.displayName = "Dialog.Overlay";
|
|
347
|
-
Content.displayName = "Dialog.Content";
|
|
348
|
-
Header.displayName = "Dialog.Header";
|
|
349
|
-
Body.displayName = "Dialog.Body";
|
|
350
|
-
Footer.displayName = "Dialog.Footer";
|
|
351
|
-
CloseButton.displayName = "Dialog.CloseButton";
|
|
352
|
-
Title.displayName = "Dialog.Title";
|
|
353
|
-
Description.displayName = "Dialog.Description";
|
|
354
|
-
|
|
355
|
-
export {
|
|
356
|
-
Dialog2 as Dialog
|
|
357
|
-
};
|
|
358
|
-
//# sourceMappingURL=chunk-WA56YHV3.mjs.map
|