@streamoid/ui 0.2.2 → 0.2.4

package/dist/index.css

@@ -1972,6 +1972,31 @@
   flex-shrink: 0 !important;
   width: 7.5rem !important;
 }
+.ScCreditsUsageCard_buttonTooltipWrap {
+  position: relative;
+  flex-shrink: 0;
+}
+.ScCreditsUsageCard_buttonTooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--alias-surface-raised, #242424);
+  color: var(--alias-text-and-icons-primary, #f5f5f5);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-xs, 0.75rem);
+  line-height: var(--line-height-line-height-xs, 1.125rem);
+  padding: var(--spacing-sm, 4px) var(--spacing-lg, 10px);
+  border-radius: var(--radius-md, 8px);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 10;
+}
+.ScCreditsUsageCard_buttonTooltipWrap:hover .ScCreditsUsageCard_buttonTooltip {
+  opacity: 1;
+}
 
 /* src/SC-Progress bar/ScProgressBar.module.css */
 .ScProgressBar_scProgressBar,
@@ -2442,7 +2467,7 @@
   flex-shrink: 0;
 }
 .ScPlanCard_featureText {
-  color: #9e9e9e;
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
   text-align: left;
   font-family: var( --text-text-sm-regular-font-family, "Inter-Regular", sans-serif );
   font-size: var(--text-text-sm-regular-font-size, 0.875rem);
@@ -2450,7 +2475,7 @@
   font-weight: var(--text-text-sm-regular-font-weight, 400);
 }
 .ScPlanCard_description {
-  color: #9e9e9e;
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
   text-align: left;
   font-family: var( --lead-text-lead-text-xs-regular-font-family, "Inter-Regular", sans-serif );
   font-size: var(--lead-text-lead-text-xs-regular-font-size, 1.125rem);
@@ -4812,6 +4837,13 @@
   font-weight: 500;
   line-height: var(--line-height-line-height-sm, 1.25rem);
 }
