@sofya-ds/react 1.1.7 → 1.1.9

package/dist/index.cjs

@@ -109,6 +109,7 @@ __export(index_exports, {
   SelectValue: () => SelectValue,
   Separator: () => Separator2,
   Skeleton: () => Skeleton,
+  Slider: () => Slider,
   SofyaProvider: () => SofyaProvider,
   Spinner: () => Spinner,
   Surface: () => Surface,
@@ -1172,8 +1173,8 @@ var buttonVariants = (0, import_class_variance_authority4.cva)(
         icon: "border-0 bg-primary/10 text-primary shadow-sofya-sm hover:bg-primary/15",
         language: "border-0 bg-muted bg-cover bg-center bg-no-repeat text-primary-foreground shadow-none hover:brightness-[1.03]",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85",
-        outline: "border border-primary/15 !bg-transparent text-foreground hover:border-primary/30 hover:!bg-transparent active:!bg-transparent",
-        ghost: "text-foreground hover:bg-muted",
+        outline: "border border-primary/15 bg-background text-foreground hover:border-primary/30 hover:bg-background active:bg-background",
+        ghost: "bg-background text-foreground hover:bg-muted",
         destructive: "bg-destructive text-destructive-foreground hover:brightness-[1.04]"
       },
       size: {
@@ -1297,7 +1298,7 @@ var Button = React6.forwardRef(
     const showSpinner = loadingPhase === "loading";
     const iconOnlyActionClassName = isIconOnlyAction ? cn(
       "h-10 w-10 rounded-[10px] border-0 p-2 text-primary shadow-none",
-      active ? "bg-[color:var(--sofya-surface-selected)] hover:bg-[color:var(--sofya-surface-selected)]" : "bg-transparent hover:bg-transparent"
+      active ? "bg-[color:var(--sofya-surface-selected)] hover:bg-[color:var(--sofya-surface-selected)]" : "bg-background hover:bg-background"
     ) : void 0;
     const languageButtonClassName = isLanguageButton ? cn(
       "min-w-0 overflow-hidden border-0 text-primary-foreground shadow-none",
@@ -4051,11 +4052,188 @@ var Separator2 = React22.forwardRef(function Separator3({ className, decorative
 });
 Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
-// src/components/skeleton.tsx
+// src/components/slider.tsx
 var React23 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Skeleton = React23.forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+function clampSliderValue(value, min, max) {
+  if (Number.isNaN(value)) {
+    return min;
+  }
+  return Math.min(Math.max(value, min), max);
+}
+function resolveSliderMax(min, max) {
+  if (typeof max === "number" && max > min) {
+    return max;
+  }
+  return min + 100;
+}
+function isTextValue(value) {
+  return typeof value === "string" || typeof value === "number";
+}
+var Slider = React23.forwardRef(function Slider2({
+  className,
+  defaultValue,
+  formatValue,
+  id,
+  label,
+  labelClassName,
+  max,
+  min = 0,
+  onChange,
+  onValueChange,
+  rangeClassName,
+  sliderClassName,
+  showValue = true,
+  step = 1,
+  thumbClassName,
+  trackClassName,
+  value,
+  valueClassName,
+  ...props
+}, ref) {
+  const resolvedId = React23.useId();
+  const inputId = id ?? resolvedId;
+  const safeMin = min;
+  const safeMax = resolveSliderMax(safeMin, max);
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React23.useState(
+    () => clampSliderValue(defaultValue ?? safeMin, safeMin, safeMax)
+  );
+  React23.useEffect(() => {
+    if (isControlled) {
+      return;
+    }
+    setInternalValue(
+      (currentValue2) => clampSliderValue(currentValue2, safeMin, safeMax)
+    );
+  }, [isControlled, safeMax, safeMin]);
+  const currentValue = isControlled ? clampSliderValue(value ?? safeMin, safeMin, safeMax) : internalValue;
+  const valuePercentage = safeMax === safeMin ? 0 : (currentValue - safeMin) / (safeMax - safeMin) * 100;
+  const formattedValue = formatValue?.(currentValue) ?? currentValue.toString();
+  const formattedValueText = isTextValue(formattedValue) ? String(formattedValue) : void 0;
+  const handleChange = (event) => {
+    const nextValue = clampSliderValue(
+      Number(event.currentTarget.value),
+      safeMin,
+      safeMax
+    );
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(event);
+    onValueChange?.(nextValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      "data-slot": "slider",
+      className: cn("grid w-full gap-2", className),
+      children: [
+        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "label",
+            {
+              htmlFor: inputId,
+              className: cn(
+                "min-w-0 text-[color:var(--sofya-text-default)]",
+                labelClassName
+              ),
+              children: renderTextContent(label, {
+                as: "span",
+                className: "block text-[color:var(--sofya-text-default)]",
+                size: "body",
+                style: {
+                  fontWeight: 500
+                }
+              })
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", {}),
+          showValue ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            "div",
+            {
+              className: cn(
+                "shrink-0 text-[color:var(--sofya-text-subtle)]",
+                valueClassName
+              ),
+              children: renderTextContent(formattedValue, {
+                as: "span",
+                className: "block text-[color:var(--sofya-text-subtle)]",
+                size: "body",
+                style: {
+                  fontWeight: 500
+                }
+              })
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+          "div",
+          {
+            "data-slot": "slider-control",
+            className: cn("relative h-8 w-full", sliderClassName),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "input",
+                {
+                  ...props,
+                  ref,
+                  id: inputId,
+                  type: "range",
+                  min: safeMin,
+                  max: safeMax,
+                  step,
+                  value: currentValue,
+                  "aria-valuetext": props["aria-valuetext"] ?? formattedValueText,
+                  className: "peer absolute inset-0 z-20 m-0 h-full w-full cursor-pointer appearance-none bg-transparent opacity-0 disabled:cursor-not-allowed",
+                  onChange: handleChange
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "div",
+                {
+                  "data-slot": "slider-track",
+                  className: cn(
+                    "pointer-events-none absolute left-0 top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-[color:var(--sofya-surface-muted-strong)] transition-colors duration-sofya ease-sofya peer-disabled:opacity-60",
+                    trackClassName
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "div",
+                {
+                  "data-slot": "slider-range",
+                  className: cn(
+                    "pointer-events-none absolute left-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary transition-[width,background-color] duration-sofya ease-sofya peer-disabled:opacity-60",
+                    rangeClassName
+                  ),
+                  style: { width: `${valuePercentage}%` }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                "div",
+                {
+                  "data-slot": "slider-thumb",
+                  className: cn(
+                    "pointer-events-none absolute top-1/2 z-10 h-5 w-5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow-[var(--sofya-shadow-soft)] transition-[left,transform,background-color,border-color,box-shadow] duration-sofya ease-sofya peer-focus-visible:ring-4 peer-focus-visible:ring-[color:var(--sofya-focus-ring-soft)] peer-disabled:opacity-60",
+                    thumbClassName
+                  ),
+                  style: { left: `${valuePercentage}%` }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+
+// src/components/skeleton.tsx
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var Skeleton = React24.forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       ref,
@@ -4070,15 +4248,15 @@ var Skeleton = React23.forwardRef(function Skeleton2({ className, ...props }, re
 Skeleton.displayName = "Skeleton";
 
 // src/components/sonner.tsx
-var React24 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 var import_sonner = require("sonner");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var notificationVariantOptions = ["default", "success", "error", "warning"];
 function ToastStatusIcon({
   iconName,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "span",
     {
       "aria-hidden": "true",
@@ -4086,7 +4264,7 @@ function ToastStatusIcon({
         "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: iconName, size: 16 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: iconName, size: 16 })
     }
   );
 }
@@ -4107,35 +4285,35 @@ var defaultToastClassNames = {
   loading: "border-border bg-card text-foreground"
 };
 var defaultToastIcons = {
-  success: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  success: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     ToastStatusIcon,
     {
       iconName: "check",
       className: "border-success/15 bg-success/12 text-success"
     }
   ),
-  error: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  error: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     ToastStatusIcon,
     {
       iconName: "x",
       className: "border-destructive/15 bg-destructive/12 text-destructive"
     }
   ),
-  warning: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  warning: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-warning/20 bg-warning/15 text-foreground"
     }
   ),
-  info: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  info: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-primary/15 bg-primary/10 text-primary"
     }
   ),
-  close: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: "x", size: 12 })
+  close: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "x", size: 12 })
 };
 function mergeToastClassNames(overrides) {
   return {
@@ -4143,7 +4321,7 @@ function mergeToastClassNames(overrides) {
     ...overrides
   };
 }
-var Toaster = React24.forwardRef(
+var Toaster = React25.forwardRef(
   function Toaster2({
     className,
     closeButton = true,
@@ -4155,7 +4333,7 @@ var Toaster = React24.forwardRef(
     visibleToasts = 5,
     ...props
   }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_sonner.Toaster,
       {
         ref,
@@ -4185,10 +4363,10 @@ var Toaster = React24.forwardRef(
 Toaster.displayName = "Toaster";
 
 // src/components/spinner.tsx
-var React25 = __toESM(require("react"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var React26 = __toESM(require("react"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var spinnerSizeOptions = ["sm", "default", "lg"];
-var Spinner = React25.forwardRef(function Spinner2({
+var Spinner = React26.forwardRef(function Spinner2({
   "aria-label": ariaLabelProp,
   "aria-labelledby": ariaLabelledby,
   className,
@@ -4197,7 +4375,7 @@ var Spinner = React25.forwardRef(function Spinner2({
   ...props
 }, ref) {
   const ariaLabel = ariaLabelProp ?? (ariaLabelledby ? void 0 : "Loading");
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "svg",
     {
       ref,
@@ -4215,8 +4393,8 @@ var Spinner = React25.forwardRef(function Spinner2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "9", className: "opacity-20", stroke: "currentColor", strokeWidth: "3" }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("circle", { cx: "12", cy: "12", r: "9", className: "opacity-20", stroke: "currentColor", strokeWidth: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "path",
           {
             d: "M21 12A9 9 0 0 0 12 3",
@@ -4232,11 +4410,11 @@ var Spinner = React25.forwardRef(function Spinner2({
 Spinner.displayName = "Spinner";
 
 // src/components/switch.tsx
-var React26 = __toESM(require("react"), 1);
+var React27 = __toESM(require("react"), 1);
 var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Switch = React26.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Switch = React27.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     SwitchPrimitives.Root,
     {
       className: cn(
@@ -4245,7 +4423,7 @@ var Switch = React26.forwardRef(({ className, ...props }, ref) => {
       ),
       ...props,
       ref,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         SwitchPrimitives.Thumb,
         {
           className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-sm ring-0 transition-transform duration-sofya ease-sofya data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
@@ -4258,8 +4436,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var React27 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var React28 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
   "active",
@@ -4317,13 +4495,13 @@ var inheritedTextStyle = {
   letterSpacing: "inherit",
   color: "inherit"
 };
-var Table = React27.forwardRef(function Table2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var Table = React28.forwardRef(function Table2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -4338,8 +4516,8 @@ var Table = React27.forwardRef(function Table2({ className, ...props }, ref) {
     }
   );
 });
-var TableHeader = React27.forwardRef(function TableHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableHeader = React28.forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -4352,8 +4530,8 @@ var TableHeader = React27.forwardRef(function TableHeader2({ className, ...props
     }
   );
 });
-var TableBody = React27.forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableBody = React28.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -4363,8 +4541,8 @@ var TableBody = React27.forwardRef(function TableBody2({ className, ...props },
     }
   );
 });
-var TableFooter = React27.forwardRef(function TableFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableFooter = React28.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -4377,8 +4555,8 @@ var TableFooter = React27.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React27.forwardRef(function TableRow2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableRow = React28.forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -4391,8 +4569,8 @@ var TableRow = React27.forwardRef(function TableRow2({ className, ...props }, re
     }
   );
 });
-var TableHead = React27.forwardRef(function TableHead2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableHead = React28.forwardRef(function TableHead2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -4411,9 +4589,9 @@ var TableHead = React27.forwardRef(function TableHead2({ className, children, ..
     }
   );
 });
-var TableCell = React27.forwardRef(
+var TableCell = React28.forwardRef(
   function TableCell2({ className, variant, children, ...props }, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "td",
       {
         "data-slot": "table-cell",
@@ -4430,8 +4608,8 @@ var TableCell = React27.forwardRef(
     );
   }
 );
-var TableCaption = React27.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableCaption = React28.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "caption",
     {
       "data-slot": "table-caption",
@@ -4456,7 +4634,7 @@ function TableStatusBadge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Badge,
     {
       variant: "pill",
@@ -4471,8 +4649,8 @@ function TableStatusBadge({
     }
   );
 }
-var TableActionButton = React27.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableActionButton = React28.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Button,
     {
       ref,
@@ -4490,8 +4668,8 @@ var TableActionButton = React27.forwardRef(function TableActionButton2({ classNa
     }
   );
 });
-var TableActions = React27.forwardRef(function TableActions2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var TableActions = React28.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       ref,
@@ -4512,10 +4690,10 @@ TableActionButton.displayName = "TableActionButton";
 TableActions.displayName = "TableActions";
 
 // src/components/tabs.tsx
-var React28 = __toESM(require("react"), 1);
+var React29 = __toESM(require("react"), 1);
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
 var import_react3 = require("motion/react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -4535,15 +4713,15 @@ function Tabs({
 }) {
   const resolvedDefaultValue = resolveDefaultValue(items, defaultValue);
   const isControlled = value !== void 0;
-  const [selectedValue, setSelectedValue] = React28.useState(resolvedDefaultValue);
-  const indicatorLayoutId = React28.useId();
+  const [selectedValue, setSelectedValue] = React29.useState(resolvedDefaultValue);
+  const indicatorLayoutId = React29.useId();
   const currentValue = isControlled ? value : selectedValue;
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (!isControlled) {
       setSelectedValue(resolvedDefaultValue);
     }
   }, [isControlled, resolvedDefaultValue]);
-  const handleValueChange = React28.useCallback(
+  const handleValueChange = React29.useCallback(
     (nextValue) => {
       if (!isControlled) {
         setSelectedValue(nextValue);
@@ -4552,7 +4730,7 @@ function Tabs({
     },
     [isControlled, onValueChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -4560,7 +4738,7 @@ function Tabs({
       value: currentValue,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
@@ -4571,7 +4749,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -4583,7 +4761,7 @@ function Tabs({
                     item.triggerClassName
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    isActive ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                       import_react3.motion.span,
                       {
                         "aria-hidden": "true",
@@ -4593,15 +4771,15 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
-                      item.loading ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                      item.loading ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
                         }
                       ) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { children: renderTextContent(item.label, {
+                      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
                         size: "h5"
@@ -4615,7 +4793,7 @@ function Tabs({
           }
         ),
         items.map(
-          (item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          (item) => item.content !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             TabsPrimitive.Content,
             {
               value: item.value,
@@ -4638,9 +4816,9 @@ function Tabs({
 Tabs.displayName = "Tabs";
 
 // src/components/textarea.tsx
-var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Textarea = React29.forwardRef(
+var React30 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Textarea = React30.forwardRef(
   ({
     className,
     containerClassName,
@@ -4650,10 +4828,10 @@ var Textarea = React29.forwardRef(
     rows = 5,
     ...props
   }, ref) => {
-    const generatedId = React29.useId();
+    const generatedId = React30.useId();
     const resolvedId = id ?? generatedId;
     const ariaLabel = props["aria-label"] ?? (typeof label === "string" ? label : void 0);
-    const control = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "textarea",
       {
         className: cn(
@@ -4670,8 +4848,8 @@ var Textarea = React29.forwardRef(
     if (!label && !containerClassName) {
       return control;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("grid w-full gap-2", containerClassName), children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "label",
         {
           className: cn(
@@ -4696,14 +4874,14 @@ var Textarea = React29.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/tooltip.tsx
-var React30 = __toESM(require("react"), 1);
+var React31 = __toESM(require("react"), 1);
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React30.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+var TooltipContent = React31.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     TooltipPrimitive.Content,
     {
       ref,
@@ -4727,9 +4905,9 @@ var TooltipContent = React30.forwardRef(function TooltipContent2({ className, si
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/theme/provider.tsx
-var React31 = __toESM(require("react"), 1);
+var React32 = __toESM(require("react"), 1);
 var import_tokens = require("@sofya-ds/tokens");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var SOFYA_FONT_LINKS = [
   {
     id: "preconnect-googleapis",
@@ -4749,7 +4927,7 @@ var SOFYA_FONT_LINKS = [
   }
 ];
 function useSofyaFontLinks() {
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -4782,7 +4960,7 @@ function SofyaProvider({
   useSofyaFontLinks();
   const theme = (0, import_tokens.createWhitelabelTheme)(overrides ?? {}, preset);
   const cssVariables = (0, import_tokens.themeToCssVariables)(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       "data-sofya-theme": theme.name,
@@ -4877,6 +5055,7 @@ var import_tokens2 = require("@sofya-ds/tokens");
   SelectValue,
   Separator,
   Skeleton,
+  Slider,
   SofyaProvider,
   Spinner,
   Surface,