react-raffle-picker 0.4.0 → 0.4.1

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 (3) hide show
  1. package/dist/index.cjs +66 -57
  2. package/dist/index.mjs +66 -57
  3. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -909,23 +909,17 @@ function RafflePickWheel({ segments, size = 320, colors = DEFAULT_COLORS, labelC
909
909
  const pointerStyle = pointer === "right" ? {
910
910
  position: "absolute",
911
911
  top: "50%",
912
- right: -2,
913
- width: 0,
914
- height: 0,
915
- transform: "translateY(-50%)",
916
- borderTop: `${size * .045}px solid transparent`,
917
- borderBottom: `${size * .045}px solid transparent`,
918
- borderRight: `${size * .09}px solid currentColor`
912
+ right: "-2%",
913
+ width: "10%",
914
+ height: "14%",
915
+ transform: "translateY(-50%)"
919
916
  } : {
920
917
  position: "absolute",
921
918
  left: "50%",
922
- top: -2,
923
- width: 0,
924
- height: 0,
925
- transform: "translateX(-50%)",
926
- borderLeft: `${size * .045}px solid transparent`,
927
- borderRight: `${size * .045}px solid transparent`,
928
- borderTop: `${size * .09}px solid currentColor`
919
+ top: "-2%",
920
+ width: "14%",
921
+ height: "10%",
922
+ transform: "translateX(-50%)"
929
923
  };
930
924
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
931
925
  ref: rootRef,
@@ -936,59 +930,74 @@ function RafflePickWheel({ segments, size = 320, colors = DEFAULT_COLORS, labelC
936
930
  lineHeight: 0,
937
931
  ...style,
938
932
  width: size,
939
- height: size
933
+ maxWidth: "100%",
934
+ aspectRatio: "1 / 1"
940
935
  },
941
936
  "data-phase": phase,
942
937
  "data-pointer": pointer,
943
938
  "data-resting": "",
944
939
  children: [
945
- /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
946
- ref: wheelRef,
947
- className: "rrp-wheel__disc",
940
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
948
941
  style: {
949
- display: "block",
950
- transformOrigin: "50% 50%",
951
- willChange: "transform"
942
+ position: "absolute",
943
+ inset: 0,
944
+ overflow: "hidden",
945
+ borderRadius: "50%"
952
946
  },
953
- viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
954
- width: size,
955
- height: size,
956
- role: "img",
957
- "aria-label": `Wheel with ${safeCount} segments`,
958
- children: [safeCount === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
959
- cx: CENTER,
960
- cy: CENTER,
961
- r: RADIUS,
962
- fill: paths[0].fill
963
- }) : paths.map((p, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
964
- d: p.d,
965
- fill: p.fill,
966
- stroke: "rgba(0,0,0,0.14)",
967
- strokeWidth: .3
968
- }, i)), showLabels && paths.map((p, i) => {
969
- const pt = rimPoint(p.mid, LABEL_RADIUS);
970
- const rotate = p.mid > 180 ? p.mid + 90 : p.mid - 90;
971
- return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
972
- x: pt.x,
973
- y: pt.y,
974
- fill: labelColor,
975
- fontSize,
976
- fontWeight: 600,
977
- textAnchor: "middle",
978
- dominantBaseline: "middle",
979
- transform: `rotate(${rotate} ${pt.x} ${pt.y})`,
980
- style: {
981
- pointerEvents: "none",
982
- userSelect: "none"
983
- },
984
- children: labels[i]
985
- }, i);
986
- })]
947
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
948
+ ref: wheelRef,
949
+ className: "rrp-wheel__disc",
950
+ style: {
951
+ display: "block",
952
+ width: "100%",
953
+ height: "100%",
954
+ transformOrigin: "50% 50%",
955
+ willChange: "transform"
956
+ },
957
+ viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
958
+ role: "img",
959
+ "aria-label": `Wheel with ${safeCount} segments`,
960
+ children: [safeCount === 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
961
+ cx: CENTER,
962
+ cy: CENTER,
963
+ r: RADIUS,
964
+ fill: paths[0].fill
965
+ }) : paths.map((p, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
966
+ d: p.d,
967
+ fill: p.fill,
968
+ stroke: "rgba(0,0,0,0.14)",
969
+ strokeWidth: .3
970
+ }, i)), showLabels && paths.map((p, i) => {
971
+ const pt = rimPoint(p.mid, LABEL_RADIUS);
972
+ const rotate = p.mid > 180 ? p.mid + 90 : p.mid - 90;
973
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
974
+ x: pt.x,
975
+ y: pt.y,
976
+ fill: labelColor,
977
+ fontSize,
978
+ fontWeight: 600,
979
+ textAnchor: "middle",
980
+ dominantBaseline: "middle",
981
+ transform: `rotate(${rotate} ${pt.x} ${pt.y})`,
982
+ style: {
983
+ pointerEvents: "none",
984
+ userSelect: "none"
985
+ },
986
+ children: labels[i]
987
+ }, i);
988
+ })]
989
+ })
987
990
  }),
