local-operator-ui 0.1.2-beta.6 → 0.1.2-beta.7

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.
@@ -1,390 +1,4 @@
1
- import { h as generateUtilityClass, i as generateUtilityClasses, a as reactExports, k as useDefaultProps, F as useRtl, j as jsxRuntimeExports, s as styled, b as clsx, e as capitalize, f as composeClasses, m as memoTheme, x as createSimplePaletteValueFilter, z as lighten, y as darken, bg as css, aU as keyframes, Y as Box, J as Typography, q as useTheme, a1 as Button, bd as ThemeProvider, be as theme, bb as CssBaseline, bc as ReactDOM, R as React, bf as ErrorBoundary } from "./theme-IY_ZyJQp.js";
2
- function getLinearProgressUtilityClass(slot) {
3
- return generateUtilityClass("MuiLinearProgress", slot);
4
- }
5
- generateUtilityClasses("MuiLinearProgress", ["root", "colorPrimary", "colorSecondary", "determinate", "indeterminate", "buffer", "query", "dashed", "dashedColorPrimary", "dashedColorSecondary", "bar", "bar1", "bar2", "barColorPrimary", "barColorSecondary", "bar1Indeterminate", "bar1Determinate", "bar1Buffer", "bar2Indeterminate", "bar2Buffer"]);
6
- const TRANSITION_DURATION = 4;
7
- const indeterminate1Keyframe = keyframes`
8
- 0% {
9
- left: -35%;
10
- right: 100%;
11
- }
12
-
13
- 60% {
14
- left: 100%;
15
- right: -90%;
16
- }
17
-
18
- 100% {
19
- left: 100%;
20
- right: -90%;
21
- }
22
- `;
23
- const indeterminate1Animation = typeof indeterminate1Keyframe !== "string" ? css`
24
- animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
25
- ` : null;
26
- const indeterminate2Keyframe = keyframes`
27
- 0% {
28
- left: -200%;
29
- right: 100%;
30
- }
31
-
32
- 60% {
33
- left: 107%;
34
- right: -8%;
35
- }
36
-
37
- 100% {
38
- left: 107%;
39
- right: -8%;
40
- }
41
- `;
42
- const indeterminate2Animation = typeof indeterminate2Keyframe !== "string" ? css`
43
- animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
44
- ` : null;
45
- const bufferKeyframe = keyframes`
46
- 0% {
47
- opacity: 1;
48
- background-position: 0 -23px;
49
- }
50
-
51
- 60% {
52
- opacity: 0;
53
- background-position: 0 -23px;
54
- }
55
-
56
- 100% {
57
- opacity: 1;
58
- background-position: -200px -23px;
59
- }
60
- `;
61
- const bufferAnimation = typeof bufferKeyframe !== "string" ? css`
62
- animation: ${bufferKeyframe} 3s infinite linear;
63
- ` : null;
64
- const useUtilityClasses = (ownerState) => {
65
- const {
66
- classes,
67
- variant,
68
- color
69
- } = ownerState;
70
- const slots = {
71
- root: ["root", `color${capitalize(color)}`, variant],
72
- dashed: ["dashed", `dashedColor${capitalize(color)}`],
73
- bar1: ["bar", "bar1", `barColor${capitalize(color)}`, (variant === "indeterminate" || variant === "query") && "bar1Indeterminate", variant === "determinate" && "bar1Determinate", variant === "buffer" && "bar1Buffer"],
74
- bar2: ["bar", "bar2", variant !== "buffer" && `barColor${capitalize(color)}`, variant === "buffer" && `color${capitalize(color)}`, (variant === "indeterminate" || variant === "query") && "bar2Indeterminate", variant === "buffer" && "bar2Buffer"]
75
- };
76
- return composeClasses(slots, getLinearProgressUtilityClass, classes);
77
- };
78
- const getColorShade = (theme2, color) => {
79
- if (theme2.vars) {
80
- return theme2.vars.palette.LinearProgress[`${color}Bg`];
81
- }
82
- return theme2.palette.mode === "light" ? lighten(theme2.palette[color].main, 0.62) : darken(theme2.palette[color].main, 0.5);
83
- };
84
- const LinearProgressRoot = styled("span", {
85
- name: "MuiLinearProgress",
86
- slot: "Root",
87
- overridesResolver: (props, styles) => {
88
- const {
89
- ownerState
90
- } = props;
91
- return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];
92
- }
93
- })(memoTheme(({
94
- theme: theme2
95
- }) => ({
96
- position: "relative",
97
- overflow: "hidden",
98
- display: "block",
99
- height: 4,
100
- // Fix Safari's bug during composition of different paint.
101
- zIndex: 0,
102
- "@media print": {
103
- colorAdjust: "exact"
104
- },
105
- variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
106
- props: {
107
- color
108
- },
109
- style: {
110
- backgroundColor: getColorShade(theme2, color)
111
- }
112
- })), {
113
- props: ({
114
- ownerState
115
- }) => ownerState.color === "inherit" && ownerState.variant !== "buffer",
116
- style: {
117
- "&::before": {
118
- content: '""',
119
- position: "absolute",
120
- left: 0,
121
- top: 0,
122
- right: 0,
123
- bottom: 0,
124
- backgroundColor: "currentColor",
125
- opacity: 0.3
126
- }
127
- }
128
- }, {
129
- props: {
130
- variant: "buffer"
131
- },
132
- style: {
133
- backgroundColor: "transparent"
134
- }
135
- }, {
136
- props: {
137
- variant: "query"
138
- },
139
- style: {
140
- transform: "rotate(180deg)"
141
- }
142
- }]
143
- })));
144
- const LinearProgressDashed = styled("span", {
145
- name: "MuiLinearProgress",
146
- slot: "Dashed",
147
- overridesResolver: (props, styles) => {
148
- const {
149
- ownerState
150
- } = props;
151
- return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
152
- }
153
- })(memoTheme(({
154
- theme: theme2
155
- }) => ({
156
- position: "absolute",
157
- marginTop: 0,
158
- height: "100%",
159
- width: "100%",
160
- backgroundSize: "10px 10px",
161
- backgroundPosition: "0 -23px",
162
- variants: [{
163
- props: {
164
- color: "inherit"
165
- },
166
- style: {
167
- opacity: 0.3,
168
- backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
169
- }
170
- }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => {
171
- const backgroundColor = getColorShade(theme2, color);
172
- return {
173
- props: {
174
- color
175
- },
176
- style: {
177
- backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`
178
- }
179
- };
180
- })]
181
- })), bufferAnimation || {
182
- // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
183
- animation: `${bufferKeyframe} 3s infinite linear`
184
- });
185
- const LinearProgressBar1 = styled("span", {
186
- name: "MuiLinearProgress",
187
- slot: "Bar1",
188
- overridesResolver: (props, styles) => {
189
- const {
190
- ownerState
191
- } = props;
192
- return [styles.bar, styles.bar1, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles.bar1Indeterminate, ownerState.variant === "determinate" && styles.bar1Determinate, ownerState.variant === "buffer" && styles.bar1Buffer];
193
- }
194
- })(memoTheme(({
195
- theme: theme2
196
- }) => ({
197
- width: "100%",
198
- position: "absolute",
199
- left: 0,
200
- bottom: 0,
201
- top: 0,
202
- transition: "transform 0.2s linear",
203
- transformOrigin: "left",
204
- variants: [{
205
- props: {
206
- color: "inherit"
207
- },
208
- style: {
209
- backgroundColor: "currentColor"
210
- }
211
- }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
212
- props: {
213
- color
214
- },
215
- style: {
216
- backgroundColor: (theme2.vars || theme2).palette[color].main
217
- }
218
- })), {
219
- props: {
220
- variant: "determinate"
221
- },
222
- style: {
223
- transition: `transform .${TRANSITION_DURATION}s linear`
224
- }
225
- }, {
226
- props: {
227
- variant: "buffer"
228
- },
229
- style: {
230
- zIndex: 1,
231
- transition: `transform .${TRANSITION_DURATION}s linear`
232
- }
233
- }, {
234
- props: ({
235
- ownerState
236
- }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
237
- style: {
238
- width: "auto"
239
- }
240
- }, {
241
- props: ({
242
- ownerState
243
- }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
244
- style: indeterminate1Animation || {
245
- animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
246
- }
247
- }]
248
- })));
249
- const LinearProgressBar2 = styled("span", {
250
- name: "MuiLinearProgress",
251
- slot: "Bar2",
252
- overridesResolver: (props, styles) => {
253
- const {
254
- ownerState
255
- } = props;
256
- return [styles.bar, styles.bar2, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === "indeterminate" || ownerState.variant === "query") && styles.bar2Indeterminate, ownerState.variant === "buffer" && styles.bar2Buffer];
257
- }
258
- })(memoTheme(({
259
- theme: theme2
260
- }) => ({
261
- width: "100%",
262
- position: "absolute",
263
- left: 0,
264
- bottom: 0,
265
- top: 0,
266
- transition: "transform 0.2s linear",
267
- transformOrigin: "left",
268
- variants: [...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
269
- props: {
270
- color
271
- },
272
- style: {
273
- "--LinearProgressBar2-barColor": (theme2.vars || theme2).palette[color].main
274
- }
275
- })), {
276
- props: ({
277
- ownerState
278
- }) => ownerState.variant !== "buffer" && ownerState.color !== "inherit",
279
- style: {
280
- backgroundColor: "var(--LinearProgressBar2-barColor, currentColor)"
281
- }
282
- }, {
283
- props: ({
284
- ownerState
285
- }) => ownerState.variant !== "buffer" && ownerState.color === "inherit",
286
- style: {
287
- backgroundColor: "currentColor"
288
- }
289
- }, {
290
- props: {
291
- color: "inherit"
292
- },
293
- style: {
294
- opacity: 0.3
295
- }
296
- }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
297
- props: {
298
- color,
299
- variant: "buffer"
300
- },
301
- style: {
302
- backgroundColor: getColorShade(theme2, color),
303
- transition: `transform .${TRANSITION_DURATION}s linear`
304
- }
305
- })), {
306
- props: ({
307
- ownerState
308
- }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
309
- style: {
310
- width: "auto"
311
- }
312
- }, {
313
- props: ({
314
- ownerState
315
- }) => ownerState.variant === "indeterminate" || ownerState.variant === "query",
316
- style: indeterminate2Animation || {
317
- animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
318
- }
319
- }]
320
- })));
321
- const LinearProgress = /* @__PURE__ */ reactExports.forwardRef(function LinearProgress2(inProps, ref) {
322
- const props = useDefaultProps({
323
- props: inProps,
324
- name: "MuiLinearProgress"
325
- });
326
- const {
327
- className,
328
- color = "primary",
329
- value,
330
- valueBuffer,
331
- variant = "indeterminate",
332
- ...other
333
- } = props;
334
- const ownerState = {
335
- ...props,
336
- color,
337
- variant
338
- };
339
- const classes = useUtilityClasses(ownerState);
340
- const isRtl = useRtl();
341
- const rootProps = {};
342
- const inlineStyles = {
343
- bar1: {},
344
- bar2: {}
345
- };
346
- if (variant === "determinate" || variant === "buffer") {
347
- if (value !== void 0) {
348
- rootProps["aria-valuenow"] = Math.round(value);
349
- rootProps["aria-valuemin"] = 0;
350
- rootProps["aria-valuemax"] = 100;
351
- let transform = value - 100;
352
- if (isRtl) {
353
- transform = -transform;
354
- }
355
- inlineStyles.bar1.transform = `translateX(${transform}%)`;
356
- }
357
- }
358
- if (variant === "buffer") {
359
- if (valueBuffer !== void 0) {
360
- let transform = (valueBuffer || 0) - 100;
361
- if (isRtl) {
362
- transform = -transform;
363
- }
364
- inlineStyles.bar2.transform = `translateX(${transform}%)`;
365
- }
366
- }
367
- return /* @__PURE__ */ jsxRuntimeExports.jsxs(LinearProgressRoot, {
368
- className: clsx(classes.root, className),
369
- ownerState,
370
- role: "progressbar",
371
- ...rootProps,
372
- ref,
373
- ...other,
374
- children: [variant === "buffer" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgressDashed, {
375
- className: classes.dashed,
376
- ownerState
377
- }) : null, /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgressBar1, {
378
- className: classes.bar1,
379
- ownerState,
380
- style: inlineStyles.bar1
381
- }), variant === "determinate" ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgressBar2, {
382
- className: classes.bar2,
383
- ownerState,
384
- style: inlineStyles.bar2
385
- })]
386
- });
387
- });
1
+ import { s as styled, Z as Box, aW as keyframes, J as Typography, a as reactExports, j as jsxRuntimeExports, q as useTheme, aV as LinearProgress, a2 as Button, bf as ThemeProvider, bg as theme, bd as CssBaseline, be as ReactDOM, R as React, bh as ErrorBoundary } from "./theme-C9zRS1f0.js";
388
2
  const AppContainer = styled(Box)(() => ({
389
3
  display: "flex",
390
4
  height: "100vh",