+.ScWorkspaceSwitchCard_detailValueInfo {
+  color: var(--alias-text-and-icons-info, #2d8fe6);
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  font-weight: 500;
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+}
 .ScWorkspaceSwitchCard_detailValueSecondary {
   color: var(--alias-text-and-icons-secondary, #dadada);
   font-family: var(--font-family-font-family-body, "Inter", sans-serif);

package/dist/index.d.mts

@@ -84,11 +84,12 @@ interface IScCreditsUsageCardProps extends React.HTMLAttributes<HTMLDivElement>
     remainingText?: string;
     buyButtonText?: string;
     buyButtonState?: "default" | "disabled";
+    buyButtonHoverText?: string;
     onBuyClick?: () => void;
     progress?: number;
     className?: string;
 }
-declare const ScCreditsUsageCard: ({ usageLabel, usageText, remainingText, buyButtonText, buyButtonState, onBuyClick, progress, className, ...props }: IScCreditsUsageCardProps) => JSX.Element;
+declare const ScCreditsUsageCard: ({ usageLabel, usageText, remainingText, buyButtonText, buyButtonState, buyButtonHoverText, onBuyClick, progress, className, ...props }: IScCreditsUsageCardProps) => JSX.Element;
 
 interface ScDpProps {
     /** "initial" shows initials text, "image" shows an image. */
@@ -574,13 +575,12 @@ interface NscWorkspaceSwitchProps {
     initials?: string;
     imageUrl?: string;
     type?: "currentWS" | "otherWS";
-    variant?: "switch" | "settings";
     hover?: boolean;
     className?: string;
     onSwitch?: () => void;
     onSettings?: () => void;
 }
-declare function NscWorkspaceSwitch({ wsName, role, plan, ownerId, initials, imageUrl, type, variant, hover, className, onSwitch, onSettings, }: NscWorkspaceSwitchProps): react_jsx_runtime.JSX.Element;
+declare function NscWorkspaceSwitch({ wsName, role, plan, ownerId, initials, imageUrl, type, hover, className, onSwitch, onSettings, }: NscWorkspaceSwitchProps): react_jsx_runtime.JSX.Element;
 declare const ScWorkspaceSwitchCard: typeof NscWorkspaceSwitch;
 
 export { type IScAccessProps, type IScAppCardProps, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScHDividerProps, type IScHeaderProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleProps, type IScSettingsNavProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, NscWorkspaceSwitch, type NscWorkspaceSwitchProps, type PlanFeatureSection, ScAccess, ScAppCard, ScAppField, ScAppListingCard, ScArtifaxInvite, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScHDivider, ScHeader, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralTableHeader, ScReferralTableList, ScRole, ScSettingsNav, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSwitchCard, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };

package/dist/index.d.ts

@@ -84,11 +84,12 @@ interface IScCreditsUsageCardProps extends React.HTMLAttributes<HTMLDivElement>
     remainingText?: string;
     buyButtonText?: string;
     buyButtonState?: "default" | "disabled";
+    buyButtonHoverText?: string;
     onBuyClick?: () => void;
     progress?: number;
     className?: string;
 }
-declare const ScCreditsUsageCard: ({ usageLabel, usageText, remainingText, buyButtonText, buyButtonState, onBuyClick, progress, className, ...props }: IScCreditsUsageCardProps) => JSX.Element;
+declare const ScCreditsUsageCard: ({ usageLabel, usageText, remainingText, buyButtonText, buyButtonState, buyButtonHoverText, onBuyClick, progress, className, ...props }: IScCreditsUsageCardProps) => JSX.Element;
 
 interface ScDpProps {
     /** "initial" shows initials text, "image" shows an image. */
@@ -574,13 +575,12 @@ interface NscWorkspaceSwitchProps {
     initials?: string;
     imageUrl?: string;
     type?: "currentWS" | "otherWS";
-    variant?: "switch" | "settings";
     hover?: boolean;
     className?: string;
     onSwitch?: () => void;
     onSettings?: () => void;
 }
-declare function NscWorkspaceSwitch({ wsName, role, plan, ownerId, initials, imageUrl, type, variant, hover, className, onSwitch, onSettings, }: NscWorkspaceSwitchProps): react_jsx_runtime.JSX.Element;
+declare function NscWorkspaceSwitch({ wsName, role, plan, ownerId, initials, imageUrl, type, hover, className, onSwitch, onSettings, }: NscWorkspaceSwitchProps): react_jsx_runtime.JSX.Element;
 declare const ScWorkspaceSwitchCard: typeof NscWorkspaceSwitch;
 
 export { type IScAccessProps, type IScAppCardProps, type IScAppFieldProps, type IScAppListingCardProps, type IScArtifaxInviteProps, type IScBadgesProps, type IScBillingHistoryHeaderProps, type IScBillingHistoryTableListProps, type IScBillingLogsTableHeaderProps, type IScBillingLogsTableListProps, type IScButtonProps, type IScCalendarDateCompsProps, type IScCalendarProps, type IScCatalogixInviteProps, type IScCheckFieldProps, type IScCheckboxProps, type IScCreditsUsageCardProps, type IScFieldButtonProps, type IScGoogleSignInProps, type IScHDividerProps, type IScHeaderProps, type IScIntialProfileCoverProps, type IScLogoUnitProps, type IScMenuOptionsProps, type IScOnlyFieldProps, type IScOnlyIconProps, type IScPairtextProps, type IScPendingActionProps, type IScPhtogenixInviteProps, type IScPlanCardProps, type IScPlanDetailsCardProps, type IScProfileImageUpdateProps, type IScProfileOptionsProps, type IScProfileProps, type IScProfileSettingsCompProps, type IScProgressBarProps, type IScQuickPromptProps, type IScRadioProps, type IScReferralTableHeaderProps, type IScReferralTableListProps, type IScRoleProps, type IScSettingsNavProps, type IScSidebarIconsProps, type IScSidebarMenuProps, type IScSidebarProfileProps, type IScSidebarProps, type IScSliderProps, type IScStrLogoProps, type IScTabCompProps, type IScTabFieldProps, type IScTabSwitcherProps, type IScTableHeaderProps, type IScTableListProps, type IScTextFieldProps, type IScToggleSwitchProps, type IScVDividerProps, type IScVersionProps, type IScWorkspaceCardProps, NscWorkspaceSwitch, type NscWorkspaceSwitchProps, type PlanFeatureSection, ScAccess, ScAppCard, ScAppField, ScAppListingCard, ScArtifaxInvite, ScBadges, ScBillingHistoryHeader, ScBillingHistoryTableList, ScBillingLogsTableHeader, ScBillingLogsTableList, ScButton, ScCalendar, ScCalendarDateComps, ScCatalogixInvite, ScCheckField, ScCheckbox, ScCreditsUsageCard, ScDp, type ScDpProps, ScFieldButton, ScGoogleSignIn, ScHDivider, ScHeader, ScIntialProfileCover, ScLogoUnit, ScMenuOptions, ScOnlyField, ScOnlyIcon, ScPairtext, ScPendingAction, ScPhtogenixInvite, ScPlanCard, ScPlanDetailsCard, ScProfile, ScProfileImageUpdate, ScProfileOptions, ScProfileSettingsComp, ScProgressBar, ScQuickPrompt, ScRadio, ScReferralTableHeader, ScReferralTableList, ScRole, ScSettingsNav, ScSidebar, ScSidebarIcons, ScSidebarMenu, ScSidebarProfile, ScSlider, ScStrLogo, ScTabComp, ScTabField, ScTabSwitcher, ScTableHeader, ScTableList, ScTextField, ScToggleSwitch, ScVDivider, ScVersion, ScWorkspaceCard, ScWorkspaceSwitchCard, type SidebarConfig, type SidebarIconContext, type SidebarIconMap, type SidebarIconRenderer, type SidebarMenuItemConfig, type SidebarProfileConfig, type SidebarSectionConfig, StreamoidSidebar, type StreamoidSidebarProps, StreamoidWorkspaceSwitcher, type StreamoidWorkspaceSwitcherProps, type WorkspaceSwitcherConfig, type WorkspaceSwitcherItem };

package/dist/index.js

@@ -864,6 +864,9 @@ var ScCalendar = ({
   ] });
 };
 
+// src/SC-Credits usage card/ScCreditsUsageCard.tsx
+var import_react2 = require("react");
+
 // src/SC-Credits usage card/ScCreditsUsageCard.module.css
 var ScCreditsUsageCard_default = {
   scCreditsUsageCard: "ScCreditsUsageCard_scCreditsUsageCard",
@@ -874,7 +877,9 @@ var ScCreditsUsageCard_default = {
   progressContainer: "ScCreditsUsageCard_progressContainer",
   scProgressBarInstance: "ScCreditsUsageCard_scProgressBarInstance",
   remainingText: "ScCreditsUsageCard_remainingText",
-  scButtonInstance: "ScCreditsUsageCard_scButtonInstance"
+  scButtonInstance: "ScCreditsUsageCard_scButtonInstance",
+  buttonTooltipWrap: "ScCreditsUsageCard_buttonTooltipWrap",
+  buttonTooltip: "ScCreditsUsageCard_buttonTooltip"
 };
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
@@ -912,11 +917,14 @@ var ScCreditsUsageCard = ({
   remainingText = "60% Remaining",
   buyButtonText = "Buy credits",
   buyButtonState = "default",
+  buyButtonHoverText,
   onBuyClick,
   progress = 60,
   className,
   ...props
 }) => {
+  const [btnHovered, setBtnHovered] = (0, import_react2.useState)(false);
+  const displayText = btnHovered && buyButtonHoverText ? buyButtonHoverText : buyButtonText;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: ScCreditsUsageCard_default.header, children: [
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -946,15 +954,23 @@ var ScCreditsUsageCard = ({
         " "
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-        ScButton,
+        "div",
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons8.SiconHome, { className: ScCreditsUsageCard_default.siconHomeInstance }),
-          text: buyButtonText,
-          variant: "secondary",
-          size: "md",
-          state: buyButtonState,
-          className: ScCreditsUsageCard_default.scButtonInstance,
-          onClick: onBuyClick
+          className: ScCreditsUsageCard_default.buttonTooltipWrap,
+          onMouseEnter: () => setBtnHovered(true),
+          onMouseLeave: () => setBtnHovered(false),
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            ScButton,
+            {
+              icon: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_icons8.SiconHome, { className: ScCreditsUsageCard_default.siconHomeInstance }),
+              text: displayText,
+              variant: "secondary",
+              size: "md",
+              state: buyButtonState,
+              className: ScCreditsUsageCard_default.scButtonInstance,
+              onClick: onBuyClick
+            }
+          )
         }
       )
     ] })