988
- !hidePointer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
991
+ !hidePointer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
989
992
  className: "rrp-wheel__pointer",
990
993
  style: pointerStyle,
991
- "aria-hidden": "true"
994
+ viewBox: "0 0 10 10",
995
+ preserveAspectRatio: "none",
996
+ "aria-hidden": "true",
997
+ children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
998
+ points: pointer === "right" ? "10,0 10,10 0,5" : "0,0 10,0 5,10",
999
+ fill: "currentColor"
1000
+ })
992
1001
  }),
993
1002
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
994
1003
  ref: liveRef,
package/dist/index.mjs CHANGED
@@ -908,23 +908,17 @@ function RafflePickWheel({ segments, size = 320, colors = DEFAULT_COLORS, labelC
908
908
  const pointerStyle = pointer === "right" ? {
909
909
  position: "absolute",
910
910
  top: "50%",
911
- right: -2,
912
- width: 0,
913
- height: 0,
914
- transform: "translateY(-50%)",
915
- borderTop: `${size * .045}px solid transparent`,
916
- borderBottom: `${size * .045}px solid transparent`,
917
- borderRight: `${size * .09}px solid currentColor`
911
+ right: "-2%",
912
+ width: "10%",
913
+ height: "14%",
914
+ transform: "translateY(-50%)"
918
915
  } : {
919
916
  position: "absolute",
920
917
  left: "50%",
921
- top: -2,
922
- width: 0,
923
- height: 0,
924
- transform: "translateX(-50%)",
925
- borderLeft: `${size * .045}px solid transparent`,
926
- borderRight: `${size * .045}px solid transparent`,
927
- borderTop: `${size * .09}px solid currentColor`
918
+ top: "-2%",
919
+ width: "14%",
920
+ height: "10%",
921
+ transform: "translateX(-50%)"
928
922
  };
929
923
  return /* @__PURE__ */ jsxs("div", {
930
924
  ref: rootRef,
@@ -935,59 +929,74 @@ function RafflePickWheel({ segments, size = 320, colors = DEFAULT_COLORS, labelC
935
929
  lineHeight: 0,
936
930
  ...style,
937
931
  width: size,
938
- height: size
932
+ maxWidth: "100%",
933
+ aspectRatio: "1 / 1"
939
934
  },
940
935
  "data-phase": phase,
941
936
  "data-pointer": pointer,
942
937
  "data-resting": "",
943
938
  children: [
944
- /* @__PURE__ */ jsxs("svg", {
945
- ref: wheelRef,
946
- className: "rrp-wheel__disc",
939
+ /* @__PURE__ */ jsx("span", {
947
940
  style: {
948
- display: "block",
949
- transformOrigin: "50% 50%",
950
- willChange: "transform"
941
+ position: "absolute",
942
+ inset: 0,
943
+ overflow: "hidden",
944
+ borderRadius: "50%"
951
945
  },
952
- viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
953
- width: size,
954
- height: size,
955
- role: "img",
956
- "aria-label": `Wheel with ${safeCount} segments`,
957
- children: [safeCount === 1 ? /* @__PURE__ */ jsx("circle", {
958
- cx: CENTER,
959
- cy: CENTER,
960
- r: RADIUS,
961
- fill: paths[0].fill
962
- }) : paths.map((p, i) => /* @__PURE__ */ jsx("path", {
963
- d: p.d,
964
- fill: p.fill,
965
- stroke: "rgba(0,0,0,0.14)",
966
- strokeWidth: .3
967
- }, i)), showLabels && paths.map((p, i) => {
968
- const pt = rimPoint(p.mid, LABEL_RADIUS);
969
- const rotate = p.mid > 180 ? p.mid + 90 : p.mid - 90;
970
- return /* @__PURE__ */ jsx("text", {
971
- x: pt.x,
972
- y: pt.y,
973
- fill: labelColor,
974
- fontSize,
975
- fontWeight: 600,
976
- textAnchor: "middle",
977
- dominantBaseline: "middle",
978
- transform: `rotate(${rotate} ${pt.x} ${pt.y})`,
979
- style: {
980
- pointerEvents: "none",
981
- userSelect: "none"
982
- },
983
- children: labels[i]
984
- }, i);
985
- })]
946
+ children: /* @__PURE__ */ jsxs("svg", {
947
+ ref: wheelRef,
948
+ className: "rrp-wheel__disc",
949
+ style: {
950
+ display: "block",
951
+ width: "100%",
952
+ height: "100%",
953
+ transformOrigin: "50% 50%",
954
+ willChange: "transform"
955
+ },
956
+ viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`,
957
+ role: "img",
958
+ "aria-label": `Wheel with ${safeCount} segments`,
959
+ children: [safeCount === 1 ? /* @__PURE__ */ jsx("circle", {
960
+ cx: CENTER,
961
+ cy: CENTER,
962
+ r: RADIUS,
963
+ fill: paths[0].fill
964
+ }) : paths.map((p, i) => /* @__PURE__ */ jsx("path", {
965
+ d: p.d,
966
+ fill: p.fill,
967
+ stroke: "rgba(0,0,0,0.14)",
968
+ strokeWidth: .3
969
+ }, i)), showLabels && paths.map((p, i) => {
970
+ const pt = rimPoint(p.mid, LABEL_RADIUS);
971
+ const rotate = p.mid > 180 ? p.mid + 90 : p.mid - 90;
972
+ return /* @__PURE__ */ jsx("text", {
973
+ x: pt.x,
974
+ y: pt.y,
975
+ fill: labelColor,
976
+ fontSize,
977
+ fontWeight: 600,
978
+ textAnchor: "middle",
979
+ dominantBaseline: "middle",
980
+ transform: `rotate(${rotate} ${pt.x} ${pt.y})`,
981
+ style: {
982
+ pointerEvents: "none",
983
+ userSelect: "none"
984
+ },
985
+ children: labels[i]
986
+ }, i);
987
+ })]
988
+ })
986
989
  }),
987
- !hidePointer && /* @__PURE__ */ jsx("span", {
990
+ !hidePointer && /* @__PURE__ */ jsx("svg", {
988
991
  className: "rrp-wheel__pointer",
989
992
  style: pointerStyle,
990
- "aria-hidden": "true"
993
+ viewBox: "0 0 10 10",
994
+ preserveAspectRatio: "none",
995
+ "aria-hidden": "true",
996
+ children: /* @__PURE__ */ jsx("polygon", {
997
+ points: pointer === "right" ? "10,0 10,10 0,5" : "0,0 10,0 5,10",
998
+ fill: "currentColor"
999
+ })
991
1000
  }),
992
1001
  /* @__PURE__ */ jsx("span", {
993
1002
  ref: liveRef,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-raffle-picker",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "React random picker: draw a random winner or number with slot-machine, reel and countdown animations. Headless, typed, zero-dependency.",
5
5
  "type": "module",
6
6
  "publishConfig": {