@syscore/ui-library 1.1.11 → 1.1.13

package/client/components/ui/tooltip.tsx

@@ -5,6 +5,21 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/utils";
 
+type TriggerMode = "hover" | "click";
+
+// Context for passing trigger mode and close function to children
+const TooltipContext = React.createContext<{
+  trigger: TriggerMode;
+  toggle: () => void;
+  close: () => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+}>({
+  trigger: "hover",
+  toggle: () => { },
+  close: () => { },
+  triggerRef: { current: null },
+});
+
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -18,20 +33,114 @@ function TooltipProvider({
   );
 }
 
+interface TooltipProps
+  extends Omit<
+    React.ComponentProps<typeof TooltipPrimitive.Root>,
+    "open" | "onOpenChange"
+  > {
+  /**
+   * Trigger mode: "hover" (default) or "click"
+   * - hover: Opens on mouse hover, closes on hover off (default tooltip behavior)
+   * - click: Opens on click, closes on trigger click or click outside
+   */
+  trigger?: TriggerMode;
+  /** Controlled open state (optional) */
+  open?: boolean;
+  /** Callback when open state changes (optional) */
+  onOpenChange?: (open: boolean) => void;
+}
+
 function Tooltip({
+  trigger = "hover",
+  open: controlledOpen,
+  onOpenChange,
+  children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: TooltipProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  // Use controlled or uncontrolled state
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      // For click mode, ignore hover-triggered changes
+      if (trigger === "click") return;
+
+      if (!isControlled) {
+        setUncontrolledOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange, trigger]
+  );
+
+  const close = React.useCallback(() => {
+    if (!isControlled) {
+      setUncontrolledOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+
+  const toggle = React.useCallback(() => {
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setUncontrolledOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isOpen, isControlled, onOpenChange]);
+
+  // For click mode, we fully control open state
+  const tooltipProps =
+    trigger === "click"
+      ? {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+      }
+      : {
+        open: isControlled ? controlledOpen : undefined,
+        onOpenChange,
+      };
+
   return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
+    <TooltipContext.Provider value={{ trigger, toggle, close, triggerRef }}>
+      <TooltipProvider delayDuration={trigger === "click" ? 100000 : 0}>
+        <TooltipPrimitive.Root data-slot="tooltip" {...tooltipProps} {...props}>
+          {children}
+        </TooltipPrimitive.Root>
+      </TooltipProvider>
+    </TooltipContext.Provider>
   );
 }
 
 function TooltipTrigger({
+  onClick,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+  const { trigger, toggle, triggerRef } = React.useContext(TooltipContext);
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (trigger === "click") {
+        e.preventDefault();
+        e.stopPropagation();
+        toggle();
+      }
+      onClick?.(e);
+    },
+    [trigger, toggle, onClick]
+  );
+
+  return (
+    <TooltipPrimitive.Trigger
+      ref={triggerRef}
+      data-slot="tooltip-trigger"
+      onClick={handleClick}
+      {...props}
+    />
+  );
 }
 
 function TooltipContent({
@@ -42,21 +151,52 @@ function TooltipContent({
   alignOffset = 0,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const { trigger, close, triggerRef } = React.useContext(TooltipContext);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  // Click outside detection for click mode
+  React.useEffect(() => {
+    if (trigger !== "click") return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const isOutsideContent =
+        contentRef.current && !contentRef.current.contains(target);
+      const isOutsideTrigger =
+        triggerRef.current && !triggerRef.current.contains(target);
+
+      if (isOutsideContent && isOutsideTrigger) {
+        close();
+      }
+    };
+
+    // Small delay to avoid closing immediately on the same click that opened it
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [trigger, close, triggerRef]);
+
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
+        ref={contentRef}
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         alignOffset={alignOffset}
         side={side}
         className={cn(
-          "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-6 pt-8 pb-6  text-balance shadow-sm",
-          className,
+          "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg p-6 pt-8  shadow-sm mt-3",
+          className
         )}
         {...props}
       >
         {/* Marker/Arrow */}
-        <div className="absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0">
+        <div className="absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0 ">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="10"

package/client/global.css

@@ -527,9 +527,10 @@ layer(base);
   --color-sidebar-border: hsl(var(--sidebar-border));
   --color-sidebar-ring: hsl(var(--sidebar-ring));
 
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+  --radius-lg: 12px;
+  --radius-md: 8px;
+  --radius-sm: 6px;
+
 
   /* Figma Design System Colors */
   --color-white: #fff;
@@ -860,18 +861,16 @@ layer(base);
       "cv01" on;
   }
 
+  .container-xl {
+    @apply mx-auto max-w-[calc(1728px+64px)] w-full px-8;
+  }
+
   .container-lg {
-    max-width: calc(1440px + 64px);
-    width: 100%;
-    padding-inline: 32px;
-    margin-inline: auto;
+    @apply mx-auto max-w-[calc(1536px+64px)] w-full px-8;
   }
 
   .container-sm {
-    max-width: calc(1072px + 64px);
-    width: 100%;
-    padding-inline: 32px;
-    margin-inline: auto;
+    @apply mx-auto max-w-[calc(1072px+64px)] w-full px-8;
   }
 }
 
@@ -1156,3 +1155,11 @@ layer(base);
     display: table;
   }
 }
+
+@utility underline-dotted {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 0.75px;
+  text-underline-offset: 2px;
+}

package/client/ui/AspectRatio.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { AspectRatio } from "../components/ui/aspect-ratio";
 
 const meta = {
   title: "Review/AspectRatio",

package/client/ui/Button.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@/components/ui/Button";
-import { UtilityReset } from "@/components/icons/UtilityReset";
-import { UtilityClose } from "@/components/icons/UtilityClose";
-import { UtilityChevronDown } from "@/components/icons/UtilityChevronDown";
-import { NavAccount } from "@/components/icons/NavAccount";
+import { Button } from "../components/ui/button";
+import { UtilityReset } from "../components/icons/UtilityReset";
+import { UtilityClose } from "../components/icons/UtilityClose";
+import { UtilityChevronDown } from "../components/icons/UtilityChevronDown";
+import { NavAccount } from "../components/icons/NavAccount";
 
 const meta = {
   title: "Review/Button",

package/client/ui/Card.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
 import {
   Card,
   CardHeader,
@@ -6,8 +8,19 @@ import {
   CardTitle,
   CardDescription,
   CardContent,
-} from "../components/ui/Card";
-import { Button } from "@/components/ui/button";
+} from "../components/ui/card";
+import { Button } from "../components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
+import { Label } from "../components/ui/label";
+import { Toggle } from "../components/ui/toggle";
+
+import { UtilityReset } from "../components/icons/UtilityReset";
 
 const meta = {
   title: "Review/Card",
@@ -82,3 +95,211 @@ export const Multiple: Story = {
     </div>
   ),
 };
+
+export const FiltersPanel: Story = {
+  render: () => (
+    <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
+      <div className="flex items-center justify-between w-full h-8">
+        <Label className="text-gray-800 overline-large">Filters</Label>
+        <Button
+          variant="secondary-light"
+          size="icon"
+          className="size-8 rounded-full border-gray-100 bg-white p-0"
+        >
+          <UtilityReset className="size-4" />
+        </Button>
+      </div>
+
+      <div className="flex flex-col gap-6 w-full">
+        {/* Segmented Control */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Label</Label>
+          <Toggle
+            options={[
+              { label: "Active", value: "active" },
+              { label: "Inactive", value: "inactive" },
+            ]}
+            defaultValue="active"
+          />
+        </div>
+
+        {/* Search Selects */}
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="flex flex-col gap-3">
+            <Label className="text-gray-600">Label</Label>
+            <Select>
+              <SelectTrigger className="h-12 border-gray-200 rounded-[6px] bg-white px-4">
+                <SelectValue placeholder="Placeholder" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        ))}
+      </div>
+    </Card>
+  ),
+};
+
+// export const AttributesPanel: Story = {
+//   render: () => {
+//     const [activeTag, setActiveTag] = useState<string>("tag1");
+//     const tags = [
+//       { id: "tag1", label: "Tag" },
+//       { id: "tag2", label: "Tag" },
+//       { id: "tag3", label: "Tag" },
+//     ];
+
+//     return (
+//       <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
+//         <div className="flex items-center justify-between w-full h-8">
+//           <Label className="text-gray-800 overline-large">Attributes</Label>
+//         </div>
+
+//         <div className="flex flex-col gap-6 w-full">
+//           {/* Segmented Control */}
+//           <div className="flex flex-col gap-3">
+//             <Label className="text-gray-600">Label</Label>
+//             <Toggle
+//               options={[
+//                 { label: "Active", value: "active" },
+//                 { label: "Inactive", value: "inactive" },
+//               ]}
+//               defaultValue="active"
+//             />
+//           </div>
+
+//           {/* Tags */}
+//           <div className="flex flex-col gap-3">
+//             <Label className="text-gray-600">Field name</Label>
+//             <div className="flex flex-wrap gap-3 items-start">
+//               {tags.map((tag) => (
+//                 <Tag
+//                   key={tag.id}
+//                   active={activeTag === tag.id}
+//                   onClick={() => setActiveTag(tag.id)}
+//                 >
+//                   {tag.label}
+//                 </Tag>
+//               ))}
+//             </div>
+//           </div>
+//         </div>
+//       </Card>
+//     );
+//   },
+// };
+
+import {
+  IconConceptAir,
+  IconConceptCommunity,
+  IconConceptLight,
+  IconConceptMaterials,
+  IconConceptMind,
+  IconConceptMovement,
+  IconConceptNourishment,
+  IconConceptSound,
+  IconConceptThermalComfort,
+  IconConceptWater,
+} from "../components/icons/ConceptIcons";
+
+// ... existing imports
+
+export const NavigatorPanel: Story = {
+  render: () => {
+    const [activeConcept, setActiveConcept] = useState<string>("community");
+    const [activeTheme, setActiveTheme] = useState<string>("C7");
+    const [activeStrategy, setActiveStrategy] = useState<string>("C7.4");
+
+    const concepts = [
+      { id: "mind", Icon: IconConceptMind },
+      { id: "community", Icon: IconConceptCommunity },
+      { id: "movement", Icon: IconConceptMovement },
+      { id: "water", Icon: IconConceptWater },
+      { id: "air", Icon: IconConceptAir },
+      { id: "light", Icon: IconConceptLight },
+      { id: "thermal", Icon: IconConceptThermalComfort },
+      { id: "nourishment", Icon: IconConceptNourishment },
+      { id: "sound", Icon: IconConceptSound },
+      { id: "materials", Icon: IconConceptMaterials },
+    ];
+
+    const themes = Array.from({ length: 9 }, (_, i) => `C${9 - i}`).reverse();
+    const strategies = ["C7.1", "C7.2", "C7.3", "C7.4"];
+
+    return (
+      <Card className="w-[344px] bg-cyan-50 border-gray-100 rounded-xl p-6 shadow-none flex flex-col gap-6">
+        {/* Concepts */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Concept</Label>
+          <div className="flex flex-wrap gap-2">
+            {concepts.map(({ id, Icon }) => (
+              <button
+                key={id}
+                onClick={() => setActiveConcept(id)}
+                className="rounded-full transition-transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:ring-offset-2"
+              >
+                <Icon active={activeConcept === id} className="size-12" />
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Theme */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Theme</Label>
+          <div className="flex flex-wrap gap-2">
+            {themes.map((theme) => (
+              <button
+                key={theme}
+                onClick={() => setActiveTheme(theme)}
+                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${
+                  activeTheme === theme
+                    ? "bg-cyan-800 text-white"
+                    : "bg-blue-100 text-blue-600 hover:bg-blue-200"
+                }`}
+              >
+                <span className="body-small font-semibold">{theme}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Strategy */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Strategy</Label>
+          <div className="flex flex-wrap gap-2">
+            {strategies.map((strategy) => (
+              <button
+                key={strategy}
+                onClick={() => setActiveStrategy(strategy)}
+                className={`w-12 h-8 rounded-[6px] flex items-center justify-center transition-colors ${
+                  activeStrategy === strategy
+                    ? "bg-[#0F748A]/10 border border-[#0F748A]/20 text-cyan-900"
+                    : "bg-blue-100 text-blue-600 hover:bg-blue-200"
+                }`}
+              >
+                <span className="body-small font-semibold">{strategy}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Scope */}
+        <div className="flex flex-col gap-3">
+          <Label className="text-gray-600">Scope</Label>
+          <Toggle
+            className="w-full h-8 border border-gray-100 bg-white rounded-full p-0 [&>button]:flex-1"
+            options={[
+              { label: "Non-core", value: "non-core" },
+              { label: "Core", value: "core" },
+            ]}
+            defaultValue="non-core"
+          />
+        </div>
+      </Card>
+    );
+  },
+};

package/client/ui/CodeBadge.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CodeBadge } from "../components/ui/code-badge";
+
+const meta = {
+    title: "Review/CodeBadge",
+    component: CodeBadge,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+} satisfies Meta<typeof CodeBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        code: "A01",
+    },
+};
+
+export const WithClassName: Story = {
+    render: () => (
+        <div className="flex gap-4">
+            <CodeBadge
+                code="C01"
+                className="bg-plum-50 border-plum-200 text-plum-800"
+            />
+            <CodeBadge
+                code="A02"
+                className="bg-cyan-50 border-cyan-200 text-cyan-800"
+            />
+            <CodeBadge
+                code="W03"
+                className="bg-blue-50 border-blue-200 text-blue-800"
+            />
+            <CodeBadge
+                code="N04"
+                className="bg-green-50 border-green-200 text-green-800"
+            />
+        </div>
+    ),
+};
+
+export const WithStyle: Story = {
+    render: () => (
+        <div className="flex gap-4">
+            <CodeBadge
+                code="R01"
+                className="border-none"
+                style={{
+                    backgroundColor: "#EFF5FB",
+                    color: "#2E74AD",
+                }}
+            />
+            <CodeBadge
+                code="R02"
+                className="border-none"
+                style={{
+                    backgroundColor: "#7B4F9D",
+                    color: "white",
+                }}
+            />
+            <CodeBadge
+                code="R03"
+                className="border-none"
+                style={{
+                    backgroundColor: "#2E74AD",
+                    color: "white",
+                }}
+            />
+        </div>
+    ),
+};
+

package/client/ui/Dialog.stories.tsx

@@ -1,15 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@/components/ui/Button";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
 import { useState } from "react";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/components/ui/dialog";
-import { cn } from "@/lib/utils";
+} from "../components/ui/dialog";
 
 const meta = {
   title: "Review/Dialog",
@@ -29,7 +31,7 @@ export const Default: Story = {
     const [open, setOpen] = useState(false);
     return (
       <>
-        <Dialog open={open}>
+        <Dialog open={open} onOpenChange={setOpen}>
           <DialogTrigger asChild>
             <Button
               size="large"
@@ -58,7 +60,7 @@ export const Default: Story = {
                 variant="general-primary"
                 onClick={() => setOpen(false)}
               >
-                Yes
+                Yes, delete user
               </Button>
             </div>
           </DialogContent>
@@ -67,3 +69,48 @@ export const Default: Story = {
     );
   },
 };
+
+export const WithForm: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="general-secondary">Edit Profile</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here. Click save when you're done.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className=" flex flex-col gap-y-3">
+              <Label htmlFor="name">Name</Label>
+              <Input id="name" defaultValue="Pedro Duarte" />
+            </div>
+            <div className=" flex flex-col gap-y-3">
+              <Label htmlFor="username">Username</Label>
+              <Input
+                id="username"
+                defaultValue="@peduarte"
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              size="utility"
+              variant="general-primary"
+              type="submit"
+              onClick={() => setOpen(false)}
+            >
+              Save changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};