fix broken variables

Author: lsouoliveira

lib/ruby_ui/sidebar/collapsiable_sidebar.rb

@@ -39,7 +39,7 @@ def sidebar_attrs
     def gap_element_attrs
       {
         class: [
-          "relative w-[--sidebar-width] bg-transparent transition-[width]",
+          "relative w-[var(--sidebar-width)] bg-transparent transition-[width]",
           "duration-200 ease-linear",
           "group-data-[collapsible=offcanvas]:w-0",
           "group-data-[side=right]:rotate-180",
@@ -51,7 +51,7 @@ def gap_element_attrs
     def content_wrapper_attrs
       {
         class: [
-          "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width]",
+          "fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)]",
           "transition-[left,right,width] duration-200 ease-linear md:flex",
           content_wrapper_side_classes,
           content_wrapper_variant_classes
@@ -78,7 +78,7 @@ def variant_classes
       if %i[floating inset].include?(@variant)
         "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
       else
-        "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+        "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]"
       end
     end
 
@@ -92,7 +92,7 @@ def content_wrapper_variant_classes
       if %i[floating inset].include?(@variant)
         "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
       else
-        "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l"
+        "group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l"
       end
     end
   end

lib/ruby_ui/sidebar/mobile_sidebar.rb

@@ -13,7 +13,7 @@ def view_template(&)
       Sheet(**attrs) do
         SheetContent(
           side: @side,
-          class: "w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+          class: "w-[var(--sidebar-width)] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
           style: {
             "--sidebar-width": SIDEBAR_WIDTH_MOBILE
           },

lib/ruby_ui/sidebar/non_collapsible_sidebar.rb

@@ -10,7 +10,7 @@ def view_template(&)
 
     def default_attrs
       {
-        class: "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground"
+        class: "flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground"
       }
     end
   end

lib/ruby_ui/sidebar/sidebar_menu_skeleton.rb

@@ -11,7 +11,7 @@ def view_template(&)
       div(**attrs) do
         Skeleton(class: "size-4 rounded-md", data: {sidebar: "menu-skeleton-icon"}) if @show_icon
         Skeleton(
-          class: "h-4 max-w-[--skeleton-width] flex-1",
+          class: "h-4 max-w-[var(--skeleton-width)] flex-1",
           data: {sidebar: "menu-skeleton-text"},
           style: {"--skeleton-width" => "#{skeleton_width}%"}
         )