@telia/teddy 0.4.8 → 0.4.10

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 (11) hide show
  1. package/dist/components/flip-card/flip-card-back.cjs +36 -13
  2. package/dist/components/flip-card/flip-card-back.js +38 -15
  3. package/dist/components/flip-card/flip-card-footer.cjs +4 -1
  4. package/dist/components/flip-card/flip-card-footer.js +5 -2
  5. package/dist/components/flip-card/flip-card-front.cjs +2 -1
  6. package/dist/components/flip-card/flip-card-front.js +2 -1
  7. package/dist/components/flip-card/flip-card-root.cjs +25 -23
  8. package/dist/components/flip-card/flip-card-root.d.ts +1 -0
  9. package/dist/components/flip-card/flip-card-root.js +25 -23
  10. package/dist/style.css +19 -18
  11. package/package.json +1 -1
package/dist/components/flip-card/flip-card-back.cjs CHANGED
@@ -7,10 +7,29 @@ const components_flipCard_flipCardRoot = require("./flip-card-root.cjs");
7
7
  const components_card_index = require("../card/index.cjs");
8
8
  const components_scrollArea_index = require("../scroll-area/index.cjs");
9
9
  const utils_composeRefs = require("../../utils/composeRefs.cjs");
10
+ const utils_useLayoutEffect = require("../../utils/useLayoutEffect.cjs");
11
+ const components_box_box = require("../box/box.cjs");
10
12
  const BackContext = React.createContext({});
11
13
  const Back = React.forwardRef(
12
14
  ({ className, variant, shadow, bordered, children, wrapperClassName, "aria-label": ariaLabel, ...props }, forwardRef) => {
13
- const { flipped, backId, backRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
15
+ var _a;
16
+ const [footerHeight, setFooterHeight] = React.useState();
17
+ const { flipped, backId, backRef, footerRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
18
+ const hasFooter = (footerRef == null ? void 0 : footerRef.current) && ((_a = backRef == null ? void 0 : backRef.current) == null ? void 0 : _a.contains(footerRef.current));
19
+ utils_useLayoutEffect.useLayoutEffect(() => {
20
+ if (footerRef == null ? void 0 : footerRef.current) {
21
+ setFooterHeight(`${footerRef.current.getBoundingClientRect().height}px`);
22
+ }
23
+ }, [footerRef]);
24
+ React.useEffect(() => {
25
+ if (backRef == null ? void 0 : backRef.current) {
26
+ if (!flipped) {
27
+ backRef.current.setAttribute("inert", "");
28
+ } else {
29
+ backRef.current.removeAttribute("inert");
30
+ }
31
+ }
32
+ }, [flipped, backRef]);
14
33
  const ref = utils_composeRefs.useComposedRefs(forwardRef, backRef);
15
34
  const classesOuter = clsx(
16
35
  [components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__back`]],
@@ -20,18 +39,22 @@ const Back = React.forwardRef(
20
39
  wrapperClassName
21
40
  );
22
41
  const classesInner = clsx([components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__back-inner`]], className);
23
- return /* @__PURE__ */ jsxRuntime.jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant, shadow, bordered, className: classesOuter, children: /* @__PURE__ */ jsxRuntime.jsx(components_scrollArea_index.ScrollArea, { viewPortClassName: components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__scroll-area-view-port`], children: /* @__PURE__ */ jsxRuntime.jsx(
24
- components_card_index.Card,
25
- {
26
- id: backId,
27
- role: "region",
28
- "aria-label": ariaLabel || "Bakside innhold",
29
- ...props,
30
- ref,
31
- className: classesInner,
32
- children
33
- }
34
- ) }) }) });
42
+ return /* @__PURE__ */ jsxRuntime.jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsxRuntime.jsx(components_card_index.Card, { variant, shadow, bordered, className: classesOuter, children: /* @__PURE__ */ jsxRuntime.jsxs(components_scrollArea_index.ScrollArea, { viewPortClassName: components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__scroll-area-view-port`], children: [
43
+ /* @__PURE__ */ jsxRuntime.jsx(
44
+ components_card_index.Card,
45
+ {
46
+ id: backId,
47
+ role: "region",
48
+ "aria-label": ariaLabel || "Bakside innhold",
49
+ tabIndex: !flipped ? -1 : void 0,
50
+ ...props,
51
+ ref,
52
+ className: classesInner,
53
+ children
54
+ }
55
+ ),
56
+ hasFooter && /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { height: footerHeight })
57
+ ] }) }) });
35
58
  }
