@wealthx/shadcn 1.2.1 → 1.3.0

package/dist/chunk-FAKPBKLT.mjs

@@ -0,0 +1,253 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-3GF7OVTP.mjs";
+import {
+  Input
+} from "./chunk-GYMYRIZP.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
+import {
+  cn
+} from "./chunk-VLQZANBF.mjs";
+
+// src/components/ui/color-picker.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var COLOR_PICKER_PRESETS = [
+  // Blues
+  "#1E40AF",
+  "#2563EB",
+  "#3B82F6",
+  "#60A5FA",
+  // Purples
+  "#7C3AED",
+  "#8B5CF6",
+  "#A78BFA",
+  "#C4B5FD",
+  // Greens
+  "#15803D",
+  "#16A34A",
+  "#22C55E",
+  "#4ADE80",
+  // Reds
+  "#B91C1C",
+  "#DC2626",
+  "#EF4444",
+  "#F87171",
+  // Oranges
+  "#C2410C",
+  "#EA580C",
+  "#F97316",
+  "#FB923C",
+  // Teals
+  "#0F766E",
+  "#0D9488",
+  "#14B8A6",
+  "#2DD4BF",
+  // Neutrals
+  "#111827",
+  "#374151",
+  "#6B7280",
+  "#D1D5DB"
+];
+function isValidHex(value) {
+  return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
+}
+function normalizeHex(value) {
+  const stripped = value.replace(/^#/, "");
+  return `#${stripped}`;
+}
+function ColorSwatch({
+  color,
+  selected,
+  size = "md",
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      title: color,
+      "aria-label": `Select color ${color}`,
+      "aria-pressed": selected,
+      onClick: () => onClick == null ? void 0 : onClick(color),
+      className: cn(
+        "relative shrink-0 p-0 transition-all outline-none shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+        size === "md" ? "size-7" : "size-5",
+        selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background",
+        className
+      ),
+      style: { backgroundColor: color }
+    }
+  );
+}
+function ColorPickerContent({
+  value,
+  onChange,
+  presets = COLOR_PICKER_PRESETS
+}) {
+  const [hexInput, setHexInput] = React.useState(value);
+  React.useEffect(() => {
+    setHexInput(value);
+  }, [value]);
+  function handleHexInputChange(e) {
+    const raw = e.target.value;
+    setHexInput(raw);
+    const normalized = normalizeHex(raw);
+    if (isValidHex(normalized)) {
+      onChange(normalized);
+    }
+  }
+  function handleHexBlur() {
+    const normalized = normalizeHex(hexInput);
+    if (isValidHex(normalized)) {
+      setHexInput(normalized);
+      if (normalized !== value) onChange(normalized);
+    } else {
+      setHexInput(value);
+    }
+  }
+  const normalizedInput = normalizeHex(hexInput);
+  const isValid = isValidHex(normalizedInput);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "color-picker-content", className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Presets" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1.5", children: presets.map((color) => /* @__PURE__ */ jsx(
+        ColorSwatch,
+        {
+          color,
+          selected: value.toLowerCase() === color.toLowerCase(),
+          onClick: onChange
+        },
+        color
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: "Custom hex" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "relative size-9 shrink-0 cursor-pointer border border-border",
+            title: "Open color picker",
+            style: {
+              backgroundColor: isValid ? normalizedInput : value
+            },
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "color",
+                "aria-label": "Native color picker",
+                value: isValid ? normalizedInput : value,
+                onChange: (e) => {
+                  setHexInput(e.target.value);
+                  onChange(e.target.value);
+                },
+                className: "absolute inset-0 h-full w-full cursor-pointer opacity-0"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": "Hex color value",
+            placeholder: "#000000",
+            value: hexInput,
+            onChange: handleHexInputChange,
+            onBlur: handleHexBlur,
+            maxLength: 7,
+            className: "h-9 flex-1 font-mono text-sm uppercase"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function ColorPicker({
+  value: controlledValue,
+  defaultValue = "#3B82F6",
+  onChange,
+  presets,
+  disabled,
+  label,
+  className
+}) {
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const color = isControlled ? controlledValue : internalValue;
+  const [open, setOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  function handleChange(newColor) {
+    if (!isControlled) setInternalValue(newColor);
+    onChange == null ? void 0 : onChange(newColor);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "color-picker",
+      className: cn("inline-flex flex-col gap-1.5 font-sans", className),
+      children: [
+        label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }),
+        /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxs(
+            PopoverTrigger,
+            {
+              disabled,
+              className: cn(
+                "flex h-9 min-w-[140px] cursor-pointer items-center gap-2.5 border border-input bg-background px-3 text-sm outline-none transition-colors",
+                "hover:border-ring",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                "disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "size-5 shrink-0 border border-border/50",
+                    style: { backgroundColor: color }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase tracking-wide", children: color })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "w-[220px] p-4",
+              align: "start",
+              "data-shadcn-scope": true,
+              children: /* @__PURE__ */ jsx(
+                ColorPickerContent,
+                {
+                  value: color,
+                  onChange: handleChange,
+                  presets
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  COLOR_PICKER_PRESETS,
+  isValidHex,
+  normalizeHex,
+  ColorSwatch,
+  ColorPickerContent,
+  ColorPicker
+};

package/dist/chunk-FNQXOAYJ.mjs

@@ -0,0 +1,169 @@
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-24FUO7TD.mjs";
+import {
+  Badge
+} from "./chunk-BKNFWEH2.mjs";
+import {
+  Separator
+} from "./chunk-FH6QVUVZ.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
+
+// src/components/ui/advisor-card.tsx
+import {
+  Calendar,
+  CalendarCheck,
+  ChevronRight,
+  Mail,
+  MoreVertical,
+  Phone
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STATUS_VARIANT = {
+  pending: "warning",
+  confirmed: "success",
+  cancelled: "destructive",
+  rescheduled: "info"
+};
+var STATUS_LABEL = {
+  pending: "Pending",
+  confirmed: "Confirmed",
+  cancelled: "Cancelled",
+  rescheduled: "Rescheduled"
+};
+var STRIP_BG = {
+  pending: "bg-warning/5",
+  confirmed: "bg-success/5",
+  cancelled: "bg-destructive/5",
+  rescheduled: "bg-info/5"
+};
+function AdvisorCard({
+  name,
+  role,
+  phone,
+  email,
+  companyLogoUrl,
+  avatarInitials,
+  isPrimary = false,
+  appointment,
+  onRefer,
+  onMoreOptions,
+  onBookAppointment,
+  onViewAppointment
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col border border-border bg-card", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-4", children: [
+      /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10 shrink-0", children: [
+        companyLogoUrl && /* @__PURE__ */ jsx(AvatarImage, { src: companyLogoUrl, alt: `${name} company logo` }),
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-sm", children: avatarInitials != null ? avatarInitials : name.slice(0, 2).toUpperCase() })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold leading-tight", children: name }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: role }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Phone, { className: "h-3 w-3 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: phone })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Mail, { className: "h-3 w-3 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { children: email })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+        isPrimary && /* @__PURE__ */ jsx(Badge, { variant: "success", children: "Primary" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "h-7 w-7",
+            onClick: onMoreOptions,
+            "aria-label": "More options",
+            children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] }),
+    appointment !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      appointment ? (
+        /* Has appointment */
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex items-center gap-3 px-4 py-3 ${STRIP_BG[appointment.status]}`,
+            children: [
+              /* @__PURE__ */ jsx(CalendarCheck, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: STATUS_VARIANT[appointment.status],
+                      className: "text-[10px]",
+                      children: STATUS_LABEL[appointment.status]
+                    }
+                  ),
+                  appointment.appointmentType && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: appointment.appointmentType })
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  appointment.date,
+                  " \xB7 ",
+                  appointment.timeStart,
+                  "\u2013",
+                  appointment.timeEnd
+                ] })
+              ] }),
+              onViewAppointment && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 shrink-0 gap-1 px-2 text-xs",
+                  onClick: onViewAppointment,
+                  children: [
+                    "View",
+                    /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ) : (
+        /* No appointment */
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("p", { className: "flex-1 text-xs text-muted-foreground", children: "No upcoming appointments" })
+        ] })
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-4 py-3", children: [
+      onBookAppointment && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline-primary",
+          size: "sm",
+          onClick: onBookAppointment,
+          children: "Book Appointment"
+        }
+      ),
+      onRefer && /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRefer, children: [
+        "Refer ",
+        name,
+        " to Others"
+      ] })
+    ] })
+  ] });
+}
+
+export {
+  AdvisorCard
+};

package/dist/{chunk-4CX4SBRO.mjs → chunk-GHC7LLUX.mjs}

@@ -1,13 +1,16 @@
 import {
   KanbanColumn
-} from "./chunk-VACKZOMY.mjs";
+} from "./chunk-R3VSPKNP.mjs";
 import {
   ToggleGroup,
   ToggleGroupItem
-} from "./chunk-PMB3A7V3.mjs";
+} from "./chunk-EI5F6FMT.mjs";
 import {
   Input
 } from "./chunk-GYMYRIZP.mjs";
+import {
+  Button
+} from "./chunk-XREGSKX3.mjs";
 import {
   cn
 } from "./chunk-VLQZANBF.mjs";
@@ -36,10 +39,13 @@ function Toolbar({
         }
       ),
       searchValue && /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
           onClick: () => onSearchChange(""),
-          className: "absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          className: "absolute right-2 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground",
           "aria-label": "Clear search",
           children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
         }
@@ -62,8 +68,11 @@ function Toolbar({
       }
     ),
     onRefresh && /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
         onClick: onRefresh,
         className: "ml-auto text-muted-foreground hover:text-foreground",
         "aria-label": "Refresh board",