@syscore/ui-library 1.25.0 → 2.0.0-beta-publish-workflow-beta.1

package/client/components/ui/bottom-navigation.tsx

@@ -0,0 +1,223 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+interface BottomNavContextValue {
+  value: string | number | null;
+  onChange: (val: string | number) => void;
+  grow: boolean;
+  horizontal: boolean;
+  shift: boolean;
+  activeColor: string | undefined;
+}
+
+const BottomNavContext = React.createContext<BottomNavContextValue>({
+  value: null,
+  onChange: () => {},
+  grow: false,
+  horizontal: false,
+  shift: false,
+  activeColor: undefined,
+});
+
+// ─── BottomNavigation Root ───────────────────────────────────────────────────
+
+export interface BottomNavigationProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+  /**
+   * The currently active item value.
+   * Controlled: pass value + onChange together.
+   */
+  value?: string | number;
+  /** Default selected value for uncontrolled usage */
+  defaultValue?: string | number;
+  /** Fires when the active item changes */
+  onChange?: (value: string | number) => void;
+  /**
+   * Active item highlight color (CSS color or var token).
+   * Applies to icon + label of the active BottomNavigationItem.
+   */
+  color?: string;
+  /**
+   * Forces each item to fill all available width (max 168px per MD spec).
+   */
+  grow?: boolean;
+  /**
+   * Positions icon and label side-by-side (inline) instead of stacked.
+   */
+  horizontal?: boolean;
+  /**
+   * Hides labels of inactive items; only the active item shows its label.
+   * Labels must be wrapped in a <span> inside BottomNavigationItem.
+   */
+  shift?: boolean;
+  /**
+   * Controls visibility of the bar.
+   * When false the bar slides off-screen (bottom).
+   */
+  active?: boolean;
+  /** Elevates with a shadow */
+  elevated?: boolean;
+}
+
+const BottomNavigation = React.forwardRef<
+  HTMLElement,
+  BottomNavigationProps
+>(
+  (
+    {
+      className,
+      children,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      color,
+      grow = false,
+      horizontal = false,
+      shift = false,
+      active = true,
+      elevated = false,
+      ...props
+    },
+    ref
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<
+      string | number | null
+    >(defaultValue ?? null);
+
+    const isControlled = valueProp !== undefined;
+    const currentValue = isControlled ? valueProp : internalValue;
+
+    const handleChange = React.useCallback(
+      (val: string | number) => {
+        if (!isControlled) setInternalValue(val);
+        onChange?.(val);
+      },
+      [isControlled, onChange]
+    );
+
+    return (
+      <BottomNavContext.Provider
+        value={{
+          value: currentValue ?? null,
+          onChange: handleChange,
+          grow,
+          horizontal,
+          shift,
+          activeColor: color,
+        }}
+      >
+        <nav
+          ref={ref}
+          role="navigation"
+          aria-label="Bottom navigation"
+          className={cn(
+            "bottom-nav",
+            grow && "bottom-nav--grow",
+            horizontal && "bottom-nav--horizontal",
+            shift && "bottom-nav--shift",
+            !active && "bottom-nav--hidden",
+            elevated && "bottom-nav--elevated",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </nav>
+      </BottomNavContext.Provider>
+    );
+  }
+);
+BottomNavigation.displayName = "BottomNavigation";
+
+// ─── BottomNavigationItem ─────────────────────────────────────────────────────
+
+export interface BottomNavigationItemProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Unique value for this item. If omitted, the item's index is used
+   * (assigned automatically by BottomNavigationGroup, see below).
+   */
+  value?: string | number;
+  /** Index injected by BottomNavigationGroup — do not set manually */
+  _index?: number;
+}
+
+const BottomNavigationItem = React.forwardRef<
+  HTMLButtonElement,
+  BottomNavigationItemProps
+>(({ className, children, value: valueProp, _index, style, ...props }, ref) => {
+  const { value, onChange, grow, horizontal, shift, activeColor } =
+    React.useContext(BottomNavContext);
+
+  const itemValue = valueProp ?? _index ?? 0;
+  const isActive = value === itemValue;
+
+  const activeStyle =
+    isActive && activeColor ? ({ "--bottom-nav-active-color": activeColor } as React.CSSProperties) : {};
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={isActive}
+      aria-current={isActive ? "page" : undefined}
+      onClick={() => onChange(itemValue)}
+      style={{ ...activeStyle, ...style }}
+      className={cn(
+        "bottom-nav-item",
+        isActive && "bottom-nav-item--active",
+        grow && "bottom-nav-item--grow",
+        horizontal && "bottom-nav-item--horizontal",
+        shift && "bottom-nav-item--shift",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+BottomNavigationItem.displayName = "BottomNavigationItem";
+
+// ─── BottomNavigationGroup ───────────────────────────────────────────────────
+// Thin wrapper that injects _index into each BottomNavigationItem child
+// so unvalued items still participate in selection by index.
+
+interface BottomNavigationGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const BottomNavigationGroup = React.forwardRef<
+  HTMLDivElement,
+  BottomNavigationGroupProps
+>(({ children, className, ...props }, ref) => {
+  const indexedChildren = React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child;
+    const el = child as React.ReactElement<BottomNavigationItemProps>;
+    if (
+      (el.type as { displayName?: string }).displayName ===
+      "BottomNavigationItem"
+    ) {
+      return React.cloneElement(el, { _index: index });
+    }
+    return child;
+  });
+
+  return (
+    <div
+      ref={ref}
+      role="tablist"
+      className={cn("bottom-nav-group", className)}
+      {...props}
+    >
+      {indexedChildren}
+    </div>
+  );
+});
+BottomNavigationGroup.displayName = "BottomNavigationGroup";
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export { BottomNavigation, BottomNavigationItem, BottomNavigationGroup };

package/client/components/ui/breadcrumb-trail.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+import {
+  CodeBadge,
+  type CodeBadgeProps,
+  type CodeBadgeVariant,
+  type CodeBadgeConcept,
+} from "@/components/ui/code-badge";
+import iconSeparator from "@/assets/breadcrumb/icon-separator.svg";
+import iconHome from "@/assets/breadcrumb/icon-home.svg";
+import iconEllipsis from "@/assets/breadcrumb/icon-ellipsis.svg";
+
+const BreadcrumbTrail = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav">
+>(({ className, ...props }, ref) => (
+  <nav
+    ref={ref}
+    aria-label="breadcrumb"
+    className={cn("breadcrumb-trail", className)}
+    {...props}
+  />
+));
+BreadcrumbTrail.displayName = "BreadcrumbTrail";
+
+const BreadcrumbTrailList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn("breadcrumb-trail-list font-mazzardSoft", className)}
+    {...props}
+  />
+));
+BreadcrumbTrailList.displayName = "BreadcrumbTrailList";
+
+const BreadcrumbTrailItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("breadcrumb-trail-item", className)}
+    {...props}
+  />
+));
+BreadcrumbTrailItem.displayName = "BreadcrumbTrailItem";
+
+const BreadcrumbTrailLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("breadcrumb-trail-link", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbTrailLink.displayName = "BreadcrumbTrailLink";
+
+const BreadcrumbTrailPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("breadcrumb-trail-page", className)}
+    {...props}
+  />
+));
+BreadcrumbTrailPage.displayName = "BreadcrumbTrailPage";
+
+const BreadcrumbTrailSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("breadcrumb-trail-separator", className)}
+    {...props}
+  >
+    {children ?? (
+      <img
+        src={iconSeparator}
+        alt=""
+        className="breadcrumb-trail-separator-icon"
+        width={4.5}
+        height={7.5}
+      />
+    )}
+  </li>
+);
+BreadcrumbTrailSeparator.displayName = "BreadcrumbTrailSeparator";
+
+const BreadcrumbTrailHome = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span className={cn("breadcrumb-trail-home", className)} {...props}>
+    <img
+      src={iconHome}
+      alt="Home"
+      className="breadcrumb-trail-home-icon"
+      width={14}
+      height={13.5475}
+    />
+  </span>
+);
+BreadcrumbTrailHome.displayName = "BreadcrumbTrailHome";
+
+const BreadcrumbTrailEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("breadcrumb-trail-ellipsis", className)}
+    {...props}
+  >
+    <img
+      src={iconEllipsis}
+      alt=""
+      className="breadcrumb-trail-ellipsis-icon"
+      width={16}
+      height={16}
+    />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbTrailEllipsis.displayName = "BreadcrumbTrailEllipsis";
+
+/**
+ * Thin alias over the shared CodeBadge, which the table also uses.
+ * Kept so existing breadcrumb call sites keep working.
+ */
+export type BreadcrumbTrailCodeVariant = CodeBadgeVariant;
+export type BreadcrumbTrailCodeConcept = CodeBadgeConcept;
+
+const BreadcrumbTrailCode = React.forwardRef<
+  HTMLSpanElement,
+  Omit<CodeBadgeProps, "tone">
+>((props, ref) => <CodeBadge ref={ref} tone="trail" {...props} />);
+BreadcrumbTrailCode.displayName = "BreadcrumbTrailCode";
+
+export {
+  BreadcrumbTrail,
+  BreadcrumbTrailList,
+  BreadcrumbTrailItem,
+  BreadcrumbTrailLink,
+  BreadcrumbTrailPage,
+  BreadcrumbTrailSeparator,
+  BreadcrumbTrailEllipsis,
+  BreadcrumbTrailHome,
+  BreadcrumbTrailCode,
+};

