@streamoid/settings 0.1.4 → 0.1.6

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 (5) hide show
  1. package/dist/index.d.mts +3 -1
  2. package/dist/index.d.ts +3 -1
  3. package/dist/index.js +82 -166
  4. package/dist/index.mjs +85 -173
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -58,11 +58,13 @@ interface SettingsAuthUser {
58
58
  userSpecialization?: string;
59
59
  }
60
60
  /** Option shape returned by `auth.getSpecializations` — drives the
61
- Specialization dropdown in Settings → Account. */
61
+ Specialization dropdown in Settings → Account. The host adapter is the
62
+ source of truth: name comes from the CMS, icon from `iconUrl`. */
62
63
  interface SettingsUserSpecialization {
63
64
  id: string;
64
65
  name: string;
65
66
  description?: string;
67
+ iconUrl?: string;
66
68
  }
67
69
  interface SettingsAuthAdapter {
68
70
  user: SettingsAuthUser | null;
package/dist/index.d.ts CHANGED
@@ -58,11 +58,13 @@ interface SettingsAuthUser {
58
58
  userSpecialization?: string;
59
59
  }
60
60
  /** Option shape returned by `auth.getSpecializations` — drives the
61
- Specialization dropdown in Settings → Account. */
61
+ Specialization dropdown in Settings → Account. The host adapter is the
62
+ source of truth: name comes from the CMS, icon from `iconUrl`. */
62
63
  interface SettingsUserSpecialization {
63
64
  id: string;
64
65
  name: string;
65
66
  description?: string;
67
+ iconUrl?: string;
66
68
  }
67
69
  interface SettingsAuthAdapter {
68
70
  user: SettingsAuthUser | null;
package/dist/index.js CHANGED
@@ -6875,51 +6875,46 @@ function SettingsNav({
6875
6875
  );
6876
6876
  }
6877
6877
  var SPECIALIZATION_ICON_SIZE = 20;
6878
- var SPECIALIZATION_ICON_PROPS = {
6879
- style: {
6880
- width: SPECIALIZATION_ICON_SIZE,
6881
- height: SPECIALIZATION_ICON_SIZE
6882
- }
6883
- };
6884
- function iconForSpecialization(id) {
6885
- switch (id) {
6886
- case "design":
6887
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconSwatch, { ...SPECIALIZATION_ICON_PROPS });
6888
- case "merchandising":
6889
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBag, { ...SPECIALIZATION_ICON_PROPS });
6890
- case "planning":
6891
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconInsights, { ...SPECIALIZATION_ICON_PROPS });
6892
- case "marketing_brand":
6893
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconAdCreator, { ...SPECIALIZATION_ICON_PROPS });
6894
- case "founder_operator":
6895
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconCrown, { ...SPECIALIZATION_ICON_PROPS });
6896
- default:
6897
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBolt, { ...SPECIALIZATION_ICON_PROPS });
6878
+ function SpecializationIcon({ iconUrl }) {
6879
+ if (iconUrl) {
6880
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6881
+ "img",
6882
+ {
6883
+ src: iconUrl,
6884
+ alt: "",
6885
+ style: {
6886
+ width: SPECIALIZATION_ICON_SIZE,
6887
+ height: SPECIALIZATION_ICON_SIZE,
6888
+ objectFit: "contain"
6889
+ }
6890
+ }
6891
+ );
6898
6892
  }
6893
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6894
+ import_icons7.SiconBolt,
6895
+ {
6896
+ style: {
6897
+ width: SPECIALIZATION_ICON_SIZE,
6898
+ height: SPECIALIZATION_ICON_SIZE
6899
+ }
6900
+ }
6901
+ );
6899
6902
  }
