@retinalabsllc/zairusjs 16.3.1 → 16.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +20 -58
  2. package/dist/index.mjs +20 -58
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -107,7 +107,6 @@ var Faq = ({
107
107
  }
108
108
  },
109
109
  { threshold: 0.1 }
110
- // Triggers when 10% of the title is visible
111
110
  );
112
111
  if (titleRef.current) {
113
112
  observer.observe(titleRef.current);
@@ -121,39 +120,21 @@ var Faq = ({
121
120
  "h2",
122
121
  {
123
122
  ref: titleRef,
124
- className: `text-3xl text-black tracking-tight leading-[1.15] ${isAnimating ? "" : ""}`,
125
- style: isAnimating ? { animationIterationCount: 1 } : {}
123
+ className: "text-3xl text-black tracking-tight leading-[1.15]"
126
124
  },
127
125
  "FAQ"
128
126
  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-3 w-full" }, items.map((faq, index) => {
129
127
  const isOpen = activeFaq === index;
130
- const getShadowStyle = () => {
131
- if (isOpen) return `
132
- inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
133
- inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
134
- 0 4px 0 0 #0c0c0c,
135
- 0 12px 24px rgba(0, 0, 0, 0.1)
136
- `;
137
- return "none";
138
- };
139
128
  return /* @__PURE__ */ import_react.default.createElement(
140
129
  "div",
141
130
  {
142
131
  key: index,
143
- className: `relative transition-all duration-500 rounded-4xl overflow-hidden ${isOpen ? "bg-black border-transparent" : "border border-neutral-200 hover:border-neutral-300"}`,
144
- style: { boxShadow: getShadowStyle() }
132
+ className: `transition-all duration-300 rounded-2xl border ${isOpen ? "bg-[#068afe] border-[#068afe]" : "bg-white border-neutral-200 hover:border-neutral-300"}`
145
133
  },
146
- isOpen && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
147
- "div",
148
- {
149
- className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
150
- style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
151
- }
152
- ), /* @__PURE__ */ import_react.default.createElement("span", { className: "absolute inset-0 rounded-4xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" })),
153
134
  /* @__PURE__ */ import_react.default.createElement(
154
135
  "button",
155
136
  {
156
- className: "relative z-20 flex items-center justify-between w-full gap-4 text-left px-6 py-5 outline-none cursor-pointer group",
137
+ className: "flex items-center justify-between w-full gap-4 text-left px-6 py-5 outline-none cursor-pointer group",
157
138
  onClick: () => toggleFaq(index)
158
139
  },
159
140
  /* @__PURE__ */ import_react.default.createElement(
@@ -161,17 +142,17 @@ var Faq = ({
161
142
  {
162
143
  className: `text-[15px] transition-colors duration-300 flex items-center gap-2 ${isOpen ? "text-white" : "text-black"}`
163
144
  },
164
- /* @__PURE__ */ import_react.default.createElement("span", { className: isOpen ? "text-neutral-400" : "text-neutral-400" }, index + 1, "."),
145
+ /* @__PURE__ */ import_react.default.createElement("span", { className: isOpen ? "text-white/70" : "text-neutral-400" }, index + 1, "."),
165
146
  faq.question
166
147
  ),
167
- /* @__PURE__ */ import_react.default.createElement("div", { className: `shrink-0 transition-colors duration-300 ${isOpen ? "text-white" : "text-black group-hover:text-black/70"}` }, isOpen ? /* @__PURE__ */ import_react.default.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M8 12h8", strokeLinecap: "round" })) : /* @__PURE__ */ import_react.default.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ import_react.default.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M12 8v8M8 12h8", strokeLinecap: "round" })))
148
+ /* @__PURE__ */ import_react.default.createElement("div", { className: `shrink-0 transition-colors duration-300 ${isOpen ? "text-white" : "text-neutral-400"}` }, isOpen ? /* @__PURE__ */ import_react.default.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M18 12H6", strokeLinecap: "round" })) : /* @__PURE__ */ import_react.default.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M12 6v12M6 12h12", strokeLinecap: "round" })))
168
149
  ),
