@syscore/ui-library 1.25.0 → 2.0.0

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/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 };

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 };