36
59
  );
37
60
  Back.displayName = "Back";
package/dist/components/flip-card/flip-card-back.js CHANGED
@@ -1,14 +1,33 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import React__default, { useContext } from "react";
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import React__default, { useState, useContext } from "react";
3
3
  import clsx from "clsx";
4
4
  import { FlipContext, s as styles, rootClassName } from "./flip-card-root.js";
5
5
  import { Card } from "../card/index.js";
6
6
  import { ScrollArea } from "../scroll-area/index.js";
7
7
  import { useComposedRefs } from "../../utils/composeRefs.js";
8
+ import { useLayoutEffect } from "../../utils/useLayoutEffect.js";
9
+ import { Box } from "../box/box.js";
8
10
  const BackContext = React__default.createContext({});
9
11
  const Back = React__default.forwardRef(
10
12
  ({ className, variant, shadow, bordered, children, wrapperClassName, "aria-label": ariaLabel, ...props }, forwardRef) => {
11
- const { flipped, backId, backRef } = useContext(FlipContext);
13
+ var _a;
14
+ const [footerHeight, setFooterHeight] = useState();
15
+ const { flipped, backId, backRef, footerRef } = useContext(FlipContext);
16
+ const hasFooter = (footerRef == null ? void 0 : footerRef.current) && ((_a = backRef == null ? void 0 : backRef.current) == null ? void 0 : _a.contains(footerRef.current));
17
+ useLayoutEffect(() => {
18
+ if (footerRef == null ? void 0 : footerRef.current) {
19
+ setFooterHeight(`${footerRef.current.getBoundingClientRect().height}px`);
20
+ }
21
+ }, [footerRef]);
22
+ React__default.useEffect(() => {
23
+ if (backRef == null ? void 0 : backRef.current) {
24
+ if (!flipped) {
25
+ backRef.current.setAttribute("inert", "");
26
+ } else {
27
+ backRef.current.removeAttribute("inert");
28
+ }
29
+ }
30
+ }, [flipped, backRef]);
12
31
  const ref = useComposedRefs(forwardRef, backRef);
13
32
  const classesOuter = clsx(
14
33
  [styles[`${rootClassName}__back`]],
@@ -18,18 +37,22 @@ const Back = React__default.forwardRef(
18
37
  wrapperClassName
19
38
  );
20
39
  const classesInner = clsx([styles[`${rootClassName}__back-inner`]], className);
21
- return /* @__PURE__ */ jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Card, { variant, shadow, bordered, className: classesOuter, children: /* @__PURE__ */ jsx(ScrollArea, { viewPortClassName: styles[`${rootClassName}__scroll-area-view-port`], children: /* @__PURE__ */ jsx(
22
- Card,
23
- {
24
- id: backId,
25
- role: "region",
26
- "aria-label": ariaLabel || "Bakside innhold",
27
- ...props,
28
- ref,
29
- className: classesInner,
30
- children
31
- }
32
- ) }) }) });
40
+ return /* @__PURE__ */ jsx(BackContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(Card, { variant, shadow, bordered, className: classesOuter, children: /* @__PURE__ */ jsxs(ScrollArea, { viewPortClassName: styles[`${rootClassName}__scroll-area-view-port`], children: [
41
+ /* @__PURE__ */ jsx(
42
+ Card,
43
+ {
44
+ id: backId,
45
+ role: "region",
46
+ "aria-label": ariaLabel || "Bakside innhold",
47
+ tabIndex: !flipped ? -1 : void 0,
48
+ ...props,
49
+ ref,
50
+ className: classesInner,
51
+ children
52
+ }
53
+ ),
54
+ hasFooter && /* @__PURE__ */ jsx(Box, { height: footerHeight })
55
+ ] }) }) });
33
56
  }