169
150
  /* @__PURE__ */ import_react.default.createElement(
170
151
  "div",
171
152
  {
172
- className: `relative z-20 grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
153
+ className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
173
154
  },
174
- /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("p", { className: `text-[14px] leading-relaxed px-6 pb-6 pt-0 pr-12 transition-colors duration-300 ${isOpen ? "text-neutral-300" : "text-transparent"}` }, faq.answer))
155
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ import_react.default.createElement("p", { className: `text-[14px] leading-relaxed px-6 pb-6 pt-0 pr-12 transition-colors duration-300 ${isOpen ? "text-white" : "text-transparent"}` }, faq.answer))
175
156
  )
176
157
  );
177
158
  }))));
@@ -2926,49 +2907,30 @@ var AppBento2 = ({ tagline, headline, features }) => {
2926
2907
  "h2",
2927
2908
  {
2928
2909
  ref: titleRef,
2929
- className: ` text-3xl tracking-tight text-black leading-[1.1] ${isAnimating ? "" : ""}`,
2930
- style: isAnimating ? { animationIterationCount: 1 } : {}
2910
+ className: "text-3xl tracking-tight text-black leading-[1.1]"
2931
2911
  },
2932
2912
  headline
2933
2913
  ))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
2934
2914
  const isWhite = i === 0;
2935
- const isBlack = i === 1;
2915
+ const isBrand = i === 1;
2936
2916
  const isNeutral = i === 2;
2937
2917
  const getBgStyle = () => {
2938
- if (isWhite) return "bg-white";
2939
- if (isBlack) return "bg-black";
2940
- if (isNeutral) return "bg-neutral-200";
2941
- return "bg-neutral-200";
2918
+ if (isWhite) return "bg-white border border-neutral-200";
2919
+ if (isBrand) return "bg-[#068afe] border border-[#068afe]";
2920
+ if (isNeutral) return "bg-neutral-100 border border-transparent";
2921
+ return "bg-white border border-neutral-200";
2942
2922
  };
2943
- const getShadowStyle = () => {
2944
- if (isBlack) return `
2945
- inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
2946
- inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
2947
- 0 4px 0 0 #0c0c0c,
2948
- 0 12px 24px rgba(0, 0, 0, 0.1)
2949
- `;
2950
- return "none";
2951
- };
2952
- const textColor = isBlack ? "text-white" : "text-black";
2953
- const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
2954
- const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
2923
+ const textColor = isBrand ? "text-white" : "text-black";
2924
+ const subTextColor = isBrand ? "text-white/80" : "text-neutral-600";
2925
+ const labelColor = isBrand ? "text-white/70" : "text-neutral-500";
2955
2926
  return /* @__PURE__ */ import_react46.default.createElement(
2956
2927
  "div",
2957
2928
  {
2958
2929
  key: i,
2959
- className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`,
2960
- style: { boxShadow: getShadowStyle() }
2930
+ className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-300 group text-left ${getBgStyle()} ${f.size}`
2961
2931
  },
2962
- /* @__PURE__ */ import_react46.default.createElement(
2963
- "div",
2964
- {
2965
- className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
2966
- style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
2967
- }
2968
- ),
2969
- isBlack && /* @__PURE__ */ import_react46.default.createElement("span", { className: "absolute inset-0 rounded-2xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" }),
2970
- /* @__PURE__ */ import_react46.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBlack ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 180 }))),
2971
- /* @__PURE__ */ import_react46.default.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ import_react46.default.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ import_react46.default.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
2932
+ /* @__PURE__ */ import_react46.default.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBrand ? "text-white/10" : "text-black/5"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 180 }))),
2933
+ /* @__PURE__ */ import_react46.default.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ import_react46.default.createElement("div", { className: `p-2 rounded-full transition-colors ${isBrand ? "bg-white/20" : "bg-neutral-100"}` }, /* @__PURE__ */ import_react46.default.createElement(import_react47.HugeiconsIcon, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ import_react46.default.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ import_react46.default.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ import_react46.default.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
2972
2934
  );
2973
2935
  })))));
2974
2936
  };
@@ -5641,7 +5603,7 @@ var UniversalSettings = ({
5641
5603
  }, disabled: isInviting, className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide" }, "Cancel"))) : isMembersLoading || isTyping ? /* @__PURE__ */ import_react90.default.createElement(PageSpinner8, null) : /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react90.default.createElement("div", null, members.length === 0 ? /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ import_react90.default.createElement("div", { key: member.id, onClick: () => setExpandedId(member.id), className: "flex items-center justify-between py-3 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react90.default.createElement(MemberAvatar3, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ import_react90.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))))), /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react90.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react90.default.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage - 1), disabled: membersCurrentPage <= 1 || isMembersLoading, className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.ArrowLeft01Icon, size: 14 })), /* @__PURE__ */ import_react90.default.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage + 1), disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0, className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.ArrowRight01Icon, size: 14 })))))))), /* @__PURE__ */ import_react90.default.createElement(ReusableOptions, { isOpen: isStatusModalOpen, onClose: () => setIsStatusModalOpen(false), title: "Status Filter", options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"], selectedOption: activeStatusFilter, onSelect: (status) => onStatusFilterChange(status) }), /* @__PURE__ */ import_react90.default.createElement(ReusableOptions, { isOpen: isRoleModalOpen, onClose: () => setIsRoleModalOpen(false), title: "Role Filter", options: ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"], selectedOption: activeRoleFilter, onSelect: (role) => onRoleFilterChange(role) }), /* @__PURE__ */ import_react90.default.createElement(ReusableOptions, { isOpen: !!roleEditTarget, onClose: () => setRoleEditTarget(null), title: "Modify Access Role", options: ["ADMIN", "MANAGER", "MEMBER"], selectedOption: roleEditTarget?.role || "", onSelect: handleRoleUpdate })), activeTab === "ORGANIZATION" && isOrg && /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react90.default.createElement("div", null, /* @__PURE__ */ import_react90.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Workspace Details"), /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your organizational identity and handles.")), !canManage && /* @__PURE__ */ import_react90.default.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.CircleLock02Icon, size: 18, className: "text-current" }))), /* @__PURE__ */ import_react90.default.createElement("form", { className: "flex flex-col gap-8 w-full max-w-5xl", onSubmit: handleSaveOrganization, autoComplete: "off" }, /* @__PURE__ */ import_react90.default.createElement(TextInput, { label: "Workspace Name", value: orgName, onChange: handleOrgNameChange, disabled: !canManage || isSavingOrg, placeholder: "Acme Corporation", maxLength: 50 }), /* @__PURE__ */ import_react90.default.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ import_react90.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center relative w-full border-b border-neutral-200 focus-within:border-black transition-all duration-300 overflow-hidden" }, /* @__PURE__ */ import_react90.default.createElement("input", { type: "text", value: orgSlug, disabled: !canManage || isSavingOrg, onChange: (e) => handleOrgSlugChange(e.target.value), spellCheck: "false", autoComplete: "off", className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed", placeholder: "workspace-handle" }), /* @__PURE__ */ import_react90.default.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ import_react90.default.createElement(InputSpinner3, null), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === false && /* @__PURE__ */ import_react90.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ import_react90.default.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react90.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === true && /* @__PURE__ */ import_react90.default.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ import_react90.default.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react90.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ import_react90.default.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ import_react90.default.createElement(ThreeDActionButton, { type: "submit", disabled: isOrgSaveDisabled, isLoading: isSavingOrg, className: "min-w-32" }, "Save Changes"), hasOrgChanges && !isSavingOrg && canManage && /* @__PURE__ */ import_react90.default.createElement("button", { type: "button", onClick: () => {
5642
5604
  setOrgName(initialOrgName || "");
5643
5605
  setOrgSlug(initialOrgSlug || "");
5644
- }, className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react90.default.createElement("div", null, /* @__PURE__ */ import_react90.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-xs text-neutral-500" }, "Update your system display name and contact email."))), /* @__PURE__ */ import_react90.default.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ import_react90.default.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ import_react90.default.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ import_react90.default.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ import_react90.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react90.default.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-neutral-400 border-b border-neutral-200 outline-none cursor-not-allowed" })), /* @__PURE__ */ import_react90.default.createElement("div", { className: "pt-4 flex items-center gap-4" }, /* @__PURE__ */ import_react90.default.createElement(ThreeDActionButton, { type: "submit", disabled: isProfileSaveDisabled, isLoading: isSavingProfile, className: "min-w-32" }, "Update Identity")))), /* @__PURE__ */ import_react90.default.createElement("div", { className: "bg-white rounded-2xl p-6 w-full flex flex-col sm:flex-row sm:items-center justify-between gap-6 border border-neutral-100" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col items-start max-w-sm" }, /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 uppercase" }, "AI Credits Balance"), isBillingLoading ? /* @__PURE__ */ import_react90.default.createElement("div", { className: "h-8 w-32 bg-neutral-100 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.Coins01Icon, size: 28, className: "text-[#068afe]" }), /* @__PURE__ */ import_react90.default.createElement("span", { className: "text-3xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-4 leading-relaxed" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights.")), /* @__PURE__ */ import_react90.default.createElement("button", { onClick: onTopUp, className: "w-12 h-12 rounded-full border border-neutral-200 flex items-center justify-center text-black hover:bg-neutral-50 transition-colors outline-none shrink-0", "aria-label": "Top Up Credits" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.PlusSignIcon, size: 20 })))));
5606
+ }, className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react90.default.createElement("div", null, /* @__PURE__ */ import_react90.default.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-xs text-neutral-500" }, "Update your system display name and contact email."))), /* @__PURE__ */ import_react90.default.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ import_react90.default.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ import_react90.default.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ import_react90.default.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ import_react90.default.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ import_react90.default.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-neutral-400 border-b border-neutral-200 outline-none cursor-not-allowed" })), /* @__PURE__ */ import_react90.default.createElement("div", { className: "pt-4 flex items-center gap-4" }, /* @__PURE__ */ import_react90.default.createElement(ThreeDActionButton, { type: "submit", disabled: isProfileSaveDisabled, isLoading: isSavingProfile, className: "min-w-32" }, "Update Identity")))), /* @__PURE__ */ import_react90.default.createElement("div", { className: "bg-white rounded-2xl p-6 w-full flex flex-col sm:flex-row sm:items-center justify-between gap-6 border border-neutral-100" }, /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex flex-col items-start max-w-sm" }, /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 uppercase" }, "AI Credits Balance"), isBillingLoading ? /* @__PURE__ */ import_react90.default.createElement("div", { className: "h-8 w-32 bg-neutral-100 animate-pulse rounded mt-1" }) : /* @__PURE__ */ import_react90.default.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.Coins01Icon, size: 28, className: "text-[#000000]" }), /* @__PURE__ */ import_react90.default.createElement("span", { className: "text-3xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ import_react90.default.createElement("p", { className: "text-[11px] text-neutral-500 mt-4 leading-relaxed" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights.")), /* @__PURE__ */ import_react90.default.createElement("button", { onClick: onTopUp, className: "w-12 h-12 rounded-full border border-neutral-200 flex items-center justify-center text-black hover:bg-neutral-50 transition-colors outline-none shrink-0", "aria-label": "Top Up Credits" }, /* @__PURE__ */ import_react90.default.createElement(import_react91.HugeiconsIcon, { icon: import_core_free_icons34.PlusSignIcon, size: 20 })))));
5645
5607
  };
5646
5608
 
5647
5609
  // src/components/UniversalCreateHuddle.tsx
package/dist/index.mjs CHANGED
@@ -21,7 +21,6 @@ var Faq = ({
21
21
  }
22
22
  },
23
23
  { threshold: 0.1 }
24
- // Triggers when 10% of the title is visible
25
24
  );
26
25
  if (titleRef.current) {
27
26
  observer.observe(titleRef.current);
@@ -35,39 +34,21 @@ var Faq = ({
35
34
  "h2",
36
35
  {
37
36
  ref: titleRef,
38
- className: `text-3xl text-black tracking-tight leading-[1.15] ${isAnimating ? "" : ""}`,
39
- style: isAnimating ? { animationIterationCount: 1 } : {}
37
+ className: "text-3xl text-black tracking-tight leading-[1.15]"
40
38
  },
41
39
  "FAQ"
42
40
  )), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-3 w-full" }, items.map((faq, index) => {
43
41
  const isOpen = activeFaq === index;
44
- const getShadowStyle = () => {
45
- if (isOpen) return `
46
- inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
47
- inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
48
- 0 4px 0 0 #0c0c0c,
49
- 0 12px 24px rgba(0, 0, 0, 0.1)
50
- `;
51
- return "none";
52
- };
53
42
  return /* @__PURE__ */ React.createElement(
54
43
  "div",
55
44
  {
56
45
  key: index,
57
- className: `relative transition-all duration-500 rounded-4xl overflow-hidden ${isOpen ? "bg-black border-transparent" : "border border-neutral-200 hover:border-neutral-300"}`,
58
- style: { boxShadow: getShadowStyle() }
46
+ className: `transition-all duration-300 rounded-2xl border ${isOpen ? "bg-[#068afe] border-[#068afe]" : "bg-white border-neutral-200 hover:border-neutral-300"}`
59
47
  },
60
- isOpen && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
61
- "div",
62
- {
63
- className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
64
- style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
65
- }
66
- ), /* @__PURE__ */ React.createElement("span", { className: "absolute inset-0 rounded-4xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" })),
67
48
  /* @__PURE__ */ React.createElement(
68
49
  "button",
69
50
  {
70
- className: "relative z-20 flex items-center justify-between w-full gap-4 text-left px-6 py-5 outline-none cursor-pointer group",
51
+ className: "flex items-center justify-between w-full gap-4 text-left px-6 py-5 outline-none cursor-pointer group",
71
52
  onClick: () => toggleFaq(index)
72
53
  },
73
54
  /* @__PURE__ */ React.createElement(
@@ -75,17 +56,17 @@ var Faq = ({
75
56
  {
76
57
  className: `text-[15px] transition-colors duration-300 flex items-center gap-2 ${isOpen ? "text-white" : "text-black"}`
77
58
  },
78
- /* @__PURE__ */ React.createElement("span", { className: isOpen ? "text-neutral-400" : "text-neutral-400" }, index + 1, "."),
59
+ /* @__PURE__ */ React.createElement("span", { className: isOpen ? "text-white/70" : "text-neutral-400" }, index + 1, "."),
79
60
  faq.question
80
61
  ),
81
- /* @__PURE__ */ React.createElement("div", { className: `shrink-0 transition-colors duration-300 ${isOpen ? "text-white" : "text-black group-hover:text-black/70"}` }, isOpen ? /* @__PURE__ */ React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "M8 12h8", strokeLinecap: "round" })) : /* @__PURE__ */ React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "M12 8v8M8 12h8", strokeLinecap: "round" })))
62
+ /* @__PURE__ */ React.createElement("div", { className: `shrink-0 transition-colors duration-300 ${isOpen ? "text-white" : "text-neutral-400"}` }, isOpen ? /* @__PURE__ */ React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ React.createElement("path", { d: "M18 12H6", strokeLinecap: "round" })) : /* @__PURE__ */ React.createElement("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ React.createElement("path", { d: "M12 6v12M6 12h12", strokeLinecap: "round" })))
82
63
  ),
83
64
  /* @__PURE__ */ React.createElement(
84
65
  "div",
85
66
  {
86
- className: `relative z-20 grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
67
+ className: `grid transition-all duration-300 ease-in-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`
87
68
  },
88
- /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React.createElement("p", { className: `text-[14px] leading-relaxed px-6 pb-6 pt-0 pr-12 transition-colors duration-300 ${isOpen ? "text-neutral-300" : "text-transparent"}` }, faq.answer))
69
+ /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden" }, /* @__PURE__ */ React.createElement("p", { className: `text-[14px] leading-relaxed px-6 pb-6 pt-0 pr-12 transition-colors duration-300 ${isOpen ? "text-white" : "text-transparent"}` }, faq.answer))
89
70
  )
