@streamoid/settings 0.1.5 → 0.1.7

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 +65 -125
  2. package/dist/index.mjs +67 -126
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -6874,7 +6874,7 @@ function SettingsNav({
6874
6874
  }
6875
6875
  );
6876
6876
  }
6877
- var SPECIALIZATION_ICON_SIZE = 20;
6877
+ var SPECIALIZATION_ICON_SIZE = 24;
6878
6878
  function SpecializationIcon({ iconUrl }) {
6879
6879
  if (iconUrl) {
6880
6880
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -6896,10 +6896,26 @@ function SpecializationIcon({ iconUrl }) {
6896
6896
  style: {
6897
6897
  width: SPECIALIZATION_ICON_SIZE,
6898
6898
  height: SPECIALIZATION_ICON_SIZE
6899
- }
6899
+ },
6900
+ color: "var(--alias-text---icons-primary)"
6900
6901
  }
6901
6902
  );
6902
6903
  }
6904
+ var DROPDOWN_TRIGGER_STYLES = `
6905
+ .spec-dropdown-trigger,
6906
+ .spec-dropdown-trigger * {
6907
+ cursor: pointer;
6908
+ }
6909
+ .spec-dropdown-trigger[data-disabled="true"],
6910
+ .spec-dropdown-trigger[data-disabled="true"] * {
6911
+ cursor: default;
6912
+ }
6913
+ .spec-dropdown-trigger input {
6914
+ caret-color: transparent;
6915
+ user-select: none;
6916
+ pointer-events: none;
6917
+ }
6918
+ `;
6903
6919
  function SpecializationDropdown({
6904
6920
  value,
6905
6921
  onChange,
@@ -6947,97 +6963,50 @@ function SpecializationDropdown({
6947
6963
  };
6948
6964
  }, [open]);
6949
6965
  const selected = options.find((o) => o.id === value);
6950
- const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
6951
6966
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
6952
6967
  "div",
6953
6968
  {
6954
6969
  ref: containerRef,
6955
- className: "flex flex-col items-start w-full",
6956
- style: { gap: "var(--spacing-xs)", position: "relative" },
6970
+ className: "w-full",
6971
+ style: { position: "relative" },
6957
6972
  children: [
6973
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
6958
6974
  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6959
- "span",
6960
- {
6961
- style: {
6962
- fontFamily: "var(--font-family-font-family-body)",
6963
- fontSize: "var(--font-size-font-size-sm)",
6964
- lineHeight: "var(--line-height-line-height-sm)",
6965
- color: "var(--alias-text---icons-tertiary)"
6966
- },
6967
- children: "Specialization"
6968
- }
6969
- ),
6970
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
6971
- "button",
6975
+ "div",
6972
6976
  {
6973
- type: "button",
6977
+ className: "spec-dropdown-trigger",
6978
+ "data-disabled": disabled ? "true" : "false",
6974
6979
  onClick: () => !disabled && setOpen((v) => !v),
6975
- disabled,
6976
6980
  "aria-haspopup": "listbox",
6977
6981
  "aria-expanded": open,
6978
- style: {
6979
- width: "100%",
6980
- height: 48,
6981
- display: "flex",
6982
- alignItems: "center",
6983
- gap: "var(--spacing-md, 8px)",
6984
- padding: "var(--spacing-xl, 12px) var(--spacing-3xl, 16px)",
6985
- background: "var(--alias-fill-neutral-neutral, #1a1a1a)",
6986
- borderRadius: "var(--radius-3xl, 16px)",
6987
- border: "none",
6988
- cursor: disabled ? "default" : "pointer",
6989
- opacity: disabled ? 0.5 : 1,
6990
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)",
6991
- fontFamily: "var(--font-family-font-family-body)",
6992
- fontSize: "var(--font-size-font-size-sm)",
6993
- lineHeight: "var(--line-height-line-height-sm)",
6994
- textAlign: "left"
6995
- },
6996
- children: [
6997
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6998
- "span",
6999
- {
7000
- style: {
7001
- display: "flex",
7002
- alignItems: "center",
7003
- justifyContent: "center",
7004
- width: 24,
7005
- height: 24,
7006
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
7007
- },
7008
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: selected?.iconUrl })
7009
- }
7010
- ),
7011
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7012
- "span",
7013
- {
7014
- style: {
7015
- flex: 1,
7016
- minWidth: 0,
7017
- overflow: "hidden",
7018
- textOverflow: "ellipsis",
7019
- whiteSpace: "nowrap"
7020
- },
7021
- children: labelText
7022
- }
7023
- ),
7024
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7025
- "span",
7026
- {
7027
- style: {
7028
- display: "flex",
7029
- alignItems: "center",
7030
- justifyContent: "center",
7031
- width: 24,
7032
- height: 24,
7033
- color: "var(--alias-text---icons-primary)",
7034
- transform: open ? "rotate(180deg)" : "none",
7035
- transition: "transform 120ms ease-out"
7036
- },
7037
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconDown, {})
7038
- }
7039
- )
7040
- ]
6982
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6983
+ import_ui8.ScTextField,
6984
+ {
6985
+ label: "Specialization",
6986
+ labelGroup: "label",
6987
+ value: selected?.label ?? "",
6988
+ placeholderFilled: "Select specialization",
6989
+ tfGroup: "icon-left-right",
6990
+ tfLeftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: selected?.iconUrl }),
6991
+ tfRightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
6992
+ "span",
6993
+ {
6994
+ style: {
6995
+ display: "flex",
6996
+ alignItems: "center",
6997
+ justifyContent: "center",
6998
+ transform: open ? "rotate(180deg)" : "none",
6999
+ transition: "transform 120ms ease-out"
7000
+ },
7001
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons7.SiconDown, {})
7002
+ }
7003
+ ),
7004
+ className: "sc-text-field-full-width",
7005
+ style: { width: "100%" },
7006
+ readOnly: true,
7007
+ disabled
7008
+ }
7009
+ )
7041
7010
  }
