@spark-ui/components 17.15.4 → 17.15.5
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/{DialogContent.styles-BSxCCi-u.mjs → DialogContent.styles-ClKRO43s.mjs} +1 -1
- package/dist/{DialogContent.styles-BSxCCi-u.mjs.map → DialogContent.styles-ClKRO43s.mjs.map} +1 -1
- package/dist/DialogContent.styles-FnwXayCC.js +2 -0
- package/dist/{DialogContent.styles-CAhJtUud.js.map → DialogContent.styles-FnwXayCC.js.map} +1 -1
- package/dist/{FormFieldRequiredIndicator-CzdpinIz.mjs → FormFieldRequiredIndicator-COKYxTNs.mjs} +2 -2
- package/dist/{FormFieldRequiredIndicator-CzdpinIz.mjs.map → FormFieldRequiredIndicator-COKYxTNs.mjs.map} +1 -1
- package/dist/FormFieldRequiredIndicator-DY3STDp1.js +2 -0
- package/dist/{FormFieldRequiredIndicator-CEB8Ez-q.js.map → FormFieldRequiredIndicator-DY3STDp1.js.map} +1 -1
- package/dist/accordion/index.js +1 -1
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +1 -1
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.js +1 -1
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +1 -1
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +2 -2
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js +1 -1
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/{button-CzHtbgj7.mjs → button-BeLA-Evk.mjs} +2 -2
- package/dist/{button-CzHtbgj7.mjs.map → button-BeLA-Evk.mjs.map} +1 -1
- package/dist/button-pb2JbL37.js +2 -0
- package/dist/{button-jlscsCw0.js.map → button-pb2JbL37.js.map} +1 -1
- package/dist/card/index.js +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs +2 -2
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox/index.js +1 -1
- package/dist/checkbox/index.mjs +1 -1
- package/dist/checkbox-Cbewcw6G.js +2 -0
- package/dist/{checkbox-hVGRiWC_.js.map → checkbox-Cbewcw6G.js.map} +1 -1
- package/dist/{checkbox-CbMh-21q.mjs → checkbox-uSINHQYe.mjs} +3 -3
- package/dist/{checkbox-CbMh-21q.mjs.map → checkbox-uSINHQYe.mjs.map} +1 -1
- package/dist/chip/index.js +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +1 -1
- package/dist/chip/index.mjs.map +1 -1
- package/dist/circular-meter/index.js +1 -1
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/collapsible/index.js +1 -1
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +9 -6
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs +4 -4
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/index.js +1 -1
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs.map +1 -1
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +3 -3
- package/dist/drawer/index.mjs.map +1 -1
- 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 +7 -7
- 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/form-field-B38U0zp8.js +2 -0
- package/dist/{form-field-BCqHBvWN.js.map → form-field-B38U0zp8.js.map} +1 -1
- package/dist/{form-field-ByLHXtzx.mjs → form-field-DCKyhBmv.mjs} +4 -4
- package/dist/{form-field-ByLHXtzx.mjs.map → form-field-DCKyhBmv.mjs.map} +1 -1
- package/dist/global.d.ts +12 -0
- package/dist/icon/index.js +1 -1
- package/dist/icon/index.mjs +1 -1
- package/dist/{icon-D05Uqh8_.mjs → icon-Bs-39J-H.mjs} +1 -1
- package/dist/{icon-D05Uqh8_.mjs.map → icon-Bs-39J-H.mjs.map} +1 -1
- package/dist/icon-DY4l9nsc.js +2 -0
- package/dist/{icon-CRPcdgYp.js.map → icon-DY4l9nsc.js.map} +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/icon-button-4kkwICAr.js +2 -0
- package/dist/{icon-button-Iv9kq84M.js.map → icon-button-4kkwICAr.js.map} +1 -1
- package/dist/{icon-button-BLG7VjR7.mjs → icon-button-DQAzrC_Q.mjs} +2 -2
- package/dist/{icon-button-BLG7VjR7.mjs.map → icon-button-DQAzrC_Q.mjs.map} +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/input-Bmkrsnjd.js +2 -0
- package/dist/{input-BSCMbnO4.js.map → input-Bmkrsnjd.js.map} +1 -1
- package/dist/{input-cKdm2R3n.mjs → input-Dy5t-hhE.mjs} +2 -2
- package/dist/{input-cKdm2R3n.mjs.map → input-Dy5t-hhE.mjs.map} +1 -1
- package/dist/input-otp/index.js +1 -1
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/kbd/index.js +1 -1
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label/index.js +1 -1
- package/dist/label/index.mjs +1 -1
- package/dist/label-DO48yda7.js +2 -0
- package/dist/{label-BCSEss4U.js.map → label-DO48yda7.js.map} +1 -1
- package/dist/{label-DDBRKLUX.mjs → label-RKaPen31.mjs} +1 -1
- package/dist/{label-DDBRKLUX.mjs.map → label-RKaPen31.mjs.map} +1 -1
- package/dist/link-box/index.js +1 -1
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/menu/index.js +1 -1
- package/dist/menu/index.js.map +1 -1
- package/dist/menu/index.mjs +1 -1
- package/dist/menu/index.mjs.map +1 -1
- package/dist/meter/index.js +1 -1
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +3 -3
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.mjs +1 -1
- package/dist/popover-DK2-MWUF.js +2 -0
- package/dist/{popover-qoueDrzR.js.map → popover-DK2-MWUF.js.map} +1 -1
- package/dist/{popover-Ds6xXjgT.mjs → popover-Dj95Y-ex.mjs} +3 -3
- package/dist/{popover-Ds6xXjgT.mjs.map → popover-Dj95Y-ex.mjs.map} +1 -1
- package/dist/portal/index.js +1 -1
- package/dist/portal/index.js.map +1 -1
- package/dist/portal/index.mjs.map +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/progress-B_zfJmtJ.js +2 -0
- package/dist/{progress-DBD2FiQ1.js.map → progress-B_zfJmtJ.js.map} +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 +1 -1
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/{progress-BfpWgeE1.mjs → progress-xbOXCGXi.mjs} +1 -1
- package/dist/{progress-BfpWgeE1.mjs.map → progress-xbOXCGXi.mjs.map} +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.map +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs +5 -3
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating-display/index.js +1 -1
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs +1 -1
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/{chunk-C91j1N6u.js → rolldown-runtime-CMqjfN_6.js} +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/segmented-control/index.js +1 -1
- package/dist/segmented-control/index.js.map +1 -1
- package/dist/segmented-control/index.mjs.map +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.map +1 -1
- package/dist/select/index.js +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +1 -1
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/index.js +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs +2 -2
- package/dist/slider/index.mjs.map +1 -1
- package/dist/slot/index.js +1 -1
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs.map +1 -1
- package/dist/spinner/index.js +1 -1
- package/dist/spinner/index.mjs +1 -1
- package/dist/spinner-CmPypfJR.js +2 -0
- package/dist/{spinner-DFUoYvmm.js.map → spinner-CmPypfJR.js.map} +1 -1
- package/dist/{spinner-DULLiM6a.mjs → spinner-TfGcjNm3.mjs} +1 -1
- package/dist/{spinner-DULLiM6a.mjs.map → spinner-TfGcjNm3.mjs.map} +1 -1
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs +3 -3
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs +2 -2
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +3 -3
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +4 -4
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.js +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +1 -1
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +3 -3
- package/dist/toast/index.mjs.map +1 -1
- package/dist/toggle-group/index.js +1 -1
- package/dist/toggle-group/index.js.map +1 -1
- package/dist/toggle-group/index.mjs.map +1 -1
- package/dist/{useRenderSlot-DKIwoqpO.mjs → useRenderSlot-5CPC9Lkj.mjs} +1 -1
- package/dist/{useRenderSlot-DKIwoqpO.mjs.map → useRenderSlot-5CPC9Lkj.mjs.map} +1 -1
- package/dist/useRenderSlot-DHV0CegV.js +2 -0
- package/dist/{useRenderSlot-C4UVWhDN.js.map → useRenderSlot-DHV0CegV.js.map} +1 -1
- package/dist/visually-hidden/index.js +1 -1
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs.map +1 -1
- package/package.json +5 -5
- package/dist/DialogContent.styles-CAhJtUud.js +0 -2
- package/dist/FormFieldRequiredIndicator-CEB8Ez-q.js +0 -2
- package/dist/button-jlscsCw0.js +0 -2
- package/dist/checkbox-hVGRiWC_.js +0 -2
- package/dist/form-field-BCqHBvWN.js +0 -2
- package/dist/icon-CRPcdgYp.js +0 -2
- package/dist/icon-button-Iv9kq84M.js +0 -2
- package/dist/input-BSCMbnO4.js +0 -2
- package/dist/label-BCSEss4U.js +0 -2
- package/dist/popover-qoueDrzR.js +0 -2
- package/dist/progress-DBD2FiQ1.js +0 -2
- package/dist/spinner-DFUoYvmm.js +0 -2
- package/dist/useRenderSlot-C4UVWhDN.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-jlscsCw0.js","names":[],"sources":["../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n // Main\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main',\n 'text-on-main',\n 'hover:bg-main-hovered',\n 'enabled:active:bg-main-hovered',\n 'focus-visible:bg-main-hovered',\n ]),\n },\n // Support\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support',\n 'text-on-support',\n 'hover:bg-support-hovered',\n 'enabled:active:bg-support-hovered',\n 'focus-visible:bg-support-hovered',\n ]),\n },\n // Accent\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent',\n 'text-on-accent',\n 'hover:bg-accent-hovered',\n 'enabled:active:bg-accent-hovered',\n 'focus-visible:bg-accent-hovered',\n ]),\n },\n // AI\n {\n intent: 'ai',\n design: 'filled',\n class: tw([\n 'bg-ai',\n 'text-on-ai',\n 'hover:bg-ai-hovered',\n 'enabled:active:bg-ai-hovered',\n 'focus-visible:bg-ai-hovered',\n ]),\n },\n // Success\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success',\n 'text-on-success',\n 'hover:bg-success-hovered',\n 'enabled:active:bg-success-hovered',\n 'focus-visible:bg-success-hovered',\n ]),\n },\n // Alert\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert',\n 'text-on-alert',\n 'hover:bg-alert-hovered',\n 'enabled:active:bg-alert-hovered',\n 'focus-visible:bg-alert-hovered',\n ]),\n },\n // Danger\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error',\n 'hover:bg-error-hovered enabled:active:bg-error-hovered',\n 'focus-visible:bg-error-hovered',\n ]),\n },\n // Info\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info',\n 'hover:bg-info-hovered enabled:active:bg-info-hovered',\n 'focus-visible:bg-info-hovered',\n ]),\n },\n // Neutral\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral',\n 'text-on-neutral',\n 'hover:bg-neutral-hovered',\n 'enabled:active:bg-neutral-hovered',\n 'focus-visible:bg-neutral-hovered',\n ]),\n },\n // Surface\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface',\n 'text-on-surface',\n 'hover:bg-surface-hovered',\n 'enabled:active:bg-surface-hovered',\n 'focus-visible:bg-surface-hovered',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'filled',\n class: tw([\n 'bg-surface-inverse',\n 'text-on-surface-inverse',\n 'hover:bg-surface-inverse-hovered',\n 'enabled:active:bg-surface-inverse-hovered',\n 'focus-visible:bg-surface-inverse-hovered',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n {\n intent: 'main',\n design: 'ghost',\n class: tw([\n 'text-on-main-container',\n 'hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n ]),\n },\n {\n intent: 'support',\n design: 'ghost',\n class: tw([\n 'text-on-support-container',\n 'hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n ]),\n },\n {\n intent: 'accent',\n design: 'ghost',\n class: tw([\n 'text-on-accent-container',\n 'hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n ]),\n },\n {\n intent: 'ai',\n design: 'ghost',\n class: tw([\n 'text-on-ai-container',\n 'hover:bg-ai/dim-5',\n 'enabled:active:bg-ai/dim-5',\n 'focus-visible:bg-ai/dim-5',\n ]),\n },\n {\n intent: 'success',\n design: 'ghost',\n class: tw([\n 'text-on-success-container',\n 'hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n ]),\n },\n {\n intent: 'alert',\n design: 'ghost',\n class: tw([\n 'text-on-alert-container',\n 'hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n ]),\n },\n {\n intent: 'danger',\n design: 'ghost',\n class: tw([\n 'text-on-error-container',\n 'hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n ]),\n },\n {\n intent: 'info',\n design: 'ghost',\n class: tw([\n 'text-on-info-container',\n 'hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n ]),\n },\n {\n intent: 'neutral',\n design: 'ghost',\n class: tw([\n 'text-on-neutral-container',\n 'hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n ]),\n },\n {\n intent: 'surface',\n design: 'ghost',\n class: tw([\n 'text-surface',\n 'hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'ghost',\n class: tw([\n 'text-surface-inverse',\n 'hover:bg-surface-inverse/dim-5',\n 'enabled:active:bg-surface-inverse/dim-5',\n 'focus-visible:bg-surface-inverse/dim-5',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw([\n 'hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n 'text-main',\n ]),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw([\n 'hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n 'text-support',\n ]),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw([\n 'hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n 'text-accent',\n ]),\n },\n {\n intent: 'ai',\n design: 'outlined',\n class: tw([\n 'hover:bg-ai/dim-5',\n 'enabled:active:bg-ai/dim-5',\n 'focus-visible:bg-ai/dim-5',\n 'text-ai',\n ]),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw([\n 'hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n 'text-success',\n ]),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw([\n 'hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n 'text-alert',\n ]),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw([\n 'hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n 'text-error',\n ]),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw([\n 'hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n 'text-info',\n ]),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw([\n 'hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n 'text-neutral',\n ]),\n },\n {\n intent: 'surface',\n design: 'outlined',\n class: tw([\n 'hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n 'text-surface',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'outlined',\n class: tw([\n 'hover:bg-surface-inverse/dim-5',\n 'enabled:active:bg-surface-inverse/dim-5',\n 'focus-visible:bg-surface-inverse/dim-5',\n 'text-surface-inverse',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container',\n 'text-on-main-container',\n 'hover:bg-main-container-hovered',\n 'enabled:active:bg-main-container-hovered',\n 'focus-visible:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container',\n 'text-on-support-container',\n 'hover:bg-support-container-hovered',\n 'enabled:active:bg-support-container-hovered',\n 'focus-visible:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container',\n 'text-on-accent-container',\n 'hover:bg-accent-container-hovered',\n 'enabled:active:bg-accent-container-hovered',\n 'focus-visible:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'ai',\n design: 'tinted',\n class: tw([\n 'bg-ai-container',\n 'text-on-ai-container',\n 'hover:bg-ai-container-hovered',\n 'enabled:active:bg-ai-container-hovered',\n 'focus-visible:bg-ai-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container',\n 'text-on-success-container',\n 'hover:bg-success-container-hovered',\n 'enabled:active:bg-success-container-hovered',\n 'focus-visible:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container',\n 'text-on-alert-container',\n 'hover:bg-alert-container-hovered',\n 'enabled:active:bg-alert-container-hovered',\n 'focus-visible:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container',\n 'text-on-error-container',\n 'hover:bg-error-container-hovered',\n 'enabled:active:bg-error-container-hovered',\n 'focus-visible:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container',\n 'text-on-info-container',\n 'hover:bg-info-container-hovered',\n 'enabled:active:bg-info-container-hovered',\n 'focus-visible:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container',\n 'text-on-neutral-container',\n 'hover:bg-neutral-container-hovered',\n 'enabled:active:bg-neutral-container-hovered',\n 'focus-visible:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface',\n 'text-on-surface',\n 'hover:bg-surface-hovered',\n 'enabled:active:bg-surface-hovered',\n 'focus-visible:bg-surface-hovered',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'tinted',\n class: tw([\n 'bg-surface-inverse',\n 'text-on-surface-inverse',\n 'hover:bg-surface-inverse-hovered',\n 'enabled:active:bg-surface-inverse-hovered',\n 'focus-visible:bg-surface-inverse-hovered',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n {\n intent: 'main',\n design: 'contrast',\n class: tw([\n 'text-on-main-contaier bg-surface',\n 'hover:bg-main-container-hovered',\n 'enabled:active:bg-main-container-hovered',\n 'focus-visible:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'contrast',\n class: tw([\n 'text-on-support-container bg-surface',\n 'hover:bg-support-container-hovered',\n 'enabled:active:bg-support-container-hovered',\n 'focus-visible:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'contrast',\n class: tw([\n 'text-on-accent-container bg-surface',\n 'hover:bg-accent-container-hovered',\n 'enabled:active:bg-accent-container-hovered',\n 'focus-visible:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'ai',\n design: 'contrast',\n class: tw([\n 'text-on-ai-container bg-surface',\n 'hover:bg-ai-container-hovered',\n 'enabled:active:bg-ai-container-hovered',\n 'focus-visible:bg-ai-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'contrast',\n class: tw([\n 'text-on-success-container bg-surface',\n 'hover:bg-success-container-hovered',\n 'enabled:active:bg-success-container-hovered',\n 'focus-visible:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'contrast',\n class: tw([\n 'text-on-alert-container bg-surface',\n 'hover:bg-alert-container-hovered',\n 'enabled:active:bg-alert-container-hovered',\n 'focus-visible:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'contrast',\n class: tw([\n 'text-on-error-container bg-surface',\n 'hover:bg-error-container-hovered',\n 'enabled:active:bg-error-container-hovered',\n 'focus-visible:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'contrast',\n class: tw([\n 'text-on-info-container bg-surface',\n 'hover:bg-info-container-hovered',\n 'enabled:active:bg-info-container-hovered',\n 'focus-visible:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'contrast',\n class: tw([\n 'text-on-neutral-container bg-surface',\n 'hover:bg-neutral-container-hovered',\n 'enabled:active:bg-neutral-container-hovered',\n 'focus-visible:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'contrast',\n class: tw([\n 'text-on-surface bg-surface',\n 'hover:bg-surface-hovered',\n 'enabled:active:bg-surface-hovered',\n 'focus-visible:bg-surface-hovered',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'contrast',\n class: tw([\n 'text-on-surface-inverse bg-surface-inverse',\n 'hover:bg-surface-inverse-hovered',\n 'enabled:active:bg-surface-inverse-hovered',\n 'focus-visible:bg-surface-inverse-hovered',\n ]),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n contrastVariants,\n filledVariants,\n ghostVariants,\n outlinedVariants,\n tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n [\n 'u-shadow-border-transition',\n 'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n 'default:px-lg',\n 'text-body-1-highlight',\n 'focus-visible:u-outline',\n ],\n {\n variants: {\n /**\n * Main style of the button.\n *\n * - `filled`: Button will be plain.\n *\n * - `outlined`: Button will be transparent with an outline.\n *\n * - `tinted`: Button will be filled but using a lighter color scheme.\n *\n * - `ghost`: Button will look like a link. No borders, plain text.\n *\n * - `contrast`: Button will be surface filled. No borders, plain text.\n *\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n filled: [],\n outlined: ['bg-transparent', 'border-sm', 'border-current'],\n tinted: [],\n ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n contrast: [],\n }),\n underline: {\n true: ['underline'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'ai',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n ai: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n /**\n * Size of the button.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['min-w-sz-32', 'h-sz-32'],\n md: ['min-w-sz-44', 'h-sz-44'],\n lg: ['min-w-sz-56', 'h-sz-56'],\n }),\n /**\n * Shape of the button.\n */\n shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n rounded: ['rounded-button'],\n square: ['rounded-0'],\n pill: ['rounded-full'],\n }),\n /**\n * Disable the button, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n false: ['cursor-pointer'],\n },\n },\n compoundVariants: [\n ...filledVariants,\n ...outlinedVariants,\n ...tintedVariants,\n ...ghostVariants,\n ...contrastVariants,\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'main',\n size: 'md',\n shape: 'rounded',\n },\n }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n */\n isLoading?: boolean\n /**\n * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n */\n loadingLabel?: string\n /**\n * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n */\n loadingText?: string\n /**\n * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n */\n ariaDisabled?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n DOMAttributes<HTMLButtonElement>,\n 'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseOver',\n 'onMouseOut',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n children,\n design = 'filled',\n disabled = false,\n ariaDisabled = false,\n intent = 'main',\n isLoading = false,\n loadingLabel,\n loadingText,\n shape = 'rounded',\n size = 'md',\n asChild,\n className,\n underline = false,\n ref,\n ...others\n}: ButtonProps) => {\n const Component = asChild ? Slot : 'button'\n\n const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n const useNativeDisabled = !!disabled && !ariaDisabled\n\n const disabledEventHandlers = useMemo(() => {\n const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n if (shouldNotInteract) {\n blockedEventHandlers.forEach(key => {\n result[key] = (e: React.SyntheticEvent) => {\n // Allow Tab to move focus away from the button\n if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n /*\n Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n */\n e.preventDefault()\n }\n })\n }\n\n return result\n }, [shouldNotInteract])\n\n const spinnerProps = {\n size: 'current' as SpinnerProps['size'],\n className: loadingText ? 'inline-block' : 'absolute',\n ...(loadingLabel && { 'aria-label': loadingLabel }),\n }\n\n return (\n <Component\n data-spark-component=\"button\"\n {...(Component === 'button' && { type: 'button' })}\n ref={ref}\n className={buttonStyles({\n className,\n design,\n disabled: shouldNotInteract,\n intent,\n shape,\n size,\n underline,\n })}\n disabled={useNativeDisabled}\n aria-disabled={shouldNotInteract ? true : undefined}\n aria-busy={isLoading}\n aria-live={isLoading ? 'assertive' : 'off'}\n {...others}\n {...disabledEventHandlers}\n >\n {wrapPolymorphicSlot(asChild, children, slotted =>\n isLoading ? (\n <>\n <Spinner {...spinnerProps} />\n {loadingText}\n\n <div\n aria-hidden\n className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n >\n {slotted}\n </div>\n </>\n ) : (\n slotted\n )\n )}\n </Component>\n )\n}\n\nButton.displayName = 'Button'\n"],"mappings":"uOAEA,IAAa,EAAiB,CAE5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,UACA,eACA,wBACA,iCACA,gCACD,CAAC,CACH,CAED,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,aACA,kBACA,2BACA,oCACA,mCACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,YACA,iBACA,0BACA,mCACA,kCACD,CAAC,CACH,CAED,CACE,OAAQ,KACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,QACA,aACA,sBACA,+BACA,8BACD,CAAC,CACH,CAED,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,aACA,kBACA,2BACA,oCACA,mCACD,CAAC,CACH,CAED,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,WACA,gBACA,yBACA,kCACA,iCACD,CAAC,CACH,CAED,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,yDACA,iCACD,CAAC,CACH,CAED,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,wBACA,uDACA,gCACD,CAAC,CACH,CAED,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,aACA,kBACA,2BACA,oCACA,mCACD,CAAC,CACH,CAED,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,aACA,kBACA,2BACA,oCACA,mCACD,CAAC,CACH,CACD,CACE,OAAQ,iBACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,0BACA,mCACA,4CACA,2CACD,CAAC,CACH,CACF,CChIY,EAAgB,CAC3B,CACE,OAAQ,OACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,sBACA,+BACA,8BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,4BACA,yBACA,kCACA,iCACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,2BACA,wBACA,iCACA,gCACD,CAAC,CACH,CACD,CACE,OAAQ,KACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,oBACA,6BACA,4BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,4BACA,yBACA,kCACA,iCACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,0BACA,uBACA,gCACA,+BACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,0BACA,uBACA,gCACA,+BACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,sBACA,+BACA,8BACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,4BACA,yBACA,kCACA,iCACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,eACA,yBACA,kCACA,iCACD,CAAC,CACH,CACD,CACE,OAAQ,iBACR,OAAQ,QACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,iCACA,0CACA,yCACD,CAAC,CACH,CACF,CC/GY,EAAmB,CAC9B,CACE,OAAQ,OACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,+BACA,8BACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,kCACA,iCACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,wBACA,iCACA,gCACA,cACD,CAAC,CACH,CACD,CACE,OAAQ,KACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,6BACA,4BACA,UACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,kCACA,iCACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,gCACA,+BACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,gCACA,+BACA,aACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,+BACA,8BACA,YACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,kCACA,iCACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,yBACA,kCACA,iCACA,eACD,CAAC,CACH,CACD,CACE,OAAQ,iBACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,iCACA,0CACA,yCACA,uBACD,CAAC,CACH,CACF,CC/GY,EAAiB,CAC5B,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,yBACA,kCACA,2CACA,0CACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,4BACA,qCACA,8CACA,6CACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sBACA,2BACA,oCACA,6CACA,4CACD,CAAC,CACH,CACD,CACE,OAAQ,KACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,kBACA,uBACA,gCACA,yCACA,wCACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,4BACA,qCACA,8CACA,6CACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,0BACA,mCACA,4CACA,2CACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,0BACA,mCACA,4CACA,2CACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oBACA,yBACA,kCACA,2CACA,0CACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uBACA,4BACA,qCACA,8CACA,6CACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,aACA,kBACA,2BACA,oCACA,mCACD,CAAC,CACH,CACD,CACE,OAAQ,iBACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,qBACA,0BACA,mCACA,4CACA,2CACD,CAAC,CACH,CACF,CC1HY,EAAmB,CAC9B,CACE,OAAQ,OACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,mCACA,kCACA,2CACA,0CACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,uCACA,qCACA,8CACA,6CACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,sCACA,oCACA,6CACA,4CACD,CAAC,CACH,CACD,CACE,OAAQ,KACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,kCACA,gCACA,yCACA,wCACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,uCACA,qCACA,8CACA,6CACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,qCACA,mCACA,4CACA,2CACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,qCACA,mCACA,4CACA,2CACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,oCACA,kCACA,2CACA,0CACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,uCACA,qCACA,8CACA,6CACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,6BACA,2BACA,oCACA,mCACD,CAAC,CACH,CACD,CACE,OAAQ,iBACR,OAAQ,WACR,OAAA,EAAA,EAAA,IAAU,CACR,6CACA,mCACA,4CACA,2CACD,CAAC,CACH,CACF,CCtGY,GAAA,EAAA,EAAA,KACX,CACE,6BACA,8EACA,gBACA,wBACA,0BACD,CACD,CACE,SAAU,CAeR,QAAA,EAAA,EAAA,cAAsF,CACpF,OAAQ,EAAE,CACV,SAAU,CAAC,iBAAkB,YAAa,iBAAiB,CAC3D,OAAQ,EAAE,CACV,MAAO,CAAC,2CAA2C,CACnD,SAAU,EAAE,CACb,CAAC,CACF,UAAW,CACT,KAAM,CAAC,YAAY,CACpB,CAID,QAAA,EAAA,EAAA,cAeE,CACA,KAAM,EAAE,CACR,QAAS,EAAE,CACX,OAAQ,EAAE,CACV,GAAI,EAAE,CACN,QAAS,EAAE,CACX,MAAO,EAAE,CACT,OAAQ,EAAE,CACV,KAAM,EAAE,CACR,QAAS,EAAE,CACX,QAAS,EAAE,CACX,eAAgB,EAAE,CACnB,CAAC,CAIF,MAAA,EAAA,EAAA,cAA+C,CAC7C,GAAI,CAAC,cAAe,UAAU,CAC9B,GAAI,CAAC,cAAe,UAAU,CAC9B,GAAI,CAAC,cAAe,UAAU,CAC/B,CAAC,CAIF,OAAA,EAAA,EAAA,cAA4D,CAC1D,QAAS,CAAC,iBAAiB,CAC3B,OAAQ,CAAC,YAAY,CACrB,KAAM,CAAC,eAAe,CACvB,CAAC,CAIF,SAAU,CACR,KAAM,CAAC,qBAAsB,gBAAgB,CAC7C,MAAO,CAAC,iBAAiB,CAC1B,CACF,CACD,iBAAkB,CAChB,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACJ,CACD,gBAAiB,CACf,OAAQ,SACR,OAAQ,OACR,KAAM,KACN,MAAO,UACR,CACF,CACF,CC1EK,EAAoD,CACxD,UACA,cACA,YACA,eACA,eACA,cACA,aACA,YACA,aACA,UACA,WACD,CAKY,GAAU,CACrB,WACA,SAAS,SACT,WAAW,GACX,eAAe,GACf,SAAS,OACT,YAAY,GACZ,eACA,cACA,QAAQ,UACR,OAAO,KACP,UACA,YACA,YAAY,GACZ,MACA,GAAG,KACc,CACjB,IAAM,EAAY,EAAU,EAAA,KAAO,SAE7B,EAAoB,CAAC,CAAC,GAAY,CAAC,CAAC,GAAgB,EACpD,EAAoB,CAAC,CAAC,GAAY,CAAC,EAEnC,GAAA,EAAA,EAAA,aAAsC,CAC1C,IAAM,EAAwF,EAAE,CAgBhG,OAdI,GACF,EAAqB,QAAQ,GAAO,CAClC,EAAO,GAAQ,GAA4B,CAErC,EAAE,OAAS,WAAc,EAA0B,MAAQ,OAK/D,EAAE,gBAAgB,GAEpB,CAGG,GACN,CAAC,EAAkB,CAAC,CAEjB,EAAe,CACnB,KAAM,UACN,UAAW,EAAc,eAAiB,WAC1C,GAAI,GAAgB,CAAE,aAAc,EAAc,CACnD,CAED,OACE,EAAA,EAAA,KAAC,EAAD,CACE,uBAAqB,SACrB,GAAK,IAAc,UAAY,CAAE,KAAM,SAAU,CAC5C,MACL,UAAW,EAAa,CACtB,YACA,SACA,SAAU,EACV,SACA,QACA,OACA,YACD,CAAC,CACF,SAAU,EACV,gBAAe,EAAoB,GAAO,IAAA,GAC1C,YAAW,EACX,YAAW,EAAY,YAAc,MACrC,GAAI,EACJ,GAAI,WAEH,EAAA,oBAAoB,EAAS,EAAU,GACtC,GACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAA,EAAD,CAAS,GAAI,EAAgB,CAAA,CAC5B,GAED,EAAA,EAAA,KAAC,MAAD,CACE,cAAA,GACA,WAAA,EAAA,EAAA,IAAc,SAAU,EAAc,SAAW,wBAAwB,UAExE,EACG,CAAA,CACL,CAAA,CAAA,CAEH,EAEH,CACS,CAAA,EAIhB,EAAO,YAAc"}
|
|
1
|
+
{"version":3,"file":"button-pb2JbL37.js","names":[],"sources":["../src/button/variants/filled.ts","../src/button/variants/ghost.ts","../src/button/variants/outlined.ts","../src/button/variants/tinted.ts","../src/button/variants/contrast.ts","../src/button/Button.styles.tsx","../src/button/Button.tsx"],"sourcesContent":["import { tw } from '@spark-ui/internal-utils'\n\nexport const filledVariants = [\n // Main\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main',\n 'text-on-main',\n 'hover:bg-main-hovered',\n 'enabled:active:bg-main-hovered',\n 'focus-visible:bg-main-hovered',\n ]),\n },\n // Support\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support',\n 'text-on-support',\n 'hover:bg-support-hovered',\n 'enabled:active:bg-support-hovered',\n 'focus-visible:bg-support-hovered',\n ]),\n },\n // Accent\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent',\n 'text-on-accent',\n 'hover:bg-accent-hovered',\n 'enabled:active:bg-accent-hovered',\n 'focus-visible:bg-accent-hovered',\n ]),\n },\n // AI\n {\n intent: 'ai',\n design: 'filled',\n class: tw([\n 'bg-ai',\n 'text-on-ai',\n 'hover:bg-ai-hovered',\n 'enabled:active:bg-ai-hovered',\n 'focus-visible:bg-ai-hovered',\n ]),\n },\n // Success\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success',\n 'text-on-success',\n 'hover:bg-success-hovered',\n 'enabled:active:bg-success-hovered',\n 'focus-visible:bg-success-hovered',\n ]),\n },\n // Alert\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert',\n 'text-on-alert',\n 'hover:bg-alert-hovered',\n 'enabled:active:bg-alert-hovered',\n 'focus-visible:bg-alert-hovered',\n ]),\n },\n // Danger\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error',\n 'hover:bg-error-hovered enabled:active:bg-error-hovered',\n 'focus-visible:bg-error-hovered',\n ]),\n },\n // Info\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info',\n 'hover:bg-info-hovered enabled:active:bg-info-hovered',\n 'focus-visible:bg-info-hovered',\n ]),\n },\n // Neutral\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral',\n 'text-on-neutral',\n 'hover:bg-neutral-hovered',\n 'enabled:active:bg-neutral-hovered',\n 'focus-visible:bg-neutral-hovered',\n ]),\n },\n // Surface\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface',\n 'text-on-surface',\n 'hover:bg-surface-hovered',\n 'enabled:active:bg-surface-hovered',\n 'focus-visible:bg-surface-hovered',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'filled',\n class: tw([\n 'bg-surface-inverse',\n 'text-on-surface-inverse',\n 'hover:bg-surface-inverse-hovered',\n 'enabled:active:bg-surface-inverse-hovered',\n 'focus-visible:bg-surface-inverse-hovered',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const ghostVariants = [\n {\n intent: 'main',\n design: 'ghost',\n class: tw([\n 'text-on-main-container',\n 'hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n ]),\n },\n {\n intent: 'support',\n design: 'ghost',\n class: tw([\n 'text-on-support-container',\n 'hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n ]),\n },\n {\n intent: 'accent',\n design: 'ghost',\n class: tw([\n 'text-on-accent-container',\n 'hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n ]),\n },\n {\n intent: 'ai',\n design: 'ghost',\n class: tw([\n 'text-on-ai-container',\n 'hover:bg-ai/dim-5',\n 'enabled:active:bg-ai/dim-5',\n 'focus-visible:bg-ai/dim-5',\n ]),\n },\n {\n intent: 'success',\n design: 'ghost',\n class: tw([\n 'text-on-success-container',\n 'hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n ]),\n },\n {\n intent: 'alert',\n design: 'ghost',\n class: tw([\n 'text-on-alert-container',\n 'hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n ]),\n },\n {\n intent: 'danger',\n design: 'ghost',\n class: tw([\n 'text-on-error-container',\n 'hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n ]),\n },\n {\n intent: 'info',\n design: 'ghost',\n class: tw([\n 'text-on-info-container',\n 'hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n ]),\n },\n {\n intent: 'neutral',\n design: 'ghost',\n class: tw([\n 'text-on-neutral-container',\n 'hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n ]),\n },\n {\n intent: 'surface',\n design: 'ghost',\n class: tw([\n 'text-surface',\n 'hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'ghost',\n class: tw([\n 'text-surface-inverse',\n 'hover:bg-surface-inverse/dim-5',\n 'enabled:active:bg-surface-inverse/dim-5',\n 'focus-visible:bg-surface-inverse/dim-5',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const outlinedVariants = [\n {\n intent: 'main',\n design: 'outlined',\n class: tw([\n 'hover:bg-main/dim-5',\n 'enabled:active:bg-main/dim-5',\n 'focus-visible:bg-main/dim-5',\n 'text-main',\n ]),\n },\n {\n intent: 'support',\n design: 'outlined',\n class: tw([\n 'hover:bg-support/dim-5',\n 'enabled:active:bg-support/dim-5',\n 'focus-visible:bg-support/dim-5',\n 'text-support',\n ]),\n },\n {\n intent: 'accent',\n design: 'outlined',\n class: tw([\n 'hover:bg-accent/dim-5',\n 'enabled:active:bg-accent/dim-5',\n 'focus-visible:bg-accent/dim-5',\n 'text-accent',\n ]),\n },\n {\n intent: 'ai',\n design: 'outlined',\n class: tw([\n 'hover:bg-ai/dim-5',\n 'enabled:active:bg-ai/dim-5',\n 'focus-visible:bg-ai/dim-5',\n 'text-ai',\n ]),\n },\n {\n intent: 'success',\n design: 'outlined',\n class: tw([\n 'hover:bg-success/dim-5',\n 'enabled:active:bg-success/dim-5',\n 'focus-visible:bg-success/dim-5',\n 'text-success',\n ]),\n },\n {\n intent: 'alert',\n design: 'outlined',\n class: tw([\n 'hover:bg-alert/dim-5',\n 'enabled:active:bg-alert/dim-5',\n 'focus-visible:bg-alert/dim-5',\n 'text-alert',\n ]),\n },\n {\n intent: 'danger',\n design: 'outlined',\n class: tw([\n 'hover:bg-error/dim-5',\n 'enabled:active:bg-error/dim-5',\n 'focus-visible:bg-error/dim-5',\n 'text-error',\n ]),\n },\n {\n intent: 'info',\n design: 'outlined',\n class: tw([\n 'hover:bg-info/dim-5',\n 'enabled:active:bg-info/dim-5',\n 'focus-visible:bg-info/dim-5',\n 'text-info',\n ]),\n },\n {\n intent: 'neutral',\n design: 'outlined',\n class: tw([\n 'hover:bg-neutral/dim-5',\n 'enabled:active:bg-neutral/dim-5',\n 'focus-visible:bg-neutral/dim-5',\n 'text-neutral',\n ]),\n },\n {\n intent: 'surface',\n design: 'outlined',\n class: tw([\n 'hover:bg-surface/dim-5',\n 'enabled:active:bg-surface/dim-5',\n 'focus-visible:bg-surface/dim-5',\n 'text-surface',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'outlined',\n class: tw([\n 'hover:bg-surface-inverse/dim-5',\n 'enabled:active:bg-surface-inverse/dim-5',\n 'focus-visible:bg-surface-inverse/dim-5',\n 'text-surface-inverse',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const tintedVariants = [\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container',\n 'text-on-main-container',\n 'hover:bg-main-container-hovered',\n 'enabled:active:bg-main-container-hovered',\n 'focus-visible:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container',\n 'text-on-support-container',\n 'hover:bg-support-container-hovered',\n 'enabled:active:bg-support-container-hovered',\n 'focus-visible:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container',\n 'text-on-accent-container',\n 'hover:bg-accent-container-hovered',\n 'enabled:active:bg-accent-container-hovered',\n 'focus-visible:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'ai',\n design: 'tinted',\n class: tw([\n 'bg-ai-container',\n 'text-on-ai-container',\n 'hover:bg-ai-container-hovered',\n 'enabled:active:bg-ai-container-hovered',\n 'focus-visible:bg-ai-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container',\n 'text-on-success-container',\n 'hover:bg-success-container-hovered',\n 'enabled:active:bg-success-container-hovered',\n 'focus-visible:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container',\n 'text-on-alert-container',\n 'hover:bg-alert-container-hovered',\n 'enabled:active:bg-alert-container-hovered',\n 'focus-visible:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container',\n 'text-on-error-container',\n 'hover:bg-error-container-hovered',\n 'enabled:active:bg-error-container-hovered',\n 'focus-visible:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container',\n 'text-on-info-container',\n 'hover:bg-info-container-hovered',\n 'enabled:active:bg-info-container-hovered',\n 'focus-visible:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container',\n 'text-on-neutral-container',\n 'hover:bg-neutral-container-hovered',\n 'enabled:active:bg-neutral-container-hovered',\n 'focus-visible:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface',\n 'text-on-surface',\n 'hover:bg-surface-hovered',\n 'enabled:active:bg-surface-hovered',\n 'focus-visible:bg-surface-hovered',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'tinted',\n class: tw([\n 'bg-surface-inverse',\n 'text-on-surface-inverse',\n 'hover:bg-surface-inverse-hovered',\n 'enabled:active:bg-surface-inverse-hovered',\n 'focus-visible:bg-surface-inverse-hovered',\n ]),\n },\n] as const\n","import { tw } from '@spark-ui/internal-utils'\n\nexport const contrastVariants = [\n {\n intent: 'main',\n design: 'contrast',\n class: tw([\n 'text-on-main-contaier bg-surface',\n 'hover:bg-main-container-hovered',\n 'enabled:active:bg-main-container-hovered',\n 'focus-visible:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'contrast',\n class: tw([\n 'text-on-support-container bg-surface',\n 'hover:bg-support-container-hovered',\n 'enabled:active:bg-support-container-hovered',\n 'focus-visible:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'contrast',\n class: tw([\n 'text-on-accent-container bg-surface',\n 'hover:bg-accent-container-hovered',\n 'enabled:active:bg-accent-container-hovered',\n 'focus-visible:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'ai',\n design: 'contrast',\n class: tw([\n 'text-on-ai-container bg-surface',\n 'hover:bg-ai-container-hovered',\n 'enabled:active:bg-ai-container-hovered',\n 'focus-visible:bg-ai-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'contrast',\n class: tw([\n 'text-on-success-container bg-surface',\n 'hover:bg-success-container-hovered',\n 'enabled:active:bg-success-container-hovered',\n 'focus-visible:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'contrast',\n class: tw([\n 'text-on-alert-container bg-surface',\n 'hover:bg-alert-container-hovered',\n 'enabled:active:bg-alert-container-hovered',\n 'focus-visible:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'contrast',\n class: tw([\n 'text-on-error-container bg-surface',\n 'hover:bg-error-container-hovered',\n 'enabled:active:bg-error-container-hovered',\n 'focus-visible:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'contrast',\n class: tw([\n 'text-on-info-container bg-surface',\n 'hover:bg-info-container-hovered',\n 'enabled:active:bg-info-container-hovered',\n 'focus-visible:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'contrast',\n class: tw([\n 'text-on-neutral-container bg-surface',\n 'hover:bg-neutral-container-hovered',\n 'enabled:active:bg-neutral-container-hovered',\n 'focus-visible:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'contrast',\n class: tw([\n 'text-on-surface bg-surface',\n 'hover:bg-surface-hovered',\n 'enabled:active:bg-surface-hovered',\n 'focus-visible:bg-surface-hovered',\n ]),\n },\n {\n intent: 'surfaceInverse',\n design: 'contrast',\n class: tw([\n 'text-on-surface-inverse bg-surface-inverse',\n 'hover:bg-surface-inverse-hovered',\n 'enabled:active:bg-surface-inverse-hovered',\n 'focus-visible:bg-surface-inverse-hovered',\n ]),\n },\n] as const\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nimport {\n contrastVariants,\n filledVariants,\n ghostVariants,\n outlinedVariants,\n tintedVariants,\n} from './variants'\n\nexport const buttonStyles = cva(\n [\n 'u-shadow-border-transition',\n 'box-border inline-flex items-center justify-center gap-md whitespace-nowrap',\n 'default:px-lg',\n 'text-body-1-highlight',\n 'focus-visible:u-outline',\n ],\n {\n variants: {\n /**\n * Main style of the button.\n *\n * - `filled`: Button will be plain.\n *\n * - `outlined`: Button will be transparent with an outline.\n *\n * - `tinted`: Button will be filled but using a lighter color scheme.\n *\n * - `ghost`: Button will look like a link. No borders, plain text.\n *\n * - `contrast`: Button will be surface filled. No borders, plain text.\n *\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n filled: [],\n outlined: ['bg-transparent', 'border-sm', 'border-current'],\n tinted: [],\n ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n contrast: [],\n }),\n underline: {\n true: ['underline'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'ai',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n ai: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n /**\n * Size of the button.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['min-w-sz-32', 'h-sz-32'],\n md: ['min-w-sz-44', 'h-sz-44'],\n lg: ['min-w-sz-56', 'h-sz-56'],\n }),\n /**\n * Shape of the button.\n */\n shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n rounded: ['rounded-button'],\n square: ['rounded-0'],\n pill: ['rounded-full'],\n }),\n /**\n * Disable the button, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n false: ['cursor-pointer'],\n },\n },\n compoundVariants: [\n ...filledVariants,\n ...outlinedVariants,\n ...tintedVariants,\n ...ghostVariants,\n ...contrastVariants,\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'main',\n size: 'md',\n shape: 'rounded',\n },\n }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type DOMAttributes, Ref, useMemo } from 'react'\n\nimport { Slot, wrapPolymorphicSlot } from '../slot'\nimport { Spinner, type SpinnerProps } from '../spinner'\nimport { buttonStyles, type ButtonStylesProps } from './Button.styles'\n\nexport interface ButtonProps\n extends Omit<ComponentPropsWithoutRef<'button'>, 'disabled'>, ButtonStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Display a spinner to indicate to the user that the button is loading something after they interacted with it.\n */\n isLoading?: boolean\n /**\n * If your loading state should only display a spinner, it is better to specify a label for it (a11y).\n */\n loadingLabel?: string\n /**\n * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.\n * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**\n */\n loadingText?: string\n /**\n * When true, the button is non-interactive and has disabled styling but stays focusable (uses\n * `aria-disabled` instead of native `disabled`). Use for cases where the user should be able to\n * focus the control to discover why it is disabled (e.g. form submit, bulk bar actions).\n */\n ariaDisabled?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n DOMAttributes<HTMLButtonElement>,\n 'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseOver',\n 'onMouseOut',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onSubmit',\n]\n\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n children,\n design = 'filled',\n disabled = false,\n ariaDisabled = false,\n intent = 'main',\n isLoading = false,\n loadingLabel,\n loadingText,\n shape = 'rounded',\n size = 'md',\n asChild,\n className,\n underline = false,\n ref,\n ...others\n}: ButtonProps) => {\n const Component = asChild ? Slot : 'button'\n\n const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n const useNativeDisabled = !!disabled && !ariaDisabled\n\n const disabledEventHandlers = useMemo(() => {\n const result: Partial<Record<DOMAttributesEventHandler, (e: React.SyntheticEvent) => void>> = {}\n\n if (shouldNotInteract) {\n blockedEventHandlers.forEach(key => {\n result[key] = (e: React.SyntheticEvent) => {\n // Allow Tab to move focus away from the button\n if (e.type === 'keydown' && (e as React.KeyboardEvent).key === 'Tab') return\n /*\n Setting handlers to `undefined` (e.g. `result[eventHandler] = undefined`) only blocks JS-level handlers, it does not prevent native browser behavior.\n Calling preventDefault() here also blocks native form submission when type=\"submit\", since the browser triggers it from the click chain.\n */\n e.preventDefault()\n }\n })\n }\n\n return result\n }, [shouldNotInteract])\n\n const spinnerProps = {\n size: 'current' as SpinnerProps['size'],\n className: loadingText ? 'inline-block' : 'absolute',\n ...(loadingLabel && { 'aria-label': loadingLabel }),\n }\n\n return (\n <Component\n data-spark-component=\"button\"\n {...(Component === 'button' && { type: 'button' })}\n ref={ref}\n className={buttonStyles({\n className,\n design,\n disabled: shouldNotInteract,\n intent,\n shape,\n size,\n underline,\n })}\n disabled={useNativeDisabled}\n aria-disabled={shouldNotInteract ? true : undefined}\n aria-busy={isLoading}\n aria-live={isLoading ? 'assertive' : 'off'}\n {...others}\n {...disabledEventHandlers}\n >\n {wrapPolymorphicSlot(asChild, children, slotted =>\n isLoading ? (\n <>\n <Spinner {...spinnerProps} />\n {loadingText}\n\n <div\n aria-hidden\n className={cx('gap-md', loadingText ? 'hidden' : 'inline-flex opacity-0')}\n >\n {slotted}\n </div>\n </>\n ) : (\n slotted\n )\n )}\n </Component>\n )\n}\n\nButton.displayName = 'Button'\n"],"mappings":"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"}
|
package/dist/card/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`})
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js");let t=require("class-variance-authority"),n=require("react"),r=require("react/jsx-runtime"),i=require("@spark-ui/internal-utils");var a=(0,t.cva)([`group relative bg-clip-padding default:rounded-lg focus-visible:u-outline`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`],{variants:{design:{outlined:[`border-sm`],tinted:[]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[{intent:`main`,design:`outlined`,class:(0,i.tw)([`border-main`])},{intent:`support`,design:`outlined`,class:(0,i.tw)([`border-support`])},{intent:`accent`,design:`outlined`,class:(0,i.tw)([`border-accent`])},{intent:`success`,design:`outlined`,class:(0,i.tw)([`border-success`])},{intent:`alert`,design:`outlined`,class:(0,i.tw)([`border-alert`])},{intent:`danger`,design:`outlined`,class:(0,i.tw)([`border-error`])},{intent:`info`,design:`outlined`,class:(0,i.tw)([`border-info`])},{intent:`neutral`,design:`outlined`,class:(0,i.tw)([`border-neutral`])},{intent:`surface`,design:`outlined`,class:(0,i.tw)([`border-outline`])}],defaultVariants:{design:`outlined`,intent:`surface`}}),o=(0,n.createContext)(void 0),s=()=>{let e=(0,n.useContext)(o);if(!e)throw Error(`useCardContext must be used within a Card component`);return e},c=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseMove`,`onMouseOver`,`onMouseOut`,`onDoubleClick`,`onContextMenu`],l=e=>{let t=!1,r=e=>{t||n.Children.forEach(e,e=>{if(!t&&(0,n.isValidElement)(e)){if(typeof e.type==`function`&&e.type.displayName===`Card.Type`){t=!0;return}if(e.props&&typeof e.props==`object`&&`children`in e.props){let t=e.props.children;t!=null&&r(t)}}})};return r(e),t},u=(e,t,r)=>{if(c.some(e=>e in r))return!0;if(!t)return!1;let i=n.Children.only(e);if(!(0,n.isValidElement)(i))return!1;if(typeof i.type==`string`&&[`a`,`button`].includes(i.type))return!0;let a=i.props;return c.some(e=>e in a)},d=({children:t,design:n=`outlined`,intent:i=`surface`,inset:s=!1,asChild:c,className:d,ref:f,...p})=>{let m=c?e.Slot:`div`,h=l(t),g=u(t,c,p);return(0,r.jsx)(o,{value:{design:n,intent:i,hasType:h,inset:s,isInteractive:g},children:(0,r.jsx)(m,{"data-spark-component":`card`,"data-interactive":g,ref:f,className:a({className:d,design:n,intent:i}),...p,children:t})})};d.displayName=`Card`;var f=(0,t.cva)([`relative default:rounded-lg w-full focus-visible:u-outline`,`default:transition-colors default:duration-200 ease-linear`],{variants:{inset:{false:[`default:p-lg`]},design:{outlined:[`default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`],tinted:[]},hasType:{true:[`rounded-t-0`]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[{intent:`main`,design:`tinted`,class:(0,i.tw)([`bg-main-container text-on-main-container group-focus:bg-main-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered`])},{intent:`support`,design:`tinted`,class:(0,i.tw)([`bg-support-container text-on-support-container group-focus:bg-support-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered`])},{intent:`accent`,design:`tinted`,class:(0,i.tw)([`bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,i.tw)([`bg-success-container text-on-success-container group-focus:bg-success-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered`])},{intent:`alert`,design:`tinted`,class:(0,i.tw)([`bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered`])},{intent:`danger`,design:`tinted`,class:(0,i.tw)([`bg-error-container text-on-error-container group-focus:bg-error-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered`])},{intent:`info`,design:`tinted`,class:(0,i.tw)([`bg-info-container text-on-info-container group-focus:bg-info-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered`])},{intent:`neutral`,design:`tinted`,class:(0,i.tw)([`bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered`])},{intent:`surface`,design:`tinted`,class:(0,i.tw)([`bg-surface text-on-surface group-focus:bg-surface-hovered`,`group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`])}],defaultVariants:{design:`outlined`,intent:`surface`,inset:!1,hasType:!0}}),p=({children:t,inset:n,asChild:i,className:a,ref:o,...c})=>{let l=i?e.Slot:`div`,{design:u,intent:d,hasType:p}=s();return(0,r.jsx)(l,{"data-spark-component":`card-content`,ref:o,className:f({className:a,design:u,intent:d,inset:n,hasType:p}),...c,children:t})};p.displayName=`Content`;var m=(0,t.cva)([`rounded-t-lg default:text-body-2-highlight`,`default:text-center`,`min-h-sz-32`,`px-md`,`py-xs`,`flex items-center justify-center`,`whitespace-normal break-words`],{variants:{intent:{main:[`bg-main text-on-main`],support:[`bg-support text-on-support`],accent:[`bg-accent text-on-accent`],success:[`bg-success text-on-success`],alert:[`bg-alert text-on-alert`],danger:[`bg-error text-on-error`],info:[`bg-info text-on-info`],neutral:[`bg-neutral text-on-neutral`],surface:[`bg-surface-inverse text-on-surface-inverse`]},design:{outlined:[`-mx-px -mt-px`],tinted:[]}},defaultVariants:{intent:`main`,design:`outlined`}}),h=({intent:e,children:t,...n})=>{let i=s(),a=e??i.intent??`main`;return t?(0,r.jsx)(`header`,{className:m({intent:a,design:i.design}),...n,children:t}):null};h.displayName=`Card.Type`;var g=Object.assign(d,{Content:p,Type:h});g.displayName=`Card`,p.displayName=`Card.Content`,h.displayName=`Card.Type`,exports.Card=g;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../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/Type.tsx","../../src/card/index.ts"],"sourcesContent":["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 outlined: ['border-sm'],\n tinted: [],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\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: 'outlined',\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 hasType: 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 hasType = (children: ReactNode): boolean => {\n let typeFound = false\n\n const searchForType = (node: ReactNode): void => {\n if (typeFound) return\n\n Children.forEach(node, child => {\n if (typeFound) return\n\n if (isValidElement(child)) {\n const isTypeComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n if (isTypeComponent) {\n typeFound = 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 searchForType(childChildren)\n }\n }\n }\n })\n }\n\n searchForType(children)\n\n return typeFound\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 { hasType, 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 = 'outlined',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const typeDetected = hasType(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext\n value={{\n design,\n intent,\n hasType: typeDetected,\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 })}\n {...props}\n >\n {children}\n </Component>\n </CardContext>\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 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 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 hasType: {\n true: ['rounded-t-0'],\n },\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [\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: 'outlined',\n intent: 'surface',\n inset: false,\n hasType: 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\n/**\n * The main content area of the card. Renders a <div> element.\n */\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasType } = 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 hasType,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n [\n // Base structure\n 'rounded-t-lg default:text-body-2-highlight',\n 'default:text-center',\n\n // Height and layout\n 'min-h-sz-32', // Minimum height same as Backdrop\n 'px-md', // Horizontal padding for text\n 'py-xs', // Vertical padding for text (allows height to grow)\n\n // Layout\n 'flex items-center justify-center', // Vertical centering of text\n 'whitespace-normal break-words', // Allow text wrapping\n ],\n {\n variants: {\n intent: {\n main: ['bg-main text-on-main'],\n support: ['bg-support text-on-support'],\n accent: ['bg-accent text-on-accent'],\n success: ['bg-success text-on-success'],\n alert: ['bg-alert text-on-alert'],\n danger: ['bg-error text-on-error'],\n info: ['bg-info text-on-info'],\n neutral: ['bg-neutral text-on-neutral'],\n surface: ['bg-surface-inverse text-on-surface-inverse'],\n },\n design: {\n outlined: ['-mx-px -mt-px'], // Fix border-radius visual gap by overlapping parent border\n tinted: [],\n },\n },\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\n },\n }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n /**\n * The type or category to display (e.g., \"Best seller\", \"New product\")\n */\n children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n const cardContext = useCardContext()\n\n // Use intent from props if provided, otherwise inherit from parent Card context\n const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n // Don't render if no children provided (for backward compatibility with Backdrop)\n if (!children) {\n return null\n }\n\n return (\n <header\n className={typeStyles({ intent: resolvedIntent, design: cardContext.design })}\n {...props}\n >\n {children}\n </header>\n )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n Content: typeof Content\n Type: typeof Type\n} = Object.assign(Root, {\n Content,\n Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../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/Type.tsx","../../src/card/index.ts"],"sourcesContent":["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 outlined: ['border-sm'],\n tinted: [],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\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: 'outlined',\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 hasType: 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 hasType = (children: ReactNode): boolean => {\n let typeFound = false\n\n const searchForType = (node: ReactNode): void => {\n if (typeFound) return\n\n Children.forEach(node, child => {\n if (typeFound) return\n\n if (isValidElement(child)) {\n const isTypeComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n if (isTypeComponent) {\n typeFound = 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 searchForType(childChildren)\n }\n }\n }\n })\n }\n\n searchForType(children)\n\n return typeFound\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 { hasType, 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 = 'outlined',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const typeDetected = hasType(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext\n value={{\n design,\n intent,\n hasType: typeDetected,\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 })}\n {...props}\n >\n {children}\n </Component>\n </CardContext>\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 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 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 hasType: {\n true: ['rounded-t-0'],\n },\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [\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: 'outlined',\n intent: 'surface',\n inset: false,\n hasType: 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\n/**\n * The main content area of the card. Renders a <div> element.\n */\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasType } = 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 hasType,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n [\n // Base structure\n 'rounded-t-lg default:text-body-2-highlight',\n 'default:text-center',\n\n // Height and layout\n 'min-h-sz-32', // Minimum height same as Backdrop\n 'px-md', // Horizontal padding for text\n 'py-xs', // Vertical padding for text (allows height to grow)\n\n // Layout\n 'flex items-center justify-center', // Vertical centering of text\n 'whitespace-normal break-words', // Allow text wrapping\n ],\n {\n variants: {\n intent: {\n main: ['bg-main text-on-main'],\n support: ['bg-support text-on-support'],\n accent: ['bg-accent text-on-accent'],\n success: ['bg-success text-on-success'],\n alert: ['bg-alert text-on-alert'],\n danger: ['bg-error text-on-error'],\n info: ['bg-info text-on-info'],\n neutral: ['bg-neutral text-on-neutral'],\n surface: ['bg-surface-inverse text-on-surface-inverse'],\n },\n design: {\n outlined: ['-mx-px -mt-px'], // Fix border-radius visual gap by overlapping parent border\n tinted: [],\n },\n },\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\n },\n }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n /**\n * The type or category to display (e.g., \"Best seller\", \"New product\")\n */\n children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n const cardContext = useCardContext()\n\n // Use intent from props if provided, otherwise inherit from parent Card context\n const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n // Don't render if no children provided (for backward compatibility with Backdrop)\n if (!children) {\n return null\n }\n\n return (\n <header\n className={typeStyles({ intent: resolvedIntent, design: cardContext.design })}\n {...props}\n >\n {children}\n </header>\n )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n Content: typeof Content\n Type: typeof Type\n} = Object.assign(Root, {\n Content,\n Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"yOAGA,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CACE,4EACA,oDACF,EACA,CACE,SAAU,CACR,OAAQ,CACN,SAAU,CAAC,WAAW,EACtB,OAAQ,CAAC,CACX,EAIA,QAAA,EAAA,EAAA,aAAA,CAGE,CACA,KAAM,CAAC,EACP,QAAS,CAAC,EACV,OAAQ,CAAC,EACT,QAAS,CAAC,EACV,MAAO,CAAC,EACR,OAAQ,CAAC,EACT,KAAM,CAAC,EACP,QAAS,CAAC,EACV,QAAS,CAAC,CACZ,CAAC,CACH,EACA,iBAAkB,CAEhB,CAAE,OAAQ,OAAQ,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,aAAa,CAAC,CAAE,EACjE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,gBAAgB,CAAC,CAAE,EACvE,CAAE,OAAQ,SAAU,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,eAAe,CAAC,CAAE,EACrE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,gBAAgB,CAAC,CAAE,EACvE,CAAE,OAAQ,QAAS,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,cAAc,CAAC,CAAE,EACnE,CAAE,OAAQ,SAAU,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,cAAc,CAAC,CAAE,EACpE,CAAE,OAAQ,OAAQ,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,aAAa,CAAC,CAAE,EACjE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,gBAAgB,CAAC,CAAE,EACvE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,GAAA,CAAU,CAAC,gBAAgB,CAAC,CAAE,CACzE,EACA,gBAAiB,CACf,OAAQ,WACR,OAAQ,SACV,CACF,CACF,ECrCM,GAAA,EAAA,EAAA,cAAA,CAA0D,IAAA,EAAS,EAE5D,MAAuB,CAClC,IAAM,GAAA,EAAA,EAAA,WAAA,CAAqB,CAAW,EACtC,GAAI,CAAC,EACH,MAAU,MAAM,qDAAqD,EAGvE,OAAO,CACT,ECnBM,EAAe,CACnB,UACA,cACA,YACA,eACA,eACA,cACA,cACA,aACA,gBACA,eACF,EAEa,EAAW,GAAiC,CACvD,IAAI,EAAY,GAEV,EAAiB,GAA0B,CAC3C,GAEJ,EAAA,SAAS,QAAQ,EAAM,GAAS,CAC1B,QAEJ,EAAA,EAAA,eAAA,CAAmB,CAAK,EAAG,CAKzB,GAHE,OAAO,EAAM,MAAS,YACrB,EAAM,KAAkC,cAAgB,YAEtC,CACnB,EAAY,GAEZ,MACF,CAKA,GAFE,EAAM,OAAS,OAAO,EAAM,OAAU,UAAY,aAAc,EAAM,MAEvD,CACf,IAAM,EAAiB,EAAM,MAAkC,SAC3D,GAAiD,MACnD,EAAc,CAAa,CAE/B,CACF,CACF,CAAC,CACH,EAIA,OAFA,EAAc,CAAQ,EAEf,CACT,EAEa,GACX,EACA,EACA,IACY,CAGZ,GAF8B,EAAa,KAAK,GAAS,KAAS,CAE9D,EACF,MAAO,GAGT,GAAI,CAAC,EACH,MAAO,GAGT,IAAM,EAAQ,EAAA,SAAS,KAAK,CAAQ,EAEpC,GAAI,EAAA,EAAA,EAAA,eAAA,CAAgB,CAAK,EACvB,MAAO,GAOT,GAFE,OAAO,EAAM,MAAS,UAAY,CAFP,IAAK,QAEE,CAAA,CAAoB,SAAS,EAAM,IAAI,EAGzE,MAAO,GAGT,IAAM,EAAa,EAAM,MAGzB,OAF8B,EAAa,KAAK,GAAS,KAAS,CAE3D,CACT,ECpEa,GAAQ,CACnB,WACA,SAAS,WACT,SAAS,UACT,QAAQ,GACR,UACA,YACA,MACA,GAAG,KACY,CACf,IAAM,EAAY,EAAU,EAAA,KAAO,MAC7B,EAAe,EAAQ,CAAQ,EAC/B,EAAsB,EAAc,EAAU,EAAS,CAAK,EAElE,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,MAAO,CACL,SACA,SACA,QAAS,EACT,QACA,cAAe,CACjB,YAEA,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,uBAAqB,OACrB,mBAAkB,EACb,MACL,UAAW,EAAW,CACpB,YACA,SACA,QACF,CAAC,EACD,GAAI,EAEH,UACQ,CAAA,CACA,CAAA,CAEjB,EAEA,EAAK,YAAc,OCxDnB,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CACE,6DACA,4DACF,EACA,CACE,SAAU,CACR,MAAO,CACL,MAAO,CAAC,cAAc,CACxB,EACA,OAAQ,CACN,SAAU,CACR,mIACF,EACA,OAAQ,CAAC,CACX,EACA,QAAS,CACP,KAAM,CAAC,aAAa,CACtB,EACA,QAAA,EAAA,EAAA,aAAA,CAGE,CACA,KAAM,CAAC,EACP,QAAS,CAAC,EACV,OAAQ,CAAC,EACT,QAAS,CAAC,EACV,MAAO,CAAC,EACR,OAAQ,CAAC,EACT,KAAM,CAAC,EACP,QAAS,CAAC,EACV,QAAS,CAAC,CACZ,CAAC,CACH,EACA,iBAAkB,CAMhB,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,iFACA,wFACF,CAAC,CACH,EACA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,0FACA,2FACF,CAAC,CACH,EACA,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,uFACA,0FACF,CAAC,CACH,EACA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,0FACA,2FACF,CAAC,CACH,EACA,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,oFACA,yFACF,CAAC,CACH,EACA,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,oFACA,yFACF,CAAC,CACH,EACA,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,iFACA,wFACF,CAAC,CACH,EACA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,0FACA,2FACF,CAAC,CACH,EACA,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,GAAA,CAAU,CACR,4DACA,iFACF,CAAC,CACH,CACF,EACA,gBAAiB,CACf,OAAQ,WACR,OAAQ,UACR,MAAO,GACP,QAAS,EACX,CACF,CACF,ECvGa,GAAW,CAAE,WAAU,QAAO,UAAS,YAAW,MAAK,GAAG,KAA0B,CAC/F,IAAM,EAAY,EAAU,EAAA,KAAO,MAC7B,CAAE,SAAQ,SAAQ,WAAY,EAAe,EAEnD,OACE,EAAA,EAAA,IAAA,CAAC,EAAD,CACE,uBAAqB,eAChB,MACL,UAAW,EAAc,CACvB,YACA,SACA,SACA,QACA,SACF,CAAC,EACD,GAAI,EAEH,UACQ,CAAA,CAEf,EAEA,EAAQ,YAAc,UCrCtB,IAAa,GAAA,EAAA,EAAA,IAAA,CACX,CAEE,6CACA,sBAGA,cACA,QACA,QAGA,mCACA,+BACF,EACA,CACE,SAAU,CACR,OAAQ,CACN,KAAM,CAAC,sBAAsB,EAC7B,QAAS,CAAC,4BAA4B,EACtC,OAAQ,CAAC,0BAA0B,EACnC,QAAS,CAAC,4BAA4B,EACtC,MAAO,CAAC,wBAAwB,EAChC,OAAQ,CAAC,wBAAwB,EACjC,KAAM,CAAC,sBAAsB,EAC7B,QAAS,CAAC,4BAA4B,EACtC,QAAS,CAAC,4CAA4C,CACxD,EACA,OAAQ,CACN,SAAU,CAAC,eAAe,EAC1B,OAAQ,CAAC,CACX,CACF,EACA,gBAAiB,CACf,OAAQ,OACR,OAAQ,UACV,CACF,CACF,EAWa,GAAQ,CAAE,SAAQ,WAAU,GAAG,KAAuB,CACjE,IAAM,EAAc,EAAe,EAG7B,EAAiB,GAAU,EAAY,QAAU,OAOvD,OAJK,GAKH,EAAA,EAAA,IAAA,CAAC,SAAD,CACE,UAAW,EAAW,CAAE,OAAQ,EAAgB,OAAQ,EAAY,MAAO,CAAC,EAC5E,GAAI,EAEH,UACK,CAAA,EATD,IAWX,EAEA,EAAK,YAAc,YCpEnB,IAAa,EAGT,OAAO,OAAO,EAAM,CACtB,UACA,MACF,CAAC,EAED,EAAK,YAAc,OACnB,EAAQ,YAAc,eACtB,EAAK,YAAc"}
|
package/dist/card/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../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/Type.tsx","../../src/card/index.ts"],"sourcesContent":["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 outlined: ['border-sm'],\n tinted: [],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\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: 'outlined',\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 hasType: 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 hasType = (children: ReactNode): boolean => {\n let typeFound = false\n\n const searchForType = (node: ReactNode): void => {\n if (typeFound) return\n\n Children.forEach(node, child => {\n if (typeFound) return\n\n if (isValidElement(child)) {\n const isTypeComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n if (isTypeComponent) {\n typeFound = 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 searchForType(childChildren)\n }\n }\n }\n })\n }\n\n searchForType(children)\n\n return typeFound\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 { hasType, 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 = 'outlined',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const typeDetected = hasType(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext\n value={{\n design,\n intent,\n hasType: typeDetected,\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 })}\n {...props}\n >\n {children}\n </Component>\n </CardContext>\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 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 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 hasType: {\n true: ['rounded-t-0'],\n },\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [\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: 'outlined',\n intent: 'surface',\n inset: false,\n hasType: 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\n/**\n * The main content area of the card. Renders a <div> element.\n */\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasType } = 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 hasType,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n [\n // Base structure\n 'rounded-t-lg default:text-body-2-highlight',\n 'default:text-center',\n\n // Height and layout\n 'min-h-sz-32', // Minimum height same as Backdrop\n 'px-md', // Horizontal padding for text\n 'py-xs', // Vertical padding for text (allows height to grow)\n\n // Layout\n 'flex items-center justify-center', // Vertical centering of text\n 'whitespace-normal break-words', // Allow text wrapping\n ],\n {\n variants: {\n intent: {\n main: ['bg-main text-on-main'],\n support: ['bg-support text-on-support'],\n accent: ['bg-accent text-on-accent'],\n success: ['bg-success text-on-success'],\n alert: ['bg-alert text-on-alert'],\n danger: ['bg-error text-on-error'],\n info: ['bg-info text-on-info'],\n neutral: ['bg-neutral text-on-neutral'],\n surface: ['bg-surface-inverse text-on-surface-inverse'],\n },\n design: {\n outlined: ['-mx-px -mt-px'], // Fix border-radius visual gap by overlapping parent border\n tinted: [],\n },\n },\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\n },\n }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n /**\n * The type or category to display (e.g., \"Best seller\", \"New product\")\n */\n children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n const cardContext = useCardContext()\n\n // Use intent from props if provided, otherwise inherit from parent Card context\n const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n // Don't render if no children provided (for backward compatibility with Backdrop)\n if (!children) {\n return null\n }\n\n return (\n <header\n className={typeStyles({ intent: resolvedIntent, design: cardContext.design })}\n {...props}\n >\n {children}\n </header>\n )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n Content: typeof Content\n Type: typeof Type\n} = Object.assign(Root, {\n Content,\n Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../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/Type.tsx","../../src/card/index.ts"],"sourcesContent":["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 outlined: ['border-sm'],\n tinted: [],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\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: 'outlined',\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 hasType: 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 hasType = (children: ReactNode): boolean => {\n let typeFound = false\n\n const searchForType = (node: ReactNode): void => {\n if (typeFound) return\n\n Children.forEach(node, child => {\n if (typeFound) return\n\n if (isValidElement(child)) {\n const isTypeComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n if (isTypeComponent) {\n typeFound = 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 searchForType(childChildren)\n }\n }\n }\n })\n }\n\n searchForType(children)\n\n return typeFound\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 { hasType, 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 = 'outlined',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const typeDetected = hasType(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext\n value={{\n design,\n intent,\n hasType: typeDetected,\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 })}\n {...props}\n >\n {children}\n </Component>\n </CardContext>\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 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 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 hasType: {\n true: ['rounded-t-0'],\n },\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n }),\n },\n compoundVariants: [\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: 'outlined',\n intent: 'surface',\n inset: false,\n hasType: 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\n/**\n * The main content area of the card. Renders a <div> element.\n */\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasType } = 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 hasType,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n [\n // Base structure\n 'rounded-t-lg default:text-body-2-highlight',\n 'default:text-center',\n\n // Height and layout\n 'min-h-sz-32', // Minimum height same as Backdrop\n 'px-md', // Horizontal padding for text\n 'py-xs', // Vertical padding for text (allows height to grow)\n\n // Layout\n 'flex items-center justify-center', // Vertical centering of text\n 'whitespace-normal break-words', // Allow text wrapping\n ],\n {\n variants: {\n intent: {\n main: ['bg-main text-on-main'],\n support: ['bg-support text-on-support'],\n accent: ['bg-accent text-on-accent'],\n success: ['bg-success text-on-success'],\n alert: ['bg-alert text-on-alert'],\n danger: ['bg-error text-on-error'],\n info: ['bg-info text-on-info'],\n neutral: ['bg-neutral text-on-neutral'],\n surface: ['bg-surface-inverse text-on-surface-inverse'],\n },\n design: {\n outlined: ['-mx-px -mt-px'], // Fix border-radius visual gap by overlapping parent border\n tinted: [],\n },\n },\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\n },\n }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n /**\n * The type or category to display (e.g., \"Best seller\", \"New product\")\n */\n children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n const cardContext = useCardContext()\n\n // Use intent from props if provided, otherwise inherit from parent Card context\n const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n // Don't render if no children provided (for backward compatibility with Backdrop)\n if (!children) {\n return null\n }\n\n return (\n <header\n className={typeStyles({ intent: resolvedIntent, design: cardContext.design })}\n {...props}\n >\n {children}\n </header>\n )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n Content: typeof Content\n Type: typeof Type\n} = Object.assign(Root, {\n Content,\n Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}
|
package/dist/carousel/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-Iv9kq84M.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`),o=require(`@spark-ui/icons/ArrowVerticalLeft`);function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--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":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.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`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.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},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../icon-DY4l9nsc.js"),t=require("../icon-button-4kkwICAr.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/icons/ArrowVerticalRight"),o=require("@spark-ui/icons/ArrowVerticalLeft");function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--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":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.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`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.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},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|