@syscore/ui-library 1.18.0 → 1.19.0

package/client/components/icons/UtilityCompare.tsx

@@ -1,13 +1,6 @@
-import React from "react";
 import { cn } from "../../lib/utils";
 
-interface UtilityCompareProps {
-  className?: string;
-}
-
-export const UtilityCompare: React.FC<UtilityCompareProps> = ({
-  className,
-}) => {
+export function UtilityCompare({ className }: { className?: string }) {
   return (
     <div
       className={cn(
@@ -26,21 +19,21 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
         <path
           d="M10.6002 5.79905C10.6002 8.44949 8.45114 10.5981 5.80011 10.5981C3.14908 10.5981 1 8.44949 1 5.79905C1 3.14861 3.14908 1 5.80011 1C8.45114 1 10.6002 3.14861 10.6002 5.79905Z"
           fill="#E0FBF5"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
         <path
           d="M5.80078 16.998L5.80078 24.9965C5.80078 25.845 6.13793 26.6588 6.73806 27.2587C7.33819 27.8587 8.15214 28.1958 9.00086 28.1958L20.2011 28.1958"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
         <path
           d="M10.6002 21.7971L5.80011 16.998L1 21.7971"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -48,21 +41,21 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
         <path
           d="M29.8001 28.2014C29.8001 30.8518 27.651 33.0004 24.9999 33.0004C22.3489 33.0004 20.1998 30.8518 20.1998 28.2014C20.1998 25.551 22.3489 23.4023 24.9999 23.4023C27.651 23.4023 29.8001 25.5509 29.8001 28.2014Z"
           fill="#EFF5FB"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
         <path
           d="M25.0002 16.9946V8.99624C25.0002 8.14771 24.663 7.33394 24.0629 6.73395C23.4628 6.13395 22.6488 5.79687 21.8001 5.79687L10.5999 5.79688"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
         />
         <path
           d="M20.1998 12.2012L24.9999 17.0002L29.8001 12.2012"
-          stroke="#282A31"
+          stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
@@ -70,4 +63,4 @@ export const UtilityCompare: React.FC<UtilityCompareProps> = ({
       </svg>
     </div>
   );
-};
+}

package/client/components/icons/UtilityFeedback.tsx

@@ -14,7 +14,7 @@ export function UtilityFeedback({ className }: { className?: string }) {
         height="28"
         viewBox="0 0 30 28"
         fill="none"
-        className={cn("text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
           d="M29 20.162C29 20.888 28.705 21.5843 28.1799 22.0977C27.6548 22.611 26.9426 22.8995 26.2 22.8995H7.7592C7.01665 22.8996 6.30458 23.1881 5.7796 23.7015L2.6968 26.7154C2.55779 26.8513 2.38068 26.9438 2.18788 26.9813C1.99508 27.0188 1.79524 26.9996 1.61363 26.926C1.43202 26.8525 1.27678 26.728 1.16756 26.5682C1.05834 26.4084 1.00003 26.2205 1 26.0283V3.73743C1 3.01142 1.295 2.31514 1.8201 1.80178C2.3452 1.28841 3.05739 1 3.8 1H26.2C26.9426 1 27.6548 1.28841 28.1799 1.80178C28.705 2.31514 29 3.01142 29 3.73743V20.162Z"

package/client/components/icons/UtilityRevisionsHide.tsx

@@ -14,7 +14,7 @@ export function UtilityRevisionsHide({ className }: { className?: string }) {
         height="15"
         viewBox="0 0 17 15"
         fill="none"
-        className={cn("text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
           d="M5.48682 6.27734L0.75 11.0142V13.3826H7.85523L10.2236 11.0142"

package/client/components/icons/UtilityRevisionsShow.tsx

@@ -14,7 +14,7 @@ export function UtilityRevisionsShow({ className }: { className?: string }) {
         height="26"
         viewBox="0 0 30 26"
         fill="none"
-        className={cn("text-inherit")}
+        className={cn("text-inherit w-full h-full")}
       >
         <path
           d="M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006"
@@ -22,17 +22,17 @@ export function UtilityRevisionsShow({ className }: { className?: string }) {
         />
         <path
           d="M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006"
-          stroke="#282A31"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
         <path
           d="M28.9999 13.0008L22.2211 19.9013C21.6702 20.451 20.9295 20.7589 20.158 20.7589C19.3865 20.7589 18.6458 20.451 18.0949 19.9013L10.4319 12.1008C9.89184 11.5399 9.58936 10.7859 9.58936 10.0006C9.58936 9.21531 9.89184 8.4613 10.4319 7.90048L17.2107 1"
-          stroke="#282A31"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
       </svg>
     </div>

package/client/components/icons/UtilityText.tsx

@@ -1,34 +1,43 @@
+import { cn } from "@/lib/utils";
+
 export function UtilityText({ className }: { className?: string }) {
   return (
-    <svg
-      className={className}
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="14"
-      viewBox="0 0 16 14"
-      fill="none"
+    <div
+      className={cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className,
+      )}
     >
-      <path
-        d="M8.75 12.75H0.75"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        stroke-linejoin="round"
-      />
-      <path
-        d="M10.75 0.75H0.75"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M14.75 6.75H0.75"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="14"
+        viewBox="0 0 16 14"
+        fill="none"
+        className={cn("text-inherit w-full h-full")}
+      >
+        <path
+          d="M8.75 12.75H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M10.75 0.75H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M14.75 6.75H0.75"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </div>
   );
 }

package/client/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "@/lib/utils";
 import { UtilityClose } from "../icons/UtilityClose";
 
+
 function Dialog({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -46,30 +47,39 @@ function DialogOverlay({
 
 function DialogContent({
   className,
+  innerClassName,
+  closeClassName,
   children,
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
+  innerClassName?: string;
+  closeClassName?: string;
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay>
+      <DialogOverlay className="overflow-y-auto">
         <DialogPrimitive.Content
           data-slot="dialog-content"
           className={cn("dialog-content", className)}
           {...props}
         >
-          <div className="dialog-content-inner">{children}</div>
-          {showCloseButton && (
-            <DialogPrimitive.Close
-              data-slot="dialog-close"
-              className="dialog-close"
-            >
-              <UtilityClose />
-              <span className="sr-only">Close</span>
-            </DialogPrimitive.Close>
-          )}
+          <div className="dialog-content-wrapper">
+            <div className={cn("dialog-content-inner", innerClassName)}>
+              {children}
+            </div>
+            {showCloseButton && (
+              <div className="dialog-close">
+                <DialogPrimitive.Close data-slot="dialog-close">
+                  <UtilityClose
+                    className={cn("dialog-close-icon", closeClassName)}
+                  />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              </div>
+            )}
+          </div>
         </DialogPrimitive.Content>
       </DialogOverlay>
     </DialogPortal>

package/client/components/ui/mobile-nav.tsx

@@ -11,6 +11,7 @@ import {
 } from "react";
 import { motion, useMotionValue, animate } from "motion/react";
 import { cn } from "@/lib/utils";
+import { Button } from "./button";
 
 interface MobileNavContextValue {
   activeKey: string | null;
@@ -295,7 +296,10 @@ const MobileNavTrigger = ({
   };
 
   return (
-    <button
+    <Button
+      variant="clear"
+      size="icon"
+      type="button"
       onClick={handleClick}
       disabled={disabled}
       data-active={activeKey === value || undefined}
@@ -304,7 +308,7 @@ const MobileNavTrigger = ({
       aria-label={label}
     >
       {children}
-    </button>
+    </Button>
   );
 };
 

package/client/global.css

@@ -701,7 +701,7 @@ layer(base);
   --blur-lg: 12px;
   --blur-xl: 20px;
 
-  --radius-modal: 40px;
+  --radius-modal: 24px;
   --modal-color: rgba(0, 0, 0, 0.08);
 
   --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
@@ -2480,11 +2480,13 @@ body {
   inset: 0;
   z-index: 50;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
   overflow-y: auto;
-  padding-block: 1.5rem;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
   background-color: rgba(0, 0, 0, 0.5);
+  cursor: zoom-out;
 }
 
 .dialog-overlay[data-state="open"] {
@@ -2496,16 +2498,17 @@ body {
 }
 
 .dialog-content {
-  position: relative;
   z-index: 50;
   display: grid;
   gap: 1rem;
-  margin: auto;
-  border-radius: 40px;
-  border: 12px solid rgba(255, 255, 255, 0.2);
+  margin-inline: auto;
   transition: all 0.2s ease-in-out;
 }
 
+.dialog-content:focus-visible {
+  outline: none;
+}
+
 .dialog-content[data-state="open"] {
   animation:
     fade-in 0.15s ease-in-out,
@@ -2518,10 +2521,25 @@ body {
     zoom-out 0.15s ease-in-out;
 }
 
+.dialog-content-wrapper {
+  position: relative;
+  border: 12px solid rgba(255, 255, 255, 0.2);
+  /* outer radius = inner radius + border width to keep curves concentric */
+  border-radius: calc(var(--radius-modal) + 12px);
+}
+
 .dialog-content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
   padding: 1.5rem;
-  border-radius: 24px;
+  border-radius: var(--radius-modal);
   background-color: var(--color-gray-50, #f9f9fa);
+  cursor: default;
+  overflow: clip;
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: 300ms;
 }
 
 .dialog-close {
@@ -2544,7 +2562,7 @@ body {
 }
 
 .dialog-close svg {
-  pointer-events: none;
+  cursor: pointer;
   flex-shrink: 0;
   color: var(--color-gray-400);
   transition: color 0.2s ease-in-out;
@@ -2554,12 +2572,22 @@ body {
   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 {
+  color: var(--color-gray-500);
+}
+
 .dialog-header {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   text-align: center;
   align-items: center;
+  justify-content: center;
 }
 
 @media (min-width: 640px) {
@@ -3940,6 +3968,10 @@ body {
   color: var(--color-gray-400);
 }
 
+.mobile-nav-trigger svg [stroke]:not([stroke="none"]) {
+  stroke: currentColor;
+}
+
 .mobile-nav-trigger:hover {
   color: var(--color-gray-600);
 }
@@ -3950,7 +3982,12 @@ body {
 
 .mobile-nav-trigger:disabled {
   pointer-events: none;
-  opacity: 0.4;
+  cursor: default;
+  color: var(--color-gray-200);
+}
+
+.mobile-nav-trigger:disabled svg [fill]:not([fill="none"]) {
+  fill: transparent;
 }
 
 /* Pagination Styles */

package/client/ui/Dialog.stories.tsx

@@ -3,6 +3,7 @@ import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
 import { Label } from "../components/ui/label";
 import { useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
 import {
   Dialog,
   DialogContent,
@@ -115,6 +116,75 @@ export const WithForm: Story = {
   },
 };
 
+export const ExpandableContent: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <Button variant="general-secondary" onClick={() => setOpen(true)}>
+            Expandable Dialog
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:min-w-[360px]" showCloseButton={false}>
+          <DialogHeader>
+            <DialogTitle className="text-gray-800">
+              Notification Preferences
+            </DialogTitle>
+            <DialogDescription>
+              Choose which notifications you'd like to receive.
+            </DialogDescription>
+          </DialogHeader>
+          <AnimatePresence>
+            {expanded && (
+              <motion.div
+                key="expanded-content"
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2, ease: "easeInOut" }}
+                style={{ overflow: "hidden" }}
+              >
+                <div className="flex flex-col gap-3 body-base text-gray-700">
+                  <label className="flex items-center gap-2">
+                    <input type="checkbox" defaultChecked /> Email notifications
+                  </label>
+                  <label className="flex items-center gap-2">
+                    <input type="checkbox" /> SMS notifications
+                  </label>
+                  <label className="flex items-center gap-2">
+                    <input type="checkbox" defaultChecked /> Push notifications
+                  </label>
+                  <label className="flex items-center gap-2">
+                    <input type="checkbox" /> Weekly digest
+                  </label>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+          <div className="flex gap-4 justify-center items-center">
+            <Button
+              size="utility"
+              variant="general-secondary"
+              onClick={() => setExpanded(!expanded)}
+            >
+              {expanded ? "Show less" : "Show more"}
+            </Button>
+            <Button
+              size="utility"
+              variant="general-primary"
+              onClick={() => setOpen(false)}
+            >
+              Save
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  },
+};
+
 export const LongContentScroll: Story = {
   render: () => {
     const [open, setOpen] = useState(false);

package/client/ui/MobileNav.stories.tsx

@@ -67,17 +67,19 @@ Mobile navigation with a spring-animated slide-up panel. Built as a **compound c
 </section>
 \`\`\`
 
-## Styling Active State
+## Icon Color Handling
 
-\`MobileNavTrigger\` renders a \`<button>\` with the \`group\` class and a \`data-active\` attribute when selected. Use Tailwind's \`group-data-active:\` modifier on children to style based on active state:
+Icon colors are controlled entirely by the trigger CSS — no per-icon color classes needed. The trigger sets \`color\` for each state, and SVG strokes inherit via \`currentColor\`. Decorative fills are cleared on disabled.
 
 \`\`\`tsx
+{/* Icons only need sizing — color is inherited from the trigger */}
 <MobileNavTrigger value="home" label="Home">
-  <HomeIcon className="size-6 text-gray-400 group-data-active:text-gray-900" />
-  <span className="text-xs hidden group-data-active:block">Home</span>
+  <HomeIcon className="size-6" />
 </MobileNavTrigger>
 \`\`\`
 
+States: default (gray-400), hover (gray-600), active (gray-900), disabled (gray-200 + fills transparent).
+
 ## Custom Actions (onAction)
 
 Use \`onAction\` on a trigger to fire a custom callback instead of opening the panel:
@@ -257,16 +259,16 @@ export const Default: Story = {
 
         <MobileNavBar>
           <MobileNavTrigger value="list" label="Changes">
-            <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityText className="size-6" />
           </MobileNavTrigger>
           <MobileNavTrigger value="workflow" label="Workflow">
-            <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityCompare className="size-6" />
           </MobileNavTrigger>
           <MobileNavTrigger value="edit" label="Edits">
-            <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityRevisionsShow className="size-6" />
           </MobileNavTrigger>
           <MobileNavTrigger value="comments" label="Comments">
-            <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityFeedback className="size-6" />
           </MobileNavTrigger>
         </MobileNavBar>
       </MobileNav>
@@ -292,20 +294,20 @@ const WithCustomActionRender = () => {
 
         <MobileNavBar>
           <MobileNavTrigger value="list" label="Changes">
-            <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityText className="size-6" />
           </MobileNavTrigger>
           <MobileNavTrigger value="workflow" label="Workflow">
-            <UtilityCompare className="size-8 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityCompare className="size-8" />
           </MobileNavTrigger>
           <MobileNavTrigger
             value="edit"
             label="Edits"
             onAction={() => setModalOpen(true)}
           >
-            <UtilityRevisionsShow className="size-6 text-gray-500" />
+            <UtilityRevisionsShow className="size-6" />
           </MobileNavTrigger>
           <MobileNavTrigger value="comments" label="Comments">
-            <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityFeedback className="size-6" />
           </MobileNavTrigger>
         </MobileNavBar>
       </MobileNav>
@@ -355,16 +357,16 @@ export const WithDisabledTrigger: Story = {
 
         <MobileNavBar>
           <MobileNavTrigger value="list" label="Changes">
-            <UtilityText className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityText className="size-7" />
           </MobileNavTrigger>
-          <MobileNavTrigger value="workflow" label="Workflow">
-            <UtilityCompare className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          <MobileNavTrigger value="workflow" label="Workflow" disabled>
+            <UtilityCompare className="size-8" />
           </MobileNavTrigger>
-          <MobileNavTrigger value="edit" label="Edits">
-            <UtilityRevisionsShow className="size-6 text-gray-500 group-data-active:text-gray-900" />
+          <MobileNavTrigger value="edit" label="Edits" disabled>
+            <UtilityRevisionsShow className="size-7" />
           </MobileNavTrigger>
           <MobileNavTrigger value="comments" label="Comments" disabled>
-            <UtilityFeedback className="size-6 text-gray-500 group-data-active:text-gray-900" />
+            <UtilityFeedback className="size-7" />
           </MobileNavTrigger>
         </MobileNavBar>
       </MobileNav>

package/client/ui/Navigation.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 ("use client");
 
 import {
@@ -18,6 +19,13 @@ import { AlphaIcon } from "@/components/icons/AlphaIcon";
 import * as React from "react";
 import { Globe } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogHeader,
+  DialogContent,
+  DialogTrigger,
+  DialogTitle,
+} from "@/components/ui/dialog";
 
 // Mock Link component for Storybook (simulates Next.js Link)
 const Link = React.forwardRef<
@@ -211,6 +219,7 @@ export const Default: Story = {
 
 export const StandardNavigation: Story = {
   render: () => {
+    const [open, setOpen] = useState(false);
     return (
       <div className="h-screen bg-cyan-900">
         <Navigation>
@@ -224,6 +233,43 @@ export const StandardNavigation: Story = {
             <NavigationAccount />
           </NavigationActions>
         </Navigation>
+
+        <div className="h-full w-full flex items-center justify-center">
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+              <Button
+                size="large"
+                variant="general-primary"
+                onClick={() => setOpen(true)}
+              >
+                Open Dialog
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:min-w-[297px]" showCloseButton={false}>
+              <DialogHeader>
+                <DialogTitle className="text-gray-800 text-center mb-8 h-8 justify-center items-center flex">
+                  Are you sure?
+                </DialogTitle>
+              </DialogHeader>
+              <div className="flex gap-4 justify-center items-center">
+                <Button
+                  size="utility"
+                  variant="general-secondary"
+                  onClick={() => setOpen(false)}
+                >
+                  Nevermind
+                </Button>
+                <Button
+                  size="utility"
+                  variant="general-primary"
+                  onClick={() => setOpen(false)}
+                >
+                  Yes, delete user
+                </Button>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
       </div>
     );
   },