@streamoid/ui 0.3.4 → 0.4.0

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 (6) hide show
  1. package/dist/index.css +7 -0
  2. package/dist/index.d.mts +6 -2
  3. package/dist/index.d.ts +6 -2
  4. package/dist/index.js +44 -33
  5. package/dist/index.mjs +44 -33
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -3471,6 +3471,13 @@
3471
3471
  .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-default-highlight .ScSidebarMenu_content {
3472
3472
  color: var(--alias-text-and-icons-primary, #f5f5f5);
3473
3473
  }
3474
+ .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-default-active {
3475
+ background: #0B0B0B;
3476
+ box-shadow: inset 0 0 0 0.5px #242424;
3477
+ }
3478
+ .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-default-active .ScSidebarMenu_content {
3479
+ color: var(--alias-text-and-icons-primary, #f5f5f5);
3480
+ }
3474
3481
  .ScSidebarMenu_scSidebarMenu:hover,
3475
3482
  .ScSidebarMenu_scSidebarMenu.ScSidebarMenu_state-hover {
3476
3483
  background: var(--alias-fill-neutral-neutral, #1a1a1a);
package/dist/index.d.mts CHANGED
@@ -317,12 +317,16 @@ interface StreamoidSidebarProps {
317
317
  isMobile?: boolean;
318
318
  className?: string;
319
319
  style?: CSSProperties;
320
+ /** Multiple stacked top items (replaces single topItem in config) */
321
+ topItems?: SidebarMenuItemConfig[];
322
+ /** Explicit state override per top item id — takes priority over activeItemId/highlightedItemIds for top items */
323
+ topItemStates?: Record<string, "default" | "active" | "hover" | "default-highlight" | "default-active">;
320
324
  }
321
- declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
325
+ declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, topItems, topItemStates, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
322
326
 
323
327
  interface IScSidebarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
324
328
  icon?: JSX.Element;
325
- state?: "default" | "active" | "hover" | "default-highlight";
329
+ state?: "default" | "active" | "hover" | "default-highlight" | "default-active";
326
330
  variant?: "expanded" | "collapsed";
327
331
  className?: string;
328
332
  text?: string;
package/dist/index.d.ts CHANGED
@@ -317,12 +317,16 @@ interface StreamoidSidebarProps {
317
317
  isMobile?: boolean;
318
318
  className?: string;
319
319
  style?: CSSProperties;
320
+ /** Multiple stacked top items (replaces single topItem in config) */
321
+ topItems?: SidebarMenuItemConfig[];
322
+ /** Explicit state override per top item id — takes priority over activeItemId/highlightedItemIds for top items */
323
+ topItemStates?: Record<string, "default" | "active" | "hover" | "default-highlight" | "default-active">;
320
324
  }
321
- declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
325
+ declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, topItems, topItemStates, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
322
326
 
323
327
  interface IScSidebarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
324
328
  icon?: JSX.Element;
325
- state?: "default" | "active" | "hover" | "default-highlight";
329
+ state?: "default" | "active" | "hover" | "default-highlight" | "default-active";
326
330
  variant?: "expanded" | "collapsed";
327
331
  className?: string;
328
332
  text?: string;
package/dist/index.js CHANGED
@@ -2424,6 +2424,7 @@ var ScSidebarMenu_default = {
2424
2424
  moreIconWrapper: "ScSidebarMenu_moreIconWrapper",
2425
2425
  "state-active": "ScSidebarMenu_state-active",
2426
2426
  "state-default-highlight": "ScSidebarMenu_state-default-highlight",
2427
+ "state-default-active": "ScSidebarMenu_state-default-active",
2427
2428
  "state-hover": "ScSidebarMenu_state-hover",
2428
2429
  "variant-collapsed": "ScSidebarMenu_variant-collapsed"
2429
2430
  };
@@ -2922,15 +2923,18 @@ function renderMenuItem({
2922
2923
  iconMap,
2923
2924
  onItemSelect,
2924
2925
  moreIcon,
2925
- onMoreClick
2926
+ onMoreClick,
2927
+ stateOverride
2926
2928
  }) {
2927
2929
  const active = item.id === activeItemId;
2928
2930
  const highlighted = highlightedItemIds?.has(item.id) ?? false;
2929
- const state = active ? "active" : highlighted ? "default-highlight" : "default";
2931
+ const derivedState = active ? "active" : highlighted ? "default-highlight" : "default";
2932
+ const state = stateOverride ?? derivedState;
2933
+ const iconActive = state === "active" || state === "default-active" || state === "default-highlight";
2930
2934
  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
2931
2935
  ScSidebarMenu,
2932
2936
  {
2933
- icon: resolveIcon(iconMap, item, active || highlighted, expanded),
2937
+ icon: resolveIcon(iconMap, item, iconActive, expanded),
2934
2938
  text: expanded ? item.label : void 0,
2935
2939
  state,
2936
2940
  variant: expanded ? "expanded" : "collapsed",
@@ -2962,7 +2966,9 @@ function StreamoidSidebar({
2962
2966
  showBody = false,
2963
2967
  isMobile = false,
2964
2968
  className,
2965
- style
2969
+ style,
2970
+ topItems,
2971
+ topItemStates
2966
2972
  }) {
2967
2973
  const effectiveHideFooter = hideFooter || isMobile;
2968
2974
  if (expanded) {
@@ -3016,24 +3022,26 @@ function StreamoidSidebar({
3016
3022
  }
3017
3023
  ) : null
3018
3024
  ] }),
3019
- config.topItem && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
3020
- /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HDivider, {}),
3025
+ !!(topItems?.length || config.topItem) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
3021
3026
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
3022
3027
  "div",
3023
3028
  {
3024
- className: "flex flex-col items-start shrink-0 w-full",
3025
- style: { padding: "var(--spacing-md) 0" },
3026
- children: renderMenuItem({
3027
- item: config.topItem,
3028
- sectionId: "top",
3029
- expanded: true,
3030
- activeItemId,
3031
- highlightedItemIds,
3032
- iconMap,
3033
- onItemSelect,
3034
- moreIcon,
3035
- onMoreClick
3036
- })
3029
+ className: "flex flex-col items-stretch shrink-0 w-full",
3030
+ style: { gap: "var(--spacing-md)", paddingBottom: "var(--spacing-md)" },
3031
+ children: (topItems ?? (config.topItem ? [config.topItem] : [])).map(
3032
+ (item) => renderMenuItem({
3033
+ item,
3034
+ sectionId: "top",
3035
+ expanded: true,
3036
+ activeItemId,
3037
+ highlightedItemIds,
3038
+ iconMap,
3039
+ onItemSelect,
3040
+ moreIcon,
3041
+ onMoreClick,
3042
+ stateOverride: topItemStates?.[item.id]
3043
+ })
3044
+ )
3037
3045
  }
3038
3046
  ),
3039
3047
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HDivider, {})
@@ -3196,23 +3204,26 @@ function StreamoidSidebar({
3196
3204
  style: { gap: "var(--spacing-xxs)" },
3197
3205
  children: [
3198
3206
  collapsedLogo,
3199
- config.topItem ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
3207
+ !!(topItems?.length || config.topItem) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
3200
3208
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
3201
3209
  "div",
3202
3210
  {
3203
- className: "flex flex-col items-start shrink-0",
3204
- style: { padding: "var(--spacing-md) 0" },
3205
- children: renderMenuItem({
3206
- item: config.topItem,
3207
- sectionId: "top",
3208
- expanded: false,
3209
- activeItemId,
3210
- highlightedItemIds,
3211
- iconMap,
3212
- onItemSelect,
3213
- moreIcon,
3214
- onMoreClick
3215
- })
3211
+ className: "flex flex-col items-center shrink-0",
3212
+ style: { gap: "var(--spacing-xxs)", paddingBottom: "var(--spacing-xxs)" },
3213
+ children: (topItems ?? (config.topItem ? [config.topItem] : [])).map(
3214
+ (item) => renderMenuItem({
3215
+ item,
3216
+ sectionId: "top",
3217
+ expanded: false,
3218
+ activeItemId,
3219
+ highlightedItemIds,
3220
+ iconMap,
3221
+ onItemSelect,
3222
+ moreIcon,
3223
+ onMoreClick,
3224
+ stateOverride: topItemStates?.[item.id]
3225
+ })
3226
+ )
3216
3227
  }
3217
3228
  ),
3218
3229
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HDivider, {})
package/dist/index.mjs CHANGED
@@ -2318,6 +2318,7 @@ var ScSidebarMenu_default = {
2318
2318
  moreIconWrapper: "ScSidebarMenu_moreIconWrapper",
2319
2319
  "state-active": "ScSidebarMenu_state-active",
2320
2320
  "state-default-highlight": "ScSidebarMenu_state-default-highlight",
2321
+ "state-default-active": "ScSidebarMenu_state-default-active",
2321
2322
  "state-hover": "ScSidebarMenu_state-hover",
2322
2323
  "variant-collapsed": "ScSidebarMenu_variant-collapsed"
2323
2324
  };
@@ -2816,15 +2817,18 @@ function renderMenuItem({
2816
2817
  iconMap,
2817
2818
  onItemSelect,
2818
2819
  moreIcon,
2819
- onMoreClick
2820
+ onMoreClick,
2821
+ stateOverride
2820
2822
  }) {
2821
2823
  const active = item.id === activeItemId;
2822
2824
  const highlighted = highlightedItemIds?.has(item.id) ?? false;
2823
- const state = active ? "active" : highlighted ? "default-highlight" : "default";
2825
+ const derivedState = active ? "active" : highlighted ? "default-highlight" : "default";
2826
+ const state = stateOverride ?? derivedState;
2827
+ const iconActive = state === "active" || state === "default-active" || state === "default-highlight";
2824
2828
  return /* @__PURE__ */ jsx40(
2825
2829
  ScSidebarMenu,
2826
2830
  {
2827
- icon: resolveIcon(iconMap, item, active || highlighted, expanded),
2831
+ icon: resolveIcon(iconMap, item, iconActive, expanded),
2828
2832
  text: expanded ? item.label : void 0,
2829
2833
  state,
2830
2834
  variant: expanded ? "expanded" : "collapsed",
@@ -2856,7 +2860,9 @@ function StreamoidSidebar({
2856
2860
  showBody = false,
2857
2861
  isMobile = false,
2858
2862
  className,
2859
- style
2863
+ style,
2864
+ topItems,
2865
+ topItemStates
2860
2866
  }) {
2861
2867
  const effectiveHideFooter = hideFooter || isMobile;
2862
2868
  if (expanded) {
@@ -2910,24 +2916,26 @@ function StreamoidSidebar({
2910
2916
  }
2911
2917
  ) : null
2912
2918
  ] }),
2913
- config.topItem && /* @__PURE__ */ jsxs32(Fragment14, { children: [
2914
- /* @__PURE__ */ jsx40(HDivider, {}),
2919
+ !!(topItems?.length || config.topItem) && /* @__PURE__ */ jsxs32(Fragment14, { children: [
2915
2920
  /* @__PURE__ */ jsx40(
2916
2921
  "div",
2917
2922
  {
2918
- className: "flex flex-col items-start shrink-0 w-full",
2919
- style: { padding: "var(--spacing-md) 0" },
2920
- children: renderMenuItem({
2921
- item: config.topItem,
2922
- sectionId: "top",
2923
- expanded: true,
2924
- activeItemId,
2925
- highlightedItemIds,
2926
- iconMap,
2927
- onItemSelect,
2928
- moreIcon,
2929
- onMoreClick
2930
- })
2923
+ className: "flex flex-col items-stretch shrink-0 w-full",
2924
+ style: { gap: "var(--spacing-md)", paddingBottom: "var(--spacing-md)" },
2925
+ children: (topItems ?? (config.topItem ? [config.topItem] : [])).map(
2926
+ (item) => renderMenuItem({
2927
+ item,
2928
+ sectionId: "top",
2929
+ expanded: true,
2930
+ activeItemId,
2931
+ highlightedItemIds,
2932
+ iconMap,
2933
+ onItemSelect,
2934
+ moreIcon,
2935
+ onMoreClick,
2936
+ stateOverride: topItemStates?.[item.id]
2937
+ })
2938
+ )
2931
2939
  }
2932
2940
  ),
2933
2941
  /* @__PURE__ */ jsx40(HDivider, {})
@@ -3090,23 +3098,26 @@ function StreamoidSidebar({
3090
3098
  style: { gap: "var(--spacing-xxs)" },
3091
3099
  children: [
3092
3100
  collapsedLogo,
3093
- config.topItem ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
3101
+ !!(topItems?.length || config.topItem) ? /* @__PURE__ */ jsxs32(Fragment14, { children: [
3094
3102
  /* @__PURE__ */ jsx40(
3095
3103
  "div",
3096
3104
  {
3097
- className: "flex flex-col items-start shrink-0",
3098
- style: { padding: "var(--spacing-md) 0" },
3099
- children: renderMenuItem({
3100
- item: config.topItem,
3101
- sectionId: "top",
3102
- expanded: false,
3103
- activeItemId,
3104
- highlightedItemIds,
3105
- iconMap,
3106
- onItemSelect,
3107
- moreIcon,
3108
- onMoreClick
3109
- })
3105
+ className: "flex flex-col items-center shrink-0",
3106
+ style: { gap: "var(--spacing-xxs)", paddingBottom: "var(--spacing-xxs)" },
3107
+ children: (topItems ?? (config.topItem ? [config.topItem] : [])).map(
3108
+ (item) => renderMenuItem({
3109
+ item,
3110
+ sectionId: "top",
3111
+ expanded: false,
3112
+ activeItemId,
3113
+ highlightedItemIds,
3114
+ iconMap,
3115
+ onItemSelect,
3116
+ moreIcon,
3117
+ onMoreClick,
3118
+ stateOverride: topItemStates?.[item.id]
3119
+ })
3120
+ )
3110
3121
  }
3111
3122
  ),
3112
3123
  /* @__PURE__ */ jsx40(HDivider, {})
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamoid/ui",
3
- "version": "0.3.4",
3
+ "version": "0.4.0",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",