qstd 0.3.74 → 0.3.76

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 (6) hide show
  1. package/dist/block/drawer.d.ts.map +1 -1
  2. package/dist/react/index.cjs +75 -68
  3. package/dist/react/index.css +8 -14
  4. package/dist/react/index.js +75 -68
  5. package/package.json +1 -1
  6. package/styled-system/styles.css +10 -17
package/dist/block/drawer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAma9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}
1
+ {"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../src/block/drawer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AA+a9B,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,2CAMxD;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,2CAYrD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,uDAkDrD"}
package/dist/react/index.cjs CHANGED
@@ -2707,6 +2707,53 @@ function DrawerComponent(props) {
2707
2707
  const dragControls = framerMotion.useDragControls();
2708
2708
  const { open, setOpen } = useDrawer();
2709
2709
  const { onClose, onExitComplete, ...rest } = props;
2710
+ const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
2711
+ const hasMobileHeight = props.height !== void 0;
2712
+ const mobileVariants = hasMobileHeight ? {
2713
+ initial: { height: 0, opacity: 0.5 },
2714
+ animate: {
2715
+ height: props.height,
2716
+ opacity: 1,
2717
+ transition: {
2718
+ type: "spring",
2719
+ damping: 22,
2720
+ stiffness: 400,
2721
+ mass: 0.7
2722
+ }
2723
+ },
2724
+ exit: {
2725
+ height: 0,
2726
+ opacity: 0,
2727
+ transition: {
2728
+ type: "tween",
2729
+ duration: 0.2,
2730
+ ease: [0.4, 0, 1, 1]
2731
+ // ease-in for quick exit
2732
+ }
2733
+ }
2734
+ } : {
2735
+ initial: { transform: "translateY(100%)", opacity: 0.5 },
2736
+ animate: {
2737
+ transform: "translateY(0%)",
2738
+ opacity: 1,
2739
+ transition: {
2740
+ type: "spring",
2741
+ damping: 22,
2742
+ stiffness: 400,
2743
+ mass: 0.7
2744
+ }
2745
+ },
2746
+ exit: {
2747
+ transform: "translateY(100%)",
2748
+ opacity: 0,
2749
+ transition: {
2750
+ type: "tween",
2751
+ duration: 0.2,
2752
+ ease: [0.4, 0, 1, 1]
2753
+ // ease-in for quick exit
2754
+ }
2755
+ }
2756
+ };
2710
2757
  const [mounted, setMounted] = React3__namespace.default.useState(false);
2711
2758
  React3__namespace.default.useEffect(() => {
2712
2759
  setMounted(true);
@@ -2805,7 +2852,7 @@ function DrawerComponent(props) {
2805
2852
  Backdrop,
2806
2853
  {
2807
2854
  onClick: () => onBackdropClick(),
2808
- children: /* @__PURE__ */ jsxRuntime.jsxs(
2855
+ children: /* @__PURE__ */ jsxRuntime.jsx(
2809
2856
  MotionDiv4,
2810
2857
  {
2811
2858
  grid: true,
@@ -2856,35 +2903,10 @@ function DrawerComponent(props) {
2856
2903
  overflow: "hidden",
2857
2904
  // Note: Can't use framer-motion's `y` prop because it conflicts
2858
2905
  // with the drag motion value. Use CSS transform instead.
2859
- variants: {
2860
- initial: {
2861
- transform: "translateY(100%)",
2862
- opacity: 0.5
2863
- },
2864
- animate: {
2865
- transform: "translateY(0%)",
2866
- opacity: 1,
2867
- transition: {
2868
- type: "spring",
2869
- damping: 22,
2870
- stiffness: 400,
2871
- mass: 0.7
2872
- }
2873
- },
2874
- exit: {
2875
- transform: "translateY(100%)",
2876
- opacity: 0,
2877
- transition: {
2878
- type: "tween",
2879
- duration: 0.2,
2880
- ease: [0.4, 0, 1, 1]
2881
- // ease-in for quick exit
2882
- }
2883
- }
2884
- },
2885
2906
  drag: "y",
2886
2907
  style: { y },
2887
2908
  dragControls,
2909
+ variants: mobileVariants,
2888
2910
  onPointerDown: (e) => onDragStart(e),
2889
2911
  // drag={hasBackdrop ? "y" : false}
2890
2912
  dragElastic: 0,
@@ -2904,50 +2926,35 @@ function DrawerComponent(props) {
2904
2926
  },
2905
2927
  boxSizing: "border-box",
2906
2928
  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
2907
- bg: { base: "neutral.100", _dark: "neutral.900" },
2908
2929
  color: "text-primary",
2930
+ bg: drawerBg,
2909
2931
  ref,
2910
2932
  ...rest,
2911
- children: [
2912
- /* @__PURE__ */ jsxRuntime.jsxs(
2913
- MotionDiv4,
2914
- {
2915
- grid: true,
2916
- ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
2917
- children: [
2918
- !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsxRuntime.jsx(
2919
- MotionDiv4,
2920
- {
2921
- grid: true,
2922
- justifySelf: "center",
2923
- h: 6,
2924
- w: 34,
2925
- mt: "16px",
2926
- mb: 4,
2927
- br: 20,
2928
- bg: { base: "neutral.400", _dark: "neutral.600" },
2929
- cursor: props.drag ? "row-resize" : "default",
2930
- ref: dragHandleRef
2931
- }
2932
- ),
2933
- props.children
2934
- ]
2935
- }
2936
- ),
2937
- !isDesktop && /* @__PURE__ */ jsxRuntime.jsx(
2938
- MotionDiv4,
2939
- {
2940
- position: "absolute",
2941
- left: 0,
2942
- right: 0,
2943
- bottom: 0,
2944
- h: 100,
2945
- transform: "translateY(100%)",
2946
- bg: { base: "neutral.100", _dark: "neutral.900" },
2947
- pointerEvents: "none"
2948
- }
2949
- )
2950
- ]
2933
+ children: /* @__PURE__ */ jsxRuntime.jsxs(
2934
+ MotionDiv4,
2935
+ {
2936
+ grid: true,
2937
+ ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
2938
+ children: [
2939
+ !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsxRuntime.jsx(
2940
+ MotionDiv4,
2941
+ {
2942
+ grid: true,
2943
+ justifySelf: "center",
2944
+ h: 6,
2945
+ w: 34,
2946
+ mt: "16px",
2947
+ mb: 4,
2948
+ br: 20,
2949
+ bg: { base: "neutral.400", _dark: "neutral.600" },
2950
+ cursor: props.drag ? "row-resize" : "default",
2951
+ ref: dragHandleRef
2952
+ }
2953
+ ),
2954
+ props.children
2955
+ ]
2956
+ }
2957
+ )
2951
2958
  },
2952
2959
  "drawer"
2953
2960
  )
package/dist/react/index.css CHANGED
@@ -1020,24 +1020,18 @@
1020
1020
  .justify-self_center {
1021
1021
  justify-self: center;
1022
1022
  }
1023
- .pos_absolute {
1024
- position: absolute;
1025
- }
1026
- .trf_translateY\(100\%\) {
1027
- transform: translateY(100%);
1028
- }
1029
- .pointer-events_none {
1030
- pointer-events: none;
1031
- }
1032
1023
  .rg_14 {
1033
1024
  row-gap: 14px;
1034
1025
  }
1035
- .place-i_true,
1036
- .center_true {
1026
+ .place-i_true {
1037
1027
  place-items: center;
1038
1028
  }
1029
+ .pos_absolute {
1030
+ position: absolute;
1031
+ }
1039
1032
  .center_true {
1040
1033
  place-content: center;
1034
+ place-items: center;
1041
1035
  }
1042
1036
  .fs_16 {
1043
1037
  font-size: 16px;
@@ -1115,6 +1109,9 @@
1115
1109
  .grid-af_column {
1116
1110
  grid-auto-flow: column;
1117
1111
  }
1112
+ .pointer-events_none {
1113
+ pointer-events: none;
1114
+ }
1118
1115
  .trf-o_top_left {
1119
1116
  transform-origin: top left;
1120
1117
  }
@@ -1278,9 +1275,6 @@
1278
1275
  .mb_4 {
1279
1276
  margin-bottom: var(--spacing-4);
1280
1277
  }
1281
- .h_100 {
1282
- height: 100px;
1283
- }
1284
1278
  .top_0 {
1285
1279
  top: var(--spacing-0);
1286
1280
  }
package/dist/react/index.js CHANGED
@@ -2684,6 +2684,53 @@ function DrawerComponent(props) {
2684
2684
  const dragControls = useDragControls();
2685
2685
  const { open, setOpen } = useDrawer();
2686
2686
  const { onClose, onExitComplete, ...rest } = props;
2687
+ const drawerBg = rest.bg ?? { base: "neutral.100", _dark: "neutral.900" };
2688
+ const hasMobileHeight = props.height !== void 0;
2689
+ const mobileVariants = hasMobileHeight ? {
2690
+ initial: { height: 0, opacity: 0.5 },
2691
+ animate: {
2692
+ height: props.height,
2693
+ opacity: 1,
2694
+ transition: {
2695
+ type: "spring",
2696
+ damping: 22,
2697
+ stiffness: 400,
2698
+ mass: 0.7
2699
+ }
2700
+ },
2701
+ exit: {
2702
+ height: 0,
2703
+ opacity: 0,
2704
+ transition: {
2705
+ type: "tween",
2706
+ duration: 0.2,
2707
+ ease: [0.4, 0, 1, 1]
2708
+ // ease-in for quick exit
2709
+ }
2710
+ }
2711
+ } : {
2712
+ initial: { transform: "translateY(100%)", opacity: 0.5 },
2713
+ animate: {
2714
+ transform: "translateY(0%)",
2715
+ opacity: 1,
2716
+ transition: {
2717
+ type: "spring",
2718
+ damping: 22,
2719
+ stiffness: 400,
2720
+ mass: 0.7
2721
+ }
2722
+ },
2723
+ exit: {
2724
+ transform: "translateY(100%)",
2725
+ opacity: 0,
2726
+ transition: {
2727
+ type: "tween",
2728
+ duration: 0.2,
2729
+ ease: [0.4, 0, 1, 1]
2730
+ // ease-in for quick exit
2731
+ }
2732
+ }
2733
+ };
2687
2734
  const [mounted, setMounted] = React3__default.useState(false);
2688
2735
  React3__default.useEffect(() => {
2689
2736
  setMounted(true);
@@ -2782,7 +2829,7 @@ function DrawerComponent(props) {
2782
2829
  Backdrop,
2783
2830
  {
2784
2831
  onClick: () => onBackdropClick(),
2785
- children: /* @__PURE__ */ jsxs(
2832
+ children: /* @__PURE__ */ jsx(
2786
2833
  MotionDiv4,
2787
2834
  {
2788
2835
  grid: true,
@@ -2833,35 +2880,10 @@ function DrawerComponent(props) {
2833
2880
  overflow: "hidden",
2834
2881
  // Note: Can't use framer-motion's `y` prop because it conflicts
2835
2882
  // with the drag motion value. Use CSS transform instead.
2836
- variants: {
2837
- initial: {
2838
- transform: "translateY(100%)",
2839
- opacity: 0.5
2840
- },
2841
- animate: {
2842
- transform: "translateY(0%)",
2843
- opacity: 1,
2844
- transition: {
2845
- type: "spring",
2846
- damping: 22,
2847
- stiffness: 400,
2848
- mass: 0.7
2849
- }
2850
- },
2851
- exit: {
2852
- transform: "translateY(100%)",
2853
- opacity: 0,
2854
- transition: {
2855
- type: "tween",
2856
- duration: 0.2,
2857
- ease: [0.4, 0, 1, 1]
2858
- // ease-in for quick exit
2859
- }
2860
- }
2861
- },
2862
2883
  drag: "y",
2863
2884
  style: { y },
2864
2885
  dragControls,
2886
+ variants: mobileVariants,
2865
2887
  onPointerDown: (e) => onDragStart(e),
2866
2888
  // drag={hasBackdrop ? "y" : false}
2867
2889
  dragElastic: 0,
@@ -2881,50 +2903,35 @@ function DrawerComponent(props) {
2881
2903
  },
2882
2904
  boxSizing: "border-box",
2883
2905
  boxShadow: "hsl(0deg 0% 0% / 60%) 0px -4px 20px",
2884
- bg: { base: "neutral.100", _dark: "neutral.900" },
2885
2906
  color: "text-primary",
2907
+ bg: drawerBg,
2886
2908
  ref,
2887
2909
  ...rest,
2888
- children: [
2889
- /* @__PURE__ */ jsxs(
2890
- MotionDiv4,
2891
- {
2892
- grid: true,
2893
- ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
2894
- children: [
2895
- !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
2896
- MotionDiv4,
2897
- {
2898
- grid: true,
2899
- justifySelf: "center",
2900
- h: 6,
2901
- w: 34,
2902
- mt: "16px",
2903
- mb: 4,
2904
- br: 20,
2905
- bg: { base: "neutral.400", _dark: "neutral.600" },
2906
- cursor: props.drag ? "row-resize" : "default",
2907
- ref: dragHandleRef
2908
- }
2909
- ),
2910
- props.children
2911
- ]
2912
- }
2913
- ),
2914
- !isDesktop && /* @__PURE__ */ jsx(
2915
- MotionDiv4,
2916
- {
2917
- position: "absolute",
2918
- left: 0,
2919
- right: 0,
2920
- bottom: 0,
2921
- h: 100,
2922
- transform: "translateY(100%)",
2923
- bg: { base: "neutral.100", _dark: "neutral.900" },
2924
- pointerEvents: "none"
2925
- }
2926
- )
2927
- ]
2910
+ children: /* @__PURE__ */ jsxs(
2911
+ MotionDiv4,
2912
+ {
2913
+ grid: true,
2914
+ ...isDesktop ? { position: "relative" } : { rows: "max-content 1fr" },
2915
+ children: [
2916
+ !isDesktop && props.hideHandle !== false && /* @__PURE__ */ jsx(
2917
+ MotionDiv4,
2918
+ {
2919
+ grid: true,
2920
+ justifySelf: "center",
2921
+ h: 6,
2922
+ w: 34,
2923
+ mt: "16px",
2924
+ mb: 4,
2925
+ br: 20,
2926
+ bg: { base: "neutral.400", _dark: "neutral.600" },
2927
+ cursor: props.drag ? "row-resize" : "default",
2928
+ ref: dragHandleRef
2929
+ }
2930
+ ),
2931
+ props.children
2932
+ ]
2933
+ }
2934
+ )
2928
2935
  },
2929
2936
  "drawer"
2930
2937
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qstd",
3
- "version": "0.3.74",
3
+ "version": "0.3.76",
4
4
  "description": "Standard Block component and utilities library with Panda CSS",
5
5
  "author": "malin1",
6
6
  "license": "MIT",
package/styled-system/styles.css CHANGED
@@ -1049,28 +1049,21 @@
1049
1049
  justify-self: center;
1050
1050
  }
1051
1051
 
1052
- .pos_absolute {
1053
- position: absolute;
1054
- }
1055
-
1056
- .trf_translateY\(100\%\) {
1057
- transform: translateY(100%);
1058
- }
1059
-
1060
- .pointer-events_none {
1061
- pointer-events: none;
1062
- }
1063
-
1064
1052
  .rg_14 {
1065
1053
  row-gap: 14px;
1066
1054
  }
1067
1055
 
1068
- .place-i_true,.center_true {
1056
+ .place-i_true {
1069
1057
  place-items: center;
1070
1058
  }
1071
1059
 
1060
+ .pos_absolute {
1061
+ position: absolute;
1062
+ }
1063
+
1072
1064
  .center_true {
1073
1065
  place-content: center;
1066
+ place-items: center;
1074
1067
  }
1075
1068
 
1076
1069
  .fs_16 {
@@ -1166,6 +1159,10 @@
1166
1159
  grid-auto-flow: column;
1167
1160
  }
1168
1161
 
1162
+ .pointer-events_none {
1163
+ pointer-events: none;
1164
+ }
1165
+
1169
1166
  .trf-o_top_left {
1170
1167
  transform-origin: top left;
1171
1168
  }
@@ -1382,10 +1379,6 @@
1382
1379
  margin-bottom: var(--spacing-4);
1383
1380
  }
1384
1381
 
1385
- .h_100 {
1386
- height: 100px;
1387
- }
1388
-
1389
1382
  .top_0 {
1390
1383
  top: var(--spacing-0);
1391
1384
  }