90
71
  );
91
72
  }))));
@@ -2919,49 +2900,30 @@ var AppBento2 = ({ tagline, headline, features }) => {
2919
2900
  "h2",
2920
2901
  {
2921
2902
  ref: titleRef,
2922
- className: ` text-3xl tracking-tight text-black leading-[1.1] ${isAnimating ? "" : ""}`,
2923
- style: isAnimating ? { animationIterationCount: 1 } : {}
2903
+ className: "text-3xl tracking-tight text-black leading-[1.1]"
2924
2904
  },
2925
2905
  headline
2926
2906
  ))), /* @__PURE__ */ React27.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-6 gap-6" }, features.map((f, i) => {
2927
2907
  const isWhite = i === 0;
2928
- const isBlack = i === 1;
2908
+ const isBrand = i === 1;
2929
2909
  const isNeutral = i === 2;
2930
2910
  const getBgStyle = () => {
2931
- if (isWhite) return "bg-white";
2932
- if (isBlack) return "bg-black";
2933
- if (isNeutral) return "bg-neutral-200";
2934
- return "bg-neutral-200";
2911
+ if (isWhite) return "bg-white border border-neutral-200";
2912
+ if (isBrand) return "bg-[#068afe] border border-[#068afe]";
2913
+ if (isNeutral) return "bg-neutral-100 border border-transparent";
2914
+ return "bg-white border border-neutral-200";
2935
2915
  };
