add ui

Author: carlosabadia

assets/tailwind-theme.css

@@ -303,7 +303,7 @@
     }
 
     .mobile-only {
-        @apply flex lg:hidden;
+        @apply lg:hidden flex;
     }
 
     .desktop-only {
@@ -339,23 +339,23 @@
     }
 
     .section-content {
-        @apply flex flex-col justify-center items-center gap-10 mx-auto mb-20 px-4 lg:px-6 w-full max-w-6xl mt-4 pt-24 lg:pt-52;
+        @apply flex flex-col justify-center items-center gap-10 mx-auto mt-4 mb-20 px-4 lg:px-6 pt-24 lg:pt-52 w-full max-w-6xl;
     }
 
     .section-header {
-        @apply flex flex-col justify-center items-start lg:items-center gap-6 w-full text-start lg:text-center;
+        @apply flex flex-col justify-center items-start lg:items-center gap-6 w-full lg:text-center text-start;
     }
 
     .gradient-heading {
-        @apply inline-block bg-clip-text bg-gradient-to-r from-slate-12 to-slate-11 w-full text-balance text-center text-transparent;
+        @apply inline-block bg-clip-text bg-gradient-to-r from-slate-12 to-slate-11 w-full text-transparent text-center text-balance;
     }
 
     .table-header {
-        @apply font-small text-slate-12 w-auto justify-start pl-4 font-bold;
+        @apply justify-start pl-4 w-auto font-small font-bold text-slate-12;
     }
 
     /* .tab-style {
-        @apply text-slate-9 cursor-pointer hover:text-slate-11 px-2 py-1 text-sm font-medium data-[state='active']:text-violet-9 not-[data-state='active']:text-slate-11;
+        @apply px-2 py-1 font-medium text-slate-9 data-[state='active']:text-violet-9 not-[data-state='active']:text-slate-11 hover:text-slate-11 text-sm cursor-pointer;
     } */
 
     @keyframes enterFromRight {
@@ -491,17 +491,27 @@
     }
 }
 
+@property --border-angle {
+    inherits: false;
+    initial-value: 0deg;
+    syntax: '<angle>';
+}
+
 @layer utilities {
-      /* Hide scrollbar for Chrome, Safari and Opera */
-      .no-scrollbar::-webkit-scrollbar {
-          display: none;
-      }
-     /* Hide scrollbar for IE, Edge and Firefox */
-      .no-scrollbar {
-          -ms-overflow-style: none;  /* IE and Edge */
-          scrollbar-width: none;  /* Firefox */
-    }
-  }
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Hide scrollbar for IE, Edge and Firefox */
+    .no-scrollbar {
+        -ms-overflow-style: none;
+        /* IE and Edge */
+        scrollbar-width: none;
+        /* Firefox */
+    }
+}
 
 .v-link {
     /* text-decoration: underline; */

pcweb/components/icons/icons.py

@@ -423,6 +423,12 @@
 <path d="M11.826 9H11C10.0572 9 9.58579 9 9.29289 9.29289C9 9.58579 9 10.0572 9 11V19.5C9 20.4428 9 20.9142 9.29289 21.2071C9.58579 21.5 10.0572 21.5 11 21.5H11.5C12.4428 21.5 12.9142 21.5 13.2071 21.2071C13.5 20.9142 13.5 20.4428 13.5 19.5L13.5001 16.0001C13.5001 14.3433 14.0281 13.0001 15.5879 13.0001C16.3677 13.0001 17 13.6717 17 14.5001V19.0001C17 19.9429 17 20.4143 17.2929 20.7072C17.5857 21.0001 18.0572 21.0001 19 21.0001H19.4987C20.4413 21.0001 20.9126 21.0001 21.2055 20.7073C21.4984 20.4145 21.4985 19.9432 21.4987 19.0006L21.5001 13.5002C21.5001 11.015 19.1364 9.00024 16.7968 9.00024C15.4649 9.00024 14.2767 9.65309 13.5001 10.674C13.5 10.0439 13.5 9.72893 13.3632 9.495C13.2765 9.34686 13.1531 9.22353 13.005 9.13687C12.7711 9 12.4561 9 11.826 9Z" fill="currentColor"></path>
 </svg>"""
 
+image_03 = """<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 25" fill="none" class="injected-svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" color="currentColor">
+<path d="M14 3.5H10C6.22876 3.5 4.34315 3.5 3.17157 4.67157C2 5.84315 2 7.72876 2 11.5V13.5C2 17.2712 2 19.1569 3.17157 20.3284C4.34315 21.5 6.22876 21.5 10 21.5H14C17.7712 21.5 19.6569 21.5 20.8284 20.3284C22 19.1569 22 17.2712 22 13.5V11.5C22 7.72876 22 5.84315 20.8284 4.67157C19.6569 3.5 17.7712 3.5 14 3.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+<circle cx="8.5" cy="9" r="1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle>
+<path d="M21.5 17.5L16.348 11.8797C16.1263 11.6377 15.8131 11.5 15.485 11.5C15.1744 11.5 14.8766 11.6234 14.6571 11.8429L10 16.5L7.83928 14.3393C7.62204 14.122 7.32741 14 7.02019 14C6.68931 14 6.37423 14.1415 6.15441 14.3888L2.5 18.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>"""
+
 ICONS = {
     # Socials
     "github": github,
@@ -481,6 +487,7 @@
     "arrow_top_right": arrow_top_right,
     "quote": quote,
     "linkedin": linkedin,
+    "image-03": image_03,
 }
 
 LiteralIcon = Literal[
@@ -539,6 +546,7 @@
     "arrow_top_right",
     "quote",
     "linkedin",
+    "image-03",
 ]
 
 

pcweb/components/tabs.py

@@ -8,18 +8,25 @@
 from reflex.components.component import ComponentNamespace
 from reflex.event import EventHandler
 from reflex.vars import Var
+from reflex.utils.imports import ImportVar
 
 
 class BaseUIComponent(Component):
     """Set of content sections to be displayed one at a time."""
 
-    library = "@base-ui-components/react@^1.0.0-alpha.5"
+    lib_dependencies: list[str] = ["@base-ui-components/react@^1.0.0-alpha.8"]
 
 
 class TabsBaseUIComponent(BaseUIComponent):
-    """Tabs component."""
-
-    tag = "Tabs"
+    library = "@base-ui-components/react/tabs"
+
+    @property
+    def import_var(self):
+        return ImportVar(
+            tag="Tabs",
+            package_path="",
+            install=False,
+        )
 
 
 class TabsRoot(TabsBaseUIComponent):