@telegraph/helpers 0.0.6 → 0.0.7

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react/jsx-runtime"),T=require("@radix-ui/react-slot"),r=require("react"),m=r.forwardRef((e,t)=>R.jsx(T.Slot,{...e,ref:t,tgphRef:t})),S=({value:e,determinateValue:t,minDurationMs:u=1e3})=>{const[f,s]=r.useState(e),c=r.useRef(null),n=r.useRef(null),o=()=>{c.current&&(clearTimeout(c.current),c.current=null)},i=r.useCallback(()=>{if(e===t)o(),s(t),n.current=Date.now();else if(n.current!==null){const a=Date.now()-n.current,l=u-a;l>0?(o(),c.current=setTimeout(()=>{s(e),n.current=null},l)):(s(e),n.current=null)}else s(e)},[e,t,u]);return r.useEffect(()=>(i(),o),[e,i]),f};exports.RefToTgphRef=m;exports.useDeterminateState=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),p=Symbol.for("react.forward_ref"),R=(e,o)=>{const r={...o};for(const s in o){const t=e[s],n=o[s];/^on[A-Z]/.test(s)?t&&n?r[s]=(...i)=>{n(...i),t(...i)}:t&&(r[s]=t):s==="style"?r[s]={...t,...n}:s==="className"&&(r[s]=[t,n].filter(Boolean).join(" "))}return{...e,...r}},m=({children:e,...o},r)=>e?c.Children.toArray(e).map(t=>{if(c.isValidElement(t)){const n=t,l=n.$$typeof,i=n.type.$$typeof,f=n.props,u=f.tgphRef;return l===p||i===p?c.cloneElement(n,{...R(o,f),tgphRef:u||r,ref:u||r}):c.cloneElement(n,{...R(o,f),tgphRef:u||r})}return t}):null,y=c.forwardRef(({children:e,...o},r)=>m({children:e,...o},r)),T=({value:e,determinateValue:o,minDurationMs:r=1e3})=>{const[s,t]=c.useState(e),n=c.useRef(null),l=c.useRef(null),i=()=>{n.current&&(clearTimeout(n.current),n.current=null)},f=c.useCallback(()=>{if(e===o)i(),t(o),l.current=Date.now();else if(l.current!==null){const u=Date.now()-l.current,a=r-u;a>0?(i(),n.current=setTimeout(()=>{t(e),l.current=null},a)):(t(e),l.current=null)}else t(e)},[e,o,r]);return c.useEffect(()=>(f(),i),[e,f]),s};exports.RefToTgphRef=y;exports.useDeterminateState=T;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx","../../src/hooks/useDeterminateState.ts"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React from \"react\";\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>((props, ref) => {\n  return <Slot {...props} ref={ref} tgphRef={ref} />;\n});\n\nexport { RefToTgphRef };\n","/*\n * useDeterminateState\n *\n * A hook that returns a state transitioning to a determinate value after a minimum duration.\n * For example, you could use this hook with a button that transitions into a \"loading\" state,\n * ensuring it remains in the \"loading\" state for at least 1000ms. This provides clear feedback\n * to the user that the action is being processed.\n *\n */\nimport React from \"react\";\n\ntype UseDeterminateStateParams<T> = {\n  value: T;\n  determinateValue: T;\n  minDurationMs?: number;\n};\n\nconst useDeterminateState = <T>({\n  value,\n  determinateValue,\n  minDurationMs = 1000,\n}: UseDeterminateStateParams<T>): T => {\n  const [state, setState] = React.useState<T>(value);\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  const clearExistingTimeout = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  const handleTransition = React.useCallback(() => {\n    if (value === determinateValue) {\n      clearExistingTimeout();\n      setState(determinateValue);\n      startTimeRef.current = Date.now();\n    } else if (startTimeRef.current !== null) {\n      const elapsedTime = Date.now() - startTimeRef.current;\n      const remainingTime = minDurationMs - elapsedTime;\n\n      if (remainingTime > 0) {\n        clearExistingTimeout();\n        timeoutRef.current = setTimeout(() => {\n          setState(value);\n          startTimeRef.current = null;\n        }, remainingTime);\n      } else {\n        setState(value);\n        startTimeRef.current = null;\n      }\n    } else {\n      setState(value);\n    }\n  }, [value, determinateValue, minDurationMs]);\n\n  React.useEffect(() => {\n    handleTransition();\n    return clearExistingTimeout;\n  }, [value, handleTransition]);\n\n  return state;\n};\n\nexport { useDeterminateState };\n"],"names":["RefToTgphRef","React","props","ref","Slot","useDeterminateState","value","determinateValue","minDurationMs","state","setState","timeoutRef","startTimeRef","clearExistingTimeout","handleTransition","elapsedTime","remainingTime"],"mappings":"0KAcMA,EAAeC,EAAM,WAAqB,CAACC,EAAOC,UAC9CC,EAAM,KAAA,CAAA,GAAGF,EAAO,IAAAC,EAAU,QAASA,CAAK,CAAA,CACjD,ECCKE,EAAsB,CAAI,CAC9B,MAAAC,EACA,iBAAAC,EACA,cAAAC,EAAgB,GAClB,IAAuC,CACrC,KAAM,CAACC,EAAOC,CAAQ,EAAIT,EAAM,SAAYK,CAAK,EAC3CK,EAAaV,EAAM,OAA8B,IAAI,EACrDW,EAAeX,EAAM,OAAsB,IAAI,EAE/CY,EAAuB,IAAM,CAC7BF,EAAW,UACb,aAAaA,EAAW,OAAO,EAC/BA,EAAW,QAAU,KACvB,EAGIG,EAAmBb,EAAM,YAAY,IAAM,CAC/C,GAAIK,IAAUC,EACSM,IACrBH,EAASH,CAAgB,EACZK,EAAA,QAAU,KAAK,cACnBA,EAAa,UAAY,KAAM,CACxC,MAAMG,EAAc,KAAK,IAAI,EAAIH,EAAa,QACxCI,EAAgBR,EAAgBO,EAElCC,EAAgB,GACGH,IACVF,EAAA,QAAU,WAAW,IAAM,CACpCD,EAASJ,CAAK,EACdM,EAAa,QAAU,MACtBI,CAAa,IAEhBN,EAASJ,CAAK,EACdM,EAAa,QAAU,KACzB,MAEAF,EAASJ,CAAK,CAEf,EAAA,CAACA,EAAOC,EAAkBC,CAAa,CAAC,EAE3C,OAAAP,EAAM,UAAU,KACGa,IACVD,GACN,CAACP,EAAOQ,CAAgB,CAAC,EAErBL,CACT"}
+{"version":3,"file":"index.js","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx","../../src/hooks/useDeterminateState.ts"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport React from \"react\";\n\nconst FORWARD_REF_SYMBOL = Symbol.for(\"react.forward_ref\");\n\ntype ApplyRefPropsProps = {\n  children: React.ReactNode;\n};\n\ntype Child = React.ReactElement & {\n  $$typeof: symbol;\n  type: { $$typeof: symbol };\n};\n\n// Merge props the same way that radix slot does\n// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx\nconst mergeProps = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  slotProps: Record<string, any>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  childProps: Record<string, any>,\n) => {\n  // all child props should override\n  const overrideProps = { ...childProps };\n\n  for (const propName in childProps) {\n    const slotPropValue = slotProps[propName];\n    const childPropValue = childProps[propName];\n\n    const isHandler = /^on[A-Z]/.test(propName);\n    if (isHandler) {\n      // if the handler exists on both, we compose them\n      if (slotPropValue && childPropValue) {\n        overrideProps[propName] = (...args: unknown[]) => {\n          childPropValue(...args);\n          slotPropValue(...args);\n        };\n      }\n      // but if it exists only on the slot, we use only this one\n      else if (slotPropValue) {\n        overrideProps[propName] = slotPropValue;\n      }\n    }\n    // if it's `style`, we merge them\n    else if (propName === \"style\") {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n    } else if (propName === \"className\") {\n      overrideProps[propName] = [slotPropValue, childPropValue]\n        .filter(Boolean)\n        .join(\" \");\n    }\n  }\n\n  return { ...slotProps, ...overrideProps };\n};\n\nconst applyRefProps = (\n  { children, ...props }: ApplyRefPropsProps,\n  ref: React.Ref<unknown>,\n) => {\n  if (!children) return null;\n  const childrenArray = React.Children.toArray(children);\n  return childrenArray.map((child) => {\n    if (React.isValidElement(child)) {\n      const validChild = child as Child;\n      const $$typeof = validChild.$$typeof;\n      const $$typeofType = validChild.type.$$typeof;\n      const childProps = validChild.props;\n      const tgphRef = childProps.tgphRef;\n\n      // If we detect that the child is a forwardRef, we to pass the `ref` prop\n      // to it so that components that exist outside of our library can still\n      // receive the ref. We do it this way in order to avoid this warning:\n      // \"Function components cannot be given refs. Attempts to access this ref will fail.\n      // Did you mean to use React.forwardRef()\"\n      if (\n        $$typeof === FORWARD_REF_SYMBOL ||\n        $$typeofType === FORWARD_REF_SYMBOL\n      ) {\n        return React.cloneElement(validChild, {\n          ...mergeProps(props, childProps),\n          tgphRef: tgphRef || ref,\n          ref: tgphRef || ref,\n        });\n      }\n\n      // Otherwise, we can just pass the `tgphRef` prop to the child.\n      return React.cloneElement(validChild, {\n        ...mergeProps(props, childProps),\n        tgphRef: tgphRef || ref,\n      });\n    }\n\n    // If the child is not a valid element, we can just return it.\n    return child;\n  });\n};\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>(\n  ({ children: childrenProp, ...props }, ref) => {\n    return applyRefProps({ children: childrenProp, ...props }, ref);\n  },\n);\n\nexport { RefToTgphRef };\n","/*\n * useDeterminateState\n *\n * A hook that returns a state transitioning to a determinate value after a minimum duration.\n * For example, you could use this hook with a button that transitions into a \"loading\" state,\n * ensuring it remains in the \"loading\" state for at least 1000ms. This provides clear feedback\n * to the user that the action is being processed.\n *\n */\nimport React from \"react\";\n\ntype UseDeterminateStateParams<T> = {\n  value: T;\n  determinateValue: T;\n  minDurationMs?: number;\n};\n\nconst useDeterminateState = <T>({\n  value,\n  determinateValue,\n  minDurationMs = 1000,\n}: UseDeterminateStateParams<T>): T => {\n  const [state, setState] = React.useState<T>(value);\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  const clearExistingTimeout = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  const handleTransition = React.useCallback(() => {\n    if (value === determinateValue) {\n      clearExistingTimeout();\n      setState(determinateValue);\n      startTimeRef.current = Date.now();\n    } else if (startTimeRef.current !== null) {\n      const elapsedTime = Date.now() - startTimeRef.current;\n      const remainingTime = minDurationMs - elapsedTime;\n\n      if (remainingTime > 0) {\n        clearExistingTimeout();\n        timeoutRef.current = setTimeout(() => {\n          setState(value);\n          startTimeRef.current = null;\n        }, remainingTime);\n      } else {\n        setState(value);\n        startTimeRef.current = null;\n      }\n    } else {\n      setState(value);\n    }\n  }, [value, determinateValue, minDurationMs]);\n\n  React.useEffect(() => {\n    handleTransition();\n    return clearExistingTimeout;\n  }, [value, handleTransition]);\n\n  return state;\n};\n\nexport { useDeterminateState };\n"],"names":["FORWARD_REF_SYMBOL","mergeProps","slotProps","childProps","overrideProps","propName","slotPropValue","childPropValue","args","applyRefProps","children","props","ref","React","child","validChild","$$typeof","$$typeofType","tgphRef","RefToTgphRef","childrenProp","useDeterminateState","value","determinateValue","minDurationMs","state","setState","timeoutRef","startTimeRef","clearExistingTimeout","handleTransition","elapsedTime","remainingTime"],"mappings":"yGASMA,EAAqB,OAAO,IAAI,mBAAmB,EAanDC,EAAa,CAEjBC,EAEAC,IACG,CAEG,MAAAC,EAAgB,CAAE,GAAGD,GAE3B,UAAWE,KAAYF,EAAY,CAC3B,MAAAG,EAAgBJ,EAAUG,CAAQ,EAClCE,EAAiBJ,EAAWE,CAAQ,EAExB,WAAW,KAAKA,CAAQ,EAGpCC,GAAiBC,EACLH,EAAAC,CAAQ,EAAI,IAAIG,IAAoB,CAChDD,EAAe,GAAGC,CAAI,EACtBF,EAAc,GAAGE,CAAI,CAAA,EAIhBF,IACPF,EAAcC,CAAQ,EAAIC,GAIrBD,IAAa,QACpBD,EAAcC,CAAQ,EAAI,CAAE,GAAGC,EAAe,GAAGC,CAAe,EACvDF,IAAa,cACRD,EAAAC,CAAQ,EAAI,CAACC,EAAeC,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG,EAEf,CAEA,MAAO,CAAE,GAAGL,EAAW,GAAGE,EAC5B,EAEMK,EAAgB,CACpB,CAAE,SAAAC,EAAU,GAAGC,CAAA,EACfC,IAEKF,EACiBG,EAAM,SAAS,QAAQH,CAAQ,EAChC,IAAKI,GAAU,CAC9B,GAAAD,EAAM,eAAeC,CAAK,EAAG,CAC/B,MAAMC,EAAaD,EACbE,EAAWD,EAAW,SACtBE,EAAeF,EAAW,KAAK,SAC/BZ,EAAaY,EAAW,MACxBG,EAAUf,EAAW,QAQzB,OAAAa,IAAahB,GACbiB,IAAiBjB,EAEVa,EAAM,aAAaE,EAAY,CACpC,GAAGd,EAAWU,EAAOR,CAAU,EAC/B,QAASe,GAAWN,EACpB,IAAKM,GAAWN,CAAA,CACjB,EAIIC,EAAM,aAAaE,EAAY,CACpC,GAAGd,EAAWU,EAAOR,CAAU,EAC/B,QAASe,GAAWN,CAAA,CACrB,CACH,CAGO,OAAAE,CAAA,CACR,EAnCqB,KA0ClBK,EAAeN,EAAM,WACzB,CAAC,CAAE,SAAUO,EAAc,GAAGT,CAAA,EAASC,IAC9BH,EAAc,CAAE,SAAUW,EAAc,GAAGT,CAAA,EAASC,CAAG,CAElE,EC/FMS,EAAsB,CAAI,CAC9B,MAAAC,EACA,iBAAAC,EACA,cAAAC,EAAgB,GAClB,IAAuC,CACrC,KAAM,CAACC,EAAOC,CAAQ,EAAIb,EAAM,SAAYS,CAAK,EAC3CK,EAAad,EAAM,OAA8B,IAAI,EACrDe,EAAef,EAAM,OAAsB,IAAI,EAE/CgB,EAAuB,IAAM,CAC7BF,EAAW,UACb,aAAaA,EAAW,OAAO,EAC/BA,EAAW,QAAU,KACvB,EAGIG,EAAmBjB,EAAM,YAAY,IAAM,CAC/C,GAAIS,IAAUC,EACSM,IACrBH,EAASH,CAAgB,EACZK,EAAA,QAAU,KAAK,cACnBA,EAAa,UAAY,KAAM,CACxC,MAAMG,EAAc,KAAK,IAAI,EAAIH,EAAa,QACxCI,EAAgBR,EAAgBO,EAElCC,EAAgB,GACGH,IACVF,EAAA,QAAU,WAAW,IAAM,CACpCD,EAASJ,CAAK,EACdM,EAAa,QAAU,MACtBI,CAAa,IAEhBN,EAASJ,CAAK,EACdM,EAAa,QAAU,KACzB,MAEAF,EAASJ,CAAK,CAEf,EAAA,CAACA,EAAOC,EAAkBC,CAAa,CAAC,EAE3C,OAAAX,EAAM,UAAU,KACGiB,IACVD,GACN,CAACP,EAAOQ,CAAgB,CAAC,EAErBL,CACT"}

