@better-zap/react 0.2.0 → 0.2.2

package/dist/utils.d.cts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ClassValue } from "clsx";
+
+//#region src/utils.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Base UI-style element polymorphism: merge part props onto a render element.
+ * - className: cn(computed, render.props.className)
+ * - style: { ...computed.style, ...render.props.style }
+ * - other props: render element's own props win
+ * - children: part children win unless render element already has children
+ */
+declare function renderSlot(render: React.ReactElement<Record<string, unknown>>, computed: Record<string, unknown> & {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}): React.ReactElement;
+declare function getDisplayDate(dateStr: string): string;
+//#endregion
+export { cn, getDisplayDate, renderSlot };

package/dist/utils.d.mts

@@ -0,0 +1,20 @@
+import React from "react";
+import { ClassValue } from "clsx";
+
+//#region src/utils.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Base UI-style element polymorphism: merge part props onto a render element.
+ * - className: cn(computed, render.props.className)
+ * - style: { ...computed.style, ...render.props.style }
+ * - other props: render element's own props win
+ * - children: part children win unless render element already has children
+ */
+declare function renderSlot(render: React.ReactElement<Record<string, unknown>>, computed: Record<string, unknown> & {
+  className?: string;
+  style?: React.CSSProperties;
+  children?: React.ReactNode;
+}): React.ReactElement;
+declare function getDisplayDate(dateStr: string): string;
+//#endregion
+export { cn, getDisplayDate, renderSlot };

package/dist/utils.mjs

@@ -0,0 +1,45 @@
+import React from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* Base UI-style element polymorphism: merge part props onto a render element.
+* - className: cn(computed, render.props.className)
+* - style: { ...computed.style, ...render.props.style }
+* - other props: render element's own props win
+* - children: part children win unless render element already has children
+*/
+function renderSlot(render, computed) {
+	const renderProps = render.props;
+	const merged = {
+		...computed,
+		...renderProps,
+		className: cn(computed.className, renderProps.className),
+		style: {
+			...computed.style ?? {},
+			...renderProps.style ?? {}
+		},
+		children: renderProps.children !== void 0 && renderProps.children !== null ? renderProps.children : computed.children
+	};
+	return React.cloneElement(render, merged);
+}
+function getDisplayDate(dateStr) {
+	const dateObj = new Date(dateStr);
+	const now = /* @__PURE__ */ new Date();
+	const isToday = dateObj.toDateString() === now.toDateString();
+	const yesterday = new Date(now);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const isYesterday = dateObj.toDateString() === yesterday.toDateString();
+	if (isToday) return "HOJE";
+	else if (isYesterday) return "ONTEM";
+	else return dateObj.toLocaleDateString("pt-BR", {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric"
+	});
+}
+//#endregion
+export { cn, getDisplayDate, renderSlot };

package/dist/whatsapp-dashboard.cjs

@@ -0,0 +1,64 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_utils = require("./utils-Bp9IahGG.cjs");
+let react = require("react");
+react = require_utils.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/whatsapp-dashboard.tsx
+const MOBILE_BREAKPOINT = 1024;
+function useIsMobile(enabled = true) {
+	const [isMobile, setIsMobile] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		if (!enabled) return;
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = (e) => {
+			setIsMobile(e.matches);
+		};
+		onChange(mql);
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, [enabled]);
+	return isMobile;
+}
+const WhatsappDashboardContext = (0, react.createContext)(null);
+function useWhatsappDashboard() {
+	const ctx = (0, react.useContext)(WhatsappDashboardContext);
+	if (!ctx) throw new Error("useWhatsappDashboard must be used within <WhatsappDashboard>");
+	return ctx;
+}
+/** Returns the dashboard context, or null when rendered outside <WhatsappDashboard>. */
+function useOptionalWhatsappDashboard() {
+	return (0, react.useContext)(WhatsappDashboardContext);
+}
+function WhatsappDashboard({ children, className, defaultMobileView = "list", mobileView: mobileViewProp, onMobileViewChange, isMobile: isMobileProp, ...props }) {
+	const detectedIsMobile = useIsMobile(isMobileProp === void 0);
+	const isMobile = isMobileProp ?? detectedIsMobile;
+	const [uncontrolledView, setUncontrolledView] = (0, react.useState)(defaultMobileView);
+	const isViewControlled = mobileViewProp !== void 0;
+	const mobileView = isViewControlled ? mobileViewProp : uncontrolledView;
+	const setMobileView = (0, react.useCallback)((view) => {
+		if (!isViewControlled) setUncontrolledView(view);
+		onMobileViewChange?.(view);
+	}, [isViewControlled, onMobileViewChange]);
+	const value = (0, react.useMemo)(() => ({
+		isMobile,
+		mobileView,
+		setMobileView
+	}), [
+		isMobile,
+		mobileView,
+		setMobileView
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhatsappDashboardContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: require_utils.cn("flex h-full w-full overflow-hidden bg-[#f0f2f5]", className),
+			...props,
+			children
+		})
+	});
+}
+//#endregion
+exports.WhatsappDashboard = WhatsappDashboard;
+exports.useOptionalWhatsappDashboard = useOptionalWhatsappDashboard;
+exports.useWhatsappDashboard = useWhatsappDashboard;

