@spark-ui/components 16.0.3 → 16.1.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{Button-B6rA3-e5.js → Button-BIAkZTRR.js} +2 -2
- package/dist/{Button-B6rA3-e5.js.map → Button-BIAkZTRR.js.map} +1 -1
- package/dist/{Button-C3C0aixy.mjs → Button-DggC4GFM.mjs} +4 -4
- package/dist/{Button-C3C0aixy.mjs.map → Button-DggC4GFM.mjs.map} +1 -1
- package/dist/{Icon-Ck-dhfLd.mjs → Icon-C23-htlD.mjs} +2 -2
- package/dist/{Icon-Ck-dhfLd.mjs.map → Icon-C23-htlD.mjs.map} +1 -1
- package/dist/IconButton-D5fk89W-.js +2 -0
- package/dist/IconButton-D5fk89W-.js.map +1 -0
- package/dist/{IconButton-C62-axzv.mjs → IconButton-Mv9tO1ZH.mjs} +14 -14
- package/dist/IconButton-Mv9tO1ZH.mjs.map +1 -0
- package/dist/{Slot-D2Bbf8Gw.mjs → Slot-DLY1rJrG.mjs} +5 -5
- package/dist/{Slot-D2Bbf8Gw.mjs.map → Slot-DLY1rJrG.mjs.map} +1 -1
- package/dist/{Spinner-jF3-zoh_.mjs → Spinner-aLrtE2JN.mjs} +2 -2
- package/dist/{Spinner-jF3-zoh_.mjs.map → Spinner-aLrtE2JN.mjs.map} +1 -1
- package/dist/{TextLink-BuzFRWO6.mjs → TextLink-D7mOCjY_.mjs} +2 -2
- package/dist/{TextLink-BuzFRWO6.mjs.map → TextLink-D7mOCjY_.mjs.map} +1 -1
- package/dist/{VisuallyHidden-KH1biLx-.mjs → VisuallyHidden-DjlV0-CW.mjs} +7 -7
- package/dist/{VisuallyHidden-KH1biLx-.mjs.map → VisuallyHidden-DjlV0-CW.mjs.map} +1 -1
- package/dist/accordion/index.mjs +5 -5
- package/dist/alert-dialog/index.mjs +6 -6
- package/dist/avatar/index.js +1 -1
- package/dist/avatar/index.mjs +4 -4
- package/dist/breadcrumb/index.mjs +3 -3
- package/dist/button/index.js +1 -1
- package/dist/button/index.mjs +1 -1
- package/dist/card/index.mjs +1 -1
- package/dist/carousel/index.js +1 -1
- package/dist/carousel/index.mjs +4 -4
- package/dist/checkbox/index.mjs +1 -1
- package/dist/chip/index.js +1 -1
- package/dist/chip/index.js.map +1 -1
- package/dist/chip/index.mjs +3 -3
- package/dist/chip/index.mjs.map +1 -1
- package/dist/collapsible/index.mjs +1 -1
- package/dist/combobox/index.js +1 -1
- package/dist/combobox/index.js.map +1 -1
- package/dist/combobox/index.mjs +42 -42
- package/dist/combobox/index.mjs.map +1 -1
- package/dist/dialog/index.js +1 -1
- package/dist/dialog/index.mjs +3 -3
- package/dist/drawer/index.js +1 -1
- package/dist/drawer/index.mjs +3 -3
- package/dist/dropdown/index.js +1 -1
- package/dist/dropdown/index.js.map +1 -1
- package/dist/dropdown/index.mjs +3 -3
- package/dist/dropdown/index.mjs.map +1 -1
- package/dist/file-upload/index.js +1 -1
- package/dist/file-upload/index.mjs +4 -4
- package/dist/form-field/index.mjs +2 -2
- package/dist/icon/index.mjs +1 -1
- package/dist/icon-button/index.js +1 -1
- package/dist/icon-button/index.mjs +1 -1
- package/dist/input/index.js +1 -1
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs +16 -16
- package/dist/input/index.mjs.map +1 -1
- package/dist/link-box/index.mjs +7 -7
- package/dist/pagination/PaginationFirstPageTrigger.d.ts +12 -6
- package/dist/pagination/PaginationItem.d.ts +25 -11
- package/dist/pagination/PaginationLastPageTrigger.d.ts +12 -6
- package/dist/pagination/PaginationNextTrigger.d.ts +12 -6
- package/dist/pagination/PaginationPrevTrigger.d.ts +12 -6
- package/dist/pagination/index.js +1 -1
- package/dist/pagination/index.js.map +1 -1
- package/dist/pagination/index.mjs +20 -20
- package/dist/pagination/index.mjs.map +1 -1
- package/dist/popover/index.js +1 -1
- package/dist/popover/index.mjs +2 -2
- package/dist/progress-tracker/index.mjs +1 -1
- package/dist/rating/index.mjs +1 -1
- package/dist/rating-display/index.mjs +2 -2
- package/dist/scrolling-list/index.js +1 -1
- package/dist/scrolling-list/index.mjs +6 -6
- package/dist/select/index.js +1 -1
- package/dist/select/index.js.map +1 -1
- package/dist/select/index.mjs +2 -2
- package/dist/select/index.mjs.map +1 -1
- package/dist/skeleton/index.mjs +1 -1
- package/dist/slider/index.mjs +9 -9
- package/dist/slot/index.mjs +1 -1
- package/dist/snackbar/index.js +1 -1
- package/dist/snackbar/index.mjs +3 -3
- package/dist/spinner/index.mjs +1 -1
- package/dist/stepper/index.js +1 -1
- package/dist/stepper/index.mjs +2 -2
- package/dist/switch/index.mjs +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.mjs +3 -3
- package/dist/tag/index.js +1 -1
- package/dist/tag/index.js.map +1 -1
- package/dist/tag/index.mjs +9 -9
- package/dist/tag/index.mjs.map +1 -1
- package/dist/text-link/index.mjs +1 -1
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/index.js.map +1 -1
- package/dist/textarea/index.mjs +10 -14
- package/dist/textarea/index.mjs.map +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.mjs +10 -10
- package/dist/{useRenderSlot-LwWj8QbC.mjs → useRenderSlot-Bta2kdp4.mjs} +2 -2
- package/dist/{useRenderSlot-LwWj8QbC.mjs.map → useRenderSlot-Bta2kdp4.mjs.map} +1 -1
- package/dist/visually-hidden/index.mjs +1 -1
- package/package.json +5 -4
- package/dist/IconButton-C62-axzv.mjs.map +0 -1
- package/dist/IconButton-D3g86WpZ.js +0 -2
- package/dist/IconButton-D3g86WpZ.js.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { V as c } from "./VisuallyHidden-
|
|
2
|
+
import { V as c } from "./VisuallyHidden-DjlV0-CW.mjs";
|
|
3
3
|
import { makeVariants as d } from "@spark-ui/internal-utils";
|
|
4
4
|
import { cva as l } from "class-variance-authority";
|
|
5
5
|
const u = {
|
|
@@ -66,4 +66,4 @@ const u = {
|
|
|
66
66
|
export {
|
|
67
67
|
V as S
|
|
68
68
|
};
|
|
69
|
-
//# sourceMappingURL=Spinner-
|
|
69
|
+
//# sourceMappingURL=Spinner-aLrtE2JN.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner-
|
|
1
|
+
{"version":3,"file":"Spinner-aLrtE2JN.mjs","sources":["../src/spinner/Spinner.styles.tsx","../src/spinner/Spinner.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n intent: 'current',\n size: 'current',\n isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n {\n variants: {\n /**\n * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n */\n size: {\n current: ['u-current-font-size'],\n sm: ['w-sz-20', 'h-sz-20'],\n md: ['w-sz-28', 'h-sz-28'],\n full: ['w-full', 'h-full'],\n },\n /**\n * Color scheme of the spinner.\n */\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['border-current'],\n main: ['border-main'],\n support: ['border-support'],\n accent: ['border-accent'],\n basic: ['border-basic'],\n success: ['border-success'],\n alert: ['border-alert'],\n error: ['border-error'],\n info: ['border-info'],\n neutral: ['border-neutral'],\n }),\n /**\n * Size of the button.\n */\n isBackgroundVisible: {\n true: ['border-b-neutral-container', 'border-l-neutral-container'],\n false: ['border-b-transparent', 'border-l-transparent'],\n },\n },\n defaultVariants,\n }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n /**\n * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n */\n label?: string\n}\n\nexport const Spinner = ({\n className,\n size = 'current',\n intent = 'current',\n label,\n isBackgroundVisible,\n ref,\n ...others\n}: PropsWithChildren<SpinnerProps>) => {\n return (\n <span\n role=\"status\"\n data-spark-component=\"spinner\"\n ref={ref}\n className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n {...others}\n >\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </span>\n )\n}\n"],"names":["defaultVariants","spinnerStyles","cva","makeVariants","Spinner","className","size","intent","label","isBackgroundVisible","ref","others","jsx","VisuallyHidden"],"mappings":";;;;AAGA,MAAMA,IAAkB;AAAA,EACtB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,qBAAqB;AACvB,GAEaC,IAAgBC;AAAA,EAC3B,CAAC,gBAAgB,gBAAgB,gBAAgB,aAAa,cAAc;AAAA,EAC5E;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,MAAM;AAAA,QACJ,SAAS,CAAC,qBAAqB;AAAA,QAC/B,IAAI,CAAC,WAAW,SAAS;AAAA,QACzB,IAAI,CAAC,WAAW,SAAS;AAAA,QACzB,MAAM,CAAC,UAAU,QAAQ;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAK3B,QAAQC,EAcN;AAAA,QACA,SAAS,CAAC,gBAAgB;AAAA,QAC1B,MAAM,CAAC,aAAa;AAAA,QACpB,SAAS,CAAC,gBAAgB;AAAA,QAC1B,QAAQ,CAAC,eAAe;AAAA,QACxB,OAAO,CAAC,cAAc;AAAA,QACtB,SAAS,CAAC,gBAAgB;AAAA,QAC1B,OAAO,CAAC,cAAc;AAAA,QACtB,OAAO,CAAC,cAAc;AAAA,QACtB,MAAM,CAAC,aAAa;AAAA,QACpB,SAAS,CAAC,gBAAgB;AAAA,MAAA,CAC3B;AAAA;AAAA;AAAA;AAAA,MAID,qBAAqB;AAAA,QACnB,MAAM,CAAC,8BAA8B,4BAA4B;AAAA,QACjE,OAAO,CAAC,wBAAwB,sBAAsB;AAAA,MAAA;AAAA,IACxD;AAAA,IAEF,iBAAAH;AAAA,EAAA;AAEJ,GCjDaI,IAAU,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,wBAAqB;AAAA,IACrB,KAAAF;AAAA,IACA,WAAWT,EAAc,EAAE,WAAAI,GAAW,MAAAC,GAAM,QAAAC,GAAQ,qBAAAE,GAAqB;AAAA,IACxE,GAAGE;AAAA,IAEH,UAAAH,KAAS,gBAAAI,EAACC,GAAA,EAAgB,UAAAL,EAAA,CAAM;AAAA,EAAA;AAAA;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { cva as u } from "class-variance-authority";
|
|
3
|
-
import {
|
|
3
|
+
import { S as l } from "./Slot-DLY1rJrG.mjs";
|
|
4
4
|
const x = u(["inline-flex items-center focus-visible:u-outline"], {
|
|
5
5
|
variants: {
|
|
6
6
|
intent: {
|
|
@@ -55,4 +55,4 @@ const x = u(["inline-flex items-center focus-visible:u-outline"], {
|
|
|
55
55
|
export {
|
|
56
56
|
m as T
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=TextLink-
|
|
58
|
+
//# sourceMappingURL=TextLink-D7mOCjY_.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextLink-
|
|
1
|
+
{"version":3,"file":"TextLink-D7mOCjY_.mjs","sources":["../src/text-link/TextLink.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nconst textLinkStyles = cva(['inline-flex items-center focus-visible:u-outline'], {\n variants: {\n intent: {\n current: 'text-current hover:opacity-dim-1',\n main: 'text-main hover:text-main-hovered',\n support: 'text-support hover:text-support-hovered',\n accent: 'text-accent hover:text-accent-hovered',\n basic: 'text-basic hover:text-basic-hovered',\n success: 'text-success hover:text-success-hovered',\n alert: 'text-alert hover:text-alert-hovered',\n danger: 'text-error hover:text-error-hovered',\n info: 'text-info hover:text-info-hovered',\n neutral: 'text-neutral hover:text-neutral-hovered',\n },\n /** By default, TextLink inherits the current font weight. Use `bold` to highlight it. */\n bold: {\n true: 'font-bold',\n },\n /**\n * Underline is enabled by default.\n * You can remove it, but be careful about a11y, as you should make obvious to users what is a link or not.\n */\n underline: {\n true: 'underline',\n false: 'hover:underline focus:underline',\n },\n },\n defaultVariants: {\n intent: 'current',\n bold: false,\n underline: true,\n },\n})\n\nexport type StylesProps = VariantProps<typeof textLinkStyles>\n\nexport type TextLinkProps = ComponentPropsWithRef<'a'> &\n StylesProps & {\n /**\n * Change the component to the HTML tag or custom component of the only child.\n */\n asChild?: boolean\n }\n\nexport const TextLink = ({\n asChild = false,\n bold = false,\n children,\n className,\n intent = 'current',\n underline = true,\n ref,\n ...props\n}: TextLinkProps) => {\n const Component = asChild ? Slot : 'a'\n\n return (\n <Component\n data-spark-component=\"text-link\"\n ref={ref}\n className={textLinkStyles({ className, bold, intent, underline })}\n {...props}\n >\n {children}\n </Component>\n )\n}\n"],"names":["textLinkStyles","cva","TextLink","asChild","bold","children","className","intent","underline","ref","props","jsx","Slot"],"mappings":";;;AAKA,MAAMA,IAAiBC,EAAI,CAAC,kDAAkD,GAAG;AAAA,EAC/E,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA;AAAA,IAGX,MAAM;AAAA,MACJ,MAAM;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,WAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EAAA;AAEf,CAAC,GAYYC,IAAW,CAAC;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,KAAAC;AAAA,EACA,GAAGC;AACL,MAII,gBAAAC;AAAA,EAHgBR,IAAUS,IAAO;AAAA,EAGhC;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAH;AAAA,IACA,WAAWT,EAAe,EAAE,WAAAM,GAAW,MAAAF,GAAM,QAAAG,GAAQ,WAAAC,GAAW;AAAA,IAC/D,GAAGE;AAAA,IAEH,UAAAL;AAAA,EAAA;AAAA;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import {
|
|
3
|
-
const
|
|
4
|
-
e ?
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { S as n } from "./Slot-DLY1rJrG.mjs";
|
|
3
|
+
const a = ({ asChild: e = !1, ref: t, ...o }) => /* @__PURE__ */ i(
|
|
4
|
+
e ? n : "span",
|
|
5
5
|
{
|
|
6
6
|
...o,
|
|
7
7
|
ref: t,
|
|
@@ -21,8 +21,8 @@ const n = ({ asChild: e = !1, ref: t, ...o }) => /* @__PURE__ */ a(
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
);
|
|
24
|
-
|
|
24
|
+
a.displayName = "VisuallyHidden";
|
|
25
25
|
export {
|
|
26
|
-
|
|
26
|
+
a as V
|
|
27
27
|
};
|
|
28
|
-
//# sourceMappingURL=VisuallyHidden-
|
|
28
|
+
//# sourceMappingURL=VisuallyHidden-DjlV0-CW.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VisuallyHidden-
|
|
1
|
+
{"version":3,"file":"VisuallyHidden-DjlV0-CW.mjs","sources":["../src/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n"],"names":["VisuallyHidden","asChild","ref","props","jsx","Slot"],"mappings":";;AAYO,MAAMA,IAAiB,CAAC,EAAE,SAAAC,IAAU,IAAO,KAAAC,GAAK,GAAGC,QAItD,gBAAAC;AAAA,EAHgBH,IAAUI,IAAO;AAAA,EAGhC;AAAA,IACE,GAAGF;AAAA,IACJ,KAAAD;AAAA,IACA,OAAO;AAAA;AAAA,MAEL,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,GAAGC,EAAM;AAAA,IAAA;AAAA,EACX;AAAA;AAKNH,EAAe,cAAc;"}
|
package/dist/accordion/index.mjs
CHANGED
|
@@ -2,9 +2,9 @@ import { jsx as n, jsxs as A } from "react/jsx-runtime";
|
|
|
2
2
|
import { Accordion as c } from "@base-ui/react/accordion";
|
|
3
3
|
import { cx as d } from "class-variance-authority";
|
|
4
4
|
import { createContext as N, useContext as y } from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { S as g } from "../Slot-DLY1rJrG.mjs";
|
|
6
6
|
import { ArrowHorizontalDown as I } from "@spark-ui/icons/ArrowHorizontalDown";
|
|
7
|
-
import { I as C } from "../Icon-
|
|
7
|
+
import { I as C } from "../Icon-C23-htlD.mjs";
|
|
8
8
|
function s(e, o) {
|
|
9
9
|
const t = e ? g : o;
|
|
10
10
|
return e ? ({ ...r }) => /* @__PURE__ */ n(t, { ...r }) : void 0;
|
|
@@ -150,18 +150,18 @@ const f = ({
|
|
|
150
150
|
);
|
|
151
151
|
};
|
|
152
152
|
f.displayName = "Accordion.ItemTrigger";
|
|
153
|
-
const
|
|
153
|
+
const S = Object.assign(b, {
|
|
154
154
|
Item: m,
|
|
155
155
|
ItemHeader: p,
|
|
156
156
|
ItemTrigger: f,
|
|
157
157
|
ItemContent: u
|
|
158
158
|
});
|
|
159
|
-
|
|
159
|
+
S.displayName = "Accordion";
|
|
160
160
|
m.displayName = "Item";
|
|
161
161
|
p.displayName = "ItemHeader";
|
|
162
162
|
f.displayName = "Accordion.Trigger";
|
|
163
163
|
u.displayName = "Accordion.Content";
|
|
164
164
|
export {
|
|
165
|
-
|
|
165
|
+
S as Accordion
|
|
166
166
|
};
|
|
167
167
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { AlertDialog as i } from "@base-ui/react/alert-dialog";
|
|
3
|
-
import { createContext as
|
|
4
|
-
import {
|
|
3
|
+
import { createContext as O, useContext as R, useRef as y } from "react";
|
|
4
|
+
import { S as F } from "../Slot-DLY1rJrG.mjs";
|
|
5
5
|
import { useMergeRefs as D } from "@spark-ui/hooks/use-merge-refs";
|
|
6
6
|
import { useScrollOverflow as B } from "@spark-ui/hooks/use-scroll-overflow";
|
|
7
7
|
import { cx as d } from "class-variance-authority";
|
|
8
8
|
import { d as H } from "../DialogContent.styles-Du7_Dkde.mjs";
|
|
9
|
-
const A =
|
|
9
|
+
const A = O(null), $ = ({
|
|
10
10
|
children: e,
|
|
11
11
|
withFade: t = !1,
|
|
12
12
|
cancelRef: a
|
|
@@ -20,7 +20,7 @@ const A = R(null), $ = ({
|
|
|
20
20
|
children: e
|
|
21
21
|
}
|
|
22
22
|
), g = () => {
|
|
23
|
-
const e =
|
|
23
|
+
const e = R(A);
|
|
24
24
|
if (!e)
|
|
25
25
|
throw Error("useAlertDialog must be used within an AlertDialog provider");
|
|
26
26
|
return e;
|
|
@@ -61,7 +61,7 @@ const N = ({
|
|
|
61
61
|
ref: l,
|
|
62
62
|
...s
|
|
63
63
|
}) => {
|
|
64
|
-
const n = y(null), c = D(l, n), { withFade:
|
|
64
|
+
const n = y(null), c = D(l, n), { withFade: S } = g(), { overflow: p } = B(n);
|
|
65
65
|
return /* @__PURE__ */ o(
|
|
66
66
|
"div",
|
|
67
67
|
{
|
|
@@ -76,7 +76,7 @@ const N = ({
|
|
|
76
76
|
t
|
|
77
77
|
),
|
|
78
78
|
style: {
|
|
79
|
-
...
|
|
79
|
+
...S && {
|
|
80
80
|
maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
|
|
81
81
|
maskSize: `100% calc(100% + ${p.top ? "0px" : "44px"} + ${p.bottom ? "0px" : "44px"})`,
|
|
82
82
|
maskPosition: `0 ${p.top ? "0px" : "-44px"}`
|
package/dist/avatar/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),m=require("class-variance-authority"),N=require("react"),h=require("../Slot-DQ8z2zsy.js"),q=require("@spark-ui/icons/PenOutline"),w=require("../Icon-CF0W0LKr.js"),R=require("../IconButton-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),m=require("class-variance-authority"),N=require("react"),h=require("../Slot-DQ8z2zsy.js"),q=require("@spark-ui/icons/PenOutline"),w=require("../Icon-CF0W0LKr.js"),R=require("../IconButton-D5fk89W-.js");function $(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const b=$(N),P=b.createContext(void 0),v=()=>{const e=b.useContext(P);if(!e)throw new Error("useAvatarContext must be used within an Avatar component");return e},j={xs:24,sm:32,md:40,lg:56,xl:64,"2xl":96},z=b.forwardRef(({className:e,size:n="xl",isOnline:t=!1,onlineText:a,username:s,asChild:l,children:i,shape:c="circle",...o},u)=>{const d=l?h.Slot:"div",r=b.useMemo(()=>({size:n,isOnline:t,onlineText:a,username:s,shape:c,pixelSize:j[n]}),[n,t,s,c,a]);return x.jsx(P.Provider,{value:r,children:x.jsx(d,{ref:u,style:{width:j[n],height:j[n]},"data-spark-component":"avatar",className:m.cx("relative inline-flex items-center justify-center",e),...o,children:i})})});z.displayName="Avatar";const O=({className:e,asChild:n,src:t,onLoad:a,onError:s,...l})=>{const{username:i,isOnline:c,onlineText:o}=v(),u=n?h.Slot:"img",[d,r]=N.useState(!1),y=c&&o?`${i} (${o})`:i;if(N.useEffect(()=>{r(!1)},[t]),!t)return null;const g=A=>{r(!0),a?.(A)},p=A=>{r(!1),s?.(A)};return x.jsx(u,{"aria-hidden":!0,className:m.cx("absolute inset-0 size-full","object-cover",{"transition-all duration-300 group-hover:scale-120":l.onClick},"focus-visible:u-outline",d?"block":"hidden",e),alt:y,src:t,onLoad:g,onError:p,...l})};O.displayName="AvatarImage";const S=({className:e,children:n,asChild:t,angle:a=135,ariaLabel:s,...l})=>{const i=t?h.Slot:R.IconButton,{pixelSize:c,shape:o}=v();function u(y){const g=(90-a)*Math.PI/180,p=y/2;return{x:p+p*Math.cos(g),y:p-p*Math.sin(g)}}const d=u(c),r=t;return x.jsx(i,{"data-spark-component":"avatar-action",style:{position:"absolute",...o==="circle"?{left:`${d.x}px`,top:`${d.y}px`}:{},...o==="square"?{right:"0px",bottom:"0px"}:{}},className:m.cx("z-raised",o==="circle"?"-translate-x-1/2 -translate-y-1/2":"translate-x-1/4 translate-y-1/4",{"shadow-sm":!r},e),"aria-label":s,title:s,...r?{}:{size:"sm",intent:"support",design:"contrast"},...l,children:n||x.jsx(w.Icon,{size:"sm",children:x.jsx(q.PenOutline,{})})})};S.displayName="AvatarAction";const C=({angle:e=135,...n})=>{const{isOnline:t,pixelSize:a,shape:s,onlineText:l,size:i}=v();if(!t)return null;function c(u){const d=(90-e)*Math.PI/180,r=u/2;return{x:r+r*Math.cos(d),y:r-r*Math.sin(d)}}const o=c(a);return x.jsx("div",{"data-spark-component":"avatar-online-badge",role:"status","aria-label":l,style:{...s==="circle"?{left:`${o.x}px`,top:`${o.y}px`}:{right:"0px",bottom:"0px"}},className:m.cx("bg-success outline-surface absolute rounded-full",s==="circle"?"-translate-x-1/2 -translate-y-1/2":"translate-x-1/4 translate-y-1/4",["lg","xl","2xl"].includes(i)?m.cx("size-sz-12 outline-4"):m.cx("size-sz-8 outline-2")),...n})};C.displayName="AvatarOnlineBadge";const I=({asChild:e,children:n,className:t,...a})=>{const{shape:s,isOnline:l,onlineText:i,username:c}=v(),o=e?h.Slot:"div",u=l&&i?`${c} (${i})`:c;return x.jsx(o,{...!e&&{role:"img"},"aria-label":u,title:u,className:m.cx("group default:border-outline relative size-full overflow-hidden","focus-visible:u-outline",{"default:rounded-full":s==="circle","default:rounded-md":s==="square","hover:opacity-dim-1 cursor-pointer":e||a.onClick},t),...a,children:n})};I.displayName="AvatarUser";const M=({className:e,children:n,...t})=>{const{size:a,username:s}=v(),l=s?.charAt(0);return x.jsx("div",{"aria-hidden":!0,className:m.cx("absolute inset-0 flex size-full items-center justify-center","default:bg-neutral default:text-on-neutral",{"text-display-1":a==="2xl","text-display-2":["xl","lg"].includes(a),"text-display-3":a==="md","text-headline-2":a==="sm","text-body-2 font-bold":a==="xs"},e),...t,children:n||l})};M.displayName="AvatarPlaceholder";const f=z;f.Image=O;f.Action=S;f.OnlineBadge=C;f.User=I;f.Placeholder=M;exports.Avatar=f;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/avatar/index.mjs
CHANGED
|
@@ -2,10 +2,10 @@ import { jsx as m } from "react/jsx-runtime";
|
|
|
2
2
|
import { cx as p } from "class-variance-authority";
|
|
3
3
|
import * as g from "react";
|
|
4
4
|
import { useState as k, useEffect as B } from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { S as b } from "../Slot-DLY1rJrG.mjs";
|
|
6
6
|
import { PenOutline as O } from "@spark-ui/icons/PenOutline";
|
|
7
|
-
import { I as R } from "../Icon-
|
|
8
|
-
import { I as
|
|
7
|
+
import { I as R } from "../Icon-C23-htlD.mjs";
|
|
8
|
+
import { I as S } from "../IconButton-Mv9tO1ZH.mjs";
|
|
9
9
|
const z = g.createContext(void 0), f = () => {
|
|
10
10
|
const t = g.useContext(z);
|
|
11
11
|
if (!t)
|
|
@@ -106,7 +106,7 @@ const P = ({
|
|
|
106
106
|
ariaLabel: s,
|
|
107
107
|
...l
|
|
108
108
|
}) => {
|
|
109
|
-
const i = n ? b :
|
|
109
|
+
const i = n ? b : S, { pixelSize: c, shape: o } = f();
|
|
110
110
|
function u(y) {
|
|
111
111
|
const h = (90 - e) * Math.PI / 180, x = y / 2;
|
|
112
112
|
return {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { cx as m } from "class-variance-authority";
|
|
3
|
-
import {
|
|
4
|
-
import { T as N } from "../TextLink-
|
|
3
|
+
import { S as s } from "../Slot-DLY1rJrG.mjs";
|
|
4
|
+
import { T as N } from "../TextLink-D7mOCjY_.mjs";
|
|
5
5
|
import { ArrowVerticalRight as x } from "@spark-ui/icons/ArrowVerticalRight";
|
|
6
|
-
import { I as B } from "../Icon-
|
|
6
|
+
import { I as B } from "../Icon-C23-htlD.mjs";
|
|
7
7
|
const u = ({
|
|
8
8
|
className: e,
|
|
9
9
|
"aria-label": r,
|
package/dist/button/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../Button-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../Button-BIAkZTRR.js");exports.Button=t.Button;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/button/index.mjs
CHANGED
package/dist/card/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import { makeVariants as g, tw as e } from "@spark-ui/internal-utils";
|
|
3
3
|
import { cva as p } from "class-variance-authority";
|
|
4
|
-
import {
|
|
4
|
+
import { S as h } from "../Slot-DLY1rJrG.mjs";
|
|
5
5
|
import { createContext as B, useContext as E, Children as x, isValidElement as C } from "react";
|
|
6
6
|
const M = p(
|
|
7
7
|
[
|
package/dist/carousel/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),k=require("class-variance-authority"),s=require("react"),se=require("@spark-ui/icons/ArrowVerticalRight"),O=require("../Icon-CF0W0LKr.js"),$=require("../IconButton-D3g86WpZ.js"),oe=require("@spark-ui/icons/ArrowVerticalLeft");function ae(e){const t=s.useRef(new Map),r=s.useRef(null),n=s.useRef(new Map),o=s.useCallback(()=>u=>{u.forEach(d=>{const b=d.isIntersecting,S=d.target;t.current.set(S,b);const h=n.current.get(S);h&&h(b)})},[]),a=s.useCallback(()=>{if(r.current)return r.current;const u=e.current;if(!u)return null;const d=new IntersectionObserver(o(),{root:u,threshold:.2});return r.current=d,d},[e,o]);s.useEffect(()=>{const u=a(),d=t.current,b=n.current;return()=>{u&&(u.disconnect(),d.clear(),b.clear(),r.current=null)}},[a]);const i=s.useCallback((u,d)=>{if(!u)return;const b=a();if(!b){setTimeout(()=>i(u,d),0);return}const S=t.current.get(u)??!0;t.current.set(u,S),n.current.set(u,d),b.observe(u),d(S)},[a]),c=s.useCallback(u=>{if(!u)return;const d=r.current;d&&d.unobserve(u),t.current.delete(u),n.current.delete(u)},[]),g=s.useCallback(u=>u?t.current.get(u)??!0:!0,[]);return{registerSlide:i,unregisterSlide:c,isSlideVisible:g}}function ie(e){const t=s.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return s.useLayoutEffect(()=>{t.current=e}),s.useCallback((...r)=>t.current?.(...r),[])}const ce=()=>{const e=s.useRef(!1);return s.useEffect(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function ue(e,t){const r=s.useRef(0),n=s.useRef(null);s.useEffect(()=>{const o=e.current;if(!o)return;const a="onscrollend"in window,i=()=>{t()},c=()=>{n.current&&clearTimeout(n.current),e.current&&(r.current=e.current.scrollLeft,n.current=setTimeout(()=>{e.current&&i()},150))};return a?o.addEventListener("scrollend",i):o.addEventListener("scroll",c),()=>{n.current&&clearTimeout(n.current),a?o.removeEventListener("scrollend",i):o.removeEventListener("scroll",c)}},[t,e])}function le(e,t){s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const n=new ResizeObserver(o=>{for(const a of o)t(a.contentRect.width)});return n.observe(r),()=>n.disconnect()},[e,t])}function de({totalSlides:e,slidesPerMove:t,slidesPerPage:r}){const n=t==="auto"?r:t,o=[],a=Math.floor((e-r)/n)*n;for(let i=0;i<=a;i+=n)o.push(i);return o[o.length-1]!==e-r&&o.push(e-r),o}function q(e){return e?Array.from(e.querySelectorAll('[data-part="item"]')):[]}function _(e,{container:t,slidesPerMove:r,slidesPerPage:n}){return de({totalSlides:q(t).length,slidesPerPage:n,slidesPerMove:r}).includes(e)}function B({container:e,slidesPerMove:t,slidesPerPage:r}){return e?q(e).filter((n,o)=>_(o,{slidesPerMove:t,slidesPerPage:r,container:e})).map(n=>n.offsetLeft):[]}function fe({dotIndex:e,pageState:t,totalPages:r,maxDots:n=5}){if(r<=n)return e===t?"active":"idle";if(t<=Math.floor(n/2))return e>n-1?"hidden":e===t?"active":e===n-1?"edge":"idle";if(t>=r-Math.ceil(n/2)){const i=r-n;return e<i?"hidden":e===t?"active":e===i?"edge":"idle"}const o=t-Math.floor(n/2),a=t+Math.floor(n/2);return e<o||e>a?"hidden":e===t?"active":e===o||e===a?"edge":"idle"}function pe(e=[],{carouselRef:t,slidesPerMove:r,slidesPerPage:n}){const[o,a]=s.useState(e),i=s.useMemo(()=>o,[o]);return le(t,()=>{const c=B({slidesPerMove:r,slidesPerPage:n,container:t.current});JSON.stringify(o)!==JSON.stringify(c)&&a(c)}),[i,a]}const x="carousel",N="ltr",ge=({defaultPage:e,gap:t=16,snapType:r="mandatory",snapStop:n="always",scrollPadding:o=0,slidesPerPage:a=1,slidesPerMove:i="auto",scrollBehavior:c="smooth",loop:g=!1,pagePickerInset:u=!1,maxDots:d=5,page:b,onPageChange:S})=>{const h=s.useId(),[f,I]=s.useState(e||b||0),C=s.useRef(null),M=s.useRef([]),T=ce().current,L=ie(S),{registerSlide:D,unregisterSlide:ee,isSlideVisible:te}=ae(C),[m]=pe([],{carouselRef:C,slidesPerMove:i,slidesPerPage:a}),P=s.useRef(g||f>0),R=s.useRef(g||f<m.length-1);P.current=g||f>0,R.current=g||f<m.length-1;const j=s.useCallback(l=>{l!==f&&(I(l),L?.(l))},[L,f]),y=s.useCallback((l,v)=>{C.current&&(C.current.scrollTo({left:m[l],behavior:v==="instant"?"auto":"smooth"}),j(l))},[j,m]),z=s.useCallback(l=>{if(P){const v=g&&f===0?m.length-1:Math.max(f-1,0);y(v,c),l?.(v)}},[g,m,f,c,y]),A=s.useCallback(l=>{if(R){const v=g&&f===m.length-1?0:Math.min(f+1,m.length-1);y(v,c),l?.(v)}},[g,m,f,c,y]);s.useEffect(()=>{b!=null&&y(b,c)},[b,c,y]),s.useLayoutEffect(()=>{if(e!=null&&!T&&C.current){const l=B({container:C.current,slidesPerMove:i,slidesPerPage:a});C.current.scrollTo({left:l[e],behavior:"instant"})}},[e,T,i,a]);const re=s.useCallback(()=>{if(!C.current||m.length===0)return;const{scrollLeft:l}=C.current,v=m.map(V=>Math.abs(l-V)),E=v.indexOf(Math.min(...v));E!==-1&&j(E)},[m,j]);return ue(C,re),{ref:C,pageIndicatorsRefs:M,gap:t,snapType:r,snapStop:n,scrollPadding:o,slidesPerPage:a,slidesPerMove:i,scrollBehavior:c,loop:g,pagePickerInset:u,maxDots:d,page:f,pageSnapPoints:m,canScrollNext:R.current,canScrollPrev:P.current,scrollTo:y,scrollPrev:z,scrollNext:A,registerSlide:D,unregisterSlide:ee,isSlideVisible:te,getRootProps:()=>({id:`carousel::${h}:`,role:"region","aria-roledescription":"carousel","data-scope":x,"data-part":"root","data-orientation":"horizontal",dir:N,style:{"--slides-per-page":a,"--slide-spacing":`${t}px`,"--slide-item-size":"calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"}}),getControlProps:()=>({"data-scope":x,"data-part":"control","data-orientation":"horizontal"}),getPrevTriggerProps:()=>({id:`carousel::${h}::prev-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"prev-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!P.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${h}::next-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"next-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!R.current,onClick:()=>A()}),getSlidesContainerProps:()=>({id:`carousel::${h}::item-group`,"aria-live":a>1?"off":"polite","data-scope":x,"data-part":"item-group","data-orientation":"horizontal",dir:N,tabIndex:0,style:{display:"grid",gap:"var(--slide-spacing)",scrollSnapType:`x ${r}`,gridAutoFlow:"column",scrollbarWidth:"none",gridAutoColumns:"var(--slide-item-size)",overflowX:"auto"},ref:C}),getSlideProps:({index:l})=>{const v=_(l,{container:C.current,slidesPerMove:i,slidesPerPage:a});return{id:`carousel::${h}::item:${l}`,role:"group","aria-roledescription":"slide","data-scope":x,"data-part":"item","data-index":l,"data-orientation":"horizontal",dir:N,style:{...v&&{scrollSnapAlign:"start",scrollSnapStop:n}}}},getIndicatorGroupProps:()=>({role:"radiogroup",id:`carousel::${h}::indicator-group`,"data-scope":x,"data-part":"indicator-group","data-orientation":"horizontal",dir:N}),getIndicatorProps:({index:l})=>{const v=fe({dotIndex:l,pageState:f,totalPages:m.length,maxDots:d});return{role:"radio",id:`carousel::${h}::indicator:${l}`,"aria-checked":l===f,"data-scope":x,"data-part":"indicator","data-orientation":"horizontal","data-index":l,"data-state":v,tabIndex:l===f?0:-1,onClick:()=>{y(l,c)},onKeyDown:E=>{const V=ne=>{M.current[ne]?.focus()};E.key==="ArrowRight"&&R?A(V):E.key==="ArrowLeft"&&P&&z(V)}}}}},F=s.createContext(null),G=({className:e,snapType:t="mandatory",snapStop:r="always",scrollBehavior:n="smooth",slidesPerMove:o="auto",pagePickerInset:a=!1,slidesPerPage:i=1,loop:c=!1,children:g,gap:u=16,defaultPage:d,page:b,onPageChange:S,maxDots:h=5,...f})=>{const I=ge({defaultPage:d,slidesPerPage:i,slidesPerMove:o,loop:c,gap:u,scrollBehavior:n,snapStop:r,snapType:t,page:b,pagePickerInset:a,onPageChange:S,maxDots:h});return p.jsx(F.Provider,{value:{...I,scrollBehavior:n},children:p.jsx("div",{"data-spark-component":"carousel",className:k.cx("gap-lg relative box-border flex flex-col",e),...I.getRootProps(),...f,children:g})})};G.displayName="Carousel";const w=()=>{const e=s.useContext(F);if(!e)throw Error("useCarouselContext must be used within a Carousel provider");return e},J=({children:e,className:t,...r})=>{const n=w();return p.jsx("div",{"data-spark-component":"carousel-controls",className:k.cx("default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",t),...n.getControlProps(),...r,children:e})};J.displayName="Carousel.Controls";const W=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-next-button",...r.getNextTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(se.ArrowVerticalRight,{})})})};W.displayName="Carousel.NextButton";const K=({children:e,unstyled:t=!1,index:r,"aria-label":n,className:o,intent:a="basic"})=>{const i=w(),c=s.useRef(null);s.useEffect(()=>{i.pageIndicatorsRefs.current&&(i.pageIndicatorsRefs.current[r]=c.current)});const g=i.getIndicatorProps({index:r});return p.jsx("button",{"data-spark-component":"carousel-page-indicator",ref:c,...g,"aria-label":n,className:k.cx({[k.cx("border-outline group relative flex justify-center border-0 hover:cursor-pointer","m-sm rounded-sm transition-all duration-[200ms] ease-linear","w-sz-8 h-sz-8","data-[state=active]:w-sz-32 data-[state=active]:h-sz-8","data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4","data-[state=hidden]:m-0 data-[state=hidden]:size-0",a==="surface"?"data-[state=active]:bg-surface bg-surface/dim-2":"data-[state=active]:bg-basic bg-on-surface/dim-2")]:!t},o),children:e},r)};K.displayName="Carousel.PageIndicator";const X=({children:e,className:t})=>{const r=w();return p.jsx(p.Fragment,{children:p.jsx("div",{"data-spark-component":"carousel-page-picker",...r.getIndicatorGroupProps(),className:k.cx("flex-wrap items-center justify-center","default:min-h-sz-16 flex",r.pagePickerInset&&"bottom-sz-12 absolute inset-x-0",t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(n,o)=>o)})})})};X.displayName="Carousel.PagePicker";const H=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-prev-button",...r.getPrevTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(oe.ArrowVerticalLeft,{})})})};H.displayName="Carousel.PrevButton";function be(e,t){const[r,n]=s.useState(!0),o=w();return s.useEffect(()=>{const a=e.current;if(!a)return;const{registerSlide:i,unregisterSlide:c}=o;return i(a,n),()=>{c(a)}},[e]),r}const Q=({children:e,index:t=0,totalSlides:r,className:n="",...o})=>{const a=s.useRef(null),i=w(),c=be(a,i.ref);return p.jsx("div",{"data-spark-component":"carousel-slide",ref:a,...i.getSlideProps({index:t,totalSlides:r}),className:k.cx("default:bg-surface relative overflow-hidden",n),"aria-hidden":!c,inert:!c,...o,children:e})};Q.displayName="Carousel.Slide";const U=({children:e,className:t=""})=>{const r=w(),n=s.Children.toArray(e);return p.jsx("div",{"data-spark-component":"carousel-slides",...r.getSlidesContainerProps(),className:k.cx("focus-visible:u-outline relative w-full","[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",t),children:n.map((o,a)=>s.isValidElement(o)?s.cloneElement(o,{index:a,totalSlides:n.length}):o)})};U.displayName="Carousel.Slides";const Y=({children:e})=>p.jsx("div",{className:"relative flex items-center justify-around p-0",children:e});Y.displayName="Carousel.Viewport";const Z=Object.assign(G,{Controls:J,NextButton:W,PrevButton:H,Slide:Q,Slides:U,Viewport:Y,PagePicker:X,PageIndicator:K});Z.displayName="Carousel";exports.Carousel=Z;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),k=require("class-variance-authority"),s=require("react"),se=require("@spark-ui/icons/ArrowVerticalRight"),O=require("../Icon-CF0W0LKr.js"),$=require("../IconButton-D5fk89W-.js"),oe=require("@spark-ui/icons/ArrowVerticalLeft");function ae(e){const t=s.useRef(new Map),r=s.useRef(null),n=s.useRef(new Map),o=s.useCallback(()=>u=>{u.forEach(d=>{const b=d.isIntersecting,S=d.target;t.current.set(S,b);const h=n.current.get(S);h&&h(b)})},[]),a=s.useCallback(()=>{if(r.current)return r.current;const u=e.current;if(!u)return null;const d=new IntersectionObserver(o(),{root:u,threshold:.2});return r.current=d,d},[e,o]);s.useEffect(()=>{const u=a(),d=t.current,b=n.current;return()=>{u&&(u.disconnect(),d.clear(),b.clear(),r.current=null)}},[a]);const i=s.useCallback((u,d)=>{if(!u)return;const b=a();if(!b){setTimeout(()=>i(u,d),0);return}const S=t.current.get(u)??!0;t.current.set(u,S),n.current.set(u,d),b.observe(u),d(S)},[a]),c=s.useCallback(u=>{if(!u)return;const d=r.current;d&&d.unobserve(u),t.current.delete(u),n.current.delete(u)},[]),g=s.useCallback(u=>u?t.current.get(u)??!0:!0,[]);return{registerSlide:i,unregisterSlide:c,isSlideVisible:g}}function ie(e){const t=s.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return s.useLayoutEffect(()=>{t.current=e}),s.useCallback((...r)=>t.current?.(...r),[])}const ce=()=>{const e=s.useRef(!1);return s.useEffect(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function ue(e,t){const r=s.useRef(0),n=s.useRef(null);s.useEffect(()=>{const o=e.current;if(!o)return;const a="onscrollend"in window,i=()=>{t()},c=()=>{n.current&&clearTimeout(n.current),e.current&&(r.current=e.current.scrollLeft,n.current=setTimeout(()=>{e.current&&i()},150))};return a?o.addEventListener("scrollend",i):o.addEventListener("scroll",c),()=>{n.current&&clearTimeout(n.current),a?o.removeEventListener("scrollend",i):o.removeEventListener("scroll",c)}},[t,e])}function le(e,t){s.useLayoutEffect(()=>{const r=e.current;if(!r)return;const n=new ResizeObserver(o=>{for(const a of o)t(a.contentRect.width)});return n.observe(r),()=>n.disconnect()},[e,t])}function de({totalSlides:e,slidesPerMove:t,slidesPerPage:r}){const n=t==="auto"?r:t,o=[],a=Math.floor((e-r)/n)*n;for(let i=0;i<=a;i+=n)o.push(i);return o[o.length-1]!==e-r&&o.push(e-r),o}function q(e){return e?Array.from(e.querySelectorAll('[data-part="item"]')):[]}function _(e,{container:t,slidesPerMove:r,slidesPerPage:n}){return de({totalSlides:q(t).length,slidesPerPage:n,slidesPerMove:r}).includes(e)}function B({container:e,slidesPerMove:t,slidesPerPage:r}){return e?q(e).filter((n,o)=>_(o,{slidesPerMove:t,slidesPerPage:r,container:e})).map(n=>n.offsetLeft):[]}function fe({dotIndex:e,pageState:t,totalPages:r,maxDots:n=5}){if(r<=n)return e===t?"active":"idle";if(t<=Math.floor(n/2))return e>n-1?"hidden":e===t?"active":e===n-1?"edge":"idle";if(t>=r-Math.ceil(n/2)){const i=r-n;return e<i?"hidden":e===t?"active":e===i?"edge":"idle"}const o=t-Math.floor(n/2),a=t+Math.floor(n/2);return e<o||e>a?"hidden":e===t?"active":e===o||e===a?"edge":"idle"}function pe(e=[],{carouselRef:t,slidesPerMove:r,slidesPerPage:n}){const[o,a]=s.useState(e),i=s.useMemo(()=>o,[o]);return le(t,()=>{const c=B({slidesPerMove:r,slidesPerPage:n,container:t.current});JSON.stringify(o)!==JSON.stringify(c)&&a(c)}),[i,a]}const x="carousel",N="ltr",ge=({defaultPage:e,gap:t=16,snapType:r="mandatory",snapStop:n="always",scrollPadding:o=0,slidesPerPage:a=1,slidesPerMove:i="auto",scrollBehavior:c="smooth",loop:g=!1,pagePickerInset:u=!1,maxDots:d=5,page:b,onPageChange:S})=>{const h=s.useId(),[f,I]=s.useState(e||b||0),C=s.useRef(null),M=s.useRef([]),T=ce().current,L=ie(S),{registerSlide:D,unregisterSlide:ee,isSlideVisible:te}=ae(C),[m]=pe([],{carouselRef:C,slidesPerMove:i,slidesPerPage:a}),P=s.useRef(g||f>0),R=s.useRef(g||f<m.length-1);P.current=g||f>0,R.current=g||f<m.length-1;const j=s.useCallback(l=>{l!==f&&(I(l),L?.(l))},[L,f]),y=s.useCallback((l,v)=>{C.current&&(C.current.scrollTo({left:m[l],behavior:v==="instant"?"auto":"smooth"}),j(l))},[j,m]),z=s.useCallback(l=>{if(P){const v=g&&f===0?m.length-1:Math.max(f-1,0);y(v,c),l?.(v)}},[g,m,f,c,y]),A=s.useCallback(l=>{if(R){const v=g&&f===m.length-1?0:Math.min(f+1,m.length-1);y(v,c),l?.(v)}},[g,m,f,c,y]);s.useEffect(()=>{b!=null&&y(b,c)},[b,c,y]),s.useLayoutEffect(()=>{if(e!=null&&!T&&C.current){const l=B({container:C.current,slidesPerMove:i,slidesPerPage:a});C.current.scrollTo({left:l[e],behavior:"instant"})}},[e,T,i,a]);const re=s.useCallback(()=>{if(!C.current||m.length===0)return;const{scrollLeft:l}=C.current,v=m.map(V=>Math.abs(l-V)),E=v.indexOf(Math.min(...v));E!==-1&&j(E)},[m,j]);return ue(C,re),{ref:C,pageIndicatorsRefs:M,gap:t,snapType:r,snapStop:n,scrollPadding:o,slidesPerPage:a,slidesPerMove:i,scrollBehavior:c,loop:g,pagePickerInset:u,maxDots:d,page:f,pageSnapPoints:m,canScrollNext:R.current,canScrollPrev:P.current,scrollTo:y,scrollPrev:z,scrollNext:A,registerSlide:D,unregisterSlide:ee,isSlideVisible:te,getRootProps:()=>({id:`carousel::${h}:`,role:"region","aria-roledescription":"carousel","data-scope":x,"data-part":"root","data-orientation":"horizontal",dir:N,style:{"--slides-per-page":a,"--slide-spacing":`${t}px`,"--slide-item-size":"calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))"}}),getControlProps:()=>({"data-scope":x,"data-part":"control","data-orientation":"horizontal"}),getPrevTriggerProps:()=>({id:`carousel::${h}::prev-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"prev-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!P.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${h}::next-trigger`,"aria-controls":`carousel::${h}::item-group`,"data-scope":x,"data-part":"next-trigger","data-orientation":"horizontal",type:"button",dir:N,disabled:!R.current,onClick:()=>A()}),getSlidesContainerProps:()=>({id:`carousel::${h}::item-group`,"aria-live":a>1?"off":"polite","data-scope":x,"data-part":"item-group","data-orientation":"horizontal",dir:N,tabIndex:0,style:{display:"grid",gap:"var(--slide-spacing)",scrollSnapType:`x ${r}`,gridAutoFlow:"column",scrollbarWidth:"none",gridAutoColumns:"var(--slide-item-size)",overflowX:"auto"},ref:C}),getSlideProps:({index:l})=>{const v=_(l,{container:C.current,slidesPerMove:i,slidesPerPage:a});return{id:`carousel::${h}::item:${l}`,role:"group","aria-roledescription":"slide","data-scope":x,"data-part":"item","data-index":l,"data-orientation":"horizontal",dir:N,style:{...v&&{scrollSnapAlign:"start",scrollSnapStop:n}}}},getIndicatorGroupProps:()=>({role:"radiogroup",id:`carousel::${h}::indicator-group`,"data-scope":x,"data-part":"indicator-group","data-orientation":"horizontal",dir:N}),getIndicatorProps:({index:l})=>{const v=fe({dotIndex:l,pageState:f,totalPages:m.length,maxDots:d});return{role:"radio",id:`carousel::${h}::indicator:${l}`,"aria-checked":l===f,"data-scope":x,"data-part":"indicator","data-orientation":"horizontal","data-index":l,"data-state":v,tabIndex:l===f?0:-1,onClick:()=>{y(l,c)},onKeyDown:E=>{const V=ne=>{M.current[ne]?.focus()};E.key==="ArrowRight"&&R?A(V):E.key==="ArrowLeft"&&P&&z(V)}}}}},F=s.createContext(null),G=({className:e,snapType:t="mandatory",snapStop:r="always",scrollBehavior:n="smooth",slidesPerMove:o="auto",pagePickerInset:a=!1,slidesPerPage:i=1,loop:c=!1,children:g,gap:u=16,defaultPage:d,page:b,onPageChange:S,maxDots:h=5,...f})=>{const I=ge({defaultPage:d,slidesPerPage:i,slidesPerMove:o,loop:c,gap:u,scrollBehavior:n,snapStop:r,snapType:t,page:b,pagePickerInset:a,onPageChange:S,maxDots:h});return p.jsx(F.Provider,{value:{...I,scrollBehavior:n},children:p.jsx("div",{"data-spark-component":"carousel",className:k.cx("gap-lg relative box-border flex flex-col",e),...I.getRootProps(),...f,children:g})})};G.displayName="Carousel";const w=()=>{const e=s.useContext(F);if(!e)throw Error("useCarouselContext must be used within a Carousel provider");return e},J=({children:e,className:t,...r})=>{const n=w();return p.jsx("div",{"data-spark-component":"carousel-controls",className:k.cx("default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between",t),...n.getControlProps(),...r,children:e})};J.displayName="Carousel.Controls";const W=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-next-button",...r.getNextTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(se.ArrowVerticalRight,{})})})};W.displayName="Carousel.NextButton";const K=({children:e,unstyled:t=!1,index:r,"aria-label":n,className:o,intent:a="basic"})=>{const i=w(),c=s.useRef(null);s.useEffect(()=>{i.pageIndicatorsRefs.current&&(i.pageIndicatorsRefs.current[r]=c.current)});const g=i.getIndicatorProps({index:r});return p.jsx("button",{"data-spark-component":"carousel-page-indicator",ref:c,...g,"aria-label":n,className:k.cx({[k.cx("border-outline group relative flex justify-center border-0 hover:cursor-pointer","m-sm rounded-sm transition-all duration-[200ms] ease-linear","w-sz-8 h-sz-8","data-[state=active]:w-sz-32 data-[state=active]:h-sz-8","data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4","data-[state=hidden]:m-0 data-[state=hidden]:size-0",a==="surface"?"data-[state=active]:bg-surface bg-surface/dim-2":"data-[state=active]:bg-basic bg-on-surface/dim-2")]:!t},o),children:e},r)};K.displayName="Carousel.PageIndicator";const X=({children:e,className:t})=>{const r=w();return p.jsx(p.Fragment,{children:p.jsx("div",{"data-spark-component":"carousel-page-picker",...r.getIndicatorGroupProps(),className:k.cx("flex-wrap items-center justify-center","default:min-h-sz-16 flex",r.pagePickerInset&&"bottom-sz-12 absolute inset-x-0",t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(n,o)=>o)})})})};X.displayName="Carousel.PagePicker";const H=({"aria-label":e,...t})=>{const r=w();return p.jsx($.IconButton,{"data-spark-component":"carousel-prev-button",...r.getPrevTriggerProps(),intent:"surface",design:"filled",className:"pointer-events-auto cursor-pointer shadow-sm disabled:invisible","aria-label":e,...t,children:p.jsx(O.Icon,{children:p.jsx(oe.ArrowVerticalLeft,{})})})};H.displayName="Carousel.PrevButton";function be(e,t){const[r,n]=s.useState(!0),o=w();return s.useEffect(()=>{const a=e.current;if(!a)return;const{registerSlide:i,unregisterSlide:c}=o;return i(a,n),()=>{c(a)}},[e]),r}const Q=({children:e,index:t=0,totalSlides:r,className:n="",...o})=>{const a=s.useRef(null),i=w(),c=be(a,i.ref);return p.jsx("div",{"data-spark-component":"carousel-slide",ref:a,...i.getSlideProps({index:t,totalSlides:r}),className:k.cx("default:bg-surface relative overflow-hidden",n),"aria-hidden":!c,inert:!c,...o,children:e})};Q.displayName="Carousel.Slide";const U=({children:e,className:t=""})=>{const r=w(),n=s.Children.toArray(e);return p.jsx("div",{"data-spark-component":"carousel-slides",...r.getSlidesContainerProps(),className:k.cx("focus-visible:u-outline relative w-full","[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",t),children:n.map((o,a)=>s.isValidElement(o)?s.cloneElement(o,{index:a,totalSlides:n.length}):o)})};U.displayName="Carousel.Slides";const Y=({children:e})=>p.jsx("div",{className:"relative flex items-center justify-around p-0",children:e});Y.displayName="Carousel.Viewport";const Z=Object.assign(G,{Controls:J,NextButton:W,PrevButton:H,Slide:Q,Slides:U,Viewport:Y,PagePicker:X,PageIndicator:K});Z.displayName="Carousel";exports.Carousel=Z;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/carousel/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as f, Fragment as it } from "react/jsx-runtime";
|
|
2
2
|
import { cx as x } from "class-variance-authority";
|
|
3
|
-
import { useRef as C, useCallback as S, useEffect as k, useLayoutEffect as R, useState as L, useMemo as ct, useId as lt, createContext as ut, useContext as dt, Children as pt,
|
|
3
|
+
import { useRef as C, useCallback as S, useEffect as k, useLayoutEffect as R, useState as L, useMemo as ct, useId as lt, createContext as ut, useContext as dt, Children as pt, isValidElement as ft, cloneElement as gt } from "react";
|
|
4
4
|
import { ArrowVerticalRight as mt } from "@spark-ui/icons/ArrowVerticalRight";
|
|
5
|
-
import { I as G } from "../Icon-
|
|
6
|
-
import { I as J } from "../IconButton-
|
|
5
|
+
import { I as G } from "../Icon-C23-htlD.mjs";
|
|
6
|
+
import { I as J } from "../IconButton-Mv9tO1ZH.mjs";
|
|
7
7
|
import { ArrowVerticalLeft as bt } from "@spark-ui/icons/ArrowVerticalLeft";
|
|
8
8
|
function ht(t) {
|
|
9
9
|
const e = C(/* @__PURE__ */ new Map()), r = C(null), n = C(/* @__PURE__ */ new Map()), o = S(() => (c) => {
|
|
@@ -611,7 +611,7 @@ const tt = ({ children: t, className: e = "" }) => {
|
|
|
611
611
|
e
|
|
612
612
|
),
|
|
613
613
|
children: n.map(
|
|
614
|
-
(o, s) =>
|
|
614
|
+
(o, s) => ft(o) ? gt(o, {
|
|
615
615
|
index: s,
|
|
616
616
|
totalSlides: n.length
|
|
617
617
|
}) : o
|
package/dist/checkbox/index.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { createContext as ne, useContext as oe, useId as A, useRef as X, useMemo
|
|
|
6
6
|
import { Check as ie } from "@spark-ui/icons/Check";
|
|
7
7
|
import { Minus as se } from "@spark-ui/icons/Minus";
|
|
8
8
|
import { Checkbox as B } from "radix-ui";
|
|
9
|
-
import { I as de } from "../Icon-
|
|
9
|
+
import { I as de } from "../Icon-C23-htlD.mjs";
|
|
10
10
|
import { makeVariants as le } from "@spark-ui/internal-utils";
|
|
11
11
|
import { Label as be } from "../label/index.mjs";
|
|
12
12
|
import { useCombinedState as ue } from "@spark-ui/hooks/use-combined-state";
|
package/dist/chip/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("@spark-ui/internal-utils"),g=require("class-variance-authority"),f=require("react"),j=require("@spark-ui/hooks/use-combined-state"),V=require("emulate-tab"),k=require("../Slot-DQ8z2zsy.js"),D=require("@spark-ui/icons/Close"),A=require("../Icon-CF0W0LKr.js"),O=[{design:"outlined",intent:"main",class:e.tw(["enabled:hover:bg-main/dim-5","enabled:active:bg-main/dim-5","focus-visible:bg-main/dim-5","aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1","text-main"])},{design:"outlined",intent:"support",class:e.tw(["enabled:hover:bg-support/dim-5","enabled:active:bg-support/dim-5","focus-visible:bg-support/dim-5","aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1","text-support"])},{design:"outlined",intent:"basic",class:e.tw(["enabled:hover:bg-basic/dim-5","enabled:active:bg-basic/dim-5","focus-visible:bg-basic/dim-5","aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1","text-basic"])},{intent:"accent",design:"outlined",class:e.tw(["enabled:hover:bg-accent/dim-5","enabled:active:bg-accent/dim-5","focus-visible:bg-accent/dim-5","aria-pressed:bg-accent-container","aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1","text-accent"])},{design:"outlined",intent:"success",class:e.tw(["enabled:hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5","aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1","text-success"])},{intent:"alert",design:"outlined",class:e.tw(["enabled:hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5","aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1","text-alert"])},{design:"outlined",intent:"danger",class:e.tw(["enabled:hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5","aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1","text-error"])},{design:"outlined",intent:"info",class:e.tw(["enabled:hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5","aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1","text-info"])},{design:"outlined",intent:"neutral",class:e.tw(["enabled:hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5","aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1","text-neutral"])},{design:"outlined",intent:"surface",class:e.tw(["enabled:hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered","text-surface"])},{design:"outlined",hasClearButton:!1,class:e.tw(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])},{design:"outlined",hasClearButton:!0,class:e.tw(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])}],R=[{intent:"main",design:"tinted",class:e.tw(["bg-main-container","enabled:hover:bg-main-container-hovered","enabled:active:bg-main-container-hovered","focus-visible:bg-main-container-hovered","aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1","text-on-main-container"])},{intent:"support",design:"tinted",class:e.tw(["bg-support-container","enabled:hover:bg-support-container-hovered","enabled:active:bg-support-container-hovered","focus-visible:bg-support-container-hovered","aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1","text-on-support-container"])},{intent:"basic",design:"tinted",class:e.tw(["bg-basic-container","enabled:hover:bg-basic-container-hovered","enabled:active:bg-basic-container-hovered","focus-visible:bg-basic-container-hovered","aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1","text-on-basic-container"])},{intent:"accent",design:"tinted",class:e.tw(["bg-accent-container","enabled:hover:bg-accent-container-hovered","enabled:active:bg-accent-container-hovered","focus-visible:bg-accent-container-hovered","aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1","text-on-accent-container"])},{intent:"success",design:"tinted",class:e.tw(["bg-success-container","enabled:hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-hovered","aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1","text-on-success-container"])},{intent:"alert",design:"tinted",class:e.tw(["bg-alert-container","enabled:hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-hovered","aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1","text-on-alert-container"])},{intent:"danger",design:"tinted",class:e.tw(["bg-error-container","enabled:hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-hovered","aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1","text-on-error-container"])},{intent:"info",design:"tinted",class:e.tw(["bg-info-container","enabled:hover:bg-info-container-hovered","enabled:active:bg-info-container-hovered","focus-visible:bg-info-container-hovered","aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1","text-on-info-container"])},{intent:"neutral",design:"tinted",class:e.tw(["bg-neutral-container","enabled:hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-hovered","aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1","text-on-neutral-container"])},{intent:"surface",design:"tinted",class:e.tw(["bg-surface/dim-1","enabled:hover:bg-surface-hovered/dim-1","enabled:active:bg-surface-hovered/dim-1","focus-visible:bg-surface-hovered/dim-1","aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered","text-on-surface/dim-1"])},{design:"tinted",hasClearButton:!1,class:e.tw(["px-md"])},{design:"tinted",hasClearButton:!0,class:e.tw(["pl-md"])}],$=[{intent:"main",design:"dashed",class:e.tw(["enabled:hover:bg-main/dim-5","enabled:active:bg-main/dim-5","focus-visible:bg-main/dim-5","aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1","text-main"])},{intent:"support",design:"dashed",class:e.tw(["enabled:hover:bg-support/dim-5","enabled:active:bg-support/dim-5","focus-visible:bg-support/dim-5","aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1","text-support"])},{intent:"basic",design:"dashed",class:e.tw(["enabled:hover:bg-basic/dim-5","enabled:active:bg-basic/dim-5","focus-visible:bg-basic/dim-5","aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1","text-basic"])},{intent:"accent",design:"dashed",class:e.tw(["enabled:hover:bg-accent/dim-5","enabled:active:bg-accent/dim-5","focus-visible:bg-accent/dim-5","aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1","text-accent"])},{intent:"success",design:"dashed",class:e.tw(["enabled:hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5","aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1","text-success"])},{intent:"alert",design:"dashed",class:e.tw(["enabled:hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5","aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1","text-alert"])},{intent:"danger",design:"dashed",class:e.tw(["enabled:hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5","aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1","text-error"])},{intent:"info",design:"dashed",class:e.tw(["enabled:hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5","aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1","text-info"])},{intent:"neutral",design:"dashed",class:e.tw(["enabled:hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5","aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1","text-neutral"])},{intent:"surface",design:"dashed",class:e.tw(["enabled:hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered","text-surface"])},{design:"dashed",hasClearButton:!1,class:e.tw(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])},{design:"dashed",hasClearButton:!0,class:e.tw(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])}],F=g.cva(["box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-md text-body-1 font-regular","focus-visible:u-outline","ease-out duration-150"],{variants:{design:e.makeVariants({outlined:["bg-transparent border-sm border-solid border-current"],tinted:[""],dashed:["bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high"]}),intent:e.makeVariants({main:[],support:[],basic:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),disabled:{true:["cursor-not-allowed","opacity-dim-3"]},hasClearButton:{true:[],false:[]}},compoundVariants:[...O,...R,...$],defaultVariants:{design:"outlined",intent:"basic"}}),E=f.createContext({}),H=()=>f.useContext(E)||{},K=a=>a?a.type.displayName:"",M=a=>(...n)=>f.Children.toArray(a).filter(f.isValidElement).find(o=>{const r=K(o);return n.includes(r||"")}),U=({onClick:a,asChild:n,pressed:i,defaultPressed:o,disabled:r,value:d,defaultValue:c,children:m,onClear:l})=>{const[t,y]=j.useCombinedState(i,o),[C]=j.useCombinedState(d,c),v=M(m),b=v("Chip.LeadingIcon"),w=v("Chip.TrailingIcon"),h=v("Chip.Content"),u=v("Chip.ClearButton"),z=(a||t)!==void 0,N=[b,h,u].every(p=>p===void 0)?s.jsx("span",{className:"inline-block grow truncate",children:m}):s.jsxs(s.Fragment,{children:[b,h,b===void 0?w:null,u]}),I=p=>{u&&!r&&["Delete","Backspace"].includes(p.key)&&l&&(l(),p.key==="Delete"&&V.emulateTab(),p.key==="Backspace"&&V.emulateTab.backwards())};return z?{Element:n?k.Slot:"button",chipProps:{type:"button",...t!==void 0&&{"aria-pressed":t,"data-state":t?"on":"off"},onClick:p=>{t!==void 0&&y(!t),a&&a(p,{pressed:t,value:C})},onKeyDown:I,disabled:r,children:N},compoundElements:{leadingIcon:b,trailingIcon:w,content:h,clearButton:u}}:{Element:n?k.Slot:"div",chipProps:{"aria-disabled":r,children:N,onKeyDown:I},compoundElements:{leadingIcon:b,trailingIcon:w,content:h,clearButton:u}}},S=({design:a="outlined",disabled:n,children:i,intent:o="basic",defaultPressed:r,pressed:d,asChild:c,className:m,onClick:l,onClear:t,ref:y,...C})=>{const{Element:v,chipProps:{children:b,...w},compoundElements:h}=U({asChild:c,pressed:d,defaultPressed:r,onClick:l,disabled:!!n,value:C.value,defaultValue:C.defaultValue,children:i,onClear:t}),{clearButton:u}=h;return s.jsx(E.Provider,{value:{disabled:n,design:a,intent:o,onClear:t},children:s.jsx(v,{ref:y,className:F({className:m,design:a,disabled:n,intent:o,hasClearButton:!!u}),...w,...C,"data-spark-component":"chip",children:b})})};S.displayName="Chip";const W=g.cva(["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],{variants:{disabled:{false:["cursor-pointer"],true:["cursor-not-allowed"]},isBordered:{false:["pr-md"],true:["pr-[7px]"]},design:{outlined:[],tinted:[],dashed:[]}},compoundVariants:[{design:"outlined",disabled:!1,class:e.tw(["hover:opacity-dim-1"])},{design:"outlined",disabled:!0,class:e.tw(["opacity-dim-3"])},{design:"tinted",disabled:!1,class:e.tw(["hover:opacity-dim-1"])},{design:"tinted",disabled:!0,class:e.tw(["opacity-dim-3"])},{design:"dashed",disabled:!1,class:e.tw(["hover:opacity-dim-1"])},{design:"dashed",disabled:!0,class:e.tw(["opacity-dim-3"])}]}),G=g.cva(["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm","focus-visible:u-outline"],{variants:{disabled:{true:["cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),T=({children:a=s.jsx(A.Icon,{children:s.jsx(D.Close,{})}),tabIndex:n=0,label:i,ref:o})=>{const{design:r,disabled:d,onClear:c}=H(),m=f.useCallback(l=>{l.stopPropagation(),!d&&c&&c(l)},[d,c]);return s.jsx("span",{className:W({isBordered:["outline","dashed"].includes(`${r}`),disabled:!!d,design:r}),onClick:m,ref:o,children:s.jsx("button",{tabIndex:n,type:"button",disabled:!!d,className:G({disabled:d}),"aria-label":i,children:a&&f.cloneElement(a,{ariaLabel:i})})})};T.displayName="Chip.ClearButton";const q=({children:a,className:n,ref:i})=>s.jsx("span",{className:g.cx("inline-block grow truncate",n),ref:i,children:a});q.displayName="Chip.Content";const B=({children:a,className:n,ref:i})=>s.jsx("span",{className:g.cx("flex h-full items-center justify-center",n),ref:i,children:a});B.displayName="Chip.Icon";const L=({className:a,ref:n,...i})=>s.jsx(B,{className:g.cx("mr-sm",a),ref:n,...i});L.displayName="Chip.LeadingIcon";const P=({className:a,ref:n,...i})=>s.jsx(B,{className:g.cx("ml-md",a),ref:n,...i});P.displayName="Chip.TrailingIcon";const x=Object.assign(S,{Content:q,LeadingIcon:L,TrailingIcon:P,ClearButton:T});x.displayName="Chip";x.ClearButton.displayName="Chip.ClearButton";x.Content.displayName="Chip.Content";x.LeadingIcon.displayName="Chip.LeadingIcon";x.TrailingIcon.displayName="Chip.TrailingIcon";exports.Chip=x;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("@spark-ui/internal-utils"),g=require("class-variance-authority"),f=require("react"),j=require("@spark-ui/hooks/use-combined-state"),V=require("emulate-tab"),k=require("../Slot-DQ8z2zsy.js"),D=require("@spark-ui/icons/Close"),A=require("../Icon-CF0W0LKr.js"),O=[{design:"outlined",intent:"main",class:e.tw(["enabled:hover:bg-main/dim-5","enabled:active:bg-main/dim-5","focus-visible:bg-main/dim-5","aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1","text-main"])},{design:"outlined",intent:"support",class:e.tw(["enabled:hover:bg-support/dim-5","enabled:active:bg-support/dim-5","focus-visible:bg-support/dim-5","aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1","text-support"])},{design:"outlined",intent:"basic",class:e.tw(["enabled:hover:bg-basic/dim-5","enabled:active:bg-basic/dim-5","focus-visible:bg-basic/dim-5","aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1","text-basic"])},{intent:"accent",design:"outlined",class:e.tw(["enabled:hover:bg-accent/dim-5","enabled:active:bg-accent/dim-5","focus-visible:bg-accent/dim-5","aria-pressed:bg-accent-container","aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1","text-accent"])},{design:"outlined",intent:"success",class:e.tw(["enabled:hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5","aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1","text-success"])},{intent:"alert",design:"outlined",class:e.tw(["enabled:hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5","aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1","text-alert"])},{design:"outlined",intent:"danger",class:e.tw(["enabled:hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5","aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1","text-error"])},{design:"outlined",intent:"info",class:e.tw(["enabled:hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5","aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1","text-info"])},{design:"outlined",intent:"neutral",class:e.tw(["enabled:hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5","aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1","text-neutral"])},{design:"outlined",intent:"surface",class:e.tw(["enabled:hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered","text-surface"])},{design:"outlined",hasClearButton:!1,class:e.tw(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])},{design:"outlined",hasClearButton:!0,class:e.tw(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])}],R=[{intent:"main",design:"tinted",class:e.tw(["bg-main-container","enabled:hover:bg-main-container-hovered","enabled:active:bg-main-container-hovered","focus-visible:bg-main-container-hovered","aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1","text-on-main-container"])},{intent:"support",design:"tinted",class:e.tw(["bg-support-container","enabled:hover:bg-support-container-hovered","enabled:active:bg-support-container-hovered","focus-visible:bg-support-container-hovered","aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1","text-on-support-container"])},{intent:"basic",design:"tinted",class:e.tw(["bg-basic-container","enabled:hover:bg-basic-container-hovered","enabled:active:bg-basic-container-hovered","focus-visible:bg-basic-container-hovered","aria-pressed:bg-basic aria-pressed:text-on-basic aria-pressed:enabled:hover:bg-basic/dim-1","text-on-basic-container"])},{intent:"accent",design:"tinted",class:e.tw(["bg-accent-container","enabled:hover:bg-accent-container-hovered","enabled:active:bg-accent-container-hovered","focus-visible:bg-accent-container-hovered","aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1","text-on-accent-container"])},{intent:"success",design:"tinted",class:e.tw(["bg-success-container","enabled:hover:bg-success-container-hovered","enabled:active:bg-success-container-hovered","focus-visible:bg-success-container-hovered","aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1","text-on-success-container"])},{intent:"alert",design:"tinted",class:e.tw(["bg-alert-container","enabled:hover:bg-alert-container-hovered","enabled:active:bg-alert-container-hovered","focus-visible:bg-alert-container-hovered","aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1","text-on-alert-container"])},{intent:"danger",design:"tinted",class:e.tw(["bg-error-container","enabled:hover:bg-error-container-hovered","enabled:active:bg-error-container-hovered","focus-visible:bg-error-container-hovered","aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1","text-on-error-container"])},{intent:"info",design:"tinted",class:e.tw(["bg-info-container","enabled:hover:bg-info-container-hovered","enabled:active:bg-info-container-hovered","focus-visible:bg-info-container-hovered","aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1","text-on-info-container"])},{intent:"neutral",design:"tinted",class:e.tw(["bg-neutral-container","enabled:hover:bg-neutral-container-hovered","enabled:active:bg-neutral-container-hovered","focus-visible:bg-neutral-container-hovered","aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1","text-on-neutral-container"])},{intent:"surface",design:"tinted",class:e.tw(["bg-surface/dim-1","enabled:hover:bg-surface-hovered/dim-1","enabled:active:bg-surface-hovered/dim-1","focus-visible:bg-surface-hovered/dim-1","aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered","text-on-surface/dim-1"])},{design:"tinted",hasClearButton:!1,class:e.tw(["px-md"])},{design:"tinted",hasClearButton:!0,class:e.tw(["pl-md"])}],$=[{intent:"main",design:"dashed",class:e.tw(["enabled:hover:bg-main/dim-5","enabled:active:bg-main/dim-5","focus-visible:bg-main/dim-5","aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1","text-main"])},{intent:"support",design:"dashed",class:e.tw(["enabled:hover:bg-support/dim-5","enabled:active:bg-support/dim-5","focus-visible:bg-support/dim-5","aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1","text-support"])},{intent:"basic",design:"dashed",class:e.tw(["enabled:hover:bg-basic/dim-5","enabled:active:bg-basic/dim-5","focus-visible:bg-basic/dim-5","aria-pressed:bg-basic-container aria-pressed:text-on-basic-container aria-pressed:enabled:hover:bg-basic-container/dim-1","text-basic"])},{intent:"accent",design:"dashed",class:e.tw(["enabled:hover:bg-accent/dim-5","enabled:active:bg-accent/dim-5","focus-visible:bg-accent/dim-5","aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1","text-accent"])},{intent:"success",design:"dashed",class:e.tw(["enabled:hover:bg-success/dim-5","enabled:active:bg-success/dim-5","focus-visible:bg-success/dim-5","aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1","text-success"])},{intent:"alert",design:"dashed",class:e.tw(["enabled:hover:bg-alert/dim-5","enabled:active:bg-alert/dim-5","focus-visible:bg-alert/dim-5","aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1","text-alert"])},{intent:"danger",design:"dashed",class:e.tw(["enabled:hover:bg-error/dim-5","enabled:active:bg-error/dim-5","focus-visible:bg-error/dim-5","aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1","text-error"])},{intent:"info",design:"dashed",class:e.tw(["enabled:hover:bg-info/dim-5","enabled:active:bg-info/dim-5","focus-visible:bg-info/dim-5","aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1","text-info"])},{intent:"neutral",design:"dashed",class:e.tw(["enabled:hover:bg-neutral/dim-5","enabled:active:bg-neutral/dim-5","focus-visible:bg-neutral/dim-5","aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1","text-neutral"])},{intent:"surface",design:"dashed",class:e.tw(["enabled:hover:bg-surface/dim-5","enabled:active:bg-surface/dim-5","focus-visible:bg-surface/dim-5","aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered","text-surface"])},{design:"dashed",hasClearButton:!1,class:e.tw(["px-[calc(var(--spacing-md)-var(--border-width-sm))]"])},{design:"dashed",hasClearButton:!0,class:e.tw(["pl-[calc(var(--spacing-md)-var(--border-width-sm))]"])}],F=g.cva(["box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-full text-body-1 font-regular","focus-visible:u-outline","ease-out duration-150"],{variants:{design:e.makeVariants({outlined:["bg-transparent border-sm border-solid border-current"],tinted:[""],dashed:["bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high"]}),intent:e.makeVariants({main:[],support:[],basic:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),disabled:{true:["cursor-not-allowed","opacity-dim-3"]},hasClearButton:{true:[],false:[]}},compoundVariants:[...O,...R,...$],defaultVariants:{design:"outlined",intent:"basic"}}),E=f.createContext({}),H=()=>f.useContext(E)||{},K=a=>a?a.type.displayName:"",M=a=>(...n)=>f.Children.toArray(a).filter(f.isValidElement).find(o=>{const r=K(o);return n.includes(r||"")}),U=({onClick:a,asChild:n,pressed:i,defaultPressed:o,disabled:r,value:d,defaultValue:c,children:m,onClear:l})=>{const[t,y]=j.useCombinedState(i,o),[C]=j.useCombinedState(d,c),v=M(m),b=v("Chip.LeadingIcon"),w=v("Chip.TrailingIcon"),h=v("Chip.Content"),u=v("Chip.ClearButton"),z=(a||t)!==void 0,N=[b,h,u].every(p=>p===void 0)?s.jsx("span",{className:"inline-block grow truncate",children:m}):s.jsxs(s.Fragment,{children:[b,h,b===void 0?w:null,u]}),I=p=>{u&&!r&&["Delete","Backspace"].includes(p.key)&&l&&(l(),p.key==="Delete"&&V.emulateTab(),p.key==="Backspace"&&V.emulateTab.backwards())};return z?{Element:n?k.Slot:"button",chipProps:{type:"button",...t!==void 0&&{"aria-pressed":t,"data-state":t?"on":"off"},onClick:p=>{t!==void 0&&y(!t),a&&a(p,{pressed:t,value:C})},onKeyDown:I,disabled:r,children:N},compoundElements:{leadingIcon:b,trailingIcon:w,content:h,clearButton:u}}:{Element:n?k.Slot:"div",chipProps:{"aria-disabled":r,children:N,onKeyDown:I},compoundElements:{leadingIcon:b,trailingIcon:w,content:h,clearButton:u}}},S=({design:a="outlined",disabled:n,children:i,intent:o="basic",defaultPressed:r,pressed:d,asChild:c,className:m,onClick:l,onClear:t,ref:y,...C})=>{const{Element:v,chipProps:{children:b,...w},compoundElements:h}=U({asChild:c,pressed:d,defaultPressed:r,onClick:l,disabled:!!n,value:C.value,defaultValue:C.defaultValue,children:i,onClear:t}),{clearButton:u}=h;return s.jsx(E.Provider,{value:{disabled:n,design:a,intent:o,onClear:t},children:s.jsx(v,{ref:y,className:F({className:m,design:a,disabled:n,intent:o,hasClearButton:!!u}),...w,...C,"data-spark-component":"chip",children:b})})};S.displayName="Chip";const W=g.cva(["ml-md flex h-full items-center justify-center focus-visible:outline-hidden"],{variants:{disabled:{false:["cursor-pointer"],true:["cursor-not-allowed"]},isBordered:{false:["pr-md"],true:["pr-[7px]"]},design:{outlined:[],tinted:[],dashed:[]}},compoundVariants:[{design:"outlined",disabled:!1,class:e.tw(["hover:opacity-dim-1"])},{design:"outlined",disabled:!0,class:e.tw(["opacity-dim-3"])},{design:"tinted",disabled:!1,class:e.tw(["hover:opacity-dim-1"])},{design:"tinted",disabled:!0,class:e.tw(["opacity-dim-3"])},{design:"dashed",disabled:!1,class:e.tw(["hover:opacity-dim-1"])},{design:"dashed",disabled:!0,class:e.tw(["opacity-dim-3"])}]}),G=g.cva(["rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm","focus-visible:u-outline"],{variants:{disabled:{true:["cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),T=({children:a=s.jsx(A.Icon,{children:s.jsx(D.Close,{})}),tabIndex:n=0,label:i,ref:o})=>{const{design:r,disabled:d,onClear:c}=H(),m=f.useCallback(l=>{l.stopPropagation(),!d&&c&&c(l)},[d,c]);return s.jsx("span",{className:W({isBordered:["outline","dashed"].includes(`${r}`),disabled:!!d,design:r}),onClick:m,ref:o,children:s.jsx("button",{tabIndex:n,type:"button",disabled:!!d,className:G({disabled:d}),"aria-label":i,children:a&&f.cloneElement(a,{ariaLabel:i})})})};T.displayName="Chip.ClearButton";const q=({children:a,className:n,ref:i})=>s.jsx("span",{className:g.cx("inline-block grow truncate",n),ref:i,children:a});q.displayName="Chip.Content";const B=({children:a,className:n,ref:i})=>s.jsx("span",{className:g.cx("flex h-full items-center justify-center",n),ref:i,children:a});B.displayName="Chip.Icon";const L=({className:a,ref:n,...i})=>s.jsx(B,{className:g.cx("mr-sm",a),ref:n,...i});L.displayName="Chip.LeadingIcon";const P=({className:a,ref:n,...i})=>s.jsx(B,{className:g.cx("ml-md",a),ref:n,...i});P.displayName="Chip.TrailingIcon";const x=Object.assign(S,{Content:q,LeadingIcon:L,TrailingIcon:P,ClearButton:T});x.displayName="Chip";x.ClearButton.displayName="Chip.ClearButton";x.Content.displayName="Chip.Content";x.LeadingIcon.displayName="Chip.LeadingIcon";x.TrailingIcon.displayName="Chip.TrailingIcon";exports.Chip=x;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|