package/dist/esm/index.mjs

@@ -1,28 +1,50 @@
-import { jsx as R } from "react/jsx-runtime";
-import { Slot as T } from "@radix-ui/react-slot";
-import r from "react";
-const S = r.forwardRef((t, e) => /* @__PURE__ */ R(T, { ...t, ref: e, tgphRef: e })), h = ({
-  value: t,
-  determinateValue: e,
-  minDurationMs: u = 1e3
+import c from "react";
+const p = Symbol.for("react.forward_ref"), m = (e, o) => {
+  const r = { ...o };
+  for (const s in o) {
+    const t = e[s], n = o[s];
+    /^on[A-Z]/.test(s) ? t && n ? r[s] = (...f) => {
+      n(...f), t(...f);
+    } : t && (r[s] = t) : s === "style" ? r[s] = { ...t, ...n } : s === "className" && (r[s] = [t, n].filter(Boolean).join(" "));
+  }
+  return { ...e, ...r };
+}, R = ({ children: e, ...o }, r) => e ? c.Children.toArray(e).map((t) => {
+  if (c.isValidElement(t)) {
+    const n = t, l = n.$$typeof, f = n.type.$$typeof, i = n.props, u = i.tgphRef;
+    return l === p || f === p ? c.cloneElement(n, {
+      ...m(o, i),
+      tgphRef: u || r,
+      ref: u || r
+    }) : c.cloneElement(n, {
+      ...m(o, i),
+      tgphRef: u || r
+    });
+  }
+  return t;
+}) : null, d = c.forwardRef(
+  ({ children: e, ...o }, r) => R({ children: e, ...o }, r)
+), T = ({
+  value: e,
+  determinateValue: o,
+  minDurationMs: r = 1e3
 }) => {
-  const [l, o] = r.useState(t), s = r.useRef(null), n = r.useRef(null), c = () => {
-    s.current && (clearTimeout(s.current), s.current = null);
-  }, f = r.useCallback(() => {
-    if (t === e)
-      c(), o(e), n.current = Date.now();
-    else if (n.current !== null) {
-      const m = Date.now() - n.current, i = u - m;
-      i > 0 ? (c(), s.current = setTimeout(() => {
-        o(t), n.current = null;
-      }, i)) : (o(t), n.current = null);
+  const [s, t] = c.useState(e), n = c.useRef(null), l = c.useRef(null), f = () => {
+    n.current && (clearTimeout(n.current), n.current = null);
+  }, i = c.useCallback(() => {
+    if (e === o)
+      f(), t(o), l.current = Date.now();
+    else if (l.current !== null) {
+      const u = Date.now() - l.current, a = r - u;
+      a > 0 ? (f(), n.current = setTimeout(() => {
+        t(e), l.current = null;
+      }, a)) : (t(e), l.current = null);
     } else
-      o(t);
-  }, [t, e, u]);
-  return r.useEffect(() => (f(), c), [t, f]), l;
+      t(e);
+  }, [e, o, r]);
+  return c.useEffect(() => (i(), f), [e, i]), s;
 };
 export {
-  S as RefToTgphRef,
-  h as useDeterminateState
+  d as RefToTgphRef,
+  T as useDeterminateState
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx","../../src/hooks/useDeterminateState.ts"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React from \"react\";\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>((props, ref) => {\n  return <Slot {...props} ref={ref} tgphRef={ref} />;\n});\n\nexport { RefToTgphRef };\n","/*\n * useDeterminateState\n *\n * A hook that returns a state transitioning to a determinate value after a minimum duration.\n * For example, you could use this hook with a button that transitions into a \"loading\" state,\n * ensuring it remains in the \"loading\" state for at least 1000ms. This provides clear feedback\n * to the user that the action is being processed.\n *\n */\nimport React from \"react\";\n\ntype UseDeterminateStateParams<T> = {\n  value: T;\n  determinateValue: T;\n  minDurationMs?: number;\n};\n\nconst useDeterminateState = <T>({\n  value,\n  determinateValue,\n  minDurationMs = 1000,\n}: UseDeterminateStateParams<T>): T => {\n  const [state, setState] = React.useState<T>(value);\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  const clearExistingTimeout = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  const handleTransition = React.useCallback(() => {\n    if (value === determinateValue) {\n      clearExistingTimeout();\n      setState(determinateValue);\n      startTimeRef.current = Date.now();\n    } else if (startTimeRef.current !== null) {\n      const elapsedTime = Date.now() - startTimeRef.current;\n      const remainingTime = minDurationMs - elapsedTime;\n\n      if (remainingTime > 0) {\n        clearExistingTimeout();\n        timeoutRef.current = setTimeout(() => {\n          setState(value);\n          startTimeRef.current = null;\n        }, remainingTime);\n      } else {\n        setState(value);\n        startTimeRef.current = null;\n      }\n    } else {\n      setState(value);\n    }\n  }, [value, determinateValue, minDurationMs]);\n\n  React.useEffect(() => {\n    handleTransition();\n    return clearExistingTimeout;\n  }, [value, handleTransition]);\n\n  return state;\n};\n\nexport { useDeterminateState };\n"],"names":["RefToTgphRef","React","props","ref","Slot","useDeterminateState","value","determinateValue","minDurationMs","state","setState","timeoutRef","startTimeRef","clearExistingTimeout","handleTransition","elapsedTime","remainingTime"],"mappings":";;;AAcA,MAAMA,IAAeC,EAAM,WAAqB,CAACC,GAAOC,wBAC9CC,GAAM,EAAA,GAAGF,GAAO,KAAAC,GAAU,SAASA,EAAK,CAAA,CACjD,GCCKE,IAAsB,CAAI;AAAA,EAC9B,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAuC;AACrC,QAAM,CAACC,GAAOC,CAAQ,IAAIT,EAAM,SAAYK,CAAK,GAC3CK,IAAaV,EAAM,OAA8B,IAAI,GACrDW,IAAeX,EAAM,OAAsB,IAAI,GAE/CY,IAAuB,MAAM;AACjC,IAAIF,EAAW,YACb,aAAaA,EAAW,OAAO,GAC/BA,EAAW,UAAU;AAAA,EACvB,GAGIG,IAAmBb,EAAM,YAAY,MAAM;AAC/C,QAAIK,MAAUC;AACS,MAAAM,KACrBH,EAASH,CAAgB,GACZK,EAAA,UAAU,KAAK;aACnBA,EAAa,YAAY,MAAM;AACxC,YAAMG,IAAc,KAAK,IAAI,IAAIH,EAAa,SACxCI,IAAgBR,IAAgBO;AAEtC,MAAIC,IAAgB,KACGH,KACVF,EAAA,UAAU,WAAW,MAAM;AACpC,QAAAD,EAASJ,CAAK,GACdM,EAAa,UAAU;AAAA,SACtBI,CAAa,MAEhBN,EAASJ,CAAK,GACdM,EAAa,UAAU;AAAA,IACzB;AAEA,MAAAF,EAASJ,CAAK;AAAA,EAEf,GAAA,CAACA,GAAOC,GAAkBC,CAAa,CAAC;AAE3C,SAAAP,EAAM,UAAU,OACGa,KACVD,IACN,CAACP,GAAOQ,CAAgB,CAAC,GAErBL;AACT;"}
+{"version":3,"file":"index.mjs","sources":["../../src/components/RefToTgphRef/RefToTgphRef.tsx","../../src/hooks/useDeterminateState.ts"],"sourcesContent":["//\n// When interacting with components like a Radix.Trigger, they assume that\n// our components accept a `ref` prop. This is not the case with our components\n// because we use the `tgphRef` prop instead. To work around this, we can create\n// a new component that accepts a `ref` prop and forwards it to the `tgphRef`\n// prop.\n//\nimport React from \"react\";\n\nconst FORWARD_REF_SYMBOL = Symbol.for(\"react.forward_ref\");\n\ntype ApplyRefPropsProps = {\n  children: React.ReactNode;\n};\n\ntype Child = React.ReactElement & {\n  $$typeof: symbol;\n  type: { $$typeof: symbol };\n};\n\n// Merge props the same way that radix slot does\n// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx\nconst mergeProps = (\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  slotProps: Record<string, any>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  childProps: Record<string, any>,\n) => {\n  // all child props should override\n  const overrideProps = { ...childProps };\n\n  for (const propName in childProps) {\n    const slotPropValue = slotProps[propName];\n    const childPropValue = childProps[propName];\n\n    const isHandler = /^on[A-Z]/.test(propName);\n    if (isHandler) {\n      // if the handler exists on both, we compose them\n      if (slotPropValue && childPropValue) {\n        overrideProps[propName] = (...args: unknown[]) => {\n          childPropValue(...args);\n          slotPropValue(...args);\n        };\n      }\n      // but if it exists only on the slot, we use only this one\n      else if (slotPropValue) {\n        overrideProps[propName] = slotPropValue;\n      }\n    }\n    // if it's `style`, we merge them\n    else if (propName === \"style\") {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue };\n    } else if (propName === \"className\") {\n      overrideProps[propName] = [slotPropValue, childPropValue]\n        .filter(Boolean)\n        .join(\" \");\n    }\n  }\n\n  return { ...slotProps, ...overrideProps };\n};\n\nconst applyRefProps = (\n  { children, ...props }: ApplyRefPropsProps,\n  ref: React.Ref<unknown>,\n) => {\n  if (!children) return null;\n  const childrenArray = React.Children.toArray(children);\n  return childrenArray.map((child) => {\n    if (React.isValidElement(child)) {\n      const validChild = child as Child;\n      const $$typeof = validChild.$$typeof;\n      const $$typeofType = validChild.type.$$typeof;\n      const childProps = validChild.props;\n      const tgphRef = childProps.tgphRef;\n\n      // If we detect that the child is a forwardRef, we to pass the `ref` prop\n      // to it so that components that exist outside of our library can still\n      // receive the ref. We do it this way in order to avoid this warning:\n      // \"Function components cannot be given refs. Attempts to access this ref will fail.\n      // Did you mean to use React.forwardRef()\"\n      if (\n        $$typeof === FORWARD_REF_SYMBOL ||\n        $$typeofType === FORWARD_REF_SYMBOL\n      ) {\n        return React.cloneElement(validChild, {\n          ...mergeProps(props, childProps),\n          tgphRef: tgphRef || ref,\n          ref: tgphRef || ref,\n        });\n      }\n\n      // Otherwise, we can just pass the `tgphRef` prop to the child.\n      return React.cloneElement(validChild, {\n        ...mergeProps(props, childProps),\n        tgphRef: tgphRef || ref,\n      });\n    }\n\n    // If the child is not a valid element, we can just return it.\n    return child;\n  });\n};\n\n// We can't generate the type of the ref because it's a forwardRef so any\n// works for this use case\n//\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst RefToTgphRef = React.forwardRef<any, any>(\n  ({ children: childrenProp, ...props }, ref) => {\n    return applyRefProps({ children: childrenProp, ...props }, ref);\n  },\n);\n\nexport { RefToTgphRef };\n","/*\n * useDeterminateState\n *\n * A hook that returns a state transitioning to a determinate value after a minimum duration.\n * For example, you could use this hook with a button that transitions into a \"loading\" state,\n * ensuring it remains in the \"loading\" state for at least 1000ms. This provides clear feedback\n * to the user that the action is being processed.\n *\n */\nimport React from \"react\";\n\ntype UseDeterminateStateParams<T> = {\n  value: T;\n  determinateValue: T;\n  minDurationMs?: number;\n};\n\nconst useDeterminateState = <T>({\n  value,\n  determinateValue,\n  minDurationMs = 1000,\n}: UseDeterminateStateParams<T>): T => {\n  const [state, setState] = React.useState<T>(value);\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\n  const startTimeRef = React.useRef<number | null>(null);\n\n  const clearExistingTimeout = () => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n  };\n\n  const handleTransition = React.useCallback(() => {\n    if (value === determinateValue) {\n      clearExistingTimeout();\n      setState(determinateValue);\n      startTimeRef.current = Date.now();\n    } else if (startTimeRef.current !== null) {\n      const elapsedTime = Date.now() - startTimeRef.current;\n      const remainingTime = minDurationMs - elapsedTime;\n\n      if (remainingTime > 0) {\n        clearExistingTimeout();\n        timeoutRef.current = setTimeout(() => {\n          setState(value);\n          startTimeRef.current = null;\n        }, remainingTime);\n      } else {\n        setState(value);\n        startTimeRef.current = null;\n      }\n    } else {\n      setState(value);\n    }\n  }, [value, determinateValue, minDurationMs]);\n\n  React.useEffect(() => {\n    handleTransition();\n    return clearExistingTimeout;\n  }, [value, handleTransition]);\n\n  return state;\n};\n\nexport { useDeterminateState };\n"],"names":["FORWARD_REF_SYMBOL","mergeProps","slotProps","childProps","overrideProps","propName","slotPropValue","childPropValue","args","applyRefProps","children","props","ref","React","child","validChild","$$typeof","$$typeofType","tgphRef","RefToTgphRef","childrenProp","useDeterminateState","value","determinateValue","minDurationMs","state","setState","timeoutRef","startTimeRef","clearExistingTimeout","handleTransition","elapsedTime","remainingTime"],"mappings":";AASA,MAAMA,IAAqB,OAAO,IAAI,mBAAmB,GAanDC,IAAa,CAEjBC,GAEAC,MACG;AAEG,QAAAC,IAAgB,EAAE,GAAGD;AAE3B,aAAWE,KAAYF,GAAY;AAC3B,UAAAG,IAAgBJ,EAAUG,CAAQ,GAClCE,IAAiBJ,EAAWE,CAAQ;AAG1C,IADkB,WAAW,KAAKA,CAAQ,IAGpCC,KAAiBC,IACLH,EAAAC,CAAQ,IAAI,IAAIG,MAAoB;AAChD,MAAAD,EAAe,GAAGC,CAAI,GACtBF,EAAc,GAAGE,CAAI;AAAA,IAAA,IAIhBF,MACPF,EAAcC,CAAQ,IAAIC,KAIrBD,MAAa,UACpBD,EAAcC,CAAQ,IAAI,EAAE,GAAGC,GAAe,GAAGC,EAAe,IACvDF,MAAa,gBACRD,EAAAC,CAAQ,IAAI,CAACC,GAAeC,CAAc,EACrD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,EAEf;AAEA,SAAO,EAAE,GAAGL,GAAW,GAAGE;AAC5B,GAEMK,IAAgB,CACpB,EAAE,UAAAC,GAAU,GAAGC,EAAA,GACfC,MAEKF,IACiBG,EAAM,SAAS,QAAQH,CAAQ,EAChC,IAAI,CAACI,MAAU;AAC9B,MAAAD,EAAM,eAAeC,CAAK,GAAG;AAC/B,UAAMC,IAAaD,GACbE,IAAWD,EAAW,UACtBE,IAAeF,EAAW,KAAK,UAC/BZ,IAAaY,EAAW,OACxBG,IAAUf,EAAW;AAQzB,WAAAa,MAAahB,KACbiB,MAAiBjB,IAEVa,EAAM,aAAaE,GAAY;AAAA,MACpC,GAAGd,EAAWU,GAAOR,CAAU;AAAA,MAC/B,SAASe,KAAWN;AAAA,MACpB,KAAKM,KAAWN;AAAA,IAAA,CACjB,IAIIC,EAAM,aAAaE,GAAY;AAAA,MACpC,GAAGd,EAAWU,GAAOR,CAAU;AAAA,MAC/B,SAASe,KAAWN;AAAA,IAAA,CACrB;AAAA,EACH;AAGO,SAAAE;AAAA,CACR,IAnCqB,MA0ClBK,IAAeN,EAAM;AAAA,EACzB,CAAC,EAAE,UAAUO,GAAc,GAAGT,EAAA,GAASC,MAC9BH,EAAc,EAAE,UAAUW,GAAc,GAAGT,EAAA,GAASC,CAAG;AAElE,GC/FMS,IAAsB,CAAI;AAAA,EAC9B,OAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAuC;AACrC,QAAM,CAACC,GAAOC,CAAQ,IAAIb,EAAM,SAAYS,CAAK,GAC3CK,IAAad,EAAM,OAA8B,IAAI,GACrDe,IAAef,EAAM,OAAsB,IAAI,GAE/CgB,IAAuB,MAAM;AACjC,IAAIF,EAAW,YACb,aAAaA,EAAW,OAAO,GAC/BA,EAAW,UAAU;AAAA,EACvB,GAGIG,IAAmBjB,EAAM,YAAY,MAAM;AAC/C,QAAIS,MAAUC;AACS,MAAAM,KACrBH,EAASH,CAAgB,GACZK,EAAA,UAAU,KAAK;aACnBA,EAAa,YAAY,MAAM;AACxC,YAAMG,IAAc,KAAK,IAAI,IAAIH,EAAa,SACxCI,IAAgBR,IAAgBO;AAEtC,MAAIC,IAAgB,KACGH,KACVF,EAAA,UAAU,WAAW,MAAM;AACpC,QAAAD,EAASJ,CAAK,GACdM,EAAa,UAAU;AAAA,SACtBI,CAAa,MAEhBN,EAASJ,CAAK,GACdM,EAAa,UAAU;AAAA,IACzB;AAEA,MAAAF,EAASJ,CAAK;AAAA,EAEf,GAAA,CAACA,GAAOC,GAAkBC,CAAa,CAAC;AAE3C,SAAAX,EAAM,UAAU,OACGiB,KACVD,IACN,CAACP,GAAOQ,CAAgB,CAAC,GAErBL;AACT;"}

package/dist/types/components/RefToTgphRef/RefToTgphRef.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RefToTgphRef.d.ts","sourceRoot":"","sources":["../../../../src/components/RefToTgphRef/RefToTgphRef.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,YAAY,8EAEhB,CAAC;AAEH,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"RefToTgphRef.d.ts","sourceRoot":"","sources":["../../../../src/components/RefToTgphRef/RefToTgphRef.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqG1B,QAAA,MAAM,YAAY,8EAIjB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/types/hooks/useDeterminateState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDeterminateState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDeterminateState.ts"],"names":[],"mappings":"AAWA,KAAK,yBAAyB,CAAC,CAAC,IAAI;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB,EAAE,CAAC,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,mBAAmB,mDAItB,0BAA0B,CAAC,CAAC,KAAG,CA0CjC,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"useDeterminateState.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDeterminateState.ts"],"names":[],"mappings":"AAWA,KAAK,yBAAyB,CAAC,CAAC,IAAI;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB,EAAE,CAAC,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,mBAAmB,GAAI,CAAC,+CAI3B,yBAAyB,CAAC,CAAC,CAAC,KAAG,CA0CjC,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/helpers",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/helpers",
   "author": "@knocklabs",
   "license": "MIT",
@@ -28,9 +28,6 @@
     "format:check": "prettier \"src/**/*.{js,ts,tsx}\" --check",
     "preview": "vite preview"
   },
-  "dependencies": {
-    "@radix-ui/react-slot": "^1.0.2"
-  },
   "devDependencies": {
     "@knocklabs/eslint-config": "^0.0.3",
     "@knocklabs/typescript-config": "^0.0.2",
@@ -40,7 +37,7 @@
     "eslint": "^8.56.0",
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.4",
     "vite": "^5.3.5"
   },
   "peerDependencies": {