package/client/components/ui/button-v01.tsx

@@ -0,0 +1,238 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import iconDevice from "@/assets/button-v01/icon-device.svg";
+import iconClose from "@/assets/button-v01/icon-close.svg";
+import iconCheck from "@/assets/button-v01/icon-check.svg";
+import iconDelete from "@/assets/button-v01/icon-delete.svg";
+import iconBack from "@/assets/button-v01/icon-back.svg";
+
+export type ButtonV01Size = "large" | "medium" | "small";
+export type ButtonV01Type = "cta" | "utility" | "icon";
+export type ButtonV01Hierarchy = "primary" | "secondary" | "tertiary";
+export type ButtonV01Appearance = "solid" | "gradient" | "stroke";
+export type ButtonV01Theme = "default" | "light" | "transparent" | "color";
+export type ButtonV01Context =
+  | "default"
+  | "general"
+  | "tooltip"
+  | "confirm"
+  | "error"
+  | "cancel"
+  | "redirect"
+  | "done"
+  | "floating"
+  | "back";
+export type ButtonV01Icon = "none" | "check" | "close" | "delete" | "back";
+
+const buttonV01Variants = cva("button-v01 font-mazzardSoft", {
+  variants: {
+    size: {
+      large: "button-v01--large",
+      medium: "button-v01--medium",
+      small: "button-v01--small",
+    },
+  },
+});
+
+const ICON_SRC: Record<Exclude<ButtonV01Icon, "none">, string> = {
+  close: iconClose,
+  check: iconCheck,
+  delete: iconDelete,
+  back: iconBack,
+};
+
+function resolveLook({
+  type,
+  hierarchy,
+  appearance,
+  theme,
+  context,
+  icon,
+}: {
+  type: ButtonV01Type;
+  hierarchy: ButtonV01Hierarchy;
+  appearance: ButtonV01Appearance;
+  theme: ButtonV01Theme;
+  context: ButtonV01Context;
+  icon: ButtonV01Icon;
+}) {
+  if (type === "icon") {
+    if (theme === "transparent") return "button-v01--icon-transparent";
+    if (theme === "color") {
+      return icon === "check"
+        ? "button-v01--icon-success"
+        : "button-v01--icon-danger";
+    }
+    return "button-v01--icon-light";
+  }
+
+  // `general`, `cancel`, `done` and `back` deliberately fall through: in Figma
+  // they carry no look of their own. `general` resolves via Type/Hierarchy
+  // below, and the other three only ever appear on Icon buttons, handled above.
+  if (context === "floating") return "button-v01--floating";
+  if (context === "confirm") return "button-v01--confirm";
+  if (context === "error") return "button-v01--error";
+  if (context === "redirect") return "button-v01--redirect";
+  if (context === "tooltip") return "button-v01--tooltip";
+
+  if (type === "cta" && appearance === "gradient") return "button-v01--gradient";
+  if (type === "cta" && hierarchy === "secondary") {
+    return "button-v01--cta-secondary";
+  }
+  if (type === "cta" && hierarchy === "tertiary") {
+    return "button-v01--cta-tertiary";
+  }
+  if (type === "utility" && hierarchy === "secondary") {
+    return "button-v01--utility-secondary";
+  }
+  if (type === "utility" && hierarchy === "tertiary") {
+    return "button-v01--utility-tertiary";
+  }
+  if (type === "utility") return "button-v01--utility-primary";
+
+  return "button-v01--gradient";
+}
+
+function MaskIcon({
+  src,
+  className,
+}: {
+  src: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn("button-v01-mask", className)}
+      style={{
+        WebkitMaskImage: `url(${src})`,
+        maskImage: `url(${src})`,
+      }}
+      aria-hidden
+    />
+  );
+}
+
+function defaultLabel({
+  type,
+  hierarchy,
+  context,
+}: {
+  type: ButtonV01Type;
+  hierarchy: ButtonV01Hierarchy;
+  context: ButtonV01Context;
+}) {
+  if (type === "icon") return null;
+  if (context === "confirm") return "Confirm";
+  if (context === "error" || context === "tooltip") return "Retract";
+  if (type === "utility" && hierarchy === "primary" && context === "default") {
+    return "Utility";
+  }
+  return "Call to action";
+}
+
+export interface ButtonV01Props
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "style">,
+    VariantProps<typeof buttonV01Variants> {
+  /** Figma `Type`. */
+  typeVariant?: ButtonV01Type;
+  /** Figma `Hierarchy`. */
+  hierarchy?: ButtonV01Hierarchy;
+  /** Figma `Style`. */
+  appearance?: ButtonV01Appearance;
+  /** Figma `Theme`. */
+  theme?: ButtonV01Theme;
+  /** Figma `Context`. `toolti` in the file maps to `tooltip`. */
+  context?: ButtonV01Context;
+  /** Figma `Icon`. Used when `typeVariant="icon"`. */
+  icon?: ButtonV01Icon;
+  /** Replace the built-in leading/icon glyph. */
+  iconSlot?: React.ReactNode;
+}
+
+const ButtonV01 = React.forwardRef<HTMLButtonElement, ButtonV01Props>(
+  (
+    {
+      className,
+      size = "large",
+      typeVariant = "cta",
+      hierarchy = "primary",
+      appearance = "gradient",
+      theme = "default",
+      context = "default",
+      icon = "none",
+      iconSlot,
+      disabled,
+      children,
+      type = "button",
+      ...props
+    },
+    ref,
+  ) => {
+    const isIcon = typeVariant === "icon";
+    const isFloating = !isIcon && context === "floating";
+    const look = resolveLook({
+      type: typeVariant,
+      hierarchy,
+      appearance,
+      theme,
+      context,
+      icon,
+    });
+    const label = children ?? defaultLabel({ type: typeVariant, hierarchy, context });
+
+    const glyph = (() => {
+      if (iconSlot) return iconSlot;
+      if (isFloating) {
+        return (
+          <img
+            src={iconDevice}
+            alt=""
+            className="button-v01-device"
+            width={20}
+            height={19.0963}
+          />
+        );
+      }
+      if (isIcon && icon !== "none") {
+        return (
+          <MaskIcon
+            src={ICON_SRC[icon]}
+            className={cn(
+              "button-v01-glyph",
+              icon === "check" && "button-v01-glyph--check",
+              icon === "close" && "button-v01-glyph--close",
+              icon === "delete" && "button-v01-glyph--delete",
+              icon === "back" && "button-v01-glyph--back",
+            )}
+          />
+        );
+      }
+      return null;
+    })();
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        disabled={disabled}
+        className={cn(
+          buttonV01Variants({ size: isIcon ? undefined : (size ?? "large") }),
+          isIcon && "button-v01--icon",
+          look,
+          className,
+        )}
+        {...props}
+      >
+        {glyph}
+        {label != null && label !== "" ? (
+          <span className="button-v01-label">{label}</span>
+        ) : null}
+      </button>
+    );
+  },
+);
+ButtonV01.displayName = "ButtonV01";
+
+export { ButtonV01, buttonV01Variants };

package/client/components/ui/button.tsx

@@ -23,6 +23,8 @@ const buttonVariants = cva(
         "transparent-tertiary": "button--transparent-tertiary",
         "tooltip-primary": "button--tooltip-primary",
         "tooltip-secondary": "button--tooltip-secondary",
+        "tooltip-primary-light": "button--tooltip-primary-light",
+        "tooltip-secondary-light": "button--tooltip-secondary-light",
         
       },
       size: {