7042
7011
  ),
7043
7012
  open && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -7050,61 +7019,32 @@ function SpecializationDropdown({
7050
7019
  left: 0,
7051
7020
  right: 0,
7052
7021
  zIndex: 50,
7053
- background: "var(--alias-surface-subtleraised, #1f1f1f)",
7054
- border: "1px solid var(--alias-border-divider, #242424)",
7055
- borderRadius: "var(--radius-3xl, 16px)",
7022
+ background: "var(--alias-surface-subtle, #1a1a1a)",
7023
+ border: "0.5px solid var(--alias-border-subtle, #242424)",
7024
+ borderRadius: "var(--radius-4xl, 18px)",
7056
7025
  padding: "var(--spacing-md, 8px)",
7057
7026
  display: "flex",
7058
7027
  flexDirection: "column",
7059
- gap: 2,
7060
- boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
7028
+ gap: 8,
7029
+ boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
7030
+ backdropFilter: "blur(42px)"
7061
7031
  },
7062
7032
  children: options.map((opt) => {
7063
7033
  const isActive = opt.id === value;
7064
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
7065
- "button",
7034
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7035
+ import_ui7.ScMenuOptions,
7066
7036
  {
7067
- type: "button",
7037
+ text: opt.label,
7038
+ icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: opt.iconUrl }),
7039
+ hover: isActive ? "true" : "false",
7040
+ variant: "default",
7068
7041
  role: "option",
7069
7042
  "aria-selected": isActive,
7070
7043
  onClick: () => {
7071
7044
  onChange(opt.id);
7072
7045
  setOpen(false);
7073
7046
  },
7074
- style: {
7075
- display: "flex",
7076
- alignItems: "center",
7077
- gap: "var(--spacing-md, 8px)",
7078
- padding: "var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
7079
- background: isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7080
- border: "none",
7081
- borderRadius: "var(--radius-md, 8px)",
7082
- cursor: "pointer",
7083
- color: "var(--alias-text---icons-primary)",
7084
- fontFamily: "var(--font-family-font-family-body)",
7085
- fontSize: "var(--font-size-font-size-sm)",
7086
- lineHeight: "var(--line-height-line-height-sm)",
7087
- textAlign: "left",
7088
- height: 40
7089
- },
7090
- onMouseEnter: (e) => e.currentTarget.style.background = "var(--alias-fill-neutral-neutralhover, #242424)",
7091
- onMouseLeave: (e) => e.currentTarget.style.background = isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7092
- children: [
7093
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7094
- "span",
7095
- {
7096
- style: {
7097
- display: "flex",
7098
- alignItems: "center",
7099
- justifyContent: "center",
7100
- width: 24,
7101
- height: 24
7102
- },
7103
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SpecializationIcon, { iconUrl: opt.iconUrl })
7104
- }
7105
- ),
7106
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { flex: 1 }, children: opt.label })
7107
- ]
7047
+ style: { width: "100%", cursor: "pointer" }
7108
7048
  },
7109
7049
  opt.id
7110
7050
  );
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";
@@ -6894,7 +6895,7 @@ function SettingsNav({
6894
6895
  }
6895
6896
  );
6896
6897
  }