2936
- const getShadowStyle = () => {
2937
- if (isBlack) return `
2938
- inset 0 1.5px 0 0 rgba(255, 255, 255, 0.2),
2939
- inset 0 -3px 0 0 rgba(0, 0, 0, 0.3),
2940
- 0 4px 0 0 #0c0c0c,
2941
- 0 12px 24px rgba(0, 0, 0, 0.1)
2942
- `;
2943
- return "none";
2944
- };
2945
- const textColor = isBlack ? "text-white" : "text-black";
2946
- const subTextColor = isBlack ? "text-neutral-300" : "text-neutral-600";
2947
- const labelColor = isBlack ? "text-neutral-400" : "text-neutral-500";
2916
+ const textColor = isBrand ? "text-white" : "text-black";
2917
+ const subTextColor = isBrand ? "text-white/80" : "text-neutral-600";
2918
+ const labelColor = isBrand ? "text-white/70" : "text-neutral-500";
2948
2919
  return /* @__PURE__ */ React27.createElement(
2949
2920
  "div",
2950
2921
  {
2951
2922
  key: i,
2952
- className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-500 group text-left ${getBgStyle()} ${f.size}`,
2953
- style: { boxShadow: getShadowStyle() }
2923
+ className: `relative rounded-2xl overflow-hidden p-8 flex flex-col min-h-75 transition-all duration-300 group text-left ${getBgStyle()} ${f.size}`
2954
2924
  },
2955
- /* @__PURE__ */ React27.createElement(
2956
- "div",
2957
- {
2958
- className: "absolute inset-0 pointer-events-none opacity-[0.03] z-0",
2959
- style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")` }
2960
- }
2961
- ),
2962
- isBlack && /* @__PURE__ */ React27.createElement("span", { className: "absolute inset-0 rounded-2xl bg-linear-to-b from-white/10 via-white/5 to-transparent pointer-events-none z-10" }),
2963
- /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React27.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBlack ? "text-white/5" : "text-black/5"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 180 }))),
2964
- /* @__PURE__ */ React27.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React27.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ React27.createElement("div", { className: `p-2 rounded-full transition-colors ${isBlack ? "bg-white/10" : "bg-white/50 backdrop-blur-sm"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ React27.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React27.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ React27.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
2925
+ /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none z-0" }, /* @__PURE__ */ React27.createElement("div", { className: `absolute -bottom-8 -right-8 transform group-hover:scale-110 transition-transform duration-700 ease-out ${isBrand ? "text-white/10" : "text-black/5"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 180 }))),
2926
+ /* @__PURE__ */ React27.createElement("div", { className: "relative z-10 w-full h-full flex flex-col pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between mb-8" }, /* @__PURE__ */ React27.createElement("span", { className: `text-[9px] tracking-widest ${labelColor}` }, f.label), /* @__PURE__ */ React27.createElement("div", { className: `p-2 rounded-full transition-colors ${isBrand ? "bg-white/20" : "bg-neutral-100"}` }, /* @__PURE__ */ React27.createElement(HugeiconsIcon20, { icon: f.icon, size: 20, className: textColor }))), /* @__PURE__ */ React27.createElement("div", { className: "mt-auto" }, /* @__PURE__ */ React27.createElement("h3", { className: `text-xl mb-2 tracking-tight ${textColor}` }, f.title), /* @__PURE__ */ React27.createElement("p", { className: `text-[13px] leading-relaxed max-w-sm ${subTextColor}` }, f.desc)))
2965
2927
  );
