@streamoid/settings 0.1.3 → 0.1.5

package/dist/index.d.mts

@@ -57,6 +57,15 @@ interface SettingsAuthUser {
         (e.g. "design", "merchandising"). */
     userSpecialization?: string;
 }
+/** Option shape returned by `auth.getSpecializations` — drives the
+    Specialization dropdown in Settings → Account. The host adapter is the
+    source of truth: name comes from the CMS, icon from `iconUrl`. */
+interface SettingsUserSpecialization {
+    id: string;
+    name: string;
+    description?: string;
+    iconUrl?: string;
+}
 interface SettingsAuthAdapter {
     user: SettingsAuthUser | null;
     refreshProfile: () => Promise<void>;
@@ -67,6 +76,9 @@ interface SettingsAuthAdapter {
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;
+    /** Optional. When present, the Specialization dropdown is populated from
+        the host's API; otherwise the package falls back to a built-in list. */
+    getSpecializations?: () => Promise<SettingsUserSpecialization[]>;
 }
 interface SettingsWorkspaceCurrent {
     id: string;

package/dist/index.d.ts

@@ -57,6 +57,15 @@ interface SettingsAuthUser {
         (e.g. "design", "merchandising"). */
     userSpecialization?: string;
 }
+/** Option shape returned by `auth.getSpecializations` — drives the
+    Specialization dropdown in Settings → Account. The host adapter is the
+    source of truth: name comes from the CMS, icon from `iconUrl`. */
+interface SettingsUserSpecialization {
+    id: string;
+    name: string;
+    description?: string;
+    iconUrl?: string;
+}
 interface SettingsAuthAdapter {
     user: SettingsAuthUser | null;
     refreshProfile: () => Promise<void>;
@@ -67,6 +76,9 @@ interface SettingsAuthAdapter {
     }) => Promise<void>;
     clearAuth: () => void;
     logout: () => Promise<void>;
+    /** Optional. When present, the Specialization dropdown is populated from
+        the host's API; otherwise the package falls back to a built-in list. */
+    getSpecializations?: () => Promise<SettingsUserSpecialization[]>;
 }
 interface SettingsWorkspaceCurrent {
     id: string;

package/dist/index.js

@@ -6875,80 +6875,60 @@ function SettingsNav({
   );
 }
 var SPECIALIZATION_ICON_SIZE = 20;
-var SPECIALIZATION_OPTIONS = [
-  {
-    id: "design",
-    label: "Design",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconSwatch,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "merchandising",
-    label: "Merchandising",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconBag,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "planning",
-    label: "Planning",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconInsights,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "marketing_brand",
-    label: "Marketing & brand",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconAdCreator,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "founder_operator",
-    label: "Founder & operator",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_icons7.SiconCrown,
+function SpecializationIcon({ iconUrl }) {
+  if (iconUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "img",
       {
+        src: iconUrl,
+        alt: "",
         style: {
           width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
+          height: SPECIALIZATION_ICON_SIZE,
+          objectFit: "contain"
         }
       }
-    )
+    );
   }
-];
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_icons7.SiconBolt,
+    {
+      style: {
+        width: SPECIALIZATION_ICON_SIZE,
+        height: SPECIALIZATION_ICON_SIZE
+      }
+    }
+  );
+}
 function SpecializationDropdown({
   value,
   onChange,
   disabled
 }) {
+  const { auth } = useSettingsAdapters();
   const [open, setOpen] = (0, import_react10.useState)(false);
   const containerRef = (0, import_react10.useRef)(null);
+  const [options, setOptions] = (0, import_react10.useState)([]);
+  (0, import_react10.useEffect)(() => {
+    if (!auth.getSpecializations) return;
+    let cancelled = false;
+    auth.getSpecializations().then((items) => {
+      if (cancelled) return;
+      if (Array.isArray(items)) {
+        setOptions(
+          items.map((item) => ({
+            id: item.id,
+            label: item.name,
+            iconUrl: item.iconUrl
+          }))
+        );
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth]);
   (0, import_react10.useEffect)(() => {
     if (!open) return;
     function handleMouseDown(e) {
@@ -6966,7 +6946,7 @@ function SpecializationDropdown({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open]);
-  const selected = SPECIALIZATION_OPTIONS.find((o) => o.id === value);
+  const selected = options.find((o) => o.id === value);
   const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
@@ -7025,7 +7005,7 @@ function SpecializationDropdown({
                     height: 24,
                     color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
                   },
-                  children: selected ? selected.icon : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBolt, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: selected?.iconUrl })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -7079,7 +7059,7 @@ function SpecializationDropdown({
               gap: 2,
               boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
             },
-            children: SPECIALIZATION_OPTIONS.map((opt) => {
+            children: options.map((opt) => {
               const isActive = opt.id === value;
               return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "button",
@@ -7120,7 +7100,7 @@ function SpecializationDropdown({
                           width: 24,
                           height: 24
                         },
-                        children: opt.icon
+                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: opt.iconUrl })
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1 }, children: opt.label })

package/dist/index.mjs

@@ -27,12 +27,7 @@ import {
   SiconRight as SiconRight2,
   SiconUserAdd as SiconUserAdd2,
   SiconLock,
-  SiconDown,
-  SiconSwatch,
-  SiconBag,
-  SiconInsights,
-  SiconAdCreator,
-  SiconCrown
+  SiconDown
 } from "@streamoid/icons";
 
 // src/icons/SiconKey.tsx
@@ -6900,80 +6895,60 @@ function SettingsNav({
   );
 }
 var SPECIALIZATION_ICON_SIZE = 20;
-var SPECIALIZATION_OPTIONS = [
-  {
-    id: "design",
-    label: "Design",
-    icon: /* @__PURE__ */ jsx13(
-      SiconSwatch,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "merchandising",
-    label: "Merchandising",
-    icon: /* @__PURE__ */ jsx13(
-      SiconBag,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "planning",
-    label: "Planning",
-    icon: /* @__PURE__ */ jsx13(
-      SiconInsights,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "marketing_brand",
-    label: "Marketing & brand",
-    icon: /* @__PURE__ */ jsx13(
-      SiconAdCreator,
-      {
-        style: {
-          width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
-        }
-      }
-    )
-  },
-  {
-    id: "founder_operator",
-    label: "Founder & operator",
-    icon: /* @__PURE__ */ jsx13(
-      SiconCrown,
+function SpecializationIcon({ iconUrl }) {
+  if (iconUrl) {
+    return /* @__PURE__ */ jsx13(
+      "img",
       {
+        src: iconUrl,
+        alt: "",
         style: {
           width: SPECIALIZATION_ICON_SIZE,
-          height: SPECIALIZATION_ICON_SIZE
+          height: SPECIALIZATION_ICON_SIZE,
+          objectFit: "contain"
         }
       }
-    )
+    );
   }
-];
+  return /* @__PURE__ */ jsx13(
+    SiconBolt,
+    {
+      style: {
+        width: SPECIALIZATION_ICON_SIZE,
+        height: SPECIALIZATION_ICON_SIZE
+      }
+    }
+  );
+}
 function SpecializationDropdown({
   value,
   onChange,
   disabled
 }) {
+  const { auth } = useSettingsAdapters();
   const [open, setOpen] = useState9(false);
   const containerRef = useRef3(null);
+  const [options, setOptions] = useState9([]);
+  useEffect6(() => {
+    if (!auth.getSpecializations) return;
+    let cancelled = false;
+    auth.getSpecializations().then((items) => {
+      if (cancelled) return;
+      if (Array.isArray(items)) {
+        setOptions(
+          items.map((item) => ({
+            id: item.id,
+            label: item.name,
+            iconUrl: item.iconUrl
+          }))
+        );
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [auth]);
   useEffect6(() => {
     if (!open) return;
     function handleMouseDown(e) {
@@ -6991,7 +6966,7 @@ function SpecializationDropdown({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [open]);
-  const selected = SPECIALIZATION_OPTIONS.find((o) => o.id === value);
+  const selected = options.find((o) => o.id === value);
   const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
   return /* @__PURE__ */ jsxs11(
     "div",
@@ -7050,7 +7025,7 @@ function SpecializationDropdown({
                     height: 24,
                     color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
                   },
-                  children: selected ? selected.icon : /* @__PURE__ */ jsx13(SiconBolt, {})
+                  children: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: selected?.iconUrl })
                 }
               ),
               /* @__PURE__ */ jsx13(
@@ -7104,7 +7079,7 @@ function SpecializationDropdown({
               gap: 2,
               boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
             },
-            children: SPECIALIZATION_OPTIONS.map((opt) => {
+            children: options.map((opt) => {
               const isActive = opt.id === value;
               return /* @__PURE__ */ jsxs11(
                 "button",
@@ -7145,7 +7120,7 @@ function SpecializationDropdown({
                           width: 24,
                           height: 24
                         },
-                        children: opt.icon
+                        children: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: opt.iconUrl })
                       }
                     ),
                     /* @__PURE__ */ jsx13("span", { style: { flex: 1 }, children: opt.label })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/settings",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",