6897
- var SPECIALIZATION_ICON_SIZE = 20;
6898
+ var SPECIALIZATION_ICON_SIZE = 24;
6898
6899
  function SpecializationIcon({ iconUrl }) {
6899
6900
  if (iconUrl) {
6900
6901
  return /* @__PURE__ */ jsx13(
@@ -6916,10 +6917,26 @@ function SpecializationIcon({ iconUrl }) {
6916
6917
  style: {
6917
6918
  width: SPECIALIZATION_ICON_SIZE,
6918
6919
  height: SPECIALIZATION_ICON_SIZE
6919
- }
6920
+ },
6921
+ color: "var(--alias-text---icons-primary)"
6920
6922
  }
6921
6923
  );
6922
6924
  }
6925
+ var DROPDOWN_TRIGGER_STYLES = `
6926
+ .spec-dropdown-trigger,
6927
+ .spec-dropdown-trigger * {
6928
+ cursor: pointer;
6929
+ }
6930
+ .spec-dropdown-trigger[data-disabled="true"],
6931
+ .spec-dropdown-trigger[data-disabled="true"] * {
6932
+ cursor: default;
6933
+ }
6934
+ .spec-dropdown-trigger input {
6935
+ caret-color: transparent;
6936
+ user-select: none;
6937
+ pointer-events: none;
6938
+ }
6939
+ `;
6923
6940
  function SpecializationDropdown({
6924
6941
  value,
6925
6942
  onChange,
@@ -6967,97 +6984,50 @@ function SpecializationDropdown({
6967
6984
  };
6968
6985
  }, [open]);
6969
6986
  const selected = options.find((o) => o.id === value);
6970
- const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
6971
6987
  return /* @__PURE__ */ jsxs11(
6972
6988
  "div",
6973
6989
  {
6974
6990
  ref: containerRef,
6975
- className: "flex flex-col items-start w-full",
6976
- style: { gap: "var(--spacing-xs)", position: "relative" },
6991
+ className: "w-full",
6992
+ style: { position: "relative" },
6977
6993
  children: [
6994
+ /* @__PURE__ */ jsx13("style", { children: DROPDOWN_TRIGGER_STYLES }),
6978
6995
  /* @__PURE__ */ jsx13(
6979
- "span",
6980
- {
6981
- style: {
6982
- fontFamily: "var(--font-family-font-family-body)",
6983
- fontSize: "var(--font-size-font-size-sm)",
6984
- lineHeight: "var(--line-height-line-height-sm)",
6985
- color: "var(--alias-text---icons-tertiary)"
6986
- },
6987
- children: "Specialization"
6988
- }
6989
- ),
6990
- /* @__PURE__ */ jsxs11(
6991
- "button",
6996
+ "div",
6992
6997
  {
6993
- type: "button",
6998
+ className: "spec-dropdown-trigger",
6999
+ "data-disabled": disabled ? "true" : "false",
6994
7000
  onClick: () => !disabled && setOpen((v) => !v),
6995
- disabled,
6996
7001
  "aria-haspopup": "listbox",
6997
7002
  "aria-expanded": open,
6998
- style: {
6999
- width: "100%",
7000
- height: 48,
7001
- display: "flex",
7002
- alignItems: "center",
7003
- gap: "var(--spacing-md, 8px)",
7004
- padding: "var(--spacing-xl, 12px) var(--spacing-3xl, 16px)",
7005
- background: "var(--alias-fill-neutral-neutral, #1a1a1a)",
7006
- borderRadius: "var(--radius-3xl, 16px)",
7007
- border: "none",
7008
- cursor: disabled ? "default" : "pointer",
7009
- opacity: disabled ? 0.5 : 1,
7010
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)",
7011
- fontFamily: "var(--font-family-font-family-body)",
7012
- fontSize: "var(--font-size-font-size-sm)",
7013
- lineHeight: "var(--line-height-line-height-sm)",
7014
- textAlign: "left"
7015
- },
7016
- children: [
7017
- /* @__PURE__ */ jsx13(
7018
- "span",
7019
- {
7020
- style: {
7021
- display: "flex",
7022
- alignItems: "center",
7023
- justifyContent: "center",
7024
- width: 24,
7025
- height: 24,
7026
- color: selected ? "var(--alias-text---icons-primary)" : "var(--alias-text---icons-muted)"
7027
- },
7028
- children: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: selected?.iconUrl })
7029
- }
7030
- ),
7031
- /* @__PURE__ */ jsx13(
7032
- "span",
7033
- {
7034
- style: {
7035
- flex: 1,
7036
- minWidth: 0,
7037
- overflow: "hidden",
7038
- textOverflow: "ellipsis",
7039
- whiteSpace: "nowrap"
7040
- },
7041
- children: labelText
7042
- }
7043
- ),
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: "var(--alias-text---icons-primary)",
7054
- transform: open ? "rotate(180deg)" : "none",
7055
- transition: "transform 120ms ease-out"
7056
- },
7057
- children: /* @__PURE__ */ jsx13(SiconDown, {})
7058
- }
7059
- )
7060
- ]
7003
+ children: /* @__PURE__ */ jsx13(
7004
+ ScTextField,
7005
+ {
7006
+ label: "Specialization",
7007
+ labelGroup: "label",
7008
+ value: selected?.label ?? "",
7009
+ placeholderFilled: "Select specialization",
7010
+ tfGroup: "icon-left-right",
7011
+ tfLeftIcon: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: selected?.iconUrl }),
7012
+ tfRightIcon: /* @__PURE__ */ jsx13(
7013
+ "span",
7014
+ {
7015
+ style: {
7016
+ display: "flex",
7017
+ alignItems: "center",
7018
+ justifyContent: "center",
7019
+ transform: open ? "rotate(180deg)" : "none",
7020
+ transition: "transform 120ms ease-out"
7021
+ },
7022
+ children: /* @__PURE__ */ jsx13(SiconDown, {})
7023
+ }
7024
+ ),
7025
+ className: "sc-text-field-full-width",
7026
+ style: { width: "100%" },
7027
+ readOnly: true,
7028
+ disabled
7029
+ }
7030
+ )
7061
7031
  }
