@alexgorbatchev/shadcn 0.0.0-stage → 0.0.16

package/dist/components/input-otp/index.js

@@ -0,0 +1,303 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+
+// src/components/input-otp/InputOTP.tsx
+import { useContext } from "react";
+
+// node_modules/input-otp/dist/index.mjs
+import * as e from "react";
+import * as Z from "react";
+import * as h from "react";
+var kt = Object.defineProperty;
+var xt = Object.defineProperties;
+var Gt = Object.getOwnPropertyDescriptors;
+var U = Object.getOwnPropertySymbols;
+var ht = Object.prototype.hasOwnProperty;
+var St = Object.prototype.propertyIsEnumerable;
+var Et = (o, r, t) => (r in o) ? kt(o, r, { enumerable: true, configurable: true, writable: true, value: t }) : o[r] = t;
+var bt = (o, r) => {
+  for (var t in r || (r = {}))
+    ht.call(r, t) && Et(o, t, r[t]);
+  if (U)
+    for (var t of U(r))
+      St.call(r, t) && Et(o, t, r[t]);
+  return o;
+};
+var Pt = (o, r) => xt(o, Gt(r));
+var wt = (o, r) => {
+  var t = {};
+  for (var u in o)
+    ht.call(o, u) && r.indexOf(u) < 0 && (t[u] = o[u]);
+  if (o != null && U)
+    for (var u of U(o))
+      r.indexOf(u) < 0 && St.call(o, u) && (t[u] = o[u]);
+  return t;
+};
+function _t(o) {
+  let r = setTimeout(o, 0), t = setTimeout(o, 10), u = setTimeout(o, 50);
+  return [r, t, u];
+}
+function Tt(o) {
+  let r = Z.useRef();
+  return Z.useEffect(() => {
+    r.current = o;
+  }), r.current;
+}
+var Ot = 18;
+var nt = 40;
+var Lt = `${nt}px`;
+function Ct(o) {
+  let r = o.getBoundingClientRect().right, t = o;
+  for (;t; ) {
+    if (getComputedStyle(t).overflowX !== "visible")
+      return t.getBoundingClientRect().left + t.clientLeft + t.clientWidth - r;
+    t = t.parentElement;
+  }
+  return document.documentElement.clientWidth - r;
+}
+var jt = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function Mt({ containerRef: o, inputRef: r, pushPasswordManagerStrategy: t, isFocused: u }) {
+  let [w, T] = h.useState(false), [x, M] = h.useState(false), [V, I] = h.useState(false), q = h.useMemo(() => t === "none" ? false : (t === "increase-width" || t === "experimental-no-flickering") && w && x, [w, x, t]), y = h.useCallback(() => {
+    let m = o.current, S = r.current;
+    if (!m || !S || V || t === "none")
+      return;
+    let R = m, i = R.getBoundingClientRect().left + R.offsetWidth, G = R.getBoundingClientRect().top + R.offsetHeight / 2, ot = i - Ot, X = G;
+    document.querySelectorAll(jt).length === 0 && document.elementFromPoint(ot, X) === m || (M(Ct(m) >= nt), T(true), I(true));
+  }, [o, r, V, t]);
+  return h.useEffect(() => {
+    let m = o.current;
+    if (!m || t === "none")
+      return;
+    function S() {
+      M(Ct(m) >= nt);
+    }
+    S();
+    let R = setInterval(S, 1000);
+    return () => {
+      clearInterval(R);
+    };
+  }, [o, t]), h.useEffect(() => {
+    let m = u || document.activeElement === r.current;
+    if (t === "none" || !m)
+      return;
+    let S = setTimeout(y, 0), R = setTimeout(y, 2000), i = setTimeout(y, 5000), G = setTimeout(() => {
+      I(true);
+    }, 6000);
+    return () => {
+      clearTimeout(S), clearTimeout(R), clearTimeout(i), clearTimeout(G);
+    };
+  }, [r, u, t, y]), { hasPWMBadge: w, willPushPWMBadge: q, PWM_BADGE_SPACE_WIDTH: Lt };
+}
+var Nt = e.createContext({});
+var $t = e.forwardRef((ot, G) => {
+  var X = ot, { defaultValue: initialDefaultValue, value: o, onChange: r, maxLength: t, textAlign: u = "left", pattern: w, placeholder: T, inputMode: x = "numeric", onComplete: M, pushPasswordManagerStrategy: V = "increase-width", pasteTransformer: I, containerClassName: q, noScriptCSSFallback: y = Ft, nonce: m, render: S, children: R } = X, i = wt(X, ["defaultValue", "value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "nonce", "render", "children"]);
+  var z, ft, mt, pt, Rt;
+  let [rt, at] = e.useState(typeof initialDefaultValue == "string" ? initialDefaultValue : ""), l = o != null ? o : rt, D = Tt(l), O = e.useCallback((a) => {
+    r == null || r(a), at(a);
+  }, [r]), p = e.useMemo(() => w ? typeof w == "string" ? new RegExp(w) : w : null, [w]), d = e.useRef(null), K = e.useRef(null), J = e.useRef({ value: l, onChange: O, isIOS: typeof window != "undefined" && ((ft = (z = window == null ? undefined : window.CSS) == null ? undefined : z.supports) == null ? undefined : ft.call(z, "-webkit-touch-callout", "none")) }), Y = e.useRef({ prev: [(mt = d.current) == null ? undefined : mt.selectionStart, (pt = d.current) == null ? undefined : pt.selectionEnd, (Rt = d.current) == null ? undefined : Rt.selectionDirection] });
+  e.useImperativeHandle(G, () => d.current, []), e.useEffect(() => {
+    let a = d.current, n = K.current;
+    if (!a || !n)
+      return;
+    J.current.value !== a.value && J.current.onChange(a.value), Y.current.prev = [a.selectionStart, a.selectionEnd, a.selectionDirection];
+    function c() {
+      if (document.activeElement !== a) {
+        j(null), N(null);
+        return;
+      }
+      let { selectionStart: s, selectionEnd: P, selectionDirection: $, maxLength: v, value: B } = a, _ = Y.current.prev, g = -1, E = -1, C;
+      if (B.length !== 0 && s !== null && P !== null) {
+        let Bt = s === P, Wt = s === B.length && B.length < v;
+        if (Bt && !Wt) {
+          let W = s;
+          if (W === 0)
+            g = 0, E = 1, C = "forward";
+          else if (W === v)
+            g = W - 1, E = W, C = "backward";
+          else if (v > 1 && B.length > 1) {
+            let et = 0;
+            if (_[0] !== null && _[1] !== null) {
+              C = W < _[1] ? "backward" : "forward";
+              let At = _[0] === _[1] && _[0] < v;
+              C === "backward" && !At && (et = -1);
+            }
+            g = et + W, E = et + W + 1;
+          }
+        }
+        g !== -1 && E !== -1 && g !== E && a.setSelectionRange(g, E, C);
+      }
+      let vt = g !== -1 ? g : s, gt = E !== -1 ? E : P, Ht = C != null ? C : $;
+      j(vt), N(gt), Y.current.prev = [vt, gt, Ht];
+    }
+    if (document.addEventListener("selectionchange", c, { capture: true }), c(), document.activeElement === a && Q(true), !document.getElementById("input-otp-style")) {
+      let s = document.createElement("style");
+      if (s.id = "input-otp-style", m && s.setAttribute("nonce", m), document.head.appendChild(s), s.sheet) {
+        let P = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        F(s.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), F(s.sheet, `[data-input-otp]:autofill { ${P} }`), F(s.sheet, `[data-input-otp]:-webkit-autofill { ${P} }`), F(s.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), F(s.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+      }
+    }
+    let b = () => {
+      n && n.style.setProperty("--root-height", `${a.clientHeight}px`);
+    };
+    b();
+    let f = typeof ResizeObserver == "undefined" ? null : new ResizeObserver(b);
+    return f == null || f.observe(a), () => {
+      document.removeEventListener("selectionchange", c, { capture: true }), f == null || f.disconnect();
+    };
+  }, []);
+  let [ct, it] = e.useState(false), [L, Q] = e.useState(false), [H, j] = e.useState(null), [A, N] = e.useState(null);
+  e.useEffect(() => {
+    let a = _t(() => {
+      var f, s, P, $;
+      (f = d.current) == null || f.dispatchEvent(new Event("input"));
+      let n = (s = d.current) == null ? undefined : s.selectionStart, c = (P = d.current) == null ? undefined : P.selectionEnd, b = ($ = d.current) == null ? undefined : $.selectionDirection;
+      n !== null && c !== null && (j(n), N(c), Y.current.prev = [n, c, b]);
+    });
+    return () => {
+      a.forEach((n) => clearTimeout(n));
+    };
+  }, [l, L]), e.useEffect(() => {
+    D !== undefined && l !== D && D.length < t && l.length === t && (M == null || M(l));
+  }, [t, M, D, l]);
+  let k = Mt({ containerRef: K, inputRef: d, pushPasswordManagerStrategy: V, isFocused: L }), st = e.useCallback((a) => {
+    let n = a.currentTarget.value.slice(0, t);
+    if (n.length > 0 && p && !p.test(n)) {
+      a.preventDefault();
+      return;
+    }
+    typeof D == "string" && n.length < D.length && document.dispatchEvent(new Event("selectionchange")), O(n);
+  }, [t, O, D, p]), lt = e.useCallback(() => {
+    var a;
+    if (d.current) {
+      let n = Math.min(d.current.value.length, t - 1), c = d.current.value.length;
+      (a = d.current) == null || a.setSelectionRange(n, c), j(n), N(c);
+    }
+    Q(true);
+  }, [t]), ut = e.useCallback((a) => {
+    var g, E;
+    let n = d.current;
+    if (!I && (!J.current.isIOS || !a.clipboardData || !n))
+      return;
+    let c = a.clipboardData.getData("text/plain"), b = I ? I(c) : c;
+    a.preventDefault();
+    let f = (g = d.current) == null ? undefined : g.selectionStart, s = (E = d.current) == null ? undefined : E.selectionEnd, v = (f !== s ? l.slice(0, f) + b + l.slice(s) : l.slice(0, f) + b + l.slice(f)).slice(0, t);
+    if (v.length > 0 && p && !p.test(v))
+      return;
+    n.value = v, O(v);
+    let B = Math.min(v.length, t - 1), _ = v.length;
+    n.setSelectionRange(B, _), j(B), N(_);
+  }, [t, O, I, p, l]), It = e.useMemo(() => ({ position: "relative", cursor: i.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [i.disabled]), dt = e.useMemo(() => ({ position: "absolute", inset: 0, width: k.willPushPWMBadge ? `calc(100% + ${k.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: k.willPushPWMBadge ? `inset(0 ${k.PWM_BADGE_SPACE_WIDTH} 0 0)` : undefined, height: "100%", display: "flex", textAlign: u, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height, 16px)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [k.PWM_BADGE_SPACE_WIDTH, k.willPushPWMBadge, u]), yt = e.useMemo(() => {
+    var a;
+    return e.createElement("input", Pt(bt({ autoComplete: i.autoComplete || "one-time-code" }, i), { "data-input-otp": true, "data-input-otp-placeholder-shown": l.length === 0 || undefined, "data-input-otp-mss": H, "data-input-otp-mse": A, inputMode: x, pattern: p == null ? undefined : p.source, "aria-placeholder": T, style: dt, maxLength: t, value: l, ref: d, spellCheck: (a = i.spellCheck) != null ? a : false, onPaste: (n) => {
+      var c;
+      ut(n), (c = i.onPaste) == null || c.call(i, n);
+    }, onChange: st, onMouseOver: (n) => {
+      var c;
+      it(true), (c = i.onMouseOver) == null || c.call(i, n);
+    }, onMouseLeave: (n) => {
+      var c;
+      it(false), (c = i.onMouseLeave) == null || c.call(i, n);
+    }, onFocus: (n) => {
+      var c;
+      lt(), (c = i.onFocus) == null || c.call(i, n);
+    }, onBlur: (n) => {
+      var c;
+      Q(false), (c = i.onBlur) == null || c.call(i, n);
+    } }));
+  }, [st, lt, ut, x, dt, t, A, H, T, i, p == null ? undefined : p.source, l]), tt = e.useMemo(() => ({ slots: Array.from({ length: t }).map((a, n) => {
+    var s;
+    let c = L && H !== null && A !== null && (H === A && n === H || n >= H && n < A), b = l[n] !== undefined ? l[n] : null, f = l[0] !== undefined ? null : (s = T == null ? undefined : T[n]) != null ? s : null;
+    return { char: b, placeholderChar: f, isActive: c, hasFakeCaret: c && b === null };
+  }), isFocused: L, isHovering: !i.disabled && ct }), [L, ct, t, A, H, T, i.disabled, l]), Dt = e.useMemo(() => S ? S(tt) : e.createElement(Nt.Provider, { value: tt }, R), [R, tt, S]);
+  return e.createElement(e.Fragment, null, y !== null && e.createElement("noscript", null, e.createElement("style", null, y)), e.createElement("div", { ref: K, "data-input-otp-container": true, translate: "no", style: It, className: q }, Dt, e.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, yt)));
+});
+$t.displayName = "Input";
+function F(o, r) {
+  try {
+    o.insertRule(r);
+  } catch (t) {
+    console.warn("input-otp could not insert CSS rule:", r);
+  }
+}
+var Ft = `
+[data-input-otp] {
+  --nojs-bg: white !important;
+  --nojs-fg: black !important;
+
+  background-color: var(--nojs-bg) !important;
+  color: var(--nojs-fg) !important;
+  caret-color: var(--nojs-fg) !important;
+  letter-spacing: .25em !important;
+  text-align: center !important;
+  border: 1px solid var(--nojs-fg) !important;
+  border-radius: 4px !important;
+  width: 100% !important;
+}
+@media (prefers-color-scheme: dark) {
+  [data-input-otp] {
+    --nojs-bg: black !important;
+    --nojs-fg: white !important;
+  }
+}`;
+
+// src/components/input-otp/InputOTP.tsx
+import { MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InputOTP({ density, className, containerClassName, dir, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-slot": "input-otp",
+    "data-density": density,
+    dir,
+    className: "inline-flex [&:has(input:disabled)]:opacity-50 [&:has(input[aria-invalid=true])_[data-slot=input-otp-slot]]:border-destructive [&:has(input[aria-invalid=true])_[data-active=true]]:ring-destructive",
+    children: /* @__PURE__ */ jsx($t, {
+      dir,
+      "data-slot": "input-otp-control",
+      containerClassName: cn2("flex items-center gap-control-gap", containerClassName),
+      spellCheck: false,
+      className: cn2("disabled:cursor-not-allowed", className),
+      ...props
+    })
+  });
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-slot": "input-otp-group",
+    className: cn2("flex items-center", className),
+    ...props
+  });
+}
+function InputOTPSlot({ index, className, ...props }) {
+  const { char, placeholderChar, hasFakeCaret, isActive } = useContext(Nt).slots[index] ?? {};
+  return /* @__PURE__ */ jsxs("div", {
+    "data-slot": "input-otp-slot",
+    "data-active": isActive,
+    "aria-hidden": "true",
+    className: cn2("relative flex size-control items-center justify-center border-y border-e border-input bg-input text-sm first:border-s data-[active=true]:border-ring data-[active=true]:ring-1 data-[active=true]:ring-ring", className),
+    ...props,
+    children: [
+      char ?? /* @__PURE__ */ jsx("span", {
+        className: "text-muted-foreground",
+        children: placeholderChar
+      }),
+      hasFakeCaret && /* @__PURE__ */ jsx("div", {
+        className: "pointer-events-none absolute h-3 w-px animate-caret-blink bg-foreground motion-reduce:animate-none"
+      })
+    ]
+  });
+}
+function InputOTPSeparator({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx("div", {
+    "data-slot": "input-otp-separator",
+    "aria-hidden": "true",
+    className: cn2("flex items-center [&_svg]:size-4", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(MinusIcon, {})
+  });
+}
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot
+};

package/dist/components/message-scroller/MessageScroller.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactElement } from "react";
+import type { IDensityProps } from "../../density/types.js";
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn/react/message-scroller";
+import { Button } from "../Button.js";
+declare function MessageScrollerProvider(props: ComponentProps<typeof MessageScrollerPrimitive.Provider>): ReactElement;
+type MessageScrollerProps = ComponentProps<typeof MessageScrollerPrimitive.Root> & IDensityProps;
+declare function MessageScroller({ density, className, ...props }: MessageScrollerProps): ReactElement;
+type MessageScrollerViewportProps = ComponentProps<typeof MessageScrollerPrimitive.Viewport> & IDensityProps;
+declare function MessageScrollerViewport({ density, className, ...props }: MessageScrollerViewportProps): ReactElement;
+type MessageScrollerContentProps = ComponentProps<typeof MessageScrollerPrimitive.Content> & IDensityProps;
+declare function MessageScrollerContent({ density, className, ...props }: MessageScrollerContentProps): ReactElement;
+type MessageScrollerItemProps = ComponentProps<typeof MessageScrollerPrimitive.Item> & IDensityProps;
+declare function MessageScrollerItem({ density, className, scrollAnchor, ...props }: MessageScrollerItemProps): ReactElement;
+type MessageScrollerButtonProps = ComponentProps<typeof MessageScrollerPrimitive.Button> & Pick<ComponentProps<typeof Button>, "variant" | "size"> & IDensityProps;
+declare function MessageScrollerButton({ density, direction, behavior, className, children, render, variant, size, ...props }: MessageScrollerButtonProps): ReactElement;
+export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, };

package/dist/components/message-scroller/hooks/useMessageScroller.d.ts

@@ -0,0 +1 @@
+export { useMessageScroller } from "@shadcn/react/message-scroller";

package/dist/components/message-scroller/hooks/useMessageScrollerScrollable.d.ts

@@ -0,0 +1 @@
+export { useMessageScrollerScrollable } from "@shadcn/react/message-scroller";

package/dist/components/message-scroller/hooks/useMessageScrollerVisibility.d.ts

@@ -0,0 +1 @@
+export { useMessageScrollerVisibility } from "@shadcn/react/message-scroller";

package/dist/components/message-scroller/index.d.ts

@@ -0,0 +1,5 @@
+export { MessageScrollerProvider, MessageScroller, MessageScrollerViewport, MessageScrollerContent, MessageScrollerItem, MessageScrollerButton, } from "./MessageScroller.js";
+export { useMessageScroller } from "./hooks/useMessageScroller.js";
+export { useMessageScrollerScrollable } from "./hooks/useMessageScrollerScrollable.js";
+export { useMessageScrollerVisibility } from "./hooks/useMessageScrollerVisibility.js";
+export type { MessageScrollerDefaultScrollPosition, MessageScrollerScrollAlign, MessageScrollerScrollOptions, MessageScrollerScrollable, MessageScrollerVisibilityState, } from "@shadcn/react/message-scroller";