6900
- var FALLBACK_SPECIALIZATIONS = [
6901
- { id: "design", label: "Design", icon: iconForSpecialization("design") },
6902
- {
6903
- id: "merchandising",
6904
- label: "Merchandising",
6905
- icon: iconForSpecialization("merchandising")
6906
- },
6907
- {
6908
- id: "planning",
6909
- label: "Planning",
6910
- icon: iconForSpecialization("planning")
6911
- },
6912
- {
6913
- id: "marketing_brand",
6914
- label: "Marketing & brand",
6915
- icon: iconForSpecialization("marketing_brand")
6916
- },
6917
- {
6918
- id: "founder_operator",
6919
- label: "Founder & operator",
6920
- icon: iconForSpecialization("founder_operator")
6921
- }
6922
- ];
6903
+ var DROPDOWN_TRIGGER_STYLES = `
6904
+ .spec-dropdown-trigger,
6905
+ .spec-dropdown-trigger * {
6906
+ cursor: pointer;
6907
+ }
6908
+ .spec-dropdown-trigger[data-disabled="true"],
6909
+ .spec-dropdown-trigger[data-disabled="true"] * {
6910
+ cursor: default;
6911
+ }
6912
+ .spec-dropdown-trigger input {
6913
+ caret-color: transparent;
6914
+ user-select: none;
6915
+ pointer-events: none;
6916
+ }
6917
+ `;
6923
6918
  function SpecializationDropdown({
6924
6919
  value,
6925
6920
  onChange,
@@ -6928,20 +6923,18 @@ function SpecializationDropdown({
6928
6923
  const { auth } = useSettingsAdapters();
6929
6924
  const [open, setOpen] = (0, import_react10.useState)(false);
6930
6925
  const containerRef = (0, import_react10.useRef)(null);
6931
- const [options, setOptions] = (0, import_react10.useState)(
6932
- FALLBACK_SPECIALIZATIONS
6933
- );
6926
+ const [options, setOptions] = (0, import_react10.useState)([]);
6934
6927
  (0, import_react10.useEffect)(() => {
6935
6928
  if (!auth.getSpecializations) return;
6936
6929
  let cancelled = false;
6937
6930
  auth.getSpecializations().then((items) => {
6938
6931
  if (cancelled) return;
6939
- if (Array.isArray(items) && items.length > 0) {
6932
+ if (Array.isArray(items)) {
6940
6933
  setOptions(
6941
6934
  items.map((item) => ({
6942
6935
  id: item.id,
6943
6936
  label: item.name,
6944
- icon: iconForSpecialization(item.id)
6937
+ iconUrl: item.iconUrl
6945
6938
  }))
6946
6939
  );
6947
6940
  }
@@ -6969,97 +6962,50 @@ function SpecializationDropdown({
6969
6962
  };
6970
6963
  }, [open]);
6971
6964
  const selected = options.find((o) => o.id === value);
6972
- const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
6973
6965
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
6974
6966
  "div",
6975
6967
  {
6976
6968
  ref: containerRef,
6977
- className: "flex flex-col items-start w-full",
6978
- style: { gap: "var(--spacing-xs)", position: "relative" },
6969
+ className: "w-full",
6970
+ style: { position: "relative" },
6979
6971
  children: [
6972
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
6980
6973
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6981
- "span",
6982
- {
6983
- style: {
6984
- fontFamily: "var(--font-family-font-family-body)",
6985
- fontSize: "var(--font-size-font-size-sm)",
6986
- lineHeight: "var(--line-height-line-height-sm)",
6987
- color: "var(--alias-text---icons-tertiary)"
6988
- },
6989
- children: "Specialization"
6990
- }
6991
- ),
6992
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
6993
- "button",
6974
+ "div",
6994
6975
  {
6995
- type: "button",
6976
+ className: "spec-dropdown-trigger",
6977
+ "data-disabled": disabled ? "true" : "false",
6996
6978
  onClick: () => !disabled && setOpen((v) => !v),
6997
- disabled,
6998
6979
  "aria-haspopup": "listbox",
6999
6980
  "aria-expanded": open,
7000
- style: {
7001
- width: "100%",
7002
- height: 48,
7003
- display: "flex",
7004
- alignItems: "center",
7005
- gap: "var(--spacing-md, 8px)",
7006
- padding: "var(--spacing-xl, 12px) var(--spacing-3xl, 16px)",
7007
- background: "var(--alias-fill-neutral-neutral, #1a1a1a)",
7008
- borderRadius: "var(--radius-3xl, 16px)",
7009
- border: "none",
7010
- cursor: disabled ? "default" : "pointer",
7011
- opacity: disabled ? 0.5 : 1,
7012
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)",
7013
- fontFamily: "var(--font-family-font-family-body)",
7014
- fontSize: "var(--font-size-font-size-sm)",
7015
- lineHeight: "var(--line-height-line-height-sm)",
7016
- textAlign: "left"
7017
- },
7018
- children: [
7019
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7020
- "span",
7021
- {
7022
- style: {
7023
- display: "flex",
7024
- alignItems: "center",
7025
- justifyContent: "center",
7026
- width: 24,
7027
- height: 24,
7028
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
7029
- },
7030
- children: selected ? selected.icon : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconBolt, {})
7031
- }
7032
- ),
7033
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7034
- "span",
7035
- {
7036
- style: {
7037
- flex: 1,
7038
- minWidth: 0,
7039
- overflow: "hidden",
7040
- textOverflow: "ellipsis",
7041
- whiteSpace: "nowrap"
7042
- },
7043
- children: labelText
7044
- }
7045
- ),
7046
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7047
- "span",
7048
- {
7049
- style: {
7050
- display: "flex",
7051
- alignItems: "center",
7052
- justifyContent: "center",
7053
- width: 24,
7054
- height: 24,
7055
- color: "var(--alias-text---icons-primary)",
7056
- transform: open ? "rotate(180deg)" : "none",
7057
- transition: "transform 120ms ease-out"
7058
- },
7059
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconDown, {})
7060
- }
7061
- )
7062
- ]
6981
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6982
+ import_ui8.ScTextField,
6983
+ {
6984
+ label: "Specialization",
6985
+ labelGroup: "label",
6986
+ value: selected?.label ?? "",
6987
+ placeholderFilled: "Select specialization",
6988
+ tfGroup: "icon-left-right",
6989
+ tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: selected?.iconUrl }),
6990
+ tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6991
+ "span",
6992
+ {
6993
+ style: {
6994
+ display: "flex",
6995
+ alignItems: "center",
6996
+ justifyContent: "center",
6997
+ transform: open ? "rotate(180deg)" : "none",
6998
+ transition: "transform 120ms ease-out"
6999
+ },
7000
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconDown, {})
7001
+ }
7002
+ ),
7003
+ className: "sc-text-field-full-width",
7004
+ style: { width: "100%" },
7005
+ readOnly: true,
7006
+ disabled
7007
+ }
7008
+ )
7063
7009
  }
