@m5kdev/web-ui 0.8.6 → 0.8.8

package/dist/src/modules/billing/components/BillingSinglePlanSelect.js

@@ -0,0 +1,169 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_lib_utils = require("../../../lib/utils.js");
+const require_src_components_ui_card = require("../../../components/ui/card.js");
+const require_src_components_ui_tabs = require("../../../components/ui/tabs.js");
+let react = require("react");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let react_i18next = require("react-i18next");
+let react_router = require("react-router");
+let _m5kdev_frontend_modules_auth_auth_lib = require("@m5kdev/frontend/modules/auth/auth.lib");
+//#region src/modules/billing/components/BillingSinglePlanSelect.tsx
+function BillingSinglePlanSelect({ plan, termsOfServiceUrl, features = [
+	"Unlimited access to all features",
+	"Priority support",
+	"Early access to new features",
+	"Secure data storage",
+	"Cancel anytime"
+] }) {
+	const { t } = (0, react_i18next.useTranslation)("web-ui");
+	const navigate = (0, react_router.useNavigate)();
+	const [billingInterval, setBillingInterval] = (0, react.useState)("annually");
+	const handleLogout = async () => {
+		await _m5kdev_frontend_modules_auth_auth_lib.authClient.signOut();
+		navigate("/login");
+	};
+	const isAnnual = billingInterval === "annually";
+	const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;
+	const hasAnnualOption = !!plan.annualDiscountPriceId;
+	const priceUnitAmount = plan.priceUnitAmount ?? NaN;
+	const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? NaN;
+	const priceDisplay = {
+		monthly: {
+			amount: `$${priceUnitAmount / 100}`,
+			label: "/ month"
+		},
+		annually: {
+			amount: `$${annualPriceUnitAmount / 100 / 12}`,
+			originalAmount: `$${priceUnitAmount / 100}`,
+			label: "/ month, billed annually",
+			discountLabel: plan.annualPriceUnitAmount ? `Save ${Math.floor((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount * 100).toFixed(0)}%` : ""
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "w-full max-w-3xl mx-auto px-4 py-8",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col items-center gap-8",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-center space-y-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: "text-3xl font-bold tracking-tight sm:text-4xl",
+						children: t("billing.plans.title", "Simple, transparent pricing")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "text-muted-foreground text-lg",
+						children: t("billing.plans.subtitle", "Choose the plan that's right for you")
+					})]
+				}),
+				hasAnnualOption && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_tabs.Tabs, {
+					defaultValue: "annually",
+					value: billingInterval,
+					onValueChange: (v) => setBillingInterval(v),
+					className: "w-full max-w-xs",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_tabs.TabsList, {
+						className: "grid w-full grid-cols-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_tabs.TabsTrigger, {
+							value: "monthly",
+							children: "Monthly"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_tabs.TabsTrigger, {
+							value: "annually",
+							className: "relative",
+							children: ["Annually", priceDisplay.annually.discountLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12",
+								children: priceDisplay.annually.discountLabel
+							})]
+						})]
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.Card, {
+					className: require_src_lib_utils.cn("w-full max-w-md border-2 border-primary"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.CardHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardTitle, {
+							className: "flex justify-between items-start",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "text-xl font-bold",
+								children: plan.name
+							})
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardDescription, { children: isAnnual ? "Perfect for long-term commitment" : "Flexible monthly billing" })] }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_card.CardContent, {
+							className: "space-y-6",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "flex items-baseline gap-1",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-4xl font-bold",
+										children: isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "text-muted-foreground",
+										children: isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label
+									})]
+								}),
+								isAnnual && priceDisplay.annually.originalAmount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+									className: "text-sm text-green-500 line-through",
+									children: [
+										" ",
+										priceDisplay.annually.originalAmount,
+										" / month"
+									]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: "space-y-3",
+									children: features.map((feature) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											className: "h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0",
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "h-3 w-3 text-primary" })
+										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "text-sm text-muted-foreground",
+											children: feature
+										})]
+									}, feature))
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_card.CardFooter, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Button, {
+							className: "w-full",
+							color: "primary",
+							size: "lg",
+							as: "a",
+							href: `${{}.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`,
+							children: isAnnual ? "Subscribe Annually" : "Subscribe Monthly"
+						}) })
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							href: termsOfServiceUrl,
+							rel: "noopener noreferrer",
+							target: "_blank",
+							children: t("common.termsOfService", "Terms of Service")
+						}),
+						" ",
+						t("common.and", "and"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router.Link, {
+							to: "/privacy",
+							children: t("common.privacyPolicy", "Privacy Policy")
+						})
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "fixed bottom-4 left-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Button, {
+				variant: "light",
+				onPress: handleLogout,
+				className: "gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LogOut, { className: "h-4 w-4" }), t("sidebar.user.logout", "Log out")]
+			})
+		})]
+	});
+}
+//#endregion
+exports.BillingSinglePlanSelect = BillingSinglePlanSelect;
+
+//# sourceMappingURL=BillingSinglePlanSelect.js.map