2966
2928
  })))));
2967
2929
  };
@@ -5697,7 +5659,7 @@ var UniversalSettings = ({
5697
5659
  }, disabled: isInviting, className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-xs tracking-wide" }, "Cancel"))) : isMembersLoading || isTyping ? /* @__PURE__ */ React52.createElement(PageSpinner8, null) : /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col min-w-0 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", null, members.length === 0 ? /* @__PURE__ */ React52.createElement("p", { className: "text-[12px] text-neutral-400 py-6 text-center" }, "No members found") : members.map((member) => /* @__PURE__ */ React52.createElement("div", { key: member.id, onClick: () => setExpandedId(member.id), className: "flex items-center justify-between py-3 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React52.createElement(MemberAvatar3, { src: member.avatarUrl, status: member.status }), /* @__PURE__ */ React52.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-0.5" }, /* @__PURE__ */ React52.createElement("p", { className: "text-[13px] text-black truncate" }, member.fullName), /* @__PURE__ */ React52.createElement("p", { className: "text-[11px] text-neutral-500 capitalize truncate" }, member.role.toLowerCase())))))), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React52.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em]" }, "Page ", membersCurrentPage, " of ", membersTotalPages === 0 ? 1 : membersTotalPages), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React52.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage - 1), disabled: membersCurrentPage <= 1 || isMembersLoading, className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: ArrowLeft01Icon18, size: 14 })), /* @__PURE__ */ React52.createElement("button", { onClick: () => onMembersPageChange(membersCurrentPage + 1), disabled: membersCurrentPage >= membersTotalPages || isMembersLoading || membersTotalPages === 0, className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: ArrowRight01Icon14, size: 14 })))))))), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: isStatusModalOpen, onClose: () => setIsStatusModalOpen(false), title: "Status Filter", options: ["ALL", "ACTIVE", "BUSY", "OFFLINE", "AWAY"], selectedOption: activeStatusFilter, onSelect: (status) => onStatusFilterChange(status) }), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: isRoleModalOpen, onClose: () => setIsRoleModalOpen(false), title: "Role Filter", options: ["ALL", "ADMIN", "MANAGER", "MEMBER", "GUEST"], selectedOption: activeRoleFilter, onSelect: (role) => onRoleFilterChange(role) }), /* @__PURE__ */ React52.createElement(ReusableOptions, { isOpen: !!roleEditTarget, onClose: () => setRoleEditTarget(null), title: "Modify Access Role", options: ["ADMIN", "MANAGER", "MEMBER"], selectedOption: roleEditTarget?.role || "", onSelect: handleRoleUpdate })), activeTab === "ORGANIZATION" && isOrg && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 animate-in rounded-2xl p-6 bg-white fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Workspace Details"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-neutral-500" }, "Manage your organizational identity and handles.")), !canManage && /* @__PURE__ */ React52.createElement("span", { className: "p-2 w-9 h-9 bg-neutral-100 text-neutral-400 rounded-full shrink-0" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: CircleLock02Icon3, size: 18, className: "text-current" }))), /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-8 w-full max-w-5xl", onSubmit: handleSaveOrganization, autoComplete: "off" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "Workspace Name", value: orgName, onChange: handleOrgNameChange, disabled: !canManage || isSavingOrg, placeholder: "Acme Corporation", maxLength: 50 }), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 relative w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Workspace Handle"), /* @__PURE__ */ React52.createElement("div", { className: "flex items-center relative w-full border-b border-neutral-200 focus-within:border-black transition-all duration-300 overflow-hidden" }, /* @__PURE__ */ React52.createElement("input", { type: "text", value: orgSlug, disabled: !canManage || isSavingOrg, onChange: (e) => handleOrgSlugChange(e.target.value), spellCheck: "false", autoComplete: "off", className: "w-full pr-10 pl-0 py-3 text-sm bg-transparent text-black outline-none disabled:opacity-50 disabled:cursor-not-allowed", placeholder: "workspace-handle" }), /* @__PURE__ */ React52.createElement("div", { className: "absolute right-2 top-1/2 -translate-y-1/2" }, isCheckingSlug && /* @__PURE__ */ React52.createElement(InputSpinner3, null), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === false && /* @__PURE__ */ React52.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-red-100" }, /* @__PURE__ */ React52.createElement("svg", { className: "w-2 h-2 text-red-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React52.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }))), !isCheckingSlug && canManage && orgSlug !== initialOrgSlug && orgSlug.length >= 3 && slugAvailable === true && /* @__PURE__ */ React52.createElement("span", { className: "inline-flex items-center justify-center w-4 h-4 rounded-full bg-green-100" }, /* @__PURE__ */ React52.createElement("svg", { className: "w-2 h-2 text-green-600", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React52.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.707 5.293a1 1 0 00-1.414 0L8 12.586 4.707 9.293a1 1 0 10-1.414 1.414l4 4a1 1 0 001.414 0l8-8a1 1 0 000-1.414z" })))))), /* @__PURE__ */ React52.createElement("div", { className: "pt-8 mt-2 flex items-center gap-4" }, /* @__PURE__ */ React52.createElement(ThreeDActionButton, { type: "submit", disabled: isOrgSaveDisabled, isLoading: isSavingOrg, className: "min-w-32" }, "Save Changes"), hasOrgChanges && !isSavingOrg && canManage && /* @__PURE__ */ React52.createElement("button", { type: "button", onClick: () => {
5698
5660
  setOrgName(initialOrgName || "");
5699
5661
  setOrgSlug(initialOrgSlug || "");
5700
- }, className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-neutral-500" }, "Update your system display name and contact email."))), /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ React52.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React52.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-neutral-400 border-b border-neutral-200 outline-none cursor-not-allowed" })), /* @__PURE__ */ React52.createElement("div", { className: "pt-4 flex items-center gap-4" }, /* @__PURE__ */ React52.createElement(ThreeDActionButton, { type: "submit", disabled: isProfileSaveDisabled, isLoading: isSavingProfile, className: "min-w-32" }, "Update Identity")))), /* @__PURE__ */ React52.createElement("div", { className: "bg-white rounded-2xl p-6 w-full flex flex-col sm:flex-row sm:items-center justify-between gap-6 border border-neutral-100" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col items-start max-w-sm" }, /* @__PURE__ */ React52.createElement("p", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 uppercase" }, "AI Credits Balance"), isBillingLoading ? /* @__PURE__ */ React52.createElement("div", { className: "h-8 w-32 bg-neutral-100 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: Coins01Icon, size: 28, className: "text-[#068afe]" }), /* @__PURE__ */ React52.createElement("span", { className: "text-3xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ React52.createElement("p", { className: "text-[11px] text-neutral-500 mt-4 leading-relaxed" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights.")), /* @__PURE__ */ React52.createElement("button", { onClick: onTopUp, className: "w-12 h-12 rounded-full border border-neutral-200 flex items-center justify-center text-black hover:bg-neutral-50 transition-colors outline-none shrink-0", "aria-label": "Top Up Credits" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: PlusSignIcon3, size: 20 })))));
5662
+ }, className: "text-[11px] tracking-widest text-neutral-400 hover:text-black transition-colors outline-none" }, "Cancel")))), activeTab === "ACCOUNT" && /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-6 animate-in fade-in duration-300" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col gap-8 rounded-2xl p-6 bg-white w-full" }, /* @__PURE__ */ React52.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ React52.createElement("div", null, /* @__PURE__ */ React52.createElement("h2", { className: "text-black text-xl mb-1 tracking-tight" }, "Personal Identity"), /* @__PURE__ */ React52.createElement("p", { className: "text-xs text-neutral-500" }, "Update your system display name and contact email."))), /* @__PURE__ */ React52.createElement("form", { className: "flex flex-col gap-6 w-full max-w-5xl", onSubmit: handleSaveProfile, autoComplete: "off" }, /* @__PURE__ */ React52.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-6" }, /* @__PURE__ */ React52.createElement(TextInput, { label: "First Name", value: firstName, onChange: (v) => setFirstName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "First name", maxLength: 50 }), /* @__PURE__ */ React52.createElement(TextInput, { label: "Last Name", value: lastName, onChange: (v) => setLastName(v.replace(/[^a-zA-Z\s-]/g, "").substring(0, 50)), disabled: isSavingProfile, placeholder: "Last name", maxLength: 50 })), /* @__PURE__ */ React52.createElement("div", { className: "space-y-1.5 w-full" }, /* @__PURE__ */ React52.createElement("label", { className: "text-[11px] text-neutral-400 tracking-[0.2em] block" }, "Email Address"), /* @__PURE__ */ React52.createElement("input", { type: "email", value: initialEmail, disabled: true, className: "w-full pb-3 pt-3 text-sm bg-transparent text-neutral-400 border-b border-neutral-200 outline-none cursor-not-allowed" })), /* @__PURE__ */ React52.createElement("div", { className: "pt-4 flex items-center gap-4" }, /* @__PURE__ */ React52.createElement(ThreeDActionButton, { type: "submit", disabled: isProfileSaveDisabled, isLoading: isSavingProfile, className: "min-w-32" }, "Update Identity")))), /* @__PURE__ */ React52.createElement("div", { className: "bg-white rounded-2xl p-6 w-full flex flex-col sm:flex-row sm:items-center justify-between gap-6 border border-neutral-100" }, /* @__PURE__ */ React52.createElement("div", { className: "flex flex-col items-start max-w-sm" }, /* @__PURE__ */ React52.createElement("p", { className: "text-[11px] text-neutral-400 tracking-[0.2em] mb-2 uppercase" }, "AI Credits Balance"), isBillingLoading ? /* @__PURE__ */ React52.createElement("div", { className: "h-8 w-32 bg-neutral-100 animate-pulse rounded mt-1" }) : /* @__PURE__ */ React52.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: Coins01Icon, size: 28, className: "text-[#000000]" }), /* @__PURE__ */ React52.createElement("span", { className: "text-3xl text-black tracking-tight" }, aiCredits)), /* @__PURE__ */ React52.createElement("p", { className: "text-[11px] text-neutral-500 mt-4 leading-relaxed" }, "AI credits are consumed when generating intelligent summaries, transcriptions, and automated huddle insights.")), /* @__PURE__ */ React52.createElement("button", { onClick: onTopUp, className: "w-12 h-12 rounded-full border border-neutral-200 flex items-center justify-center text-black hover:bg-neutral-50 transition-colors outline-none shrink-0", "aria-label": "Top Up Credits" }, /* @__PURE__ */ React52.createElement(HugeiconsIcon39, { icon: PlusSignIcon3, size: 20 })))));
5701
5663
  };
5702
5664
 
5703
5665
  // src/components/UniversalCreateHuddle.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@retinalabsllc/zairusjs",
3
- "version": "16.3.1",
3
+ "version": "16.3.2",
4
4
  "description": "A perceptive, Ai data driven Next.js UI component library.",
5
5
  "author": "Retina Labs Company",
6
6
  "license": "MIT",