@wealthx/shadcn 1.4.0 → 1.5.0

package/dist/components/ui/scenario-drawer.mjs

@@ -0,0 +1,294 @@
+import {
+  MoneyInputWithSlider
+} from "../../chunk-LLAGF6BA.mjs";
+import "../../chunk-ISUA7DSB.mjs";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle
+} from "../../chunk-J5NW5NCT.mjs";
+import {
+  Toggle
+} from "../../chunk-6QAFGZC2.mjs";
+import {
+  Input
+} from "../../chunk-LBTHZSBT.mjs";
+import "../../chunk-WDTXHLYM.mjs";
+import "../../chunk-S4CTM3UE.mjs";
+import "../../chunk-MN5NYQCL.mjs";
+import {
+  Button
+} from "../../chunk-NOOEKOWY.mjs";
+import "../../chunk-R4HCRDU5.mjs";
+import {
+  cn
+} from "../../chunk-AFML43VJ.mjs";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../chunk-WNQUEZJF.mjs";
+
+// src/components/ui/scenario-drawer.tsx
+import { useEffect, useState } from "react";
+import { Pencil, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_VALUES = {
+  name: "New Scenario",
+  objective: "buy-home",
+  applicants: 1,
+  dependants: 0,
+  mainApplicantMonthlyIncome: 0,
+  mainApplicantMonthlyRentalIncome: 0,
+  coApplicantMonthlyIncome: 0,
+  coApplicantMonthlyRentalIncome: 0,
+  monthlyExpense: 0,
+  monthlyDebtRepayment: 0,
+  estimatedRentalIncome: 0,
+  desiredLoanAmount: 75e4
+};
+var OBJECTIVE_OPTIONS = [
+  { value: "buy-home", label: "Buy a Home or Move" },
+  { value: "buy-investment", label: "Buy an Investment" },
+  { value: "refinance", label: "Refinance My Loan" }
+];
+var APPLICANT_OPTIONS = [
+  { value: 1, label: "Just Me" },
+  { value: 2, label: "Me + One" }
+];
+var DEPENDANT_OPTIONS = [
+  { value: 0, label: "None" },
+  { value: 1, label: "1" },
+  { value: 2, label: "2" },
+  { value: 3, label: "3" }
+];
+function OptionGroup({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex", children: options.map((opt, idx) => /* @__PURE__ */ jsx(
+      Toggle,
+      {
+        variant: "outline",
+        pressed: opt.value === value,
+        onPressedChange: (on) => {
+          if (on) onChange(opt.value);
+        },
+        className: cn(
+          "flex-1 px-3 py-2 text-sm",
+          // Connect buttons: collapse shared borders
+          idx > 0 && "border-l-0"
+        ),
+        children: opt.label
+      },
+      String(opt.value)
+    )) })
+  ] });
+}
+function ScenarioDrawer({
+  open,
+  onOpenChange,
+  defaultValues,
+  isEditMode = false,
+  onSave,
+  onCancel,
+  className
+}) {
+  const [values, setValues] = useState(__spreadValues(__spreadValues({}, DEFAULT_VALUES), defaultValues));
+  const [editingName, setEditingName] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setValues(__spreadValues(__spreadValues({}, DEFAULT_VALUES), defaultValues));
+    }
+  }, [open]);
+  const set = (key, value) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [key]: value }));
+  const handleCancel = () => {
+    onCancel == null ? void 0 : onCancel();
+    onOpenChange(false);
+  };
+  const handleSave = () => {
+    onSave(values);
+    onOpenChange(false);
+  };
+  const isTwoApplicants = values.applicants === 2;
+  const isInvestment = values.objective === "buy-investment";
+  const expenseLabel = isTwoApplicants ? "Combined" : "Estimated";
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: "bottom",
+      showCloseButton: false,
+      className: cn("flex max-h-[90dvh] flex-col gap-0 p-0", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: isEditMode ? "Edit Scenario" : "Create Scenario" }),
+          editingName ? /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoFocus: true,
+              value: values.name,
+              onChange: (e) => set("name", e.target.value),
+              onBlur: () => setEditingName(false),
+              onKeyDown: (e) => e.key === "Enter" && setEditingName(false),
+              className: "h-8 text-base font-semibold"
+            }
+          ) : /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setEditingName(true),
+              className: "flex items-center gap-2 text-base font-semibold text-foreground hover:opacity-70",
+              children: [
+                values.name,
+                /* @__PURE__ */ jsx(Pencil, { size: 14, className: "shrink-0 text-muted-foreground" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCancel,
+              "aria-label": "Close",
+              className: "ml-3 shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground",
+              children: /* @__PURE__ */ jsx(X, { size: 18 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+          /* @__PURE__ */ jsx(
+            OptionGroup,
+            {
+              label: "Objective",
+              options: OBJECTIVE_OPTIONS,
+              value: values.objective,
+              onChange: (v) => set("objective", v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            OptionGroup,
+            {
+              label: "Applicants",
+              options: APPLICANT_OPTIONS,
+              value: values.applicants,
+              onChange: (v) => set("applicants", v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            OptionGroup,
+            {
+              label: "Dependants",
+              options: DEPENDANT_OPTIONS,
+              value: values.dependants,
+              onChange: (v) => set("dependants", v)
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(
+              MoneyInputWithSlider,
+              {
+                label: "Main Applicant Monthly Income",
+                value: values.mainApplicantMonthlyIncome,
+                min: 0,
+                max: 3e4,
+                step: 100,
+                onChange: (v) => set("mainApplicantMonthlyIncome", v)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MoneyInputWithSlider,
+              {
+                label: "Main Applicant Rental Income",
+                value: values.mainApplicantMonthlyRentalIncome,
+                min: 0,
+                max: 3e4,
+                step: 100,
+                onChange: (v) => set("mainApplicantMonthlyRentalIncome", v)
+              }
+            ),
+            isTwoApplicants && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                MoneyInputWithSlider,
+                {
+                  label: "Co-Applicant Monthly Income",
+                  value: values.coApplicantMonthlyIncome,
+                  min: 0,
+                  max: 3e4,
+                  step: 100,
+                  onChange: (v) => set("coApplicantMonthlyIncome", v)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MoneyInputWithSlider,
+                {
+                  label: "Co-Applicant Rental Income",
+                  value: values.coApplicantMonthlyRentalIncome,
+                  min: 0,
+                  max: 3e4,
+                  step: 100,
+                  onChange: (v) => set("coApplicantMonthlyRentalIncome", v)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-2", children: [
+            /* @__PURE__ */ jsx(
+              MoneyInputWithSlider,
+              {
+                label: `${expenseLabel} Essential Expenses PM`,
+                value: values.monthlyExpense,
+                min: 0,
+                max: 15e3,
+                step: 100,
+                onChange: (v) => set("monthlyExpense", v)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MoneyInputWithSlider,
+              {
+                label: `${expenseLabel} Debt Repayment PM`,
+                value: values.monthlyDebtRepayment,
+                min: 0,
+                max: 15e3,
+                step: 100,
+                onChange: (v) => set("monthlyDebtRepayment", v)
+              }
+            ),
+            isInvestment && /* @__PURE__ */ jsx(
+              MoneyInputWithSlider,
+              {
+                label: "Estimated Rental Income PM",
+                value: values.estimatedRentalIncome,
+                min: 0,
+                max: 3e4,
+                step: 100,
+                onChange: (v) => set("estimatedRentalIncome", v)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-4", children: /* @__PURE__ */ jsx(
+            MoneyInputWithSlider,
+            {
+              label: "Desired Loan Amount",
+              value: values.desiredLoanAmount,
+              min: 5e4,
+              max: 2e6,
+              step: 5e3,
+              onChange: (v) => set("desiredLoanAmount", v)
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3 border-t border-border px-4 py-3", children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", className: "flex-1", onClick: handleCancel, children: "Cancel" }),
+          /* @__PURE__ */ jsx(Button, { className: "flex-1", onClick: handleSave, children: isEditMode ? "Update Scenario" : "Create Scenario" })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  ScenarioDrawer
+};

package/dist/components/ui/scenario-item.js

@@ -0,0 +1,256 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ui/scenario-item.tsx
+var scenario_item_exports = {};
+__export(scenario_item_exports, {
+  ScenarioItem: () => ScenarioItem
+});
+module.exports = __toCommonJS(scenario_item_exports);
+var import_lucide_react2 = require("lucide-react");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/dropdown-menu.tsx
+var import_lucide_react = require("lucide-react");
+var import_menu = require("@base-ui/react/menu");
+
+// src/lib/theme-provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeVarsContext = (0, import_react.createContext)({});
+function useThemeVars() {
+  return (0, import_react.useContext)(ThemeVarsContext);
+}
+
+// src/components/ui/dropdown-menu.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DropdownMenu(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_menu.Menu.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
+}
+function DropdownMenuTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_menu.Menu.Trigger, __spreadValues({ "data-slot": "dropdown-menu-trigger" }, props));
+}
+function DropdownMenuContent(_a) {
+  var _b = _a, {
+    className,
+    sideOffset = 4,
+    style
+  } = _b, props = __objRest(_b, [
+    "className",
+    "sideOffset",
+    "style"
+  ]);
+  const themeVars = useThemeVars();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_menu.Menu.Positioner, { sideOffset, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_menu.Menu.Popup,
+    __spreadValues({
+      className: cn(
+        "z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-none border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+        className
+      ),
+      "data-slot": "dropdown-menu-content",
+      style: __spreadValues(__spreadValues({}, themeVars), style)
+    }, props)
+  ) }) });
+}
+function DropdownMenuItem(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "variant"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_menu.Menu.Item,
+    __spreadValues({
+      className: cn(
+        "relative flex cursor-default items-center gap-2 rounded-none px-2 py-1.5 text-body-small outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      ),
+      "data-inset": inset,
+      "data-slot": "dropdown-menu-item",
+      "data-variant": variant
+    }, props)
+  );
+}
+
+// src/components/ui/scenario-item.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ScenarioItem({
+  name,
+  description,
+  isSelected = false,
+  isDraggable = false,
+  isDragOver = false,
+  onSelect,
+  onEdit,
+  onDelete,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onDragEnd,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      draggable: isDraggable,
+      onClick: onSelect,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") onSelect == null ? void 0 : onSelect();
+      },
+      onDragStart,
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      onDragEnd,
+      className: cn(
+        "flex cursor-pointer items-center gap-2 border border-border bg-background px-3 py-3 transition-colors hover:bg-muted/50",
+        isSelected && "border-r-2 border-r-primary bg-primary/5",
+        isDragOver && "bg-primary/10",
+        className
+      ),
+      children: [
+        isDraggable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "shrink-0 cursor-grab text-muted-foreground active:cursor-grabbing",
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.GripVertical, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "truncate text-base font-semibold text-foreground", children: name }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-0.5 truncate text-sm text-muted-foreground", children: description })
+        ] }),
+        (onEdit || onDelete) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DropdownMenu, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Scenario options",
+              onClick: (e) => e.stopPropagation(),
+              className: "shrink-0 p-1 text-muted-foreground transition-colors hover:text-foreground",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.MoreVertical, { size: 16 })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(DropdownMenuContent, { align: "end", children: [
+            onEdit && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onEdit();
+                },
+                children: "Update Scenario"
+              }
+            ),
+            onDelete && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDelete();
+                },
+                className: "text-destructive focus:text-destructive",
+                children: "Delete Scenario"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScenarioItem
+});

package/dist/components/ui/scenario-item.mjs

@@ -0,0 +1,11 @@
+import {
+  ScenarioItem
+} from "../../chunk-JUBUN65Q.mjs";
+import "../../chunk-HNDTLT5X.mjs";
+import "../../chunk-WDTXHLYM.mjs";
+import "../../chunk-S4CTM3UE.mjs";
+import "../../chunk-AFML43VJ.mjs";
+import "../../chunk-WNQUEZJF.mjs";
+export {
+  ScenarioItem
+};