@frontify/fondue-components 19.1.0 → 20.0.0-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/fondue-components16.js +13 -13
- package/dist/fondue-components16.js.map +1 -1
- package/dist/fondue-components28.js +14 -14
- package/dist/fondue-components28.js.map +1 -1
- package/dist/fondue-components29.js +6 -6
- package/dist/fondue-components29.js.map +1 -1
- package/dist/fondue-components31.js +5 -5
- package/dist/fondue-components32.js +2 -2
- package/dist/fondue-components33.js +1 -1
- package/dist/fondue-components34.js.map +1 -1
- package/dist/fondue-components37.js +28 -28
- package/dist/fondue-components37.js.map +1 -1
- package/dist/fondue-components38.js +18 -18
- package/dist/fondue-components38.js.map +1 -1
- package/dist/fondue-components39.js +19 -19
- package/dist/fondue-components39.js.map +1 -1
- package/dist/fondue-components40.js +8 -8
- package/dist/fondue-components40.js.map +1 -1
- package/dist/fondue-components44.js +1 -1
- package/dist/fondue-components48.js +4 -4
- package/dist/fondue-components49.js +2 -2
- package/dist/fondue-components49.js.map +1 -1
- package/dist/fondue-components51.js +7 -7
- package/dist/fondue-components53.js +12 -12
- package/dist/fondue-components55.js +16 -16
- package/dist/fondue-components56.js +7 -7
- package/dist/fondue-components56.js.map +1 -1
- package/dist/fondue-components57.js +4 -4
- package/dist/fondue-components58.js +6 -6
- package/dist/fondue-components61.js +1 -1
- package/dist/fondue-components66.js +21 -21
- package/dist/fondue-components68.js +1 -1
- package/dist/fondue-components69.js +2 -2
- package/dist/fondue-components71.js +6 -6
- package/dist/fondue-components74.js +3 -3
- package/dist/fondue-components75.js +23 -23
- package/dist/fondue-components76.js +4 -4
- package/dist/fondue-components77.js +6 -4
- package/dist/fondue-components77.js.map +1 -1
- package/dist/fondue-components78.js +4 -4
- package/dist/fondue-components79.js +5 -2
- package/dist/fondue-components79.js.map +1 -1
- package/dist/fondue-components80.js +4 -4
- package/dist/fondue-components80.js.map +1 -1
- package/dist/fondue-components81.js +2 -5
- package/dist/fondue-components81.js.map +1 -1
- package/dist/fondue-components82.js +10 -10
- package/dist/index.d.ts +3 -3
- package/dist/style.css +1 -1
- package/package.json +7 -5
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import * as n from "@radix-ui/react-label";
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { cn as
|
|
5
|
-
const
|
|
3
|
+
import { forwardRef as m } from "react";
|
|
4
|
+
import { cn as s } from "./fondue-components36.js";
|
|
5
|
+
const w = ({ className: o, "data-test-id": d = "fondue-label", ...r }, i) => /* @__PURE__ */ l(
|
|
6
6
|
n.Root,
|
|
7
7
|
{
|
|
8
8
|
ref: i,
|
|
9
|
-
"data-required":
|
|
10
|
-
className:
|
|
11
|
-
'tw-group tw-flex tw-gap-1 tw-font-
|
|
9
|
+
"data-required": r.required,
|
|
10
|
+
className: s(
|
|
11
|
+
'tw-group tw-flex tw-gap-1 tw-font-primary tw-font-normal peer-data-[state="checked"]:tw-font-medium peer-data-[state="indeterminate"]:tw-font-medium tw-body-small tw-text-secondary peer-hover:tw-text-primary has-[+_*_input:hover:not(:disabled)]:tw-text-primary tw-transition-colors',
|
|
12
12
|
// Disabled state if siblings has disabled state
|
|
13
|
-
"has-[+_*_:disabled]:tw-text-
|
|
13
|
+
"has-[+_*_:disabled]:tw-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-disabled peer-disabled:tw-cursor-not-allowed",
|
|
14
14
|
// Required asterisk
|
|
15
|
-
'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-
|
|
16
|
-
|
|
15
|
+
'after:tw-hidden data-[required="true"]:after:tw-flex after:tw-content-["*"] after:-tw-ml-1 after:tw-font-primary after:tw-text-small after:tw-font-medium after:tw-text-error group-hover:tw-text-error-hover',
|
|
16
|
+
o
|
|
17
17
|
),
|
|
18
18
|
"data-test-id": d,
|
|
19
19
|
onClick: (t) => {
|
|
20
|
-
const
|
|
20
|
+
const a = t.target.getAttribute("for"), e = a ? document.getElementById(a) : null;
|
|
21
21
|
e && e.getAttribute("role") === "combobox" && (t.preventDefault(), t.stopPropagation(), e.click());
|
|
22
22
|
},
|
|
23
|
-
...
|
|
23
|
+
...r
|
|
24
24
|
}
|
|
25
|
-
), f =
|
|
25
|
+
), f = m(w);
|
|
26
26
|
f.displayName = "Label";
|
|
27
27
|
export {
|
|
28
28
|
f as Label,
|
|
29
|
-
|
|
29
|
+
w as LabelComponent
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=fondue-components16.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n id?: string;\n children: ReactNode;\n /**\n * The id of the input element the label is associated with\n */\n htmlFor: string;\n /**\n * Add an asterisk to the label to indicate it is required\n * @default false\n */\n required?: boolean;\n className?: string;\n onClick?: MouseEventHandler<HTMLLabelElement>;\n 'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) => {\n return (\n <LabelPrimitive.Root\n ref={ref}\n data-required={props.required}\n className={cn(\n 'tw-group tw-flex tw-gap-1 tw-font-
|
|
1
|
+
{"version":3,"file":"fondue-components16.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type MouseEventHandler, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n id?: string;\n children: ReactNode;\n /**\n * The id of the input element the label is associated with\n */\n htmlFor: string;\n /**\n * Add an asterisk to the label to indicate it is required\n * @default false\n */\n required?: boolean;\n className?: string;\n onClick?: MouseEventHandler<HTMLLabelElement>;\n 'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) => {\n return (\n <LabelPrimitive.Root\n ref={ref}\n data-required={props.required}\n className={cn(\n 'tw-group tw-flex tw-gap-1 tw-font-primary tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-body-small tw-text-secondary peer-hover:tw-text-primary has-[+_*_input:hover:not(:disabled)]:tw-text-primary tw-transition-colors',\n // Disabled state if siblings has disabled state\n 'has-[+_*_:disabled]:tw-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-disabled peer-disabled:tw-cursor-not-allowed',\n // Required asterisk\n 'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-primary after:tw-text-small after:tw-font-medium after:tw-text-error group-hover:tw-text-error-hover',\n className,\n )}\n data-test-id={dataTestId}\n onClick={(event) => {\n // Add support of Select component, Radix only allows native `select`\n // but we use `div[role=combobox]` because of downshift\n // https://github.com/radix-ui/primitives/blob/6e75e117977c9e6ffa939e6951a707f16ba0f95e/packages/react/label/src/label.tsx#L22\n const targetId = (event.target as HTMLElement).getAttribute('for');\n const target = targetId ? document.getElementById(targetId) : null;\n\n if (target && target.getAttribute('role') === 'combobox') {\n event.preventDefault();\n event.stopPropagation();\n target.click();\n }\n }}\n {...props}\n />\n );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","event","targetId","target","Label","forwardRef"],"mappings":";;;;AAwBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACd,SAAS,CAACM,MAAU;AAIhB,YAAMC,IAAYD,EAAM,OAAuB,aAAa,KAAK,GAC3DE,IAASD,IAAW,SAAS,eAAeA,CAAQ,IAAI;AAE9D,MAAIC,KAAUA,EAAO,aAAa,MAAM,MAAM,eAC1CF,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtBE,EAAO,MAAM;AAAA,IAErB;AAAA,IACC,GAAGP;AAAA,EAAA;AACR,GAIKQ,IAAQC,EAAyCZ,CAAc;AAC5EW,EAAM,cAAc;"}
|
|
@@ -6,36 +6,36 @@ import r from "./fondue-components76.js";
|
|
|
6
6
|
const f = ({
|
|
7
7
|
children: c,
|
|
8
8
|
className: d,
|
|
9
|
-
status:
|
|
9
|
+
status: o = "neutral",
|
|
10
10
|
"data-test-id": a = "fondue-text-input",
|
|
11
11
|
...t
|
|
12
12
|
}, R) => {
|
|
13
13
|
const i = S(!1);
|
|
14
|
-
return /* @__PURE__ */ g("div", { className: m(r.root, d), "data-status":
|
|
15
|
-
|
|
14
|
+
return /* @__PURE__ */ g("div", { className: m(r.root, d), "data-status": o, "data-test-id": a, children: [
|
|
15
|
+
o === "loading" ? /* @__PURE__ */ s("div", { className: r.loadingStatus, "data-test-id": `${a}-loader` }) : null,
|
|
16
16
|
/* @__PURE__ */ s(
|
|
17
17
|
"input",
|
|
18
18
|
{
|
|
19
|
-
onMouseDown: (
|
|
20
|
-
i.current = !0,
|
|
19
|
+
onMouseDown: (e) => {
|
|
20
|
+
i.current = !0, e.currentTarget.dataset.showFocusRing = "false";
|
|
21
21
|
},
|
|
22
22
|
type: "text",
|
|
23
23
|
...t,
|
|
24
|
-
onFocus: (
|
|
24
|
+
onFocus: (e) => {
|
|
25
25
|
var l;
|
|
26
|
-
i.current || (
|
|
26
|
+
console.log("focusEvent", e), i.current || (e.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, e);
|
|
27
27
|
},
|
|
28
|
-
onBlur: (
|
|
28
|
+
onBlur: (e) => {
|
|
29
29
|
var l;
|
|
30
|
-
|
|
30
|
+
e.target.dataset.showFocusRing = "false", i.current = !1, (l = t.onBlur) == null || l.call(t, e);
|
|
31
31
|
},
|
|
32
32
|
ref: R,
|
|
33
33
|
className: r.input,
|
|
34
|
-
"aria-invalid":
|
|
34
|
+
"aria-invalid": o === "error"
|
|
35
35
|
}
|
|
36
36
|
),
|
|
37
|
-
|
|
38
|
-
|
|
37
|
+
o === "success" ? /* @__PURE__ */ s(w, { size: 16, className: r.iconSuccess, "data-test-id": `${a}-success-icon` }) : null,
|
|
38
|
+
o === "error" ? /* @__PURE__ */ s(
|
|
39
39
|
N,
|
|
40
40
|
{
|
|
41
41
|
size: 16,
|
|
@@ -47,12 +47,12 @@ const f = ({
|
|
|
47
47
|
] });
|
|
48
48
|
};
|
|
49
49
|
f.displayName = "TextField.Root";
|
|
50
|
-
const u = ({ name: c, className: d, ...
|
|
50
|
+
const u = ({ name: c, className: d, ...o }, a) => /* @__PURE__ */ s(
|
|
51
51
|
"div",
|
|
52
52
|
{
|
|
53
53
|
"data-slot": !0,
|
|
54
54
|
"data-name": c,
|
|
55
|
-
...
|
|
55
|
+
...o,
|
|
56
56
|
ref: a,
|
|
57
57
|
className: m(r.slot, d)
|
|
58
58
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components28.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n
|
|
1
|
+
{"version":3,"file":"fondue-components28.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n forwardRef,\n useRef,\n type ChangeEvent,\n type FocusEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type ReactNode,\n type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n id?: string;\n name?: string;\n /**\n * The place where the input slots are placed\n */\n children?: ReactNode;\n /**\n * The default value of the text input\n * Used for uncontrolled components\n */\n defaultValue?: string | number;\n /**\n * The controlled value of the text input\n */\n value?: string | number;\n /**\n * Type of the text input\n * @default \"text\"\n */\n type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n /**\n * The placeholder in the text input\n */\n placeholder?: string;\n /**\n * Disable the text input\n * @default false\n */\n disabled?: boolean;\n /**\n * Make the text input required in form\n * @default false\n */\n required?: boolean;\n /**\n * Make the text input spell-checkable\n * @default true\n */\n spellCheck?: boolean;\n /**\n * Make the text input read-only\n * @default false\n */\n readOnly?: boolean;\n /**\n * Set the type of input so autocomplete can help the user\n * @default \"on\"\n */\n autoComplete?: string;\n /**\n * The maximum length of the text input\n */\n maxLength?: number;\n /**\n * Status of the text input\n * @default \"neutral\"\n */\n status?: 'neutral' | 'success' | 'error' | 'loading';\n className?: string;\n /**\n * Event handler called when the text input value changes\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text input is blurred\n */\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text input is focused\n */\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when a key is pressed\n */\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when a key is released\n */\n onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n /**\n * Event handler called when the text inside of text input is selected\n */\n onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n 'data-test-id'?: string;\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n 'aria-describedby'?: string;\n};\n\nexport const TextFieldRoot = (\n {\n children,\n className,\n status = 'neutral',\n 'data-test-id': dataTestId = 'fondue-text-input',\n ...inputProps\n }: TextInputProps,\n ref: ForwardedRef<HTMLInputElement>,\n) => {\n const wasClicked = useRef(false);\n\n return (\n <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n {status === 'loading' ? (\n <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n ) : null}\n <input\n onMouseDown={(mouseEvent) => {\n wasClicked.current = true;\n mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n }}\n type=\"text\"\n {...inputProps}\n onFocus={(focusEvent) => {\n console.log('focusEvent', focusEvent);\n if (!wasClicked.current) {\n focusEvent.target.dataset.showFocusRing = 'true';\n }\n inputProps.onFocus?.(focusEvent);\n }}\n onBlur={(blurEvent) => {\n blurEvent.target.dataset.showFocusRing = 'false';\n wasClicked.current = false;\n inputProps.onBlur?.(blurEvent);\n }}\n ref={ref}\n className={styles.input}\n aria-invalid={status === 'error'}\n />\n\n {status === 'success' ? (\n <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n ) : null}\n\n {status === 'error' ? (\n <IconExclamationMarkTriangle\n size={16}\n className={styles.iconError}\n data-test-id={`${dataTestId}-error-icon`}\n />\n ) : null}\n\n {children}\n </div>\n );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n children: ReactNode;\n name?: 'left' | 'right';\n className?: string;\n};\n\nexport const TextFieldSlot = (\n { name, className, ...slotProps }: TextFieldSlotProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div\n data-slot={true}\n data-name={name}\n {...slotProps}\n ref={forwardedRef}\n className={cn(styles.slot, className)}\n />\n );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n Root: typeof ForwardedRefTextFieldRoot;\n Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA4GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACVM,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACb,kBAAA,IAAI,cAAcA,CAAU,GAC/BP,EAAW,YACDO,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AACxC;AAIRiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import s from "./fondue-components77.js";
|
|
3
3
|
import { Slot as i } from "@radix-ui/react-slot";
|
|
4
4
|
import { createContext as l, useContext as c } from "react";
|
|
5
|
-
const t = l("light"),
|
|
6
|
-
const
|
|
7
|
-
return /* @__PURE__ */ o(t.Provider, { value: e, children: /* @__PURE__ */ o(
|
|
5
|
+
const t = l("light"), h = () => c(t), a = ({ children: r, theme: e = "light", asChild: m = !1 }) => {
|
|
6
|
+
const n = m ? i : "div";
|
|
7
|
+
return /* @__PURE__ */ o(t.Provider, { value: e, children: /* @__PURE__ */ o(n, { className: `${s[e]} fondue-theme-provider`, children: r }) });
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
10
|
t as ThemeContext,
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
a as ThemeProvider,
|
|
12
|
+
h as useFondueTheme
|
|
13
13
|
};
|
|
14
14
|
//# sourceMappingURL=fondue-components29.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components29.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/
|
|
1
|
+
{"version":3,"file":"fondue-components29.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/themes';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, type ReactNode } from 'react';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n children: ReactNode;\n /**\n * The theme to apply\n * @default \"light\"\n * */\n theme: AvailableTheme;\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n * @default false\n */\n asChild?: boolean;\n};\n\nexport const ThemeContext = createContext<AvailableTheme>('light');\n\nexport const useFondueTheme = () => {\n return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({ children, theme = 'light', asChild = false }: ThemeProviderProps) => {\n const Comp = asChild ? Slot : 'div';\n return (\n <ThemeContext.Provider value={theme}>\n <Comp className={`${styles[theme]} fondue-theme-provider`}>{children}</Comp>\n </ThemeContext.Provider>\n );\n};\n"],"names":["ThemeContext","createContext","useFondueTheme","useContext","ThemeProvider","children","theme","asChild","Comp","Slot","jsx","styles"],"mappings":";;;;AAsBa,MAAAA,IAAeC,EAA8B,OAAO,GAEpDC,IAAiB,MACnBC,EAAWH,CAAY,GAGrBI,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,SAAAC,IAAU,SAAgC;AAC3F,QAAAC,IAAOD,IAAUE,IAAO;AAC9B,SACK,gBAAAC,EAAAV,EAAa,UAAb,EAAsB,OAAOM,GAC1B,UAAA,gBAAAI,EAACF,GAAK,EAAA,WAAW,GAAGG,EAAOL,CAAK,CAAC,0BAA2B,UAAAD,EAAS,CAAA,GACzE;AAER;"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
const o = "
|
|
1
|
+
const o = "_root_buef8_2", c = "_accordionItem_buef8_7", n = "_accordionTrigger_buef8_13", t = "_accordionCaret_buef8_31", r = "_accordionContent_buef8_35", e = "_accordionContentText_buef8_62", a = {
|
|
2
2
|
root: o,
|
|
3
3
|
accordionItem: c,
|
|
4
4
|
accordionTrigger: n,
|
|
5
|
-
accordionCaret:
|
|
6
|
-
accordionContent:
|
|
5
|
+
accordionCaret: t,
|
|
6
|
+
accordionContent: r,
|
|
7
7
|
accordionContentText: e
|
|
8
8
|
};
|
|
9
9
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
t as accordionCaret,
|
|
11
|
+
r as accordionContent,
|
|
12
12
|
e as accordionContentText,
|
|
13
13
|
c as accordionItem,
|
|
14
14
|
n as accordionTrigger,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import s from "./fondue-
|
|
3
|
-
import { colorToCss as e } from "./fondue-
|
|
2
|
+
import s from "./fondue-components79.js";
|
|
3
|
+
import { colorToCss as e } from "./fondue-components80.js";
|
|
4
4
|
const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
|
|
5
5
|
const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
|
|
6
6
|
return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components34.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n m: 'margin',\n mx: 'margin-x',\n my: 'margin-y',\n mt: 'margin-top',\n mr: 'margin-right',\n mb: 'margin-bottom',\n ml: 'margin-left',\n p: 'padding',\n px: 'padding-x',\n py: 'padding-y',\n pt: 'padding-top',\n pr: 'padding-right',\n pb: 'padding-bottom',\n pl: 'padding-left',\n direction: 'flex-direction',\n align: 'align-items',\n wrap: 'flex-wrap',\n columns: 'grid-template-columns',\n rows: 'grid-template-rows',\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n if (key === 'columns' || key === 'rows') {\n if (typeof value === 'number') {\n return `repeat(${value}, 1fr)`;\n }\n return value;\n }\n\n // Spacing tokens\n if (typeof value === 'number') {\n return `${value * 0.25}rem`;\n }\n\n return value;\n};\n\nexport const propsToCssVariables = (\n props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n return Object.entries(props).reduce((acc, [key, value]) => {\n if (isAriaProp(key)) {\n return acc;\n }\n\n const cssProperty =\n key in extraAbbreviationToCssProperty\n ? extraAbbreviationToCssProperty[key]\n : key in abbreviationToCssProperty\n ? abbreviationToCssProperty[key]\n : key;\n const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n if (typeof value === 'object') {\n for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n if (breakpointValue !== undefined) {\n // @ts-expect-error CSS variables are not typed into `CSSProperties`\n acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n }\n }\n } else {\n // @ts-expect-error CSS variables are not typed into `CSSProperties`\n acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n }\n\n return acc;\n }, {} as CSSProperties);\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA2B,CAACF,GAAaG,MACvCH,MAAQ,aAAaA,MAAQ,SACzB,OAAOG,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,
|
|
1
|
+
{"version":3,"file":"fondue-components34.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n m: 'margin',\n mx: 'margin-x',\n my: 'margin-y',\n mt: 'margin-top',\n mr: 'margin-right',\n mb: 'margin-bottom',\n ml: 'margin-left',\n p: 'padding',\n px: 'padding-x',\n py: 'padding-y',\n pt: 'padding-top',\n pr: 'padding-right',\n pb: 'padding-bottom',\n pl: 'padding-left',\n direction: 'flex-direction',\n align: 'align-items',\n wrap: 'flex-wrap',\n columns: 'grid-template-columns',\n rows: 'grid-template-rows',\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n if (key === 'columns' || key === 'rows') {\n if (typeof value === 'number') {\n return `repeat(${value}, 1fr)`;\n }\n return value;\n }\n\n // Spacing tokens\n if (typeof value === 'number') {\n return `${value * 0.25}rem`;\n }\n\n return value;\n};\n\nexport const propsToCssVariables = (\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n return Object.entries(props).reduce((acc, [key, value]) => {\n if (isAriaProp(key)) {\n return acc;\n }\n\n const cssProperty =\n key in extraAbbreviationToCssProperty\n ? extraAbbreviationToCssProperty[key]\n : key in abbreviationToCssProperty\n ? abbreviationToCssProperty[key]\n : key;\n const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n if (typeof value === 'object') {\n for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n if (breakpointValue !== undefined) {\n // @ts-expect-error CSS variables are not typed into `CSSProperties`\n acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n }\n }\n } else {\n // @ts-expect-error CSS variables are not typed into `CSSProperties`\n acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n }\n\n return acc;\n }, {} as CSSProperties);\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA2B,CAACF,GAAaG,MACvCH,MAAQ,aAAaA,MAAQ,SACzB,OAAOG,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAE/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EAAE,OAAO,CAACE,GAAK,CAACP,GAAKG,CAAK,MAAM;AACnD,MAAAJ,EAAWC,CAAG;AACP,WAAAO;AAGL,QAAAC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GACNS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAEzF,MAAA,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEhBJ,EAAA,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAGnE,SAAAI;AACX,GAAG,EAAmB;"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { FOCUS_OUTLINE as
|
|
2
|
-
import { sv as
|
|
3
|
-
const
|
|
4
|
-
base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-
|
|
1
|
+
import { FOCUS_OUTLINE as e } from "./fondue-components81.js";
|
|
2
|
+
import { sv as a } from "./fondue-components36.js";
|
|
3
|
+
const s = a({
|
|
4
|
+
base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-primary tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ${e}`,
|
|
5
5
|
variants: {
|
|
6
6
|
disabled: {
|
|
7
|
-
true: "tw-not-allowed tw-pointer-events-none tw-text-
|
|
7
|
+
true: "tw-cursor-not-allowed tw-pointer-events-none tw-text-container-disabled-on-disabled-container tw-bg-container-disabled"
|
|
8
8
|
},
|
|
9
9
|
rounding: {
|
|
10
|
-
medium: "tw-rounded",
|
|
10
|
+
medium: "tw-rounded-medium",
|
|
11
11
|
full: "tw-rounded-full"
|
|
12
12
|
},
|
|
13
13
|
size: {
|
|
14
|
-
small: "tw-h-6 tw-
|
|
15
|
-
medium: "tw-h-9 tw-
|
|
16
|
-
large: "tw-h-12 tw-
|
|
14
|
+
small: "tw-h-6 tw-body-small",
|
|
15
|
+
medium: "tw-h-9 tw-body-medium",
|
|
16
|
+
large: "tw-h-12 tw-body-large"
|
|
17
17
|
},
|
|
18
18
|
aspect: {
|
|
19
19
|
square: "tw-aspect-square tw-px-0",
|
|
@@ -40,106 +40,106 @@ const o = e({
|
|
|
40
40
|
disabled: !1,
|
|
41
41
|
variant: "default",
|
|
42
42
|
emphasis: "default",
|
|
43
|
-
class: "tw-bg-
|
|
43
|
+
class: "tw-bg-container-secondary hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
disabled: !1,
|
|
47
47
|
variant: "default",
|
|
48
48
|
emphasis: "weak",
|
|
49
|
-
class: "hover:tw-bg-
|
|
49
|
+
class: "hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
52
|
disabled: !1,
|
|
53
53
|
variant: "default",
|
|
54
54
|
emphasis: "strong",
|
|
55
|
-
class: "tw-bg-
|
|
55
|
+
class: "tw-bg-primary hover:tw-bg-primary-hover active:tw-bg-primary-active"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
disabled: !1,
|
|
59
59
|
variant: "positive",
|
|
60
60
|
emphasis: "default",
|
|
61
|
-
class: "tw-bg-
|
|
61
|
+
class: "tw-bg-container-success hover:tw-bg-container-success-hover active:tw-bg-container-success-active"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
disabled: !1,
|
|
65
65
|
variant: "positive",
|
|
66
66
|
emphasis: "weak",
|
|
67
|
-
class: "hover:tw-bg-
|
|
67
|
+
class: "hover:tw-bg-container-success-hover active:tw-bg-container-success-active"
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
disabled: !1,
|
|
71
71
|
variant: "positive",
|
|
72
72
|
emphasis: "strong",
|
|
73
|
-
class: "tw-bg-
|
|
73
|
+
class: "tw-bg-success hover:tw-bg-success-hover active:tw-bg-success-active"
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
disabled: !1,
|
|
77
77
|
variant: "negative",
|
|
78
78
|
emphasis: "default",
|
|
79
|
-
class: "tw-bg-
|
|
79
|
+
class: "tw-bg-container-error hover:tw-bg-container-error-hover active:tw-bg-container-error-active"
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
82
|
disabled: !1,
|
|
83
83
|
variant: "negative",
|
|
84
84
|
emphasis: "weak",
|
|
85
|
-
class: "hover:tw-bg-
|
|
85
|
+
class: "hover:tw-bg-container-error-hover active:tw-bg-container-error-active"
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
disabled: !1,
|
|
89
89
|
variant: "negative",
|
|
90
90
|
emphasis: "strong",
|
|
91
|
-
class: "tw-bg-
|
|
91
|
+
class: "tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active"
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
94
|
disabled: !1,
|
|
95
95
|
variant: "danger",
|
|
96
96
|
emphasis: "default",
|
|
97
|
-
class: "tw-bg-
|
|
97
|
+
class: "tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active"
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
disabled: !1,
|
|
101
101
|
variant: "danger",
|
|
102
102
|
emphasis: "weak",
|
|
103
|
-
class: "hover:tw-bg-
|
|
103
|
+
class: "tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active"
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
disabled: !1,
|
|
107
107
|
variant: "danger",
|
|
108
108
|
emphasis: "strong",
|
|
109
|
-
class: "tw-bg-
|
|
109
|
+
class: "tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active"
|
|
110
110
|
},
|
|
111
111
|
{
|
|
112
112
|
disabled: !1,
|
|
113
113
|
variant: "loud",
|
|
114
114
|
emphasis: "default",
|
|
115
|
-
class: "tw-bg-
|
|
115
|
+
class: "tw-bg-container-highlight hover:tw-bg-container-highlight-hover active:tw-bg-container-highlight-active"
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
disabled: !1,
|
|
119
119
|
variant: "loud",
|
|
120
120
|
emphasis: "weak",
|
|
121
|
-
class: "tw-border-transparent hover:tw-bg-
|
|
121
|
+
class: "tw-border-transparent hover:tw-bg-container-highlight-hover active:tw-bg-container-highlight-active"
|
|
122
122
|
},
|
|
123
123
|
{
|
|
124
124
|
disabled: !1,
|
|
125
125
|
variant: "loud",
|
|
126
126
|
emphasis: "strong",
|
|
127
|
-
class: "tw-bg-
|
|
127
|
+
class: "tw-bg-highlight hover:tw-bg-highlight-hover active:tw-bg-highlight-active"
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
aspect: "default",
|
|
131
131
|
size: "small",
|
|
132
|
-
class: "tw-px-
|
|
132
|
+
class: "tw-px-3 tw-gap-1.5"
|
|
133
133
|
},
|
|
134
134
|
{
|
|
135
135
|
aspect: "default",
|
|
136
136
|
size: "medium",
|
|
137
|
-
class: "tw-px-4"
|
|
137
|
+
class: "tw-px-4 tw-gap-1.5"
|
|
138
138
|
},
|
|
139
139
|
{
|
|
140
140
|
aspect: "default",
|
|
141
141
|
size: "large",
|
|
142
|
-
class: "tw-px-6"
|
|
142
|
+
class: "tw-px-6 tw-gap-2"
|
|
143
143
|
}
|
|
144
144
|
],
|
|
145
145
|
defaultVariants: {
|
|
@@ -153,6 +153,6 @@ const o = e({
|
|
|
153
153
|
}
|
|
154
154
|
});
|
|
155
155
|
export {
|
|
156
|
-
|
|
156
|
+
s as buttonStyles
|
|
157
157
|
};
|
|
158
158
|
//# sourceMappingURL=fondue-components37.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components37.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n base:\n 'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-
|
|
1
|
+
{"version":3,"file":"fondue-components37.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n base:\n 'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-primary tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ' +\n `${FOCUS_OUTLINE}`,\n variants: {\n disabled: {\n true: 'tw-cursor-not-allowed tw-pointer-events-none tw-text-container-disabled-on-disabled-container tw-bg-container-disabled',\n },\n rounding: {\n medium: 'tw-rounded-medium',\n full: 'tw-rounded-full',\n },\n size: {\n small: 'tw-h-6 tw-body-small',\n medium: 'tw-h-9 tw-body-medium',\n large: 'tw-h-12 tw-body-large',\n },\n aspect: {\n square: 'tw-aspect-square tw-px-0',\n default: '',\n },\n hugWidth: {\n false: 'tw-w-full',\n },\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n variant: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n },\n compoundVariants: [\n {\n disabled: false,\n variant: 'default',\n emphasis: 'default',\n class:\n 'tw-bg-container-secondary ' +\n 'hover:tw-bg-container-secondary-hover ' +\n 'active:tw-bg-container-secondary-active',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'weak',\n class: 'hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active',\n },\n {\n disabled: false,\n variant: 'default',\n emphasis: 'strong',\n class: 'tw-bg-primary hover:tw-bg-primary-hover active:tw-bg-primary-active',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'default',\n class:\n 'tw-bg-container-success ' +\n 'hover:tw-bg-container-success-hover ' +\n 'active:tw-bg-container-success-active',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'weak',\n class: 'hover:tw-bg-container-success-hover active:tw-bg-container-success-active',\n },\n {\n disabled: false,\n variant: 'positive',\n emphasis: 'strong',\n class: 'tw-bg-success hover:tw-bg-success-hover active:tw-bg-success-active',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'default',\n class: 'tw-bg-container-error hover:tw-bg-container-error-hover active:tw-bg-container-error-active',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'weak',\n class: 'hover:tw-bg-container-error-hover active:tw-bg-container-error-active',\n },\n {\n disabled: false,\n variant: 'negative',\n emphasis: 'strong',\n class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'default',\n class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'weak',\n class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n },\n {\n disabled: false,\n variant: 'danger',\n emphasis: 'strong',\n class: 'tw-bg-error hover:tw-bg-error-hover active:tw-bg-error-active',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'default',\n class: 'tw-bg-container-highlight hover:tw-bg-container-highlight-hover active:tw-bg-container-highlight-active',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'weak',\n class: 'tw-border-transparent hover:tw-bg-container-highlight-hover active:tw-bg-container-highlight-active',\n },\n {\n disabled: false,\n variant: 'loud',\n emphasis: 'strong',\n class: 'tw-bg-highlight hover:tw-bg-highlight-hover active:tw-bg-highlight-active',\n },\n {\n aspect: 'default',\n size: 'small',\n class: 'tw-px-3 tw-gap-1.5',\n },\n {\n aspect: 'default',\n size: 'medium',\n class: 'tw-px-4 tw-gap-1.5',\n },\n {\n aspect: 'default',\n size: 'large',\n class: 'tw-px-6 tw-gap-2',\n },\n ],\n defaultVariants: {\n variant: 'default',\n emphasis: 'strong',\n size: 'medium',\n rounding: 'medium',\n hugWidth: true,\n aspect: 'default',\n disabled: false,\n },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { sv as
|
|
2
|
-
const s =
|
|
1
|
+
import { sv as e } from "./fondue-components36.js";
|
|
2
|
+
const s = e({
|
|
3
3
|
variants: {
|
|
4
4
|
emphasis: {
|
|
5
5
|
default: "",
|
|
@@ -14,7 +14,7 @@ const s = t({
|
|
|
14
14
|
loud: ""
|
|
15
15
|
},
|
|
16
16
|
disabled: {
|
|
17
|
-
true: "tw-text-
|
|
17
|
+
true: "tw-text-disabled-on-disabled"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
compoundVariants: [
|
|
@@ -22,91 +22,91 @@ const s = t({
|
|
|
22
22
|
disabled: !1,
|
|
23
23
|
variant: "default",
|
|
24
24
|
emphasis: "default",
|
|
25
|
-
class: "[&_svg]:tw-text-
|
|
25
|
+
class: "[&_svg]:tw-text-primary [&_svg]:hover:tw-text-primary[&_svg]:active:tw-text-primary [&_svg]:tw-leading-none"
|
|
26
26
|
},
|
|
27
27
|
{
|
|
28
28
|
disabled: !1,
|
|
29
29
|
variant: "default",
|
|
30
30
|
emphasis: "weak",
|
|
31
|
-
class: "[&_svg]:tw-text-
|
|
31
|
+
class: "[&_svg]:tw-text-primary [&_svg]:hover:tw-text-primary [&_svg]:active:tw-text-primary [&_svg]:tw-leading-none"
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
34
|
disabled: !1,
|
|
35
35
|
variant: "default",
|
|
36
36
|
emphasis: "strong",
|
|
37
|
-
class: "[&_svg]:tw-text-
|
|
37
|
+
class: "[&_svg]:tw-text-primary-on-primary [&_svg]:hover:tw-text-primary-on-primary [&_svg]:active:tw-text-primary-on-primary [&_svg]:tw-leading-none"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
disabled: !1,
|
|
41
41
|
variant: "positive",
|
|
42
42
|
emphasis: "default",
|
|
43
|
-
class: "[&_svg]:tw-text-
|
|
43
|
+
class: "[&_svg]:tw-text-container-success-on-success-container [&_svg]:hover:tw-text-container-success-on-success-container[&_svg]:active:tw-text-container-success-on-success-container [&_svg]:tw-leading-none"
|
|
44
44
|
},
|
|
45
45
|
{
|
|
46
46
|
disabled: !1,
|
|
47
47
|
variant: "positive",
|
|
48
48
|
emphasis: "weak",
|
|
49
|
-
class: "[&_svg]:tw-text-
|
|
49
|
+
class: "[&_svg]:tw-text-success [&_svg]:hover:tw-text-container-success-on-success-container [&_svg]:active:tw-text-container-success-on-success-container [&_svg]:tw-leading-none"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
52
|
disabled: !1,
|
|
53
53
|
variant: "positive",
|
|
54
54
|
emphasis: "strong",
|
|
55
|
-
class: "[&_svg]:tw-text-
|
|
55
|
+
class: "[&_svg]:tw-text-success-on-success[&_svg]:hover:tw-text-success-on-success [&_svg]:active:tw-text-success-on-success [&_svg]:tw-leading-none"
|
|
56
56
|
},
|
|
57
57
|
{
|
|
58
58
|
disabled: !1,
|
|
59
59
|
variant: "negative",
|
|
60
60
|
emphasis: "default",
|
|
61
|
-
class: "[&_svg]:tw-text-
|
|
61
|
+
class: "[&_svg]:tw-text-container-error-on-error-container [&_svg]:hover:tw-text-button-negative-icon-hover[&_svg]:active:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
disabled: !1,
|
|
65
65
|
variant: "negative",
|
|
66
66
|
emphasis: "weak",
|
|
67
|
-
class: "[&_svg]:tw-text-
|
|
67
|
+
class: "[&_svg]:tw-text-error [&_svg]:hover:tw-text-container-error-on-error-container [&_svg]:active:tw-text-container-error-on-error-container [&_svg]:tw-leading-none"
|
|
68
68
|
},
|
|
69
69
|
{
|
|
70
70
|
disabled: !1,
|
|
71
71
|
variant: "negative",
|
|
72
72
|
emphasis: "strong",
|
|
73
|
-
class: "[&_svg]:tw-text-
|
|
73
|
+
class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
disabled: !1,
|
|
77
77
|
variant: "danger",
|
|
78
78
|
emphasis: "default",
|
|
79
|
-
class: "[&_svg]:tw-text-
|
|
79
|
+
class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error [&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
|
|
80
80
|
},
|
|
81
81
|
{
|
|
82
82
|
disabled: !1,
|
|
83
83
|
variant: "danger",
|
|
84
84
|
emphasis: "weak",
|
|
85
|
-
class: "[&_svg]:tw-text-
|
|
85
|
+
class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error [&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
disabled: !1,
|
|
89
89
|
variant: "danger",
|
|
90
90
|
emphasis: "strong",
|
|
91
|
-
class: "[&_svg]:tw-text-
|
|
91
|
+
class: "[&_svg]:tw-text-error-on-error [&_svg]:hover:tw-text-error-on-error[&_svg]:active:tw-text-error-on-error [&_svg]:tw-leading-none"
|
|
92
92
|
},
|
|
93
93
|
{
|
|
94
94
|
disabled: !1,
|
|
95
95
|
variant: "loud",
|
|
96
96
|
emphasis: "default",
|
|
97
|
-
class: "[&_svg]:tw-text-
|
|
97
|
+
class: "[&_svg]:tw-text-container-highlight-on-highlight-container [&_svg]:hover:tw-text-container-highlight-on-highlight-container [&_svg]:active:tw-text-container-highlight-on-highlight-container [&_svg]:tw-leading-none"
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
disabled: !1,
|
|
101
101
|
variant: "loud",
|
|
102
102
|
emphasis: "weak",
|
|
103
|
-
class: "[&_svg]:tw-text-
|
|
103
|
+
class: "[&_svg]:tw-text-highlight[&_svg]:hover:tw-text-container-highlight-on-highlight-container [&_svg]:active:tw-text-container-highlight-on-highlight-container [&_svg]:tw-leading-none"
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
disabled: !1,
|
|
107
107
|
variant: "loud",
|
|
108
108
|
emphasis: "strong",
|
|
109
|
-
class: "[&_svg]:tw-text-
|
|
109
|
+
class: "[&_svg]:tw-text-highlight-on-highlight [&_svg]:hover:tw-text-highlight-on-highlight [&_svg]:active:tw-text-highlight-on-highlight [&_svg]:tw-leading-none"
|
|
110
110
|
}
|
|
111
111
|
],
|
|
112
112
|
defaultVariants: {
|