7064
7010
  ),
7065
7011
  open && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -7083,50 +7029,20 @@ function SpecializationDropdown({
7083
7029
  },
7084
7030
  children: options.map((opt) => {
7085
7031
  const isActive = opt.id === value;
7086
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
7087
- "button",
7032
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7033
+ import_ui7.ScMenuOptions,
7088
7034
  {
7089
- type: "button",
7035
+ text: opt.label,
7036
+ icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: opt.iconUrl }),
7037
+ hover: isActive ? "true" : "false",
7038
+ variant: "default",
7090
7039
  role: "option",
7091
7040
  "aria-selected": isActive,
7092
7041
  onClick: () => {
7093
7042
  onChange(opt.id);
7094
7043
  setOpen(false);
7095
7044
  },
7096
- style: {
7097
- display: "flex",
7098
- alignItems: "center",
7099
- gap: "var(--spacing-md, 8px)",
7100
- padding: "var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
7101
- background: isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7102
- border: "none",
7103
- borderRadius: "var(--radius-md, 8px)",
7104
- cursor: "pointer",
7105
- color: "var(--alias-text---icons-primary)",
7106
- fontFamily: "var(--font-family-font-family-body)",
7107
- fontSize: "var(--font-size-font-size-sm)",
7108
- lineHeight: "var(--line-height-line-height-sm)",
7109
- textAlign: "left",
7110
- height: 40
7111
- },
7112
- onMouseEnter: (e) => e.currentTarget.style.background = "var(--alias-fill-neutral-neutralhover, #242424)",
7113
- onMouseLeave: (e) => e.currentTarget.style.background = isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7114
- children: [
7115
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7116
- "span",
7117
- {
7118
- style: {
7119
- display: "flex",
7120
- alignItems: "center",
7121
- justifyContent: "center",
7122
- width: 24,
7123
- height: 24
7124
- },
7125
- children: opt.icon
7126
- }
7127
- ),
7128
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1 }, children: opt.label })
7129
- ]
7045
+ style: { width: "100%", cursor: "pointer" }
7130
7046
  },
7131
7047
  opt.id
7132
7048
  );