34
57
  );
35
58
  Back.displayName = "Back";
package/dist/components/flip-card/flip-card-footer.cjs CHANGED
@@ -5,9 +5,12 @@ const React = require("react");
5
5
  const clsx = require("clsx");
6
6
  const components_flipCard_flipCardRoot = require("./flip-card-root.cjs");
7
7
  const components_flipCard_flipCardBack = require("./flip-card-back.cjs");
8
+ const utils_composeRefs = require("../../utils/composeRefs.cjs");
8
9
  const Footer = React.forwardRef(
9
10
  ({ className, children, ...props }, forwardRef) => {
10
11
  const { variant: backVariant } = React.useContext(components_flipCard_flipCardBack.BackContext);
12
+ const { footerRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
13
+ const composedRef = utils_composeRefs.useComposedRefs(forwardRef, footerRef);
11
14
  const classes = clsx(
12
15
  [components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__footer`]],
13
16
  {
@@ -15,7 +18,7 @@ const Footer = React.forwardRef(
15
18
  },
16
19
  className
17
20
  );
18
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: forwardRef, className: classes, children });
21
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, ref: composedRef, className: classes, children });
19
22
  }
20
23
  );
21
24
  Footer.displayName = "Footer";
package/dist/components/flip-card/flip-card-footer.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import React__default, { useContext } from "react";
3
3
  import clsx from "clsx";
4
- import { s as styles, rootClassName } from "./flip-card-root.js";
4
+ import { FlipContext, s as styles, rootClassName } from "./flip-card-root.js";
5
5
  import { BackContext } from "./flip-card-back.js";
6
+ import { useComposedRefs } from "../../utils/composeRefs.js";
6
7
  const Footer = React__default.forwardRef(
7
8
  ({ className, children, ...props }, forwardRef) => {
8
9
  const { variant: backVariant } = useContext(BackContext);
10
+ const { footerRef } = useContext(FlipContext);
11
+ const composedRef = useComposedRefs(forwardRef, footerRef);
9
12
  const classes = clsx(
10
13
  [styles[`${rootClassName}__footer`]],
11
14
  {
@@ -13,7 +16,7 @@ const Footer = React__default.forwardRef(
13
16
  },
14
17
  className
15
18
  );
16
- return /* @__PURE__ */ jsx("div", { ...props, ref: forwardRef, className: classes, children });
19
+ return /* @__PURE__ */ jsx("div", { ...props, ref: composedRef, className: classes, children });
17
20
  }
18
21
  );
19
22
  Footer.displayName = "Footer";
package/dist/components/flip-card/flip-card-front.cjs CHANGED
@@ -8,7 +8,7 @@ const components_card_index = require("../card/index.cjs");
8
8
  const utils_composeRefs = require("../../utils/composeRefs.cjs");
9
9
  const Front = React.forwardRef(
10
10
  ({ className, children, "aria-label": ariaLabel, ...props }, forwardRef) => {
11
- const { frontId, frontRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
11
+ const { frontId, flipped, frontRef } = React.useContext(components_flipCard_flipCardRoot.FlipContext);
12
12
  const ref = utils_composeRefs.useComposedRefs(forwardRef, frontRef);
13
13
  const classes = clsx([components_flipCard_flipCardRoot.styles[`${components_flipCard_flipCardRoot.rootClassName}__front`]], className);
14
14
  return /* @__PURE__ */ jsxRuntime.jsx(
@@ -20,6 +20,7 @@ const Front = React.forwardRef(
20
20
  id: frontId,
21
21
  role: "region",
22
22
  "aria-label": ariaLabel || "Forside innhold",
23
+ hidden: flipped,
23
24
  children
24
25
  }
25
26
  );
package/dist/components/flip-card/flip-card-front.js CHANGED
@@ -6,7 +6,7 @@ import { Card } from "../card/index.js";
6
6
  import { useComposedRefs } from "../../utils/composeRefs.js";
7
7
  const Front = React__default.forwardRef(
8
8
  ({ className, children, "aria-label": ariaLabel, ...props }, forwardRef) => {
9
- const { frontId, frontRef } = useContext(FlipContext);
9
+ const { frontId, flipped, frontRef } = useContext(FlipContext);
10
10
  const ref = useComposedRefs(forwardRef, frontRef);
11
11
  const classes = clsx([styles[`${rootClassName}__front`]], className);
12
12
  return /* @__PURE__ */ jsx(
@@ -18,6 +18,7 @@ const Front = React__default.forwardRef(
18
18
  id: frontId,
19
19
  role: "region",
20
20
  "aria-label": ariaLabel || "Forside innhold",
21
+ hidden: flipped,
21
22
  children
22
23
  }
23
24
  );
package/dist/components/flip-card/flip-card-root.cjs CHANGED
@@ -6,19 +6,19 @@ const clsx = require("clsx");
6
6
  const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
7
7
  const utils_composeRefs = require("../../utils/composeRefs.cjs");
8
8
  const styles = {
9
- "teddy-flip-card": "_teddy-flip-card_1is05_1",
10
- "teddy-flip-card--flipped": "_teddy-flip-card--flipped_1is05_12",
11
- "teddy-flip-card__front": "_teddy-flip-card__front_1is05_15",
12
- "teddy-flip-card__back": "_teddy-flip-card__back_1is05_19",
13
- "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_1is05_31",
14
- "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_1is05_38",
15
- "teddy-flip-card__footer": "_teddy-flip-card__footer_1is05_42",
16
- "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_1is05_50",
17
- "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_1is05_53",
18
- "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_1is05_56",
19
- "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_1is05_59",
20
- "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_1is05_62",
21
- "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_1is05_65"
9
+ "teddy-flip-card": "_teddy-flip-card_onxd6_1",
10
+ "teddy-flip-card--flipped": "_teddy-flip-card--flipped_onxd6_12",
11
+ "teddy-flip-card__front": "_teddy-flip-card__front_onxd6_15",
12
+ "teddy-flip-card__back": "_teddy-flip-card__back_onxd6_19",
13
+ "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_onxd6_32",
14
+ "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_onxd6_40",
15
+ "teddy-flip-card__footer": "_teddy-flip-card__footer_onxd6_44",
16
+ "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_onxd6_51",
17
+ "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_onxd6_54",
18
+ "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_onxd6_57",
19
+ "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_onxd6_60",
20
+ "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_onxd6_63",
21
+ "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_onxd6_66"
22
22
  };
23
23
  const rootClassName = "teddy-flip-card";
24
24
  const FlipContext = React.createContext({
@@ -27,7 +27,8 @@ const FlipContext = React.createContext({
27
27
  frontId: "",
28
28
  backId: "",
29
29
  frontRef: void 0,
30
- backRef: void 0
30
+ backRef: void 0,
31
+ footerRef: void 0
31
32
  });
32
33
  const FALLBACK_ANIMATION_DURATION = 500;
33
34
  function parseTimeToMs(time) {
@@ -58,6 +59,7 @@ const Root = React.forwardRef(
58
59
  const composedRef = utils_composeRefs.useComposedRefs(forwardRef, internalRef);
59
60
  const frontRef = React.useRef(null);
60
61
  const backRef = React.useRef(null);
62
+ const footerRef = React.useRef(null);
61
63
  const timerRef = React.useRef();
62
64
  const [animationDuration, setAnimationDuration] = React.useState(FALLBACK_ANIMATION_DURATION);
63
65
  const uniqueId = id || `flip-card-${Math.random().toString(36).substring(2, 9)}`;
@@ -78,11 +80,6 @@ const Root = React.forwardRef(
78
80
  const durationMs = parseTimeToMs(transitionDuration);
79
81
  setAnimationDuration(durationMs + 50);
80
82
  }
81
- if (frontRef.current) {
82
- const frontSize = frontRef.current.getBoundingClientRect();
83
- internalRef.current.style.width = `${frontSize.width}px`;
84
- internalRef.current.style.height = `${frontSize.height}px`;
85
- }
86
83
  }
87
84
  }, []);
88
85
  React.useEffect(() => {
@@ -91,12 +88,17 @@ const Root = React.forwardRef(
91
88
  if (timerRef.current) {
92
89
  clearTimeout(timerRef.current);
93
90
  }
94
- frontRef.current.style.display = "";
95
- backRef.current.style.display = "";
91
+ if (flipped) {
92
+ backRef.current.style.display = "";
93
+ frontRef.current.style.visibility = "";
94
+ } else {
95
+ frontRef.current.style.visibility = "";
96
+ backRef.current.style.display = "";
97
+ }
96
98
  timerRef.current = setTimeout(() => {
97
99
  if (frontRef.current && backRef.current) {
98
100
  if (flipped) {
99
- frontRef.current.style.display = "none";
101
+ frontRef.current.style.visibility = "hidden";
100
102
  } else {
101
103
  backRef.current.style.display = "none";
102
104
  }
@@ -110,7 +112,7 @@ const Root = React.forwardRef(
110
112
  }
111
113
  };
112
114
  }, []);
113
- return /* @__PURE__ */ jsxRuntime.jsx(FlipContext.Provider, { value: { flipped, setFlipped, frontId, backId, frontRef, backRef }, children: /* @__PURE__ */ jsxRuntime.jsx(
115
+ return /* @__PURE__ */ jsxRuntime.jsx(FlipContext.Provider, { value: { flipped, setFlipped, frontId, backId, frontRef, backRef, footerRef }, children: /* @__PURE__ */ jsxRuntime.jsx(
114
116
  "div",
115
117
  {
116
118
  ...props,
package/dist/components/flip-card/flip-card-root.d.ts CHANGED
@@ -8,6 +8,7 @@ export type FlipContextType = {
8
8
  backId: string;
9
9
  frontRef: React.RefObject<HTMLDivElement> | undefined;
10
10
  backRef: React.RefObject<HTMLDivElement> | undefined;
11
+ footerRef: React.RefObject<HTMLDivElement> | undefined;
11
12
  };
12
13
  export declare const FlipContext: React.Context<FlipContextType>;
13
14
  export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
package/dist/components/flip-card/flip-card-root.js CHANGED
@@ -4,19 +4,19 @@ import clsx from "clsx";
4
4
  import { useControllableState } from "@radix-ui/react-use-controllable-state";
5
5
  import { useComposedRefs } from "../../utils/composeRefs.js";
6
6
  const styles = {
7
- "teddy-flip-card": "_teddy-flip-card_1is05_1",
8
- "teddy-flip-card--flipped": "_teddy-flip-card--flipped_1is05_12",
9
- "teddy-flip-card__front": "_teddy-flip-card__front_1is05_15",
10
- "teddy-flip-card__back": "_teddy-flip-card__back_1is05_19",
11
- "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_1is05_31",
12
- "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_1is05_38",
13
- "teddy-flip-card__footer": "_teddy-flip-card__footer_1is05_42",
14
- "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_1is05_50",
15
- "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_1is05_53",
16
- "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_1is05_56",
17
- "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_1is05_59",
18
- "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_1is05_62",
19
- "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_1is05_65"
7
+ "teddy-flip-card": "_teddy-flip-card_onxd6_1",
8
+ "teddy-flip-card--flipped": "_teddy-flip-card--flipped_onxd6_12",
9
+ "teddy-flip-card__front": "_teddy-flip-card__front_onxd6_15",
10
+ "teddy-flip-card__back": "_teddy-flip-card__back_onxd6_19",
11
+ "teddy-flip-card__back-inner": "_teddy-flip-card__back-inner_onxd6_32",
12
+ "teddy-flip-card__scroll-area-view-port": "_teddy-flip-card__scroll-area-view-port_onxd6_40",
13
+ "teddy-flip-card__footer": "_teddy-flip-card__footer_onxd6_44",
14
+ "teddy-flip-card__footer--purple-light": "_teddy-flip-card__footer--purple-light_onxd6_51",
15
+ "teddy-flip-card__footer--purple-dark": "_teddy-flip-card__footer--purple-dark_onxd6_54",
16
+ "teddy-flip-card__footer--beige": "_teddy-flip-card__footer--beige_onxd6_57",
17
+ "teddy-flip-card__footer--beige-light": "_teddy-flip-card__footer--beige-light_onxd6_60",
18
+ "teddy-flip-card__footer--gray": "_teddy-flip-card__footer--gray_onxd6_63",
19
+ "teddy-flip-card__footer--white": "_teddy-flip-card__footer--white_onxd6_66"
20
20
  };
21
21
  const rootClassName = "teddy-flip-card";
22
22
  const FlipContext = createContext({
@@ -25,7 +25,8 @@ const FlipContext = createContext({
25
25
  frontId: "",
26
26
  backId: "",
27
27
  frontRef: void 0,
28
- backRef: void 0
28
+ backRef: void 0,
29
+ footerRef: void 0
29
30
  });
30
31
  const FALLBACK_ANIMATION_DURATION = 500;
31
32
  function parseTimeToMs(time) {
@@ -56,6 +57,7 @@ const Root = React__default.forwardRef(
56
57
  const composedRef = useComposedRefs(forwardRef, internalRef);
57
58
  const frontRef = useRef(null);
58
59
  const backRef = useRef(null);
60
+ const footerRef = useRef(null);
59
61
  const timerRef = useRef();
60
62
  const [animationDuration, setAnimationDuration] = useState(FALLBACK_ANIMATION_DURATION);
61
63
  const uniqueId = id || `flip-card-${Math.random().toString(36).substring(2, 9)}`;
@@ -76,11 +78,6 @@ const Root = React__default.forwardRef(
76
78
  const durationMs = parseTimeToMs(transitionDuration);
77
79
  setAnimationDuration(durationMs + 50);
78
80
  }
79
- if (frontRef.current) {
80
- const frontSize = frontRef.current.getBoundingClientRect();
81
- internalRef.current.style.width = `${frontSize.width}px`;
82
- internalRef.current.style.height = `${frontSize.height}px`;
83
- }
84
81
  }
85
82
  }, []);
86
83
  useEffect(() => {
@@ -89,12 +86,17 @@ const Root = React__default.forwardRef(
89
86
  if (timerRef.current) {
90
87
  clearTimeout(timerRef.current);
91
88
  }
92
- frontRef.current.style.display = "";
93
- backRef.current.style.display = "";
89
+ if (flipped) {
90
+ backRef.current.style.display = "";
91
+ frontRef.current.style.visibility = "";
92
+ } else {
93
+ frontRef.current.style.visibility = "";
94
+ backRef.current.style.display = "";
95
+ }
94
96
  timerRef.current = setTimeout(() => {
95
97
  if (frontRef.current && backRef.current) {
96
98
  if (flipped) {
97
- frontRef.current.style.display = "none";
99
+ frontRef.current.style.visibility = "hidden";
98
100
  } else {
99
101
  backRef.current.style.display = "none";
100
102
  }
@@ -108,7 +110,7 @@ const Root = React__default.forwardRef(
108
110
  }
109
111
  };
110
112
  }, []);
111
- return /* @__PURE__ */ jsx(FlipContext.Provider, { value: { flipped, setFlipped, frontId, backId, frontRef, backRef }, children: /* @__PURE__ */ jsx(
113
+ return /* @__PURE__ */ jsx(FlipContext.Provider, { value: { flipped, setFlipped, frontId, backId, frontRef, backRef, footerRef }, children: /* @__PURE__ */ jsx(
112
114
  "div",
113
115
  {
114
116
  ...props,
package/dist/style.css CHANGED
@@ -1,22 +1,22 @@
1
- @charset 'UTF-8';._teddy-flip-card_1is05_1 {
1
+ @charset 'UTF-8';._teddy-flip-card_onxd6_1 {
2
2
  position: relative;
3
3
  perspective: 1000px;
4
4
  transform-style: preserve-3d;
5
5
  z-index: 0;
6
6
  }
7
7
  @media (prefers-reduced-motion: no-preference) {
8
- ._teddy-flip-card_1is05_1 {
8
+ ._teddy-flip-card_onxd6_1 {
9
9
  transition: transform var(--teddy-motion-duration-500) var(--teddy-motion-easing-ease-in-out);
10
10
  }
11
11
  }
12
- ._teddy-flip-card--flipped_1is05_12 {
12
+ ._teddy-flip-card--flipped_onxd6_12 {
13
13
  transform: rotateY(180deg);
14
14
  }
15
- ._teddy-flip-card__front_1is05_15 {
15
+ ._teddy-flip-card__front_onxd6_15 {
16
16
  backface-visibility: hidden;
17
17
  z-index: 2;
18
18
  }
19
- ._teddy-flip-card__back_1is05_19 {
19
+ ._teddy-flip-card__back_onxd6_19 {
20
20
  position: absolute;
21
21
  top: 0;
22
22
  left: 0;
@@ -24,45 +24,46 @@
24
24
  height: 100%;
25
25
  backface-visibility: hidden;
26
26
  transform: rotateY(180deg);
27
- display: flex;
28
- flex-direction: column;
27
+ display: grid;
28
+ justify-content: normal;
29
+ align-content: stretch;
29
30
  padding: 0;
30
31
  }
31
- ._teddy-flip-card__back-inner_1is05_31 {
32
+ ._teddy-flip-card__back-inner_onxd6_32 {
32
33
  padding: 0;
33
34
  margin: 0;
34
35
  width: 100%;
35
36
  height: 100%;
36
37
  justify-content: stretch;
38
+ position: initial;
37
39
  }
38
- ._teddy-flip-card__scroll-area-view-port_1is05_38 {
40
+ ._teddy-flip-card__scroll-area-view-port_onxd6_40 {
39
41
  padding: var(--teddy-spacing-250) var(--teddy-spacing-250) 0 var(--teddy-spacing-250);
40
42
  margin-bottom: var(--teddy-spacing-250);
41
43
  }
42
- ._teddy-flip-card__footer_1is05_42 {
43
- position: sticky;
44
+ ._teddy-flip-card__footer_onxd6_44 {
45
+ position: absolute;
44
46
  inset: auto 0 0 0;
45
47
  padding: var(--teddy-spacing-50);
46
48
  border-top: var(--teddy-border-width-xs) solid var(--teddy-color-border-weak);
47
- margin: 0 calc(-1 * var(--teddy-spacing-250));
48
49
  border-radius: 0 0 var(--teddy-border-radius-md) var(--teddy-border-radius-md);
49
50
  }
50
- ._teddy-flip-card__footer--purple-light_1is05_50 {
51
+ ._teddy-flip-card__footer--purple-light_onxd6_51 {
51
52
  background-color: var(--teddy-color-background-interactive-primary-negative);
52
53
  }
53
- ._teddy-flip-card__footer--purple-dark_1is05_53 {
54
+ ._teddy-flip-card__footer--purple-dark_onxd6_54 {
54
55
  background-color: var(--teddy-color-brand-deep-purple);
55
56
  }
56
- ._teddy-flip-card__footer--beige_1is05_56 {
57
+ ._teddy-flip-card__footer--beige_onxd6_57 {
57
58
  background-color: var(--teddy-color-background-interactive-primary);
58
59
  }
59
- ._teddy-flip-card__footer--beige-light_1is05_59 {
60
+ ._teddy-flip-card__footer--beige-light_onxd6_60 {
60
61
  background-color: var(--teddy-color-background-interactive-primary-negative);
61
62
  }
62
- ._teddy-flip-card__footer--gray_1is05_62 {
63
+ ._teddy-flip-card__footer--gray_onxd6_63 {
63
64
  background-color: var(--teddy-color-background-secondary);
64
65
  }
65
- ._teddy-flip-card__footer--white_1is05_65 {
66
+ ._teddy-flip-card__footer--white_onxd6_66 {
66
67
  background-color: var(--teddy-color-brand-white);
67
68
  }@layer grid {
68
69
  ._teddy-grid_1dv1t_2 {
package/package.json CHANGED
@@ -20,7 +20,7 @@
20
20
  "pnpm": ">=9"
21
21
  },
22
22
  "private": false,
23
- "version": "0.4.8",
23
+ "version": "0.4.10",
24
24
  "sideEffects": [
25
25
  "**/*.css",
26
26
  "**/*.svg"