7062
7032
  ),
7063
7033
  open && /* @__PURE__ */ jsx13(
@@ -7070,61 +7040,32 @@ function SpecializationDropdown({
7070
7040
  left: 0,
7071
7041
  right: 0,
7072
7042
  zIndex: 50,
7073
- background: "var(--alias-surface-subtleraised, #1f1f1f)",
7074
- border: "1px solid var(--alias-border-divider, #242424)",
7075
- borderRadius: "var(--radius-3xl, 16px)",
7043
+ background: "var(--alias-surface-subtle, #1a1a1a)",
7044
+ border: "0.5px solid var(--alias-border-subtle, #242424)",
7045
+ borderRadius: "var(--radius-4xl, 18px)",
7076
7046
  padding: "var(--spacing-md, 8px)",
7077
7047
  display: "flex",
7078
7048
  flexDirection: "column",
7079
- gap: 2,
7080
- boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
7049
+ gap: 8,
7050
+ boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
7051
+ backdropFilter: "blur(42px)"
7081
7052
  },
7082
7053
  children: options.map((opt) => {
7083
7054
  const isActive = opt.id === value;
7084
- return /* @__PURE__ */ jsxs11(
7085
- "button",
7055
+ return /* @__PURE__ */ jsx13(
7056
+ ScMenuOptions,
7086
7057
  {
7087
- type: "button",
7058
+ text: opt.label,
7059
+ icon: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: opt.iconUrl }),
7060
+ hover: isActive ? "true" : "false",
7061
+ variant: "default",
7088
7062
  role: "option",
7089
7063
  "aria-selected": isActive,
7090
7064
  onClick: () => {
7091
7065
  onChange(opt.id);
7092
7066
  setOpen(false);
7093
7067
  },
7094
- style: {
7095
- display: "flex",
7096
- alignItems: "center",
7097
- gap: "var(--spacing-md, 8px)",
7098
- padding: "var(--spacing-md, 8px) var(--spacing-3xl, 16px)",
7099
- background: isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7100
- border: "none",
7101
- borderRadius: "var(--radius-md, 8px)",
7102
- cursor: "pointer",
7103
- color: "var(--alias-text---icons-primary)",
7104
- fontFamily: "var(--font-family-font-family-body)",
7105
- fontSize: "var(--font-size-font-size-sm)",
7106
- lineHeight: "var(--line-height-line-height-sm)",
7107
- textAlign: "left",
7108
- height: 40
7109
- },
7110
- onMouseEnter: (e) => e.currentTarget.style.background = "var(--alias-fill-neutral-neutralhover, #242424)",
7111
- onMouseLeave: (e) => e.currentTarget.style.background = isActive ? "var(--alias-fill-neutral-neutralhover, #242424)" : "transparent",
7112
- children: [
7113
- /* @__PURE__ */ jsx13(
7114
- "span",
7115
- {
7116
- style: {
7117
- display: "flex",
7118
- alignItems: "center",
7119
- justifyContent: "center",
7120
- width: 24,
7121
- height: 24
7122
- },
7123
- children: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: opt.iconUrl })
7124
- }
7125
- ),
7126
- /* @__PURE__ */ jsx13("span", { style: { flex: 1 }, children: opt.label })
7127
- ]
7068
+ style: { width: "100%", cursor: "pointer" }
7128
7069
  },
7129
7070
  opt.id
7130
7071
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamoid/settings",
3
- "version": "0.1.5",
3
+ "version": "0.1.7",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",