@digilogiclabs/saas-factory-ui 1.16.10 → 1.16.11

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 (13) hide show
  1. package/dist/index.d.mts +5 -1
  2. package/dist/index.d.ts +5 -1
  3. package/dist/index.js +71 -70
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +71 -70
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/web/index.d.mts +5 -1
  8. package/dist/web/index.d.ts +5 -1
  9. package/dist/web/index.js +71 -70
  10. package/dist/web/index.js.map +1 -1
  11. package/dist/web/index.mjs +71 -70
  12. package/dist/web/index.mjs.map +1 -1
  13. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -4741,6 +4741,10 @@ interface CoinFlipperProps {
4741
4741
  trigger?: CoinTrigger;
4742
4742
  /** Text on the built-in button. Default "Flip". */
4743
4743
  label?: string;
4744
+ /** Label shown on the heads face. Default "Heads". */
4745
+ headsLabel?: string;
4746
+ /** Label shown on the tails face. Default "Tails". */
4747
+ tailsLabel?: string;
4744
4748
  /** Show a history strip + stats. Default false. */
4745
4749
  showHistory?: boolean;
4746
4750
  /** Max entries in history. Default 20. */
@@ -4752,7 +4756,7 @@ interface CoinFlipperProps {
4752
4756
  /** CSS class on root element. */
4753
4757
  className?: string;
4754
4758
  }
4755
- declare function CoinFlipper({ theme, darkMode, size, autoFlip, onFlip, trigger, label, showHistory, historyMax, flipRef, ariaLabel, className, }: CoinFlipperProps): react_jsx_runtime.JSX.Element;
4759
+ declare function CoinFlipper({ theme, darkMode, size, autoFlip, onFlip, trigger, label, headsLabel, tailsLabel, showHistory, historyMax, flipRef, ariaLabel, className, }: CoinFlipperProps): react_jsx_runtime.JSX.Element;
4756
4760
 
4757
4761
  interface StepWizardStep {
4758
4762
  /** Unique key for this step. */
package/dist/index.d.ts CHANGED
@@ -4741,6 +4741,10 @@ interface CoinFlipperProps {
4741
4741
  trigger?: CoinTrigger;
4742
4742
  /** Text on the built-in button. Default "Flip". */
4743
4743
  label?: string;
4744
+ /** Label shown on the heads face. Default "Heads". */
4745
+ headsLabel?: string;
4746
+ /** Label shown on the tails face. Default "Tails". */
4747
+ tailsLabel?: string;
4744
4748
  /** Show a history strip + stats. Default false. */
4745
4749
  showHistory?: boolean;
4746
4750
  /** Max entries in history. Default 20. */
@@ -4752,7 +4756,7 @@ interface CoinFlipperProps {
4752
4756
  /** CSS class on root element. */
4753
4757
  className?: string;
4754
4758
  }
4755
- declare function CoinFlipper({ theme, darkMode, size, autoFlip, onFlip, trigger, label, showHistory, historyMax, flipRef, ariaLabel, className, }: CoinFlipperProps): react_jsx_runtime.JSX.Element;
4759
+ declare function CoinFlipper({ theme, darkMode, size, autoFlip, onFlip, trigger, label, headsLabel, tailsLabel, showHistory, historyMax, flipRef, ariaLabel, className, }: CoinFlipperProps): react_jsx_runtime.JSX.Element;
4756
4760
 
4757
4761
  interface StepWizardStep {
4758
4762
  /** Unique key for this step. */
package/dist/index.js CHANGED
@@ -32500,6 +32500,8 @@ function CoinFlipper({
32500
32500
  onFlip,
32501
32501
  trigger = "button",
32502
32502
  label = "Flip",
32503
+ headsLabel = "Heads",
32504
+ tailsLabel = "Tails",
32503
32505
  showHistory = false,
32504
32506
  historyMax = 20,
32505
32507
  flipRef,
@@ -32588,7 +32590,9 @@ function CoinFlipper({
32588
32590
  const fontSize = Math.max(12, size * 0.28);
32589
32591
  const labelSize = Math.max(8, size * 0.08);
32590
32592
  const ringInset = Math.max(2, size * 0.04);
32591
- const faceStyle = (bg, bgEnd, ring, rotateY) => ({
32593
+ const headsInitial = headsLabel.charAt(0).toUpperCase();
32594
+ const tailsInitial = tailsLabel.charAt(0).toUpperCase();
32595
+ const buildFaceStyle = (bg, bgEnd, extraTransform) => ({
32592
32596
  position: "absolute",
32593
32597
  inset: 0,
32594
32598
  borderRadius: "50%",
@@ -32602,7 +32606,7 @@ function CoinFlipper({
32602
32606
  "inset 0 -2px 4px rgba(0,0,0,0.2)",
32603
32607
  `0 4px 12px rgba(0,0,0,${dark ? 0.4 : 0.15})`
32604
32608
  ].join(", "),
32605
- transform: `rotateY(${rotateY}deg)`,
32609
+ transform: extraTransform,
32606
32610
  userSelect: "none"
32607
32611
  });
32608
32612
  const ringStyle = (ring) => ({
@@ -32687,66 +32691,62 @@ function CoinFlipper({
32687
32691
  transition: flipping ? "none" : "transform 0.3s ease"
32688
32692
  },
32689
32693
  children: [
32690
- /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("div", { style: faceStyle(tc.headsBg, tc.headsBgEnd, tc.headsRing, 0), children: [
32691
- /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
32692
- "div",
32693
- {
32694
- style: {
32695
- display: "flex",
32696
- flexDirection: "column",
32697
- alignItems: "center",
32698
- gap: 2,
32699
- color: tc.headsColor
32700
- },
32701
- children: [
32702
- /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
32703
- "span",
32704
- {
32705
- style: {
32706
- fontSize,
32707
- fontWeight: 800,
32708
- lineHeight: 1,
32709
- textShadow: "0 1px 2px rgba(0,0,0,0.2)"
32710
- },
32711
- children: "H"
32712
- }
32713
- ),
32714
- /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
32715
- "span",
32716
- {
32717
- style: {
32718
- fontSize: labelSize,
32719
- fontWeight: 700,
32720
- textTransform: "uppercase",
32721
- letterSpacing: "0.15em",
32722
- opacity: 0.8
32723
- },
32724
- children: "Heads"
32725
- }
32726
- )
32727
- ]
32728
- }
32729
- ),
32730
- /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { style: ringStyle(tc.headsRing) })
32731
- ] }),
32732
- /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { style: faceStyle(tc.tailsBg, tc.tailsBgEnd, tc.tailsRing, 0), children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
32694
+ /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
32733
32695
  "div",
32734
32696
  {
32735
- style: {
32736
- position: "absolute",
32737
- inset: 0,
32738
- borderRadius: "50%",
32739
- display: "flex",
32740
- alignItems: "center",
32741
- justifyContent: "center",
32742
- backfaceVisibility: "hidden",
32743
- transform: "rotateX(180deg)",
32744
- background: `linear-gradient(135deg, ${tc.tailsBg} 0%, ${tc.tailsBgEnd} 100%)`,
32745
- boxShadow: [
32746
- "inset 0 2px 4px rgba(255,255,255,0.3)",
32747
- "inset 0 -2px 4px rgba(0,0,0,0.2)"
32748
- ].join(", ")
32749
- },
32697
+ style: buildFaceStyle(tc.headsBg, tc.headsBgEnd, "rotateX(0deg)"),
32698
+ children: [
32699
+ /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
32700
+ "div",
32701
+ {
32702
+ style: {
32703
+ display: "flex",
32704
+ flexDirection: "column",
32705
+ alignItems: "center",
32706
+ gap: 2,
32707
+ color: tc.headsColor
32708
+ },
32709
+ children: [
32710
+ /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
32711
+ "span",
32712
+ {
32713
+ style: {
32714
+ fontSize,
32715
+ fontWeight: 800,
32716
+ lineHeight: 1,
32717
+ textShadow: "0 1px 2px rgba(0,0,0,0.2)"
32718
+ },
32719
+ children: headsInitial
32720
+ }
32721
+ ),
32722
+ /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
32723
+ "span",
32724
+ {
32725
+ style: {
32726
+ fontSize: labelSize,
32727
+ fontWeight: 700,
32728
+ textTransform: "uppercase",
32729
+ letterSpacing: "0.15em",
32730
+ opacity: 0.8
32731
+ },
32732
+ children: headsLabel
32733
+ }
32734
+ )
32735
+ ]
32736
+ }
32737
+ ),
32738
+ /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { style: ringStyle(tc.headsRing) })
32739
+ ]
32740
+ }
32741
+ ),
32742
+ /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
32743
+ "div",
32744
+ {
32745
+ style: buildFaceStyle(
32746
+ tc.tailsBg,
32747
+ tc.tailsBgEnd,
32748
+ "rotateX(180deg)"
32749
+ ),
32750
32750
  children: [
32751
32751
  /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
32752
32752
  "div",
@@ -32768,7 +32768,7 @@ function CoinFlipper({
32768
32768
  lineHeight: 1,
32769
32769
  textShadow: "0 1px 2px rgba(0,0,0,0.2)"
32770
32770
  },
32771
- children: "T"
32771
+ children: tailsInitial
32772
32772
  }
32773
32773
  ),
32774
32774
  /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
@@ -32781,7 +32781,7 @@ function CoinFlipper({
32781
32781
  letterSpacing: "0.15em",
32782
32782
  opacity: 0.8
32783
32783
  },
32784
- children: "Tails"
32784
+ children: tailsLabel
32785
32785
  }
32786
32786
  )
32787
32787
  ]
@@ -32790,7 +32790,7 @@ function CoinFlipper({
32790
32790
  /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("div", { style: ringStyle(tc.tailsRing) })
32791
32791
  ]
32792
32792
  }
32793
- ) }),
32793
+ ),
32794
32794
  /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
32795
32795
  "div",
32796
32796
  {
@@ -32844,10 +32844,9 @@ function CoinFlipper({
32844
32844
  style: {
32845
32845
  fontSize: 24,
32846
32846
  fontWeight: 800,
32847
- color: result === "heads" ? tc.headsBg : tc.tailsBg,
32848
- textTransform: "capitalize"
32847
+ color: result === "heads" ? tc.headsBg : tc.tailsBg
32849
32848
  },
32850
- children: result
32849
+ children: result === "heads" ? headsLabel : tailsLabel
32851
32850
  }
32852
32851
  ) : /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { style: { fontSize: 14, color: colors.dim }, children: trigger === "click" ? "Click to flip" : trigger === "button" ? "Press Flip to start" : "Waiting for flip..." })
32853
32852
  }
@@ -32899,7 +32898,8 @@ function CoinFlipper({
32899
32898
  },
32900
32899
  children: [
32901
32900
  /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { children: [
32902
- "H: ",
32901
+ headsInitial,
32902
+ ": ",
32903
32903
  stats.heads,
32904
32904
  " ",
32905
32905
  /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { style: { color: colors.dim }, children: [
@@ -32909,7 +32909,8 @@ function CoinFlipper({
32909
32909
  ] })
32910
32910
  ] }),
32911
32911
  /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { children: [
32912
- "T: ",
32912
+ tailsInitial,
32913
+ ": ",
32913
32914
  stats.tails,
32914
32915
  " ",
32915
32916
  /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("span", { style: { color: colors.dim }, children: [
@@ -32985,7 +32986,7 @@ function CoinFlipper({
32985
32986
  children: history.map((h) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
32986
32987
  "div",
32987
32988
  {
32988
- title: h.result,
32989
+ title: h.result === "heads" ? headsLabel : tailsLabel,
32989
32990
  style: {
32990
32991
  width: 24,
32991
32992
  height: 24,
@@ -32998,7 +32999,7 @@ function CoinFlipper({
32998
32999
  color: "#fff",
32999
33000
  background: h.result === "heads" ? tc.headsBg : tc.tailsBg
33000
33001
  },
33001
- children: h.result === "heads" ? "H" : "T"
33002
+ children: h.result === "heads" ? headsInitial : tailsInitial
33002
33003
  },
33003
33004
  h.id
33004
33005
  ))