@streamoid/settings 0.1.5 → 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 (3) hide show
  1. package/dist/index.js +56 -118
  2. package/dist/index.mjs +58 -119
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -6900,6 +6900,21 @@ function SpecializationIcon({ iconUrl }) {
6900
6900
  }
6901
6901
  );
6902
6902
  }
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
+ `;
6903
6918
  function SpecializationDropdown({
6904
6919
  value,
6905
6920
  onChange,
@@ -6947,97 +6962,50 @@ function SpecializationDropdown({
6947
6962
  };
6948
6963
  }, [open]);
6949
6964
  const selected = options.find((o) => o.id === value);
6950
- const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
6951
6965
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
6952
6966
  "div",
6953
6967
  {
6954
6968
  ref: containerRef,
6955
- className: "flex flex-col items-start w-full",
6956
- style: { gap: "var(--spacing-xs)", position: "relative" },
6969
+ className: "w-full",
6970
+ style: { position: "relative" },
6957
6971
  children: [
6972
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("style", { children: DROPDOWN_TRIGGER_STYLES }),
6958
6973
  /* @__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",
6974
+ "div",
6972
6975
  {
6973
- type: "button",
6976
+ className: "spec-dropdown-trigger",
6977
+ "data-disabled": disabled ? "true" : "false",
6974
6978
  onClick: () => !disabled && setOpen((v) => !v),
6975
- disabled,
6976
6979
  "aria-haspopup": "listbox",
6977
6980
  "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
- ]
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
+ )
7041
7009
  }
7042
7010
  ),
7043
7011
  open && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -7061,50 +7029,20 @@ function SpecializationDropdown({
7061
7029
  },
7062
7030
  children: options.map((opt) => {
7063
7031
  const isActive = opt.id === value;
7064
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
7065
- "button",
7032
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
7033
+ import_ui7.ScMenuOptions,
7066
7034
  {
7067
- 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",
7068
7039
  role: "option",
7069
7040
  "aria-selected": isActive,
7070
7041
  onClick: () => {
7071
7042
  onChange(opt.id);
7072
7043
  setOpen(false);
7073
7044
  },
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
- ]
7045
+ style: { width: "100%", cursor: "pointer" }
7108
7046
  },
7109
7047
  opt.id
7110
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";
@@ -6920,6 +6921,21 @@ function SpecializationIcon({ iconUrl }) {
6920
6921
  }
6921
6922
  );
6922
6923
  }
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
+ `;
6923
6939
  function SpecializationDropdown({
6924
6940
  value,
6925
6941
  onChange,
@@ -6967,97 +6983,50 @@ function SpecializationDropdown({
6967
6983
  };
6968
6984
  }, [open]);
6969
6985
  const selected = options.find((o) => o.id === value);
6970
- const labelText = selected ? selected.label : value === "unspecified" ? "Not specified" : "Select specialization";
6971
6986
  return /* @__PURE__ */ jsxs11(
6972
6987
  "div",
6973
6988
  {
6974
6989
  ref: containerRef,
6975
- className: "flex flex-col items-start w-full",
6976
- style: { gap: "var(--spacing-xs)", position: "relative" },
6990
+ className: "w-full",
6991
+ style: { position: "relative" },
6977
6992
  children: [
6993
+ /* @__PURE__ */ jsx13("style", { children: DROPDOWN_TRIGGER_STYLES }),
6978
6994
  /* @__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",
6995
+ "div",
6992
6996
  {
6993
- type: "button",
6997
+ className: "spec-dropdown-trigger",
6998
+ "data-disabled": disabled ? "true" : "false",
6994
6999
  onClick: () => !disabled && setOpen((v) => !v),
6995
- disabled,
6996
7000
  "aria-haspopup": "listbox",
6997
7001
  "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
- ]
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
+ )
7061
7030
  }
7062
7031
  ),
7063
7032
  open && /* @__PURE__ */ jsx13(
@@ -7081,50 +7050,20 @@ function SpecializationDropdown({
7081
7050
  },
7082
7051
  children: options.map((opt) => {
7083
7052
  const isActive = opt.id === value;
7084
- return /* @__PURE__ */ jsxs11(
7085
- "button",
7053
+ return /* @__PURE__ */ jsx13(
7054
+ ScMenuOptions,
7086
7055
  {
7087
- type: "button",
7056
+ text: opt.label,
7057
+ icon: /* @__PURE__ */ jsx13(SpecializationIcon, { iconUrl: opt.iconUrl }),
7058
+ hover: isActive ? "true" : "false",
7059
+ variant: "default",
7088
7060
  role: "option",
7089
7061
  "aria-selected": isActive,
7090
7062
  onClick: () => {
7091
7063
  onChange(opt.id);
7092
7064
  setOpen(false);
7093
7065
  },
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
- ]
7066
+ style: { width: "100%", cursor: "pointer" }
7128
7067
  },
7129
7068
  opt.id
7130
7069
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamoid/settings",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",