@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/components/ui/app-bar.tsx

@@ -0,0 +1,299 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// ─── AppBar Root ────────────────────────────────────────────────────────────
+
+export interface AppBarProps extends React.HTMLAttributes<HTMLElement> {
+  /** Collapses the bar to show only the prepend slot */
+  collapse?: boolean;
+  /** Rounds the corners of the bar */
+  rounded?: boolean;
+  /** Elevates the bar with a shadow */
+  elevated?: boolean;
+  /** Makes the bar flat (no shadow, no border) */
+  flat?: boolean;
+  /** Renders bar as fixed (default) or sticky */
+  position?: "fixed" | "sticky" | "relative" | "static";
+  /** Color / surface variant */
+  color?: "default" | "primary" | "transparent";
+  /**
+   * Density of the bar — controls height.
+   * - "default"     → 64px
+   * - "comfortable" → 56px
+   * - "compact"     → 48px
+   * - "prominent"   → 128px (title sits at the bottom)
+   */
+  density?: "default" | "comfortable" | "compact" | "prominent";
+  /**
+   * URL for a background image on the app bar.
+   * Pair with `imageOverlay` for a gradient on top.
+   */
+  image?: string;
+  /**
+   * CSS gradient string applied as an overlay on top of the `image`.
+   * Example: "to top right, rgba(19,84,122,.8), rgba(128,208,199,.8)"
+   * Renders as: linear-gradient(<value>)
+   */
+  imageOverlay?: string;
+}
+
+const DENSITY_HEIGHT: Record<
+  NonNullable<AppBarProps["density"]>,
+  number
+> = {
+  default: 64,
+  comfortable: 56,
+  compact: 48,
+  prominent: 128,
+};
+
+const AppBar = React.forwardRef<HTMLElement, AppBarProps>(
+  (
+    {
+      className,
+      children,
+      collapse = false,
+      rounded = false,
+      elevated = false,
+      flat = false,
+      position = "fixed",
+      color = "default",
+      density = "default",
+      image,
+      imageOverlay,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const height = DENSITY_HEIGHT[density];
+    const isProminent = density === "prominent";
+
+    return (
+      <header
+        ref={ref}
+        role="banner"
+        style={{
+          height: collapse ? undefined : height,
+          ...style,
+        }}
+        className={cn(
+          "app-bar",
+          // position
+          position === "fixed" && "app-bar--fixed",
+          position === "sticky" && "app-bar--sticky",
+          position === "relative" && "app-bar--relative",
+          position === "static" && "app-bar--static",
+          // color variants
+          color === "primary" && "app-bar--primary",
+          color === "transparent" && "app-bar--transparent",
+          // density
+          density === "comfortable" && "app-bar--comfortable",
+          density === "compact" && "app-bar--compact",
+          isProminent && "app-bar--prominent",
+          // modifiers
+          rounded && "app-bar--rounded",
+          elevated && "app-bar--elevated",
+          flat && "app-bar--flat",
+          collapse && "app-bar--collapse",
+          // image
+          image && "app-bar--image",
+          className
+        )}
+        {...props}
+      >
+        {/* Background image layer */}
+        {image && (
+          <span
+            className="app-bar-image-layer"
+            style={{ backgroundImage: `url(${image})` }}
+            aria-hidden="true"
+          >
+            {imageOverlay && (
+              <span
+                className="app-bar-image-overlay"
+                style={{
+                  background: `linear-gradient(${imageOverlay})`,
+                }}
+              />
+            )}
+          </span>
+        )}
+
+        {/* Prominent layout: split children into top-row (prepend/append)
+            and bottom-row (title) so the title sits at the bottom */}
+        {isProminent ? (
+          <ProminentLayout>{children}</ProminentLayout>
+        ) : (
+          children
+        )}
+      </header>
+    );
+  }
+);
+AppBar.displayName = "AppBar";
+
+// ─── AppBarNavIcon ───────────────────────────────────────────────────────────
+
+export interface AppBarNavIconProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Custom icon; defaults to hamburger menu */
+  icon?: React.ReactNode;
+}
+
+const AppBarNavIcon = React.forwardRef<HTMLButtonElement, AppBarNavIconProps>(
+  ({ className, icon, children, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      aria-label="Open navigation menu"
+      className={cn("app-bar-nav-icon", className)}
+      {...props}
+    >
+      {children ?? icon ?? <HamburgerIcon />}
+    </button>
+  )
+);
+AppBarNavIcon.displayName = "AppBarNavIcon";
+
+// ─── AppBarTitle ─────────────────────────────────────────────────────────────
+
+export interface AppBarTitleProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AppBarTitle = React.forwardRef<HTMLDivElement, AppBarTitleProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("app-bar-title", className)}
+      {...props}
+    />
+  )
+);
+AppBarTitle.displayName = "AppBarTitle";
+
+// ─── AppBarPrepend ───────────────────────────────────────────────────────────
+
+export interface AppBarPrependProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AppBarPrepend = React.forwardRef<HTMLDivElement, AppBarPrependProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("app-bar-prepend", className)}
+      {...props}
+    />
+  )
+);
+AppBarPrepend.displayName = "AppBarPrepend";
+
+// ─── AppBarAppend ─────────────────────────────────────────────────────────────
+
+export interface AppBarAppendProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AppBarAppend = React.forwardRef<HTMLDivElement, AppBarAppendProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("app-bar-append", className)}
+      {...props}
+    />
+  )
+);
+AppBarAppend.displayName = "AppBarAppend";
+
+// ─── AppBarContent (fills remaining horizontal space) ────────────────────────
+
+export interface AppBarContentProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+const AppBarContent = React.forwardRef<HTMLDivElement, AppBarContentProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("app-bar-content", className)}
+      {...props}
+    />
+  )
+);
+AppBarContent.displayName = "AppBarContent";
+
+// ─── ProminentLayout helper ───────────────────────────────────────────────
+// Splits children into two rows: prepend+append at top, title at bottom.
+// Matches Vuetify's prominent bar layout.
+
+function ProminentLayout({ children }: { children: React.ReactNode }) {
+  const kids = React.Children.toArray(children);
+
+  const topKids = kids.filter((child) => {
+    if (!React.isValidElement(child)) return false;
+    const name =
+      (child.type as { displayName?: string }).displayName ?? "";
+    return name === "AppBarPrepend" || name === "AppBarAppend";
+  });
+
+  const bottomKids = kids.filter((child) => {
+    if (!React.isValidElement(child)) return false;
+    const name =
+      (child.type as { displayName?: string }).displayName ?? "";
+    return name === "AppBarTitle" || name === "AppBarContent";
+  });
+
+  // Anything not matched falls into the top row
+  const otherKids = kids.filter((child) => {
+    if (!React.isValidElement(child)) return true;
+    const name =
+      (child.type as { displayName?: string }).displayName ?? "";
+    return ![
+      "AppBarPrepend",
+      "AppBarAppend",
+      "AppBarTitle",
+      "AppBarContent",
+    ].includes(name);
+  });
+
+  return (
+    <span className="app-bar-prominent-inner">
+      <span className="app-bar-prominent-top">
+        {topKids}
+        {otherKids}
+      </span>
+      <span className="app-bar-prominent-bottom">{bottomKids}</span>
+    </span>
+  );
+}
+
+// ─── Internal helpers ────────────────────────────────────────────────────────
+
+function HamburgerIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="4" y1="6" x2="20" y2="6" />
+      <line x1="4" y1="12" x2="20" y2="12" />
+      <line x1="4" y1="18" x2="20" y2="18" />
+    </svg>
+  );
+}
+
+// ─── Exports ─────────────────────────────────────────────────────────────────
+
+export {
+  AppBar,
+  AppBarNavIcon,
+  AppBarTitle,
+  AppBarPrepend,
+  AppBarAppend,
+  AppBarContent,
+};