package/dist/src/modules/billing/components/BillingSinglePlanSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingSinglePlanSelect.js","names":["authClient","Tabs","TabsList","TabsTrigger","Card","cn","CardHeader","CardTitle","CardDescription","CardContent","Check","CardFooter","Button","Link","LogOut"],"sources":["../../../../../src/modules/billing/components/BillingSinglePlanSelect.tsx"],"sourcesContent":["import { Button } from \"@heroui/react\";\r\nimport type { StripePlan } from \"@m5kdev/commons/modules/billing/billing.types\";\r\nimport { authClient } from \"@m5kdev/frontend/modules/auth/auth.lib\";\r\nimport { Check, LogOut } from \"lucide-react\";\r\nimport { useState } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { Link, useNavigate } from \"react-router\";\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardFooter,\r\n  CardHeader,\r\n  CardTitle,\r\n} from \"../../../components/ui/card\";\r\nimport { Tabs, TabsList, TabsTrigger } from \"../../../components/ui/tabs\";\r\nimport { cn } from \"../../../lib/utils\";\r\n\r\nexport interface BillingSinglePlanSelectProps {\r\n  plan: StripePlan;\r\n  features?: string[];\r\n  /** URL for the Terms of Service link. Override for your app's legal page. */\r\n  termsOfServiceUrl?: string;\r\n}\r\n\r\nexport function BillingSinglePlanSelect({\r\n  plan,\r\n  termsOfServiceUrl,\r\n  features = [\r\n    \"Unlimited access to all features\",\r\n    \"Priority support\",\r\n    \"Early access to new features\",\r\n    \"Secure data storage\",\r\n    \"Cancel anytime\",\r\n  ],\r\n}: BillingSinglePlanSelectProps) {\r\n  const { t } = useTranslation(\"web-ui\");\r\n  const navigate = useNavigate();\r\n  const [billingInterval, setBillingInterval] = useState<\"monthly\" | \"annually\">(\"annually\");\r\n\r\n  const handleLogout = async () => {\r\n    await authClient.signOut();\r\n    navigate(\"/login\");\r\n  };\r\n\r\n  const isAnnual = billingInterval === \"annually\";\r\n  const currentPriceId = isAnnual ? plan.annualDiscountPriceId : plan.priceId;\r\n\r\n  // Fallback if no annual price ID exists\r\n  const hasAnnualOption = !!plan.annualDiscountPriceId;\r\n\r\n  const priceUnitAmount = plan.priceUnitAmount ?? Number.NaN;\r\n  const annualPriceUnitAmount = plan.annualPriceUnitAmount ?? Number.NaN;\r\n\r\n  const priceDisplay = {\r\n    monthly: {\r\n      amount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month\",\r\n    },\r\n    annually: {\r\n      amount: `$${annualPriceUnitAmount / 100 / 12}`,\r\n      originalAmount: `$${priceUnitAmount / 100}`,\r\n      label: \"/ month, billed annually\",\r\n      discountLabel: plan.annualPriceUnitAmount\r\n        ? `Save ${Math.floor(((priceUnitAmount - annualPriceUnitAmount / 12) / priceUnitAmount) * 100).toFixed(0)}%`\r\n        : \"\",\r\n    },\r\n  };\r\n\r\n  return (\r\n    <div className=\"w-full max-w-3xl mx-auto px-4 py-8\">\r\n      <div className=\"flex flex-col items-center gap-8\">\r\n        <div className=\"text-center space-y-2\">\r\n          <h2 className=\"text-3xl font-bold tracking-tight sm:text-4xl\">\r\n            {t(\"billing.plans.title\", \"Simple, transparent pricing\")}\r\n          </h2>\r\n          <p className=\"text-muted-foreground text-lg\">\r\n            {t(\"billing.plans.subtitle\", \"Choose the plan that's right for you\")}\r\n          </p>\r\n        </div>\r\n\r\n        {hasAnnualOption && (\r\n          <Tabs\r\n            defaultValue=\"annually\"\r\n            value={billingInterval}\r\n            onValueChange={(v) => setBillingInterval(v as \"monthly\" | \"annually\")}\r\n            className=\"w-full max-w-xs\"\r\n          >\r\n            <TabsList className=\"grid w-full grid-cols-2\">\r\n              <TabsTrigger value=\"monthly\">Monthly</TabsTrigger>\r\n              <TabsTrigger value=\"annually\" className=\"relative\">\r\n                Annually\r\n                {priceDisplay.annually.discountLabel && (\r\n                  <span className=\"absolute -top-3 -right-3 px-1.5 py-0.5 rounded-full bg-green-500 text-[10px] text-white font-medium transform rotate-12\">\r\n                    {priceDisplay.annually.discountLabel}\r\n                  </span>\r\n                )}\r\n              </TabsTrigger>\r\n            </TabsList>\r\n          </Tabs>\r\n        )}\r\n\r\n        <Card className={cn(\"w-full max-w-md border-2 border-primary\")}>\r\n          <CardHeader>\r\n            <CardTitle className=\"flex justify-between items-start\">\r\n              <span className=\"text-xl font-bold\">{plan.name}</span>\r\n            </CardTitle>\r\n            <CardDescription>\r\n              {isAnnual ? \"Perfect for long-term commitment\" : \"Flexible monthly billing\"}\r\n            </CardDescription>\r\n          </CardHeader>\r\n\r\n          <CardContent className=\"space-y-6\">\r\n            <div className=\"flex items-baseline gap-1\">\r\n              <span className=\"text-4xl font-bold\">\r\n                {isAnnual ? priceDisplay.annually.amount : priceDisplay.monthly.amount}\r\n              </span>\r\n              <span className=\"text-muted-foreground\">\r\n                {isAnnual ? priceDisplay.annually.label : priceDisplay.monthly.label}\r\n              </span>\r\n            </div>\r\n\r\n            {isAnnual && priceDisplay.annually.originalAmount && (\r\n              <p className=\"text-sm text-green-500 line-through\">\r\n                {\" \"}\r\n                {priceDisplay.annually.originalAmount} / month\r\n              </p>\r\n            )}\r\n\r\n            <div className=\"space-y-3\">\r\n              {features.map((feature) => (\r\n                <div key={feature} className=\"flex items-center gap-2\">\r\n                  <div className=\"h-5 w-5 rounded-full bg-primary/10 flex items-center justify-center shrink-0\">\r\n                    <Check className=\"h-3 w-3 text-primary\" />\r\n                  </div>\r\n                  <span className=\"text-sm text-muted-foreground\">{feature}</span>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </CardContent>\r\n\r\n          <CardFooter>\r\n            <Button\r\n              className=\"w-full\"\r\n              color=\"primary\"\r\n              size=\"lg\"\r\n              as=\"a\"\r\n              href={`${import.meta.env.VITE_SERVER_URL}/stripe/checkout/${currentPriceId}`}\r\n            >\r\n              {isAnnual ? \"Subscribe Annually\" : \"Subscribe Monthly\"}\r\n            </Button>\r\n          </CardFooter>\r\n        </Card>\r\n\r\n        <div className=\"text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary\">\r\n          <a href={termsOfServiceUrl} rel=\"noopener noreferrer\" target=\"_blank\">\r\n            {t(\"common.termsOfService\", \"Terms of Service\")}\r\n          </a>{\" \"}\r\n          {t(\"common.and\", \"and\")}{\" \"}\r\n          <Link to=\"/privacy\">{t(\"common.privacyPolicy\", \"Privacy Policy\")}</Link>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"fixed bottom-4 left-4\">\r\n        <Button variant=\"light\" onPress={handleLogout} className=\"gap-2\">\r\n          <LogOut className=\"h-4 w-4\" />\r\n          {t(\"sidebar.user.logout\", \"Log out\")}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAgB,wBAAwB,EACtC,MACA,mBACA,WAAW;CACT;CACA;CACA;CACA;CACA;CACD,IAC8B;CAC/B,MAAM,EAAE,OAAA,GAAA,cAAA,gBAAqB,SAAS;CACtC,MAAM,YAAA,GAAA,aAAA,cAAwB;CAC9B,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAAuD,WAAW;CAE1F,MAAM,eAAe,YAAY;AAC/B,QAAMA,uCAAAA,WAAW,SAAS;AAC1B,WAAS,SAAS;;CAGpB,MAAM,WAAW,oBAAoB;CACrC,MAAM,iBAAiB,WAAW,KAAK,wBAAwB,KAAK;CAGpE,MAAM,kBAAkB,CAAC,CAAC,KAAK;CAE/B,MAAM,kBAAkB,KAAK,mBAAmB;CAChD,MAAM,wBAAwB,KAAK,yBAAyB;CAE5D,MAAM,eAAe;EACnB,SAAS;GACP,QAAQ,IAAI,kBAAkB;GAC9B,OAAO;GACR;EACD,UAAU;GACR,QAAQ,IAAI,wBAAwB,MAAM;GAC1C,gBAAgB,IAAI,kBAAkB;GACtC,OAAO;GACP,eAAe,KAAK,wBAChB,QAAQ,KAAK,OAAQ,kBAAkB,wBAAwB,MAAM,kBAAmB,IAAI,CAAC,QAAQ,EAAE,CAAC,KACxG;GACL;EACF;AAED,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,MAAD;MAAI,WAAU;gBACX,EAAE,uBAAuB,8BAA8B;MACrD,CAAA,EACL,iBAAA,GAAA,kBAAA,KAAC,KAAD;MAAG,WAAU;gBACV,EAAE,0BAA0B,uCAAuC;MAClE,CAAA,CACA;;IAEL,mBACC,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,MAAD;KACE,cAAa;KACb,OAAO;KACP,gBAAgB,MAAM,mBAAmB,EAA4B;KACrE,WAAU;eAEV,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,UAAD;MAAU,WAAU;gBAApB,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,aAAD;OAAa,OAAM;iBAAU;OAAqB,CAAA,EAClD,iBAAA,GAAA,kBAAA,MAACA,+BAAAA,aAAD;OAAa,OAAM;OAAW,WAAU;iBAAxC,CAAmD,YAEhD,aAAa,SAAS,iBACrB,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb,aAAa,SAAS;QAClB,CAAA,CAEG;SACL;;KACN,CAAA;IAGT,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,MAAD;KAAM,WAAWC,sBAAAA,GAAG,0CAA0C;eAA9D;MACE,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,YAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,WAAD;OAAW,WAAU;iBACnB,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBAAqB,KAAK;QAAY,CAAA;OAC5C,CAAA,EACZ,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,iBAAD,EAAA,UACG,WAAW,qCAAqC,4BACjC,CAAA,CACP,EAAA,CAAA;MAEb,iBAAA,GAAA,kBAAA,MAACC,+BAAAA,aAAD;OAAa,WAAU;iBAAvB;QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;SAAK,WAAU;mBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;UAAM,WAAU;oBACb,WAAW,aAAa,SAAS,SAAS,aAAa,QAAQ;UAC3D,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;UAAM,WAAU;oBACb,WAAW,aAAa,SAAS,QAAQ,aAAa,QAAQ;UAC1D,CAAA,CACH;;QAEL,YAAY,aAAa,SAAS,kBACjC,iBAAA,GAAA,kBAAA,MAAC,KAAD;SAAG,WAAU;mBAAb;UACG;UACA,aAAa,SAAS;UAAe;UACpC;;QAGN,iBAAA,GAAA,kBAAA,KAAC,OAAD;SAAK,WAAU;mBACZ,SAAS,KAAK,YACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;UAAmB,WAAU;oBAA7B,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;WAAK,WAAU;qBACb,iBAAA,GAAA,kBAAA,KAACC,aAAAA,OAAD,EAAO,WAAU,wBAAyB,CAAA;WACtC,CAAA,EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;WAAM,WAAU;qBAAiC;WAAe,CAAA,CAC5D;YALI,QAKJ,CACN;SACE,CAAA;QACM;;MAEd,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,QAAD;OACE,WAAU;OACV,OAAM;OACN,MAAK;OACL,IAAG;OACH,MAAM,GAAA,EAAA,CAAe,IAAI,gBAAgB,mBAAmB;iBAE3D,WAAW,uBAAuB;OAC5B,CAAA,EACE,CAAA;MACR;;IAEP,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf;MACE,iBAAA,GAAA,kBAAA,KAAC,KAAD;OAAG,MAAM;OAAmB,KAAI;OAAsB,QAAO;iBAC1D,EAAE,yBAAyB,mBAAmB;OAC7C,CAAA;MAAC;MACJ,EAAE,cAAc,MAAM;MAAE;MACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;OAAM,IAAG;iBAAY,EAAE,wBAAwB,iBAAiB;OAAQ,CAAA;MACpE;;IACF;MAEN,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACb,iBAAA,GAAA,kBAAA,MAACD,cAAAA,QAAD;IAAQ,SAAQ;IAAQ,SAAS;IAAc,WAAU;cAAzD,CACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,QAAD,EAAQ,WAAU,WAAY,CAAA,EAC7B,EAAE,uBAAuB,UAAU,CAC7B;;GACL,CAAA,CACF"}

