@spark-ui/components 17.4.2 → 17.5.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/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.js.map +1 -1
- package/dist/avatar/index.mjs +8 -2
- package/dist/avatar/index.mjs.map +1 -1
- package/dist/badge/index.js.map +1 -1
- package/dist/badge/index.mjs.map +1 -1
- package/dist/breadcrumb/index.js.map +1 -1
- package/dist/breadcrumb/index.mjs.map +1 -1
- package/dist/button-B-sMnDc_.js.map +1 -1
- package/dist/button-C6nlNPdv.mjs.map +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/carousel/index.js.map +1 -1
- package/dist/carousel/index.mjs.map +1 -1
- package/dist/checkbox-DjwbAH09.js.map +1 -1
- package/dist/checkbox-xsURzANi.mjs.map +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs.map +1 -1
- package/dist/circular-meter/index.js.map +1 -1
- package/dist/circular-meter/index.mjs.map +1 -1
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs.map +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js.map +1 -1
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/divider/index.js.map +1 -1
- package/dist/divider/index.mjs.map +1 -1
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js.map +1 -1
- package/dist/file-upload/index.mjs.map +1 -1
- package/dist/form-field-81wzFxM0.js.map +1 -1
- package/dist/form-field-GTAuK_nO.mjs.map +1 -1
- package/dist/icon-CRPcdgYp.js.map +1 -1
- package/dist/icon-D05Uqh8_.mjs.map +1 -1
- package/dist/icon-button-CYz_Fitz.js.map +1 -1
- package/dist/icon-button-DpucUC_L.mjs.map +1 -1
- package/dist/input-BUSYZ_VO.js.map +1 -1
- package/dist/input-CiWFuTs_.mjs.map +1 -1
- package/dist/input-otp/index.js.map +1 -1
- package/dist/input-otp/index.mjs.map +1 -1
- package/dist/kbd/index.js.map +1 -1
- package/dist/kbd/index.mjs.map +1 -1
- package/dist/label-BCSEss4U.js.map +1 -1
- package/dist/label-DDBRKLUX.mjs.map +1 -1
- package/dist/link-box/index.js.map +1 -1
- package/dist/link-box/index.mjs.map +1 -1
- package/dist/meter/index.js.map +1 -1
- package/dist/meter/index.mjs.map +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover-CrKp_TKk.js.map +1 -1
- package/dist/popover-DsBY8eYl.mjs.map +1 -1
- package/dist/portal/index.js.map +1 -1
- package/dist/portal/index.mjs.map +1 -1
- package/dist/progress-BjqJSRnK.js.map +1 -1
- package/dist/progress-C3w4PmxY.mjs.map +1 -1
- package/dist/progress-tracker/index.js.map +1 -1
- package/dist/progress-tracker/index.mjs.map +1 -1
- package/dist/radio-group/index.js.map +1 -1
- package/dist/radio-group/index.mjs.map +1 -1
- package/dist/rating/index.js.map +1 -1
- package/dist/rating/index.mjs.map +1 -1
- package/dist/rating-display/index.js.map +1 -1
- package/dist/rating-display/index.mjs.map +1 -1
- package/dist/scrolling-list/index.js.map +1 -1
- package/dist/scrolling-list/index.mjs.map +1 -1
- package/dist/segmented-control/index.js.map +1 -1
- package/dist/segmented-control/index.mjs.map +1 -1
- package/dist/segmented-gauge/index.js.map +1 -1
- package/dist/segmented-gauge/index.mjs.map +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/index.js.map +1 -1
- package/dist/skeleton/index.mjs.map +1 -1
- package/dist/slider/index.js.map +1 -1
- package/dist/slider/index.mjs.map +1 -1
- package/dist/slot/index.js.map +1 -1
- package/dist/slot/index.mjs.map +1 -1
- package/dist/spinner-DFUoYvmm.js.map +1 -1
- package/dist/spinner-DULLiM6a.mjs.map +1 -1
- package/dist/src/accordion/index.d.mts +3 -0
- package/dist/src/accordion/index.d.ts +3 -0
- package/dist/src/alert-dialog/index.d.mts +3 -0
- package/dist/src/alert-dialog/index.d.ts +3 -0
- package/dist/src/avatar/index.d.mts +7 -5
- package/dist/src/avatar/index.d.ts +7 -5
- package/dist/src/badge/Badge.d.ts +3 -0
- package/dist/src/breadcrumb/index.d.mts +3 -0
- package/dist/src/breadcrumb/index.d.ts +3 -0
- package/dist/src/button/Button.d.ts +3 -0
- package/dist/src/card/index.d.mts +3 -0
- package/dist/src/card/index.d.ts +3 -0
- package/dist/src/carousel/index.d.mts +3 -0
- package/dist/src/carousel/index.d.ts +3 -0
- package/dist/src/checkbox/Checkbox.d.ts +3 -0
- package/dist/src/checkbox/CheckboxGroup.d.ts +4 -0
- package/dist/src/chip/index.d.mts +3 -0
- package/dist/src/chip/index.d.ts +3 -0
- package/dist/src/circular-meter/index.d.mts +3 -0
- package/dist/src/circular-meter/index.d.ts +3 -0
- package/dist/src/collapsible/index.d.mts +3 -0
- package/dist/src/collapsible/index.d.ts +3 -0
- package/dist/src/combobox/index.d.mts +3 -0
- package/dist/src/combobox/index.d.ts +3 -0
- package/dist/src/dialog/index.d.mts +3 -0
- package/dist/src/dialog/index.d.ts +3 -0
- package/dist/src/divider/index.d.mts +3 -0
- package/dist/src/divider/index.d.ts +3 -0
- package/dist/src/drawer/index.d.mts +3 -0
- package/dist/src/drawer/index.d.ts +3 -0
- package/dist/src/dropdown/index.d.mts +3 -0
- package/dist/src/dropdown/index.d.ts +3 -0
- package/dist/src/file-upload/index.d.mts +3 -0
- package/dist/src/file-upload/index.d.ts +3 -0
- package/dist/src/form-field/index.d.mts +3 -0
- package/dist/src/form-field/index.d.ts +3 -0
- package/dist/src/icon/Icon.d.ts +3 -0
- package/dist/src/icon-button/IconButton.d.ts +3 -0
- package/dist/src/input/Input.d.ts +3 -0
- package/dist/src/input/index.d.mts +4 -0
- package/dist/src/input/index.d.ts +4 -0
- package/dist/src/input-otp/index.d.mts +3 -0
- package/dist/src/input-otp/index.d.ts +3 -0
- package/dist/src/kbd/Kbd.d.ts +3 -0
- package/dist/src/label/index.d.mts +3 -0
- package/dist/src/label/index.d.ts +3 -0
- package/dist/src/link-box/index.d.mts +3 -0
- package/dist/src/link-box/index.d.ts +3 -0
- package/dist/src/meter/index.d.mts +3 -0
- package/dist/src/meter/index.d.ts +3 -0
- package/dist/src/pagination/index.d.mts +3 -0
- package/dist/src/pagination/index.d.ts +3 -0
- package/dist/src/popover/index.d.mts +3 -0
- package/dist/src/popover/index.d.ts +3 -0
- package/dist/src/portal/Portal.d.ts +3 -0
- package/dist/src/progress/index.d.mts +3 -0
- package/dist/src/progress/index.d.ts +3 -0
- package/dist/src/progress-tracker/index.d.mts +3 -0
- package/dist/src/progress-tracker/index.d.ts +3 -0
- package/dist/src/radio-group/index.d.mts +3 -0
- package/dist/src/radio-group/index.d.ts +3 -0
- package/dist/src/rating/Rating.d.ts +3 -0
- package/dist/src/rating-display/index.d.mts +3 -0
- package/dist/src/rating-display/index.d.ts +3 -0
- package/dist/src/scrolling-list/index.d.mts +3 -0
- package/dist/src/scrolling-list/index.d.ts +3 -0
- package/dist/src/segmented-control/index.d.mts +3 -0
- package/dist/src/segmented-control/index.d.ts +3 -0
- package/dist/src/segmented-gauge/index.d.mts +3 -0
- package/dist/src/segmented-gauge/index.d.ts +3 -0
- package/dist/src/select/index.d.mts +3 -0
- package/dist/src/select/index.d.ts +3 -0
- package/dist/src/skeleton/index.d.mts +3 -0
- package/dist/src/skeleton/index.d.ts +3 -0
- package/dist/src/slider/index.d.mts +3 -0
- package/dist/src/slider/index.d.ts +3 -0
- package/dist/src/slot/Slot.d.ts +4 -0
- package/dist/src/spinner/Spinner.d.ts +3 -0
- package/dist/src/stepper/index.d.mts +3 -0
- package/dist/src/stepper/index.d.ts +3 -0
- package/dist/src/switch/Switch.d.ts +3 -0
- package/dist/src/table/index.d.mts +6 -2
- package/dist/src/table/index.d.ts +6 -2
- package/dist/src/table/internal/TableRootWrapper.d.ts +3 -0
- package/dist/src/tabs/index.d.mts +3 -0
- package/dist/src/tabs/index.d.ts +3 -0
- package/dist/src/tag/Tag.d.ts +3 -0
- package/dist/src/text-link/TextLink.d.ts +3 -0
- package/dist/src/textarea/Textarea.d.ts +3 -0
- package/dist/src/textarea/index.d.mts +4 -0
- package/dist/src/textarea/index.d.ts +4 -0
- package/dist/src/toast/index.d.mts +3 -0
- package/dist/src/toast/index.d.ts +3 -0
- package/dist/src/visually-hidden/VisuallyHidden.d.ts +3 -0
- package/dist/stepper/index.js.map +1 -1
- package/dist/stepper/index.mjs.map +1 -1
- package/dist/switch/index.js.map +1 -1
- package/dist/switch/index.mjs.map +1 -1
- package/dist/table/index.js +1 -1
- package/dist/table/index.js.map +1 -1
- package/dist/table/index.mjs +1 -1
- package/dist/table/index.mjs.map +1 -1
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs.map +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.js.map +1 -1
- package/dist/text-link/index.mjs.map +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs.map +1 -1
- package/dist/visually-hidden/index.js.map +1 -1
- package/dist/visually-hidden/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/badge/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n {\n variants: {\n /**\n * Visual color appearance of the component.\n * @default 'danger'\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: ['bg-main', 'text-on-main', 'border-surface'],\n support: ['bg-support', 'text-on-support', 'border-surface'],\n accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n success: ['bg-success', 'text-on-success', 'border-surface'],\n alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n danger: ['bg-error', 'text-on-error', 'border-surface'],\n info: ['bg-info', 'text-on-info', 'border-surface'],\n neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n }),\n /**\n * Size of the component.\n * @default 'md'\n */\n size: makeVariants<'size', ['sm', 'md']>({\n sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n }),\n /**\n * Type of the component.\n * @default 'relative'\n */\n type: {\n relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n standalone: [],\n },\n },\n defaultVariants: {\n intent: 'danger',\n size: 'md',\n type: 'relative',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n /**\n * Numeric value used as indicator inside the component.\n */\n count?: number\n /**\n * Maximum numeric value to be dispayed as a count value.\n * @default 99\n */\n overflowCount?: number\n /**\n * A custom label for accessibility purposes. It can also be defined as a builder function\n * to handle dynamic inner data to create a custom label.\n */\n 'aria-label'?:\n | string\n | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n /**\n * Describes the way the component is displayed: relative to another element or just standalone.\n * @default 'relative'\n */\n type?: 'relative' | 'standalone'\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n intent = 'danger',\n size = 'md',\n type = 'relative',\n count,\n overflowCount = 99,\n 'aria-label': label,\n className,\n ...others\n}: BadgeItemProps) => {\n const hasOverflow = count && count > overflowCount\n const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n const props = { ...others, 'aria-label': ariaLabel }\n\n return (\n <span\n data-spark-component=\"badge\"\n role=\"status\"\n className={styles({\n intent,\n size,\n type,\n className,\n })}\n {...props}\n >\n {hasOverflow ? `${overflowCount}+` : count}\n </span>\n )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n const isStandalone = !children\n\n return isStandalone ? (\n <BadgeItem type=\"standalone\" {...props} />\n ) : (\n <div className=\"relative inline-flex\">\n {children}\n <BadgeItem {...props} />\n </div>\n )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":";;;;AAGA,IAAa,IAAS,EACpB;CAAC;CAAqB;CAAa;CAAyB;CAA2B,EACvF;CACE,UAAU;EAKR,QAAQ,EAGN;GACA,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,QAAQ;IAAC;IAAa;IAAkB;IAAiB;GACzD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,OAAO;IAAC;IAAY;IAAiB;IAAiB;GACtD,QAAQ;IAAC;IAAY;IAAiB;IAAiB;GACvD,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC7D,CAAC;EAKF,MAAM,EAAmC;GACvC,IAAI;IAAC;IAAc;IAAqD;IAAkB;GAC1F,IAAI;IAAC;IAAgB;IAAe;IAAmB;GACxD,CAAC;EAKF,MAAM;GACJ,UAAU,CAAC,8BAA8B,mCAAmC;GAC5E,YAAY,EAAE;GACf;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,MAAM;EACP;CACF,CACF,EClBY,KAAa,EACxB,YAAS,UACT,UAAO,MACP,UAAO,YACP,UACA,mBAAgB,IAChB,cAAc,GACd,cACA,GAAG,QACiB;CACpB,IAAM,IAAc,KAAS,IAAQ,GAC/B,IAAY,OAAO,KAAU,aAAa,EAAM;EAAE;EAAO;EAAe,CAAC,GAAG,GAC5E,IAAQ;EAAE,GAAG;EAAQ,cAAc;EAAW;AAEpD,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,MAAK;EACL,WAAW,EAAO;GAChB;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;YAEH,IAAc,GAAG,EAAc,KAAK;EAChC,CAAA;;AAIX,EAAU,cAAc;;;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/badge/BadgeItem.styles.tsx","../../src/badge/BadgeItem.tsx","../../src/badge/Badge.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n ['inline-flex h-fit', 'empty:p-0', 'text-center font-bold', 'rounded-full box-content'],\n {\n variants: {\n /**\n * Visual color appearance of the component.\n * @default 'danger'\n */\n intent: makeVariants<\n 'intent',\n ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n >({\n main: ['bg-main', 'text-on-main', 'border-surface'],\n support: ['bg-support', 'text-on-support', 'border-surface'],\n accent: ['bg-accent', 'text-on-accent', 'border-surface'],\n success: ['bg-success', 'text-on-success', 'border-surface'],\n alert: ['bg-alert', 'text-on-alert', 'border-surface'],\n danger: ['bg-error', 'text-on-error', 'border-surface'],\n info: ['bg-info', 'text-on-info', 'border-surface'],\n neutral: ['bg-neutral', 'text-on-neutral', 'border-surface'],\n surface: ['bg-surface', 'text-on-surface', 'border-surface'],\n }),\n /**\n * Size of the component.\n * @default 'md'\n */\n size: makeVariants<'size', ['sm', 'md']>({\n sm: ['text-small', 'px-[var(--spacing-sz-6)] py-[var(--spacing-sz-2)]', 'empty:size-sz-8'],\n md: ['text-caption', 'px-md py-sm', 'empty:size-sz-16'],\n }),\n /**\n * Type of the component.\n * @default 'relative'\n */\n type: {\n relative: ['absolute right-0 border-md', 'translate-x-1/2 -translate-y-1/2'],\n standalone: [],\n },\n },\n defaultVariants: {\n intent: 'danger',\n size: 'md',\n type: 'relative',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { HTMLAttributes, Ref } from 'react'\n\nimport { styles, type StylesProps } from './BadgeItem.styles'\n\nexport interface BadgeItemProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label'>, StylesProps {\n /**\n * Numeric value used as indicator inside the component.\n */\n count?: number\n /**\n * Maximum numeric value to be dispayed as a count value.\n * @default 99\n */\n overflowCount?: number\n /**\n * A custom label for accessibility purposes. It can also be defined as a builder function\n * to handle dynamic inner data to create a custom label.\n */\n 'aria-label'?:\n | string\n | (({ count, overflowCount }: { count?: number; overflowCount?: number }) => string)\n /**\n * Describes the way the component is displayed: relative to another element or just standalone.\n * @default 'relative'\n */\n type?: 'relative' | 'standalone'\n ref?: Ref<HTMLSpanElement>\n}\n\nexport const BadgeItem = ({\n intent = 'danger',\n size = 'md',\n type = 'relative',\n count,\n overflowCount = 99,\n 'aria-label': label,\n className,\n ...others\n}: BadgeItemProps) => {\n const hasOverflow = count && count > overflowCount\n const ariaLabel = typeof label === 'function' ? label({ count, overflowCount }) : label\n const props = { ...others, 'aria-label': ariaLabel }\n\n return (\n <span\n data-spark-component=\"badge\"\n role=\"status\"\n className={styles({\n intent,\n size,\n type,\n className,\n })}\n {...props}\n >\n {hasOverflow ? `${overflowCount}+` : count}\n </span>\n )\n}\n\nBadgeItem.displayName = 'BadgeItem'\n","import { PropsWithChildren, Ref } from 'react'\n\nimport { BadgeItem, BadgeItemProps } from './BadgeItem'\n\nexport type BadgeProps = PropsWithChildren<Omit<BadgeItemProps, 'type'>> & {\n ref?: Ref<HTMLElement>\n}\n\n/**\n * A visual indicator that displays a count or status, typically positioned on top of another element.\n */\nexport const Badge = ({ children, ...props }: BadgeProps) => {\n const isStandalone = !children\n\n return isStandalone ? (\n <BadgeItem type=\"standalone\" {...props} />\n ) : (\n <div className=\"relative inline-flex\">\n {children}\n <BadgeItem {...props} />\n </div>\n )\n}\n\nBadge.displayName = 'Badge'\n"],"mappings":";;;;AAGA,IAAa,IAAS,EACpB;CAAC;CAAqB;CAAa;CAAyB;CAA2B,EACvF;CACE,UAAU;EAKR,QAAQ,EAGN;GACA,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,QAAQ;IAAC;IAAa;IAAkB;IAAiB;GACzD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,OAAO;IAAC;IAAY;IAAiB;IAAiB;GACtD,QAAQ;IAAC;IAAY;IAAiB;IAAiB;GACvD,MAAM;IAAC;IAAW;IAAgB;IAAiB;GACnD,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC5D,SAAS;IAAC;IAAc;IAAmB;IAAiB;GAC7D,CAAC;EAKF,MAAM,EAAmC;GACvC,IAAI;IAAC;IAAc;IAAqD;IAAkB;GAC1F,IAAI;IAAC;IAAgB;IAAe;IAAmB;GACxD,CAAC;EAKF,MAAM;GACJ,UAAU,CAAC,8BAA8B,mCAAmC;GAC5E,YAAY,EAAE;GACf;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,MAAM;EACN,MAAM;EACP;CACF,CACF,EClBY,KAAa,EACxB,YAAS,UACT,UAAO,MACP,UAAO,YACP,UACA,mBAAgB,IAChB,cAAc,GACd,cACA,GAAG,QACiB;CACpB,IAAM,IAAc,KAAS,IAAQ,GAC/B,IAAY,OAAO,KAAU,aAAa,EAAM;EAAE;EAAO;EAAe,CAAC,GAAG,GAC5E,IAAQ;EAAE,GAAG;EAAQ,cAAc;EAAW;AAEpD,QACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,MAAK;EACL,WAAW,EAAO;GAChB;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;YAEH,IAAc,GAAG,EAAc,KAAK;EAChC,CAAA;;AAIX,EAAU,cAAc;;;AClDxB,IAAa,KAAS,EAAE,aAAU,GAAG,QACb,IAKpB,kBAAC,OAAD;CAAK,WAAU;WAAf,CACG,GACD,kBAAC,GAAD,EAAW,GAAI,GAAS,CAAA,CACpB;KALN,kBAAC,GAAD;CAAW,MAAK;CAAa,GAAI;CAAS,CAAA;AAS9C,EAAM,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n className?: string\n ['aria-label']: string\n ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n className,\n 'aria-label': ariaLabel,\n ref,\n ...rest\n}: BreadcrumbProps) => {\n return (\n <nav\n data-spark-component=\"breadcrumb\"\n ref={ref}\n aria-label={ariaLabel}\n className={cx('text-caption text-neutral', className)}\n >\n <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n </nav>\n )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const CurrentPage = ({\n asChild = false,\n className,\n children,\n ...rest\n}: CurrentPageProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"breadcrumb-current-page\"\n role=\"link\"\n aria-disabled\n aria-current=\"page\"\n className={cx(\n 'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ className, ...rest }: ItemProps) => {\n return (\n <li\n data-spark-component=\"breadcrumb-item\"\n className={cx('min-w-none gap-sm inline-flex items-center', className)}\n {...rest}\n />\n )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n href?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const Link = ({\n asChild = false,\n className,\n bold = true,\n intent = 'current',\n underline = true,\n href,\n ref,\n ...rest\n}: LinkProps) => {\n const Component = asChild ? Slot : TextLink\n\n return (\n <Component\n data-spark-component=\"breadcrumb-link\"\n href={href}\n ref={ref}\n className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n bold={bold}\n intent={intent}\n underline={underline}\n {...rest}\n />\n )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Separator = ({\n asChild = false,\n className,\n children,\n ref,\n ...rest\n}: SeparatorProps) => {\n const Component = asChild ? Slot : 'li'\n\n return (\n <Component\n role=\"presentation\"\n aria-hidden\n data-spark-component=\"breadcrumb-separator\"\n ref={ref}\n className={cx('gap-sm inline-flex items-center', className)}\n {...rest}\n >\n {children ?? (\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n )}\n </Component>\n )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\nexport const Breadcrumb: typeof Root & {\n Item: typeof Item\n Link: typeof Link\n CurrentPage: typeof CurrentPage\n Separator: typeof Separator\n} = Object.assign(Root, {\n Item,\n Link,\n CurrentPage,\n Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":"oUASA,IAAa,GAAc,CACzB,YACA,aAAc,EACd,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,aAChB,MACL,aAAY,EACZ,WAAA,EAAA,EAAA,IAAc,4BAA6B,EAAU,WAErD,EAAA,EAAA,KAAC,KAAD,CAAI,WAAA,EAAA,EAAA,IAAc,iDAAiD,CAAE,GAAI,EAAQ,CAAA,CAC7E,CAAA,CAIV,EAAW,YAAc,wBCfzB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,uBAAqB,0BACrB,KAAK,OACL,gBAAA,GACA,eAAa,OACb,WAAA,EAAA,EAAA,IACE,iFACA,EACD,CACD,GAAI,EAEH,WACS,CAAA,CAIhB,EAAY,YAAc,yBC7B1B,IAAa,GAAQ,CAAE,YAAW,GAAG,MAEjC,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,kBACrB,WAAA,EAAA,EAAA,IAAc,6CAA8C,EAAU,CACtE,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBCLnB,IAAa,GAAQ,CACnB,UAAU,GACV,YACA,OAAO,GACP,SAAS,UACT,YAAY,GACZ,OACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,EAAA,SAGjC,CACE,uBAAqB,kBACf,OACD,MACL,WAAA,EAAA,EAAA,IAAc,0DAA2D,EAAU,CAC7E,OACE,SACG,YACX,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBC1BnB,IAAa,GAAa,CACxB,UAAU,GACV,YACA,WACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACE,KAAK,eACL,cAAA,GACA,uBAAqB,uBAChB,MACL,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACjB,CAAA,CAEC,CAAA,CAIhB,EAAU,YAAc,
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n className?: string\n ['aria-label']: string\n ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n className,\n 'aria-label': ariaLabel,\n ref,\n ...rest\n}: BreadcrumbProps) => {\n return (\n <nav\n data-spark-component=\"breadcrumb\"\n ref={ref}\n aria-label={ariaLabel}\n className={cx('text-caption text-neutral', className)}\n >\n <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n </nav>\n )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const CurrentPage = ({\n asChild = false,\n className,\n children,\n ...rest\n}: CurrentPageProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"breadcrumb-current-page\"\n role=\"link\"\n aria-disabled\n aria-current=\"page\"\n className={cx(\n 'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ className, ...rest }: ItemProps) => {\n return (\n <li\n data-spark-component=\"breadcrumb-item\"\n className={cx('min-w-none gap-sm inline-flex items-center', className)}\n {...rest}\n />\n )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n href?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const Link = ({\n asChild = false,\n className,\n bold = true,\n intent = 'current',\n underline = true,\n href,\n ref,\n ...rest\n}: LinkProps) => {\n const Component = asChild ? Slot : TextLink\n\n return (\n <Component\n data-spark-component=\"breadcrumb-link\"\n href={href}\n ref={ref}\n className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n bold={bold}\n intent={intent}\n underline={underline}\n {...rest}\n />\n )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Separator = ({\n asChild = false,\n className,\n children,\n ref,\n ...rest\n}: SeparatorProps) => {\n const Component = asChild ? Slot : 'li'\n\n return (\n <Component\n role=\"presentation\"\n aria-hidden\n data-spark-component=\"breadcrumb-separator\"\n ref={ref}\n className={cx('gap-sm inline-flex items-center', className)}\n {...rest}\n >\n {children ?? (\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n )}\n </Component>\n )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n Item: typeof Item\n Link: typeof Link\n CurrentPage: typeof CurrentPage\n Separator: typeof Separator\n} = Object.assign(Root, {\n Item,\n Link,\n CurrentPage,\n Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":"oUASA,IAAa,GAAc,CACzB,YACA,aAAc,EACd,MACA,GAAG,MAGD,EAAA,EAAA,KAAC,MAAD,CACE,uBAAqB,aAChB,MACL,aAAY,EACZ,WAAA,EAAA,EAAA,IAAc,4BAA6B,EAAU,WAErD,EAAA,EAAA,KAAC,KAAD,CAAI,WAAA,EAAA,EAAA,IAAc,iDAAiD,CAAE,GAAI,EAAQ,CAAA,CAC7E,CAAA,CAIV,EAAW,YAAc,wBCfzB,IAAa,GAAe,CAC1B,UAAU,GACV,YACA,WACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,OAGjC,CACE,uBAAqB,0BACrB,KAAK,OACL,gBAAA,GACA,eAAa,OACb,WAAA,EAAA,EAAA,IACE,iFACA,EACD,CACD,GAAI,EAEH,WACS,CAAA,CAIhB,EAAY,YAAc,yBC7B1B,IAAa,GAAQ,CAAE,YAAW,GAAG,MAEjC,EAAA,EAAA,KAAC,KAAD,CACE,uBAAqB,kBACrB,WAAA,EAAA,EAAA,IAAc,6CAA8C,EAAU,CACtE,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBCLnB,IAAa,GAAQ,CACnB,UAAU,GACV,YACA,OAAO,GACP,SAAS,UACT,YAAY,GACZ,OACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,EAAA,SAGjC,CACE,uBAAqB,kBACf,OACD,MACL,WAAA,EAAA,EAAA,IAAc,0DAA2D,EAAU,CAC7E,OACE,SACG,YACX,GAAI,EACJ,CAAA,CAIN,EAAK,YAAc,kBC1BnB,IAAa,GAAa,CACxB,UAAU,GACV,YACA,WACA,MACA,GAAG,MAKD,EAAA,EAAA,KAHgB,EAAU,EAAA,KAAO,KAGjC,CACE,KAAK,eACL,cAAA,GACA,uBAAqB,uBAChB,MACL,WAAA,EAAA,EAAA,IAAc,kCAAmC,EAAU,CAC3D,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,EAAA,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,mBAAD,EAAsB,CAAA,CACjB,CAAA,CAEC,CAAA,CAIhB,EAAU,YAAc,uBC/BxB,IAAa,EAKT,OAAO,OAAO,EAAM,CACtB,OACA,OACA,cACA,YACD,CAAC,CAEF,EAAW,YAAc,aACzB,EAAK,YAAc,kBACnB,EAAK,YAAc,kBACnB,EAAY,YAAc,yBAC1B,EAAU,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n className?: string\n ['aria-label']: string\n ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n className,\n 'aria-label': ariaLabel,\n ref,\n ...rest\n}: BreadcrumbProps) => {\n return (\n <nav\n data-spark-component=\"breadcrumb\"\n ref={ref}\n aria-label={ariaLabel}\n className={cx('text-caption text-neutral', className)}\n >\n <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n </nav>\n )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const CurrentPage = ({\n asChild = false,\n className,\n children,\n ...rest\n}: CurrentPageProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"breadcrumb-current-page\"\n role=\"link\"\n aria-disabled\n aria-current=\"page\"\n className={cx(\n 'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ className, ...rest }: ItemProps) => {\n return (\n <li\n data-spark-component=\"breadcrumb-item\"\n className={cx('min-w-none gap-sm inline-flex items-center', className)}\n {...rest}\n />\n )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n href?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const Link = ({\n asChild = false,\n className,\n bold = true,\n intent = 'current',\n underline = true,\n href,\n ref,\n ...rest\n}: LinkProps) => {\n const Component = asChild ? Slot : TextLink\n\n return (\n <Component\n data-spark-component=\"breadcrumb-link\"\n href={href}\n ref={ref}\n className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n bold={bold}\n intent={intent}\n underline={underline}\n {...rest}\n />\n )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Separator = ({\n asChild = false,\n className,\n children,\n ref,\n ...rest\n}: SeparatorProps) => {\n const Component = asChild ? Slot : 'li'\n\n return (\n <Component\n role=\"presentation\"\n aria-hidden\n data-spark-component=\"breadcrumb-separator\"\n ref={ref}\n className={cx('gap-sm inline-flex items-center', className)}\n {...rest}\n >\n {children ?? (\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n )}\n </Component>\n )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\nexport const Breadcrumb: typeof Root & {\n Item: typeof Item\n Link: typeof Link\n CurrentPage: typeof CurrentPage\n Separator: typeof Separator\n} = Object.assign(Root, {\n Item,\n Link,\n CurrentPage,\n Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;AASA,IAAa,KAAc,EACzB,cACA,cAAc,GACd,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,cAAY;CACZ,WAAW,EAAG,6BAA6B,EAAU;WAErD,kBAAC,MAAD;EAAI,WAAW,EAAG,iDAAiD;EAAE,GAAI;EAAQ,CAAA;CAC7E,CAAA;AAIV,EAAW,cAAc;;;ACfzB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,QAGjC;CACE,wBAAqB;CACrB,MAAK;CACL,iBAAA;CACA,gBAAa;CACb,WAAW,EACT,kFACA,EACD;CACD,GAAI;CAEH;CACS,CAAA;AAIhB,EAAY,cAAc;;;AC7B1B,IAAa,KAAQ,EAAE,cAAW,GAAG,QAEjC,kBAAC,MAAD;CACE,wBAAqB;CACrB,WAAW,EAAG,8CAA8C,EAAU;CACtE,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;ACLnB,IAAa,KAAQ,EACnB,aAAU,IACV,cACA,UAAO,IACP,YAAS,WACT,eAAY,IACZ,SACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,GAGjC;CACE,wBAAqB;CACf;CACD;CACL,WAAW,EAAG,2DAA2D,EAAU;CAC7E;CACE;CACG;CACX,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;AC1BnB,IAAa,KAAa,EACxB,aAAU,IACV,cACA,aACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,MAGjC;CACE,MAAK;CACL,eAAA;CACA,wBAAqB;CAChB;CACL,WAAW,EAAG,mCAAmC,EAAU;CAC3D,GAAI;WAEH,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAsB,CAAA,EACjB,CAAA;CAEC,CAAA;AAIhB,EAAU,cAAc;;;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/BreadcrumbCurrentPage.tsx","../../src/breadcrumb/BreadcrumbItem.tsx","../../src/breadcrumb/BreadcrumbLink.tsx","../../src/breadcrumb/BreadcrumbSeparator.tsx","../../src/breadcrumb/index.ts"],"sourcesContent":["import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface BreadcrumbProps extends ComponentPropsWithoutRef<'nav'> {\n className?: string\n ['aria-label']: string\n ref?: Ref<HTMLElement>\n}\n\nexport const Breadcrumb = ({\n className,\n 'aria-label': ariaLabel,\n ref,\n ...rest\n}: BreadcrumbProps) => {\n return (\n <nav\n data-spark-component=\"breadcrumb\"\n ref={ref}\n aria-label={ariaLabel}\n className={cx('text-caption text-neutral', className)}\n >\n <ol className={cx('gap-sm flex flex-wrap items-center break-words')} {...rest} />\n </nav>\n )\n}\n\nBreadcrumb.displayName = 'Breadcrumb.Breadcrumb'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface CurrentPageProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const CurrentPage = ({\n asChild = false,\n className,\n children,\n ...rest\n}: CurrentPageProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n data-spark-component=\"breadcrumb-current-page\"\n role=\"link\"\n aria-disabled\n aria-current=\"page\"\n className={cx(\n 'inline! overflow-hidden font-bold text-ellipsis whitespace-nowrap text-current',\n className\n )}\n {...rest}\n >\n {children}\n </Component>\n )\n}\n\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nexport interface ItemProps extends ComponentPropsWithoutRef<'li'> {\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Item = ({ className, ...rest }: ItemProps) => {\n return (\n <li\n data-spark-component=\"breadcrumb-item\"\n className={cx('min-w-none gap-sm inline-flex items-center', className)}\n {...rest}\n />\n )\n}\n\nItem.displayName = 'Breadcrumb.Item'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { TextLink } from '../text-link'\n\nexport interface LinkProps extends ComponentPropsWithoutRef<typeof TextLink> {\n asChild?: boolean\n className?: string\n href?: string\n ref?: Ref<HTMLAnchorElement>\n}\n\nexport const Link = ({\n asChild = false,\n className,\n bold = true,\n intent = 'current',\n underline = true,\n href,\n ref,\n ...rest\n}: LinkProps) => {\n const Component = asChild ? Slot : TextLink\n\n return (\n <Component\n data-spark-component=\"breadcrumb-link\"\n href={href}\n ref={ref}\n className={cx('inline! overflow-hidden text-ellipsis whitespace-nowrap', className)}\n bold={bold}\n intent={intent}\n underline={underline}\n {...rest}\n />\n )\n}\n\nLink.displayName = 'Breadcrumb.Link'\n","import { ArrowVerticalRight } from '@spark-ui/icons/ArrowVerticalRight'\nimport { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\n\nexport interface SeparatorProps extends ComponentPropsWithoutRef<'li'> {\n asChild?: boolean\n className?: string\n ref?: Ref<HTMLLIElement>\n}\n\nexport const Separator = ({\n asChild = false,\n className,\n children,\n ref,\n ...rest\n}: SeparatorProps) => {\n const Component = asChild ? Slot : 'li'\n\n return (\n <Component\n role=\"presentation\"\n aria-hidden\n data-spark-component=\"breadcrumb-separator\"\n ref={ref}\n className={cx('gap-sm inline-flex items-center', className)}\n {...rest}\n >\n {children ?? (\n <Icon>\n <ArrowVerticalRight />\n </Icon>\n )}\n </Component>\n )\n}\n\nSeparator.displayName = 'Breadcrumb.Separator'\n","import { Breadcrumb as Root } from './Breadcrumb'\nimport { CurrentPage } from './BreadcrumbCurrentPage'\nimport { Item } from './BreadcrumbItem'\nimport { Link } from './BreadcrumbLink'\nimport { Separator } from './BreadcrumbSeparator'\n\n/**\n * A navigation component that shows the user's current location in a hierarchical structure.\n */\nexport const Breadcrumb: typeof Root & {\n Item: typeof Item\n Link: typeof Link\n CurrentPage: typeof CurrentPage\n Separator: typeof Separator\n} = Object.assign(Root, {\n Item,\n Link,\n CurrentPage,\n Separator,\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\nItem.displayName = 'Breadcrumb.Item'\nLink.displayName = 'Breadcrumb.Link'\nCurrentPage.displayName = 'Breadcrumb.CurrentPage'\nSeparator.displayName = 'Breadcrumb.Separator'\n\nexport type { BreadcrumbProps } from './Breadcrumb'\n"],"mappings":";;;;;;;AASA,IAAa,KAAc,EACzB,cACA,cAAc,GACd,QACA,GAAG,QAGD,kBAAC,OAAD;CACE,wBAAqB;CAChB;CACL,cAAY;CACZ,WAAW,EAAG,6BAA6B,EAAU;WAErD,kBAAC,MAAD;EAAI,WAAW,EAAG,iDAAiD;EAAE,GAAI;EAAQ,CAAA;CAC7E,CAAA;AAIV,EAAW,cAAc;;;ACfzB,IAAa,KAAe,EAC1B,aAAU,IACV,cACA,aACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,QAGjC;CACE,wBAAqB;CACrB,MAAK;CACL,iBAAA;CACA,gBAAa;CACb,WAAW,EACT,kFACA,EACD;CACD,GAAI;CAEH;CACS,CAAA;AAIhB,EAAY,cAAc;;;AC7B1B,IAAa,KAAQ,EAAE,cAAW,GAAG,QAEjC,kBAAC,MAAD;CACE,wBAAqB;CACrB,WAAW,EAAG,8CAA8C,EAAU;CACtE,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;ACLnB,IAAa,KAAQ,EACnB,aAAU,IACV,cACA,UAAO,IACP,YAAS,WACT,eAAY,IACZ,SACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,GAGjC;CACE,wBAAqB;CACf;CACD;CACL,WAAW,EAAG,2DAA2D,EAAU;CAC7E;CACE;CACG;CACX,GAAI;CACJ,CAAA;AAIN,EAAK,cAAc;;;AC1BnB,IAAa,KAAa,EACxB,aAAU,IACV,cACA,aACA,QACA,GAAG,QAKD,kBAHgB,IAAU,IAAO,MAGjC;CACE,MAAK;CACL,eAAA;CACA,wBAAqB;CAChB;CACL,WAAW,EAAG,mCAAmC,EAAU;CAC3D,GAAI;WAEH,KACC,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAsB,CAAA,EACjB,CAAA;CAEC,CAAA;AAIhB,EAAU,cAAc;;;AC/BxB,IAAa,IAKT,OAAO,OAAO,GAAM;CACtB;CACA;CACA;CACA;CACD,CAAC;AAEF,EAAW,cAAc,cACzB,EAAK,cAAc,mBACnB,EAAK,cAAc,mBACnB,EAAY,cAAc,0BAC1B,EAAU,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
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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"}
|
|
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\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n children,\n design = 'filled',\n disabled = false,\n ariaDisabled = false,\n intent = 'main',\n isLoading = false,\n loadingLabel,\n loadingText,\n shape = 'rounded',\n size = 'md',\n asChild,\n className,\n underline = false,\n ref,\n ...others\n}: ButtonProps) => {\n const Component = asChild ? Slot : 'button'\n\n const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n const useNativeDisabled = !!disabled && !ariaDisabled\n\n const disabledEventHandlers = useMemo(() => {\n const result: Partial<Record<DOMAttributesEventHandler, () => 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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"}
|
|
@@ -1 +1 @@
|
|
|
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;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,EC5FY,IAAe,EAC1B;CACE;CACA;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EAeR,QAAQ,EAA8E;GACpF,QAAQ,EAAE;GACV,UAAU;IAAC;IAAkB;IAAa;IAAiB;GAC3D,QAAQ,EAAE;GACV,OAAO,CAAC,2CAA2C;GACnD,UAAU,EAAE;GACb,CAAC;EACF,WAAW,EACT,MAAM,CAAC,YAAY,EACpB;EAID,QAAQ,EAcN;GACA,MAAM,EAAE;GACR,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,OAAO,EAAE;GACT,QAAQ,EAAE;GACV,MAAM,EAAE;GACR,SAAS,EAAE;GACX,SAAS,EAAE;GACX,gBAAgB,EAAE;GACnB,CAAC;EAIF,MAAM,EAAyC;GAC7C,IAAI,CAAC,eAAe,UAAU;GAC9B,IAAI,CAAC,eAAe,UAAU;GAC9B,IAAI,CAAC,eAAe,UAAU;GAC/B,CAAC;EAIF,OAAO,EAAqD;GAC1D,SAAS,CAAC,aAAa;GACvB,QAAQ,CAAC,YAAY;GACrB,MAAM,CAAC,eAAe;GACvB,CAAC;EAIF,UAAU;GACR,MAAM,CAAC,sBAAsB,gBAAgB;GAC7C,OAAO,CAAC,iBAAiB;GAC1B;EACF;CACD,kBAAkB;EAChB,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACJ;CACD,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,OAAO;EACR;CACF,CACF,ECxEK,IAAoD;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,KAAU,EACrB,aACA,YAAS,UACT,cAAW,IACX,kBAAe,IACf,YAAS,QACT,eAAY,IACZ,iBACA,gBACA,WAAQ,WACR,UAAO,MACP,YACA,cACA,eAAY,IACZ,QACA,GAAG,QACc;CACjB,IAAM,IAAY,IAAU,IAAO,UAE7B,IAAoB,CAAC,CAAC,KAAY,CAAC,CAAC,KAAgB,GACpD,IAAoB,CAAC,CAAC,KAAY,CAAC,GAEnC,IAAwB,QAAc;EAC1C,IAAM,IAAiE,EAAE;AAMzE,SAJI,KACF,EAAqB,SAAQ,MAAiB,EAAO,KAAgB,KAAA,EAAW,EAG3E;IACN,CAAC,EAAkB,CAAC,EAEjB,IAAe;EACnB,MAAM;EACN,WAAW,IAAc,iBAAiB;EAC1C,GAAI,KAAgB,EAAE,cAAc,GAAc;EACnD;AAED,QACE,kBAAC,GAAD;EACE,wBAAqB;EACrB,GAAK,MAAc,YAAY,EAAE,MAAM,UAAU;EAC5C;EACL,WAAW,EAAa;GACtB;GACA;GACA,UAAU;GACV;GACA;GACA;GACA;GACD,CAAC;EACF,UAAU;EACV,iBAAe,IAAoB,KAAO,KAAA;EAC1C,aAAW;EACX,aAAW,IAAY,cAAc;EACrC,GAAI;EACJ,GAAI;YAEH,EAAoB,GAAS,IAAU,MACtC,IACE,kBAAA,GAAA,EAAA,UAAA;GACE,kBAAC,GAAD,EAAS,GAAI,GAAgB,CAAA;GAC5B;GAED,kBAAC,OAAD;IACE,eAAA;IACA,WAAW,EAAG,UAAU,IAAc,WAAW,wBAAwB;cAExE;IACG,CAAA;GACL,EAAA,CAAA,GAEH,EAEH;EACS,CAAA;;AAIhB,EAAO,cAAc"}
|
|
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\n/**\n * A clickable element that triggers an action or event when activated by the user.\n */\nexport const Button = ({\n children,\n design = 'filled',\n disabled = false,\n ariaDisabled = false,\n intent = 'main',\n isLoading = false,\n loadingLabel,\n loadingText,\n shape = 'rounded',\n size = 'md',\n asChild,\n className,\n underline = false,\n ref,\n ...others\n}: ButtonProps) => {\n const Component = asChild ? Slot : 'button'\n\n const shouldNotInteract = !!disabled || !!ariaDisabled || isLoading\n const useNativeDisabled = !!disabled && !ariaDisabled\n\n const disabledEventHandlers = useMemo(() => {\n const result: Partial<Record<DOMAttributesEventHandler, () => 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/card/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n [\n 'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n 'h-sz-16',\n 'default:rounded-t-lg',\n 'bg-[length:200%_100%] bg-position-[0%_0%]',\n ],\n {\n variants: {\n animation: {\n none: '',\n pulse: 'animate-standalone-backdrop-pulse',\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n surfaceInverse: [\n 'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n ],\n }),\n },\n defaultVariants: {\n intent: 'main',\n animation: 'none',\n },\n }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n [\n 'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n 'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n ],\n {\n variants: {\n design: {\n filled: [],\n outlined: ['border-sm'],\n tinted: [],\n },\n hasBackdrop: {\n true: ['pt-md'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // OUTLINED\n { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n },\n }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n design: CardStylesProps['design']\n intent: CardStylesProps['intent']\n hasBackdrop: boolean\n inset: boolean\n isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n const context = useContext(CardContext)\n if (!context) {\n throw new Error('useCardContext must be used within a Card component')\n }\n\n return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onDoubleClick',\n 'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n let backdropFound = false\n\n const searchForBackdrop = (node: ReactNode): void => {\n if (backdropFound) return\n\n Children.forEach(node, child => {\n if (backdropFound) return\n\n if (isValidElement(child)) {\n const isBackdropComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n if (isBackdropComponent) {\n backdropFound = true\n\n return\n }\n\n const hasChildren =\n child.props && typeof child.props === 'object' && 'children' in child.props\n\n if (hasChildren) {\n const childChildren = (child.props as { children: ReactNode }).children\n if (childChildren !== undefined && childChildren !== null) {\n searchForBackdrop(childChildren)\n }\n }\n }\n })\n }\n\n searchForBackdrop(children)\n\n return backdropFound\n}\n\nexport const isInteractive = (\n children: ReactNode,\n asChild: boolean | undefined,\n props: Record<string, any>\n): boolean => {\n const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n if (hasMouseEventHandlers) {\n return true\n }\n\n if (!asChild) {\n return false\n }\n\n const child = Children.only(children)\n\n if (!isValidElement(child)) {\n return false\n }\n\n const interactiveElements = ['a', 'button']\n const isInteractiveElement =\n typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n if (isInteractiveElement) {\n return true\n }\n\n const childProps = child.props as Record<string, any>\n const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Card = ({\n children,\n design = 'filled',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const backdropDetected = hasBackdrop(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext.Provider\n value={{\n design,\n intent,\n hasBackdrop: backdropDetected,\n inset,\n isInteractive: interactiveDetected,\n }}\n >\n <Component\n data-spark-component=\"card\"\n data-interactive={interactiveDetected}\n ref={ref}\n className={cardStyles({\n className,\n design,\n intent,\n hasBackdrop: backdropDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext.Provider>\n )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n [\n 'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n 'default:transition-colors default:duration-200 ease-linear',\n ],\n {\n variants: {\n inset: {\n false: ['default:p-lg'],\n },\n design: {\n filled: [],\n outlined: [\n 'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ],\n tinted: [],\n },\n hasBackdrop: {\n true: ['rounded-t-[16px_8px] '],\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // FILLED\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main text-on-main group-focus:bg-main-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support text-on-support group-focus:bg-support-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent text-on-accent group-focus:bg-accent-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success text-on-success group-focus:bg-success-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert text-on-alert group-focus:bg-alert-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error group-focus:bg-error-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info group-focus:bg-info-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n // OUTLINED\n /**\n * Outlined styles are handled by the Card component (parent)\n */\n // TINTED\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n inset: false,\n hasBackdrop: true,\n },\n }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasBackdrop } = useCardContext()\n\n return (\n <Component\n data-spark-component=\"card-content\"\n ref={ref}\n className={contentStyles({\n className,\n design,\n intent,\n inset,\n hasBackdrop,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n Content: typeof Content\n Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n Content,\n Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n [\n 'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n 'h-sz-16',\n 'default:rounded-t-lg',\n 'bg-[length:200%_100%] bg-position-[0%_0%]',\n ],\n {\n variants: {\n animation: {\n none: '',\n pulse: 'animate-standalone-backdrop-pulse',\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n surfaceInverse: [\n 'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n ],\n }),\n },\n defaultVariants: {\n intent: 'main',\n animation: 'none',\n },\n }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n [\n 'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n 'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n ],\n {\n variants: {\n design: {\n filled: [],\n outlined: ['border-sm'],\n tinted: [],\n },\n hasBackdrop: {\n true: ['pt-md'],\n },\n /**\n * Color scheme of the button.\n */\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // OUTLINED\n { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n },\n }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n design: CardStylesProps['design']\n intent: CardStylesProps['intent']\n hasBackdrop: boolean\n inset: boolean\n isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n const context = useContext(CardContext)\n if (!context) {\n throw new Error('useCardContext must be used within a Card component')\n }\n\n return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n 'onClick',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onDoubleClick',\n 'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n let backdropFound = false\n\n const searchForBackdrop = (node: ReactNode): void => {\n if (backdropFound) return\n\n Children.forEach(node, child => {\n if (backdropFound) return\n\n if (isValidElement(child)) {\n const isBackdropComponent =\n typeof child.type === 'function' &&\n (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n if (isBackdropComponent) {\n backdropFound = true\n\n return\n }\n\n const hasChildren =\n child.props && typeof child.props === 'object' && 'children' in child.props\n\n if (hasChildren) {\n const childChildren = (child.props as { children: ReactNode }).children\n if (childChildren !== undefined && childChildren !== null) {\n searchForBackdrop(childChildren)\n }\n }\n }\n })\n }\n\n searchForBackdrop(children)\n\n return backdropFound\n}\n\nexport const isInteractive = (\n children: ReactNode,\n asChild: boolean | undefined,\n props: Record<string, any>\n): boolean => {\n const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n if (hasMouseEventHandlers) {\n return true\n }\n\n if (!asChild) {\n return false\n }\n\n const child = Children.only(children)\n\n if (!isValidElement(child)) {\n return false\n }\n\n const interactiveElements = ['a', 'button']\n const isInteractiveElement =\n typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n if (isInteractiveElement) {\n return true\n }\n\n const childProps = child.props as Record<string, any>\n const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Card = ({\n children,\n design = 'filled',\n intent = 'surface',\n inset = false,\n asChild,\n className,\n ref,\n ...props\n}: CardProps) => {\n const Component = asChild ? Slot : 'div'\n const backdropDetected = hasBackdrop(children)\n const interactiveDetected = isInteractive(children, asChild, props)\n\n return (\n <CardContext.Provider\n value={{\n design,\n intent,\n hasBackdrop: backdropDetected,\n inset,\n isInteractive: interactiveDetected,\n }}\n >\n <Component\n data-spark-component=\"card\"\n data-interactive={interactiveDetected}\n ref={ref}\n className={cardStyles({\n className,\n design,\n intent,\n hasBackdrop: backdropDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext.Provider>\n )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n [\n 'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n 'default:transition-colors default:duration-200 ease-linear',\n ],\n {\n variants: {\n inset: {\n false: ['default:p-lg'],\n },\n design: {\n filled: [],\n outlined: [\n 'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ],\n tinted: [],\n },\n hasBackdrop: {\n true: ['rounded-t-[16px_8px] '],\n },\n intent: makeVariants<\n 'intent',\n [\n 'main',\n 'support',\n 'accent',\n 'success',\n 'alert',\n 'danger',\n 'info',\n 'neutral',\n 'surface',\n 'surfaceInverse',\n ]\n >({\n main: [],\n support: [],\n accent: [],\n success: [],\n alert: [],\n danger: [],\n info: [],\n neutral: [],\n surface: [],\n surfaceInverse: [],\n }),\n },\n compoundVariants: [\n // FILLED\n {\n intent: 'main',\n design: 'filled',\n class: tw([\n 'bg-main text-on-main group-focus:bg-main-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'filled',\n class: tw([\n 'bg-support text-on-support group-focus:bg-support-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'filled',\n class: tw([\n 'bg-accent text-on-accent group-focus:bg-accent-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'filled',\n class: tw([\n 'bg-success text-on-success group-focus:bg-success-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'filled',\n class: tw([\n 'bg-alert text-on-alert group-focus:bg-alert-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'filled',\n class: tw([\n 'text-on-error bg-error group-focus:bg-error-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'filled',\n class: tw([\n 'text-on-error bg-info group-focus:bg-info-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'filled',\n class: tw([\n 'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'filled',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n // OUTLINED\n /**\n * Outlined styles are handled by the Card component (parent)\n */\n // TINTED\n {\n intent: 'main',\n design: 'tinted',\n class: tw([\n 'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n ]),\n },\n {\n intent: 'support',\n design: 'tinted',\n class: tw([\n 'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n ]),\n },\n {\n intent: 'accent',\n design: 'tinted',\n class: tw([\n 'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n ]),\n },\n {\n intent: 'success',\n design: 'tinted',\n class: tw([\n 'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n ]),\n },\n {\n intent: 'alert',\n design: 'tinted',\n class: tw([\n 'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n ]),\n },\n {\n intent: 'danger',\n design: 'tinted',\n class: tw([\n 'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n ]),\n },\n {\n intent: 'info',\n design: 'tinted',\n class: tw([\n 'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n ]),\n },\n {\n intent: 'neutral',\n design: 'tinted',\n class: tw([\n 'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n ]),\n },\n {\n intent: 'surface',\n design: 'tinted',\n class: tw([\n 'bg-surface text-on-surface group-focus:bg-surface-hovered',\n 'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n ]),\n },\n ],\n defaultVariants: {\n design: 'filled',\n intent: 'surface',\n inset: false,\n hasBackdrop: true,\n },\n }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n /**\n * Whether the card should have an inset padding.\n */\n inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n const Component = asChild ? Slot : 'div'\n const { design, intent, hasBackdrop } = useCardContext()\n\n return (\n <Component\n data-spark-component=\"card-content\"\n ref={ref}\n className={contentStyles({\n className,\n design,\n intent,\n inset,\n hasBackdrop,\n })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n Content: typeof Content\n Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n Content,\n Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"mappings":"yQAGA,IAAa,GAAA,EAAA,EAAA,KACX,CACE,uEACA,UACA,uBACA,4CACD,CACD,CACE,SAAU,CACR,UAAW,CACT,KAAM,GACN,MAAO,oCACR,CACD,QAAA,EAAA,EAAA,cAcE,CACA,KAAM,CAAC,uEAAuE,CAC9E,QAAS,CAAC,gFAAgF,CAC1F,OAAQ,CAAC,6EAA6E,CACtF,QAAS,CAAC,gFAAgF,CAC1F,MAAO,CAAC,0EAA0E,CAClF,OAAQ,CAAC,0EAA0E,CACnF,KAAM,CAAC,uEAAuE,CAC9E,QAAS,CAAC,gFAAgF,CAC1F,QAAS,CAAC,gFAAgF,CAC1F,eAAgB,CACd,gFACD,CACF,CAAC,CACH,CACD,gBAAiB,CACf,OAAQ,OACR,UAAW,OACZ,CACF,CACF,CAQY,GAAY,CAAE,SAAS,OAAQ,YAAY,OAAQ,GAAG,MAC1D,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAe,CAAE,SAAQ,YAAW,CAAC,CAAE,GAAI,EAAS,CAAA,CAG7E,EAAS,YAAc,gBC3DvB,IAAa,GAAA,EAAA,EAAA,KACX,CACE,4EACA,qDACD,CACD,CACE,SAAU,CACR,OAAQ,CACN,OAAQ,EAAE,CACV,SAAU,CAAC,YAAY,CACvB,OAAQ,EAAE,CACX,CACD,YAAa,CACX,KAAM,CAAC,QAAQ,CAChB,CAID,QAAA,EAAA,EAAA,cAcE,CACA,KAAM,EAAE,CACR,QAAS,EAAE,CACX,OAAQ,EAAE,CACV,QAAS,EAAE,CACX,MAAO,EAAE,CACT,OAAQ,EAAE,CACV,KAAM,EAAE,CACR,QAAS,EAAE,CACX,QAAS,EAAE,CACX,eAAgB,EAAE,CACnB,CAAC,CACH,CACD,iBAAkB,CAEhB,CAAE,OAAQ,OAAQ,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,cAAc,CAAC,CAAE,CAClE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACxE,CAAE,OAAQ,SAAU,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,gBAAgB,CAAC,CAAE,CACtE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACxE,CAAE,OAAQ,QAAS,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,eAAe,CAAC,CAAE,CACpE,CAAE,OAAQ,SAAU,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,eAAe,CAAC,CAAE,CACrE,CAAE,OAAQ,OAAQ,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,cAAc,CAAC,CAAE,CAClE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACxE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACzE,CACD,gBAAiB,CACf,OAAQ,SACR,OAAQ,UACT,CACF,CACF,CCrDK,GAAA,EAAA,EAAA,eAA0D,IAAA,GAAU,CAE7D,MAAuB,CAClC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAY,CACvC,GAAI,CAAC,EACH,MAAU,MAAM,sDAAsD,CAGxE,OAAO,GClBH,EAAe,CACnB,UACA,cACA,YACA,eACA,eACA,cACA,cACA,aACA,gBACA,gBACD,CAEY,EAAe,GAAiC,CAC3D,IAAI,EAAgB,GAEd,EAAqB,GAA0B,CAC/C,GAEJ,EAAA,SAAS,QAAQ,EAAM,GAAS,CAC1B,QAEJ,EAAA,EAAA,gBAAmB,EAAM,CAAE,CAKzB,GAHE,OAAO,EAAM,MAAS,YACrB,EAAM,KAAkC,cAAgB,gBAElC,CACvB,EAAgB,GAEhB,OAMF,GAFE,EAAM,OAAS,OAAO,EAAM,OAAU,UAAY,aAAc,EAAM,MAEvD,CACf,IAAM,EAAiB,EAAM,MAAkC,SAC3D,GAAiD,MACnD,EAAkB,EAAc,IAItC,EAKJ,OAFA,EAAkB,EAAS,CAEpB,GAGI,GACX,EACA,EACA,IACY,CAGZ,GAF8B,EAAa,KAAK,GAAS,KAAS,EAAM,CAGtE,MAAO,GAGT,GAAI,CAAC,EACH,MAAO,GAGT,IAAM,EAAQ,EAAA,SAAS,KAAK,EAAS,CAErC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CACxB,MAAO,GAOT,GAFE,OAAO,EAAM,MAAS,UAFI,CAAC,IAAK,SAAS,CAEa,SAAS,EAAM,KAAK,CAG1E,MAAO,GAGT,IAAM,EAAa,EAAM,MAGzB,OAF8B,EAAa,KAAK,GAAS,KAAS,EAAW,ECjElE,GAAQ,CACnB,WACA,SAAS,SACT,SAAS,UACT,QAAQ,GACR,UACA,YACA,MACA,GAAG,KACY,CACf,IAAM,EAAY,EAAU,EAAA,KAAO,MAC7B,EAAmB,EAAY,EAAS,CACxC,EAAsB,EAAc,EAAU,EAAS,EAAM,CAEnE,OACE,EAAA,EAAA,KAAC,EAAY,SAAb,CACE,MAAO,CACL,SACA,SACA,YAAa,EACb,QACA,cAAe,EAChB,WAED,EAAA,EAAA,KAAC,EAAD,CACE,uBAAqB,OACrB,mBAAkB,EACb,MACL,UAAW,EAAW,CACpB,YACA,SACA,SACA,YAAa,EACd,CAAC,CACF,GAAI,EAEH,WACS,CAAA,CACS,CAAA,EAI3B,EAAK,YAAc,OCzDnB,IAAa,GAAA,EAAA,EAAA,KACX,CACE,oEACA,6DACD,CACD,CACE,SAAU,CACR,MAAO,CACL,MAAO,CAAC,eAAe,CACxB,CACD,OAAQ,CACN,OAAQ,EAAE,CACV,SAAU,CACR,oIACD,CACD,OAAQ,EAAE,CACX,CACD,YAAa,CACX,KAAM,CAAC,wBAAwB,CAChC,CACD,QAAA,EAAA,EAAA,cAcE,CACA,KAAM,EAAE,CACR,QAAS,EAAE,CACX,OAAQ,EAAE,CACV,QAAS,EAAE,CACX,MAAO,EAAE,CACT,OAAQ,EAAE,CACV,KAAM,EAAE,CACR,QAAS,EAAE,CACX,QAAS,EAAE,CACX,eAAgB,EAAE,CACnB,CAAC,CACH,CACD,iBAAkB,CAEhB,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mDACA,+EACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,yDACA,iFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sDACA,gFACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sDACA,gFACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oDACA,+EACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CAMD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iFACA,yFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,0FACA,4FACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uFACA,2FACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,0FACA,4FACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oFACA,0FACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oFACA,0FACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iFACA,yFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,0FACA,4FACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,OAAQ,UACR,MAAO,GACP,YAAa,GACd,CACF,CACF,CChMY,GAAW,CAAE,WAAU,QAAO,UAAS,YAAW,MAAK,GAAG,KAA0B,CAC/F,IAAM,EAAY,EAAU,EAAA,KAAO,MAC7B,CAAE,SAAQ,SAAQ,eAAgB,GAAgB,CAExD,OACE,EAAA,EAAA,KAAC,EAAD,CACE,uBAAqB,eAChB,MACL,UAAW,EAAc,CACvB,YACA,SACA,SACA,QACA,cACD,CAAC,CACF,GAAI,EAEH,WACS,CAAA,EAIhB,EAAQ,YAAc,UChCtB,IAAa,EAGT,OAAO,OAAO,EAAM,CACtB,UACA,WACD,CAAC,CAEF,EAAK,YAAc,OACnB,EAAQ,YAAc,eACtB,EAAS,YAAc"}
|