@@ -962,7 +978,7 @@ var ScCreditsUsageCard = ({
 };
 
 // src/SC-Dp/ScDp.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/SC-Dp/ScDp.module.css
 var ScDp_default = {
@@ -987,7 +1003,7 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = (0, import_react2.useState)(false);
+  const [imageFailed, setImageFailed] = (0, import_react3.useState)(false);
   const isProfile = variant === "profile";
   const showImage = type === "image" && imageUrl && !imageFailed;
   const containerClass = [
@@ -1312,7 +1328,7 @@ var ScOnlyIcon = ({
 };
 
 // src/SC-Plan card/ScPlanCard.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/SC-Plan card/ScPlanCard.module.css
 var ScPlanCard_default = {
@@ -1382,7 +1398,7 @@ var ScPlanCard = ({
                   import_icons11.SiconCredits,
                   {
                     className: ScPlanCard_default.siconCreditsInstance,
-                    color: "#f5f5f5",
+                    color: "var(--alias-text-and-icons-primary, #f5f5f5)",
                     size: 24,
                     strokeWidth: 1.5
                   }
@@ -1409,7 +1425,7 @@ var ScPlanCard = ({
                             "path",
                             {
                               d: "M3 4.5L6 7.5L9 4.5",
-                              stroke: "#f5f5f5",
+                              stroke: "var(--alias-text-and-icons-primary, #f5f5f5)",
                               strokeWidth: "1.5",
                               strokeLinecap: "round",
                               strokeLinejoin: "round"
@@ -1437,12 +1453,12 @@ var ScPlanCard = ({
         ),
         isCustom && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
         isCustom && description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ScPlanCard_default.description, children: description }),
-        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react3.Fragment, { children: [
+        isFreeOrPopular && features.map((section, sIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react4.Fragment, { children: [
           sIdx > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScHDivider, { className: ScPlanCard_default.scHDividerInstance }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons11.SiconHome, { color: "#9e9e9e", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_icons11.SiconHome, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -3027,7 +3043,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_icons34 = require("@streamoid/icons");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var PRIMARY_ICON = "var(--alias-text---icons-primary)";
@@ -3218,12 +3234,12 @@ function StreamoidWorkspaceSwitcher({
   onSwitchWorkspace,
   config
 }) {
-  const modalRef = (0, import_react4.useRef)(null);
+  const modalRef = (0, import_react5.useRef)(null);
   const title = config?.title || "Switch workspace";
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -4426,7 +4442,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_icons53 = require("@streamoid/icons");
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -4444,6 +4460,7 @@ var ScWorkspaceSwitchCard_default = {
   detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
   detailLabel: "ScWorkspaceSwitchCard_detailLabel",
   detailValueRole: "ScWorkspaceSwitchCard_detailValueRole",
+  detailValueInfo: "ScWorkspaceSwitchCard_detailValueInfo",
   detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
   vDivider: "ScWorkspaceSwitchCard_vDivider",
   btnIcon: "ScWorkspaceSwitchCard_btnIcon"
@@ -4459,30 +4476,31 @@ function NscWorkspaceSwitch({
   initials,
   imageUrl,
   type = "currentWS",
-  variant = "switch",
   hover,
   className,
   onSwitch,
   onSettings
 }) {
-  const [internalHover, setInternalHover] = (0, import_react5.useState)(false);
+  const [internalHover, setInternalHover] = (0, import_react6.useState)(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
-  const showButtons = isHover && isOther;
+  const isAdmin = role?.toLowerCase() === "admin";
+  const displayRole = role ? role.charAt(0).toUpperCase() + role.slice(1).toLowerCase() : role;
   const displayInitials = initials || wsName.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
   const cardClass = [
     ScWorkspaceSwitchCard_default.card,
     isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : ScWorkspaceSwitchCard_default.cardOther,
-    showButtons ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
+    isHover && isOther ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
     className || ""
   ].filter(Boolean).join(" ");
   const dpBg = isCurrent ? "var(--alias-fill-neutral-neutralactive, #313131)" : "var(--alias-fill-neutral-neutralselected, #242424)";
+  const roleColorClass = isAdmin ? ScWorkspaceSwitchCard_default.detailValueRole : ScWorkspaceSwitchCard_default.detailValueInfo;
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "div",
     {
       className: cardClass,
-      onMouseEnter: () => isOther && setInternalHover(true),
+      onMouseEnter: () => setInternalHover(true),
       onMouseLeave: () => setInternalHover(false),
       children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
@@ -4504,7 +4522,7 @@ function NscWorkspaceSwitch({
           /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
             /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: ScWorkspaceSwitchCard_default.detailValueRole, children: role })
+              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: roleColorClass, children: displayRole })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
             /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
@@ -4518,31 +4536,43 @@ function NscWorkspaceSwitch({
             ] })
           ] })
         ] }),
-        showButtons && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          ScButton,
+        isHover && isOther && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
           {
-            text: "Switch Workspace",
-            variant: "secondary",
-            size: "sm",
-            styleVariant: "icon-left",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSwitch, { className: ScWorkspaceSwitchCard_default.btnIcon }),
             onClick: (e) => {
               e.stopPropagation();
               onSwitch?.();
-            }
+            },
+            style: { cursor: "pointer" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              ScButton,
+              {
+                text: "Switch Workspace",
+                variant: "secondary",
+                size: "sm",
+                styleVariant: "icon-left",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSwitch, { className: ScWorkspaceSwitchCard_default.btnIcon })
+              }
+            )
           }
         ),
-        showButtons && variant === "settings" && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          ScButton,
+        isHover && isAdmin && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+          "div",
           {
-            styleVariant: "icon-only",
-            variant: "outline",
-            size: "sm",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSettings, { className: ScWorkspaceSwitchCard_default.btnIcon }),
             onClick: (e) => {
               e.stopPropagation();
               onSettings?.();
-            }
+            },
+            style: { cursor: "pointer" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              ScButton,
+              {
+                styleVariant: "icon-only",
+                variant: "outline",
+                size: "sm",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_icons53.SiconSettings, { className: ScWorkspaceSwitchCard_default.btnIcon })
+              }
+            )
           }
         )
       ] })

package/dist/index.mjs

@@ -776,6 +776,9 @@ var ScCalendar = ({
   ] });
 };
 
