@streamoid/ui 0.2.1 → 0.2.3

package/dist/index.mjs

@@ -455,7 +455,7 @@ var ScButton_default = {
 
 // src/SC-Button/ScButton.tsx
 import { SiconHome as SiconHome2 } from "@streamoid/icons";
-import { useMemo } from "react";
+import { useMemo, isValidElement, cloneElement } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 if (typeof window !== "undefined" && CSS.registerProperty) {
   const props = [
@@ -534,6 +534,8 @@ var ScButton = ({
     ctx.putImageData(imageData, 0, 0);
     return canvas.toDataURL("image/png");
   }, [variant, type, state]);
+  const strokeWidth = size === "sm" ? 1.25 : 1.5;
+  const styledIcon = isValidElement(icon) ? cloneElement(icon, { color: "currentColor", strokeWidth }) : icon;
   const variantsClassName = ScButton_default["style-variant-" + styleVariant] + " " + ScButton_default["state-" + state] + " " + ScButton_default["variant-" + variant] + " " + ScButton_default["type-" + type] + " " + ScButton_default["size-" + size];
   return /* @__PURE__ */ jsxs8(
     "div",
@@ -549,12 +551,12 @@ var ScButton = ({
           }
         ),
         /* @__PURE__ */ jsxs8("div", { className: ScButton_default.container, children: [
-          (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ jsx9(Fragment3, { children: icon }),
+          (styleVariant === "icon-left" || styleVariant === "icon-only") && /* @__PURE__ */ jsx9(Fragment3, { children: styledIcon }),
           (styleVariant === "default" || styleVariant === "icon-right" || styleVariant === "icon-left") && /* @__PURE__ */ jsx9(Fragment3, { children: /* @__PURE__ */ jsxs8("div", { className: ScButton_default.label, children: [
             text,
             " "
           ] }) }),
-          styleVariant === "icon-right" && /* @__PURE__ */ jsx9(Fragment3, { children: icon })
+          styleVariant === "icon-right" && /* @__PURE__ */ jsx9(Fragment3, { children: styledIcon })
         ] })
       ]
     }
@@ -774,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",
@@ -784,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
@@ -822,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(
@@ -856,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
+            }
+          )
         }
       )
     ] })
@@ -872,7 +890,21 @@ 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 = {
+  scDp: "ScDp_scDp",
+  variantWorkspace: "ScDp_variantWorkspace",
+  variantProfile: "ScDp_variantProfile",
+  typeInitial: "ScDp_typeInitial",
+  initials: "ScDp_initials",
+  image: "ScDp_image",
+  imageWorkspace: "ScDp_imageWorkspace",
+  imageProfile: "ScDp_imageProfile"
+};
+
+// src/SC-Dp/ScDp.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 function ScDp({
   type = "initial",
@@ -883,63 +915,29 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = useState(false);
+  const [imageFailed, setImageFailed] = useState2(false);
   const isProfile = variant === "profile";
-  const borderRadius = isProfile ? "var(--radius-full)" : "var(--radius-md)";
   const showImage = type === "image" && imageUrl && !imageFailed;
-  const containerStyle = {
+  const containerClass = [
+    ScDp_default.scDp,
+    isProfile ? ScDp_default.variantProfile : ScDp_default.variantWorkspace,
+    !showImage ? ScDp_default.typeInitial : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  const sizeStyle = {
     width: size,
     height: size,
-    borderRadius,
-    position: "relative",
-    overflow: "hidden",
-    flexShrink: 0,
-    ...showImage ? {} : {
-      backgroundColor: "var(--alias-fill-neutral-neutralselected)",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center"
-    },
     ...style
   };
-  return /* @__PURE__ */ jsx15("div", { className, style: containerStyle, children: showImage ? /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx15("div", { className: containerClass, style: sizeStyle, children: showImage ? /* @__PURE__ */ jsx15(
     "img",
     {
       src: imageUrl,
       alt: "",
-      style: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        pointerEvents: "none"
-      },
+      className: ScDp_default.image + " " + (isProfile ? ScDp_default.imageProfile : ScDp_default.imageWorkspace),
       onError: () => setImageFailed(true)
     }
-  ) : /* @__PURE__ */ jsx15(
-    "div",
-    {
-      style: {
-        flex: 1,
-        minWidth: 0,
-        minHeight: 0,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        color: "var(--alias-text---icons-primary)",
-        fontFamily: "var(--font-family-font-family-body)",
-        fontSize: size <= 32 ? `${size * 0.4}px` : "var(--font-size-font-size-md)",
-        fontWeight: 500,
-        lineHeight: 1,
-        textAlign: "center"
-      },
-      children: initial
-    }
-  ) });
+  ) : /* @__PURE__ */ jsx15("div", { className: ScDp_default.initials, children: initial }) });
 }
 
 // src/SC-Google sign in/ScGoogleSignIn.module.css
@@ -1312,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
                   }
@@ -1339,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"
@@ -1372,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))
           ] })
