@stackflow/plugin-basic-ui 1.0.1 → 1.0.3-alpha.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.
Files changed (16) hide show
  1. package/dist/basicUIPlugin.css.d.ts +1 -0
  2. package/dist/index.css +5 -1
  3. package/dist/index.css.map +3 -3
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +64 -61
  6. package/dist/index.js.map +4 -4
  7. package/dist/index.mjs +64 -61
  8. package/dist/index.mjs.map +4 -4
  9. package/package.json +4 -4
  10. package/src/basicUIPlugin.css.ts +2 -0
  11. package/src/basicUIPlugin.tsx +3 -1
  12. package/src/components/AppScreen.tsx +1 -1
  13. package/src/components/BottomSheet.tsx +1 -1
  14. package/src/components/Modal.tsx +1 -1
  15. package/src/hooks/useStyleEffectOffset.ts +2 -1
  16. package/src/index.ts +1 -0
package/dist/index.mjs CHANGED
@@ -18,13 +18,66 @@ var __spreadValues = (a, b) => {
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
 
21
+ // src/assets/IconBack.tsx
22
+ import { jsx } from "react/jsx-runtime";
23
+ var IconBack = (props) => /* @__PURE__ */ jsx(
24
+ "svg",
25
+ {
26
+ className: props.className,
27
+ width: "24",
28
+ height: "24",
29
+ viewBox: "0 0 24 24",
30
+ fill: "none",
31
+ xmlns: "http://www.w3.org/2000/svg",
32
+ children: /* @__PURE__ */ jsx(
33
+ "path",
34
+ {
35
+ d: "M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",
36
+ fill: "currentColor"
37
+ }
38
+ )
39
+ }
40
+ );
41
+ var IconBack_default = IconBack;
42
+
43
+ // src/assets/IconClose.tsx
44
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
45
+ var IconClose = (props) => /* @__PURE__ */ jsxs(
46
+ "svg",
47
+ {
48
+ className: props.className,
49
+ width: "24",
50
+ height: "24",
51
+ viewBox: "0 0 24 24",
52
+ fill: "none",
53
+ xmlns: "http://www.w3.org/2000/svg",
54
+ children: [
55
+ /* @__PURE__ */ jsx2(
56
+ "path",
57
+ {
58
+ d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
59
+ fill: "currentColor"
60
+ }
61
+ ),
62
+ /* @__PURE__ */ jsx2(
63
+ "path",
64
+ {
65
+ d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
66
+ fill: "currentColor"
67
+ }
68
+ )
69
+ ]
70
+ }
71
+ );
72
+ var IconClose_default = IconClose;
73
+
21
74
  // src/basicUIPlugin.tsx
22
75
  import { assignInlineVars } from "@vanilla-extract/dynamic";
23
76
  import { createContext, useContext } from "react";
24
77
 
25
78
  // src/basicUIPlugin.css.ts
26
79
  import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
27
- var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
80
+ var globalVars = { backgroundColor: "var(--stackflow-plugin-basic-ui-background-color)", dimBackgroundColor: "var(--stackflow-plugin-basic-ui-dim-background-color)", transitionDuration: "var(--stackflow-plugin-basic-ui-transition-duration)", computedTransitionDuration: "var(--stackflow-plugin-basic-ui-computed-transition-duration)", appBar: { borderColor: "var(--stackflow-plugin-basic-ui-app-bar-border-color)", borderSize: "var(--stackflow-plugin-basic-ui-app-bar-border-size)", height: "var(--stackflow-plugin-basic-ui-app-bar-height)", heightTransitionDuration: "var(--stackflow-plugin-basic-ui-app-bar-height-transition-duration)", minHeight: "var(--stackflow-plugin-basic-ui-app-bar-min-height)", iconColor: "var(--stackflow-plugin-basic-ui-app-bar-icon-color)", textColor: "var(--stackflow-plugin-basic-ui-app-bar-text-color)", backgroundColor: "var(--stackflow-plugin-basic-ui-app-bar-background-color)", overflow: "var(--stackflow-plugin-basic-ui-app-bar-overflow)" }, bottomSheet: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" }, modal: { borderRadius: "var(--stackflow-plugin-basic-ui-bottom-sheet-border-radius)" } };
28
81
  var stackWrapper = _7a468({ defaultClassName: "_1q6dj2j2", variantClassNames: { theme: { android: "_1q6dj2j0", cupertino: "_1q6dj2j1" }, loading: { true: "_1q6dj2j5" } }, defaultVariants: {}, compoundVariants: [] });
29
82
 
30
83
  // src/utils/compact.ts
@@ -86,7 +139,7 @@ function requestNextFrame(cb) {
86
139
  }
87
140
 
88
141
  // src/basicUIPlugin.tsx
89
- import { jsx } from "react/jsx-runtime";
142
+ import { jsx as jsx3 } from "react/jsx-runtime";
90
143
  var GlobalOptionsContext = createContext({
91
144
  theme: "android"
92
145
  });
@@ -98,7 +151,7 @@ var basicUIPlugin = (options) => () => ({
98
151
  key: "basic-ui",
99
152
  wrapStack({ stack }) {
100
153
  var _a, _b, _c, _d, _e, _f, _g;
101
- return /* @__PURE__ */ jsx(GlobalOptionsProvider, { value: options, children: /* @__PURE__ */ jsx(
154
+ return /* @__PURE__ */ jsx3(GlobalOptionsProvider, { value: options, children: /* @__PURE__ */ jsx3(
102
155
  "div",
103
156
  {
104
157
  className: compact([
@@ -112,7 +165,8 @@ var basicUIPlugin = (options) => () => ({
112
165
  compactMap({
113
166
  [globalVars.backgroundColor]: options.backgroundColor,
114
167
  [globalVars.dimBackgroundColor]: options.dimBackgroundColor,
115
- [globalVars.transitionDuration]: stack.globalTransitionState === "loading" ? `${stack.transitionDuration}ms` : "0ms",
168
+ [globalVars.transitionDuration]: `${stack.transitionDuration}ms`,
169
+ [globalVars.computedTransitionDuration]: stack.globalTransitionState === "loading" ? `${stack.transitionDuration}ms` : "0ms",
116
170
  [globalVars.appBar.borderColor]: (_a = options.appBar) == null ? void 0 : _a.borderColor,
117
171
  [globalVars.appBar.borderSize]: (_b = options.appBar) == null ? void 0 : _b.borderSize,
118
172
  [globalVars.appBar.height]: (_c = options.appBar) == null ? void 0 : _c.height,
@@ -309,7 +363,7 @@ function useStyleEffectOffset({
309
363
  if (!ref.current) {
310
364
  return;
311
365
  }
312
- ref.current.style.transition = globalVars.transitionDuration;
366
+ ref.current.style.transition = globalVars.computedTransitionDuration;
313
367
  ref.current.style.transform = transform;
314
368
  });
315
369
  switch (activityTransitionState) {
@@ -509,59 +563,6 @@ import { useActions } from "@stackflow/react";
509
563
  import { assignInlineVars as assignInlineVars2 } from "@vanilla-extract/dynamic";
510
564
  import { forwardRef, useRef } from "react";
511
565
 
512
- // src/assets/IconBack.tsx
513
- import { jsx as jsx2 } from "react/jsx-runtime";
514
- var IconBack = (props) => /* @__PURE__ */ jsx2(
515
- "svg",
516
- {
517
- className: props.className,
518
- width: "24",
519
- height: "24",
520
- viewBox: "0 0 24 24",
521
- fill: "none",
522
- xmlns: "http://www.w3.org/2000/svg",
523
- children: /* @__PURE__ */ jsx2(
524
- "path",
525
- {
526
- d: "M11.5659 5.56564C11.8783 5.25322 11.8783 4.74669 11.5659 4.43427C11.2535 4.12185 10.7469 4.12185 10.4345 4.43427L3.43451 11.4343C3.12209 11.7467 3.12209 12.2532 3.43451 12.5656L10.4345 19.5656C10.7469 19.8781 11.2535 19.8781 11.5659 19.5656C11.8783 19.2532 11.8783 18.7467 11.5659 18.4343L5.93157 12.8H20.0002C20.442 12.8 20.8002 12.4418 20.8002 12C20.8002 11.5581 20.442 11.2 20.0002 11.2H5.93157L11.5659 5.56564Z",
527
- fill: "currentColor"
528
- }
529
- )
530
- }
531
- );
532
- var IconBack_default = IconBack;
533
-
534
- // src/assets/IconClose.tsx
535
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
536
- var IconClose = (props) => /* @__PURE__ */ jsxs(
537
- "svg",
538
- {
539
- className: props.className,
540
- width: "24",
541
- height: "24",
542
- viewBox: "0 0 24 24",
543
- fill: "none",
544
- xmlns: "http://www.w3.org/2000/svg",
545
- children: [
546
- /* @__PURE__ */ jsx3(
547
- "path",
548
- {
549
- d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
550
- fill: "currentColor"
551
- }
552
- ),
553
- /* @__PURE__ */ jsx3(
554
- "path",
555
- {
556
- d: "M6.56588 5.43433C6.25346 5.12191 5.74693 5.12191 5.43451 5.43433C5.12209 5.74675 5.12209 6.25328 5.43451 6.5657L10.8688 12L5.43451 17.4343C5.12209 17.7467 5.12209 18.2533 5.43451 18.5657C5.74693 18.8781 6.25346 18.8781 6.56588 18.5657L12.0002 13.1314L17.4345 18.5657C17.7469 18.8781 18.2535 18.8781 18.5659 18.5657C18.8783 18.2533 18.8783 17.7467 18.5659 17.4343L13.1316 12L18.5659 6.5657C18.8783 6.25328 18.8783 5.74675 18.5659 5.43433C18.2535 5.12191 17.7469 5.12191 17.4345 5.43433L12.0002 10.8686L6.56588 5.43433Z",
557
- fill: "currentColor"
558
- }
559
- )
560
- ]
561
- }
562
- );
563
- var IconClose_default = IconClose;
564
-
565
566
  // src/components/AppBar.css.ts
566
567
  import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
567
568
  var appBar = _7a4682({ defaultClassName: "_1yk3a452 dhthxq4 dhthxq0 dhthxqh _1dlf4347 _1yk3a451", variantClassNames: { border: { true: "_1yk3a453" }, presentModalFullScreen: { true: "_1yk3a454" } }, defaultVariants: {}, compoundVariants: [] });
@@ -873,7 +874,7 @@ var AppScreen = ({
873
874
  [vars.zIndexes.paper]: `${zIndexPaper}`,
874
875
  [vars.zIndexes.edge]: `${zIndexEdge}`,
875
876
  [vars.zIndexes.appBar]: `${zIndexAppBar}`,
876
- [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.transitionDuration : "0ms"
877
+ [vars.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
877
878
  })
878
879
  ),
879
880
  children: [
@@ -978,7 +979,7 @@ var BottomSheet = ({
978
979
  [globalVars.dimBackgroundColor]: dimBackgroundColor,
979
980
  [vars2.zIndexes.dim]: `${zIndexBase}`,
980
981
  [vars2.zIndexes.paper]: `${zIndexPaper}`,
981
- [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.transitionDuration : "0ms"
982
+ [vars2.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
982
983
  })
983
984
  ),
984
985
  children: /* @__PURE__ */ jsx6("div", { className: dim2, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx6("div", { className: paper2, onClick: onPaperClick, children }) })
@@ -1058,7 +1059,7 @@ var Modal = ({
1058
1059
  [globalVars.dimBackgroundColor]: dimBackgroundColor,
1059
1060
  [vars3.zIndexes.dim]: `${zIndexBase}`,
1060
1061
  [vars3.zIndexes.paper]: `${zIndexPaper}`,
1061
- [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.transitionDuration : "0ms"
1062
+ [vars3.transitionDuration]: transitionState === "enter-active" || transitionState === "exit-active" ? globalVars.computedTransitionDuration : "0ms"
1062
1063
  })
1063
1064
  ),
1064
1065
  children: /* @__PURE__ */ jsx7("div", { className: dim3, ref: paperRef, onClick: onDimClick, children: /* @__PURE__ */ jsx7("div", { className: paper3, onClick: onPaperClick, children }) })
@@ -1070,6 +1071,8 @@ var Modal_default = Modal;
1070
1071
  export {
1071
1072
  AppScreen_default as AppScreen,
1072
1073
  BottomSheet_default as BottomSheet,
1074
+ IconBack_default as IconBack,
1075
+ IconClose_default as IconClose,
1073
1076
  Modal_default as Modal,
1074
1077
  basicUIPlugin,
1075
1078
  globalVars as cssVars,