package/dist/src/modules/table/components/ColumnOrderAndVisibility.d.ts

@@ -0,0 +1,20 @@
+import { ColumnItem } from "./table.types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+
+//#region src/modules/table/components/ColumnOrderAndVisibility.d.ts
+interface ColumnOrderAndVisibilityProps {
+  layout: ColumnItem[];
+  onChangeOrder: (order: ColumnOrderState) => void;
+  onChangeVisibility: (visibility: VisibilityState) => void;
+  onClose: () => void;
+}
+declare const ColumnOrderAndVisibility: ({
+  layout,
+  onChangeOrder,
+  onChangeVisibility,
+  onClose
+}: ColumnOrderAndVisibilityProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ColumnOrderAndVisibility };
+//# sourceMappingURL=ColumnOrderAndVisibility.d.ts.map

package/dist/src/modules/table/components/ColumnOrderAndVisibility.js

@@ -0,0 +1,87 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_components_ui_button = require("../../../components/ui/button.js");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _dnd_kit_core = require("@dnd-kit/core");
+let _dnd_kit_sortable = require("@dnd-kit/sortable");
+let _dnd_kit_utilities = require("@dnd-kit/utilities");
+//#region src/modules/table/components/ColumnOrderAndVisibility.tsx
+const ColumnOrderAndVisibilityItem = ({ column, onChangeVisibilityState }) => {
+	const { attributes, listeners, setNodeRef, transform, transition } = (0, _dnd_kit_sortable.useSortable)({ id: column.id });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: setNodeRef,
+		style: {
+			transform: _dnd_kit_utilities.CSS.Transform.toString(transform),
+			transition
+		},
+		className: "flex justify-between items-center gap-2",
+		children: [column.label, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...attributes,
+				...listeners,
+				className: "cursor-grab active:cursor-grabbing touch-none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.GripVertical, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => onChangeVisibilityState(String(column.id)),
+				children: column.visibility ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.EyeOffIcon, { className: "h-4 w-4" })
+			})]
+		})]
+	});
+};
+const ColumnOrderAndVisibility = ({ layout, onChangeOrder, onChangeVisibility, onClose }) => {
+	const [activeLayout, setActiveLayout] = (0, react.useState)([...layout]);
+	const onChangeVisibilityState = (0, react.useCallback)((columnId) => {
+		setActiveLayout((prev) => {
+			const index = prev.findIndex((c) => c.id === columnId);
+			if (index !== -1) {
+				const newLayout = [...prev];
+				newLayout[index] = {
+					...prev[index],
+					visibility: !prev[index].visibility
+				};
+				return newLayout;
+			}
+			return prev;
+		});
+	}, []);
+	const sensors = (0, _dnd_kit_core.useSensors)((0, _dnd_kit_core.useSensor)(_dnd_kit_core.PointerSensor), (0, _dnd_kit_core.useSensor)(_dnd_kit_core.KeyboardSensor, { coordinateGetter: _dnd_kit_sortable.sortableKeyboardCoordinates }));
+	const onSubmit = (0, react.useCallback)(() => {
+		onChangeOrder(activeLayout.map((column) => column.id));
+		onChangeVisibility(Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility])));
+		onClose();
+	}, [
+		activeLayout,
+		onChangeOrder,
+		onChangeVisibility,
+		onClose
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[200px]",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_core.DndContext, {
+			onDragEnd: ({ active, over }) => {
+				if (over && active.id !== over?.id) setActiveLayout((0, _dnd_kit_sortable.arrayMove)(activeLayout, activeLayout.findIndex(({ id }) => id === active.id), activeLayout.findIndex(({ id }) => id === over.id)));
+			},
+			sensors,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_dnd_kit_sortable.SortableContext, {
+				items: activeLayout.map((column) => column.id),
+				strategy: _dnd_kit_sortable.verticalListSortingStrategy,
+				children: activeLayout.map((column) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnOrderAndVisibilityItem, {
+					column,
+					onChangeVisibilityState
+				}, column.id))
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+			onClick: onSubmit,
+			children: "Apply"
+		})]
+	});
+};
+//#endregion
+exports.ColumnOrderAndVisibility = ColumnOrderAndVisibility;
+
+//# sourceMappingURL=ColumnOrderAndVisibility.js.map

