@syscore/ui-library 1.20.0 → 1.22.0

package/client/global.css

@@ -1432,6 +1432,8 @@ body {
 
 .well-input ::placeholder {
   color: var(--color-gray-500, #71747d);
+  font-family: "Mazzard Soft M", serif;
+  font-weight: 400;
 }
 
 .well-input [type="file"] {
@@ -1553,12 +1555,14 @@ body {
 /* Checkbox Styles */
 .checkbox {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 0.875rem;
-  width: 0.875rem;
+  width: 16px;
+  height: 16px;
   flex-shrink: 0;
-  border-radius: var(--radius-xs, 3px);
+  aspect-ratio: 1 / 1;
+  border-radius: 3px;
   border: 1.5px solid var(--color-gray-400, #9fa2ab);
   transition: all 0.15s ease-in-out;
 }
@@ -1582,7 +1586,7 @@ body {
 }
 
 .checkbox[data-state="unchecked"] {
-  background-color: transparent;
+  background-color: var(--color-white, #fff);
   border-color: var(--color-gray-400, #9fa2ab);
   color: var(--color-gray-100, #eff1f2);
 }
@@ -1756,6 +1760,7 @@ body {
 .tag-general {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   height: 32px;
   padding-left: 12px;
   padding-right: 12px;
@@ -1767,6 +1772,12 @@ body {
   transition: all 0.2s ease-in-out;
 }
 
+/* Neutralize capsize trim inside tags — the tag handles centering */
+.tag-general::before,
+.tag-general::after {
+  display: none;
+}
+
 .tag-general:focus-visible {
   outline: none;
   box-shadow:
@@ -2161,6 +2172,13 @@ body {
   transform: translateY(-50%) rotate(90deg);
 }
 
+[data-slot="tooltip-close"] {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  cursor: pointer;
+}
+
 @media (max-width: 639px) {
   .tooltip-content {
     max-width: calc(100vw - 2rem);
@@ -2340,28 +2358,44 @@ body {
   display: flex;
   flex-shrink: 0;
   justify-content: center;
-  align-items: center;
+  align-items: start;
   position: relative;
   z-index: 0;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  gap: 2.5rem;
+  min-height: 2rem;
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .tabs-nav {
+    gap: 2.5rem;
+  }
+}
+
+@media (min-width: 640px) {
+  .tabs-nav--full-width {
+    width: 100%;
+    gap: 0;
+  }
+
+  .tabs-nav--full-width > .tabs-nav-button {
+    flex: 1;
+    justify-content: center;
+    padding: 1px 0.75rem 0;
+  }
 }
 
 .tabs-nav-button {
-  font-family: var(--font-overline-large, inherit);
   position: relative;
   border-radius: 0.375rem;
   display: flex;
   align-items: center;
-  height: 2rem;
   z-index: 20;
   background-color: transparent;
   cursor: pointer;
   user-select: none;
   transition: color 0.15s ease-in-out;
   border: none;
-  padding: 0;
+  padding: 1px 0 0 0;
 }
 
 .tabs-nav-button-text {
@@ -2423,6 +2457,43 @@ body {
   justify-content: space-between;
   overflow-x: auto;
   overflow-y: hidden;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.tabs-container-inner::-webkit-scrollbar {
+  display: none;
+}
+
+.tabs-container-inner[data-scroll-left="true"][data-scroll-right="true"] {
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 3rem,
+    black calc(100% - 3rem),
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 3rem,
+    black calc(100% - 3rem),
+    transparent
+  );
+}
+
+.tabs-container-inner[data-scroll-left="true"]:not([data-scroll-right="true"]) {
+  mask-image: linear-gradient(to right, transparent, black 3rem);
+  -webkit-mask-image: linear-gradient(to right, transparent, black 3rem);
+}
+
+.tabs-container-inner:not([data-scroll-left="true"])[data-scroll-right="true"] {
+  mask-image: linear-gradient(to right, black calc(100% - 3rem), transparent);
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black calc(100% - 3rem),
+    transparent
+  );
 }
 
 /* Breadcrumb Styles */
@@ -2491,7 +2562,7 @@ body {
   overflow-y: auto;
   padding-top: 4rem;
   padding-bottom: 4rem;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.2);
   cursor: zoom-out;
 }
 
@@ -2559,7 +2630,7 @@ body {
   }
 }
 
-.dialog-close {
+/* .dialog-close {
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -2583,20 +2654,20 @@ body {
   flex-shrink: 0;
   color: var(--color-gray-400);
   transition: color 0.2s ease-in-out;
-}
+} */
 
-.dialog-close:hover svg {
+/* .dialog-close:hover svg {
   color: var(--color-gray-500);
 }
 
 .dialog-close-icon {
   color: var(--color-gray-400);
   transition: color 0.2s ease-in-out;
-}
+} */
 
-.dialog-close:hover .dialog-close-icon {
+/* .dialog-close:hover .dialog-close-icon {
   color: var(--color-gray-500);
-}
+} */
 
 .dialog-header {
   display: flex;

package/client/ui/MobileNav.stories.tsx

@@ -5,13 +5,7 @@ import {
   MobileNavBar,
   MobileNavTrigger,
 } from "../components/ui/mobile-nav";
-import {
-  Workflow,
-  PenLine,
-  MessageSquare,
-  TriangleAlert,
-  X,
-} from "lucide-react";
+import { TriangleAlert, X } from "lucide-react";
 import { useState } from "react";
 import { UtilityText } from "../components/icons/UtilityText";
 import { UtilityCompare } from "../components/icons/UtilityCompare";
@@ -25,14 +19,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { useIsMobile } from "@/hooks/use-mobile";
-import {
-  DrawerTitle,
-  DrawerHeader,
-  DrawerContent,
-  Drawer,
-  DrawerTrigger,
-} from "@/components/ui/drawer";
 
 const meta = {
   title: "Review/MobileNav",

package/client/ui/Tabs.stories.tsx

@@ -1,14 +1,22 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AnimatedTabs } from "../components/ui/tabs";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "../components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 
 const meta = {
   title: "Review/Tabs",
-  component: AnimatedTabs,
+  component: Tabs,
   tags: ["autodocs"],
   parameters: {
     layout: "padded",
   },
-} satisfies Meta<typeof AnimatedTabs>;
+} satisfies Meta<typeof Tabs>;
 
 export default meta;
 
@@ -23,19 +31,19 @@ const HomeContent = () => (
         team.
       </p>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+        <div className="p-4 bg-white  rounded-lg">
           <h3 className="font-semibold mb-2">Quick Start</h3>
           <p className="text-sm text-zinc-600 dark:text-zinc-400">
             Get started with our platform in minutes
           </p>
         </div>
-        <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+        <div className="p-4 bg-white  rounded-lg">
           <h3 className="font-semibold mb-2">Latest Updates</h3>
           <p className="text-sm text-zinc-600 dark:text-zinc-400">
             See what&apos;s new in our latest release
           </p>
         </div>
-        <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+        <div className="p-4 bg-white  rounded-lg">
           <h3 className="font-semibold mb-2">Resources</h3>
           <p className="text-sm text-zinc-600 dark:text-zinc-400">
             Access guides and documentation
@@ -46,13 +54,13 @@ const HomeContent = () => (
     <div>
       <h3 className="text-xl font-semibold mb-4">Recent Activity</h3>
       <div className="space-y-3">
-        <div className="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-lg">
+        <div className="flex items-center gap-3 p-3 bg-white  rounded-lg">
           <div className="w-2 h-2 bg-green-500 rounded-full"></div>
           <p className="text-sm">
             Project &quot;Marketing Campaign&quot; was updated 2 hours ago
           </p>
         </div>
-        <div className="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-lg">
+        <div className="flex items-center gap-3 p-3 bg-white  rounded-lg">
           <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
           <p className="text-sm">
             New team member John Doe joined the platform
@@ -126,14 +134,14 @@ const ContactContent = () => (
           <label className="block text-sm font-medium mb-1">Name</label>
           <input
             type="text"
-            className="w-full p-2 rounded-md border dark:bg-zinc-800 dark:border-zinc-700"
+            className="w-full p-2 rounded-md border  dark:border-zinc-700"
           />
         </div>
         <div>
           <label className="block text-sm font-medium mb-1">Email</label>
           <input
             type="email"
-            className="w-full p-2 rounded-md border dark:bg-zinc-800 dark:border-zinc-700"
+            className="w-full p-2 rounded-md border  dark:border-zinc-700"
           />
         </div>
         <button className="w-full bg-black text-white dark:bg-white dark:text-black py-2 rounded-md font-medium">
@@ -144,54 +152,149 @@ const ContactContent = () => (
   </div>
 );
 
-const DangerZoneContent = () => (
-  <div className="max-w-2xl mx-auto mt-12">
-    <h2 className="text-2xl font-bold mb-6 text-red-500">Caution!</h2>
-    <div className="space-y-6">
-      <div className="border border-red-200 dark:border-red-900 rounded-lg p-6 bg-red-50 dark:bg-red-900/20">
-        <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-2">
-          Delete Account
-        </h3>
-        <p className="text-red-600/80 dark:text-red-400/80 mb-4">
-          This action cannot be undone. This will permanently delete your
-          account and remove your data from our servers.
-        </p>
-        <div className="flex items-center gap-4">
-          <input
-            type="text"
-            placeholder="Type 'delete' to confirm"
-            className="flex-1 p-2 rounded-md border border-red-200 dark:border-red-800 dark:bg-red-900/30"
-          />
-          <button className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors">
-            Delete Account
-          </button>
-        </div>
-      </div>
+export const Default: Story = {
+  render: () => (
+    <div className="bg-gray-50 p-10">
+      <Tabs defaultValue="home">
+        <TabsList>
+          <TabsTrigger value="home">Home</TabsTrigger>
+          <TabsTrigger value="about">About</TabsTrigger>
+          <TabsTrigger value="contact">Contact</TabsTrigger>
+        </TabsList>
+        <TabsContent value="home">
+          <HomeContent />
+        </TabsContent>
+        <TabsContent value="about">
+          <AboutContent />
+        </TabsContent>
+        <TabsContent value="contact">
+          <ContactContent />
+        </TabsContent>
+      </Tabs>
     </div>
-  </div>
-);
-
-const tabs = [
-  { label: "Home", value: "home", content: <HomeContent /> },
-  { label: "About", value: "about", content: <AboutContent /> },
-  { label: "Contact", value: "contact", content: <ContactContent /> },
-];
+  ),
+};
 
-export const Default: Story = {
-  args: {
-    tabs: tabs,
+export const Scrollable: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use `containerClassName` on `TabsList` to constrain the scroll container width. The selected tab automatically centers — adjacent tabs remain visible on both sides.",
+      },
+    },
+    viewport: { defaultViewport: "mobile1" },
   },
+  render: () => (
+    <div className="bg-gray-50 p-4">
+      <Tabs defaultValue="overview">
+        <TabsList containerClassName="max-w-md">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="features">Features</TabsTrigger>
+          <TabsTrigger value="performance">Performance</TabsTrigger>
+          <TabsTrigger value="compliance">Compliance</TabsTrigger>
+          <TabsTrigger value="reports">Reports</TabsTrigger>
+          <TabsTrigger value="team">Team</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview">
+          <div className="mt-6">
+            <p>Overview content.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="features">
+          <div className="mt-6">
+            <p>Features content.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="performance">
+          <div className="mt-6">
+            <p>Performance content.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="compliance">
+          <div className="mt-6">
+            <p>Compliance content.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="reports">
+          <div className="mt-6">
+            <p>Reports content.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="team">
+          <div className="mt-6">
+            <p>Team content.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="settings">
+          <div className="mt-6">
+            <p>Settings content.</p>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
 };
 
-export const WithDangerZone: Story = {
-  args: {
-    tabs: [
-      ...tabs,
-      {
-        label: "Danger Zone",
-        value: "danger-zone",
-        content: <DangerZoneContent />,
+export const FullWidth: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use `fullWidth` on `TabsList` to expand the tab bar to full width with equal-width triggers. Suited for contained layouts like panels, dialogs, or mobile views.",
       },
-    ],
+    },
+  },
+  render: () => (
+    <div className="bg-gray-50 p-10">
+      <Tabs defaultValue="comments">
+        <TabsList fullWidth>
+          <TabsTrigger value="comments">Comments</TabsTrigger>
+          <TabsTrigger value="rating">Rating</TabsTrigger>
+        </TabsList>
+        <TabsContent value="comments">
+          <div className="mt-6">
+            <p>Comments.</p>
+          </div>
+        </TabsContent>
+        <TabsContent value="rating">
+          <div className="mt-6">
+            <p>Rate your experience.</p>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+};
+
+export const WithModal: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div className="bg-gray-50 p-10">
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button size="large" variant="general-primary">
+              Open Tabs
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="w-[800px]" showCloseButton={false}>
+            <Tabs defaultValue="comments">
+              <TabsList fullWidth>
+                <TabsTrigger value="comments">Comments</TabsTrigger>
+                <TabsTrigger value="rating">Rating</TabsTrigger>
+              </TabsList>
+              <TabsContent value="comments">
+                <HomeContent />
+              </TabsContent>
+              <TabsContent value="rating">
+                <AboutContent />
+              </TabsContent>
+            </Tabs>
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
   },
 };