@syscore/ui-library 1.8.0 → 1.9.0

package/client/components/ui/accordion.tsx

@@ -1,53 +1,509 @@
-import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDown } from "lucide-react";
+"use client";
 
+import * as React from "react";
+import { motion, AnimatePresence } from "motion/react";
 import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import { UtilityChevronDown } from "../icons/UtilityChevronDown";
+
+// Context Definitions
+interface AccordionContextValue {
+  /** Set of currently expanded item values */
+  expandedValues: Set<string>;
+  /** Check if an item is expanded */
+  isExpanded: (value: string) => boolean;
+  /** Toggle a specific item's expansion */
+  toggle: (value: string) => void;
+  /** Expand all items */
+  expandAll: () => void;
+  /** Collapse all items */
+  collapseAll: () => void;
+  /** Check if any item is expanded */
+  hasAnyExpanded: boolean;
+  /** Allow multiple items to be expanded at once */
+  allowMultiple: boolean;
+}
+
+const AccordionContext = React.createContext<AccordionContextValue | null>(
+  null,
+);
+
+interface AccordionItemContextValue {
+  /** Current item's value */
+  value: string;
+  /** Whether this item is expanded */
+  isExpanded: boolean;
+}
+
+const AccordionItemContext =
+  React.createContext<AccordionItemContextValue | null>(null);
+
+// Hooks
+function useAccordion() {
+  const context = React.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within <Accordion>");
+  }
+  return context;
+}
+
+function useAccordionItem() {
+  const context = React.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error(
+      "AccordionTrigger and AccordionContent must be used within <AccordionItem>",
+    );
+  }
+  return context;
+}
+
+// useAccordionState Hook (for external state management)
+interface UseAccordionStateOptions {
+  /** Allow multiple items to be expanded at once */
+  allowMultiple?: boolean;
+  /** Initially expanded item value(s) */
+  defaultExpanded?: string | string[];
+}
+
+interface UseAccordionStateReturn {
+  /** Current expanded values */
+  expandedValues: Set<string>;
+  /** Set expanded values */
+  setExpandedValues: (values: Set<string>) => void;
+  /** Check if any item is expanded */
+  hasAnyExpanded: boolean;
+  /** Toggle all items */
+  toggleAll: () => void;
+}
+
+function useAccordionState(
+  options: UseAccordionStateOptions = {},
+): UseAccordionStateReturn {
+  const { allowMultiple = false, defaultExpanded } = options;
+
+  // Initialize expanded values from default
+  const getInitialExpanded = (): Set<string> => {
+    if (!defaultExpanded) return new Set();
+    if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+    return new Set([defaultExpanded]);
+  };
+
+  const [expandedValues, setExpandedValues] =
+    React.useState<Set<string>>(getInitialExpanded);
+  const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+
+  const hasAnyExpanded = React.useMemo(
+    () => isAllExpanded || expandedValues.size > 0,
+    [isAllExpanded, expandedValues],
+  );
+
+  const toggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      setIsAllExpanded(false);
+      setExpandedValues(new Set());
+    } else {
+      setIsAllExpanded(true);
+      setExpandedValues(new Set());
+    }
+  }, [hasAnyExpanded]);
+
+  return {
+    expandedValues,
+    setExpandedValues,
+    hasAnyExpanded,
+    toggleAll,
+  };
+}
+
+// Accordion (Root Component)
+interface AccordionProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Allow multiple items to be expanded at once (default: false for accordion behavior) */
+  allowMultiple?: boolean;
+  /** Initially expanded item value(s) (uncontrolled) */
+  defaultExpanded?: string | string[];
+  /** Controlled expanded values */
+  expandedValues?: Set<string>;
+  /** Controlled callback when expanded values change */
+  onExpandedChange?: (values: Set<string>) => void;
+}
+
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      allowMultiple = false,
+      defaultExpanded,
+      expandedValues: controlledExpandedValues,
+      onExpandedChange,
+      children,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    // Initialize expanded values from default
+    const getInitialExpanded = (): Set<string> => {
+      if (!defaultExpanded) return new Set();
+      if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded);
+      return new Set([defaultExpanded]);
+    };
+
+    const [uncontrolledExpandedValues, setUncontrolledExpandedValues] =
+      React.useState<Set<string>>(getInitialExpanded);
+    const [isAllExpanded, setIsAllExpanded] = React.useState(false);
+
+    // Determine if controlled
+    const isControlled = controlledExpandedValues !== undefined;
+    const expandedValues = isControlled
+      ? controlledExpandedValues
+      : uncontrolledExpandedValues;
+
+    // Check if any item is expanded
+    const hasAnyExpanded = React.useMemo(
+      () => isAllExpanded || expandedValues.size > 0,
+      [isAllExpanded, expandedValues],
+    );
+
+    // Check if a specific item is expanded
+    const isExpanded = React.useCallback(
+      (value: string): boolean => isAllExpanded || expandedValues.has(value),
+      [isAllExpanded, expandedValues],
+    );
+
+    // Toggle a specific item
+    const toggle = React.useCallback(
+      (value: string) => {
+        const newValues = new Set(expandedValues);
+        if (newValues.has(value)) {
+          newValues.delete(value);
+        } else {
+          if (!allowMultiple) {
+            newValues.clear(); // Accordion mode: close all others
+          }
+          newValues.add(value);
+        }
+
+        if (!isControlled) {
+          setUncontrolledExpandedValues(newValues);
+        }
+        onExpandedChange?.(newValues);
+        setIsAllExpanded(false);
+      },
+      [allowMultiple, expandedValues, isControlled, onExpandedChange],
+    );
+
+    // Expand all items
+    const expandAll = React.useCallback(() => {
+      setIsAllExpanded(true);
+      const emptySet = new Set<string>();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange?.(emptySet);
+    }, [isControlled, onExpandedChange]);
+
+    // Collapse all items
+    const collapseAll = React.useCallback(() => {
+      setIsAllExpanded(false);
+      const emptySet = new Set<string>();
+      if (!isControlled) {
+        setUncontrolledExpandedValues(emptySet);
+      }
+      onExpandedChange?.(emptySet);
+    }, [isControlled, onExpandedChange]);
+
+    const contextValue = React.useMemo(
+      () => ({
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple,
+      }),
+      [
+        expandedValues,
+        isExpanded,
+        toggle,
+        expandAll,
+        collapseAll,
+        hasAnyExpanded,
+        allowMultiple,
+      ],
+    );
+
+    return (
+      <AccordionContext.Provider value={contextValue}>
+        <div ref={ref} className={cn(className)} {...props}>
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    );
+  },
+);
+
+Accordion.displayName = "Accordion";
+
+// AccordionSectionHeader
+interface AccordionSectionHeaderProps {
+  /** Header title text */
+  title: string;
+  /** Whether any items are expanded */
+  hasExpanded?: boolean;
+  /** Toggle all callback */
+  onToggleAll?: () => void;
+  /** Optional className for the container */
+  className?: string;
+}
+
+const AccordionSectionHeader = React.forwardRef<
+  HTMLDivElement,
+  AccordionSectionHeaderProps
+>(({ title, hasExpanded, onToggleAll, className }, ref) => {
+  return (
+    <div ref={ref} className={cn(className)}>
+      <h2>{title}</h2>
+
+      {onToggleAll && (
+        <motion.div
+          animate={{ rotate: hasExpanded ? 180 : 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          <Button size="icon" onClick={onToggleAll}>
+            <UtilityChevronDown />
+          </Button>
+        </motion.div>
+      )}
+    </div>
+  );
+});
+
+AccordionSectionHeader.displayName = "AccordionSectionHeader";
+
+// AccordionHeaderRow (inside Accordion with context access)
+interface AccordionHeaderRowProps {
+  /** Header title text */
+  title: string;
+  /** Optional className for the container */
+  className?: string;
+}
+
+const AccordionHeaderRow = React.forwardRef<
+  HTMLDivElement,
+  AccordionHeaderRowProps
+>(({ title, className }, ref) => {
+  const { hasAnyExpanded, expandAll, collapseAll } = useAccordion();
+
+  const handleToggleAll = React.useCallback(() => {
+    if (hasAnyExpanded) {
+      collapseAll();
+    } else {
+      expandAll();
+    }
+  }, [hasAnyExpanded, collapseAll, expandAll]);
+
+  return (
+    <div ref={ref} className={cn(className)}>
+      <h2>{title}</h2>
+      <motion.div
+        animate={{ rotate: hasAnyExpanded ? 180 : 0 }}
+        transition={{ duration: 0.2 }}
+        style={{ willChange: "transform" }}
+      >
+        <Button size="icon" onClick={handleToggleAll}>
+          <UtilityChevronDown />
+        </Button>
+      </motion.div>
+    </div>
+  );
+});
+
+AccordionHeaderRow.displayName = "AccordionHeaderRow";
+
+// AccordionItem
+interface AccordionItemProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Unique value for this item */
+  value: string;
+}
+
+const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
+  ({ value, children, className, ...props }, ref) => {
+    const { isExpanded: isExpandedFn } = useAccordion();
+    const isExpanded = isExpandedFn(value);
+
+    const itemContextValue = React.useMemo(
+      () => ({ value, isExpanded }),
+      [value, isExpanded],
+    );
+
+    return (
+      <AccordionItemContext.Provider value={itemContextValue}>
+        <div ref={ref} className={cn(className)} {...props}>
+          {children}
+        </div>
+      </AccordionItemContext.Provider>
+    );
+  },
+);
 
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("accordion-item", className)}
-    {...props}
-  />
-));
 AccordionItem.displayName = "AccordionItem";
 
