@sofya-ds/react 1.1.7 → 1.1.8

package/dist/index.js

@@ -3860,11 +3860,188 @@ var Separator2 = React22.forwardRef(function Separator3({ className, decorative
 });
 Separator2.displayName = SeparatorPrimitive.Root.displayName;
 
-// src/components/skeleton.tsx
+// src/components/slider.tsx
 import * as React23 from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var Skeleton = React23.forwardRef(function Skeleton2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx26(
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+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__ */ jsxs15(
+    "div",
+    {
+      "data-slot": "slider",
+      className: cn("grid w-full gap-2", className),
+      children: [
+        label || showValue ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between gap-4", children: [
+          label ? /* @__PURE__ */ jsx26(
+            "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__ */ jsx26("span", {}),
+          showValue ? /* @__PURE__ */ jsx26(
+            "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__ */ jsxs15(
+          "div",
+          {
+            "data-slot": "slider-control",
+            className: cn("relative h-8 w-full", sliderClassName),
+            children: [
+              /* @__PURE__ */ jsx26(
+                "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__ */ jsx26(
+                "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__ */ jsx26(
+                "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__ */ jsx26(
+                "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
+import * as React24 from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Skeleton = React24.forwardRef(function Skeleton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ref,
@@ -3879,18 +4056,18 @@ var Skeleton = React23.forwardRef(function Skeleton2({ className, ...props }, re
 Skeleton.displayName = "Skeleton";
 
 // src/components/sonner.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var notificationVariantOptions = ["default", "success", "error", "warning"];
 function ToastStatusIcon({
   iconName,
   className
 }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
       "aria-hidden": "true",
@@ -3898,7 +4075,7 @@ function ToastStatusIcon({
         "inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border shadow-sofya-sm",
         className
       ),
-      children: /* @__PURE__ */ jsx27(Icon, { name: iconName, size: 16 })
+      children: /* @__PURE__ */ jsx28(Icon, { name: iconName, size: 16 })
     }
   );
 }
@@ -3919,35 +4096,35 @@ var defaultToastClassNames = {
   loading: "border-border bg-card text-foreground"
 };
 var defaultToastIcons = {
-  success: /* @__PURE__ */ jsx27(
+  success: /* @__PURE__ */ jsx28(
     ToastStatusIcon,
     {
       iconName: "check",
       className: "border-success/15 bg-success/12 text-success"
     }
   ),
-  error: /* @__PURE__ */ jsx27(
+  error: /* @__PURE__ */ jsx28(
     ToastStatusIcon,
     {
       iconName: "x",
       className: "border-destructive/15 bg-destructive/12 text-destructive"
     }
   ),
-  warning: /* @__PURE__ */ jsx27(
+  warning: /* @__PURE__ */ jsx28(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-warning/20 bg-warning/15 text-foreground"
     }
   ),
-  info: /* @__PURE__ */ jsx27(
+  info: /* @__PURE__ */ jsx28(
     ToastStatusIcon,
     {
       iconName: "question",
       className: "border-primary/15 bg-primary/10 text-primary"
     }
   ),
-  close: /* @__PURE__ */ jsx27(Icon, { name: "x", size: 12 })
+  close: /* @__PURE__ */ jsx28(Icon, { name: "x", size: 12 })
 };
 function mergeToastClassNames(overrides) {
   return {
@@ -3955,7 +4132,7 @@ function mergeToastClassNames(overrides) {
     ...overrides
   };
 }
-var Toaster = React24.forwardRef(
+var Toaster = React25.forwardRef(
   function Toaster2({
     className,
     closeButton = true,
@@ -3967,7 +4144,7 @@ var Toaster = React24.forwardRef(
     visibleToasts = 5,
     ...props
   }, ref) {
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       SonnerToaster,
       {
         ref,
@@ -3997,10 +4174,10 @@ var Toaster = React24.forwardRef(
 Toaster.displayName = "Toaster";
 
 // src/components/spinner.tsx
-import * as React25 from "react";
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { jsx as jsx29, jsxs as jsxs16 } from "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,
@@ -4009,7 +4186,7 @@ var Spinner = React25.forwardRef(function Spinner2({
   ...props
 }, ref) {
   const ariaLabel = ariaLabelProp ?? (ariaLabelledby ? void 0 : "Loading");
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "svg",
     {
       ref,
@@ -4027,8 +4204,8 @@ var Spinner = React25.forwardRef(function Spinner2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx28("circle", { cx: "12", cy: "12", r: "9", className: "opacity-20", stroke: "currentColor", strokeWidth: "3" }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29("circle", { cx: "12", cy: "12", r: "9", className: "opacity-20", stroke: "currentColor", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx29(
           "path",
           {
             d: "M21 12A9 9 0 0 0 12 3",
@@ -4044,11 +4221,11 @@ var Spinner = React25.forwardRef(function Spinner2({
 Spinner.displayName = "Spinner";
 
 // src/components/switch.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Switch = React26.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx29(
+import { jsx as jsx30 } from "react/jsx-runtime";
+var Switch = React27.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx30(
     SwitchPrimitives.Root,
     {
       className: cn(
@@ -4057,7 +4234,7 @@ var Switch = React26.forwardRef(({ className, ...props }, ref) => {
       ),
       ...props,
       ref,
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         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"
@@ -4070,8 +4247,8 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/table.tsx
 import { cva as cva8 } from "class-variance-authority";
-import * as React27 from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import * as React28 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
   "active",
@@ -4129,13 +4306,13 @@ var inheritedTextStyle = {
   letterSpacing: "inherit",
   color: "inherit"
 };
-var Table = React27.forwardRef(function Table2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var Table = React28.forwardRef(function Table2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsx30(
+      children: /* @__PURE__ */ jsx31(
         "table",
         {
           "data-slot": "table",
@@ -4150,8 +4327,8 @@ var Table = React27.forwardRef(function Table2({ className, ...props }, ref) {
     }
   );
 });
-var TableHeader = React27.forwardRef(function TableHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableHeader = React28.forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "thead",
     {
       "data-slot": "table-header",
@@ -4164,8 +4341,8 @@ var TableHeader = React27.forwardRef(function TableHeader2({ className, ...props
     }
   );
 });
-var TableBody = React27.forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableBody = React28.forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "tbody",
     {
       "data-slot": "table-body",
@@ -4175,8 +4352,8 @@ var TableBody = React27.forwardRef(function TableBody2({ className, ...props },
     }
   );
 });
-var TableFooter = React27.forwardRef(function TableFooter2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableFooter = React28.forwardRef(function TableFooter2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -4189,8 +4366,8 @@ var TableFooter = React27.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React27.forwardRef(function TableRow2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableRow = React28.forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "tr",
     {
       "data-slot": "table-row",
@@ -4203,8 +4380,8 @@ var TableRow = React27.forwardRef(function TableRow2({ className, ...props }, re
     }
   );
 });
-var TableHead = React27.forwardRef(function TableHead2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableHead = React28.forwardRef(function TableHead2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "th",
     {
       "data-slot": "table-head",
@@ -4223,9 +4400,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__ */ jsx30(
+    return /* @__PURE__ */ jsx31(
       "td",
       {
         "data-slot": "table-cell",
@@ -4242,8 +4419,8 @@ var TableCell = React27.forwardRef(
     );
   }
 );
-var TableCaption = React27.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableCaption = React28.forwardRef(function TableCaption2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "caption",
     {
       "data-slot": "table-caption",
@@ -4268,7 +4445,7 @@ function TableStatusBadge({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     Badge,
     {
       variant: "pill",
@@ -4283,8 +4460,8 @@ function TableStatusBadge({
     }
   );
 }
-var TableActionButton = React27.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableActionButton = React28.forwardRef(function TableActionButton2({ className, tone, type = "button", children, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     Button,
     {
       ref,
@@ -4302,8 +4479,8 @@ var TableActionButton = React27.forwardRef(function TableActionButton2({ classNa
     }
   );
 });
-var TableActions = React27.forwardRef(function TableActions2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx30(
+var TableActions = React28.forwardRef(function TableActions2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       ref,
@@ -4324,10 +4501,10 @@ TableActionButton.displayName = "TableActionButton";
 TableActions.displayName = "TableActions";
 
 // src/components/tabs.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { motion as motion3 } from "motion/react";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function resolveDefaultValue(items, defaultValue) {
   if (defaultValue) {
     return defaultValue;
@@ -4347,15 +4524,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);
@@ -4364,7 +4541,7 @@ function Tabs({
     },
     [isControlled, onValueChange]
   );
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     TabsPrimitive.Root,
     {
       className: cn("w-full", className),
@@ -4372,7 +4549,7 @@ function Tabs({
       value: currentValue,
       ...props,
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           TabsPrimitive.List,
           {
             "aria-label": "Subtelas navegaveis",
@@ -4383,7 +4560,7 @@ function Tabs({
             children: items.map((item) => {
               const isUnavailable = item.disabled || item.loading;
               const isActive = item.value === currentValue;
-              return /* @__PURE__ */ jsxs16(
+              return /* @__PURE__ */ jsxs17(
                 TabsPrimitive.Trigger,
                 {
                   value: item.value,
@@ -4395,7 +4572,7 @@ function Tabs({
                     item.triggerClassName
                   ),
                   children: [
-                    isActive ? /* @__PURE__ */ jsx31(
+                    isActive ? /* @__PURE__ */ jsx32(
                       motion3.span,
                       {
                         "aria-hidden": "true",
@@ -4405,15 +4582,15 @@ function Tabs({
                         transition: { duration: 0.25, ease: "easeInOut" }
                       }
                     ) : null,
-                    /* @__PURE__ */ jsxs16("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
-                      item.loading ? /* @__PURE__ */ jsx31(
+                    /* @__PURE__ */ jsxs17("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+                      item.loading ? /* @__PURE__ */ jsx32(
                         "span",
                         {
                           "aria-hidden": "true",
                           className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent"
                         }
                       ) : null,
-                      /* @__PURE__ */ jsx31("span", { children: renderTextContent(item.label, {
+                      /* @__PURE__ */ jsx32("span", { children: renderTextContent(item.label, {
                         as: "span",
                         className: "block text-inherit",
                         size: "h5"
@@ -4427,7 +4604,7 @@ function Tabs({
           }
         ),
         items.map(
-          (item) => item.content !== void 0 ? /* @__PURE__ */ jsx31(
+          (item) => item.content !== void 0 ? /* @__PURE__ */ jsx32(
             TabsPrimitive.Content,
             {
               value: item.value,
@@ -4450,9 +4627,9 @@ function Tabs({
 Tabs.displayName = "Tabs";
 
 // src/components/textarea.tsx
-import * as React29 from "react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
-var Textarea = React29.forwardRef(
+import * as React30 from "react";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+var Textarea = React30.forwardRef(
   ({
     className,
     containerClassName,
@@ -4462,10 +4639,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__ */ jsx32(
+    const control = /* @__PURE__ */ jsx33(
       "textarea",
       {
         className: cn(
@@ -4482,8 +4659,8 @@ var Textarea = React29.forwardRef(
     if (!label && !containerClassName) {
       return control;
     }
-    return /* @__PURE__ */ jsxs17("div", { className: cn("grid w-full gap-2", containerClassName), children: [
-      label ? /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsxs18("div", { className: cn("grid w-full gap-2", containerClassName), children: [
+      label ? /* @__PURE__ */ jsx33(
         "label",
         {
           className: cn(
@@ -4508,14 +4685,14 @@ var Textarea = React29.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/components/tooltip.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "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__ */ jsx33(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx33(
+var TooltipContent = React31.forwardRef(function TooltipContent2({ className, sideOffset = 8, ...props }, ref) {
+  return /* @__PURE__ */ jsx34(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx34(
     TooltipPrimitive.Content,
     {
       ref,
@@ -4539,13 +4716,13 @@ var TooltipContent = React30.forwardRef(function TooltipContent2({ className, si
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/theme/provider.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import {
   createWhitelabelTheme,
   defaultTheme,
   themeToCssVariables
 } from "@sofya-ds/tokens";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var SOFYA_FONT_LINKS = [
   {
     id: "preconnect-googleapis",
@@ -4565,7 +4742,7 @@ var SOFYA_FONT_LINKS = [
   }
 ];
 function useSofyaFontLinks() {
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -4598,7 +4775,7 @@ function SofyaProvider({
   useSofyaFontLinks();
   const theme = createWhitelabelTheme(overrides ?? {}, preset);
   const cssVariables = themeToCssVariables(theme);
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       "data-sofya-theme": theme.name,
@@ -4710,6 +4887,7 @@ export {
   SelectValue,
   Separator2 as Separator,
   Skeleton,
+  Slider,
   SofyaProvider,
   Spinner,
   Surface,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/react",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Sofya React design system with official brand tokens, provider and UI components.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -58,7 +58,7 @@
     "motion": "^12.38.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "@sofya-ds/tokens": "1.1.7"
+    "@sofya-ds/tokens": "1.1.8"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",