@streamoid/ui 0.4.9 → 0.5.1

package/dist/index.css

@@ -3986,6 +3986,20 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  position: relative;
+}
+.ScGuide_stepIndicator {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  font-family: var(--font-family-font-family-body, "Inter", sans-serif);
+  font-size: var(--font-size-font-size-sm, 0.875rem);
+  font-weight: 400;
+  line-height: var(--line-height-line-height-sm, 1.25rem);
+  color: var(--alias-text-and-icons-tertiary, #9e9e9e);
+  white-space: nowrap;
 }
 .ScGuide_skipButton {
   background: transparent;

package/dist/index.d.mts

@@ -404,6 +404,9 @@ interface IScGuideProps {
     /** Icon rendered after the Next label. Defaults to a right-chevron.
      *  Use for terminal steps where the action is "Done" + checkmark, etc. */
     nextIcon?: ReactNode;
+    /** Centered step indicator shown between Skip and Next (e.g. "1 of 3").
+     *  Hidden when omitted. */
+    stepLabel?: ReactNode;
     /** Click handler for the Skip action. */
     onSkip?: () => void;
     /** Click handler for the Next action. */
@@ -417,7 +420,7 @@ interface IScGuideProps {
     className?: string;
     style?: CSSProperties;
 }
-declare const ScGuide: ({ title, description, skipLabel, nextLabel, nextIcon, onSkip, onNext, hideSkip, hideNext, disabled, className, style, }: IScGuideProps) => JSX.Element;
+declare const ScGuide: ({ title, description, skipLabel, nextLabel, nextIcon, stepLabel, onSkip, onNext, hideSkip, hideNext, disabled, className, style, }: IScGuideProps) => JSX.Element;
 
 interface IScSideBarLogoUnitProps {
     /** "expanded" renders the merged wordmark + switcher row.
@@ -737,7 +740,7 @@ interface IScTabSwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
     scTabComptype?: string;
     className?: string;
 }
-declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, ...props }: IScTabSwitcherProps) => JSX.Element;
+declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, scTabCompicon: _scTabCompicon, scTabCompactive: _scTabCompactive, scTabComptype: _scTabComptype, ...props }: IScTabSwitcherProps) => JSX.Element;
 
 interface IScTableHeaderProps {
     type?: "default" | "pending";

package/dist/index.d.ts

@@ -404,6 +404,9 @@ interface IScGuideProps {
     /** Icon rendered after the Next label. Defaults to a right-chevron.
      *  Use for terminal steps where the action is "Done" + checkmark, etc. */
     nextIcon?: ReactNode;
+    /** Centered step indicator shown between Skip and Next (e.g. "1 of 3").
+     *  Hidden when omitted. */
+    stepLabel?: ReactNode;
     /** Click handler for the Skip action. */
     onSkip?: () => void;
     /** Click handler for the Next action. */
@@ -417,7 +420,7 @@ interface IScGuideProps {
     className?: string;
     style?: CSSProperties;
 }
-declare const ScGuide: ({ title, description, skipLabel, nextLabel, nextIcon, onSkip, onNext, hideSkip, hideNext, disabled, className, style, }: IScGuideProps) => JSX.Element;
+declare const ScGuide: ({ title, description, skipLabel, nextLabel, nextIcon, stepLabel, onSkip, onNext, hideSkip, hideNext, disabled, className, style, }: IScGuideProps) => JSX.Element;
 
 interface IScSideBarLogoUnitProps {
     /** "expanded" renders the merged wordmark + switcher row.
@@ -737,7 +740,7 @@ interface IScTabSwitcherProps extends React.HTMLAttributes<HTMLDivElement> {
     scTabComptype?: string;
     className?: string;
 }
-declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, ...props }: IScTabSwitcherProps) => JSX.Element;
+declare const ScTabSwitcher: ({ tabCount, component, component2, component3, component4, component5, className, scTabCompicon: _scTabCompicon, scTabCompactive: _scTabCompactive, scTabComptype: _scTabComptype, ...props }: IScTabSwitcherProps) => JSX.Element;
 
 interface IScTableHeaderProps {
     type?: "default" | "pending";

package/dist/index.js

@@ -507,7 +507,7 @@ var ScPairtext = ({
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var ScBillingHistoryTableList = ({
   invoiceNumber = "# INV-2800-2026",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   date = "Nov 9th, 2025",
   downloadLabel = "Download invoice",
   className,
@@ -637,8 +637,12 @@ var ScButton = ({
   className,
   ...props
 }) => {
-  const noiseUrl = (0, import_react.useMemo)(() => {
-    if (typeof window === "undefined" || variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") return "";
+  const [noiseUrl, setNoiseUrl] = (0, import_react.useState)("");
+  (0, import_react.useEffect)(() => {
+    if (variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") {
+      setNoiseUrl("");
+      return;
+    }
     const size2 = 128;
     const canvas = document.createElement("canvas");
     canvas.width = size2;
@@ -653,7 +657,7 @@ var ScButton = ({
       imageData.data[i + 3] = 255;
     }
     ctx.putImageData(imageData, 0, 0);
-    return canvas.toDataURL("image/png");
+    setNoiseUrl(canvas.toDataURL("image/png"));
   }, [variant, type, state]);
   const strokeWidth = size === "sm" ? 1.25 : 1.5;
   const styledIcon = (0, import_react.isValidElement)(icon) ? (0, import_react.cloneElement)(icon, { color: "currentColor", strokeWidth }) : icon;
@@ -1579,7 +1583,7 @@ var import_icons12 = require("@streamoid/icons");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var ScPlanCard = ({
   planName = "Pro",
-  price = "$49.99 / month",
+  price = "\u20B949.99 / month",
   credits = "30,000 Credits",
   type = "free",
   features = [],
@@ -1675,7 +1679,14 @@ var ScPlanCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons12.SiconHome, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                import_icons12.SiconHome,
+                {
+                  color: "var(--alias-text-and-icons-tertiary, #9e9e9e)",
+                  size: 24,
+                  strokeWidth: 1.5
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -1719,7 +1730,7 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 var ScPlanDetailsCard = ({
   planName = "Free",
   planCredits = "30,000 credits",
-  planPrice = "$0.00 / month",
+  planPrice = "\u20B90.00 / month",
   badgeText = "Active",
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
@@ -2046,6 +2057,9 @@ var ScTabSwitcher = ({
   component4,
   component5,
   className,
+  scTabCompicon: _scTabCompicon,
+  scTabCompactive: _scTabCompactive,
+  scTabComptype: _scTabComptype,
   ...props
 }) => {
   const variantsClassName = ScTabSwitcher_default["tab-count-" + tabCount];
@@ -3641,6 +3655,7 @@ var ScGuide_default = {
   title: "ScGuide_title",
   description: "ScGuide_description",
   actions: "ScGuide_actions",
+  stepIndicator: "ScGuide_stepIndicator",
   skipButton: "ScGuide_skipButton",
   skipSpacer: "ScGuide_skipSpacer",
   nextButton: "ScGuide_nextButton",
@@ -3657,6 +3672,7 @@ var ScGuide = ({
   skipLabel = "Skip",
   nextLabel = "Next",
   nextIcon,
+  stepLabel,
   onSkip,
   onNext,
   hideSkip = false,
@@ -3687,6 +3703,7 @@ var ScGuide = ({
               children: skipLabel
             }
           ),
+          stepLabel != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: ScGuide_default.stepIndicator, children: stepLabel }),
           !hideNext && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
             "button",
             {
@@ -6078,7 +6095,7 @@ var import_jsx_runtime79 = require("react/jsx-runtime");
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   className
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
@@ -6383,7 +6400,7 @@ var import_jsx_runtime85 = require("react/jsx-runtime");
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
-  planPrice = "$0.00 / month",
+  planPrice = "\u20B90.00 / month",
   badgeText = "Active",
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",

package/dist/index.mjs

@@ -397,7 +397,7 @@ var ScPairtext = ({
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 var ScBillingHistoryTableList = ({
   invoiceNumber = "# INV-2800-2026",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   date = "Nov 9th, 2025",
   downloadLabel = "Download invoice",
   className,
@@ -466,7 +466,7 @@ var ScButton_default = {
 
 // src/SC-Button/ScButton.tsx
 import { SiconHome as SiconHome2 } from "@streamoid/icons";
-import { useMemo, isValidElement, cloneElement } from "react";
+import { useState, useEffect, isValidElement, cloneElement } from "react";
 import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 if (typeof window !== "undefined" && CSS.registerProperty) {
   const props = [
@@ -527,8 +527,12 @@ var ScButton = ({
   className,
   ...props
 }) => {
-  const noiseUrl = useMemo(() => {
-    if (typeof window === "undefined" || variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") return "";
+  const [noiseUrl, setNoiseUrl] = useState("");
+  useEffect(() => {
+    if (variant !== "primary" || type !== "primary" || state !== "default" && state !== "disabled") {
+      setNoiseUrl("");
+      return;
+    }
     const size2 = 128;
     const canvas = document.createElement("canvas");
     canvas.width = size2;
@@ -543,7 +547,7 @@ var ScButton = ({
       imageData.data[i + 3] = 255;
     }
     ctx.putImageData(imageData, 0, 0);
-    return canvas.toDataURL("image/png");
+    setNoiseUrl(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;
@@ -788,7 +792,7 @@ var ScCalendar = ({
 };
 
 // src/SC-Credits usage card/ScCreditsUsageCard.tsx
-import { useState } from "react";
+import { useState as useState2 } from "react";
 
 // src/SC-Credits usage card/ScCreditsUsageCard.module.css
 var ScCreditsUsageCard_default = {
@@ -846,7 +850,7 @@ var ScCreditsUsageCard = ({
   className,
   ...props
 }) => {
-  const [btnHovered, setBtnHovered] = useState(false);
+  const [btnHovered, setBtnHovered] = useState2(false);
   const displayText = btnHovered && buyButtonHoverText ? buyButtonHoverText : buyButtonText;
   return /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.scCreditsUsageCard + " " + className, ...props, children: [
     /* @__PURE__ */ jsxs12("div", { className: ScCreditsUsageCard_default.header, children: [
@@ -901,7 +905,7 @@ var ScCreditsUsageCard = ({
 };
 
 // src/SC-CreditWarningBanner/CreditWarningBanner.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { SiconClose } from "@streamoid/icons";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var STYLES = {
@@ -967,7 +971,7 @@ function CreditWarningBanner({
   expanded = true,
   onCollapsedClick
 }) {
-  const [dismissed, setDismissed] = useState2(false);
+  const [dismissed, setDismissed] = useState3(false);
   if (dismissed) return null;
   const { bg, border, color } = STYLES[level];
   if (!expanded) {
@@ -1085,7 +1089,7 @@ function CreditWarningBanner({
 }
 
 // src/SC-Dp/ScDp.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 
 // src/SC-Dp/ScDp.module.css
 var ScDp_default = {
@@ -1110,7 +1114,7 @@ function ScDp({
   className,
   style
 }) {
-  const [imageFailed, setImageFailed] = useState3(false);
+  const [imageFailed, setImageFailed] = useState4(false);
   const isProfile = variant === "profile";
   const showImage = type === "image" && imageUrl && !imageFailed;
   const containerClass = [
@@ -1469,7 +1473,7 @@ import { SiconCredits as SiconCredits2, SiconHome as SiconHome4 } from "@streamo
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var ScPlanCard = ({
   planName = "Pro",
-  price = "$49.99 / month",
+  price = "\u20B949.99 / month",
   credits = "30,000 Credits",
   type = "free",
   features = [],
@@ -1565,7 +1569,14 @@ var ScPlanCard = ({
           /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.featuresSection, children: [
             /* @__PURE__ */ jsx23("div", { className: ScPlanCard_default.sectionTitle, children: section.section }),
             section.features.map((feature, fIdx) => /* @__PURE__ */ jsxs18("div", { className: ScPlanCard_default.featureRow, children: [
-              section.icon || /* @__PURE__ */ jsx23(SiconHome4, { color: "var(--alias-text-and-icons-tertiary, #9e9e9e)", size: 24, strokeWidth: 1.5 }),
+              section.icon || /* @__PURE__ */ jsx23(
+                SiconHome4,
+                {
+                  color: "var(--alias-text-and-icons-tertiary, #9e9e9e)",
+                  size: 24,
+                  strokeWidth: 1.5
+                }
+              ),
               /* @__PURE__ */ jsx23("span", { className: ScPlanCard_default.featureText, children: feature })
             ] }, fIdx))
           ] })
@@ -1609,7 +1620,7 @@ import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var ScPlanDetailsCard = ({
   planName = "Free",
   planCredits = "30,000 credits",
-  planPrice = "$0.00 / month",
+  planPrice = "\u20B90.00 / month",
   badgeText = "Active",
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",
@@ -1936,6 +1947,9 @@ var ScTabSwitcher = ({
   component4,
   component5,
   className,
+  scTabCompicon: _scTabCompicon,
+  scTabCompactive: _scTabCompactive,
+  scTabComptype: _scTabComptype,
   ...props
 }) => {
   const variantsClassName = ScTabSwitcher_default["tab-count-" + tabCount];
@@ -2116,7 +2130,7 @@ var ScProfileSettingsComp_default = {
 import { SiconBolt as SiconBolt3, SiconLock } from "@streamoid/icons";
 
 // src/SC-textField/ScTextField.tsx
-import { useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/SC-textField/ScTextField.module.css
 var ScTextField_default = {
@@ -2151,7 +2165,7 @@ var ScTextField = ({
   style,
   ...props
 }) => {
-  const [focused, setFocused] = useState4(false);
+  const [focused, setFocused] = useState5(false);
   const derivedState = state ?? (props.disabled ? "disabled" : focused ? "active" : (props.value !== void 0 ? String(props.value).length > 0 : false) ? "filled" : "default");
   const variantsClassName = ScTextField_default["state-" + derivedState] + " " + ScTextField_default["tf-group-" + tfGroup] + " " + ScTextField_default["label-group-" + labelGroup];
   return /* @__PURE__ */ jsxs26(
@@ -3239,7 +3253,7 @@ function StreamoidSidebar({
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.tsx
 import {
   useCallback,
-  useState as useState5
+  useState as useState6
 } from "react";
 
 // src/SC-Artifax-Sidebar/ScArtifaxSidebar.module.css
@@ -3361,7 +3375,7 @@ var ScArtifaxSidebar = ({
   style
 }) => {
   const isControlled = !!openSections;
-  const [internalOpen, setInternalOpen] = useState5(
+  const [internalOpen, setInternalOpen] = useState6(
     () => {
       const init = {};
       sections.forEach((s) => {
@@ -3534,6 +3548,7 @@ var ScGuide_default = {
   title: "ScGuide_title",
   description: "ScGuide_description",
   actions: "ScGuide_actions",
+  stepIndicator: "ScGuide_stepIndicator",
   skipButton: "ScGuide_skipButton",
   skipSpacer: "ScGuide_skipSpacer",
   nextButton: "ScGuide_nextButton",
@@ -3550,6 +3565,7 @@ var ScGuide = ({
   skipLabel = "Skip",
   nextLabel = "Next",
   nextIcon,
+  stepLabel,
   onSkip,
   onNext,
   hideSkip = false,
@@ -3580,6 +3596,7 @@ var ScGuide = ({
               children: skipLabel
             }
           ),
+          stepLabel != null && /* @__PURE__ */ jsx42("span", { className: ScGuide_default.stepIndicator, children: stepLabel }),
           !hideNext && /* @__PURE__ */ jsxs34(
             "button",
             {
@@ -3731,7 +3748,7 @@ var ScSlider = ({
 };
 
 // src/SC-WorkspaceSwitcher/streamoid-workspace-switcher.tsx
-import { useEffect, useRef as useRef2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import {
   SiconClose as SiconClose2,
   SiconTeam as SiconTeam4,
@@ -3932,7 +3949,7 @@ function StreamoidWorkspaceSwitcher({
   const loadingText = config?.loadingText || "Loading workspaces\u2026";
   const currentWorkspaceText = config?.currentWorkspaceText || "Current workspace";
   const switchWorkspaceText = config?.switchWorkspaceText || "Switch workspace";
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     function handleKeyDown(e) {
       if (e.key === "Escape") onClose();
@@ -5342,7 +5359,7 @@ var ScWorkspaceCard = ({
 };
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { SiconSwitch as SiconSwitch3, SiconSettings as SiconSettings3, SiconLogout as SiconLogout3 } from "@streamoid/icons";
 
 // src/SC-WorkspaceSwitchCard/ScWorkspaceSwitchCard.module.css
@@ -5383,7 +5400,7 @@ function ScWorkspaceSwitchCard({
   onSettings,
   onLeave
 }) {
-  const [internalHover, setInternalHover] = useState6(false);
+  const [internalHover, setInternalHover] = useState7(false);
   const isHover = hover !== void 0 ? hover : internalHover;
   const isCurrent = type === "currentWS";
   const isOther = type === "otherWS";
@@ -5981,7 +5998,7 @@ import { jsx as jsx78, jsxs as jsxs69 } from "react/jsx-runtime";
 var InvoiceHistoryMobile = ({
   invoiceId = "# INV-2800-2026",
   date = "Nov 9th, 2025",
-  amount = "$320.89",
+  amount = "\u20B9320.89",
   className
 }) => {
   return /* @__PURE__ */ jsxs69("div", { className: InvoiceHistoryMobile_default.invoiceHistoryMobile + " " + (className ?? ""), children: [
@@ -6286,7 +6303,7 @@ import { jsx as jsx84, jsxs as jsxs74 } from "react/jsx-runtime";
 var ScPlanDetailsCardMobile = ({
   planName = "Pro",
   planCredits = "30,000 credits",
-  planPrice = "$0.00 / month",
+  planPrice = "\u20B90.00 / month",
   badgeText = "Active",
   currentPlanLabel = "Current plan",
   upgradeButtonText = "Upgrade",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/ui",
-  "version": "0.4.9",
+  "version": "0.5.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -15,7 +15,9 @@
     "build": "npm run build:js && npm run build:dts",
     "build:js": "esbuild src/index.ts --bundle --loader:.module.css=local-css --external:react --external:react-dom --external:@streamoid/icons --outfile=dist/index.js --format=cjs && esbuild src/index.ts --bundle --loader:.module.css=local-css --external:react --external:react-dom --external:@streamoid/icons --outfile=dist/index.mjs --format=esm",
     "build:dts": "tsup src/index.ts --dts-only",
-    "dev": "npm run build -- --watch",
+    "watch:js": "esbuild src/index.ts --bundle --loader:.module.css=local-css --external:react --external:react-dom --external:@streamoid/icons --outfile=dist/index.js --format=cjs --watch=forever & esbuild src/index.ts --bundle --loader:.module.css=local-css --external:react --external:react-dom --external:@streamoid/icons --outfile=dist/index.mjs --format=esm --watch=forever & wait",
+    "watch:dts": "tsup src/index.ts --dts-only --watch",
+    "dev": "sh -c 'npm run watch:js & npm run watch:dts & wait'",
     "lint": "eslint src/"
   },
   "peerDependencies": {