package/dist/src/modules/table/components/ColumnOrderAndVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnOrderAndVisibility.js","names":["CSS","GripVertical","Button","EyeIcon","EyeOffIcon","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","DndContext","SortableContext","verticalListSortingStrategy"],"sources":["../../../../../src/modules/table/components/ColumnOrderAndVisibility.tsx"],"sourcesContent":["import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from \"@dnd-kit/core\";\r\nimport {\r\n  arrayMove,\r\n  SortableContext,\r\n  sortableKeyboardCoordinates,\r\n  useSortable,\r\n  verticalListSortingStrategy,\r\n} from \"@dnd-kit/sortable\";\r\nimport { CSS } from \"@dnd-kit/utilities\";\r\nimport { EyeIcon, EyeOffIcon, GripVertical } from \"lucide-react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport type { ColumnOrderState, VisibilityState } from \"@tanstack/react-table\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport type { ColumnItem } from \"./table.types\";\r\n\r\ninterface ColumnOrderAndVisibilityItemProps {\r\n  column: ColumnItem;\r\n  onChangeVisibilityState: (columnId: string) => void;\r\n}\r\n\r\nconst ColumnOrderAndVisibilityItem = ({\r\n  column,\r\n  onChangeVisibilityState,\r\n}: ColumnOrderAndVisibilityItemProps) => {\r\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\r\n    id: column.id,\r\n  });\r\n  return (\r\n    <div\r\n      ref={setNodeRef}\r\n      style={{ transform: CSS.Transform.toString(transform), transition }}\r\n      className=\"flex justify-between items-center gap-2\"\r\n    >\r\n      {column.label}\r\n      <div className=\"flex items-center gap-2\">\r\n        <div\r\n          {...attributes}\r\n          {...listeners}\r\n          className=\"cursor-grab active:cursor-grabbing touch-none\"\r\n        >\r\n          <GripVertical className=\"h-4 w-4\" />\r\n        </div>\r\n        <Button\r\n          variant=\"ghost\"\r\n          size=\"icon\"\r\n          onClick={() => onChangeVisibilityState(String(column.id))}\r\n        >\r\n          {column.visibility ? <EyeIcon className=\"h-4 w-4\" /> : <EyeOffIcon className=\"h-4 w-4\" />}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\ninterface ColumnOrderAndVisibilityProps {\r\n  layout: ColumnItem[];\r\n  onChangeOrder: (order: ColumnOrderState) => void;\r\n  onChangeVisibility: (visibility: VisibilityState) => void;\r\n  onClose: () => void;\r\n}\r\n\r\nexport const ColumnOrderAndVisibility = ({\r\n  layout,\r\n  onChangeOrder,\r\n  onChangeVisibility,\r\n  onClose,\r\n}: ColumnOrderAndVisibilityProps) => {\r\n  const [activeLayout, setActiveLayout] = useState<ColumnItem[]>([...layout]);\r\n\r\n  const onChangeVisibilityState = useCallback((columnId: string) => {\r\n    setActiveLayout((prev) => {\r\n      const index = prev.findIndex((c) => c.id === columnId);\r\n      if (index !== -1) {\r\n        const newLayout = [...prev];\r\n        newLayout[index] = { ...prev[index], visibility: !prev[index].visibility };\r\n        return newLayout;\r\n      }\r\n      return prev;\r\n    });\r\n  }, []);\r\n\r\n  const sensors = useSensors(\r\n    useSensor(PointerSensor),\r\n    useSensor(KeyboardSensor, {\r\n      coordinateGetter: sortableKeyboardCoordinates,\r\n    })\r\n  );\r\n\r\n  const onSubmit = useCallback(() => {\r\n    onChangeOrder(activeLayout.map((column) => column.id));\r\n    onChangeVisibility(\r\n      Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility]))\r\n    );\r\n    onClose();\r\n  }, [activeLayout, onChangeOrder, onChangeVisibility, onClose]);\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-2 p-1 min-w-[200px]\">\r\n      <DndContext\r\n        onDragEnd={({ active, over }) => {\r\n          if (over && active.id !== over?.id) {\r\n            const activeIndex = activeLayout.findIndex(({ id }) => id === active.id);\r\n            const overIndex = activeLayout.findIndex(({ id }) => id === over.id);\r\n\r\n            setActiveLayout(arrayMove(activeLayout, activeIndex, overIndex));\r\n          }\r\n        }}\r\n        sensors={sensors}\r\n      >\r\n        <SortableContext\r\n          items={activeLayout.map((column) => column.id)}\r\n          strategy={verticalListSortingStrategy}\r\n        >\r\n          {activeLayout.map((column) => (\r\n            <ColumnOrderAndVisibilityItem\r\n              key={column.id}\r\n              column={column}\r\n              onChangeVisibilityState={onChangeVisibilityState}\r\n            />\r\n          ))}\r\n        </SortableContext>\r\n      </DndContext>\r\n      <Button onClick={onSubmit}>Apply</Button>\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,gCAAgC,EACpC,QACA,8BACuC;CACvC,MAAM,EAAE,YAAY,WAAW,YAAY,WAAW,gBAAA,GAAA,kBAAA,aAA2B,EAC/E,IAAI,OAAO,IACZ,CAAC;AACF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,KAAK;EACL,OAAO;GAAE,WAAWA,mBAAAA,IAAI,UAAU,SAAS,UAAU;GAAE;GAAY;EACnE,WAAU;YAHZ,CAKG,OAAO,OACR,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;IACE,GAAI;IACJ,GAAI;IACJ,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,cAAD,EAAc,WAAU,WAAY,CAAA;IAChC,CAAA,EACN,iBAAA,GAAA,kBAAA,KAACC,iCAAAA,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAe,wBAAwB,OAAO,OAAO,GAAG,CAAC;cAExD,OAAO,aAAa,iBAAA,GAAA,kBAAA,KAACC,aAAAA,SAAD,EAAS,WAAU,WAAY,CAAA,GAAG,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD,EAAY,WAAU,WAAY,CAAA;IAClF,CAAA,CACL;KACF;;;AAWV,MAAa,4BAA4B,EACvC,QACA,eACA,oBACA,cACmC;CACnC,MAAM,CAAC,cAAc,oBAAA,GAAA,MAAA,UAA0C,CAAC,GAAG,OAAO,CAAC;CAE3E,MAAM,2BAAA,GAAA,MAAA,cAAuC,aAAqB;AAChE,mBAAiB,SAAS;GACxB,MAAM,QAAQ,KAAK,WAAW,MAAM,EAAE,OAAO,SAAS;AACtD,OAAI,UAAU,IAAI;IAChB,MAAM,YAAY,CAAC,GAAG,KAAK;AAC3B,cAAU,SAAS;KAAE,GAAG,KAAK;KAAQ,YAAY,CAAC,KAAK,OAAO;KAAY;AAC1E,WAAO;;AAET,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,WAAA,GAAA,cAAA,aAAA,GAAA,cAAA,WACMC,cAAAA,cAAc,GAAA,GAAA,cAAA,WACdC,cAAAA,gBAAgB,EACxB,kBAAkBC,kBAAAA,6BACnB,CAAC,CACH;CAED,MAAM,YAAA,GAAA,MAAA,mBAA6B;AACjC,gBAAc,aAAa,KAAK,WAAW,OAAO,GAAG,CAAC;AACtD,qBACE,OAAO,YAAY,aAAa,KAAK,WAAW,CAAC,OAAO,IAAI,OAAO,WAAW,CAAC,CAAC,CACjF;AACD,WAAS;IACR;EAAC;EAAc;EAAe;EAAoB;EAAQ,CAAC;AAE9D,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,YAAD;GACE,YAAY,EAAE,QAAQ,WAAW;AAC/B,QAAI,QAAQ,OAAO,OAAO,MAAM,GAI9B,kBAAA,GAAA,kBAAA,WAA0B,cAHN,aAAa,WAAW,EAAE,SAAS,OAAO,OAAO,GAAG,EACtD,aAAa,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEL,CAAC;;GAG3D;aAET,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,iBAAD;IACE,OAAO,aAAa,KAAK,WAAW,OAAO,GAAG;IAC9C,UAAUC,kBAAAA;cAET,aAAa,KAAK,WACjB,iBAAA,GAAA,kBAAA,KAAC,8BAAD;KAEU;KACiB;KACzB,EAHK,OAAO,GAGZ,CACF;IACc,CAAA;GACP,CAAA,EACb,iBAAA,GAAA,kBAAA,KAACR,iCAAAA,QAAD;GAAQ,SAAS;aAAU;GAAc,CAAA,CACrC"}

