@lumiastream/ui 0.8.10 → 0.9.0

package/dist/LSSliderInput.js

@@ -171,7 +171,7 @@ var LSSlider = ({ color, sx, ...props }) => {
 };
 
 // src/components/LSSliderInput/LSSliderInput.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var normalizeSliderValue = (rawValue) => {
   if (typeof rawValue === "number") {
     return Number.isFinite(rawValue) ? rawValue : 0;
@@ -194,6 +194,16 @@ var getDecimalPlaces = (stepValue) => {
   const decimalIndex = stepString.indexOf(".");
   return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
 };
+var formatUnitAdornment = (adornment) => {
+  if (typeof adornment !== "string") {
+    return adornment;
+  }
+  const trimmedAdornment = adornment.trim();
+  if (!trimmedAdornment) {
+    return "";
+  }
+  return `${trimmedAdornment.charAt(0).toUpperCase()}${trimmedAdornment.slice(1)}`;
+};
 var InfoIcon = () => /* @__PURE__ */ jsx3("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx3(
   "path",
   {
@@ -246,7 +256,8 @@ var LSSliderInput = forwardRef2(
     ...rest
   }, ref) => {
     const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
-    const rangeUnit = typeof (endAdornment ?? inputAfterText) === "string" && String(endAdornment ?? inputAfterText).trim().length ? ` ${endAdornment ?? inputAfterText}` : "";
+    const adornment = formatUnitAdornment(endAdornment ?? inputAfterText);
+    const rangeUnit = typeof adornment === "string" && adornment.trim().length ? ` ${adornment}` : "";
     const actualSliderMin = sliderMin ?? min;
     const actualSliderMax = sliderMax ?? max;
     const actualToDisplay = useCallback(
@@ -276,6 +287,17 @@ var LSSliderInput = forwardRef2(
     const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
     const inputStep = allowAnyDecimal ? "any" : displayStep;
     const sliderColor = color === "secondary" ? "secondary" : "primary";
+    const defaultValueLabelFormat = useCallback(
+      (sliderValue) => {
+        const formattedValue = isFloatMiliseconds ? actualToDisplay(sliderValue) : sliderValue;
+        return adornment ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          formattedValue,
+          " ",
+          adornment
+        ] }) : formattedValue;
+      },
+      [actualToDisplay, adornment, isFloatMiliseconds]
+    );
     useEffect(() => {
       if (value !== void 0) {
         const normalizedValue = normalizeSliderValue(value);
@@ -409,7 +431,7 @@ var LSSliderInput = forwardRef2(
                 min: actualSliderMin,
                 max: actualSliderMax,
                 valueLabelDisplay,
-                valueLabelFormat: (sliderValue) => valueLabelFormat?.(sliderValue) ?? `${sliderValue}${endAdornment ?? inputAfterText ?? ""}`,
+                valueLabelFormat: valueLabelFormat ?? defaultValueLabelFormat,
                 onChange: handleSliderChanging,
                 onChangeCommitted: handleSliderChanged,
                 sx: resolvedSliderSx
@@ -441,7 +463,7 @@ var LSSliderInput = forwardRef2(
           }
         }
       ),
-      !hideInput && (endAdornment ?? inputAfterText) && /* @__PURE__ */ jsx3("div", { className: "mui-ls-slider-input-adornment", children: endAdornment ?? inputAfterText })
+      !hideInput && adornment && /* @__PURE__ */ jsx3("div", { className: "mui-ls-slider-input-adornment", children: adornment })
     ] });
     return /* @__PURE__ */ jsxs(FormControl2, { variant: "outlined", className: "mui-ls-slider-input-root", fullWidth: true, error: Boolean(rangeError), children: [
       label && /* @__PURE__ */ jsxs(InputLabel, { shrink: true, id: labelId, htmlFor: sliderInputId, children: [

package/dist/components.js

@@ -224,7 +224,7 @@ import InputLabel from "@mui/material/InputLabel";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import Tooltip from "@mui/material/Tooltip";
 import { forwardRef as forwardRef2, useCallback, useEffect, useMemo, useState } from "react";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var normalizeSliderValue = (rawValue) => {
   if (typeof rawValue === "number") {
     return Number.isFinite(rawValue) ? rawValue : 0;
@@ -247,6 +247,16 @@ var getDecimalPlaces = (stepValue) => {
   const decimalIndex = stepString.indexOf(".");
   return decimalIndex === -1 ? 0 : stepString.length - decimalIndex - 1;
 };
+var formatUnitAdornment = (adornment) => {
+  if (typeof adornment !== "string") {
+    return adornment;
+  }
+  const trimmedAdornment = adornment.trim();
+  if (!trimmedAdornment) {
+    return "";
+  }
+  return `${trimmedAdornment.charAt(0).toUpperCase()}${trimmedAdornment.slice(1)}`;
+};
 var InfoIcon = () => /* @__PURE__ */ jsx4("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx4(
   "path",
   {
@@ -299,7 +309,8 @@ var LSSliderInput = forwardRef2(
     ...rest
   }, ref) => {
     const isValueFloat = Boolean(isFloat || isFloatMiliseconds || isMiliseconds);
-    const rangeUnit = typeof (endAdornment ?? inputAfterText) === "string" && String(endAdornment ?? inputAfterText).trim().length ? ` ${endAdornment ?? inputAfterText}` : "";
+    const adornment = formatUnitAdornment(endAdornment ?? inputAfterText);
+    const rangeUnit = typeof adornment === "string" && adornment.trim().length ? ` ${adornment}` : "";
     const actualSliderMin = sliderMin ?? min;
     const actualSliderMax = sliderMax ?? max;
     const actualToDisplay = useCallback(
@@ -329,6 +340,17 @@ var LSSliderInput = forwardRef2(
     const displayMinimum = useMemo(() => actualToDisplay(min), [actualToDisplay, min]);
     const inputStep = allowAnyDecimal ? "any" : displayStep;
     const sliderColor = color === "secondary" ? "secondary" : "primary";
+    const defaultValueLabelFormat = useCallback(
+      (sliderValue) => {
+        const formattedValue = isFloatMiliseconds ? actualToDisplay(sliderValue) : sliderValue;
+        return adornment ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          formattedValue,
+          " ",
+          adornment
+        ] }) : formattedValue;
+      },
+      [actualToDisplay, adornment, isFloatMiliseconds]
+    );
     useEffect(() => {
       if (value !== void 0) {
         const normalizedValue = normalizeSliderValue(value);
@@ -462,7 +484,7 @@ var LSSliderInput = forwardRef2(
                 min: actualSliderMin,
                 max: actualSliderMax,
                 valueLabelDisplay,
-                valueLabelFormat: (sliderValue) => valueLabelFormat?.(sliderValue) ?? `${sliderValue}${endAdornment ?? inputAfterText ?? ""}`,
+                valueLabelFormat: valueLabelFormat ?? defaultValueLabelFormat,
                 onChange: handleSliderChanging,
                 onChangeCommitted: handleSliderChanged,
                 sx: resolvedSliderSx
@@ -494,7 +516,7 @@ var LSSliderInput = forwardRef2(
           }
         }
       ),
-      !hideInput && (endAdornment ?? inputAfterText) && /* @__PURE__ */ jsx4("div", { className: "mui-ls-slider-input-adornment", children: endAdornment ?? inputAfterText })
+      !hideInput && adornment && /* @__PURE__ */ jsx4("div", { className: "mui-ls-slider-input-adornment", children: adornment })
     ] });
     return /* @__PURE__ */ jsxs(FormControl2, { variant: "outlined", className: "mui-ls-slider-input-root", fullWidth: true, error: Boolean(rangeError), children: [
       label && /* @__PURE__ */ jsxs(InputLabel, { shrink: true, id: labelId, htmlFor: sliderInputId, children: [
@@ -668,7 +690,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import { forwardRef as forwardRef5 } from "react";
 import { useController, useFormContext } from "react-hook-form";
 import classNames3 from "classnames";
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
 var LSCheckbox = forwardRef5(({ className = "", checked, inputRef, slotProps, ...props }, ref) => {
   const CheckboxComponent = Checkbox;
   return /* @__PURE__ */ jsx7(
@@ -700,7 +722,7 @@ function LSCheckboxField({
 }) {
   const formContext = useFormContext();
   const resolvedControl = control ?? formContext?.control;
-  if (!resolvedControl) return /* @__PURE__ */ jsx7(Fragment, {});
+  if (!resolvedControl) return /* @__PURE__ */ jsx7(Fragment2, {});
   return /* @__PURE__ */ jsx7(
     LSCheckboxFieldInner,
     {
@@ -1257,7 +1279,7 @@ import Search from "@mui/icons-material/Search";
 import KeyboardArrowDown2 from "@mui/icons-material/KeyboardArrowDown";
 import Tooltip3 from "@mui/material/Tooltip";
 import {
-  Fragment as Fragment4,
+  Fragment as Fragment5,
   createContext,
   forwardRef as forwardRef8,
   useCallback as useCallback2,
@@ -1270,7 +1292,7 @@ import {
 
 // src/components/LSVariableInputField/VariableHighlightOverlay.tsx
 import {
-  Fragment as Fragment2,
+  Fragment as Fragment3,
   useEffect as useEffect4,
   useLayoutEffect,
   useMemo as useMemo3,
@@ -1278,7 +1300,7 @@ import {
   useState as useState4
 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var TOKEN_START = "{{";
 var TOKEN_END = "}}";
 var COPIED_STYLE_PROPS = [
@@ -1367,7 +1389,7 @@ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx14(
   {
     "data-desc": segment.desc || void 0,
     className: `ls-variable-highlight__token ${tokenClass(segment.type ?? "custom")}`,
-    children: segment.children ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    children: segment.children ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
       TOKEN_START,
       segment.children.map(
         (child, index) => renderSegment(child, `${key}-${index}`)
@@ -1376,7 +1398,7 @@ var renderSegment = (segment, key) => segment.token ? /* @__PURE__ */ jsx14(
     ] }) : segment.text
   },
   key
-) : /* @__PURE__ */ jsx14(Fragment2, { children: segment.text }, key);
+) : /* @__PURE__ */ jsx14(Fragment3, { children: segment.text }, key);
 var VariableHighlightOverlay = ({
   inputEl,
   value,
@@ -1498,7 +1520,7 @@ var VariableHighlightOverlay = ({
   if (!inputEl?.parentElement || !hasTokens) {
     return null;
   }
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     createPortal(
       /* @__PURE__ */ jsx14("div", { ref: layerRef, "aria-hidden": true, className: "ls-variable-highlight__layer", children: segments.map((segment, index) => renderSegment(segment, String(index))) }),
       inputEl.parentElement
@@ -1518,7 +1540,7 @@ var VariableHighlightOverlay = ({
 };
 
 // src/components/LSVariableInputField/LSVariableInputField.tsx
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 import { createElement } from "react";
 var LSVariableInputContext = createContext({});
 var LSVariableInputProvider = ({
@@ -2370,7 +2392,7 @@ value: "${valueDisplay}"`;
     const fullToken = `${rootToken}.${node.relativePath}`;
     const expanded = node.isExpandable && isPathExpanded(fullToken);
     const { displayValue, fullValue } = getVariableValuePreview(node.value);
-    return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs6(Fragment5, { children: [
       /* @__PURE__ */ jsxs6(
         "div",
         {
@@ -2405,7 +2427,7 @@ value: "${valueDisplay}"`;
       expanded && renderValueChildRows(rootToken, node.children)
     ] }, fullToken);
   });
-  const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment5, { children: [
+  const renderExampleChildRows = (variable, examples) => /* @__PURE__ */ jsxs6(Fragment6, { children: [
     /* @__PURE__ */ jsx15("div", { className: "ls-variable-picker__row ls-variable-picker__row--child ls-variable-picker__example-description", children: getSystemVariableDescription(variable) }),
     examples.map((example) => /* @__PURE__ */ jsxs6(
       "div",
@@ -2535,7 +2557,7 @@ value: "${valueDisplay}"`;
           const expanded = expandable && isPathExpanded(definition.name);
           const isLast = idx === filteredAllowedVariables.length - 1;
           const rowCls = `ls-variable-picker__row${isLast && !expanded ? " ls-variable-picker__row--no-border" : ""}`;
-          return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          return /* @__PURE__ */ jsxs6(Fragment5, { children: [
             /* @__PURE__ */ jsxs6(
               "div",
               {
@@ -2576,7 +2598,7 @@ value: "${valueDisplay}"`;
         const tree = systemVariableValueTrees.get(variable.name);
         const expandable = examples.length > 0 || !!tree && tree.length > 0;
         const expanded = expandable && isPathExpanded(rootToken);
-        return /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        return /* @__PURE__ */ jsxs6(Fragment5, { children: [
           /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -2626,7 +2648,7 @@ value: "${valueDisplay}"`;
       ref: mergedInputRef
     }
   );
-  return /* @__PURE__ */ jsxs6(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
     /* @__PURE__ */ jsx15(
       Popover,
       {
@@ -2819,7 +2841,7 @@ var VariableInputTextField = forwardRef8(
             ...inputPropsSlotInput,
             ...paramsSlotInput,
             startAdornment,
-            endAdornment: /* @__PURE__ */ jsxs6(Fragment5, { children: [
+            endAdornment: /* @__PURE__ */ jsxs6(Fragment6, { children: [
               endAdornment ?? null,
               showVariableIcon ? /* @__PURE__ */ jsx15(Tooltip3, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx15(
                 InputAdornment2,
@@ -3584,7 +3606,7 @@ import classNames10 from "classnames";
 
 // src/components/ModalChrome/PanelChrome.tsx
 import classNames9 from "classnames";
-import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 function PanelChrome({
   title,
   titleVariant = "heading",
@@ -3613,7 +3635,7 @@ function PanelChrome({
     footer ? /* @__PURE__ */ jsx21("div", { className: "ls-panel__footer", children: footer }) : null
   ] });
   if (onClickAway) {
-    return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs11(Fragment7, { children: [
       /* @__PURE__ */ jsx21("div", { className: "ls-panel__clickaway", onClick: onClickAway }),
       panel
     ] });
@@ -3895,7 +3917,7 @@ EventList.displayName = "EventList";
 // src/components/StreamStatusPanel/StreamStatusPanel.tsx
 import Tooltip5 from "@mui/material/Tooltip";
 import classNames14 from "classnames";
-import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var LS_INFO_TOOLTIP_SX = {
   backgroundColor: "#1b1834",
   border: "1px solid #393853",
@@ -3939,7 +3961,7 @@ function StreamStatusPanel({
   }
   return /* @__PURE__ */ jsxs16("div", { className: classNames14("ls-streamstatus", className), id, children: [
     hasStatus ? infoTooltip(
-      /* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment7, { children: [
+      /* @__PURE__ */ jsx27("div", { className: "ls-streamstatus__status", style: statusTooltip != null ? { cursor: "help" } : void 0, children: statusSlot ?? /* @__PURE__ */ jsxs16(Fragment8, { children: [
         /* @__PURE__ */ jsxs16("span", { className: "ls-streamstatus__indicator", children: [
           online ? /* @__PURE__ */ jsx27("span", { className: "ls-streamstatus__indicator-ping" }) : null,
           /* @__PURE__ */ jsx27("span", { className: classNames14("ls-streamstatus__indicator-dot", { "ls-streamstatus__indicator-dot--online": online }) })
@@ -4087,7 +4109,7 @@ ViewersList.displayName = "ViewersList";
 
 // src/components/ShortcutDockGrid/ShortcutDockGrid.tsx
 import classNames16 from "classnames";
-import { Fragment as Fragment9, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 var softAccent = (color) => /^#[0-9a-fA-F]{6}$/.test(color) ? `${color}66` : color;
 function ShortcutDockGrid({
   buttons,
@@ -4151,7 +4173,7 @@ function ShortcutDockGrid({
                   onTrigger?.(button.id);
                 }
               },
-              children: button.content ?? /* @__PURE__ */ jsxs18(Fragment9, { children: [
+              children: button.content ?? /* @__PURE__ */ jsxs18(Fragment10, { children: [
                 button.image ? /* @__PURE__ */ jsx29("img", { className: "ls-shortcutdock__btn-image", src: button.image, alt: "" }) : button.icon != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__icon", children: button.icon }) : null,
                 button.label != null ? /* @__PURE__ */ jsx29("span", { className: "ls-shortcutdock__label", children: button.label }) : null
               ] })
@@ -4182,7 +4204,7 @@ ShortcutDockGrid.displayName = "ShortcutDockGrid";
 // src/components/GoalsList/GoalsList.tsx
 import Tooltip6 from "@mui/material/Tooltip";
 import classNames17 from "classnames";
-import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
 var GOAL_TOOLTIP_SX = {
   backgroundColor: "#1b1834",
   border: "1px solid #393853",
@@ -4216,7 +4238,7 @@ function GoalsList({ goals, formatValue, showPercent = true, emptyText = "No goa
       /* @__PURE__ */ jsxs19("div", { className: "ls-goals__head", children: [
         goal.icon != null ? /* @__PURE__ */ jsx30("span", { className: "ls-goals__icon", children: goal.icon }) : null,
         /* @__PURE__ */ jsx30("span", { className: "ls-goals__label", children: goal.label }),
-        /* @__PURE__ */ jsx30("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment10, { children: [
+        /* @__PURE__ */ jsx30("span", { className: "ls-goals__value", children: goal.valueText ?? /* @__PURE__ */ jsxs19(Fragment11, { children: [
           fmt(goal.current ?? 0, goal),
           " ",
           /* @__PURE__ */ jsxs19("span", { className: "ls-goals__target", children: [
@@ -4268,7 +4290,7 @@ function TickBoxIcon({ className }) {
 }
 
 // src/components/ModQueueItem/ModQueueItem.tsx
-import { Fragment as Fragment11, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
 function ModQueueItem({
   username,
   avatar,
@@ -4302,7 +4324,7 @@ function ModQueueItem({
         "\u201D"
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment11, { children: [
+    /* @__PURE__ */ jsx32("div", { className: "ls-modqueue-item__actions", children: actions ?? /* @__PURE__ */ jsxs21(Fragment12, { children: [
       /* @__PURE__ */ jsx32(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onDeny, "aria-label": "Deny", children: /* @__PURE__ */ jsx32(CrossBoxIcon, { className: "ls-modqueue-item__action-icon" }) }),
       /* @__PURE__ */ jsx32(IconButton, { className: "ls-modqueue-item__iconbtn", disableRipple: true, onClick: onApprove, "aria-label": "Approve", children: /* @__PURE__ */ jsx32(TickBoxIcon, { className: "ls-modqueue-item__action-icon" }) })
     ] }) })
@@ -4357,7 +4379,7 @@ function EmptyModQueueIcon({ className }) {
 }
 
 // src/components/ModQueueList/ModQueueList.tsx
-import { Fragment as Fragment12, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
 var matches = (item, q) => {
   if (!q) {
     return true;
@@ -4409,7 +4431,7 @@ function ModQueueList({
     filtered.length === 0 ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__empty", children: [
       /* @__PURE__ */ jsx34("span", { className: "ls-modqueue__empty-icon", children: emptyIcon ?? /* @__PURE__ */ jsx34(EmptyModQueueIcon, {}) }),
       /* @__PURE__ */ jsx34("span", { children: emptyText })
-    ] }) : /* @__PURE__ */ jsxs23(Fragment12, { children: [
+    ] }) : /* @__PURE__ */ jsxs23(Fragment13, { children: [
       canModerate && (onDeny || onApprove) ? /* @__PURE__ */ jsxs23("div", { className: "ls-modqueue__bulk", children: [
         onDeny ? /* @__PURE__ */ jsxs23(ButtonBase, { className: "ls-modqueue__bulk-btn ls-modqueue__bulk-btn--deny", disableRipple: true, onClick: () => onDeny("all"), children: [
           /* @__PURE__ */ jsx34(CrossBoxIcon, { className: "ls-modqueue__bulk-icon" }),