+// src/SC-Credits usage card/ScCreditsUsageCard.tsx
+import { useState } from "react";
+
 // src/SC-Credits usage card/ScCreditsUsageCard.module.css
 var ScCreditsUsageCard_default = {
   scCreditsUsageCard: "ScCreditsUsageCard_scCreditsUsageCard",
@@ -786,7 +789,9 @@ var ScCreditsUsageCard_default = {
   progressContainer: "ScCreditsUsageCard_progressContainer",
   scProgressBarInstance: "ScCreditsUsageCard_scProgressBarInstance",
   remainingText: "ScCreditsUsageCard_remainingText",
-  scButtonInstance: "ScCreditsUsageCard_scButtonInstance"
+  scButtonInstance: "ScCreditsUsageCard_scButtonInstance",
+  buttonTooltipWrap: "ScCreditsUsageCard_buttonTooltipWrap",
+  buttonTooltip: "ScCreditsUsageCard_buttonTooltip"
 };
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
@@ -824,11 +829,14 @@ var ScCreditsUsageCard = ({
   remainingText = "60% Remaining",
   buyButtonText = "Buy credits",
   buyButtonState = "default",
+  buyButtonHoverText,
   onBuyClick,
   progress = 60,
   className,
   ...props
 }) => {
+  const [btnHovered, setBtnHovered] = useState(false);
+  const displayText = btnHovered && buyButtonHoverText ? buyButtonHoverText : buyButtonText;
   return /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
     /* @__PURE__ */ jsxs11("div", { className: ScCreditsUsageCard_default.header, children: [
       /* @__PURE__ */ jsx14(
@@ -858,15 +866,23 @@ var ScCreditsUsageCard = ({
         " "
       ] }),
       /* @__PURE__ */ jsx14(
-        ScButton,
+        "div",
         {
-          icon: /* @__PURE__ */ jsx14(SiconHome3, { className: ScCreditsUsageCard_default.siconHomeInstance }),
-          text: buyButtonText,
-          variant: "secondary",
-          size: "md",
-          state: buyButtonState,
-          className: ScCreditsUsageCard_default.scButtonInstance,
-          onClick: onBuyClick
+          className: ScCreditsUsageCard_default.buttonTooltipWrap,
+          onMouseEnter: () => setBtnHovered(true),
+          onMouseLeave: () => setBtnHovered(false),
+          children: /* @__PURE__ */ jsx14(
+            ScButton,
+            {
+              icon: /* @__PURE__ */ jsx14(SiconHome3, { className: ScCreditsUsageCard_default.siconHomeInstance }),
+              text: displayText,
+              variant: "secondary",
+              size: "md",
+              state: buyButtonState,
+              className: ScCreditsUsageCard_default.scButtonInstance,
+              onClick: onBuyClick
+            }
+          )
         }
       )
     ] })
@@ -874,7 +890,7 @@ var ScCreditsUsageCard = ({
 };
 
 // src/SC-Dp/ScDp.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 
 // src/SC-Dp/ScDp.module.css
 var ScDp_default = {
@@ -899,7 +915,7 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = useState(false);
+  const [imageFailed, setImageFailed] = useState2(false);
   const isProfile = variant === "profile";
   const showImage = type === "image" && imageUrl && !imageFailed;
   const containerClass = [
@@ -1294,7 +1310,7 @@ var ScPlanCard = ({
                   SiconCredits2,
                   {
                     className: ScPlanCard_default.siconCreditsInstance,
-                    color: "#f5f5f5",
+                    color: "var(--alias-text-and-icons-primary, #f5f5f5)",
                     size: 24,
                     strokeWidth: 1.5
                   }
@@ -1321,7 +1337,7 @@ var ScPlanCard = ({
                             "path",
                             {
                               d: "M3 4.5L6 7.5L9 4.5",
-                              stroke: "#f5f5f5",
+                              stroke: "var(--alias-text-and-icons-primary, #f5f5f5)",
                               strokeWidth: "1.5",
                               strokeLinecap: "round",
                               strokeLinejoin: "round"
@@ -1354,7 +1370,7 @@ var ScPlanCard = ({
           /* @__PURE__ */ jsxs16("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ jsx22("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ jsxs16("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ jsx22(SiconHome4, { color: "#9e9e9e", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ jsx22(SiconHome4, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
               /* @__PURE__ */ jsx22("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -4348,7 +4364,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3 } from "@streamoid/icons";
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -4366,6 +4382,7 @@ var ScWorkspaceSwitchCard_default = {
   detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
   detailLabel: "ScWorkspaceSwitchCard_detailLabel",
   detailValueRole: "ScWorkspaceSwitchCard_detailValueRole",
+  detailValueInfo: "ScWorkspaceSwitchCard_detailValueInfo",
   detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
   vDivider: "ScWorkspaceSwitchCard_vDivider",
   btnIcon: "ScWorkspaceSwitchCard_btnIcon"
@@ -4381,30 +4398,31 @@ function NscWorkspaceSwitch({
   initials,
   imageUrl,
   type = "currentWS",
-  variant = "switch",
   hover,
   className,
   onSwitch,
   onSettings
 }) {
-  const [internalHover, setInternalHover] = useState2(false);
+  const [internalHover, setInternalHover] = useState3(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
-  const showButtons = isHover && isOther;
+  const isAdmin = role?.toLowerCase() === "admin";
+  const displayRole = role ? role.charAt(0).toUpperCase() + role.slice(1).toLowerCase() : role;
   const displayInitials = initials || wsName.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
   const cardClass = [
     ScWorkspaceSwitchCard_default.card,
     isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : ScWorkspaceSwitchCard_default.cardOther,
-    showButtons ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
+    isHover && isOther ? ScWorkspaceSwitchCard_default.cardOtherHover : "",
     className || ""
   ].filter(Boolean).join(" ");
   const dpBg = isCurrent ? "var(--alias-fill-neutral-neutralactive, #313131)" : "var(--alias-fill-neutral-neutralselected, #242424)";
+  const roleColorClass = isAdmin ? ScWorkspaceSwitchCard_default.detailValueRole : ScWorkspaceSwitchCard_default.detailValueInfo;
   return /* @__PURE__ */ jsx62(
     "div",
     {
       className: cardClass,
-      onMouseEnter: () => isOther && setInternalHover(true),
+      onMouseEnter: () => setInternalHover(true),
       onMouseLeave: () => setInternalHover(false),
       children: /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
         /* @__PURE__ */ jsx62(
@@ -4426,7 +4444,7 @@ function NscWorkspaceSwitch({
           /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailsRow, children: [
             /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Role" }),
-              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueRole, children: role })
+              /* @__PURE__ */ jsx62("span", { className: roleColorClass, children: displayRole })
             ] }),
             /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
             /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
@@ -4440,31 +4458,43 @@ function NscWorkspaceSwitch({
             ] })
           ] })
         ] }),
-        showButtons && /* @__PURE__ */ jsx62(
-          ScButton,
+        isHover && isOther && /* @__PURE__ */ jsx62(
+          "div",
           {
-            text: "Switch Workspace",
-            variant: "secondary",
-            size: "sm",
-            styleVariant: "icon-left",
-            icon: /* @__PURE__ */ jsx62(SiconSwitch3, { className: ScWorkspaceSwitchCard_default.btnIcon }),
             onClick: (e) => {
               e.stopPropagation();
               onSwitch?.();
-            }
+            },
+            style: { cursor: "pointer" },
+            children: /* @__PURE__ */ jsx62(
+              ScButton,
+              {
+                text: "Switch Workspace",
+                variant: "secondary",
+                size: "sm",
+                styleVariant: "icon-left",
+                icon: /* @__PURE__ */ jsx62(SiconSwitch3, { className: ScWorkspaceSwitchCard_default.btnIcon })
+              }
+            )
           }
         ),
-        showButtons && variant === "settings" && /* @__PURE__ */ jsx62(
-          ScButton,
+        isHover && isAdmin && /* @__PURE__ */ jsx62(
+          "div",
           {
-            styleVariant: "icon-only",
-            variant: "outline",
-            size: "sm",
-            icon: /* @__PURE__ */ jsx62(SiconSettings3, { className: ScWorkspaceSwitchCard_default.btnIcon }),
             onClick: (e) => {
               e.stopPropagation();
               onSettings?.();
-            }
+            },
+            style: { cursor: "pointer" },
+            children: /* @__PURE__ */ jsx62(
+              ScButton,
+              {
+                styleVariant: "icon-only",
+                variant: "outline",
+                size: "sm",
+                icon: /* @__PURE__ */ jsx62(SiconSettings3, { className: ScWorkspaceSwitchCard_default.btnIcon })
+              }
+            )
           }
         )
       ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",