package/dist/src/modules/table/components/NuqsTable.d.mts

@@ -19,7 +19,8 @@ type NuqsTableParams<T> = {
   data: T[];
   total?: number;
   columns: NuqsTableColumn<T>[];
-  tableProps: TableParams;
+  tableProps: TableParams; /** When true, shows URL-synced global search; enable only if the list API applies `q` server-side. */
+  showGlobalSearch?: boolean;
   singleFilter?: boolean;
   filterMethods?: Partial<FilterMethods>;
 };
@@ -28,6 +29,7 @@ declare const NuqsTable: <T>({
   total,
   columns,
   tableProps,
+  showGlobalSearch,
   singleFilter,
   filterMethods
 }: NuqsTableParams<T>) => _$react_jsx_runtime0.JSX.Element;

package/dist/src/modules/table/components/NuqsTable.d.ts

@@ -0,0 +1,38 @@
+import { ColumnDataType as ColumnDataType$1 } from "./table.types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnDef } from "@tanstack/react-table";
+import { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+import { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
+
+//#region src/modules/table/components/NuqsTable.d.ts
+type NuqsTableColumn<T> = ColumnDef<T> & {
+  visible?: boolean;
+  type?: ColumnDataType$1;
+  options?: {
+    label: string;
+    value: string;
+  }[];
+  endColumnId?: string;
+  groupable?: boolean;
+};
+type NuqsTableParams<T> = {
+  data: T[];
+  total?: number;
+  columns: NuqsTableColumn<T>[];
+  tableProps: TableParams; /** When true, shows URL-synced global search; enable only if the list API applies `q` server-side. */
+  showGlobalSearch?: boolean;
+  singleFilter?: boolean;
+  filterMethods?: Partial<FilterMethods>;
+};
+declare const NuqsTable: <T>({
+  data,
+  total,
+  columns,
+  tableProps,
+  showGlobalSearch,
+  singleFilter,
+  filterMethods
+}: NuqsTableParams<T>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NuqsTable, NuqsTableColumn };
+//# sourceMappingURL=NuqsTable.d.ts.map