package/client/components/ui/avatar-identity.tsx

@@ -0,0 +1,122 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import placeholderIcon from "@/assets/avatar-identity/placeholder-icon.svg";
+
+const avatarIdentityVariants = cva("avatar-identity", {
+  variants: {
+    size: {
+      xlarge: "avatar-identity--xlarge",
+      large: "avatar-identity--large",
+      medium: "avatar-identity--medium",
+    },
+    textDirection: {
+      right: "avatar-identity--right",
+      left: "avatar-identity--left",
+    },
+  },
+  defaultVariants: {
+    size: "xlarge",
+    textDirection: "right",
+  },
+});
+
+export type AvatarIdentitySize = NonNullable<
+  VariantProps<typeof avatarIdentityVariants>["size"]
+>;
+export type AvatarIdentityTextDirection = NonNullable<
+  VariantProps<typeof avatarIdentityVariants>["textDirection"]
+>;
+export type AvatarIdentityVariant = "placeholder" | "initials" | "image";
+
+export interface AvatarIdentityProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof avatarIdentityVariants> {
+  /** Face treatment from Figma `style`. */
+  variant?: AvatarIdentityVariant;
+  name?: string;
+  email?: string;
+  /** Override initials. Defaults to the first letters of `name`. */
+  initials?: string;
+  src?: string;
+  alt?: string;
+  showText?: boolean;
+}
+
+function initialsFromName(name: string) {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("")
+    .toUpperCase();
+}
+
+const AvatarIdentity = React.forwardRef<HTMLDivElement, AvatarIdentityProps>(
+  (
+    {
+      className,
+      size,
+      textDirection,
+      variant = "placeholder",
+      name = "",
+      email = "",
+      initials,
+      src,
+      alt,
+      showText = true,
+      ...props
+    },
+    ref,
+  ) => {
+    const face = variant === "image" && !src ? "placeholder" : variant;
+    const letters = (initials || initialsFromName(name) || "JD").slice(0, 2);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(avatarIdentityVariants({ size, textDirection }), className)}
+        {...props}
+      >
+        <div className="avatar-identity__face" data-face={face}>
+          {face === "image" && src ? (
+            <img
+              className="avatar-identity__photo"
+              src={src}
+              alt={alt || name}
+            />
+          ) : null}
+
+          {face === "initials" ? (
+            <span className="avatar-identity__initials" aria-hidden={showText}>
+              {letters}
+            </span>
+          ) : null}
+
+          {face === "placeholder" ? (
+            <img
+              className="avatar-identity__placeholder-icon"
+              src={placeholderIcon}
+              alt=""
+            />
+          ) : null}
+
+          {face !== "placeholder" ? (
+            <span className="avatar-identity__border" aria-hidden="true" />
+          ) : null}
+        </div>
+
+        {showText ? (
+          <div className="avatar-identity__text">
+            <p className="avatar-identity__name">{name}</p>
+            <p className="avatar-identity__email">{email}</p>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
+AvatarIdentity.displayName = "AvatarIdentity";
+
+export { AvatarIdentity, avatarIdentityVariants };

package/client/components/ui/banner.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+const bannerVariants = cva("banner", {
+  variants: {
+    variant: {
+      default: "banner--default",
+      info: "banner--info",
+      success: "banner--success",
+      warning: "banner--warning",
+      destructive: "banner--destructive",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+// ─── Banner Root ──────────────────────────────────────────────────────────────
+
+export interface BannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bannerVariants> {
+  /** Renders the banner fixed to the top of the viewport */
+  sticky?: boolean;
+  /** Called when the close button is clicked — also renders the close button */
+  onClose?: () => void;
+}
+
+const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
+  ({ className, variant, sticky = false, onClose, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="banner"
+      className={cn(bannerVariants({ variant }), sticky && "banner--sticky", className)}
+      {...props}
+    >
+      <div className="banner-content">{children}</div>
+      {onClose && (
+        <button
+          type="button"
+          className="banner-close"
+          aria-label="Dismiss banner"
+          onClick={onClose}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+);
+Banner.displayName = "Banner";
+
+// ─── BannerIcon ───────────────────────────────────────────────────────────────
+
+const BannerIcon = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={cn("banner-icon", className)} aria-hidden="true" {...props} />
+  )
+);
+BannerIcon.displayName = "BannerIcon";
+
+// ─── BannerTitle ──────────────────────────────────────────────────────────────
+
+const BannerTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("banner-title", className)} {...props} />
+  )
+);
+BannerTitle.displayName = "BannerTitle";
+
+// ─── BannerDescription ────────────────────────────────────────────────────────
+
+const BannerDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("banner-description", className)} {...props} />
+  )
+);
+BannerDescription.displayName = "BannerDescription";
+
+// ─── BannerText ───────────────────────────────────────────────────────────────
+// Wraps BannerTitle + BannerDescription so they stack vertically (2-line / 3-line layouts).
+
+const BannerText = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("banner-text", className)} {...props} />
+  )
+);
+BannerText.displayName = "BannerText";
+
+// ─── BannerAction ─────────────────────────────────────────────────────────────
+
+const BannerAction = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => (
+    <button ref={ref} type="button" className={cn("banner-action", className)} {...props} />
+  )
+);
+BannerAction.displayName = "BannerAction";
+
+// ─── Exports ──────────────────────────────────────────────────────────────────
+
+export { Banner, BannerIcon, BannerTitle, BannerText, BannerDescription, BannerAction, bannerVariants };