@spark-ui/components 17.2.5-beta.0 → 17.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{FormFieldRequiredIndicator-CtgkvPZo.js → FormFieldRequiredIndicator-CEB8Ez-q.js} +2 -2
- package/dist/{FormFieldRequiredIndicator-CtgkvPZo.js.map → FormFieldRequiredIndicator-CEB8Ez-q.js.map} +1 -1
- package/dist/{FormFieldRequiredIndicator-DOGQ_HxO.mjs → FormFieldRequiredIndicator-CzdpinIz.mjs} +2 -2
- package/dist/{FormFieldRequiredIndicator-DOGQ_HxO.mjs.map → FormFieldRequiredIndicator-CzdpinIz.mjs.map} +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +1 -1
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/{button-CvvFH9fU.js → button-B-sMnDc_.js} +2 -2
- package/dist/{button-CvvFH9fU.js.map → button-B-sMnDc_.js.map} +1 -1
- package/dist/{button-CaQkq3cR.mjs → button-C6nlNPdv.mjs} +26 -25
- package/dist/{button-CaQkq3cR.mjs.map → button-C6nlNPdv.mjs.map} +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.mjs +1 -1
- package/dist/checkbox/index.js +1 -2
- package/dist/checkbox/index.mjs +2 -216
- package/dist/checkbox-DjwbAH09.js +2 -0
- package/dist/checkbox-DjwbAH09.js.map +1 -0
- package/dist/checkbox-xsURzANi.mjs +216 -0
- package/dist/checkbox-xsURzANi.mjs.map +1 -0
- 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/combobox/index.js +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +3 -3
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +2 -2
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +2 -2
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs +2 -2
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.mjs +3 -3
- package/dist/form-field/index.js +1 -1
- package/dist/form-field/index.mjs +1 -1
- package/dist/{form-field-Bu_0E9tb.js → form-field-81wzFxM0.js} +2 -2
- package/dist/{form-field-Bu_0E9tb.js.map → form-field-81wzFxM0.js.map} +1 -1
- package/dist/{form-field-B8QzM655.mjs → form-field-GTAuK_nO.mjs} +3 -3
- package/dist/{form-field-B8QzM655.mjs.map → form-field-GTAuK_nO.mjs.map} +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/icon-button-CYz_Fitz.js +2 -0
- package/dist/{icon-button-D1Lg6gvI.js.map → icon-button-CYz_Fitz.js.map} +1 -1
- package/dist/{icon-button-C669hs83.mjs → icon-button-DpucUC_L.mjs} +3 -3
- package/dist/{icon-button-C669hs83.mjs.map → icon-button-DpucUC_L.mjs.map} +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/{input-C8JGTQf_.js → input-BUSYZ_VO.js} +2 -2
- package/dist/input-BUSYZ_VO.js.map +1 -0
- package/dist/{input-n-ocJBNV.mjs → input-CiWFuTs_.mjs} +7 -7
- package/dist/input-CiWFuTs_.mjs.map +1 -0
- package/dist/label/index.js +1 -1
- package/dist/label/index.mjs +1 -1
- package/dist/{label-DU0p0d-f.js → label-BCSEss4U.js} +1 -1
- package/dist/{label-DU0p0d-f.js.map → label-BCSEss4U.js.map} +1 -1
- package/dist/{label-BqRlrca0.mjs → label-DDBRKLUX.mjs} +1 -1
- package/dist/{label-BqRlrca0.mjs.map → label-DDBRKLUX.mjs.map} +1 -1
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +14 -14
- 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-DeJQ91qR.js → popover-CrKp_TKk.js} +2 -2
- package/dist/{popover-DeJQ91qR.js.map → popover-CrKp_TKk.js.map} +1 -1
- package/dist/{popover-BC8GjGp3.mjs → popover-DsBY8eYl.mjs} +2 -2
- package/dist/{popover-BC8GjGp3.mjs.map → popover-DsBY8eYl.mjs.map} +1 -1
- package/dist/progress/index.js +1 -1
- package/dist/progress/index.mjs +1 -1
- package/dist/{progress-rJZcPJsZ.js → progress-BjqJSRnK.js} +1 -1
- package/dist/{progress-rJZcPJsZ.js.map → progress-BjqJSRnK.js.map} +1 -1
- package/dist/{progress-cEf3tFbn.mjs → progress-C3w4PmxY.mjs} +1 -1
- package/dist/{progress-cEf3tFbn.mjs.map → progress-C3w4PmxY.mjs.map} +1 -1
- package/dist/rating/index.js +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +2 -2
- 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/slider/index.js +1 -1
- package/dist/slider/index.mjs +2 -2
- package/dist/src/button/Button.d.ts +7 -1
- package/dist/src/table/ResizableTableContainer.d.ts +9 -0
- package/dist/src/table/Table.d.ts +45 -0
- package/dist/src/table/Table.styles.d.ts +11 -0
- package/dist/src/table/TableBody.d.ts +8 -0
- package/dist/src/table/TableBulkBar.d.ts +27 -0
- package/dist/src/table/TableCell.d.ts +10 -0
- package/dist/src/table/TableColumn.d.ts +12 -0
- package/dist/src/table/TableContext.d.ts +28 -0
- package/dist/src/table/TableHeader.d.ts +10 -0
- package/dist/src/table/TableHeaderSelectionCheckbox.d.ts +13 -0
- package/dist/src/table/TableRow.d.ts +8 -0
- package/dist/src/table/TableSelectionCheckbox.d.ts +7 -0
- package/dist/src/table/index.d.mts +31 -0
- package/dist/src/table/index.d.ts +31 -0
- package/dist/src/table/table-utils.d.ts +2 -0
- package/dist/src/table/useTablePagination.d.ts +76 -0
- package/dist/src/table/useTableSort.d.ts +38 -0
- package/dist/src/toast/Toast.styles.d.ts +0 -4
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/switch/index.js +1 -1
- package/dist/switch/index.mjs +2 -2
- package/dist/table/index.js +2 -0
- package/dist/table/index.js.map +1 -0
- package/dist/table/index.mjs +529 -0
- package/dist/table/index.mjs.map +1 -0
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.mjs +3 -3
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +2 -2
- package/dist/tag/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 +2 -2
- 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 +2 -17
- package/dist/toast/index.mjs.map +1 -1
- package/dist/{useRenderSlot-Xxf_s88b.js → useRenderSlot-C4UVWhDN.js} +1 -1
- package/dist/{useRenderSlot-Xxf_s88b.js.map → useRenderSlot-C4UVWhDN.js.map} +1 -1
- package/dist/{useRenderSlot-DP4fYerF.mjs → useRenderSlot-DKIwoqpO.mjs} +1 -1
- package/dist/{useRenderSlot-DP4fYerF.mjs.map → useRenderSlot-DKIwoqpO.mjs.map} +1 -1
- package/package.json +5 -4
- package/dist/checkbox/index.js.map +0 -1
- package/dist/checkbox/index.mjs.map +0 -1
- package/dist/icon-button-D1Lg6gvI.js +0 -2
- package/dist/input-C8JGTQf_.js.map +0 -1
- package/dist/input-n-ocJBNV.mjs.map +0 -1
- package/dist/snackbar/index.js +0 -2
- package/dist/snackbar/index.js.map +0 -1
- package/dist/snackbar/index.mjs +0 -409
- package/dist/snackbar/index.mjs.map +0 -1
- package/dist/src/snackbar/Snackbar.d.ts +0 -29
- package/dist/src/snackbar/SnackbarItem.d.ts +0 -49
- package/dist/src/snackbar/SnackbarItem.styles.d.ts +0 -10
- package/dist/src/snackbar/SnackbarItemAction.d.ts +0 -10
- package/dist/src/snackbar/SnackbarItemClose.d.ts +0 -9
- package/dist/src/snackbar/SnackbarItemContext.d.ts +0 -8
- package/dist/src/snackbar/SnackbarItemIcon.d.ts +0 -7
- package/dist/src/snackbar/SnackbarRegion.d.ts +0 -30
- package/dist/src/snackbar/SnackbarRegion.styles.d.ts +0 -5
- package/dist/src/snackbar/index.d.mts +0 -13
- package/dist/src/snackbar/index.d.ts +0 -13
- package/dist/src/snackbar/snackbarVariants.d.ts +0 -74
- package/dist/src/snackbar/useSnackbarGlobalStore.d.ts +0 -18
- package/dist/src/snackbar/useSwipe.d.ts +0 -15
package/dist/{FormFieldRequiredIndicator-CtgkvPZo.js → FormFieldRequiredIndicator-CEB8Ez-q.js}
RENAMED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
require(`./chunk-C91j1N6u.js`);const e=require(`./label-
|
|
2
|
-
//# sourceMappingURL=FormFieldRequiredIndicator-
|
|
1
|
+
require(`./chunk-C91j1N6u.js`);const e=require(`./label-BCSEss4U.js`);let t=require(`class-variance-authority`),n=require(`react/jsx-runtime`);var r=({className:r,ref:i,...a})=>(0,n.jsx)(e.t.RequiredIndicator,{ref:i,className:(0,t.cx)(`ml-sm`,r),...a});r.displayName=`FormField.RequiredIndicator`,Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});
|
|
2
|
+
//# sourceMappingURL=FormFieldRequiredIndicator-CEB8Ez-q.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldRequiredIndicator-
|
|
1
|
+
{"version":3,"file":"FormFieldRequiredIndicator-CEB8Ez-q.js","names":[],"sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n className,\n ref,\n ...props\n}: FormFieldRequiredIndicatorProps) => {\n return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"mappings":"+IASA,IAAa,GAA8B,CACzC,YACA,MACA,GAAG,MAEI,EAAA,EAAA,KAAC,EAAA,EAAM,kBAAP,CAA8B,MAAK,WAAA,EAAA,EAAA,IAAc,QAAS,EAAU,CAAE,GAAI,EAAS,CAAA,CAG5F,EAA2B,YAAc"}
|
package/dist/{FormFieldRequiredIndicator-DOGQ_HxO.mjs → FormFieldRequiredIndicator-CzdpinIz.mjs}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./label-
|
|
1
|
+
import { t as e } from "./label-DDBRKLUX.mjs";
|
|
2
2
|
import { cx as t } from "class-variance-authority";
|
|
3
3
|
import { jsx as n } from "react/jsx-runtime";
|
|
4
4
|
//#region src/form-field/FormFieldRequiredIndicator.tsx
|
|
@@ -11,4 +11,4 @@ r.displayName = "FormField.RequiredIndicator";
|
|
|
11
11
|
//#endregion
|
|
12
12
|
export { r as t };
|
|
13
13
|
|
|
14
|
-
//# sourceMappingURL=FormFieldRequiredIndicator-
|
|
14
|
+
//# sourceMappingURL=FormFieldRequiredIndicator-CzdpinIz.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormFieldRequiredIndicator-
|
|
1
|
+
{"version":3,"file":"FormFieldRequiredIndicator-CzdpinIz.mjs","names":[],"sources":["../src/form-field/FormFieldRequiredIndicator.tsx"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { Ref } from 'react'\n\nimport { Label, LabelRequiredIndicatorProps } from '../label'\n\nexport type FormFieldRequiredIndicatorProps = LabelRequiredIndicatorProps & {\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const FormFieldRequiredIndicator = ({\n className,\n ref,\n ...props\n}: FormFieldRequiredIndicatorProps) => {\n return <Label.RequiredIndicator ref={ref} className={cx('ml-sm', className)} {...props} />\n}\n\nFormFieldRequiredIndicator.displayName = 'FormField.RequiredIndicator'\n"],"mappings":";;;;AASA,IAAa,KAA8B,EACzC,cACA,QACA,GAAG,QAEI,kBAAC,EAAM,mBAAP;CAA8B;CAAK,WAAW,EAAG,SAAS,EAAU;CAAE,GAAI;CAAS,CAAA;AAG5F,EAA2B,cAAc"}
|
package/dist/avatar/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../icon-button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../chunk-C91j1N6u.js`),t=require(`../slot/index.js`),n=require(`../icon-CRPcdgYp.js`),r=require(`../icon-button-CYz_Fitz.js`);let i=require(`class-variance-authority`),a=require(`react`);a=e.t(a);let o=require(`react/jsx-runtime`),s=require(`@spark-ui/icons/PenOutline`);var c=a.createContext(void 0),l=()=>{let e=a.useContext(c);if(!e)throw Error(`useAvatarContext must be used within an Avatar component`);return e},u={xs:24,sm:32,md:40,lg:56,xl:64,"2xl":96},d=a.forwardRef(({className:e,size:n=`xl`,isOnline:r=!1,onlineText:s,username:l,asChild:d,children:f,shape:p=`circle`,...m},h)=>{let g=d?t.Slot:`div`,_=a.useMemo(()=>({size:n,isOnline:r,onlineText:s,username:l,shape:p,pixelSize:u[n]}),[n,r,l,p,s]);return(0,o.jsx)(c.Provider,{value:_,children:(0,o.jsx)(g,{ref:h,style:{width:u[n],height:u[n]},"data-spark-component":`avatar`,className:(0,i.cx)(`relative inline-flex items-center justify-center`,e),...m,children:f})})});d.displayName=`Avatar`;var f=({className:e,children:a,asChild:c,angle:u=135,ariaLabel:d,...f})=>{let p=c?t.Slot:r.t,{pixelSize:m,shape:h}=l();function g(e){let t=(90-u)*Math.PI/180,n=e/2;return{x:n+n*Math.cos(t),y:n-n*Math.sin(t)}}let _=g(m),v=c;return(0,o.jsx)(p,{"data-spark-component":`avatar-action`,style:{position:`absolute`,...h===`circle`?{left:`${_.x}px`,top:`${_.y}px`}:{},...h===`square`?{right:`0px`,bottom:`0px`}:{}},className:(0,i.cx)(`z-raised`,h===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,{"shadow-sm":!v},e),"aria-label":d,title:d,...v?{}:{size:`sm`,intent:`support`,design:`contrast`},...f,children:a||(0,o.jsx)(n.t,{size:`sm`,children:(0,o.jsx)(s.PenOutline,{})})})};f.displayName=`AvatarAction`;var p=({className:e,asChild:n,src:r,onLoad:s,onError:c,...u})=>{let{username:d,isOnline:f,onlineText:p}=l(),m=n?t.Slot:`img`,[h,g]=(0,a.useState)(!1),_=f&&p?`${d} (${p})`:d;if((0,a.useEffect)(()=>{g(!1)},[r]),!r)return null;let v=e=>{g(!0),s?.(e)},y=e=>{g(!1),c?.(e)};return(0,o.jsx)(m,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 size-full`,`object-cover`,{"transition-all duration-300 group-hover:scale-120":u.onClick},`focus-visible:u-outline`,h?`block`:`hidden`,e),alt:_,src:r,onLoad:v,onError:y,...u})};p.displayName=`AvatarImage`;var m=({angle:e=135,...t})=>{let{isOnline:n,pixelSize:r,shape:a,onlineText:s,size:c}=l();if(!n)return null;function u(t){let n=(90-e)*Math.PI/180,r=t/2;return{x:r+r*Math.cos(n),y:r-r*Math.sin(n)}}let d=u(r);return(0,o.jsx)(`div`,{"data-spark-component":`avatar-online-badge`,role:`status`,"aria-label":s,style:{...a===`circle`?{left:`${d.x}px`,top:`${d.y}px`}:{right:`0px`,bottom:`0px`}},className:(0,i.cx)(`bg-success outline-surface absolute rounded-full`,a===`circle`?`-translate-x-1/2 -translate-y-1/2`:`translate-x-1/4 translate-y-1/4`,[`lg`,`xl`,`2xl`].includes(c)?(0,i.cx)(`size-sz-12 outline-4`):(0,i.cx)(`size-sz-8 outline-2`)),...t})};m.displayName=`AvatarOnlineBadge`;var h=({className:e,children:t,...n})=>{let{size:r,username:a}=l(),s=a?.charAt(0);return(0,o.jsx)(`div`,{"aria-hidden":!0,className:(0,i.cx)(`absolute inset-0 flex size-full items-center justify-center`,`default:bg-neutral default:text-on-neutral`,{"text-display-1":r===`2xl`,"text-display-2":[`xl`,`lg`].includes(r),"text-display-3":r===`md`,"text-headline-2":r===`sm`,"text-body-2 font-bold":r===`xs`},e),...n,children:t||s})};h.displayName=`AvatarPlaceholder`;var g=({asChild:e,children:n,className:r,...a})=>{let{shape:s,isOnline:c,onlineText:u,username:d}=l(),f=e?t.Slot:`div`,p=c&&u?`${d} (${u})`:d;return(0,o.jsx)(f,{...!e&&{role:`img`},"aria-label":p,title:p,className:(0,i.cx)(`group default:border-outline relative size-full overflow-hidden`,`focus-visible:u-outline`,{"default:rounded-full":s===`circle`,"default:rounded-md":s===`square`,"hover:opacity-dim-1 cursor-pointer":e||a.onClick},r),...a,children:n})};g.displayName=`AvatarUser`;var _=d;_.Image=p,_.Action=f,_.OnlineBadge=m,_.User=g,_.Placeholder=h,exports.Avatar=_;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/avatar/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Slot as e } from "../slot/index.mjs";
|
|
2
2
|
import { t } from "../icon-D05Uqh8_.mjs";
|
|
3
|
-
import { t as n } from "../icon-button-
|
|
3
|
+
import { t as n } from "../icon-button-DpucUC_L.mjs";
|
|
4
4
|
import { cx as r } from "class-variance-authority";
|
|
5
5
|
import * as i from "react";
|
|
6
6
|
import { useEffect as a, useState as o } from "react";
|
package/dist/button/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../button-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../button-B-sMnDc_.js`);exports.Button=e.t;
|
package/dist/button/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../button-
|
|
1
|
+
import { t as e } from "../button-C6nlNPdv.mjs";
|
|
2
2
|
export { e as Button };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./spinner-DFUoYvmm.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/internal-utils`);var o=[{intent:`main`,design:`filled`,class:(0,a.tw)([`bg-main`,`text-on-main`,`hover:bg-main-hovered`,`enabled:active:bg-main-hovered`,`focus-visible:bg-main-hovered`])},{intent:`support`,design:`filled`,class:(0,a.tw)([`bg-support`,`text-on-support`,`hover:bg-support-hovered`,`enabled:active:bg-support-hovered`,`focus-visible:bg-support-hovered`])},{intent:`accent`,design:`filled`,class:(0,a.tw)([`bg-accent`,`text-on-accent`,`hover:bg-accent-hovered`,`enabled:active:bg-accent-hovered`,`focus-visible:bg-accent-hovered`])},{intent:`success`,design:`filled`,class:(0,a.tw)([`bg-success`,`text-on-success`,`hover:bg-success-hovered`,`enabled:active:bg-success-hovered`,`focus-visible:bg-success-hovered`])},{intent:`alert`,design:`filled`,class:(0,a.tw)([`bg-alert`,`text-on-alert`,`hover:bg-alert-hovered`,`enabled:active:bg-alert-hovered`,`focus-visible:bg-alert-hovered`])},{intent:`danger`,design:`filled`,class:(0,a.tw)([`text-on-error bg-error`,`hover:bg-error-hovered enabled:active:bg-error-hovered`,`focus-visible:bg-error-hovered`])},{intent:`info`,design:`filled`,class:(0,a.tw)([`text-on-error bg-info`,`hover:bg-info-hovered enabled:active:bg-info-hovered`,`focus-visible:bg-info-hovered`])},{intent:`neutral`,design:`filled`,class:(0,a.tw)([`bg-neutral`,`text-on-neutral`,`hover:bg-neutral-hovered`,`enabled:active:bg-neutral-hovered`,`focus-visible:bg-neutral-hovered`])},{intent:`surface`,design:`filled`,class:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`filled`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],s=[{intent:`main`,design:`ghost`,class:(0,a.tw)([`text-on-main-container`,`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`])},{intent:`support`,design:`ghost`,class:(0,a.tw)([`text-on-support-container`,`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`])},{intent:`accent`,design:`ghost`,class:(0,a.tw)([`text-on-accent-container`,`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`])},{intent:`success`,design:`ghost`,class:(0,a.tw)([`text-on-success-container`,`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`])},{intent:`alert`,design:`ghost`,class:(0,a.tw)([`text-on-alert-container`,`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`])},{intent:`danger`,design:`ghost`,class:(0,a.tw)([`text-on-error-container`,`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`])},{intent:`info`,design:`ghost`,class:(0,a.tw)([`text-on-info-container`,`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`])},{intent:`neutral`,design:`ghost`,class:(0,a.tw)([`text-on-neutral-container`,`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`])},{intent:`surface`,design:`ghost`,class:(0,a.tw)([`text-surface`,`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`])},{intent:`surfaceInverse`,design:`ghost`,class:(0,a.tw)([`text-surface-inverse`,`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`])}],c=[{intent:`main`,design:`outlined`,class:(0,a.tw)([`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`text-main`])},{intent:`support`,design:`outlined`,class:(0,a.tw)([`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,a.tw)([`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`text-accent`])},{intent:`success`,design:`outlined`,class:(0,a.tw)([`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,a.tw)([`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,a.tw)([`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`text-error`])},{intent:`info`,design:`outlined`,class:(0,a.tw)([`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,a.tw)([`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`text-neutral`])},{intent:`surface`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`text-surface`])},{intent:`surfaceInverse`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`,`text-surface-inverse`])}],l=[{intent:`main`,design:`tinted`,class:(0,a.tw)([`bg-main-container`,`text-on-main-container`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`tinted`,class:(0,a.tw)([`bg-support-container`,`text-on-support-container`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`tinted`,class:(0,a.tw)([`bg-accent-container`,`text-on-accent-container`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,a.tw)([`bg-success-container`,`text-on-success-container`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`tinted`,class:(0,a.tw)([`bg-alert-container`,`text-on-alert-container`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`tinted`,class:(0,a.tw)([`bg-error-container`,`text-on-error-container`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`tinted`,class:(0,a.tw)([`bg-info-container`,`text-on-info-container`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`tinted`,class:(0,a.tw)([`bg-neutral-container`,`text-on-neutral-container`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`tinted`,class:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`tinted`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],u=[{intent:`main`,design:`contrast`,class:(0,a.tw)([`text-on-main-contaier bg-surface`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`contrast`,class:(0,a.tw)([`text-on-support-container bg-surface`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`contrast`,class:(0,a.tw)([`text-on-accent-container bg-surface`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`success`,design:`contrast`,class:(0,a.tw)([`text-on-success-container bg-surface`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`contrast`,class:(0,a.tw)([`text-on-alert-container bg-surface`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`contrast`,class:(0,a.tw)([`text-on-error-container bg-surface`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`contrast`,class:(0,a.tw)([`text-on-info-container bg-surface`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`contrast`,class:(0,a.tw)([`text-on-neutral-container bg-surface`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`contrast`,class:(0,a.tw)([`text-on-surface bg-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`contrast`,class:(0,a.tw)([`text-on-surface-inverse bg-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],d=(0,n.cva)([`u-shadow-border-transition`,`box-border inline-flex items-center justify-center gap-md whitespace-nowrap`,`default:px-lg`,`text-body-1 font-bold`,`focus-visible:u-outline`],{variants:{design:(0,a.makeVariants)({filled:[],outlined:[`bg-transparent`,`border-sm`,`border-current`],tinted:[],ghost:[`default:-mx-md px-md hover:bg-main/dim-5`],contrast:[]}),underline:{true:[`underline`]},intent:(0,a.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]}),size:(0,a.makeVariants)({sm:[`min-w-sz-32`,`h-sz-32`],md:[`min-w-sz-44`,`h-sz-44`],lg:[`min-w-sz-56`,`h-sz-56`]}),shape:(0,a.makeVariants)({rounded:[`rounded-lg`],square:[`rounded-0`],pill:[`rounded-full`]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`],false:[`cursor-pointer`]}},compoundVariants:[...o,...c,...l,...s,...u],defaultVariants:{design:`filled`,intent:`main`,size:`md`,shape:`rounded`}}),f=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseOver`,`onMouseOut`,`onKeyDown`,`onKeyPress`,`onKeyUp`,`onSubmit`],p=({children:a,design:o=`filled`,disabled:s=!1,intent:c=`main`,isLoading:l=!1,loadingLabel:u,loadingText:p,shape:m=`pill`,size:h=`md`,asChild:g,className:_,underline:v=!1,ref:y,...b})=>{let x=g?e.Slot:`button`,S=!!s||l,C=(0,r.useMemo)(()=>{let e={};return S&&f.forEach(t=>e[t]=void 0),e},[S]),w={size:`current`,className:p?`inline-block`:`absolute`,...u&&{"aria-label":u}};return(0,i.jsx)(x,{"data-spark-component":`button`,...x===`button`&&{type:`button`},ref:y,className:d({className:_,design:o,disabled:S,intent:c,shape:m,size:h,underline:v}),disabled:!!s,"aria-busy":l,"aria-live":l?`assertive`:`off`,...b,...C,children:e.wrapPolymorphicSlot(g,a,e=>l?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.t,{...w}),p,(0,i.jsx)(`div`,{"aria-hidden":!0,className:(0,n.cx)(`gap-md`,p?`hidden`:`inline-flex opacity-0`),children:e})]}):e)})};p.displayName=`Button`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
|
|
2
|
-
//# sourceMappingURL=button-
|
|
1
|
+
require(`./chunk-C91j1N6u.js`);const e=require(`./slot/index.js`),t=require(`./spinner-DFUoYvmm.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/internal-utils`);var o=[{intent:`main`,design:`filled`,class:(0,a.tw)([`bg-main`,`text-on-main`,`hover:bg-main-hovered`,`enabled:active:bg-main-hovered`,`focus-visible:bg-main-hovered`])},{intent:`support`,design:`filled`,class:(0,a.tw)([`bg-support`,`text-on-support`,`hover:bg-support-hovered`,`enabled:active:bg-support-hovered`,`focus-visible:bg-support-hovered`])},{intent:`accent`,design:`filled`,class:(0,a.tw)([`bg-accent`,`text-on-accent`,`hover:bg-accent-hovered`,`enabled:active:bg-accent-hovered`,`focus-visible:bg-accent-hovered`])},{intent:`success`,design:`filled`,class:(0,a.tw)([`bg-success`,`text-on-success`,`hover:bg-success-hovered`,`enabled:active:bg-success-hovered`,`focus-visible:bg-success-hovered`])},{intent:`alert`,design:`filled`,class:(0,a.tw)([`bg-alert`,`text-on-alert`,`hover:bg-alert-hovered`,`enabled:active:bg-alert-hovered`,`focus-visible:bg-alert-hovered`])},{intent:`danger`,design:`filled`,class:(0,a.tw)([`text-on-error bg-error`,`hover:bg-error-hovered enabled:active:bg-error-hovered`,`focus-visible:bg-error-hovered`])},{intent:`info`,design:`filled`,class:(0,a.tw)([`text-on-error bg-info`,`hover:bg-info-hovered enabled:active:bg-info-hovered`,`focus-visible:bg-info-hovered`])},{intent:`neutral`,design:`filled`,class:(0,a.tw)([`bg-neutral`,`text-on-neutral`,`hover:bg-neutral-hovered`,`enabled:active:bg-neutral-hovered`,`focus-visible:bg-neutral-hovered`])},{intent:`surface`,design:`filled`,class:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`filled`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],s=[{intent:`main`,design:`ghost`,class:(0,a.tw)([`text-on-main-container`,`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`])},{intent:`support`,design:`ghost`,class:(0,a.tw)([`text-on-support-container`,`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`])},{intent:`accent`,design:`ghost`,class:(0,a.tw)([`text-on-accent-container`,`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`])},{intent:`success`,design:`ghost`,class:(0,a.tw)([`text-on-success-container`,`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`])},{intent:`alert`,design:`ghost`,class:(0,a.tw)([`text-on-alert-container`,`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`])},{intent:`danger`,design:`ghost`,class:(0,a.tw)([`text-on-error-container`,`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`])},{intent:`info`,design:`ghost`,class:(0,a.tw)([`text-on-info-container`,`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`])},{intent:`neutral`,design:`ghost`,class:(0,a.tw)([`text-on-neutral-container`,`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`])},{intent:`surface`,design:`ghost`,class:(0,a.tw)([`text-surface`,`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`])},{intent:`surfaceInverse`,design:`ghost`,class:(0,a.tw)([`text-surface-inverse`,`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`])}],c=[{intent:`main`,design:`outlined`,class:(0,a.tw)([`hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`text-main`])},{intent:`support`,design:`outlined`,class:(0,a.tw)([`hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,a.tw)([`hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`text-accent`])},{intent:`success`,design:`outlined`,class:(0,a.tw)([`hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,a.tw)([`hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`text-alert`])},{intent:`danger`,design:`outlined`,class:(0,a.tw)([`hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`text-error`])},{intent:`info`,design:`outlined`,class:(0,a.tw)([`hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`text-info`])},{intent:`neutral`,design:`outlined`,class:(0,a.tw)([`hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`text-neutral`])},{intent:`surface`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`text-surface`])},{intent:`surfaceInverse`,design:`outlined`,class:(0,a.tw)([`hover:bg-surface-inverse/dim-5`,`enabled:active:bg-surface-inverse/dim-5`,`focus-visible:bg-surface-inverse/dim-5`,`text-surface-inverse`])}],l=[{intent:`main`,design:`tinted`,class:(0,a.tw)([`bg-main-container`,`text-on-main-container`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`tinted`,class:(0,a.tw)([`bg-support-container`,`text-on-support-container`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`tinted`,class:(0,a.tw)([`bg-accent-container`,`text-on-accent-container`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`success`,design:`tinted`,class:(0,a.tw)([`bg-success-container`,`text-on-success-container`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`tinted`,class:(0,a.tw)([`bg-alert-container`,`text-on-alert-container`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`tinted`,class:(0,a.tw)([`bg-error-container`,`text-on-error-container`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`tinted`,class:(0,a.tw)([`bg-info-container`,`text-on-info-container`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`tinted`,class:(0,a.tw)([`bg-neutral-container`,`text-on-neutral-container`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`tinted`,class:(0,a.tw)([`bg-surface`,`text-on-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`tinted`,class:(0,a.tw)([`bg-surface-inverse`,`text-on-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],u=[{intent:`main`,design:`contrast`,class:(0,a.tw)([`text-on-main-contaier bg-surface`,`hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`])},{intent:`support`,design:`contrast`,class:(0,a.tw)([`text-on-support-container bg-surface`,`hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`])},{intent:`accent`,design:`contrast`,class:(0,a.tw)([`text-on-accent-container bg-surface`,`hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`])},{intent:`success`,design:`contrast`,class:(0,a.tw)([`text-on-success-container bg-surface`,`hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`])},{intent:`alert`,design:`contrast`,class:(0,a.tw)([`text-on-alert-container bg-surface`,`hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`])},{intent:`danger`,design:`contrast`,class:(0,a.tw)([`text-on-error-container bg-surface`,`hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`])},{intent:`info`,design:`contrast`,class:(0,a.tw)([`text-on-info-container bg-surface`,`hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`])},{intent:`neutral`,design:`contrast`,class:(0,a.tw)([`text-on-neutral-container bg-surface`,`hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`])},{intent:`surface`,design:`contrast`,class:(0,a.tw)([`text-on-surface bg-surface`,`hover:bg-surface-hovered`,`enabled:active:bg-surface-hovered`,`focus-visible:bg-surface-hovered`])},{intent:`surfaceInverse`,design:`contrast`,class:(0,a.tw)([`text-on-surface-inverse bg-surface-inverse`,`hover:bg-surface-inverse-hovered`,`enabled:active:bg-surface-inverse-hovered`,`focus-visible:bg-surface-inverse-hovered`])}],d=(0,n.cva)([`u-shadow-border-transition`,`box-border inline-flex items-center justify-center gap-md whitespace-nowrap`,`default:px-lg`,`text-body-1 font-bold`,`focus-visible:u-outline`],{variants:{design:(0,a.makeVariants)({filled:[],outlined:[`bg-transparent`,`border-sm`,`border-current`],tinted:[],ghost:[`default:-mx-md px-md hover:bg-main/dim-5`],contrast:[]}),underline:{true:[`underline`]},intent:(0,a.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]}),size:(0,a.makeVariants)({sm:[`min-w-sz-32`,`h-sz-32`],md:[`min-w-sz-44`,`h-sz-44`],lg:[`min-w-sz-56`,`h-sz-56`]}),shape:(0,a.makeVariants)({rounded:[`rounded-lg`],square:[`rounded-0`],pill:[`rounded-full`]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`],false:[`cursor-pointer`]}},compoundVariants:[...o,...c,...l,...s,...u],defaultVariants:{design:`filled`,intent:`main`,size:`md`,shape:`rounded`}}),f=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseOver`,`onMouseOut`,`onKeyDown`,`onKeyPress`,`onKeyUp`,`onSubmit`],p=({children:a,design:o=`filled`,disabled:s=!1,ariaDisabled:c=!1,intent:l=`main`,isLoading:u=!1,loadingLabel:p,loadingText:m,shape:h=`rounded`,size:g=`md`,asChild:_,className:v,underline:y=!1,ref:b,...x})=>{let S=_?e.Slot:`button`,C=!!s||!!c||u,w=!!s&&!c,T=(0,r.useMemo)(()=>{let e={};return C&&f.forEach(t=>e[t]=void 0),e},[C]),E={size:`current`,className:m?`inline-block`:`absolute`,...p&&{"aria-label":p}};return(0,i.jsx)(S,{"data-spark-component":`button`,...S===`button`&&{type:`button`},ref:b,className:d({className:v,design:o,disabled:C,intent:l,shape:h,size:g,underline:y}),disabled:w,"aria-disabled":C?!0:void 0,"aria-busy":u,"aria-live":u?`assertive`:`off`,...x,...T,children:e.wrapPolymorphicSlot(_,a,e=>u?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.t,{...E}),m,(0,i.jsx)(`div`,{"aria-hidden":!0,className:(0,n.cx)(`gap-md`,m?`hidden`:`inline-flex opacity-0`),children:e})]}):e)})};p.displayName=`Button`,Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
|
|
2
|
+
//# sourceMappingURL=button-B-sMnDc_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-CvvFH9fU.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 // 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: '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: '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: '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: '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 font-bold',\n 'focus-visible:u-outline',\n ],\n {\n variants: {\n /**\n * Main style of the button.\n *\n * - `filled`: Button will be plain.\n *\n * - `outlined`: Button will be transparent with an outline.\n *\n * - `tinted`: Button will be filled but using a lighter color scheme.\n *\n * - `ghost`: Button will look like a link. No borders, plain text.\n *\n * - `contrast`: Button will be surface filled. No borders, plain text.\n *\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n filled: [],\n outlined: ['bg-transparent', 'border-sm', 'border-current'],\n tinted: [],\n ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n contrast: [],\n }),\n underline: {\n true: ['underline'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n /**\n * Size of the button.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['min-w-sz-32', 'h-sz-32'],\n md: ['min-w-sz-44', 'h-sz-44'],\n lg: ['min-w-sz-56', 'h-sz-56'],\n }),\n /**\n * Shape of the button.\n */\n shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n rounded: ['rounded-lg'],\n square: ['rounded-0'],\n pill: ['rounded-full'],\n }),\n /**\n * Disable the button, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n false: ['cursor-pointer'],\n },\n },\n compoundVariants: [\n ...filledVariants,\n ...outlinedVariants,\n ...tintedVariants,\n ...ghostVariants,\n ...contrastVariants,\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'main',\n size: 'md',\n shape: 'rounded',\n },\n }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { 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 ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n DOMAttributes<HTMLButtonElement>,\n 'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseOver',\n 'onMouseOut',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onSubmit',\n]\n\nexport const Button = ({\n children,\n design = 'filled',\n disabled = false,\n intent = 'main',\n isLoading = false,\n loadingLabel,\n loadingText,\n shape = 'pill',\n size = 'md',\n asChild,\n className,\n underline = false,\n ref,\n ...others\n}: ButtonProps) => {\n const Component = asChild ? Slot : 'button'\n\n const shouldNotInteract = !!disabled || isLoading\n\n const disabledEventHandlers = useMemo(() => {\n const result: Partial<Record<DOMAttributesEventHandler, () => void>> = {}\n\n if (shouldNotInteract) {\n blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))\n }\n\n return result\n }, [shouldNotInteract])\n\n const spinnerProps = {\n size: 'current' as SpinnerProps['size'],\n className: loadingText ? 'inline-block' : 'absolute',\n ...(loadingLabel && { 'aria-label': loadingLabel }),\n }\n\n return (\n <Component\n data-spark-component=\"button\"\n {...(Component === 'button' && { type: 'button' })}\n ref={ref}\n className={buttonStyles({\n className,\n design,\n disabled: shouldNotInteract,\n intent,\n shape,\n size,\n underline,\n })}\n disabled={!!disabled}\n aria-busy={isLoading}\n aria-live={isLoading ? 'assertive' : 'off'}\n {...others}\n {...disabledEventHandlers}\n >\n {wrapPolymorphicSlot(asChild, children, slotted =>\n isLoading ? (\n <>\n <Spinner {...spinnerProps} />\n {loadingText}\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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"}
|
|
1
|
+
{"version":3,"file":"button-B-sMnDc_.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 // 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: '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: '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: '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: '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 font-bold',\n 'focus-visible:u-outline',\n ],\n {\n variants: {\n /**\n * Main style of the button.\n *\n * - `filled`: Button will be plain.\n *\n * - `outlined`: Button will be transparent with an outline.\n *\n * - `tinted`: Button will be filled but using a lighter color scheme.\n *\n * - `ghost`: Button will look like a link. No borders, plain text.\n *\n * - `contrast`: Button will be surface filled. No borders, plain text.\n *\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n filled: [],\n outlined: ['bg-transparent', 'border-sm', 'border-current'],\n tinted: [],\n ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n contrast: [],\n }),\n underline: {\n true: ['underline'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n /**\n * Size of the button.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['min-w-sz-32', 'h-sz-32'],\n md: ['min-w-sz-44', 'h-sz-44'],\n lg: ['min-w-sz-56', 'h-sz-56'],\n }),\n /**\n * Shape of the button.\n */\n shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n rounded: ['rounded-lg'],\n square: ['rounded-0'],\n pill: ['rounded-full'],\n }),\n /**\n * Disable the button, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n false: ['cursor-pointer'],\n },\n },\n compoundVariants: [\n ...filledVariants,\n ...outlinedVariants,\n ...tintedVariants,\n ...ghostVariants,\n ...contrastVariants,\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'main',\n size: 'md',\n shape: 'rounded',\n },\n }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { 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\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, () => void>> = {}\n\n if (shouldNotInteract) {\n blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))\n }\n\n return result\n }, [shouldNotInteract])\n\n const spinnerProps = {\n size: 'current' as SpinnerProps['size'],\n className: loadingText ? 'inline-block' : 'absolute',\n ...(loadingLabel && { 'aria-label': loadingLabel }),\n }\n\n return (\n <Component\n data-spark-component=\"button\"\n {...(Component === 'button' && { type: 'button' })}\n ref={ref}\n className={buttonStyles({\n className,\n design,\n disabled: shouldNotInteract,\n intent,\n shape,\n size,\n underline,\n })}\n disabled={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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"}
|
|
@@ -598,39 +598,40 @@ var d = [
|
|
|
598
598
|
"onKeyPress",
|
|
599
599
|
"onKeyUp",
|
|
600
600
|
"onSubmit"
|
|
601
|
-
], v = ({ children: r, design: l = "filled", disabled: u = !1,
|
|
602
|
-
let
|
|
601
|
+
], v = ({ children: r, design: l = "filled", disabled: u = !1, ariaDisabled: d = !1, intent: f = "main", isLoading: p = !1, loadingLabel: m, loadingText: h, shape: v = "rounded", size: y = "md", asChild: b, className: x, underline: S = !1, ref: C, ...w }) => {
|
|
602
|
+
let T = b ? e : "button", E = !!u || !!d || p, D = !!u && !d, O = a(() => {
|
|
603
603
|
let e = {};
|
|
604
|
-
return
|
|
605
|
-
}, [
|
|
604
|
+
return E && _.forEach((t) => e[t] = void 0), e;
|
|
605
|
+
}, [E]), k = {
|
|
606
606
|
size: "current",
|
|
607
|
-
className:
|
|
608
|
-
...
|
|
607
|
+
className: h ? "inline-block" : "absolute",
|
|
608
|
+
...m && { "aria-label": m }
|
|
609
609
|
};
|
|
610
|
-
return /* @__PURE__ */ s(
|
|
610
|
+
return /* @__PURE__ */ s(T, {
|
|
611
611
|
"data-spark-component": "button",
|
|
612
|
-
...
|
|
613
|
-
ref:
|
|
612
|
+
...T === "button" && { type: "button" },
|
|
613
|
+
ref: C,
|
|
614
614
|
className: g({
|
|
615
|
-
className:
|
|
615
|
+
className: x,
|
|
616
616
|
design: l,
|
|
617
|
-
disabled:
|
|
618
|
-
intent:
|
|
619
|
-
shape:
|
|
620
|
-
size:
|
|
621
|
-
underline:
|
|
617
|
+
disabled: E,
|
|
618
|
+
intent: f,
|
|
619
|
+
shape: v,
|
|
620
|
+
size: y,
|
|
621
|
+
underline: S
|
|
622
622
|
}),
|
|
623
|
-
disabled:
|
|
624
|
-
"aria-
|
|
625
|
-
"aria-
|
|
626
|
-
|
|
627
|
-
...
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
623
|
+
disabled: D,
|
|
624
|
+
"aria-disabled": E ? !0 : void 0,
|
|
625
|
+
"aria-busy": p,
|
|
626
|
+
"aria-live": p ? "assertive" : "off",
|
|
627
|
+
...w,
|
|
628
|
+
...O,
|
|
629
|
+
children: t(b, r, (e) => p ? /* @__PURE__ */ c(o, { children: [
|
|
630
|
+
/* @__PURE__ */ s(n, { ...k }),
|
|
631
|
+
h,
|
|
631
632
|
/* @__PURE__ */ s("div", {
|
|
632
633
|
"aria-hidden": !0,
|
|
633
|
-
className: i("gap-md",
|
|
634
|
+
className: i("gap-md", h ? "hidden" : "inline-flex opacity-0"),
|
|
634
635
|
children: e
|
|
635
636
|
})
|
|
636
637
|
] }) : e)
|
|
@@ -640,4 +641,4 @@ v.displayName = "Button";
|
|
|
640
641
|
//#endregion
|
|
641
642
|
export { g as n, v as t };
|
|
642
643
|
|
|
643
|
-
//# sourceMappingURL=button-
|
|
644
|
+
//# sourceMappingURL=button-C6nlNPdv.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-CaQkq3cR.mjs","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 // 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: '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: '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: '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: '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 font-bold',\n 'focus-visible:u-outline',\n ],\n {\n variants: {\n /**\n * Main style of the button.\n *\n * - `filled`: Button will be plain.\n *\n * - `outlined`: Button will be transparent with an outline.\n *\n * - `tinted`: Button will be filled but using a lighter color scheme.\n *\n * - `ghost`: Button will look like a link. No borders, plain text.\n *\n * - `contrast`: Button will be surface filled. No borders, plain text.\n *\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n filled: [],\n outlined: ['bg-transparent', 'border-sm', 'border-current'],\n tinted: [],\n ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n contrast: [],\n }),\n underline: {\n true: ['underline'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n /**\n * Size of the button.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['min-w-sz-32', 'h-sz-32'],\n md: ['min-w-sz-44', 'h-sz-44'],\n lg: ['min-w-sz-56', 'h-sz-56'],\n }),\n /**\n * Shape of the button.\n */\n shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n rounded: ['rounded-lg'],\n square: ['rounded-0'],\n pill: ['rounded-full'],\n }),\n /**\n * Disable the button, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n false: ['cursor-pointer'],\n },\n },\n compoundVariants: [\n ...filledVariants,\n ...outlinedVariants,\n ...tintedVariants,\n ...ghostVariants,\n ...contrastVariants,\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'main',\n size: 'md',\n shape: 'rounded',\n },\n }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { 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 ref?: Ref<HTMLButtonElement>\n}\n\ntype DOMAttributesEventHandler = keyof Omit<\n DOMAttributes<HTMLButtonElement>,\n 'children' | 'dangerouslySetInnerHTML'\n>\n\nconst blockedEventHandlers: DOMAttributesEventHandler[] = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseOver',\n 'onMouseOut',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onSubmit',\n]\n\nexport const Button = ({\n children,\n design = 'filled',\n disabled = false,\n intent = 'main',\n isLoading = false,\n loadingLabel,\n loadingText,\n shape = 'pill',\n size = 'md',\n asChild,\n className,\n underline = false,\n ref,\n ...others\n}: ButtonProps) => {\n const Component = asChild ? Slot : 'button'\n\n const shouldNotInteract = !!disabled || isLoading\n\n const disabledEventHandlers = useMemo(() => {\n const result: Partial<Record<DOMAttributesEventHandler, () => void>> = {}\n\n if (shouldNotInteract) {\n blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))\n }\n\n return result\n }, [shouldNotInteract])\n\n const spinnerProps = {\n size: 'current' as SpinnerProps['size'],\n className: loadingText ? 'inline-block' : 'absolute',\n ...(loadingLabel && { 'aria-label': loadingLabel }),\n }\n\n return (\n <Component\n data-spark-component=\"button\"\n {...(Component === 'button' && { type: 'button' })}\n ref={ref}\n className={buttonStyles({\n className,\n design,\n disabled: shouldNotInteract,\n intent,\n shape,\n size,\n underline,\n })}\n disabled={!!disabled}\n aria-busy={isLoading}\n aria-live={isLoading ? 'assertive' : 'off'}\n {...others}\n {...disabledEventHandlers}\n >\n {wrapPolymorphicSlot(asChild, children, slotted =>\n isLoading ? (\n <>\n <Spinner {...spinnerProps} />\n {loadingText}\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":";;;;;;;AAEA,IAAa,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECpHY,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECrGY,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECrGY,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,EC/GY,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA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"}
|
|
1
|
+
{"version":3,"file":"button-C6nlNPdv.mjs","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 // 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: '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: '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: '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: '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 font-bold',\n 'focus-visible:u-outline',\n ],\n {\n variants: {\n /**\n * Main style of the button.\n *\n * - `filled`: Button will be plain.\n *\n * - `outlined`: Button will be transparent with an outline.\n *\n * - `tinted`: Button will be filled but using a lighter color scheme.\n *\n * - `ghost`: Button will look like a link. No borders, plain text.\n *\n * - `contrast`: Button will be surface filled. No borders, plain text.\n *\n */\n design: makeVariants<'design', ['filled', 'outlined', 'tinted', 'ghost', 'contrast']>({\n filled: [],\n outlined: ['bg-transparent', 'border-sm', 'border-current'],\n tinted: [],\n ghost: ['default:-mx-md px-md hover:bg-main/dim-5'],\n contrast: [],\n }),\n underline: {\n true: ['underline'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n /**\n * Size of the button.\n */\n size: makeVariants<'size', ['sm', 'md', 'lg']>({\n sm: ['min-w-sz-32', 'h-sz-32'],\n md: ['min-w-sz-44', 'h-sz-44'],\n lg: ['min-w-sz-56', 'h-sz-56'],\n }),\n /**\n * Shape of the button.\n */\n shape: makeVariants<'shape', ['rounded', 'square', 'pill']>({\n rounded: ['rounded-lg'],\n square: ['rounded-0'],\n pill: ['rounded-full'],\n }),\n /**\n * Disable the button, preventing user interaction and adding opacity.\n */\n disabled: {\n true: ['cursor-not-allowed', 'opacity-dim-3'],\n false: ['cursor-pointer'],\n },\n },\n compoundVariants: [\n ...filledVariants,\n ...outlinedVariants,\n ...tintedVariants,\n ...ghostVariants,\n ...contrastVariants,\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'main',\n size: 'md',\n shape: 'rounded',\n },\n }\n)\n\nexport type ButtonStylesProps = VariantProps<typeof buttonStyles>\n","import { 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\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, () => void>> = {}\n\n if (shouldNotInteract) {\n blockedEventHandlers.forEach(eventHandler => (result[eventHandler] = undefined))\n }\n\n return result\n }, [shouldNotInteract])\n\n const spinnerProps = {\n size: 'current' as SpinnerProps['size'],\n className: loadingText ? 'inline-block' : 'absolute',\n ...(loadingLabel && { 'aria-label': loadingLabel }),\n }\n\n return (\n <Component\n data-spark-component=\"button\"\n {...(Component === 'button' && { type: 'button' })}\n ref={ref}\n className={buttonStyles({\n className,\n design,\n disabled: shouldNotInteract,\n intent,\n shape,\n size,\n underline,\n })}\n disabled={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":";;;;;;;AAEA,IAAa,IAAiB;CAE5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CAED;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECpHY,IAAgB;CAC3B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECrGY,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,ECrGY,IAAiB;CAC5B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACA;GACD,CAAC;EACH;CACF,EC/GY,IAAmB;CAC9B;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA;GACA;GACA;GACD,CAAC;EACH;CACD;EACE,QAAQ;EACR,QAAQ;EACR,OAAO,EAAG;GACR;GACA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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-D1Lg6gvI.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.Provider,{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})=>{let o=C();return(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...o.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);(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)});let d=l.getIndicatorProps({index:a});return(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...d,"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})=>{let a=C();return(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...a.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`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.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.Provider,{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})=>{let o=C();return(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...o.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);(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)});let d=l.getIndicatorProps({index:a});return(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...d,"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})=>{let a=C();return(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...a.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
|
package/dist/carousel/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "../icon-D05Uqh8_.mjs";
|
|
2
|
-
import { t } from "../icon-button-
|
|
2
|
+
import { t } from "../icon-button-DpucUC_L.mjs";
|
|
3
3
|
import { cx as n } from "class-variance-authority";
|
|
4
4
|
import { Children as r, cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
|
|
5
5
|
import { Fragment as h, jsx as g } from "react/jsx-runtime";
|