@frontify/fondue-components 1.2.2 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fondue-components.js +16 -4
- package/dist/fondue-components.js.map +1 -1
- package/dist/fondue-components10.js +47 -32
- package/dist/fondue-components10.js.map +1 -1
- package/dist/fondue-components11.js +45 -2359
- package/dist/fondue-components11.js.map +1 -1
- package/dist/fondue-components12.js +8 -143
- package/dist/fondue-components12.js.map +1 -1
- package/dist/fondue-components13.js +12 -29
- package/dist/fondue-components13.js.map +1 -1
- package/dist/fondue-components14.js +157 -0
- package/dist/fondue-components14.js.map +1 -0
- package/dist/fondue-components15.js +121 -0
- package/dist/fondue-components15.js.map +1 -0
- package/dist/fondue-components16.js +121 -0
- package/dist/fondue-components16.js.map +1 -0
- package/dist/fondue-components17.js +23 -0
- package/dist/fondue-components17.js.map +1 -0
- package/dist/fondue-components18.js +63 -0
- package/dist/fondue-components18.js.map +1 -0
- package/dist/fondue-components19.js +20 -0
- package/dist/fondue-components19.js.map +1 -0
- package/dist/fondue-components20.js +38 -0
- package/dist/fondue-components20.js.map +1 -0
- package/dist/fondue-components21.js +28 -0
- package/dist/fondue-components21.js.map +1 -0
- package/dist/fondue-components22.js +11 -0
- package/dist/fondue-components22.js.map +1 -0
- package/dist/fondue-components23.js +8 -0
- package/dist/fondue-components23.js.map +1 -0
- package/dist/fondue-components24.js +18 -0
- package/dist/fondue-components24.js.map +1 -0
- package/dist/fondue-components25.js +2363 -0
- package/dist/fondue-components25.js.map +1 -0
- package/dist/fondue-components26.js +146 -0
- package/dist/fondue-components26.js.map +1 -0
- package/dist/fondue-components27.js +32 -0
- package/dist/fondue-components27.js.map +1 -0
- package/dist/fondue-components3.js +21 -16
- package/dist/fondue-components3.js.map +1 -1
- package/dist/fondue-components4.js +44 -51
- package/dist/fondue-components4.js.map +1 -1
- package/dist/fondue-components5.js +22 -34
- package/dist/fondue-components5.js.map +1 -1
- package/dist/fondue-components6.js +57 -11
- package/dist/fondue-components6.js.map +1 -1
- package/dist/fondue-components7.js +23 -153
- package/dist/fondue-components7.js.map +1 -1
- package/dist/fondue-components8.js +38 -116
- package/dist/fondue-components8.js.map +1 -1
- package/dist/fondue-components9.js +46 -116
- package/dist/fondue-components9.js.map +1 -1
- package/dist/index.d.ts +378 -9
- package/dist/style.css +1 -1
- package/package.json +43 -31
|
@@ -1,120 +1,42 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import * as t from "@radix-ui/react-progress";
|
|
3
|
+
import { forwardRef as s } from "react";
|
|
4
|
+
import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components20.js";
|
|
5
|
+
const p = s(
|
|
6
|
+
({
|
|
7
|
+
value: a,
|
|
8
|
+
max: r = 100,
|
|
9
|
+
rounded: d = !0,
|
|
10
|
+
style: o = "default",
|
|
11
|
+
size: e = "medium",
|
|
12
|
+
"data-test-id": n = "fondue-loading-bar",
|
|
13
|
+
...l
|
|
14
|
+
}, m) => /* @__PURE__ */ i(
|
|
15
|
+
t.Root,
|
|
16
|
+
{
|
|
17
|
+
ref: m,
|
|
18
|
+
"data-test-id": n,
|
|
19
|
+
className: g({ rounded: d, size: e, style: o }),
|
|
20
|
+
"aria-busy": a !== r,
|
|
21
|
+
value: a,
|
|
22
|
+
max: r,
|
|
23
|
+
style: {
|
|
24
|
+
"--loading-bar-value": a,
|
|
25
|
+
"--loading-bar-max": r,
|
|
26
|
+
"--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
|
|
27
|
+
},
|
|
28
|
+
...l,
|
|
29
|
+
children: /* @__PURE__ */ i(
|
|
30
|
+
t.Indicator,
|
|
31
|
+
{
|
|
32
|
+
className: f({ style: o, indeterminateState: a === null })
|
|
33
|
+
}
|
|
34
|
+
)
|
|
18
35
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
disabled: !1,
|
|
23
|
-
style: "default",
|
|
24
|
-
emphasis: "default",
|
|
25
|
-
class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
disabled: !1,
|
|
29
|
-
style: "default",
|
|
30
|
-
emphasis: "weak",
|
|
31
|
-
class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
disabled: !1,
|
|
35
|
-
style: "default",
|
|
36
|
-
emphasis: "strong",
|
|
37
|
-
class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
disabled: !1,
|
|
41
|
-
style: "positive",
|
|
42
|
-
emphasis: "default",
|
|
43
|
-
class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
disabled: !1,
|
|
47
|
-
style: "positive",
|
|
48
|
-
emphasis: "weak",
|
|
49
|
-
class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
disabled: !1,
|
|
53
|
-
style: "positive",
|
|
54
|
-
emphasis: "strong",
|
|
55
|
-
class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
disabled: !1,
|
|
59
|
-
style: "negative",
|
|
60
|
-
emphasis: "default",
|
|
61
|
-
class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
disabled: !1,
|
|
65
|
-
style: "negative",
|
|
66
|
-
emphasis: "weak",
|
|
67
|
-
class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
disabled: !1,
|
|
71
|
-
style: "negative",
|
|
72
|
-
emphasis: "strong",
|
|
73
|
-
class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
disabled: !1,
|
|
77
|
-
style: "danger",
|
|
78
|
-
emphasis: "default",
|
|
79
|
-
class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
disabled: !1,
|
|
83
|
-
style: "danger",
|
|
84
|
-
emphasis: "weak",
|
|
85
|
-
class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
disabled: !1,
|
|
89
|
-
style: "danger",
|
|
90
|
-
emphasis: "strong",
|
|
91
|
-
class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
disabled: !1,
|
|
95
|
-
style: "loud",
|
|
96
|
-
emphasis: "default",
|
|
97
|
-
class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
disabled: !1,
|
|
101
|
-
style: "loud",
|
|
102
|
-
emphasis: "weak",
|
|
103
|
-
class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
disabled: !1,
|
|
107
|
-
style: "loud",
|
|
108
|
-
emphasis: "strong",
|
|
109
|
-
class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
|
|
110
|
-
}
|
|
111
|
-
],
|
|
112
|
-
defaultVariants: {
|
|
113
|
-
emphasis: "strong",
|
|
114
|
-
style: "default"
|
|
115
|
-
}
|
|
116
|
-
});
|
|
36
|
+
)
|
|
37
|
+
);
|
|
38
|
+
p.displayName = "LoadingBar";
|
|
117
39
|
export {
|
|
118
|
-
|
|
40
|
+
p as LoadingBar
|
|
119
41
|
};
|
|
120
42
|
//# sourceMappingURL=fondue-components8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components8.js","sources":["../src/components/
|
|
1
|
+
{"version":3,"file":"fondue-components8.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n /**\n * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n * @default null\n */\n value: number | null;\n /**\n * The maximum value of the loading bar\n * @default 100\n */\n max?: number;\n /**\n * @default 'fondue-loading-bar'\n */\n 'data-test-id'?: string;\n /**\n * Add rounded corners to the loading bar\n * @default true\n */\n rounded?: boolean;\n /**\n * The style of the loading bar\n * @default \"default\"\n */\n style?: 'default' | 'positive' | 'negative';\n /**\n * The size of the loading bar\n * @default \"medium\"\n */\n size?: 'small' | 'medium' | 'large' | 'x-large';\n /**\n * The label of the loading bar for accessibility purposes\n */\n getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n (\n {\n value,\n max = 100,\n rounded = true,\n style = 'default',\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-loading-bar',\n ...props\n }: LoadingBarProps,\n ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n ) => {\n return (\n <ProgressRadixPrimitive.Root\n ref={ref}\n data-test-id={dataTestId}\n className={loadingBarContainerStyles({ rounded, size, style })}\n aria-busy={value !== max}\n value={value}\n max={max}\n style={\n {\n '--loading-bar-value': value,\n '--loading-bar-max': max,\n '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n } as CSSProperties\n }\n {...props}\n >\n <ProgressRadixPrimitive.Indicator\n className={loadingBarStyles({ style, indeterminateState: value === null })}\n />\n </ProgressRadixPrimitive.Root>\n );\n },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
|
|
@@ -1,120 +1,50 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import * as r from "@radix-ui/react-toggle-group";
|
|
3
|
+
import { forwardRef as m } from "react";
|
|
4
|
+
import { useControllableState as S } from "./fondue-components21.js";
|
|
5
|
+
import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components22.js";
|
|
6
|
+
const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
|
|
7
|
+
const [p, C] = S({
|
|
8
|
+
prop: o,
|
|
9
|
+
defaultProp: s,
|
|
10
|
+
onChange: c
|
|
11
|
+
});
|
|
12
|
+
return /* @__PURE__ */ l(
|
|
13
|
+
r.Root,
|
|
14
|
+
{
|
|
15
|
+
ref: g,
|
|
16
|
+
...a,
|
|
17
|
+
className: f,
|
|
18
|
+
onValueChange: (n) => {
|
|
19
|
+
n && C(n);
|
|
20
|
+
},
|
|
21
|
+
value: p,
|
|
22
|
+
type: "single",
|
|
23
|
+
asChild: !1,
|
|
24
|
+
"aria-disabled": a.disabled,
|
|
25
|
+
children: [
|
|
26
|
+
e,
|
|
27
|
+
/* @__PURE__ */ t("div", { className: I })
|
|
28
|
+
]
|
|
18
29
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
disabled: !1,
|
|
35
|
-
style: "default",
|
|
36
|
-
emphasis: "strong",
|
|
37
|
-
class: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-text-pressed"
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
disabled: !1,
|
|
41
|
-
style: "positive",
|
|
42
|
-
emphasis: "default",
|
|
43
|
-
class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
disabled: !1,
|
|
47
|
-
style: "positive",
|
|
48
|
-
emphasis: "weak",
|
|
49
|
-
class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
disabled: !1,
|
|
53
|
-
style: "positive",
|
|
54
|
-
emphasis: "strong",
|
|
55
|
-
class: "tw-text-button-strong-positive-text group-hover:tw-text-button-strong-positive-text-hover group-active:tw-text-button-strong-positive-text-pressed"
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
disabled: !1,
|
|
59
|
-
style: "negative",
|
|
60
|
-
emphasis: "default",
|
|
61
|
-
class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
disabled: !1,
|
|
65
|
-
style: "negative",
|
|
66
|
-
emphasis: "weak",
|
|
67
|
-
class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
disabled: !1,
|
|
71
|
-
style: "negative",
|
|
72
|
-
emphasis: "strong",
|
|
73
|
-
class: "tw-text-button-strong-negative-text group-hover:tw-text-button-strong-negative-text-hovergroup-active:tw-text-button-strong-negative-text-pressed"
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
disabled: !1,
|
|
77
|
-
style: "danger",
|
|
78
|
-
emphasis: "default",
|
|
79
|
-
class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
disabled: !1,
|
|
83
|
-
style: "danger",
|
|
84
|
-
emphasis: "weak",
|
|
85
|
-
class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
disabled: !1,
|
|
89
|
-
style: "danger",
|
|
90
|
-
emphasis: "strong",
|
|
91
|
-
class: "tw-text-button-danger-text group-hover:tw-text-button-danger-text-hovergroup-active:tw-text-button-danger-text-pressed"
|
|
92
|
-
},
|
|
93
|
-
{
|
|
94
|
-
disabled: !1,
|
|
95
|
-
style: "loud",
|
|
96
|
-
emphasis: "default",
|
|
97
|
-
class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
|
|
98
|
-
},
|
|
99
|
-
{
|
|
100
|
-
disabled: !1,
|
|
101
|
-
style: "loud",
|
|
102
|
-
emphasis: "weak",
|
|
103
|
-
class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
|
|
104
|
-
},
|
|
105
|
-
{
|
|
106
|
-
disabled: !1,
|
|
107
|
-
style: "loud",
|
|
108
|
-
emphasis: "strong",
|
|
109
|
-
class: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse"
|
|
110
|
-
}
|
|
111
|
-
],
|
|
112
|
-
defaultVariants: {
|
|
113
|
-
emphasis: "strong",
|
|
114
|
-
style: "default"
|
|
115
|
-
}
|
|
116
|
-
});
|
|
30
|
+
);
|
|
31
|
+
};
|
|
32
|
+
d.displayName = "SegmentedControl.Root";
|
|
33
|
+
const i = ({ children: e, ...o }, s) => /* @__PURE__ */ l(r.Item, { ref: s, ...o, className: y, asChild: !1, children: [
|
|
34
|
+
/* @__PURE__ */ t("span", { className: N }),
|
|
35
|
+
/* @__PURE__ */ l("span", { className: u, children: [
|
|
36
|
+
/* @__PURE__ */ t("span", { className: b, children: e }),
|
|
37
|
+
/* @__PURE__ */ t("span", { className: h, children: e })
|
|
38
|
+
] })
|
|
39
|
+
] });
|
|
40
|
+
i.displayName = "SegmentedControl.Item";
|
|
41
|
+
const j = {
|
|
42
|
+
Root: m(d),
|
|
43
|
+
Item: m(i)
|
|
44
|
+
};
|
|
117
45
|
export {
|
|
118
|
-
|
|
46
|
+
j as SegmentedControl,
|
|
47
|
+
i as SegmentedControlItem,
|
|
48
|
+
d as SegmentedControlRoot
|
|
119
49
|
};
|
|
120
50
|
//# sourceMappingURL=fondue-components9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components9.js","sources":["../src/components/
|
|
1
|
+
{"version":3,"file":"fondue-components9.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport {\n segmentedControlActiveIndicatorStyles,\n segmentedControlItemLabelActiveStyles,\n segmentedControlItemLabelInactiveStyles,\n segmentedControlItemLabelStyles,\n segmentedControlItemSeparatorStyles,\n segmentedControlItemStyles,\n segmentedControlRootStyles,\n} from './styles/segmentedControlStyles';\n\nexport type SegmentedControlRootProps = {\n id?: string;\n children: ReactNode;\n /**\n * The default value of the segmented control\n * Used for uncontrolled components\n */\n defaultValue: string;\n /**\n * The controlled value of the segmented control\n */\n value?: string;\n /**\n * Event handler called when the value changes\n */\n onValueChange?: (value: string) => void;\n /**\n * Disable the segmented control\n * @default false\n */\n disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n ref: ForwardedRef<HTMLDivElement>,\n) => {\n const [value, setValue] = useControllableState({\n prop: propsValue,\n defaultProp: defaultValue,\n onChange: onValueChange,\n });\n\n return (\n <ToggleGroupPrimitive.Root\n ref={ref}\n {...rootProps}\n className={segmentedControlRootStyles}\n onValueChange={(value) => {\n if (value) {\n setValue(value);\n }\n }}\n value={value}\n type=\"single\"\n asChild={false}\n aria-disabled={rootProps.disabled}\n >\n {children}\n {/* Active indicator */}\n <div className={segmentedControlActiveIndicatorStyles} />\n </ToggleGroupPrimitive.Root>\n );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n children: ReactNode;\n value: string;\n};\n\nexport const SegmentedControlItem = (\n { children, ...itemProps }: SegmentedControlItemProps,\n ref: ForwardedRef<HTMLButtonElement>,\n) => (\n <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={segmentedControlItemStyles} asChild={false}>\n {/* Separator */}\n <span className={segmentedControlItemSeparatorStyles} />\n <span className={segmentedControlItemLabelStyles}>\n {/* Active children */}\n <span className={segmentedControlItemLabelActiveStyles}>{children}</span>\n\n {/* Inactive children */}\n <span className={segmentedControlItemLabelInactiveStyles}>{children}</span>\n </span>\n </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","segmentedControlRootStyles","jsx","segmentedControlActiveIndicatorStyles","SegmentedControlItem","itemProps","segmentedControlItemStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles","SegmentedControl","forwardRef"],"mappings":";;;;;AAwCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO;AAAA,MACX,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAED,gBAAAY,EAAC,OAAI,EAAA,WAAWC,EAAuC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE;AACAd,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfV,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGU,GAAW,WAAWC,GAA4B,SAAS,IAEhG,UAAA;AAAA,EAAC,gBAAAJ,EAAA,QAAA,EAAK,WAAWK,EAAqC,CAAA;AAAA,EACtD,gBAAAR,EAAC,QAAK,EAAA,WAAWS,GAEb,UAAA;AAAA,IAAC,gBAAAN,EAAA,QAAA,EAAK,WAAWO,GAAwC,UAAAnB,EAAS,CAAA;AAAA,IAGjE,gBAAAY,EAAA,QAAA,EAAK,WAAWQ,GAA0C,UAAApB,EAAS,CAAA;AAAA,EAAA,GACxE;AAAA,GACJ;AAEJc,EAAqB,cAAc;AAE5B,MAAMO,IAAmB;AAAA,EAC5B,MAAMC,EAAsDvB,CAAoB;AAAA,EAChF,MAAMuB,EAAyDR,CAAoB;AACvF;"}
|