+// AccordionHeader
+type AccordionHeaderProps = React.ComponentPropsWithoutRef<"div">;
+
+const AccordionHeader = React.forwardRef<HTMLDivElement, AccordionHeaderProps>(
+  ({ children, className, onClick, ...props }, ref) => {
+    return (
+      <div ref={ref} onClick={onClick} className={cn(className)} {...props}>
+        {children}
+      </div>
+    );
+  },
+);
+
+AccordionHeader.displayName = "AccordionHeader";
+
+// AccordionTrigger (Chevron Button)
+type AccordionTriggerProps = React.ComponentPropsWithoutRef<"button">;
+
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="accordion-header">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn("accordion-trigger", className)}
-      {...props}
+  HTMLButtonElement,
+  AccordionTriggerProps
+>(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useAccordion();
+  const { value, isExpanded } = useAccordionItem();
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation(); // Prevent header click
+      toggle(value);
+      onClick?.(e);
+    },
+    [toggle, value, onClick],
+  );
+
+  return (
+    <motion.div
+      animate={{ rotate: isExpanded ? 180 : 0 }}
+      transition={{ duration: 0.2 }}
+      style={{ willChange: "transform" }}
     >
+      <Button
+        ref={ref}
+        size="icon"
+        variant="clear"
+        onClick={handleClick}
+        className={cn(className)}
+        {...props}
+      >
+        <UtilityChevronDown />
+      </Button>
+    </motion.div>
+  );
+});
+
+AccordionTrigger.displayName = "AccordionTrigger";
+
+// AccordionContent (Expandable Content Area)
+type AccordionContentProps = React.ComponentPropsWithoutRef<"div">;
+
+const AccordionContent = React.forwardRef<HTMLDivElement, AccordionContentProps>(
+  ({ children, className, ...props }, ref) => {
+    const { isExpanded } = useAccordionItem();
+
+    return (
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
+            className={cn(className)}
+            style={{ willChange: "opacity" }}
+          >
+            <div ref={ref} {...props}>
+              {children}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    );
+  },
+);
+
+AccordionContent.displayName = "AccordionContent";
+
+// AccordionListRow (for nested items)
+interface AccordionListRowProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Optional icon element */
+  icon?: React.ReactNode;
+  /** Optional badge element */
+  badge?: React.ReactNode;
+  /** Row title */
+  title: string;
+  /** Optional title className */
+  titleClassName?: string;
+  /** Optional right-side content */
+  rightContent?: React.ReactNode;
+  /** Visual variant */
+  variant?: "default" | "nested";
+}
+
+const AccordionListRow = React.forwardRef<HTMLDivElement, AccordionListRowProps>(
+  (
+    {
+      icon,
+      badge,
+      title,
+      titleClassName,
+      rightContent,
+      onClick,
+      className,
+      variant = "default",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div ref={ref} onClick={onClick} className={cn(className)} {...props}>
+        {icon}
+        {badge}
+        <span className={cn(titleClassName)}>{title}</span>
+        {rightContent}
+      </div>
+    );
+  },
+);
+
+AccordionListRow.displayName = "AccordionListRow";
+
+type AccordionContainerProps = React.ComponentPropsWithoutRef<"section">;
+
+const AccordionContainer = React.forwardRef<
+  HTMLElement,
+  AccordionContainerProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <section ref={ref} className={cn(className)} {...props}>
       {children}