package/dist/index.mjs CHANGED
@@ -8,7 +8,8 @@ import {
8
8
  import {
9
9
  ScSidebarMenu,
10
10
  ScVDivider,
11
- ScHDivider
11
+ ScHDivider,
12
+ ScMenuOptions
12
13
  } from "@streamoid/ui";
13
14
  import { ScTextField } from "@streamoid/ui";
14
15
  import { ScButton as ScButton4 } from "@streamoid/ui";
@@ -27,12 +28,7 @@ import {
27
28
  SiconRight as SiconRight2,
28
29
  SiconUserAdd as SiconUserAdd2,
29
30
  SiconLock,
30
- SiconDown,
31
- SiconSwatch,
32
- SiconBag,
33
- SiconInsights,
34
- SiconAdCreator,
35
- SiconCrown
31
+ SiconDown
36
32
  } from "@streamoid/icons";
37
33
 
38
34
  // src/icons/SiconKey.tsx
@@ -6900,51 +6896,46 @@ function SettingsNav({
6900
6896
  );
6901
6897
  }
6902
6898
  var SPECIALIZATION_ICON_SIZE = 20;
6903
- var SPECIALIZATION_ICON_PROPS = {
6904
- style: {
6905
- width: SPECIALIZATION_ICON_SIZE,
6906
- height: SPECIALIZATION_ICON_SIZE
6907
- }
6908
- };
6909
- function iconForSpecialization(id) {
6910
- switch (id) {
6911
- case "design":
6912
- return /* @__PURE__ */ jsx13(SiconSwatch, { ...SPECIALIZATION_ICON_PROPS });
6913
- case "merchandising":
6914
- return /* @__PURE__ */ jsx13(SiconBag, { ...SPECIALIZATION_ICON_PROPS });
6915
- case "planning":
6916
- return /* @__PURE__ */ jsx13(SiconInsights, { ...SPECIALIZATION_ICON_PROPS });
6917
- case "marketing_brand":
6918
- return /* @__PURE__ */ jsx13(SiconAdCreator, { ...SPECIALIZATION_ICON_PROPS });
6919
- case "founder_operator":
6920
- return /* @__PURE__ */ jsx13(SiconCrown, { ...SPECIALIZATION_ICON_PROPS });
6921
- default:
6922
- return /* @__PURE__ */ jsx13(SiconBolt, { ...SPECIALIZATION_ICON_PROPS });
6899
+ function SpecializationIcon({ iconUrl }) {
6900
+ if (iconUrl) {
6901
+ return /* @__PURE__ */ jsx13(
6902
+ "img",
6903
+ {
6904
+ src: iconUrl,
6905
+ alt: "",
6906
+ style: {
6907
+ width: SPECIALIZATION_ICON_SIZE,
6908
+ height: SPECIALIZATION_ICON_SIZE,
6909
+ objectFit: "contain"
6910
+ }
6911
+ }
6912
+ );
6923
6913
  }
6914
+ return /* @__PURE__ */ jsx13(
6915
+ SiconBolt,
6916
+ {
6917
+ style: {
6918
+ width: SPECIALIZATION_ICON_SIZE,
6919
+ height: SPECIALIZATION_ICON_SIZE
6920
+ }
6921
+ }
6922
+ );
6924
6923
  }
6925
- var FALLBACK_SPECIALIZATIONS = [
6926
- { id: "design", label: "Design", icon: iconForSpecialization("design") },
6927
- {
6928
- id: "merchandising",
6929
- label: "Merchandising",
6930
- icon: iconForSpecialization("merchandising")
6931
- },
6932
- {
6933
- id: "planning",
6934
- label: "Planning",
6935
- icon: iconForSpecialization("planning")
6936
- },
6937
- {
6938
- id: "marketing_brand",
6939
- label: "Marketing & brand",
6940
- icon: iconForSpecialization("marketing_brand")
6941
- },
6942
- {
6943
- id: "founder_operator",
6944
- label: "Founder & operator",
6945
- icon: iconForSpecialization("founder_operator")
6946
- }
6947
- ];
6924
+ var DROPDOWN_TRIGGER_STYLES = `
6925
+ .spec-dropdown-trigger,
6926
+ .spec-dropdown-trigger * {
6927
+ cursor: pointer;
6928
+ }
6929
+ .spec-dropdown-trigger[data-disabled="true"],
6930
+ .spec-dropdown-trigger[data-disabled="true"] * {
6931
+ cursor: default;
6932
+ }
6933
+ .spec-dropdown-trigger input {
6934
+ caret-color: transparent;
6935
+ user-select: none;
6936
+ pointer-events: none;
6937
+ }
6938
+ `;
6948
6939
  function SpecializationDropdown({
6949
6940
  value,
6950
6941
  onChange,
@@ -6953,20 +6944,18 @@ function SpecializationDropdown({
6953
6944
  const { auth } = useSettingsAdapters();
6954
6945
  const [open, setOpen] = useState9(false);
6955
6946
  const containerRef = useRef3(null);
6956
- const [options, setOptions] = useState9(
6957
- FALLBACK_SPECIALIZATIONS
6958
- );
6947
+ const [options, setOptions] = useState9([]);
6959
6948
  useEffect6(() => {
6960
6949
  if (!auth.getSpecializations) return;
6961
6950
  let cancelled = false;
6962
6951
  auth.getSpecializations().then((items) => {
6963
6952
  if (cancelled) return;
6964
- if (Array.isArray(items) && items.length > 0) {
6953
+ if (Array.isArray(items)) {
6965
6954
  setOptions(
6966
6955
  items.map((item) => ({
6967
6956
  id: item.id,
6968
6957
  label: item.name,
6969
- icon: iconForSpecialization(item.id)
6958
+ iconUrl: item.iconUrl
6970
6959
  }))
6971
6960
  );
6972
6961
  }
@@ -6994,97 +6983,50 @@ function SpecializationDropdown({
6994
6983
  };
6995
6984
  }, [open]);
6996
6985
  const selected = options.find((o) => o.id === value);
6997
- const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
6998
6986
  return /* @__PURE__ */ jsxs11(
6999
6987
  "div",
7000
6988
  {
7001
6989
  ref: containerRef,
7002
- className: "flex flex-col items-start w-full",
7003
- style: { gap: "var(--spacing-xs)", position: "relative" },
6990
+ className: "w-full",
6991
+ style: { position: "relative" },
7004
6992
  children: [
6993
+ /* @__PURE__ */ jsx13("style", { children: DROPDOWN_TRIGGER_STYLES }),
7005
6994
  /* @__PURE__ */ jsx13(
7006
- "span",
7007
- {
7008
- style: {
7009
- fontFamily: "var(--font-family-font-family-body)",
7010
- fontSize: "var(--font-size-font-size-sm)",
7011
- lineHeight: "var(--line-height-line-height-sm)",
7012
- color: "var(--alias-text---icons-tertiary)"
7013
- },
7014
- children: "Specialization"
7015
- }
7016
- ),
7017
- /* @__PURE__ */ jsxs11(
7018
- "button",
6995
+ "div",
7019
6996
  {
7020
- type: "button",
6997
+ className: "spec-dropdown-trigger",
6998
+ "data-disabled": disabled ? "true" : "false",
7021
6999
  onClick: () => !disabled && setOpen((v) => !v),
7022
- disabled,
7023
7000
  "aria-haspopup": "listbox",
7024
7001
  "aria-expanded": open,
7025
- style: {
7026
- width: "100%",
7027
- height: 48,
7028
- display: "flex",
7029
- alignItems: "center",
7030
- gap: "var(--spacing-md, 8px)",
7031
- padding: "var(--spacing-xl, 12px) var(--spacing-3xl, 16px)",
7032
- background: "var(--alias-fill-neutral-neutral, #1a1a1a)",
7033
- borderRadius: "var(--radius-3xl, 16px)",
7034
- border: "none",
7035
- cursor: disabled ? "default" : "pointer",
7036
- opacity: disabled ? 0.5 : 1,
7037
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)",
7038
- fontFamily: "var(--font-family-font-family-body)",
7039
- fontSize: "var(--font-size-font-size-sm)",
7040
- lineHeight: "var(--line-height-line-height-sm)",
7041
- textAlign: "left"
7042
- },
7043
- children: [
7044
- /* @__PURE__ */ jsx13(
7045
- "span",
7046
- {
7047
- style: {
7048
- display: "flex",
7049
- alignItems: "center",
7050
- justifyContent: "center",
7051
- width: 24,
7052
- height: 24,
7053
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
7054
- },
7055
- children: selected ? selected.icon : /* @__PURE__ */ jsx13(SiconBolt, {})
7056
- }
7057
- ),
7058
- /* @__PURE__ */ jsx13(
7059
- "span",
7060
- {
7061
- style: {
7062
- flex: 1,
7063
- minWidth: 0,
7064
- overflow: "hidden",
7065
- textOverflow: "ellipsis",
7066
- whiteSpace: "nowrap"
7067
- },
7068
- children: labelText
7069
- }
7070
- ),
7071
- /* @__PURE__ */ jsx13(
7072
- "span",
7073
- {
7074
- style: {
7075
- display: "flex",
7076
- alignItems: "center",
7077
- justifyContent: "center",
7078
- width: 24,
7079
- height: 24,
7080
- color: "var(--alias-text---icons-primary)",
7081
- transform: open ? "rotate(180deg)" : "none",
7082
- transition: "transform 120ms ease-out"
7083
- },
7084
- children: /* @__PURE__ */ jsx13(SiconDown, {})
7085
- }
7086
- )
7087
- ]
7002
+ children: /* @__PURE__ */ jsx13(
7003
+ ScTextField,
7004
+ {
7005
+ label: "Specialization",
7006
+ labelGroup: "label",
7007
+ value: selected?.label ?? "",
7008
+ placeholderFilled: "Select specialization",
7009
+ tfGroup: "icon-left-right",
7010
+ tfLeftIcon: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: selected?.iconUrl }),
7011
+ tfRightIcon: /* @__PURE__ */ jsx13(
7012
+ "span",
7013
+ {
7014
+ style: {
7015
+ display: "flex",
7016
+ alignItems: "center",
7017
+ justifyContent: "center",
7018
+ transform: open ? "rotate(180deg)" : "none",
7019
+ transition: "transform 120ms ease-out"
7020
+ },
7021
+ children: /* @__PURE__ */ jsx13(SiconDown, {})
7022
+ }
7023
+ ),
7024
+ className: "sc-text-field-full-width",
7025
+ style: { width: "100%" },
7026
+ readOnly: true,
7027
+ disabled
7028
+ }
7029
+ )
7088
7030
  }
7089
7031
  ),
7090
7032
  open && /* @__PURE__ */ jsx13(
@@ -7108,50 +7050,20 @@ function SpecializationDropdown({
7108
7050
  },
7109
7051
  children: options.map((opt) => {
7110
7052
  const isActive = opt.id === value;
7111
- return /* @__PURE__ */ jsxs11(
7112
- "button",
7053
+ return /* @__PURE__ */ jsx13(
7054
+ ScMenuOptions,
7113
7055
  {
7114
- type: "button",
7056
+ text: opt.label,
7057
+ icon: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: opt.iconUrl }),
7058
+ hover: isActive ? "true" : "false",
7059
+ variant: "default",
7115
7060
  role: "option",
7116
7061
  "aria-selected": isActive,
7117
7062
  onClick: () => {
7118
7063
  onChange(opt.id);
7119
7064
  setOpen(false);
7120
7065
  },
7121
- style: {
7122
- display: "flex",
7123
- alignItems: "center",
7124
- gap: "var(--spacing-md, 8px)",
7125
- padding: "var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
7126
- background: isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7127
- border: "none",
7128
- borderRadius: "var(--radius-md, 8px)",
7129
- cursor: "pointer",
7130
- color: "var(--alias-text---icons-primary)",
7131
- fontFamily: "var(--font-family-font-family-body)",
7132
- fontSize: "var(--font-size-font-size-sm)",
7133
- lineHeight: "var(--line-height-line-height-sm)",
7134
- textAlign: "left",
7135
- height: 40
7136
- },
7137
- onMouseEnter: (e) => e.currentTarget.style.background = "var(--alias-fill-neutral-neutralhover, #242424)",
7138
- onMouseLeave: (e) => e.currentTarget.style.background = isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7139
- children: [
7140
- /* @__PURE__ */ jsx13(
7141
- "span",
7142
- {
7143
- style: {
7144
- display: "flex",
7145
- alignItems: "center",
7146
- justifyContent: "center",
7147
- width: 24,
7148
- height: 24
7149
- },
7150
- children: opt.icon
7151
- }
7152
- ),
7153
- /* @__PURE__ */ jsx13("span", { style: { flex: 1 }, children: opt.label })
7154
- ]
7066
+ style: { width: "100%", cursor: "pointer" }
7155
7067
  },
7156
7068
  opt.id
7157
7069
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamoid/settings",
3
- "version": "0.1.4",
3
+ "version": "0.1.6",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",