@@ -4366,25 +4364,25 @@ 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
 var ScWorkspaceSwitchCard_default = {
   card: "ScWorkspaceSwitchCard_card",
   cardCurrent: "ScWorkspaceSwitchCard_cardCurrent",
-  cardHover: "ScWorkspaceSwitchCard_cardHover",
-  workspaceInfo: "ScWorkspaceSwitchCard_workspaceInfo",
-  avatarWrap: "ScWorkspaceSwitchCard_avatarWrap",
-  avatarCover: "ScWorkspaceSwitchCard_avatarCover",
-  avatarImg: "ScWorkspaceSwitchCard_avatarImg",
+  cardOther: "ScWorkspaceSwitchCard_cardOther",
+  cardOtherHover: "ScWorkspaceSwitchCard_cardOtherHover",
+  wsInfo: "ScWorkspaceSwitchCard_wsInfo",
+  dp: "ScWorkspaceSwitchCard_dp",
   infoCol: "ScWorkspaceSwitchCard_infoCol",
   wsName: "ScWorkspaceSwitchCard_wsName",
   detailsRow: "ScWorkspaceSwitchCard_detailsRow",
   detailItem: "ScWorkspaceSwitchCard_detailItem",
   detailItemFlex: "ScWorkspaceSwitchCard_detailItemFlex",
   detailLabel: "ScWorkspaceSwitchCard_detailLabel",
-  detailValueWarning: "ScWorkspaceSwitchCard_detailValueWarning",
+  detailValueRole: "ScWorkspaceSwitchCard_detailValueRole",
+  detailValueInfo: "ScWorkspaceSwitchCard_detailValueInfo",
   detailValueSecondary: "ScWorkspaceSwitchCard_detailValueSecondary",
   vDivider: "ScWorkspaceSwitchCard_vDivider",
   btnIcon: "ScWorkspaceSwitchCard_btnIcon"
@@ -4392,101 +4390,120 @@ var ScWorkspaceSwitchCard_default = {
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
 import { jsx as jsx62, jsxs as jsxs53 } from "react/jsx-runtime";
-function deriveInitials2(name) {
-  return name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || "WS";
-}
-function ScWorkspaceSwitchCard({
-  name,
+function NscWorkspaceSwitch({
+  wsName = "Workspace name is kepler",
+  role = "Admin",
+  plan = "Free",
+  ownerId = "rohan@streamoid.com",
   initials,
   imageUrl,
-  role,
-  plan,
-  ownerEmail,
-  isCurrent = false,
-  variant = "switch",
+  type = "currentWS",
+  hover,
+  className,
   onSwitch,
   onSettings
 }) {
-  const [hovered, setHovered] = useState2(false);
-  const showButtons = !isCurrent && hovered;
-  const displayInitials = initials || deriveInitials2(name);
+  const [internalHover, setInternalHover] = useState3(false);
+  const isHover = hover !== void 0 ? hover : internalHover;
+  const isCurrent = type === "currentWS";
+  const isOther = type === "otherWS";
   const isAdmin = role?.toLowerCase() === "admin";
-  const roleText = isAdmin ? "Admin" : "Member";
+  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 : "",
-    hovered && !isCurrent ? ScWorkspaceSwitchCard_default.cardHover : ""
+    isCurrent ? ScWorkspaceSwitchCard_default.cardCurrent : ScWorkspaceSwitchCard_default.cardOther,
+    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: () => !isCurrent && setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      children: /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.workspaceInfo, children: [
-        /* @__PURE__ */ jsx62("div", { className: ScWorkspaceSwitchCard_default.avatarWrap, children: imageUrl ? /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: name, className: ScWorkspaceSwitchCard_default.avatarImg }) : /* @__PURE__ */ jsx62(
-          ScIntialProfileCover,
+      onMouseEnter: () => setInternalHover(true),
+      onMouseLeave: () => setInternalHover(false),
+      children: /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.wsInfo, children: [
+        /* @__PURE__ */ jsx62(
+          ScDp,
           {
-            intial: displayInitials,
-            className: ScWorkspaceSwitchCard_default.avatarCover
+            type: imageUrl ? "image" : "initial",
+            variant: "workspace",
+            initial: displayInitials,
+            imageUrl,
+            className: ScWorkspaceSwitchCard_default.dp,
+            style: {
+              backgroundColor: dpBg,
+              borderRadius: "var(--radius-xl, 12px)"
+            }
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.infoCol, children: [
-          /* @__PURE__ */ jsx62("p", { className: ScWorkspaceSwitchCard_default.wsName, children: name }),
+          /* @__PURE__ */ jsx62("p", { className: ScWorkspaceSwitchCard_default.wsName, children: wsName }),
           /* @__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: isAdmin ? ScWorkspaceSwitchCard_default.detailValueWarning : ScWorkspaceSwitchCard_default.detailValueSecondary,
-                  children: roleText
-                }
-              )
+              /* @__PURE__ */ jsx62("span", { className: roleColorClass, children: displayRole })
             ] }),
             /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
             /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItem, children: [
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Plan" }),
-              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan || "\u2013" })
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: plan })
             ] }),
             /* @__PURE__ */ jsx62(ScVDivider, { className: ScWorkspaceSwitchCard_default.vDivider }),
             /* @__PURE__ */ jsxs53("div", { className: ScWorkspaceSwitchCard_default.detailItemFlex, children: [
               /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailLabel, children: "Workspace Owner" }),
-              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerEmail || "\u2013" })
+              /* @__PURE__ */ jsx62("span", { className: ScWorkspaceSwitchCard_default.detailValueSecondary, children: ownerId })
             ] })
           ] })
         ] }),
-        showButtons && /* @__PURE__ */ jsx62(
-          ScButton,
+        isHover && isOther && /* @__PURE__ */ jsx62(
+          "div",
           {
-            text: "Switch Workspace",
-            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 })
+              }
+            )
           }
         )
       ] })
     }
   );
 }
+var ScWorkspaceSwitchCard = NscWorkspaceSwitch;
 export {
+  NscWorkspaceSwitch,
   ScAccess,
   ScAppCard,
   ScAppField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,7 +23,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "@streamoid/icons": "^0.1.2"
+    "@streamoid/icons": "^0.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",