@spark-ui/components 16.2.3 → 17.0.1-beta.0
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/Button-CXL2NOrq.js +2 -0
- package/dist/Button-CXL2NOrq.js.map +1 -0
- package/dist/{Button-DPncfbbM.mjs → Button-CcIRizse.mjs} +25 -79
- package/dist/Button-CcIRizse.mjs.map +1 -0
- package/dist/{Icon-C23-htlD.mjs → Icon-BO327oHU.mjs} +8 -9
- package/dist/Icon-BO327oHU.mjs.map +1 -0
- package/dist/Icon-C-cNTnzd.js +2 -0
- package/dist/Icon-C-cNTnzd.js.map +1 -0
- package/dist/{IconButton-Bfd-6BAD.mjs → IconButton-CP4JbWsI.mjs} +14 -14
- package/dist/IconButton-CP4JbWsI.mjs.map +1 -0
- package/dist/IconButton-JFDGiOOn.js +2 -0
- package/dist/IconButton-JFDGiOOn.js.map +1 -0
- package/dist/Spinner-Br4Rp9V2.js +2 -0
- package/dist/Spinner-Br4Rp9V2.js.map +1 -0
- package/dist/{Spinner-aLrtE2JN.mjs → Spinner-Co3AjkQV.mjs} +7 -8
- package/dist/Spinner-Co3AjkQV.mjs.map +1 -0
- package/dist/TextLink-5MvP0P8D.js +2 -0
- package/dist/TextLink-5MvP0P8D.js.map +1 -0
- package/dist/{TextLink-D7mOCjY_.mjs → TextLink-Cc_LeVcx.mjs} +10 -11
- package/dist/TextLink-Cc_LeVcx.mjs.map +1 -0
- package/dist/accordion/index.js +1 -1
- package/dist/accordion/index.mjs +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/badge/BadgeItem.styles.d.ts +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs +10 -11
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/index.mjs +2 -2
- package/dist/button/Button.styles.d.ts +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/button/variants/contrast.d.ts +0 -4
- package/dist/button/variants/filled.d.ts +0 -4
- package/dist/button/variants/ghost.d.ts +0 -4
- package/dist/button/variants/outlined.d.ts +0 -4
- package/dist/button/variants/tinted.d.ts +0 -4
- package/dist/card/Backdrop.d.ts +1 -1
- package/dist/card/Card.styles.d.ts +1 -1
- package/dist/card/Content.styles.d.ts +1 -1
- package/dist/card/index.js +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +12 -31
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/CarouselPageIndicator.d.ts +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +29 -29
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/CheckboxInput.styles.d.ts +1 -1
- package/dist/checkbox/index.js +1 -1
- package/dist/checkbox/index.js.map +1 -1
- package/dist/checkbox/index.mjs +26 -33
- package/dist/checkbox/index.mjs.map +1 -1
- package/dist/chip/Chip.styles.d.ts +1 -1
- package/dist/chip/index.js +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +34 -69
- package/dist/chip/index.mjs.map +1 -1
- package/dist/chip/variants/dashed.d.ts +0 -4
- package/dist/chip/variants/outlined.d.ts +0 -4
- package/dist/chip/variants/tinted.d.ts +0 -4
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +41 -41
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +2 -2
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +2 -2
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs +2 -2
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs +4 -4
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/icon/Icon.styles.d.ts +1 -1
- package/dist/icon/index.js +1 -1
- package/dist/icon/index.mjs +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +7 -7
- package/dist/input/index.mjs.map +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.mjs +3 -3
- package/dist/popover/PopoverContent.styles.d.ts +1 -1
- package/dist/popover/PopoverContext.d.ts +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.js.map +1 -1
- package/dist/popover/index.mjs +33 -35
- package/dist/popover/index.mjs.map +1 -1
- package/dist/progress/ProgressIndicator.d.ts +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.js.map +1 -1
- package/dist/progress/index.mjs +42 -43
- package/dist/progress/index.mjs.map +1 -1
- package/dist/progress-tracker/ProgressTrackerStep.styles.d.ts +1 -1
- package/dist/progress-tracker/ProgressTrackerStepIndicator.styles.d.ts +1 -1
- package/dist/progress-tracker/index.js +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs +38 -38
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/RadioIndicator.styles.d.ts +1 -1
- package/dist/radio-group/RadioInput.styles.d.ts +1 -1
- package/dist/radio-group/index.js +1 -1
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs +47 -53
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/rating-display/index.js +1 -1
- package/dist/rating-display/index.mjs +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/segmented-gauge/SegmentedGauge.d.ts +1 -1
- package/dist/segmented-gauge/SegmentedGaugeContext.d.ts +1 -1
- package/dist/segmented-gauge/index.js +1 -1
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs +14 -16
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +2 -2
- package/dist/select/index.mjs.map +1 -1
- package/dist/slider/SliderThumb.styles.d.ts +1 -1
- package/dist/slider/SliderTrack.styles.d.ts +1 -1
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +3 -5
- package/dist/slider/index.mjs.map +1 -1
- package/dist/snackbar/SnackbarItem.styles.d.ts +1 -1
- package/dist/snackbar/index.js +1 -1
- package/dist/snackbar/index.js.map +1 -1
- package/dist/snackbar/index.mjs +24 -35
- package/dist/snackbar/index.mjs.map +1 -1
- package/dist/snackbar/snackbarVariants.d.ts +0 -8
- package/dist/spinner/Spinner.styles.d.ts +1 -1
- package/dist/spinner/index.js +1 -1
- package/dist/spinner/index.mjs +1 -1
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/switch/SwitchInput.styles.d.ts +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +22 -23
- package/dist/switch/index.mjs.map +1 -1
- package/dist/tabs/TabsTrigger.styles.d.ts +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +20 -21
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/Tag.styles.d.ts +1 -1
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +19 -35
- package/dist/tag/index.mjs.map +1 -1
- package/dist/tag/variants/filled.d.ts +0 -4
- package/dist/tag/variants/outlined.d.ts +0 -4
- package/dist/tag/variants/tinted.d.ts +0 -4
- package/dist/text-link/TextLink.d.ts +1 -1
- package/dist/text-link/index.js +1 -1
- package/dist/text-link/index.mjs +1 -1
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +10 -14
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/Toast.styles.d.ts +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +25 -37
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toast/types.d.ts +1 -1
- package/package.json +4 -4
- package/dist/Button-B6rA3-e5.js +0 -2
- package/dist/Button-B6rA3-e5.js.map +0 -1
- package/dist/Button-DPncfbbM.mjs.map +0 -1
- package/dist/Icon-C23-htlD.mjs.map +0 -1
- package/dist/Icon-CF0W0LKr.js +0 -2
- package/dist/Icon-CF0W0LKr.js.map +0 -1
- package/dist/IconButton-Bfd-6BAD.mjs.map +0 -1
- package/dist/IconButton-D3g86WpZ.js +0 -2
- package/dist/IconButton-D3g86WpZ.js.map +0 -1
- package/dist/Spinner-_Kffli3B.js +0 -2
- package/dist/Spinner-_Kffli3B.js.map +0 -1
- package/dist/Spinner-aLrtE2JN.mjs.map +0 -1
- package/dist/TextLink-C3xDLsbC.js +0 -2
- package/dist/TextLink-C3xDLsbC.js.map +0 -1
- package/dist/TextLink-D7mOCjY_.mjs.map +0 -1
package/dist/card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n [\n 'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n 'h-sz-16',\n 'default:rounded-t-lg',\n 'bg-[length:200%_100%] bg-position-[0%_0%]',\n ],\n {\n variants: {\n animation: {\n none: '',\n pulse: 'animate-standalone-backdrop-pulse',\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: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n basic: ['default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4'],\n success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n surfaceInverse: [\n 'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n ],\n }),\n },\n defaultVariants: {\n intent: 'main',\n animation: 'none',\n },\n }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n [\n 'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n 'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n ],\n {\n variants: {\n design: {\n filled: [],\n outlined: ['border-sm'],\n tinted: [],\n },\n hasBackdrop: {\n true: ['pt-md'],\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 compoundVariants: [\n // OUTLINED\n { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n { intent: 'basic', design: 'outlined', class: tw(['border-basic']) },\n { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n },\n }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n design: CardStylesProps['design']\n intent: CardStylesProps['intent']\n hasBackdrop: boolean\n inset: boolean\n isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n const context = useContext(CardContext)\n if (!context) {\n throw new Error('useCardContext must be used within a Card component')\n }\n\n return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onDoubleClick',\n 'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n let backdropFound = false\n\n const searchForBackdrop = (node: ReactNode): void => {\n if (backdropFound) return\n\n Children.forEach(node, child => {\n if (backdropFound) return\n\n if (isValidElement(child)) {\n const isBackdropComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n if (isBackdropComponent) {\n backdropFound = true\n\n return\n }\n\n const hasChildren =\n child.props && typeof child.props === 'object' && 'children' in child.props\n\n if (hasChildren) {\n const childChildren = (child.props as { children: ReactNode }).children\n if (childChildren !== undefined && childChildren !== null) {\n searchForBackdrop(childChildren)\n }\n }\n }\n })\n }\n\n searchForBackdrop(children)\n\n return backdropFound\n}\n\nexport const isInteractive = (\n children: ReactNode,\n asChild: boolean | undefined,\n props: Record<string, any>\n): boolean => {\n const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n if (hasMouseEventHandlers) {\n return true\n }\n\n if (!asChild) {\n return false\n }\n\n const child = Children.only(children)\n\n if (!isValidElement(child)) {\n return false\n }\n\n const interactiveElements = ['a', 'button']\n const isInteractiveElement =\n typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n if (isInteractiveElement) {\n return true\n }\n\n const childProps = child.props as Record<string, any>\n const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Card = ({\n children,\n design = 'filled',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const backdropDetected = hasBackdrop(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext.Provider\n value={{\n design,\n intent,\n hasBackdrop: backdropDetected,\n inset,\n isInteractive: interactiveDetected,\n }}\n >\n <Component\n data-spark-component=\"card\"\n data-interactive={interactiveDetected}\n ref={ref}\n className={cardStyles({\n className,\n design,\n intent,\n hasBackdrop: backdropDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext.Provider>\n )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n [\n 'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n 'default:transition-colors default:duration-200 ease-linear',\n ],\n {\n variants: {\n inset: {\n false: ['default:p-lg'],\n },\n design: {\n filled: [],\n outlined: [\n 'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ],\n tinted: [],\n },\n hasBackdrop: {\n true: ['rounded-t-[16px_8px] '],\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 compoundVariants: [\n // FILLED\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main text-on-main group-focus:bg-main-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support text-on-support group-focus:bg-support-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent text-on-accent group-focus:bg-accent-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n ]),\n },\n {\n intent: 'basic',\n design: 'filled',\n class: tw([\n 'bg-basic text-on-basic group-focus:bg-basic-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success text-on-success group-focus:bg-success-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert text-on-alert group-focus:bg-alert-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error group-focus:bg-error-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info group-focus:bg-info-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n // OUTLINED\n /**\n * Outlined styles are handled by the Card component (parent)\n */\n // TINTED\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'basic',\n design: 'tinted',\n class: tw([\n 'bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n inset: false,\n hasBackdrop: true,\n },\n }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasBackdrop } = useCardContext()\n\n return (\n <Component\n data-spark-component=\"card-content\"\n ref={ref}\n className={contentStyles({\n className,\n design,\n intent,\n inset,\n hasBackdrop,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n Content: typeof Content\n Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n Content,\n Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"names":["backdropStyles","cva","makeVariants","Backdrop","intent","animation","props","jsx","cardStyles","tw","CardContext","createContext","useCardContext","context","useContext","MOUSE_EVENTS","hasBackdrop","children","backdropFound","searchForBackdrop","node","Children","child","isValidElement","childChildren","isInteractive","asChild","event","interactiveElements","childProps","Card","design","inset","className","ref","Component","Slot","backdropDetected","interactiveDetected","contentStyles","Content","Root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n [\n 'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n 'h-sz-16',\n 'default:rounded-t-lg',\n 'bg-[length:200%_100%] bg-position-[0%_0%]',\n ],\n {\n variants: {\n animation: {\n none: '',\n pulse: 'animate-standalone-backdrop-pulse',\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n surfaceInverse: [\n 'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n ],\n }),\n },\n defaultVariants: {\n intent: 'main',\n animation: 'none',\n },\n }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n [\n 'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n 'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n ],\n {\n variants: {\n design: {\n filled: [],\n outlined: ['border-sm'],\n tinted: [],\n },\n hasBackdrop: {\n true: ['pt-md'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // OUTLINED\n { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n },\n }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n design: CardStylesProps['design']\n intent: CardStylesProps['intent']\n hasBackdrop: boolean\n inset: boolean\n isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n const context = useContext(CardContext)\n if (!context) {\n throw new Error('useCardContext must be used within a Card component')\n }\n\n return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onDoubleClick',\n 'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n let backdropFound = false\n\n const searchForBackdrop = (node: ReactNode): void => {\n if (backdropFound) return\n\n Children.forEach(node, child => {\n if (backdropFound) return\n\n if (isValidElement(child)) {\n const isBackdropComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n if (isBackdropComponent) {\n backdropFound = true\n\n return\n }\n\n const hasChildren =\n child.props && typeof child.props === 'object' && 'children' in child.props\n\n if (hasChildren) {\n const childChildren = (child.props as { children: ReactNode }).children\n if (childChildren !== undefined && childChildren !== null) {\n searchForBackdrop(childChildren)\n }\n }\n }\n })\n }\n\n searchForBackdrop(children)\n\n return backdropFound\n}\n\nexport const isInteractive = (\n children: ReactNode,\n asChild: boolean | undefined,\n props: Record<string, any>\n): boolean => {\n const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n if (hasMouseEventHandlers) {\n return true\n }\n\n if (!asChild) {\n return false\n }\n\n const child = Children.only(children)\n\n if (!isValidElement(child)) {\n return false\n }\n\n const interactiveElements = ['a', 'button']\n const isInteractiveElement =\n typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n if (isInteractiveElement) {\n return true\n }\n\n const childProps = child.props as Record<string, any>\n const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Card = ({\n children,\n design = 'filled',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const backdropDetected = hasBackdrop(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext.Provider\n value={{\n design,\n intent,\n hasBackdrop: backdropDetected,\n inset,\n isInteractive: interactiveDetected,\n }}\n >\n <Component\n data-spark-component=\"card\"\n data-interactive={interactiveDetected}\n ref={ref}\n className={cardStyles({\n className,\n design,\n intent,\n hasBackdrop: backdropDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext.Provider>\n )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n [\n 'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n 'default:transition-colors default:duration-200 ease-linear',\n ],\n {\n variants: {\n inset: {\n false: ['default:p-lg'],\n },\n design: {\n filled: [],\n outlined: [\n 'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ],\n tinted: [],\n },\n hasBackdrop: {\n true: ['rounded-t-[16px_8px] '],\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // FILLED\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main text-on-main group-focus:bg-main-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support text-on-support group-focus:bg-support-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent text-on-accent group-focus:bg-accent-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success text-on-success group-focus:bg-success-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert text-on-alert group-focus:bg-alert-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error group-focus:bg-error-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info group-focus:bg-info-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n // OUTLINED\n /**\n * Outlined styles are handled by the Card component (parent)\n */\n // TINTED\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n inset: false,\n hasBackdrop: true,\n },\n }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasBackdrop } = useCardContext()\n\n return (\n <Component\n data-spark-component=\"card-content\"\n ref={ref}\n className={contentStyles({\n className,\n design,\n intent,\n inset,\n hasBackdrop,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n Content: typeof Content\n Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n Content,\n Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"names":["backdropStyles","cva","makeVariants","Backdrop","intent","animation","props","jsx","cardStyles","tw","CardContext","createContext","useCardContext","context","useContext","MOUSE_EVENTS","hasBackdrop","children","backdropFound","searchForBackdrop","node","Children","child","isValidElement","childChildren","isInteractive","asChild","event","interactiveElements","childProps","Card","design","inset","className","ref","Component","Slot","backdropDetected","interactiveDetected","contentStyles","Content","Root"],"mappings":"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"}
|
package/dist/card/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as l } from "react/jsx-runtime";
|
|
|
2
2
|
import { makeVariants as g, tw as e } from "@spark-ui/internal-utils";
|
|
3
3
|
import { cva as p } from "class-variance-authority";
|
|
4
4
|
import { S as h } from "../Slot-DLY1rJrG.mjs";
|
|
5
|
-
import { createContext as B, useContext as E, Children as
|
|
5
|
+
import { createContext as B, useContext as E, Children as C, isValidElement as x } from "react";
|
|
6
6
|
const M = p(
|
|
7
7
|
[
|
|
8
8
|
"default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0",
|
|
@@ -20,7 +20,6 @@ const M = p(
|
|
|
20
20
|
main: ["default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4"],
|
|
21
21
|
support: ["default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4"],
|
|
22
22
|
accent: ["default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4"],
|
|
23
|
-
basic: ["default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4"],
|
|
24
23
|
success: ["default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4"],
|
|
25
24
|
alert: ["default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4"],
|
|
26
25
|
danger: ["default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4"],
|
|
@@ -61,7 +60,6 @@ const N = p(
|
|
|
61
60
|
main: [],
|
|
62
61
|
support: [],
|
|
63
62
|
accent: [],
|
|
64
|
-
basic: [],
|
|
65
63
|
success: [],
|
|
66
64
|
alert: [],
|
|
67
65
|
danger: [],
|
|
@@ -76,7 +74,6 @@ const N = p(
|
|
|
76
74
|
{ intent: "main", design: "outlined", class: e(["border-main"]) },
|
|
77
75
|
{ intent: "support", design: "outlined", class: e(["border-support"]) },
|
|
78
76
|
{ intent: "accent", design: "outlined", class: e(["border-accent"]) },
|
|
79
|
-
{ intent: "basic", design: "outlined", class: e(["border-basic"]) },
|
|
80
77
|
{ intent: "success", design: "outlined", class: e(["border-success"]) },
|
|
81
78
|
{ intent: "alert", design: "outlined", class: e(["border-alert"]) },
|
|
82
79
|
{ intent: "danger", design: "outlined", class: e(["border-error"]) },
|
|
@@ -108,8 +105,8 @@ const N = p(
|
|
|
108
105
|
], w = (r) => {
|
|
109
106
|
let n = !1;
|
|
110
107
|
const o = (s) => {
|
|
111
|
-
n ||
|
|
112
|
-
if (!n &&
|
|
108
|
+
n || C.forEach(s, (t) => {
|
|
109
|
+
if (!n && x(t)) {
|
|
113
110
|
if (typeof t.type == "function" && t.type.displayName === "Card.Backdrop") {
|
|
114
111
|
n = !0;
|
|
115
112
|
return;
|
|
@@ -127,8 +124,8 @@ const N = p(
|
|
|
127
124
|
return !0;
|
|
128
125
|
if (!n)
|
|
129
126
|
return !1;
|
|
130
|
-
const t =
|
|
131
|
-
if (!
|
|
127
|
+
const t = C.only(r);
|
|
128
|
+
if (!x(t))
|
|
132
129
|
return !1;
|
|
133
130
|
const d = ["a", "button"];
|
|
134
131
|
if (typeof t.type == "string" && d.includes(t.type))
|
|
@@ -145,7 +142,7 @@ const N = p(
|
|
|
145
142
|
ref: u,
|
|
146
143
|
...a
|
|
147
144
|
}) => {
|
|
148
|
-
const c = t ? h : "div", i = w(r),
|
|
145
|
+
const c = t ? h : "div", i = w(r), b = I(r, t, a);
|
|
149
146
|
return /* @__PURE__ */ l(
|
|
150
147
|
k.Provider,
|
|
151
148
|
{
|
|
@@ -154,13 +151,13 @@ const N = p(
|
|
|
154
151
|
intent: o,
|
|
155
152
|
hasBackdrop: i,
|
|
156
153
|
inset: s,
|
|
157
|
-
isInteractive:
|
|
154
|
+
isInteractive: b
|
|
158
155
|
},
|
|
159
156
|
children: /* @__PURE__ */ l(
|
|
160
157
|
c,
|
|
161
158
|
{
|
|
162
159
|
"data-spark-component": "card",
|
|
163
|
-
"data-interactive":
|
|
160
|
+
"data-interactive": b,
|
|
164
161
|
ref: u,
|
|
165
162
|
className: N({
|
|
166
163
|
className: d,
|
|
@@ -200,7 +197,6 @@ const S = p(
|
|
|
200
197
|
main: [],
|
|
201
198
|
support: [],
|
|
202
199
|
accent: [],
|
|
203
|
-
basic: [],
|
|
204
200
|
success: [],
|
|
205
201
|
alert: [],
|
|
206
202
|
danger: [],
|
|
@@ -236,14 +232,6 @@ const S = p(
|
|
|
236
232
|
"group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered"
|
|
237
233
|
])
|
|
238
234
|
},
|
|
239
|
-
{
|
|
240
|
-
intent: "basic",
|
|
241
|
-
design: "filled",
|
|
242
|
-
class: e([
|
|
243
|
-
"bg-basic text-on-basic group-focus:bg-basic-hovered",
|
|
244
|
-
"group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered"
|
|
245
|
-
])
|
|
246
|
-
},
|
|
247
235
|
{
|
|
248
236
|
intent: "success",
|
|
249
237
|
design: "filled",
|
|
@@ -321,13 +309,6 @@ const S = p(
|
|
|
321
309
|
"group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered"
|
|
322
310
|
])
|
|
323
311
|
},
|
|
324
|
-
{
|
|
325
|
-
intent: "basic",
|
|
326
|
-
design: "tinted",
|
|
327
|
-
class: e([
|
|
328
|
-
"bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered"
|
|
329
|
-
])
|
|
330
|
-
},
|
|
331
312
|
{
|
|
332
313
|
intent: "success",
|
|
333
314
|
design: "tinted",
|
|
@@ -384,7 +365,7 @@ const S = p(
|
|
|
384
365
|
hasBackdrop: !0
|
|
385
366
|
}
|
|
386
367
|
}
|
|
387
|
-
),
|
|
368
|
+
), v = ({ children: r, inset: n, asChild: o, className: s, ref: t, ...d }) => {
|
|
388
369
|
const u = o ? h : "div", { design: a, intent: c, hasBackdrop: i } = V();
|
|
389
370
|
return /* @__PURE__ */ l(
|
|
390
371
|
u,
|
|
@@ -403,13 +384,13 @@ const S = p(
|
|
|
403
384
|
}
|
|
404
385
|
);
|
|
405
386
|
};
|
|
406
|
-
|
|
387
|
+
v.displayName = "Content";
|
|
407
388
|
const D = Object.assign(y, {
|
|
408
|
-
Content:
|
|
389
|
+
Content: v,
|
|
409
390
|
Backdrop: f
|
|
410
391
|
});
|
|
411
392
|
D.displayName = "Card";
|
|
412
|
-
|
|
393
|
+
v.displayName = "Card.Content";
|
|
413
394
|
f.displayName = "Card.Backdrop";
|
|
414
395
|
export {
|
|
415
396
|
D as Card
|
package/dist/card/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n [\n 'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n 'h-sz-16',\n 'default:rounded-t-lg',\n 'bg-[length:200%_100%] bg-position-[0%_0%]',\n ],\n {\n variants: {\n animation: {\n none: '',\n pulse: 'animate-standalone-backdrop-pulse',\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: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n basic: ['default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4'],\n success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n surfaceInverse: [\n 'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n ],\n }),\n },\n defaultVariants: {\n intent: 'main',\n animation: 'none',\n },\n }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n [\n 'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n 'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n ],\n {\n variants: {\n design: {\n filled: [],\n outlined: ['border-sm'],\n tinted: [],\n },\n hasBackdrop: {\n true: ['pt-md'],\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 compoundVariants: [\n // OUTLINED\n { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n { intent: 'basic', design: 'outlined', class: tw(['border-basic']) },\n { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n },\n }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n design: CardStylesProps['design']\n intent: CardStylesProps['intent']\n hasBackdrop: boolean\n inset: boolean\n isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n const context = useContext(CardContext)\n if (!context) {\n throw new Error('useCardContext must be used within a Card component')\n }\n\n return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onDoubleClick',\n 'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n let backdropFound = false\n\n const searchForBackdrop = (node: ReactNode): void => {\n if (backdropFound) return\n\n Children.forEach(node, child => {\n if (backdropFound) return\n\n if (isValidElement(child)) {\n const isBackdropComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n if (isBackdropComponent) {\n backdropFound = true\n\n return\n }\n\n const hasChildren =\n child.props && typeof child.props === 'object' && 'children' in child.props\n\n if (hasChildren) {\n const childChildren = (child.props as { children: ReactNode }).children\n if (childChildren !== undefined && childChildren !== null) {\n searchForBackdrop(childChildren)\n }\n }\n }\n })\n }\n\n searchForBackdrop(children)\n\n return backdropFound\n}\n\nexport const isInteractive = (\n children: ReactNode,\n asChild: boolean | undefined,\n props: Record<string, any>\n): boolean => {\n const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n if (hasMouseEventHandlers) {\n return true\n }\n\n if (!asChild) {\n return false\n }\n\n const child = Children.only(children)\n\n if (!isValidElement(child)) {\n return false\n }\n\n const interactiveElements = ['a', 'button']\n const isInteractiveElement =\n typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n if (isInteractiveElement) {\n return true\n }\n\n const childProps = child.props as Record<string, any>\n const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Card = ({\n children,\n design = 'filled',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const backdropDetected = hasBackdrop(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext.Provider\n value={{\n design,\n intent,\n hasBackdrop: backdropDetected,\n inset,\n isInteractive: interactiveDetected,\n }}\n >\n <Component\n data-spark-component=\"card\"\n data-interactive={interactiveDetected}\n ref={ref}\n className={cardStyles({\n className,\n design,\n intent,\n hasBackdrop: backdropDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext.Provider>\n )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n [\n 'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n 'default:transition-colors default:duration-200 ease-linear',\n ],\n {\n variants: {\n inset: {\n false: ['default:p-lg'],\n },\n design: {\n filled: [],\n outlined: [\n 'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ],\n tinted: [],\n },\n hasBackdrop: {\n true: ['rounded-t-[16px_8px] '],\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 compoundVariants: [\n // FILLED\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main text-on-main group-focus:bg-main-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support text-on-support group-focus:bg-support-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent text-on-accent group-focus:bg-accent-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n ]),\n },\n {\n intent: 'basic',\n design: 'filled',\n class: tw([\n 'bg-basic text-on-basic group-focus:bg-basic-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success text-on-success group-focus:bg-success-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert text-on-alert group-focus:bg-alert-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error group-focus:bg-error-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info group-focus:bg-info-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n // OUTLINED\n /**\n * Outlined styles are handled by the Card component (parent)\n */\n // TINTED\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'basic',\n design: 'tinted',\n class: tw([\n 'bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n inset: false,\n hasBackdrop: true,\n },\n }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasBackdrop } = useCardContext()\n\n return (\n <Component\n data-spark-component=\"card-content\"\n ref={ref}\n className={contentStyles({\n className,\n design,\n intent,\n inset,\n hasBackdrop,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n Content: typeof Content\n Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n Content,\n Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"names":["backdropStyles","cva","makeVariants","Backdrop","intent","animation","props","jsx","cardStyles","tw","CardContext","createContext","useCardContext","context","useContext","MOUSE_EVENTS","hasBackdrop","children","backdropFound","searchForBackdrop","node","Children","child","isValidElement","childChildren","isInteractive","asChild","event","interactiveElements","childProps","Card","design","inset","className","ref","Component","Slot","backdropDetected","interactiveDetected","contentStyles","Content","Root"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n [\n 'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n 'h-sz-16',\n 'default:rounded-t-lg',\n 'bg-[length:200%_100%] bg-position-[0%_0%]',\n ],\n {\n variants: {\n animation: {\n none: '',\n pulse: 'animate-standalone-backdrop-pulse',\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n surfaceInverse: [\n 'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n ],\n }),\n },\n defaultVariants: {\n intent: 'main',\n animation: 'none',\n },\n }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n [\n 'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n 'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n ],\n {\n variants: {\n design: {\n filled: [],\n outlined: ['border-sm'],\n tinted: [],\n },\n hasBackdrop: {\n true: ['pt-md'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // OUTLINED\n { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n },\n }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n design: CardStylesProps['design']\n intent: CardStylesProps['intent']\n hasBackdrop: boolean\n inset: boolean\n isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n const context = useContext(CardContext)\n if (!context) {\n throw new Error('useCardContext must be used within a Card component')\n }\n\n return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onDoubleClick',\n 'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n let backdropFound = false\n\n const searchForBackdrop = (node: ReactNode): void => {\n if (backdropFound) return\n\n Children.forEach(node, child => {\n if (backdropFound) return\n\n if (isValidElement(child)) {\n const isBackdropComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n if (isBackdropComponent) {\n backdropFound = true\n\n return\n }\n\n const hasChildren =\n child.props && typeof child.props === 'object' && 'children' in child.props\n\n if (hasChildren) {\n const childChildren = (child.props as { children: ReactNode }).children\n if (childChildren !== undefined && childChildren !== null) {\n searchForBackdrop(childChildren)\n }\n }\n }\n })\n }\n\n searchForBackdrop(children)\n\n return backdropFound\n}\n\nexport const isInteractive = (\n children: ReactNode,\n asChild: boolean | undefined,\n props: Record<string, any>\n): boolean => {\n const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n if (hasMouseEventHandlers) {\n return true\n }\n\n if (!asChild) {\n return false\n }\n\n const child = Children.only(children)\n\n if (!isValidElement(child)) {\n return false\n }\n\n const interactiveElements = ['a', 'button']\n const isInteractiveElement =\n typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n if (isInteractiveElement) {\n return true\n }\n\n const childProps = child.props as Record<string, any>\n const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Card = ({\n children,\n design = 'filled',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const backdropDetected = hasBackdrop(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext.Provider\n value={{\n design,\n intent,\n hasBackdrop: backdropDetected,\n inset,\n isInteractive: interactiveDetected,\n }}\n >\n <Component\n data-spark-component=\"card\"\n data-interactive={interactiveDetected}\n ref={ref}\n className={cardStyles({\n className,\n design,\n intent,\n hasBackdrop: backdropDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext.Provider>\n )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n [\n 'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n 'default:transition-colors default:duration-200 ease-linear',\n ],\n {\n variants: {\n inset: {\n false: ['default:p-lg'],\n },\n design: {\n filled: [],\n outlined: [\n 'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ],\n tinted: [],\n },\n hasBackdrop: {\n true: ['rounded-t-[16px_8px] '],\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // FILLED\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main text-on-main group-focus:bg-main-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support text-on-support group-focus:bg-support-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent text-on-accent group-focus:bg-accent-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success text-on-success group-focus:bg-success-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert text-on-alert group-focus:bg-alert-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error group-focus:bg-error-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info group-focus:bg-info-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n // OUTLINED\n /**\n * Outlined styles are handled by the Card component (parent)\n */\n // TINTED\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n inset: false,\n hasBackdrop: true,\n },\n }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasBackdrop } = useCardContext()\n\n return (\n <Component\n data-spark-component=\"card-content\"\n ref={ref}\n className={contentStyles({\n className,\n design,\n intent,\n inset,\n hasBackdrop,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n Content: typeof Content\n Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n Content,\n Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"names":["backdropStyles","cva","makeVariants","Backdrop","intent","animation","props","jsx","cardStyles","tw","CardContext","createContext","useCardContext","context","useContext","MOUSE_EVENTS","hasBackdrop","children","backdropFound","searchForBackdrop","node","Children","child","isValidElement","childChildren","isInteractive","asChild","event","interactiveElements","childProps","Card","design","inset","className","ref","Component","Slot","backdropDetected","interactiveDetected","contentStyles","Content","Root"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ interface Props {
|
|
|
5
5
|
index: number;
|
|
6
6
|
className?: string;
|
|
7
7
|
unstyled?: boolean;
|
|
8
|
-
intent?: '
|
|
8
|
+
intent?: 'support' | 'surface';
|
|
9
9
|
}
|
|
10
10
|
export declare const CarouselPageIndicator: {
|
|
11
11
|
({ children, unstyled, index, "aria-label": ariaLabel, className, intent, }: Props): import("react/jsx-runtime").JSX.Element;
|
package/dist/carousel/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),k=require("class-variance-authority"),s=require("react"),se=require("@spark-ui/icons/ArrowVerticalRight"),O=require("../Icon-CF0W0LKr.js"),$=require("../IconButton-D3g86WpZ.js"),oe=require("@spark-ui/icons/ArrowVerticalLeft");function ae(e){const t=s.useRef(new Map),r=s.useRef(null),n=s.useRef(new Map),o=s.useCallback(()=>u=>{u.forEach(d=>{const b=d.isIntersecting,S=d.target;t.current.set(S,b);const h=n.current.get(S);h&&h(b)})},[]),a=s.useCallback(()=>{if(r.current)return r.current;const u=e.current;if(!u)return null;const d=new IntersectionObserver(o(),{root:u,threshold:.2});return r.current=d,d},[e,o]);s.useEffect(()=>{const u=a(),d=t.current,b=n.current;return()=>{u&&(u.disconnect(),d.clear(),b.clear(),r.current=null)}},[a]);const i=s.useCallback((u,d)=>{if(!u)return;const b=a();if(!b){setTimeout(()=>i(u,d),0);return}const S=t.current.get(u)??!0;t.current.set(u,S),n.current.set(u,d),b.observe(u),d(S)},[a]),c=s.useCallback(u=>{if(!u)return;const d=r.current;d&&d.unobserve(u),t.current.delete(u),n.current.delete(u)},[]),g=s.useCallback(u=>u?t.current.get(u)??!0:!0,[]);return{registerSlide:i,unregisterSlide:c,isSlideVisible:g}}function ie(e){const t=s.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return s.useLayoutEffect(()=>{t.current=e}),s.useCallback((...r)=>t.current?.(...r),[])}const ce=()=>{const e=s.useRef(!1);return s.useEffect(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function ue(e,t){const r=s.useRef(0),n=s.useRef(null);s.useEffect(()=>{const o=e.current;if(!o)return;const a="onscrollend"in window,i=()=>{t()},c=()=>{n.current&&clearTimeout(n.current),e.current&&(r.current=e.current.scrollLeft,n.current=setTimeout(()=>{e.current&&i()},150))};return a?o.addEventListener("scrollend",i):o.addEventListener("scroll",c),()=>{n.current&&clearTimeout(n.current),a?o.removeEventListener("scrollend",i):o.removeEventListener("scroll",c)}},[t,e])}function le(e,t){s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const n=new ResizeObserver(o=>{for(const a of o)t(a.contentRect.width)});return n.observe(r),()=>n.disconnect()},[e,t])}function de({totalSlides:e,slidesPerMove:t,slidesPerPage:r}){const n=t==="auto"?r:t,o=[],a=Math.floor((e-r)/n)*n;for(let i=0;i<=a;i+=n)o.push(i);return o[o.length-1]!==e-r&&o.push(e-r),o}function q(e){return e?Array.from(e.querySelectorAll('[data-part="item"]')):[]}function _(e,{container:t,slidesPerMove:r,slidesPerPage:n}){return de({totalSlides:q(t).length,slidesPerPage:n,slidesPerMove:r}).includes(e)}function B({container:e,slidesPerMove:t,slidesPerPage:r}){return e?q(e).filter((n,o)=>_(o,{slidesPerMove:t,slidesPerPage:r,container:e})).map(n=>n.offsetLeft):[]}function fe({dotIndex:e,pageState:t,totalPages:r,maxDots:n=5}){if(r<=n)return e===t?"active":"idle";if(t<=Math.floor(n/2))return e>n-1?"hidden":e===t?"active":e===n-1?"edge":"idle";if(t>=r-Math.ceil(n/2)){const i=r-n;return e<i?"hidden":e===t?"active":e===i?"edge":"idle"}const o=t-Math.floor(n/2),a=t+Math.floor(n/2);return e<o||e>a?"hidden":e===t?"active":e===o||e===a?"edge":"idle"}function pe(e=[],{carouselRef:t,slidesPerMove:r,slidesPerPage:n}){const[o,a]=s.useState(e),i=s.useMemo(()=>o,[o]);return le(t,()=>{const c=B({slidesPerMove:r,slidesPerPage:n,container:t.current});JSON.stringify(o)!==JSON.stringify(c)&&a(c)}),[i,a]}const x="carousel",N="ltr",ge=({defaultPage:e,gap:t=16,snapType:r="mandatory",snapStop:n="always",scrollPadding:o=0,slidesPerPage:a=1,slidesPerMove:i="auto",scrollBehavior:c="smooth",loop:g=!1,pagePickerInset:u=!1,maxDots:d=5,page:b,onPageChange:S})=>{const h=s.useId(),[f,I]=s.useState(e||b||0),C=s.useRef(null),M=s.useRef([]),T=ce().current,L=ie(S),{registerSlide:D,unregisterSlide:ee,isSlideVisible:te}=ae(C),[m]=pe([],{carouselRef:C,slidesPerMove:i,slidesPerPage:a}),P=s.useRef(g||f>0),R=s.useRef(g||f<m.length-1);P.current=g||f>0,R.current=g||f<m.length-1;const j=s.useCallback(l=>{l!==f&&(I(l),L?.(l))},[L,f]),y=s.useCallback((l,v)=>{C.current&&(C.current.scrollTo({left:m[l],behavior:v==="instant"?"auto":"smooth"}),j(l))},[j,m]),z=s.useCallback(l=>{if(P){const v=g&&f===0?m.length-1:Math.max(f-1,0);y(v,c),l?.(v)}},[g,m,f,c,y]),A=s.useCallback(l=>{if(R){const v=g&&f===m.length-1?0:Math.min(f+1,m.length-1);y(v,c),l?.(v)}},[g,m,f,c,y]);s.useEffect(()=>{b!=null&&y(b,c)},[b,c,y]),s.useLayoutEffect(()=>{if(e!=null&&!T&&C.current){const l=B({container:C.current,slidesPerMove:i,slidesPerPage:a});C.current.scrollTo({left:l[e],behavior:"instant"})}},[e,T,i,a]);const re=s.useCallback(()=>{if(!C.current||m.length===0)return;const{scrollLeft:l}=C.current,v=m.map(V=>Math.abs(l-V)),E=v.indexOf(Math.min(...v));E!==-1&&j(E)},[m,j]);return ue(C,re),{ref:C,pageIndicatorsRefs:M,gap:t,snapType:r,snapStop:n,scrollPadding:o,slidesPerPage:a,slidesPerMove:i,scrollBehavior:c,loop:g,pagePickerInset:u,maxDots:d,page:f,pageSnapPoints:m,canScrollNext:R.current,canScrollPrev:P.current,scrollTo:y,scrollPrev:z,scrollNext:A,registerSlide:D,unregisterSlide:ee,isSlideVisible:te,getRootProps:()=>({id:`carousel::${h}:`,role:"region","aria-roledescription":"carousel","data-scope":x,"data-part":"root","data-orientation":"horizontal",dir:N,style:{"--slides-per-page":a,"--slide-spacing":`${t}px`,"--slide-item-size":"calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"}}),getControlProps:()=>({"data-scope":x,"data-part":"control","data-orientation":"horizontal"}),getPrevTriggerProps:()=>({id:`carousel::${h}::prev-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"prev-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!P.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${h}::next-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"next-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!R.current,onClick:()=>A()}),getSlidesContainerProps:()=>({id:`carousel::${h}::item-group`,"aria-live":a>1?"off":"polite","data-scope":x,"data-part":"item-group","data-orientation":"horizontal",dir:N,tabIndex:0,style:{display:"grid",gap:"var(--slide-spacing)",scrollSnapType:`x ${r}`,gridAutoFlow:"column",scrollbarWidth:"none",gridAutoColumns:"var(--slide-item-size)",overflowX:"auto"},ref:C}),getSlideProps:({index:l})=>{const v=_(l,{container:C.current,slidesPerMove:i,slidesPerPage:a});return{id:`carousel::${h}::item:${l}`,role:"group","aria-roledescription":"slide","data-scope":x,"data-part":"item","data-index":l,"data-orientation":"horizontal",dir:N,style:{...v&&{scrollSnapAlign:"start",scrollSnapStop:n}}}},getIndicatorGroupProps:()=>({role:"radiogroup",id:`carousel::${h}::indicator-group`,"data-scope":x,"data-part":"indicator-group","data-orientation":"horizontal",dir:N}),getIndicatorProps:({index:l})=>{const v=fe({dotIndex:l,pageState:f,totalPages:m.length,maxDots:d});return{role:"radio",id:`carousel::${h}::indicator:${l}`,"aria-checked":l===f,"data-scope":x,"data-part":"indicator","data-orientation":"horizontal","data-index":l,"data-state":v,tabIndex:l===f?0:-1,onClick:()=>{y(l,c)},onKeyDown:E=>{const V=ne=>{M.current[ne]?.focus()};E.key==="ArrowRight"&&R?A(V):E.key==="ArrowLeft"&&P&&z(V)}}}}},F=s.createContext(null),G=({className:e,snapType:t="mandatory",snapStop:r="always",scrollBehavior:n="smooth",slidesPerMove:o="auto",pagePickerInset:a=!1,slidesPerPage:i=1,loop:c=!1,children:g,gap:u=16,defaultPage:d,page:b,onPageChange:S,maxDots:h=5,...f})=>{const I=ge({defaultPage:d,slidesPerPage:i,slidesPerMove:o,loop:c,gap:u,scrollBehavior:n,snapStop:r,snapType:t,page:b,pagePickerInset:a,onPageChange:S,maxDots:h});return p.jsx(F.Provider,{value:{...I,scrollBehavior:n},children:p.jsx("div",{"data-spark-component":"carousel",className:k.cx("gap-lg relative box-border flex flex-col",e),...I.getRootProps(),...f,children:g})})};G.displayName="Carousel";const w=()=>{const e=s.useContext(F);if(!e)throw Error("useCarouselContext must be used within a Carousel provider");return e},J=({children:e,className:t,...r})=>{const n=w();return p.jsx("div",{"data-spark-component":"carousel-controls",className:k.cx("default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",t),...n.getControlProps(),...r,children:e})};J.displayName="Carousel.Controls";const W=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-next-button",...r.getNextTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(se.ArrowVerticalRight,{})})})};W.displayName="Carousel.NextButton";const K=({children:e,unstyled:t=!1,index:r,"aria-label":n,className:o,intent:a="basic"})=>{const i=w(),c=s.useRef(null);s.useEffect(()=>{i.pageIndicatorsRefs.current&&(i.pageIndicatorsRefs.current[r]=c.current)});const g=i.getIndicatorProps({index:r});return p.jsx("button",{"data-spark-component":"carousel-page-indicator",ref:c,...g,"aria-label":n,className:k.cx({[k.cx("border-outline group relative flex justify-center border-0 hover:cursor-pointer","m-sm rounded-sm transition-all duration-[200ms] ease-linear","w-sz-8 h-sz-8","data-[state=active]:w-sz-32 data-[state=active]:h-sz-8","data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4","data-[state=hidden]:m-0 data-[state=hidden]:size-0",a==="surface"?"data-[state=active]:bg-surface bg-surface/dim-2":"data-[state=active]:bg-basic bg-on-surface/dim-2")]:!t},o),children:e},r)};K.displayName="Carousel.PageIndicator";const X=({children:e,className:t})=>{const r=w();return p.jsx(p.Fragment,{children:p.jsx("div",{"data-spark-component":"carousel-page-picker",...r.getIndicatorGroupProps(),className:k.cx("flex-wrap items-center justify-center","default:min-h-sz-16 flex",r.pagePickerInset&&"bottom-sz-12 absolute inset-x-0",t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(n,o)=>o)})})})};X.displayName="Carousel.PagePicker";const H=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-prev-button",...r.getPrevTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(oe.ArrowVerticalLeft,{})})})};H.displayName="Carousel.PrevButton";function be(e,t){const[r,n]=s.useState(!0),o=w();return s.useEffect(()=>{const a=e.current;if(!a)return;const{registerSlide:i,unregisterSlide:c}=o;return i(a,n),()=>{c(a)}},[e]),r}const Q=({children:e,index:t=0,totalSlides:r,className:n="",...o})=>{const a=s.useRef(null),i=w(),c=be(a,i.ref);return p.jsx("div",{"data-spark-component":"carousel-slide",ref:a,...i.getSlideProps({index:t,totalSlides:r}),className:k.cx("default:bg-surface relative overflow-hidden",n),"aria-hidden":!c,inert:!c,...o,children:e})};Q.displayName="Carousel.Slide";const U=({children:e,className:t=""})=>{const r=w(),n=s.Children.toArray(e);return p.jsx("div",{"data-spark-component":"carousel-slides",...r.getSlidesContainerProps(),className:k.cx("focus-visible:u-outline relative w-full","[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",t),children:n.map((o,a)=>s.isValidElement(o)?s.cloneElement(o,{index:a,totalSlides:n.length}):o)})};U.displayName="Carousel.Slides";const Y=({children:e})=>p.jsx("div",{className:"relative flex items-center justify-around p-0",children:e});Y.displayName="Carousel.Viewport";const Z=Object.assign(G,{Controls:J,NextButton:W,PrevButton:H,Slide:Q,Slides:U,Viewport:Y,PagePicker:X,PageIndicator:K});Z.displayName="Carousel";exports.Carousel=Z;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),k=require("class-variance-authority"),s=require("react"),se=require("@spark-ui/icons/ArrowVerticalRight"),O=require("../Icon-C-cNTnzd.js"),$=require("../IconButton-JFDGiOOn.js"),oe=require("@spark-ui/icons/ArrowVerticalLeft");function ae(e){const t=s.useRef(new Map),r=s.useRef(null),n=s.useRef(new Map),o=s.useCallback(()=>u=>{u.forEach(d=>{const b=d.isIntersecting,S=d.target;t.current.set(S,b);const h=n.current.get(S);h&&h(b)})},[]),a=s.useCallback(()=>{if(r.current)return r.current;const u=e.current;if(!u)return null;const d=new IntersectionObserver(o(),{root:u,threshold:.2});return r.current=d,d},[e,o]);s.useEffect(()=>{const u=a(),d=t.current,b=n.current;return()=>{u&&(u.disconnect(),d.clear(),b.clear(),r.current=null)}},[a]);const i=s.useCallback((u,d)=>{if(!u)return;const b=a();if(!b){setTimeout(()=>i(u,d),0);return}const S=t.current.get(u)??!0;t.current.set(u,S),n.current.set(u,d),b.observe(u),d(S)},[a]),c=s.useCallback(u=>{if(!u)return;const d=r.current;d&&d.unobserve(u),t.current.delete(u),n.current.delete(u)},[]),g=s.useCallback(u=>u?t.current.get(u)??!0:!0,[]);return{registerSlide:i,unregisterSlide:c,isSlideVisible:g}}function ie(e){const t=s.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return s.useLayoutEffect(()=>{t.current=e}),s.useCallback((...r)=>t.current?.(...r),[])}const ce=()=>{const e=s.useRef(!1);return s.useEffect(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function ue(e,t){const r=s.useRef(0),n=s.useRef(null);s.useEffect(()=>{const o=e.current;if(!o)return;const a="onscrollend"in window,i=()=>{t()},c=()=>{n.current&&clearTimeout(n.current),e.current&&(r.current=e.current.scrollLeft,n.current=setTimeout(()=>{e.current&&i()},150))};return a?o.addEventListener("scrollend",i):o.addEventListener("scroll",c),()=>{n.current&&clearTimeout(n.current),a?o.removeEventListener("scrollend",i):o.removeEventListener("scroll",c)}},[t,e])}function le(e,t){s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const n=new ResizeObserver(o=>{for(const a of o)t(a.contentRect.width)});return n.observe(r),()=>n.disconnect()},[e,t])}function de({totalSlides:e,slidesPerMove:t,slidesPerPage:r}){const n=t==="auto"?r:t,o=[],a=Math.floor((e-r)/n)*n;for(let i=0;i<=a;i+=n)o.push(i);return o[o.length-1]!==e-r&&o.push(e-r),o}function q(e){return e?Array.from(e.querySelectorAll('[data-part="item"]')):[]}function _(e,{container:t,slidesPerMove:r,slidesPerPage:n}){return de({totalSlides:q(t).length,slidesPerPage:n,slidesPerMove:r}).includes(e)}function B({container:e,slidesPerMove:t,slidesPerPage:r}){return e?q(e).filter((n,o)=>_(o,{slidesPerMove:t,slidesPerPage:r,container:e})).map(n=>n.offsetLeft):[]}function fe({dotIndex:e,pageState:t,totalPages:r,maxDots:n=5}){if(r<=n)return e===t?"active":"idle";if(t<=Math.floor(n/2))return e>n-1?"hidden":e===t?"active":e===n-1?"edge":"idle";if(t>=r-Math.ceil(n/2)){const i=r-n;return e<i?"hidden":e===t?"active":e===i?"edge":"idle"}const o=t-Math.floor(n/2),a=t+Math.floor(n/2);return e<o||e>a?"hidden":e===t?"active":e===o||e===a?"edge":"idle"}function pe(e=[],{carouselRef:t,slidesPerMove:r,slidesPerPage:n}){const[o,a]=s.useState(e),i=s.useMemo(()=>o,[o]);return le(t,()=>{const c=B({slidesPerMove:r,slidesPerPage:n,container:t.current});JSON.stringify(o)!==JSON.stringify(c)&&a(c)}),[i,a]}const x="carousel",N="ltr",ge=({defaultPage:e,gap:t=16,snapType:r="mandatory",snapStop:n="always",scrollPadding:o=0,slidesPerPage:a=1,slidesPerMove:i="auto",scrollBehavior:c="smooth",loop:g=!1,pagePickerInset:u=!1,maxDots:d=5,page:b,onPageChange:S})=>{const h=s.useId(),[f,I]=s.useState(e||b||0),C=s.useRef(null),M=s.useRef([]),T=ce().current,L=ie(S),{registerSlide:D,unregisterSlide:ee,isSlideVisible:te}=ae(C),[m]=pe([],{carouselRef:C,slidesPerMove:i,slidesPerPage:a}),P=s.useRef(g||f>0),R=s.useRef(g||f<m.length-1);P.current=g||f>0,R.current=g||f<m.length-1;const j=s.useCallback(l=>{l!==f&&(I(l),L?.(l))},[L,f]),y=s.useCallback((l,v)=>{C.current&&(C.current.scrollTo({left:m[l],behavior:v==="instant"?"auto":"smooth"}),j(l))},[j,m]),z=s.useCallback(l=>{if(P){const v=g&&f===0?m.length-1:Math.max(f-1,0);y(v,c),l?.(v)}},[g,m,f,c,y]),A=s.useCallback(l=>{if(R){const v=g&&f===m.length-1?0:Math.min(f+1,m.length-1);y(v,c),l?.(v)}},[g,m,f,c,y]);s.useEffect(()=>{b!=null&&y(b,c)},[b,c,y]),s.useLayoutEffect(()=>{if(e!=null&&!T&&C.current){const l=B({container:C.current,slidesPerMove:i,slidesPerPage:a});C.current.scrollTo({left:l[e],behavior:"instant"})}},[e,T,i,a]);const re=s.useCallback(()=>{if(!C.current||m.length===0)return;const{scrollLeft:l}=C.current,v=m.map(V=>Math.abs(l-V)),E=v.indexOf(Math.min(...v));E!==-1&&j(E)},[m,j]);return ue(C,re),{ref:C,pageIndicatorsRefs:M,gap:t,snapType:r,snapStop:n,scrollPadding:o,slidesPerPage:a,slidesPerMove:i,scrollBehavior:c,loop:g,pagePickerInset:u,maxDots:d,page:f,pageSnapPoints:m,canScrollNext:R.current,canScrollPrev:P.current,scrollTo:y,scrollPrev:z,scrollNext:A,registerSlide:D,unregisterSlide:ee,isSlideVisible:te,getRootProps:()=>({id:`carousel::${h}:`,role:"region","aria-roledescription":"carousel","data-scope":x,"data-part":"root","data-orientation":"horizontal",dir:N,style:{"--slides-per-page":a,"--slide-spacing":`${t}px`,"--slide-item-size":"calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"}}),getControlProps:()=>({"data-scope":x,"data-part":"control","data-orientation":"horizontal"}),getPrevTriggerProps:()=>({id:`carousel::${h}::prev-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"prev-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!P.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${h}::next-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"next-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!R.current,onClick:()=>A()}),getSlidesContainerProps:()=>({id:`carousel::${h}::item-group`,"aria-live":a>1?"off":"polite","data-scope":x,"data-part":"item-group","data-orientation":"horizontal",dir:N,tabIndex:0,style:{display:"grid",gap:"var(--slide-spacing)",scrollSnapType:`x ${r}`,gridAutoFlow:"column",scrollbarWidth:"none",gridAutoColumns:"var(--slide-item-size)",overflowX:"auto"},ref:C}),getSlideProps:({index:l})=>{const v=_(l,{container:C.current,slidesPerMove:i,slidesPerPage:a});return{id:`carousel::${h}::item:${l}`,role:"group","aria-roledescription":"slide","data-scope":x,"data-part":"item","data-index":l,"data-orientation":"horizontal",dir:N,style:{...v&&{scrollSnapAlign:"start",scrollSnapStop:n}}}},getIndicatorGroupProps:()=>({role:"radiogroup",id:`carousel::${h}::indicator-group`,"data-scope":x,"data-part":"indicator-group","data-orientation":"horizontal",dir:N}),getIndicatorProps:({index:l})=>{const v=fe({dotIndex:l,pageState:f,totalPages:m.length,maxDots:d});return{role:"radio",id:`carousel::${h}::indicator:${l}`,"aria-checked":l===f,"data-scope":x,"data-part":"indicator","data-orientation":"horizontal","data-index":l,"data-state":v,tabIndex:l===f?0:-1,onClick:()=>{y(l,c)},onKeyDown:E=>{const V=ne=>{M.current[ne]?.focus()};E.key==="ArrowRight"&&R?A(V):E.key==="ArrowLeft"&&P&&z(V)}}}}},F=s.createContext(null),G=({className:e,snapType:t="mandatory",snapStop:r="always",scrollBehavior:n="smooth",slidesPerMove:o="auto",pagePickerInset:a=!1,slidesPerPage:i=1,loop:c=!1,children:g,gap:u=16,defaultPage:d,page:b,onPageChange:S,maxDots:h=5,...f})=>{const I=ge({defaultPage:d,slidesPerPage:i,slidesPerMove:o,loop:c,gap:u,scrollBehavior:n,snapStop:r,snapType:t,page:b,pagePickerInset:a,onPageChange:S,maxDots:h});return p.jsx(F.Provider,{value:{...I,scrollBehavior:n},children:p.jsx("div",{"data-spark-component":"carousel",className:k.cx("gap-lg relative box-border flex flex-col",e),...I.getRootProps(),...f,children:g})})};G.displayName="Carousel";const w=()=>{const e=s.useContext(F);if(!e)throw Error("useCarouselContext must be used within a Carousel provider");return e},J=({children:e,className:t,...r})=>{const n=w();return p.jsx("div",{"data-spark-component":"carousel-controls",className:k.cx("default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",t),...n.getControlProps(),...r,children:e})};J.displayName="Carousel.Controls";const W=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-next-button",...r.getNextTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(se.ArrowVerticalRight,{})})})};W.displayName="Carousel.NextButton";const K=({children:e,unstyled:t=!1,index:r,"aria-label":n,className:o,intent:a="support"})=>{const i=w(),c=s.useRef(null);s.useEffect(()=>{i.pageIndicatorsRefs.current&&(i.pageIndicatorsRefs.current[r]=c.current)});const g=i.getIndicatorProps({index:r});return p.jsx("button",{"data-spark-component":"carousel-page-indicator",ref:c,...g,"aria-label":n,className:k.cx({[k.cx("border-outline group relative flex justify-center border-0 hover:cursor-pointer","m-sm rounded-sm transition-all duration-[200ms] ease-linear","w-sz-8 h-sz-8","data-[state=active]:w-sz-32 data-[state=active]:h-sz-8","data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4","data-[state=hidden]:m-0 data-[state=hidden]:size-0",a==="surface"?"data-[state=active]:bg-surface bg-surface/dim-2":"data-[state=active]:bg-support bg-on-surface/dim-2")]:!t},o),children:e},r)};K.displayName="Carousel.PageIndicator";const X=({children:e,className:t})=>{const r=w();return p.jsx(p.Fragment,{children:p.jsx("div",{"data-spark-component":"carousel-page-picker",...r.getIndicatorGroupProps(),className:k.cx("flex-wrap items-center justify-center","default:min-h-sz-16 flex",r.pagePickerInset&&"bottom-sz-12 absolute inset-x-0",t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(n,o)=>o)})})})};X.displayName="Carousel.PagePicker";const H=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-prev-button",...r.getPrevTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(oe.ArrowVerticalLeft,{})})})};H.displayName="Carousel.PrevButton";function be(e,t){const[r,n]=s.useState(!0),o=w();return s.useEffect(()=>{const a=e.current;if(!a)return;const{registerSlide:i,unregisterSlide:c}=o;return i(a,n),()=>{c(a)}},[e]),r}const Q=({children:e,index:t=0,totalSlides:r,className:n="",...o})=>{const a=s.useRef(null),i=w(),c=be(a,i.ref);return p.jsx("div",{"data-spark-component":"carousel-slide",ref:a,...i.getSlideProps({index:t,totalSlides:r}),className:k.cx("default:bg-surface relative overflow-hidden",n),"aria-hidden":!c,inert:!c,...o,children:e})};Q.displayName="Carousel.Slide";const U=({children:e,className:t=""})=>{const r=w(),n=s.Children.toArray(e);return p.jsx("div",{"data-spark-component":"carousel-slides",...r.getSlidesContainerProps(),className:k.cx("focus-visible:u-outline relative w-full","[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",t),children:n.map((o,a)=>s.isValidElement(o)?s.cloneElement(o,{index:a,totalSlides:n.length}):o)})};U.displayName="Carousel.Slides";const Y=({children:e})=>p.jsx("div",{className:"relative flex items-center justify-around p-0",children:e});Y.displayName="Carousel.Viewport";const Z=Object.assign(G,{Controls:J,NextButton:W,PrevButton:H,Slide:Q,Slides:U,Viewport:Y,PagePicker:X,PageIndicator:K});Z.displayName="Carousel";exports.Carousel=Z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|