-      <ChevronDown className="accordion-chevron" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="accordion-content"
-    {...props}
-  >
-    <div className={cn("accordion-content-inner", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+    </section>
+  );
+});
+
+AccordionContainer.displayName = "AccordionContainer";
+
+export {
+  useAccordionState,
+  useAccordion,
+  useAccordionItem,
+  Accordion,
+  AccordionSectionHeader,
+  AccordionHeaderRow,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent,
+  AccordionListRow,
+  AccordionContainer,
+};

package/client/components/ui/label.tsx

@@ -13,10 +13,10 @@ const Label = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), "overline-medium", className)}
+    className={cn(labelVariants(), className)}
     {...props}
   >
-    {children}
+    <div className="overline-medium"> {children}</div>
   </LabelPrimitive.Root>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;

package/client/components/ui/tag.tsx

@@ -2,44 +2,53 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export type TagStatus = "todo" | "low" | "medium" | "high" | "done";
+export type TagVariant = "text" | "code";
 
 export interface TagProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
+  /** Visual variant - "text" for normal tags, "code" for code badges */
+  variant?: TagVariant;
+  /** Active state for toggle behavior in forms/filters */
   active?: boolean;
+  /** Status for status-specific styling (overrides variant) */
   status?: TagStatus;
-  variant?: "light" | "dark";
+  /** Color scheme for status tags */
+  colorScheme?: "light" | "dark";
   onClick?: () => void;
 }
 
 const getStatusClass = (
   status: TagStatus,
-  variant: "light" | "dark" = "light",
+  colorScheme: "light" | "dark" = "light",
 ) => {
-  return `status-tag tag--${variant}-${status}`;
+  return `status-tag tag--${colorScheme}-${status}`;
 };
 
 export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
   (
     {
       children,
+      variant = "text",
       active = false,
       status,
-      variant = "light",
+      colorScheme = "light",
       className,
+      style,
       onClick,
       ...props
     },
     ref,
   ) => {
-    // Status tag styling
+    // Status tag styling (highest priority)
     if (status) {
-      const statusClass = getStatusClass(status, variant);
+      const statusClass = getStatusClass(status, colorScheme);
       return (
         <button
           ref={ref}
           onClick={onClick}
           className={cn("overline-medium", statusClass, className)}
+          style={style}
           {...props}
         >
           {children}
@@ -47,7 +56,24 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
       );
     }
 
-    // Dual-state general purpose tag styling
+    // Code variant - for code badges like "C1", "A3"
+    if (variant === "code") {
+      return (
+        <button
+          ref={ref}
+          onClick={onClick}
+          className={cn("tag-code", className)}
+          style={style}
+          {...props}
+        >
+          <span className="number-small font-semibold" style={{ color: "inherit" }}>
+            {children}
+          </span>
+        </button>
+      );
+    }
+
+    // Text variant (default) - general purpose tag for forms/filters
     return (
       <button
         ref={ref}
@@ -57,6 +83,7 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
           active ? "tag-general--active" : "tag-general--inactive",
           className,
         )}
+        style={style}
         {...props}
       >
         {children}

package/client/global.css

@@ -1780,6 +1780,34 @@ body {
   background-color: var(--color-blue-200, #cbe0f1);
 }
 
+/* Tag Code Variant - for code badges like "C1", "A3" */
+.tag-code {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  width: 3rem;
+  border-radius: calc(var(--radius-sm, 6px));
+  flex-shrink: 0;
+  border: 1.5px solid currentColor;
+  padding-left: 1px;
+  padding-right: 1px;
+  background: transparent;
+  cursor: pointer;
+}
+
+.tag-code:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px hsl(var(--ring)),
+    0 0 0 4px var(--color-white, #fff);
+}
+
+.tag-code:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* Toggle/Segmented Control Styles */
 .toggle {
   display: inline-flex;