package/dist/whatsapp-dashboard.d.cts

@@ -0,0 +1,33 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/whatsapp-dashboard.d.ts
+type MobileView = "list" | "chat";
+interface WhatsappDashboardContextValue {
+  isMobile: boolean;
+  mobileView: MobileView;
+  setMobileView: (view: MobileView) => void;
+}
+declare function useWhatsappDashboard(): WhatsappDashboardContextValue;
+/** Returns the dashboard context, or null when rendered outside <WhatsappDashboard>. */
+declare function useOptionalWhatsappDashboard(): WhatsappDashboardContextValue | null;
+interface WhatsappDashboardProps extends React.ComponentProps<"div"> {
+  children: React.ReactNode;
+  defaultMobileView?: MobileView;
+  /** Controlled mobile navigation view. When set, local state is not updated. */
+  mobileView?: MobileView;
+  onMobileViewChange?: (view: MobileView) => void;
+  /** Override media-query detection (e.g. app-owned responsive state). */
+  isMobile?: boolean;
+}
+declare function WhatsappDashboard({
+  children,
+  className,
+  defaultMobileView,
+  mobileView: mobileViewProp,
+  onMobileViewChange,
+  isMobile: isMobileProp,
+  ...props
+}: WhatsappDashboardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MobileView, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, useOptionalWhatsappDashboard, useWhatsappDashboard };

package/dist/whatsapp-dashboard.d.mts

@@ -0,0 +1,33 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/whatsapp-dashboard.d.ts
+type MobileView = "list" | "chat";
+interface WhatsappDashboardContextValue {
+  isMobile: boolean;
+  mobileView: MobileView;
+  setMobileView: (view: MobileView) => void;
+}
+declare function useWhatsappDashboard(): WhatsappDashboardContextValue;
+/** Returns the dashboard context, or null when rendered outside <WhatsappDashboard>. */
+declare function useOptionalWhatsappDashboard(): WhatsappDashboardContextValue | null;
+interface WhatsappDashboardProps extends React.ComponentProps<"div"> {
+  children: React.ReactNode;
+  defaultMobileView?: MobileView;
+  /** Controlled mobile navigation view. When set, local state is not updated. */
+  mobileView?: MobileView;
+  onMobileViewChange?: (view: MobileView) => void;
+  /** Override media-query detection (e.g. app-owned responsive state). */
+  isMobile?: boolean;
+}
+declare function WhatsappDashboard({
+  children,
+  className,
+  defaultMobileView,
+  mobileView: mobileViewProp,
+  onMobileViewChange,
+  isMobile: isMobileProp,
+  ...props
+}: WhatsappDashboardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MobileView, WhatsappDashboard, WhatsappDashboardContextValue, WhatsappDashboardProps, useOptionalWhatsappDashboard, useWhatsappDashboard };

package/dist/whatsapp-dashboard.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/whatsapp-dashboard.tsx
+const MOBILE_BREAKPOINT = 1024;
+function useIsMobile(enabled = true) {
+	const [isMobile, setIsMobile] = useState(false);
+	useEffect(() => {
+		if (!enabled) return;
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = (e) => {
+			setIsMobile(e.matches);
+		};
+		onChange(mql);
+		mql.addEventListener("change", onChange);
+		return () => mql.removeEventListener("change", onChange);
+	}, [enabled]);
+	return isMobile;
+}
+const WhatsappDashboardContext = createContext(null);
+function useWhatsappDashboard() {
+	const ctx = useContext(WhatsappDashboardContext);
+	if (!ctx) throw new Error("useWhatsappDashboard must be used within <WhatsappDashboard>");
+	return ctx;
+}
+/** Returns the dashboard context, or null when rendered outside <WhatsappDashboard>. */
+function useOptionalWhatsappDashboard() {
+	return useContext(WhatsappDashboardContext);
+}
+function WhatsappDashboard({ children, className, defaultMobileView = "list", mobileView: mobileViewProp, onMobileViewChange, isMobile: isMobileProp, ...props }) {
+	const detectedIsMobile = useIsMobile(isMobileProp === void 0);
+	const isMobile = isMobileProp ?? detectedIsMobile;
+	const [uncontrolledView, setUncontrolledView] = useState(defaultMobileView);
+	const isViewControlled = mobileViewProp !== void 0;
+	const mobileView = isViewControlled ? mobileViewProp : uncontrolledView;
+	const setMobileView = useCallback((view) => {
+		if (!isViewControlled) setUncontrolledView(view);
+		onMobileViewChange?.(view);
+	}, [isViewControlled, onMobileViewChange]);
+	const value = useMemo(() => ({
+		isMobile,
+		mobileView,
+		setMobileView
+	}), [
+		isMobile,
+		mobileView,
+		setMobileView
+	]);
+	return /* @__PURE__ */ jsx(WhatsappDashboardContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("flex h-full w-full overflow-hidden bg-[#f0f2f5]", className),
+			...props,
+			children
+		})
+	});
+}
+//#endregion
+export { WhatsappDashboard, useOptionalWhatsappDashboard, useWhatsappDashboard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@better-zap/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React components for Better Zap.",
   "license": "ISC",
   "repository": {