@streamoid/ui 0.5.1 → 0.6.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.
package/dist/index.css CHANGED
@@ -2530,10 +2530,31 @@
2530
2530
  .ScPlanDetailsCard_scPairtextInstance {
2531
2531
  flex: 1 !important;
2532
2532
  }
2533
+ .ScPlanDetailsCard_badgeGroup {
2534
+ display: flex;
2535
+ align-items: center;
2536
+ gap: var(--spacing-sm, 0.375rem);
2537
+ min-width: 0;
2538
+ }
2533
2539
  .ScPlanDetailsCard_scBadgesInstance {
2534
2540
  width: 3.3125rem !important;
2535
2541
  align-self: unset !important;
2536
2542
  }
2543
+ .ScPlanDetailsCard_badgeDot {
2544
+ width: 0.25rem;
2545
+ height: 0.25rem;
2546
+ border-radius: var(--radius-full, 999px);
2547
+ background: var(--alias-text-and-icons-tertiary, #9e9e9e);
2548
+ flex-shrink: 0;
2549
+ }
2550
+ .ScPlanDetailsCard_badgeSubText {
2551
+ color: var(--alias-text-and-icons-tertiary, #9e9e9e);
2552
+ font-family: var(--text-text-sm-medium-font-family, "Inter-Medium", sans-serif);
2553
+ font-size: var(--text-text-sm-medium-font-size, 0.875rem);
2554
+ line-height: var(--text-text-sm-medium-line-height, 1.25rem);
2555
+ font-weight: var(--text-text-sm-medium-font-weight, 500);
2556
+ white-space: nowrap;
2557
+ }
2537
2558
  .ScPlanDetailsCard_scHDividerInstance {
2538
2559
  align-self: stretch !important;
2539
2560
  flex-shrink: 0 !important;
@@ -2601,7 +2622,53 @@
2601
2622
  }
2602
2623
  .ScPlanDetailsCard_scButtonInstance {
2603
2624
  flex-shrink: 0 !important;
2604
- width: 7.5rem !important;
2625
+ min-width: 7.5rem !important;
2626
+ width: auto !important;
2627
+ }
2628
+ .ScPlanDetailsCard_skeletonPill {
2629
+ display: block;
2630
+ border-radius: var(--radius-full, 999px);
2631
+ background:
2632
+ linear-gradient(
2633
+ 90deg,
2634
+ var(--alias-fill-neutral-neutral, #242424) 0%,
2635
+ var(--alias-border-subtle, #333333) 45%,
2636
+ var(--alias-fill-neutral-neutral, #242424) 90%);
2637
+ background-size: 200% 100%;
2638
+ animation: ScPlanDetailsCard_skeletonShimmer 1.1s ease-in-out infinite;
2639
+ }
2640
+ .ScPlanDetailsCard_badgeSkeleton {
2641
+ width: 3.3125rem;
2642
+ height: 1.75rem;
2643
+ }
2644
+ .ScPlanDetailsCard_planNameSkeleton {
2645
+ width: 4.25rem;
2646
+ height: 1.25rem;
2647
+ }
2648
+ .ScPlanDetailsCard_creditsSkeleton {
2649
+ width: 7.5rem;
2650
+ height: 1.25rem;
2651
+ margin-left: var(--spacing-md, 0.5rem);
2652
+ }
2653
+ .ScPlanDetailsCard_priceSkeleton {
2654
+ width: 5rem;
2655
+ height: 0.875rem;
2656
+ margin-top: 0.375rem;
2657
+ align-self: flex-start;
2658
+ }
2659
+ .ScPlanDetailsCard_buttonSkeleton {
2660
+ flex-shrink: 0;
2661
+ width: 7.5rem;
2662
+ height: 2.5rem;
2663
+ border-radius: var(--radius-xl, 0.75rem);
2664
+ }
2665
+ @keyframes ScPlanDetailsCard_skeletonShimmer {
2666
+ 0% {
2667
+ background-position: 100% 0;
2668
+ }
2669
+ 100% {
2670
+ background-position: -100% 0;
2671
+ }
2605
2672
  }
2606
2673
 
2607
2674
  /* src/SC-Profile/ScProfile.module.css */
@@ -3938,120 +4005,105 @@
3938
4005
  border-radius: var(--radius-full, 999px);
3939
4006
  }
3940
4007
 
3941
- /* src/SC-Guide/ScGuide.module.css */
3942
- .ScGuide_scGuide,
3943
- .ScGuide_scGuide * {
4008
+ /* src/SC-Sidebar Switch menu/ScSidebarSwitchMenu.module.css */
4009
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu,
4010
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu * {
3944
4011
  box-sizing: border-box;
3945
4012
  }
3946
- .ScGuide_scGuide {
3947
- background-color: var(--alias-surface-subtleraised, #1f1f1f);
4013
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu {
3948
4014
  border-radius: var(--radius-3xl, 1rem);
3949
- padding: var(--spacing-4xl, 1.125rem);
4015
+ padding: var(--spacing-md, 0.5rem) var(--spacing-xl, 0.75rem) var(--spacing-md, 0.5rem) var(--spacing-xl, 0.75rem);
4016
+ display: flex;
4017
+ flex-direction: row;
4018
+ gap: 0.5rem;
4019
+ align-items: flex-start;
4020
+ justify-content: flex-start;
4021
+ align-self: stretch;
4022
+ flex-shrink: 0;
4023
+ position: relative;
4024
+ cursor: pointer;
4025
+ }
4026
+ .ScSidebarSwitchMenu_iconWrapper {
4027
+ width: 1.25rem;
4028
+ height: 1.25rem;
4029
+ flex-shrink: 0;
3950
4030
  display: flex;
3951
- flex-direction: column;
3952
4031
  align-items: center;
3953
4032
  justify-content: center;
3954
- gap: var(--spacing-3xl, 1rem);
3955
- width: 16.3125rem;
3956
- position: relative;
4033
+ overflow: hidden;
3957
4034
  }
3958
- .ScGuide_header {
4035
+ .ScSidebarSwitchMenu_iconWrapper > * {
4036
+ max-width: 100%;
4037
+ max-height: 100%;
4038
+ }
4039
+ .ScSidebarSwitchMenu_content {
3959
4040
  display: flex;
3960
4041
  flex-direction: column;
3961
- align-items: flex-start;
3962
- gap: var(--spacing-lg, 0.625rem);
3963
- width: 100%;
3964
- word-break: break-word;
3965
- }
3966
- .ScGuide_title {
4042
+ flex: 1 0 0;
4043
+ min-width: 0;
4044
+ position: relative;
3967
4045
  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
3968
- font-size: var(--font-size-font-size-md, 1rem);
3969
- font-weight: 500;
3970
- line-height: var(--line-height-line-height-md, 1.5rem);
3971
- color: var(--alias-text-and-icons-primary, #f5f5f5);
3972
- width: 100%;
3973
- margin: 0;
4046
+ font-weight: var(--font-weight-font-weight-regular, 400);
4047
+ text-align: left;
3974
4048
  }
3975
- .ScGuide_description {
3976
- font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4049
+ .ScSidebarSwitchMenu_text {
4050
+ color: var(--alias-text---icons-tertiary, #9e9e9e);
3977
4051
  font-size: var(--font-size-font-size-sm, 0.875rem);
3978
- font-weight: 400;
3979
4052
  line-height: var(--line-height-line-height-sm, 1.25rem);
3980
- color: var(--alias-text-and-icons-tertiary, #9e9e9e);
4053
+ height: 1.25rem;
3981
4054
  width: 100%;
3982
- margin: 0;
4055
+ text-overflow: ellipsis;
4056
+ overflow: hidden;
4057
+ white-space: nowrap;
3983
4058
  }
3984
- .ScGuide_actions {
3985
- display: flex;
3986
- align-items: center;
3987
- justify-content: space-between;
4059
+ .ScSidebarSwitchMenu_description {
4060
+ color: var(--alias-text---icons-tertiary, #9e9e9e);
4061
+ font-size: var(--font-size-font-size-xs, 0.75rem);
4062
+ line-height: var(--line-height-line-height-xs, 1.125rem);
3988
4063
  width: 100%;
3989
- position: relative;
3990
- }
3991
- .ScGuide_stepIndicator {
3992
- position: absolute;
3993
- left: 50%;
3994
- top: 50%;
3995
- transform: translate(-50%, -50%);
3996
- pointer-events: none;
3997
- font-family: var(--font-family-font-family-body, "Inter", sans-serif);
3998
- font-size: var(--font-size-font-size-sm, 0.875rem);
3999
- font-weight: 400;
4000
- line-height: var(--line-height-line-height-sm, 1.25rem);
4001
- color: var(--alias-text-and-icons-tertiary, #9e9e9e);
4064
+ text-overflow: ellipsis;
4065
+ overflow: hidden;
4002
4066
  white-space: nowrap;
4003
4067
  }
4004
- .ScGuide_skipButton {
4005
- background: transparent;
4006
- border: none;
4007
- padding: 0;
4068
+ .ScSidebarSwitchMenu_moreIconWrapper {
4069
+ display: none;
4070
+ align-items: center;
4071
+ padding: 0.125rem;
4072
+ border-radius: var(--radius-md, 0.5rem);
4073
+ flex-shrink: 0;
4008
4074
  cursor: pointer;
4009
- font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4010
- font-size: var(--font-size-font-size-sm, 0.875rem);
4011
- font-weight: 400;
4012
- line-height: var(--line-height-line-height-sm, 1.25rem);
4013
- color: var(--alias-text-and-icons-tertiary, #9e9e9e);
4014
- white-space: nowrap;
4015
4075
  }
4016
- .ScGuide_skipButton:disabled {
4017
- cursor: default;
4018
- opacity: 0.5;
4076
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-active {
4077
+ background: var(--alias-fill-neutral-neutralselected, #242424);
4019
4078
  }
4020
- .ScGuide_skipSpacer {
4021
- visibility: hidden;
4079
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-active .ScSidebarSwitchMenu_text {
4080
+ color: var(--alias-text---icons-primary, #f5f5f5);
4022
4081
  }
4023
- .ScGuide_nextButton {
4024
- background: transparent;
4025
- border: none;
4026
- padding: 0;
4027
- display: inline-flex;
4028
- align-items: center;
4029
- cursor: pointer;
4030
- font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4031
- font-size: var(--font-size-font-size-sm, 0.875rem);
4032
- font-weight: 400;
4033
- line-height: var(--line-height-line-height-sm, 1.25rem);
4034
- white-space: nowrap;
4082
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-default-highlight .ScSidebarSwitchMenu_text {
4083
+ color: var(--alias-text---icons-primary, #f5f5f5);
4035
4084
  }
4036
- .ScGuide_nextButton:disabled {
4037
- cursor: default;
4038
- opacity: 0.5;
4085
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-default-active {
4086
+ background: var(--alias-surface-canvas, #0b0b0b);
4087
+ box-shadow: inset 0 0 0 0.5px var(--alias-border-subtle, #242424);
4039
4088
  }
4040
- .ScGuide_nextLabel {
4041
- background-image:
4042
- linear-gradient(
4043
- 74.117deg,
4044
- #d91536 15.098%,
4045
- #ee5e3a 84.955%);
4046
- -webkit-background-clip: text;
4047
- background-clip: text;
4048
- color: transparent;
4049
- -webkit-text-fill-color: transparent;
4089
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-default-active .ScSidebarSwitchMenu_text {
4090
+ color: var(--alias-text---icons-primary, #f5f5f5);
4050
4091
  }
4051
- .ScGuide_nextIcon {
4052
- display: inline-flex;
4092
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu:hover,
4093
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-hover {
4094
+ background: var(--alias-fill-neutral-neutral, #1a1a1a);
4095
+ }
4096
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu:hover .ScSidebarSwitchMenu_moreIconWrapper,
4097
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_state-hover .ScSidebarSwitchMenu_moreIconWrapper {
4098
+ display: flex;
4099
+ }
4100
+ .ScSidebarSwitchMenu_scSidebarSwitchMenu.ScSidebarSwitchMenu_variant-collapsed {
4101
+ padding: var(--spacing-md, 0.5rem);
4102
+ align-self: unset;
4053
4103
  align-items: center;
4054
- color: #ee5e3a;
4104
+ justify-content: center;
4105
+ width: 2.5rem;
4106
+ height: 2.5rem;
4055
4107
  }
4056
4108
 
4057
4109
  /* src/SC-SideBarLogoUnit/ScSideBarLogoUnit.module.css */
@@ -4155,6 +4207,122 @@
4155
4207
  background-color: var(--alias-fill-neutral-neutralplus, #151515);
4156
4208
  }
4157
4209
 
4210
+ /* src/SC-Guide/ScGuide.module.css */
4211
+ .ScGuide_scGuide,
4212
+ .ScGuide_scGuide * {
4213
+ box-sizing: border-box;
4214
+ }
4215
+ .ScGuide_scGuide {
4216
+ background-color: var(--alias-surface-subtleraised, #1f1f1f);
4217
+ border-radius: var(--radius-3xl, 1rem);
4218
+ padding: var(--spacing-4xl, 1.125rem);
4219
+ display: flex;
4220
+ flex-direction: column;
4221
+ align-items: center;
4222
+ justify-content: center;
4223
+ gap: var(--spacing-3xl, 1rem);
4224
+ width: 16.3125rem;
4225
+ position: relative;
4226
+ }
4227
+ .ScGuide_header {
4228
+ display: flex;
4229
+ flex-direction: column;
4230
+ align-items: flex-start;
4231
+ gap: var(--spacing-lg, 0.625rem);
4232
+ width: 100%;
4233
+ word-break: break-word;
4234
+ }
4235
+ .ScGuide_title {
4236
+ font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4237
+ font-size: var(--font-size-font-size-md, 1rem);
4238
+ font-weight: 500;
4239
+ line-height: var(--line-height-line-height-md, 1.5rem);
4240
+ color: var(--alias-text-and-icons-primary, #f5f5f5);
4241
+ width: 100%;
4242
+ margin: 0;
4243
+ }
4244
+ .ScGuide_description {
4245
+ font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4246
+ font-size: var(--font-size-font-size-sm, 0.875rem);
4247
+ font-weight: 400;
4248
+ line-height: var(--line-height-line-height-sm, 1.25rem);
4249
+ color: var(--alias-text-and-icons-tertiary, #9e9e9e);
4250
+ width: 100%;
4251
+ margin: 0;
4252
+ }
4253
+ .ScGuide_actions {
4254
+ display: flex;
4255
+ align-items: center;
4256
+ justify-content: space-between;
4257
+ width: 100%;
4258
+ position: relative;
4259
+ }
4260
+ .ScGuide_stepIndicator {
4261
+ position: absolute;
4262
+ left: 50%;
4263
+ top: 50%;
4264
+ transform: translate(-50%, -50%);
4265
+ pointer-events: none;
4266
+ font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4267
+ font-size: var(--font-size-font-size-sm, 0.875rem);
4268
+ font-weight: 400;
4269
+ line-height: var(--line-height-line-height-sm, 1.25rem);
4270
+ color: var(--alias-text-and-icons-tertiary, #9e9e9e);
4271
+ white-space: nowrap;
4272
+ }
4273
+ .ScGuide_skipButton {
4274
+ background: transparent;
4275
+ border: none;
4276
+ padding: 0;
4277
+ cursor: pointer;
4278
+ font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4279
+ font-size: var(--font-size-font-size-sm, 0.875rem);
4280
+ font-weight: 400;
4281
+ line-height: var(--line-height-line-height-sm, 1.25rem);
4282
+ color: var(--alias-text-and-icons-tertiary, #9e9e9e);
4283
+ white-space: nowrap;
4284
+ }
4285
+ .ScGuide_skipButton:disabled {
4286
+ cursor: default;
4287
+ opacity: 0.5;
4288
+ }
4289
+ .ScGuide_skipSpacer {
4290
+ visibility: hidden;
4291
+ }
4292
+ .ScGuide_nextButton {
4293
+ background: transparent;
4294
+ border: none;
4295
+ padding: 0;
4296
+ display: inline-flex;
4297
+ align-items: center;
4298
+ cursor: pointer;
4299
+ font-family: var(--font-family-font-family-body, "Inter", sans-serif);
4300
+ font-size: var(--font-size-font-size-sm, 0.875rem);
4301
+ font-weight: 400;
4302
+ line-height: var(--line-height-line-height-sm, 1.25rem);
4303
+ white-space: nowrap;
4304
+ }
4305
+ .ScGuide_nextButton:disabled {
4306
+ cursor: default;
4307
+ opacity: 0.5;
4308
+ }
4309
+ .ScGuide_nextLabel {
4310
+ background-image:
4311
+ linear-gradient(
4312
+ 74.117deg,
4313
+ #d91536 15.098%,
4314
+ #ee5e3a 84.955%);
4315
+ -webkit-background-clip: text;
4316
+ background-clip: text;
4317
+ color: transparent;
4318
+ -webkit-text-fill-color: transparent;
4319
+ }
4320
+ .ScGuide_nextIcon {
4321
+ display: inline-flex;
4322
+ align-items: center;
4323
+ color: #ee5e3a;
4324
+ }
4325
+
4158
4326
  /* src/SC-Slider/ScSlider.module.css */
4159
4327
  .ScSlider_scSlider,
4160
4328
  .ScSlider_scSlider * {
@@ -7155,10 +7323,75 @@
7155
7323
  font-weight: 500;
7156
7324
  width: 100%;
7157
7325
  }
7326
+ .ScPlanDetailsCardMobile_badgeGroup {
7327
+ display: flex;
7328
+ align-items: center;
7329
+ gap: var(--spacing-sm, 0.375rem);
7330
+ min-width: 0;
7331
+ }
7158
7332
  .ScPlanDetailsCardMobile_scBadgesInstance {
7159
7333
  flex-shrink: 0 !important;
7160
7334
  }
7335
+ .ScPlanDetailsCardMobile_badgeDot {
7336
+ width: 0.25rem;
7337
+ height: 0.25rem;
7338
+ border-radius: var(--radius-full, 999px);
7339
+ background: var(--alias-text-and-icons-tertiary, #9e9e9e);
7340
+ flex-shrink: 0;
7341
+ }
7342
+ .ScPlanDetailsCardMobile_badgeSubText {
7343
+ color: var(--alias-text-and-icons-tertiary, #9e9e9e);
7344
+ font-family: var(--font-family-font-family-body, "Inter", sans-serif);
7345
+ font-size: var(--font-size-font-size-sm, 0.875rem);
7346
+ line-height: var(--line-height-line-height-sm, 1.25rem);
7347
+ font-weight: 500;
7348
+ white-space: nowrap;
7349
+ }
7161
7350
  .ScPlanDetailsCardMobile_scButtonInstance {
7162
7351
  width: 100% !important;
7163
7352
  flex-shrink: 0 !important;
7164
7353
  }
7354
+ .ScPlanDetailsCardMobile_skeletonPill {
7355
+ display: block;
7356
+ border-radius: var(--radius-full, 999px);
7357
+ background:
7358
+ linear-gradient(
7359
+ 90deg,
7360
+ var(--alias-fill-neutral-neutral, #242424) 0%,
7361
+ var(--alias-border-subtle, #333333) 45%,
7362
+ var(--alias-fill-neutral-neutral, #242424) 90%);
7363
+ background-size: 200% 100%;
7364
+ animation: ScPlanDetailsCardMobile_skeletonShimmer 1.1s ease-in-out infinite;
7365
+ }
7366
+ .ScPlanDetailsCardMobile_badgeSkeleton {
7367
+ width: 3.3125rem;
7368
+ height: 1.75rem;
7369
+ }
7370
+ .ScPlanDetailsCardMobile_planNameSkeleton {
7371
+ width: 4.25rem;
7372
+ height: 1.25rem;
7373
+ }
7374
+ .ScPlanDetailsCardMobile_creditsSkeleton {
7375
+ width: 7.5rem;
7376
+ height: 1.25rem;
7377
+ margin-left: var(--spacing-md, 0.5rem);
7378
+ }
7379
+ .ScPlanDetailsCardMobile_priceSkeleton {
7380
+ width: 5rem;
7381
+ height: 0.875rem;
7382
+ margin-top: 0.375rem;
7383
+ align-self: flex-start;
7384
+ }
7385
+ .ScPlanDetailsCardMobile_buttonSkeleton {
7386
+ width: 100%;
7387
+ height: 2.5rem;
7388
+ border-radius: var(--radius-xl, 0.75rem);
7389
+ }
7390
+ @keyframes ScPlanDetailsCardMobile_skeletonShimmer {
7391
+ 0% {
7392
+ background-position: 100% 0;
7393
+ }
7394
+ 100% {
7395
+ background-position: -100% 0;
7396
+ }
7397
+ }
package/dist/index.d.mts CHANGED
@@ -205,12 +205,14 @@ interface IScPlanDetailsCardProps extends React.HTMLAttributes<HTMLDivElement> {
205
205
  planCredits?: string;
206
206
  planPrice?: string;
207
207
  badgeText?: string;
208
+ badgeSubText?: string;
208
209
  currentPlanLabel?: string;
209
210
  upgradeButtonText?: string;
211
+ isLoading?: boolean;
210
212
  onUpgrade?: () => void;
211
213
  className?: string;
212
214
  }
213
- declare const ScPlanDetailsCard: ({ planName, planCredits, planPrice, badgeText, currentPlanLabel, upgradeButtonText, onUpgrade, className, ...props }: IScPlanDetailsCardProps) => JSX.Element;
215
+ declare const ScPlanDetailsCard: ({ planName, planCredits, planPrice, badgeText, badgeSubText, currentPlanLabel, upgradeButtonText, isLoading, onUpgrade, className, ...props }: IScPlanDetailsCardProps) => JSX.Element;
214
216
 
215
217
  interface IScProfileProps extends React.HTMLAttributes<HTMLDivElement> {
216
218
  name?: string;
@@ -310,6 +312,10 @@ interface StreamoidSidebarProps {
310
312
  profile?: SidebarProfileConfig;
311
313
  versionText?: string;
312
314
  toggleIcon?: ReactNode | ((expanded: boolean) => ReactNode);
315
+ /** Footer = profile (flex-1) + a SEPARATE collapse-toggle button beside it,
316
+ * with no version footer. Each is its own interactive unit. Expanded layout
317
+ * only; collapsed is unaffected. */
318
+ toggleInProfile?: boolean;
313
319
  hideFooter?: boolean;
314
320
  preFooterContent?: ReactNode;
315
321
  bodyContent?: ReactNode;
@@ -322,7 +328,7 @@ interface StreamoidSidebarProps {
322
328
  /** Explicit state override per top item id — takes priority over activeItemId/highlightedItemIds for top items */
323
329
  topItemStates?: Record<string, "default" | "active" | "hover" | "default-highlight" | "default-active">;
324
330
  }
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;
331
+ declare function StreamoidSidebar({ expanded, onToggle, config, iconMap, activeItemId, highlightedItemIds, onItemSelect, moreIcon, onMoreClick, expandedLogo, collapsedLogo, profile, versionText, toggleIcon, toggleInProfile, hideFooter, preFooterContent, bodyContent, showBody, isMobile, className, style, topItems, topItemStates, }: StreamoidSidebarProps): react_jsx_runtime.JSX.Element;
326
332
 
327
333
  interface ArtifaxMenuItem {
328
334
  id: string;
@@ -392,6 +398,64 @@ interface IScArtifaxSidebarProps {
392
398
  }
393
399
  declare const ScArtifaxSidebar: ({ expanded, onToggle, sections, iconMap, activeItemId, onItemSelect, expandedLogo, collapsedLogo, creditWarning, assistantCta, profile, toggleIcon, openSections, onSectionToggle, className, style, }: IScArtifaxSidebarProps) => JSX.Element;
394
400
 
401
+ interface CatalogixNavItem {
402
+ id: string;
403
+ label: string;
404
+ iconKey: string;
405
+ }
406
+ interface CatalogixSidebarIconContext {
407
+ active: boolean;
408
+ expanded: boolean;
409
+ }
410
+ type CatalogixSidebarIconRenderer = (context: CatalogixSidebarIconContext) => ReactNode;
411
+ type CatalogixSidebarIconMap = Record<string, ReactNode | CatalogixSidebarIconRenderer>;
412
+ interface CatalogixSidebarProfile {
413
+ name: string;
414
+ subtitle?: string;
415
+ avatar?: ReactNode;
416
+ onClick?: () => void;
417
+ }
418
+ interface CatalogixSidebarCreditWarning {
419
+ availableCredits: number;
420
+ remainingPct: number;
421
+ level?: "warning" | "danger";
422
+ onBuyCredits: () => void;
423
+ onCollapsedClick?: () => void;
424
+ }
425
+ interface CatalogixSwitchApp {
426
+ id: string;
427
+ name: string;
428
+ description?: string;
429
+ icon?: ReactNode;
430
+ onClick?: () => void;
431
+ }
432
+ interface IScCatalogixSidebarProps {
433
+ expanded: boolean;
434
+ onToggle: () => void;
435
+ /** Nav items below the logo. Defaults to Stores / AI Training / Insights. */
436
+ items?: CatalogixNavItem[];
437
+ /** Maps each item's iconKey to an icon (node or render fn). Defaults supply
438
+ * Stores/AI Training/Insights icons; override per the product's set. */
439
+ iconMap?: CatalogixSidebarIconMap;
440
+ activeItemId?: string;
441
+ onItemSelect?: (item: CatalogixNavItem) => void;
442
+ /** Other products shown inline below the logo when the switch chip is
443
+ * clicked (the same "switch apps" list used across the sidebars). */
444
+ switchApps?: CatalogixSwitchApp[];
445
+ /** Fires (in addition to toggling the inline list) when the switch chip is
446
+ * clicked — e.g. to lazy-load the product list. */
447
+ onLogoClick?: () => void;
448
+ /** Logo nodes. Default to the built-in Catalogix wordmark logo unit. */
449
+ expandedLogo?: ReactNode;
450
+ collapsedLogo?: ReactNode;
451
+ profile?: CatalogixSidebarProfile;
452
+ creditWarning?: CatalogixSidebarCreditWarning | null;
453
+ toggleIcon?: ReactNode | ((expanded: boolean) => ReactNode);
454
+ className?: string;
455
+ style?: CSSProperties;
456
+ }
457
+ declare const ScCatalogixSidebar: ({ expanded, onToggle, items, iconMap, activeItemId, onItemSelect, switchApps, onLogoClick, expandedLogo, collapsedLogo, profile, creditWarning, toggleIcon, className, style, }: IScCatalogixSidebarProps) => JSX.Element;
458
+
395
459
  interface IScGuideProps {
396
460
  /** Heading text. */
397
461
  title?: ReactNode;
@@ -422,13 +486,42 @@ interface IScGuideProps {
422
486
  }
423
487
  declare const ScGuide: ({ title, description, skipLabel, nextLabel, nextIcon, stepLabel, onSkip, onNext, hideSkip, hideNext, disabled, className, style, }: IScGuideProps) => JSX.Element;
424
488
 
489
+ interface MarkPath {
490
+ d: string;
491
+ fillRule?: "evenodd" | "nonzero";
492
+ clipRule?: "evenodd" | "nonzero";
493
+ }
494
+ interface Wordmark {
495
+ viewBox: string;
496
+ width: number;
497
+ paths: MarkPath[];
498
+ }
499
+ declare const WORDMARKS: Record<string, Wordmark>;
500
+ type SidebarProduct = keyof typeof WORDMARKS;
501
+ /** Full product wordmark (expanded sidebar). */
502
+ declare function ProductWordmark({ product, style, }: {
503
+ product: SidebarProduct;
504
+ style?: CSSProperties;
505
+ }): JSX.Element | null;
506
+ /** Square product icon (collapsed sidebar). Returns null if the product has no
507
+ * collapsed mark defined yet. */
508
+ declare function ProductCollapsedMark({ product, style, }: {
509
+ product: SidebarProduct;
510
+ style?: CSSProperties;
511
+ }): JSX.Element | null;
512
+ /** True when the product has a dedicated collapsed icon. */
513
+ declare function hasCollapsedMark(product: SidebarProduct): boolean;
514
+
425
515
  interface IScSideBarLogoUnitProps {
426
516
  /** "expanded" renders the merged wordmark + switcher row.
427
517
  * "collapsed" renders a bare clickable product icon. */
428
518
  state?: "expanded" | "collapsed";
429
519
  /** In expanded state: the stacked "Product / Streamoid" wordmark `<img>`.
430
- * In collapsed state: the square product icon `<img>`. */
520
+ * In collapsed state: the square product icon `<img>`. Overrides `product`. */
431
521
  wordmark?: ReactNode;
522
+ /** Built-in branded wordmark to render when `wordmark` is not supplied
523
+ * (e.g. "CXO", "Catalogix"). The mark follows the surrounding text color. */
524
+ product?: SidebarProduct;
432
525
  /** Click handler for the whole row (wordmark + switcher are one click
433
526
  * target now — matches the design intent). */
434
527
  onClick?: () => void;
@@ -452,7 +545,7 @@ interface IScSideBarLogoUnitProps {
452
545
  className?: string;
453
546
  style?: CSSProperties;
454
547
  }
455
- declare const ScSideBarLogoUnit: ({ state, wordmark, onClick, onSwitchClick, switchAriaLabel, hideSwitch, hover, disabled, className, style, }: IScSideBarLogoUnitProps) => JSX.Element;
548
+ declare const ScSideBarLogoUnit: ({ state, wordmark, product, onClick, onSwitchClick, switchAriaLabel, hideSwitch, hover, disabled, className, style, }: IScSideBarLogoUnitProps) => JSX.Element;
456
549
 
457
550
  interface IScSidebarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
458
551
  icon?: JSX.Element;
@@ -465,6 +558,18 @@ interface IScSidebarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
465
558
  }
466
559
  declare const ScSidebarMenu: ({ icon, state, variant, className, text, moreIcon, onMoreClick, ...props }: IScSidebarMenuProps) => JSX.Element;
467
560
 
561
+ interface IScSidebarSwitchMenuProps extends React.HTMLAttributes<HTMLDivElement> {
562
+ icon?: ReactNode;
563
+ state?: "default" | "active" | "hover" | "default-highlight" | "default-active";
564
+ variant?: "expanded" | "collapsed";
565
+ className?: string;
566
+ text?: string;
567
+ description?: string;
568
+ moreIcon?: ReactNode;
569
+ onMoreClick?: (e: React.MouseEvent) => void;
570
+ }
571
+ declare const ScSidebarSwitchMenu: ({ icon, state, variant, className, text, description, moreIcon, onMoreClick, ...props }: IScSidebarSwitchMenuProps) => JSX.Element;
572
+
468
573
  interface IScSidebarProfileProps extends React.HTMLAttributes<HTMLDivElement> {
469
574
  state?: "default" | "hover";
470
575
  variant?: "expanded" | "collapsed";
@@ -1069,11 +1174,13 @@ interface IScPlanDetailsCardMobileProps extends React.HTMLAttributes<HTMLDivElem
1069
1174
  planCredits?: string;
1070
1175
  planPrice?: string;
1071
1176
  badgeText?: string;
1177
+ badgeSubText?: string;
1072
1178
  currentPlanLabel?: string;
1073
1179
  upgradeButtonText?: string;
1180
+ isLoading?: boolean;
1074
1181
  onUpgrade?: () => void;
1075
1182
  className?: string;
1076
1183
  }
1077
- declare const ScPlanDetailsCardMobile: ({ planName, planCredits, planPrice, badgeText, currentPlanLabel, upgradeButtonText, onUpgrade, className, ...props }: IScPlanDetailsCardMobileProps) => JSX.Element;
1184
+ declare const ScPlanDetailsCardMobile: ({ planName, planCredits, planPrice, badgeText, badgeSubText, currentPlanLabel, upgradeButtonText, isLoading, onUpgrade, className, ...props }: IScPlanDetailsCardMobileProps) => JSX.Element;
1078
1185
 
1079
- export { type ArtifaxMenuItem, type ArtifaxSection, type ArtifaxSidebarAssistantCta, type ArtifaxSidebarCreditWarning, type ArtifaxSidebarIconContext, type ArtifaxSidebarIconMap, type ArtifaxSidebarIconRenderer, type ArtifaxSidebarProfile, CreditWarningBanner, type CreditWarningBannerProps, type IInvoiceHistoryMobileProps, type IScAccessProps, type IScAppCardProps, type IScAppCardV3Props, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScArtifaxSidebarProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScBriefCardProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardMobileProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScGuideProps, type IScHDividerProps, type IScHeaderProps, type IScImageFieldProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScMobileBottomActionProps, type IScMobileTopNavProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardMobileProps, type IScPlanDetailsCardProps, type IScPopUpMenuProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProfileV2MobileProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralCardMobileProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleMobileProps, type IScRoleProps, type IScSettingsNavProps, type IScSettingsTabCompProps, type IScSideBarLogoUnitProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListMobileProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, type IScWorkspaceSettingsMobileProps, type IScWorkspaceSwitchMobileProps, type IScWorkspaceSwitchMobileV2Props, type IUsageHistoryMobileProps, InvoiceHistoryMobile, NscWorkspaceSwitch, type PlanFeatureSection, ScAccess, ScAppCard, ScAppCardV3, ScAppField, ScAppListingCard, ScArtifaxInvite, ScArtifaxSidebar, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScBriefCard, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScCreditsUsageCardMobile, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScGuide, ScHDivider, ScHeader, ScImageField, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScMobileBottomAction, ScMobileTopNav, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScPlanDetailsCardMobile, ScPopUpMenu, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProfileV2Mobile, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralCardMobile, ScReferralTableHeader, ScReferralTableList, ScRole, ScRoleMobile, ScSettingsNav, ScSettingsTabComp, ScSideBarLogoUnit, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTableListMobile, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSettingsMobile, ScWorkspaceSwitchCard, type ScWorkspaceSwitchCardProps, ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, UsageHistoryMobile, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };
1186
+ export { type ArtifaxMenuItem, type ArtifaxSection, type ArtifaxSidebarAssistantCta, type ArtifaxSidebarCreditWarning, type ArtifaxSidebarIconContext, type ArtifaxSidebarIconMap, type ArtifaxSidebarIconRenderer, type ArtifaxSidebarProfile, type CatalogixNavItem, type CatalogixSidebarCreditWarning, type CatalogixSidebarIconContext, type CatalogixSidebarIconMap, type CatalogixSidebarIconRenderer, type CatalogixSidebarProfile, type CatalogixSwitchApp, CreditWarningBanner, type CreditWarningBannerProps, type IInvoiceHistoryMobileProps, type IScAccessProps, type IScAppCardProps, type IScAppCardV3Props, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScArtifaxSidebarProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScBriefCardProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCatalogixSidebarProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardMobileProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScGuideProps, type IScHDividerProps, type IScHeaderProps, type IScImageFieldProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScMobileBottomActionProps, type IScMobileTopNavProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardMobileProps, type IScPlanDetailsCardProps, type IScPopUpMenuProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProfileV2MobileProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralCardMobileProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleMobileProps, type IScRoleProps, type IScSettingsNavProps, type IScSettingsTabCompProps, type IScSideBarLogoUnitProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSidebarSwitchMenuProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListMobileProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, type IScWorkspaceSettingsMobileProps, type IScWorkspaceSwitchMobileProps, type IScWorkspaceSwitchMobileV2Props, type IUsageHistoryMobileProps, InvoiceHistoryMobile, NscWorkspaceSwitch, type PlanFeatureSection, ProductCollapsedMark, ProductWordmark, ScAccess, ScAppCard, ScAppCardV3, ScAppField, ScAppListingCard, ScArtifaxInvite, ScArtifaxSidebar, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScBriefCard, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCatalogixSidebar, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScCreditsUsageCardMobile, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScGuide, ScHDivider, ScHeader, ScImageField, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScMobileBottomAction, ScMobileTopNav, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScPlanDetailsCardMobile, ScPopUpMenu, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProfileV2Mobile, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralCardMobile, ScReferralTableHeader, ScReferralTableList, ScRole, ScRoleMobile, ScSettingsNav, ScSettingsTabComp, ScSideBarLogoUnit, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSidebarSwitchMenu, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTableListMobile, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSettingsMobile, ScWorkspaceSwitchCard, type ScWorkspaceSwitchCardProps, ScWorkspaceSwitchMobile, ScWorkspaceSwitchMobileV2, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProduct, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, UsageHistoryMobile, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem, hasCollapsedMark };